From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- files/fr/web/api/abortsignal/index.html | 98 - files/fr/web/api/abortsignal/index.md | 98 + .../web/api/analysernode/analysernode/index.html | 49 - .../fr/web/api/analysernode/analysernode/index.md | 49 + files/fr/web/api/analysernode/fftsize/index.html | 105 - files/fr/web/api/analysernode/fftsize/index.md | 105 + .../api/analysernode/frequencybincount/index.html | 88 - .../api/analysernode/frequencybincount/index.md | 88 + .../analysernode/getbytefrequencydata/index.html | 103 - .../api/analysernode/getbytefrequencydata/index.md | 103 + .../analysernode/getbytetimedomaindata/index.html | 114 - .../analysernode/getbytetimedomaindata/index.md | 114 + .../analysernode/getfloatfrequencydata/index.html | 105 - .../analysernode/getfloatfrequencydata/index.md | 105 + .../analysernode/getfloattimedomaindata/index.html | 111 - .../analysernode/getfloattimedomaindata/index.md | 111 + files/fr/web/api/analysernode/index.html | 178 - files/fr/web/api/analysernode/index.md | 178 + .../fr/web/api/analysernode/maxdecibels/index.html | 94 - files/fr/web/api/analysernode/maxdecibels/index.md | 94 + .../fr/web/api/analysernode/mindecibels/index.html | 94 - files/fr/web/api/analysernode/mindecibels/index.md | 94 + .../analysernode/smoothingtimeconstant/index.html | 99 - .../analysernode/smoothingtimeconstant/index.md | 99 + files/fr/web/api/animation/index.html | 122 - files/fr/web/api/animation/index.md | 122 + files/fr/web/api/animation/starttime/index.html | 40 - files/fr/web/api/animation/starttime/index.md | 40 + .../api/animationevent/animationevent/index.html | 65 - .../web/api/animationevent/animationevent/index.md | 65 + .../api/animationevent/animationname/index.html | 50 - .../web/api/animationevent/animationname/index.md | 50 + .../web/api/animationevent/elapsedtime/index.html | 52 - .../fr/web/api/animationevent/elapsedtime/index.md | 52 + files/fr/web/api/animationevent/index.html | 78 - files/fr/web/api/animationevent/index.md | 78 + .../api/animationevent/pseudoelement/index.html | 48 - .../web/api/animationevent/pseudoelement/index.md | 48 + files/fr/web/api/atob/index.html | 78 - files/fr/web/api/atob/index.md | 78 + files/fr/web/api/attr/index.html | 161 - files/fr/web/api/attr/index.md | 161 + files/fr/web/api/attr/localname/index.html | 85 - files/fr/web/api/attr/localname/index.md | 85 + files/fr/web/api/attr/namespaceuri/index.html | 74 - files/fr/web/api/attr/namespaceuri/index.md | 74 + files/fr/web/api/attr/prefix/index.html | 65 - files/fr/web/api/attr/prefix/index.md | 65 + .../fr/web/api/audiobuffer/audiobuffer/index.html | 49 - files/fr/web/api/audiobuffer/audiobuffer/index.md | 49 + .../web/api/audiobuffer/copyfromchannel/index.html | 62 - .../web/api/audiobuffer/copyfromchannel/index.md | 62 + .../web/api/audiobuffer/copytochannel/index.html | 60 - .../fr/web/api/audiobuffer/copytochannel/index.md | 60 + files/fr/web/api/audiobuffer/duration/index.html | 72 - files/fr/web/api/audiobuffer/duration/index.md | 72 + .../web/api/audiobuffer/getchanneldata/index.html | 98 - .../fr/web/api/audiobuffer/getchanneldata/index.md | 98 + files/fr/web/api/audiobuffer/index.html | 114 - files/fr/web/api/audiobuffer/index.md | 114 + files/fr/web/api/audiobuffer/length/index.html | 73 - files/fr/web/api/audiobuffer/length/index.md | 73 + .../api/audiobuffer/numberofchannels/index.html | 74 - .../web/api/audiobuffer/numberofchannels/index.md | 74 + files/fr/web/api/audiobuffer/samplerate/index.html | 74 - files/fr/web/api/audiobuffer/samplerate/index.md | 74 + .../api/audiobuffersourcenode/buffer/index.html | 73 - .../web/api/audiobuffersourcenode/buffer/index.md | 73 + .../api/audiobuffersourcenode/detune/index.html | 80 - .../web/api/audiobuffersourcenode/detune/index.md | 80 + files/fr/web/api/audiobuffersourcenode/index.html | 156 - files/fr/web/api/audiobuffersourcenode/index.md | 156 + .../web/api/audiobuffersourcenode/loop/index.html | 100 - .../fr/web/api/audiobuffersourcenode/loop/index.md | 100 + .../api/audiobuffersourcenode/loopend/index.html | 105 - .../web/api/audiobuffersourcenode/loopend/index.md | 105 + .../api/audiobuffersourcenode/loopstart/index.html | 97 - .../api/audiobuffersourcenode/loopstart/index.md | 97 + .../audiobuffersourcenode/playbackrate/index.html | 124 - .../audiobuffersourcenode/playbackrate/index.md | 124 + .../web/api/audiobuffersourcenode/start/index.html | 85 - .../web/api/audiobuffersourcenode/start/index.md | 85 + .../createmediaelementsource/index.html | 104 - .../audiocontext/createmediaelementsource/index.md | 104 + files/fr/web/api/audiocontext/index.html | 172 - files/fr/web/api/audiocontext/index.md | 172 + files/fr/web/api/audiolistener/index.html | 107 - files/fr/web/api/audiolistener/index.md | 107 + files/fr/web/api/audionode/index.html | 107 - files/fr/web/api/audionode/index.md | 107 + files/fr/web/api/audioparam/index.html | 112 - files/fr/web/api/audioparam/index.md | 112 + files/fr/web/api/audioprocessingevent/index.html | 95 - files/fr/web/api/audioprocessingevent/index.md | 95 + files/fr/web/api/audioworklet/index.html | 73 - files/fr/web/api/audioworklet/index.md | 73 + .../authenticatordata/index.html | 82 - .../authenticatordata/index.md | 82 + .../api/authenticatorassertionresponse/index.html | 67 - .../api/authenticatorassertionresponse/index.md | 67 + .../authenticatorattestationresponse/index.html | 55 - .../api/authenticatorattestationresponse/index.md | 55 + files/fr/web/api/authenticatorresponse/index.html | 57 - files/fr/web/api/authenticatorresponse/index.md | 57 + .../baseaudiocontext/createbiquadfilter/index.html | 86 - .../baseaudiocontext/createbiquadfilter/index.md | 86 + .../api/baseaudiocontext/createbuffer/index.html | 120 - .../web/api/baseaudiocontext/createbuffer/index.md | 120 + .../baseaudiocontext/createbuffersource/index.html | 93 - .../baseaudiocontext/createbuffersource/index.md | 93 + .../web/api/baseaudiocontext/creategain/index.html | 111 - .../web/api/baseaudiocontext/creategain/index.md | 111 + .../api/baseaudiocontext/createpanner/index.html | 157 - .../web/api/baseaudiocontext/createpanner/index.md | 157 + .../baseaudiocontext/createperiodicwave/index.html | 106 - .../baseaudiocontext/createperiodicwave/index.md | 106 + files/fr/web/api/baseaudiocontext/index.html | 136 - files/fr/web/api/baseaudiocontext/index.md | 136 + files/fr/web/api/battery_status_api/index.html | 104 - files/fr/web/api/battery_status_api/index.md | 104 + .../fr/web/api/batterymanager/charging/index.html | 63 - files/fr/web/api/batterymanager/charging/index.md | 63 + .../web/api/batterymanager/chargingtime/index.html | 69 - .../web/api/batterymanager/chargingtime/index.md | 69 + .../api/batterymanager/dischargingtime/index.html | 69 - .../api/batterymanager/dischargingtime/index.md | 69 + files/fr/web/api/batterymanager/index.html | 79 - files/fr/web/api/batterymanager/index.md | 79 + files/fr/web/api/batterymanager/level/index.html | 67 - files/fr/web/api/batterymanager/level/index.md | 67 + files/fr/web/api/beforeunloadevent/index.html | 93 - files/fr/web/api/beforeunloadevent/index.md | 93 + .../web/api/biquadfilternode/frequency/index.html | 83 - .../fr/web/api/biquadfilternode/frequency/index.md | 83 + files/fr/web/api/biquadfilternode/index.html | 173 - files/fr/web/api/biquadfilternode/index.md | 173 + files/fr/web/api/blob/blob/index.html | 77 - files/fr/web/api/blob/blob/index.md | 77 + files/fr/web/api/blob/index.html | 119 - files/fr/web/api/blob/index.md | 119 + files/fr/web/api/blob/size/index.html | 40 - files/fr/web/api/blob/size/index.md | 40 + files/fr/web/api/blob/type/index.html | 75 - files/fr/web/api/blob/type/index.md | 75 + files/fr/web/api/blobbuilder/index.html | 126 - files/fr/web/api/blobbuilder/index.md | 126 + files/fr/web/api/blobevent/blobevent/index.html | 61 - files/fr/web/api/blobevent/blobevent/index.md | 61 + files/fr/web/api/blobevent/data/index.html | 50 - files/fr/web/api/blobevent/data/index.md | 50 + files/fr/web/api/blobevent/index.html | 70 - files/fr/web/api/blobevent/index.md | 70 + files/fr/web/api/btoa/index.html | 123 - files/fr/web/api/btoa/index.md | 123 + files/fr/web/api/cache/add/index.html | 112 - files/fr/web/api/cache/add/index.md | 112 + files/fr/web/api/cache/addall/index.html | 114 - files/fr/web/api/cache/addall/index.md | 114 + files/fr/web/api/cache/delete/index.html | 81 - files/fr/web/api/cache/delete/index.md | 81 + files/fr/web/api/cache/index.html | 154 - files/fr/web/api/cache/index.md | 154 + files/fr/web/api/cache/keys/index.html | 89 - files/fr/web/api/cache/keys/index.md | 89 + files/fr/web/api/cache/match/index.html | 101 - files/fr/web/api/cache/match/index.md | 101 + files/fr/web/api/cache/matchall/index.html | 87 - files/fr/web/api/cache/matchall/index.md | 87 + files/fr/web/api/cache/put/index.html | 115 - files/fr/web/api/cache/put/index.md | 115 + files/fr/web/api/caches/index.html | 80 - files/fr/web/api/caches/index.md | 80 + files/fr/web/api/cachestorage/delete/index.html | 85 - files/fr/web/api/cachestorage/delete/index.md | 85 + files/fr/web/api/cachestorage/has/index.html | 80 - files/fr/web/api/cachestorage/has/index.md | 80 + files/fr/web/api/cachestorage/index.html | 201 -- files/fr/web/api/cachestorage/index.md | 201 ++ files/fr/web/api/cachestorage/keys/index.html | 83 - files/fr/web/api/cachestorage/keys/index.md | 83 + files/fr/web/api/cachestorage/match/index.html | 117 - files/fr/web/api/cachestorage/match/index.md | 117 + files/fr/web/api/cachestorage/open/index.html | 93 - files/fr/web/api/cachestorage/open/index.md | 93 + .../api/canvas_api/a_basic_ray-caster/index.html | 53 - .../web/api/canvas_api/a_basic_ray-caster/index.md | 53 + files/fr/web/api/canvas_api/index.html | 164 - files/fr/web/api/canvas_api/index.md | 164 + .../manipulating_video_using_canvas/index.html | 159 - .../manipulating_video_using_canvas/index.md | 159 + .../tutorial/advanced_animations/index.html | 367 -- .../tutorial/advanced_animations/index.md | 367 ++ .../tutorial/applying_styles_and_colors/index.html | 693 ---- .../tutorial/applying_styles_and_colors/index.md | 693 ++++ .../tutorial/basic_animations/index.html | 334 -- .../canvas_api/tutorial/basic_animations/index.md | 334 ++ .../api/canvas_api/tutorial/basic_usage/index.html | 147 - .../api/canvas_api/tutorial/basic_usage/index.md | 147 + .../tutorial/compositing/example/index.html | 296 -- .../tutorial/compositing/example/index.md | 296 ++ .../api/canvas_api/tutorial/compositing/index.html | 109 - .../api/canvas_api/tutorial/compositing/index.md | 109 + .../canvas_api/tutorial/drawing_shapes/index.html | 568 --- .../canvas_api/tutorial/drawing_shapes/index.md | 568 +++ .../canvas_api/tutorial/drawing_text/index.html | 156 - .../api/canvas_api/tutorial/drawing_text/index.md | 156 + .../hit_regions_and_accessibility/index.html | 98 - .../hit_regions_and_accessibility/index.md | 98 + files/fr/web/api/canvas_api/tutorial/index.html | 51 - files/fr/web/api/canvas_api/tutorial/index.md | 51 + .../tutorial/optimizing_canvas/index.html | 111 - .../canvas_api/tutorial/optimizing_canvas/index.md | 111 + .../pixel_manipulation_with_canvas/index.html | 251 -- .../pixel_manipulation_with_canvas/index.md | 251 ++ .../canvas_api/tutorial/transformations/index.html | 269 -- .../canvas_api/tutorial/transformations/index.md | 269 ++ .../canvas_api/tutorial/using_images/index.html | 355 -- .../api/canvas_api/tutorial/using_images/index.md | 355 ++ .../web/api/canvasgradient/addcolorstop/index.html | 124 - .../web/api/canvasgradient/addcolorstop/index.md | 124 + files/fr/web/api/canvasgradient/index.html | 58 - files/fr/web/api/canvasgradient/index.md | 58 + .../api/canvasrenderingcontext2d/arc/index.html | 167 - .../web/api/canvasrenderingcontext2d/arc/index.md | 167 + .../canvasrenderingcontext2d/beginpath/index.html | 128 - .../canvasrenderingcontext2d/beginpath/index.md | 128 + .../beziercurveto/index.html | 125 - .../beziercurveto/index.md | 125 + .../api/canvasrenderingcontext2d/canvas/index.html | 59 - .../api/canvasrenderingcontext2d/canvas/index.md | 59 + .../canvasrenderingcontext2d/clearrect/index.html | 141 - .../canvasrenderingcontext2d/clearrect/index.md | 141 + .../canvasrenderingcontext2d/closepath/index.html | 112 - .../canvasrenderingcontext2d/closepath/index.md | 112 + .../createlineargradient/index.html | 147 - .../createlineargradient/index.md | 147 + .../canvasrenderingcontext2d/direction/index.html | 125 - .../canvasrenderingcontext2d/direction/index.md | 125 + .../canvasrenderingcontext2d/drawimage/index.html | 167 - .../canvasrenderingcontext2d/drawimage/index.md | 167 + .../canvasrenderingcontext2d/ellipse/index.html | 130 - .../api/canvasrenderingcontext2d/ellipse/index.md | 130 + .../api/canvasrenderingcontext2d/fill/index.html | 197 -- .../web/api/canvasrenderingcontext2d/fill/index.md | 197 ++ .../canvasrenderingcontext2d/fillrect/index.html | 124 - .../api/canvasrenderingcontext2d/fillrect/index.md | 124 + .../canvasrenderingcontext2d/fillstyle/index.html | 158 - .../canvasrenderingcontext2d/fillstyle/index.md | 158 + .../canvasrenderingcontext2d/filltext/index.html | 126 - .../api/canvasrenderingcontext2d/filltext/index.md | 126 + .../api/canvasrenderingcontext2d/font/index.html | 136 - .../web/api/canvasrenderingcontext2d/font/index.md | 136 + .../getimagedata/index.html | 101 - .../canvasrenderingcontext2d/getimagedata/index.md | 101 + .../globalalpha/index.html | 173 - .../canvasrenderingcontext2d/globalalpha/index.md | 173 + .../globalcompositeoperation/index.html | 95 - .../globalcompositeoperation/index.md | 95 + .../imagesmoothingenabled/index.html | 99 - .../imagesmoothingenabled/index.md | 99 + .../fr/web/api/canvasrenderingcontext2d/index.html | 380 -- files/fr/web/api/canvasrenderingcontext2d/index.md | 380 ++ .../canvasrenderingcontext2d/linecap/index.html | 171 - .../api/canvasrenderingcontext2d/linecap/index.md | 171 + .../canvasrenderingcontext2d/linejoin/index.html | 133 - .../api/canvasrenderingcontext2d/linejoin/index.md | 133 + .../api/canvasrenderingcontext2d/lineto/index.html | 122 - .../api/canvasrenderingcontext2d/lineto/index.md | 122 + .../measuretext/index.html | 73 - .../canvasrenderingcontext2d/measuretext/index.md | 73 + .../api/canvasrenderingcontext2d/moveto/index.html | 120 - .../api/canvasrenderingcontext2d/moveto/index.md | 120 + .../quadraticcurveto/index.html | 137 - .../quadraticcurveto/index.md | 137 + .../api/canvasrenderingcontext2d/rect/index.html | 122 - .../web/api/canvasrenderingcontext2d/rect/index.md | 122 + .../api/canvasrenderingcontext2d/rotate/index.html | 122 - .../api/canvasrenderingcontext2d/rotate/index.md | 122 + .../api/canvasrenderingcontext2d/save/index.html | 91 - .../web/api/canvasrenderingcontext2d/save/index.md | 91 + .../api/canvasrenderingcontext2d/scale/index.html | 167 - .../api/canvasrenderingcontext2d/scale/index.md | 167 + .../setlinedash/index.html | 159 - .../canvasrenderingcontext2d/setlinedash/index.md | 159 + .../settransform/index.html | 129 - .../canvasrenderingcontext2d/settransform/index.md | 129 + .../api/canvasrenderingcontext2d/stroke/index.html | 108 - .../api/canvasrenderingcontext2d/stroke/index.md | 108 + .../canvasrenderingcontext2d/strokerect/index.html | 123 - .../canvasrenderingcontext2d/strokerect/index.md | 123 + .../strokestyle/index.html | 154 - .../canvasrenderingcontext2d/strokestyle/index.md | 154 + .../canvasrenderingcontext2d/stroketext/index.html | 126 - .../canvasrenderingcontext2d/stroketext/index.md | 126 + .../canvasrenderingcontext2d/textalign/index.html | 128 - .../canvasrenderingcontext2d/textalign/index.md | 128 + .../textbaseline/index.html | 130 - .../canvasrenderingcontext2d/textbaseline/index.md | 130 + .../canvasrenderingcontext2d/transform/index.html | 132 - .../canvasrenderingcontext2d/transform/index.md | 132 + .../canvasrenderingcontext2d/translate/index.html | 122 - .../canvasrenderingcontext2d/translate/index.md | 122 + files/fr/web/api/cdatasection/index.html | 85 - files/fr/web/api/cdatasection/index.md | 85 + files/fr/web/api/characterdata/index.html | 89 - files/fr/web/api/characterdata/index.md | 89 + files/fr/web/api/clearinterval/index.html | 72 - files/fr/web/api/clearinterval/index.md | 72 + files/fr/web/api/client/frametype/index.html | 46 - files/fr/web/api/client/frametype/index.md | 46 + files/fr/web/api/client/id/index.html | 47 - files/fr/web/api/client/id/index.md | 47 + files/fr/web/api/client/index.html | 92 - files/fr/web/api/client/index.md | 92 + files/fr/web/api/client/postmessage/index.html | 74 - files/fr/web/api/client/postmessage/index.md | 74 + files/fr/web/api/client/url/index.html | 68 - files/fr/web/api/client/url/index.md | 68 + files/fr/web/api/clients/claim/index.html | 75 - files/fr/web/api/clients/claim/index.md | 75 + files/fr/web/api/clients/get/index.html | 59 - files/fr/web/api/clients/get/index.md | 59 + files/fr/web/api/clients/index.html | 97 - files/fr/web/api/clients/index.md | 97 + files/fr/web/api/clients/matchall/index.html | 71 - files/fr/web/api/clients/matchall/index.md | 71 + files/fr/web/api/clients/openwindow/index.html | 73 - files/fr/web/api/clients/openwindow/index.md | 73 + files/fr/web/api/clipboard/index.html | 80 - files/fr/web/api/clipboard/index.md | 80 + files/fr/web/api/clipboard/write/index.html | 70 - files/fr/web/api/clipboard/write/index.md | 70 + files/fr/web/api/clipboard/writetext/index.html | 59 - files/fr/web/api/clipboard/writetext/index.md | 59 + files/fr/web/api/clipboard_api/index.html | 61 - files/fr/web/api/clipboard_api/index.md | 61 + files/fr/web/api/closeevent/index.html | 179 - files/fr/web/api/closeevent/index.md | 179 + files/fr/web/api/comment/comment/index.html | 53 - files/fr/web/api/comment/comment/index.md | 53 + files/fr/web/api/comment/index.html | 70 - files/fr/web/api/comment/index.md | 70 + files/fr/web/api/compositionevent/index.html | 79 - files/fr/web/api/compositionevent/index.md | 79 + files/fr/web/api/console/assert/index.html | 76 - files/fr/web/api/console/assert/index.md | 76 + files/fr/web/api/console/clear/index.html | 48 - files/fr/web/api/console/clear/index.md | 48 + files/fr/web/api/console/count/index.html | 104 - files/fr/web/api/console/count/index.md | 104 + files/fr/web/api/console/countreset/index.html | 124 - files/fr/web/api/console/countreset/index.md | 124 + files/fr/web/api/console/debug/index.html | 68 - files/fr/web/api/console/debug/index.md | 68 + files/fr/web/api/console/dir/index.html | 67 - files/fr/web/api/console/dir/index.md | 67 + files/fr/web/api/console/dirxml/index.html | 58 - files/fr/web/api/console/dirxml/index.md | 58 + files/fr/web/api/console/error/index.html | 74 - files/fr/web/api/console/error/index.md | 74 + files/fr/web/api/console/group/index.html | 86 - files/fr/web/api/console/group/index.md | 86 + files/fr/web/api/console/groupcollapsed/index.html | 64 - files/fr/web/api/console/groupcollapsed/index.md | 64 + files/fr/web/api/console/groupend/index.html | 55 - files/fr/web/api/console/groupend/index.md | 55 + files/fr/web/api/console/index.html | 277 -- files/fr/web/api/console/index.md | 277 ++ files/fr/web/api/console/info/index.html | 65 - files/fr/web/api/console/info/index.md | 65 + files/fr/web/api/console/log/index.html | 64 - files/fr/web/api/console/log/index.md | 64 + files/fr/web/api/console/profile/index.html | 42 - files/fr/web/api/console/profile/index.md | 42 + files/fr/web/api/console/profileend/index.html | 49 - files/fr/web/api/console/profileend/index.md | 49 + files/fr/web/api/console/table/index.html | 146 - files/fr/web/api/console/table/index.md | 146 + files/fr/web/api/console/time/index.html | 60 - files/fr/web/api/console/time/index.md | 60 + files/fr/web/api/console/timeend/index.html | 58 - files/fr/web/api/console/timeend/index.md | 58 + files/fr/web/api/console/timelog/index.html | 99 - files/fr/web/api/console/timelog/index.md | 99 + files/fr/web/api/console/timestamp/index.html | 42 - files/fr/web/api/console/timestamp/index.md | 42 + files/fr/web/api/console/trace/index.html | 69 - files/fr/web/api/console/trace/index.md | 69 + files/fr/web/api/console/warn/index.html | 70 - files/fr/web/api/console/warn/index.md | 70 + files/fr/web/api/console_api/index.html | 74 - files/fr/web/api/console_api/index.md | 74 + files/fr/web/api/credential/index.html | 64 - files/fr/web/api/credential/index.md | 64 + .../web/api/credential_management_api/index.html | 69 - .../fr/web/api/credential_management_api/index.md | 69 + .../web/api/credentialscontainer/create/index.html | 88 - .../web/api/credentialscontainer/create/index.md | 88 + .../fr/web/api/credentialscontainer/get/index.html | 80 - files/fr/web/api/credentialscontainer/get/index.md | 80 + files/fr/web/api/credentialscontainer/index.html | 70 - files/fr/web/api/credentialscontainer/index.md | 70 + .../preventsilentaccess/index.html | 53 - .../preventsilentaccess/index.md | 53 + .../web/api/credentialscontainer/store/index.html | 60 - .../fr/web/api/credentialscontainer/store/index.md | 60 + files/fr/web/api/crossoriginisolated/index.html | 59 - files/fr/web/api/crossoriginisolated/index.md | 59 + files/fr/web/api/crypto/getrandomvalues/index.html | 76 - files/fr/web/api/crypto/getrandomvalues/index.md | 76 + files/fr/web/api/crypto/index.html | 54 - files/fr/web/api/crypto/index.md | 54 + files/fr/web/api/crypto/subtle/index.html | 42 - files/fr/web/api/crypto/subtle/index.md | 42 + files/fr/web/api/crypto_property/index.html | 44 - files/fr/web/api/crypto_property/index.md | 44 + files/fr/web/api/cryptokey/index.html | 64 - files/fr/web/api/cryptokey/index.md | 64 + files/fr/web/api/css/index.html | 64 - files/fr/web/api/css/index.md | 64 + files/fr/web/api/css_counter_styles/index.html | 31 - files/fr/web/api/css_counter_styles/index.md | 31 + files/fr/web/api/css_font_loading_api/index.html | 33 - files/fr/web/api/css_font_loading_api/index.md | 33 + .../index.html | 43 - .../index.md | 43 + files/fr/web/api/css_object_model/index.html | 127 - files/fr/web/api/css_object_model/index.md | 127 + .../managing_screen_orientation/index.html | 180 - .../managing_screen_orientation/index.md | 180 + .../api/css_properties_and_values_api/index.html | 52 - .../web/api/css_properties_and_values_api/index.md | 52 + files/fr/web/api/cssmediarule/index.html | 68 - files/fr/web/api/cssmediarule/index.md | 68 + files/fr/web/api/cssrulelist/index.html | 47 - files/fr/web/api/cssrulelist/index.md | 47 + .../web/api/cssstyledeclaration/csstext/index.html | 33 - .../web/api/cssstyledeclaration/csstext/index.md | 33 + files/fr/web/api/cssstyledeclaration/index.html | 95 - files/fr/web/api/cssstyledeclaration/index.md | 95 + files/fr/web/api/cssstylerule/index.html | 54 - files/fr/web/api/cssstylerule/index.md | 54 + files/fr/web/api/cssvalue/index.html | 85 - files/fr/web/api/cssvalue/index.md | 85 + files/fr/web/api/cssvaluelist/index.html | 70 - files/fr/web/api/cssvaluelist/index.md | 70 + files/fr/web/api/customevent/detail/index.html | 73 - files/fr/web/api/customevent/detail/index.md | 73 + files/fr/web/api/customevent/index.html | 91 - files/fr/web/api/customevent/index.md | 91 + .../web/api/customevent/initcustomevent/index.html | 70 - .../web/api/customevent/initcustomevent/index.md | 70 + files/fr/web/api/datatransfer/cleardata/index.html | 183 - files/fr/web/api/datatransfer/cleardata/index.md | 183 + files/fr/web/api/datatransfer/files/index.html | 60 - files/fr/web/api/datatransfer/files/index.md | 60 + files/fr/web/api/datatransfer/index.html | 388 --- files/fr/web/api/datatransfer/index.md | 388 +++ .../dedicatedworkerglobalscope/close/index.html | 55 - .../api/dedicatedworkerglobalscope/close/index.md | 55 + .../web/api/dedicatedworkerglobalscope/index.html | 114 - .../fr/web/api/dedicatedworkerglobalscope/index.md | 114 + .../api/dedicatedworkerglobalscope/name/index.html | 61 - .../api/dedicatedworkerglobalscope/name/index.md | 61 + .../accelerationincludinggravity/index.html | 71 - .../accelerationincludinggravity/index.md | 71 + .../devicemotionevent/devicemotionevent/index.html | 56 - .../devicemotionevent/devicemotionevent/index.md | 56 + files/fr/web/api/devicemotionevent/index.html | 82 - files/fr/web/api/devicemotionevent/index.md | 82 + .../web/api/devicemotionevent/interval/index.html | 51 - .../fr/web/api/devicemotionevent/interval/index.md | 51 + .../api/devicemotionevent/rotationrate/index.html | 72 - .../api/devicemotionevent/rotationrate/index.md | 72 + .../devicemotioneventrotationrate/alpha/index.html | 56 - .../devicemotioneventrotationrate/alpha/index.md | 56 + .../devicemotioneventrotationrate/beta/index.html | 56 - .../devicemotioneventrotationrate/beta/index.md | 56 + .../devicemotioneventrotationrate/gamma/index.html | 56 - .../devicemotioneventrotationrate/gamma/index.md | 56 + .../api/devicemotioneventrotationrate/index.html | 51 - .../web/api/devicemotioneventrotationrate/index.md | 51 + .../api/deviceorientationevent/absolute/index.html | 55 - .../api/deviceorientationevent/absolute/index.md | 55 + files/fr/web/api/deviceorientationevent/index.html | 77 - files/fr/web/api/deviceorientationevent/index.md | 77 + files/fr/web/api/document/activeelement/index.html | 21 - files/fr/web/api/document/activeelement/index.md | 21 + files/fr/web/api/document/adoptnode/index.html | 68 - files/fr/web/api/document/adoptnode/index.md | 68 + files/fr/web/api/document/alinkcolor/index.html | 36 - files/fr/web/api/document/alinkcolor/index.md | 36 + files/fr/web/api/document/anchors/index.html | 81 - files/fr/web/api/document/anchors/index.md | 81 + files/fr/web/api/document/applets/index.html | 17 - files/fr/web/api/document/applets/index.md | 17 + files/fr/web/api/document/bgcolor/index.html | 35 - files/fr/web/api/document/bgcolor/index.md | 35 + files/fr/web/api/document/body/index.html | 31 - files/fr/web/api/document/body/index.md | 31 + .../api/document/caretrangefrompoint/index.html | 86 - .../web/api/document/caretrangefrompoint/index.md | 86 + files/fr/web/api/document/characterset/index.html | 54 - files/fr/web/api/document/characterset/index.md | 54 + files/fr/web/api/document/clear/index.html | 37 - files/fr/web/api/document/clear/index.md | 37 + files/fr/web/api/document/compatmode/index.html | 53 - files/fr/web/api/document/compatmode/index.md | 53 + files/fr/web/api/document/contenttype/index.html | 30 - files/fr/web/api/document/contenttype/index.md | 30 + .../fr/web/api/document/createattribute/index.html | 91 - files/fr/web/api/document/createattribute/index.md | 91 + .../web/api/document/createcdatasection/index.html | 52 - .../web/api/document/createcdatasection/index.md | 52 + files/fr/web/api/document/createcomment/index.html | 41 - files/fr/web/api/document/createcomment/index.md | 41 + .../api/document/createdocumentfragment/index.html | 87 - .../api/document/createdocumentfragment/index.md | 87 + files/fr/web/api/document/createelement/index.html | 137 - files/fr/web/api/document/createelement/index.md | 137 + .../fr/web/api/document/createelementns/index.html | 113 - files/fr/web/api/document/createelementns/index.md | 113 + .../api/document/createentityreference/index.html | 14 - .../api/document/createentityreference/index.md | 14 + files/fr/web/api/document/createevent/index.html | 88 - files/fr/web/api/document/createevent/index.md | 88 + .../web/api/document/createexpression/index.html | 31 - .../fr/web/api/document/createexpression/index.md | 31 + .../web/api/document/createnodeiterator/index.html | 139 - .../web/api/document/createnodeiterator/index.md | 139 + .../web/api/document/creatensresolver/index.html | 49 - .../fr/web/api/document/creatensresolver/index.md | 49 + .../createprocessinginstruction/index.html | 55 - .../document/createprocessinginstruction/index.md | 55 + files/fr/web/api/document/createrange/index.html | 38 - files/fr/web/api/document/createrange/index.md | 38 + .../fr/web/api/document/createtextnode/index.html | 78 - files/fr/web/api/document/createtextnode/index.md | 78 + .../web/api/document/createtreewalker/index.html | 157 - .../fr/web/api/document/createtreewalker/index.md | 157 + files/fr/web/api/document/currentscript/index.html | 66 - files/fr/web/api/document/currentscript/index.md | 66 + files/fr/web/api/document/defaultview/index.html | 17 - files/fr/web/api/document/defaultview/index.md | 17 + files/fr/web/api/document/designmode/index.html | 51 - files/fr/web/api/document/designmode/index.md | 51 + files/fr/web/api/document/dir/index.html | 42 - files/fr/web/api/document/dir/index.md | 42 + files/fr/web/api/document/doctype/index.html | 65 - files/fr/web/api/document/doctype/index.md | 65 + files/fr/web/api/document/document/index.html | 43 - files/fr/web/api/document/document/index.md | 43 + .../fr/web/api/document/documentelement/index.html | 72 - files/fr/web/api/document/documentelement/index.md | 72 + files/fr/web/api/document/documenturi/index.html | 54 - files/fr/web/api/document/documenturi/index.md | 54 + .../web/api/document/documenturiobject/index.html | 38 - .../fr/web/api/document/documenturiobject/index.md | 38 + files/fr/web/api/document/domain/index.html | 59 - files/fr/web/api/document/domain/index.md | 59 + .../api/document/domcontentloaded_event/index.html | 180 - .../api/document/domcontentloaded_event/index.md | 180 + files/fr/web/api/document/drag_event/index.html | 261 -- files/fr/web/api/document/drag_event/index.md | 261 ++ files/fr/web/api/document/dragend_event/index.html | 258 -- files/fr/web/api/document/dragend_event/index.md | 258 ++ .../fr/web/api/document/dragenter_event/index.html | 260 -- files/fr/web/api/document/dragenter_event/index.md | 260 ++ .../fr/web/api/document/dragleave_event/index.html | 258 -- files/fr/web/api/document/dragleave_event/index.md | 258 ++ .../fr/web/api/document/dragover_event/index.html | 259 -- files/fr/web/api/document/dragover_event/index.md | 259 ++ .../fr/web/api/document/dragstart_event/index.html | 263 -- files/fr/web/api/document/dragstart_event/index.md | 263 ++ files/fr/web/api/document/drop_event/index.html | 259 -- files/fr/web/api/document/drop_event/index.md | 259 ++ .../web/api/document/elementfrompoint/index.html | 50 - .../fr/web/api/document/elementfrompoint/index.md | 50 + .../web/api/document/elementsfrompoint/index.html | 103 - .../fr/web/api/document/elementsfrompoint/index.md | 103 + .../document/enablestylesheetsforset/index.html | 59 - .../api/document/enablestylesheetsforset/index.md | 59 + files/fr/web/api/document/evaluate/index.html | 161 - files/fr/web/api/document/evaluate/index.md | 161 + files/fr/web/api/document/execcommand/index.html | 193 -- files/fr/web/api/document/execcommand/index.md | 193 ++ .../fr/web/api/document/exitfullscreen/index.html | 67 - files/fr/web/api/document/exitfullscreen/index.md | 67 + .../fr/web/api/document/exitpointerlock/index.html | 50 - files/fr/web/api/document/exitpointerlock/index.md | 50 + files/fr/web/api/document/featurepolicy/index.html | 47 - files/fr/web/api/document/featurepolicy/index.md | 47 + files/fr/web/api/document/forms/index.html | 116 - files/fr/web/api/document/forms/index.md | 116 + .../api/document/fullscreenchange_event/index.html | 85 - .../api/document/fullscreenchange_event/index.md | 85 + .../api/document/fullscreenerror_event/index.html | 69 - .../api/document/fullscreenerror_event/index.md | 69 + .../fr/web/api/document/getboxobjectfor/index.html | 44 - files/fr/web/api/document/getboxobjectfor/index.md | 44 + .../fr/web/api/document/getelementbyid/index.html | 145 - files/fr/web/api/document/getelementbyid/index.md | 145 + .../api/document/getelementsbyclassname/index.html | 92 - .../api/document/getelementsbyclassname/index.md | 92 + .../web/api/document/getelementsbyname/index.html | 86 - .../fr/web/api/document/getelementsbyname/index.md | 86 + .../api/document/getelementsbytagname/index.html | 113 - .../web/api/document/getelementsbytagname/index.md | 113 + .../api/document/getelementsbytagnamens/index.html | 138 - .../api/document/getelementsbytagnamens/index.md | 138 + files/fr/web/api/document/getselection/index.html | 16 - files/fr/web/api/document/getselection/index.md | 16 + files/fr/web/api/document/hasfocus/index.html | 95 - files/fr/web/api/document/hasfocus/index.md | 95 + files/fr/web/api/document/head/index.html | 69 - files/fr/web/api/document/head/index.md | 69 + files/fr/web/api/document/height/index.html | 44 - files/fr/web/api/document/height/index.md | 44 + files/fr/web/api/document/hidden/index.html | 41 - files/fr/web/api/document/hidden/index.md | 41 + files/fr/web/api/document/images/index.html | 33 - files/fr/web/api/document/images/index.md | 33 + .../fr/web/api/document/implementation/index.html | 47 - files/fr/web/api/document/implementation/index.md | 47 + files/fr/web/api/document/importnode/index.html | 92 - files/fr/web/api/document/importnode/index.md | 92 + files/fr/web/api/document/index.html | 490 --- files/fr/web/api/document/index.md | 490 +++ .../fr/web/api/document/keypress_event/index.html | 102 - files/fr/web/api/document/keypress_event/index.md | 102 + files/fr/web/api/document/lastmodified/index.html | 68 - files/fr/web/api/document/lastmodified/index.md | 68 + .../web/api/document/laststylesheetset/index.html | 48 - .../fr/web/api/document/laststylesheetset/index.md | 48 + files/fr/web/api/document/location/index.html | 65 - files/fr/web/api/document/location/index.md | 65 + .../web/api/document/mozsetimageelement/index.html | 81 - .../web/api/document/mozsetimageelement/index.md | 81 + .../api/document/mozsyntheticdocument/index.html | 35 - .../web/api/document/mozsyntheticdocument/index.md | 35 + .../api/document/onafterscriptexecute/index.html | 48 - .../web/api/document/onafterscriptexecute/index.md | 48 + .../api/document/onbeforescriptexecute/index.html | 46 - .../api/document/onbeforescriptexecute/index.md | 46 + .../web/api/document/onfullscreenchange/index.html | 52 - .../web/api/document/onfullscreenchange/index.md | 52 + files/fr/web/api/document/onoffline/index.html | 13 - files/fr/web/api/document/onoffline/index.md | 13 + files/fr/web/api/document/ononline/index.html | 39 - files/fr/web/api/document/ononline/index.md | 39 + files/fr/web/api/document/open/index.html | 76 - files/fr/web/api/document/open/index.md | 76 + files/fr/web/api/document/origin/index.html | 58 - files/fr/web/api/document/origin/index.md | 58 + files/fr/web/api/document/popupnode/index.html | 45 - files/fr/web/api/document/popupnode/index.md | 45 + .../api/document/preferredstylesheetset/index.html | 48 - .../api/document/preferredstylesheetset/index.md | 48 + .../web/api/document/querycommandstate/index.html | 49 - .../fr/web/api/document/querycommandstate/index.md | 49 + .../api/document/querycommandsupported/index.html | 72 - .../api/document/querycommandsupported/index.md | 72 + files/fr/web/api/document/queryselector/index.html | 126 - files/fr/web/api/document/queryselector/index.md | 126 + .../web/api/document/queryselectorall/index.html | 164 - .../fr/web/api/document/queryselectorall/index.md | 164 + files/fr/web/api/document/readystate/index.html | 127 - files/fr/web/api/document/readystate/index.md | 127 + .../api/document/readystatechange_event/index.html | 88 - .../api/document/readystatechange_event/index.md | 88 + files/fr/web/api/document/referrer/index.html | 23 - files/fr/web/api/document/referrer/index.md | 23 + .../fr/web/api/document/registerelement/index.html | 65 - files/fr/web/api/document/registerelement/index.md | 65 + .../fr/web/api/document/releasecapture/index.html | 38 - files/fr/web/api/document/releasecapture/index.md | 38 + files/fr/web/api/document/scripts/index.html | 55 - files/fr/web/api/document/scripts/index.md | 55 + files/fr/web/api/document/scroll_event/index.html | 148 - files/fr/web/api/document/scroll_event/index.md | 148 + .../api/document/selectedstylesheetset/index.html | 55 - .../api/document/selectedstylesheetset/index.md | 55 + files/fr/web/api/document/stylesheets/index.html | 57 - files/fr/web/api/document/stylesheets/index.md | 57 + .../fr/web/api/document/stylesheetsets/index.html | 58 - files/fr/web/api/document/stylesheetsets/index.md | 58 + files/fr/web/api/document/title/index.html | 54 - files/fr/web/api/document/title/index.md | 54 + files/fr/web/api/document/tooltipnode/index.html | 25 - files/fr/web/api/document/tooltipnode/index.md | 25 + .../fr/web/api/document/touchend_event/index.html | 125 - files/fr/web/api/document/touchend_event/index.md | 125 + .../api/document/transitionend_event/index.html | 83 - .../web/api/document/transitionend_event/index.md | 83 + files/fr/web/api/document/url/index.html | 24 - files/fr/web/api/document/url/index.md | 24 + .../fr/web/api/document/visibilitystate/index.html | 57 - files/fr/web/api/document/visibilitystate/index.md | 57 + files/fr/web/api/document/width/index.html | 45 - files/fr/web/api/document/width/index.md | 45 + files/fr/web/api/document/write/index.html | 96 - files/fr/web/api/document/write/index.md | 96 + files/fr/web/api/document/writeln/index.html | 56 - files/fr/web/api/document/writeln/index.md | 56 + files/fr/web/api/document/xmlencoding/index.html | 35 - files/fr/web/api/document/xmlencoding/index.md | 35 + files/fr/web/api/document/xmlversion/index.html | 29 - files/fr/web/api/document/xmlversion/index.md | 29 + .../api/document_object_model/examples/index.html | 370 -- .../api/document_object_model/examples/index.md | 370 ++ .../how_to_create_a_dom_tree/index.html | 147 - .../how_to_create_a_dom_tree/index.md | 147 + files/fr/web/api/document_object_model/index.html | 408 --- files/fr/web/api/document_object_model/index.md | 408 +++ .../document_object_model/introduction/index.html | 242 -- .../document_object_model/introduction/index.md | 242 ++ .../index.html | 58 - .../locating_dom_elements_using_selectors/index.md | 58 + .../index.html | 361 -- .../index.md | 361 ++ .../example/index.html | 44 - .../example/index.md | 44 + .../using_the_w3c_dom_level_1_core/index.html | 84 - .../using_the_w3c_dom_level_1_core/index.md | 84 + .../document_object_model/whitespace/index.html | 222 -- .../api/document_object_model/whitespace/index.md | 222 ++ .../documentfragment/documentfragment/index.html | 50 - .../api/documentfragment/documentfragment/index.md | 50 + files/fr/web/api/documentfragment/index.html | 105 - files/fr/web/api/documentfragment/index.md | 105 + .../api/documentfragment/queryselector/index.html | 85 - .../api/documentfragment/queryselector/index.md | 85 + .../documentfragment/queryselectorall/index.html | 65 - .../api/documentfragment/queryselectorall/index.md | 65 + files/fr/web/api/documenttype/index.html | 89 - files/fr/web/api/documenttype/index.md | 89 + files/fr/web/api/domerror/index.html | 147 - files/fr/web/api/domerror/index.md | 147 + files/fr/web/api/domexception/index.html | 153 - files/fr/web/api/domexception/index.md | 153 + files/fr/web/api/domhighrestimestamp/index.html | 98 - files/fr/web/api/domhighrestimestamp/index.md | 98 + .../domimplementation/createdocument/index.html | 85 - .../api/domimplementation/createdocument/index.md | 85 + .../createdocumenttype/index.html | 79 - .../domimplementation/createdocumenttype/index.md | 79 + .../createhtmldocument/index.html | 109 - .../domimplementation/createhtmldocument/index.md | 109 + .../api/domimplementation/hasfeature/index.html | 71 - .../web/api/domimplementation/hasfeature/index.md | 71 + files/fr/web/api/domimplementation/index.html | 76 - files/fr/web/api/domimplementation/index.md | 76 + files/fr/web/api/dommatrix/index.html | 29 - files/fr/web/api/dommatrix/index.md | 29 + files/fr/web/api/domobject/index.html | 31 - files/fr/web/api/domobject/index.md | 31 + files/fr/web/api/domparser/index.html | 98 - files/fr/web/api/domparser/index.md | 98 + files/fr/web/api/dompoint/dompoint/index.html | 68 - files/fr/web/api/dompoint/dompoint/index.md | 68 + files/fr/web/api/dompoint/index.html | 103 - files/fr/web/api/dompoint/index.md | 103 + files/fr/web/api/dompointreadonly/index.html | 74 - files/fr/web/api/dompointreadonly/index.md | 74 + files/fr/web/api/dompointreadonly/w/index.html | 51 - files/fr/web/api/dompointreadonly/w/index.md | 51 + files/fr/web/api/dompointreadonly/x/index.html | 53 - files/fr/web/api/dompointreadonly/x/index.md | 53 + files/fr/web/api/dompointreadonly/y/index.html | 53 - files/fr/web/api/dompointreadonly/y/index.md | 53 + files/fr/web/api/dompointreadonly/z/index.html | 54 - files/fr/web/api/dompointreadonly/z/index.md | 54 + files/fr/web/api/domquad/index.html | 64 - files/fr/web/api/domquad/index.md | 64 + files/fr/web/api/domrect/domrect/index.html | 68 - files/fr/web/api/domrect/domrect/index.md | 68 + files/fr/web/api/domrect/index.html | 89 - files/fr/web/api/domrect/index.md | 89 + files/fr/web/api/domrectreadonly/bottom/index.html | 50 - files/fr/web/api/domrectreadonly/bottom/index.md | 50 + .../api/domrectreadonly/domrectreadonly/index.html | 68 - .../api/domrectreadonly/domrectreadonly/index.md | 68 + files/fr/web/api/domrectreadonly/height/index.html | 50 - files/fr/web/api/domrectreadonly/height/index.md | 50 + files/fr/web/api/domrectreadonly/index.html | 82 - files/fr/web/api/domrectreadonly/index.md | 82 + files/fr/web/api/domrectreadonly/left/index.html | 50 - files/fr/web/api/domrectreadonly/left/index.md | 50 + files/fr/web/api/domrectreadonly/right/index.html | 50 - files/fr/web/api/domrectreadonly/right/index.md | 50 + files/fr/web/api/domrectreadonly/top/index.html | 50 - files/fr/web/api/domrectreadonly/top/index.md | 50 + files/fr/web/api/domrectreadonly/width/index.html | 50 - files/fr/web/api/domrectreadonly/width/index.md | 50 + files/fr/web/api/domrectreadonly/x/index.html | 51 - files/fr/web/api/domrectreadonly/x/index.md | 51 + files/fr/web/api/domrectreadonly/y/index.html | 51 - files/fr/web/api/domrectreadonly/y/index.md | 51 + files/fr/web/api/domstring/binary/index.html | 27 - files/fr/web/api/domstring/binary/index.md | 27 + files/fr/web/api/domstring/index.html | 53 - files/fr/web/api/domstring/index.md | 53 + files/fr/web/api/domstringlist/index.html | 48 - files/fr/web/api/domstringlist/index.md | 48 + files/fr/web/api/domtimestamp/index.html | 31 - files/fr/web/api/domtimestamp/index.md | 31 + files/fr/web/api/domtokenlist/add/index.html | 75 - files/fr/web/api/domtokenlist/add/index.md | 75 + files/fr/web/api/domtokenlist/contains/index.html | 74 - files/fr/web/api/domtokenlist/contains/index.md | 74 + files/fr/web/api/domtokenlist/entries/index.html | 72 - files/fr/web/api/domtokenlist/entries/index.md | 72 + files/fr/web/api/domtokenlist/foreach/index.html | 96 - files/fr/web/api/domtokenlist/foreach/index.md | 96 + files/fr/web/api/domtokenlist/index.html | 114 - files/fr/web/api/domtokenlist/index.md | 114 + files/fr/web/api/domtokenlist/item/index.html | 69 - files/fr/web/api/domtokenlist/item/index.md | 69 + files/fr/web/api/domtokenlist/keys/index.html | 72 - files/fr/web/api/domtokenlist/keys/index.md | 72 + files/fr/web/api/domtokenlist/length/index.html | 64 - files/fr/web/api/domtokenlist/length/index.md | 64 + files/fr/web/api/domtokenlist/remove/index.html | 79 - files/fr/web/api/domtokenlist/remove/index.md | 79 + files/fr/web/api/domtokenlist/replace/index.html | 76 - files/fr/web/api/domtokenlist/replace/index.md | 76 + files/fr/web/api/domtokenlist/supports/index.html | 62 - files/fr/web/api/domtokenlist/supports/index.md | 62 + files/fr/web/api/domtokenlist/toggle/index.html | 78 - files/fr/web/api/domtokenlist/toggle/index.md | 78 + files/fr/web/api/domtokenlist/value/index.html | 61 - files/fr/web/api/domtokenlist/value/index.md | 61 + files/fr/web/api/domtokenlist/values/index.html | 70 - files/fr/web/api/domtokenlist/values/index.md | 70 + files/fr/web/api/effecttiming/delay/index.html | 87 - files/fr/web/api/effecttiming/delay/index.md | 87 + files/fr/web/api/effecttiming/index.html | 71 - files/fr/web/api/effecttiming/index.md | 71 + files/fr/web/api/element/animate/index.html | 106 - files/fr/web/api/element/animate/index.md | 106 + files/fr/web/api/element/attachshadow/index.html | 54 - files/fr/web/api/element/attachshadow/index.md | 54 + files/fr/web/api/element/attributes/index.html | 116 - files/fr/web/api/element/attributes/index.md | 116 + .../web/api/element/childelementcount/index.html | 97 - .../fr/web/api/element/childelementcount/index.md | 97 + files/fr/web/api/element/classlist/index.html | 284 -- files/fr/web/api/element/classlist/index.md | 284 ++ files/fr/web/api/element/classname/index.html | 79 - files/fr/web/api/element/classname/index.md | 79 + files/fr/web/api/element/click_event/index.html | 153 - files/fr/web/api/element/click_event/index.md | 153 + files/fr/web/api/element/clientheight/index.html | 49 - files/fr/web/api/element/clientheight/index.md | 49 + files/fr/web/api/element/clientleft/index.html | 80 - files/fr/web/api/element/clientleft/index.md | 80 + files/fr/web/api/element/clientwidth/index.html | 66 - files/fr/web/api/element/clientwidth/index.md | 66 + files/fr/web/api/element/closest/index.html | 138 - files/fr/web/api/element/closest/index.md | 138 + .../api/element/compositionend_event/index.html | 128 - .../web/api/element/compositionend_event/index.md | 128 + .../api/element/compositionstart_event/index.html | 144 - .../api/element/compositionstart_event/index.md | 144 + .../api/element/compositionupdate_event/index.html | 86 - .../api/element/compositionupdate_event/index.md | 86 + .../web/api/element/contextmenu_event/index.html | 104 - .../fr/web/api/element/contextmenu_event/index.md | 104 + files/fr/web/api/element/copy_event/index.html | 107 - files/fr/web/api/element/copy_event/index.md | 107 + files/fr/web/api/element/dblclick_event/index.html | 119 - files/fr/web/api/element/dblclick_event/index.md | 119 + files/fr/web/api/element/error_event/index.html | 91 - files/fr/web/api/element/error_event/index.md | 91 + files/fr/web/api/element/focusin_event/index.html | 76 - files/fr/web/api/element/focusin_event/index.md | 76 + files/fr/web/api/element/focusout_event/index.html | 76 - files/fr/web/api/element/focusout_event/index.md | 76 + files/fr/web/api/element/getattribute/index.html | 85 - files/fr/web/api/element/getattribute/index.md | 85 + .../web/api/element/getattributenames/index.html | 66 - .../fr/web/api/element/getattributenames/index.md | 66 + .../fr/web/api/element/getattributenode/index.html | 51 - files/fr/web/api/element/getattributenode/index.md | 51 + .../web/api/element/getattributenodens/index.html | 40 - .../fr/web/api/element/getattributenodens/index.md | 40 + files/fr/web/api/element/getattributens/index.html | 124 - files/fr/web/api/element/getattributens/index.md | 124 + .../api/element/getboundingclientrect/index.html | 139 - .../web/api/element/getboundingclientrect/index.md | 139 + .../api/element/getelementsbyclassname/index.html | 69 - .../api/element/getelementsbyclassname/index.md | 69 + .../api/element/getelementsbytagname/index.html | 76 - .../web/api/element/getelementsbytagname/index.md | 76 + .../api/element/getelementsbytagnamens/index.html | 75 - .../api/element/getelementsbytagnamens/index.md | 75 + files/fr/web/api/element/hasattribute/index.html | 77 - files/fr/web/api/element/hasattribute/index.md | 77 + files/fr/web/api/element/hasattributens/index.html | 54 - files/fr/web/api/element/hasattributens/index.md | 54 + files/fr/web/api/element/hasattributes/index.html | 79 - files/fr/web/api/element/hasattributes/index.md | 79 + files/fr/web/api/element/id/index.html | 68 - files/fr/web/api/element/id/index.md | 68 + files/fr/web/api/element/index.html | 425 --- files/fr/web/api/element/index.md | 425 +++ files/fr/web/api/element/innerhtml/index.html | 206 -- files/fr/web/api/element/innerhtml/index.md | 206 ++ .../api/element/insertadjacentelement/index.html | 127 - .../web/api/element/insertadjacentelement/index.md | 127 + .../web/api/element/insertadjacenthtml/index.html | 99 - .../fr/web/api/element/insertadjacenthtml/index.md | 99 + .../web/api/element/insertadjacenttext/index.html | 127 - .../fr/web/api/element/insertadjacenttext/index.md | 127 + files/fr/web/api/element/localname/index.html | 106 - files/fr/web/api/element/localname/index.md | 106 + files/fr/web/api/element/matches/index.html | 108 - files/fr/web/api/element/matches/index.md | 108 + .../fr/web/api/element/mousedown_event/index.html | 88 - files/fr/web/api/element/mousedown_event/index.md | 88 + .../fr/web/api/element/mouseenter_event/index.html | 157 - files/fr/web/api/element/mouseenter_event/index.md | 157 + .../fr/web/api/element/mouseleave_event/index.html | 147 - files/fr/web/api/element/mouseleave_event/index.md | 147 + .../fr/web/api/element/mousemove_event/index.html | 161 - files/fr/web/api/element/mousemove_event/index.md | 161 + files/fr/web/api/element/mouseout_event/index.html | 125 - files/fr/web/api/element/mouseout_event/index.md | 125 + .../fr/web/api/element/mouseover_event/index.html | 123 - files/fr/web/api/element/mouseover_event/index.md | 123 + files/fr/web/api/element/mouseup_event/index.html | 85 - files/fr/web/api/element/mouseup_event/index.md | 85 + files/fr/web/api/element/namespaceuri/index.html | 74 - files/fr/web/api/element/namespaceuri/index.md | 74 + files/fr/web/api/element/outerhtml/index.html | 111 - files/fr/web/api/element/outerhtml/index.md | 111 + files/fr/web/api/element/prefix/index.html | 66 - files/fr/web/api/element/prefix/index.md | 66 + files/fr/web/api/element/queryselector/index.html | 134 - files/fr/web/api/element/queryselector/index.md | 134 + .../fr/web/api/element/queryselectorall/index.html | 166 - files/fr/web/api/element/queryselectorall/index.md | 166 + .../api/element/releasepointercapture/index.html | 92 - .../web/api/element/releasepointercapture/index.md | 92 + .../fr/web/api/element/removeattribute/index.html | 47 - files/fr/web/api/element/removeattribute/index.md | 47 + .../web/api/element/removeattributenode/index.html | 45 - .../web/api/element/removeattributenode/index.md | 45 + .../web/api/element/removeattributens/index.html | 44 - .../fr/web/api/element/removeattributens/index.md | 44 + .../web/api/element/requestfullscreen/index.html | 65 - .../fr/web/api/element/requestfullscreen/index.md | 65 + files/fr/web/api/element/scrollheight/index.html | 188 - files/fr/web/api/element/scrollheight/index.md | 188 + files/fr/web/api/element/scrollintoview/index.html | 81 - files/fr/web/api/element/scrollintoview/index.md | 81 + .../api/element/scrollintoviewifneeded/index.html | 47 - .../api/element/scrollintoviewifneeded/index.md | 47 + files/fr/web/api/element/scrollleft/index.html | 69 - files/fr/web/api/element/scrollleft/index.md | 69 + files/fr/web/api/element/scrollleftmax/index.html | 26 - files/fr/web/api/element/scrollleftmax/index.md | 26 + files/fr/web/api/element/scrollto/index.html | 78 - files/fr/web/api/element/scrollto/index.md | 78 + files/fr/web/api/element/scrolltop/index.html | 106 - files/fr/web/api/element/scrolltop/index.md | 106 + files/fr/web/api/element/scrollwidth/index.html | 32 - files/fr/web/api/element/scrollwidth/index.md | 32 + files/fr/web/api/element/select_event/index.html | 77 - files/fr/web/api/element/select_event/index.md | 77 + files/fr/web/api/element/setattribute/index.html | 84 - files/fr/web/api/element/setattribute/index.md | 84 + .../fr/web/api/element/setattributenode/index.html | 49 - files/fr/web/api/element/setattributenode/index.md | 49 + .../web/api/element/setattributenodens/index.html | 53 - .../fr/web/api/element/setattributenodens/index.md | 53 + files/fr/web/api/element/setattributens/index.html | 45 - files/fr/web/api/element/setattributens/index.md | 45 + files/fr/web/api/element/setcapture/index.html | 87 - files/fr/web/api/element/setcapture/index.md | 87 + .../web/api/element/setpointercapture/index.html | 90 - .../fr/web/api/element/setpointercapture/index.md | 90 + files/fr/web/api/element/tagname/index.html | 69 - files/fr/web/api/element/tagname/index.md | 69 + files/fr/web/api/encoding_api/index.html | 60 - files/fr/web/api/encoding_api/index.md | 60 + files/fr/web/api/errorevent/index.html | 76 - files/fr/web/api/errorevent/index.md | 76 + files/fr/web/api/event/bubbles/index.html | 83 - files/fr/web/api/event/bubbles/index.md | 83 + files/fr/web/api/event/cancelable/index.html | 88 - files/fr/web/api/event/cancelable/index.md | 88 + files/fr/web/api/event/cancelbubble/index.html | 49 - files/fr/web/api/event/cancelbubble/index.md | 49 + .../event/comparison_of_event_targets/index.html | 169 - .../api/event/comparison_of_event_targets/index.md | 169 + files/fr/web/api/event/currenttarget/index.html | 92 - files/fr/web/api/event/currenttarget/index.md | 92 + files/fr/web/api/event/defaultprevented/index.html | 58 - files/fr/web/api/event/defaultprevented/index.md | 58 + files/fr/web/api/event/event/index.html | 73 - files/fr/web/api/event/event/index.md | 73 + files/fr/web/api/event/eventphase/index.html | 196 -- files/fr/web/api/event/eventphase/index.md | 196 ++ .../api/event/explicitoriginaltarget/index.html | 49 - .../web/api/event/explicitoriginaltarget/index.md | 49 + files/fr/web/api/event/index.html | 167 - files/fr/web/api/event/index.md | 167 + files/fr/web/api/event/initevent/index.html | 85 - files/fr/web/api/event/initevent/index.md | 85 + files/fr/web/api/event/istrusted/index.html | 61 - files/fr/web/api/event/istrusted/index.md | 61 + files/fr/web/api/event/originaltarget/index.html | 37 - files/fr/web/api/event/originaltarget/index.md | 37 + files/fr/web/api/event/preventdefault/index.html | 95 - files/fr/web/api/event/preventdefault/index.md | 95 + files/fr/web/api/event/returnvalue/index.html | 32 - files/fr/web/api/event/returnvalue/index.md | 32 + files/fr/web/api/event/srcelement/index.html | 32 - files/fr/web/api/event/srcelement/index.md | 32 + .../api/event/stopimmediatepropagation/index.html | 42 - .../api/event/stopimmediatepropagation/index.md | 42 + files/fr/web/api/event/stoppropagation/index.html | 59 - files/fr/web/api/event/stoppropagation/index.md | 59 + files/fr/web/api/event/target/index.html | 89 - files/fr/web/api/event/target/index.md | 89 + files/fr/web/api/event/timestamp/index.html | 108 - files/fr/web/api/event/timestamp/index.md | 108 + files/fr/web/api/event/type/index.html | 102 - files/fr/web/api/event/type/index.md | 102 + files/fr/web/api/eventlistener/index.html | 86 - files/fr/web/api/eventlistener/index.md | 86 + files/fr/web/api/eventsource/close/index.html | 78 - files/fr/web/api/eventsource/close/index.md | 78 + files/fr/web/api/eventsource/index.html | 95 - files/fr/web/api/eventsource/index.md | 95 + files/fr/web/api/eventsource/onopen/index.html | 55 - files/fr/web/api/eventsource/onopen/index.md | 55 + .../api/eventtarget/addeventlistener/index.html | 886 ----- .../web/api/eventtarget/addeventlistener/index.md | 886 +++++ .../web/api/eventtarget/dispatchevent/index.html | 71 - .../fr/web/api/eventtarget/dispatchevent/index.md | 71 + .../fr/web/api/eventtarget/eventtarget/index.html | 80 - files/fr/web/api/eventtarget/eventtarget/index.md | 80 + files/fr/web/api/eventtarget/index.html | 110 - files/fr/web/api/eventtarget/index.md | 110 + .../api/eventtarget/removeeventlistener/index.html | 220 -- .../api/eventtarget/removeeventlistener/index.md | 220 ++ .../api/extendableevent/extendableevent/index.html | 59 - .../api/extendableevent/extendableevent/index.md | 59 + files/fr/web/api/extendableevent/index.html | 123 - files/fr/web/api/extendableevent/index.md | 123 + .../web/api/extendablemessageevent/data/index.html | 74 - .../web/api/extendablemessageevent/data/index.md | 74 + .../extendablemessageevent/index.html | 75 - .../extendablemessageevent/index.md | 75 + files/fr/web/api/extendablemessageevent/index.html | 99 - files/fr/web/api/extendablemessageevent/index.md | 99 + .../extendablemessageevent/lasteventid/index.html | 76 - .../extendablemessageevent/lasteventid/index.md | 76 + .../api/extendablemessageevent/origin/index.html | 76 - .../web/api/extendablemessageevent/origin/index.md | 76 + .../api/extendablemessageevent/ports/index.html | 75 - .../web/api/extendablemessageevent/ports/index.md | 75 + .../api/featurepolicy/allowedfeatures/index.html | 64 - .../web/api/featurepolicy/allowedfeatures/index.md | 64 + .../web/api/featurepolicy/allowsfeature/index.html | 76 - .../web/api/featurepolicy/allowsfeature/index.md | 76 + files/fr/web/api/featurepolicy/features/index.html | 64 - files/fr/web/api/featurepolicy/features/index.md | 64 + .../getallowlistforfeature/index.html | 69 - .../featurepolicy/getallowlistforfeature/index.md | 69 + files/fr/web/api/featurepolicy/index.html | 68 - files/fr/web/api/featurepolicy/index.md | 68 + .../federatedcredential/index.html | 54 - .../federatedcredential/index.md | 54 + files/fr/web/api/federatedcredential/index.html | 77 - files/fr/web/api/federatedcredential/index.md | 77 + .../api/federatedcredential/provider/index.html | 49 - .../web/api/federatedcredential/provider/index.md | 49 + files/fr/web/api/fetch/index.html | 194 -- files/fr/web/api/fetch/index.md | 194 ++ .../fr/web/api/fetch_api/basic_concepts/index.html | 64 - files/fr/web/api/fetch_api/basic_concepts/index.md | 64 + files/fr/web/api/fetch_api/index.html | 81 - files/fr/web/api/fetch_api/index.md | 81 + files/fr/web/api/fetch_api/using_fetch/index.html | 310 -- files/fr/web/api/fetch_api/using_fetch/index.md | 310 ++ files/fr/web/api/fetchevent/index.html | 107 - files/fr/web/api/fetchevent/index.md | 107 + files/fr/web/api/file/index.html | 117 - files/fr/web/api/file/index.md | 117 + files/fr/web/api/file/name/index.html | 41 - files/fr/web/api/file/name/index.md | 41 + .../using_files_from_web_applications/index.html | 494 --- .../using_files_from_web_applications/index.md | 494 +++ .../api/file_and_directory_entries_api/index.html | 56 - .../api/file_and_directory_entries_api/index.md | 56 + files/fr/web/api/filelist/index.html | 148 - files/fr/web/api/filelist/index.md | 148 + files/fr/web/api/filereader/filereader/index.html | 59 - files/fr/web/api/filereader/filereader/index.md | 59 + files/fr/web/api/filereader/index.html | 122 - files/fr/web/api/filereader/index.md | 122 + .../api/filereader/readasarraybuffer/index.html | 57 - .../web/api/filereader/readasarraybuffer/index.md | 57 + .../api/filereader/readasbinarystring/index.html | 82 - .../web/api/filereader/readasbinarystring/index.md | 82 + .../fr/web/api/filereader/readasdataurl/index.html | 125 - files/fr/web/api/filereader/readasdataurl/index.md | 125 + files/fr/web/api/filereader/readastext/index.html | 62 - files/fr/web/api/filereader/readastext/index.md | 62 + files/fr/web/api/filerequest/index.html | 54 - files/fr/web/api/filerequest/index.md | 54 + files/fr/web/api/filerequest/lockedfile/index.html | 48 - files/fr/web/api/filerequest/lockedfile/index.md | 48 + files/fr/web/api/filerequest/onprogress/index.html | 52 - files/fr/web/api/filerequest/onprogress/index.md | 52 + files/fr/web/api/focusevent/index.html | 63 - files/fr/web/api/focusevent/index.md | 63 + files/fr/web/api/force_touch_events/index.html | 52 - files/fr/web/api/force_touch_events/index.md | 52 + files/fr/web/api/formdata/append/index.html | 98 - files/fr/web/api/formdata/append/index.md | 98 + files/fr/web/api/formdata/delete/index.html | 78 - files/fr/web/api/formdata/delete/index.md | 78 + files/fr/web/api/formdata/entries/index.html | 81 - files/fr/web/api/formdata/entries/index.md | 81 + files/fr/web/api/formdata/formdata/index.html | 99 - files/fr/web/api/formdata/formdata/index.md | 99 + files/fr/web/api/formdata/get/index.html | 66 - files/fr/web/api/formdata/get/index.md | 66 + files/fr/web/api/formdata/getall/index.html | 82 - files/fr/web/api/formdata/getall/index.md | 82 + files/fr/web/api/formdata/has/index.html | 80 - files/fr/web/api/formdata/has/index.md | 80 + files/fr/web/api/formdata/index.html | 87 - files/fr/web/api/formdata/index.md | 87 + files/fr/web/api/formdata/keys/index.html | 79 - files/fr/web/api/formdata/keys/index.md | 79 + files/fr/web/api/formdata/set/index.html | 92 - files/fr/web/api/formdata/set/index.md | 92 + .../api/formdata/using_formdata_objects/index.html | 148 - .../api/formdata/using_formdata_objects/index.md | 148 + files/fr/web/api/formdata/values/index.html | 79 - files/fr/web/api/formdata/values/index.md | 79 + files/fr/web/api/fullscreen_api/index.html | 243 -- files/fr/web/api/fullscreen_api/index.md | 243 ++ files/fr/web/api/gainnode/index.html | 93 - files/fr/web/api/gainnode/index.md | 93 + files/fr/web/api/gamepad/index.html | 97 - files/fr/web/api/gamepad/index.md | 97 + files/fr/web/api/gamepad_api/index.html | 90 - files/fr/web/api/gamepad_api/index.md | 90 + .../gamepad_api/using_the_gamepad_api/index.html | 282 -- .../api/gamepad_api/using_the_gamepad_api/index.md | 282 ++ files/fr/web/api/geolocation/clearwatch/index.html | 89 - files/fr/web/api/geolocation/clearwatch/index.md | 89 + .../api/geolocation/getcurrentposition/index.html | 88 - .../api/geolocation/getcurrentposition/index.md | 88 + files/fr/web/api/geolocation/index.html | 66 - files/fr/web/api/geolocation/index.md | 66 + .../web/api/geolocation/watchposition/index.html | 100 - .../fr/web/api/geolocation/watchposition/index.md | 100 + files/fr/web/api/geolocation_api/index.html | 244 -- files/fr/web/api/geolocation_api/index.md | 244 ++ files/fr/web/api/geolocationcoordinates/index.html | 67 - files/fr/web/api/geolocationcoordinates/index.md | 67 + files/fr/web/api/geolocationposition/index.html | 60 - files/fr/web/api/geolocationposition/index.md | 60 + .../api/geolocationposition/timestamp/index.html | 49 - .../web/api/geolocationposition/timestamp/index.md | 49 + .../fr/web/api/geolocationpositionerror/index.html | 80 - files/fr/web/api/geolocationpositionerror/index.md | 80 + files/fr/web/api/gestureevent/index.html | 72 - files/fr/web/api/gestureevent/index.md | 72 + files/fr/web/api/globaleventhandlers/index.html | 251 -- files/fr/web/api/globaleventhandlers/index.md | 251 ++ .../web/api/globaleventhandlers/onabort/index.html | 54 - .../web/api/globaleventhandlers/onabort/index.md | 54 + .../api/globaleventhandlers/onauxclick/index.html | 88 - .../api/globaleventhandlers/onauxclick/index.md | 88 + .../web/api/globaleventhandlers/onblur/index.html | 60 - .../fr/web/api/globaleventhandlers/onblur/index.md | 60 + .../api/globaleventhandlers/onchange/index.html | 35 - .../web/api/globaleventhandlers/onchange/index.md | 35 + .../web/api/globaleventhandlers/onclick/index.html | 66 - .../web/api/globaleventhandlers/onclick/index.md | 66 + .../web/api/globaleventhandlers/onclose/index.html | 47 - .../web/api/globaleventhandlers/onclose/index.md | 47 + .../api/globaleventhandlers/ondblclick/index.html | 59 - .../api/globaleventhandlers/ondblclick/index.md | 59 + .../web/api/globaleventhandlers/onerror/index.html | 96 - .../web/api/globaleventhandlers/onerror/index.md | 96 + .../web/api/globaleventhandlers/onfocus/index.html | 20 - .../web/api/globaleventhandlers/onfocus/index.md | 20 + .../ongotpointercapture/index.html | 59 - .../ongotpointercapture/index.md | 59 + .../api/globaleventhandlers/onkeydown/index.html | 22 - .../web/api/globaleventhandlers/onkeydown/index.md | 22 + .../api/globaleventhandlers/onkeypress/index.html | 22 - .../api/globaleventhandlers/onkeypress/index.md | 22 + .../web/api/globaleventhandlers/onkeyup/index.html | 22 - .../web/api/globaleventhandlers/onkeyup/index.md | 22 + .../web/api/globaleventhandlers/onload/index.html | 24 - .../fr/web/api/globaleventhandlers/onload/index.md | 24 + .../api/globaleventhandlers/onloadend/index.html | 68 - .../web/api/globaleventhandlers/onloadend/index.md | 68 + .../api/globaleventhandlers/onloadstart/index.html | 74 - .../api/globaleventhandlers/onloadstart/index.md | 74 + .../api/globaleventhandlers/onmousedown/index.html | 19 - .../api/globaleventhandlers/onmousedown/index.md | 19 + .../api/globaleventhandlers/onmousemove/index.html | 37 - .../api/globaleventhandlers/onmousemove/index.md | 37 + .../api/globaleventhandlers/onmouseout/index.html | 19 - .../api/globaleventhandlers/onmouseout/index.md | 19 + .../api/globaleventhandlers/onmouseover/index.html | 17 - .../api/globaleventhandlers/onmouseover/index.md | 17 + .../api/globaleventhandlers/onmouseup/index.html | 19 - .../web/api/globaleventhandlers/onmouseup/index.md | 19 + .../web/api/globaleventhandlers/onreset/index.html | 73 - .../web/api/globaleventhandlers/onreset/index.md | 73 + .../api/globaleventhandlers/onresize/index.html | 65 - .../web/api/globaleventhandlers/onresize/index.md | 65 + .../api/globaleventhandlers/onscroll/index.html | 17 - .../web/api/globaleventhandlers/onscroll/index.md | 17 + .../api/globaleventhandlers/onselect/index.html | 76 - .../web/api/globaleventhandlers/onselect/index.md | 76 + .../web/api/globaleventhandlers/onwheel/index.html | 47 - .../web/api/globaleventhandlers/onwheel/index.md | 47 + files/fr/web/api/headers/index.html | 133 - files/fr/web/api/headers/index.md | 133 + files/fr/web/api/history/index.html | 87 - files/fr/web/api/history/index.md | 87 + files/fr/web/api/history/length/index.html | 47 - files/fr/web/api/history/length/index.md | 47 + files/fr/web/api/history_api/example/index.html | 397 --- files/fr/web/api/history_api/example/index.md | 397 +++ files/fr/web/api/history_api/index.html | 188 - files/fr/web/api/history_api/index.md | 188 + .../drag_operations/index.html | 297 -- .../drag_operations/index.md | 297 ++ files/fr/web/api/html_drag_and_drop_api/index.html | 275 -- files/fr/web/api/html_drag_and_drop_api/index.md | 275 ++ files/fr/web/api/htmlbaseelement/index.html | 76 - files/fr/web/api/htmlbaseelement/index.md | 76 + files/fr/web/api/htmlbasefontelement/index.html | 65 - files/fr/web/api/htmlbasefontelement/index.md | 65 + files/fr/web/api/htmlbodyelement/index.html | 118 - files/fr/web/api/htmlbodyelement/index.md | 118 + files/fr/web/api/htmlbrelement/index.html | 71 - files/fr/web/api/htmlbrelement/index.md | 71 + files/fr/web/api/htmlbuttonelement/index.html | 145 - files/fr/web/api/htmlbuttonelement/index.md | 145 + .../fr/web/api/htmlbuttonelement/labels/index.html | 66 - files/fr/web/api/htmlbuttonelement/labels/index.md | 66 + .../api/htmlcanvaselement/getcontext/index.html | 131 - .../web/api/htmlcanvaselement/getcontext/index.md | 131 + .../fr/web/api/htmlcanvaselement/height/index.html | 76 - files/fr/web/api/htmlcanvaselement/height/index.md | 76 + files/fr/web/api/htmlcanvaselement/index.html | 245 -- files/fr/web/api/htmlcanvaselement/index.md | 245 ++ files/fr/web/api/htmlcollection/index.html | 94 - files/fr/web/api/htmlcollection/index.md | 94 + files/fr/web/api/htmlcollection/item/index.html | 36 - files/fr/web/api/htmlcollection/item/index.md | 36 + .../getdistributednodes/index.html | 50 - .../getdistributednodes/index.md | 50 + files/fr/web/api/htmlcontentelement/index.html | 60 - files/fr/web/api/htmlcontentelement/index.md | 60 + .../web/api/htmlcontentelement/select/index.html | 51 - .../fr/web/api/htmlcontentelement/select/index.md | 51 + .../api/htmldialogelement/close_event/index.html | 110 - .../web/api/htmldialogelement/close_event/index.md | 110 + files/fr/web/api/htmldialogelement/index.html | 148 - files/fr/web/api/htmldialogelement/index.md | 148 + files/fr/web/api/htmldivelement/index.html | 72 - files/fr/web/api/htmldivelement/index.md | 72 + files/fr/web/api/htmldocument/index.html | 16 - files/fr/web/api/htmldocument/index.md | 16 + files/fr/web/api/htmlelement/accesskey/index.html | 23 - files/fr/web/api/htmlelement/accesskey/index.md | 23 + .../api/htmlelement/animationend_event/index.html | 82 - .../api/htmlelement/animationend_event/index.md | 82 + .../animationiteration_event/index.html | 84 - .../htmlelement/animationiteration_event/index.md | 84 + .../htmlelement/animationstart_event/index.html | 82 - .../api/htmlelement/animationstart_event/index.md | 82 + .../api/htmlelement/beforeinput_event/index.html | 92 - .../web/api/htmlelement/beforeinput_event/index.md | 92 + .../fr/web/api/htmlelement/change_event/index.html | 165 - files/fr/web/api/htmlelement/change_event/index.md | 165 + files/fr/web/api/htmlelement/click/index.html | 72 - files/fr/web/api/htmlelement/click/index.md | 72 + .../web/api/htmlelement/contenteditable/index.html | 63 - .../web/api/htmlelement/contenteditable/index.md | 63 + files/fr/web/api/htmlelement/dir/index.html | 48 - files/fr/web/api/htmlelement/dir/index.md | 48 + files/fr/web/api/htmlelement/hidden/index.html | 143 - files/fr/web/api/htmlelement/hidden/index.md | 143 + files/fr/web/api/htmlelement/index.html | 118 - files/fr/web/api/htmlelement/index.md | 118 + files/fr/web/api/htmlelement/innertext/index.html | 43 - files/fr/web/api/htmlelement/innertext/index.md | 43 + .../fr/web/api/htmlelement/input_event/index.html | 100 - files/fr/web/api/htmlelement/input_event/index.md | 100 + .../api/htmlelement/iscontenteditable/index.html | 79 - .../web/api/htmlelement/iscontenteditable/index.md | 79 + files/fr/web/api/htmlelement/lang/index.html | 46 - files/fr/web/api/htmlelement/lang/index.md | 46 + .../fr/web/api/htmlelement/offsetheight/index.html | 54 - files/fr/web/api/htmlelement/offsetheight/index.md | 54 + files/fr/web/api/htmlelement/offsetleft/index.html | 57 - files/fr/web/api/htmlelement/offsetleft/index.md | 57 + .../fr/web/api/htmlelement/offsetparent/index.html | 21 - files/fr/web/api/htmlelement/offsetparent/index.md | 21 + files/fr/web/api/htmlelement/offsettop/index.html | 46 - files/fr/web/api/htmlelement/offsettop/index.md | 46 + .../fr/web/api/htmlelement/offsetwidth/index.html | 40 - files/fr/web/api/htmlelement/offsetwidth/index.md | 40 + files/fr/web/api/htmlelement/outertext/index.html | 37 - files/fr/web/api/htmlelement/outertext/index.md | 37 + files/fr/web/api/htmlelement/title/index.html | 74 - files/fr/web/api/htmlelement/title/index.md | 74 + .../api/htmlelement/transitionend_event/index.html | 191 - .../api/htmlelement/transitionend_event/index.md | 191 + .../web/api/htmlformcontrolscollection/index.html | 64 - .../fr/web/api/htmlformcontrolscollection/index.md | 64 + .../api/htmlformelement/acceptcharset/index.html | 27 - .../web/api/htmlformelement/acceptcharset/index.md | 27 + files/fr/web/api/htmlformelement/action/index.html | 26 - files/fr/web/api/htmlformelement/action/index.md | 26 + .../fr/web/api/htmlformelement/elements/index.html | 31 - files/fr/web/api/htmlformelement/elements/index.md | 31 + .../fr/web/api/htmlformelement/encoding/index.html | 10 - files/fr/web/api/htmlformelement/encoding/index.md | 10 + .../fr/web/api/htmlformelement/enctype/index.html | 26 - files/fr/web/api/htmlformelement/enctype/index.md | 26 + files/fr/web/api/htmlformelement/index.html | 223 -- files/fr/web/api/htmlformelement/index.md | 223 ++ files/fr/web/api/htmlformelement/length/index.html | 29 - files/fr/web/api/htmlformelement/length/index.md | 29 + files/fr/web/api/htmlformelement/method/index.html | 25 - files/fr/web/api/htmlformelement/method/index.md | 25 + files/fr/web/api/htmlformelement/name/index.html | 32 - files/fr/web/api/htmlformelement/name/index.md | 32 + .../api/htmlformelement/reportvalidity/index.html | 58 - .../api/htmlformelement/reportvalidity/index.md | 58 + files/fr/web/api/htmlformelement/reset/index.html | 28 - files/fr/web/api/htmlformelement/reset/index.md | 28 + files/fr/web/api/htmlformelement/submit/index.html | 40 - files/fr/web/api/htmlformelement/submit/index.md | 40 + .../api/htmlformelement/submit_event/index.html | 60 - .../web/api/htmlformelement/submit_event/index.md | 60 + files/fr/web/api/htmlformelement/target/index.html | 25 - files/fr/web/api/htmlformelement/target/index.md | 25 + files/fr/web/api/htmlframesetelement/index.html | 109 - files/fr/web/api/htmlframesetelement/index.md | 109 + .../allowpaymentrequest/index.html | 27 - .../htmliframeelement/allowpaymentrequest/index.md | 27 + .../htmliframeelement/contentdocument/index.html | 22 - .../api/htmliframeelement/contentdocument/index.md | 22 + .../api/htmliframeelement/contentwindow/index.html | 46 - .../api/htmliframeelement/contentwindow/index.md | 46 + files/fr/web/api/htmliframeelement/csp/index.html | 26 - files/fr/web/api/htmliframeelement/csp/index.md | 26 + .../api/htmliframeelement/featurepolicy/index.html | 46 - .../api/htmliframeelement/featurepolicy/index.md | 46 + files/fr/web/api/htmliframeelement/index.html | 110 - files/fr/web/api/htmliframeelement/index.md | 110 + files/fr/web/api/htmlimageelement/image/index.html | 62 - files/fr/web/api/htmlimageelement/image/index.md | 62 + files/fr/web/api/htmlimageelement/index.html | 149 - files/fr/web/api/htmlimageelement/index.md | 149 + files/fr/web/api/htmlinputelement/index.html | 426 --- files/fr/web/api/htmlinputelement/index.md | 426 +++ .../fr/web/api/htmlinputelement/labels/index.html | 70 - files/fr/web/api/htmlinputelement/labels/index.md | 70 + .../api/htmlmediaelement/abort_event/index.html | 87 - .../web/api/htmlmediaelement/abort_event/index.md | 87 + .../api/htmlmediaelement/canplay_event/index.html | 80 - .../api/htmlmediaelement/canplay_event/index.md | 80 + .../canplaythrough_event/index.html | 80 - .../htmlmediaelement/canplaythrough_event/index.md | 80 + .../api/htmlmediaelement/capturestream/index.html | 94 - .../api/htmlmediaelement/capturestream/index.md | 94 + .../durationchange_event/index.html | 80 - .../htmlmediaelement/durationchange_event/index.md | 80 + .../api/htmlmediaelement/emptied_event/index.html | 80 - .../api/htmlmediaelement/emptied_event/index.md | 80 + .../api/htmlmediaelement/ended_event/index.html | 98 - .../web/api/htmlmediaelement/ended_event/index.md | 98 + files/fr/web/api/htmlmediaelement/index.html | 237 -- files/fr/web/api/htmlmediaelement/index.md | 237 ++ files/fr/web/api/htmlmediaelement/play/index.html | 86 - files/fr/web/api/htmlmediaelement/play/index.md | 86 + .../fr/web/api/htmlmediaelement/volume/index.html | 66 - files/fr/web/api/htmlmediaelement/volume/index.md | 66 + files/fr/web/api/htmloptionelement/index.html | 146 - files/fr/web/api/htmloptionelement/index.md | 146 + .../fr/web/api/htmloptionelement/option/index.html | 100 - files/fr/web/api/htmloptionelement/option/index.md | 100 + files/fr/web/api/htmlquoteelement/index.html | 30 - files/fr/web/api/htmlquoteelement/index.md | 30 + files/fr/web/api/htmlselectelement/index.html | 152 - files/fr/web/api/htmlselectelement/index.md | 152 + .../fr/web/api/htmlselectelement/remove/index.html | 88 - files/fr/web/api/htmlselectelement/remove/index.md | 88 + .../api/htmlselectelement/selectedindex/index.html | 69 - .../api/htmlselectelement/selectedindex/index.md | 69 + .../htmlselectelement/setcustomvalidity/index.html | 50 - .../htmlselectelement/setcustomvalidity/index.md | 50 + files/fr/web/api/htmlshadowelement/index.html | 44 - files/fr/web/api/htmlshadowelement/index.md | 44 + files/fr/web/api/htmlspanelement/index.html | 19 - files/fr/web/api/htmlspanelement/index.md | 19 + files/fr/web/api/htmlstyleelement/index.html | 111 - files/fr/web/api/htmlstyleelement/index.md | 111 + files/fr/web/api/htmltablecellelement/index.html | 96 - files/fr/web/api/htmltablecellelement/index.md | 96 + .../fr/web/api/htmltableelement/caption/index.html | 25 - files/fr/web/api/htmltableelement/caption/index.md | 25 + files/fr/web/api/htmltableelement/index.html | 110 - files/fr/web/api/htmltableelement/index.md | 110 + .../web/api/htmltableelement/insertrow/index.html | 100 - .../fr/web/api/htmltableelement/insertrow/index.md | 100 + files/fr/web/api/htmltablerowelement/index.html | 93 - files/fr/web/api/htmltablerowelement/index.md | 93 + .../api/htmltablerowelement/insertcell/index.html | 103 - .../api/htmltablerowelement/insertcell/index.md | 103 + .../fr/web/api/htmltimeelement/datetime/index.html | 174 - files/fr/web/api/htmltimeelement/datetime/index.md | 174 + files/fr/web/api/htmltimeelement/index.html | 64 - files/fr/web/api/htmltimeelement/index.md | 64 + files/fr/web/api/htmlunknownelement/index.html | 51 - files/fr/web/api/htmlunknownelement/index.md | 51 + files/fr/web/api/htmlvideoelement/index.html | 111 - files/fr/web/api/htmlvideoelement/index.md | 111 + files/fr/web/api/idbcursor/advance/index.html | 114 - files/fr/web/api/idbcursor/advance/index.md | 114 + files/fr/web/api/idbcursor/continue/index.html | 117 - files/fr/web/api/idbcursor/continue/index.md | 117 + files/fr/web/api/idbcursor/index.html | 148 - files/fr/web/api/idbcursor/index.md | 148 + files/fr/web/api/idbdatabase/close/index.html | 80 - files/fr/web/api/idbdatabase/close/index.md | 80 + .../api/idbdatabase/createobjectstore/index.html | 146 - .../web/api/idbdatabase/createobjectstore/index.md | 146 + .../api/idbdatabase/deleteobjectstore/index.html | 139 - .../web/api/idbdatabase/deleteobjectstore/index.md | 139 + files/fr/web/api/idbdatabase/index.html | 153 - files/fr/web/api/idbdatabase/index.md | 153 + files/fr/web/api/idbdatabase/name/index.html | 86 - files/fr/web/api/idbdatabase/name/index.md | 86 + .../api/idbdatabase/objectstorenames/index.html | 83 - .../web/api/idbdatabase/objectstorenames/index.md | 83 + files/fr/web/api/idbdatabase/onabort/index.html | 84 - files/fr/web/api/idbdatabase/onabort/index.md | 84 + files/fr/web/api/idbdatabase/onerror/index.html | 84 - files/fr/web/api/idbdatabase/onerror/index.md | 84 + .../web/api/idbdatabase/onversionchange/index.html | 90 - .../web/api/idbdatabase/onversionchange/index.md | 90 + .../fr/web/api/idbdatabase/transaction/index.html | 152 - files/fr/web/api/idbdatabase/transaction/index.md | 152 + files/fr/web/api/idbdatabase/version/index.html | 77 - files/fr/web/api/idbdatabase/version/index.md | 77 + files/fr/web/api/idbenvironment/index.html | 78 - files/fr/web/api/idbenvironment/index.md | 78 + files/fr/web/api/idbfactory/cmp/index.html | 113 - files/fr/web/api/idbfactory/cmp/index.md | 113 + .../web/api/idbfactory/deletedatabase/index.html | 97 - .../fr/web/api/idbfactory/deletedatabase/index.md | 97 + files/fr/web/api/idbfactory/index.html | 105 - files/fr/web/api/idbfactory/index.md | 105 + files/fr/web/api/idbfactory/open/index.html | 152 - files/fr/web/api/idbfactory/open/index.md | 152 + files/fr/web/api/idbindex/count/index.html | 142 - files/fr/web/api/idbindex/count/index.md | 142 + files/fr/web/api/idbindex/get/index.html | 123 - files/fr/web/api/idbindex/get/index.md | 123 + files/fr/web/api/idbindex/getall/index.html | 101 - files/fr/web/api/idbindex/getall/index.md | 101 + files/fr/web/api/idbindex/getallkeys/index.html | 102 - files/fr/web/api/idbindex/getallkeys/index.md | 102 + files/fr/web/api/idbindex/getkey/index.html | 135 - files/fr/web/api/idbindex/getkey/index.md | 135 + files/fr/web/api/idbindex/index.html | 140 - files/fr/web/api/idbindex/index.md | 140 + files/fr/web/api/idbindex/isautolocale/index.html | 79 - files/fr/web/api/idbindex/isautolocale/index.md | 79 + files/fr/web/api/idbindex/keypath/index.html | 98 - files/fr/web/api/idbindex/keypath/index.md | 98 + files/fr/web/api/idbindex/locale/index.html | 83 - files/fr/web/api/idbindex/locale/index.md | 83 + files/fr/web/api/idbindex/multientry/index.html | 97 - files/fr/web/api/idbindex/multientry/index.md | 97 + files/fr/web/api/idbindex/name/index.html | 112 - files/fr/web/api/idbindex/name/index.md | 112 + files/fr/web/api/idbindex/objectstore/index.html | 100 - files/fr/web/api/idbindex/objectstore/index.md | 100 + files/fr/web/api/idbindex/opencursor/index.html | 156 - files/fr/web/api/idbindex/opencursor/index.md | 156 + files/fr/web/api/idbindex/openkeycursor/index.html | 151 - files/fr/web/api/idbindex/openkeycursor/index.md | 151 + files/fr/web/api/idbindex/unique/index.html | 96 - files/fr/web/api/idbindex/unique/index.md | 96 + files/fr/web/api/idbkeyrange/bound/index.html | 115 - files/fr/web/api/idbkeyrange/bound/index.md | 115 + files/fr/web/api/idbkeyrange/includes/index.html | 101 - files/fr/web/api/idbkeyrange/includes/index.md | 101 + files/fr/web/api/idbkeyrange/index.html | 195 -- files/fr/web/api/idbkeyrange/index.md | 195 ++ files/fr/web/api/idbkeyrange/lower/index.html | 88 - files/fr/web/api/idbkeyrange/lower/index.md | 88 + files/fr/web/api/idbkeyrange/lowerbound/index.html | 102 - files/fr/web/api/idbkeyrange/lowerbound/index.md | 102 + files/fr/web/api/idbkeyrange/loweropen/index.html | 88 - files/fr/web/api/idbkeyrange/loweropen/index.md | 88 + files/fr/web/api/idbkeyrange/only/index.html | 96 - files/fr/web/api/idbkeyrange/only/index.md | 96 + files/fr/web/api/idbkeyrange/upper/index.html | 88 - files/fr/web/api/idbkeyrange/upper/index.md | 88 + files/fr/web/api/idbkeyrange/upperbound/index.html | 103 - files/fr/web/api/idbkeyrange/upperbound/index.md | 103 + files/fr/web/api/idbkeyrange/upperopen/index.html | 83 - files/fr/web/api/idbkeyrange/upperopen/index.md | 83 + files/fr/web/api/idbobjectstore/add/index.html | 163 - files/fr/web/api/idbobjectstore/add/index.md | 163 + .../api/idbobjectstore/autoincrement/index.html | 115 - .../web/api/idbobjectstore/autoincrement/index.md | 115 + files/fr/web/api/idbobjectstore/clear/index.html | 116 - files/fr/web/api/idbobjectstore/clear/index.md | 116 + files/fr/web/api/idbobjectstore/count/index.html | 104 - files/fr/web/api/idbobjectstore/count/index.md | 104 + .../web/api/idbobjectstore/createindex/index.html | 166 - .../fr/web/api/idbobjectstore/createindex/index.md | 166 + files/fr/web/api/idbobjectstore/delete/index.html | 142 - files/fr/web/api/idbobjectstore/delete/index.md | 142 + .../web/api/idbobjectstore/deleteindex/index.html | 132 - .../fr/web/api/idbobjectstore/deleteindex/index.md | 132 + files/fr/web/api/idbobjectstore/get/index.html | 130 - files/fr/web/api/idbobjectstore/get/index.md | 130 + files/fr/web/api/idbobjectstore/getall/index.html | 76 - files/fr/web/api/idbobjectstore/getall/index.md | 76 + .../web/api/idbobjectstore/getallkeys/index.html | 106 - .../fr/web/api/idbobjectstore/getallkeys/index.md | 106 + files/fr/web/api/idbobjectstore/getkey/index.html | 114 - files/fr/web/api/idbobjectstore/getkey/index.md | 114 + files/fr/web/api/idbobjectstore/index.html | 167 - files/fr/web/api/idbobjectstore/index.md | 167 + files/fr/web/api/idbobjectstore/index/index.html | 124 - files/fr/web/api/idbobjectstore/index/index.md | 124 + .../web/api/idbobjectstore/indexnames/index.html | 112 - .../fr/web/api/idbobjectstore/indexnames/index.md | 112 + files/fr/web/api/idbobjectstore/keypath/index.html | 114 - files/fr/web/api/idbobjectstore/keypath/index.md | 114 + files/fr/web/api/idbobjectstore/name/index.html | 120 - files/fr/web/api/idbobjectstore/name/index.md | 120 + .../web/api/idbobjectstore/opencursor/index.html | 114 - .../fr/web/api/idbobjectstore/opencursor/index.md | 114 + .../api/idbobjectstore/openkeycursor/index.html | 111 - .../web/api/idbobjectstore/openkeycursor/index.md | 111 + files/fr/web/api/idbobjectstore/put/index.html | 150 - files/fr/web/api/idbobjectstore/put/index.md | 150 + .../web/api/idbobjectstore/transaction/index.html | 106 - .../fr/web/api/idbobjectstore/transaction/index.md | 106 + .../api/idbopendbrequest/blocked_event/index.html | 103 - .../api/idbopendbrequest/blocked_event/index.md | 103 + files/fr/web/api/idbopendbrequest/index.html | 127 - files/fr/web/api/idbopendbrequest/index.md | 127 + files/fr/web/api/idbrequest/error/index.html | 134 - files/fr/web/api/idbrequest/error/index.md | 134 + files/fr/web/api/idbrequest/index.html | 129 - files/fr/web/api/idbrequest/index.md | 129 + files/fr/web/api/idbrequest/onerror/index.html | 84 - files/fr/web/api/idbrequest/onerror/index.md | 84 + files/fr/web/api/idbrequest/onsuccess/index.html | 86 - files/fr/web/api/idbrequest/onsuccess/index.md | 86 + files/fr/web/api/idbrequest/readystate/index.html | 99 - files/fr/web/api/idbrequest/readystate/index.md | 99 + files/fr/web/api/idbrequest/result/index.html | 72 - files/fr/web/api/idbrequest/result/index.md | 72 + files/fr/web/api/idbrequest/source/index.html | 102 - files/fr/web/api/idbrequest/source/index.md | 102 + files/fr/web/api/idbrequest/transaction/index.html | 115 - files/fr/web/api/idbrequest/transaction/index.md | 115 + files/fr/web/api/idbtransaction/abort/index.html | 117 - files/fr/web/api/idbtransaction/abort/index.md | 117 + .../web/api/idbtransaction/abort_event/index.html | 75 - .../fr/web/api/idbtransaction/abort_event/index.md | 75 + .../api/idbtransaction/complete_event/index.html | 89 - .../web/api/idbtransaction/complete_event/index.md | 89 + files/fr/web/api/idbtransaction/db/index.html | 112 - files/fr/web/api/idbtransaction/db/index.md | 112 + files/fr/web/api/idbtransaction/error/index.html | 117 - files/fr/web/api/idbtransaction/error/index.md | 117 + files/fr/web/api/idbtransaction/index.html | 188 - files/fr/web/api/idbtransaction/index.md | 188 + files/fr/web/api/idbtransaction/mode/index.html | 134 - files/fr/web/api/idbtransaction/mode/index.md | 134 + .../web/api/idbtransaction/objectstore/index.html | 131 - .../fr/web/api/idbtransaction/objectstore/index.md | 131 + .../api/idbtransaction/objectstorenames/index.html | 54 - .../api/idbtransaction/objectstorenames/index.md | 54 + files/fr/web/api/idbtransaction/onabort/index.html | 117 - files/fr/web/api/idbtransaction/onabort/index.md | 117 + .../web/api/idbtransaction/oncomplete/index.html | 116 - .../fr/web/api/idbtransaction/oncomplete/index.md | 116 + files/fr/web/api/idbtransaction/onerror/index.html | 106 - files/fr/web/api/idbtransaction/onerror/index.md | 106 + files/fr/web/api/imagedata/data/index.html | 49 - files/fr/web/api/imagedata/data/index.md | 49 + files/fr/web/api/imagedata/index.html | 62 - files/fr/web/api/imagedata/index.md | 62 + files/fr/web/api/index.html | 33 - files/fr/web/api/index.md | 33 + files/fr/web/api/indexeddb/index.html | 77 - files/fr/web/api/indexeddb/index.md | 77 + .../index.html | 140 - .../index.md | 140 + files/fr/web/api/indexeddb_api/index.html | 156 - files/fr/web/api/indexeddb_api/index.md | 156 + .../api/indexeddb_api/using_indexeddb/index.html | 1338 ------- .../web/api/indexeddb_api/using_indexeddb/index.md | 1338 +++++++ files/fr/web/api/inputevent/index.html | 71 - files/fr/web/api/inputevent/index.md | 71 + .../web/api/intersection_observer_api/index.html | 543 --- .../fr/web/api/intersection_observer_api/index.md | 543 +++ .../api/intersectionobserver/disconnect/index.html | 60 - .../api/intersectionobserver/disconnect/index.md | 60 + files/fr/web/api/intersectionobserver/index.html | 92 - files/fr/web/api/intersectionobserver/index.md | 92 + .../intersectionobserver/index.html | 89 - .../intersectionobserver/index.md | 89 + .../api/intersectionobserver/observe/index.html | 63 - .../web/api/intersectionobserver/observe/index.md | 63 + .../web/api/intersectionobserver/root/index.html | 61 - .../fr/web/api/intersectionobserver/root/index.md | 61 + .../api/intersectionobserver/rootmargin/index.html | 53 - .../api/intersectionobserver/rootmargin/index.md | 53 + .../intersectionobserver/takerecords/index.html | 64 - .../api/intersectionobserver/takerecords/index.md | 64 + .../api/intersectionobserver/thresholds/index.html | 56 - .../api/intersectionobserver/thresholds/index.md | 56 + .../api/intersectionobserver/unobserve/index.html | 72 - .../api/intersectionobserver/unobserve/index.md | 72 + .../web/api/intersectionobserverentry/index.html | 60 - .../fr/web/api/intersectionobserverentry/index.md | 60 + .../intersectionobserverentry/target/index.html | 58 - .../api/intersectionobserverentry/target/index.md | 58 + files/fr/web/api/issecurecontext/index.html | 47 - files/fr/web/api/issecurecontext/index.md | 47 + files/fr/web/api/keyboardevent/charcode/index.html | 94 - files/fr/web/api/keyboardevent/charcode/index.md | 94 + files/fr/web/api/keyboardevent/code/index.html | 213 -- files/fr/web/api/keyboardevent/code/index.md | 213 ++ files/fr/web/api/keyboardevent/index.html | 242 -- files/fr/web/api/keyboardevent/index.md | 242 ++ files/fr/web/api/keyboardevent/key/index.html | 219 -- files/fr/web/api/keyboardevent/key/index.md | 219 ++ .../api/keyboardevent/key/key_values/index.html | 3637 -------------------- .../web/api/keyboardevent/key/key_values/index.md | 3637 ++++++++++++++++++++ .../web/api/keyboardevent/keyboardevent/index.html | 82 - .../web/api/keyboardevent/keyboardevent/index.md | 82 + files/fr/web/api/localfilesystem/index.html | 196 -- files/fr/web/api/localfilesystem/index.md | 196 ++ files/fr/web/api/location/assign/index.html | 71 - files/fr/web/api/location/assign/index.md | 71 + files/fr/web/api/location/index.html | 155 - files/fr/web/api/location/index.md | 155 + files/fr/web/api/location/reload/index.html | 42 - files/fr/web/api/location/reload/index.md | 42 + files/fr/web/api/location/replace/index.html | 58 - files/fr/web/api/location/replace/index.md | 58 + files/fr/web/api/media_streams_api/index.html | 82 - files/fr/web/api/media_streams_api/index.md | 82 + .../web/api/mediadevices/getusermedia/index.html | 257 -- .../fr/web/api/mediadevices/getusermedia/index.md | 257 ++ files/fr/web/api/mediadevices/index.html | 122 - files/fr/web/api/mediadevices/index.md | 122 + files/fr/web/api/mediasource/index.html | 151 - files/fr/web/api/mediasource/index.md | 151 + .../fr/web/api/mediasource/mediasource/index.html | 54 - files/fr/web/api/mediasource/mediasource/index.md | 54 + files/fr/web/api/mediastream/index.html | 76 - files/fr/web/api/mediastream/index.md | 76 + .../web/api/mediastreamaudiosourcenode/index.html | 85 - .../fr/web/api/mediastreamaudiosourcenode/index.md | 85 + files/fr/web/api/mediastreamevent/index.html | 54 - files/fr/web/api/mediastreamevent/index.md | 54 + files/fr/web/api/mediatrackconstraints/index.html | 63 - files/fr/web/api/mediatrackconstraints/index.md | 63 + files/fr/web/api/messageevent/index.html | 139 - files/fr/web/api/messageevent/index.md | 139 + files/fr/web/api/mouseevent/index.html | 188 - files/fr/web/api/mouseevent/index.md | 188 + files/fr/web/api/mouseevent/offsetx/index.html | 51 - files/fr/web/api/mouseevent/offsetx/index.md | 51 + files/fr/web/api/mouseevent/offsety/index.html | 51 - files/fr/web/api/mouseevent/offsety/index.md | 51 + files/fr/web/api/mutationobserver/index.html | 195 -- files/fr/web/api/mutationobserver/index.md | 195 ++ files/fr/web/api/namednodemap/index.html | 93 - files/fr/web/api/namednodemap/index.md | 93 + files/fr/web/api/navigator/battery/index.html | 67 - files/fr/web/api/navigator/battery/index.md | 67 + files/fr/web/api/navigator/connection/index.html | 47 - files/fr/web/api/navigator/connection/index.md | 47 + .../fr/web/api/navigator/cookieenabled/index.html | 49 - files/fr/web/api/navigator/cookieenabled/index.md | 49 + files/fr/web/api/navigator/credentials/index.html | 57 - files/fr/web/api/navigator/credentials/index.md | 57 + files/fr/web/api/navigator/donottrack/index.html | 55 - files/fr/web/api/navigator/donottrack/index.md | 55 + files/fr/web/api/navigator/geolocation/index.html | 52 - files/fr/web/api/navigator/geolocation/index.md | 52 + files/fr/web/api/navigator/getgamepads/index.html | 53 - files/fr/web/api/navigator/getgamepads/index.md | 53 + files/fr/web/api/navigator/getusermedia/index.html | 132 - files/fr/web/api/navigator/getusermedia/index.md | 132 + files/fr/web/api/navigator/index.html | 178 - files/fr/web/api/navigator/index.md | 178 + .../api/navigator/mozislocallyavailable/index.html | 29 - .../api/navigator/mozislocallyavailable/index.md | 29 + .../navigator/registerprotocolhandler/index.html | 46 - .../api/navigator/registerprotocolhandler/index.md | 46 + .../web-based_protocol_handlers/index.html | 111 - .../web-based_protocol_handlers/index.md | 111 + files/fr/web/api/navigator/sendbeacon/index.html | 99 - files/fr/web/api/navigator/sendbeacon/index.md | 99 + .../fr/web/api/navigator/serviceworker/index.html | 65 - files/fr/web/api/navigator/serviceworker/index.md | 65 + files/fr/web/api/navigator/share/index.html | 68 - files/fr/web/api/navigator/share/index.md | 68 + files/fr/web/api/navigator/vibrate/index.html | 61 - files/fr/web/api/navigator/vibrate/index.md | 61 + .../fr/web/api/network_information_api/index.html | 86 - files/fr/web/api/network_information_api/index.md | 86 + files/fr/web/api/node/appendchild/index.html | 99 - files/fr/web/api/node/appendchild/index.md | 99 + files/fr/web/api/node/baseuri/index.html | 71 - files/fr/web/api/node/baseuri/index.md | 71 + files/fr/web/api/node/childnodes/index.html | 103 - files/fr/web/api/node/childnodes/index.md | 103 + files/fr/web/api/node/clonenode/index.html | 92 - files/fr/web/api/node/clonenode/index.md | 92 + .../api/node/comparedocumentposition/index.html | 108 - .../web/api/node/comparedocumentposition/index.md | 108 + files/fr/web/api/node/contains/index.html | 57 - files/fr/web/api/node/contains/index.md | 57 + files/fr/web/api/node/firstchild/index.html | 88 - files/fr/web/api/node/firstchild/index.md | 88 + files/fr/web/api/node/getrootnode/index.html | 89 - files/fr/web/api/node/getrootnode/index.md | 89 + files/fr/web/api/node/haschildnodes/index.html | 78 - files/fr/web/api/node/haschildnodes/index.md | 78 + files/fr/web/api/node/index.html | 306 -- files/fr/web/api/node/index.md | 306 ++ files/fr/web/api/node/insertbefore/index.html | 166 - files/fr/web/api/node/insertbefore/index.md | 166 + files/fr/web/api/node/isconnected/index.html | 96 - files/fr/web/api/node/isconnected/index.md | 96 + .../fr/web/api/node/isdefaultnamespace/index.html | 39 - files/fr/web/api/node/isdefaultnamespace/index.md | 39 + files/fr/web/api/node/isequalnode/index.html | 90 - files/fr/web/api/node/isequalnode/index.md | 90 + files/fr/web/api/node/issamenode/index.html | 93 - files/fr/web/api/node/issamenode/index.md | 93 + files/fr/web/api/node/issupported/index.html | 78 - files/fr/web/api/node/issupported/index.md | 78 + files/fr/web/api/node/lastchild/index.html | 66 - files/fr/web/api/node/lastchild/index.md | 66 + .../fr/web/api/node/lookupnamespaceuri/index.html | 23 - files/fr/web/api/node/lookupnamespaceuri/index.md | 23 + files/fr/web/api/node/lookupprefix/index.html | 23 - files/fr/web/api/node/lookupprefix/index.md | 23 + files/fr/web/api/node/nextsibling/index.html | 83 - files/fr/web/api/node/nextsibling/index.md | 83 + files/fr/web/api/node/nodename/index.html | 111 - files/fr/web/api/node/nodename/index.md | 111 + files/fr/web/api/node/nodetype/index.html | 180 - files/fr/web/api/node/nodetype/index.md | 180 + files/fr/web/api/node/nodevalue/index.html | 93 - files/fr/web/api/node/nodevalue/index.md | 93 + files/fr/web/api/node/normalize/index.html | 38 - files/fr/web/api/node/normalize/index.md | 38 + files/fr/web/api/node/ownerdocument/index.html | 66 - files/fr/web/api/node/ownerdocument/index.md | 66 + files/fr/web/api/node/parentelement/index.html | 53 - files/fr/web/api/node/parentelement/index.md | 53 + files/fr/web/api/node/parentnode/index.html | 58 - files/fr/web/api/node/parentnode/index.md | 58 + files/fr/web/api/node/previoussibling/index.html | 56 - files/fr/web/api/node/previoussibling/index.md | 56 + files/fr/web/api/node/removechild/index.html | 112 - files/fr/web/api/node/removechild/index.md | 112 + files/fr/web/api/node/replacechild/index.html | 90 - files/fr/web/api/node/replacechild/index.md | 90 + files/fr/web/api/node/textcontent/index.html | 125 - files/fr/web/api/node/textcontent/index.md | 125 + files/fr/web/api/nodefilter/acceptnode/index.html | 116 - files/fr/web/api/nodefilter/acceptnode/index.md | 116 + files/fr/web/api/nodefilter/index.html | 119 - files/fr/web/api/nodefilter/index.md | 119 + files/fr/web/api/nodeiterator/detach/index.html | 69 - files/fr/web/api/nodeiterator/detach/index.md | 69 + .../nodeiterator/expandentityreferences/index.html | 64 - .../nodeiterator/expandentityreferences/index.md | 64 + files/fr/web/api/nodeiterator/filter/index.html | 66 - files/fr/web/api/nodeiterator/filter/index.md | 66 + files/fr/web/api/nodeiterator/index.html | 160 - files/fr/web/api/nodeiterator/index.md | 160 + files/fr/web/api/nodeiterator/nextnode/index.html | 67 - files/fr/web/api/nodeiterator/nextnode/index.md | 67 + .../pointerbeforereferencenode/index.html | 59 - .../pointerbeforereferencenode/index.md | 59 + .../web/api/nodeiterator/previousnode/index.html | 69 - .../fr/web/api/nodeiterator/previousnode/index.md | 69 + .../web/api/nodeiterator/referencenode/index.html | 60 - .../fr/web/api/nodeiterator/referencenode/index.md | 60 + files/fr/web/api/nodeiterator/root/index.html | 65 - files/fr/web/api/nodeiterator/root/index.md | 65 + .../fr/web/api/nodeiterator/whattoshow/index.html | 145 - files/fr/web/api/nodeiterator/whattoshow/index.md | 145 + files/fr/web/api/nodelist/entries/index.html | 81 - files/fr/web/api/nodelist/entries/index.md | 81 + files/fr/web/api/nodelist/foreach/index.html | 123 - files/fr/web/api/nodelist/foreach/index.md | 123 + files/fr/web/api/nodelist/index.html | 119 - files/fr/web/api/nodelist/index.md | 119 + files/fr/web/api/nodelist/item/index.html | 50 - files/fr/web/api/nodelist/item/index.md | 50 + files/fr/web/api/nodelist/keys/index.html | 80 - files/fr/web/api/nodelist/keys/index.md | 80 + files/fr/web/api/nodelist/length/index.html | 54 - files/fr/web/api/nodelist/length/index.md | 54 + files/fr/web/api/nodelist/values/index.html | 81 - files/fr/web/api/nodelist/values/index.md | 81 + files/fr/web/api/notification/actions/index.html | 58 - files/fr/web/api/notification/actions/index.md | 58 + files/fr/web/api/notification/badge/index.html | 44 - files/fr/web/api/notification/badge/index.md | 44 + files/fr/web/api/notification/body/index.html | 52 - files/fr/web/api/notification/body/index.md | 52 + files/fr/web/api/notification/close/index.html | 80 - files/fr/web/api/notification/close/index.md | 80 + files/fr/web/api/notification/data/index.html | 54 - files/fr/web/api/notification/data/index.md | 54 + files/fr/web/api/notification/dir/index.html | 62 - files/fr/web/api/notification/dir/index.md | 62 + files/fr/web/api/notification/icon/index.html | 52 - files/fr/web/api/notification/icon/index.md | 52 + files/fr/web/api/notification/image/index.html | 51 - files/fr/web/api/notification/image/index.md | 51 + files/fr/web/api/notification/index.html | 178 - files/fr/web/api/notification/index.md | 178 + files/fr/web/api/notification/lang/index.html | 53 - files/fr/web/api/notification/lang/index.md | 53 + .../fr/web/api/notification/maxactions/index.html | 63 - files/fr/web/api/notification/maxactions/index.md | 63 + .../web/api/notification/notification/index.html | 82 - .../fr/web/api/notification/notification/index.md | 82 + files/fr/web/api/notification/onclick/index.html | 63 - files/fr/web/api/notification/onclick/index.md | 63 + files/fr/web/api/notification/onclose/index.html | 33 - files/fr/web/api/notification/onclose/index.md | 33 + files/fr/web/api/notification/onerror/index.html | 52 - files/fr/web/api/notification/onerror/index.md | 52 + files/fr/web/api/notification/onshow/index.html | 33 - files/fr/web/api/notification/onshow/index.md | 33 + .../fr/web/api/notification/permission/index.html | 93 - files/fr/web/api/notification/permission/index.md | 93 + files/fr/web/api/notification/renotify/index.html | 56 - files/fr/web/api/notification/renotify/index.md | 56 + .../api/notification/requestpermission/index.html | 119 - .../api/notification/requestpermission/index.md | 119 + .../api/notification/requireinteraction/index.html | 52 - .../api/notification/requireinteraction/index.md | 52 + files/fr/web/api/notification/silent/index.html | 54 - files/fr/web/api/notification/silent/index.md | 54 + files/fr/web/api/notification/tag/index.html | 55 - files/fr/web/api/notification/tag/index.md | 55 + files/fr/web/api/notification/timestamp/index.html | 54 - files/fr/web/api/notification/timestamp/index.md | 54 + files/fr/web/api/notification/title/index.html | 52 - files/fr/web/api/notification/title/index.md | 52 + files/fr/web/api/notification/vibrate/index.html | 54 - files/fr/web/api/notification/vibrate/index.md | 54 + files/fr/web/api/notificationevent/index.html | 92 - files/fr/web/api/notificationevent/index.md | 92 + files/fr/web/api/notifications_api/index.html | 91 - files/fr/web/api/notifications_api/index.md | 91 + .../using_the_notifications_api/index.html | 252 -- .../using_the_notifications_api/index.md | 252 ++ .../web/api/notifyaudioavailableevent/index.html | 24 - .../fr/web/api/notifyaudioavailableevent/index.md | 24 + .../offlineaudiocontext/complete_event/index.html | 92 - .../offlineaudiocontext/complete_event/index.md | 92 + files/fr/web/api/offscreencanvas/index.html | 147 - files/fr/web/api/offscreencanvas/index.md | 147 + files/fr/web/api/origin/index.html | 51 - files/fr/web/api/origin/index.md | 51 + files/fr/web/api/oscillatornode/index.html | 93 - files/fr/web/api/oscillatornode/index.md | 93 + files/fr/web/api/page_visibility_api/index.html | 163 - files/fr/web/api/page_visibility_api/index.md | 163 + files/fr/web/api/pagetransitionevent/index.html | 64 - files/fr/web/api/pagetransitionevent/index.md | 64 + .../web/api/passwordcredential/iconurl/index.html | 45 - .../fr/web/api/passwordcredential/iconurl/index.md | 45 + files/fr/web/api/passwordcredential/index.html | 84 - files/fr/web/api/passwordcredential/index.md | 84 + .../fr/web/api/passwordcredential/name/index.html | 45 - files/fr/web/api/passwordcredential/name/index.md | 45 + .../web/api/passwordcredential/password/index.html | 45 - .../web/api/passwordcredential/password/index.md | 45 + .../passwordcredential/index.html | 86 - .../passwordcredential/passwordcredential/index.md | 86 + files/fr/web/api/payment_request_api/index.html | 125 - files/fr/web/api/payment_request_api/index.md | 125 + files/fr/web/api/performance/clearmarks/index.html | 93 - files/fr/web/api/performance/clearmarks/index.md | 93 + .../web/api/performance/clearmeasures/index.html | 95 - .../fr/web/api/performance/clearmeasures/index.md | 95 + .../performance/clearresourcetimings/index.html | 84 - .../api/performance/clearresourcetimings/index.md | 84 + files/fr/web/api/performance/getentries/index.html | 104 - files/fr/web/api/performance/getentries/index.md | 104 + .../api/performance/getentriesbyname/index.html | 120 - .../web/api/performance/getentriesbyname/index.md | 120 + .../api/performance/getentriesbytype/index.html | 118 - .../web/api/performance/getentriesbytype/index.md | 118 + files/fr/web/api/performance/index.html | 156 - files/fr/web/api/performance/index.md | 156 + files/fr/web/api/performance/mark/index.html | 91 - files/fr/web/api/performance/mark/index.md | 91 + files/fr/web/api/performance/measure/index.html | 110 - files/fr/web/api/performance/measure/index.md | 110 + files/fr/web/api/performance/memory/index.html | 43 - files/fr/web/api/performance/memory/index.md | 43 + files/fr/web/api/performance/navigation/index.html | 61 - files/fr/web/api/performance/navigation/index.md | 61 + files/fr/web/api/performance/now/index.html | 111 - files/fr/web/api/performance/now/index.md | 111 + .../onresourcetimingbufferfull/index.html | 78 - .../onresourcetimingbufferfull/index.md | 78 + .../resourcetimingbufferfull_event/index.html | 86 - .../resourcetimingbufferfull_event/index.md | 86 + .../setresourcetimingbuffersize/index.html | 76 - .../setresourcetimingbuffersize/index.md | 76 + files/fr/web/api/performance/timeorigin/index.html | 50 - files/fr/web/api/performance/timeorigin/index.md | 50 + files/fr/web/api/performance/timing/index.html | 60 - files/fr/web/api/performance/timing/index.md | 60 + files/fr/web/api/performance/tojson/index.html | 64 - files/fr/web/api/performance/tojson/index.md | 64 + files/fr/web/api/performance_api/index.html | 149 - files/fr/web/api/performance_api/index.md | 149 + .../using_the_performance_api/index.html | 109 - .../using_the_performance_api/index.md | 109 + files/fr/web/api/performance_timeline/index.html | 84 - files/fr/web/api/performance_timeline/index.md | 84 + .../using_performance_timeline/index.html | 223 -- .../using_performance_timeline/index.md | 223 ++ .../performanceelementtiming/element/index.html | 64 - .../api/performanceelementtiming/element/index.md | 64 + .../web/api/performanceelementtiming/id/index.html | 64 - .../web/api/performanceelementtiming/id/index.md | 64 + .../performanceelementtiming/identifier/index.html | 64 - .../performanceelementtiming/identifier/index.md | 64 + .../fr/web/api/performanceelementtiming/index.html | 82 - files/fr/web/api/performanceelementtiming/index.md | 82 + .../intersectionrect/index.html | 66 - .../intersectionrect/index.md | 66 + .../performanceelementtiming/loadtime/index.html | 64 - .../api/performanceelementtiming/loadtime/index.md | 64 + .../naturalheight/index.html | 64 - .../naturalheight/index.md | 64 + .../naturalwidth/index.html | 63 - .../performanceelementtiming/naturalwidth/index.md | 63 + .../performanceelementtiming/rendertime/index.html | 68 - .../performanceelementtiming/rendertime/index.md | 68 + .../api/performanceelementtiming/tojson/index.html | 68 - .../api/performanceelementtiming/tojson/index.md | 68 + .../api/performanceelementtiming/url/index.html | 64 - .../web/api/performanceelementtiming/url/index.md | 64 + .../web/api/performanceentry/duration/index.html | 120 - .../fr/web/api/performanceentry/duration/index.md | 120 + .../web/api/performanceentry/entrytype/index.html | 138 - .../fr/web/api/performanceentry/entrytype/index.md | 138 + files/fr/web/api/performanceentry/index.html | 147 - files/fr/web/api/performanceentry/index.md | 147 + files/fr/web/api/performanceentry/name/index.html | 150 - files/fr/web/api/performanceentry/name/index.md | 150 + .../web/api/performanceentry/starttime/index.html | 122 - .../fr/web/api/performanceentry/starttime/index.md | 122 + .../fr/web/api/performanceentry/tojson/index.html | 107 - files/fr/web/api/performanceentry/tojson/index.md | 107 + files/fr/web/api/performanceeventtiming/index.html | 168 - files/fr/web/api/performanceeventtiming/index.md | 168 + files/fr/web/api/performanceframetiming/index.html | 75 - files/fr/web/api/performanceframetiming/index.md | 75 + .../attribution/index.html | 46 - .../performancelongtasktiming/attribution/index.md | 46 + .../web/api/performancelongtasktiming/index.html | 46 - .../fr/web/api/performancelongtasktiming/index.md | 46 + files/fr/web/api/performancemark/index.html | 76 - files/fr/web/api/performancemark/index.md | 76 + files/fr/web/api/performancemeasure/index.html | 76 - files/fr/web/api/performancemeasure/index.md | 76 + files/fr/web/api/performancenavigation/index.html | 87 - files/fr/web/api/performancenavigation/index.md | 87 + .../performancenavigation/redirectcount/index.html | 58 - .../performancenavigation/redirectcount/index.md | 58 + .../web/api/performancenavigation/type/index.html | 89 - .../fr/web/api/performancenavigation/type/index.md | 89 + .../domcomplete/index.html | 74 - .../domcomplete/index.md | 74 + .../domcontentloadedeventend/index.html | 75 - .../domcontentloadedeventend/index.md | 75 + .../domcontentloadedeventstart/index.html | 75 - .../domcontentloadedeventstart/index.md | 75 + .../dominteractive/index.html | 74 - .../dominteractive/index.md | 74 + .../web/api/performancenavigationtiming/index.html | 105 - .../web/api/performancenavigationtiming/index.md | 105 + .../loadeventend/index.html | 74 - .../loadeventend/index.md | 74 + .../loadeventstart/index.html | 74 - .../loadeventstart/index.md | 74 + .../redirectcount/index.html | 74 - .../redirectcount/index.md | 74 + .../performancenavigationtiming/tojson/index.html | 66 - .../performancenavigationtiming/tojson/index.md | 66 + .../performancenavigationtiming/type/index.html | 85 - .../api/performancenavigationtiming/type/index.md | 85 + .../unloadeventend/index.html | 74 - .../unloadeventend/index.md | 74 + .../unloadeventstart/index.html | 74 - .../unloadeventstart/index.md | 74 + .../api/performanceobserver/disconnect/index.html | 66 - .../api/performanceobserver/disconnect/index.md | 66 + files/fr/web/api/performanceobserver/index.html | 75 - files/fr/web/api/performanceobserver/index.md | 75 + .../web/api/performanceobserver/observe/index.html | 81 - .../web/api/performanceobserver/observe/index.md | 81 + .../performanceobserver/index.html | 71 - .../performanceobserver/index.md | 71 + .../api/performanceobserver/takerecords/index.html | 68 - .../api/performanceobserver/takerecords/index.md | 68 + .../getentries/index.html | 115 - .../getentries/index.md | 115 + .../getentriesbyname/index.html | 105 - .../getentriesbyname/index.md | 105 + .../getentriesbytype/index.html | 102 - .../getentriesbytype/index.md | 102 + .../api/performanceobserverentrylist/index.html | 63 - .../web/api/performanceobserverentrylist/index.md | 63 + files/fr/web/api/performancepainttiming/index.html | 81 - files/fr/web/api/performancepainttiming/index.md | 81 + .../connectend/index.html | 84 - .../performanceresourcetiming/connectend/index.md | 84 + .../connectstart/index.html | 84 - .../connectstart/index.md | 84 + .../decodedbodysize/index.html | 84 - .../decodedbodysize/index.md | 84 + .../domainlookupend/index.html | 86 - .../domainlookupend/index.md | 86 + .../domainlookupstart/index.html | 84 - .../domainlookupstart/index.md | 84 + .../encodedbodysize/index.html | 83 - .../encodedbodysize/index.md | 83 + .../fetchstart/index.html | 86 - .../performanceresourcetiming/fetchstart/index.md | 86 + .../web/api/performanceresourcetiming/index.html | 118 - .../fr/web/api/performanceresourcetiming/index.md | 118 + .../initiatortype/index.html | 78 - .../initiatortype/index.md | 78 + .../nexthopprotocol/index.html | 72 - .../nexthopprotocol/index.md | 72 + .../redirectend/index.html | 86 - .../performanceresourcetiming/redirectend/index.md | 86 + .../redirectstart/index.html | 86 - .../redirectstart/index.md | 86 + .../requeststart/index.html | 86 - .../requeststart/index.md | 86 + .../responseend/index.html | 84 - .../performanceresourcetiming/responseend/index.md | 84 + .../responsestart/index.html | 84 - .../responsestart/index.md | 84 + .../secureconnectionstart/index.html | 85 - .../secureconnectionstart/index.md | 85 + .../servertiming/index.html | 51 - .../servertiming/index.md | 51 + .../performanceresourcetiming/tojson/index.html | 67 - .../api/performanceresourcetiming/tojson/index.md | 67 + .../transfersize/index.html | 83 - .../transfersize/index.md | 83 + .../workerstart/index.html | 84 - .../performanceresourcetiming/workerstart/index.md | 84 + .../performanceservertiming/description/index.html | 51 - .../performanceservertiming/description/index.md | 51 + .../performanceservertiming/duration/index.html | 51 - .../api/performanceservertiming/duration/index.md | 51 + .../fr/web/api/performanceservertiming/index.html | 98 - files/fr/web/api/performanceservertiming/index.md | 98 + .../api/performanceservertiming/name/index.html | 50 - .../web/api/performanceservertiming/name/index.md | 50 + .../api/performanceservertiming/tojson/index.html | 55 - .../api/performanceservertiming/tojson/index.md | 55 + .../api/performancetiming/connectend/index.html | 57 - .../web/api/performancetiming/connectend/index.md | 57 + .../api/performancetiming/connectstart/index.html | 57 - .../api/performancetiming/connectstart/index.md | 57 + .../performancetiming/domainlookupend/index.html | 57 - .../api/performancetiming/domainlookupend/index.md | 57 + .../performancetiming/domainlookupstart/index.html | 57 - .../performancetiming/domainlookupstart/index.md | 57 + .../api/performancetiming/domcomplete/index.html | 57 - .../web/api/performancetiming/domcomplete/index.md | 57 + .../domcontentloadedeventend/index.html | 58 - .../domcontentloadedeventend/index.md | 58 + .../domcontentloadedeventstart/index.html | 58 - .../domcontentloadedeventstart/index.md | 58 + .../performancetiming/dominteractive/index.html | 61 - .../api/performancetiming/dominteractive/index.md | 61 + .../api/performancetiming/domloading/index.html | 57 - .../web/api/performancetiming/domloading/index.md | 57 + .../api/performancetiming/fetchstart/index.html | 57 - .../web/api/performancetiming/fetchstart/index.md | 57 + files/fr/web/api/performancetiming/index.html | 117 - files/fr/web/api/performancetiming/index.md | 117 + .../api/performancetiming/loadeventend/index.html | 57 - .../api/performancetiming/loadeventend/index.md | 57 + .../performancetiming/loadeventstart/index.html | 57 - .../api/performancetiming/loadeventstart/index.md | 57 + .../performancetiming/navigationstart/index.html | 57 - .../api/performancetiming/navigationstart/index.md | 57 + .../api/performancetiming/redirectend/index.html | 57 - .../web/api/performancetiming/redirectend/index.md | 57 + .../api/performancetiming/redirectstart/index.html | 57 - .../api/performancetiming/redirectstart/index.md | 57 + .../api/performancetiming/requeststart/index.html | 57 - .../api/performancetiming/requeststart/index.md | 57 + .../api/performancetiming/responseend/index.html | 57 - .../web/api/performancetiming/responseend/index.md | 57 + .../api/performancetiming/responsestart/index.html | 57 - .../api/performancetiming/responsestart/index.md | 57 + .../secureconnectionstart/index.html | 57 - .../secureconnectionstart/index.md | 57 + .../performancetiming/unloadeventend/index.html | 57 - .../api/performancetiming/unloadeventend/index.md | 57 + .../performancetiming/unloadeventstart/index.html | 57 - .../performancetiming/unloadeventstart/index.md | 57 + files/fr/web/api/periodicwave/index.html | 72 - files/fr/web/api/periodicwave/index.md | 72 + files/fr/web/api/permissions_api/index.html | 83 - files/fr/web/api/permissions_api/index.md | 83 + files/fr/web/api/plugin/index.html | 62 - files/fr/web/api/plugin/index.md | 62 + files/fr/web/api/pointer_events/index.html | 433 --- files/fr/web/api/pointer_events/index.md | 433 +++ .../pointer_events/pinch_zoom_gestures/index.html | 223 -- .../pointer_events/pinch_zoom_gestures/index.md | 223 ++ files/fr/web/api/pointer_lock_api/index.html | 259 -- files/fr/web/api/pointer_lock_api/index.md | 259 ++ files/fr/web/api/pointerevent/index.html | 146 - files/fr/web/api/pointerevent/index.md | 146 + .../positionoptions/enablehighaccuracy/index.html | 43 - .../positionoptions/enablehighaccuracy/index.md | 43 + files/fr/web/api/positionoptions/index.html | 55 - files/fr/web/api/positionoptions/index.md | 55 + .../web/api/positionoptions/maximumage/index.html | 43 - .../fr/web/api/positionoptions/maximumage/index.md | 43 + .../fr/web/api/positionoptions/timeout/index.html | 45 - files/fr/web/api/positionoptions/timeout/index.md | 45 + files/fr/web/api/processinginstruction/index.html | 43 - files/fr/web/api/processinginstruction/index.md | 43 + files/fr/web/api/proximity_events/index.html | 70 - files/fr/web/api/proximity_events/index.md | 70 + files/fr/web/api/publickeycredential/index.html | 72 - files/fr/web/api/publickeycredential/index.md | 72 + files/fr/web/api/push_api/index.html | 111 - files/fr/web/api/push_api/index.md | 111 + files/fr/web/api/pushevent/index.html | 98 - files/fr/web/api/pushevent/index.md | 98 + files/fr/web/api/queuemicrotask/index.html | 120 - files/fr/web/api/queuemicrotask/index.md | 120 + .../api/range/createcontextualfragment/index.html | 57 - .../api/range/createcontextualfragment/index.md | 57 + files/fr/web/api/range/detach/index.html | 55 - files/fr/web/api/range/detach/index.md | 55 + files/fr/web/api/range/extractcontents/index.html | 57 - files/fr/web/api/range/extractcontents/index.md | 57 + files/fr/web/api/range/index.html | 103 - files/fr/web/api/range/index.md | 103 + files/fr/web/api/range/insertnode/index.html | 65 - files/fr/web/api/range/insertnode/index.md | 65 + files/fr/web/api/range/selectnode/index.html | 64 - files/fr/web/api/range/selectnode/index.md | 64 + files/fr/web/api/range/setstart/index.html | 71 - files/fr/web/api/range/setstart/index.md | 71 + files/fr/web/api/range/surroundcontents/index.html | 70 - files/fr/web/api/range/surroundcontents/index.md | 70 + files/fr/web/api/request/credentials/index.html | 65 - files/fr/web/api/request/credentials/index.md | 65 + files/fr/web/api/request/index.html | 171 - files/fr/web/api/request/index.md | 171 + files/fr/web/api/request/mode/index.html | 61 - files/fr/web/api/request/mode/index.md | 61 + files/fr/web/api/request/request/index.html | 158 - files/fr/web/api/request/request/index.md | 158 + files/fr/web/api/resize_observer_api/index.html | 95 - files/fr/web/api/resize_observer_api/index.md | 95 + files/fr/web/api/response/index.html | 126 - files/fr/web/api/response/index.md | 126 + files/fr/web/api/response/ok/index.html | 75 - files/fr/web/api/response/ok/index.md | 75 + files/fr/web/api/rtciceserver/index.html | 86 - files/fr/web/api/rtciceserver/index.md | 86 + files/fr/web/api/rtcpeerconnection/index.html | 252 -- files/fr/web/api/rtcpeerconnection/index.md | 252 ++ .../rtcpeerconnection/setconfiguration/index.html | 103 - .../rtcpeerconnection/setconfiguration/index.md | 103 + files/fr/web/api/screen_capture_api/index.html | 141 - files/fr/web/api/screen_capture_api/index.md | 141 + .../audioprocess_event/index.html | 106 - .../audioprocess_event/index.md | 106 + files/fr/web/api/selection/collapse/index.html | 71 - files/fr/web/api/selection/collapse/index.md | 71 + files/fr/web/api/selection/index.html | 100 - files/fr/web/api/selection/index.md | 100 + files/fr/web/api/selection/tostring/index.html | 28 - files/fr/web/api/selection/tostring/index.md | 28 + files/fr/web/api/selection/type/index.html | 70 - files/fr/web/api/selection/type/index.md | 70 + files/fr/web/api/server-sent_events/index.html | 46 - files/fr/web/api/server-sent_events/index.md | 46 + .../using_server-sent_events/index.html | 199 -- .../using_server-sent_events/index.md | 199 ++ files/fr/web/api/service_worker_api/index.html | 174 - files/fr/web/api/service_worker_api/index.md | 174 + .../using_service_workers/index.html | 448 --- .../using_service_workers/index.md | 448 +++ files/fr/web/api/serviceworker/index.html | 110 - files/fr/web/api/serviceworker/index.md | 110 + .../web/api/serviceworker/onstatechange/index.html | 73 - .../web/api/serviceworker/onstatechange/index.md | 73 + .../getregistration/index.html | 57 - .../getregistration/index.md | 57 + files/fr/web/api/serviceworkercontainer/index.html | 97 - files/fr/web/api/serviceworkercontainer/index.md | 97 + .../api/serviceworkercontainer/register/index.html | 135 - .../api/serviceworkercontainer/register/index.md | 135 + .../fr/web/api/serviceworkerglobalscope/index.html | 152 - files/fr/web/api/serviceworkerglobalscope/index.md | 152 + .../onnotificationclick/index.html | 73 - .../onnotificationclick/index.md | 73 + .../serviceworkerregistration/active/index.html | 57 - .../api/serviceworkerregistration/active/index.md | 57 + .../getnotifications/index.html | 72 - .../getnotifications/index.md | 72 + .../web/api/serviceworkerregistration/index.html | 150 - .../fr/web/api/serviceworkerregistration/index.md | 150 + .../api/serviceworkerregistration/scope/index.html | 55 - .../api/serviceworkerregistration/scope/index.md | 55 + .../shownotification/index.html | 106 - .../shownotification/index.md | 106 + files/fr/web/api/settimeout/index.html | 363 -- files/fr/web/api/settimeout/index.md | 363 ++ .../web/api/shadowroot/delegatesfocus/index.html | 44 - .../fr/web/api/shadowroot/delegatesfocus/index.md | 44 + files/fr/web/api/shadowroot/host/index.html | 55 - files/fr/web/api/shadowroot/host/index.md | 55 + files/fr/web/api/shadowroot/index.html | 111 - files/fr/web/api/shadowroot/index.md | 111 + files/fr/web/api/shadowroot/innerhtml/index.html | 40 - files/fr/web/api/shadowroot/innerhtml/index.md | 40 + files/fr/web/api/shadowroot/mode/index.html | 61 - files/fr/web/api/shadowroot/mode/index.md | 61 + files/fr/web/api/sharedworker/index.html | 114 - files/fr/web/api/sharedworker/index.md | 114 + files/fr/web/api/sharedworker/port/index.html | 55 - files/fr/web/api/sharedworker/port/index.md | 55 + .../web/api/sharedworker/sharedworker/index.html | 101 - .../fr/web/api/sharedworker/sharedworker/index.md | 101 + .../applicationcache/index.html | 38 - .../applicationcache/index.md | 38 + .../fr/web/api/sharedworkerglobalscope/index.html | 132 - files/fr/web/api/sharedworkerglobalscope/index.md | 132 + .../sharedworkerglobalscope/onconnect/index.html | 64 - .../api/sharedworkerglobalscope/onconnect/index.md | 64 + files/fr/web/api/speechrecognition/index.html | 133 - files/fr/web/api/speechrecognition/index.md | 133 + .../fr/web/api/speechsynthesisutterance/index.html | 127 - files/fr/web/api/speechsynthesisutterance/index.md | 127 + files/fr/web/api/storage/clear/index.html | 67 - files/fr/web/api/storage/clear/index.md | 67 + files/fr/web/api/storage/getitem/index.html | 77 - files/fr/web/api/storage/getitem/index.md | 77 + files/fr/web/api/storage/index.html | 105 - files/fr/web/api/storage/index.md | 105 + files/fr/web/api/storage/key/index.html | 80 - files/fr/web/api/storage/key/index.md | 80 + files/fr/web/api/storage/length/index.html | 65 - files/fr/web/api/storage/length/index.md | 65 + files/fr/web/api/storage/removeitem/index.html | 83 - files/fr/web/api/storage/removeitem/index.md | 83 + files/fr/web/api/storage/setitem/index.html | 78 - files/fr/web/api/storage/setitem/index.md | 78 + files/fr/web/api/storage_api/index.html | 112 - files/fr/web/api/storage_api/index.md | 112 + files/fr/web/api/storageestimate/index.html | 51 - files/fr/web/api/storageestimate/index.md | 51 + .../fr/web/api/storagemanager/estimate/index.html | 76 - files/fr/web/api/storagemanager/estimate/index.md | 76 + files/fr/web/api/storagemanager/index.html | 55 - files/fr/web/api/storagemanager/index.md | 55 + files/fr/web/api/storagemanager/persist/index.html | 51 - files/fr/web/api/storagemanager/persist/index.md | 51 + .../fr/web/api/storagemanager/persisted/index.html | 51 - files/fr/web/api/storagemanager/persisted/index.md | 51 + files/fr/web/api/streams_api/index.html | 141 - files/fr/web/api/streams_api/index.md | 141 + files/fr/web/api/stylesheet/disabled/index.html | 25 - files/fr/web/api/stylesheet/disabled/index.md | 25 + files/fr/web/api/stylesheet/href/index.html | 49 - files/fr/web/api/stylesheet/href/index.md | 49 + files/fr/web/api/stylesheet/index.html | 67 - files/fr/web/api/stylesheet/index.md | 67 + files/fr/web/api/stylesheet/media/index.html | 33 - files/fr/web/api/stylesheet/media/index.md | 33 + files/fr/web/api/stylesheet/ownernode/index.html | 39 - files/fr/web/api/stylesheet/ownernode/index.md | 39 + .../web/api/stylesheet/parentstylesheet/index.html | 34 - .../web/api/stylesheet/parentstylesheet/index.md | 34 + files/fr/web/api/stylesheet/title/index.html | 20 - files/fr/web/api/stylesheet/title/index.md | 20 + files/fr/web/api/stylesheet/type/index.html | 22 - files/fr/web/api/stylesheet/type/index.md | 22 + files/fr/web/api/stylesheetlist/index.html | 31 - files/fr/web/api/stylesheetlist/index.md | 31 + files/fr/web/api/subtlecrypto/digest/index.html | 133 - files/fr/web/api/subtlecrypto/digest/index.md | 133 + files/fr/web/api/subtlecrypto/index.html | 298 -- files/fr/web/api/subtlecrypto/index.md | 298 ++ files/fr/web/api/svgaelement/index.html | 93 - files/fr/web/api/svgaelement/index.md | 93 + files/fr/web/api/svgdescelement/index.html | 57 - files/fr/web/api/svgdescelement/index.md | 57 + files/fr/web/api/svgelement/index.html | 85 - files/fr/web/api/svgelement/index.md | 85 + files/fr/web/api/svgmatrix/index.html | 243 -- files/fr/web/api/svgmatrix/index.md | 243 ++ files/fr/web/api/svgrect/index.html | 110 - files/fr/web/api/svgrect/index.md | 110 + files/fr/web/api/svgrectelement/index.html | 69 - files/fr/web/api/svgrectelement/index.md | 69 + files/fr/web/api/svgtitleelement/index.html | 74 - files/fr/web/api/svgtitleelement/index.md | 74 + files/fr/web/api/syncmanager/index.html | 46 - files/fr/web/api/syncmanager/index.md | 46 + files/fr/web/api/text/index.html | 100 - files/fr/web/api/text/index.md | 100 + files/fr/web/api/text/splittext/index.html | 88 - files/fr/web/api/text/splittext/index.md | 88 + files/fr/web/api/textencoder/index.html | 149 - files/fr/web/api/textencoder/index.md | 149 + .../fr/web/api/textencoder/textencoder/index.html | 66 - files/fr/web/api/textencoder/textencoder/index.md | 66 + files/fr/web/api/textmetrics/index.html | 72 - files/fr/web/api/textmetrics/index.md | 72 + files/fr/web/api/textmetrics/width/index.html | 61 - files/fr/web/api/textmetrics/width/index.md | 61 + files/fr/web/api/timeranges/index.html | 62 - files/fr/web/api/timeranges/index.md | 62 + files/fr/web/api/touch_events/index.html | 243 -- files/fr/web/api/touch_events/index.md | 243 ++ .../index.html | 65 - .../index.md | 65 + files/fr/web/api/transferable/index.html | 68 - files/fr/web/api/transferable/index.md | 68 + files/fr/web/api/transitionevent/index.html | 67 - files/fr/web/api/transitionevent/index.md | 67 + files/fr/web/api/treewalker/currentnode/index.html | 63 - files/fr/web/api/treewalker/currentnode/index.md | 63 + .../treewalker/expandentityreferences/index.html | 63 - .../api/treewalker/expandentityreferences/index.md | 63 + files/fr/web/api/treewalker/filter/index.html | 64 - files/fr/web/api/treewalker/filter/index.md | 64 + files/fr/web/api/treewalker/firstchild/index.html | 62 - files/fr/web/api/treewalker/firstchild/index.md | 62 + files/fr/web/api/treewalker/index.html | 168 - files/fr/web/api/treewalker/index.md | 168 + files/fr/web/api/treewalker/lastchild/index.html | 62 - files/fr/web/api/treewalker/lastchild/index.md | 62 + files/fr/web/api/treewalker/nextnode/index.html | 63 - files/fr/web/api/treewalker/nextnode/index.md | 63 + files/fr/web/api/treewalker/nextsibling/index.html | 64 - files/fr/web/api/treewalker/nextsibling/index.md | 64 + files/fr/web/api/treewalker/parentnode/index.html | 63 - files/fr/web/api/treewalker/parentnode/index.md | 63 + .../fr/web/api/treewalker/previousnode/index.html | 63 - files/fr/web/api/treewalker/previousnode/index.md | 63 + .../web/api/treewalker/previoussibling/index.html | 63 - .../fr/web/api/treewalker/previoussibling/index.md | 63 + files/fr/web/api/treewalker/root/index.html | 61 - files/fr/web/api/treewalker/root/index.md | 61 + files/fr/web/api/treewalker/whattoshow/index.html | 141 - files/fr/web/api/treewalker/whattoshow/index.md | 141 + files/fr/web/api/uievent/detail/index.html | 45 - files/fr/web/api/uievent/detail/index.md | 45 + files/fr/web/api/uievent/index.html | 109 - files/fr/web/api/uievent/index.md | 109 + files/fr/web/api/uievent/layerx/index.html | 112 - files/fr/web/api/uievent/layerx/index.md | 112 + files/fr/web/api/url/createobjecturl/index.html | 91 - files/fr/web/api/url/createobjecturl/index.md | 91 + files/fr/web/api/url/hash/index.html | 62 - files/fr/web/api/url/hash/index.md | 62 + files/fr/web/api/url/index.html | 152 - files/fr/web/api/url/index.md | 152 + files/fr/web/api/url/protocol/index.html | 61 - files/fr/web/api/url/protocol/index.md | 61 + files/fr/web/api/url/revokeobjecturl/index.html | 62 - files/fr/web/api/url/revokeobjecturl/index.md | 62 + files/fr/web/api/url/search/index.html | 61 - files/fr/web/api/url/search/index.md | 61 + files/fr/web/api/url/searchparams/index.html | 65 - files/fr/web/api/url/searchparams/index.md | 65 + files/fr/web/api/url/tojson/index.html | 57 - files/fr/web/api/url/tojson/index.md | 57 + files/fr/web/api/url/tostring/index.html | 61 - files/fr/web/api/url/tostring/index.md | 61 + files/fr/web/api/url/url/index.html | 97 - files/fr/web/api/url/url/index.md | 97 + .../fr/web/api/urlsearchparams/entries/index.html | 67 - files/fr/web/api/urlsearchparams/entries/index.md | 67 + files/fr/web/api/urlsearchparams/index.html | 102 - files/fr/web/api/urlsearchparams/index.md | 102 + files/fr/web/api/usvstring/index.html | 40 - files/fr/web/api/usvstring/index.md | 40 + files/fr/web/api/vibration_api/index.html | 99 - files/fr/web/api/vibration_api/index.md | 99 + files/fr/web/api/videotrack/id/index.html | 43 - files/fr/web/api/videotrack/id/index.md | 43 + files/fr/web/api/videotrack/index.html | 84 - files/fr/web/api/videotrack/index.md | 84 + files/fr/web/api/vrdisplaycapabilities/index.html | 59 - files/fr/web/api/vrdisplaycapabilities/index.md | 59 + files/fr/web/api/web_animations_api/index.html | 85 - files/fr/web/api/web_animations_api/index.md | 85 + .../basic_concepts_behind_web_audio_api/index.html | 345 -- .../basic_concepts_behind_web_audio_api/index.md | 345 ++ files/fr/web/api/web_audio_api/index.html | 429 --- files/fr/web/api/web_audio_api/index.md | 429 +++ .../web_audio_api/using_web_audio_api/index.html | 277 -- .../api/web_audio_api/using_web_audio_api/index.md | 277 ++ .../visualizations_with_web_audio_api/index.html | 180 - .../visualizations_with_web_audio_api/index.md | 180 + .../web_audio_spatialization_basics/index.html | 261 -- .../web_audio_spatialization_basics/index.md | 261 ++ files/fr/web/api/web_speech_api/index.html | 108 - files/fr/web/api/web_speech_api/index.md | 108 + .../using_the_web_speech_api/index.html | 306 -- .../using_the_web_speech_api/index.md | 306 ++ files/fr/web/api/web_storage_api/index.html | 96 - files/fr/web/api/web_storage_api/index.md | 96 + .../using_the_web_storage_api/index.html | 219 -- .../using_the_web_storage_api/index.md | 219 ++ .../index.html | 241 -- .../index.md | 241 ++ files/fr/web/api/web_workers_api/index.html | 94 - files/fr/web/api/web_workers_api/index.md | 94 + .../structured_clone_algorithm/index.html | 156 - .../structured_clone_algorithm/index.md | 156 + .../web_workers_api/using_web_workers/index.html | 508 --- .../api/web_workers_api/using_web_workers/index.md | 508 +++ files/fr/web/api/webgl2renderingcontext/index.html | 278 -- files/fr/web/api/webgl2renderingcontext/index.md | 278 ++ .../by_example/basic_scissoring/index.html | 91 - .../webgl_api/by_example/basic_scissoring/index.md | 91 + .../webgl_api/by_example/boilerplate_1/index.html | 98 - .../webgl_api/by_example/boilerplate_1/index.md | 98 + .../by_example/canvas_size_and_webgl/index.html | 83 - .../by_example/canvas_size_and_webgl/index.md | 83 + .../by_example/clearing_by_clicking/index.html | 123 - .../by_example/clearing_by_clicking/index.md | 123 + .../by_example/clearing_with_colors/index.html | 101 - .../by_example/clearing_with_colors/index.md | 101 + .../webgl_api/by_example/color_masking/index.html | 129 - .../webgl_api/by_example/color_masking/index.md | 129 + .../webgl_api/by_example/detect_webgl/index.html | 80 - .../api/webgl_api/by_example/detect_webgl/index.md | 80 + .../api/webgl_api/by_example/hello_glsl/index.html | 159 - .../api/webgl_api/by_example/hello_glsl/index.md | 159 + .../by_example/hello_vertex_attributes/index.html | 172 - .../by_example/hello_vertex_attributes/index.md | 172 + files/fr/web/api/webgl_api/by_example/index.html | 70 - files/fr/web/api/webgl_api/by_example/index.md | 70 + .../by_example/raining_rectangles/index.html | 177 - .../by_example/raining_rectangles/index.md | 177 + .../by_example/scissor_animation/index.html | 163 - .../by_example/scissor_animation/index.md | 163 + .../by_example/simple_color_animation/index.html | 140 - .../by_example/simple_color_animation/index.md | 140 + .../by_example/textures_from_code/index.html | 161 - .../by_example/textures_from_code/index.md | 161 + .../webgl_api/by_example/video_textures/index.html | 24 - .../webgl_api/by_example/video_textures/index.md | 24 + files/fr/web/api/webgl_api/data/index.html | 57 - files/fr/web/api/webgl_api/data/index.md | 57 + files/fr/web/api/webgl_api/index.html | 235 -- files/fr/web/api/webgl_api/index.md | 235 ++ .../index.html | 308 -- .../adding_2d_content_to_a_webgl_context/index.md | 308 ++ .../animating_objects_with_webgl/index.html | 60 - .../tutorial/animating_objects_with_webgl/index.md | 60 + .../animating_textures_in_webgl/index.html | 145 - .../tutorial/animating_textures_in_webgl/index.md | 145 + .../creating_3d_objects_using_webgl/index.html | 168 - .../creating_3d_objects_using_webgl/index.md | 168 + .../tutorial/getting_started_with_webgl/index.html | 72 - .../tutorial/getting_started_with_webgl/index.md | 72 + files/fr/web/api/webgl_api/tutorial/index.html | 40 - files/fr/web/api/webgl_api/tutorial/index.md | 40 + .../tutorial/lighting_in_webgl/index.html | 176 - .../webgl_api/tutorial/lighting_in_webgl/index.md | 176 + .../index.html | 118 - .../using_shaders_to_apply_color_in_webgl/index.md | 118 + .../tutorial/using_textures_in_webgl/index.html | 281 -- .../tutorial/using_textures_in_webgl/index.md | 281 ++ files/fr/web/api/webgl_api/types/index.html | 167 - files/fr/web/api/webgl_api/types/index.md | 167 + files/fr/web/api/webglbuffer/index.html | 65 - files/fr/web/api/webglbuffer/index.md | 65 + files/fr/web/api/webglframebuffer/index.html | 63 - files/fr/web/api/webglframebuffer/index.md | 63 + files/fr/web/api/webglprogram/index.html | 99 - files/fr/web/api/webglprogram/index.md | 99 + .../webglrenderingcontext/activetexture/index.html | 85 - .../webglrenderingcontext/activetexture/index.md | 85 + .../webglrenderingcontext/attachshader/index.html | 96 - .../webglrenderingcontext/attachshader/index.md | 96 + .../webglrenderingcontext/bindbuffer/index.html | 130 - .../api/webglrenderingcontext/bindbuffer/index.md | 130 + .../webglrenderingcontext/bindtexture/index.html | 119 - .../api/webglrenderingcontext/bindtexture/index.md | 119 + .../webglrenderingcontext/bufferdata/index.html | 161 - .../api/webglrenderingcontext/bufferdata/index.md | 161 + .../api/webglrenderingcontext/canvas/index.html | 74 - .../web/api/webglrenderingcontext/canvas/index.md | 74 + .../web/api/webglrenderingcontext/clear/index.html | 93 - .../web/api/webglrenderingcontext/clear/index.md | 93 + .../webglrenderingcontext/compileshader/index.html | 85 - .../webglrenderingcontext/compileshader/index.md | 85 + .../webglrenderingcontext/createbuffer/index.html | 75 - .../webglrenderingcontext/createbuffer/index.md | 75 + .../webglrenderingcontext/createprogram/index.html | 85 - .../webglrenderingcontext/createprogram/index.md | 85 + .../webglrenderingcontext/createshader/index.html | 85 - .../webglrenderingcontext/createshader/index.md | 85 + .../webglrenderingcontext/createtexture/index.html | 76 - .../webglrenderingcontext/createtexture/index.md | 76 + .../webglrenderingcontext/deletebuffer/index.html | 77 - .../webglrenderingcontext/deletebuffer/index.md | 77 + .../webglrenderingcontext/deleteshader/index.html | 70 - .../webglrenderingcontext/deleteshader/index.md | 70 + .../webglrenderingcontext/drawarrays/index.html | 99 - .../api/webglrenderingcontext/drawarrays/index.md | 99 + .../api/webglrenderingcontext/enable/index.html | 142 - .../web/api/webglrenderingcontext/enable/index.md | 142 + .../enablevertexattribarray/index.html | 119 - .../enablevertexattribarray/index.md | 119 + .../generatemipmap/index.html | 91 - .../webglrenderingcontext/generatemipmap/index.md | 91 + .../getattriblocation/index.html | 69 - .../getattriblocation/index.md | 69 + .../api/webglrenderingcontext/geterror/index.html | 105 - .../api/webglrenderingcontext/geterror/index.md | 105 + .../getshaderparameter/index.html | 75 - .../getshaderparameter/index.md | 75 + .../gettexparameter/index.html | 199 -- .../webglrenderingcontext/gettexparameter/index.md | 199 ++ .../getuniformlocation/index.html | 142 - .../getuniformlocation/index.md | 142 + files/fr/web/api/webglrenderingcontext/index.html | 367 -- files/fr/web/api/webglrenderingcontext/index.md | 367 ++ .../api/webglrenderingcontext/isbuffer/index.html | 77 - .../api/webglrenderingcontext/isbuffer/index.md | 77 + .../webglrenderingcontext/shadersource/index.html | 74 - .../webglrenderingcontext/shadersource/index.md | 74 + .../webglrenderingcontext/teximage2d/index.html | 240 -- .../api/webglrenderingcontext/teximage2d/index.md | 240 ++ .../webglrenderingcontext/texparameter/index.html | 177 - .../webglrenderingcontext/texparameter/index.md | 177 + .../api/webglrenderingcontext/uniform/index.html | 97 - .../web/api/webglrenderingcontext/uniform/index.md | 97 + .../webglrenderingcontext/uniformmatrix/index.html | 88 - .../webglrenderingcontext/uniformmatrix/index.md | 88 + .../webglrenderingcontext/useprogram/index.html | 80 - .../api/webglrenderingcontext/useprogram/index.md | 80 + .../vertexattribpointer/index.html | 254 -- .../vertexattribpointer/index.md | 254 ++ .../api/webglrenderingcontext/viewport/index.html | 92 - .../api/webglrenderingcontext/viewport/index.md | 92 + files/fr/web/api/webglshader/index.html | 107 - files/fr/web/api/webglshader/index.md | 107 + files/fr/web/api/webgltexture/index.html | 72 - files/fr/web/api/webgltexture/index.md | 72 + .../fr/web/api/webrtc_api/connectivity/index.html | 51 - files/fr/web/api/webrtc_api/connectivity/index.md | 51 + files/fr/web/api/webrtc_api/index.html | 210 -- files/fr/web/api/webrtc_api/index.md | 210 ++ .../web/api/webrtc_api/session_lifetime/index.html | 31 - .../web/api/webrtc_api/session_lifetime/index.md | 31 + .../signaling_and_video_calling/index.html | 359 -- .../signaling_and_video_calling/index.md | 359 ++ .../api/webrtc_api/taking_still_photos/index.html | 162 - .../api/webrtc_api/taking_still_photos/index.md | 162 + files/fr/web/api/websocket/binarytype/index.html | 54 - files/fr/web/api/websocket/binarytype/index.md | 54 + .../fr/web/api/websocket/bufferedamount/index.html | 26 - files/fr/web/api/websocket/bufferedamount/index.md | 26 + files/fr/web/api/websocket/close/index.html | 45 - files/fr/web/api/websocket/close/index.md | 45 + files/fr/web/api/websocket/close_event/index.html | 61 - files/fr/web/api/websocket/close_event/index.md | 61 + files/fr/web/api/websocket/error_event/index.html | 57 - files/fr/web/api/websocket/error_event/index.md | 57 + files/fr/web/api/websocket/extensions/index.html | 26 - files/fr/web/api/websocket/extensions/index.md | 26 + files/fr/web/api/websocket/index.html | 124 - files/fr/web/api/websocket/index.md | 124 + .../fr/web/api/websocket/message_event/index.html | 57 - files/fr/web/api/websocket/message_event/index.md | 57 + files/fr/web/api/websocket/onclose/index.html | 27 - files/fr/web/api/websocket/onclose/index.md | 27 + files/fr/web/api/websocket/onerror/index.html | 35 - files/fr/web/api/websocket/onerror/index.md | 35 + files/fr/web/api/websocket/onmessage/index.html | 27 - files/fr/web/api/websocket/onmessage/index.md | 27 + files/fr/web/api/websocket/onopen/index.html | 27 - files/fr/web/api/websocket/onopen/index.md | 27 + files/fr/web/api/websocket/open_event/index.html | 57 - files/fr/web/api/websocket/open_event/index.md | 57 + files/fr/web/api/websocket/protocol/index.html | 26 - files/fr/web/api/websocket/protocol/index.md | 26 + files/fr/web/api/websocket/readystate/index.html | 56 - files/fr/web/api/websocket/readystate/index.md | 56 + files/fr/web/api/websocket/send/index.html | 55 - files/fr/web/api/websocket/send/index.md | 55 + files/fr/web/api/websocket/url/index.html | 26 - files/fr/web/api/websocket/url/index.md | 26 + files/fr/web/api/websocket/websocket/index.html | 40 - files/fr/web/api/websocket/websocket/index.md | 40 + files/fr/web/api/websockets_api/index.html | 114 - files/fr/web/api/websockets_api/index.md | 114 + .../writing_a_websocket_server_in_java/index.html | 217 -- .../writing_a_websocket_server_in_java/index.md | 217 ++ .../index.html | 191 - .../writing_websocket_client_applications/index.md | 191 + .../writing_websocket_servers/index.html | 250 -- .../writing_websocket_servers/index.md | 250 ++ files/fr/web/api/webvr_api/index.html | 99 - files/fr/web/api/webvr_api/index.md | 99 + .../using_vr_controllers_with_webvr/index.html | 256 -- .../using_vr_controllers_with_webvr/index.md | 256 ++ files/fr/web/api/webvtt_api/index.html | 842 ----- files/fr/web/api/webvtt_api/index.md | 842 +++++ files/fr/web/api/webxr_device_api/index.html | 203 -- files/fr/web/api/webxr_device_api/index.md | 203 ++ files/fr/web/api/wheelevent/deltax/index.html | 55 - files/fr/web/api/wheelevent/deltax/index.md | 55 + files/fr/web/api/wheelevent/deltay/index.html | 55 - files/fr/web/api/wheelevent/deltay/index.md | 55 + files/fr/web/api/wheelevent/deltaz/index.html | 56 - files/fr/web/api/wheelevent/deltaz/index.md | 56 + files/fr/web/api/wheelevent/index.html | 117 - files/fr/web/api/wheelevent/index.md | 117 + .../fr/web/api/window/afterprint_event/index.html | 64 - files/fr/web/api/window/afterprint_event/index.md | 64 + files/fr/web/api/window/alert/index.html | 36 - files/fr/web/api/window/alert/index.md | 36 + .../fr/web/api/window/applicationcache/index.html | 35 - files/fr/web/api/window/applicationcache/index.md | 35 + files/fr/web/api/window/back/index.html | 59 - files/fr/web/api/window/back/index.md | 59 + .../fr/web/api/window/beforeprint_event/index.html | 75 - files/fr/web/api/window/beforeprint_event/index.md | 75 + .../web/api/window/beforeunload_event/index.html | 140 - .../fr/web/api/window/beforeunload_event/index.md | 140 + files/fr/web/api/window/blur/index.html | 46 - files/fr/web/api/window/blur/index.md | 46 + .../web/api/window/cancelanimationframe/index.html | 77 - .../web/api/window/cancelanimationframe/index.md | 77 + .../web/api/window/cancelidlecallback/index.html | 40 - .../fr/web/api/window/cancelidlecallback/index.md | 40 + files/fr/web/api/window/captureevents/index.html | 57 - files/fr/web/api/window/captureevents/index.md | 57 + files/fr/web/api/window/clearimmediate/index.html | 65 - files/fr/web/api/window/clearimmediate/index.md | 65 + files/fr/web/api/window/close/index.html | 46 - files/fr/web/api/window/close/index.md | 46 + files/fr/web/api/window/closed/index.html | 55 - files/fr/web/api/window/closed/index.md | 55 + files/fr/web/api/window/confirm/index.html | 47 - files/fr/web/api/window/confirm/index.md | 47 + files/fr/web/api/window/console/index.html | 56 - files/fr/web/api/window/console/index.md | 56 + files/fr/web/api/window/content/index.html | 26 - files/fr/web/api/window/content/index.md | 26 + files/fr/web/api/window/controllers/index.html | 40 - files/fr/web/api/window/controllers/index.md | 40 + files/fr/web/api/window/copy_event/index.html | 75 - files/fr/web/api/window/copy_event/index.md | 75 + files/fr/web/api/window/customelements/index.html | 68 - files/fr/web/api/window/customelements/index.md | 68 + files/fr/web/api/window/cut_event/index.html | 74 - files/fr/web/api/window/cut_event/index.md | 74 + files/fr/web/api/window/defaultstatus/index.html | 50 - files/fr/web/api/window/defaultstatus/index.md | 50 + .../web/api/window/devicemotion_event/index.html | 98 - .../fr/web/api/window/devicemotion_event/index.md | 98 + .../api/window/deviceorientation_event/index.html | 84 - .../api/window/deviceorientation_event/index.md | 84 + .../fr/web/api/window/devicepixelratio/index.html | 45 - files/fr/web/api/window/devicepixelratio/index.md | 45 + files/fr/web/api/window/dialogarguments/index.html | 26 - files/fr/web/api/window/dialogarguments/index.md | 26 + files/fr/web/api/window/directories/index.html | 43 - files/fr/web/api/window/directories/index.md | 43 + files/fr/web/api/window/document/index.html | 45 - files/fr/web/api/window/document/index.md | 45 + .../api/window/domcontentloaded_event/index.html | 81 - .../web/api/window/domcontentloaded_event/index.md | 81 + files/fr/web/api/window/dump/index.html | 25 - files/fr/web/api/window/dump/index.md | 25 + files/fr/web/api/window/event/index.html | 49 - files/fr/web/api/window/event/index.md | 49 + files/fr/web/api/window/find/index.html | 78 - files/fr/web/api/window/find/index.md | 78 + files/fr/web/api/window/focus/index.html | 37 - files/fr/web/api/window/focus/index.md | 37 + files/fr/web/api/window/frameelement/index.html | 66 - files/fr/web/api/window/frameelement/index.md | 66 + files/fr/web/api/window/frames/index.html | 43 - files/fr/web/api/window/frames/index.md | 43 + files/fr/web/api/window/fullscreen/index.html | 32 - files/fr/web/api/window/fullscreen/index.md | 32 + .../api/window/gamepadconnected_event/index.html | 86 - .../web/api/window/gamepadconnected_event/index.md | 86 + .../window/gamepaddisconnected_event/index.html | 74 - .../api/window/gamepaddisconnected_event/index.md | 74 + .../fr/web/api/window/getcomputedstyle/index.html | 116 - files/fr/web/api/window/getcomputedstyle/index.md | 116 + .../api/window/getdefaultcomputedstyle/index.html | 87 - .../api/window/getdefaultcomputedstyle/index.md | 87 + files/fr/web/api/window/getselection/index.html | 47 - files/fr/web/api/window/getselection/index.md | 47 + .../fr/web/api/window/hashchange_event/index.html | 139 - files/fr/web/api/window/hashchange_event/index.md | 139 + files/fr/web/api/window/history/index.html | 53 - files/fr/web/api/window/history/index.md | 53 + files/fr/web/api/window/home/index.html | 36 - files/fr/web/api/window/home/index.md | 36 + files/fr/web/api/window/index.html | 568 --- files/fr/web/api/window/index.md | 568 +++ files/fr/web/api/window/innerheight/index.html | 95 - files/fr/web/api/window/innerheight/index.md | 95 + files/fr/web/api/window/innerwidth/index.html | 68 - files/fr/web/api/window/innerwidth/index.md | 68 + files/fr/web/api/window/issecurecontext/index.html | 58 - files/fr/web/api/window/issecurecontext/index.md | 58 + .../web/api/window/languagechange_event/index.html | 79 - .../web/api/window/languagechange_event/index.md | 79 + files/fr/web/api/window/length/index.html | 27 - files/fr/web/api/window/length/index.md | 27 + files/fr/web/api/window/load_event/index.html | 91 - files/fr/web/api/window/load_event/index.md | 91 + files/fr/web/api/window/localstorage/index.html | 91 - files/fr/web/api/window/localstorage/index.md | 91 + files/fr/web/api/window/location/index.html | 197 -- files/fr/web/api/window/location/index.md | 197 ++ files/fr/web/api/window/locationbar/index.html | 72 - files/fr/web/api/window/locationbar/index.md | 72 + files/fr/web/api/window/matchmedia/index.html | 51 - files/fr/web/api/window/matchmedia/index.md | 51 + files/fr/web/api/window/menubar/index.html | 72 - files/fr/web/api/window/menubar/index.md | 72 + files/fr/web/api/window/message_event/index.html | 82 - files/fr/web/api/window/message_event/index.md | 82 + .../web/api/window/messageerror_event/index.html | 77 - .../fr/web/api/window/messageerror_event/index.md | 77 + files/fr/web/api/window/mozinnerscreenx/index.html | 47 - files/fr/web/api/window/mozinnerscreenx/index.md | 47 + files/fr/web/api/window/mozinnerscreeny/index.html | 47 - files/fr/web/api/window/mozinnerscreeny/index.md | 47 + files/fr/web/api/window/mozpaintcount/index.html | 35 - files/fr/web/api/window/mozpaintcount/index.md | 35 + files/fr/web/api/window/name/index.html | 54 - files/fr/web/api/window/name/index.md | 54 + files/fr/web/api/window/navigator/index.html | 48 - files/fr/web/api/window/navigator/index.md | 48 + files/fr/web/api/window/offline_event/index.html | 73 - files/fr/web/api/window/offline_event/index.md | 73 + files/fr/web/api/window/online_event/index.html | 77 - files/fr/web/api/window/online_event/index.md | 77 + files/fr/web/api/window/onpaint/index.html | 37 - files/fr/web/api/window/onpaint/index.md | 37 + files/fr/web/api/window/open/index.html | 518 --- files/fr/web/api/window/open/index.md | 518 +++ files/fr/web/api/window/opendialog/index.html | 102 - files/fr/web/api/window/opendialog/index.md | 102 + files/fr/web/api/window/opener/index.html | 24 - files/fr/web/api/window/opener/index.md | 24 + files/fr/web/api/window/orientation/index.html | 35 - files/fr/web/api/window/orientation/index.md | 35 + files/fr/web/api/window/outerheight/index.html | 62 - files/fr/web/api/window/outerheight/index.md | 62 + files/fr/web/api/window/outerwidth/index.html | 59 - files/fr/web/api/window/outerwidth/index.md | 59 + files/fr/web/api/window/pagehide_event/index.html | 70 - files/fr/web/api/window/pagehide_event/index.md | 70 + files/fr/web/api/window/pageshow_event/index.html | 110 - files/fr/web/api/window/pageshow_event/index.md | 110 + files/fr/web/api/window/parent/index.html | 25 - files/fr/web/api/window/parent/index.md | 25 + files/fr/web/api/window/paste_event/index.html | 71 - files/fr/web/api/window/paste_event/index.md | 71 + files/fr/web/api/window/popstate_event/index.html | 111 - files/fr/web/api/window/popstate_event/index.md | 111 + files/fr/web/api/window/postmessage/index.html | 179 - files/fr/web/api/window/postmessage/index.md | 179 + files/fr/web/api/window/print/index.html | 50 - files/fr/web/api/window/print/index.md | 50 + files/fr/web/api/window/prompt/index.html | 91 - files/fr/web/api/window/prompt/index.md | 91 + .../api/window/rejectionhandled_event/index.html | 82 - .../web/api/window/rejectionhandled_event/index.md | 82 + .../api/window/requestanimationframe/index.html | 93 - .../web/api/window/requestanimationframe/index.md | 93 + .../web/api/window/requestidlecallback/index.html | 65 - .../fr/web/api/window/requestidlecallback/index.md | 65 + files/fr/web/api/window/resizeby/index.html | 73 - files/fr/web/api/window/resizeby/index.md | 73 + files/fr/web/api/window/screen/index.html | 55 - files/fr/web/api/window/screen/index.md | 55 + files/fr/web/api/window/screenx/index.html | 52 - files/fr/web/api/window/screenx/index.md | 52 + files/fr/web/api/window/scroll/index.html | 24 - files/fr/web/api/window/scroll/index.md | 24 + files/fr/web/api/window/scrollbars/index.html | 73 - files/fr/web/api/window/scrollbars/index.md | 73 + files/fr/web/api/window/scrollby/index.html | 56 - files/fr/web/api/window/scrollby/index.md | 56 + files/fr/web/api/window/scrollbylines/index.html | 49 - files/fr/web/api/window/scrollbylines/index.md | 49 + files/fr/web/api/window/scrollbypages/index.html | 42 - files/fr/web/api/window/scrollbypages/index.md | 42 + files/fr/web/api/window/scrollto/index.html | 38 - files/fr/web/api/window/scrollto/index.md | 38 + files/fr/web/api/window/scrolly/index.html | 71 - files/fr/web/api/window/scrolly/index.md | 71 + files/fr/web/api/window/sessionstorage/index.html | 89 - files/fr/web/api/window/sessionstorage/index.md | 89 + files/fr/web/api/window/showmodaldialog/index.html | 87 - files/fr/web/api/window/showmodaldialog/index.md | 87 + files/fr/web/api/window/stop/index.html | 54 - files/fr/web/api/window/stop/index.md | 54 + files/fr/web/api/window/storage_event/index.html | 83 - files/fr/web/api/window/storage_event/index.md | 83 + files/fr/web/api/window/top/index.html | 54 - files/fr/web/api/window/top/index.md | 54 + files/fr/web/api/window/unload_event/index.html | 156 - files/fr/web/api/window/unload_event/index.md | 156 + .../api/window/vrdisplayconnect_event/index.html | 81 - .../web/api/window/vrdisplayconnect_event/index.md | 81 + .../window/vrdisplaydisconnect_event/index.html | 81 - .../api/window/vrdisplaydisconnect_event/index.md | 81 + .../window/vrdisplaypresentchange_event/index.html | 89 - .../window/vrdisplaypresentchange_event/index.md | 89 + files/fr/web/api/windowclient/focus/index.html | 73 - files/fr/web/api/windowclient/focus/index.md | 73 + files/fr/web/api/windowclient/focused/index.html | 61 - files/fr/web/api/windowclient/focused/index.md | 61 + files/fr/web/api/windowclient/index.html | 92 - files/fr/web/api/windowclient/index.md | 92 + files/fr/web/api/windowclient/navigate/index.html | 55 - files/fr/web/api/windowclient/navigate/index.md | 55 + .../api/windowclient/visibilitystate/index.html | 55 - .../web/api/windowclient/visibilitystate/index.md | 55 + files/fr/web/api/windoweventhandlers/index.html | 93 - files/fr/web/api/windoweventhandlers/index.md | 93 + .../windoweventhandlers/onafterprint/index.html | 65 - .../api/windoweventhandlers/onafterprint/index.md | 65 + .../windoweventhandlers/onbeforeprint/index.html | 66 - .../api/windoweventhandlers/onbeforeprint/index.md | 66 + .../windoweventhandlers/onbeforeunload/index.html | 49 - .../windoweventhandlers/onbeforeunload/index.md | 49 + .../windoweventhandlers/onhashchange/index.html | 129 - .../api/windoweventhandlers/onhashchange/index.md | 129 + .../onlanguagechange/index.html | 64 - .../windoweventhandlers/onlanguagechange/index.md | 64 + .../api/windoweventhandlers/onpopstate/index.html | 56 - .../api/windoweventhandlers/onpopstate/index.md | 56 + .../api/windoweventhandlers/onunload/index.html | 56 - .../web/api/windoweventhandlers/onunload/index.md | 56 + .../web/api/windoworworkerglobalscope/index.html | 110 - .../fr/web/api/windoworworkerglobalscope/index.md | 110 + files/fr/web/api/worker/index.html | 132 - files/fr/web/api/worker/index.md | 132 + files/fr/web/api/worker/onmessage/index.html | 79 - files/fr/web/api/worker/onmessage/index.md | 79 + files/fr/web/api/worker/postmessage/index.html | 152 - files/fr/web/api/worker/postmessage/index.md | 152 + files/fr/web/api/worker/terminate/index.html | 58 - files/fr/web/api/worker/terminate/index.md | 58 + files/fr/web/api/worker/worker/index.html | 86 - files/fr/web/api/worker/worker/index.md | 86 + .../web/api/workerglobalscope/console/index.html | 50 - .../fr/web/api/workerglobalscope/console/index.md | 50 + files/fr/web/api/workerglobalscope/dump/index.html | 52 - files/fr/web/api/workerglobalscope/dump/index.md | 52 + .../api/workerglobalscope/importscripts/index.html | 71 - .../api/workerglobalscope/importscripts/index.md | 71 + files/fr/web/api/workerglobalscope/index.html | 145 - files/fr/web/api/workerglobalscope/index.md | 145 + .../web/api/workerglobalscope/location/index.html | 69 - .../fr/web/api/workerglobalscope/location/index.md | 69 + .../web/api/workerglobalscope/navigator/index.html | 66 - .../web/api/workerglobalscope/navigator/index.md | 66 + .../web/api/workerglobalscope/onerror/index.html | 47 - .../fr/web/api/workerglobalscope/onerror/index.md | 47 + .../workerglobalscope/onlanguagechange/index.html | 47 - .../workerglobalscope/onlanguagechange/index.md | 47 + .../web/api/workerglobalscope/onoffline/index.html | 47 - .../web/api/workerglobalscope/onoffline/index.md | 47 + .../web/api/workerglobalscope/ononline/index.html | 45 - .../fr/web/api/workerglobalscope/ononline/index.md | 45 + files/fr/web/api/workerglobalscope/self/index.html | 75 - files/fr/web/api/workerglobalscope/self/index.md | 75 + files/fr/web/api/workerlocation/index.html | 79 - files/fr/web/api/workerlocation/index.md | 79 + files/fr/web/api/xmldocument/async/index.html | 42 - files/fr/web/api/xmldocument/async/index.md | 42 + files/fr/web/api/xmldocument/index.html | 62 - files/fr/web/api/xmldocument/index.md | 62 + files/fr/web/api/xmldocument/load/index.html | 47 - files/fr/web/api/xmldocument/load/index.md | 47 + .../web/api/xmlhttprequest/abort_event/index.html | 90 - .../fr/web/api/xmlhttprequest/abort_event/index.md | 90 + files/fr/web/api/xmlhttprequest/index.html | 194 -- files/fr/web/api/xmlhttprequest/index.md | 194 ++ .../xmlhttprequest/onreadystatechange/index.html | 59 - .../api/xmlhttprequest/onreadystatechange/index.md | 59 + files/fr/web/api/xmlhttprequest/open/index.html | 69 - files/fr/web/api/xmlhttprequest/open/index.md | 69 + .../web/api/xmlhttprequest/readystate/index.html | 100 - .../fr/web/api/xmlhttprequest/readystate/index.md | 100 + .../fr/web/api/xmlhttprequest/response/index.html | 143 - files/fr/web/api/xmlhttprequest/response/index.md | 143 + .../web/api/xmlhttprequest/responsetext/index.html | 71 - .../web/api/xmlhttprequest/responsetext/index.md | 71 + files/fr/web/api/xmlhttprequest/send/index.html | 133 - files/fr/web/api/xmlhttprequest/send/index.md | 133 + .../api/xmlhttprequest/setrequestheader/index.html | 64 - .../api/xmlhttprequest/setrequestheader/index.md | 64 + files/fr/web/api/xmlhttprequest/status/index.html | 68 - files/fr/web/api/xmlhttprequest/status/index.md | 68 + files/fr/web/api/xmlhttprequest/timeout/index.html | 65 - files/fr/web/api/xmlhttprequest/timeout/index.md | 65 + .../xmlhttprequest/using_xmlhttprequest/index.html | 770 ----- .../xmlhttprequest/using_xmlhttprequest/index.md | 770 +++++ .../api/xmlhttprequest/withcredentials/index.html | 54 - .../api/xmlhttprequest/withcredentials/index.md | 54 + .../api/xmlhttprequest/xmlhttprequest/index.html | 62 - .../web/api/xmlhttprequest/xmlhttprequest/index.md | 62 + .../web/api/xmlhttprequesteventtarget/index.html | 65 - .../fr/web/api/xmlhttprequesteventtarget/index.md | 65 + .../xmlhttprequesteventtarget/onload/index.html | 56 - .../api/xmlhttprequesteventtarget/onload/index.md | 56 + files/fr/web/api/xmlserializer/index.html | 57 - files/fr/web/api/xmlserializer/index.md | 57 + files/fr/web/api/xpathexpression/index.html | 20 - files/fr/web/api/xpathexpression/index.md | 20 + .../web/api/xsltprocessor/basic_example/index.html | 66 - .../web/api/xsltprocessor/basic_example/index.md | 66 + .../xsltprocessor/browser_differences/index.html | 23 - .../api/xsltprocessor/browser_differences/index.md | 23 + .../api/xsltprocessor/generating_html/index.html | 191 - .../web/api/xsltprocessor/generating_html/index.md | 191 + files/fr/web/api/xsltprocessor/index.html | 135 - files/fr/web/api/xsltprocessor/index.md | 135 + .../xsl_transformations_in_mozilla_faq/index.html | 48 - .../xsl_transformations_in_mozilla_faq/index.md | 48 + 2996 files changed, 148998 insertions(+), 148998 deletions(-) delete mode 100644 files/fr/web/api/abortsignal/index.html create mode 100644 files/fr/web/api/abortsignal/index.md delete mode 100644 files/fr/web/api/analysernode/analysernode/index.html create mode 100644 files/fr/web/api/analysernode/analysernode/index.md delete mode 100644 files/fr/web/api/analysernode/fftsize/index.html create mode 100644 files/fr/web/api/analysernode/fftsize/index.md delete mode 100644 files/fr/web/api/analysernode/frequencybincount/index.html create mode 100644 files/fr/web/api/analysernode/frequencybincount/index.md delete mode 100644 files/fr/web/api/analysernode/getbytefrequencydata/index.html create mode 100644 files/fr/web/api/analysernode/getbytefrequencydata/index.md delete mode 100644 files/fr/web/api/analysernode/getbytetimedomaindata/index.html create mode 100644 files/fr/web/api/analysernode/getbytetimedomaindata/index.md delete mode 100644 files/fr/web/api/analysernode/getfloatfrequencydata/index.html create mode 100644 files/fr/web/api/analysernode/getfloatfrequencydata/index.md delete mode 100644 files/fr/web/api/analysernode/getfloattimedomaindata/index.html create mode 100644 files/fr/web/api/analysernode/getfloattimedomaindata/index.md delete mode 100644 files/fr/web/api/analysernode/index.html create mode 100644 files/fr/web/api/analysernode/index.md delete mode 100644 files/fr/web/api/analysernode/maxdecibels/index.html create mode 100644 files/fr/web/api/analysernode/maxdecibels/index.md delete mode 100644 files/fr/web/api/analysernode/mindecibels/index.html create mode 100644 files/fr/web/api/analysernode/mindecibels/index.md delete mode 100644 files/fr/web/api/analysernode/smoothingtimeconstant/index.html create mode 100644 files/fr/web/api/analysernode/smoothingtimeconstant/index.md delete mode 100644 files/fr/web/api/animation/index.html create mode 100644 files/fr/web/api/animation/index.md delete mode 100644 files/fr/web/api/animation/starttime/index.html create mode 100644 files/fr/web/api/animation/starttime/index.md delete mode 100644 files/fr/web/api/animationevent/animationevent/index.html create mode 100644 files/fr/web/api/animationevent/animationevent/index.md delete mode 100644 files/fr/web/api/animationevent/animationname/index.html create mode 100644 files/fr/web/api/animationevent/animationname/index.md delete mode 100644 files/fr/web/api/animationevent/elapsedtime/index.html create mode 100644 files/fr/web/api/animationevent/elapsedtime/index.md delete mode 100644 files/fr/web/api/animationevent/index.html create mode 100644 files/fr/web/api/animationevent/index.md delete mode 100644 files/fr/web/api/animationevent/pseudoelement/index.html create mode 100644 files/fr/web/api/animationevent/pseudoelement/index.md delete mode 100644 files/fr/web/api/atob/index.html create mode 100644 files/fr/web/api/atob/index.md delete mode 100644 files/fr/web/api/attr/index.html create mode 100644 files/fr/web/api/attr/index.md delete mode 100644 files/fr/web/api/attr/localname/index.html create mode 100644 files/fr/web/api/attr/localname/index.md delete mode 100644 files/fr/web/api/attr/namespaceuri/index.html create mode 100644 files/fr/web/api/attr/namespaceuri/index.md delete mode 100644 files/fr/web/api/attr/prefix/index.html create mode 100644 files/fr/web/api/attr/prefix/index.md delete mode 100644 files/fr/web/api/audiobuffer/audiobuffer/index.html create mode 100644 files/fr/web/api/audiobuffer/audiobuffer/index.md delete mode 100644 files/fr/web/api/audiobuffer/copyfromchannel/index.html create mode 100644 files/fr/web/api/audiobuffer/copyfromchannel/index.md delete mode 100644 files/fr/web/api/audiobuffer/copytochannel/index.html create mode 100644 files/fr/web/api/audiobuffer/copytochannel/index.md delete mode 100644 files/fr/web/api/audiobuffer/duration/index.html create mode 100644 files/fr/web/api/audiobuffer/duration/index.md delete mode 100644 files/fr/web/api/audiobuffer/getchanneldata/index.html create mode 100644 files/fr/web/api/audiobuffer/getchanneldata/index.md delete mode 100644 files/fr/web/api/audiobuffer/index.html create mode 100644 files/fr/web/api/audiobuffer/index.md delete mode 100644 files/fr/web/api/audiobuffer/length/index.html create mode 100644 files/fr/web/api/audiobuffer/length/index.md delete mode 100644 files/fr/web/api/audiobuffer/numberofchannels/index.html create mode 100644 files/fr/web/api/audiobuffer/numberofchannels/index.md delete mode 100644 files/fr/web/api/audiobuffer/samplerate/index.html create mode 100644 files/fr/web/api/audiobuffer/samplerate/index.md delete mode 100644 files/fr/web/api/audiobuffersourcenode/buffer/index.html create mode 100644 files/fr/web/api/audiobuffersourcenode/buffer/index.md delete mode 100644 files/fr/web/api/audiobuffersourcenode/detune/index.html create mode 100644 files/fr/web/api/audiobuffersourcenode/detune/index.md delete mode 100644 files/fr/web/api/audiobuffersourcenode/index.html create mode 100644 files/fr/web/api/audiobuffersourcenode/index.md delete mode 100644 files/fr/web/api/audiobuffersourcenode/loop/index.html create mode 100644 files/fr/web/api/audiobuffersourcenode/loop/index.md delete mode 100644 files/fr/web/api/audiobuffersourcenode/loopend/index.html create mode 100644 files/fr/web/api/audiobuffersourcenode/loopend/index.md delete mode 100644 files/fr/web/api/audiobuffersourcenode/loopstart/index.html create mode 100644 files/fr/web/api/audiobuffersourcenode/loopstart/index.md delete mode 100644 files/fr/web/api/audiobuffersourcenode/playbackrate/index.html create mode 100644 files/fr/web/api/audiobuffersourcenode/playbackrate/index.md delete mode 100644 files/fr/web/api/audiobuffersourcenode/start/index.html create mode 100644 files/fr/web/api/audiobuffersourcenode/start/index.md delete mode 100644 files/fr/web/api/audiocontext/createmediaelementsource/index.html create mode 100644 files/fr/web/api/audiocontext/createmediaelementsource/index.md delete mode 100644 files/fr/web/api/audiocontext/index.html create mode 100644 files/fr/web/api/audiocontext/index.md delete mode 100644 files/fr/web/api/audiolistener/index.html create mode 100644 files/fr/web/api/audiolistener/index.md delete mode 100644 files/fr/web/api/audionode/index.html create mode 100644 files/fr/web/api/audionode/index.md delete mode 100644 files/fr/web/api/audioparam/index.html create mode 100644 files/fr/web/api/audioparam/index.md delete mode 100644 files/fr/web/api/audioprocessingevent/index.html create mode 100644 files/fr/web/api/audioprocessingevent/index.md delete mode 100644 files/fr/web/api/audioworklet/index.html create mode 100644 files/fr/web/api/audioworklet/index.md delete mode 100644 files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.html create mode 100644 files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md delete mode 100644 files/fr/web/api/authenticatorassertionresponse/index.html create mode 100644 files/fr/web/api/authenticatorassertionresponse/index.md delete mode 100644 files/fr/web/api/authenticatorattestationresponse/index.html create mode 100644 files/fr/web/api/authenticatorattestationresponse/index.md delete mode 100644 files/fr/web/api/authenticatorresponse/index.html create mode 100644 files/fr/web/api/authenticatorresponse/index.md delete mode 100644 files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html create mode 100644 files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md delete mode 100644 files/fr/web/api/baseaudiocontext/createbuffer/index.html create mode 100644 files/fr/web/api/baseaudiocontext/createbuffer/index.md delete mode 100644 files/fr/web/api/baseaudiocontext/createbuffersource/index.html create mode 100644 files/fr/web/api/baseaudiocontext/createbuffersource/index.md delete mode 100644 files/fr/web/api/baseaudiocontext/creategain/index.html create mode 100644 files/fr/web/api/baseaudiocontext/creategain/index.md delete mode 100644 files/fr/web/api/baseaudiocontext/createpanner/index.html create mode 100644 files/fr/web/api/baseaudiocontext/createpanner/index.md delete mode 100644 files/fr/web/api/baseaudiocontext/createperiodicwave/index.html create mode 100644 files/fr/web/api/baseaudiocontext/createperiodicwave/index.md delete mode 100644 files/fr/web/api/baseaudiocontext/index.html create mode 100644 files/fr/web/api/baseaudiocontext/index.md delete mode 100644 files/fr/web/api/battery_status_api/index.html create mode 100644 files/fr/web/api/battery_status_api/index.md delete mode 100644 files/fr/web/api/batterymanager/charging/index.html create mode 100644 files/fr/web/api/batterymanager/charging/index.md delete mode 100644 files/fr/web/api/batterymanager/chargingtime/index.html create mode 100644 files/fr/web/api/batterymanager/chargingtime/index.md delete mode 100644 files/fr/web/api/batterymanager/dischargingtime/index.html create mode 100644 files/fr/web/api/batterymanager/dischargingtime/index.md delete mode 100644 files/fr/web/api/batterymanager/index.html create mode 100644 files/fr/web/api/batterymanager/index.md delete mode 100644 files/fr/web/api/batterymanager/level/index.html create mode 100644 files/fr/web/api/batterymanager/level/index.md delete mode 100644 files/fr/web/api/beforeunloadevent/index.html create mode 100644 files/fr/web/api/beforeunloadevent/index.md delete mode 100644 files/fr/web/api/biquadfilternode/frequency/index.html create mode 100644 files/fr/web/api/biquadfilternode/frequency/index.md delete mode 100644 files/fr/web/api/biquadfilternode/index.html create mode 100644 files/fr/web/api/biquadfilternode/index.md delete mode 100644 files/fr/web/api/blob/blob/index.html create mode 100644 files/fr/web/api/blob/blob/index.md delete mode 100644 files/fr/web/api/blob/index.html create mode 100644 files/fr/web/api/blob/index.md delete mode 100644 files/fr/web/api/blob/size/index.html create mode 100644 files/fr/web/api/blob/size/index.md delete mode 100644 files/fr/web/api/blob/type/index.html create mode 100644 files/fr/web/api/blob/type/index.md delete mode 100644 files/fr/web/api/blobbuilder/index.html create mode 100644 files/fr/web/api/blobbuilder/index.md delete mode 100644 files/fr/web/api/blobevent/blobevent/index.html create mode 100644 files/fr/web/api/blobevent/blobevent/index.md delete mode 100644 files/fr/web/api/blobevent/data/index.html create mode 100644 files/fr/web/api/blobevent/data/index.md delete mode 100644 files/fr/web/api/blobevent/index.html create mode 100644 files/fr/web/api/blobevent/index.md delete mode 100644 files/fr/web/api/btoa/index.html create mode 100644 files/fr/web/api/btoa/index.md delete mode 100644 files/fr/web/api/cache/add/index.html create mode 100644 files/fr/web/api/cache/add/index.md delete mode 100644 files/fr/web/api/cache/addall/index.html create mode 100644 files/fr/web/api/cache/addall/index.md delete mode 100644 files/fr/web/api/cache/delete/index.html create mode 100644 files/fr/web/api/cache/delete/index.md delete mode 100644 files/fr/web/api/cache/index.html create mode 100644 files/fr/web/api/cache/index.md delete mode 100644 files/fr/web/api/cache/keys/index.html create mode 100644 files/fr/web/api/cache/keys/index.md delete mode 100644 files/fr/web/api/cache/match/index.html create mode 100644 files/fr/web/api/cache/match/index.md delete mode 100644 files/fr/web/api/cache/matchall/index.html create mode 100644 files/fr/web/api/cache/matchall/index.md delete mode 100644 files/fr/web/api/cache/put/index.html create mode 100644 files/fr/web/api/cache/put/index.md delete mode 100644 files/fr/web/api/caches/index.html create mode 100644 files/fr/web/api/caches/index.md delete mode 100644 files/fr/web/api/cachestorage/delete/index.html create mode 100644 files/fr/web/api/cachestorage/delete/index.md delete mode 100644 files/fr/web/api/cachestorage/has/index.html create mode 100644 files/fr/web/api/cachestorage/has/index.md delete mode 100644 files/fr/web/api/cachestorage/index.html create mode 100644 files/fr/web/api/cachestorage/index.md delete mode 100644 files/fr/web/api/cachestorage/keys/index.html create mode 100644 files/fr/web/api/cachestorage/keys/index.md delete mode 100644 files/fr/web/api/cachestorage/match/index.html create mode 100644 files/fr/web/api/cachestorage/match/index.md delete mode 100644 files/fr/web/api/cachestorage/open/index.html create mode 100644 files/fr/web/api/cachestorage/open/index.md delete mode 100644 files/fr/web/api/canvas_api/a_basic_ray-caster/index.html create mode 100644 files/fr/web/api/canvas_api/a_basic_ray-caster/index.md delete mode 100644 files/fr/web/api/canvas_api/index.html create mode 100644 files/fr/web/api/canvas_api/index.md delete mode 100644 files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html create mode 100644 files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md delete 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/applying_styles_and_colors/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/basic_animations/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/basic_usage/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/compositing/example/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/compositing/example/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/compositing/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/compositing/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/drawing_text/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/drawing_text/index.md delete 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/hit_regions_and_accessibility/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md delete 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/pixel_manipulation_with_canvas/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/transformations/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/transformations/index.md delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/index.md delete mode 100644 files/fr/web/api/canvasgradient/addcolorstop/index.html create mode 100644 files/fr/web/api/canvasgradient/addcolorstop/index.md delete mode 100644 files/fr/web/api/canvasgradient/index.html create mode 100644 files/fr/web/api/canvasgradient/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/arc/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/arc/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/canvas/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/closepath/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/closepath/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/direction/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/direction/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/fill/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/fill/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/filltext/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/filltext/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/font/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/font/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/linecap/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/linecap/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/lineto/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/lineto/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/moveto/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/moveto/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/rect/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/rect/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/rotate/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/rotate/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/save/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/save/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/scale/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/scale/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/settransform/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/settransform/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/stroke/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/stroke/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/textalign/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/textalign/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/transform/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/transform/index.md delete mode 100644 files/fr/web/api/canvasrenderingcontext2d/translate/index.html create mode 100644 files/fr/web/api/canvasrenderingcontext2d/translate/index.md delete mode 100644 files/fr/web/api/cdatasection/index.html create mode 100644 files/fr/web/api/cdatasection/index.md delete mode 100644 files/fr/web/api/characterdata/index.html create mode 100644 files/fr/web/api/characterdata/index.md delete mode 100644 files/fr/web/api/clearinterval/index.html create mode 100644 files/fr/web/api/clearinterval/index.md delete mode 100644 files/fr/web/api/client/frametype/index.html create mode 100644 files/fr/web/api/client/frametype/index.md delete mode 100644 files/fr/web/api/client/id/index.html create mode 100644 files/fr/web/api/client/id/index.md delete mode 100644 files/fr/web/api/client/index.html create mode 100644 files/fr/web/api/client/index.md delete mode 100644 files/fr/web/api/client/postmessage/index.html create mode 100644 files/fr/web/api/client/postmessage/index.md delete mode 100644 files/fr/web/api/client/url/index.html create mode 100644 files/fr/web/api/client/url/index.md delete mode 100644 files/fr/web/api/clients/claim/index.html create mode 100644 files/fr/web/api/clients/claim/index.md delete mode 100644 files/fr/web/api/clients/get/index.html create mode 100644 files/fr/web/api/clients/get/index.md delete mode 100644 files/fr/web/api/clients/index.html create mode 100644 files/fr/web/api/clients/index.md delete mode 100644 files/fr/web/api/clients/matchall/index.html create mode 100644 files/fr/web/api/clients/matchall/index.md delete mode 100644 files/fr/web/api/clients/openwindow/index.html create mode 100644 files/fr/web/api/clients/openwindow/index.md delete mode 100644 files/fr/web/api/clipboard/index.html create mode 100644 files/fr/web/api/clipboard/index.md delete mode 100644 files/fr/web/api/clipboard/write/index.html create mode 100644 files/fr/web/api/clipboard/write/index.md delete mode 100644 files/fr/web/api/clipboard/writetext/index.html create mode 100644 files/fr/web/api/clipboard/writetext/index.md delete mode 100644 files/fr/web/api/clipboard_api/index.html create mode 100644 files/fr/web/api/clipboard_api/index.md delete mode 100644 files/fr/web/api/closeevent/index.html create mode 100644 files/fr/web/api/closeevent/index.md delete mode 100644 files/fr/web/api/comment/comment/index.html create mode 100644 files/fr/web/api/comment/comment/index.md delete mode 100644 files/fr/web/api/comment/index.html create mode 100644 files/fr/web/api/comment/index.md delete mode 100644 files/fr/web/api/compositionevent/index.html create mode 100644 files/fr/web/api/compositionevent/index.md delete mode 100644 files/fr/web/api/console/assert/index.html create mode 100644 files/fr/web/api/console/assert/index.md delete mode 100644 files/fr/web/api/console/clear/index.html create mode 100644 files/fr/web/api/console/clear/index.md delete mode 100644 files/fr/web/api/console/count/index.html create mode 100644 files/fr/web/api/console/count/index.md delete mode 100644 files/fr/web/api/console/countreset/index.html create mode 100644 files/fr/web/api/console/countreset/index.md delete mode 100644 files/fr/web/api/console/debug/index.html create mode 100644 files/fr/web/api/console/debug/index.md delete mode 100644 files/fr/web/api/console/dir/index.html create mode 100644 files/fr/web/api/console/dir/index.md delete mode 100644 files/fr/web/api/console/dirxml/index.html create mode 100644 files/fr/web/api/console/dirxml/index.md delete mode 100644 files/fr/web/api/console/error/index.html create mode 100644 files/fr/web/api/console/error/index.md delete mode 100644 files/fr/web/api/console/group/index.html create mode 100644 files/fr/web/api/console/group/index.md delete mode 100644 files/fr/web/api/console/groupcollapsed/index.html create mode 100644 files/fr/web/api/console/groupcollapsed/index.md delete mode 100644 files/fr/web/api/console/groupend/index.html create mode 100644 files/fr/web/api/console/groupend/index.md delete mode 100644 files/fr/web/api/console/index.html create mode 100644 files/fr/web/api/console/index.md delete mode 100644 files/fr/web/api/console/info/index.html create mode 100644 files/fr/web/api/console/info/index.md delete mode 100644 files/fr/web/api/console/log/index.html create mode 100644 files/fr/web/api/console/log/index.md delete mode 100644 files/fr/web/api/console/profile/index.html create mode 100644 files/fr/web/api/console/profile/index.md delete mode 100644 files/fr/web/api/console/profileend/index.html create mode 100644 files/fr/web/api/console/profileend/index.md delete mode 100644 files/fr/web/api/console/table/index.html create mode 100644 files/fr/web/api/console/table/index.md delete mode 100644 files/fr/web/api/console/time/index.html create mode 100644 files/fr/web/api/console/time/index.md delete mode 100644 files/fr/web/api/console/timeend/index.html create mode 100644 files/fr/web/api/console/timeend/index.md delete mode 100644 files/fr/web/api/console/timelog/index.html create mode 100644 files/fr/web/api/console/timelog/index.md delete mode 100644 files/fr/web/api/console/timestamp/index.html create mode 100644 files/fr/web/api/console/timestamp/index.md delete mode 100644 files/fr/web/api/console/trace/index.html create mode 100644 files/fr/web/api/console/trace/index.md delete mode 100644 files/fr/web/api/console/warn/index.html create mode 100644 files/fr/web/api/console/warn/index.md delete mode 100644 files/fr/web/api/console_api/index.html create mode 100644 files/fr/web/api/console_api/index.md delete mode 100644 files/fr/web/api/credential/index.html create mode 100644 files/fr/web/api/credential/index.md delete mode 100644 files/fr/web/api/credential_management_api/index.html create mode 100644 files/fr/web/api/credential_management_api/index.md delete mode 100644 files/fr/web/api/credentialscontainer/create/index.html create mode 100644 files/fr/web/api/credentialscontainer/create/index.md delete mode 100644 files/fr/web/api/credentialscontainer/get/index.html create mode 100644 files/fr/web/api/credentialscontainer/get/index.md delete mode 100644 files/fr/web/api/credentialscontainer/index.html create mode 100644 files/fr/web/api/credentialscontainer/index.md delete mode 100644 files/fr/web/api/credentialscontainer/preventsilentaccess/index.html create mode 100644 files/fr/web/api/credentialscontainer/preventsilentaccess/index.md delete mode 100644 files/fr/web/api/credentialscontainer/store/index.html create mode 100644 files/fr/web/api/credentialscontainer/store/index.md delete mode 100644 files/fr/web/api/crossoriginisolated/index.html create mode 100644 files/fr/web/api/crossoriginisolated/index.md delete mode 100644 files/fr/web/api/crypto/getrandomvalues/index.html create mode 100644 files/fr/web/api/crypto/getrandomvalues/index.md delete mode 100644 files/fr/web/api/crypto/index.html create mode 100644 files/fr/web/api/crypto/index.md delete mode 100644 files/fr/web/api/crypto/subtle/index.html create mode 100644 files/fr/web/api/crypto/subtle/index.md delete mode 100644 files/fr/web/api/crypto_property/index.html create mode 100644 files/fr/web/api/crypto_property/index.md delete mode 100644 files/fr/web/api/cryptokey/index.html create mode 100644 files/fr/web/api/cryptokey/index.md delete mode 100644 files/fr/web/api/css/index.html create mode 100644 files/fr/web/api/css/index.md delete mode 100644 files/fr/web/api/css_counter_styles/index.html create mode 100644 files/fr/web/api/css_counter_styles/index.md delete mode 100644 files/fr/web/api/css_font_loading_api/index.html create mode 100644 files/fr/web/api/css_font_loading_api/index.md delete mode 100644 files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html create mode 100644 files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md delete mode 100644 files/fr/web/api/css_object_model/index.html create mode 100644 files/fr/web/api/css_object_model/index.md delete mode 100644 files/fr/web/api/css_object_model/managing_screen_orientation/index.html create mode 100644 files/fr/web/api/css_object_model/managing_screen_orientation/index.md delete mode 100644 files/fr/web/api/css_properties_and_values_api/index.html create mode 100644 files/fr/web/api/css_properties_and_values_api/index.md delete mode 100644 files/fr/web/api/cssmediarule/index.html create mode 100644 files/fr/web/api/cssmediarule/index.md delete mode 100644 files/fr/web/api/cssrulelist/index.html create mode 100644 files/fr/web/api/cssrulelist/index.md delete mode 100644 files/fr/web/api/cssstyledeclaration/csstext/index.html create mode 100644 files/fr/web/api/cssstyledeclaration/csstext/index.md delete mode 100644 files/fr/web/api/cssstyledeclaration/index.html create mode 100644 files/fr/web/api/cssstyledeclaration/index.md delete mode 100644 files/fr/web/api/cssstylerule/index.html create mode 100644 files/fr/web/api/cssstylerule/index.md delete mode 100644 files/fr/web/api/cssvalue/index.html create mode 100644 files/fr/web/api/cssvalue/index.md delete mode 100644 files/fr/web/api/cssvaluelist/index.html create mode 100644 files/fr/web/api/cssvaluelist/index.md delete mode 100644 files/fr/web/api/customevent/detail/index.html create mode 100644 files/fr/web/api/customevent/detail/index.md delete mode 100644 files/fr/web/api/customevent/index.html create mode 100644 files/fr/web/api/customevent/index.md delete mode 100644 files/fr/web/api/customevent/initcustomevent/index.html create mode 100644 files/fr/web/api/customevent/initcustomevent/index.md delete mode 100644 files/fr/web/api/datatransfer/cleardata/index.html create mode 100644 files/fr/web/api/datatransfer/cleardata/index.md delete mode 100644 files/fr/web/api/datatransfer/files/index.html create mode 100644 files/fr/web/api/datatransfer/files/index.md delete mode 100644 files/fr/web/api/datatransfer/index.html create mode 100644 files/fr/web/api/datatransfer/index.md delete mode 100644 files/fr/web/api/dedicatedworkerglobalscope/close/index.html create mode 100644 files/fr/web/api/dedicatedworkerglobalscope/close/index.md delete mode 100644 files/fr/web/api/dedicatedworkerglobalscope/index.html create mode 100644 files/fr/web/api/dedicatedworkerglobalscope/index.md delete mode 100644 files/fr/web/api/dedicatedworkerglobalscope/name/index.html create mode 100644 files/fr/web/api/dedicatedworkerglobalscope/name/index.md delete mode 100644 files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html create mode 100644 files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md delete mode 100644 files/fr/web/api/devicemotionevent/devicemotionevent/index.html create mode 100644 files/fr/web/api/devicemotionevent/devicemotionevent/index.md delete mode 100644 files/fr/web/api/devicemotionevent/index.html create mode 100644 files/fr/web/api/devicemotionevent/index.md delete mode 100644 files/fr/web/api/devicemotionevent/interval/index.html create mode 100644 files/fr/web/api/devicemotionevent/interval/index.md delete mode 100644 files/fr/web/api/devicemotionevent/rotationrate/index.html create mode 100644 files/fr/web/api/devicemotionevent/rotationrate/index.md delete mode 100644 files/fr/web/api/devicemotioneventrotationrate/alpha/index.html create mode 100644 files/fr/web/api/devicemotioneventrotationrate/alpha/index.md delete mode 100644 files/fr/web/api/devicemotioneventrotationrate/beta/index.html create mode 100644 files/fr/web/api/devicemotioneventrotationrate/beta/index.md delete mode 100644 files/fr/web/api/devicemotioneventrotationrate/gamma/index.html create mode 100644 files/fr/web/api/devicemotioneventrotationrate/gamma/index.md delete mode 100644 files/fr/web/api/devicemotioneventrotationrate/index.html create mode 100644 files/fr/web/api/devicemotioneventrotationrate/index.md delete mode 100644 files/fr/web/api/deviceorientationevent/absolute/index.html create mode 100644 files/fr/web/api/deviceorientationevent/absolute/index.md delete mode 100644 files/fr/web/api/deviceorientationevent/index.html create mode 100644 files/fr/web/api/deviceorientationevent/index.md delete mode 100644 files/fr/web/api/document/activeelement/index.html create mode 100644 files/fr/web/api/document/activeelement/index.md delete mode 100644 files/fr/web/api/document/adoptnode/index.html create mode 100644 files/fr/web/api/document/adoptnode/index.md delete mode 100644 files/fr/web/api/document/alinkcolor/index.html create mode 100644 files/fr/web/api/document/alinkcolor/index.md delete mode 100644 files/fr/web/api/document/anchors/index.html create mode 100644 files/fr/web/api/document/anchors/index.md delete mode 100644 files/fr/web/api/document/applets/index.html create mode 100644 files/fr/web/api/document/applets/index.md delete mode 100644 files/fr/web/api/document/bgcolor/index.html create mode 100644 files/fr/web/api/document/bgcolor/index.md delete mode 100644 files/fr/web/api/document/body/index.html create mode 100644 files/fr/web/api/document/body/index.md delete mode 100644 files/fr/web/api/document/caretrangefrompoint/index.html create mode 100644 files/fr/web/api/document/caretrangefrompoint/index.md delete mode 100644 files/fr/web/api/document/characterset/index.html create mode 100644 files/fr/web/api/document/characterset/index.md delete mode 100644 files/fr/web/api/document/clear/index.html create mode 100644 files/fr/web/api/document/clear/index.md delete mode 100644 files/fr/web/api/document/compatmode/index.html create mode 100644 files/fr/web/api/document/compatmode/index.md delete mode 100644 files/fr/web/api/document/contenttype/index.html create mode 100644 files/fr/web/api/document/contenttype/index.md delete mode 100644 files/fr/web/api/document/createattribute/index.html create mode 100644 files/fr/web/api/document/createattribute/index.md delete mode 100644 files/fr/web/api/document/createcdatasection/index.html create mode 100644 files/fr/web/api/document/createcdatasection/index.md delete mode 100644 files/fr/web/api/document/createcomment/index.html create mode 100644 files/fr/web/api/document/createcomment/index.md delete mode 100644 files/fr/web/api/document/createdocumentfragment/index.html create mode 100644 files/fr/web/api/document/createdocumentfragment/index.md delete mode 100644 files/fr/web/api/document/createelement/index.html create mode 100644 files/fr/web/api/document/createelement/index.md delete mode 100644 files/fr/web/api/document/createelementns/index.html create mode 100644 files/fr/web/api/document/createelementns/index.md delete mode 100644 files/fr/web/api/document/createentityreference/index.html create mode 100644 files/fr/web/api/document/createentityreference/index.md delete mode 100644 files/fr/web/api/document/createevent/index.html create mode 100644 files/fr/web/api/document/createevent/index.md delete mode 100644 files/fr/web/api/document/createexpression/index.html create mode 100644 files/fr/web/api/document/createexpression/index.md delete mode 100644 files/fr/web/api/document/createnodeiterator/index.html create mode 100644 files/fr/web/api/document/createnodeiterator/index.md delete mode 100644 files/fr/web/api/document/creatensresolver/index.html create mode 100644 files/fr/web/api/document/creatensresolver/index.md delete mode 100644 files/fr/web/api/document/createprocessinginstruction/index.html create mode 100644 files/fr/web/api/document/createprocessinginstruction/index.md delete mode 100644 files/fr/web/api/document/createrange/index.html create mode 100644 files/fr/web/api/document/createrange/index.md delete mode 100644 files/fr/web/api/document/createtextnode/index.html create mode 100644 files/fr/web/api/document/createtextnode/index.md delete mode 100644 files/fr/web/api/document/createtreewalker/index.html create mode 100644 files/fr/web/api/document/createtreewalker/index.md delete mode 100644 files/fr/web/api/document/currentscript/index.html create mode 100644 files/fr/web/api/document/currentscript/index.md delete mode 100644 files/fr/web/api/document/defaultview/index.html create mode 100644 files/fr/web/api/document/defaultview/index.md delete mode 100644 files/fr/web/api/document/designmode/index.html create mode 100644 files/fr/web/api/document/designmode/index.md delete mode 100644 files/fr/web/api/document/dir/index.html create mode 100644 files/fr/web/api/document/dir/index.md delete mode 100644 files/fr/web/api/document/doctype/index.html create mode 100644 files/fr/web/api/document/doctype/index.md delete mode 100644 files/fr/web/api/document/document/index.html create mode 100644 files/fr/web/api/document/document/index.md delete mode 100644 files/fr/web/api/document/documentelement/index.html create mode 100644 files/fr/web/api/document/documentelement/index.md delete mode 100644 files/fr/web/api/document/documenturi/index.html create mode 100644 files/fr/web/api/document/documenturi/index.md delete mode 100644 files/fr/web/api/document/documenturiobject/index.html create mode 100644 files/fr/web/api/document/documenturiobject/index.md delete mode 100644 files/fr/web/api/document/domain/index.html create mode 100644 files/fr/web/api/document/domain/index.md delete mode 100644 files/fr/web/api/document/domcontentloaded_event/index.html create mode 100644 files/fr/web/api/document/domcontentloaded_event/index.md delete mode 100644 files/fr/web/api/document/drag_event/index.html create mode 100644 files/fr/web/api/document/drag_event/index.md delete mode 100644 files/fr/web/api/document/dragend_event/index.html create mode 100644 files/fr/web/api/document/dragend_event/index.md delete mode 100644 files/fr/web/api/document/dragenter_event/index.html create mode 100644 files/fr/web/api/document/dragenter_event/index.md delete mode 100644 files/fr/web/api/document/dragleave_event/index.html create mode 100644 files/fr/web/api/document/dragleave_event/index.md delete mode 100644 files/fr/web/api/document/dragover_event/index.html create mode 100644 files/fr/web/api/document/dragover_event/index.md delete mode 100644 files/fr/web/api/document/dragstart_event/index.html create mode 100644 files/fr/web/api/document/dragstart_event/index.md delete mode 100644 files/fr/web/api/document/drop_event/index.html create mode 100644 files/fr/web/api/document/drop_event/index.md delete mode 100644 files/fr/web/api/document/elementfrompoint/index.html create mode 100644 files/fr/web/api/document/elementfrompoint/index.md delete mode 100644 files/fr/web/api/document/elementsfrompoint/index.html create mode 100644 files/fr/web/api/document/elementsfrompoint/index.md delete mode 100644 files/fr/web/api/document/enablestylesheetsforset/index.html create mode 100644 files/fr/web/api/document/enablestylesheetsforset/index.md delete mode 100644 files/fr/web/api/document/evaluate/index.html create mode 100644 files/fr/web/api/document/evaluate/index.md delete mode 100644 files/fr/web/api/document/execcommand/index.html create mode 100644 files/fr/web/api/document/execcommand/index.md delete mode 100644 files/fr/web/api/document/exitfullscreen/index.html create mode 100644 files/fr/web/api/document/exitfullscreen/index.md delete mode 100644 files/fr/web/api/document/exitpointerlock/index.html create mode 100644 files/fr/web/api/document/exitpointerlock/index.md delete mode 100644 files/fr/web/api/document/featurepolicy/index.html create mode 100644 files/fr/web/api/document/featurepolicy/index.md delete mode 100644 files/fr/web/api/document/forms/index.html create mode 100644 files/fr/web/api/document/forms/index.md delete mode 100644 files/fr/web/api/document/fullscreenchange_event/index.html create mode 100644 files/fr/web/api/document/fullscreenchange_event/index.md delete mode 100644 files/fr/web/api/document/fullscreenerror_event/index.html create mode 100644 files/fr/web/api/document/fullscreenerror_event/index.md delete mode 100644 files/fr/web/api/document/getboxobjectfor/index.html create mode 100644 files/fr/web/api/document/getboxobjectfor/index.md delete mode 100644 files/fr/web/api/document/getelementbyid/index.html create mode 100644 files/fr/web/api/document/getelementbyid/index.md delete mode 100644 files/fr/web/api/document/getelementsbyclassname/index.html create mode 100644 files/fr/web/api/document/getelementsbyclassname/index.md delete mode 100644 files/fr/web/api/document/getelementsbyname/index.html create mode 100644 files/fr/web/api/document/getelementsbyname/index.md delete mode 100644 files/fr/web/api/document/getelementsbytagname/index.html create mode 100644 files/fr/web/api/document/getelementsbytagname/index.md delete mode 100644 files/fr/web/api/document/getelementsbytagnamens/index.html create mode 100644 files/fr/web/api/document/getelementsbytagnamens/index.md delete mode 100644 files/fr/web/api/document/getselection/index.html create mode 100644 files/fr/web/api/document/getselection/index.md delete mode 100644 files/fr/web/api/document/hasfocus/index.html create mode 100644 files/fr/web/api/document/hasfocus/index.md delete mode 100644 files/fr/web/api/document/head/index.html create mode 100644 files/fr/web/api/document/head/index.md delete mode 100644 files/fr/web/api/document/height/index.html create mode 100644 files/fr/web/api/document/height/index.md delete mode 100644 files/fr/web/api/document/hidden/index.html create mode 100644 files/fr/web/api/document/hidden/index.md delete mode 100644 files/fr/web/api/document/images/index.html create mode 100644 files/fr/web/api/document/images/index.md delete mode 100644 files/fr/web/api/document/implementation/index.html create mode 100644 files/fr/web/api/document/implementation/index.md delete mode 100644 files/fr/web/api/document/importnode/index.html create mode 100644 files/fr/web/api/document/importnode/index.md delete mode 100644 files/fr/web/api/document/index.html create mode 100644 files/fr/web/api/document/index.md delete mode 100644 files/fr/web/api/document/keypress_event/index.html create mode 100644 files/fr/web/api/document/keypress_event/index.md delete mode 100644 files/fr/web/api/document/lastmodified/index.html create mode 100644 files/fr/web/api/document/lastmodified/index.md delete mode 100644 files/fr/web/api/document/laststylesheetset/index.html create mode 100644 files/fr/web/api/document/laststylesheetset/index.md delete mode 100644 files/fr/web/api/document/location/index.html create mode 100644 files/fr/web/api/document/location/index.md delete mode 100644 files/fr/web/api/document/mozsetimageelement/index.html create mode 100644 files/fr/web/api/document/mozsetimageelement/index.md delete mode 100644 files/fr/web/api/document/mozsyntheticdocument/index.html create mode 100644 files/fr/web/api/document/mozsyntheticdocument/index.md delete mode 100644 files/fr/web/api/document/onafterscriptexecute/index.html create mode 100644 files/fr/web/api/document/onafterscriptexecute/index.md delete mode 100644 files/fr/web/api/document/onbeforescriptexecute/index.html create mode 100644 files/fr/web/api/document/onbeforescriptexecute/index.md delete mode 100644 files/fr/web/api/document/onfullscreenchange/index.html create mode 100644 files/fr/web/api/document/onfullscreenchange/index.md delete mode 100644 files/fr/web/api/document/onoffline/index.html create mode 100644 files/fr/web/api/document/onoffline/index.md delete mode 100644 files/fr/web/api/document/ononline/index.html create mode 100644 files/fr/web/api/document/ononline/index.md delete mode 100644 files/fr/web/api/document/open/index.html create mode 100644 files/fr/web/api/document/open/index.md delete mode 100644 files/fr/web/api/document/origin/index.html create mode 100644 files/fr/web/api/document/origin/index.md delete mode 100644 files/fr/web/api/document/popupnode/index.html create mode 100644 files/fr/web/api/document/popupnode/index.md delete mode 100644 files/fr/web/api/document/preferredstylesheetset/index.html create mode 100644 files/fr/web/api/document/preferredstylesheetset/index.md delete mode 100644 files/fr/web/api/document/querycommandstate/index.html create mode 100644 files/fr/web/api/document/querycommandstate/index.md delete mode 100644 files/fr/web/api/document/querycommandsupported/index.html create mode 100644 files/fr/web/api/document/querycommandsupported/index.md delete mode 100644 files/fr/web/api/document/queryselector/index.html create mode 100644 files/fr/web/api/document/queryselector/index.md delete mode 100644 files/fr/web/api/document/queryselectorall/index.html create mode 100644 files/fr/web/api/document/queryselectorall/index.md delete mode 100644 files/fr/web/api/document/readystate/index.html create mode 100644 files/fr/web/api/document/readystate/index.md delete mode 100644 files/fr/web/api/document/readystatechange_event/index.html create mode 100644 files/fr/web/api/document/readystatechange_event/index.md delete mode 100644 files/fr/web/api/document/referrer/index.html create mode 100644 files/fr/web/api/document/referrer/index.md delete mode 100644 files/fr/web/api/document/registerelement/index.html create mode 100644 files/fr/web/api/document/registerelement/index.md delete mode 100644 files/fr/web/api/document/releasecapture/index.html create mode 100644 files/fr/web/api/document/releasecapture/index.md delete mode 100644 files/fr/web/api/document/scripts/index.html create mode 100644 files/fr/web/api/document/scripts/index.md delete mode 100644 files/fr/web/api/document/scroll_event/index.html create mode 100644 files/fr/web/api/document/scroll_event/index.md delete mode 100644 files/fr/web/api/document/selectedstylesheetset/index.html create mode 100644 files/fr/web/api/document/selectedstylesheetset/index.md delete mode 100644 files/fr/web/api/document/stylesheets/index.html create mode 100644 files/fr/web/api/document/stylesheets/index.md delete mode 100644 files/fr/web/api/document/stylesheetsets/index.html create mode 100644 files/fr/web/api/document/stylesheetsets/index.md delete mode 100644 files/fr/web/api/document/title/index.html create mode 100644 files/fr/web/api/document/title/index.md delete mode 100644 files/fr/web/api/document/tooltipnode/index.html create mode 100644 files/fr/web/api/document/tooltipnode/index.md delete mode 100644 files/fr/web/api/document/touchend_event/index.html create mode 100644 files/fr/web/api/document/touchend_event/index.md delete mode 100644 files/fr/web/api/document/transitionend_event/index.html create mode 100644 files/fr/web/api/document/transitionend_event/index.md delete mode 100644 files/fr/web/api/document/url/index.html create mode 100644 files/fr/web/api/document/url/index.md delete mode 100644 files/fr/web/api/document/visibilitystate/index.html create mode 100644 files/fr/web/api/document/visibilitystate/index.md delete mode 100644 files/fr/web/api/document/width/index.html create mode 100644 files/fr/web/api/document/width/index.md delete mode 100644 files/fr/web/api/document/write/index.html create mode 100644 files/fr/web/api/document/write/index.md delete mode 100644 files/fr/web/api/document/writeln/index.html create mode 100644 files/fr/web/api/document/writeln/index.md delete mode 100644 files/fr/web/api/document/xmlencoding/index.html create mode 100644 files/fr/web/api/document/xmlencoding/index.md delete mode 100644 files/fr/web/api/document/xmlversion/index.html create mode 100644 files/fr/web/api/document/xmlversion/index.md delete mode 100644 files/fr/web/api/document_object_model/examples/index.html create mode 100644 files/fr/web/api/document_object_model/examples/index.md delete mode 100644 files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html create mode 100644 files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md delete mode 100644 files/fr/web/api/document_object_model/index.html create mode 100644 files/fr/web/api/document_object_model/index.md delete mode 100644 files/fr/web/api/document_object_model/introduction/index.html create mode 100644 files/fr/web/api/document_object_model/introduction/index.md delete mode 100644 files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html create mode 100644 files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md delete 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/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md delete 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/example/index.md delete mode 100644 files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html create mode 100644 files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md delete mode 100644 files/fr/web/api/document_object_model/whitespace/index.html create mode 100644 files/fr/web/api/document_object_model/whitespace/index.md delete mode 100644 files/fr/web/api/documentfragment/documentfragment/index.html create mode 100644 files/fr/web/api/documentfragment/documentfragment/index.md delete mode 100644 files/fr/web/api/documentfragment/index.html create mode 100644 files/fr/web/api/documentfragment/index.md delete mode 100644 files/fr/web/api/documentfragment/queryselector/index.html create mode 100644 files/fr/web/api/documentfragment/queryselector/index.md delete mode 100644 files/fr/web/api/documentfragment/queryselectorall/index.html create mode 100644 files/fr/web/api/documentfragment/queryselectorall/index.md delete mode 100644 files/fr/web/api/documenttype/index.html create mode 100644 files/fr/web/api/documenttype/index.md delete mode 100644 files/fr/web/api/domerror/index.html create mode 100644 files/fr/web/api/domerror/index.md delete mode 100644 files/fr/web/api/domexception/index.html create mode 100644 files/fr/web/api/domexception/index.md delete mode 100644 files/fr/web/api/domhighrestimestamp/index.html create mode 100644 files/fr/web/api/domhighrestimestamp/index.md delete mode 100644 files/fr/web/api/domimplementation/createdocument/index.html create mode 100644 files/fr/web/api/domimplementation/createdocument/index.md delete mode 100644 files/fr/web/api/domimplementation/createdocumenttype/index.html create mode 100644 files/fr/web/api/domimplementation/createdocumenttype/index.md delete mode 100644 files/fr/web/api/domimplementation/createhtmldocument/index.html create mode 100644 files/fr/web/api/domimplementation/createhtmldocument/index.md delete mode 100644 files/fr/web/api/domimplementation/hasfeature/index.html create mode 100644 files/fr/web/api/domimplementation/hasfeature/index.md delete mode 100644 files/fr/web/api/domimplementation/index.html create mode 100644 files/fr/web/api/domimplementation/index.md delete mode 100644 files/fr/web/api/dommatrix/index.html create mode 100644 files/fr/web/api/dommatrix/index.md delete mode 100644 files/fr/web/api/domobject/index.html create mode 100644 files/fr/web/api/domobject/index.md delete mode 100644 files/fr/web/api/domparser/index.html create mode 100644 files/fr/web/api/domparser/index.md delete mode 100644 files/fr/web/api/dompoint/dompoint/index.html create mode 100644 files/fr/web/api/dompoint/dompoint/index.md delete mode 100644 files/fr/web/api/dompoint/index.html create mode 100644 files/fr/web/api/dompoint/index.md delete mode 100644 files/fr/web/api/dompointreadonly/index.html create mode 100644 files/fr/web/api/dompointreadonly/index.md delete mode 100644 files/fr/web/api/dompointreadonly/w/index.html create mode 100644 files/fr/web/api/dompointreadonly/w/index.md delete mode 100644 files/fr/web/api/dompointreadonly/x/index.html create mode 100644 files/fr/web/api/dompointreadonly/x/index.md delete mode 100644 files/fr/web/api/dompointreadonly/y/index.html create mode 100644 files/fr/web/api/dompointreadonly/y/index.md delete mode 100644 files/fr/web/api/dompointreadonly/z/index.html create mode 100644 files/fr/web/api/dompointreadonly/z/index.md delete mode 100644 files/fr/web/api/domquad/index.html create mode 100644 files/fr/web/api/domquad/index.md delete mode 100644 files/fr/web/api/domrect/domrect/index.html create mode 100644 files/fr/web/api/domrect/domrect/index.md delete mode 100644 files/fr/web/api/domrect/index.html create mode 100644 files/fr/web/api/domrect/index.md delete mode 100644 files/fr/web/api/domrectreadonly/bottom/index.html create mode 100644 files/fr/web/api/domrectreadonly/bottom/index.md delete mode 100644 files/fr/web/api/domrectreadonly/domrectreadonly/index.html create mode 100644 files/fr/web/api/domrectreadonly/domrectreadonly/index.md delete mode 100644 files/fr/web/api/domrectreadonly/height/index.html create mode 100644 files/fr/web/api/domrectreadonly/height/index.md delete mode 100644 files/fr/web/api/domrectreadonly/index.html create mode 100644 files/fr/web/api/domrectreadonly/index.md delete mode 100644 files/fr/web/api/domrectreadonly/left/index.html create mode 100644 files/fr/web/api/domrectreadonly/left/index.md delete mode 100644 files/fr/web/api/domrectreadonly/right/index.html create mode 100644 files/fr/web/api/domrectreadonly/right/index.md delete mode 100644 files/fr/web/api/domrectreadonly/top/index.html create mode 100644 files/fr/web/api/domrectreadonly/top/index.md delete mode 100644 files/fr/web/api/domrectreadonly/width/index.html create mode 100644 files/fr/web/api/domrectreadonly/width/index.md delete mode 100644 files/fr/web/api/domrectreadonly/x/index.html create mode 100644 files/fr/web/api/domrectreadonly/x/index.md delete mode 100644 files/fr/web/api/domrectreadonly/y/index.html create mode 100644 files/fr/web/api/domrectreadonly/y/index.md delete mode 100644 files/fr/web/api/domstring/binary/index.html create mode 100644 files/fr/web/api/domstring/binary/index.md delete mode 100644 files/fr/web/api/domstring/index.html create mode 100644 files/fr/web/api/domstring/index.md delete mode 100644 files/fr/web/api/domstringlist/index.html create mode 100644 files/fr/web/api/domstringlist/index.md delete mode 100644 files/fr/web/api/domtimestamp/index.html create mode 100644 files/fr/web/api/domtimestamp/index.md delete mode 100644 files/fr/web/api/domtokenlist/add/index.html create mode 100644 files/fr/web/api/domtokenlist/add/index.md delete mode 100644 files/fr/web/api/domtokenlist/contains/index.html create mode 100644 files/fr/web/api/domtokenlist/contains/index.md delete mode 100644 files/fr/web/api/domtokenlist/entries/index.html create mode 100644 files/fr/web/api/domtokenlist/entries/index.md delete mode 100644 files/fr/web/api/domtokenlist/foreach/index.html create mode 100644 files/fr/web/api/domtokenlist/foreach/index.md delete mode 100644 files/fr/web/api/domtokenlist/index.html create mode 100644 files/fr/web/api/domtokenlist/index.md delete mode 100644 files/fr/web/api/domtokenlist/item/index.html create mode 100644 files/fr/web/api/domtokenlist/item/index.md delete mode 100644 files/fr/web/api/domtokenlist/keys/index.html create mode 100644 files/fr/web/api/domtokenlist/keys/index.md delete mode 100644 files/fr/web/api/domtokenlist/length/index.html create mode 100644 files/fr/web/api/domtokenlist/length/index.md delete mode 100644 files/fr/web/api/domtokenlist/remove/index.html create mode 100644 files/fr/web/api/domtokenlist/remove/index.md delete mode 100644 files/fr/web/api/domtokenlist/replace/index.html create mode 100644 files/fr/web/api/domtokenlist/replace/index.md delete mode 100644 files/fr/web/api/domtokenlist/supports/index.html create mode 100644 files/fr/web/api/domtokenlist/supports/index.md delete mode 100644 files/fr/web/api/domtokenlist/toggle/index.html create mode 100644 files/fr/web/api/domtokenlist/toggle/index.md delete mode 100644 files/fr/web/api/domtokenlist/value/index.html create mode 100644 files/fr/web/api/domtokenlist/value/index.md delete mode 100644 files/fr/web/api/domtokenlist/values/index.html create mode 100644 files/fr/web/api/domtokenlist/values/index.md delete mode 100644 files/fr/web/api/effecttiming/delay/index.html create mode 100644 files/fr/web/api/effecttiming/delay/index.md delete mode 100644 files/fr/web/api/effecttiming/index.html create mode 100644 files/fr/web/api/effecttiming/index.md delete mode 100644 files/fr/web/api/element/animate/index.html create mode 100644 files/fr/web/api/element/animate/index.md delete mode 100644 files/fr/web/api/element/attachshadow/index.html create mode 100644 files/fr/web/api/element/attachshadow/index.md delete mode 100644 files/fr/web/api/element/attributes/index.html create mode 100644 files/fr/web/api/element/attributes/index.md delete mode 100644 files/fr/web/api/element/childelementcount/index.html create mode 100644 files/fr/web/api/element/childelementcount/index.md delete mode 100644 files/fr/web/api/element/classlist/index.html create mode 100644 files/fr/web/api/element/classlist/index.md delete mode 100644 files/fr/web/api/element/classname/index.html create mode 100644 files/fr/web/api/element/classname/index.md delete mode 100644 files/fr/web/api/element/click_event/index.html create mode 100644 files/fr/web/api/element/click_event/index.md delete mode 100644 files/fr/web/api/element/clientheight/index.html create mode 100644 files/fr/web/api/element/clientheight/index.md delete mode 100644 files/fr/web/api/element/clientleft/index.html create mode 100644 files/fr/web/api/element/clientleft/index.md delete mode 100644 files/fr/web/api/element/clientwidth/index.html create mode 100644 files/fr/web/api/element/clientwidth/index.md delete mode 100644 files/fr/web/api/element/closest/index.html create mode 100644 files/fr/web/api/element/closest/index.md delete mode 100644 files/fr/web/api/element/compositionend_event/index.html create mode 100644 files/fr/web/api/element/compositionend_event/index.md delete mode 100644 files/fr/web/api/element/compositionstart_event/index.html create mode 100644 files/fr/web/api/element/compositionstart_event/index.md delete mode 100644 files/fr/web/api/element/compositionupdate_event/index.html create mode 100644 files/fr/web/api/element/compositionupdate_event/index.md delete mode 100644 files/fr/web/api/element/contextmenu_event/index.html create mode 100644 files/fr/web/api/element/contextmenu_event/index.md delete mode 100644 files/fr/web/api/element/copy_event/index.html create mode 100644 files/fr/web/api/element/copy_event/index.md delete mode 100644 files/fr/web/api/element/dblclick_event/index.html create mode 100644 files/fr/web/api/element/dblclick_event/index.md delete mode 100644 files/fr/web/api/element/error_event/index.html create mode 100644 files/fr/web/api/element/error_event/index.md delete mode 100644 files/fr/web/api/element/focusin_event/index.html create mode 100644 files/fr/web/api/element/focusin_event/index.md delete mode 100644 files/fr/web/api/element/focusout_event/index.html create mode 100644 files/fr/web/api/element/focusout_event/index.md delete mode 100644 files/fr/web/api/element/getattribute/index.html create mode 100644 files/fr/web/api/element/getattribute/index.md delete mode 100644 files/fr/web/api/element/getattributenames/index.html create mode 100644 files/fr/web/api/element/getattributenames/index.md delete mode 100644 files/fr/web/api/element/getattributenode/index.html create mode 100644 files/fr/web/api/element/getattributenode/index.md delete mode 100644 files/fr/web/api/element/getattributenodens/index.html create mode 100644 files/fr/web/api/element/getattributenodens/index.md delete mode 100644 files/fr/web/api/element/getattributens/index.html create mode 100644 files/fr/web/api/element/getattributens/index.md delete mode 100644 files/fr/web/api/element/getboundingclientrect/index.html create mode 100644 files/fr/web/api/element/getboundingclientrect/index.md delete mode 100644 files/fr/web/api/element/getelementsbyclassname/index.html create mode 100644 files/fr/web/api/element/getelementsbyclassname/index.md delete mode 100644 files/fr/web/api/element/getelementsbytagname/index.html create mode 100644 files/fr/web/api/element/getelementsbytagname/index.md delete mode 100644 files/fr/web/api/element/getelementsbytagnamens/index.html create mode 100644 files/fr/web/api/element/getelementsbytagnamens/index.md delete mode 100644 files/fr/web/api/element/hasattribute/index.html create mode 100644 files/fr/web/api/element/hasattribute/index.md delete mode 100644 files/fr/web/api/element/hasattributens/index.html create mode 100644 files/fr/web/api/element/hasattributens/index.md delete mode 100644 files/fr/web/api/element/hasattributes/index.html create mode 100644 files/fr/web/api/element/hasattributes/index.md delete mode 100644 files/fr/web/api/element/id/index.html create mode 100644 files/fr/web/api/element/id/index.md delete mode 100644 files/fr/web/api/element/index.html create mode 100644 files/fr/web/api/element/index.md delete mode 100644 files/fr/web/api/element/innerhtml/index.html create mode 100644 files/fr/web/api/element/innerhtml/index.md delete mode 100644 files/fr/web/api/element/insertadjacentelement/index.html create mode 100644 files/fr/web/api/element/insertadjacentelement/index.md delete mode 100644 files/fr/web/api/element/insertadjacenthtml/index.html create mode 100644 files/fr/web/api/element/insertadjacenthtml/index.md delete mode 100644 files/fr/web/api/element/insertadjacenttext/index.html create mode 100644 files/fr/web/api/element/insertadjacenttext/index.md delete mode 100644 files/fr/web/api/element/localname/index.html create mode 100644 files/fr/web/api/element/localname/index.md delete mode 100644 files/fr/web/api/element/matches/index.html create mode 100644 files/fr/web/api/element/matches/index.md delete mode 100644 files/fr/web/api/element/mousedown_event/index.html create mode 100644 files/fr/web/api/element/mousedown_event/index.md delete mode 100644 files/fr/web/api/element/mouseenter_event/index.html create mode 100644 files/fr/web/api/element/mouseenter_event/index.md delete mode 100644 files/fr/web/api/element/mouseleave_event/index.html create mode 100644 files/fr/web/api/element/mouseleave_event/index.md delete mode 100644 files/fr/web/api/element/mousemove_event/index.html create mode 100644 files/fr/web/api/element/mousemove_event/index.md delete mode 100644 files/fr/web/api/element/mouseout_event/index.html create mode 100644 files/fr/web/api/element/mouseout_event/index.md delete mode 100644 files/fr/web/api/element/mouseover_event/index.html create mode 100644 files/fr/web/api/element/mouseover_event/index.md delete mode 100644 files/fr/web/api/element/mouseup_event/index.html create mode 100644 files/fr/web/api/element/mouseup_event/index.md delete mode 100644 files/fr/web/api/element/namespaceuri/index.html create mode 100644 files/fr/web/api/element/namespaceuri/index.md delete mode 100644 files/fr/web/api/element/outerhtml/index.html create mode 100644 files/fr/web/api/element/outerhtml/index.md delete mode 100644 files/fr/web/api/element/prefix/index.html create mode 100644 files/fr/web/api/element/prefix/index.md delete mode 100644 files/fr/web/api/element/queryselector/index.html create mode 100644 files/fr/web/api/element/queryselector/index.md delete mode 100644 files/fr/web/api/element/queryselectorall/index.html create mode 100644 files/fr/web/api/element/queryselectorall/index.md delete mode 100644 files/fr/web/api/element/releasepointercapture/index.html create mode 100644 files/fr/web/api/element/releasepointercapture/index.md delete mode 100644 files/fr/web/api/element/removeattribute/index.html create mode 100644 files/fr/web/api/element/removeattribute/index.md delete mode 100644 files/fr/web/api/element/removeattributenode/index.html create mode 100644 files/fr/web/api/element/removeattributenode/index.md delete mode 100644 files/fr/web/api/element/removeattributens/index.html create mode 100644 files/fr/web/api/element/removeattributens/index.md delete mode 100644 files/fr/web/api/element/requestfullscreen/index.html create mode 100644 files/fr/web/api/element/requestfullscreen/index.md delete mode 100644 files/fr/web/api/element/scrollheight/index.html create mode 100644 files/fr/web/api/element/scrollheight/index.md delete mode 100644 files/fr/web/api/element/scrollintoview/index.html create mode 100644 files/fr/web/api/element/scrollintoview/index.md delete mode 100644 files/fr/web/api/element/scrollintoviewifneeded/index.html create mode 100644 files/fr/web/api/element/scrollintoviewifneeded/index.md delete mode 100644 files/fr/web/api/element/scrollleft/index.html create mode 100644 files/fr/web/api/element/scrollleft/index.md delete mode 100644 files/fr/web/api/element/scrollleftmax/index.html create mode 100644 files/fr/web/api/element/scrollleftmax/index.md delete mode 100644 files/fr/web/api/element/scrollto/index.html create mode 100644 files/fr/web/api/element/scrollto/index.md delete mode 100644 files/fr/web/api/element/scrolltop/index.html create mode 100644 files/fr/web/api/element/scrolltop/index.md delete mode 100644 files/fr/web/api/element/scrollwidth/index.html create mode 100644 files/fr/web/api/element/scrollwidth/index.md delete mode 100644 files/fr/web/api/element/select_event/index.html create mode 100644 files/fr/web/api/element/select_event/index.md delete mode 100644 files/fr/web/api/element/setattribute/index.html create mode 100644 files/fr/web/api/element/setattribute/index.md delete mode 100644 files/fr/web/api/element/setattributenode/index.html create mode 100644 files/fr/web/api/element/setattributenode/index.md delete mode 100644 files/fr/web/api/element/setattributenodens/index.html create mode 100644 files/fr/web/api/element/setattributenodens/index.md delete mode 100644 files/fr/web/api/element/setattributens/index.html create mode 100644 files/fr/web/api/element/setattributens/index.md delete mode 100644 files/fr/web/api/element/setcapture/index.html create mode 100644 files/fr/web/api/element/setcapture/index.md delete mode 100644 files/fr/web/api/element/setpointercapture/index.html create mode 100644 files/fr/web/api/element/setpointercapture/index.md delete mode 100644 files/fr/web/api/element/tagname/index.html create mode 100644 files/fr/web/api/element/tagname/index.md delete mode 100644 files/fr/web/api/encoding_api/index.html create mode 100644 files/fr/web/api/encoding_api/index.md delete mode 100644 files/fr/web/api/errorevent/index.html create mode 100644 files/fr/web/api/errorevent/index.md delete mode 100644 files/fr/web/api/event/bubbles/index.html create mode 100644 files/fr/web/api/event/bubbles/index.md delete mode 100644 files/fr/web/api/event/cancelable/index.html create mode 100644 files/fr/web/api/event/cancelable/index.md delete mode 100644 files/fr/web/api/event/cancelbubble/index.html create mode 100644 files/fr/web/api/event/cancelbubble/index.md delete mode 100644 files/fr/web/api/event/comparison_of_event_targets/index.html create mode 100644 files/fr/web/api/event/comparison_of_event_targets/index.md delete mode 100644 files/fr/web/api/event/currenttarget/index.html create mode 100644 files/fr/web/api/event/currenttarget/index.md delete mode 100644 files/fr/web/api/event/defaultprevented/index.html create mode 100644 files/fr/web/api/event/defaultprevented/index.md delete mode 100644 files/fr/web/api/event/event/index.html create mode 100644 files/fr/web/api/event/event/index.md delete mode 100644 files/fr/web/api/event/eventphase/index.html create mode 100644 files/fr/web/api/event/eventphase/index.md delete mode 100644 files/fr/web/api/event/explicitoriginaltarget/index.html create mode 100644 files/fr/web/api/event/explicitoriginaltarget/index.md delete mode 100644 files/fr/web/api/event/index.html create mode 100644 files/fr/web/api/event/index.md delete mode 100644 files/fr/web/api/event/initevent/index.html create mode 100644 files/fr/web/api/event/initevent/index.md delete mode 100644 files/fr/web/api/event/istrusted/index.html create mode 100644 files/fr/web/api/event/istrusted/index.md delete mode 100644 files/fr/web/api/event/originaltarget/index.html create mode 100644 files/fr/web/api/event/originaltarget/index.md delete mode 100644 files/fr/web/api/event/preventdefault/index.html create mode 100644 files/fr/web/api/event/preventdefault/index.md delete mode 100644 files/fr/web/api/event/returnvalue/index.html create mode 100644 files/fr/web/api/event/returnvalue/index.md delete mode 100644 files/fr/web/api/event/srcelement/index.html create mode 100644 files/fr/web/api/event/srcelement/index.md delete mode 100644 files/fr/web/api/event/stopimmediatepropagation/index.html create mode 100644 files/fr/web/api/event/stopimmediatepropagation/index.md delete mode 100644 files/fr/web/api/event/stoppropagation/index.html create mode 100644 files/fr/web/api/event/stoppropagation/index.md delete mode 100644 files/fr/web/api/event/target/index.html create mode 100644 files/fr/web/api/event/target/index.md delete mode 100644 files/fr/web/api/event/timestamp/index.html create mode 100644 files/fr/web/api/event/timestamp/index.md delete mode 100644 files/fr/web/api/event/type/index.html create mode 100644 files/fr/web/api/event/type/index.md delete mode 100644 files/fr/web/api/eventlistener/index.html create mode 100644 files/fr/web/api/eventlistener/index.md delete mode 100644 files/fr/web/api/eventsource/close/index.html create mode 100644 files/fr/web/api/eventsource/close/index.md delete mode 100644 files/fr/web/api/eventsource/index.html create mode 100644 files/fr/web/api/eventsource/index.md delete mode 100644 files/fr/web/api/eventsource/onopen/index.html create mode 100644 files/fr/web/api/eventsource/onopen/index.md delete mode 100644 files/fr/web/api/eventtarget/addeventlistener/index.html create mode 100644 files/fr/web/api/eventtarget/addeventlistener/index.md delete mode 100644 files/fr/web/api/eventtarget/dispatchevent/index.html create mode 100644 files/fr/web/api/eventtarget/dispatchevent/index.md delete mode 100644 files/fr/web/api/eventtarget/eventtarget/index.html create mode 100644 files/fr/web/api/eventtarget/eventtarget/index.md delete mode 100644 files/fr/web/api/eventtarget/index.html create mode 100644 files/fr/web/api/eventtarget/index.md delete mode 100644 files/fr/web/api/eventtarget/removeeventlistener/index.html create mode 100644 files/fr/web/api/eventtarget/removeeventlistener/index.md delete mode 100644 files/fr/web/api/extendableevent/extendableevent/index.html create mode 100644 files/fr/web/api/extendableevent/extendableevent/index.md delete mode 100644 files/fr/web/api/extendableevent/index.html create mode 100644 files/fr/web/api/extendableevent/index.md delete mode 100644 files/fr/web/api/extendablemessageevent/data/index.html create mode 100644 files/fr/web/api/extendablemessageevent/data/index.md delete mode 100644 files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html create mode 100644 files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md delete mode 100644 files/fr/web/api/extendablemessageevent/index.html create mode 100644 files/fr/web/api/extendablemessageevent/index.md delete mode 100644 files/fr/web/api/extendablemessageevent/lasteventid/index.html create mode 100644 files/fr/web/api/extendablemessageevent/lasteventid/index.md delete mode 100644 files/fr/web/api/extendablemessageevent/origin/index.html create mode 100644 files/fr/web/api/extendablemessageevent/origin/index.md delete mode 100644 files/fr/web/api/extendablemessageevent/ports/index.html create mode 100644 files/fr/web/api/extendablemessageevent/ports/index.md delete mode 100644 files/fr/web/api/featurepolicy/allowedfeatures/index.html create mode 100644 files/fr/web/api/featurepolicy/allowedfeatures/index.md delete mode 100644 files/fr/web/api/featurepolicy/allowsfeature/index.html create mode 100644 files/fr/web/api/featurepolicy/allowsfeature/index.md delete mode 100644 files/fr/web/api/featurepolicy/features/index.html create mode 100644 files/fr/web/api/featurepolicy/features/index.md delete mode 100644 files/fr/web/api/featurepolicy/getallowlistforfeature/index.html create mode 100644 files/fr/web/api/featurepolicy/getallowlistforfeature/index.md delete mode 100644 files/fr/web/api/featurepolicy/index.html create mode 100644 files/fr/web/api/featurepolicy/index.md delete mode 100644 files/fr/web/api/federatedcredential/federatedcredential/index.html create mode 100644 files/fr/web/api/federatedcredential/federatedcredential/index.md delete mode 100644 files/fr/web/api/federatedcredential/index.html create mode 100644 files/fr/web/api/federatedcredential/index.md delete mode 100644 files/fr/web/api/federatedcredential/provider/index.html create mode 100644 files/fr/web/api/federatedcredential/provider/index.md delete mode 100644 files/fr/web/api/fetch/index.html create mode 100644 files/fr/web/api/fetch/index.md delete mode 100644 files/fr/web/api/fetch_api/basic_concepts/index.html create mode 100644 files/fr/web/api/fetch_api/basic_concepts/index.md delete mode 100644 files/fr/web/api/fetch_api/index.html create mode 100644 files/fr/web/api/fetch_api/index.md delete mode 100644 files/fr/web/api/fetch_api/using_fetch/index.html create mode 100644 files/fr/web/api/fetch_api/using_fetch/index.md delete mode 100644 files/fr/web/api/fetchevent/index.html create mode 100644 files/fr/web/api/fetchevent/index.md delete mode 100644 files/fr/web/api/file/index.html create mode 100644 files/fr/web/api/file/index.md delete mode 100644 files/fr/web/api/file/name/index.html create mode 100644 files/fr/web/api/file/name/index.md delete mode 100644 files/fr/web/api/file/using_files_from_web_applications/index.html create mode 100644 files/fr/web/api/file/using_files_from_web_applications/index.md delete mode 100644 files/fr/web/api/file_and_directory_entries_api/index.html create mode 100644 files/fr/web/api/file_and_directory_entries_api/index.md delete mode 100644 files/fr/web/api/filelist/index.html create mode 100644 files/fr/web/api/filelist/index.md delete mode 100644 files/fr/web/api/filereader/filereader/index.html create mode 100644 files/fr/web/api/filereader/filereader/index.md delete mode 100644 files/fr/web/api/filereader/index.html create mode 100644 files/fr/web/api/filereader/index.md delete mode 100644 files/fr/web/api/filereader/readasarraybuffer/index.html create mode 100644 files/fr/web/api/filereader/readasarraybuffer/index.md delete mode 100644 files/fr/web/api/filereader/readasbinarystring/index.html create mode 100644 files/fr/web/api/filereader/readasbinarystring/index.md delete mode 100644 files/fr/web/api/filereader/readasdataurl/index.html create mode 100644 files/fr/web/api/filereader/readasdataurl/index.md delete mode 100644 files/fr/web/api/filereader/readastext/index.html create mode 100644 files/fr/web/api/filereader/readastext/index.md delete mode 100644 files/fr/web/api/filerequest/index.html create mode 100644 files/fr/web/api/filerequest/index.md delete mode 100644 files/fr/web/api/filerequest/lockedfile/index.html create mode 100644 files/fr/web/api/filerequest/lockedfile/index.md delete mode 100644 files/fr/web/api/filerequest/onprogress/index.html create mode 100644 files/fr/web/api/filerequest/onprogress/index.md delete mode 100644 files/fr/web/api/focusevent/index.html create mode 100644 files/fr/web/api/focusevent/index.md delete mode 100644 files/fr/web/api/force_touch_events/index.html create mode 100644 files/fr/web/api/force_touch_events/index.md delete mode 100644 files/fr/web/api/formdata/append/index.html create mode 100644 files/fr/web/api/formdata/append/index.md delete mode 100644 files/fr/web/api/formdata/delete/index.html create mode 100644 files/fr/web/api/formdata/delete/index.md delete mode 100644 files/fr/web/api/formdata/entries/index.html create mode 100644 files/fr/web/api/formdata/entries/index.md delete mode 100644 files/fr/web/api/formdata/formdata/index.html create mode 100644 files/fr/web/api/formdata/formdata/index.md delete mode 100644 files/fr/web/api/formdata/get/index.html create mode 100644 files/fr/web/api/formdata/get/index.md delete mode 100644 files/fr/web/api/formdata/getall/index.html create mode 100644 files/fr/web/api/formdata/getall/index.md delete mode 100644 files/fr/web/api/formdata/has/index.html create mode 100644 files/fr/web/api/formdata/has/index.md delete mode 100644 files/fr/web/api/formdata/index.html create mode 100644 files/fr/web/api/formdata/index.md delete mode 100644 files/fr/web/api/formdata/keys/index.html create mode 100644 files/fr/web/api/formdata/keys/index.md delete mode 100644 files/fr/web/api/formdata/set/index.html create mode 100644 files/fr/web/api/formdata/set/index.md delete mode 100644 files/fr/web/api/formdata/using_formdata_objects/index.html create mode 100644 files/fr/web/api/formdata/using_formdata_objects/index.md delete mode 100644 files/fr/web/api/formdata/values/index.html create mode 100644 files/fr/web/api/formdata/values/index.md delete mode 100644 files/fr/web/api/fullscreen_api/index.html create mode 100644 files/fr/web/api/fullscreen_api/index.md delete mode 100644 files/fr/web/api/gainnode/index.html create mode 100644 files/fr/web/api/gainnode/index.md delete mode 100644 files/fr/web/api/gamepad/index.html create mode 100644 files/fr/web/api/gamepad/index.md delete mode 100644 files/fr/web/api/gamepad_api/index.html create mode 100644 files/fr/web/api/gamepad_api/index.md delete mode 100644 files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html create mode 100644 files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md delete mode 100644 files/fr/web/api/geolocation/clearwatch/index.html create mode 100644 files/fr/web/api/geolocation/clearwatch/index.md delete mode 100644 files/fr/web/api/geolocation/getcurrentposition/index.html create mode 100644 files/fr/web/api/geolocation/getcurrentposition/index.md delete mode 100644 files/fr/web/api/geolocation/index.html create mode 100644 files/fr/web/api/geolocation/index.md delete mode 100644 files/fr/web/api/geolocation/watchposition/index.html create mode 100644 files/fr/web/api/geolocation/watchposition/index.md delete mode 100644 files/fr/web/api/geolocation_api/index.html create mode 100644 files/fr/web/api/geolocation_api/index.md delete mode 100644 files/fr/web/api/geolocationcoordinates/index.html create mode 100644 files/fr/web/api/geolocationcoordinates/index.md delete mode 100644 files/fr/web/api/geolocationposition/index.html create mode 100644 files/fr/web/api/geolocationposition/index.md delete mode 100644 files/fr/web/api/geolocationposition/timestamp/index.html create mode 100644 files/fr/web/api/geolocationposition/timestamp/index.md delete mode 100644 files/fr/web/api/geolocationpositionerror/index.html create mode 100644 files/fr/web/api/geolocationpositionerror/index.md delete mode 100644 files/fr/web/api/gestureevent/index.html create mode 100644 files/fr/web/api/gestureevent/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/index.html create mode 100644 files/fr/web/api/globaleventhandlers/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onabort/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onabort/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onauxclick/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onauxclick/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onblur/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onblur/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onchange/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onchange/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onclick/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onclose/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onclose/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/ondblclick/index.html create mode 100644 files/fr/web/api/globaleventhandlers/ondblclick/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onerror/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onerror/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onfocus/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onfocus/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/ongotpointercapture/index.html create mode 100644 files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onkeydown/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onkeydown/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onkeypress/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onkeypress/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onkeyup/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onkeyup/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onload/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onload/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onloadend/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onloadend/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onloadstart/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onloadstart/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onmousedown/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onmousedown/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onmousemove/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onmousemove/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onmouseout/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onmouseout/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onmouseover/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onmouseover/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onmouseup/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onmouseup/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onreset/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onreset/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onresize/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onscroll/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onscroll/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onselect/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onselect/index.md delete mode 100644 files/fr/web/api/globaleventhandlers/onwheel/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onwheel/index.md delete mode 100644 files/fr/web/api/headers/index.html create mode 100644 files/fr/web/api/headers/index.md delete mode 100644 files/fr/web/api/history/index.html create mode 100644 files/fr/web/api/history/index.md delete mode 100644 files/fr/web/api/history/length/index.html create mode 100644 files/fr/web/api/history/length/index.md delete mode 100644 files/fr/web/api/history_api/example/index.html create mode 100644 files/fr/web/api/history_api/example/index.md delete mode 100644 files/fr/web/api/history_api/index.html create mode 100644 files/fr/web/api/history_api/index.md delete 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/drag_operations/index.md delete mode 100644 files/fr/web/api/html_drag_and_drop_api/index.html create mode 100644 files/fr/web/api/html_drag_and_drop_api/index.md delete mode 100644 files/fr/web/api/htmlbaseelement/index.html create mode 100644 files/fr/web/api/htmlbaseelement/index.md delete mode 100644 files/fr/web/api/htmlbasefontelement/index.html create mode 100644 files/fr/web/api/htmlbasefontelement/index.md delete mode 100644 files/fr/web/api/htmlbodyelement/index.html create mode 100644 files/fr/web/api/htmlbodyelement/index.md delete mode 100644 files/fr/web/api/htmlbrelement/index.html create mode 100644 files/fr/web/api/htmlbrelement/index.md delete mode 100644 files/fr/web/api/htmlbuttonelement/index.html create mode 100644 files/fr/web/api/htmlbuttonelement/index.md delete mode 100644 files/fr/web/api/htmlbuttonelement/labels/index.html create mode 100644 files/fr/web/api/htmlbuttonelement/labels/index.md delete mode 100644 files/fr/web/api/htmlcanvaselement/getcontext/index.html create mode 100644 files/fr/web/api/htmlcanvaselement/getcontext/index.md delete mode 100644 files/fr/web/api/htmlcanvaselement/height/index.html create mode 100644 files/fr/web/api/htmlcanvaselement/height/index.md delete mode 100644 files/fr/web/api/htmlcanvaselement/index.html create mode 100644 files/fr/web/api/htmlcanvaselement/index.md delete mode 100644 files/fr/web/api/htmlcollection/index.html create mode 100644 files/fr/web/api/htmlcollection/index.md delete mode 100644 files/fr/web/api/htmlcollection/item/index.html create mode 100644 files/fr/web/api/htmlcollection/item/index.md delete mode 100644 files/fr/web/api/htmlcontentelement/getdistributednodes/index.html create mode 100644 files/fr/web/api/htmlcontentelement/getdistributednodes/index.md delete mode 100644 files/fr/web/api/htmlcontentelement/index.html create mode 100644 files/fr/web/api/htmlcontentelement/index.md delete mode 100644 files/fr/web/api/htmlcontentelement/select/index.html create mode 100644 files/fr/web/api/htmlcontentelement/select/index.md delete mode 100644 files/fr/web/api/htmldialogelement/close_event/index.html create mode 100644 files/fr/web/api/htmldialogelement/close_event/index.md delete mode 100644 files/fr/web/api/htmldialogelement/index.html create mode 100644 files/fr/web/api/htmldialogelement/index.md delete mode 100644 files/fr/web/api/htmldivelement/index.html create mode 100644 files/fr/web/api/htmldivelement/index.md delete mode 100644 files/fr/web/api/htmldocument/index.html create mode 100644 files/fr/web/api/htmldocument/index.md delete mode 100644 files/fr/web/api/htmlelement/accesskey/index.html create mode 100644 files/fr/web/api/htmlelement/accesskey/index.md delete mode 100644 files/fr/web/api/htmlelement/animationend_event/index.html create mode 100644 files/fr/web/api/htmlelement/animationend_event/index.md delete mode 100644 files/fr/web/api/htmlelement/animationiteration_event/index.html create mode 100644 files/fr/web/api/htmlelement/animationiteration_event/index.md delete mode 100644 files/fr/web/api/htmlelement/animationstart_event/index.html create mode 100644 files/fr/web/api/htmlelement/animationstart_event/index.md delete mode 100644 files/fr/web/api/htmlelement/beforeinput_event/index.html create mode 100644 files/fr/web/api/htmlelement/beforeinput_event/index.md delete mode 100644 files/fr/web/api/htmlelement/change_event/index.html create mode 100644 files/fr/web/api/htmlelement/change_event/index.md delete mode 100644 files/fr/web/api/htmlelement/click/index.html create mode 100644 files/fr/web/api/htmlelement/click/index.md delete mode 100644 files/fr/web/api/htmlelement/contenteditable/index.html create mode 100644 files/fr/web/api/htmlelement/contenteditable/index.md delete mode 100644 files/fr/web/api/htmlelement/dir/index.html create mode 100644 files/fr/web/api/htmlelement/dir/index.md delete mode 100644 files/fr/web/api/htmlelement/hidden/index.html create mode 100644 files/fr/web/api/htmlelement/hidden/index.md delete mode 100644 files/fr/web/api/htmlelement/index.html create mode 100644 files/fr/web/api/htmlelement/index.md delete mode 100644 files/fr/web/api/htmlelement/innertext/index.html create mode 100644 files/fr/web/api/htmlelement/innertext/index.md delete mode 100644 files/fr/web/api/htmlelement/input_event/index.html create mode 100644 files/fr/web/api/htmlelement/input_event/index.md delete mode 100644 files/fr/web/api/htmlelement/iscontenteditable/index.html create mode 100644 files/fr/web/api/htmlelement/iscontenteditable/index.md delete mode 100644 files/fr/web/api/htmlelement/lang/index.html create mode 100644 files/fr/web/api/htmlelement/lang/index.md delete mode 100644 files/fr/web/api/htmlelement/offsetheight/index.html create mode 100644 files/fr/web/api/htmlelement/offsetheight/index.md delete mode 100644 files/fr/web/api/htmlelement/offsetleft/index.html create mode 100644 files/fr/web/api/htmlelement/offsetleft/index.md delete mode 100644 files/fr/web/api/htmlelement/offsetparent/index.html create mode 100644 files/fr/web/api/htmlelement/offsetparent/index.md delete mode 100644 files/fr/web/api/htmlelement/offsettop/index.html create mode 100644 files/fr/web/api/htmlelement/offsettop/index.md delete mode 100644 files/fr/web/api/htmlelement/offsetwidth/index.html create mode 100644 files/fr/web/api/htmlelement/offsetwidth/index.md delete mode 100644 files/fr/web/api/htmlelement/outertext/index.html create mode 100644 files/fr/web/api/htmlelement/outertext/index.md delete mode 100644 files/fr/web/api/htmlelement/title/index.html create mode 100644 files/fr/web/api/htmlelement/title/index.md delete mode 100644 files/fr/web/api/htmlelement/transitionend_event/index.html create mode 100644 files/fr/web/api/htmlelement/transitionend_event/index.md delete mode 100644 files/fr/web/api/htmlformcontrolscollection/index.html create mode 100644 files/fr/web/api/htmlformcontrolscollection/index.md delete mode 100644 files/fr/web/api/htmlformelement/acceptcharset/index.html create mode 100644 files/fr/web/api/htmlformelement/acceptcharset/index.md delete mode 100644 files/fr/web/api/htmlformelement/action/index.html create mode 100644 files/fr/web/api/htmlformelement/action/index.md delete mode 100644 files/fr/web/api/htmlformelement/elements/index.html create mode 100644 files/fr/web/api/htmlformelement/elements/index.md delete mode 100644 files/fr/web/api/htmlformelement/encoding/index.html create mode 100644 files/fr/web/api/htmlformelement/encoding/index.md delete mode 100644 files/fr/web/api/htmlformelement/enctype/index.html create mode 100644 files/fr/web/api/htmlformelement/enctype/index.md delete mode 100644 files/fr/web/api/htmlformelement/index.html create mode 100644 files/fr/web/api/htmlformelement/index.md delete mode 100644 files/fr/web/api/htmlformelement/length/index.html create mode 100644 files/fr/web/api/htmlformelement/length/index.md delete mode 100644 files/fr/web/api/htmlformelement/method/index.html create mode 100644 files/fr/web/api/htmlformelement/method/index.md delete mode 100644 files/fr/web/api/htmlformelement/name/index.html create mode 100644 files/fr/web/api/htmlformelement/name/index.md delete mode 100644 files/fr/web/api/htmlformelement/reportvalidity/index.html create mode 100644 files/fr/web/api/htmlformelement/reportvalidity/index.md delete mode 100644 files/fr/web/api/htmlformelement/reset/index.html create mode 100644 files/fr/web/api/htmlformelement/reset/index.md delete mode 100644 files/fr/web/api/htmlformelement/submit/index.html create mode 100644 files/fr/web/api/htmlformelement/submit/index.md delete mode 100644 files/fr/web/api/htmlformelement/submit_event/index.html create mode 100644 files/fr/web/api/htmlformelement/submit_event/index.md delete mode 100644 files/fr/web/api/htmlformelement/target/index.html create mode 100644 files/fr/web/api/htmlformelement/target/index.md delete mode 100644 files/fr/web/api/htmlframesetelement/index.html create mode 100644 files/fr/web/api/htmlframesetelement/index.md delete mode 100644 files/fr/web/api/htmliframeelement/allowpaymentrequest/index.html create mode 100644 files/fr/web/api/htmliframeelement/allowpaymentrequest/index.md delete mode 100644 files/fr/web/api/htmliframeelement/contentdocument/index.html create mode 100644 files/fr/web/api/htmliframeelement/contentdocument/index.md delete mode 100644 files/fr/web/api/htmliframeelement/contentwindow/index.html create mode 100644 files/fr/web/api/htmliframeelement/contentwindow/index.md delete mode 100644 files/fr/web/api/htmliframeelement/csp/index.html create mode 100644 files/fr/web/api/htmliframeelement/csp/index.md delete mode 100644 files/fr/web/api/htmliframeelement/featurepolicy/index.html create mode 100644 files/fr/web/api/htmliframeelement/featurepolicy/index.md delete mode 100644 files/fr/web/api/htmliframeelement/index.html create mode 100644 files/fr/web/api/htmliframeelement/index.md delete mode 100644 files/fr/web/api/htmlimageelement/image/index.html create mode 100644 files/fr/web/api/htmlimageelement/image/index.md delete mode 100644 files/fr/web/api/htmlimageelement/index.html create mode 100644 files/fr/web/api/htmlimageelement/index.md delete mode 100644 files/fr/web/api/htmlinputelement/index.html create mode 100644 files/fr/web/api/htmlinputelement/index.md delete mode 100644 files/fr/web/api/htmlinputelement/labels/index.html create mode 100644 files/fr/web/api/htmlinputelement/labels/index.md delete mode 100644 files/fr/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/fr/web/api/htmlmediaelement/abort_event/index.md delete mode 100644 files/fr/web/api/htmlmediaelement/canplay_event/index.html create mode 100644 files/fr/web/api/htmlmediaelement/canplay_event/index.md delete mode 100644 files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html create mode 100644 files/fr/web/api/htmlmediaelement/canplaythrough_event/index.md delete mode 100644 files/fr/web/api/htmlmediaelement/capturestream/index.html create mode 100644 files/fr/web/api/htmlmediaelement/capturestream/index.md delete mode 100644 files/fr/web/api/htmlmediaelement/durationchange_event/index.html create mode 100644 files/fr/web/api/htmlmediaelement/durationchange_event/index.md delete mode 100644 files/fr/web/api/htmlmediaelement/emptied_event/index.html create mode 100644 files/fr/web/api/htmlmediaelement/emptied_event/index.md delete mode 100644 files/fr/web/api/htmlmediaelement/ended_event/index.html create mode 100644 files/fr/web/api/htmlmediaelement/ended_event/index.md delete mode 100644 files/fr/web/api/htmlmediaelement/index.html create mode 100644 files/fr/web/api/htmlmediaelement/index.md delete mode 100644 files/fr/web/api/htmlmediaelement/play/index.html create mode 100644 files/fr/web/api/htmlmediaelement/play/index.md delete mode 100644 files/fr/web/api/htmlmediaelement/volume/index.html create mode 100644 files/fr/web/api/htmlmediaelement/volume/index.md delete mode 100644 files/fr/web/api/htmloptionelement/index.html create mode 100644 files/fr/web/api/htmloptionelement/index.md delete mode 100644 files/fr/web/api/htmloptionelement/option/index.html create mode 100644 files/fr/web/api/htmloptionelement/option/index.md delete mode 100644 files/fr/web/api/htmlquoteelement/index.html create mode 100644 files/fr/web/api/htmlquoteelement/index.md delete mode 100644 files/fr/web/api/htmlselectelement/index.html create mode 100644 files/fr/web/api/htmlselectelement/index.md delete mode 100644 files/fr/web/api/htmlselectelement/remove/index.html create mode 100644 files/fr/web/api/htmlselectelement/remove/index.md delete mode 100644 files/fr/web/api/htmlselectelement/selectedindex/index.html create mode 100644 files/fr/web/api/htmlselectelement/selectedindex/index.md delete mode 100644 files/fr/web/api/htmlselectelement/setcustomvalidity/index.html create mode 100644 files/fr/web/api/htmlselectelement/setcustomvalidity/index.md delete mode 100644 files/fr/web/api/htmlshadowelement/index.html create mode 100644 files/fr/web/api/htmlshadowelement/index.md delete mode 100644 files/fr/web/api/htmlspanelement/index.html create mode 100644 files/fr/web/api/htmlspanelement/index.md delete mode 100644 files/fr/web/api/htmlstyleelement/index.html create mode 100644 files/fr/web/api/htmlstyleelement/index.md delete mode 100644 files/fr/web/api/htmltablecellelement/index.html create mode 100644 files/fr/web/api/htmltablecellelement/index.md delete mode 100644 files/fr/web/api/htmltableelement/caption/index.html create mode 100644 files/fr/web/api/htmltableelement/caption/index.md delete mode 100644 files/fr/web/api/htmltableelement/index.html create mode 100644 files/fr/web/api/htmltableelement/index.md delete mode 100644 files/fr/web/api/htmltableelement/insertrow/index.html create mode 100644 files/fr/web/api/htmltableelement/insertrow/index.md delete mode 100644 files/fr/web/api/htmltablerowelement/index.html create mode 100644 files/fr/web/api/htmltablerowelement/index.md delete mode 100644 files/fr/web/api/htmltablerowelement/insertcell/index.html create mode 100644 files/fr/web/api/htmltablerowelement/insertcell/index.md delete mode 100644 files/fr/web/api/htmltimeelement/datetime/index.html create mode 100644 files/fr/web/api/htmltimeelement/datetime/index.md delete mode 100644 files/fr/web/api/htmltimeelement/index.html create mode 100644 files/fr/web/api/htmltimeelement/index.md delete mode 100644 files/fr/web/api/htmlunknownelement/index.html create mode 100644 files/fr/web/api/htmlunknownelement/index.md delete mode 100644 files/fr/web/api/htmlvideoelement/index.html create mode 100644 files/fr/web/api/htmlvideoelement/index.md delete mode 100644 files/fr/web/api/idbcursor/advance/index.html create mode 100644 files/fr/web/api/idbcursor/advance/index.md delete mode 100644 files/fr/web/api/idbcursor/continue/index.html create mode 100644 files/fr/web/api/idbcursor/continue/index.md delete mode 100644 files/fr/web/api/idbcursor/index.html create mode 100644 files/fr/web/api/idbcursor/index.md delete mode 100644 files/fr/web/api/idbdatabase/close/index.html create mode 100644 files/fr/web/api/idbdatabase/close/index.md delete mode 100644 files/fr/web/api/idbdatabase/createobjectstore/index.html create mode 100644 files/fr/web/api/idbdatabase/createobjectstore/index.md delete mode 100644 files/fr/web/api/idbdatabase/deleteobjectstore/index.html create mode 100644 files/fr/web/api/idbdatabase/deleteobjectstore/index.md delete mode 100644 files/fr/web/api/idbdatabase/index.html create mode 100644 files/fr/web/api/idbdatabase/index.md delete mode 100644 files/fr/web/api/idbdatabase/name/index.html create mode 100644 files/fr/web/api/idbdatabase/name/index.md delete mode 100644 files/fr/web/api/idbdatabase/objectstorenames/index.html create mode 100644 files/fr/web/api/idbdatabase/objectstorenames/index.md delete mode 100644 files/fr/web/api/idbdatabase/onabort/index.html create mode 100644 files/fr/web/api/idbdatabase/onabort/index.md delete mode 100644 files/fr/web/api/idbdatabase/onerror/index.html create mode 100644 files/fr/web/api/idbdatabase/onerror/index.md delete mode 100644 files/fr/web/api/idbdatabase/onversionchange/index.html create mode 100644 files/fr/web/api/idbdatabase/onversionchange/index.md delete mode 100644 files/fr/web/api/idbdatabase/transaction/index.html create mode 100644 files/fr/web/api/idbdatabase/transaction/index.md delete mode 100644 files/fr/web/api/idbdatabase/version/index.html create mode 100644 files/fr/web/api/idbdatabase/version/index.md delete mode 100644 files/fr/web/api/idbenvironment/index.html create mode 100644 files/fr/web/api/idbenvironment/index.md delete mode 100644 files/fr/web/api/idbfactory/cmp/index.html create mode 100644 files/fr/web/api/idbfactory/cmp/index.md delete mode 100644 files/fr/web/api/idbfactory/deletedatabase/index.html create mode 100644 files/fr/web/api/idbfactory/deletedatabase/index.md delete mode 100644 files/fr/web/api/idbfactory/index.html create mode 100644 files/fr/web/api/idbfactory/index.md delete mode 100644 files/fr/web/api/idbfactory/open/index.html create mode 100644 files/fr/web/api/idbfactory/open/index.md delete mode 100644 files/fr/web/api/idbindex/count/index.html create mode 100644 files/fr/web/api/idbindex/count/index.md delete mode 100644 files/fr/web/api/idbindex/get/index.html create mode 100644 files/fr/web/api/idbindex/get/index.md delete mode 100644 files/fr/web/api/idbindex/getall/index.html create mode 100644 files/fr/web/api/idbindex/getall/index.md delete mode 100644 files/fr/web/api/idbindex/getallkeys/index.html create mode 100644 files/fr/web/api/idbindex/getallkeys/index.md delete mode 100644 files/fr/web/api/idbindex/getkey/index.html create mode 100644 files/fr/web/api/idbindex/getkey/index.md delete mode 100644 files/fr/web/api/idbindex/index.html create mode 100644 files/fr/web/api/idbindex/index.md delete mode 100644 files/fr/web/api/idbindex/isautolocale/index.html create mode 100644 files/fr/web/api/idbindex/isautolocale/index.md delete mode 100644 files/fr/web/api/idbindex/keypath/index.html create mode 100644 files/fr/web/api/idbindex/keypath/index.md delete mode 100644 files/fr/web/api/idbindex/locale/index.html create mode 100644 files/fr/web/api/idbindex/locale/index.md delete mode 100644 files/fr/web/api/idbindex/multientry/index.html create mode 100644 files/fr/web/api/idbindex/multientry/index.md delete mode 100644 files/fr/web/api/idbindex/name/index.html create mode 100644 files/fr/web/api/idbindex/name/index.md delete mode 100644 files/fr/web/api/idbindex/objectstore/index.html create mode 100644 files/fr/web/api/idbindex/objectstore/index.md delete mode 100644 files/fr/web/api/idbindex/opencursor/index.html create mode 100644 files/fr/web/api/idbindex/opencursor/index.md delete mode 100644 files/fr/web/api/idbindex/openkeycursor/index.html create mode 100644 files/fr/web/api/idbindex/openkeycursor/index.md delete mode 100644 files/fr/web/api/idbindex/unique/index.html create mode 100644 files/fr/web/api/idbindex/unique/index.md delete mode 100644 files/fr/web/api/idbkeyrange/bound/index.html create mode 100644 files/fr/web/api/idbkeyrange/bound/index.md delete mode 100644 files/fr/web/api/idbkeyrange/includes/index.html create mode 100644 files/fr/web/api/idbkeyrange/includes/index.md delete mode 100644 files/fr/web/api/idbkeyrange/index.html create mode 100644 files/fr/web/api/idbkeyrange/index.md delete mode 100644 files/fr/web/api/idbkeyrange/lower/index.html create mode 100644 files/fr/web/api/idbkeyrange/lower/index.md delete mode 100644 files/fr/web/api/idbkeyrange/lowerbound/index.html create mode 100644 files/fr/web/api/idbkeyrange/lowerbound/index.md delete mode 100644 files/fr/web/api/idbkeyrange/loweropen/index.html create mode 100644 files/fr/web/api/idbkeyrange/loweropen/index.md delete mode 100644 files/fr/web/api/idbkeyrange/only/index.html create mode 100644 files/fr/web/api/idbkeyrange/only/index.md delete mode 100644 files/fr/web/api/idbkeyrange/upper/index.html create mode 100644 files/fr/web/api/idbkeyrange/upper/index.md delete mode 100644 files/fr/web/api/idbkeyrange/upperbound/index.html create mode 100644 files/fr/web/api/idbkeyrange/upperbound/index.md delete mode 100644 files/fr/web/api/idbkeyrange/upperopen/index.html create mode 100644 files/fr/web/api/idbkeyrange/upperopen/index.md delete mode 100644 files/fr/web/api/idbobjectstore/add/index.html create mode 100644 files/fr/web/api/idbobjectstore/add/index.md delete mode 100644 files/fr/web/api/idbobjectstore/autoincrement/index.html create mode 100644 files/fr/web/api/idbobjectstore/autoincrement/index.md delete mode 100644 files/fr/web/api/idbobjectstore/clear/index.html create mode 100644 files/fr/web/api/idbobjectstore/clear/index.md delete mode 100644 files/fr/web/api/idbobjectstore/count/index.html create mode 100644 files/fr/web/api/idbobjectstore/count/index.md delete mode 100644 files/fr/web/api/idbobjectstore/createindex/index.html create mode 100644 files/fr/web/api/idbobjectstore/createindex/index.md delete mode 100644 files/fr/web/api/idbobjectstore/delete/index.html create mode 100644 files/fr/web/api/idbobjectstore/delete/index.md delete mode 100644 files/fr/web/api/idbobjectstore/deleteindex/index.html create mode 100644 files/fr/web/api/idbobjectstore/deleteindex/index.md delete mode 100644 files/fr/web/api/idbobjectstore/get/index.html create mode 100644 files/fr/web/api/idbobjectstore/get/index.md delete mode 100644 files/fr/web/api/idbobjectstore/getall/index.html create mode 100644 files/fr/web/api/idbobjectstore/getall/index.md delete mode 100644 files/fr/web/api/idbobjectstore/getallkeys/index.html create mode 100644 files/fr/web/api/idbobjectstore/getallkeys/index.md delete mode 100644 files/fr/web/api/idbobjectstore/getkey/index.html create mode 100644 files/fr/web/api/idbobjectstore/getkey/index.md delete mode 100644 files/fr/web/api/idbobjectstore/index.html create mode 100644 files/fr/web/api/idbobjectstore/index.md delete mode 100644 files/fr/web/api/idbobjectstore/index/index.html create mode 100644 files/fr/web/api/idbobjectstore/index/index.md delete mode 100644 files/fr/web/api/idbobjectstore/indexnames/index.html create mode 100644 files/fr/web/api/idbobjectstore/indexnames/index.md delete mode 100644 files/fr/web/api/idbobjectstore/keypath/index.html create mode 100644 files/fr/web/api/idbobjectstore/keypath/index.md delete mode 100644 files/fr/web/api/idbobjectstore/name/index.html create mode 100644 files/fr/web/api/idbobjectstore/name/index.md delete mode 100644 files/fr/web/api/idbobjectstore/opencursor/index.html create mode 100644 files/fr/web/api/idbobjectstore/opencursor/index.md delete mode 100644 files/fr/web/api/idbobjectstore/openkeycursor/index.html create mode 100644 files/fr/web/api/idbobjectstore/openkeycursor/index.md delete mode 100644 files/fr/web/api/idbobjectstore/put/index.html create mode 100644 files/fr/web/api/idbobjectstore/put/index.md delete mode 100644 files/fr/web/api/idbobjectstore/transaction/index.html create mode 100644 files/fr/web/api/idbobjectstore/transaction/index.md delete mode 100644 files/fr/web/api/idbopendbrequest/blocked_event/index.html create mode 100644 files/fr/web/api/idbopendbrequest/blocked_event/index.md delete mode 100644 files/fr/web/api/idbopendbrequest/index.html create mode 100644 files/fr/web/api/idbopendbrequest/index.md delete mode 100644 files/fr/web/api/idbrequest/error/index.html create mode 100644 files/fr/web/api/idbrequest/error/index.md delete mode 100644 files/fr/web/api/idbrequest/index.html create mode 100644 files/fr/web/api/idbrequest/index.md delete mode 100644 files/fr/web/api/idbrequest/onerror/index.html create mode 100644 files/fr/web/api/idbrequest/onerror/index.md delete mode 100644 files/fr/web/api/idbrequest/onsuccess/index.html create mode 100644 files/fr/web/api/idbrequest/onsuccess/index.md delete mode 100644 files/fr/web/api/idbrequest/readystate/index.html create mode 100644 files/fr/web/api/idbrequest/readystate/index.md delete mode 100644 files/fr/web/api/idbrequest/result/index.html create mode 100644 files/fr/web/api/idbrequest/result/index.md delete mode 100644 files/fr/web/api/idbrequest/source/index.html create mode 100644 files/fr/web/api/idbrequest/source/index.md delete mode 100644 files/fr/web/api/idbrequest/transaction/index.html create mode 100644 files/fr/web/api/idbrequest/transaction/index.md delete mode 100644 files/fr/web/api/idbtransaction/abort/index.html create mode 100644 files/fr/web/api/idbtransaction/abort/index.md delete mode 100644 files/fr/web/api/idbtransaction/abort_event/index.html create mode 100644 files/fr/web/api/idbtransaction/abort_event/index.md delete mode 100644 files/fr/web/api/idbtransaction/complete_event/index.html create mode 100644 files/fr/web/api/idbtransaction/complete_event/index.md delete mode 100644 files/fr/web/api/idbtransaction/db/index.html create mode 100644 files/fr/web/api/idbtransaction/db/index.md delete mode 100644 files/fr/web/api/idbtransaction/error/index.html create mode 100644 files/fr/web/api/idbtransaction/error/index.md delete mode 100644 files/fr/web/api/idbtransaction/index.html create mode 100644 files/fr/web/api/idbtransaction/index.md delete mode 100644 files/fr/web/api/idbtransaction/mode/index.html create mode 100644 files/fr/web/api/idbtransaction/mode/index.md delete mode 100644 files/fr/web/api/idbtransaction/objectstore/index.html create mode 100644 files/fr/web/api/idbtransaction/objectstore/index.md delete mode 100644 files/fr/web/api/idbtransaction/objectstorenames/index.html create mode 100644 files/fr/web/api/idbtransaction/objectstorenames/index.md delete mode 100644 files/fr/web/api/idbtransaction/onabort/index.html create mode 100644 files/fr/web/api/idbtransaction/onabort/index.md delete mode 100644 files/fr/web/api/idbtransaction/oncomplete/index.html create mode 100644 files/fr/web/api/idbtransaction/oncomplete/index.md delete mode 100644 files/fr/web/api/idbtransaction/onerror/index.html create mode 100644 files/fr/web/api/idbtransaction/onerror/index.md delete mode 100644 files/fr/web/api/imagedata/data/index.html create mode 100644 files/fr/web/api/imagedata/data/index.md delete mode 100644 files/fr/web/api/imagedata/index.html create mode 100644 files/fr/web/api/imagedata/index.md delete mode 100644 files/fr/web/api/index.html create mode 100644 files/fr/web/api/index.md delete mode 100644 files/fr/web/api/indexeddb/index.html create mode 100644 files/fr/web/api/indexeddb/index.md delete 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/browser_storage_limits_and_eviction_criteria/index.md delete mode 100644 files/fr/web/api/indexeddb_api/index.html create mode 100644 files/fr/web/api/indexeddb_api/index.md delete mode 100644 files/fr/web/api/indexeddb_api/using_indexeddb/index.html create mode 100644 files/fr/web/api/indexeddb_api/using_indexeddb/index.md delete mode 100644 files/fr/web/api/inputevent/index.html create mode 100644 files/fr/web/api/inputevent/index.md delete mode 100644 files/fr/web/api/intersection_observer_api/index.html create mode 100644 files/fr/web/api/intersection_observer_api/index.md delete mode 100644 files/fr/web/api/intersectionobserver/disconnect/index.html create mode 100644 files/fr/web/api/intersectionobserver/disconnect/index.md delete mode 100644 files/fr/web/api/intersectionobserver/index.html create mode 100644 files/fr/web/api/intersectionobserver/index.md delete mode 100644 files/fr/web/api/intersectionobserver/intersectionobserver/index.html create mode 100644 files/fr/web/api/intersectionobserver/intersectionobserver/index.md delete mode 100644 files/fr/web/api/intersectionobserver/observe/index.html create mode 100644 files/fr/web/api/intersectionobserver/observe/index.md delete mode 100644 files/fr/web/api/intersectionobserver/root/index.html create mode 100644 files/fr/web/api/intersectionobserver/root/index.md delete mode 100644 files/fr/web/api/intersectionobserver/rootmargin/index.html create mode 100644 files/fr/web/api/intersectionobserver/rootmargin/index.md delete mode 100644 files/fr/web/api/intersectionobserver/takerecords/index.html create mode 100644 files/fr/web/api/intersectionobserver/takerecords/index.md delete mode 100644 files/fr/web/api/intersectionobserver/thresholds/index.html create mode 100644 files/fr/web/api/intersectionobserver/thresholds/index.md delete mode 100644 files/fr/web/api/intersectionobserver/unobserve/index.html create mode 100644 files/fr/web/api/intersectionobserver/unobserve/index.md delete mode 100644 files/fr/web/api/intersectionobserverentry/index.html create mode 100644 files/fr/web/api/intersectionobserverentry/index.md delete mode 100644 files/fr/web/api/intersectionobserverentry/target/index.html create mode 100644 files/fr/web/api/intersectionobserverentry/target/index.md delete mode 100644 files/fr/web/api/issecurecontext/index.html create mode 100644 files/fr/web/api/issecurecontext/index.md delete mode 100644 files/fr/web/api/keyboardevent/charcode/index.html create mode 100644 files/fr/web/api/keyboardevent/charcode/index.md delete mode 100644 files/fr/web/api/keyboardevent/code/index.html create mode 100644 files/fr/web/api/keyboardevent/code/index.md delete mode 100644 files/fr/web/api/keyboardevent/index.html create mode 100644 files/fr/web/api/keyboardevent/index.md delete mode 100644 files/fr/web/api/keyboardevent/key/index.html create mode 100644 files/fr/web/api/keyboardevent/key/index.md delete mode 100644 files/fr/web/api/keyboardevent/key/key_values/index.html create mode 100644 files/fr/web/api/keyboardevent/key/key_values/index.md delete mode 100644 files/fr/web/api/keyboardevent/keyboardevent/index.html create mode 100644 files/fr/web/api/keyboardevent/keyboardevent/index.md delete mode 100644 files/fr/web/api/localfilesystem/index.html create mode 100644 files/fr/web/api/localfilesystem/index.md delete mode 100644 files/fr/web/api/location/assign/index.html create mode 100644 files/fr/web/api/location/assign/index.md delete mode 100644 files/fr/web/api/location/index.html create mode 100644 files/fr/web/api/location/index.md delete mode 100644 files/fr/web/api/location/reload/index.html create mode 100644 files/fr/web/api/location/reload/index.md delete mode 100644 files/fr/web/api/location/replace/index.html create mode 100644 files/fr/web/api/location/replace/index.md delete mode 100644 files/fr/web/api/media_streams_api/index.html create mode 100644 files/fr/web/api/media_streams_api/index.md delete mode 100644 files/fr/web/api/mediadevices/getusermedia/index.html create mode 100644 files/fr/web/api/mediadevices/getusermedia/index.md delete mode 100644 files/fr/web/api/mediadevices/index.html create mode 100644 files/fr/web/api/mediadevices/index.md delete mode 100644 files/fr/web/api/mediasource/index.html create mode 100644 files/fr/web/api/mediasource/index.md delete mode 100644 files/fr/web/api/mediasource/mediasource/index.html create mode 100644 files/fr/web/api/mediasource/mediasource/index.md delete mode 100644 files/fr/web/api/mediastream/index.html create mode 100644 files/fr/web/api/mediastream/index.md delete mode 100644 files/fr/web/api/mediastreamaudiosourcenode/index.html create mode 100644 files/fr/web/api/mediastreamaudiosourcenode/index.md delete mode 100644 files/fr/web/api/mediastreamevent/index.html create mode 100644 files/fr/web/api/mediastreamevent/index.md delete mode 100644 files/fr/web/api/mediatrackconstraints/index.html create mode 100644 files/fr/web/api/mediatrackconstraints/index.md delete mode 100644 files/fr/web/api/messageevent/index.html create mode 100644 files/fr/web/api/messageevent/index.md delete mode 100644 files/fr/web/api/mouseevent/index.html create mode 100644 files/fr/web/api/mouseevent/index.md delete mode 100644 files/fr/web/api/mouseevent/offsetx/index.html create mode 100644 files/fr/web/api/mouseevent/offsetx/index.md delete mode 100644 files/fr/web/api/mouseevent/offsety/index.html create mode 100644 files/fr/web/api/mouseevent/offsety/index.md delete mode 100644 files/fr/web/api/mutationobserver/index.html create mode 100644 files/fr/web/api/mutationobserver/index.md delete mode 100644 files/fr/web/api/namednodemap/index.html create mode 100644 files/fr/web/api/namednodemap/index.md delete mode 100644 files/fr/web/api/navigator/battery/index.html create mode 100644 files/fr/web/api/navigator/battery/index.md delete mode 100644 files/fr/web/api/navigator/connection/index.html create mode 100644 files/fr/web/api/navigator/connection/index.md delete mode 100644 files/fr/web/api/navigator/cookieenabled/index.html create mode 100644 files/fr/web/api/navigator/cookieenabled/index.md delete mode 100644 files/fr/web/api/navigator/credentials/index.html create mode 100644 files/fr/web/api/navigator/credentials/index.md delete mode 100644 files/fr/web/api/navigator/donottrack/index.html create mode 100644 files/fr/web/api/navigator/donottrack/index.md delete mode 100644 files/fr/web/api/navigator/geolocation/index.html create mode 100644 files/fr/web/api/navigator/geolocation/index.md delete mode 100644 files/fr/web/api/navigator/getgamepads/index.html create mode 100644 files/fr/web/api/navigator/getgamepads/index.md delete mode 100644 files/fr/web/api/navigator/getusermedia/index.html create mode 100644 files/fr/web/api/navigator/getusermedia/index.md delete mode 100644 files/fr/web/api/navigator/index.html create mode 100644 files/fr/web/api/navigator/index.md delete mode 100644 files/fr/web/api/navigator/mozislocallyavailable/index.html create mode 100644 files/fr/web/api/navigator/mozislocallyavailable/index.md delete mode 100644 files/fr/web/api/navigator/registerprotocolhandler/index.html create mode 100644 files/fr/web/api/navigator/registerprotocolhandler/index.md delete mode 100644 files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html create mode 100644 files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md delete mode 100644 files/fr/web/api/navigator/sendbeacon/index.html create mode 100644 files/fr/web/api/navigator/sendbeacon/index.md delete mode 100644 files/fr/web/api/navigator/serviceworker/index.html create mode 100644 files/fr/web/api/navigator/serviceworker/index.md delete mode 100644 files/fr/web/api/navigator/share/index.html create mode 100644 files/fr/web/api/navigator/share/index.md delete mode 100644 files/fr/web/api/navigator/vibrate/index.html create mode 100644 files/fr/web/api/navigator/vibrate/index.md delete mode 100644 files/fr/web/api/network_information_api/index.html create mode 100644 files/fr/web/api/network_information_api/index.md delete mode 100644 files/fr/web/api/node/appendchild/index.html create mode 100644 files/fr/web/api/node/appendchild/index.md delete mode 100644 files/fr/web/api/node/baseuri/index.html create mode 100644 files/fr/web/api/node/baseuri/index.md delete mode 100644 files/fr/web/api/node/childnodes/index.html create mode 100644 files/fr/web/api/node/childnodes/index.md delete mode 100644 files/fr/web/api/node/clonenode/index.html create mode 100644 files/fr/web/api/node/clonenode/index.md delete mode 100644 files/fr/web/api/node/comparedocumentposition/index.html create mode 100644 files/fr/web/api/node/comparedocumentposition/index.md delete mode 100644 files/fr/web/api/node/contains/index.html create mode 100644 files/fr/web/api/node/contains/index.md delete mode 100644 files/fr/web/api/node/firstchild/index.html create mode 100644 files/fr/web/api/node/firstchild/index.md delete mode 100644 files/fr/web/api/node/getrootnode/index.html create mode 100644 files/fr/web/api/node/getrootnode/index.md delete mode 100644 files/fr/web/api/node/haschildnodes/index.html create mode 100644 files/fr/web/api/node/haschildnodes/index.md delete mode 100644 files/fr/web/api/node/index.html create mode 100644 files/fr/web/api/node/index.md delete mode 100644 files/fr/web/api/node/insertbefore/index.html create mode 100644 files/fr/web/api/node/insertbefore/index.md delete mode 100644 files/fr/web/api/node/isconnected/index.html create mode 100644 files/fr/web/api/node/isconnected/index.md delete mode 100644 files/fr/web/api/node/isdefaultnamespace/index.html create mode 100644 files/fr/web/api/node/isdefaultnamespace/index.md delete mode 100644 files/fr/web/api/node/isequalnode/index.html create mode 100644 files/fr/web/api/node/isequalnode/index.md delete mode 100644 files/fr/web/api/node/issamenode/index.html create mode 100644 files/fr/web/api/node/issamenode/index.md delete mode 100644 files/fr/web/api/node/issupported/index.html create mode 100644 files/fr/web/api/node/issupported/index.md delete mode 100644 files/fr/web/api/node/lastchild/index.html create mode 100644 files/fr/web/api/node/lastchild/index.md delete mode 100644 files/fr/web/api/node/lookupnamespaceuri/index.html create mode 100644 files/fr/web/api/node/lookupnamespaceuri/index.md delete mode 100644 files/fr/web/api/node/lookupprefix/index.html create mode 100644 files/fr/web/api/node/lookupprefix/index.md delete mode 100644 files/fr/web/api/node/nextsibling/index.html create mode 100644 files/fr/web/api/node/nextsibling/index.md delete mode 100644 files/fr/web/api/node/nodename/index.html create mode 100644 files/fr/web/api/node/nodename/index.md delete mode 100644 files/fr/web/api/node/nodetype/index.html create mode 100644 files/fr/web/api/node/nodetype/index.md delete mode 100644 files/fr/web/api/node/nodevalue/index.html create mode 100644 files/fr/web/api/node/nodevalue/index.md delete mode 100644 files/fr/web/api/node/normalize/index.html create mode 100644 files/fr/web/api/node/normalize/index.md delete mode 100644 files/fr/web/api/node/ownerdocument/index.html create mode 100644 files/fr/web/api/node/ownerdocument/index.md delete mode 100644 files/fr/web/api/node/parentelement/index.html create mode 100644 files/fr/web/api/node/parentelement/index.md delete mode 100644 files/fr/web/api/node/parentnode/index.html create mode 100644 files/fr/web/api/node/parentnode/index.md delete mode 100644 files/fr/web/api/node/previoussibling/index.html create mode 100644 files/fr/web/api/node/previoussibling/index.md delete mode 100644 files/fr/web/api/node/removechild/index.html create mode 100644 files/fr/web/api/node/removechild/index.md delete mode 100644 files/fr/web/api/node/replacechild/index.html create mode 100644 files/fr/web/api/node/replacechild/index.md delete mode 100644 files/fr/web/api/node/textcontent/index.html create mode 100644 files/fr/web/api/node/textcontent/index.md delete mode 100644 files/fr/web/api/nodefilter/acceptnode/index.html create mode 100644 files/fr/web/api/nodefilter/acceptnode/index.md delete mode 100644 files/fr/web/api/nodefilter/index.html create mode 100644 files/fr/web/api/nodefilter/index.md delete mode 100644 files/fr/web/api/nodeiterator/detach/index.html create mode 100644 files/fr/web/api/nodeiterator/detach/index.md delete mode 100644 files/fr/web/api/nodeiterator/expandentityreferences/index.html create mode 100644 files/fr/web/api/nodeiterator/expandentityreferences/index.md delete mode 100644 files/fr/web/api/nodeiterator/filter/index.html create mode 100644 files/fr/web/api/nodeiterator/filter/index.md delete mode 100644 files/fr/web/api/nodeiterator/index.html create mode 100644 files/fr/web/api/nodeiterator/index.md delete mode 100644 files/fr/web/api/nodeiterator/nextnode/index.html create mode 100644 files/fr/web/api/nodeiterator/nextnode/index.md delete mode 100644 files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html create mode 100644 files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.md delete mode 100644 files/fr/web/api/nodeiterator/previousnode/index.html create mode 100644 files/fr/web/api/nodeiterator/previousnode/index.md delete mode 100644 files/fr/web/api/nodeiterator/referencenode/index.html create mode 100644 files/fr/web/api/nodeiterator/referencenode/index.md delete mode 100644 files/fr/web/api/nodeiterator/root/index.html create mode 100644 files/fr/web/api/nodeiterator/root/index.md delete mode 100644 files/fr/web/api/nodeiterator/whattoshow/index.html create mode 100644 files/fr/web/api/nodeiterator/whattoshow/index.md delete mode 100644 files/fr/web/api/nodelist/entries/index.html create mode 100644 files/fr/web/api/nodelist/entries/index.md delete mode 100644 files/fr/web/api/nodelist/foreach/index.html create mode 100644 files/fr/web/api/nodelist/foreach/index.md delete mode 100644 files/fr/web/api/nodelist/index.html create mode 100644 files/fr/web/api/nodelist/index.md delete mode 100644 files/fr/web/api/nodelist/item/index.html create mode 100644 files/fr/web/api/nodelist/item/index.md delete mode 100644 files/fr/web/api/nodelist/keys/index.html create mode 100644 files/fr/web/api/nodelist/keys/index.md delete mode 100644 files/fr/web/api/nodelist/length/index.html create mode 100644 files/fr/web/api/nodelist/length/index.md delete mode 100644 files/fr/web/api/nodelist/values/index.html create mode 100644 files/fr/web/api/nodelist/values/index.md delete mode 100644 files/fr/web/api/notification/actions/index.html create mode 100644 files/fr/web/api/notification/actions/index.md delete mode 100644 files/fr/web/api/notification/badge/index.html create mode 100644 files/fr/web/api/notification/badge/index.md delete mode 100644 files/fr/web/api/notification/body/index.html create mode 100644 files/fr/web/api/notification/body/index.md delete mode 100644 files/fr/web/api/notification/close/index.html create mode 100644 files/fr/web/api/notification/close/index.md delete mode 100644 files/fr/web/api/notification/data/index.html create mode 100644 files/fr/web/api/notification/data/index.md delete mode 100644 files/fr/web/api/notification/dir/index.html create mode 100644 files/fr/web/api/notification/dir/index.md delete mode 100644 files/fr/web/api/notification/icon/index.html create mode 100644 files/fr/web/api/notification/icon/index.md delete mode 100644 files/fr/web/api/notification/image/index.html create mode 100644 files/fr/web/api/notification/image/index.md delete mode 100644 files/fr/web/api/notification/index.html create mode 100644 files/fr/web/api/notification/index.md delete mode 100644 files/fr/web/api/notification/lang/index.html create mode 100644 files/fr/web/api/notification/lang/index.md delete mode 100644 files/fr/web/api/notification/maxactions/index.html create mode 100644 files/fr/web/api/notification/maxactions/index.md delete mode 100644 files/fr/web/api/notification/notification/index.html create mode 100644 files/fr/web/api/notification/notification/index.md delete mode 100644 files/fr/web/api/notification/onclick/index.html create mode 100644 files/fr/web/api/notification/onclick/index.md delete mode 100644 files/fr/web/api/notification/onclose/index.html create mode 100644 files/fr/web/api/notification/onclose/index.md delete mode 100644 files/fr/web/api/notification/onerror/index.html create mode 100644 files/fr/web/api/notification/onerror/index.md delete mode 100644 files/fr/web/api/notification/onshow/index.html create mode 100644 files/fr/web/api/notification/onshow/index.md delete mode 100644 files/fr/web/api/notification/permission/index.html create mode 100644 files/fr/web/api/notification/permission/index.md delete mode 100644 files/fr/web/api/notification/renotify/index.html create mode 100644 files/fr/web/api/notification/renotify/index.md delete mode 100644 files/fr/web/api/notification/requestpermission/index.html create mode 100644 files/fr/web/api/notification/requestpermission/index.md delete mode 100644 files/fr/web/api/notification/requireinteraction/index.html create mode 100644 files/fr/web/api/notification/requireinteraction/index.md delete mode 100644 files/fr/web/api/notification/silent/index.html create mode 100644 files/fr/web/api/notification/silent/index.md delete mode 100644 files/fr/web/api/notification/tag/index.html create mode 100644 files/fr/web/api/notification/tag/index.md delete mode 100644 files/fr/web/api/notification/timestamp/index.html create mode 100644 files/fr/web/api/notification/timestamp/index.md delete mode 100644 files/fr/web/api/notification/title/index.html create mode 100644 files/fr/web/api/notification/title/index.md delete mode 100644 files/fr/web/api/notification/vibrate/index.html create mode 100644 files/fr/web/api/notification/vibrate/index.md delete mode 100644 files/fr/web/api/notificationevent/index.html create mode 100644 files/fr/web/api/notificationevent/index.md delete mode 100644 files/fr/web/api/notifications_api/index.html create mode 100644 files/fr/web/api/notifications_api/index.md delete mode 100644 files/fr/web/api/notifications_api/using_the_notifications_api/index.html create mode 100644 files/fr/web/api/notifications_api/using_the_notifications_api/index.md delete mode 100644 files/fr/web/api/notifyaudioavailableevent/index.html create mode 100644 files/fr/web/api/notifyaudioavailableevent/index.md delete mode 100644 files/fr/web/api/offlineaudiocontext/complete_event/index.html create mode 100644 files/fr/web/api/offlineaudiocontext/complete_event/index.md delete mode 100644 files/fr/web/api/offscreencanvas/index.html create mode 100644 files/fr/web/api/offscreencanvas/index.md delete mode 100644 files/fr/web/api/origin/index.html create mode 100644 files/fr/web/api/origin/index.md delete mode 100644 files/fr/web/api/oscillatornode/index.html create mode 100644 files/fr/web/api/oscillatornode/index.md delete mode 100644 files/fr/web/api/page_visibility_api/index.html create mode 100644 files/fr/web/api/page_visibility_api/index.md delete mode 100644 files/fr/web/api/pagetransitionevent/index.html create mode 100644 files/fr/web/api/pagetransitionevent/index.md delete mode 100644 files/fr/web/api/passwordcredential/iconurl/index.html create mode 100644 files/fr/web/api/passwordcredential/iconurl/index.md delete mode 100644 files/fr/web/api/passwordcredential/index.html create mode 100644 files/fr/web/api/passwordcredential/index.md delete mode 100644 files/fr/web/api/passwordcredential/name/index.html create mode 100644 files/fr/web/api/passwordcredential/name/index.md delete mode 100644 files/fr/web/api/passwordcredential/password/index.html create mode 100644 files/fr/web/api/passwordcredential/password/index.md delete mode 100644 files/fr/web/api/passwordcredential/passwordcredential/index.html create mode 100644 files/fr/web/api/passwordcredential/passwordcredential/index.md delete mode 100644 files/fr/web/api/payment_request_api/index.html create mode 100644 files/fr/web/api/payment_request_api/index.md delete mode 100644 files/fr/web/api/performance/clearmarks/index.html create mode 100644 files/fr/web/api/performance/clearmarks/index.md delete mode 100644 files/fr/web/api/performance/clearmeasures/index.html create mode 100644 files/fr/web/api/performance/clearmeasures/index.md delete mode 100644 files/fr/web/api/performance/clearresourcetimings/index.html create mode 100644 files/fr/web/api/performance/clearresourcetimings/index.md delete mode 100644 files/fr/web/api/performance/getentries/index.html create mode 100644 files/fr/web/api/performance/getentries/index.md delete mode 100644 files/fr/web/api/performance/getentriesbyname/index.html create mode 100644 files/fr/web/api/performance/getentriesbyname/index.md delete mode 100644 files/fr/web/api/performance/getentriesbytype/index.html create mode 100644 files/fr/web/api/performance/getentriesbytype/index.md delete mode 100644 files/fr/web/api/performance/index.html create mode 100644 files/fr/web/api/performance/index.md delete mode 100644 files/fr/web/api/performance/mark/index.html create mode 100644 files/fr/web/api/performance/mark/index.md delete mode 100644 files/fr/web/api/performance/measure/index.html create mode 100644 files/fr/web/api/performance/measure/index.md delete mode 100644 files/fr/web/api/performance/memory/index.html create mode 100644 files/fr/web/api/performance/memory/index.md delete mode 100644 files/fr/web/api/performance/navigation/index.html create mode 100644 files/fr/web/api/performance/navigation/index.md delete mode 100644 files/fr/web/api/performance/now/index.html create mode 100644 files/fr/web/api/performance/now/index.md delete mode 100644 files/fr/web/api/performance/onresourcetimingbufferfull/index.html create mode 100644 files/fr/web/api/performance/onresourcetimingbufferfull/index.md delete mode 100644 files/fr/web/api/performance/resourcetimingbufferfull_event/index.html create mode 100644 files/fr/web/api/performance/resourcetimingbufferfull_event/index.md delete mode 100644 files/fr/web/api/performance/setresourcetimingbuffersize/index.html create mode 100644 files/fr/web/api/performance/setresourcetimingbuffersize/index.md delete mode 100644 files/fr/web/api/performance/timeorigin/index.html create mode 100644 files/fr/web/api/performance/timeorigin/index.md delete mode 100644 files/fr/web/api/performance/timing/index.html create mode 100644 files/fr/web/api/performance/timing/index.md delete mode 100644 files/fr/web/api/performance/tojson/index.html create mode 100644 files/fr/web/api/performance/tojson/index.md delete mode 100644 files/fr/web/api/performance_api/index.html create mode 100644 files/fr/web/api/performance_api/index.md delete mode 100644 files/fr/web/api/performance_api/using_the_performance_api/index.html create mode 100644 files/fr/web/api/performance_api/using_the_performance_api/index.md delete mode 100644 files/fr/web/api/performance_timeline/index.html create mode 100644 files/fr/web/api/performance_timeline/index.md delete mode 100644 files/fr/web/api/performance_timeline/using_performance_timeline/index.html create mode 100644 files/fr/web/api/performance_timeline/using_performance_timeline/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/element/index.html create mode 100644 files/fr/web/api/performanceelementtiming/element/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/id/index.html create mode 100644 files/fr/web/api/performanceelementtiming/id/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/identifier/index.html create mode 100644 files/fr/web/api/performanceelementtiming/identifier/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/index.html create mode 100644 files/fr/web/api/performanceelementtiming/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/intersectionrect/index.html create mode 100644 files/fr/web/api/performanceelementtiming/intersectionrect/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/loadtime/index.html create mode 100644 files/fr/web/api/performanceelementtiming/loadtime/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/naturalheight/index.html create mode 100644 files/fr/web/api/performanceelementtiming/naturalheight/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/naturalwidth/index.html create mode 100644 files/fr/web/api/performanceelementtiming/naturalwidth/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/rendertime/index.html create mode 100644 files/fr/web/api/performanceelementtiming/rendertime/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/tojson/index.html create mode 100644 files/fr/web/api/performanceelementtiming/tojson/index.md delete mode 100644 files/fr/web/api/performanceelementtiming/url/index.html create mode 100644 files/fr/web/api/performanceelementtiming/url/index.md delete mode 100644 files/fr/web/api/performanceentry/duration/index.html create mode 100644 files/fr/web/api/performanceentry/duration/index.md delete mode 100644 files/fr/web/api/performanceentry/entrytype/index.html create mode 100644 files/fr/web/api/performanceentry/entrytype/index.md delete mode 100644 files/fr/web/api/performanceentry/index.html create mode 100644 files/fr/web/api/performanceentry/index.md delete mode 100644 files/fr/web/api/performanceentry/name/index.html create mode 100644 files/fr/web/api/performanceentry/name/index.md delete mode 100644 files/fr/web/api/performanceentry/starttime/index.html create mode 100644 files/fr/web/api/performanceentry/starttime/index.md delete mode 100644 files/fr/web/api/performanceentry/tojson/index.html create mode 100644 files/fr/web/api/performanceentry/tojson/index.md delete mode 100644 files/fr/web/api/performanceeventtiming/index.html create mode 100644 files/fr/web/api/performanceeventtiming/index.md delete mode 100644 files/fr/web/api/performanceframetiming/index.html create mode 100644 files/fr/web/api/performanceframetiming/index.md delete mode 100644 files/fr/web/api/performancelongtasktiming/attribution/index.html create mode 100644 files/fr/web/api/performancelongtasktiming/attribution/index.md delete mode 100644 files/fr/web/api/performancelongtasktiming/index.html create mode 100644 files/fr/web/api/performancelongtasktiming/index.md delete mode 100644 files/fr/web/api/performancemark/index.html create mode 100644 files/fr/web/api/performancemark/index.md delete mode 100644 files/fr/web/api/performancemeasure/index.html create mode 100644 files/fr/web/api/performancemeasure/index.md delete mode 100644 files/fr/web/api/performancenavigation/index.html create mode 100644 files/fr/web/api/performancenavigation/index.md delete mode 100644 files/fr/web/api/performancenavigation/redirectcount/index.html create mode 100644 files/fr/web/api/performancenavigation/redirectcount/index.md delete mode 100644 files/fr/web/api/performancenavigation/type/index.html create mode 100644 files/fr/web/api/performancenavigation/type/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/domcomplete/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/domcomplete/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/dominteractive/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/dominteractive/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/loadeventend/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/loadeventend/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/loadeventstart/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/loadeventstart/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/redirectcount/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/redirectcount/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/tojson/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/tojson/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/type/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/type/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/unloadeventend/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/unloadeventend/index.md delete mode 100644 files/fr/web/api/performancenavigationtiming/unloadeventstart/index.html create mode 100644 files/fr/web/api/performancenavigationtiming/unloadeventstart/index.md delete mode 100644 files/fr/web/api/performanceobserver/disconnect/index.html create mode 100644 files/fr/web/api/performanceobserver/disconnect/index.md delete mode 100644 files/fr/web/api/performanceobserver/index.html create mode 100644 files/fr/web/api/performanceobserver/index.md delete mode 100644 files/fr/web/api/performanceobserver/observe/index.html create mode 100644 files/fr/web/api/performanceobserver/observe/index.md delete mode 100644 files/fr/web/api/performanceobserver/performanceobserver/index.html create mode 100644 files/fr/web/api/performanceobserver/performanceobserver/index.md delete mode 100644 files/fr/web/api/performanceobserver/takerecords/index.html create mode 100644 files/fr/web/api/performanceobserver/takerecords/index.md delete mode 100644 files/fr/web/api/performanceobserverentrylist/getentries/index.html create mode 100644 files/fr/web/api/performanceobserverentrylist/getentries/index.md delete mode 100644 files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html create mode 100644 files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.md delete mode 100644 files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html create mode 100644 files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.md delete mode 100644 files/fr/web/api/performanceobserverentrylist/index.html create mode 100644 files/fr/web/api/performanceobserverentrylist/index.md delete mode 100644 files/fr/web/api/performancepainttiming/index.html create mode 100644 files/fr/web/api/performancepainttiming/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/connectend/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/connectend/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/connectstart/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/connectstart/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/decodedbodysize/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/domainlookupend/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/domainlookupend/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/domainlookupstart/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/encodedbodysize/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/fetchstart/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/fetchstart/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/initiatortype/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/initiatortype/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/redirectend/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/redirectend/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/redirectstart/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/redirectstart/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/requeststart/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/requeststart/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/responseend/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/responseend/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/responsestart/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/responsestart/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/servertiming/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/servertiming/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/tojson/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/tojson/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/transfersize/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/transfersize/index.md delete mode 100644 files/fr/web/api/performanceresourcetiming/workerstart/index.html create mode 100644 files/fr/web/api/performanceresourcetiming/workerstart/index.md delete mode 100644 files/fr/web/api/performanceservertiming/description/index.html create mode 100644 files/fr/web/api/performanceservertiming/description/index.md delete mode 100644 files/fr/web/api/performanceservertiming/duration/index.html create mode 100644 files/fr/web/api/performanceservertiming/duration/index.md delete mode 100644 files/fr/web/api/performanceservertiming/index.html create mode 100644 files/fr/web/api/performanceservertiming/index.md delete mode 100644 files/fr/web/api/performanceservertiming/name/index.html create mode 100644 files/fr/web/api/performanceservertiming/name/index.md delete mode 100644 files/fr/web/api/performanceservertiming/tojson/index.html create mode 100644 files/fr/web/api/performanceservertiming/tojson/index.md delete mode 100644 files/fr/web/api/performancetiming/connectend/index.html create mode 100644 files/fr/web/api/performancetiming/connectend/index.md delete mode 100644 files/fr/web/api/performancetiming/connectstart/index.html create mode 100644 files/fr/web/api/performancetiming/connectstart/index.md delete mode 100644 files/fr/web/api/performancetiming/domainlookupend/index.html create mode 100644 files/fr/web/api/performancetiming/domainlookupend/index.md delete mode 100644 files/fr/web/api/performancetiming/domainlookupstart/index.html create mode 100644 files/fr/web/api/performancetiming/domainlookupstart/index.md delete mode 100644 files/fr/web/api/performancetiming/domcomplete/index.html create mode 100644 files/fr/web/api/performancetiming/domcomplete/index.md delete mode 100644 files/fr/web/api/performancetiming/domcontentloadedeventend/index.html create mode 100644 files/fr/web/api/performancetiming/domcontentloadedeventend/index.md delete mode 100644 files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html create mode 100644 files/fr/web/api/performancetiming/domcontentloadedeventstart/index.md delete mode 100644 files/fr/web/api/performancetiming/dominteractive/index.html create mode 100644 files/fr/web/api/performancetiming/dominteractive/index.md delete mode 100644 files/fr/web/api/performancetiming/domloading/index.html create mode 100644 files/fr/web/api/performancetiming/domloading/index.md delete mode 100644 files/fr/web/api/performancetiming/fetchstart/index.html create mode 100644 files/fr/web/api/performancetiming/fetchstart/index.md delete mode 100644 files/fr/web/api/performancetiming/index.html create mode 100644 files/fr/web/api/performancetiming/index.md delete mode 100644 files/fr/web/api/performancetiming/loadeventend/index.html create mode 100644 files/fr/web/api/performancetiming/loadeventend/index.md delete mode 100644 files/fr/web/api/performancetiming/loadeventstart/index.html create mode 100644 files/fr/web/api/performancetiming/loadeventstart/index.md delete mode 100644 files/fr/web/api/performancetiming/navigationstart/index.html create mode 100644 files/fr/web/api/performancetiming/navigationstart/index.md delete mode 100644 files/fr/web/api/performancetiming/redirectend/index.html create mode 100644 files/fr/web/api/performancetiming/redirectend/index.md delete mode 100644 files/fr/web/api/performancetiming/redirectstart/index.html create mode 100644 files/fr/web/api/performancetiming/redirectstart/index.md delete mode 100644 files/fr/web/api/performancetiming/requeststart/index.html create mode 100644 files/fr/web/api/performancetiming/requeststart/index.md delete mode 100644 files/fr/web/api/performancetiming/responseend/index.html create mode 100644 files/fr/web/api/performancetiming/responseend/index.md delete mode 100644 files/fr/web/api/performancetiming/responsestart/index.html create mode 100644 files/fr/web/api/performancetiming/responsestart/index.md delete mode 100644 files/fr/web/api/performancetiming/secureconnectionstart/index.html create mode 100644 files/fr/web/api/performancetiming/secureconnectionstart/index.md delete mode 100644 files/fr/web/api/performancetiming/unloadeventend/index.html create mode 100644 files/fr/web/api/performancetiming/unloadeventend/index.md delete mode 100644 files/fr/web/api/performancetiming/unloadeventstart/index.html create mode 100644 files/fr/web/api/performancetiming/unloadeventstart/index.md delete mode 100644 files/fr/web/api/periodicwave/index.html create mode 100644 files/fr/web/api/periodicwave/index.md delete mode 100644 files/fr/web/api/permissions_api/index.html create mode 100644 files/fr/web/api/permissions_api/index.md delete mode 100644 files/fr/web/api/plugin/index.html create mode 100644 files/fr/web/api/plugin/index.md delete mode 100644 files/fr/web/api/pointer_events/index.html create mode 100644 files/fr/web/api/pointer_events/index.md delete mode 100644 files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html create mode 100644 files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md delete mode 100644 files/fr/web/api/pointer_lock_api/index.html create mode 100644 files/fr/web/api/pointer_lock_api/index.md delete mode 100644 files/fr/web/api/pointerevent/index.html create mode 100644 files/fr/web/api/pointerevent/index.md delete mode 100644 files/fr/web/api/positionoptions/enablehighaccuracy/index.html create mode 100644 files/fr/web/api/positionoptions/enablehighaccuracy/index.md delete mode 100644 files/fr/web/api/positionoptions/index.html create mode 100644 files/fr/web/api/positionoptions/index.md delete mode 100644 files/fr/web/api/positionoptions/maximumage/index.html create mode 100644 files/fr/web/api/positionoptions/maximumage/index.md delete mode 100644 files/fr/web/api/positionoptions/timeout/index.html create mode 100644 files/fr/web/api/positionoptions/timeout/index.md delete mode 100644 files/fr/web/api/processinginstruction/index.html create mode 100644 files/fr/web/api/processinginstruction/index.md delete mode 100644 files/fr/web/api/proximity_events/index.html create mode 100644 files/fr/web/api/proximity_events/index.md delete mode 100644 files/fr/web/api/publickeycredential/index.html create mode 100644 files/fr/web/api/publickeycredential/index.md delete mode 100644 files/fr/web/api/push_api/index.html create mode 100644 files/fr/web/api/push_api/index.md delete mode 100644 files/fr/web/api/pushevent/index.html create mode 100644 files/fr/web/api/pushevent/index.md delete mode 100644 files/fr/web/api/queuemicrotask/index.html create mode 100644 files/fr/web/api/queuemicrotask/index.md delete mode 100644 files/fr/web/api/range/createcontextualfragment/index.html create mode 100644 files/fr/web/api/range/createcontextualfragment/index.md delete mode 100644 files/fr/web/api/range/detach/index.html create mode 100644 files/fr/web/api/range/detach/index.md delete mode 100644 files/fr/web/api/range/extractcontents/index.html create mode 100644 files/fr/web/api/range/extractcontents/index.md delete mode 100644 files/fr/web/api/range/index.html create mode 100644 files/fr/web/api/range/index.md delete mode 100644 files/fr/web/api/range/insertnode/index.html create mode 100644 files/fr/web/api/range/insertnode/index.md delete mode 100644 files/fr/web/api/range/selectnode/index.html create mode 100644 files/fr/web/api/range/selectnode/index.md delete mode 100644 files/fr/web/api/range/setstart/index.html create mode 100644 files/fr/web/api/range/setstart/index.md delete mode 100644 files/fr/web/api/range/surroundcontents/index.html create mode 100644 files/fr/web/api/range/surroundcontents/index.md delete mode 100644 files/fr/web/api/request/credentials/index.html create mode 100644 files/fr/web/api/request/credentials/index.md delete mode 100644 files/fr/web/api/request/index.html create mode 100644 files/fr/web/api/request/index.md delete mode 100644 files/fr/web/api/request/mode/index.html create mode 100644 files/fr/web/api/request/mode/index.md delete mode 100644 files/fr/web/api/request/request/index.html create mode 100644 files/fr/web/api/request/request/index.md delete mode 100644 files/fr/web/api/resize_observer_api/index.html create mode 100644 files/fr/web/api/resize_observer_api/index.md delete mode 100644 files/fr/web/api/response/index.html create mode 100644 files/fr/web/api/response/index.md delete mode 100644 files/fr/web/api/response/ok/index.html create mode 100644 files/fr/web/api/response/ok/index.md delete mode 100644 files/fr/web/api/rtciceserver/index.html create mode 100644 files/fr/web/api/rtciceserver/index.md delete mode 100644 files/fr/web/api/rtcpeerconnection/index.html create mode 100644 files/fr/web/api/rtcpeerconnection/index.md delete mode 100644 files/fr/web/api/rtcpeerconnection/setconfiguration/index.html create mode 100644 files/fr/web/api/rtcpeerconnection/setconfiguration/index.md delete mode 100644 files/fr/web/api/screen_capture_api/index.html create mode 100644 files/fr/web/api/screen_capture_api/index.md delete mode 100644 files/fr/web/api/scriptprocessornode/audioprocess_event/index.html create mode 100644 files/fr/web/api/scriptprocessornode/audioprocess_event/index.md delete mode 100644 files/fr/web/api/selection/collapse/index.html create mode 100644 files/fr/web/api/selection/collapse/index.md delete mode 100644 files/fr/web/api/selection/index.html create mode 100644 files/fr/web/api/selection/index.md delete mode 100644 files/fr/web/api/selection/tostring/index.html create mode 100644 files/fr/web/api/selection/tostring/index.md delete mode 100644 files/fr/web/api/selection/type/index.html create mode 100644 files/fr/web/api/selection/type/index.md delete mode 100644 files/fr/web/api/server-sent_events/index.html create mode 100644 files/fr/web/api/server-sent_events/index.md delete mode 100644 files/fr/web/api/server-sent_events/using_server-sent_events/index.html create mode 100644 files/fr/web/api/server-sent_events/using_server-sent_events/index.md delete mode 100644 files/fr/web/api/service_worker_api/index.html create mode 100644 files/fr/web/api/service_worker_api/index.md delete mode 100644 files/fr/web/api/service_worker_api/using_service_workers/index.html create mode 100644 files/fr/web/api/service_worker_api/using_service_workers/index.md delete mode 100644 files/fr/web/api/serviceworker/index.html create mode 100644 files/fr/web/api/serviceworker/index.md delete mode 100644 files/fr/web/api/serviceworker/onstatechange/index.html create mode 100644 files/fr/web/api/serviceworker/onstatechange/index.md delete mode 100644 files/fr/web/api/serviceworkercontainer/getregistration/index.html create mode 100644 files/fr/web/api/serviceworkercontainer/getregistration/index.md delete mode 100644 files/fr/web/api/serviceworkercontainer/index.html create mode 100644 files/fr/web/api/serviceworkercontainer/index.md delete mode 100644 files/fr/web/api/serviceworkercontainer/register/index.html create mode 100644 files/fr/web/api/serviceworkercontainer/register/index.md delete mode 100644 files/fr/web/api/serviceworkerglobalscope/index.html create mode 100644 files/fr/web/api/serviceworkerglobalscope/index.md delete mode 100644 files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html create mode 100644 files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md delete mode 100644 files/fr/web/api/serviceworkerregistration/active/index.html create mode 100644 files/fr/web/api/serviceworkerregistration/active/index.md delete mode 100644 files/fr/web/api/serviceworkerregistration/getnotifications/index.html create mode 100644 files/fr/web/api/serviceworkerregistration/getnotifications/index.md delete mode 100644 files/fr/web/api/serviceworkerregistration/index.html create mode 100644 files/fr/web/api/serviceworkerregistration/index.md delete mode 100644 files/fr/web/api/serviceworkerregistration/scope/index.html create mode 100644 files/fr/web/api/serviceworkerregistration/scope/index.md delete mode 100644 files/fr/web/api/serviceworkerregistration/shownotification/index.html create mode 100644 files/fr/web/api/serviceworkerregistration/shownotification/index.md delete mode 100644 files/fr/web/api/settimeout/index.html create mode 100644 files/fr/web/api/settimeout/index.md delete mode 100644 files/fr/web/api/shadowroot/delegatesfocus/index.html create mode 100644 files/fr/web/api/shadowroot/delegatesfocus/index.md delete mode 100644 files/fr/web/api/shadowroot/host/index.html create mode 100644 files/fr/web/api/shadowroot/host/index.md delete mode 100644 files/fr/web/api/shadowroot/index.html create mode 100644 files/fr/web/api/shadowroot/index.md delete mode 100644 files/fr/web/api/shadowroot/innerhtml/index.html create mode 100644 files/fr/web/api/shadowroot/innerhtml/index.md delete mode 100644 files/fr/web/api/shadowroot/mode/index.html create mode 100644 files/fr/web/api/shadowroot/mode/index.md delete mode 100644 files/fr/web/api/sharedworker/index.html create mode 100644 files/fr/web/api/sharedworker/index.md delete mode 100644 files/fr/web/api/sharedworker/port/index.html create mode 100644 files/fr/web/api/sharedworker/port/index.md delete mode 100644 files/fr/web/api/sharedworker/sharedworker/index.html create mode 100644 files/fr/web/api/sharedworker/sharedworker/index.md delete mode 100644 files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html create mode 100644 files/fr/web/api/sharedworkerglobalscope/applicationcache/index.md delete mode 100644 files/fr/web/api/sharedworkerglobalscope/index.html create mode 100644 files/fr/web/api/sharedworkerglobalscope/index.md delete mode 100644 files/fr/web/api/sharedworkerglobalscope/onconnect/index.html create mode 100644 files/fr/web/api/sharedworkerglobalscope/onconnect/index.md delete mode 100644 files/fr/web/api/speechrecognition/index.html create mode 100644 files/fr/web/api/speechrecognition/index.md delete mode 100644 files/fr/web/api/speechsynthesisutterance/index.html create mode 100644 files/fr/web/api/speechsynthesisutterance/index.md delete mode 100644 files/fr/web/api/storage/clear/index.html create mode 100644 files/fr/web/api/storage/clear/index.md delete mode 100644 files/fr/web/api/storage/getitem/index.html create mode 100644 files/fr/web/api/storage/getitem/index.md delete mode 100644 files/fr/web/api/storage/index.html create mode 100644 files/fr/web/api/storage/index.md delete mode 100644 files/fr/web/api/storage/key/index.html create mode 100644 files/fr/web/api/storage/key/index.md delete mode 100644 files/fr/web/api/storage/length/index.html create mode 100644 files/fr/web/api/storage/length/index.md delete mode 100644 files/fr/web/api/storage/removeitem/index.html create mode 100644 files/fr/web/api/storage/removeitem/index.md delete mode 100644 files/fr/web/api/storage/setitem/index.html create mode 100644 files/fr/web/api/storage/setitem/index.md delete mode 100644 files/fr/web/api/storage_api/index.html create mode 100644 files/fr/web/api/storage_api/index.md delete mode 100644 files/fr/web/api/storageestimate/index.html create mode 100644 files/fr/web/api/storageestimate/index.md delete mode 100644 files/fr/web/api/storagemanager/estimate/index.html create mode 100644 files/fr/web/api/storagemanager/estimate/index.md delete mode 100644 files/fr/web/api/storagemanager/index.html create mode 100644 files/fr/web/api/storagemanager/index.md delete mode 100644 files/fr/web/api/storagemanager/persist/index.html create mode 100644 files/fr/web/api/storagemanager/persist/index.md delete mode 100644 files/fr/web/api/storagemanager/persisted/index.html create mode 100644 files/fr/web/api/storagemanager/persisted/index.md delete mode 100644 files/fr/web/api/streams_api/index.html create mode 100644 files/fr/web/api/streams_api/index.md delete mode 100644 files/fr/web/api/stylesheet/disabled/index.html create mode 100644 files/fr/web/api/stylesheet/disabled/index.md delete mode 100644 files/fr/web/api/stylesheet/href/index.html create mode 100644 files/fr/web/api/stylesheet/href/index.md delete mode 100644 files/fr/web/api/stylesheet/index.html create mode 100644 files/fr/web/api/stylesheet/index.md delete mode 100644 files/fr/web/api/stylesheet/media/index.html create mode 100644 files/fr/web/api/stylesheet/media/index.md delete mode 100644 files/fr/web/api/stylesheet/ownernode/index.html create mode 100644 files/fr/web/api/stylesheet/ownernode/index.md delete mode 100644 files/fr/web/api/stylesheet/parentstylesheet/index.html create mode 100644 files/fr/web/api/stylesheet/parentstylesheet/index.md delete mode 100644 files/fr/web/api/stylesheet/title/index.html create mode 100644 files/fr/web/api/stylesheet/title/index.md delete mode 100644 files/fr/web/api/stylesheet/type/index.html create mode 100644 files/fr/web/api/stylesheet/type/index.md delete mode 100644 files/fr/web/api/stylesheetlist/index.html create mode 100644 files/fr/web/api/stylesheetlist/index.md delete mode 100644 files/fr/web/api/subtlecrypto/digest/index.html create mode 100644 files/fr/web/api/subtlecrypto/digest/index.md delete mode 100644 files/fr/web/api/subtlecrypto/index.html create mode 100644 files/fr/web/api/subtlecrypto/index.md delete mode 100644 files/fr/web/api/svgaelement/index.html create mode 100644 files/fr/web/api/svgaelement/index.md delete mode 100644 files/fr/web/api/svgdescelement/index.html create mode 100644 files/fr/web/api/svgdescelement/index.md delete mode 100644 files/fr/web/api/svgelement/index.html create mode 100644 files/fr/web/api/svgelement/index.md delete mode 100644 files/fr/web/api/svgmatrix/index.html create mode 100644 files/fr/web/api/svgmatrix/index.md delete mode 100644 files/fr/web/api/svgrect/index.html create mode 100644 files/fr/web/api/svgrect/index.md delete mode 100644 files/fr/web/api/svgrectelement/index.html create mode 100644 files/fr/web/api/svgrectelement/index.md delete mode 100644 files/fr/web/api/svgtitleelement/index.html create mode 100644 files/fr/web/api/svgtitleelement/index.md delete mode 100644 files/fr/web/api/syncmanager/index.html create mode 100644 files/fr/web/api/syncmanager/index.md delete mode 100644 files/fr/web/api/text/index.html create mode 100644 files/fr/web/api/text/index.md delete mode 100644 files/fr/web/api/text/splittext/index.html create mode 100644 files/fr/web/api/text/splittext/index.md delete mode 100644 files/fr/web/api/textencoder/index.html create mode 100644 files/fr/web/api/textencoder/index.md delete mode 100644 files/fr/web/api/textencoder/textencoder/index.html create mode 100644 files/fr/web/api/textencoder/textencoder/index.md delete mode 100644 files/fr/web/api/textmetrics/index.html create mode 100644 files/fr/web/api/textmetrics/index.md delete mode 100644 files/fr/web/api/textmetrics/width/index.html create mode 100644 files/fr/web/api/textmetrics/width/index.md delete mode 100644 files/fr/web/api/timeranges/index.html create mode 100644 files/fr/web/api/timeranges/index.md delete mode 100644 files/fr/web/api/touch_events/index.html create mode 100644 files/fr/web/api/touch_events/index.md delete mode 100644 files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html create mode 100644 files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md delete mode 100644 files/fr/web/api/transferable/index.html create mode 100644 files/fr/web/api/transferable/index.md delete mode 100644 files/fr/web/api/transitionevent/index.html create mode 100644 files/fr/web/api/transitionevent/index.md delete mode 100644 files/fr/web/api/treewalker/currentnode/index.html create mode 100644 files/fr/web/api/treewalker/currentnode/index.md delete mode 100644 files/fr/web/api/treewalker/expandentityreferences/index.html create mode 100644 files/fr/web/api/treewalker/expandentityreferences/index.md delete mode 100644 files/fr/web/api/treewalker/filter/index.html create mode 100644 files/fr/web/api/treewalker/filter/index.md delete mode 100644 files/fr/web/api/treewalker/firstchild/index.html create mode 100644 files/fr/web/api/treewalker/firstchild/index.md delete mode 100644 files/fr/web/api/treewalker/index.html create mode 100644 files/fr/web/api/treewalker/index.md delete mode 100644 files/fr/web/api/treewalker/lastchild/index.html create mode 100644 files/fr/web/api/treewalker/lastchild/index.md delete mode 100644 files/fr/web/api/treewalker/nextnode/index.html create mode 100644 files/fr/web/api/treewalker/nextnode/index.md delete mode 100644 files/fr/web/api/treewalker/nextsibling/index.html create mode 100644 files/fr/web/api/treewalker/nextsibling/index.md delete mode 100644 files/fr/web/api/treewalker/parentnode/index.html create mode 100644 files/fr/web/api/treewalker/parentnode/index.md delete mode 100644 files/fr/web/api/treewalker/previousnode/index.html create mode 100644 files/fr/web/api/treewalker/previousnode/index.md delete mode 100644 files/fr/web/api/treewalker/previoussibling/index.html create mode 100644 files/fr/web/api/treewalker/previoussibling/index.md delete mode 100644 files/fr/web/api/treewalker/root/index.html create mode 100644 files/fr/web/api/treewalker/root/index.md delete mode 100644 files/fr/web/api/treewalker/whattoshow/index.html create mode 100644 files/fr/web/api/treewalker/whattoshow/index.md delete mode 100644 files/fr/web/api/uievent/detail/index.html create mode 100644 files/fr/web/api/uievent/detail/index.md delete mode 100644 files/fr/web/api/uievent/index.html create mode 100644 files/fr/web/api/uievent/index.md delete mode 100644 files/fr/web/api/uievent/layerx/index.html create mode 100644 files/fr/web/api/uievent/layerx/index.md delete mode 100644 files/fr/web/api/url/createobjecturl/index.html create mode 100644 files/fr/web/api/url/createobjecturl/index.md delete mode 100644 files/fr/web/api/url/hash/index.html create mode 100644 files/fr/web/api/url/hash/index.md delete mode 100644 files/fr/web/api/url/index.html create mode 100644 files/fr/web/api/url/index.md delete mode 100644 files/fr/web/api/url/protocol/index.html create mode 100644 files/fr/web/api/url/protocol/index.md delete mode 100644 files/fr/web/api/url/revokeobjecturl/index.html create mode 100644 files/fr/web/api/url/revokeobjecturl/index.md delete mode 100644 files/fr/web/api/url/search/index.html create mode 100644 files/fr/web/api/url/search/index.md delete mode 100644 files/fr/web/api/url/searchparams/index.html create mode 100644 files/fr/web/api/url/searchparams/index.md delete mode 100644 files/fr/web/api/url/tojson/index.html create mode 100644 files/fr/web/api/url/tojson/index.md delete mode 100644 files/fr/web/api/url/tostring/index.html create mode 100644 files/fr/web/api/url/tostring/index.md delete mode 100644 files/fr/web/api/url/url/index.html create mode 100644 files/fr/web/api/url/url/index.md delete mode 100644 files/fr/web/api/urlsearchparams/entries/index.html create mode 100644 files/fr/web/api/urlsearchparams/entries/index.md delete mode 100644 files/fr/web/api/urlsearchparams/index.html create mode 100644 files/fr/web/api/urlsearchparams/index.md delete mode 100644 files/fr/web/api/usvstring/index.html create mode 100644 files/fr/web/api/usvstring/index.md delete mode 100644 files/fr/web/api/vibration_api/index.html create mode 100644 files/fr/web/api/vibration_api/index.md delete mode 100644 files/fr/web/api/videotrack/id/index.html create mode 100644 files/fr/web/api/videotrack/id/index.md delete mode 100644 files/fr/web/api/videotrack/index.html create mode 100644 files/fr/web/api/videotrack/index.md delete mode 100644 files/fr/web/api/vrdisplaycapabilities/index.html create mode 100644 files/fr/web/api/vrdisplaycapabilities/index.md delete mode 100644 files/fr/web/api/web_animations_api/index.html create mode 100644 files/fr/web/api/web_animations_api/index.md delete mode 100644 files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html create mode 100644 files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md delete mode 100644 files/fr/web/api/web_audio_api/index.html create mode 100644 files/fr/web/api/web_audio_api/index.md delete mode 100644 files/fr/web/api/web_audio_api/using_web_audio_api/index.html create mode 100644 files/fr/web/api/web_audio_api/using_web_audio_api/index.md delete mode 100644 files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html create mode 100644 files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md delete mode 100644 files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html create mode 100644 files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md delete mode 100644 files/fr/web/api/web_speech_api/index.html create mode 100644 files/fr/web/api/web_speech_api/index.md delete mode 100644 files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html create mode 100644 files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md delete mode 100644 files/fr/web/api/web_storage_api/index.html create mode 100644 files/fr/web/api/web_storage_api/index.md delete mode 100644 files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html create mode 100644 files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md delete 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/functions_and_classes_available_to_workers/index.md delete mode 100644 files/fr/web/api/web_workers_api/index.html create mode 100644 files/fr/web/api/web_workers_api/index.md delete mode 100644 files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html create mode 100644 files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md delete mode 100644 files/fr/web/api/web_workers_api/using_web_workers/index.html create mode 100644 files/fr/web/api/web_workers_api/using_web_workers/index.md delete mode 100644 files/fr/web/api/webgl2renderingcontext/index.html create mode 100644 files/fr/web/api/webgl2renderingcontext/index.md delete 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/basic_scissoring/index.md delete 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/boilerplate_1/index.md delete 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/canvas_size_and_webgl/index.md delete 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_by_clicking/index.md delete 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/clearing_with_colors/index.md delete mode 100644 files/fr/web/api/webgl_api/by_example/color_masking/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/color_masking/index.md delete mode 100644 files/fr/web/api/webgl_api/by_example/detect_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/detect_webgl/index.md delete mode 100644 files/fr/web/api/webgl_api/by_example/hello_glsl/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/hello_glsl/index.md delete mode 100644 files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md delete mode 100644 files/fr/web/api/webgl_api/by_example/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/index.md delete 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/raining_rectangles/index.md delete 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/scissor_animation/index.md delete mode 100644 files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md delete mode 100644 files/fr/web/api/webgl_api/by_example/textures_from_code/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/textures_from_code/index.md delete mode 100644 files/fr/web/api/webgl_api/by_example/video_textures/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/video_textures/index.md delete mode 100644 files/fr/web/api/webgl_api/data/index.html create mode 100644 files/fr/web/api/webgl_api/data/index.md delete mode 100644 files/fr/web/api/webgl_api/index.html create mode 100644 files/fr/web/api/webgl_api/index.md delete mode 100644 files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md delete 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_objects_with_webgl/index.md delete mode 100644 files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md delete mode 100644 files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md delete 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/getting_started_with_webgl/index.md delete mode 100644 files/fr/web/api/webgl_api/tutorial/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/index.md delete mode 100644 files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md delete 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_shaders_to_apply_color_in_webgl/index.md delete mode 100644 files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md delete mode 100644 files/fr/web/api/webgl_api/types/index.html create mode 100644 files/fr/web/api/webgl_api/types/index.md delete mode 100644 files/fr/web/api/webglbuffer/index.html create mode 100644 files/fr/web/api/webglbuffer/index.md delete mode 100644 files/fr/web/api/webglframebuffer/index.html create mode 100644 files/fr/web/api/webglframebuffer/index.md delete mode 100644 files/fr/web/api/webglprogram/index.html create mode 100644 files/fr/web/api/webglprogram/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/activetexture/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/activetexture/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/attachshader/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/attachshader/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/bindbuffer/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/bindbuffer/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/bindtexture/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/bindtexture/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/bufferdata/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/bufferdata/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/canvas/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/canvas/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/clear/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/clear/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/compileshader/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/compileshader/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/createbuffer/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/createbuffer/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/createprogram/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/createprogram/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/createshader/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/createshader/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/createtexture/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/createtexture/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/deletebuffer/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/deletebuffer/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/deleteshader/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/deleteshader/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/drawarrays/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/drawarrays/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/enable/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/enable/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/generatemipmap/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/generatemipmap/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/getattriblocation/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/getattriblocation/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/geterror/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/geterror/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/gettexparameter/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/gettexparameter/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/isbuffer/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/isbuffer/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/shadersource/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/shadersource/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/teximage2d/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/teximage2d/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/texparameter/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/texparameter/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/uniform/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/uniform/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/useprogram/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/useprogram/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md delete mode 100644 files/fr/web/api/webglrenderingcontext/viewport/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/viewport/index.md delete mode 100644 files/fr/web/api/webglshader/index.html create mode 100644 files/fr/web/api/webglshader/index.md delete mode 100644 files/fr/web/api/webgltexture/index.html create mode 100644 files/fr/web/api/webgltexture/index.md delete mode 100644 files/fr/web/api/webrtc_api/connectivity/index.html create mode 100644 files/fr/web/api/webrtc_api/connectivity/index.md delete mode 100644 files/fr/web/api/webrtc_api/index.html create mode 100644 files/fr/web/api/webrtc_api/index.md delete mode 100644 files/fr/web/api/webrtc_api/session_lifetime/index.html create mode 100644 files/fr/web/api/webrtc_api/session_lifetime/index.md delete mode 100644 files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html create mode 100644 files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md delete mode 100644 files/fr/web/api/webrtc_api/taking_still_photos/index.html create mode 100644 files/fr/web/api/webrtc_api/taking_still_photos/index.md delete mode 100644 files/fr/web/api/websocket/binarytype/index.html create mode 100644 files/fr/web/api/websocket/binarytype/index.md delete mode 100644 files/fr/web/api/websocket/bufferedamount/index.html create mode 100644 files/fr/web/api/websocket/bufferedamount/index.md delete mode 100644 files/fr/web/api/websocket/close/index.html create mode 100644 files/fr/web/api/websocket/close/index.md delete mode 100644 files/fr/web/api/websocket/close_event/index.html create mode 100644 files/fr/web/api/websocket/close_event/index.md delete mode 100644 files/fr/web/api/websocket/error_event/index.html create mode 100644 files/fr/web/api/websocket/error_event/index.md delete mode 100644 files/fr/web/api/websocket/extensions/index.html create mode 100644 files/fr/web/api/websocket/extensions/index.md delete mode 100644 files/fr/web/api/websocket/index.html create mode 100644 files/fr/web/api/websocket/index.md delete mode 100644 files/fr/web/api/websocket/message_event/index.html create mode 100644 files/fr/web/api/websocket/message_event/index.md delete mode 100644 files/fr/web/api/websocket/onclose/index.html create mode 100644 files/fr/web/api/websocket/onclose/index.md delete mode 100644 files/fr/web/api/websocket/onerror/index.html create mode 100644 files/fr/web/api/websocket/onerror/index.md delete mode 100644 files/fr/web/api/websocket/onmessage/index.html create mode 100644 files/fr/web/api/websocket/onmessage/index.md delete mode 100644 files/fr/web/api/websocket/onopen/index.html create mode 100644 files/fr/web/api/websocket/onopen/index.md delete mode 100644 files/fr/web/api/websocket/open_event/index.html create mode 100644 files/fr/web/api/websocket/open_event/index.md delete mode 100644 files/fr/web/api/websocket/protocol/index.html create mode 100644 files/fr/web/api/websocket/protocol/index.md delete mode 100644 files/fr/web/api/websocket/readystate/index.html create mode 100644 files/fr/web/api/websocket/readystate/index.md delete mode 100644 files/fr/web/api/websocket/send/index.html create mode 100644 files/fr/web/api/websocket/send/index.md delete mode 100644 files/fr/web/api/websocket/url/index.html create mode 100644 files/fr/web/api/websocket/url/index.md delete mode 100644 files/fr/web/api/websocket/websocket/index.html create mode 100644 files/fr/web/api/websocket/websocket/index.md delete mode 100644 files/fr/web/api/websockets_api/index.html create mode 100644 files/fr/web/api/websockets_api/index.md delete mode 100644 files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html create mode 100644 files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md delete mode 100644 files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html create mode 100644 files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md delete mode 100644 files/fr/web/api/websockets_api/writing_websocket_servers/index.html create mode 100644 files/fr/web/api/websockets_api/writing_websocket_servers/index.md delete mode 100644 files/fr/web/api/webvr_api/index.html create mode 100644 files/fr/web/api/webvr_api/index.md delete mode 100644 files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html create mode 100644 files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md delete mode 100644 files/fr/web/api/webvtt_api/index.html create mode 100644 files/fr/web/api/webvtt_api/index.md delete mode 100644 files/fr/web/api/webxr_device_api/index.html create mode 100644 files/fr/web/api/webxr_device_api/index.md delete mode 100644 files/fr/web/api/wheelevent/deltax/index.html create mode 100644 files/fr/web/api/wheelevent/deltax/index.md delete mode 100644 files/fr/web/api/wheelevent/deltay/index.html create mode 100644 files/fr/web/api/wheelevent/deltay/index.md delete mode 100644 files/fr/web/api/wheelevent/deltaz/index.html create mode 100644 files/fr/web/api/wheelevent/deltaz/index.md delete mode 100644 files/fr/web/api/wheelevent/index.html create mode 100644 files/fr/web/api/wheelevent/index.md delete mode 100644 files/fr/web/api/window/afterprint_event/index.html create mode 100644 files/fr/web/api/window/afterprint_event/index.md delete mode 100644 files/fr/web/api/window/alert/index.html create mode 100644 files/fr/web/api/window/alert/index.md delete mode 100644 files/fr/web/api/window/applicationcache/index.html create mode 100644 files/fr/web/api/window/applicationcache/index.md delete mode 100644 files/fr/web/api/window/back/index.html create mode 100644 files/fr/web/api/window/back/index.md delete mode 100644 files/fr/web/api/window/beforeprint_event/index.html create mode 100644 files/fr/web/api/window/beforeprint_event/index.md delete mode 100644 files/fr/web/api/window/beforeunload_event/index.html create mode 100644 files/fr/web/api/window/beforeunload_event/index.md delete mode 100644 files/fr/web/api/window/blur/index.html create mode 100644 files/fr/web/api/window/blur/index.md delete mode 100644 files/fr/web/api/window/cancelanimationframe/index.html create mode 100644 files/fr/web/api/window/cancelanimationframe/index.md delete mode 100644 files/fr/web/api/window/cancelidlecallback/index.html create mode 100644 files/fr/web/api/window/cancelidlecallback/index.md delete mode 100644 files/fr/web/api/window/captureevents/index.html create mode 100644 files/fr/web/api/window/captureevents/index.md delete mode 100644 files/fr/web/api/window/clearimmediate/index.html create mode 100644 files/fr/web/api/window/clearimmediate/index.md delete mode 100644 files/fr/web/api/window/close/index.html create mode 100644 files/fr/web/api/window/close/index.md delete mode 100644 files/fr/web/api/window/closed/index.html create mode 100644 files/fr/web/api/window/closed/index.md delete mode 100644 files/fr/web/api/window/confirm/index.html create mode 100644 files/fr/web/api/window/confirm/index.md delete mode 100644 files/fr/web/api/window/console/index.html create mode 100644 files/fr/web/api/window/console/index.md delete mode 100644 files/fr/web/api/window/content/index.html create mode 100644 files/fr/web/api/window/content/index.md delete mode 100644 files/fr/web/api/window/controllers/index.html create mode 100644 files/fr/web/api/window/controllers/index.md delete mode 100644 files/fr/web/api/window/copy_event/index.html create mode 100644 files/fr/web/api/window/copy_event/index.md delete mode 100644 files/fr/web/api/window/customelements/index.html create mode 100644 files/fr/web/api/window/customelements/index.md delete mode 100644 files/fr/web/api/window/cut_event/index.html create mode 100644 files/fr/web/api/window/cut_event/index.md delete mode 100644 files/fr/web/api/window/defaultstatus/index.html create mode 100644 files/fr/web/api/window/defaultstatus/index.md delete mode 100644 files/fr/web/api/window/devicemotion_event/index.html create mode 100644 files/fr/web/api/window/devicemotion_event/index.md delete mode 100644 files/fr/web/api/window/deviceorientation_event/index.html create mode 100644 files/fr/web/api/window/deviceorientation_event/index.md delete mode 100644 files/fr/web/api/window/devicepixelratio/index.html create mode 100644 files/fr/web/api/window/devicepixelratio/index.md delete mode 100644 files/fr/web/api/window/dialogarguments/index.html create mode 100644 files/fr/web/api/window/dialogarguments/index.md delete mode 100644 files/fr/web/api/window/directories/index.html create mode 100644 files/fr/web/api/window/directories/index.md delete mode 100644 files/fr/web/api/window/document/index.html create mode 100644 files/fr/web/api/window/document/index.md delete mode 100644 files/fr/web/api/window/domcontentloaded_event/index.html create mode 100644 files/fr/web/api/window/domcontentloaded_event/index.md delete mode 100644 files/fr/web/api/window/dump/index.html create mode 100644 files/fr/web/api/window/dump/index.md delete mode 100644 files/fr/web/api/window/event/index.html create mode 100644 files/fr/web/api/window/event/index.md delete mode 100644 files/fr/web/api/window/find/index.html create mode 100644 files/fr/web/api/window/find/index.md delete mode 100644 files/fr/web/api/window/focus/index.html create mode 100644 files/fr/web/api/window/focus/index.md delete mode 100644 files/fr/web/api/window/frameelement/index.html create mode 100644 files/fr/web/api/window/frameelement/index.md delete mode 100644 files/fr/web/api/window/frames/index.html create mode 100644 files/fr/web/api/window/frames/index.md delete mode 100644 files/fr/web/api/window/fullscreen/index.html create mode 100644 files/fr/web/api/window/fullscreen/index.md delete mode 100644 files/fr/web/api/window/gamepadconnected_event/index.html create mode 100644 files/fr/web/api/window/gamepadconnected_event/index.md delete mode 100644 files/fr/web/api/window/gamepaddisconnected_event/index.html create mode 100644 files/fr/web/api/window/gamepaddisconnected_event/index.md delete mode 100644 files/fr/web/api/window/getcomputedstyle/index.html create mode 100644 files/fr/web/api/window/getcomputedstyle/index.md delete mode 100644 files/fr/web/api/window/getdefaultcomputedstyle/index.html create mode 100644 files/fr/web/api/window/getdefaultcomputedstyle/index.md delete mode 100644 files/fr/web/api/window/getselection/index.html create mode 100644 files/fr/web/api/window/getselection/index.md delete mode 100644 files/fr/web/api/window/hashchange_event/index.html create mode 100644 files/fr/web/api/window/hashchange_event/index.md delete mode 100644 files/fr/web/api/window/history/index.html create mode 100644 files/fr/web/api/window/history/index.md delete mode 100644 files/fr/web/api/window/home/index.html create mode 100644 files/fr/web/api/window/home/index.md delete mode 100644 files/fr/web/api/window/index.html create mode 100644 files/fr/web/api/window/index.md delete mode 100644 files/fr/web/api/window/innerheight/index.html create mode 100644 files/fr/web/api/window/innerheight/index.md delete mode 100644 files/fr/web/api/window/innerwidth/index.html create mode 100644 files/fr/web/api/window/innerwidth/index.md delete mode 100644 files/fr/web/api/window/issecurecontext/index.html create mode 100644 files/fr/web/api/window/issecurecontext/index.md delete mode 100644 files/fr/web/api/window/languagechange_event/index.html create mode 100644 files/fr/web/api/window/languagechange_event/index.md delete mode 100644 files/fr/web/api/window/length/index.html create mode 100644 files/fr/web/api/window/length/index.md delete mode 100644 files/fr/web/api/window/load_event/index.html create mode 100644 files/fr/web/api/window/load_event/index.md delete mode 100644 files/fr/web/api/window/localstorage/index.html create mode 100644 files/fr/web/api/window/localstorage/index.md delete mode 100644 files/fr/web/api/window/location/index.html create mode 100644 files/fr/web/api/window/location/index.md delete mode 100644 files/fr/web/api/window/locationbar/index.html create mode 100644 files/fr/web/api/window/locationbar/index.md delete mode 100644 files/fr/web/api/window/matchmedia/index.html create mode 100644 files/fr/web/api/window/matchmedia/index.md delete mode 100644 files/fr/web/api/window/menubar/index.html create mode 100644 files/fr/web/api/window/menubar/index.md delete mode 100644 files/fr/web/api/window/message_event/index.html create mode 100644 files/fr/web/api/window/message_event/index.md delete mode 100644 files/fr/web/api/window/messageerror_event/index.html create mode 100644 files/fr/web/api/window/messageerror_event/index.md delete mode 100644 files/fr/web/api/window/mozinnerscreenx/index.html create mode 100644 files/fr/web/api/window/mozinnerscreenx/index.md delete mode 100644 files/fr/web/api/window/mozinnerscreeny/index.html create mode 100644 files/fr/web/api/window/mozinnerscreeny/index.md delete mode 100644 files/fr/web/api/window/mozpaintcount/index.html create mode 100644 files/fr/web/api/window/mozpaintcount/index.md delete mode 100644 files/fr/web/api/window/name/index.html create mode 100644 files/fr/web/api/window/name/index.md delete mode 100644 files/fr/web/api/window/navigator/index.html create mode 100644 files/fr/web/api/window/navigator/index.md delete mode 100644 files/fr/web/api/window/offline_event/index.html create mode 100644 files/fr/web/api/window/offline_event/index.md delete mode 100644 files/fr/web/api/window/online_event/index.html create mode 100644 files/fr/web/api/window/online_event/index.md delete mode 100644 files/fr/web/api/window/onpaint/index.html create mode 100644 files/fr/web/api/window/onpaint/index.md delete mode 100644 files/fr/web/api/window/open/index.html create mode 100644 files/fr/web/api/window/open/index.md delete mode 100644 files/fr/web/api/window/opendialog/index.html create mode 100644 files/fr/web/api/window/opendialog/index.md delete mode 100644 files/fr/web/api/window/opener/index.html create mode 100644 files/fr/web/api/window/opener/index.md delete mode 100644 files/fr/web/api/window/orientation/index.html create mode 100644 files/fr/web/api/window/orientation/index.md delete mode 100644 files/fr/web/api/window/outerheight/index.html create mode 100644 files/fr/web/api/window/outerheight/index.md delete mode 100644 files/fr/web/api/window/outerwidth/index.html create mode 100644 files/fr/web/api/window/outerwidth/index.md delete mode 100644 files/fr/web/api/window/pagehide_event/index.html create mode 100644 files/fr/web/api/window/pagehide_event/index.md delete mode 100644 files/fr/web/api/window/pageshow_event/index.html create mode 100644 files/fr/web/api/window/pageshow_event/index.md delete mode 100644 files/fr/web/api/window/parent/index.html create mode 100644 files/fr/web/api/window/parent/index.md delete mode 100644 files/fr/web/api/window/paste_event/index.html create mode 100644 files/fr/web/api/window/paste_event/index.md delete mode 100644 files/fr/web/api/window/popstate_event/index.html create mode 100644 files/fr/web/api/window/popstate_event/index.md delete mode 100644 files/fr/web/api/window/postmessage/index.html create mode 100644 files/fr/web/api/window/postmessage/index.md delete mode 100644 files/fr/web/api/window/print/index.html create mode 100644 files/fr/web/api/window/print/index.md delete mode 100644 files/fr/web/api/window/prompt/index.html create mode 100644 files/fr/web/api/window/prompt/index.md delete mode 100644 files/fr/web/api/window/rejectionhandled_event/index.html create mode 100644 files/fr/web/api/window/rejectionhandled_event/index.md delete mode 100644 files/fr/web/api/window/requestanimationframe/index.html create mode 100644 files/fr/web/api/window/requestanimationframe/index.md delete mode 100644 files/fr/web/api/window/requestidlecallback/index.html create mode 100644 files/fr/web/api/window/requestidlecallback/index.md delete mode 100644 files/fr/web/api/window/resizeby/index.html create mode 100644 files/fr/web/api/window/resizeby/index.md delete mode 100644 files/fr/web/api/window/screen/index.html create mode 100644 files/fr/web/api/window/screen/index.md delete mode 100644 files/fr/web/api/window/screenx/index.html create mode 100644 files/fr/web/api/window/screenx/index.md delete mode 100644 files/fr/web/api/window/scroll/index.html create mode 100644 files/fr/web/api/window/scroll/index.md delete mode 100644 files/fr/web/api/window/scrollbars/index.html create mode 100644 files/fr/web/api/window/scrollbars/index.md delete mode 100644 files/fr/web/api/window/scrollby/index.html create mode 100644 files/fr/web/api/window/scrollby/index.md delete mode 100644 files/fr/web/api/window/scrollbylines/index.html create mode 100644 files/fr/web/api/window/scrollbylines/index.md delete mode 100644 files/fr/web/api/window/scrollbypages/index.html create mode 100644 files/fr/web/api/window/scrollbypages/index.md delete mode 100644 files/fr/web/api/window/scrollto/index.html create mode 100644 files/fr/web/api/window/scrollto/index.md delete mode 100644 files/fr/web/api/window/scrolly/index.html create mode 100644 files/fr/web/api/window/scrolly/index.md delete mode 100644 files/fr/web/api/window/sessionstorage/index.html create mode 100644 files/fr/web/api/window/sessionstorage/index.md delete mode 100644 files/fr/web/api/window/showmodaldialog/index.html create mode 100644 files/fr/web/api/window/showmodaldialog/index.md delete mode 100644 files/fr/web/api/window/stop/index.html create mode 100644 files/fr/web/api/window/stop/index.md delete mode 100644 files/fr/web/api/window/storage_event/index.html create mode 100644 files/fr/web/api/window/storage_event/index.md delete mode 100644 files/fr/web/api/window/top/index.html create mode 100644 files/fr/web/api/window/top/index.md delete mode 100644 files/fr/web/api/window/unload_event/index.html create mode 100644 files/fr/web/api/window/unload_event/index.md delete mode 100644 files/fr/web/api/window/vrdisplayconnect_event/index.html create mode 100644 files/fr/web/api/window/vrdisplayconnect_event/index.md delete mode 100644 files/fr/web/api/window/vrdisplaydisconnect_event/index.html create mode 100644 files/fr/web/api/window/vrdisplaydisconnect_event/index.md delete mode 100644 files/fr/web/api/window/vrdisplaypresentchange_event/index.html create mode 100644 files/fr/web/api/window/vrdisplaypresentchange_event/index.md delete mode 100644 files/fr/web/api/windowclient/focus/index.html create mode 100644 files/fr/web/api/windowclient/focus/index.md delete mode 100644 files/fr/web/api/windowclient/focused/index.html create mode 100644 files/fr/web/api/windowclient/focused/index.md delete mode 100644 files/fr/web/api/windowclient/index.html create mode 100644 files/fr/web/api/windowclient/index.md delete mode 100644 files/fr/web/api/windowclient/navigate/index.html create mode 100644 files/fr/web/api/windowclient/navigate/index.md delete mode 100644 files/fr/web/api/windowclient/visibilitystate/index.html create mode 100644 files/fr/web/api/windowclient/visibilitystate/index.md delete mode 100644 files/fr/web/api/windoweventhandlers/index.html create mode 100644 files/fr/web/api/windoweventhandlers/index.md delete mode 100644 files/fr/web/api/windoweventhandlers/onafterprint/index.html create mode 100644 files/fr/web/api/windoweventhandlers/onafterprint/index.md delete mode 100644 files/fr/web/api/windoweventhandlers/onbeforeprint/index.html create mode 100644 files/fr/web/api/windoweventhandlers/onbeforeprint/index.md delete mode 100644 files/fr/web/api/windoweventhandlers/onbeforeunload/index.html create mode 100644 files/fr/web/api/windoweventhandlers/onbeforeunload/index.md delete mode 100644 files/fr/web/api/windoweventhandlers/onhashchange/index.html create mode 100644 files/fr/web/api/windoweventhandlers/onhashchange/index.md delete mode 100644 files/fr/web/api/windoweventhandlers/onlanguagechange/index.html create mode 100644 files/fr/web/api/windoweventhandlers/onlanguagechange/index.md delete mode 100644 files/fr/web/api/windoweventhandlers/onpopstate/index.html create mode 100644 files/fr/web/api/windoweventhandlers/onpopstate/index.md delete mode 100644 files/fr/web/api/windoweventhandlers/onunload/index.html create mode 100644 files/fr/web/api/windoweventhandlers/onunload/index.md delete mode 100644 files/fr/web/api/windoworworkerglobalscope/index.html create mode 100644 files/fr/web/api/windoworworkerglobalscope/index.md delete mode 100644 files/fr/web/api/worker/index.html create mode 100644 files/fr/web/api/worker/index.md delete mode 100644 files/fr/web/api/worker/onmessage/index.html create mode 100644 files/fr/web/api/worker/onmessage/index.md delete mode 100644 files/fr/web/api/worker/postmessage/index.html create mode 100644 files/fr/web/api/worker/postmessage/index.md delete mode 100644 files/fr/web/api/worker/terminate/index.html create mode 100644 files/fr/web/api/worker/terminate/index.md delete mode 100644 files/fr/web/api/worker/worker/index.html create mode 100644 files/fr/web/api/worker/worker/index.md delete mode 100644 files/fr/web/api/workerglobalscope/console/index.html create mode 100644 files/fr/web/api/workerglobalscope/console/index.md delete mode 100644 files/fr/web/api/workerglobalscope/dump/index.html create mode 100644 files/fr/web/api/workerglobalscope/dump/index.md delete mode 100644 files/fr/web/api/workerglobalscope/importscripts/index.html create mode 100644 files/fr/web/api/workerglobalscope/importscripts/index.md delete mode 100644 files/fr/web/api/workerglobalscope/index.html create mode 100644 files/fr/web/api/workerglobalscope/index.md delete mode 100644 files/fr/web/api/workerglobalscope/location/index.html create mode 100644 files/fr/web/api/workerglobalscope/location/index.md delete mode 100644 files/fr/web/api/workerglobalscope/navigator/index.html create mode 100644 files/fr/web/api/workerglobalscope/navigator/index.md delete mode 100644 files/fr/web/api/workerglobalscope/onerror/index.html create mode 100644 files/fr/web/api/workerglobalscope/onerror/index.md delete mode 100644 files/fr/web/api/workerglobalscope/onlanguagechange/index.html create mode 100644 files/fr/web/api/workerglobalscope/onlanguagechange/index.md delete mode 100644 files/fr/web/api/workerglobalscope/onoffline/index.html create mode 100644 files/fr/web/api/workerglobalscope/onoffline/index.md delete mode 100644 files/fr/web/api/workerglobalscope/ononline/index.html create mode 100644 files/fr/web/api/workerglobalscope/ononline/index.md delete mode 100644 files/fr/web/api/workerglobalscope/self/index.html create mode 100644 files/fr/web/api/workerglobalscope/self/index.md delete mode 100644 files/fr/web/api/workerlocation/index.html create mode 100644 files/fr/web/api/workerlocation/index.md delete mode 100644 files/fr/web/api/xmldocument/async/index.html create mode 100644 files/fr/web/api/xmldocument/async/index.md delete mode 100644 files/fr/web/api/xmldocument/index.html create mode 100644 files/fr/web/api/xmldocument/index.md delete mode 100644 files/fr/web/api/xmldocument/load/index.html create mode 100644 files/fr/web/api/xmldocument/load/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/abort_event/index.html create mode 100644 files/fr/web/api/xmlhttprequest/abort_event/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/index.html create mode 100644 files/fr/web/api/xmlhttprequest/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/onreadystatechange/index.html create mode 100644 files/fr/web/api/xmlhttprequest/onreadystatechange/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/open/index.html create mode 100644 files/fr/web/api/xmlhttprequest/open/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/readystate/index.html create mode 100644 files/fr/web/api/xmlhttprequest/readystate/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/response/index.html create mode 100644 files/fr/web/api/xmlhttprequest/response/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/responsetext/index.html create mode 100644 files/fr/web/api/xmlhttprequest/responsetext/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/send/index.html create mode 100644 files/fr/web/api/xmlhttprequest/send/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/setrequestheader/index.html create mode 100644 files/fr/web/api/xmlhttprequest/setrequestheader/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/status/index.html create mode 100644 files/fr/web/api/xmlhttprequest/status/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/timeout/index.html create mode 100644 files/fr/web/api/xmlhttprequest/timeout/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html create mode 100644 files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/withcredentials/index.html create mode 100644 files/fr/web/api/xmlhttprequest/withcredentials/index.md delete mode 100644 files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html create mode 100644 files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md delete mode 100644 files/fr/web/api/xmlhttprequesteventtarget/index.html create mode 100644 files/fr/web/api/xmlhttprequesteventtarget/index.md delete mode 100644 files/fr/web/api/xmlhttprequesteventtarget/onload/index.html create mode 100644 files/fr/web/api/xmlhttprequesteventtarget/onload/index.md delete mode 100644 files/fr/web/api/xmlserializer/index.html create mode 100644 files/fr/web/api/xmlserializer/index.md delete mode 100644 files/fr/web/api/xpathexpression/index.html create mode 100644 files/fr/web/api/xpathexpression/index.md delete mode 100644 files/fr/web/api/xsltprocessor/basic_example/index.html create mode 100644 files/fr/web/api/xsltprocessor/basic_example/index.md delete mode 100644 files/fr/web/api/xsltprocessor/browser_differences/index.html create mode 100644 files/fr/web/api/xsltprocessor/browser_differences/index.md delete mode 100644 files/fr/web/api/xsltprocessor/generating_html/index.html create mode 100644 files/fr/web/api/xsltprocessor/generating_html/index.md delete mode 100644 files/fr/web/api/xsltprocessor/index.html create mode 100644 files/fr/web/api/xsltprocessor/index.md delete mode 100644 files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html create mode 100644 files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md (limited to 'files/fr/web/api') diff --git a/files/fr/web/api/abortsignal/index.html b/files/fr/web/api/abortsignal/index.html deleted file mode 100644 index 11a48ef3d1..0000000000 --- a/files/fr/web/api/abortsignal/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: AbortSignal -slug: Web/API/AbortSignal -tags: - - API - - AbortSignal - - DOM - - Interfaces - - Reference -translation_of: Web/API/AbortSignal ---- -
{{APIRef("DOM")}}{{SeeCompatTable}}
- -

L'interface AbortSignal représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet {{domxref("AbortController")}}.

- -

Propriétés

- -

L'interface AbortSignal hérite des propriétés de son interface parent {{domxref("EventTarget")}}.

- -
-
{{domxref("AbortSignal.aborted")}} {{readonlyInline}}
-
Un {{domxref("Boolean")}} (booléen) qui indique si les requêtes avec lesquelles le signal communique sont annulées (true) ou non (false).
-
- -

Gestionnaire d'évènement

- -
-
{{domxref("AbortSignal.onabort")}}
-
appelé quand un évènement {{event("abort_(dom_abort_api)", "abort")}} est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées.
-
- -

Méthodes

- -

L'interface AbortSignal hérite des méthodes de son interface parent {{domxref("EventTarget")}}.

- -

Exemples

- -

Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'API Fetch.

- -

Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}.

- -

Lorsque la  requête fetch (extraction) est lancée, nous transmettons le paramètre AbortSignal en tant qu'option dans l'objet d'options de la requête (voir {signal} ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements.

- -
var controller = new AbortController();
-var signal = controller.signal;
-
-var downloadBtn = document.querySelector('.download');
-var abortBtn = document.querySelector('.abort');
-
-downloadBtn.addEventListener('click', fetchVideo);
-
-abortBtn.addEventListener('click', function() {
-  controller.abort();
-  console.log('Download aborted');
-});
-
-function fetchVideo() {
-  ...
-  fetch(url, {signal}).then(function(response) {
-    ...
-  }).catch(function(e) {
-    reports.textContent = 'Download error: ' + e.message;
-  })
-}
- -
-

Note : Lorsque abort() est appelé, la réponse fetch() rejette avec une erreur AbortError.

-
- -

vous pouvez trouver un exemple de travail complet sur GitHub — voir abort-api (voir cas d'usage concret).

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.AbortSignal")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/abortsignal/index.md b/files/fr/web/api/abortsignal/index.md new file mode 100644 index 0000000000..11a48ef3d1 --- /dev/null +++ b/files/fr/web/api/abortsignal/index.md @@ -0,0 +1,98 @@ +--- +title: AbortSignal +slug: Web/API/AbortSignal +tags: + - API + - AbortSignal + - DOM + - Interfaces + - Reference +translation_of: Web/API/AbortSignal +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

L'interface AbortSignal représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet {{domxref("AbortController")}}.

+ +

Propriétés

+ +

L'interface AbortSignal hérite des propriétés de son interface parent {{domxref("EventTarget")}}.

+ +
+
{{domxref("AbortSignal.aborted")}} {{readonlyInline}}
+
Un {{domxref("Boolean")}} (booléen) qui indique si les requêtes avec lesquelles le signal communique sont annulées (true) ou non (false).
+
+ +

Gestionnaire d'évènement

+ +
+
{{domxref("AbortSignal.onabort")}}
+
appelé quand un évènement {{event("abort_(dom_abort_api)", "abort")}} est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées.
+
+ +

Méthodes

+ +

L'interface AbortSignal hérite des méthodes de son interface parent {{domxref("EventTarget")}}.

+ +

Exemples

+ +

Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'API Fetch.

+ +

Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}.

+ +

Lorsque la  requête fetch (extraction) est lancée, nous transmettons le paramètre AbortSignal en tant qu'option dans l'objet d'options de la requête (voir {signal} ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements.

+ +
var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}
+ +
+

Note : Lorsque abort() est appelé, la réponse fetch() rejette avec une erreur AbortError.

+
+ +

vous pouvez trouver un exemple de travail complet sur GitHub — voir abort-api (voir cas d'usage concret).

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AbortSignal")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/analysernode/analysernode/index.html b/files/fr/web/api/analysernode/analysernode/index.html deleted file mode 100644 index a10fd3ee15..0000000000 --- a/files/fr/web/api/analysernode/analysernode/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: AnalyserNode() -slug: Web/API/AnalyserNode/AnalyserNode -translation_of: Web/API/AnalyserNode/AnalyserNode ---- -

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

- -

Le constructeur AnalyserNode crée un nouvel objet {{domxref("AnalyserNode")}}.

- -

Syntax

- -
var analyserNode = new AnalyserNode(context, options)
- -

Paramètres

- -
-
context
-
Référence à un {{domxref("AudioContext")}}.
-
options {{optional_inline}}
-

Un objet avec les propriétés suivantes :

-
    -
  • fftSize: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048.
    • -
  • maxDecibels: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30.
    • -
  • minDecibels: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100.
    • -
  • smoothingTimeConstant:  valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8
    • -
-
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}}{{Spec2('Web Audio API')}}Première définition.
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.AnalyserNode")}}

diff --git a/files/fr/web/api/analysernode/analysernode/index.md b/files/fr/web/api/analysernode/analysernode/index.md new file mode 100644 index 0000000000..a10fd3ee15 --- /dev/null +++ b/files/fr/web/api/analysernode/analysernode/index.md @@ -0,0 +1,49 @@ +--- +title: AnalyserNode() +slug: Web/API/AnalyserNode/AnalyserNode +translation_of: Web/API/AnalyserNode/AnalyserNode +--- +

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

+ +

Le constructeur AnalyserNode crée un nouvel objet {{domxref("AnalyserNode")}}.

+ +

Syntax

+ +
var analyserNode = new AnalyserNode(context, options)
+ +

Paramètres

+ +
+
context
+
Référence à un {{domxref("AudioContext")}}.
+
options {{optional_inline}}
+

Un objet avec les propriétés suivantes :

+
    +
  • fftSize: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048.
    • +
  • maxDecibels: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30.
    • +
  • minDecibels: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100.
    • +
  • smoothingTimeConstant:  valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8
    • +
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}}{{Spec2('Web Audio API')}}Première définition.
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode.AnalyserNode")}}

diff --git a/files/fr/web/api/analysernode/fftsize/index.html b/files/fr/web/api/analysernode/fftsize/index.html deleted file mode 100644 index 966bf915dd..0000000000 --- a/files/fr/web/api/analysernode/fftsize/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: AnalyserNode.fftSize -slug: Web/API/AnalyserNode/fftSize -translation_of: Web/API/AnalyserNode/fftSize ---- -

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

- -

La propriété fftSize de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT (transfomation de Fourier rapide) à utiliser pour déterminer le domaine fréquentiel.
-
- La valeur de la propriété fftSize property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre 32 et 32768 ; sa valeur par défaut est 2048.

- -
-

Note : Si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception INDEX_SIZE_ERR est levée.

-
- -

Syntaxe

- -
var contexteAudio = new AudioContext();
-var analyseur = contexteAudio.createAnalyser();
-analyseur.fftSize = 2048;
-
- -

Valeur

- -

Un nombre entier non signé.

- -

Exemple

- -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
-
-  ...
-
-analyseur.fftSize = 2048;
-var tailleMemoireTampon = analyseur.fftSize;
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-analyseur.getByteTimeDomainData(tableauDonnees);
-
-// dessine un oscilloscope de la source audio
-
-function dessiner() {
-
-      dessin = requestAnimationFrame(dessiner);
-
-      analyseur.getByteTimeDomainData(tableauDonnees);
-
-      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
-      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
-
-      contexteCanvas.lineWidth = 2;
-      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
-
-      contexteCanvas.beginPath();
-
-      var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
-      var x = 0;
-
-      for(var i = 0; i < tailleMemoireTampon; i++) {
-
-        var v = tableauDonnees[i] / 128.0;
-        var y = v * HAUTEUR/2;
-
-        if(i === 0) {
-          contexteCanvas.moveTo(x, y);
-        } else {
-          contexteCanvas.lineTo(x, y);
-        }
-
-        x += largeurTranche;
-      }
-
-      contexteCanvas.lineTo(canvas.width, canvas.height/2);
-      contexteCanvas.stroke();
-    };
-
-    dessiner();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.fftSize")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/analysernode/fftsize/index.md b/files/fr/web/api/analysernode/fftsize/index.md new file mode 100644 index 0000000000..966bf915dd --- /dev/null +++ b/files/fr/web/api/analysernode/fftsize/index.md @@ -0,0 +1,105 @@ +--- +title: AnalyserNode.fftSize +slug: Web/API/AnalyserNode/fftSize +translation_of: Web/API/AnalyserNode/fftSize +--- +

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

+ +

La propriété fftSize de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT (transfomation de Fourier rapide) à utiliser pour déterminer le domaine fréquentiel.
+
+ La valeur de la propriété fftSize property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre 32 et 32768 ; sa valeur par défaut est 2048.

+ +
+

Note : Si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception INDEX_SIZE_ERR est levée.

+
+ +

Syntaxe

+ +
var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.fftSize = 2048;
+
+ +

Valeur

+ +

Un nombre entier non signé.

+ +

Exemple

+ +

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.fftSize;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+analyseur.getByteTimeDomainData(tableauDonnees);
+
+// dessine un oscilloscope de la source audio
+
+function dessiner() {
+
+      dessin = requestAnimationFrame(dessiner);
+
+      analyseur.getByteTimeDomainData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();
+
+      var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
+      var x = 0;
+
+      for(var i = 0; i < tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += largeurTranche;
+      }
+
+      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };
+
+    dessiner();
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode.fftSize")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/analysernode/frequencybincount/index.html b/files/fr/web/api/analysernode/frequencybincount/index.html deleted file mode 100644 index 90a99b7f10..0000000000 --- a/files/fr/web/api/analysernode/frequencybincount/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: AnalyserNode.frequencyBinCount -slug: Web/API/AnalyserNode/frequencyBinCount -translation_of: Web/API/AnalyserNode/frequencyBinCount ---- -

{{ APIRef("Web Audio API") }}
-
- La propriété frequencyBinCount de l'objet AnalyserNode est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.

- -

Syntaxe

- -
var contexteAudio = new AudioContext();
-var analyseur = contexteAudio.createAnalyser();
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-
- -

Valeur

- -

Un nombre entier non signé.

- -

Example

- -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec AudioContext, puis utiliser  requestAnimationFrame et <canvas> pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
-analyseur.minDecibels = -90;
-analyseur.maxDecibels = -10;
-
-  ...
-
-analyseur.fftSize = 256;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-console.log(tailleMemoireTampon);
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-
-contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
-
-function dessiner() {
-  dessin = requestAnimationFrame(dessiner);
-
-  analyseur.getByteFrequencyData(tableauDonnees);
-
-  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
-  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
-
-  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1;
-  var hauteurBarre;
-  var x = 0;
-
-  for(var i = 0; i < tailleMemoireTampon; i++) {
-    hauteurBarre = tableauDonnees[i];
-
-    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
-    contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2);
-
-    x += largeurBarre;
-  }
-};
-
-dessiner();
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.frequencyBinCount")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/analysernode/frequencybincount/index.md b/files/fr/web/api/analysernode/frequencybincount/index.md new file mode 100644 index 0000000000..90a99b7f10 --- /dev/null +++ b/files/fr/web/api/analysernode/frequencybincount/index.md @@ -0,0 +1,88 @@ +--- +title: AnalyserNode.frequencyBinCount +slug: Web/API/AnalyserNode/frequencyBinCount +translation_of: Web/API/AnalyserNode/frequencyBinCount +--- +

{{ APIRef("Web Audio API") }}
+
+ La propriété frequencyBinCount de l'objet AnalyserNode est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.

+ +

Syntaxe

+ +
var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+
+ +

Valeur

+ +

Un nombre entier non signé.

+ +

Example

+ +

L'exemple suivant montre comment créer simplement un  AnalyserNode avec AudioContext, puis utiliser  requestAnimationFrame et <canvas> pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i < tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre;
+  }
+};
+
+dessiner();
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode.frequencyBinCount")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.html b/files/fr/web/api/analysernode/getbytefrequencydata/index.html deleted file mode 100644 index dde3750690..0000000000 --- a/files/fr/web/api/analysernode/getbytefrequencydata/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: AnalyserNode.getByteFrequencyData() -slug: Web/API/AnalyserNode/getByteFrequencyData -translation_of: Web/API/AnalyserNode/getByteFrequencyData ---- -

{{ APIRef("Web Audio API") }}
-
- La méthode getByteFrequencyData() de l'objet AnalyserNode copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.

- -
-

Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.

-
- -

Syntaxe

- -
var contexteAudio = new AudioContext();
-var analyseur = contexteAudio.createAnalyser();
-
-// Uint8Array devrait avoir la même taille que frequencyBinCount
-var tableauDonnees = new Uint8Array(analyseur.frequencyBinCount);
-
-// remplit le Uint8Array avec les données retournées par la méthode getByteFrequencyData()
-analyseur.getByteFrequencyData(tableauDonnees);
-
- -

Retourne

- -

Un {{domxref("Uint8Array")}}.

- -

Exemple

- -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec AudioContext, puis utiliser  requestAnimationFrame et <canvas> pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
-
-  ...
-
-analyseur.fftSize = 256;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-console.log(tailleMemoireTampon);
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-
-contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
-
-function dessiner() {
-  dessin = requestAnimationFrame(dessiner);
-
-  analyseur.getByteFrequencyData(tableauDonnees);
-
-  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
-  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
-
-  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
-  var hauteurBarre;
-  var x = 0;
-
-  for(var i = 0; i < tailleMemoireTampon; i++) {
-    hauteurBarre = tableauDonnees[i];
-
-    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
-    contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2);
-
-    x += largeurBarre + 1;
-  }
-};
-
-dessiner();
- -

Paramètres

- -
-
array
-
Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.getByteFrequencyData")}}

- -

Voir aussi

- -

Utiliser la Web Audio API

- - diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.md b/files/fr/web/api/analysernode/getbytefrequencydata/index.md new file mode 100644 index 0000000000..dde3750690 --- /dev/null +++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.md @@ -0,0 +1,103 @@ +--- +title: AnalyserNode.getByteFrequencyData() +slug: Web/API/AnalyserNode/getByteFrequencyData +translation_of: Web/API/AnalyserNode/getByteFrequencyData +--- +

{{ APIRef("Web Audio API") }}
+
+ La méthode getByteFrequencyData() de l'objet AnalyserNode copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.

+ +
+

Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.

+
+ +

Syntaxe

+ +
var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+
+// Uint8Array devrait avoir la même taille que frequencyBinCount
+var tableauDonnees = new Uint8Array(analyseur.frequencyBinCount);
+
+// remplit le Uint8Array avec les données retournées par la méthode getByteFrequencyData()
+analyseur.getByteFrequencyData(tableauDonnees);
+
+ +

Retourne

+ +

Un {{domxref("Uint8Array")}}.

+ +

Exemple

+ +

L'exemple suivant montre comment créer simplement un  AnalyserNode avec AudioContext, puis utiliser  requestAnimationFrame et <canvas> pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i < tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();
+ +

Paramètres

+ +
+
array
+
Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode.getByteFrequencyData")}}

+ +

Voir aussi

+ +

Utiliser la Web Audio API

+ + diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.html b/files/fr/web/api/analysernode/getbytetimedomaindata/index.html deleted file mode 100644 index 1610af5c55..0000000000 --- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: AnalyserNode.getByteTimeDomainData() -slug: Web/API/AnalyserNode/getByteTimeDomainData -translation_of: Web/API/AnalyserNode/getByteTimeDomainData ---- -

{{ APIRef("Mountain View APIRef Project") }}

- -
-

La méthode getByteTimeDomainData() de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde, ou du domaine temporel, dans un tableau {{domxref("Uint8Array")}} passé en paramètre.

- -

Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

-
- -

Syntaxe

- -
var contexteAudio = new AudioContext();
-var analyseur = contexteAudio.createAnalyser();
-
-// La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize
-var tableauDonnees = new Uint8Array(analyseur.fftSize);
-
-// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
-analyseur.getByteTimeDomainData(tableauDonnees);
- -

Renvoie

- -

Un tableau {{domxref("Uint8Array")}}.

- -

Exemple

- -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lignes 128–205).

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
-
-  ...
-
-analyseur.fftSize = 2048;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-analyseur.getByteTimeDomainData(tableauDonnees);
-
-// dessine un oscilloscope de la source audio
-
-function dessiner() {
-
-      dessin = requestAnimationFrame(dessiner);
-
-      analyseur.getByteTimeDomainData(tableauDonnees);
-
-      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
-      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
-
-      contexteCanvas.lineWidth = 2;
-      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
-
-      contexteCanvas.beginPath();
-
-      var largeurBarre = WIDTH * 1.0 / tailleMemoireTampon;
-      var x = 0;
-
-      for(var i = 0; i < tailleMemoireTampon; i++) {
-
-        var v = tableauDonnees[i] / 128.0;
-        var y = v * HAUTEUR/2;
-
-        if(i === 0) {
-          contexteCanvas.moveTo(x, y);
-        } else {
-          contexteCanvas.lineTo(x, y);
-        }
-
-        x += largeurBarre;
-      }
-
-      contexteCanvas.lineTo(canvas.width, canvas.height/2);
-      contexteCanvas.stroke();
-    };
-
-    dessiner();
- -

Paramètres

- -
-
array
-
Le tableau {{domxref("Uint8Array")}} dans lequel les données temporelles seront copiées.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.getByteTimeDomainData")}}

- -

See also

- - diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md new file mode 100644 index 0000000000..1610af5c55 --- /dev/null +++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md @@ -0,0 +1,114 @@ +--- +title: AnalyserNode.getByteTimeDomainData() +slug: Web/API/AnalyserNode/getByteTimeDomainData +translation_of: Web/API/AnalyserNode/getByteTimeDomainData +--- +

{{ APIRef("Mountain View APIRef Project") }}

+ +
+

La méthode getByteTimeDomainData() de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde, ou du domaine temporel, dans un tableau {{domxref("Uint8Array")}} passé en paramètre.

+ +

Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

+
+ +

Syntaxe

+ +
var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+
+// La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize
+var tableauDonnees = new Uint8Array(analyseur.fftSize);
+
+// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
+analyseur.getByteTimeDomainData(tableauDonnees);
+ +

Renvoie

+ +

Un tableau {{domxref("Uint8Array")}}.

+ +

Exemple

+ +

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lignes 128–205).

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+analyseur.getByteTimeDomainData(tableauDonnees);
+
+// dessine un oscilloscope de la source audio
+
+function dessiner() {
+
+      dessin = requestAnimationFrame(dessiner);
+
+      analyseur.getByteTimeDomainData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();
+
+      var largeurBarre = WIDTH * 1.0 / tailleMemoireTampon;
+      var x = 0;
+
+      for(var i = 0; i < tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += largeurBarre;
+      }
+
+      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };
+
+    dessiner();
+ +

Paramètres

+ +
+
array
+
Le tableau {{domxref("Uint8Array")}} dans lequel les données temporelles seront copiées.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode.getByteTimeDomainData")}}

+ +

See also

+ + diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.html b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html deleted file mode 100644 index fb4e6e2785..0000000000 --- a/files/fr/web/api/analysernode/getfloatfrequencydata/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: AnalyserNode.getFloatFrequencyData() -slug: Web/API/AnalyserNode/getFloatFrequencyData -translation_of: Web/API/AnalyserNode/getFloatFrequencyData ---- -

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

- -
-

La méthode getFloatFrequencyData() de l'interface {{ domxref("AnalyserNode") }} copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.

- -

Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.frequencyBinCount")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

-
- -

Syntaxe

- -
var contexteAudio = new AudioContext();
-var analyseur = contexteAudio.createAnalyser();
-
-// La taille du tableau Float32Array doit correspondre à la valeur de la propriété frequencyBinCount
-var tableauDonnees = new Float32Array(analyseur.frequencyBinCount);
-
-// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
-analyseur.getByteTimeDomainData(tableauDonnees);
-
- -

Paramètres

- -
-
array
-
{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est -Infinity.
-
- -

Valeur de retour

- -

undefined.

- -

Exemple

- -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lignes 128–205).

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
-
-  ...
-
-analyseur.fftSize = 256;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-console.log(tailleMemoireTampon);
-var tableauDonnees = new Float32Array(tailleMemoireTampon);
-
-contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
-
-function dessiner() {
-  dessin = requestAnimationFrame(dessiner);
-  analyseur.getFloatFrequencyData(dataArray);
-  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
-  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
-
-  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
-  var hauteurBarre;
-  var x = 0;
-
-  for(var i = 0; i < tailleMemoireTampon; i++) {
-    hauteurBarre = (tableauDonnees[i] + 140)*2;
-    contexteCanvas.fillStyle = 'rgb(' + Math.floor(hauteurBarre+100) + ',50,50)';
-    contexteCanvas.fillRect(x, HEIGHT-hauteurBarre/2, largeurBarre, hauteurBarre/2);
-    x += largeurBarre + 1;
-  }
-};
-
-dessiner();
- -

Paramètres

- -
-
array
-
Le tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine fréquentiel.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.getFloatFrequencyData")}}

- -

See also

- - diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md new file mode 100644 index 0000000000..fb4e6e2785 --- /dev/null +++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md @@ -0,0 +1,105 @@ +--- +title: AnalyserNode.getFloatFrequencyData() +slug: Web/API/AnalyserNode/getFloatFrequencyData +translation_of: Web/API/AnalyserNode/getFloatFrequencyData +--- +

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

+ +
+

La méthode getFloatFrequencyData() de l'interface {{ domxref("AnalyserNode") }} copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.

+ +

Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.frequencyBinCount")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

+
+ +

Syntaxe

+ +
var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+
+// La taille du tableau Float32Array doit correspondre à la valeur de la propriété frequencyBinCount
+var tableauDonnees = new Float32Array(analyseur.frequencyBinCount);
+
+// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
+analyseur.getByteTimeDomainData(tableauDonnees);
+
+ +

Paramètres

+ +
+
array
+
{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est -Infinity.
+
+ +

Valeur de retour

+ +

undefined.

+ +

Exemple

+ +

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lignes 128–205).

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Float32Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+  analyseur.getFloatFrequencyData(dataArray);
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i < tailleMemoireTampon; i++) {
+    hauteurBarre = (tableauDonnees[i] + 140)*2;
+    contexteCanvas.fillStyle = 'rgb(' + Math.floor(hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x, HEIGHT-hauteurBarre/2, largeurBarre, hauteurBarre/2);
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();
+ +

Paramètres

+ +
+
array
+
Le tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine fréquentiel.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode.getFloatFrequencyData")}}

+ +

See also

+ + diff --git a/files/fr/web/api/analysernode/getfloattimedomaindata/index.html b/files/fr/web/api/analysernode/getfloattimedomaindata/index.html deleted file mode 100644 index a69bb7d0b3..0000000000 --- a/files/fr/web/api/analysernode/getfloattimedomaindata/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: AnalyserNode.getFloatTimeDomainData() -slug: Web/API/AnalyserNode/getFloatTimeDomainData -translation_of: Web/API/AnalyserNode/getFloatTimeDomainData ---- -

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

- -
-

La méthode getFloatTimeDomainData() de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde ou du domaine temporel, dans un tableau {{domxref("Float32Array")}} passé en paramètre.

- -

Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

-
- -

Syntaxe

- -
var contexteAudio = new AudioContext();
-var analyseur = contexteAudio.createAnalyser();
-
-// La taille du tableau Float32Array doit correspondre à la valeur de la propriété fftSize
-var tableauDonnees = new Float32Array(analyseur.fftSize);
-
-// remplit le tableau Float32Array avec les données renvoyées par la méthode getFloatTimeDomainData()
-analyseur.getFloatTimeDomainData(tableauDonnees);
-
- -

Renvoie

- -

Un tableau {{domxref("Float32Array")}}.

- -

Exemple

- -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lignes 128–205).

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
-
-  ...
-
-analyseur.fftSize = 1024;
-var tailleMemoireTampon = analyseur.fftSize;
-console.log(tailleMemoireTampon);
-var tableauDonnees = new Float32Array(tailleMemoireTampon);
-
-contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
-
-function dessiner() {
-  dessin = requestAnimationFrame(dessiner);
-  analyseur.getFloatTimeDomainData(tableauDonnees);
-
-  contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
-  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
-  contexteCanvas.lineWidth = 2;
-  contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
-  contexteCanvas.beginPath();
-
-  var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
-  var x = 0;
-
-  for(var i = 0; i < tailleMemoireTampon; i++) {
-    var v = tableauDonnees[i] * 200.0;
-    var y = HAUTEUR/2 + v;
-
-    if(i === 0) {
-      contexteCanvas.moveTo(x, y);
-    } else {
-      contexteCanvas.lineTo(x, y);
-    }
-    x += largeurTranche;
-  }
-
-  contexteCanvas.lineTo(canvas.width, canvas.height/2);
-  contexteCanvas.stroke();
-};
-
-dessiner();
- -

 

- -

Paramètres

- -
-
array
-
Un tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine temporel.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.getFloatTimeDomainData")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md new file mode 100644 index 0000000000..a69bb7d0b3 --- /dev/null +++ b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md @@ -0,0 +1,111 @@ +--- +title: AnalyserNode.getFloatTimeDomainData() +slug: Web/API/AnalyserNode/getFloatTimeDomainData +translation_of: Web/API/AnalyserNode/getFloatTimeDomainData +--- +

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

+ +
+

La méthode getFloatTimeDomainData() de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde ou du domaine temporel, dans un tableau {{domxref("Float32Array")}} passé en paramètre.

+ +

Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

+
+ +

Syntaxe

+ +
var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+
+// La taille du tableau Float32Array doit correspondre à la valeur de la propriété fftSize
+var tableauDonnees = new Float32Array(analyseur.fftSize);
+
+// remplit le tableau Float32Array avec les données renvoyées par la méthode getFloatTimeDomainData()
+analyseur.getFloatTimeDomainData(tableauDonnees);
+
+ +

Renvoie

+ +

Un tableau {{domxref("Float32Array")}}.

+ +

Exemple

+ +

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lignes 128–205).

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 1024;
+var tailleMemoireTampon = analyseur.fftSize;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Float32Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+  analyseur.getFloatTimeDomainData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+  contexteCanvas.lineWidth = 2;
+  contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.beginPath();
+
+  var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
+  var x = 0;
+
+  for(var i = 0; i < tailleMemoireTampon; i++) {
+    var v = tableauDonnees[i] * 200.0;
+    var y = HAUTEUR/2 + v;
+
+    if(i === 0) {
+      contexteCanvas.moveTo(x, y);
+    } else {
+      contexteCanvas.lineTo(x, y);
+    }
+    x += largeurTranche;
+  }
+
+  contexteCanvas.lineTo(canvas.width, canvas.height/2);
+  contexteCanvas.stroke();
+};
+
+dessiner();
+ +

 

+ +

Paramètres

+ +
+
array
+
Un tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine temporel.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode.getFloatTimeDomainData")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/analysernode/index.html b/files/fr/web/api/analysernode/index.html deleted file mode 100644 index 217c8b7f64..0000000000 --- a/files/fr/web/api/analysernode/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: AnalyserNode -slug: Web/API/AnalyserNode -tags: - - API - - AnalyserNode - - Reference -translation_of: Web/API/AnalyserNode ---- -
{{APIRef("Web Audio API")}}
- -

L' interface AnalyserNode représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser.

- -

Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée.

- -

Sans modifier le flux audio, le nœud permet d'obtenir la fréquence et les données temporelles associées en utilisant une transformée de Fourier rapide.

- - - - - - - - - - - - - - - - - - - - - - - - -
Nombre d'entrées1
Nombre de sorties1 (mais peut ne pas être connectée)
Mode de comptage des canaux"explicit"
Nombre de canaux1
Interprétation du canal"speakers"
- -

Héritage

- -

L'interface hérite des parents suivants:

- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}
-
Crée une nouvelle instance de l'objet AnalyserNode.
-
- -

Propriétés

- -

Hérite des propriétés de son parent. {{domxref("AudioNode")}}.

- -
-
{{domxref("AnalyserNode.fftSize")}}
-
Entier long non signé qui représente la taille de la FFT (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel.
-
{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
-
Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation.
-
{{domxref("AnalyserNode.minDecibels")}}
-
Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de getByteFrequencyData().
-
{{domxref("AnalyserNode.maxDecibels")}}
-
Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de getByteFrequencyData().
-
{{domxref("AnalyserNode.smoothingTimeConstant")}}
-
Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs.
-
- -

Méthodes

- -

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

- -
-
{{domxref("AnalyserNode.getFloatFrequencyData()")}}
-
Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.
-
- -
-
{{domxref("AnalyserNode.getByteFrequencyData()")}}
-
Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre.
-
{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
-
Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre.
-
- -
-
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
-
Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre.
-
- -

Exemples

- -
-

Note :: Voir Visualisations avec la Web Audio API pour plus d'informations.

-
- -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
-
-  ...
-
-analyseur.fftSize = 2048;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-analyseur.getByteTimeDomainData(tableauDonnees);
-
-// dessine un oscilloscope de la source audio
-var canvas = document.getElementById("oscilloscope");
-var contexteCanvas = canvas.getContext("2d");
-
-function dessiner() {
-
-      requestAnimationFrame(dessiner);
-
-      analyseur.getByteTimeDomainData(tableauDonnees);
-
-      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
-      contexteCanvas.fillRect(0, 0, WIDTH, HEIGHT);
-
-      contexteCanvas.lineWidth = 2;
-      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
-
-      contexteCanvas.beginPath();
-
-      var sliceWidth = WIDTH * 1.0 / tailleMemoireTampon;
-      var x = 0;
-
-      for(var i = 0; i < tailleMemoireTampon; i++) {
-
-        var v = tableauDonnees[i] / 128.0;
-        var y = v * HEIGHT/2;
-
-        if(i === 0) {
-          contexteCanvas.moveTo(x, y);
-        } else {
-          contexteCanvas.lineTo(x, y);
-        }
-
-        x += sliceWidth;
-      }
-
-      contexteCanvas.lineTo(canvas.width, canvas.height/2);
-      contexteCanvas.stroke();
-    };
-
-    dessiner();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/analysernode/index.md b/files/fr/web/api/analysernode/index.md new file mode 100644 index 0000000000..217c8b7f64 --- /dev/null +++ b/files/fr/web/api/analysernode/index.md @@ -0,0 +1,178 @@ +--- +title: AnalyserNode +slug: Web/API/AnalyserNode +tags: + - API + - AnalyserNode + - Reference +translation_of: Web/API/AnalyserNode +--- +
{{APIRef("Web Audio API")}}
+ +

L' interface AnalyserNode représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser.

+ +

Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée.

+ +

Sans modifier le flux audio, le nœud permet d'obtenir la fréquence et les données temporelles associées en utilisant une transformée de Fourier rapide.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Nombre d'entrées1
Nombre de sorties1 (mais peut ne pas être connectée)
Mode de comptage des canaux"explicit"
Nombre de canaux1
Interprétation du canal"speakers"
+ +

Héritage

+ +

L'interface hérite des parents suivants:

+ +

{{InheritanceDiagram}}

+ +

Constructeur

+ +
+
{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}
+
Crée une nouvelle instance de l'objet AnalyserNode.
+
+ +

Propriétés

+ +

Hérite des propriétés de son parent. {{domxref("AudioNode")}}.

+ +
+
{{domxref("AnalyserNode.fftSize")}}
+
Entier long non signé qui représente la taille de la FFT (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel.
+
{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
+
Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation.
+
{{domxref("AnalyserNode.minDecibels")}}
+
Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de getByteFrequencyData().
+
{{domxref("AnalyserNode.maxDecibels")}}
+
Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de getByteFrequencyData().
+
{{domxref("AnalyserNode.smoothingTimeConstant")}}
+
Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs.
+
+ +

Méthodes

+ +

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("AnalyserNode.getFloatFrequencyData()")}}
+
Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.
+
+ +
+
{{domxref("AnalyserNode.getByteFrequencyData()")}}
+
Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre.
+
{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
+
Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre.
+
+ +
+
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
+
Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre.
+
+ +

Exemples

+ +
+

Note :: Voir Visualisations avec la Web Audio API pour plus d'informations.

+
+ +

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+analyseur.getByteTimeDomainData(tableauDonnees);
+
+// dessine un oscilloscope de la source audio
+var canvas = document.getElementById("oscilloscope");
+var contexteCanvas = canvas.getContext("2d");
+
+function dessiner() {
+
+      requestAnimationFrame(dessiner);
+
+      analyseur.getByteTimeDomainData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, WIDTH, HEIGHT);
+
+      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / tailleMemoireTampon;
+      var x = 0;
+
+      for(var i = 0; i < tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };
+
+    dessiner();
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/analysernode/maxdecibels/index.html b/files/fr/web/api/analysernode/maxdecibels/index.html deleted file mode 100644 index 046c1bcf64..0000000000 --- a/files/fr/web/api/analysernode/maxdecibels/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: AnalyserNode.maxDecibels -slug: Web/API/AnalyserNode/maxDecibels -translation_of: Web/API/AnalyserNode/maxDecibels ---- -

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

- -

La propriété maxDecibels de l'objet {{ domxref("AnalyserNode") }} est un nombre  flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes getFloatFrequencyData() et getByteFrequencyData().

- -

Sa valeur par défaut est -30.

- -
-

Note : Si une valeur supérieure à AnalyserNode.maxDecibels est indiquée, une erreur INDEX_SIZE_ERR est levée.

-
- -

Syntaxe

- -
var contexteAudio = new AudioContext();
-var analyseur = contexteAudio.createAnalyser();
-analyseur.maxDecibels = -10;
-
- -

Valeur

- -

Un nombre flottant à double précision.

- -

Exemple

- -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lignes 128–205).

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
-analyseur.minDecibels = -90;
-analyseur.maxDecibels = -10;
-
-  ...
-
-analyseur.fftSize = 256;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-console.log(bufferLength);
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-
-contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
-
-function dessiner() {
-  dessin = requestAnimationFrame(dessiner);
-
-  analyseur.getByteFrequencyData(tableauDonnees);
-
-  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
-  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
-
-  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
-  var hauteurBarre;
-  var x = 0;
-
-  for(var i = 0; i < tailleMemoireTampon; i++) {
-    hauteurBarre = tableauDonnees[i];
-
-    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
-    contexteCanvas.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2);
-
-    x += largeurBarre + 1;
-  }
-};
-
-dessiner();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.maxDecibels")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/analysernode/maxdecibels/index.md b/files/fr/web/api/analysernode/maxdecibels/index.md new file mode 100644 index 0000000000..046c1bcf64 --- /dev/null +++ b/files/fr/web/api/analysernode/maxdecibels/index.md @@ -0,0 +1,94 @@ +--- +title: AnalyserNode.maxDecibels +slug: Web/API/AnalyserNode/maxDecibels +translation_of: Web/API/AnalyserNode/maxDecibels +--- +

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

+ +

La propriété maxDecibels de l'objet {{ domxref("AnalyserNode") }} est un nombre  flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes getFloatFrequencyData() et getByteFrequencyData().

+ +

Sa valeur par défaut est -30.

+ +
+

Note : Si une valeur supérieure à AnalyserNode.maxDecibels est indiquée, une erreur INDEX_SIZE_ERR est levée.

+
+ +

Syntaxe

+ +
var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.maxDecibels = -10;
+
+ +

Valeur

+ +

Un nombre flottant à double précision.

+ +

Exemple

+ +

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lignes 128–205).

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(bufferLength);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i < tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode.maxDecibels")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/analysernode/mindecibels/index.html b/files/fr/web/api/analysernode/mindecibels/index.html deleted file mode 100644 index af3c639646..0000000000 --- a/files/fr/web/api/analysernode/mindecibels/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: AnalyserNode.minDecibels -slug: Web/API/AnalyserNode/minDecibels -translation_of: Web/API/AnalyserNode/minDecibels ---- -

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

- -

La propriété minDecibels de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur minimum pour l'intervalle de résultats des méthodes getFloatFrequencyData() et getByteFrequencyData().

- -

Sa valeur par défaut est -100.

- -
-

Note : Si une valeur inférieure à AnalyserNode.minDecibels est indiquée, une erreur INDEX_SIZE_ERR est levée.

-
- -

Syntaxe

- -
var contexteAudio = new AudioContext();
-var analyseur = contexteAudio.createAnalyser();
-analyseur.maxDecibels = -90;
-
- -

Valeur

- -

Un nombre flottant à double précision.

- -

Exemple

- -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
-analyseur.minDecibels = -90;
-analyseur.maxDecibels = -10;
-
-  ...
-
-analyseur.fftSize = 256;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-console.log(bufferLength);
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-
-contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
-
-function dessiner() {
-  dessin = requestAnimationFrame(dessiner);
-
-  analyseur.getByteFrequencyData(tableauDonnees);
-
-  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
-  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
-
-  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
-  var hauteurBarre;
-  var x = 0;
-
-  for(var i = 0; i < tailleMemoireTampon; i++) {
-    hauteurBarre = tableauDonnees[i];
-
-    canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
-    canvasCtx.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2);
-
-    x += largeurBarre + 1;
-  }
-};
-
-dessiner();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.minDecibels")}}

- -

See also

- - diff --git a/files/fr/web/api/analysernode/mindecibels/index.md b/files/fr/web/api/analysernode/mindecibels/index.md new file mode 100644 index 0000000000..af3c639646 --- /dev/null +++ b/files/fr/web/api/analysernode/mindecibels/index.md @@ -0,0 +1,94 @@ +--- +title: AnalyserNode.minDecibels +slug: Web/API/AnalyserNode/minDecibels +translation_of: Web/API/AnalyserNode/minDecibels +--- +

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

+ +

La propriété minDecibels de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur minimum pour l'intervalle de résultats des méthodes getFloatFrequencyData() et getByteFrequencyData().

+ +

Sa valeur par défaut est -100.

+ +
+

Note : Si une valeur inférieure à AnalyserNode.minDecibels est indiquée, une erreur INDEX_SIZE_ERR est levée.

+
+ +

Syntaxe

+ +
var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.maxDecibels = -90;
+
+ +

Valeur

+ +

Un nombre flottant à double précision.

+ +

Exemple

+ +

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(bufferLength);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i < tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode.minDecibels")}}

+ +

See also

+ + diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.html b/files/fr/web/api/analysernode/smoothingtimeconstant/index.html deleted file mode 100644 index 5e438dd47b..0000000000 --- a/files/fr/web/api/analysernode/smoothingtimeconstant/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: AnalyserNode.smoothingTimeConstant -slug: Web/API/AnalyserNode/smoothingTimeConstant -translation_of: Web/API/AnalyserNode/smoothingTimeConstant ---- -

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

- -

La propriété smoothingTimeConstant de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente une moyenne entre le buffer courant et le buffer précédent - elle sert à lisser la transition entre les valeurs.

- -

La valeur est 0.8 par défaut; elle doit être comprise entre 0 et 1. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}.

- -

En termes techniques, on applique une fenêtre de Blackman pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas.

- -
-

Note : Si la valeur n'est pas comprise entre 0 et 1, une exception INDEX_SIZE_ERR est levée.

-
- -

Syntaxe

- -
var contexteAudio = new AudioContext();
-var analyseur = contexteAudio.createAnalyser();
-analyseur.smoothingTimeConstant = 1;
-
- -

Valeur

- -

Un nombre flottant à double précision.

- -

Exemple

- -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

- -

Si vou sêtes curieux du fonctionnement de smoothingTimeConstant(), essayez de cloner l'exemple ci-dessous et d'affecter : analyser.smoothingTimeConstant = 0;. Vous verrez que les changements de valeur sont bien plus discordants.

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
-analyseur.minDecibels = -90;
-analyseur.maxDecibels = -10;
-analyseur.smoothingTimeConstant = 0.85;
-
-  ...
-
-analyseur.fftSize = 256;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-console.log(tailleMemoireTampon);
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-
-contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
-
-function dessiner() {
-  dessin = requestAnimationFrame(dessiner);
-
-  analyseur.getByteFrequencyData(tableauDonnees);
-
-  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
-  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
-
-  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
-  var hauteurBarre;
-  var x = 0;
-
-  for(var i = 0; i < tailleMemoireTampon; i++) {
-    hauteurBarre = tableauDonnees[i];
-
-    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
-    contexteCanvas.fillRect(x, HAUTEUR-hauteurBarre/2, largeurBarre, hauteurBarre/2);
-
-    x += largeurBarre + 1;
-  }
-};
-
-dessiner();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.smoothingTimeConstant")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md new file mode 100644 index 0000000000..5e438dd47b --- /dev/null +++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md @@ -0,0 +1,99 @@ +--- +title: AnalyserNode.smoothingTimeConstant +slug: Web/API/AnalyserNode/smoothingTimeConstant +translation_of: Web/API/AnalyserNode/smoothingTimeConstant +--- +

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

+ +

La propriété smoothingTimeConstant de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente une moyenne entre le buffer courant et le buffer précédent - elle sert à lisser la transition entre les valeurs.

+ +

La valeur est 0.8 par défaut; elle doit être comprise entre 0 et 1. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}.

+ +

En termes techniques, on applique une fenêtre de Blackman pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas.

+ +
+

Note : Si la valeur n'est pas comprise entre 0 et 1, une exception INDEX_SIZE_ERR est levée.

+
+ +

Syntaxe

+ +
var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.smoothingTimeConstant = 1;
+
+ +

Valeur

+ +

Un nombre flottant à double précision.

+ +

Exemple

+ +

L'exemple suivant montre comment créer simplement un  AnalyserNode avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

+ +

Si vou sêtes curieux du fonctionnement de smoothingTimeConstant(), essayez de cloner l'exemple ci-dessous et d'affecter : analyser.smoothingTimeConstant = 0;. Vous verrez que les changements de valeur sont bien plus discordants.

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+analyseur.smoothingTimeConstant = 0.85;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i < tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x, HAUTEUR-hauteurBarre/2, largeurBarre, hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AnalyserNode.smoothingTimeConstant")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/animation/index.html b/files/fr/web/api/animation/index.html deleted file mode 100644 index d2a3f61044..0000000000 --- a/files/fr/web/api/animation/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Animation -slug: Web/API/Animation -tags: - - API - - Animations - - Experimental - - Interface - - Reference - - Web Animations - - waapi - - web animation api -translation_of: Web/API/Animation ---- -

{{ APIRef("Web Animations API") }}{{SeeCompatTable}}

- -

L'interface Animation de l'API Web Animations correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.

- -

Constructeur

- -
-
{{domxref("Animation.Animation()", "Animation()")}}
-
Crée une nouvelle instance de l'objet Animation.
-
- -

Propriétés

- -
-
{{domxref("Animation.currentTime")}}
-
La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est null.
-
- -
-
{{domxref("Animation.effect")}}
-
Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation.
-
{{domxref("Animation.finished")}} {{readOnlyInline}}
-
Retourne la Promise terminée en cours pour cette animation.
-
- -
-
{{domxref("Animation.id")}}
-
Récupère et défini le String utilisé pour identifier l'animation.
-
{{domxref("Animation.playState")}} {{readOnlyInline}}
-
Retourne une valeur énumérée qui décit l'état de lecture de l'animation.
-
- -
-
{{domxref("Animation.playbackRate")}}
-
Retourne et défini la fréquence de lecture de l'animation.
-
- -
-
{{domxref("Animation.ready")}} {{readOnlyInline}}
-
Retourne la Promise prête en cours pour l'animation.
-
- -
-
{{domxref("Animation.startTime")}}
-
Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer.
-
- -
-
{{domxref("Animation.timeline")}}
-
Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation.
-
- -

Gestionnaire d'événements

- -
-
{{domxref("Animation.oncancel")}}
-
Retourne et défini le gestionnaire d'événement pour l'événement cancel (annuler).
-
{{domxref("Animation.onfinish")}}
-
Retourne et défini le gestionnaire d'événement pour l'événement finish (terminer).
-
- -

Méthodes

- -
-
{{domxref("Animation.cancel()")}}
-
Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture.
-
- -
-
{{domxref("Animation.finish()")}}
-
Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée.
-
- -
-
{{domxref("Animation.pause()")}}
-
Suspend la lecture de l'animation.
-
- -
-
{{domxref("Animation.play()")}}
-
Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée.
-
- -
-
{{domxref("Animation.reverse()")}}
-
Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}{{Spec2("Web Animations")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Animation")}}

\ No newline at end of file diff --git a/files/fr/web/api/animation/index.md b/files/fr/web/api/animation/index.md new file mode 100644 index 0000000000..d2a3f61044 --- /dev/null +++ b/files/fr/web/api/animation/index.md @@ -0,0 +1,122 @@ +--- +title: Animation +slug: Web/API/Animation +tags: + - API + - Animations + - Experimental + - Interface + - Reference + - Web Animations + - waapi + - web animation api +translation_of: Web/API/Animation +--- +

{{ APIRef("Web Animations API") }}{{SeeCompatTable}}

+ +

L'interface Animation de l'API Web Animations correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.

+ +

Constructeur

+ +
+
{{domxref("Animation.Animation()", "Animation()")}}
+
Crée une nouvelle instance de l'objet Animation.
+
+ +

Propriétés

+ +
+
{{domxref("Animation.currentTime")}}
+
La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est null.
+
+ +
+
{{domxref("Animation.effect")}}
+
Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation.
+
{{domxref("Animation.finished")}} {{readOnlyInline}}
+
Retourne la Promise terminée en cours pour cette animation.
+
+ +
+
{{domxref("Animation.id")}}
+
Récupère et défini le String utilisé pour identifier l'animation.
+
{{domxref("Animation.playState")}} {{readOnlyInline}}
+
Retourne une valeur énumérée qui décit l'état de lecture de l'animation.
+
+ +
+
{{domxref("Animation.playbackRate")}}
+
Retourne et défini la fréquence de lecture de l'animation.
+
+ +
+
{{domxref("Animation.ready")}} {{readOnlyInline}}
+
Retourne la Promise prête en cours pour l'animation.
+
+ +
+
{{domxref("Animation.startTime")}}
+
Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer.
+
+ +
+
{{domxref("Animation.timeline")}}
+
Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation.
+
+ +

Gestionnaire d'événements

+ +
+
{{domxref("Animation.oncancel")}}
+
Retourne et défini le gestionnaire d'événement pour l'événement cancel (annuler).
+
{{domxref("Animation.onfinish")}}
+
Retourne et défini le gestionnaire d'événement pour l'événement finish (terminer).
+
+ +

Méthodes

+ +
+
{{domxref("Animation.cancel()")}}
+
Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture.
+
+ +
+
{{domxref("Animation.finish()")}}
+
Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée.
+
+ +
+
{{domxref("Animation.pause()")}}
+
Suspend la lecture de l'animation.
+
+ +
+
{{domxref("Animation.play()")}}
+
Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée.
+
+ +
+
{{domxref("Animation.reverse()")}}
+
Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}{{Spec2("Web Animations")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Animation")}}

\ No newline at end of file diff --git a/files/fr/web/api/animation/starttime/index.html b/files/fr/web/api/animation/starttime/index.html deleted file mode 100644 index 48d8361bf8..0000000000 --- a/files/fr/web/api/animation/starttime/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Window.mozAnimationStartTime -slug: Web/API/Animation/startTime -tags: - - API - - HTML DOM - - Obsolete - - Propriété - - Reference - - Window -translation_of: Web/API/Window/mozAnimationStartTime -original_slug: Web/API/Window/mozAnimationStartTime ---- -

{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}}

- -

Renvoie l'heure, en millisecondes depuis l'époque, à laquelle les animations ont commencé maintenant doivent être considérées comme ayant commencé. Cette valeur doit être utilisée à la place, par exemple, Date.now(), car cette valeur sera la même pour toutes les animations lancées dans cette fenêtre pendant cet intervalle d'actualisation, leur permettant de rester synchronisées les unes avec les autres.

- -

Cela permet également aux animations basées sur JavaScript de rester synchronisées avec les transitions CSS et les animations SMIL déclenchées pendant le même intervalle d'actualisation.

- -

Syntaxe

- -
time = window.mozAnimationStartTime;
-
- -

Paramètres

- - - -

Compatibilité des navigateurs

- -

{{Compat("api.Window.mozAnimationStartTime")}}

- -

Voir également

- - diff --git a/files/fr/web/api/animation/starttime/index.md b/files/fr/web/api/animation/starttime/index.md new file mode 100644 index 0000000000..48d8361bf8 --- /dev/null +++ b/files/fr/web/api/animation/starttime/index.md @@ -0,0 +1,40 @@ +--- +title: Window.mozAnimationStartTime +slug: Web/API/Animation/startTime +tags: + - API + - HTML DOM + - Obsolete + - Propriété + - Reference + - Window +translation_of: Web/API/Window/mozAnimationStartTime +original_slug: Web/API/Window/mozAnimationStartTime +--- +

{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}}

+ +

Renvoie l'heure, en millisecondes depuis l'époque, à laquelle les animations ont commencé maintenant doivent être considérées comme ayant commencé. Cette valeur doit être utilisée à la place, par exemple, Date.now(), car cette valeur sera la même pour toutes les animations lancées dans cette fenêtre pendant cet intervalle d'actualisation, leur permettant de rester synchronisées les unes avec les autres.

+ +

Cela permet également aux animations basées sur JavaScript de rester synchronisées avec les transitions CSS et les animations SMIL déclenchées pendant le même intervalle d'actualisation.

+ +

Syntaxe

+ +
time = window.mozAnimationStartTime;
+
+ +

Paramètres

+ + + +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.mozAnimationStartTime")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/animationevent/animationevent/index.html b/files/fr/web/api/animationevent/animationevent/index.html deleted file mode 100644 index aa793738cf..0000000000 --- a/files/fr/web/api/animationevent/animationevent/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: AnimationEvent() -slug: Web/API/AnimationEvent/AnimationEvent -translation_of: Web/API/AnimationEvent/AnimationEvent ---- -

{{APIRef("Web Animations")}}{{SeeCompatTable}}

- -

Le constructeur AnimationEvent() retourne un nouvel {{domxref("AnimationEvent")}}, représentant un évènement en relation avec une animation.

- -

Syntaxe

- -
animationEvent = new AnimationEvent(type, {animationName: aPropertyName,
-                                           elapsedTime  : aFloat,
-                                           pseudoElement: aPseudoElementName});
-
- -

Paramètres

- -

Le constructeur AnimationEvent() constructeur hérite également des arguments de  {{domxref("Event.Event", "Event()")}}.

- -
-
type
-
Un {{domxref("DOMString")}} représentant le nom du type de AnimationEvent. Il est sensible à la casse (majuscule-minuscule) et peut être: 'animationstart', 'animationend', or 'animationiteration'.
-
animationName {{optional_inline}}
-
Un {{domxref("DOMString")}} contenant la valeur de  la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut "".
-
elapsedTime {{optional_inline}}
-
Un float donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement "animationstart" , elapsedTime est de 0.0 jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par elapsedTime contenant (-1 *  délais). SA valeur par défaut vaut 0.0.
-
pseudoElement {{optional_inline}}
-
Is a {{domxref("DOMString")}}, starting with "::", containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: "". It defaults to "".
-
- -

Return value

- -

A new {{domxref("AnimationEvent")}}, initialized per any provided options.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}{{ Spec2('CSS3 Animations')}}Initial definition.
- -

Browser compatibility

- -

{{Compat("api.AnimationEvent.AnimationEvent")}}

- -

See also

- - diff --git a/files/fr/web/api/animationevent/animationevent/index.md b/files/fr/web/api/animationevent/animationevent/index.md new file mode 100644 index 0000000000..aa793738cf --- /dev/null +++ b/files/fr/web/api/animationevent/animationevent/index.md @@ -0,0 +1,65 @@ +--- +title: AnimationEvent() +slug: Web/API/AnimationEvent/AnimationEvent +translation_of: Web/API/AnimationEvent/AnimationEvent +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

Le constructeur AnimationEvent() retourne un nouvel {{domxref("AnimationEvent")}}, représentant un évènement en relation avec une animation.

+ +

Syntaxe

+ +
animationEvent = new AnimationEvent(type, {animationName: aPropertyName,
+                                           elapsedTime  : aFloat,
+                                           pseudoElement: aPseudoElementName});
+
+ +

Paramètres

+ +

Le constructeur AnimationEvent() constructeur hérite également des arguments de  {{domxref("Event.Event", "Event()")}}.

+ +
+
type
+
Un {{domxref("DOMString")}} représentant le nom du type de AnimationEvent. Il est sensible à la casse (majuscule-minuscule) et peut être: 'animationstart', 'animationend', or 'animationiteration'.
+
animationName {{optional_inline}}
+
Un {{domxref("DOMString")}} contenant la valeur de  la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut "".
+
elapsedTime {{optional_inline}}
+
Un float donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement "animationstart" , elapsedTime est de 0.0 jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par elapsedTime contenant (-1 *  délais). SA valeur par défaut vaut 0.0.
+
pseudoElement {{optional_inline}}
+
Is a {{domxref("DOMString")}}, starting with "::", containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: "". It defaults to "".
+
+ +

Return value

+ +

A new {{domxref("AnimationEvent")}}, initialized per any provided options.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}{{ Spec2('CSS3 Animations')}}Initial definition.
+ +

Browser compatibility

+ +

{{Compat("api.AnimationEvent.AnimationEvent")}}

+ +

See also

+ + diff --git a/files/fr/web/api/animationevent/animationname/index.html b/files/fr/web/api/animationevent/animationname/index.html deleted file mode 100644 index c47cf112be..0000000000 --- a/files/fr/web/api/animationevent/animationname/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: AnimationEvent.animationName -slug: Web/API/AnimationEvent/animationName -tags: - - API - - AnimationEvent - - CSS Animations - - Experimental - - Propriété - - Reference -translation_of: Web/API/AnimationEvent/animationName ---- -

{{SeeCompatTable}}{{ apiref("AnimationEvent") }}

- -

La propriété en lecture seule AnimationEvent.animationName est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.

- -

Syntaxe

- -
nom = AnimationEvent.animationName
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName')}}{{Spec2('CSS3 Animations')}}Première définition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.AnimationEvent.animationName")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/animationevent/animationname/index.md b/files/fr/web/api/animationevent/animationname/index.md new file mode 100644 index 0000000000..c47cf112be --- /dev/null +++ b/files/fr/web/api/animationevent/animationname/index.md @@ -0,0 +1,50 @@ +--- +title: AnimationEvent.animationName +slug: Web/API/AnimationEvent/animationName +tags: + - API + - AnimationEvent + - CSS Animations + - Experimental + - Propriété + - Reference +translation_of: Web/API/AnimationEvent/animationName +--- +

{{SeeCompatTable}}{{ apiref("AnimationEvent") }}

+ +

La propriété en lecture seule AnimationEvent.animationName est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.

+ +

Syntaxe

+ +
nom = AnimationEvent.animationName
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName')}}{{Spec2('CSS3 Animations')}}Première définition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AnimationEvent.animationName")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/animationevent/elapsedtime/index.html b/files/fr/web/api/animationevent/elapsedtime/index.html deleted file mode 100644 index 2b5dcaeece..0000000000 --- a/files/fr/web/api/animationevent/elapsedtime/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: AnimationEvent.elapsedTime -slug: Web/API/AnimationEvent/elapsedTime -tags: - - API - - AnimationEvent - - CSS Animations - - Experimental - - Property - - Reference -translation_of: Web/API/AnimationEvent/elapsedTime ---- -

{{SeeCompatTable}}{{ apiref("AnimationEvent") }}

- -

Résumé

- -

La propriété en lecture seule AnimationEvent.elapsedTime est un float indiquant la quantité de temps pendant laquelle l'animation a tournée, en secondes, quand l'évènement a été déclenché, excluant tout temps où l'animation était en pause. Pour un évènement "animationstart", elapsedTime est 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative, dans ce cas l'évènement est déclenché avec elapsedTime contenant (-1 * délai).

- -

Syntaxe

- -
temps = AnimationEvent.elapsedTime
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('CSS3 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }}{{ Spec2('CSS3 Animations')}}Première définition
- -

Compatibilité des navigateurs

- -

{{Compat("api.AnimationEvent.elapsedTime")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/animationevent/elapsedtime/index.md b/files/fr/web/api/animationevent/elapsedtime/index.md new file mode 100644 index 0000000000..2b5dcaeece --- /dev/null +++ b/files/fr/web/api/animationevent/elapsedtime/index.md @@ -0,0 +1,52 @@ +--- +title: AnimationEvent.elapsedTime +slug: Web/API/AnimationEvent/elapsedTime +tags: + - API + - AnimationEvent + - CSS Animations + - Experimental + - Property + - Reference +translation_of: Web/API/AnimationEvent/elapsedTime +--- +

{{SeeCompatTable}}{{ apiref("AnimationEvent") }}

+ +

Résumé

+ +

La propriété en lecture seule AnimationEvent.elapsedTime est un float indiquant la quantité de temps pendant laquelle l'animation a tournée, en secondes, quand l'évènement a été déclenché, excluant tout temps où l'animation était en pause. Pour un évènement "animationstart", elapsedTime est 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative, dans ce cas l'évènement est déclenché avec elapsedTime contenant (-1 * délai).

+ +

Syntaxe

+ +
temps = AnimationEvent.elapsedTime
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('CSS3 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }}{{ Spec2('CSS3 Animations')}}Première définition
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AnimationEvent.elapsedTime")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/animationevent/index.html b/files/fr/web/api/animationevent/index.html deleted file mode 100644 index 9b24b82be1..0000000000 --- a/files/fr/web/api/animationevent/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: AnimationEvent -slug: Web/API/AnimationEvent -tags: - - API - - Experimental - - Interface - - Reference - - Web Animations -translation_of: Web/API/AnimationEvent ---- -

{{SeeCompatTable}}{{APIRef("Web Animations API")}}

- -

L'interface AnimationEvent représentent les évènements apportant des informations sur les animations CSS.

- -

{{InheritanceDiagram}}

- -
-
- -

Constructeur

- -
-
{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
-
Créer un évènement AnimationEvent avec les paramètres spécifiés.
-
- -

Propriétés

- -

Hérite également des propriétés de son parent {{domxref("Event")}}.

- -
-
{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
-
Est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.
-
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
-
Est un nombre à virgule flottante, donnant le temps pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause de l'animation. Pour un évènement animationstart, elapsedTime est à 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative. Dans ce cas, l'évènement sera déclenché avec elapsedTime contenant (-1 * la valeur de animation-delay).
-
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
-
est une {{domxref("DOMString")}}, démarrant avec '::', contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide.
-
- -

Méthodes

- -

Hérite également des propriétés de son parent {{domxref("Event")}}.

- -
-
{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
-
Initialise un AnimationEvent créé avec la méthode obsolète {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}{{ Spec2('CSS3 Animations') }}Première définition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.AnimationEvent")}}

- -

Voir également

- - diff --git a/files/fr/web/api/animationevent/index.md b/files/fr/web/api/animationevent/index.md new file mode 100644 index 0000000000..9b24b82be1 --- /dev/null +++ b/files/fr/web/api/animationevent/index.md @@ -0,0 +1,78 @@ +--- +title: AnimationEvent +slug: Web/API/AnimationEvent +tags: + - API + - Experimental + - Interface + - Reference + - Web Animations +translation_of: Web/API/AnimationEvent +--- +

{{SeeCompatTable}}{{APIRef("Web Animations API")}}

+ +

L'interface AnimationEvent représentent les évènements apportant des informations sur les animations CSS.

+ +

{{InheritanceDiagram}}

+ +
+
+ +

Constructeur

+ +
+
{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
+
Créer un évènement AnimationEvent avec les paramètres spécifiés.
+
+ +

Propriétés

+ +

Hérite également des propriétés de son parent {{domxref("Event")}}.

+ +
+
{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
+
Est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.
+
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
+
Est un nombre à virgule flottante, donnant le temps pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause de l'animation. Pour un évènement animationstart, elapsedTime est à 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative. Dans ce cas, l'évènement sera déclenché avec elapsedTime contenant (-1 * la valeur de animation-delay).
+
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
+
est une {{domxref("DOMString")}}, démarrant avec '::', contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide.
+
+ +

Méthodes

+ +

Hérite également des propriétés de son parent {{domxref("Event")}}.

+ +
+
{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
+
Initialise un AnimationEvent créé avec la méthode obsolète {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}{{ Spec2('CSS3 Animations') }}Première définition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AnimationEvent")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/animationevent/pseudoelement/index.html b/files/fr/web/api/animationevent/pseudoelement/index.html deleted file mode 100644 index 9bee1cda03..0000000000 --- a/files/fr/web/api/animationevent/pseudoelement/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: AnimationEvent.pseudoElement -slug: Web/API/AnimationEvent/pseudoElement -tags: - - API - - AnimationEvent - - Experimental - - Propriété - - Reference -translation_of: Web/API/AnimationEvent/pseudoElement ---- -

{{SeeCompatTable}}{{ apiref("AnimationEvent") }}

- -

La propriété en lecture seule AnimationEvent.pseudoElement est une {{domxref("DOMString")}}, commençant par '::', contenant le nom du pseudo-élément sur lequel tourne l'animation. Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : ''.

- -

Syntaxe

- -
nom = AnimationEvent.pseudoElement
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{ SpecName('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }}{{ Spec2('CSS3 Animations')}}Définition initiale.
-

Compatibilité des navigateurs

- -

{{Compat("api.AnimationEvent.pseudoElement")}}

- -

Voir également

- - diff --git a/files/fr/web/api/animationevent/pseudoelement/index.md b/files/fr/web/api/animationevent/pseudoelement/index.md new file mode 100644 index 0000000000..9bee1cda03 --- /dev/null +++ b/files/fr/web/api/animationevent/pseudoelement/index.md @@ -0,0 +1,48 @@ +--- +title: AnimationEvent.pseudoElement +slug: Web/API/AnimationEvent/pseudoElement +tags: + - API + - AnimationEvent + - Experimental + - Propriété + - Reference +translation_of: Web/API/AnimationEvent/pseudoElement +--- +

{{SeeCompatTable}}{{ apiref("AnimationEvent") }}

+ +

La propriété en lecture seule AnimationEvent.pseudoElement est une {{domxref("DOMString")}}, commençant par '::', contenant le nom du pseudo-élément sur lequel tourne l'animation. Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : ''.

+ +

Syntaxe

+ +
nom = AnimationEvent.pseudoElement
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{ SpecName('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }}{{ Spec2('CSS3 Animations')}}Définition initiale.
+

Compatibilité des navigateurs

+ +

{{Compat("api.AnimationEvent.pseudoElement")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/atob/index.html b/files/fr/web/api/atob/index.html deleted file mode 100644 index b7b3b16a43..0000000000 --- a/files/fr/web/api/atob/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: window.atob -slug: Web/API/atob -tags: - - API - - DOM - - Reference - - WindowOrWorkerGlobalScope - - atob -translation_of: Web/API/WindowOrWorkerGlobalScope/atob -original_slug: 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

- -

{{Compat("api.WindowOrWorkerGlobalScope.atob")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/atob/index.md b/files/fr/web/api/atob/index.md new file mode 100644 index 0000000000..b7b3b16a43 --- /dev/null +++ b/files/fr/web/api/atob/index.md @@ -0,0 +1,78 @@ +--- +title: window.atob +slug: Web/API/atob +tags: + - API + - DOM + - Reference + - WindowOrWorkerGlobalScope + - atob +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +original_slug: 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

+ +

{{Compat("api.WindowOrWorkerGlobalScope.atob")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/attr/index.html b/files/fr/web/api/attr/index.html deleted file mode 100644 index 8a97846bae..0000000000 --- a/files/fr/web/api/attr/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Attr -slug: Web/API/Attr -tags: - - API - - Attribut - - DOM -translation_of: Web/API/Attr ---- -
{{APIRef("DOM")}}
- -

Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr.

- -
-

Attention : À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète.

-
- -

Propriétés

- -
-
{{domxref("Attr.name", "name")}} {{readOnlyInline}}
-
Le nom de l'attribut.
-
{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
-
Une {{domxref("DOMString","Chaîne de caractères")}} représentant l'URI de l'espace nom de l'attribut ou null s'il n'y a pas d'espace nom.
-
{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
-
Une {{domxref("DOMString","Chaîne de caractères")}} représentant la partie locale du nom qualifié de l'attribut.
-
{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
-
Une {{domxref("DOMString","Chaîne de caractères")}} représentant le préfixe de l'espace nom de l'attribut, ou null si aucun préfixe n'est spécifié.
-
{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}
-
L'élément contenant l'attribut.
-
- -
-

Note : DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.
- Comme cela n'est pas vrai quand les objets Attr  sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété.

- -

Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.

-
- -
-
{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
-
Cette propriété renvoie toujours la valeur true. À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et false si sa valeur provenait de la valeur par défaut définie dans la DTD du document.
-
{{domxref("Attr.value", "Value")}}
-
La valeur de l'attribut.
-
- -
-

Note: DOM Niveau 3 a défini namespaceURI, localName et prefix sur l'interface {{domxref("Node")}}. Dans DOM4 ils ont été déplacés vers Attr.

- -

Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.

-
- -

Propriétés et méthodes dépréciées

- -

Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie.

- -
-
attributes
-
Cette propriété retourne désormais toujours NULL.
-
childNodes {{obsolete_inline(14)}}
-
Cette propriété retourne désormais toujours un {{domxref("NodeList")}}  vide.
-
firstChild {{obsolete_inline(14)}}
-
Cette propriété retourne désormais toujours NULL.
-
isId {{readOnlyInline}}
-
Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par  un {{Glossary("DTD")}}  ou une autre description de schéma.
-
lastChild {{obsolete_inline(14)}}
-
Cette propriété retourne désormais toujours NULL.
-
nextSibling
-
Cette propriété retourne désormais toujours NULL.
-
nodeName
-
Utilisez {{domxref("Attr.name")}} à la place.
-
nodeType
-
Cette propriété retourne toujours 2. (ATTRIBUTE_NODE).
-
nodeValue
-
Utilisez {{domxref("Attr.value")}} à la place.
-
ownerDocument
-
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
-
parentNode
-
Cette propriété retourne désormais toujours NULL.
-
previousSibling
-
Cette propriété retourne désormais toujours NULL.
-
schemaTypeInfo {{obsolete_inline}} {{readOnlyInline}}
-
Les informations de type associées à cet attribut. Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de {{domxref("Document.normalizeDocument")}}, cette propriété peut ne pas être fiable si le nœud a été déplacé.
-
specified
-
Cette propriété retourne désormais toujours true.
-
textContent
-
Utilisez {{domxref ("Attr.value")}} à la place.
-
- -


- Les méthodes suivantes ont été dépréciées:

- -
-
appendChild() {{obsolete_inline(14)}}
-
Modifiez à la place la valeur de {{domxref ("Attr.value")}}.
-
cloneNode()
-
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
-
createAttribute()
-
Utilisez {{domxref("Attr.setAttribute()")}} à la place.
-
createAttributeNS()
-
Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.
-
getAttributeNode()
-
Utilisez {{domxref("Attr.getAttribute()")}} à la place.
-
getAttributeNodeNS()
-
Utilisez {{domxref("Attr.getAttributeNS()")}} à la place.
-
hasAttributes() {{obsolete_inline("21.0")}}
-
Cette méthode retourne désormais toujours false.
-
hasChildNodes()
-
Cette méthode retourne désormais toujours false.
-
insertBefore()
-
Modifiez à la place la valeur de {{domxref ("Attr.value")}}.
-
isSupported()
-
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
-
isEqualNode()
-
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
-
normalize()
-
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
-
removeAttributeNode()
-
Utilisez {{domxref("Attr.removeAttribute()")}} à la place.
-
removeChild() {{obsolete_inline(14)}}
-
Modifiez à la place la valeur de {{domxref("Attr.value")}}.
-
replaceChild() {{obsolete_inline(14)}}
-
Modifiez à la place la valeur de {{domxref("Attr.value")}}.
-
setAttributeNode()
-
Utilisez {{domxref("Attr.setAttribute()")}} à la place.
-
setAttributeNodeNS()
-
Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}{{Spec2("DOM WHATWG")}}Ajoute la propriété ownerElement property
{{SpecName("DOM4", "#interface-attr", "Attr")}}{{Spec2("DOM4")}}A déplacé les namespaceURI, prefix et localName de {{domxref("Node")}} vers cet API et supprimé ownerElement, schemaTypeInfo et isId.
{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}{{Spec2("DOM3 Core")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Attr")}}

diff --git a/files/fr/web/api/attr/index.md b/files/fr/web/api/attr/index.md new file mode 100644 index 0000000000..8a97846bae --- /dev/null +++ b/files/fr/web/api/attr/index.md @@ -0,0 +1,161 @@ +--- +title: Attr +slug: Web/API/Attr +tags: + - API + - Attribut + - DOM +translation_of: Web/API/Attr +--- +
{{APIRef("DOM")}}
+ +

Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr.

+ +
+

Attention : À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète.

+
+ +

Propriétés

+ +
+
{{domxref("Attr.name", "name")}} {{readOnlyInline}}
+
Le nom de l'attribut.
+
{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
+
Une {{domxref("DOMString","Chaîne de caractères")}} représentant l'URI de l'espace nom de l'attribut ou null s'il n'y a pas d'espace nom.
+
{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
+
Une {{domxref("DOMString","Chaîne de caractères")}} représentant la partie locale du nom qualifié de l'attribut.
+
{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
+
Une {{domxref("DOMString","Chaîne de caractères")}} représentant le préfixe de l'espace nom de l'attribut, ou null si aucun préfixe n'est spécifié.
+
{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}
+
L'élément contenant l'attribut.
+
+ +
+

Note : DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.
+ Comme cela n'est pas vrai quand les objets Attr  sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété.

+ +

Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.

+
+ +
+
{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
+
Cette propriété renvoie toujours la valeur true. À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et false si sa valeur provenait de la valeur par défaut définie dans la DTD du document.
+
{{domxref("Attr.value", "Value")}}
+
La valeur de l'attribut.
+
+ +
+

Note: DOM Niveau 3 a défini namespaceURI, localName et prefix sur l'interface {{domxref("Node")}}. Dans DOM4 ils ont été déplacés vers Attr.

+ +

Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.

+
+ +

Propriétés et méthodes dépréciées

+ +

Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie.

+ +
+
attributes
+
Cette propriété retourne désormais toujours NULL.
+
childNodes {{obsolete_inline(14)}}
+
Cette propriété retourne désormais toujours un {{domxref("NodeList")}}  vide.
+
firstChild {{obsolete_inline(14)}}
+
Cette propriété retourne désormais toujours NULL.
+
isId {{readOnlyInline}}
+
Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par  un {{Glossary("DTD")}}  ou une autre description de schéma.
+
lastChild {{obsolete_inline(14)}}
+
Cette propriété retourne désormais toujours NULL.
+
nextSibling
+
Cette propriété retourne désormais toujours NULL.
+
nodeName
+
Utilisez {{domxref("Attr.name")}} à la place.
+
nodeType
+
Cette propriété retourne toujours 2. (ATTRIBUTE_NODE).
+
nodeValue
+
Utilisez {{domxref("Attr.value")}} à la place.
+
ownerDocument
+
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
+
parentNode
+
Cette propriété retourne désormais toujours NULL.
+
previousSibling
+
Cette propriété retourne désormais toujours NULL.
+
schemaTypeInfo {{obsolete_inline}} {{readOnlyInline}}
+
Les informations de type associées à cet attribut. Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de {{domxref("Document.normalizeDocument")}}, cette propriété peut ne pas être fiable si le nœud a été déplacé.
+
specified
+
Cette propriété retourne désormais toujours true.
+
textContent
+
Utilisez {{domxref ("Attr.value")}} à la place.
+
+ +


+ Les méthodes suivantes ont été dépréciées:

+ +
+
appendChild() {{obsolete_inline(14)}}
+
Modifiez à la place la valeur de {{domxref ("Attr.value")}}.
+
cloneNode()
+
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
+
createAttribute()
+
Utilisez {{domxref("Attr.setAttribute()")}} à la place.
+
createAttributeNS()
+
Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.
+
getAttributeNode()
+
Utilisez {{domxref("Attr.getAttribute()")}} à la place.
+
getAttributeNodeNS()
+
Utilisez {{domxref("Attr.getAttributeNS()")}} à la place.
+
hasAttributes() {{obsolete_inline("21.0")}}
+
Cette méthode retourne désormais toujours false.
+
hasChildNodes()
+
Cette méthode retourne désormais toujours false.
+
insertBefore()
+
Modifiez à la place la valeur de {{domxref ("Attr.value")}}.
+
isSupported()
+
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
+
isEqualNode()
+
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
+
normalize()
+
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
+
removeAttributeNode()
+
Utilisez {{domxref("Attr.removeAttribute()")}} à la place.
+
removeChild() {{obsolete_inline(14)}}
+
Modifiez à la place la valeur de {{domxref("Attr.value")}}.
+
replaceChild() {{obsolete_inline(14)}}
+
Modifiez à la place la valeur de {{domxref("Attr.value")}}.
+
setAttributeNode()
+
Utilisez {{domxref("Attr.setAttribute()")}} à la place.
+
setAttributeNodeNS()
+
Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}{{Spec2("DOM WHATWG")}}Ajoute la propriété ownerElement property
{{SpecName("DOM4", "#interface-attr", "Attr")}}{{Spec2("DOM4")}}A déplacé les namespaceURI, prefix et localName de {{domxref("Node")}} vers cet API et supprimé ownerElement, schemaTypeInfo et isId.
{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}{{Spec2("DOM3 Core")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Attr")}}

diff --git a/files/fr/web/api/attr/localname/index.html b/files/fr/web/api/attr/localname/index.html deleted file mode 100644 index c23a595af4..0000000000 --- a/files/fr/web/api/attr/localname/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Attr.localName -slug: Web/API/Attr/localName -tags: - - API - - DOM - - Propriétés - - Reference -translation_of: Web/API/Attr/localName ---- -
{{APIRef("DOM")}}
- -

La propriété Attr.localName, en lecture seule, renvoie la partie locale du nom qualifié d'un élément.

- -
-

Note : Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.

-
- -

Syntaxe

- -
name = attribute.localName
-
- -

Valeur renvoyée

- -

Une {{domxref("DOMString")}} (chaîne de caractères) qui représente la partie locale du nom qualifié de l'élément.

- -

Exemple

- -

Cet exemple affiche "id" dans une  fenêtre d'alerte.

- -

Contenu HTML

- -
<button id="exemple">Clique ici</button>
- -

Contenu JavaScript

- -
const element = document.querySelector("#exemple");
-element.addEventListener("click", function() {
-  const attribute = element.attributes[0];
-  alert(attribute.localName);
-});
-
- -

{{ EmbedLiveSample('Exemple','100%',30) }}

- -

Notes

- -

Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents.

- -
-

Note : dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du  DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM4', '#interface-attr', 'Attr.localName')}}{{Spec2('DOM4')}}première définition
- -

Compatibilité des navigateurs

- -

{{Compat("api.Attr.localName")}}

- -

Voir également

- - diff --git a/files/fr/web/api/attr/localname/index.md b/files/fr/web/api/attr/localname/index.md new file mode 100644 index 0000000000..c23a595af4 --- /dev/null +++ b/files/fr/web/api/attr/localname/index.md @@ -0,0 +1,85 @@ +--- +title: Attr.localName +slug: Web/API/Attr/localName +tags: + - API + - DOM + - Propriétés + - Reference +translation_of: Web/API/Attr/localName +--- +
{{APIRef("DOM")}}
+ +

La propriété Attr.localName, en lecture seule, renvoie la partie locale du nom qualifié d'un élément.

+ +
+

Note : Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.

+
+ +

Syntaxe

+ +
name = attribute.localName
+
+ +

Valeur renvoyée

+ +

Une {{domxref("DOMString")}} (chaîne de caractères) qui représente la partie locale du nom qualifié de l'élément.

+ +

Exemple

+ +

Cet exemple affiche "id" dans une  fenêtre d'alerte.

+ +

Contenu HTML

+ +
<button id="exemple">Clique ici</button>
+ +

Contenu JavaScript

+ +
const element = document.querySelector("#exemple");
+element.addEventListener("click", function() {
+  const attribute = element.attributes[0];
+  alert(attribute.localName);
+});
+
+ +

{{ EmbedLiveSample('Exemple','100%',30) }}

+ +

Notes

+ +

Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents.

+ +
+

Note : dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du  DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM4', '#interface-attr', 'Attr.localName')}}{{Spec2('DOM4')}}première définition
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Attr.localName")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/attr/namespaceuri/index.html b/files/fr/web/api/attr/namespaceuri/index.html deleted file mode 100644 index 73f89cbdeb..0000000000 --- a/files/fr/web/api/attr/namespaceuri/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Attr.namespaceURI -slug: Web/API/Attr/namespaceURI -tags: - - API - - DOM - - Reference - - namespaceURI -translation_of: Web/API/Attr/namespaceURI ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule Attr.namespaceURI retourne l'URI d'espace de nom de l'attribut, ou null si l'élément  n'est pas dans un espace de noms.

- -
-

Note : Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.

-
- -

Syntaxe

- -
namespace = attribute.namespaceURI
- -

Exemple

- -

Dans cet extrait de code, un attribut est examiné pour son {{domxref("localName")}} et son namespaceURI. Si le namespaceURI renvoie l'espace de noms XUL et le localName retourne "browser" (navigateur), alors le noeud est compris comme étant un <browser/> XUL.

- -
if (attribute.localName == "value" &&
-    attribute.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
-  // ceci est une valeur XUL
-}
- -

Notes

- -

Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut.

- -

Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est null. Dans les versions ultérieures, en conformité avec HTML5, il est https://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}

- -

Vous pouvez créer un attribut avec le namespaceURI spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}.

- -

Selon la spécification Namespaces en XML, un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms.

- -

Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}{{Spec2("DOM4")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Attr.namespaceURI")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/attr/namespaceuri/index.md b/files/fr/web/api/attr/namespaceuri/index.md new file mode 100644 index 0000000000..73f89cbdeb --- /dev/null +++ b/files/fr/web/api/attr/namespaceuri/index.md @@ -0,0 +1,74 @@ +--- +title: Attr.namespaceURI +slug: Web/API/Attr/namespaceURI +tags: + - API + - DOM + - Reference + - namespaceURI +translation_of: Web/API/Attr/namespaceURI +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule Attr.namespaceURI retourne l'URI d'espace de nom de l'attribut, ou null si l'élément  n'est pas dans un espace de noms.

+ +
+

Note : Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.

+
+ +

Syntaxe

+ +
namespace = attribute.namespaceURI
+ +

Exemple

+ +

Dans cet extrait de code, un attribut est examiné pour son {{domxref("localName")}} et son namespaceURI. Si le namespaceURI renvoie l'espace de noms XUL et le localName retourne "browser" (navigateur), alors le noeud est compris comme étant un <browser/> XUL.

+ +
if (attribute.localName == "value" &&
+    attribute.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // ceci est une valeur XUL
+}
+ +

Notes

+ +

Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut.

+ +

Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est null. Dans les versions ultérieures, en conformité avec HTML5, il est https://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}

+ +

Vous pouvez créer un attribut avec le namespaceURI spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}.

+ +

Selon la spécification Namespaces en XML, un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms.

+ +

Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}{{Spec2("DOM4")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Attr.namespaceURI")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/attr/prefix/index.html b/files/fr/web/api/attr/prefix/index.html deleted file mode 100644 index 92f9bcfe1b..0000000000 --- a/files/fr/web/api/attr/prefix/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Attr.prefix -slug: Web/API/Attr/prefix -tags: - - API - - DOM - - Propriétés - - Reference -translation_of: Web/API/Attr/prefix ---- -
{{APIRef("DOM")}}
- -

La propriété Attr.prefix en lecture seule renvoie le préfixe de l'espace de noms de l'attribut spécifié ou null si aucun préfixe n'est spécifié

- -
-

Note : Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}.

-
- -

Syntaxe

- -
string = attribute.prefix
-
- -

Exemples

- -

Le code suivant affiche "x" dans la console.

- -
<div x:id="example" onclick="console.log(this.attributes[0].prefix)"/>
-
- -

Notes

- -

Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est utilisé, c'est-à-dire lorsqu'il s'agit d'un document avec un type MIME XML. Cela ne fonctionnera pas pour les documents HTML.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-attr-prefix", "Attr.prefix")}}{{Spec2("DOM4")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Attr.prefix")}}

- -

Voir également

- - diff --git a/files/fr/web/api/attr/prefix/index.md b/files/fr/web/api/attr/prefix/index.md new file mode 100644 index 0000000000..92f9bcfe1b --- /dev/null +++ b/files/fr/web/api/attr/prefix/index.md @@ -0,0 +1,65 @@ +--- +title: Attr.prefix +slug: Web/API/Attr/prefix +tags: + - API + - DOM + - Propriétés + - Reference +translation_of: Web/API/Attr/prefix +--- +
{{APIRef("DOM")}}
+ +

La propriété Attr.prefix en lecture seule renvoie le préfixe de l'espace de noms de l'attribut spécifié ou null si aucun préfixe n'est spécifié

+ +
+

Note : Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}.

+
+ +

Syntaxe

+ +
string = attribute.prefix
+
+ +

Exemples

+ +

Le code suivant affiche "x" dans la console.

+ +
<div x:id="example" onclick="console.log(this.attributes[0].prefix)"/>
+
+ +

Notes

+ +

Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est utilisé, c'est-à-dire lorsqu'il s'agit d'un document avec un type MIME XML. Cela ne fonctionnera pas pour les documents HTML.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-attr-prefix", "Attr.prefix")}}{{Spec2("DOM4")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Attr.prefix")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.html b/files/fr/web/api/audiobuffer/audiobuffer/index.html deleted file mode 100644 index ce67efa5e8..0000000000 --- a/files/fr/web/api/audiobuffer/audiobuffer/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: AudioBuffer() -slug: Web/API/AudioBuffer/AudioBuffer -translation_of: Web/API/AudioBuffer/AudioBuffer ---- -

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

- -

Le constructeur AudioBuffer créer un nouvel objet {{domxref("AudioBuffer")}}.

- -

Syntax

- -
var audioBuffer = new AudioBuffer([options]);
-var audioBuffer = new AudioBuffer(context[, options]);
- -

Parameters

- -
-
context {{obsolete_inline("")}}
-
Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails.
-
options {{optional_inline}}
-
Les options sont les suivantes: -
    -
  • length:  Longueur de l'échantillonnage du tampon.
    • -
  • numberOfChannels: Nombre de cannaux du buffer. La valeur par défaut est 1. 
    • -
  • sampleRate: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du context utilisé dans la construction de cet objet
    • -
-
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API','#AudioBuffer','AudioBuffer')}}{{Spec2('Web Audio API')}}Définition initiale
- -

Compatibilité des Navigateurs

- -

{{Compat("api.AudioBuffer.AudioBuffer")}}

diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.md b/files/fr/web/api/audiobuffer/audiobuffer/index.md new file mode 100644 index 0000000000..ce67efa5e8 --- /dev/null +++ b/files/fr/web/api/audiobuffer/audiobuffer/index.md @@ -0,0 +1,49 @@ +--- +title: AudioBuffer() +slug: Web/API/AudioBuffer/AudioBuffer +translation_of: Web/API/AudioBuffer/AudioBuffer +--- +

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

+ +

Le constructeur AudioBuffer créer un nouvel objet {{domxref("AudioBuffer")}}.

+ +

Syntax

+ +
var audioBuffer = new AudioBuffer([options]);
+var audioBuffer = new AudioBuffer(context[, options]);
+ +

Parameters

+ +
+
context {{obsolete_inline("")}}
+
Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails.
+
options {{optional_inline}}
+
Les options sont les suivantes: +
    +
  • length:  Longueur de l'échantillonnage du tampon.
    • +
  • numberOfChannels: Nombre de cannaux du buffer. La valeur par défaut est 1. 
    • +
  • sampleRate: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du context utilisé dans la construction de cet objet
    • +
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API','#AudioBuffer','AudioBuffer')}}{{Spec2('Web Audio API')}}Définition initiale
+ +

Compatibilité des Navigateurs

+ +

{{Compat("api.AudioBuffer.AudioBuffer")}}

diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.html b/files/fr/web/api/audiobuffer/copyfromchannel/index.html deleted file mode 100644 index 2ae87ca120..0000000000 --- a/files/fr/web/api/audiobuffer/copyfromchannel/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: AudioBuffer.copyFromChannel() -slug: Web/API/AudioBuffer/copyFromChannel -tags: - - API - - Méthode - - Reference - - Web Audio API -translation_of: Web/API/AudioBuffer/copyFromChannel ---- -

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

- -

La méthode copyFromChannel() de l'interface {{ domxref("AudioBuffer") }} copie les échantillons de l'un des canaux de l'AudioBuffer dans un tableau.

- -

Syntaxe

- -
tableauDonnees.copyFromChannel(destination,numeroCanal,decalageDebut);
- -

Paramètres

- -
-
destination
-
Un tableau {{domxref("Float32Array")}} dans lequel copier les données.
-
channelNumber
-
Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si channelNumber est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception INDEX_SIZE_ERR est levée.
-
startInChannel {{optional_inline}}
-
Un offset optionnel à partir duquel copier les données. Si la valeur de startInChannel est supérieure à {{domxref("AudioBuffer.length")}}, une exception INDEX_SIZE_ERR est levée.
-
- -

Exemple

- -
var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
-var autreTableau = new Float32Array(length);
-tableauDonnees.copyFromChannel(autreTableau,1,0);
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer.copyFromChannel")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.md b/files/fr/web/api/audiobuffer/copyfromchannel/index.md new file mode 100644 index 0000000000..2ae87ca120 --- /dev/null +++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.md @@ -0,0 +1,62 @@ +--- +title: AudioBuffer.copyFromChannel() +slug: Web/API/AudioBuffer/copyFromChannel +tags: + - API + - Méthode + - Reference + - Web Audio API +translation_of: Web/API/AudioBuffer/copyFromChannel +--- +

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

+ +

La méthode copyFromChannel() de l'interface {{ domxref("AudioBuffer") }} copie les échantillons de l'un des canaux de l'AudioBuffer dans un tableau.

+ +

Syntaxe

+ +
tableauDonnees.copyFromChannel(destination,numeroCanal,decalageDebut);
+ +

Paramètres

+ +
+
destination
+
Un tableau {{domxref("Float32Array")}} dans lequel copier les données.
+
channelNumber
+
Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si channelNumber est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception INDEX_SIZE_ERR est levée.
+
startInChannel {{optional_inline}}
+
Un offset optionnel à partir duquel copier les données. Si la valeur de startInChannel est supérieure à {{domxref("AudioBuffer.length")}}, une exception INDEX_SIZE_ERR est levée.
+
+ +

Exemple

+ +
var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
+var autreTableau = new Float32Array(length);
+tableauDonnees.copyFromChannel(autreTableau,1,0);
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBuffer.copyFromChannel")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.html b/files/fr/web/api/audiobuffer/copytochannel/index.html deleted file mode 100644 index 38a6393ebc..0000000000 --- a/files/fr/web/api/audiobuffer/copytochannel/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: AudioBuffer.copyToChannel() -slug: Web/API/AudioBuffer/copyToChannel -translation_of: Web/API/AudioBuffer/copyToChannel ---- -

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

- -

La méthode copyToChannel() de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'AudioBuffer spécifié.

- -

Syntaxe

- -
myArrayBuffer.copyToChannel(source, channelNumber, startInChannel);
- -

Paramètres

- -
-
source
-
Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données.
-
channelNumber
-
Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si channelNumber est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception INDEX_SIZE_ERR est levée.
-
startInChannel {{optional_inline}}
-
Un offset optionnel à partir duquel copier les données. Si la valeur de startInChannel est supérieure à {{domxref("AudioBuffer.length")}}, une exception INDEX_SIZE_ERR est levée.
-
- -

Exemple

- -
var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
-var autreTableau = new Float32Array;
-// Copy les données depuis le second canal vers le second tableau.
-tableauDonnees.copyFromChannel(autreTableau,1,0);
-// Copie les données depuis le second tableau vers le premier canal du premier tableau. A présent les deux canaux ont des données identiques.
-tableauDonnees.copyToChannel (autreTableau,0,0);
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer.copyToChannel")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.md b/files/fr/web/api/audiobuffer/copytochannel/index.md new file mode 100644 index 0000000000..38a6393ebc --- /dev/null +++ b/files/fr/web/api/audiobuffer/copytochannel/index.md @@ -0,0 +1,60 @@ +--- +title: AudioBuffer.copyToChannel() +slug: Web/API/AudioBuffer/copyToChannel +translation_of: Web/API/AudioBuffer/copyToChannel +--- +

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

+ +

La méthode copyToChannel() de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'AudioBuffer spécifié.

+ +

Syntaxe

+ +
myArrayBuffer.copyToChannel(source, channelNumber, startInChannel);
+ +

Paramètres

+ +
+
source
+
Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données.
+
channelNumber
+
Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si channelNumber est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception INDEX_SIZE_ERR est levée.
+
startInChannel {{optional_inline}}
+
Un offset optionnel à partir duquel copier les données. Si la valeur de startInChannel est supérieure à {{domxref("AudioBuffer.length")}}, une exception INDEX_SIZE_ERR est levée.
+
+ +

Exemple

+ +
var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
+var autreTableau = new Float32Array;
+// Copy les données depuis le second canal vers le second tableau.
+tableauDonnees.copyFromChannel(autreTableau,1,0);
+// Copie les données depuis le second tableau vers le premier canal du premier tableau. A présent les deux canaux ont des données identiques.
+tableauDonnees.copyToChannel (autreTableau,0,0);
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBuffer.copyToChannel")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffer/duration/index.html b/files/fr/web/api/audiobuffer/duration/index.html deleted file mode 100644 index 447932473d..0000000000 --- a/files/fr/web/api/audiobuffer/duration/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: AudioBuffer.duration -slug: Web/API/AudioBuffer/duration -translation_of: Web/API/AudioBuffer/duration ---- -

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

- -
-

La propriéré duration  de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer.

-
- -

Syntaxe

- -
var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-tableauTampon.duration;
- -

Valeur

- -

Nombre flottant à double précision.

- -

Exemple

- -
// Stereo
-var nombreCanaux = 2;
-
-// Crée une mémoire tampon vide de 2 secondes
-// à la fréquence d'échantillonage du contexte AudioContext
-var nombreFrames = contexteAudio.sampleRate * 2.0;
-var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-
-bouton.onclick = function() {
-  // remplit la mémoire tampon avec du bruit blanc
-  // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
-    // génère le tableau contenant les données
-    var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
-      // Math.random() donne une valeur comprise entre [0; 1.0]
-      // l'audio doit être compris entre [-1.0; 1.0]
-      tampon[i] = Math.random() * 2 - 1;
-    }
-  }
-  console.log(tableauDonnees.duration);
-}
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer.duration")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffer/duration/index.md b/files/fr/web/api/audiobuffer/duration/index.md new file mode 100644 index 0000000000..447932473d --- /dev/null +++ b/files/fr/web/api/audiobuffer/duration/index.md @@ -0,0 +1,72 @@ +--- +title: AudioBuffer.duration +slug: Web/API/AudioBuffer/duration +translation_of: Web/API/AudioBuffer/duration +--- +

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

+ +
+

La propriéré duration  de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer.

+
+ +

Syntaxe

+ +
var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauTampon.duration;
+ +

Valeur

+ +

Nombre flottant à double précision.

+ +

Exemple

+ +
// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal < nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i < nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.duration);
+}
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBuffer.duration")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.html b/files/fr/web/api/audiobuffer/getchanneldata/index.html deleted file mode 100644 index 7f64f907a0..0000000000 --- a/files/fr/web/api/audiobuffer/getchanneldata/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: AudioBuffer.getChannelData() -slug: Web/API/AudioBuffer/getChannelData -translation_of: Web/API/AudioBuffer/getChannelData ---- -

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

- -

La méthode getChannelData() de l'interface {{ domxref("AudioBuffer") }} renvoie un {{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal).

- -

Syntaxe

- -
var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-var tampon = tableauDonnees.getChannelData(canal);
- -

Valeur

- -

Un {{domxref("Float32Array")}}.

- -

Exemple

- -

Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi exécuter le code, or voir le code source.

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var bouton = document.querySelector('button');
-var preformate = document.querySelector('pre');
-var monScript = document.querySelector('script');
-
-preformate.innerHTML = monScript.innerHTML;
-
-// Stéréo
-var nombreCanaux = 2;
-// Crée un buffer vide de 2 secondes
-// au taux d'échantillonage du contexte audio
-var nombreFrames = contexteAudio.sampleRate * 2.0;
-
-var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-
-bouton.onclick = function() {
-  // remplit la mémoire tampon avec du bruit blanc
-  // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
-    // génère le tableau contenant les données
-    var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
-      // Math.random() donne une valeur comprise entre [0; 1.0]
-      // l'audio doit être compris entre [-1.0; 1.0]
-      tampon[i] = Math.random() * 2 - 1;
-    }
-  }
-
-  // Récupère un AudioBufferSourceNode.
-  // C'est un AudioNode à utiliser quand on veut jouer AudioBuffer
-  var source = contexteAudio.createBufferSource();
-
-  // assigne le buffer au AudioBufferSourceNode
-  source.buffer = tableauDonnees;
-
-  // connecte le AudioBufferSourceNode avec
-  // la destination pour qu'on puisse entendre le son
-  source.connect(contexteAudio.destination);
-
-  // lance la lecture du so
-  source.start();
-}
- -

Paramètres

- -
-
channel
-
The channel property is an index representing the particular channel to get data for. An index value of 0 represents the first channel. If the channel index value is greater than of equal to {{domxref("AudioBuffer.numberOfChannels")}}, an INDEX_SIZE_ERR exception will be thrown.
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer.getChannelData")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.md b/files/fr/web/api/audiobuffer/getchanneldata/index.md new file mode 100644 index 0000000000..7f64f907a0 --- /dev/null +++ b/files/fr/web/api/audiobuffer/getchanneldata/index.md @@ -0,0 +1,98 @@ +--- +title: AudioBuffer.getChannelData() +slug: Web/API/AudioBuffer/getChannelData +translation_of: Web/API/AudioBuffer/getChannelData +--- +

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

+ +

La méthode getChannelData() de l'interface {{ domxref("AudioBuffer") }} renvoie un {{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal).

+ +

Syntaxe

+ +
var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+var tampon = tableauDonnees.getChannelData(canal);
+ +

Valeur

+ +

Un {{domxref("Float32Array")}}.

+ +

Exemple

+ +

Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi exécuter le code, or voir le code source.

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var bouton = document.querySelector('button');
+var preformate = document.querySelector('pre');
+var monScript = document.querySelector('script');
+
+preformate.innerHTML = monScript.innerHTML;
+
+// Stéréo
+var nombreCanaux = 2;
+// Crée un buffer vide de 2 secondes
+// au taux d'échantillonage du contexte audio
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+
+var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal < nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i < nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+
+  // Récupère un AudioBufferSourceNode.
+  // C'est un AudioNode à utiliser quand on veut jouer AudioBuffer
+  var source = contexteAudio.createBufferSource();
+
+  // assigne le buffer au AudioBufferSourceNode
+  source.buffer = tableauDonnees;
+
+  // connecte le AudioBufferSourceNode avec
+  // la destination pour qu'on puisse entendre le son
+  source.connect(contexteAudio.destination);
+
+  // lance la lecture du so
+  source.start();
+}
+ +

Paramètres

+ +
+
channel
+
The channel property is an index representing the particular channel to get data for. An index value of 0 represents the first channel. If the channel index value is greater than of equal to {{domxref("AudioBuffer.numberOfChannels")}}, an INDEX_SIZE_ERR exception will be thrown.
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBuffer.getChannelData")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffer/index.html b/files/fr/web/api/audiobuffer/index.html deleted file mode 100644 index faa4f0f309..0000000000 --- a/files/fr/web/api/audiobuffer/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: AudioBuffer -slug: Web/API/AudioBuffer -tags: - - API - - Experimental - - Reference - - Web Audio API -translation_of: Web/API/AudioBuffer ---- -

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

- -

L'interface AudioBuffer représente une ressource audio stockée en mémoire, créée à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes avec {{ domxref("AudioContext.createBuffer()") }}. Une fois mises en mémoire dans un AudioBuffer, les données audio sont transférées dans un {{ domxref("AudioBufferSourceNode") }} afin d'être lues.
-
- Ce type d'objet est conçu pour contenir de petit extraits audio, durant généralement moins de 45s. Pour les sons plus longs, les objets implémentant {{domxref ("MediaAudioElementSourceNode")}} sont plus adaptés. La mémoire tampon contient des données au format non entrelacé IEEE 32-bit PCM linéaire, avec une portée nominale comprise entre -1 et +1. S'il y a plusieurs canaux, ils sont stockés dans des mémoires-tampon distinctes.

- -

Constructeur

- -
-
{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}
-
Crée et retourne un nouvel objet AudioBuffer.
-
- -

Propriétés

- -
-
{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}
-
Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon.
-
{{domxref("AudioBuffer.length")}} {{readonlyInline}}
-
Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon.
-
{{domxref("AudioBuffer.duration")}} {{readonlyInline}}
-
Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon.
-
{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}
-
Retourne un nombre entier qui représente le nombre de canaux audio discrets décrits par les données PCM stockées dans la mémoire tampon.
-
- -

Méthodes

- -
-
{{domxref("AudioBuffer.getChannelData()")}}
-
Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal).
-
{{domxref("AudioBuffer.copyFromChannel()")}}
-
Copie les échantillons du canal associé à AudioBuffer dans un tableau de destination.
-
{{domxref("AudioBuffer.copyToChannel()")}}
-
Copie les échantillons dans le canal associé à AudioBuffer, depuis le tableau source.
-
- -

Exemple

- -

L'exemple suivant montre comment créer un  AudioBuffer et le remplir avec du bruit blanc. Le code source est disponible sur notre repo audio-buffer demo; une version live est également consultable.

- -
// Stéréo
-var nombreCanaux = 2;
-
-// Crée une mémoire tampon vide de 2 secondes
-// à la fréquence d'échantillonage du contexte AudioContext
-var nombreFrames = contexteAudio.sampleRate * 2.0;
-var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-
-bouton.onclick = function() {
-  // remplit la mémoire tampon avec du bruit blanc
-  // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
-    // génère le tableau contenant les données
-    var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
-      // Math.random() donne une valeur comprise entre [0; 1.0]
-      // l'audio doit être compris entre [-1.0; 1.0]
-      tampon[i] = Math.random() * 2 - 1;
-    }
-  }
-
-  // Récupère un AudioBufferSourceNode.
-  // C'est un AudioNode à utiliser quand on veut jouer AudioBuffer
-  var source = contexteAudio.createBufferSource();
-
-  // assigne le buffer au AudioBufferSourceNode
-  source.buffer = tableauDonnees;
-
-  // connecte le AudioBufferSourceNode avec
-  // la destination pour qu'on puisse entendre le son
-  source.connect(contexteAudio.destination);
-
-  // lance la lecture du so
-  source.start();
-
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioBuffer-section', 'AudioBuffer')}}{{Spec2('Web Audio API')}}Définition initiale
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffer/index.md b/files/fr/web/api/audiobuffer/index.md new file mode 100644 index 0000000000..faa4f0f309 --- /dev/null +++ b/files/fr/web/api/audiobuffer/index.md @@ -0,0 +1,114 @@ +--- +title: AudioBuffer +slug: Web/API/AudioBuffer +tags: + - API + - Experimental + - Reference + - Web Audio API +translation_of: Web/API/AudioBuffer +--- +

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

+ +

L'interface AudioBuffer représente une ressource audio stockée en mémoire, créée à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes avec {{ domxref("AudioContext.createBuffer()") }}. Une fois mises en mémoire dans un AudioBuffer, les données audio sont transférées dans un {{ domxref("AudioBufferSourceNode") }} afin d'être lues.
+
+ Ce type d'objet est conçu pour contenir de petit extraits audio, durant généralement moins de 45s. Pour les sons plus longs, les objets implémentant {{domxref ("MediaAudioElementSourceNode")}} sont plus adaptés. La mémoire tampon contient des données au format non entrelacé IEEE 32-bit PCM linéaire, avec une portée nominale comprise entre -1 et +1. S'il y a plusieurs canaux, ils sont stockés dans des mémoires-tampon distinctes.

+ +

Constructeur

+ +
+
{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}
+
Crée et retourne un nouvel objet AudioBuffer.
+
+ +

Propriétés

+ +
+
{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}
+
Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon.
+
{{domxref("AudioBuffer.length")}} {{readonlyInline}}
+
Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon.
+
{{domxref("AudioBuffer.duration")}} {{readonlyInline}}
+
Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon.
+
{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}
+
Retourne un nombre entier qui représente le nombre de canaux audio discrets décrits par les données PCM stockées dans la mémoire tampon.
+
+ +

Méthodes

+ +
+
{{domxref("AudioBuffer.getChannelData()")}}
+
Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal).
+
{{domxref("AudioBuffer.copyFromChannel()")}}
+
Copie les échantillons du canal associé à AudioBuffer dans un tableau de destination.
+
{{domxref("AudioBuffer.copyToChannel()")}}
+
Copie les échantillons dans le canal associé à AudioBuffer, depuis le tableau source.
+
+ +

Exemple

+ +

L'exemple suivant montre comment créer un  AudioBuffer et le remplir avec du bruit blanc. Le code source est disponible sur notre repo audio-buffer demo; une version live est également consultable.

+ +
// Stéréo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal < nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i < nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+
+  // Récupère un AudioBufferSourceNode.
+  // C'est un AudioNode à utiliser quand on veut jouer AudioBuffer
+  var source = contexteAudio.createBufferSource();
+
+  // assigne le buffer au AudioBufferSourceNode
+  source.buffer = tableauDonnees;
+
+  // connecte le AudioBufferSourceNode avec
+  // la destination pour qu'on puisse entendre le son
+  source.connect(contexteAudio.destination);
+
+  // lance la lecture du so
+  source.start();
+
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioBuffer-section', 'AudioBuffer')}}{{Spec2('Web Audio API')}}Définition initiale
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBuffer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffer/length/index.html b/files/fr/web/api/audiobuffer/length/index.html deleted file mode 100644 index f61ff06e0d..0000000000 --- a/files/fr/web/api/audiobuffer/length/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: AudioBuffer.length -slug: Web/API/AudioBuffer/length -translation_of: Web/API/AudioBuffer/length ---- -

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

- -
-

La propriété length de l'interface {{ domxref("AudioBuffer") }} renvoie un entier représentant la longueur, en trames d'échantillonage, des données PCM stockées dans la mémoire-tampon.

-
- -

Syntaxe

- -
var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-tableauMemoireTampon.length;
-
- -

Valeur

- -

Un nombre entier.

- -

Exemple

- -
// Stereo
-var nombreCanaux = 2;
-
-// Crée une mémoire tampon vide de 2 secondes
-// à la fréquence d'échantillonage du contexte AudioContext
-var nombreFrames = contexteAudio.sampleRate * 2.0;
-var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-
-
-bouton.onclick = function() {
-  // remplit la mémoire tampon avec du bruit blanc
-  // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
-    // génère le tableau contenant les données
-    var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
-      // Math.random() donne une valeur comprise entre [0; 1.0]
-      // l'audio doit être compris entre [-1.0; 1.0]
-      tampon[i] = Math.random() * 2 - 1;
-    }
-  }
-  console.log(tableauDonnees.length);
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer.length")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffer/length/index.md b/files/fr/web/api/audiobuffer/length/index.md new file mode 100644 index 0000000000..f61ff06e0d --- /dev/null +++ b/files/fr/web/api/audiobuffer/length/index.md @@ -0,0 +1,73 @@ +--- +title: AudioBuffer.length +slug: Web/API/AudioBuffer/length +translation_of: Web/API/AudioBuffer/length +--- +

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

+ +
+

La propriété length de l'interface {{ domxref("AudioBuffer") }} renvoie un entier représentant la longueur, en trames d'échantillonage, des données PCM stockées dans la mémoire-tampon.

+
+ +

Syntaxe

+ +
var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauMemoireTampon.length;
+
+ +

Valeur

+ +

Un nombre entier.

+ +

Exemple

+ +
// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal < nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i < nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.length);
+}
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBuffer.length")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.html b/files/fr/web/api/audiobuffer/numberofchannels/index.html deleted file mode 100644 index 470397e34d..0000000000 --- a/files/fr/web/api/audiobuffer/numberofchannels/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: AudioBuffer.numberOfChannels -slug: Web/API/AudioBuffer/numberOfChannels -translation_of: Web/API/AudioBuffer/numberOfChannels ---- -

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

- -
-

La propriété numberOfChannels de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre entier représentant le nombre de canaux audio diiscrets décrits par les données PCM stockées dans la mémoire-tampon.

-
- -

Syntaxe

- -
var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-tableauMemoireTampon.numberOfChannels;
-
- -

Valeur

- -

Un nombre entier.

- -

Exemple

- -
// Stereo
-var nombreCanaux = 2;
-
-// Crée une mémoire tampon vide de 2 secondes
-// à la fréquence d'échantillonage du contexte AudioContext
-var nombreFrames = contexteAudio.sampleRate * 2.0;
-var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-
-
-bouton.onclick = function() {
-  // remplit la mémoire tampon avec du bruit blanc
-  // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
-    // génère le tableau contenant les données
-    var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
-      // Math.random() donne une valeur comprise entre [0; 1.0]
-      // l'audio doit être compris entre [-1.0; 1.0]
-      tampon[i] = Math.random() * 2 - 1;
-    }
-  }
-  console.log(tableauDonnees.numberOfChannels);
-}
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer.numberOfChannels")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.md b/files/fr/web/api/audiobuffer/numberofchannels/index.md new file mode 100644 index 0000000000..470397e34d --- /dev/null +++ b/files/fr/web/api/audiobuffer/numberofchannels/index.md @@ -0,0 +1,74 @@ +--- +title: AudioBuffer.numberOfChannels +slug: Web/API/AudioBuffer/numberOfChannels +translation_of: Web/API/AudioBuffer/numberOfChannels +--- +

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

+ +
+

La propriété numberOfChannels de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre entier représentant le nombre de canaux audio diiscrets décrits par les données PCM stockées dans la mémoire-tampon.

+
+ +

Syntaxe

+ +
var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauMemoireTampon.numberOfChannels;
+
+ +

Valeur

+ +

Un nombre entier.

+ +

Exemple

+ +
// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal < nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i < nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.numberOfChannels);
+}
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBuffer.numberOfChannels")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffer/samplerate/index.html b/files/fr/web/api/audiobuffer/samplerate/index.html deleted file mode 100644 index 79e2abb6d2..0000000000 --- a/files/fr/web/api/audiobuffer/samplerate/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: AudioBuffer.sampleRate -slug: Web/API/AudioBuffer/sampleRate -translation_of: Web/API/AudioBuffer/sampleRate ---- -

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

- -
-

La propriété sampleRate de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante  représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon.

-
- -

Syntaxe

- -
var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-tableauMemoireTampon.sampleRate;
-
- -

Valeur

- -

Un nombre à virgule flottante indiquant le taux d'échantillonnage actuelle des données du tampon, en echantillonnage par seconde.

- -

Exemple

- -
// Stereo
-var nombreCanaux = 2;
-
-// Crée une mémoire tampon vide de 2 secondes
-// à la fréquence d'échantillonage du contexte AudioContext
-var nombreFrames = contexteAudio.sampleRate * 2.0;
-var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-
-
-bouton.onclick = function() {
-  // remplit la mémoire tampon avec du bruit blanc
-  // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
-    // génère le tableau contenant les données
-    var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
-      // Math.random() donne une valeur comprise entre [0; 1.0]
-      // l'audio doit être compris entre [-1.0; 1.0]
-      tampon[i] = Math.random() * 2 - 1;
-    }
-  }
-  console.log(tableauDonnees.sampleRate);
-}
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité des Navigateurs

- -

{{Compat("api.AudioBuffer.sampleRate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffer/samplerate/index.md b/files/fr/web/api/audiobuffer/samplerate/index.md new file mode 100644 index 0000000000..79e2abb6d2 --- /dev/null +++ b/files/fr/web/api/audiobuffer/samplerate/index.md @@ -0,0 +1,74 @@ +--- +title: AudioBuffer.sampleRate +slug: Web/API/AudioBuffer/sampleRate +translation_of: Web/API/AudioBuffer/sampleRate +--- +

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

+ +
+

La propriété sampleRate de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante  représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon.

+
+ +

Syntaxe

+ +
var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauMemoireTampon.sampleRate;
+
+ +

Valeur

+ +

Un nombre à virgule flottante indiquant le taux d'échantillonnage actuelle des données du tampon, en echantillonnage par seconde.

+ +

Exemple

+ +
// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal < nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i < nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.sampleRate);
+}
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité des Navigateurs

+ +

{{Compat("api.AudioBuffer.sampleRate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.html b/files/fr/web/api/audiobuffersourcenode/buffer/index.html deleted file mode 100644 index 377e917158..0000000000 --- a/files/fr/web/api/audiobuffersourcenode/buffer/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: AudioBufferSourceNode.buffer -slug: Web/API/AudioBufferSourceNode/buffer -translation_of: Web/API/AudioBufferSourceNode/buffer ---- -

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

- -

La propriété buffer de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio.

- -

Si la propriété buffer a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0).

- -

Syntaxe

- -
AudioBufferSourceNode.buffer = soundBuffer;
-
- -

Valeur

- -

Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire.

- -

Exemple

- -
-

Note : Pour un exemple complet, voir le code interprété, ou le code source.

-
- -
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
-
-button.onclick = function() {
-  // Remplit le buffer avec du bruit blanc;
-  // valeurs aléatoires entre -1.0 et 1.0
-  for (var channel = 0; channel < channels; channel++) {
-   // Crée le ArrayBuffer qui contient effectivement les données
-   var nowBuffering = myArrayBuffer.getChannelData(channel);
-   for (var i = 0; i < frameCount; i++) {
-     // Math.random() is in [0; 1.0]
-     // audio doit être compris entre [-1.0; 1.0]
-     nowBuffering[i] = Math.random() * 2 - 1;
-   }
-  }
-
-  // Crée un AudioBufferSourceNode.
-  // C'est le AudioNode à utiliser pour jouer un AudioBuffer
-  var source = audioCtx.createBufferSource();
-  // Définit le buffer dans l'AudioBufferSourceNode
-  source.buffer = myArrayBuffer;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}}{{Spec2("Web Audio API")}}Définition initiale
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBufferSourceNode.buffer")}}

- -

Voir aussi

- -

{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}}

diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.md b/files/fr/web/api/audiobuffersourcenode/buffer/index.md new file mode 100644 index 0000000000..377e917158 --- /dev/null +++ b/files/fr/web/api/audiobuffersourcenode/buffer/index.md @@ -0,0 +1,73 @@ +--- +title: AudioBufferSourceNode.buffer +slug: Web/API/AudioBufferSourceNode/buffer +translation_of: Web/API/AudioBufferSourceNode/buffer +--- +

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

+ +

La propriété buffer de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio.

+ +

Si la propriété buffer a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0).

+ +

Syntaxe

+ +
AudioBufferSourceNode.buffer = soundBuffer;
+
+ +

Valeur

+ +

Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire.

+ +

Exemple

+ +
+

Note : Pour un exemple complet, voir le code interprété, ou le code source.

+
+ +
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Remplit le buffer avec du bruit blanc;
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var channel = 0; channel < channels; channel++) {
+   // Crée le ArrayBuffer qui contient effectivement les données
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i < frameCount; i++) {
+     // Math.random() is in [0; 1.0]
+     // audio doit être compris entre [-1.0; 1.0]
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // Crée un AudioBufferSourceNode.
+  // C'est le AudioNode à utiliser pour jouer un AudioBuffer
+  var source = audioCtx.createBufferSource();
+  // Définit le buffer dans l'AudioBufferSourceNode
+  source.buffer = myArrayBuffer;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}}{{Spec2("Web Audio API")}}Définition initiale
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBufferSourceNode.buffer")}}

+ +

Voir aussi

+ +

{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}}

diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.html b/files/fr/web/api/audiobuffersourcenode/detune/index.html deleted file mode 100644 index bb352ab774..0000000000 --- a/files/fr/web/api/audiobuffersourcenode/detune/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: AudioBufferSourceNode.detune -slug: Web/API/AudioBufferSourceNode/detune -tags: - - API - - Propriété - - Reference - - Web Audio API -translation_of: Web/API/AudioBufferSourceNode/detune ---- -

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

- -

La  propriété detune de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type k-rate représentant le désaccord des oscillations en cents.

- -

Ses valeur sont comprises entre -1200 et 1200.

- -

Syntaxe

- -
var source = contexteAudio.createBufferSource();
-source.detune.value = 100; // valeur en cents
- -
-

Note: bien que l'AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.

-
- -

Valeur

- -

Un {{domxref("AudioParam")}} de type k-rate.

- -

Exemple

- -
var audioCtx = new AudioContext();
-
-var nbChan = 2;
-var nbFrames = audioCtx.sampleRate * 2.0;
-
-var audioBuffer = audioCtx.createBuffer(nbChan, nbFrames, audioCtx.sampleRate);
-
-for (var chan = 0; chan < nbChan; chan++) {
-  var chanData = audioBuffer.getChannelData(chan);
-  for (var i = 0; i < nbFrames; i++) {
-    chanData[i] = Math.random() * 2 - 1;
-  }
-}
-
-var source = audioCtx.createBufferSource();
-source.buffer = audioBuffer;
-source.connect(audioCtx.destination);
-source.detune.value = 100; // valeur en cents
-source.start();
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- - - -

{{Compat("api.AudioBufferSourceNode.detune")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.md b/files/fr/web/api/audiobuffersourcenode/detune/index.md new file mode 100644 index 0000000000..bb352ab774 --- /dev/null +++ b/files/fr/web/api/audiobuffersourcenode/detune/index.md @@ -0,0 +1,80 @@ +--- +title: AudioBufferSourceNode.detune +slug: Web/API/AudioBufferSourceNode/detune +tags: + - API + - Propriété + - Reference + - Web Audio API +translation_of: Web/API/AudioBufferSourceNode/detune +--- +

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

+ +

La  propriété detune de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type k-rate représentant le désaccord des oscillations en cents.

+ +

Ses valeur sont comprises entre -1200 et 1200.

+ +

Syntaxe

+ +
var source = contexteAudio.createBufferSource();
+source.detune.value = 100; // valeur en cents
+ +
+

Note: bien que l'AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.

+
+ +

Valeur

+ +

Un {{domxref("AudioParam")}} de type k-rate.

+ +

Exemple

+ +
var audioCtx = new AudioContext();
+
+var nbChan = 2;
+var nbFrames = audioCtx.sampleRate * 2.0;
+
+var audioBuffer = audioCtx.createBuffer(nbChan, nbFrames, audioCtx.sampleRate);
+
+for (var chan = 0; chan < nbChan; chan++) {
+  var chanData = audioBuffer.getChannelData(chan);
+  for (var i = 0; i < nbFrames; i++) {
+    chanData[i] = Math.random() * 2 - 1;
+  }
+}
+
+var source = audioCtx.createBufferSource();
+source.buffer = audioBuffer;
+source.connect(audioCtx.destination);
+source.detune.value = 100; // valeur en cents
+source.start();
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ + + +

{{Compat("api.AudioBufferSourceNode.detune")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffersourcenode/index.html b/files/fr/web/api/audiobuffersourcenode/index.html deleted file mode 100644 index ce90a90902..0000000000 --- a/files/fr/web/api/audiobuffersourcenode/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: AudioBufferSourceNode -slug: Web/API/AudioBufferSourceNode -tags: - - API - - Buffer - - Experimental - - Reference - - Web Audio API -translation_of: Web/API/AudioBufferSourceNode ---- -

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

- -

L'interface AudioBufferSourceNode est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}.

- -

{{InheritanceDiagram}}

- -

Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété {{domxref("AudioBufferSourceNode.buffer", "buffer")}}. Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0).

- -


- Un {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction AudioBufferSourceNode.start() est autorisé. Pour rejouer le son, il faut créer un nouvel AudioBufferSourceNode. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables AudioBuffers peuvent être réutilisés. On dit que les AudioBufferSourceNodes doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée.

- -

Plusieurs appels à la fonction AudioBufferSourceNode.stop() sont autorisés. Le dernier appel remplace le précédent, à condition que le AudioBufferSourceNode n'ait pas déjà atteint la fin du buffer.

- -

L'objet AudioBufferSourceNode prend le contenu d'un AudioBuffer et le convertit en audio

- - - - - - - - - - - - - - - - -
Nombre d'entrées0
Nombre de sorties1
Nombre de canauxdéfini par l'objet {{domxref("AudioBuffer")}} associé
- -

Constructeur

- -
-
{{domxref("AudioBufferSourceNode.AudioBufferSourceNode", "AudioBufferSourceNode()")}}
-
Crée et retourne un nouvel objet AudioBufferSourceNode. Un {{domxref("AudioBufferSourceNode")}} peut être instancié à l'aide la méthode {{domxref("AudioContext.createBufferSource()")}}.
-
- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

- -
-
{{domxref("AudioBufferSourceNode.buffer")}}
-
{{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0).
-
{{domxref("AudioBufferSourceNode.detune")}}
-
{{domxref("AudioParam")}} de type k-rate représentant le désaccordage de la fréquence exprimé en cents. Cette valeur est composée à partir du playbackRate pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est 0 (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞.
-
{{domxref("AudioBufferSourceNode.loop")}}
-
Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est false.
-
{{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}}
-
Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la lecture doit reprendre. Sa valeur par défaut est 0.
-
{{domxref("AudioBufferSourceNode.loopEnd")}} {{optional_inline}}
-
Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la relecture doit s'arrêter (et éventuellement boucler à nouveau). Sa valeur par défaut est 0.
-
{{domxref("AudioBufferSourceNode.playbackRate")}}
-
{{domxref ("AudioParam")}} de type a-rate qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon.
-
- -

Gestionnaires d'évènement

- -

Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}.

- -

Méthodes

- -

Hérite des méthodes de son parent, {{domxref("AudioNode")}}.

- -

Exemple

- -

Cet exemple crée un tampon de deux secondes, le remplit avec du bruit blanc et le joue par l'intermédiaire d'un AudioBufferSourceNode.

- -
-

Note : Vous pouvez aussi exécuter the code, ou regarder le code source.

-
- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var bouton = document.querySelector('button');
-var pre = document.querySelector('pre');
-var monScript = document.querySelector('script');
-
-pre.innerHTML = monScript.innerHTML;
-
-// Stéréo
-var canaux = 2;
-
-// Crée un tampon vide de deux secondes
-// au taux d'échantillonnage du AudioContext
-var compteurTrames = contexteAudio.sampleRate * 2.0;
-
-var myArrayBuffer = contexteAudio.createBuffer(2, compteurTrames, contexteAudio.sampleRate);
-
-bouton.onclick = function() {
-  // remplit le tampon avec du bruit blanc;
-  // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < canaux; canal++) {
-   // crée le ArrayBuffer qui contient les données
-   var nowBuffering = myArrayBuffer.getChannelData(canal);
-   for (var i = 0; i < compteurTrames; i++) {
-     // Math.random() est compris entre [0; 1.0]
-     // audio doit être compris entre [-1.0; 1.0]
-     nowBuffering[i] = Math.random() * 2 - 1;
-   }
-  }
-
-  // crée AudioBufferSourceNode.
-  // c'est AudioNode utilisé pour lire un AudioBuffer
-  var source = contexteAudio.createBufferSource();
-  // initialise le tampon du AudioBufferSourceNode
-  source.buffer = myArrayBuffer;
-  // connecte l'AudioBufferSourceNode avec la destination
-  // de façon à ce qu'on puisse entendre le son
-  source.connect(contexteAudio.destination);
-  // lance la lecture de la source
-  source.start();
-}
- -
-

Note : Pour un exemple de decodeAudioData(), voir la page {{domxref("AudioContext.decodeAudioData")}}.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioBufferSourceNode-section', 'AudioBufferSourceNode')}}{{Spec2('Web Audio API')}}
- -

Compatibilité navigateurs

- -
{{Compat("api.AudioBufferSourceNode")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffersourcenode/index.md b/files/fr/web/api/audiobuffersourcenode/index.md new file mode 100644 index 0000000000..ce90a90902 --- /dev/null +++ b/files/fr/web/api/audiobuffersourcenode/index.md @@ -0,0 +1,156 @@ +--- +title: AudioBufferSourceNode +slug: Web/API/AudioBufferSourceNode +tags: + - API + - Buffer + - Experimental + - Reference + - Web Audio API +translation_of: Web/API/AudioBufferSourceNode +--- +

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

+ +

L'interface AudioBufferSourceNode est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}.

+ +

{{InheritanceDiagram}}

+ +

Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété {{domxref("AudioBufferSourceNode.buffer", "buffer")}}. Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0).

+ +


+ Un {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction AudioBufferSourceNode.start() est autorisé. Pour rejouer le son, il faut créer un nouvel AudioBufferSourceNode. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables AudioBuffers peuvent être réutilisés. On dit que les AudioBufferSourceNodes doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée.

+ +

Plusieurs appels à la fonction AudioBufferSourceNode.stop() sont autorisés. Le dernier appel remplace le précédent, à condition que le AudioBufferSourceNode n'ait pas déjà atteint la fin du buffer.

+ +

L'objet AudioBufferSourceNode prend le contenu d'un AudioBuffer et le convertit en audio

+ + + + + + + + + + + + + + + + +
Nombre d'entrées0
Nombre de sorties1
Nombre de canauxdéfini par l'objet {{domxref("AudioBuffer")}} associé
+ +

Constructeur

+ +
+
{{domxref("AudioBufferSourceNode.AudioBufferSourceNode", "AudioBufferSourceNode()")}}
+
Crée et retourne un nouvel objet AudioBufferSourceNode. Un {{domxref("AudioBufferSourceNode")}} peut être instancié à l'aide la méthode {{domxref("AudioContext.createBufferSource()")}}.
+
+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("AudioBufferSourceNode.buffer")}}
+
{{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0).
+
{{domxref("AudioBufferSourceNode.detune")}}
+
{{domxref("AudioParam")}} de type k-rate représentant le désaccordage de la fréquence exprimé en cents. Cette valeur est composée à partir du playbackRate pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est 0 (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞.
+
{{domxref("AudioBufferSourceNode.loop")}}
+
Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est false.
+
{{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}}
+
Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la lecture doit reprendre. Sa valeur par défaut est 0.
+
{{domxref("AudioBufferSourceNode.loopEnd")}} {{optional_inline}}
+
Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la relecture doit s'arrêter (et éventuellement boucler à nouveau). Sa valeur par défaut est 0.
+
{{domxref("AudioBufferSourceNode.playbackRate")}}
+
{{domxref ("AudioParam")}} de type a-rate qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon.
+
+ +

Gestionnaires d'évènement

+ +

Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}.

+ +

Méthodes

+ +

Hérite des méthodes de son parent, {{domxref("AudioNode")}}.

+ +

Exemple

+ +

Cet exemple crée un tampon de deux secondes, le remplit avec du bruit blanc et le joue par l'intermédiaire d'un AudioBufferSourceNode.

+ +
+

Note : Vous pouvez aussi exécuter the code, ou regarder le code source.

+
+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var bouton = document.querySelector('button');
+var pre = document.querySelector('pre');
+var monScript = document.querySelector('script');
+
+pre.innerHTML = monScript.innerHTML;
+
+// Stéréo
+var canaux = 2;
+
+// Crée un tampon vide de deux secondes
+// au taux d'échantillonnage du AudioContext
+var compteurTrames = contexteAudio.sampleRate * 2.0;
+
+var myArrayBuffer = contexteAudio.createBuffer(2, compteurTrames, contexteAudio.sampleRate);
+
+bouton.onclick = function() {
+  // remplit le tampon avec du bruit blanc;
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal < canaux; canal++) {
+   // crée le ArrayBuffer qui contient les données
+   var nowBuffering = myArrayBuffer.getChannelData(canal);
+   for (var i = 0; i < compteurTrames; i++) {
+     // Math.random() est compris entre [0; 1.0]
+     // audio doit être compris entre [-1.0; 1.0]
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // crée AudioBufferSourceNode.
+  // c'est AudioNode utilisé pour lire un AudioBuffer
+  var source = contexteAudio.createBufferSource();
+  // initialise le tampon du AudioBufferSourceNode
+  source.buffer = myArrayBuffer;
+  // connecte l'AudioBufferSourceNode avec la destination
+  // de façon à ce qu'on puisse entendre le son
+  source.connect(contexteAudio.destination);
+  // lance la lecture de la source
+  source.start();
+}
+ +
+

Note : Pour un exemple de decodeAudioData(), voir la page {{domxref("AudioContext.decodeAudioData")}}.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioBufferSourceNode-section', 'AudioBufferSourceNode')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité navigateurs

+ +
{{Compat("api.AudioBufferSourceNode")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.html b/files/fr/web/api/audiobuffersourcenode/loop/index.html deleted file mode 100644 index 739e46de9c..0000000000 --- a/files/fr/web/api/audiobuffersourcenode/loop/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: AudioBufferSourceNode.loop -slug: Web/API/AudioBufferSourceNode/loop -tags: - - API - - AudioBufferSourceNode - - Loop - - Reference - - Web Audio API -translation_of: Web/API/AudioBufferSourceNode/loop ---- -

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

- -
-

La propriété loop de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}.

-
- -

La valeur par défaut de la propriété loop est false.

- -

Syntaxe

- -
var source = audioCtx.createBufferSource();
-source.loop = true;
-
- -

Value

- -

Un booléen.

- -

Lorsque la lecture en boucle est activée, le son commence à jouer au point spécifié lorsque {{domxref("AudioBufferSourceNode.start", "start()")}} est appelée. Quand il atteint le point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}, il recommence au point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}

- -

Exemple

- -

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de playbackRate en temps réel. Quand la lecture est terminée, elle boucle.

- -
-

Note : Vous pouvez essayer un exemple live (or voir la source.)

-
- -
function getData() {
-  source = audioCtx.createBufferSource();
-  request = new XMLHttpRequest();
-
-  request.open('GET', 'viper.ogg', true);
-
-  request.responseType = 'arraybuffer';
-
-  request.onload = function() {
-    var audioData = request.response;
-
-    audioCtx.decodeAudioData(audioData, function(buffer) {
-        myBuffer = buffer;
-        source.buffer = myBuffer;
-        source.playbackRate.value = playbackControl.value;
-        source.connect(audioCtx.destination);
-        source.loop = true;
-      },
-
-      function(e){"Error with decoding audio data" + e.err});
-
-  }
-
-  request.send();
-}
-
-// lie les boutons pour lire et arrêter l'audio, et le slider
-
-play.onclick = function() {
-  getData();
-  source.start(0);
-  play.setAttribute('disabled', 'disabled');
-  playbackControl.removeAttribute('disabled');
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBufferSourceNode.loop")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.md b/files/fr/web/api/audiobuffersourcenode/loop/index.md new file mode 100644 index 0000000000..739e46de9c --- /dev/null +++ b/files/fr/web/api/audiobuffersourcenode/loop/index.md @@ -0,0 +1,100 @@ +--- +title: AudioBufferSourceNode.loop +slug: Web/API/AudioBufferSourceNode/loop +tags: + - API + - AudioBufferSourceNode + - Loop + - Reference + - Web Audio API +translation_of: Web/API/AudioBufferSourceNode/loop +--- +

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

+ +
+

La propriété loop de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}.

+
+ +

La valeur par défaut de la propriété loop est false.

+ +

Syntaxe

+ +
var source = audioCtx.createBufferSource();
+source.loop = true;
+
+ +

Value

+ +

Un booléen.

+ +

Lorsque la lecture en boucle est activée, le son commence à jouer au point spécifié lorsque {{domxref("AudioBufferSourceNode.start", "start()")}} est appelée. Quand il atteint le point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}, il recommence au point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}

+ +

Exemple

+ +

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de playbackRate en temps réel. Quand la lecture est terminée, elle boucle.

+ +
+

Note : Vous pouvez essayer un exemple live (or voir la source.)

+
+ +
function getData() {
+  source = audioCtx.createBufferSource();
+  request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        myBuffer = buffer;
+        source.buffer = myBuffer;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+
+// lie les boutons pour lire et arrêter l'audio, et le slider
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+  playbackControl.removeAttribute('disabled');
+}
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBufferSourceNode.loop")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.html b/files/fr/web/api/audiobuffersourcenode/loopend/index.html deleted file mode 100644 index c580e48ecb..0000000000 --- a/files/fr/web/api/audiobuffersourcenode/loopend/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: AudioBufferSourceNode.loopEnd -slug: Web/API/AudioBufferSourceNode/loopEnd -tags: - - API - - Audio - - AudioBufferSourceNode - - Propriété - - Reference - - Web Audio API -translation_of: Web/API/AudioBufferSourceNode/loopEnd ---- -

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

- -

La propriété loopEnd de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la relecture doit s'arrêter, et éventuellement boucler de nouveau en reprenant à la position indiquée par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}. Elle n'est prise en compte que si la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} vaut true.

- -

Syntaxe

- -
var source = contexteAudio.createBufferSource();
-source.loopEnd = 3;
-
- -

Valeur

- -

Un nombre flottant à double précision. La valeur par défaut est 0.

- -

Exemples

- -

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés playbackRate, loopStart et loopEnd à la volée.

- -

Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant loopStart et loopEnd. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.

- -
-

Note : Voir l'exemple complet et son code source.

-
- -
function getData() {
-  source = contexteAudio.createBufferSource();
-  requete = new XMLHttpRequest();
-
-  requete.open('GET', 'viper.ogg', true);
-
-  requete.responseType = 'arraybuffer';
-
-
-  requete.onload = function() {
-    var donneesAudio = requete.response;
-
-    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
-        maMemoireTampon = buffer;
-        dureeMorceau = buffer.duration;
-        source.buffer = maMemoireTampon;
-        source.playbackRate.value = playbackControl.value;
-        source.connect(contexteAudio.destination);
-        source.loop = true;
-
-        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
-        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
-      },
-
-      function(e){"Erreur lors du décodage des données audio " + e.err});
-
-  }
-
-  requete.send();
-}
-
-  ...
-
-loopstartControl.oninput = function() {
-  source.loopStart = loopstartControl.value;
-  loopstartValue.innerHTML = loopstartControl.value;
-}
-
-loopendControl.oninput = function() {
-  source.loopEnd = loopendControl.value;
-  loopendValue.innerHTML = loopendControl.value;
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.AudioBufferSourceNode.loopEnd")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.md b/files/fr/web/api/audiobuffersourcenode/loopend/index.md new file mode 100644 index 0000000000..c580e48ecb --- /dev/null +++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.md @@ -0,0 +1,105 @@ +--- +title: AudioBufferSourceNode.loopEnd +slug: Web/API/AudioBufferSourceNode/loopEnd +tags: + - API + - Audio + - AudioBufferSourceNode + - Propriété + - Reference + - Web Audio API +translation_of: Web/API/AudioBufferSourceNode/loopEnd +--- +

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

+ +

La propriété loopEnd de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la relecture doit s'arrêter, et éventuellement boucler de nouveau en reprenant à la position indiquée par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}. Elle n'est prise en compte que si la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} vaut true.

+ +

Syntaxe

+ +
var source = contexteAudio.createBufferSource();
+source.loopEnd = 3;
+
+ +

Valeur

+ +

Un nombre flottant à double précision. La valeur par défaut est 0.

+ +

Exemples

+ +

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés playbackRate, loopStart et loopEnd à la volée.

+ +

Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant loopStart et loopEnd. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.

+ +
+

Note : Voir l'exemple complet et son code source.

+
+ +
function getData() {
+  source = contexteAudio.createBufferSource();
+  requete = new XMLHttpRequest();
+
+  requete.open('GET', 'viper.ogg', true);
+
+  requete.responseType = 'arraybuffer';
+
+
+  requete.onload = function() {
+    var donneesAudio = requete.response;
+
+    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
+        maMemoireTampon = buffer;
+        dureeMorceau = buffer.duration;
+        source.buffer = maMemoireTampon;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(contexteAudio.destination);
+        source.loop = true;
+
+        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
+        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
+      },
+
+      function(e){"Erreur lors du décodage des données audio " + e.err});
+
+  }
+
+  requete.send();
+}
+
+  ...
+
+loopstartControl.oninput = function() {
+  source.loopStart = loopstartControl.value;
+  loopstartValue.innerHTML = loopstartControl.value;
+}
+
+loopendControl.oninput = function() {
+  source.loopEnd = loopendControl.value;
+  loopendValue.innerHTML = loopendControl.value;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AudioBufferSourceNode.loopEnd")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.html b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html deleted file mode 100644 index 11a5b2165e..0000000000 --- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: AudioBufferSourceNode.loopStart -slug: Web/API/AudioBufferSourceNode/loopStart -translation_of: Web/API/AudioBufferSourceNode/loopStart ---- -

{{ APIRef("Web Audio API") }}
- La propriété loopStart de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la lecture doit reprendre lors d'une boucle. Elle n'est prise en compte que lorque la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} est true.

- -

Syntaxe

- -
var source = contexteAudio.createBufferSource();
-source.loopStart = 3;
-
- -

Valeur

- -

Un nombre flottant à double précision. La valeur par défaut est 0.

- -

Exemple

- -

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés playbackRate, loopStart et loopEnd à la volée.

- -

Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant loopStart et loopEnd. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.

- -
-

Note : Voir  l'exemple complet et son code source.

-
- -
function getData() {
-  source = contexteAudio.createBufferSource();
-  requete = new XMLHttpRequest();
-
-  requete.open('GET', 'viper.ogg', true);
-
-  requete.responseType = 'arraybuffer';
-
-
-  requete.onload = function() {
-    var donneesAudio = requete.response;
-
-    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
-        maMemoireTampon = buffer;
-        dureeMorceau = buffer.duration;
-        source.buffer = maMemoireTampon;
-        source.playbackRate.value = playbackControl.value;
-        source.connect(contexteAudio.destination);
-        source.loop = true;
-
-        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
-        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
-      },
-
-      function(e){"Erreur lors du décodage des données audio " + e.err});
-
-  }
-
-  requete.send();
-}
-
-  ...
-
-loopstartControl.oninput = function() {
-  source.loopStart = loopstartControl.value;
-  loopstartValue.innerHTML = loopstartControl.value;
-}
-
-loopendControl.oninput = function() {
-  source.loopEnd = loopendControl.value;
-  loopendValue.innerHTML = loopendControl.value;
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBufferSourceNode.loopStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md new file mode 100644 index 0000000000..11a5b2165e --- /dev/null +++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md @@ -0,0 +1,97 @@ +--- +title: AudioBufferSourceNode.loopStart +slug: Web/API/AudioBufferSourceNode/loopStart +translation_of: Web/API/AudioBufferSourceNode/loopStart +--- +

{{ APIRef("Web Audio API") }}
+ La propriété loopStart de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la lecture doit reprendre lors d'une boucle. Elle n'est prise en compte que lorque la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} est true.

+ +

Syntaxe

+ +
var source = contexteAudio.createBufferSource();
+source.loopStart = 3;
+
+ +

Valeur

+ +

Un nombre flottant à double précision. La valeur par défaut est 0.

+ +

Exemple

+ +

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés playbackRate, loopStart et loopEnd à la volée.

+ +

Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant loopStart et loopEnd. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.

+ +
+

Note : Voir  l'exemple complet et son code source.

+
+ +
function getData() {
+  source = contexteAudio.createBufferSource();
+  requete = new XMLHttpRequest();
+
+  requete.open('GET', 'viper.ogg', true);
+
+  requete.responseType = 'arraybuffer';
+
+
+  requete.onload = function() {
+    var donneesAudio = requete.response;
+
+    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
+        maMemoireTampon = buffer;
+        dureeMorceau = buffer.duration;
+        source.buffer = maMemoireTampon;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(contexteAudio.destination);
+        source.loop = true;
+
+        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
+        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
+      },
+
+      function(e){"Erreur lors du décodage des données audio " + e.err});
+
+  }
+
+  requete.send();
+}
+
+  ...
+
+loopstartControl.oninput = function() {
+  source.loopStart = loopstartControl.value;
+  loopstartValue.innerHTML = loopstartControl.value;
+}
+
+loopendControl.oninput = function() {
+  source.loopEnd = loopendControl.value;
+  loopendValue.innerHTML = loopendControl.value;
+}
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBufferSourceNode.loopStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html deleted file mode 100644 index 5f13016165..0000000000 --- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: AudioBufferSourceNode.playbackRate -slug: Web/API/AudioBufferSourceNode/playbackRate -translation_of: Web/API/AudioBufferSourceNode/playbackRate ---- -

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

- -
-

La propriété playbackRate de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type k-rate qui définit la vitesse à laquelle le contenu audio sera lu.

-
- -

Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est 1.0. Pour toute autre valeur l'AudioBufferSourceNode rééchantillone le son avant de l'envoyer vers la sortie.

- -

Syntaxe

- -
var source = contexteAudio.createBufferSource();
-source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse normale
-
- -
-

Note : Bien que le AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.

-
- -

Valeur

- -

Un {{domxref("AudioParam")}} dont la {{domxref("AudioParam.value", "value")}} est un nombre flottant à double précision, qui représente la vitesse de lecture d'un son en proportion décimale du taux d'échantillonnage original.

- -

Considérons un buffer audio échantillonné à 44.1 kHz (44,100 échantillons par seconde). Observons l'effet de quelques valeurs de la propriété playbackRate :

- - - -

Exemple

- -

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés playbackRate, loopStart et loopEnd à la volée.

- -
-

Note : Voir  l'exemple complet et son code source.

-
- -
<input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1">
-<span class="playback-rate-value">1.0</span>
-
- -
function getData() {
-  source = contexteAudio.createBufferSource();
-  requete = new XMLHttpRequest();
-
-  requete.open('GET', 'viper.ogg', true);
-
-  requete.responseType = 'arraybuffer';
-
-
-  requete.onload = function() {
-    var donneesAudio = requete.response;
-
-    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
-        maMemoireTampon = buffer;
-        dureeMorceau = buffer.duration;
-        source.buffer = maMemoireTampon;
-        source.playbackRate.value = playbackControl.value;
-        source.connect(contexteAudio.destination);
-        source.loop = true;
-
-        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
-        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
-      },
-
-      function(e){"Erreur lors du décodage des données audio " + e.err});
-
-  }
-
-  requete.send();
-}
-
-// connecte les boutons pour lancer et arrêter la lecture, et modifier la vitesse de lecture
-
-play.onclick = function() {
-  getData();
-  source.start(0);
-  play.setAttribute('disabled', 'disabled');
-  playbackControl.removeAttribute('disabled');
-}
-
-stop.onclick = function() {
-  source.stop(0);
-  play.removeAttribute('disabled');
-  playbackControl.setAttribute('disabled', 'disabled');
-}
-
-playbackControl.oninput = function() {
-  source.playbackRate.value = playbackControl.value;
-  playbackValue.innerHTML = playbackControl.value;
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBufferSourceNode.playbackRate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md new file mode 100644 index 0000000000..5f13016165 --- /dev/null +++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md @@ -0,0 +1,124 @@ +--- +title: AudioBufferSourceNode.playbackRate +slug: Web/API/AudioBufferSourceNode/playbackRate +translation_of: Web/API/AudioBufferSourceNode/playbackRate +--- +

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

+ +
+

La propriété playbackRate de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type k-rate qui définit la vitesse à laquelle le contenu audio sera lu.

+
+ +

Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est 1.0. Pour toute autre valeur l'AudioBufferSourceNode rééchantillone le son avant de l'envoyer vers la sortie.

+ +

Syntaxe

+ +
var source = contexteAudio.createBufferSource();
+source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse normale
+
+ +
+

Note : Bien que le AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.

+
+ +

Valeur

+ +

Un {{domxref("AudioParam")}} dont la {{domxref("AudioParam.value", "value")}} est un nombre flottant à double précision, qui représente la vitesse de lecture d'un son en proportion décimale du taux d'échantillonnage original.

+ +

Considérons un buffer audio échantillonné à 44.1 kHz (44,100 échantillons par seconde). Observons l'effet de quelques valeurs de la propriété playbackRate :

+ + + +

Exemple

+ +

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés playbackRate, loopStart et loopEnd à la volée.

+ +
+

Note : Voir  l'exemple complet et son code source.

+
+ +
<input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1">
+<span class="playback-rate-value">1.0</span>
+
+ +
function getData() {
+  source = contexteAudio.createBufferSource();
+  requete = new XMLHttpRequest();
+
+  requete.open('GET', 'viper.ogg', true);
+
+  requete.responseType = 'arraybuffer';
+
+
+  requete.onload = function() {
+    var donneesAudio = requete.response;
+
+    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
+        maMemoireTampon = buffer;
+        dureeMorceau = buffer.duration;
+        source.buffer = maMemoireTampon;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(contexteAudio.destination);
+        source.loop = true;
+
+        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
+        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
+      },
+
+      function(e){"Erreur lors du décodage des données audio " + e.err});
+
+  }
+
+  requete.send();
+}
+
+// connecte les boutons pour lancer et arrêter la lecture, et modifier la vitesse de lecture
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+  playbackControl.removeAttribute('disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+  playbackControl.setAttribute('disabled', 'disabled');
+}
+
+playbackControl.oninput = function() {
+  source.playbackRate.value = playbackControl.value;
+  playbackValue.innerHTML = playbackControl.value;
+}
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBufferSourceNode.playbackRate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.html b/files/fr/web/api/audiobuffersourcenode/start/index.html deleted file mode 100644 index b07993659d..0000000000 --- a/files/fr/web/api/audiobuffersourcenode/start/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: AudioBufferSourceNode.start() -slug: Web/API/AudioBufferSourceNode/start -translation_of: Web/API/AudioBufferSourceNode/start ---- -

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

- -
-

La méthode start() de l'interface {{ domxref("AudioBufferSourceNode") }} permet de planifier la lecture du buffer audio.

-
- -

Syntaxe

- -
AudioBufferSourceNode.start([when][, offset][, duration]);
-
- -

Paramètres

- -
-
when {{optional_inline}}
-
Le paramètre when indique à quel moment la lecture doit commencer. Si when représente une date passée, la lecture commence immédiatement. Si la méthode est invoquée plus d'une fois, ou après un appel à AudioBufferSourceNode.stop(), une exception est levée.
- Le temps, en secondes, auquel la lecture doit commencer, spécifié dans le même systèmes de coordonnées temporalles utilisé par {{domxref("AudioContext")}}. Si when est inférieur à ({{domxref("AudioContext.currentTime")}}, ou égal à 0, la lecture commence immédiatement. La valeur par défaut est 0.
-
offset {{optional_inline}}
-
Décalage, en secondes, indiquant où la lecture doit commencer. Par example, pour lancer la lecture au milieu d'un son durant 10 secondes, l'offset doit être 5. La valeur par défaut, 0, démarre la lecture au début du buffer. Les valeurs supérieures à la fin du son sont silencieusement ajustées à la valeur maximum possible (basée sur les propriétés {{domxref("AudioBuffer.duration", "duration")}} et/ou {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}). Le calcul du décalage se fait en utilisant le taux d'échantillonnage original, donc même lorsqu'un son est lu au double de sa vitesse, le milieu d'un buffer de 10 secondes est toujours 5.
-
duration {{optional_inline}}
-
Le paramètre duration, dont la valeur par défaut est la longueur du contenu moins le décalage (offset) du début de lecture, indique la longueur du contenu audio qui doit être lue.
- Durée du son qui doit être lue, en secondes. Si ce paramètre n'est pas spécifié ou a pour valeur 0 (valeur par défaut), le son est lu jusqu'à la fin, s'il n'est pas arrêté par la méthode {{domxref("AudioScheduledSourceNode.stop", "stop()")}}. L'utilisation de ce paramètre est fonctionellement équivalente à l'appel de la méthode start(when, offset) suivi de la méthode stop(when+duration).
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Exceptions

- -
-
TypeError
-
Une valeur négative a été spécifiée pour au moins l'un des trois paramètres de temps. N'essayez pas de trafiquer les lois de la physique.
-
InvalidStateError
-
start() a déjà été appelé. Cette fonction ne peut être appelée qu'une seule fois pour chaque AudioBufferSourceNode.
-
- -

Exemples

- -

L'exemple le plus simple lance la lecture du buffer audio depuis le début - inutile de spécifier des paramètres dans ce cas:

- -
source.start();
- -

L'exemple suivant, plus complexe, jouera, après une seconde de pause, un tronçon d'une durée de 10 secondes à partir de la 3ème seconde des données en mémoire.

- -
source.start(contexteAudio.currentTime + 1,3,10);
- -
-

Note : Pour un exemple plus complexe montrant la méthode start() en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi  l'exemple complet et son code source.

-
- -
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBufferSourceNode.start")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.md b/files/fr/web/api/audiobuffersourcenode/start/index.md new file mode 100644 index 0000000000..b07993659d --- /dev/null +++ b/files/fr/web/api/audiobuffersourcenode/start/index.md @@ -0,0 +1,85 @@ +--- +title: AudioBufferSourceNode.start() +slug: Web/API/AudioBufferSourceNode/start +translation_of: Web/API/AudioBufferSourceNode/start +--- +

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

+ +
+

La méthode start() de l'interface {{ domxref("AudioBufferSourceNode") }} permet de planifier la lecture du buffer audio.

+
+ +

Syntaxe

+ +
AudioBufferSourceNode.start([when][, offset][, duration]);
+
+ +

Paramètres

+ +
+
when {{optional_inline}}
+
Le paramètre when indique à quel moment la lecture doit commencer. Si when représente une date passée, la lecture commence immédiatement. Si la méthode est invoquée plus d'une fois, ou après un appel à AudioBufferSourceNode.stop(), une exception est levée.
+ Le temps, en secondes, auquel la lecture doit commencer, spécifié dans le même systèmes de coordonnées temporalles utilisé par {{domxref("AudioContext")}}. Si when est inférieur à ({{domxref("AudioContext.currentTime")}}, ou égal à 0, la lecture commence immédiatement. La valeur par défaut est 0.
+
offset {{optional_inline}}
+
Décalage, en secondes, indiquant où la lecture doit commencer. Par example, pour lancer la lecture au milieu d'un son durant 10 secondes, l'offset doit être 5. La valeur par défaut, 0, démarre la lecture au début du buffer. Les valeurs supérieures à la fin du son sont silencieusement ajustées à la valeur maximum possible (basée sur les propriétés {{domxref("AudioBuffer.duration", "duration")}} et/ou {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}). Le calcul du décalage se fait en utilisant le taux d'échantillonnage original, donc même lorsqu'un son est lu au double de sa vitesse, le milieu d'un buffer de 10 secondes est toujours 5.
+
duration {{optional_inline}}
+
Le paramètre duration, dont la valeur par défaut est la longueur du contenu moins le décalage (offset) du début de lecture, indique la longueur du contenu audio qui doit être lue.
+ Durée du son qui doit être lue, en secondes. Si ce paramètre n'est pas spécifié ou a pour valeur 0 (valeur par défaut), le son est lu jusqu'à la fin, s'il n'est pas arrêté par la méthode {{domxref("AudioScheduledSourceNode.stop", "stop()")}}. L'utilisation de ce paramètre est fonctionellement équivalente à l'appel de la méthode start(when, offset) suivi de la méthode stop(when+duration).
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Exceptions

+ +
+
TypeError
+
Une valeur négative a été spécifiée pour au moins l'un des trois paramètres de temps. N'essayez pas de trafiquer les lois de la physique.
+
InvalidStateError
+
start() a déjà été appelé. Cette fonction ne peut être appelée qu'une seule fois pour chaque AudioBufferSourceNode.
+
+ +

Exemples

+ +

L'exemple le plus simple lance la lecture du buffer audio depuis le début - inutile de spécifier des paramètres dans ce cas:

+ +
source.start();
+ +

L'exemple suivant, plus complexe, jouera, après une seconde de pause, un tronçon d'une durée de 10 secondes à partir de la 3ème seconde des données en mémoire.

+ +
source.start(contexteAudio.currentTime + 1,3,10);
+ +
+

Note : Pour un exemple plus complexe montrant la méthode start() en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi  l'exemple complet et son code source.

+
+ +
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioBufferSourceNode.start")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.html b/files/fr/web/api/audiocontext/createmediaelementsource/index.html deleted file mode 100644 index 3809f56dcd..0000000000 --- a/files/fr/web/api/audiocontext/createmediaelementsource/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: AudioContext.createMediaElementSource() -slug: Web/API/AudioContext/createMediaElementSource -translation_of: Web/API/AudioContext/createMediaElementSource ---- -

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

- -
-

La méthode createMediaElementSource() de l’interface {{ domxref("AudioContext") }} est utilisée pour créer un nouvel objet {{ domxref("MediaElementAudioSourceNode") }} d’après un élément HTML {{ htmlelement("audio") }} ou {{ htmlelement("video") }} existant, permettant ainsi de jouer et de manipuler l’audio de cet élément.

-
- -

Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de {{ domxref("MediaElementAudioSourceNode") }}.

- -

Syntaxe

- -
var audioCtx = new AudioContext();
-var source = audioCtx.createMediaElementSource(myMediaElement);
- -

Paramètres

- -
-
myMediaElement
-
Un objet {{domxref("HTMLMediaElement")}} que vous voulez injecter dans un graphe de traitement audio pour le manipuler.
-
- -

Valeur de retour

- -

Un {{domxref("MediaElementAudioSourceNode")}}.

- -

Exemple

- -

Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à createMediaElementSource(), puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction updatePage() est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas.

- -
-

Note : Vous pouvez également voir cet exemple en temps réel, ou examiner le code source.

-
- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var myAudio = document.querySelector('audio');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
-
-pre.innerHTML = myScript.innerHTML;
-
-// Crée un MediaElementAudioSourceNode
-// et y injecte le HTMLMediaElement
-var source = audioCtx.createMediaElementSource(myAudio);
-
-// Crée un nœud gain
-var gainNode = audioCtx.createGain();
-
-// Crée les variables pour stocker la position Y du pointeur
-// et la HAUTEUR de l’écran
-var CurY;
-var HEIGHT = window.innerHeight;
-
-// Récupère les nouvelles coordonnées du pointeur quand la souris est déplacée
-// et définit la nouvelle valeur de gain
-
-document.onmousemove = updatePage;
-
-function updatePage(e) {
-    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
-
-    gainNode.gain.value = CurY/HEIGHT;
-}
-
-
-// connecte le AudioBufferSourceNode au nœud gain
-// et le nœud gain à la destination, de sorte qu’on puisse jouer la
-// musique et ajuster le volume avec le curseur de la souris
-source.connect(gainNode);
-gainNode.connect(audioCtx.destination);
- -
-

Note : Du fait de l’appel à createMediaElementSource(), la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.AudioContext.createMediaElementSource")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.md b/files/fr/web/api/audiocontext/createmediaelementsource/index.md new file mode 100644 index 0000000000..3809f56dcd --- /dev/null +++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.md @@ -0,0 +1,104 @@ +--- +title: AudioContext.createMediaElementSource() +slug: Web/API/AudioContext/createMediaElementSource +translation_of: Web/API/AudioContext/createMediaElementSource +--- +

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

+ +
+

La méthode createMediaElementSource() de l’interface {{ domxref("AudioContext") }} est utilisée pour créer un nouvel objet {{ domxref("MediaElementAudioSourceNode") }} d’après un élément HTML {{ htmlelement("audio") }} ou {{ htmlelement("video") }} existant, permettant ainsi de jouer et de manipuler l’audio de cet élément.

+
+ +

Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de {{ domxref("MediaElementAudioSourceNode") }}.

+ +

Syntaxe

+ +
var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);
+ +

Paramètres

+ +
+
myMediaElement
+
Un objet {{domxref("HTMLMediaElement")}} que vous voulez injecter dans un graphe de traitement audio pour le manipuler.
+
+ +

Valeur de retour

+ +

Un {{domxref("MediaElementAudioSourceNode")}}.

+ +

Exemple

+ +

Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à createMediaElementSource(), puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction updatePage() est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas.

+ +
+

Note : Vous pouvez également voir cet exemple en temps réel, ou examiner le code source.

+
+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// Crée un MediaElementAudioSourceNode
+// et y injecte le HTMLMediaElement
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// Crée un nœud gain
+var gainNode = audioCtx.createGain();
+
+// Crée les variables pour stocker la position Y du pointeur
+// et la HAUTEUR de l’écran
+var CurY;
+var HEIGHT = window.innerHeight;
+
+// Récupère les nouvelles coordonnées du pointeur quand la souris est déplacée
+// et définit la nouvelle valeur de gain
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    gainNode.gain.value = CurY/HEIGHT;
+}
+
+
+// connecte le AudioBufferSourceNode au nœud gain
+// et le nœud gain à la destination, de sorte qu’on puisse jouer la
+// musique et ajuster le volume avec le curseur de la souris
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+ +
+

Note : Du fait de l’appel à createMediaElementSource(), la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AudioContext.createMediaElementSource")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiocontext/index.html b/files/fr/web/api/audiocontext/index.html deleted file mode 100644 index 6378d52164..0000000000 --- a/files/fr/web/api/audiocontext/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: AudioContext -slug: Web/API/AudioContext -tags: - - API - - Audio - - Buffer - - Experimental - - Reference - - Web Audio API -translation_of: Web/API/AudioContext ---- -

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

- -

L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte.

- -

Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}.

- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
{{domxref("AudioContext.AudioContext", "AudioContext()")}}
-
Crée et retourne un nouvel objet AudioContext.
-
- -

Propriétés

- -
-
{{domxref("AudioContext.currentTime")}} {{readonlyInline}}
-
Renvoie un double flottant, qui représente un temps en secondes en augmentation continue, utilisé pour situer dans le temps. Il commence à 0.
-
{{domxref("AudioContext.destination")}} {{readonlyInline}}
-
Retourne un {{domxref ("AudioDestinationNode")}} représentant la destination finale de tous les fichiers audio dans un contexte. On peut le considérer comme un dispositif de rendu audio.
-
- -
-
{{domxref("AudioContext.listener")}} {{readonlyInline}}
-
Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.
-
- -
-
{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}
-
Renvoie un nombre flottant représentant la fréquence d'échantillonnage (échantillons par seconde) utilisée par tous les nœuds dans ce contexte.La fréquence d'échantillonnage d'un contexte audio ne peut pas être modifiée.
-
{{domxref("AudioContext.state")}} {{readonlyInline}}
-
Renvoie l'état actuel du contexte audio.
-
{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}
-
Sur Firefox OS, utilisé pour renvoyer la piste audio dans laquelle sera jouée le son qui sera lancé dans le contexte audio.
-
- -

Event handlers

- -
-
{{domxref("AudioContext.onstatechange")}}
-
Un gestionnaire d'évènement déclenché par un évènement du type {{event("statechange")}}. Cela a lieu quand l'état du contexte audio change, en raison de l'appel des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}.)
-
- -

Méthodes

- -

Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")}}.

- -
-
{{domxref("AudioContext.close()")}}
-
Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait.
-
{{domxref("AudioContext.createBuffer()")}}
-
Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }}
-
{{domxref("AudioContext.createBufferSource()")}}
-
Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès.
-
{{domxref("AudioContext.createMediaElementSource()")}}
-
Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}.
-
{{domxref("AudioContext.createMediaStreamSource()")}}
-
Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources.
-
{{domxref("AudioContext.createMediaStreamDestination()")}}
-
Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur.
-
{{domxref("AudioContext.createScriptProcessor()")}}
-
Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript.
-
{{domxref("AudioContext.createStereoPanner()")}}
-
Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio.
-
{{domxref("AudioContext.createAnalyser()")}}
-
Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données.
-
- -
-
{{domxref("AudioContext.createBiquadFilter()")}}
-
Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc.
-
- -
-
{{domxref("AudioContext.createChannelMerger()")}}
-
Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux.
-
{{domxref("AudioContext.createChannelSplitter()")}}
-
Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément.
-
{{domxref("AudioContext.createConvolver()")}}
-
Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb.
-
{{domxref("AudioContext.createDelay()")}}
-
Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également 
-
{{domxref("AudioContext.createDynamicsCompressor()")}}
-
Crée un objet {{domxref("DynamicsCompressorNode")}} qui permet d'appliquer une compression sur un signal audio.
-
{{domxref("AudioContext.createGain()")}}
-
Crée un objet {{domxref ("GainNode")}} qui permet de controller le niveau sonore global d'un graphe audio.
-
{{domxref("AudioContext.createIIRFilter()")}}
-
Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs.
-
{{domxref("AudioContext.createOscillator()")}}
-
Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son.
-
{{domxref("AudioContext.createPanner()")}}
-
Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D.
-
{{domxref("AudioContext.createPeriodicWave()")}}
-
Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}.
-
{{domxref("AudioContext.createWaveShaper()")}}
-
Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires.
-
{{domxref("AudioContext.createAudioWorker()")}}
-
Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour.
-
{{domxref("AudioContext.decodeAudioData()")}}
-
Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut responseType est arraybuffer. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers.
-
{{domxref("AudioContext.resume()")}}
-
Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu.
-
{{domxref("AudioContext.suspend()")}}
-
Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie.
-
- -

Méthodes obsolètes

- -
-
{{domxref("AudioContext.createJavaScriptNode()")}}
-
Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}.
-
{{domxref("AudioContext.createWaveTable()")}}
-
Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}.
-
- -

Exemples

- -

Déclaration basique d'un audio context :

- -
var contexteAudio = new AudioContext;
- -

Variante avec gestion de la compatibilité navigateur:

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var contexteAudio = new AudioContext();
-
-var oscillatorNode = contexteAudio.createOscillator();
-var gainNode = contexteAudio.createGain();
-var finish = contexteAudio.destination;
-// etc.
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.AudioContext")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiocontext/index.md b/files/fr/web/api/audiocontext/index.md new file mode 100644 index 0000000000..6378d52164 --- /dev/null +++ b/files/fr/web/api/audiocontext/index.md @@ -0,0 +1,172 @@ +--- +title: AudioContext +slug: Web/API/AudioContext +tags: + - API + - Audio + - Buffer + - Experimental + - Reference + - Web Audio API +translation_of: Web/API/AudioContext +--- +

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

+ +

L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte.

+ +

Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}.

+ +

{{InheritanceDiagram}}

+ +

Constructeur

+ +
+
{{domxref("AudioContext.AudioContext", "AudioContext()")}}
+
Crée et retourne un nouvel objet AudioContext.
+
+ +

Propriétés

+ +
+
{{domxref("AudioContext.currentTime")}} {{readonlyInline}}
+
Renvoie un double flottant, qui représente un temps en secondes en augmentation continue, utilisé pour situer dans le temps. Il commence à 0.
+
{{domxref("AudioContext.destination")}} {{readonlyInline}}
+
Retourne un {{domxref ("AudioDestinationNode")}} représentant la destination finale de tous les fichiers audio dans un contexte. On peut le considérer comme un dispositif de rendu audio.
+
+ +
+
{{domxref("AudioContext.listener")}} {{readonlyInline}}
+
Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.
+
+ +
+
{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}
+
Renvoie un nombre flottant représentant la fréquence d'échantillonnage (échantillons par seconde) utilisée par tous les nœuds dans ce contexte.La fréquence d'échantillonnage d'un contexte audio ne peut pas être modifiée.
+
{{domxref("AudioContext.state")}} {{readonlyInline}}
+
Renvoie l'état actuel du contexte audio.
+
{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}
+
Sur Firefox OS, utilisé pour renvoyer la piste audio dans laquelle sera jouée le son qui sera lancé dans le contexte audio.
+
+ +

Event handlers

+ +
+
{{domxref("AudioContext.onstatechange")}}
+
Un gestionnaire d'évènement déclenché par un évènement du type {{event("statechange")}}. Cela a lieu quand l'état du contexte audio change, en raison de l'appel des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}.)
+
+ +

Méthodes

+ +

Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")}}.

+ +
+
{{domxref("AudioContext.close()")}}
+
Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait.
+
{{domxref("AudioContext.createBuffer()")}}
+
Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }}
+
{{domxref("AudioContext.createBufferSource()")}}
+
Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès.
+
{{domxref("AudioContext.createMediaElementSource()")}}
+
Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}.
+
{{domxref("AudioContext.createMediaStreamSource()")}}
+
Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources.
+
{{domxref("AudioContext.createMediaStreamDestination()")}}
+
Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur.
+
{{domxref("AudioContext.createScriptProcessor()")}}
+
Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript.
+
{{domxref("AudioContext.createStereoPanner()")}}
+
Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio.
+
{{domxref("AudioContext.createAnalyser()")}}
+
Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données.
+
+ +
+
{{domxref("AudioContext.createBiquadFilter()")}}
+
Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc.
+
+ +
+
{{domxref("AudioContext.createChannelMerger()")}}
+
Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux.
+
{{domxref("AudioContext.createChannelSplitter()")}}
+
Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément.
+
{{domxref("AudioContext.createConvolver()")}}
+
Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb.
+
{{domxref("AudioContext.createDelay()")}}
+
Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également 
+
{{domxref("AudioContext.createDynamicsCompressor()")}}
+
Crée un objet {{domxref("DynamicsCompressorNode")}} qui permet d'appliquer une compression sur un signal audio.
+
{{domxref("AudioContext.createGain()")}}
+
Crée un objet {{domxref ("GainNode")}} qui permet de controller le niveau sonore global d'un graphe audio.
+
{{domxref("AudioContext.createIIRFilter()")}}
+
Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs.
+
{{domxref("AudioContext.createOscillator()")}}
+
Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son.
+
{{domxref("AudioContext.createPanner()")}}
+
Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D.
+
{{domxref("AudioContext.createPeriodicWave()")}}
+
Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}.
+
{{domxref("AudioContext.createWaveShaper()")}}
+
Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires.
+
{{domxref("AudioContext.createAudioWorker()")}}
+
Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour.
+
{{domxref("AudioContext.decodeAudioData()")}}
+
Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut responseType est arraybuffer. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers.
+
{{domxref("AudioContext.resume()")}}
+
Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu.
+
{{domxref("AudioContext.suspend()")}}
+
Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie.
+
+ +

Méthodes obsolètes

+ +
+
{{domxref("AudioContext.createJavaScriptNode()")}}
+
Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}.
+
{{domxref("AudioContext.createWaveTable()")}}
+
Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}.
+
+ +

Exemples

+ +

Déclaration basique d'un audio context :

+ +
var contexteAudio = new AudioContext;
+ +

Variante avec gestion de la compatibilité navigateur:

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var contexteAudio = new AudioContext();
+
+var oscillatorNode = contexteAudio.createOscillator();
+var gainNode = contexteAudio.createGain();
+var finish = contexteAudio.destination;
+// etc.
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AudioContext")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audiolistener/index.html b/files/fr/web/api/audiolistener/index.html deleted file mode 100644 index b8343c1642..0000000000 --- a/files/fr/web/api/audiolistener/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: AudioListener -slug: Web/API/AudioListener -tags: - - API - - Experimental - - Reference - - Web Audio API -translation_of: Web/API/AudioListener ---- -

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

- -

L'interface AudioListener représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une spatialisation audio. Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet AudioListener stocké dans la propriété {{domxref ("AudioContext.listener")}}.

- -

Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}.

- -

On voit ici la position, les vecteurs haut et face d'un AudioListener, avec les vecteurs haut et face à 90° l'un de l'autre.

- -

Propriétés

- -

Hérite des propriétés de son parent, AudioNode.

- -
-

Note : Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, AudioListener.positionX, tandis que la même propriété est définir à l'aide de AudioListener.positionX.value. C'est pourquoi ces valeurs ne sont pas marquées  en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL.

-
- -
-
{{domxref("AudioListener.positionX")}}
-
Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
-
{{domxref("AudioListener.positionY")}}
-
Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
-
{{domxref("AudioListener.positionZ")}}
-
Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
-
{{domxref("AudioListener.forwardX")}}
-
Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.
-
{{domxref("AudioListener.forwardY")}}
-
Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.
-
{{domxref("AudioListener.forwardZ")}}
-
Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
-
{{domxref("AudioListener.upX")}}
-
Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
-
{{domxref("AudioListener.upY")}}
-
Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
-
{{domxref("AudioListener.upZ")}}
-
Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
-
- -

Méthodes

- -

Hérite des propriétés de son parent, AudioNode.

- -
-
{{domxref("AudioListener.setOrientation()")}}
-
Définit l'orientation de l'auditeur.
-
{{domxref("AudioListener.setPosition()")}}
-
Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}}  pour savoir pourquoi cette méthode est désormais obsolète.
-
- -

Fonctionnalités obsolètes

- -
-
{{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}}
-
Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un effet doppler.
-
{{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}}
-
Nombre flottant à double précision représentant la vitesse du son, en mètres par seconde.
-
- -

Dans une version précédente de la spécification, les propriétés dopplerFactor et speedOfSound et la méthode setPosition() lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes :

- - - -

C'est la raison pour laquelle elles ont été supprimées.

- -

Exemples

- -

{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioListener")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audiolistener/index.md b/files/fr/web/api/audiolistener/index.md new file mode 100644 index 0000000000..b8343c1642 --- /dev/null +++ b/files/fr/web/api/audiolistener/index.md @@ -0,0 +1,107 @@ +--- +title: AudioListener +slug: Web/API/AudioListener +tags: + - API + - Experimental + - Reference + - Web Audio API +translation_of: Web/API/AudioListener +--- +

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

+ +

L'interface AudioListener représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une spatialisation audio. Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet AudioListener stocké dans la propriété {{domxref ("AudioContext.listener")}}.

+ +

Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}.

+ +

On voit ici la position, les vecteurs haut et face d'un AudioListener, avec les vecteurs haut et face à 90° l'un de l'autre.

+ +

Propriétés

+ +

Hérite des propriétés de son parent, AudioNode.

+ +
+

Note : Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, AudioListener.positionX, tandis que la même propriété est définir à l'aide de AudioListener.positionX.value. C'est pourquoi ces valeurs ne sont pas marquées  en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL.

+
+ +
+
{{domxref("AudioListener.positionX")}}
+
Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
+
{{domxref("AudioListener.positionY")}}
+
Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
+
{{domxref("AudioListener.positionZ")}}
+
Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
+
{{domxref("AudioListener.forwardX")}}
+
Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.
+
{{domxref("AudioListener.forwardY")}}
+
Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.
+
{{domxref("AudioListener.forwardZ")}}
+
Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
+
{{domxref("AudioListener.upX")}}
+
Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
+
{{domxref("AudioListener.upY")}}
+
Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
+
{{domxref("AudioListener.upZ")}}
+
Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
+
+ +

Méthodes

+ +

Hérite des propriétés de son parent, AudioNode.

+ +
+
{{domxref("AudioListener.setOrientation()")}}
+
Définit l'orientation de l'auditeur.
+
{{domxref("AudioListener.setPosition()")}}
+
Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}}  pour savoir pourquoi cette méthode est désormais obsolète.
+
+ +

Fonctionnalités obsolètes

+ +
+
{{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}}
+
Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un effet doppler.
+
{{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}}
+
Nombre flottant à double précision représentant la vitesse du son, en mètres par seconde.
+
+ +

Dans une version précédente de la spécification, les propriétés dopplerFactor et speedOfSound et la méthode setPosition() lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes :

+ + + +

C'est la raison pour laquelle elles ont été supprimées.

+ +

Exemples

+ +

{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioListener")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audionode/index.html b/files/fr/web/api/audionode/index.html deleted file mode 100644 index b3e51998b0..0000000000 --- a/files/fr/web/api/audionode/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: AudioNode -slug: Web/API/AudioNode -translation_of: Web/API/AudioNode ---- -

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

- -

L'interface AudioNode est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire  (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}.

- -

{{InheritanceDiagram}}

- -

Des objets AudioNode participant à un objet AudioContext pour créer un graphe de routage audio.

- - -

Un AudioNode a des entrées et sorties, chacune avec un certain nombre de canaux. Un AudioNode avec zero entrée et une ou plusieurs sorties est appelée un noeud source. Le traitement exact varie d'un AudioNode à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part).

- -

Plusieurs noeuds peuvent être reliés dans un graphe de traitement. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque AudioNode fait partie d'exactement un contexte. Les noeuds de traitement héritent des  propriétés et méthodse d'AudioNode, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil Web Audio API.

- -
-

Note : Un AudioNode peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.

-
- -

Propriétés

- -
-
{{domxref("AudioNode.context")}} {{readonlyInline}}
-
Renvoie le {{domxref("AudioContext")}} associé, c'est-à-dire l'objet représentant le graphe de traitement dont le noeud fait partie.
-
- -
-
{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}
-
Renvoie le nombre d'entrées d'un noeud. Les noeuds source sont des noeuds dont la propriété numberOfInputs a la valeur 0.
-
- -
-
{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}
-
Renvoie le nombre de sorties d'un noeud. Les noeuds de destination — comme {{ domxref("AudioDestinationNode") }} — sont des noeuds dont cette propriété a la valeur 0.
-
- -
-
{{domxref("AudioNode.channelCount")}}
-
Représente un entier utilisé pour déterminer le nombre de canaux lors d'une conversion ascendante ou descendante. Son usage et sa définition précise dépendent de la valeur de {{domxref("AudioNode.channelCountMode")}}.
-
- -
-
{{domxref("AudioNode.channelCountMode")}}
-
Représente une liste énumérative qui décrit la façon dont les canaux doivent être connectés entre les entrées et les sorties.
-
{{domxref("AudioNode.channelInterpretation")}}
-
Représente une liste énumérative qui décrit la signification des canaux. Cette interprétation définit la façon dont la conversion ascendante ou descendante est réalisée. Les valeurs possibles sont "speakers" ou "discrete".
-
- -

Méthodes

- -

Implémente aussi les méthodes de l'interface {{domxref("EventTarget")}}.

- -
-
{{domxref("AudioNode.connect()")}}
-
Permet de connecter une sortie du noeud à l'entrée d'un autre noeud, soit comme données audio, soir comme valeur d'un {{domxref("AudioParam")}}.
-
{{domxref("AudioNode.disconnect()")}}
-
Permet de déconnecter le noeud d'un autre noeud auquel il est déjà connecté.
-
- -

Exemple

- -

Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes AudioNode peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page Web Audio API (par exemple Violent Theremin.)

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-
-var audioCtx = new AudioContext();
-
-var oscillator = audioCtx.createOscillator();
-var gainNode = audioCtx.createGain();
-
-oscillator.connect(gainNode);
-gainNode.connect(audioCtx.destination);
-
-oscillator.context;
-oscillator.numberOfInputs;
-oscillator.numberOfOutputs;
-oscillator.channelCount;
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateur

- -

{{Compat("api.AudioNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audionode/index.md b/files/fr/web/api/audionode/index.md new file mode 100644 index 0000000000..b3e51998b0 --- /dev/null +++ b/files/fr/web/api/audionode/index.md @@ -0,0 +1,107 @@ +--- +title: AudioNode +slug: Web/API/AudioNode +translation_of: Web/API/AudioNode +--- +

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

+ +

L'interface AudioNode est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire  (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}.

+ +

{{InheritanceDiagram}}

+ +

Des objets AudioNode participant à un objet AudioContext pour créer un graphe de routage audio.

+ + +

Un AudioNode a des entrées et sorties, chacune avec un certain nombre de canaux. Un AudioNode avec zero entrée et une ou plusieurs sorties est appelée un noeud source. Le traitement exact varie d'un AudioNode à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part).

+ +

Plusieurs noeuds peuvent être reliés dans un graphe de traitement. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque AudioNode fait partie d'exactement un contexte. Les noeuds de traitement héritent des  propriétés et méthodse d'AudioNode, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil Web Audio API.

+ +
+

Note : Un AudioNode peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.

+
+ +

Propriétés

+ +
+
{{domxref("AudioNode.context")}} {{readonlyInline}}
+
Renvoie le {{domxref("AudioContext")}} associé, c'est-à-dire l'objet représentant le graphe de traitement dont le noeud fait partie.
+
+ +
+
{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}
+
Renvoie le nombre d'entrées d'un noeud. Les noeuds source sont des noeuds dont la propriété numberOfInputs a la valeur 0.
+
+ +
+
{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}
+
Renvoie le nombre de sorties d'un noeud. Les noeuds de destination — comme {{ domxref("AudioDestinationNode") }} — sont des noeuds dont cette propriété a la valeur 0.
+
+ +
+
{{domxref("AudioNode.channelCount")}}
+
Représente un entier utilisé pour déterminer le nombre de canaux lors d'une conversion ascendante ou descendante. Son usage et sa définition précise dépendent de la valeur de {{domxref("AudioNode.channelCountMode")}}.
+
+ +
+
{{domxref("AudioNode.channelCountMode")}}
+
Représente une liste énumérative qui décrit la façon dont les canaux doivent être connectés entre les entrées et les sorties.
+
{{domxref("AudioNode.channelInterpretation")}}
+
Représente une liste énumérative qui décrit la signification des canaux. Cette interprétation définit la façon dont la conversion ascendante ou descendante est réalisée. Les valeurs possibles sont "speakers" ou "discrete".
+
+ +

Méthodes

+ +

Implémente aussi les méthodes de l'interface {{domxref("EventTarget")}}.

+ +
+
{{domxref("AudioNode.connect()")}}
+
Permet de connecter une sortie du noeud à l'entrée d'un autre noeud, soit comme données audio, soir comme valeur d'un {{domxref("AudioParam")}}.
+
{{domxref("AudioNode.disconnect()")}}
+
Permet de déconnecter le noeud d'un autre noeud auquel il est déjà connecté.
+
+ +

Exemple

+ +

Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes AudioNode peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page Web Audio API (par exemple Violent Theremin.)

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateur

+ +

{{Compat("api.AudioNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audioparam/index.html b/files/fr/web/api/audioparam/index.html deleted file mode 100644 index bd0fca5e56..0000000000 --- a/files/fr/web/api/audioparam/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: AudioParam -slug: Web/API/AudioParam -tags: - - API - - Experimental - - Reference - - Web Audio API -translation_of: Web/API/AudioParam ---- -

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

- -

L'interface AudioParam représente un paramètre audio, en général un paramètre d'un {{domxref ("AudioNode")}} tel qu'un {{ domxref("GainNode.gain") }}. On peut lui donner une valeur spécifique ou définir une variation de valeur qui intervient à un certain moment et selon un certain fonctionnement.

- -

Il y a deux sortes de AudioParam, a-rate et k-rate :

- - - -

Chaque {{domxref ("AudioNode")}} définit lequel de ses paramètres sont a-rate ou k-rate.

- -

Chaque AudioParam a une liste d'événements, initialement vide, qui définit quand et comment les valeurs changent. Si cette liste n'est pas vide, les modifications faites directement avec AudioParam.value sont ignorées. Cette liste d'événements permet de planifier les changements qui doivent se produire à des moments très précis à l'aide de courbes d'automatisation chronologiques arbitraires. Les informations de temps utilisées sont celles définies par {{domxref ("AudioContext.currentTime")}}.

- -

Propriétés

- -

Hérite des propriétés de son parent, AudioNode.

- -
-
{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}
-
Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'AudioParam.
-
{{domxref("AudioParam.maxValue")}} {{readonlyInline}}
-
Valeur maximum de la plage nominale (effective). 
-
{{domxref("AudioParam.minValue")}} {{readonlyinline}}
-
Valeur minimum de la plage nominale (effective). 
-
- -
-
{{domxref("AudioParam.value")}}
-
Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de AudioParam.defaultValue. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la AudioParam - est ignorée, sans lever aucune exception
-
- -

Méthodes

- -

Hérite des propriétés de son parent, AudioNode.

- -
-
{{domxref("AudioParam.setValueAtTime()")}}
-
Planifie un changement de la valeur d' AudioParam à un moment précis, startTime, tel que mesuré par rapport à {{domxref ("AudioContext.currentTime")}}. La nouvelle valeur est passée en argument.
-
{{domxref("AudioParam.linearRampToValueAtTime()")}}
-
Planifie un changement de la valeur d'AudioParam. Le changement commence à l'heure prévue pour l'événement précédent, évolue selon une rampe linéaire jusqu'à la nouvelle valeur passée dans l'argument value, et atteint la nouvelle valeur à l'heure indiquée par le paramètre endTime.
-
{{domxref("AudioParam.exponentialRampToValueAtTime()")}}
-
Planifie un changement de la valeur d'AudioParam. Le changement commence à l'heure prévue pour l'événement précédent, suit une rampe exponentielle jusqu'à la nouvelle valeur passée dans l'argument value, et atteint la nouvelle valeur à l'heure indiquée par le paramètre endTime.
- Les rampes exponentielles sont utiles lors du changement de fréquence ou de taux de lecture en raison de la façon dont l'oreille humaine fonctionne.
-
{{domxref("AudioParam.setTargetAtTime()")}}
-
Planifie le début d'un changement de la valeur d'AudioParam. Le changement commence à l'heure spécifiée par l'argument startTime et de façon exponentielle tend vers la valeur donnée par le paramètre target. Le taux de décroissance exponentielle est définie par le paramètre timeConstant. C'est le temps nécessaire à un système continu linéaire du premier ordre invariant dans le temps pour atteindre la valeur de 1 - 1 / e (environ 63,2%) donné une réponse d'entrée de l'étape (passage de 0 à 1 en valeur), Plus il est grand, plus la transition sera facile. Ceci est utile pour la décroissance ou la libération de portions d'enveloppes.
-
{{domxref("AudioParam.setValueCurveAtTime()")}}
-
Planifie des valeurs de AudioParam selon un jeu de valeurs, défini par le paramètre  values ({{domxref ("Float32Array")}}), mis à l'échelle pour s'adapter à l'intervalle de temps donné, en commençant à startTime.
-
{{domxref("AudioParam.cancelScheduledValues()")}}
-
Annule toutes les modifications futures prévues du AudioParam.
-
{{domxref("AudioParam.cancelAndHoldAtTime()")}}
-
Annule toutes les modifications futures prévues du AudioParam mais maintient sa valeur à un certain moment, en attendant que d'autres changements soient effectués. La nouvelle valeur est passée en argument.
-
- -

Exemples

- -

Ce premier exemple simple montre la définition de la valeur de  gain d'un {{domxref("GainNode")}}. gain est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon.

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-
-var gainNode = audioCtx.createGain();
-gainNode.gain.value = 0;
- -

Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons.

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-
-var biquadFilter = audioCtx.createBiquadFilter();
-
-biquadFilter.type = "lowshelf";
-biquadFilter.frequency.value = 1000;
-biquadFilter.gain.value = 25;
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioParam")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audioparam/index.md b/files/fr/web/api/audioparam/index.md new file mode 100644 index 0000000000..bd0fca5e56 --- /dev/null +++ b/files/fr/web/api/audioparam/index.md @@ -0,0 +1,112 @@ +--- +title: AudioParam +slug: Web/API/AudioParam +tags: + - API + - Experimental + - Reference + - Web Audio API +translation_of: Web/API/AudioParam +--- +

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

+ +

L'interface AudioParam représente un paramètre audio, en général un paramètre d'un {{domxref ("AudioNode")}} tel qu'un {{ domxref("GainNode.gain") }}. On peut lui donner une valeur spécifique ou définir une variation de valeur qui intervient à un certain moment et selon un certain fonctionnement.

+ +

Il y a deux sortes de AudioParam, a-rate et k-rate :

+ + + +

Chaque {{domxref ("AudioNode")}} définit lequel de ses paramètres sont a-rate ou k-rate.

+ +

Chaque AudioParam a une liste d'événements, initialement vide, qui définit quand et comment les valeurs changent. Si cette liste n'est pas vide, les modifications faites directement avec AudioParam.value sont ignorées. Cette liste d'événements permet de planifier les changements qui doivent se produire à des moments très précis à l'aide de courbes d'automatisation chronologiques arbitraires. Les informations de temps utilisées sont celles définies par {{domxref ("AudioContext.currentTime")}}.

+ +

Propriétés

+ +

Hérite des propriétés de son parent, AudioNode.

+ +
+
{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}
+
Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'AudioParam.
+
{{domxref("AudioParam.maxValue")}} {{readonlyInline}}
+
Valeur maximum de la plage nominale (effective). 
+
{{domxref("AudioParam.minValue")}} {{readonlyinline}}
+
Valeur minimum de la plage nominale (effective). 
+
+ +
+
{{domxref("AudioParam.value")}}
+
Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de AudioParam.defaultValue. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la AudioParam - est ignorée, sans lever aucune exception
+
+ +

Méthodes

+ +

Hérite des propriétés de son parent, AudioNode.

+ +
+
{{domxref("AudioParam.setValueAtTime()")}}
+
Planifie un changement de la valeur d' AudioParam à un moment précis, startTime, tel que mesuré par rapport à {{domxref ("AudioContext.currentTime")}}. La nouvelle valeur est passée en argument.
+
{{domxref("AudioParam.linearRampToValueAtTime()")}}
+
Planifie un changement de la valeur d'AudioParam. Le changement commence à l'heure prévue pour l'événement précédent, évolue selon une rampe linéaire jusqu'à la nouvelle valeur passée dans l'argument value, et atteint la nouvelle valeur à l'heure indiquée par le paramètre endTime.
+
{{domxref("AudioParam.exponentialRampToValueAtTime()")}}
+
Planifie un changement de la valeur d'AudioParam. Le changement commence à l'heure prévue pour l'événement précédent, suit une rampe exponentielle jusqu'à la nouvelle valeur passée dans l'argument value, et atteint la nouvelle valeur à l'heure indiquée par le paramètre endTime.
+ Les rampes exponentielles sont utiles lors du changement de fréquence ou de taux de lecture en raison de la façon dont l'oreille humaine fonctionne.
+
{{domxref("AudioParam.setTargetAtTime()")}}
+
Planifie le début d'un changement de la valeur d'AudioParam. Le changement commence à l'heure spécifiée par l'argument startTime et de façon exponentielle tend vers la valeur donnée par le paramètre target. Le taux de décroissance exponentielle est définie par le paramètre timeConstant. C'est le temps nécessaire à un système continu linéaire du premier ordre invariant dans le temps pour atteindre la valeur de 1 - 1 / e (environ 63,2%) donné une réponse d'entrée de l'étape (passage de 0 à 1 en valeur), Plus il est grand, plus la transition sera facile. Ceci est utile pour la décroissance ou la libération de portions d'enveloppes.
+
{{domxref("AudioParam.setValueCurveAtTime()")}}
+
Planifie des valeurs de AudioParam selon un jeu de valeurs, défini par le paramètre  values ({{domxref ("Float32Array")}}), mis à l'échelle pour s'adapter à l'intervalle de temps donné, en commençant à startTime.
+
{{domxref("AudioParam.cancelScheduledValues()")}}
+
Annule toutes les modifications futures prévues du AudioParam.
+
{{domxref("AudioParam.cancelAndHoldAtTime()")}}
+
Annule toutes les modifications futures prévues du AudioParam mais maintient sa valeur à un certain moment, en attendant que d'autres changements soient effectués. La nouvelle valeur est passée en argument.
+
+ +

Exemples

+ +

Ce premier exemple simple montre la définition de la valeur de  gain d'un {{domxref("GainNode")}}. gain est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon.

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0;
+ +

Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons.

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var biquadFilter = audioCtx.createBiquadFilter();
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioParam")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audioprocessingevent/index.html b/files/fr/web/api/audioprocessingevent/index.html deleted file mode 100644 index a43186edb4..0000000000 --- a/files/fr/web/api/audioprocessingevent/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: AudioProcessingEvent -slug: Web/API/AudioProcessingEvent -tags: - - API - - Experimental - - Reference - - Web Audio API -translation_of: Web/API/AudioProcessingEvent ---- -

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

- -

AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.

- -
-

Note : Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les Audio Workers.

-
- -

Propriétés

- -

La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref("Event")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'évènement (la plus haute dans le DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type d'évènement.
bubbles {{ReadOnlyInline}}booleanIndique si l'évènement se propage normalement.
cancelable {{ReadOnlyInline}}booleanIndique s'il est possible d'annuler l'évènement.
playbackTime {{ReadOnlyInline}}doubleMoment auquel le son sera joué, tel que défini par {{domxref("AudioContext.currentTime")}}
inputBuffer {{ReadOnlyInline}}{{domxref("AudioBuffer")}}Tampon contenant les données audio à traiter en entrée. Le nombre de canaux est défini comme paramètre, numberOfInputChannels, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'AudioBuffer renvoyé est valide uniquement dans la portée de la fonction onaudioprocess.
outputBuffer {{ReadOnlyInline}}{{domxref("AudioBuffer")}}Tampon dans lequel les données doivent être écrites en sortie. Le nombre de canaux est défini comme paramètre, numberOfOutputChannels, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'AudioBuffer renvoyé est valide uniquement dans la portée de la fonction onaudioprocess.
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioProcessingEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/audioprocessingevent/index.md b/files/fr/web/api/audioprocessingevent/index.md new file mode 100644 index 0000000000..a43186edb4 --- /dev/null +++ b/files/fr/web/api/audioprocessingevent/index.md @@ -0,0 +1,95 @@ +--- +title: AudioProcessingEvent +slug: Web/API/AudioProcessingEvent +tags: + - API + - Experimental + - Reference + - Web Audio API +translation_of: Web/API/AudioProcessingEvent +--- +

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

+ +

AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.

+ +
+

Note : Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les Audio Workers.

+
+ +

Propriétés

+ +

La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref("Event")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'évènement (la plus haute dans le DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type d'évènement.
bubbles {{ReadOnlyInline}}booleanIndique si l'évènement se propage normalement.
cancelable {{ReadOnlyInline}}booleanIndique s'il est possible d'annuler l'évènement.
playbackTime {{ReadOnlyInline}}doubleMoment auquel le son sera joué, tel que défini par {{domxref("AudioContext.currentTime")}}
inputBuffer {{ReadOnlyInline}}{{domxref("AudioBuffer")}}Tampon contenant les données audio à traiter en entrée. Le nombre de canaux est défini comme paramètre, numberOfInputChannels, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'AudioBuffer renvoyé est valide uniquement dans la portée de la fonction onaudioprocess.
outputBuffer {{ReadOnlyInline}}{{domxref("AudioBuffer")}}Tampon dans lequel les données doivent être écrites en sortie. Le nombre de canaux est défini comme paramètre, numberOfOutputChannels, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'AudioBuffer renvoyé est valide uniquement dans la portée de la fonction onaudioprocess.
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.AudioProcessingEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/audioworklet/index.html b/files/fr/web/api/audioworklet/index.html deleted file mode 100644 index 7e0330b10c..0000000000 --- a/files/fr/web/api/audioworklet/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: AudioWorklet -slug: Web/API/AudioWorklet -tags: - - API - - Audio - - AudioWorklet - - Background - - Custom - - Interface - - Low-latency - - Reference - - Web Audio API - - Worklet - - Zero-latency - - latency - - sound -translation_of: Web/API/AudioWorklet ---- -

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

- -

L'interface AudioWorklet dans l'API Web Audio est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence. Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio.

- -

L'accès à distance d'AudioWorklet du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}.

- -

Propriétés

- -

L'interface AudioWorklet ne définit pas de propriétés propres, mais hérite des propriétés de {{domxref("Worklet")}}.

- -

Méthodes

- -

Cette interface hérite des méthodes de {{domxref('Worklet')}}. L'interface AudioWorklet ne définit aucune méthode propre.

- -

Evénements

- -

L'AudioWorklet n'a pas d'événements auxquels il répond.

- -

Exemples

- -

Voir {{domxref("AudioWorkletNode")}} pour des exemples complets de création de nœuds audio personnalisés.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Web Audio API','#audioworklet','AudioWorklet')}}{{Spec2('Web Audio API')}}Définition intiale.
- -

Compatibilité du navigateur

- -
- - -

{{Compat("api.AudioWorklet")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/audioworklet/index.md b/files/fr/web/api/audioworklet/index.md new file mode 100644 index 0000000000..7e0330b10c --- /dev/null +++ b/files/fr/web/api/audioworklet/index.md @@ -0,0 +1,73 @@ +--- +title: AudioWorklet +slug: Web/API/AudioWorklet +tags: + - API + - Audio + - AudioWorklet + - Background + - Custom + - Interface + - Low-latency + - Reference + - Web Audio API + - Worklet + - Zero-latency + - latency + - sound +translation_of: Web/API/AudioWorklet +--- +

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

+ +

L'interface AudioWorklet dans l'API Web Audio est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence. Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio.

+ +

L'accès à distance d'AudioWorklet du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}.

+ +

Propriétés

+ +

L'interface AudioWorklet ne définit pas de propriétés propres, mais hérite des propriétés de {{domxref("Worklet")}}.

+ +

Méthodes

+ +

Cette interface hérite des méthodes de {{domxref('Worklet')}}. L'interface AudioWorklet ne définit aucune méthode propre.

+ +

Evénements

+ +

L'AudioWorklet n'a pas d'événements auxquels il répond.

+ +

Exemples

+ +

Voir {{domxref("AudioWorkletNode")}} pour des exemples complets de création de nœuds audio personnalisés.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('Web Audio API','#audioworklet','AudioWorklet')}}{{Spec2('Web Audio API')}}Définition intiale.
+ +

Compatibilité du navigateur

+ +
+ + +

{{Compat("api.AudioWorklet")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.html b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.html deleted file mode 100644 index ee891dad3a..0000000000 --- a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: AuthenticatorAssertionResponse.authenticatorData -slug: Web/API/AuthenticatorAssertionResponse/authenticatorData -tags: - - API - - Propriété - - Reference - - Web Authentication API - - WebAuthn -translation_of: Web/API/AuthenticatorAssertionResponse/authenticatorData ---- -

{{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}

- -

La propriété authenticatorData (rattachée à  l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que :

- - - -

Cette propriété est signée par l'authenticateur (c'est l'un des deux champs qui est signé).

- -

Syntaxe

- -
var authnrData = assertion.response.authnrData;
-
- -

Valeur

- -

Un objet {{jsxref("ArrayBuffer")}} dont la propriété {{jsxref("ArrayBuffer.byteLength")}} indique qu'il mesure au moins 37 octets et qui contient les champs suivants :

- - - -

Exemples

- -

TBD

- -

Specifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.AuthenticatorAssertionResponse")}}

diff --git a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md new file mode 100644 index 0000000000..ee891dad3a --- /dev/null +++ b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md @@ -0,0 +1,82 @@ +--- +title: AuthenticatorAssertionResponse.authenticatorData +slug: Web/API/AuthenticatorAssertionResponse/authenticatorData +tags: + - API + - Propriété + - Reference + - Web Authentication API + - WebAuthn +translation_of: Web/API/AuthenticatorAssertionResponse/authenticatorData +--- +

{{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}

+ +

La propriété authenticatorData (rattachée à  l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que :

+ + + +

Cette propriété est signée par l'authenticateur (c'est l'un des deux champs qui est signé).

+ +

Syntaxe

+ +
var authnrData = assertion.response.authnrData;
+
+ +

Valeur

+ +

Un objet {{jsxref("ArrayBuffer")}} dont la propriété {{jsxref("ArrayBuffer.byteLength")}} indique qu'il mesure au moins 37 octets et qui contient les champs suivants :

+ + + +

Exemples

+ +

TBD

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AuthenticatorAssertionResponse")}}

diff --git a/files/fr/web/api/authenticatorassertionresponse/index.html b/files/fr/web/api/authenticatorassertionresponse/index.html deleted file mode 100644 index 5b1ff20f39..0000000000 --- a/files/fr/web/api/authenticatorassertionresponse/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: AuthenticatorAssertionResponse -slug: Web/API/AuthenticatorAssertionResponse -tags: - - API - - AuthenticatorAssertionResponse - - Interface - - Reference - - Web Authentification API - - WebAuthn -translation_of: Web/API/AuthenticatorAssertionResponse ---- -

{{APIRef("Web Authentication API")}}{{securecontext_header}}

- -

L'interface AuthenticatorAssertionResponse, rattachée à l'API Web Authentication, est renvoyée par un appel à {{domxref('CredentialsContainer.get()')}} lorsqu'on a passé un objet {{domxref('PublicKeyCredential')}} en argument. Cette interface fournit une preuve à un service que l'objet possède une paire de clé et que la requête d'authentification est valide et approvée.

- -

Propriétés

- -
-
AuthenticatorAssertionResponse.clientDataJSON
-
Les données du client pour l'authentification telles que l'origine et le challenge. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de {{domxref("AuthenticatorResponse")}}.
-
{{domxref("AuthenticatorAssertionResponse.authenticatorData")}}
-
Un objet {{jsxref("ArrayBuffer")}} contenant les informations sur l'authenticateur telles que : -
    -
  • l'empreinte d'identifiant (Relying Party ID Hash) rpidHash
    • -
  • un compteur de signature
    • -
  • un test de présence d'utilisateur
    • -
  • des marqueurs de vérification de l'utilisateur
    • -
  • les éventuelles extensions traitées par l'authentificateur
    • -
- Ce champ est l'un des deux champs qui est signé par l'authentificateur.
-
{{domxref("AuthenticatorAssertionResponse.signature")}}
-
Une signature d'assertion par rapport à {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} et {{domxref("AuthenticatorResponse.clientDataJSON")}}. La signature d'assertion est créée avec la clé privée de la paire de clés (générée avec l'appel à create()) et est vérifiée avec la clé publique la même paire de clé.
-
{{domxref("AuthenticatorAssertionResponse.userHandle")}}
-
Un objet {{jsxref("ArrayBuffer")}} contenant un identifiant opaque pour l'utilisateur.
-
- -

Méthodes

- -

Aucune.

- -

Exemples

- -

TBD

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.AuthenticatorAssertionResponse")}}

diff --git a/files/fr/web/api/authenticatorassertionresponse/index.md b/files/fr/web/api/authenticatorassertionresponse/index.md new file mode 100644 index 0000000000..5b1ff20f39 --- /dev/null +++ b/files/fr/web/api/authenticatorassertionresponse/index.md @@ -0,0 +1,67 @@ +--- +title: AuthenticatorAssertionResponse +slug: Web/API/AuthenticatorAssertionResponse +tags: + - API + - AuthenticatorAssertionResponse + - Interface + - Reference + - Web Authentification API + - WebAuthn +translation_of: Web/API/AuthenticatorAssertionResponse +--- +

{{APIRef("Web Authentication API")}}{{securecontext_header}}

+ +

L'interface AuthenticatorAssertionResponse, rattachée à l'API Web Authentication, est renvoyée par un appel à {{domxref('CredentialsContainer.get()')}} lorsqu'on a passé un objet {{domxref('PublicKeyCredential')}} en argument. Cette interface fournit une preuve à un service que l'objet possède une paire de clé et que la requête d'authentification est valide et approvée.

+ +

Propriétés

+ +
+
AuthenticatorAssertionResponse.clientDataJSON
+
Les données du client pour l'authentification telles que l'origine et le challenge. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de {{domxref("AuthenticatorResponse")}}.
+
{{domxref("AuthenticatorAssertionResponse.authenticatorData")}}
+
Un objet {{jsxref("ArrayBuffer")}} contenant les informations sur l'authenticateur telles que : +
    +
  • l'empreinte d'identifiant (Relying Party ID Hash) rpidHash
    • +
  • un compteur de signature
    • +
  • un test de présence d'utilisateur
    • +
  • des marqueurs de vérification de l'utilisateur
    • +
  • les éventuelles extensions traitées par l'authentificateur
    • +
+ Ce champ est l'un des deux champs qui est signé par l'authentificateur.
+
{{domxref("AuthenticatorAssertionResponse.signature")}}
+
Une signature d'assertion par rapport à {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} et {{domxref("AuthenticatorResponse.clientDataJSON")}}. La signature d'assertion est créée avec la clé privée de la paire de clés (générée avec l'appel à create()) et est vérifiée avec la clé publique la même paire de clé.
+
{{domxref("AuthenticatorAssertionResponse.userHandle")}}
+
Un objet {{jsxref("ArrayBuffer")}} contenant un identifiant opaque pour l'utilisateur.
+
+ +

Méthodes

+ +

Aucune.

+ +

Exemples

+ +

TBD

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AuthenticatorAssertionResponse")}}

diff --git a/files/fr/web/api/authenticatorattestationresponse/index.html b/files/fr/web/api/authenticatorattestationresponse/index.html deleted file mode 100644 index 13a1741a88..0000000000 --- a/files/fr/web/api/authenticatorattestationresponse/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: AuthenticatorAttestationResponse -slug: Web/API/AuthenticatorAttestationResponse -tags: - - API - - AuthenticatorAttestationResponse - - Interface - - Reference - - Web Authentication API - - WebAuthn -translation_of: Web/API/AuthenticatorAttestationResponse ---- -

{{APIRef("Web Authentication API")}}{{securecontext_header}}

- -

L'interface AuthenticatorAttestationResponse, rattachée à l'API Web Authentication, est renvoyée par un appel à {{domxref('CredentialsContainer.create()')}} lorsqu'un objet {{domxref('PublicKeyCredential')}} est passé à la méthode. Elle fournit une racine cryptographique de confiance pour la nouvelle paire de clés qui a été générée.

- -

Propriétés

- -
-
AuthenticatorAttestationResponse.clientDataJSON
-
Les données relatives aux client pour l'authentification telles que l'origine et le challenge. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de l'interface {{domxref("AuthenticatorResponse")}}.
-
{{domxref("AuthenticatorAttestationResponse.attestationObject")}}
-
Un objet {{domxref("ArrayBuffer")}} qui contient les données de l'authenticateur ainsi qu'une instruction d'attestation pour la nouvelle paire de clés.
-
- -

Méthodes

- -

Aucune.

- -

Exemples

- -

TBD

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.AuthenticatorAttestationResponse")}}

diff --git a/files/fr/web/api/authenticatorattestationresponse/index.md b/files/fr/web/api/authenticatorattestationresponse/index.md new file mode 100644 index 0000000000..13a1741a88 --- /dev/null +++ b/files/fr/web/api/authenticatorattestationresponse/index.md @@ -0,0 +1,55 @@ +--- +title: AuthenticatorAttestationResponse +slug: Web/API/AuthenticatorAttestationResponse +tags: + - API + - AuthenticatorAttestationResponse + - Interface + - Reference + - Web Authentication API + - WebAuthn +translation_of: Web/API/AuthenticatorAttestationResponse +--- +

{{APIRef("Web Authentication API")}}{{securecontext_header}}

+ +

L'interface AuthenticatorAttestationResponse, rattachée à l'API Web Authentication, est renvoyée par un appel à {{domxref('CredentialsContainer.create()')}} lorsqu'un objet {{domxref('PublicKeyCredential')}} est passé à la méthode. Elle fournit une racine cryptographique de confiance pour la nouvelle paire de clés qui a été générée.

+ +

Propriétés

+ +
+
AuthenticatorAttestationResponse.clientDataJSON
+
Les données relatives aux client pour l'authentification telles que l'origine et le challenge. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de l'interface {{domxref("AuthenticatorResponse")}}.
+
{{domxref("AuthenticatorAttestationResponse.attestationObject")}}
+
Un objet {{domxref("ArrayBuffer")}} qui contient les données de l'authenticateur ainsi qu'une instruction d'attestation pour la nouvelle paire de clés.
+
+ +

Méthodes

+ +

Aucune.

+ +

Exemples

+ +

TBD

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AuthenticatorAttestationResponse")}}

diff --git a/files/fr/web/api/authenticatorresponse/index.html b/files/fr/web/api/authenticatorresponse/index.html deleted file mode 100644 index 097cbfad44..0000000000 --- a/files/fr/web/api/authenticatorresponse/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: AuthenticatorResponse -slug: Web/API/AuthenticatorResponse -tags: - - API - - Interface - - Reference - - Web Authentication API - - Web Authn -translation_of: Web/API/AuthenticatorResponse ---- -

{{APIRef("Web Authentication API")}}{{securecontext_header}}

- -

L'interface AuthenticatorResponse, rattachée à l'API Web Authentication, constitue l'interface de base pour les interfaces qui fournissent une racine cryptographique de confiance pour une paire de clés. Les interfaces filles contiennent des informations relatives au navigateur telles que l'origine du challenge et qui peuvent être renvoyée par {{domxref("PublicKeyCredential.response")}}.

- -

Interfaces basées sur AuthenticatorResponse

- -

Voici la liste des interfaces basées sur AuthenticatorResponse.

- - - -

Propriétés

- -
-
{{domxref("AuthenticatorResponse.clientDataJSON")}}
-
Une chaîne de caractères JSON stockée dans un {{domxref("ArrayBuffer")}} et qui représente les données du client passées à {{domxref("CredentialsContainer.create()")}} ou {{domxref("CredentialsContainer.get()")}}.
-
- -

Méthodes

- -

Aucune.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.AuthenticatorResponse")}}

diff --git a/files/fr/web/api/authenticatorresponse/index.md b/files/fr/web/api/authenticatorresponse/index.md new file mode 100644 index 0000000000..097cbfad44 --- /dev/null +++ b/files/fr/web/api/authenticatorresponse/index.md @@ -0,0 +1,57 @@ +--- +title: AuthenticatorResponse +slug: Web/API/AuthenticatorResponse +tags: + - API + - Interface + - Reference + - Web Authentication API + - Web Authn +translation_of: Web/API/AuthenticatorResponse +--- +

{{APIRef("Web Authentication API")}}{{securecontext_header}}

+ +

L'interface AuthenticatorResponse, rattachée à l'API Web Authentication, constitue l'interface de base pour les interfaces qui fournissent une racine cryptographique de confiance pour une paire de clés. Les interfaces filles contiennent des informations relatives au navigateur telles que l'origine du challenge et qui peuvent être renvoyée par {{domxref("PublicKeyCredential.response")}}.

+ +

Interfaces basées sur AuthenticatorResponse

+ +

Voici la liste des interfaces basées sur AuthenticatorResponse.

+ + + +

Propriétés

+ +
+
{{domxref("AuthenticatorResponse.clientDataJSON")}}
+
Une chaîne de caractères JSON stockée dans un {{domxref("ArrayBuffer")}} et qui représente les données du client passées à {{domxref("CredentialsContainer.create()")}} ou {{domxref("CredentialsContainer.get()")}}.
+
+ +

Méthodes

+ +

Aucune.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AuthenticatorResponse")}}

diff --git a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html deleted file mode 100644 index 3d995409bb..0000000000 --- a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: BaseAudioContext.createBiquadFilter() -slug: Web/API/BaseAudioContext/createBiquadFilter -tags: - - API - - BaseAudioContext - - Méthode - - Reference - - Web Audio - - Web Audio API - - createBiquadFilter -translation_of: Web/API/BaseAudioContext/createBiquadFilter ---- -

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

- -
-

La méthode createBiquadFilter() de l'interface {{ domxref("BaseAudioContext") }} crée un {{ domxref("BiquadFilterNode") }}, qui représente un filtre de second ordre configurable comme plusieurs types de filtres communs différents.

-
- -

Syntaxe

- -
baseAudioContext.createBiquadFilter();
- -

Retourne

- -

un {{domxref("BiquadFilterNode")}}.

- -

Exemple

- -

L'exemple suivant montre une utilisation basique d'un AudioContext pour créer un nœud de filtre Biquad. Pour un exemple fonctionnel complet, visitez notre démonstration voice-change-o-matic (et lisez de même le code source).

- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-
-//set up the different audio nodes we will use for the app
-var analyser = audioCtx.createAnalyser();
-var distortion = audioCtx.createWaveShaper();
-var gainNode = audioCtx.createGain();
-var biquadFilter = audioCtx.createBiquadFilter();
-var convolver = audioCtx.createConvolver();
-
-// connect the nodes together
-
-source = audioCtx.createMediaStreamSource(stream);
-source.connect(analyser);
-analyser.connect(distortion);
-distortion.connect(biquadFilter);
-biquadFilter.connect(convolver);
-convolver.connect(gainNode);
-gainNode.connect(audioCtx.destination);
-
-// Manipulate the Biquad filter
-
-biquadFilter.type = "lowshelf";
-biquadFilter.frequency.setValueAtTime(1000, audioCtx.currentTime);
-biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime);
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.BaseAudioContext.createBiquadFilter")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md new file mode 100644 index 0000000000..3d995409bb --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md @@ -0,0 +1,86 @@ +--- +title: BaseAudioContext.createBiquadFilter() +slug: Web/API/BaseAudioContext/createBiquadFilter +tags: + - API + - BaseAudioContext + - Méthode + - Reference + - Web Audio + - Web Audio API + - createBiquadFilter +translation_of: Web/API/BaseAudioContext/createBiquadFilter +--- +

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

+ +
+

La méthode createBiquadFilter() de l'interface {{ domxref("BaseAudioContext") }} crée un {{ domxref("BiquadFilterNode") }}, qui représente un filtre de second ordre configurable comme plusieurs types de filtres communs différents.

+
+ +

Syntaxe

+ +
baseAudioContext.createBiquadFilter();
+ +

Retourne

+ +

un {{domxref("BiquadFilterNode")}}.

+ +

Exemple

+ +

L'exemple suivant montre une utilisation basique d'un AudioContext pour créer un nœud de filtre Biquad. Pour un exemple fonctionnel complet, visitez notre démonstration voice-change-o-matic (et lisez de même le code source).

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+//set up the different audio nodes we will use for the app
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+var convolver = audioCtx.createConvolver();
+
+// connect the nodes together
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// Manipulate the Biquad filter
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.setValueAtTime(1000, audioCtx.currentTime);
+biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime);
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.BaseAudioContext.createBiquadFilter")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.html b/files/fr/web/api/baseaudiocontext/createbuffer/index.html deleted file mode 100644 index 55ca8f3ea5..0000000000 --- a/files/fr/web/api/baseaudiocontext/createbuffer/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: BaseAudioContext.createBuffer() -slug: Web/API/BaseAudioContext/createBuffer -tags: - - API - - AudioContext - - BaseAudioContext - - Method - - Reference - - Web Audio API - - createBuffer -translation_of: Web/API/BaseAudioContext/createBuffer ---- -

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

- -

La méthode createBuffer() de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli.

- -

Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}.

- -
-

Note : createBuffer() permettait de prendre des données compressées et de restituer des échantillons décodés, mais cette possibilité a été supprimée de la spécification, du fait que tout le décodage était effectué dans le thread principal, donc createBuffer() bloquait l'exécution du reste du code. La méthode asynchrone decodeAudioData() fait la même chose - prend l'audio compressé, par exemple, un fichier MP3, et vous renvoie directement un {{domxref("AudioBuffer")}} que vous pouvez ensuite faire jouer via {{domxref("AudioBufferSourceNode")}}. Pour des utilisations simples comme la lecture d'un fichier MP3, decodeAudioData() est ce que vous devriez utiliser.

-
- -

Syntaxe

- -
var tampon = baseAudioContext.createBuffer(nbDeCanaux, longueur, frequenceDEchantillonnage);
- -

Paramètres

- -
-

Note : pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire Les concepts de base de la Web Audio API de notre guide des concepts de base.

-
- -
-
nbDeCanaux
-
Un nombre entier représentant le nombre de canaux que ce tampon doit avoir. Les implémentations doivent prendre en charge un minimum de 1 canal et un maximum de 32 canaux.
-
longueur
-
Un entier représentant la taille du tampon dans les trames d'échantillons.
-
frequenceDEchantillonnage
-
La fréquence d'échantillonnage des données audio linéaires en trames d'échantillons par seconde. Une implémentation doit supporter des fréquences d'échantillonnage comprises au minimum dans la plage 22050 et 96000.
-
- -

Retourne

- -

Un {{domxref("AudioBuffer")}}.

- -

Exemples

- -

Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés :

- -
var ctxAudio = new AudioContext();
-var tampon = ctxAudio.createBuffer(2, 22050, 44100);
- -

Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un AudioContext fonctionnant à 44100Hz (très courant, la plupart des cartes son normales fonctionnent à cette fréquence), durera 0,5 seconde : 22050 trames / 44100 Hz = 0,5 seconde.

- -
var ctxAudio = new AudioContext();
-var tampon = ctxAudio.createBuffer(1, 22050, 22050);
- -

Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un AudioContext fonctionnant à 44100Hz, sera automatiquement *rééchantillonné* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde.

- -
-

Note : le rééchantillonnage audio est très similaire au redimensionnement d'une image : supposons que vous ayez une image 16 x 16, mais que vous vouliez qu'elle remplisse une zone 32x32: vous la redimensionnez (rééchantillonnez). Le résultat aura une qualité moindre (il pourra être flou ou bizarre, selon l'algorithme de redimensionnement), mais cela fonctionnera, et l'image redimensionnée prendra moins de place. L'audio rééchantillonné est exactement la même chose - vous économisez de l'espace, mais en pratique, vous ne pourrez pas reproduire correctement le contenu haute fréquence (les sons aigus).

-
- -

Examinons maintenant un exemple de createBuffer() plus complexe, dans lequel nous créons un tampon de deux secondes, le remplissons de bruit blanc, puis le reproduisons via {{domxref("AudioBufferSourceNode")}}. Le commentaire devrait clairement faire comprendre ce qui se passe. Vous pouvez également exécuter le code en direct ou regarder le source.

- -
var ctxAudio = new (window.AudioContext || window.webkitAudioContext)();
-
-// Création d'un tampon stéréo vide de trois secondes à la fréquence d'échantillonnage de l'AudioContext
-var monArrayBuffer = ctxAudio.createBuffer(2, ctxAudio.sampleRate * 3, ctxAudio.sampleRate);
-
-// Remplissage du tampon avec du bruit blanc ;
-// simplement des valeurs aléatoires entre -1,0 et 1,0
-for (var canal = 0; canal < monArrayBuffer.numberOfChannels; canal++) {
-  // Cela nous donne le ArrayBuffer qui contient effectivement les données
-  var donneesCourantes = monArrayBuffer.getChannelData(canal);
-  for (var i = 0; i < monArrayBuffer.length; i++) {
-    // Math.random() est dans [0; 1,0]
-    // l'audio doit se trouver dans [-1,0; 1,0]
-    donneesCourantes[i] = Math.random() * 2 - 1;
-  }
-}
-
-// Récupération d'un AudioBufferSourceNode.
-// C'est l'AudioNode à utiliser quand nous voulons lire un AudioBuffer
-var source = ctxAudio.createBufferSource();
-// Définir le tampon dans l'AudioBufferSourceNode
-source.buffer = monArrayBuffer;
-// Connecter l'AudioBufferSourceNode à la destination,
-// de sorte que nous puissions entendre le son
-source.connect(ctxAudio.destination);
-// Démarrer la lecture de la source
-source.start();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.BaseAudioContext.createBuffer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.md b/files/fr/web/api/baseaudiocontext/createbuffer/index.md new file mode 100644 index 0000000000..55ca8f3ea5 --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.md @@ -0,0 +1,120 @@ +--- +title: BaseAudioContext.createBuffer() +slug: Web/API/BaseAudioContext/createBuffer +tags: + - API + - AudioContext + - BaseAudioContext + - Method + - Reference + - Web Audio API + - createBuffer +translation_of: Web/API/BaseAudioContext/createBuffer +--- +

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

+ +

La méthode createBuffer() de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli.

+ +

Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}.

+ +
+

Note : createBuffer() permettait de prendre des données compressées et de restituer des échantillons décodés, mais cette possibilité a été supprimée de la spécification, du fait que tout le décodage était effectué dans le thread principal, donc createBuffer() bloquait l'exécution du reste du code. La méthode asynchrone decodeAudioData() fait la même chose - prend l'audio compressé, par exemple, un fichier MP3, et vous renvoie directement un {{domxref("AudioBuffer")}} que vous pouvez ensuite faire jouer via {{domxref("AudioBufferSourceNode")}}. Pour des utilisations simples comme la lecture d'un fichier MP3, decodeAudioData() est ce que vous devriez utiliser.

+
+ +

Syntaxe

+ +
var tampon = baseAudioContext.createBuffer(nbDeCanaux, longueur, frequenceDEchantillonnage);
+ +

Paramètres

+ +
+

Note : pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire Les concepts de base de la Web Audio API de notre guide des concepts de base.

+
+ +
+
nbDeCanaux
+
Un nombre entier représentant le nombre de canaux que ce tampon doit avoir. Les implémentations doivent prendre en charge un minimum de 1 canal et un maximum de 32 canaux.
+
longueur
+
Un entier représentant la taille du tampon dans les trames d'échantillons.
+
frequenceDEchantillonnage
+
La fréquence d'échantillonnage des données audio linéaires en trames d'échantillons par seconde. Une implémentation doit supporter des fréquences d'échantillonnage comprises au minimum dans la plage 22050 et 96000.
+
+ +

Retourne

+ +

Un {{domxref("AudioBuffer")}}.

+ +

Exemples

+ +

Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés :

+ +
var ctxAudio = new AudioContext();
+var tampon = ctxAudio.createBuffer(2, 22050, 44100);
+ +

Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un AudioContext fonctionnant à 44100Hz (très courant, la plupart des cartes son normales fonctionnent à cette fréquence), durera 0,5 seconde : 22050 trames / 44100 Hz = 0,5 seconde.

+ +
var ctxAudio = new AudioContext();
+var tampon = ctxAudio.createBuffer(1, 22050, 22050);
+ +

Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un AudioContext fonctionnant à 44100Hz, sera automatiquement *rééchantillonné* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde.

+ +
+

Note : le rééchantillonnage audio est très similaire au redimensionnement d'une image : supposons que vous ayez une image 16 x 16, mais que vous vouliez qu'elle remplisse une zone 32x32: vous la redimensionnez (rééchantillonnez). Le résultat aura une qualité moindre (il pourra être flou ou bizarre, selon l'algorithme de redimensionnement), mais cela fonctionnera, et l'image redimensionnée prendra moins de place. L'audio rééchantillonné est exactement la même chose - vous économisez de l'espace, mais en pratique, vous ne pourrez pas reproduire correctement le contenu haute fréquence (les sons aigus).

+
+ +

Examinons maintenant un exemple de createBuffer() plus complexe, dans lequel nous créons un tampon de deux secondes, le remplissons de bruit blanc, puis le reproduisons via {{domxref("AudioBufferSourceNode")}}. Le commentaire devrait clairement faire comprendre ce qui se passe. Vous pouvez également exécuter le code en direct ou regarder le source.

+ +
var ctxAudio = new (window.AudioContext || window.webkitAudioContext)();
+
+// Création d'un tampon stéréo vide de trois secondes à la fréquence d'échantillonnage de l'AudioContext
+var monArrayBuffer = ctxAudio.createBuffer(2, ctxAudio.sampleRate * 3, ctxAudio.sampleRate);
+
+// Remplissage du tampon avec du bruit blanc ;
+// simplement des valeurs aléatoires entre -1,0 et 1,0
+for (var canal = 0; canal < monArrayBuffer.numberOfChannels; canal++) {
+  // Cela nous donne le ArrayBuffer qui contient effectivement les données
+  var donneesCourantes = monArrayBuffer.getChannelData(canal);
+  for (var i = 0; i < monArrayBuffer.length; i++) {
+    // Math.random() est dans [0; 1,0]
+    // l'audio doit se trouver dans [-1,0; 1,0]
+    donneesCourantes[i] = Math.random() * 2 - 1;
+  }
+}
+
+// Récupération d'un AudioBufferSourceNode.
+// C'est l'AudioNode à utiliser quand nous voulons lire un AudioBuffer
+var source = ctxAudio.createBufferSource();
+// Définir le tampon dans l'AudioBufferSourceNode
+source.buffer = monArrayBuffer;
+// Connecter l'AudioBufferSourceNode à la destination,
+// de sorte que nous puissions entendre le son
+source.connect(ctxAudio.destination);
+// Démarrer la lecture de la source
+source.start();
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.BaseAudioContext.createBuffer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html deleted file mode 100644 index 9a9dfe08cf..0000000000 --- a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: BaseAudioContext.createBufferSource() -slug: Web/API/BaseAudioContext/createBufferSource -translation_of: Web/API/BaseAudioContext/createBufferSource ---- -

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

- -

La méthode createBufferSource() de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}.

- -

Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès.

- -

Syntaxe

- -
var source = baseAudioContext.createBufferSource();
- -

Retourne

- -

Un {{domxref("AudioBufferSourceNode")}}.

- -

Exemple

- -

Dans cet exemple, on crée un tampon de deux secondes, on le remplit avec du bruit blanc, puis on le joue via un {{ domxref("AudioBufferSourceNode") }}. Les commentaires devraient expliquer clairement ce qui se passe.

- -
-

Note : Vous pouvez également exécuter le code en direct, ou voir la source.

-
- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var button = document.querySelector('button');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
-
-pre.innerHTML = myScript.innerHTML;
-
-// Stéréo
-var channels = 2;
-// Crée un tampon stéréo vide de deux secondes au
-// taux d’échantillonage de l’AudioContext
-var frameCount = audioCtx.sampleRate * 2.0;
-
-var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
-
-button.onclick = function() {
-  // Remplit le tampon avec du bruit blanc ;
-  // simplement des valeurs aléatoires entre -1.0 et 1.0
-  for (var channel = 0; channel < channels; channel++) {
-   // Ceci nous donne l’ArrayBuffer qui contient les données
-   var nowBuffering = myArrayBuffer.getChannelData(channel);
-   for (var i = 0; i < frameCount; i++) {
-     // Math.random() est parmi [0; 1.0]
-     // audio doit être parmi [-1.0; 1.0]
-     nowBuffering[i] = Math.random() * 2 - 1;
-   }
-  }
-
-  // Obtient un AudioBufferSourceNode.
-  // C’est l’AudioNode à utiliser quand nous voulons jouer un AudioBuffer
-  var source = audioCtx.createBufferSource();
-  // renseigne l’AudioBufferSourceNode avec notre tampon
-  source.buffer = myArrayBuffer;
-  // connecte l’AudioBufferSourceNode à la
-  // destination afin qu’on puisse entendre le son
-  source.connect(audioCtx.destination);
-  // commence la lecture de la source
-  source.start();
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.BaseAudioContext.createBufferSource")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.md b/files/fr/web/api/baseaudiocontext/createbuffersource/index.md new file mode 100644 index 0000000000..9a9dfe08cf --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createbuffersource/index.md @@ -0,0 +1,93 @@ +--- +title: BaseAudioContext.createBufferSource() +slug: Web/API/BaseAudioContext/createBufferSource +translation_of: Web/API/BaseAudioContext/createBufferSource +--- +

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

+ +

La méthode createBufferSource() de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}.

+ +

Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès.

+ +

Syntaxe

+ +
var source = baseAudioContext.createBufferSource();
+ +

Retourne

+ +

Un {{domxref("AudioBufferSourceNode")}}.

+ +

Exemple

+ +

Dans cet exemple, on crée un tampon de deux secondes, on le remplit avec du bruit blanc, puis on le joue via un {{ domxref("AudioBufferSourceNode") }}. Les commentaires devraient expliquer clairement ce qui se passe.

+ +
+

Note : Vous pouvez également exécuter le code en direct, ou voir la source.

+
+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var button = document.querySelector('button');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// Stéréo
+var channels = 2;
+// Crée un tampon stéréo vide de deux secondes au
+// taux d’échantillonage de l’AudioContext
+var frameCount = audioCtx.sampleRate * 2.0;
+
+var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Remplit le tampon avec du bruit blanc ;
+  // simplement des valeurs aléatoires entre -1.0 et 1.0
+  for (var channel = 0; channel < channels; channel++) {
+   // Ceci nous donne l’ArrayBuffer qui contient les données
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i < frameCount; i++) {
+     // Math.random() est parmi [0; 1.0]
+     // audio doit être parmi [-1.0; 1.0]
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // Obtient un AudioBufferSourceNode.
+  // C’est l’AudioNode à utiliser quand nous voulons jouer un AudioBuffer
+  var source = audioCtx.createBufferSource();
+  // renseigne l’AudioBufferSourceNode avec notre tampon
+  source.buffer = myArrayBuffer;
+  // connecte l’AudioBufferSourceNode à la
+  // destination afin qu’on puisse entendre le son
+  source.connect(audioCtx.destination);
+  // commence la lecture de la source
+  source.start();
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.BaseAudioContext.createBufferSource")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.html b/files/fr/web/api/baseaudiocontext/creategain/index.html deleted file mode 100644 index 90039ecc31..0000000000 --- a/files/fr/web/api/baseaudiocontext/creategain/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: AudioContext.createGain() -slug: Web/API/BaseAudioContext/createGain -tags: - - API - - Audio - - AudioContext - - Contrôle du volume - - Méthode - - Son - - Volume - - Web Audio - - createGain -translation_of: Web/API/BaseAudioContext/createGain -original_slug: Web/API/AudioContext/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

- -

{{Compat("api.BaseAudioContext.createGain")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.md b/files/fr/web/api/baseaudiocontext/creategain/index.md new file mode 100644 index 0000000000..90039ecc31 --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/creategain/index.md @@ -0,0 +1,111 @@ +--- +title: AudioContext.createGain() +slug: Web/API/BaseAudioContext/createGain +tags: + - API + - Audio + - AudioContext + - Contrôle du volume + - Méthode + - Son + - Volume + - Web Audio + - createGain +translation_of: Web/API/BaseAudioContext/createGain +original_slug: Web/API/AudioContext/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

+ +

{{Compat("api.BaseAudioContext.createGain")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.html b/files/fr/web/api/baseaudiocontext/createpanner/index.html deleted file mode 100644 index 2c11e2a02e..0000000000 --- a/files/fr/web/api/baseaudiocontext/createpanner/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: BaseAudioContext.createPanner() -slug: Web/API/BaseAudioContext/createPanner -tags: - - API - - AudioContext - - BaseAudioContext - - Méthode - - Reference - - Web Audio - - Web Audio API - - createPanner -translation_of: Web/API/BaseAudioContext/createPanner ---- -

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

- -
-

La méthode createPanner() de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{domxref("PannerNode")}}, qui sert à spatialiser dans un environnement 3D un flux audio entrant.

-
- -

Le panner node est spatialisé en relation avec l'{{domxref("AudioListener") }} de l'AudioContext (défini par l'attribut {{domxref("AudioContext.listener") }}), qui représente la position et l'orientation de la personne écoutant le flux audio.

- -

Syntaxe

- -
baseAudioCtx.createPanner();
- -

Retourne

- -

Un {{domxref("PannerNode")}}.

- -

Exemple

- -

Dans l'exemple suivant, vous pouvez voir comment la méthode createPanner(), l'{{domxref("AudioListener")}} et le {{domxref("PannerNode")}} peuvent être utilisés pour contrôler la spatialisation d'un flux audio. Généralement, vous définirez la position dans un espace 3D que votre écouteur et votre panner (source) occupaient initialement, puis ajuster la position de l'un ou des deux au fur et à mesure de l'utilisation. Vous pourriez par exemple vouloir déplacer un personnage dans un monde de jeu vidéo, et vouloir que le rendu audio change de manière réaliste tandis que le personnage s'approche ou s'éloigne d'un diffuseur audio tel qu'une chaîne stéréo. Dans cet exemple, vous pouvez voir ceci contrôlé par les fonctions moveRight(), moveLeft(), etc., qui définissent de nouvelles valeurs pour la position du panner via la fonction PositionPanner().

- -

Pour voir une implantation complète, visitez notre exemple de panner-node (lisez le code source aussi !) – cette démonstration vous transporte dans un environnement 2.5D appelé "Pièce de métal", où vous pouvez jouer un morceau sur une boom box et vous déplacer autour de celle-ci pour entendre comment le son change !

- -

Notez la manière dont nous avons utilisé la détection de fonctionnalité pour soit donner au navigateur les nouvelles valeurs des propriétés (comme {{domxref("AudioListener.forwardX")}}) pour définir la position, etc. s'il le permet, ou d'anciennes méthodes (comme {{domxref("AudioListener.setOrientation()")}}) s'il les permet aussi mais non les nouvelles propriétés.

- -
// set up listener and panner position information
-var WIDTH = window.innerWidth;
-var HEIGHT = window.innerHeight;
-
-var xPos = Math.floor(WIDTH/2);
-var yPos = Math.floor(HEIGHT/2);
-var zPos = 295;
-
-// define other variables
-
-var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-
-var panner = audioCtx.createPanner();
-panner.panningModel = 'HRTF';
-panner.distanceModel = 'inverse';
-panner.refDistance = 1;
-panner.maxDistance = 10000;
-panner.rolloffFactor = 1;
-panner.coneInnerAngle = 360;
-panner.coneOuterAngle = 0;
-panner.coneOuterGain = 0;
-
-if(panner.orientationX) {
-  panner.orientationX.setValueAtTime(1, audioCtx.currentTime);
-  panner.orientationY.setValueAtTime(0, audioCtx.currentTime);
-  panner.orientationZ.setValueAtTime(0, audioCtx.currentTime);
-} else {
-  panner.setOrientation(1,0,0);
-}
-
-var listener = audioCtx.listener;
-
-if(listener.forwardX) {
-  listener.forwardX.setValueAtTime(0, audioCtx.currentTime);
-  listener.forwardY.setValueAtTime(0, audioCtx.currentTime);
-  listener.forwardZ.setValueAtTime(-1, audioCtx.currentTime);
-  listener.upX.setValueAtTime(0, audioCtx.currentTime);
-  listener.upY.setValueAtTime(1, audioCtx.currentTime);
-  listener.upZ.setValueAtTime(0, audioCtx.currentTime);
-} else {
-  listener.setOrientation(0,0,-1,0,1,0);
-}
-
-var source;
-
-var play = document.querySelector('.play');
-var stop = document.querySelector('.stop');
-
-var boomBox = document.querySelector('.boom-box');
-
-var listenerData = document.querySelector('.listener-data');
-var pannerData = document.querySelector('.panner-data');
-
-leftBound = (-xPos) + 50;
-rightBound = xPos - 50;
-
-xIterator = WIDTH/150;
-
-// listener will always be in the same place for this demo
-
-if(listener.positionX) {
-  listener.positionX.setValueAtTime(xPos, audioCtx.currentTime);
-  listener.positionY.setValueAtTime(yPos, audioCtx.currentTime);
-  listener.positionZ.setValueAtTime(300, audioCtx.currentTime);
-} else {
-  listener.setPosition(xPos,yPos,300);
-}
-
-listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
-
-// panner will move as the boombox graphic moves around on the screen
-function positionPanner() {
-  if(panner.positionX) {
-    panner.positionX.setValueAtTime(xPos, audioCtx.currentTime);
-    panner.positionY.setValueAtTime(yPos, audioCtx.currentTime);
-    panner.positionZ.setValueAtTime(zPos, audioCtx.currentTime);
-  } else {
-    panner.setPosition(xPos,yPos,zPos);
-  }
-  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
-}
- -
-

Note : In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -
-
- - -

{{Compat("api.BaseAudioContext.createPanner")}}

-
-
- -

Voir aussi

- - diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.md b/files/fr/web/api/baseaudiocontext/createpanner/index.md new file mode 100644 index 0000000000..2c11e2a02e --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createpanner/index.md @@ -0,0 +1,157 @@ +--- +title: BaseAudioContext.createPanner() +slug: Web/API/BaseAudioContext/createPanner +tags: + - API + - AudioContext + - BaseAudioContext + - Méthode + - Reference + - Web Audio + - Web Audio API + - createPanner +translation_of: Web/API/BaseAudioContext/createPanner +--- +

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

+ +
+

La méthode createPanner() de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{domxref("PannerNode")}}, qui sert à spatialiser dans un environnement 3D un flux audio entrant.

+
+ +

Le panner node est spatialisé en relation avec l'{{domxref("AudioListener") }} de l'AudioContext (défini par l'attribut {{domxref("AudioContext.listener") }}), qui représente la position et l'orientation de la personne écoutant le flux audio.

+ +

Syntaxe

+ +
baseAudioCtx.createPanner();
+ +

Retourne

+ +

Un {{domxref("PannerNode")}}.

+ +

Exemple

+ +

Dans l'exemple suivant, vous pouvez voir comment la méthode createPanner(), l'{{domxref("AudioListener")}} et le {{domxref("PannerNode")}} peuvent être utilisés pour contrôler la spatialisation d'un flux audio. Généralement, vous définirez la position dans un espace 3D que votre écouteur et votre panner (source) occupaient initialement, puis ajuster la position de l'un ou des deux au fur et à mesure de l'utilisation. Vous pourriez par exemple vouloir déplacer un personnage dans un monde de jeu vidéo, et vouloir que le rendu audio change de manière réaliste tandis que le personnage s'approche ou s'éloigne d'un diffuseur audio tel qu'une chaîne stéréo. Dans cet exemple, vous pouvez voir ceci contrôlé par les fonctions moveRight(), moveLeft(), etc., qui définissent de nouvelles valeurs pour la position du panner via la fonction PositionPanner().

+ +

Pour voir une implantation complète, visitez notre exemple de panner-node (lisez le code source aussi !) – cette démonstration vous transporte dans un environnement 2.5D appelé "Pièce de métal", où vous pouvez jouer un morceau sur une boom box et vous déplacer autour de celle-ci pour entendre comment le son change !

+ +

Notez la manière dont nous avons utilisé la détection de fonctionnalité pour soit donner au navigateur les nouvelles valeurs des propriétés (comme {{domxref("AudioListener.forwardX")}}) pour définir la position, etc. s'il le permet, ou d'anciennes méthodes (comme {{domxref("AudioListener.setOrientation()")}}) s'il les permet aussi mais non les nouvelles propriétés.

+ +
// set up listener and panner position information
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = Math.floor(WIDTH/2);
+var yPos = Math.floor(HEIGHT/2);
+var zPos = 295;
+
+// define other variables
+
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+panner.panningModel = 'HRTF';
+panner.distanceModel = 'inverse';
+panner.refDistance = 1;
+panner.maxDistance = 10000;
+panner.rolloffFactor = 1;
+panner.coneInnerAngle = 360;
+panner.coneOuterAngle = 0;
+panner.coneOuterGain = 0;
+
+if(panner.orientationX) {
+  panner.orientationX.setValueAtTime(1, audioCtx.currentTime);
+  panner.orientationY.setValueAtTime(0, audioCtx.currentTime);
+  panner.orientationZ.setValueAtTime(0, audioCtx.currentTime);
+} else {
+  panner.setOrientation(1,0,0);
+}
+
+var listener = audioCtx.listener;
+
+if(listener.forwardX) {
+  listener.forwardX.setValueAtTime(0, audioCtx.currentTime);
+  listener.forwardY.setValueAtTime(0, audioCtx.currentTime);
+  listener.forwardZ.setValueAtTime(-1, audioCtx.currentTime);
+  listener.upX.setValueAtTime(0, audioCtx.currentTime);
+  listener.upY.setValueAtTime(1, audioCtx.currentTime);
+  listener.upZ.setValueAtTime(0, audioCtx.currentTime);
+} else {
+  listener.setOrientation(0,0,-1,0,1,0);
+}
+
+var source;
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;
+
+// listener will always be in the same place for this demo
+
+if(listener.positionX) {
+  listener.positionX.setValueAtTime(xPos, audioCtx.currentTime);
+  listener.positionY.setValueAtTime(yPos, audioCtx.currentTime);
+  listener.positionZ.setValueAtTime(300, audioCtx.currentTime);
+} else {
+  listener.setPosition(xPos,yPos,300);
+}
+
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+
+// panner will move as the boombox graphic moves around on the screen
+function positionPanner() {
+  if(panner.positionX) {
+    panner.positionX.setValueAtTime(xPos, audioCtx.currentTime);
+    panner.positionY.setValueAtTime(yPos, audioCtx.currentTime);
+    panner.positionZ.setValueAtTime(zPos, audioCtx.currentTime);
+  } else {
+    panner.setPosition(xPos,yPos,zPos);
+  }
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}
+ +
+

Note : In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité des navigateurs

+ +
+
+ + +

{{Compat("api.BaseAudioContext.createPanner")}}

+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html deleted file mode 100644 index 5678fadb26..0000000000 --- a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: BaseAudioContext.createPeriodicWave() -slug: Web/API/BaseAudioContext/createPeriodicWave -tags: - - API - - Audio - - AudioContext - - BaseAudioContext - - Media - - Méthode - - Web Audio API - - createPeriodicWave -translation_of: Web/API/BaseAudioContext/createPeriodicWave ---- -

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

- -

La méthode createPeriodicWave() de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}.

- -

Syntaxe

- -
var onde = AudioContext.createPeriodicWave(réel, imag[, constraints]);
- -

Retour

- -

Un {{domxref("PeriodicWave")}}.

- -

Paramètres

- -
-
réel
-
Un tableau de termes cosinus (traditionnellement les termes A).
-
imag
-
Un tableau de termes sinus (traditionnellement les termes B).
-
contraintes {{optional_inline}}
-
Un objet dictionnaire spécifiant si la normalisation doit être désactivée (si non spécifié, la normalisation est activée par défaut). Il accepte une propriété : -
    -
  • disableNormalization: si réglé à true, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est false.
    • -
-
-
- -
-

Note : Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.

-
- -

Exemple

- -

L'exemple suivant illustre un usage simple de createPeriodicWave(), pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus.

- -
var réel = new Float32Array(2);
-var imag = new Float32Array(2);
-var contexteAudio = new AudioContext();
-var oscillateur = contexteAudio.createOscillator();
-
-réel[0] = 0;
-imag[0] = 0;
-réel[1] = 1;
-imag[1] = 0;
-
-var onde = contexteAudio.createPeriodicWave(réel, imag, {disableNormalization: true});
-
-oscillateur.setPeriodicWave(wave);
-
-oscillateur.connect(contexteAudio.destination);
-
-oscillateur.start();
-oscillateur.stop(2);
- -

Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale.

- -

Ici, nous créons une PeriodicWave avec deux valeurs. La première est le décalage DC, qui est la valeur à la quelle l'ocillateur démarre. 0 est une bonne valeur de départ ici car nous voulons commencer la courbe au milieu de l'intervalle [-1.0; 1.0].

- -

La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec createPeriodicWave(), vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale.

- -

Les coefficients de la transformation de Fourier doivent être données dans un ordre croissant (c'est-à-dire (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}     etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.BaseAudioContext.createPeriodicWave")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md new file mode 100644 index 0000000000..5678fadb26 --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md @@ -0,0 +1,106 @@ +--- +title: BaseAudioContext.createPeriodicWave() +slug: Web/API/BaseAudioContext/createPeriodicWave +tags: + - API + - Audio + - AudioContext + - BaseAudioContext + - Media + - Méthode + - Web Audio API + - createPeriodicWave +translation_of: Web/API/BaseAudioContext/createPeriodicWave +--- +

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

+ +

La méthode createPeriodicWave() de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}.

+ +

Syntaxe

+ +
var onde = AudioContext.createPeriodicWave(réel, imag[, constraints]);
+ +

Retour

+ +

Un {{domxref("PeriodicWave")}}.

+ +

Paramètres

+ +
+
réel
+
Un tableau de termes cosinus (traditionnellement les termes A).
+
imag
+
Un tableau de termes sinus (traditionnellement les termes B).
+
contraintes {{optional_inline}}
+
Un objet dictionnaire spécifiant si la normalisation doit être désactivée (si non spécifié, la normalisation est activée par défaut). Il accepte une propriété : +
    +
  • disableNormalization: si réglé à true, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est false.
    • +
+
+
+ +
+

Note : Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.

+
+ +

Exemple

+ +

L'exemple suivant illustre un usage simple de createPeriodicWave(), pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus.

+ +
var réel = new Float32Array(2);
+var imag = new Float32Array(2);
+var contexteAudio = new AudioContext();
+var oscillateur = contexteAudio.createOscillator();
+
+réel[0] = 0;
+imag[0] = 0;
+réel[1] = 1;
+imag[1] = 0;
+
+var onde = contexteAudio.createPeriodicWave(réel, imag, {disableNormalization: true});
+
+oscillateur.setPeriodicWave(wave);
+
+oscillateur.connect(contexteAudio.destination);
+
+oscillateur.start();
+oscillateur.stop(2);
+ +

Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale.

+ +

Ici, nous créons une PeriodicWave avec deux valeurs. La première est le décalage DC, qui est la valeur à la quelle l'ocillateur démarre. 0 est une bonne valeur de départ ici car nous voulons commencer la courbe au milieu de l'intervalle [-1.0; 1.0].

+ +

La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec createPeriodicWave(), vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale.

+ +

Les coefficients de la transformation de Fourier doivent être données dans un ordre croissant (c'est-à-dire (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}     etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.BaseAudioContext.createPeriodicWave")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/baseaudiocontext/index.html b/files/fr/web/api/baseaudiocontext/index.html deleted file mode 100644 index af570e1037..0000000000 --- a/files/fr/web/api/baseaudiocontext/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: BaseAudioContext -slug: Web/API/BaseAudioContext -tags: - - API - - Audio - - BaseAudioContext - - Interface - - Reference - - TopicStub - - Web Audio API -translation_of: Web/API/BaseAudioContext ---- -
{{APIRef("Web Audio API")}}
- -

L'interface BaseAudioContext agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement. Vous n'utiliseriez pas BaseAudioContext directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.

- -

Un BaseAudioContext peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -
-
{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}
-
Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript.
-
{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}
-
Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à 0.
-
{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}
-
Renvoie un {{domxref("AudioDestinationNode")}} représentant la destination finale de tout l'audio dans le contexte. Il peut être considéré comme le périphérique de rendu audio.
-
{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}
-
Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.
-
{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}
-
Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.
-
{{domxref("BaseAudioContext.state")}} {{readonlyInline}}
-
Renvoie l'état actuel de l'AudioContext.
-
- -

Gestionnaires d'événements

- -
-
{{domxref("BaseAudioContext.onstatechange")}}
-
Un gestionnaire d'événements qui s'exécute lorsqu'un événement de type {{event("statechange")}} s'est déclenché. Cela se produit lorsque l'état de l'AudioContext change, en raison de l'appel de l'une des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}).
-
- -

Méthodes

- -

Implémente également les méthodes de l'interface {{domxref("EventTarget")}}.

- -
-
{{domxref("BaseAudioContext.createBuffer()")}}
-
Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}.
-
{{domxref("BaseAudioContext.createConstantSource()")}}
-
Crée un objet {{domxref("ConstantSourceNode")}}, qui est une source audio qui émet en continu un signal sonore monophonique (un canal) dont les échantillons ont tous la même valeur.
-
{{domxref("BaseAudioContext.createBufferSource()")}}
-
Crée un {{domxref("AudioBufferSourceNode")}}, qui peut être utilisé pour lire et manipuler des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. Les {{ domxref("AudioBuffer") }} sont créés à l'aide de {{domxref("AudioContext.createBuffer")}} ou renvoyés par {{domxref("AudioContext.decodeAudioData")}} lorsqu'il décode avec succès une piste audio.
-
{{domxref("BaseAudioContext.createScriptProcessor()")}}
-
Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript.
-
{{domxref("BaseAudioContext.createStereoPanner()")}}
-
Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio.
-
{{domxref("BaseAudioContext.createAnalyser()")}}
-
Crée un {{domxref("AnalyserNode")}}, qui peut être utilisé pour exposer les données de temps et de fréquence audio et par exemple pour créer des visualisations de données.
-
{{domxref("BaseAudioContext.createBiquadFilter()")}}
-
Crée un {{domxref("BiquadFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres courants: passe-haut, passe-bas, passe-bande, etc.
-
{{domxref("BaseAudioContext.createChannelMerger()")}}
-
Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio.
-
{{domxref("BaseAudioContext.createChannelSplitter()")}}
-
Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément.
-
{{domxref("BaseAudioContext.createConvolver()")}}
-
Crée un {{domxref("ConvolverNode")}}, qui peut être utilisé pour appliquer des effets de convolution à votre graphique audio, par exemple un effet de réverbération.
-
{{domxref("BaseAudioContext.createDelay()")}}
-
Crée un {{domxref("DelayNode")}}, qui est utilisé pour retarder le signal audio entrant d'une certaine quantité. Ce nœud est également utile pour créer des boucles de rétroaction dans un graphique d'API Web Audio.
-
{{domxref("BaseAudioContext.createDynamicsCompressor()")}}
-
Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio.
-
{{domxref("BaseAudioContext.createGain()")}}
-
Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio.
-
{{domxref("BaseAudioContext.createIIRFilter()")}}
-
Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents.
-
{{domxref("BaseAudioContext.createOscillator()")}}
-
Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton.
-
{{domxref("BaseAudioContext.createPanner()")}}
-
Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D.
-
{{domxref("BaseAudioContext.createPeriodicWave()")}}
-
Crée un {{domxref("PeriodicWave")}}, utilisé pour définir une forme d'one périodique qui peut être utilisée pour déterminer la sortie d'un {{ domxref("OscillatorNode") }}.
-
{{domxref("BaseAudioContext.createWaveShaper()")}}
-
Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires.
-
{{domxref("BaseAudioContext.decodeAudioData()")}}
-
Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut response d'un {{domxref("XMLHttpRequest")}} après avoir défini le responseType sur arraybuffer. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio.
-
{{domxref("BaseAudioContext.resume()")}}
-
Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause.
-
- -

Exemples

- -

Déclaration de context audio de base:

- -
var audioCtx = new AudioContext();
- -

Variante de nagivateur croisé:

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-
-var oscillatorNode = audioCtx.createOscillator();
-var gainNode = audioCtx.createGain();
-var finish = audioCtx.destination;
-// etc.
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.BaseAudioContext")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/baseaudiocontext/index.md b/files/fr/web/api/baseaudiocontext/index.md new file mode 100644 index 0000000000..af570e1037 --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/index.md @@ -0,0 +1,136 @@ +--- +title: BaseAudioContext +slug: Web/API/BaseAudioContext +tags: + - API + - Audio + - BaseAudioContext + - Interface + - Reference + - TopicStub + - Web Audio API +translation_of: Web/API/BaseAudioContext +--- +
{{APIRef("Web Audio API")}}
+ +

L'interface BaseAudioContext agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement. Vous n'utiliseriez pas BaseAudioContext directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.

+ +

Un BaseAudioContext peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +
+
{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}
+
Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript.
+
{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}
+
Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à 0.
+
{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}
+
Renvoie un {{domxref("AudioDestinationNode")}} représentant la destination finale de tout l'audio dans le contexte. Il peut être considéré comme le périphérique de rendu audio.
+
{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}
+
Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.
+
{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}
+
Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.
+
{{domxref("BaseAudioContext.state")}} {{readonlyInline}}
+
Renvoie l'état actuel de l'AudioContext.
+
+ +

Gestionnaires d'événements

+ +
+
{{domxref("BaseAudioContext.onstatechange")}}
+
Un gestionnaire d'événements qui s'exécute lorsqu'un événement de type {{event("statechange")}} s'est déclenché. Cela se produit lorsque l'état de l'AudioContext change, en raison de l'appel de l'une des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}).
+
+ +

Méthodes

+ +

Implémente également les méthodes de l'interface {{domxref("EventTarget")}}.

+ +
+
{{domxref("BaseAudioContext.createBuffer()")}}
+
Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("BaseAudioContext.createConstantSource()")}}
+
Crée un objet {{domxref("ConstantSourceNode")}}, qui est une source audio qui émet en continu un signal sonore monophonique (un canal) dont les échantillons ont tous la même valeur.
+
{{domxref("BaseAudioContext.createBufferSource()")}}
+
Crée un {{domxref("AudioBufferSourceNode")}}, qui peut être utilisé pour lire et manipuler des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. Les {{ domxref("AudioBuffer") }} sont créés à l'aide de {{domxref("AudioContext.createBuffer")}} ou renvoyés par {{domxref("AudioContext.decodeAudioData")}} lorsqu'il décode avec succès une piste audio.
+
{{domxref("BaseAudioContext.createScriptProcessor()")}}
+
Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript.
+
{{domxref("BaseAudioContext.createStereoPanner()")}}
+
Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio.
+
{{domxref("BaseAudioContext.createAnalyser()")}}
+
Crée un {{domxref("AnalyserNode")}}, qui peut être utilisé pour exposer les données de temps et de fréquence audio et par exemple pour créer des visualisations de données.
+
{{domxref("BaseAudioContext.createBiquadFilter()")}}
+
Crée un {{domxref("BiquadFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres courants: passe-haut, passe-bas, passe-bande, etc.
+
{{domxref("BaseAudioContext.createChannelMerger()")}}
+
Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio.
+
{{domxref("BaseAudioContext.createChannelSplitter()")}}
+
Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément.
+
{{domxref("BaseAudioContext.createConvolver()")}}
+
Crée un {{domxref("ConvolverNode")}}, qui peut être utilisé pour appliquer des effets de convolution à votre graphique audio, par exemple un effet de réverbération.
+
{{domxref("BaseAudioContext.createDelay()")}}
+
Crée un {{domxref("DelayNode")}}, qui est utilisé pour retarder le signal audio entrant d'une certaine quantité. Ce nœud est également utile pour créer des boucles de rétroaction dans un graphique d'API Web Audio.
+
{{domxref("BaseAudioContext.createDynamicsCompressor()")}}
+
Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio.
+
{{domxref("BaseAudioContext.createGain()")}}
+
Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio.
+
{{domxref("BaseAudioContext.createIIRFilter()")}}
+
Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents.
+
{{domxref("BaseAudioContext.createOscillator()")}}
+
Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton.
+
{{domxref("BaseAudioContext.createPanner()")}}
+
Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D.
+
{{domxref("BaseAudioContext.createPeriodicWave()")}}
+
Crée un {{domxref("PeriodicWave")}}, utilisé pour définir une forme d'one périodique qui peut être utilisée pour déterminer la sortie d'un {{ domxref("OscillatorNode") }}.
+
{{domxref("BaseAudioContext.createWaveShaper()")}}
+
Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires.
+
{{domxref("BaseAudioContext.decodeAudioData()")}}
+
Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut response d'un {{domxref("XMLHttpRequest")}} après avoir défini le responseType sur arraybuffer. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio.
+
{{domxref("BaseAudioContext.resume()")}}
+
Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause.
+
+ +

Exemples

+ +

Déclaration de context audio de base:

+ +
var audioCtx = new AudioContext();
+ +

Variante de nagivateur croisé:

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.BaseAudioContext")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/battery_status_api/index.html b/files/fr/web/api/battery_status_api/index.html deleted file mode 100644 index ee8ceeb9b6..0000000000 --- a/files/fr/web/api/battery_status_api/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: API Battery Status -slug: Web/API/Battery_status_API -tags: - - API - - Aperçu - - Guide - - Obsolete -translation_of: Web/API/Battery_Status_API ---- -

{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}

- -

L'API Battery Status, souvent mentionnée sous le nom Battery API, fournit des informations sur le niveau de charge du système et permet d'envoyer des événements pour prévenir d'un changement du niveau de charge de la batterie. Cela peut être utilisé pour ajuster la consommation d'une application et la réduire pour réduire l'utilisation de la batterie lorsque son niveau de charge est bas ou encore de sauvegarder les données quand la batterie est bientôt vide.

- -

L'API Battery Status API étend l'interface {{domxref("window.navigator")}} avec la propriété {{domxref("window.navigator.battery")}}, méthode qui renvoie une promesse, résolue par l'objet {{domxref("BatteryManager")}}. Cet objet permet d'ajouter des nouveaux événements pour superviser l'état de la batterie.

- -

Exemples

- -

Dans cet exemple, on cherche à surveiller les changements, à la fois du statut de la charge (est-ce que l'équipement est branché et se recharge ou est ce que l'équipement est alimenté par sa batterie) et des changements du niveau de charge dans le temps.

- -

Cela se fait en surveillant les événements : 

- - - -
navigator.getBattery().then(function(battery) {
-  function updateAllBatteryInfo(){
-    updateChargeInfo();
-    updateLevelInfo();
-    updateChargingInfo();
-    updateDischargingInfo();
-  }
-  updateAllBatteryInfo();
-
-  battery.addEventListener('chargingchange', function(){
-    updateChargeInfo();
-  });
-  function updateChargeInfo(){
-    console.log("Battery en charge ? "
-                + (battery.charging ? "Oui" : "Non"));
-  }
-
-  battery.addEventListener('levelchange', function(){
-    updateLevelInfo();
-  });
-  function updateLevelInfo(){
-    console.log("Niveau de batterie: "
-                + battery.level * 100 + "%");
-  }
-
-  battery.addEventListener('chargingtimechange', function(){
-    updateChargingInfo();
-  });
-  function updateChargingInfo(){
-    console.log("Temps avant charge de la batterie: "
-                 + battery.chargingTime + " secondes");
-  }
-
-  battery.addEventListener('dischargingtimechange', function(){
-    updateDischargingInfo();
-  });
-  function updateDischargingInfo(){
-    console.log("Autonomie sur batterie: "
-                 + battery.dischargingTime + " secondes");
-  }
-
-});
-
- -

Voir aussi l'exemple de la spécification.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/battery_status_api/index.md b/files/fr/web/api/battery_status_api/index.md new file mode 100644 index 0000000000..ee8ceeb9b6 --- /dev/null +++ b/files/fr/web/api/battery_status_api/index.md @@ -0,0 +1,104 @@ +--- +title: API Battery Status +slug: Web/API/Battery_status_API +tags: + - API + - Aperçu + - Guide + - Obsolete +translation_of: Web/API/Battery_Status_API +--- +

{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}

+ +

L'API Battery Status, souvent mentionnée sous le nom Battery API, fournit des informations sur le niveau de charge du système et permet d'envoyer des événements pour prévenir d'un changement du niveau de charge de la batterie. Cela peut être utilisé pour ajuster la consommation d'une application et la réduire pour réduire l'utilisation de la batterie lorsque son niveau de charge est bas ou encore de sauvegarder les données quand la batterie est bientôt vide.

+ +

L'API Battery Status API étend l'interface {{domxref("window.navigator")}} avec la propriété {{domxref("window.navigator.battery")}}, méthode qui renvoie une promesse, résolue par l'objet {{domxref("BatteryManager")}}. Cet objet permet d'ajouter des nouveaux événements pour superviser l'état de la batterie.

+ +

Exemples

+ +

Dans cet exemple, on cherche à surveiller les changements, à la fois du statut de la charge (est-ce que l'équipement est branché et se recharge ou est ce que l'équipement est alimenté par sa batterie) et des changements du niveau de charge dans le temps.

+ +

Cela se fait en surveillant les événements : 

+ + + +
navigator.getBattery().then(function(battery) {
+  function updateAllBatteryInfo(){
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
+
+  battery.addEventListener('chargingchange', function(){
+    updateChargeInfo();
+  });
+  function updateChargeInfo(){
+    console.log("Battery en charge ? "
+                + (battery.charging ? "Oui" : "Non"));
+  }
+
+  battery.addEventListener('levelchange', function(){
+    updateLevelInfo();
+  });
+  function updateLevelInfo(){
+    console.log("Niveau de batterie: "
+                + battery.level * 100 + "%");
+  }
+
+  battery.addEventListener('chargingtimechange', function(){
+    updateChargingInfo();
+  });
+  function updateChargingInfo(){
+    console.log("Temps avant charge de la batterie: "
+                 + battery.chargingTime + " secondes");
+  }
+
+  battery.addEventListener('dischargingtimechange', function(){
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo(){
+    console.log("Autonomie sur batterie: "
+                 + battery.dischargingTime + " secondes");
+  }
+
+});
+
+ +

Voir aussi l'exemple de la spécification.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.BatteryManager")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/batterymanager/charging/index.html b/files/fr/web/api/batterymanager/charging/index.html deleted file mode 100644 index 7eaad0d9f8..0000000000 --- a/files/fr/web/api/batterymanager/charging/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: BatteryManager.charging -slug: Web/API/BatteryManager/charging -translation_of: Web/API/BatteryManager/charging ---- -
{{obsolete_header}}
- -
{{APIRef("Battery API")}}
- -

Une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée.

- -

Syntax

- -
var charging = battery.charging
- -

charging indique si battery, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur true. Sinon, dans le cas de la décharge, la variable a la valeurvaux false.

- -

Exemple

- -

Code HTML

- -
<div id="charging">(&ecirc;tat de charge inconnu)</div>
- -

Code JavaScript

- -
navigator.getBattery().then(function(battery) {
-
-    var charging = battery.charging;
-
-    document.querySelector('#charging').textContent = charging ;
-});
- -

{{ EmbedLiveSample('Example', '100%', 30) }}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager.charging")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/batterymanager/charging/index.md b/files/fr/web/api/batterymanager/charging/index.md new file mode 100644 index 0000000000..7eaad0d9f8 --- /dev/null +++ b/files/fr/web/api/batterymanager/charging/index.md @@ -0,0 +1,63 @@ +--- +title: BatteryManager.charging +slug: Web/API/BatteryManager/charging +translation_of: Web/API/BatteryManager/charging +--- +
{{obsolete_header}}
+ +
{{APIRef("Battery API")}}
+ +

Une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée.

+ +

Syntax

+ +
var charging = battery.charging
+ +

charging indique si battery, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur true. Sinon, dans le cas de la décharge, la variable a la valeurvaux false.

+ +

Exemple

+ +

Code HTML

+ +
<div id="charging">(&ecirc;tat de charge inconnu)</div>
+ +

Code JavaScript

+ +
navigator.getBattery().then(function(battery) {
+
+    var charging = battery.charging;
+
+    document.querySelector('#charging').textContent = charging ;
+});
+ +

{{ EmbedLiveSample('Example', '100%', 30) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.BatteryManager.charging")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/batterymanager/chargingtime/index.html b/files/fr/web/api/batterymanager/chargingtime/index.html deleted file mode 100644 index 7456fdb8fd..0000000000 --- a/files/fr/web/api/batterymanager/chargingtime/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: BatteryManager.chargingTime -slug: Web/API/BatteryManager/chargingTime -translation_of: Web/API/BatteryManager/chargingTime ---- -
{{obsolete_header}}
- -

{{APIRef("Battery API")}}

- -

Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.

- -
-

Note : Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.

-
- -

Syntaxe

- -
var time = battery.chargingTime
- -

time est le temps restant en secondes jusqu'à que battery, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut Infinity.

- -

Exemple

- -

Code HTML

- -
<div id="chargingTime">(temps de charge inconnu)</div>
-
- -

Code JavaScript

- -
navigator.getBattery().then(function(battery) {
-
-   var time = battery.chargingTime;
-
-   document.querySelector('#chargingTime').textContent = battery.chargingTime;
-});
-
- -

{{ EmbedLiveSample('Example', '100%', 30) }}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager.chargingTime")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/batterymanager/chargingtime/index.md b/files/fr/web/api/batterymanager/chargingtime/index.md new file mode 100644 index 0000000000..7456fdb8fd --- /dev/null +++ b/files/fr/web/api/batterymanager/chargingtime/index.md @@ -0,0 +1,69 @@ +--- +title: BatteryManager.chargingTime +slug: Web/API/BatteryManager/chargingTime +translation_of: Web/API/BatteryManager/chargingTime +--- +
{{obsolete_header}}
+ +

{{APIRef("Battery API")}}

+ +

Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.

+ +
+

Note : Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.

+
+ +

Syntaxe

+ +
var time = battery.chargingTime
+ +

time est le temps restant en secondes jusqu'à que battery, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut Infinity.

+ +

Exemple

+ +

Code HTML

+ +
<div id="chargingTime">(temps de charge inconnu)</div>
+
+ +

Code JavaScript

+ +
navigator.getBattery().then(function(battery) {
+
+   var time = battery.chargingTime;
+
+   document.querySelector('#chargingTime').textContent = battery.chargingTime;
+});
+
+ +

{{ EmbedLiveSample('Example', '100%', 30) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.BatteryManager.chargingTime")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.html b/files/fr/web/api/batterymanager/dischargingtime/index.html deleted file mode 100644 index 8ad8ea8602..0000000000 --- a/files/fr/web/api/batterymanager/dischargingtime/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: BatteryManager.dischargingTime -slug: Web/API/BatteryManager/dischargingTime -translation_of: Web/API/BatteryManager/dischargingTime ---- -
{{obsolete_header}}
- -
{{APIRef("Battery API")}}
- -

Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.

- -
-

Note : Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.

-
- -

Syntax

- -
var time = battery.dischargingTime
- -

time est le temps restant en secondes jusqu'à que battery, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut Infinity si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant.

- -

Exemple

- -

Code HTML

- -
<div id="dischargingTime">(temps de d&eacute;charge inconnu)</div>
-
- -

Code JavaScript

- -
navigator.getBattery().then(function(battery) {
-
-    var time = battery.dischargingTime;
-
-    document.querySelector('#dischargingTime').textContent = battery.dischargingTime;
-});
-
- -

{{ EmbedLiveSample('Example', '100%', 30) }}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager.dischargingTime")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.md b/files/fr/web/api/batterymanager/dischargingtime/index.md new file mode 100644 index 0000000000..8ad8ea8602 --- /dev/null +++ b/files/fr/web/api/batterymanager/dischargingtime/index.md @@ -0,0 +1,69 @@ +--- +title: BatteryManager.dischargingTime +slug: Web/API/BatteryManager/dischargingTime +translation_of: Web/API/BatteryManager/dischargingTime +--- +
{{obsolete_header}}
+ +
{{APIRef("Battery API")}}
+ +

Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.

+ +
+

Note : Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.

+
+ +

Syntax

+ +
var time = battery.dischargingTime
+ +

time est le temps restant en secondes jusqu'à que battery, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut Infinity si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant.

+ +

Exemple

+ +

Code HTML

+ +
<div id="dischargingTime">(temps de d&eacute;charge inconnu)</div>
+
+ +

Code JavaScript

+ +
navigator.getBattery().then(function(battery) {
+
+    var time = battery.dischargingTime;
+
+    document.querySelector('#dischargingTime').textContent = battery.dischargingTime;
+});
+
+ +

{{ EmbedLiveSample('Example', '100%', 30) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.BatteryManager.dischargingTime")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/batterymanager/index.html b/files/fr/web/api/batterymanager/index.html deleted file mode 100644 index 644c04acab..0000000000 --- a/files/fr/web/api/batterymanager/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: BatteryManager -slug: Web/API/BatteryManager -tags: - - Mobile - - batterie - - gestion - - niveau -translation_of: Web/API/BatteryManager ---- -

{{ApiRef()}}

- -

Sommaire

- -

L'interface BatteryManager fournit des moyens pour obtenir des informations sur le niveau de charge de la batterie du système.

- -

La propriété {{domxref ("window.navigator.battery", "navigator.battery")}} retourne une instance de l'interface BatteryManager que vous pouvez utiliser pour interagir avec l'API d'état de la batterie.

- -

Propriétés

- -
-
{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}
-
Un Boolean indiquant si oui ou non la batterie est actuellement en cours de charge.
-
{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}
-
Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement chargée, ou 0 si la batterie est complètement chargée.
-
{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}
-
Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement déchargée et le système suspendu.
-
{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}
-
Un nombre qui représente le niveau de charge de la batterie du système adapté à une valeur comprise entre 0.0 et 1.0.
-
- -

Gestionnaires d'Evenements

- -
-
{{domxref("BatteryManager.onchargingchange")}}
-
Un gestionnaire pour le changement de la présence ou non du chargeur.
-
{{domxref("BatteryManager.onchargingtimechange")}}
-
Un gestionnaire pour la mise à jour du temps de charge
-
{{domxref("BatteryManager.ondischargingtimechange")}}
-
Un gestionnaire pour la mise à jour du temps de décharge
-
{{domxref("BatteryManager.onlevelchange")}}
-
Un gestionnaire pour la mise à jour pour les changement du niveau de batterie
-
- -

Méthodes

- -

Hérite de {{domxref("EventTarget")}}:

- -

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Battery API')}}{{Spec2('Battery API')}}Spécification initale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/batterymanager/index.md b/files/fr/web/api/batterymanager/index.md new file mode 100644 index 0000000000..644c04acab --- /dev/null +++ b/files/fr/web/api/batterymanager/index.md @@ -0,0 +1,79 @@ +--- +title: BatteryManager +slug: Web/API/BatteryManager +tags: + - Mobile + - batterie + - gestion + - niveau +translation_of: Web/API/BatteryManager +--- +

{{ApiRef()}}

+ +

Sommaire

+ +

L'interface BatteryManager fournit des moyens pour obtenir des informations sur le niveau de charge de la batterie du système.

+ +

La propriété {{domxref ("window.navigator.battery", "navigator.battery")}} retourne une instance de l'interface BatteryManager que vous pouvez utiliser pour interagir avec l'API d'état de la batterie.

+ +

Propriétés

+ +
+
{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}
+
Un Boolean indiquant si oui ou non la batterie est actuellement en cours de charge.
+
{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}
+
Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement chargée, ou 0 si la batterie est complètement chargée.
+
{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}
+
Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement déchargée et le système suspendu.
+
{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}
+
Un nombre qui représente le niveau de charge de la batterie du système adapté à une valeur comprise entre 0.0 et 1.0.
+
+ +

Gestionnaires d'Evenements

+ +
+
{{domxref("BatteryManager.onchargingchange")}}
+
Un gestionnaire pour le changement de la présence ou non du chargeur.
+
{{domxref("BatteryManager.onchargingtimechange")}}
+
Un gestionnaire pour la mise à jour du temps de charge
+
{{domxref("BatteryManager.ondischargingtimechange")}}
+
Un gestionnaire pour la mise à jour du temps de décharge
+
{{domxref("BatteryManager.onlevelchange")}}
+
Un gestionnaire pour la mise à jour pour les changement du niveau de batterie
+
+ +

Méthodes

+ +

Hérite de {{domxref("EventTarget")}}:

+ +

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Battery API')}}{{Spec2('Battery API')}}Spécification initale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.BatteryManager")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/batterymanager/level/index.html b/files/fr/web/api/batterymanager/level/index.html deleted file mode 100644 index 30fb39da87..0000000000 --- a/files/fr/web/api/batterymanager/level/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: BatteryManager.level -slug: Web/API/BatteryManager/level -translation_of: Web/API/BatteryManager/level ---- -
{{obsolete_header}}
- -
{{APIRef("Battery API")}}
- -

Indique le niveau de charge de la batterie en tant que valeur comprise entre 0.0 (déchargée) et 1.0 (rechargée).

- -

Syntaxe

- -
var level = battery.level
- -

level est un nombre représentant le niveau de charge de la batterie en tant que valeur comprise entre 0.0 et 1.0. Une veleur de 0.0 signifie que battery, qui est un objet de type {{domxref("BatteryManager")}}, est vide, et que le système est sur le point d'être désactivé. Une valeur de 1.0 signifie que la batterie est pleine.

- -

La valeur 1.0 est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie.

- -

Exemple

- -

Code HTML

- -
<div id="level">(niveau de batterie inconnu)</div>
-
- -

Code JavaScript

- -
navigator.getBattery().then(function(battery) {
-
-    var level = battery.level;
-
-    document.querySelector('#level').textContent = level;
-});
-
- -

{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager.level")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/batterymanager/level/index.md b/files/fr/web/api/batterymanager/level/index.md new file mode 100644 index 0000000000..30fb39da87 --- /dev/null +++ b/files/fr/web/api/batterymanager/level/index.md @@ -0,0 +1,67 @@ +--- +title: BatteryManager.level +slug: Web/API/BatteryManager/level +translation_of: Web/API/BatteryManager/level +--- +
{{obsolete_header}}
+ +
{{APIRef("Battery API")}}
+ +

Indique le niveau de charge de la batterie en tant que valeur comprise entre 0.0 (déchargée) et 1.0 (rechargée).

+ +

Syntaxe

+ +
var level = battery.level
+ +

level est un nombre représentant le niveau de charge de la batterie en tant que valeur comprise entre 0.0 et 1.0. Une veleur de 0.0 signifie que battery, qui est un objet de type {{domxref("BatteryManager")}}, est vide, et que le système est sur le point d'être désactivé. Une valeur de 1.0 signifie que la batterie est pleine.

+ +

La valeur 1.0 est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie.

+ +

Exemple

+ +

Code HTML

+ +
<div id="level">(niveau de batterie inconnu)</div>
+
+ +

Code JavaScript

+ +
navigator.getBattery().then(function(battery) {
+
+    var level = battery.level;
+
+    document.querySelector('#level').textContent = level;
+});
+
+ +

{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.BatteryManager.level")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/beforeunloadevent/index.html b/files/fr/web/api/beforeunloadevent/index.html deleted file mode 100644 index 4a74d1689d..0000000000 --- a/files/fr/web/api/beforeunloadevent/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: BeforeUnloadEvent -slug: Web/API/BeforeUnloadEvent -tags: - - API - - Reference -translation_of: Web/API/BeforeUnloadEvent ---- -

{{APIRef}}

- -

L'évènement beforeunload est déclenché quand la fenêtre, le document et ses ressources sont sur le point d'être déchargées.

- -

Si une chaine non vide est assignée à la propriété returnValue de l'évènement, une boite de confirmation apparait pour demander à l'utilisateur de valider le changement d'adresse (voir les exemples ci-dessous). Si aucune valeur n'est fournise, l'évènement est traité silencieusement. Certaines implantations ne demandent confirmation que si le cadre ou tout cadre embarqué reçoit une action utilisateur. Voir {{anch("Browser compatibility")}} pour plus d'informations.

- -

{{InheritanceDiagram(600, 120)}}

- - - - - - - - - - - - - - - - - - - - -
BouillonneNo
AnnulableYes
CiblesdefaultView
Interface{{domxref("Event")}}
- -

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 la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme :

- -
window.addEventListener("beforeunload", function (e) {
-  var confirmationMessage = "\o/";
-
-  (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
-  return confirmationMessage;                                /* Safari, Chrome, and other
-                                                              * WebKit-derived browsers */
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}{{Spec2("HTML WHATWG")}}Définition initiale
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.BeforeUnloadEvent")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/beforeunloadevent/index.md b/files/fr/web/api/beforeunloadevent/index.md new file mode 100644 index 0000000000..4a74d1689d --- /dev/null +++ b/files/fr/web/api/beforeunloadevent/index.md @@ -0,0 +1,93 @@ +--- +title: BeforeUnloadEvent +slug: Web/API/BeforeUnloadEvent +tags: + - API + - Reference +translation_of: Web/API/BeforeUnloadEvent +--- +

{{APIRef}}

+ +

L'évènement beforeunload est déclenché quand la fenêtre, le document et ses ressources sont sur le point d'être déchargées.

+ +

Si une chaine non vide est assignée à la propriété returnValue de l'évènement, une boite de confirmation apparait pour demander à l'utilisateur de valider le changement d'adresse (voir les exemples ci-dessous). Si aucune valeur n'est fournise, l'évènement est traité silencieusement. Certaines implantations ne demandent confirmation que si le cadre ou tout cadre embarqué reçoit une action utilisateur. Voir {{anch("Browser compatibility")}} pour plus d'informations.

+ +

{{InheritanceDiagram(600, 120)}}

+ + + + + + + + + + + + + + + + + + + + +
BouillonneNo
AnnulableYes
CiblesdefaultView
Interface{{domxref("Event")}}
+ +

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 la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme :

+ +
window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
+  return confirmationMessage;                                /* Safari, Chrome, and other
+                                                              * WebKit-derived browsers */
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}{{Spec2("HTML WHATWG")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.BeforeUnloadEvent")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/biquadfilternode/frequency/index.html b/files/fr/web/api/biquadfilternode/frequency/index.html deleted file mode 100644 index 508cf54cf8..0000000000 --- a/files/fr/web/api/biquadfilternode/frequency/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: BiquadFilterNode.frequency -slug: Web/API/BiquadFilterNode/frequency -translation_of: Web/API/BiquadFilterNode/frequency ---- -

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

- -
-

La propriété frequency de l'interface {{ domxref("BiquadFilterNode") }} est un  {{domxref("AudioParam")}} de type k-rate : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz).

- -

Sa valeur par défaut est de 350 avec une portée nominale de 10 à la fréquence de Nyquist, qui est la moitié de la fréquence d'échantillonnage.

-
- -

Syntax

- -
var contexteAudio = new AudioContext();
-var filtreBiquad = contexteAudio.createBiquadFilter();
-filtreBiquad.frequency.value = 3000;
- -
-

Note : Bien que le AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.

-
- -

Valeur

- -

Un {{domxref("AudioParam")}}.

- -

Exemple

- -

L'exemple suivant montre l'utilisation basique d'un AudioContext pour créer un filtre Biquad. Pour un exemple complet, consultez notre démo voice-change-o-matic (et son code source).

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-
-// mise en place des différents noeuds audio que nous utiliserons par la suite
-var analyseur = contexteAudio.createAnalyser();
-var distortion = contexteAudio.createWaveShaper();
-var noeudGain = contexteAudio.createGain();
-var filtreBiquad = contexteAudio.createBiquadFilter();
-var convolution = contexteAudio.createConvolver();
-
-// connecte les noeuds ensemble
-
-source = audioCtx.createMediaStreamSource(stream);
-source.connect(analyseur);
-analyseur.connect(distortion);
-distortion.connect(filtreBiquad);
-biquadFilter.connect(convolution);
-convolution.connect(noeudGain);
-noeudGain.connect(contexteAudio.destination);
-
-// manipule le filtre Biquad
-
-filtreBiquad.type = "lowshelf";
-filtreBiquad.frequency.value = 1000;
-filtreBiquad.gain.value = 25;
-
- -

Spécification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -
{{Compat("api.BiquadFilterNode.frequency")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/biquadfilternode/frequency/index.md b/files/fr/web/api/biquadfilternode/frequency/index.md new file mode 100644 index 0000000000..508cf54cf8 --- /dev/null +++ b/files/fr/web/api/biquadfilternode/frequency/index.md @@ -0,0 +1,83 @@ +--- +title: BiquadFilterNode.frequency +slug: Web/API/BiquadFilterNode/frequency +translation_of: Web/API/BiquadFilterNode/frequency +--- +

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

+ +
+

La propriété frequency de l'interface {{ domxref("BiquadFilterNode") }} est un  {{domxref("AudioParam")}} de type k-rate : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz).

+ +

Sa valeur par défaut est de 350 avec une portée nominale de 10 à la fréquence de Nyquist, qui est la moitié de la fréquence d'échantillonnage.

+
+ +

Syntax

+ +
var contexteAudio = new AudioContext();
+var filtreBiquad = contexteAudio.createBiquadFilter();
+filtreBiquad.frequency.value = 3000;
+ +
+

Note : Bien que le AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.

+
+ +

Valeur

+ +

Un {{domxref("AudioParam")}}.

+ +

Exemple

+ +

L'exemple suivant montre l'utilisation basique d'un AudioContext pour créer un filtre Biquad. Pour un exemple complet, consultez notre démo voice-change-o-matic (et son code source).

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+
+// mise en place des différents noeuds audio que nous utiliserons par la suite
+var analyseur = contexteAudio.createAnalyser();
+var distortion = contexteAudio.createWaveShaper();
+var noeudGain = contexteAudio.createGain();
+var filtreBiquad = contexteAudio.createBiquadFilter();
+var convolution = contexteAudio.createConvolver();
+
+// connecte les noeuds ensemble
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyseur);
+analyseur.connect(distortion);
+distortion.connect(filtreBiquad);
+biquadFilter.connect(convolution);
+convolution.connect(noeudGain);
+noeudGain.connect(contexteAudio.destination);
+
+// manipule le filtre Biquad
+
+filtreBiquad.type = "lowshelf";
+filtreBiquad.frequency.value = 1000;
+filtreBiquad.gain.value = 25;
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +
{{Compat("api.BiquadFilterNode.frequency")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/biquadfilternode/index.html b/files/fr/web/api/biquadfilternode/index.html deleted file mode 100644 index f5215ba3a6..0000000000 --- a/files/fr/web/api/biquadfilternode/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: BiquadFilterNode -slug: Web/API/BiquadFilterNode -tags: - - API - - Experimental - - Reference - - Web Audio API -translation_of: Web/API/BiquadFilterNode ---- -

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

- -

L'interface BiquadFilterNode représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un BiquadFilterNode a toujours exactement une entrée et une sortie.

- - - - - - - - - - - - - - - - - - - - - - - - -
Nombre d'entrées1
Nombre de sorties1
Mode de comptage des canaux"max"
Nombre de canaux2 (pas utilisés dans le mode de comptage par défaut)
Interprétation du canal"speakers"
- -

Constructeur

- -
-
{{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}}
-
Crée une nouvelle instance d'un objet  BiquadFilterNode.
-
- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

- -
-
{{domxref("BiquadFilterNode.frequency")}}
-
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz.
-
{{domxref("BiquadFilterNode.detune")}}
-
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en cents.
-
{{domxref("BiquadFilterNode.Q")}}
-
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant un facteur Q, ou facteur de qualité.
-
{{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}
-
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant le gain utilisé dans l'algorithme de filtrage.
-
{{domxref("BiquadFilterNode.type")}}
-

Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente: La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
typeDescriptionfrequencyQgain
lowpassFiltre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées.La fréquence de coupureIndique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est hautNon utilisé
highpassFiltre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées.La fréquence de coupureIndique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est hautNon utilisé
bandpassFiltre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées.Le centre de la gamme de fréquences.Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande.Non utilisé
lowshelfFiltre standard de dégradé de basses fréquences de second ordre. Les fréquences inférieures à la fréquence obtiennent une impulsion ou une atténuation; Les fréquences supérieurs sont inchangées.La limite supérieure des fréquences obtenant une impulsion ou une atténuationNon utiliséL'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.
highshelfFiltre standard de dégradé de hautes fréquences de second ordre. Les fréquences supérieures à la fréquence obtiennent une impulsion, ou une atténuation; Les fréquences inférieurs restent inchangéesLa limite inférieure des fréquences obtenant une impulsion ou une atténuationNon utiliséL'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.
peakingLes fréquences à l'intérieur de la gamme obtiennent une impulsion ou une atténuation; les fréquences en dehors de celle-ci sont inchangées.Le milieu de la gamme de fréquences obtiennent une impulsion, ou un attenuationContrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.
notchFiltre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un filtre passe-bande: les fréquences en dehors de la gamme de fréquences donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont atténuées.Le centre de la gamme de fréquences.Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.Non utilisé
allpassFiltre standard passe-tout du second ordre. Laisse toutes les fréquences inchangées, mais modifie le rapport de phase entre les différentes fréquences.La fréquence du retard de groupe maximal, qui est la fréquence à laquelle le centre de la transition de phase se produit.Contrôle finement la transition à la fréquence moyenne. Plus ce paramètre est grand, plus la transition est fine et large.Non utilisé
-
-
- -

Méthodes

- -

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

- -
-
{{domxref("BiquadFilterNode.getFrequencyResponse()")}}
-
A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences frequencyHz passé en paramètre.
-
- -

Exemples

- -

{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}}

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}}{{Spec2('Web Audio API')}}
- -

Compatibilité navigateurs

- -

{{Compat("api.BiquadFilterNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/biquadfilternode/index.md b/files/fr/web/api/biquadfilternode/index.md new file mode 100644 index 0000000000..f5215ba3a6 --- /dev/null +++ b/files/fr/web/api/biquadfilternode/index.md @@ -0,0 +1,173 @@ +--- +title: BiquadFilterNode +slug: Web/API/BiquadFilterNode +tags: + - API + - Experimental + - Reference + - Web Audio API +translation_of: Web/API/BiquadFilterNode +--- +

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

+ +

L'interface BiquadFilterNode représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un BiquadFilterNode a toujours exactement une entrée et une sortie.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Nombre d'entrées1
Nombre de sorties1
Mode de comptage des canaux"max"
Nombre de canaux2 (pas utilisés dans le mode de comptage par défaut)
Interprétation du canal"speakers"
+ +

Constructeur

+ +
+
{{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}}
+
Crée une nouvelle instance d'un objet  BiquadFilterNode.
+
+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("BiquadFilterNode.frequency")}}
+
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz.
+
{{domxref("BiquadFilterNode.detune")}}
+
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en cents.
+
{{domxref("BiquadFilterNode.Q")}}
+
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant un facteur Q, ou facteur de qualité.
+
{{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}
+
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant le gain utilisé dans l'algorithme de filtrage.
+
{{domxref("BiquadFilterNode.type")}}
+

Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente: La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
typeDescriptionfrequencyQgain
lowpassFiltre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées.La fréquence de coupureIndique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est hautNon utilisé
highpassFiltre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées.La fréquence de coupureIndique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est hautNon utilisé
bandpassFiltre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées.Le centre de la gamme de fréquences.Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande.Non utilisé
lowshelfFiltre standard de dégradé de basses fréquences de second ordre. Les fréquences inférieures à la fréquence obtiennent une impulsion ou une atténuation; Les fréquences supérieurs sont inchangées.La limite supérieure des fréquences obtenant une impulsion ou une atténuationNon utiliséL'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.
highshelfFiltre standard de dégradé de hautes fréquences de second ordre. Les fréquences supérieures à la fréquence obtiennent une impulsion, ou une atténuation; Les fréquences inférieurs restent inchangéesLa limite inférieure des fréquences obtenant une impulsion ou une atténuationNon utiliséL'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.
peakingLes fréquences à l'intérieur de la gamme obtiennent une impulsion ou une atténuation; les fréquences en dehors de celle-ci sont inchangées.Le milieu de la gamme de fréquences obtiennent une impulsion, ou un attenuationContrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.
notchFiltre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un filtre passe-bande: les fréquences en dehors de la gamme de fréquences donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont atténuées.Le centre de la gamme de fréquences.Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.Non utilisé
allpassFiltre standard passe-tout du second ordre. Laisse toutes les fréquences inchangées, mais modifie le rapport de phase entre les différentes fréquences.La fréquence du retard de groupe maximal, qui est la fréquence à laquelle le centre de la transition de phase se produit.Contrôle finement la transition à la fréquence moyenne. Plus ce paramètre est grand, plus la transition est fine et large.Non utilisé
+
+
+ +

Méthodes

+ +

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("BiquadFilterNode.getFrequencyResponse()")}}
+
A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences frequencyHz passé en paramètre.
+
+ +

Exemples

+ +

{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}}

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité navigateurs

+ +

{{Compat("api.BiquadFilterNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/blob/blob/index.html b/files/fr/web/api/blob/blob/index.html deleted file mode 100644 index eb08cd3667..0000000000 --- a/files/fr/web/api/blob/blob/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Blob() -slug: Web/API/Blob/Blob -tags: - - API - - Blob - - Constructeur - - Experimental - - File API - - Reference -translation_of: Web/API/Blob/Blob ---- -
{{APIRef("File API")}}
- -

Le constructeur Blob() retourne un nouvel objet {{domxref("Blob")}}. Le contenu d'un blob consiste en une concaténation de valeurs données dans le tableau passé en paramètre.

- -

Syntaxe

- -
var aBlob = new Blob( array)
-var aBlob = new Blob( array, options );
-
- -

Paramètres

- -
-
array
-
Un tableau ({{jsxref("Array")}}) d'objets de type {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou un mélange de tels objets qui seront insérés dans le {{domxref("Blob")}}. Les chaînes DOMString seront encodées en UTF-8.
-
options {{optional_inline}}
-
Un paramètre optionnel qui est un dictionnaire BlobPropertyBag et qui peut être utilisé pour définir les deux attributs suivants : -
    -
  • type : cet attribut représente le type MIME du contenu du tableau qui sera inséré dans le blob. La valeur par défaut pour cette propriété est la chaîne vide "".
    • -
  • endings : cet attribut spécifie la façon dont les chaînes qui contiennent des sauts de lignes (\n) doivent être retranscrites. Il peut prendre l'une de ces valeurs : -
      -
    • "native" indiquera que les caractères de fin doivent être adaptés pour correspondre à ceux utilisés par le système d'exploitation
      • -
    • "transparent" indiquera que les fin de lignes sont stockées telles quelles dans le blob (aucune modification).
      • -
    - La valeur par défaut pour cet attribut est "transparent". {{non-standard_inline}}
    • -
-
-
- -

Exemples

- -
// Un tableau qui contient une seule DOMString
-var aFileParts = ['<a id="a"><b id="b">Coucou :) !</b></a>'];
-
-// Le blob
-var oMyBlob = new Blob(aFileParts, {type : 'text/html'});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Blob.Blob")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/blob/blob/index.md b/files/fr/web/api/blob/blob/index.md new file mode 100644 index 0000000000..eb08cd3667 --- /dev/null +++ b/files/fr/web/api/blob/blob/index.md @@ -0,0 +1,77 @@ +--- +title: Blob() +slug: Web/API/Blob/Blob +tags: + - API + - Blob + - Constructeur + - Experimental + - File API + - Reference +translation_of: Web/API/Blob/Blob +--- +
{{APIRef("File API")}}
+ +

Le constructeur Blob() retourne un nouvel objet {{domxref("Blob")}}. Le contenu d'un blob consiste en une concaténation de valeurs données dans le tableau passé en paramètre.

+ +

Syntaxe

+ +
var aBlob = new Blob( array)
+var aBlob = new Blob( array, options );
+
+ +

Paramètres

+ +
+
array
+
Un tableau ({{jsxref("Array")}}) d'objets de type {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou un mélange de tels objets qui seront insérés dans le {{domxref("Blob")}}. Les chaînes DOMString seront encodées en UTF-8.
+
options {{optional_inline}}
+
Un paramètre optionnel qui est un dictionnaire BlobPropertyBag et qui peut être utilisé pour définir les deux attributs suivants : +
    +
  • type : cet attribut représente le type MIME du contenu du tableau qui sera inséré dans le blob. La valeur par défaut pour cette propriété est la chaîne vide "".
    • +
  • endings : cet attribut spécifie la façon dont les chaînes qui contiennent des sauts de lignes (\n) doivent être retranscrites. Il peut prendre l'une de ces valeurs : +
      +
    • "native" indiquera que les caractères de fin doivent être adaptés pour correspondre à ceux utilisés par le système d'exploitation
      • +
    • "transparent" indiquera que les fin de lignes sont stockées telles quelles dans le blob (aucune modification).
      • +
    + La valeur par défaut pour cet attribut est "transparent". {{non-standard_inline}}
    • +
+
+
+ +

Exemples

+ +
// Un tableau qui contient une seule DOMString
+var aFileParts = ['<a id="a"><b id="b">Coucou :) !</b></a>'];
+
+// Le blob
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Blob.Blob")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/blob/index.html b/files/fr/web/api/blob/index.html deleted file mode 100644 index 6cf6467846..0000000000 --- a/files/fr/web/api/blob/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Blob -slug: Web/API/Blob -tags: - - API - - Référence(2) - - WebAPI -translation_of: Web/API/Blob ---- -
{{APIRef("File API")}}
- -

Un objet Blob représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les blobs (pour Binary Large Objects) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface Blob et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur.

- -

Pour construire un Blob à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un Blob à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}.

- -

Les API qui acceptent des objets Blob sont également listées sur la documentation de {{domxref("File")}}.

- -
-

Note : La méthode slice() utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur début + longueur qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob.

-
- -
-

Note : La méthode slice() doit être utilisée avec certains préfixes sur certaines versions de navigateurs : blob.mozSlice() pour Firefox 12 et antérieur, blob.webkitSlice() dans Safari. Un ancienne version de slice() sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de blob.mozSlice() a été abandonnée avec Firefox 30.

-
- -

Constructeur

- -
-
{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}
-
Ce constructeur renvoie un nouvel objet Blob qui contient la concaténation des valeurs du tableau passé en paramètre.
-
- -

Propriétés

- -
-
{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}
-
Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus.
-
{{domxref("Blob.size")}} {{readonlyinline}}
-
La taille des données contenues dans l'objet Blob, exprimée en octets.
-
{{domxref("Blob.type")}} {{readonlyinline}}
-
Une chaîne de caractères qui indique le type MIME des données contenues dans le Blob. Si le type est inconnu, la chaîne de caractères est vide.
-
- -

Méthodes

- -
-
{{domxref("Blob.close()")}} {{experimental_inline}}
-
Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes.
-
{{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}}
-
Cette méthode renvoie un nouvel objet Blob qui contient les données dans le fragment du Blob source entre début et fin.
-
- -

Exemples

- -

Utilisation du constructeur Blob

- -

Le constructeur {{domxref("Blob.Blob", "Blob()")}} permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères :

- -
var debug = {coucou: "monde"};
-var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
- -

Créer une URL de données vers un tableau typé

- -
var typedArray = GetTheTypedArraySomehow();
-
-// On ajoute un type MIME pertinent
-var blob = new Blob([typedArray], {type: 'application/octet-binary'});
-var url = URL.createObjectURL(blob);
-
-// url ressemblera à :
-//   blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
-
-// désormais on peut utiliser l'URL dans tout
-// contexte qui utilise des URL (img.src par
-// exemple)
-
- -

Extraire des données à partir d'un blob

- -

La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("FileReader")}}. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé.

- -
var reader = new FileReader();
-reader.addEventListener("loadend", function() {
-   // reader.result contient le contenu du
-   // blob sous la forme d'un tableau typé
-});
-reader.readAsArrayBuffer(blob);
- -

En utilisant d'autres méthodes de {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Blob")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/blob/index.md b/files/fr/web/api/blob/index.md new file mode 100644 index 0000000000..6cf6467846 --- /dev/null +++ b/files/fr/web/api/blob/index.md @@ -0,0 +1,119 @@ +--- +title: Blob +slug: Web/API/Blob +tags: + - API + - Référence(2) + - WebAPI +translation_of: Web/API/Blob +--- +
{{APIRef("File API")}}
+ +

Un objet Blob représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les blobs (pour Binary Large Objects) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface Blob et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur.

+ +

Pour construire un Blob à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un Blob à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}.

+ +

Les API qui acceptent des objets Blob sont également listées sur la documentation de {{domxref("File")}}.

+ +
+

Note : La méthode slice() utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur début + longueur qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob.

+
+ +
+

Note : La méthode slice() doit être utilisée avec certains préfixes sur certaines versions de navigateurs : blob.mozSlice() pour Firefox 12 et antérieur, blob.webkitSlice() dans Safari. Un ancienne version de slice() sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de blob.mozSlice() a été abandonnée avec Firefox 30.

+
+ +

Constructeur

+ +
+
{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}
+
Ce constructeur renvoie un nouvel objet Blob qui contient la concaténation des valeurs du tableau passé en paramètre.
+
+ +

Propriétés

+ +
+
{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}
+
Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus.
+
{{domxref("Blob.size")}} {{readonlyinline}}
+
La taille des données contenues dans l'objet Blob, exprimée en octets.
+
{{domxref("Blob.type")}} {{readonlyinline}}
+
Une chaîne de caractères qui indique le type MIME des données contenues dans le Blob. Si le type est inconnu, la chaîne de caractères est vide.
+
+ +

Méthodes

+ +
+
{{domxref("Blob.close()")}} {{experimental_inline}}
+
Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes.
+
{{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}}
+
Cette méthode renvoie un nouvel objet Blob qui contient les données dans le fragment du Blob source entre début et fin.
+
+ +

Exemples

+ +

Utilisation du constructeur Blob

+ +

Le constructeur {{domxref("Blob.Blob", "Blob()")}} permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères :

+ +
var debug = {coucou: "monde"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
+ +

Créer une URL de données vers un tableau typé

+ +
var typedArray = GetTheTypedArraySomehow();
+
+// On ajoute un type MIME pertinent
+var blob = new Blob([typedArray], {type: 'application/octet-binary'});
+var url = URL.createObjectURL(blob);
+
+// url ressemblera à :
+//   blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+
+// désormais on peut utiliser l'URL dans tout
+// contexte qui utilise des URL (img.src par
+// exemple)
+
+ +

Extraire des données à partir d'un blob

+ +

La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("FileReader")}}. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé.

+ +
var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contient le contenu du
+   // blob sous la forme d'un tableau typé
+});
+reader.readAsArrayBuffer(blob);
+ +

En utilisant d'autres méthodes de {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Blob")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/blob/size/index.html b/files/fr/web/api/blob/size/index.html deleted file mode 100644 index b82751abd0..0000000000 --- a/files/fr/web/api/blob/size/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: File.fileSize -slug: Web/API/Blob/size -tags: - - API - - DOM - - Fichier - - Propriétés -translation_of: Web/API/File/fileSize -original_slug: Web/API/File/fileSize ---- -

{{APIRef("File API") }}{{non-standard_header}}

- -

{{obsolete_header(7.0)}}

- -

Résumé

- -

Renvoie la taille du fichier en octets.

- -
-

Note : Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.

-
- -

Syntaxe

- -
var size = instanceOfFile.fileSize
- -

Valeur

- -

Un nombre.

- -

Spécification

- -

Ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/api/blob/size/index.md b/files/fr/web/api/blob/size/index.md new file mode 100644 index 0000000000..b82751abd0 --- /dev/null +++ b/files/fr/web/api/blob/size/index.md @@ -0,0 +1,40 @@ +--- +title: File.fileSize +slug: Web/API/Blob/size +tags: + - API + - DOM + - Fichier + - Propriétés +translation_of: Web/API/File/fileSize +original_slug: Web/API/File/fileSize +--- +

{{APIRef("File API") }}{{non-standard_header}}

+ +

{{obsolete_header(7.0)}}

+ +

Résumé

+ +

Renvoie la taille du fichier en octets.

+ +
+

Note : Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.

+
+ +

Syntaxe

+ +
var size = instanceOfFile.fileSize
+ +

Valeur

+ +

Un nombre.

+ +

Spécification

+ +

Ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/blob/type/index.html b/files/fr/web/api/blob/type/index.html deleted file mode 100644 index 8823dd1bb9..0000000000 --- a/files/fr/web/api/blob/type/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Blob.type -slug: Web/API/Blob/type -tags: - - API - - DOM - - Fichiers - - Propriété -translation_of: Web/API/Blob/type ---- -
{{APIRef("File API")}}
- -

La propriété type de l'objet Blob fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé.

- -

Syntaxe

- -
var mimetype = instanceOfFile.type
- -

Valeur

- -

Une chaîne de caractères (par exemple : "image/png").

- -

Exemple

- -
var i, fileInput, files, allowedFileTypes;
-
-// fileInput est un HTMLInputElement: <input type="file" multiple id="myfileinput">
-fileInput = document.getElementById("myfileinput");
-
-// files est un objet FileList (similaire à NodeList)
-files = fileInput.files;
-
-// notre application accepte seulement les images de type *.png, *.jpeg et *.gif
-allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
-
-for (i = 0; i < files.length; i++) {
-  // Vérifie si file.type est un type autorisé.
-  if (allowedFileTypes.indexOf(files[i].type) > -1) {
-    // le type du fichier (file) correspond à l'un des types autorisés. Faites quelque chose ici.
-  }
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
-
- - -

{{Compat("api.Blob.type")}}

-
- -

Voir aussi

-
- - diff --git a/files/fr/web/api/blob/type/index.md b/files/fr/web/api/blob/type/index.md new file mode 100644 index 0000000000..8823dd1bb9 --- /dev/null +++ b/files/fr/web/api/blob/type/index.md @@ -0,0 +1,75 @@ +--- +title: Blob.type +slug: Web/API/Blob/type +tags: + - API + - DOM + - Fichiers + - Propriété +translation_of: Web/API/Blob/type +--- +
{{APIRef("File API")}}
+ +

La propriété type de l'objet Blob fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé.

+ +

Syntaxe

+ +
var mimetype = instanceOfFile.type
+ +

Valeur

+ +

Une chaîne de caractères (par exemple : "image/png").

+ +

Exemple

+ +
var i, fileInput, files, allowedFileTypes;
+
+// fileInput est un HTMLInputElement: <input type="file" multiple id="myfileinput">
+fileInput = document.getElementById("myfileinput");
+
+// files est un objet FileList (similaire à NodeList)
+files = fileInput.files;
+
+// notre application accepte seulement les images de type *.png, *.jpeg et *.gif
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i < files.length; i++) {
+  // Vérifie si file.type est un type autorisé.
+  if (allowedFileTypes.indexOf(files[i].type) > -1) {
+    // le type du fichier (file) correspond à l'un des types autorisés. Faites quelque chose ici.
+  }
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+
+ + +

{{Compat("api.Blob.type")}}

+
+ +

Voir aussi

+
+ + diff --git a/files/fr/web/api/blobbuilder/index.html b/files/fr/web/api/blobbuilder/index.html deleted file mode 100644 index 7098c3d185..0000000000 --- a/files/fr/web/api/blobbuilder/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: BlobBuilder -slug: Web/API/BlobBuilder -tags: - - API - - DOM - - DOM Reference - - Obsolete -translation_of: Web/API/BlobBuilder ---- -

{{APIRef("File API")}}{{ obsolete_header}}

- -

L'interface BlobBuilder fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un BlobBuilder et de lui ajouter des données  en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob.

- -
-

Note: L'interface BlobBuilder est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.

-
- -

Aperçu des méthodes

- - - - - - - - - - - - - - - - - - - -
void append(in ArrayBuffer data);
void append(in Blob data);
void append(in String data, [optional] in String endings);
Blob getBlob([optional] in DOMString contentType);
File getFile(in DOMString name, [optional] in DOMString contentType);
- -

Méthodes

- -

append()

- -

Ajoute le contenu de l'objet JavaScript spécifié au {{domxref("Blob")}} en construction. Si la valeur spécifiée n'est pas un {{domxref("Blob")}}, un ArrayBuffer, ou une String, la valeur est forcée (coerced) à string avant d'être ajoutée au blob.

- -
void append(
-  in ArrayBuffer data
-);
-
-void append(
-  in Blob data
-);
-
-
-void append(
-  in String data,
-  [optional] in String endings
-);
-
- -

Paramètres

- -
-
data
-
Les données à ajouter au {{domxref("Blob")}} en construction.
-
endings
-
Spécifie comment les chaînes (strings) contenant des \n doivent être rendues. Cela peut être "transparent" (endings inchangés) ou "native" (les endings sont changés pour respecter la convention du système de fichier de l'OS de l'hôte). Par défault, la valeur est "transparent".
-
- -

getBlob()

- -

Retourne l'objet {{domxref("Blob")}} qui a été construit en utilisant les données passées en argument des différents appels à {{manch("append")}}.

- -
Blob getBlob(
-  in DOMString contentType {{optional_inline}}
-);
-
- -

Paramètres

- -
-
contentType {{optional_inline}}
-
Le type MIME des données  retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet Blob.
-
- -

Valeur de retour

- -

Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à  {{manch("append")}} depuis la création du BlobBuilder. Cela remet aussi à zéro (reset) le BlobBuilder de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge.

- -

getFile() {{non-standard_inline}}

- -

Retourne un objet {{domxref("File")}}.

- -
File getFile(
-  in DOMString name,
-  [optional] in DOMString contentType
-);
-
- -

Paramètres

- -
-
name
-
Le nom du fichier.
-
contentType {{optional_inline}}
-
Le type MIME des données  retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet File.
-
- -

Valeur deretour

- -

Un objet {{domxref("File")}}.

- -

Browser compatibility

- - - -

{{Compat("api.BlobBuilder")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/blobbuilder/index.md b/files/fr/web/api/blobbuilder/index.md new file mode 100644 index 0000000000..7098c3d185 --- /dev/null +++ b/files/fr/web/api/blobbuilder/index.md @@ -0,0 +1,126 @@ +--- +title: BlobBuilder +slug: Web/API/BlobBuilder +tags: + - API + - DOM + - DOM Reference + - Obsolete +translation_of: Web/API/BlobBuilder +--- +

{{APIRef("File API")}}{{ obsolete_header}}

+ +

L'interface BlobBuilder fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un BlobBuilder et de lui ajouter des données  en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob.

+ +
+

Note: L'interface BlobBuilder est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.

+
+ +

Aperçu des méthodes

+ + + + + + + + + + + + + + + + + + + +
void append(in ArrayBuffer data);
void append(in Blob data);
void append(in String data, [optional] in String endings);
Blob getBlob([optional] in DOMString contentType);
File getFile(in DOMString name, [optional] in DOMString contentType);
+ +

Méthodes

+ +

append()

+ +

Ajoute le contenu de l'objet JavaScript spécifié au {{domxref("Blob")}} en construction. Si la valeur spécifiée n'est pas un {{domxref("Blob")}}, un ArrayBuffer, ou une String, la valeur est forcée (coerced) à string avant d'être ajoutée au blob.

+ +
void append(
+  in ArrayBuffer data
+);
+
+void append(
+  in Blob data
+);
+
+
+void append(
+  in String data,
+  [optional] in String endings
+);
+
+ +

Paramètres

+ +
+
data
+
Les données à ajouter au {{domxref("Blob")}} en construction.
+
endings
+
Spécifie comment les chaînes (strings) contenant des \n doivent être rendues. Cela peut être "transparent" (endings inchangés) ou "native" (les endings sont changés pour respecter la convention du système de fichier de l'OS de l'hôte). Par défault, la valeur est "transparent".
+
+ +

getBlob()

+ +

Retourne l'objet {{domxref("Blob")}} qui a été construit en utilisant les données passées en argument des différents appels à {{manch("append")}}.

+ +
Blob getBlob(
+  in DOMString contentType {{optional_inline}}
+);
+
+ +

Paramètres

+ +
+
contentType {{optional_inline}}
+
Le type MIME des données  retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet Blob.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à  {{manch("append")}} depuis la création du BlobBuilder. Cela remet aussi à zéro (reset) le BlobBuilder de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge.

+ +

getFile() {{non-standard_inline}}

+ +

Retourne un objet {{domxref("File")}}.

+ +
File getFile(
+  in DOMString name,
+  [optional] in DOMString contentType
+);
+
+ +

Paramètres

+ +
+
name
+
Le nom du fichier.
+
contentType {{optional_inline}}
+
Le type MIME des données  retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet File.
+
+ +

Valeur deretour

+ +

Un objet {{domxref("File")}}.

+ +

Browser compatibility

+ + + +

{{Compat("api.BlobBuilder")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/blobevent/blobevent/index.html b/files/fr/web/api/blobevent/blobevent/index.html deleted file mode 100644 index 742af43a44..0000000000 --- a/files/fr/web/api/blobevent/blobevent/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: BlobEvent.BlobEvent() -slug: Web/API/BlobEvent/BlobEvent -tags: - - API - - Blob - - Constructeur - - DOM - - Evènement -translation_of: Web/API/BlobEvent/BlobEvent ---- -

{{APIRef("Media Capture and Streams")}}{{seeCompatTable}}

- -

Le constructeur BlobEvent() renvoie un nouvel objet {{domxref("BlobEvent")}} créé avec un {{domxref("Blob")}} associé.

- -

Syntaxe

- -
blobEvent = new BlobEvent({data: aSpecificBlob}[, timecode]);
-
- -

Arguments

- -

Le constructeur BlobEvent() hérite des arguments de {{domxref("Event.Event", "Event()")}}.

- -
-
data
-
est un {{domxref("Blob")}} associé à l'évènement.
-
timecode {{optional_inline}}
-
un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}{{Spec2('MediaStream Recording')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.BlobEvent.BlobEvent")}}

- -

Voir aussi

- - - -

 

diff --git a/files/fr/web/api/blobevent/blobevent/index.md b/files/fr/web/api/blobevent/blobevent/index.md new file mode 100644 index 0000000000..742af43a44 --- /dev/null +++ b/files/fr/web/api/blobevent/blobevent/index.md @@ -0,0 +1,61 @@ +--- +title: BlobEvent.BlobEvent() +slug: Web/API/BlobEvent/BlobEvent +tags: + - API + - Blob + - Constructeur + - DOM + - Evènement +translation_of: Web/API/BlobEvent/BlobEvent +--- +

{{APIRef("Media Capture and Streams")}}{{seeCompatTable}}

+ +

Le constructeur BlobEvent() renvoie un nouvel objet {{domxref("BlobEvent")}} créé avec un {{domxref("Blob")}} associé.

+ +

Syntaxe

+ +
blobEvent = new BlobEvent({data: aSpecificBlob}[, timecode]);
+
+ +

Arguments

+ +

Le constructeur BlobEvent() hérite des arguments de {{domxref("Event.Event", "Event()")}}.

+ +
+
data
+
est un {{domxref("Blob")}} associé à l'évènement.
+
timecode {{optional_inline}}
+
un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}{{Spec2('MediaStream Recording')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.BlobEvent.BlobEvent")}}

+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/api/blobevent/data/index.html b/files/fr/web/api/blobevent/data/index.html deleted file mode 100644 index ea9939f3bd..0000000000 --- a/files/fr/web/api/blobevent/data/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: BlobEvent.data -slug: Web/API/BlobEvent/data -tags: - - API - - Blob - - DOM - - Evènement - - Propriétés - - données -translation_of: Web/API/BlobEvent/data ---- -

{{ apiref("Media Capture and Streams") }}

- -

{{ SeeCompatTable() }}

- -

La propriété en lecture seule BlobEvent.data représente un {{domxref("Blob")}} associé à l'évènement.

- -

Syntaxe

- -
associatedBlob = BlobEvent.data
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('MediaStream Recording', '#widl-BlobEvent-data', 'BlobEvent.data')}}{{Spec2('MediaStream Recording')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.BlobEvent.data")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/blobevent/data/index.md b/files/fr/web/api/blobevent/data/index.md new file mode 100644 index 0000000000..ea9939f3bd --- /dev/null +++ b/files/fr/web/api/blobevent/data/index.md @@ -0,0 +1,50 @@ +--- +title: BlobEvent.data +slug: Web/API/BlobEvent/data +tags: + - API + - Blob + - DOM + - Evènement + - Propriétés + - données +translation_of: Web/API/BlobEvent/data +--- +

{{ apiref("Media Capture and Streams") }}

+ +

{{ SeeCompatTable() }}

+ +

La propriété en lecture seule BlobEvent.data représente un {{domxref("Blob")}} associé à l'évènement.

+ +

Syntaxe

+ +
associatedBlob = BlobEvent.data
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('MediaStream Recording', '#widl-BlobEvent-data', 'BlobEvent.data')}}{{Spec2('MediaStream Recording')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.BlobEvent.data")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/blobevent/index.html b/files/fr/web/api/blobevent/index.html deleted file mode 100644 index c0b1079569..0000000000 --- a/files/fr/web/api/blobevent/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: BlobEvent -slug: Web/API/BlobEvent -tags: - - API - - Audio - - Blob - - Interface - - Media - - MediaStream Recording - - MediaStream Recording API - - Reference - - Video - - events -translation_of: Web/API/BlobEvent ---- -
{{APIRef ("Media Capture and Streams")}}
- -

L'interface BlobEvent représente les événements associés à un {{domxref ("Blob")}}. Ces blobs sont généralement, mais pas nécessairement, associés au contenu multimédia.

- -

Constructeur

- -
-
{{domxref("BlobEvent.BlobEvent", "BlobEvent()")}}
-
Crée un événement BlobEvent avec les paramètres donnés.
-
- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("Event")}}.

- -
-
{{domxref("BlobEvent.data")}} {{readonlyInline}}
-
Un objet {{domxref("Blob")}} qui représente les données associées à l'évènement. L'évènement a été déclenché sur le {{domxref("EventTarget")}} en raison de quelque chose survenu spécifiquement sur ce {{domxref("Blob")}}.
-
{{domxref("BlobEvent.timecode")}} {{readonlyinline}}
-
{{domxref("DOMHighResTimeStamp")}} indique la différence entre l'horodatage du premier bloc de données et l'horadatage du premier bloc BlobEvent produit par cet enregistreur. On notera que le timecode du premier BlobEvent produit , n'a pas besoin d'être nul.
-
- -

Méthodes

- -

Pas de méthode spécifique ; hérite des méthodes de son parent {{domxref("Event")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}{{Spec2('MediaStream Recording')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.BlobEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/blobevent/index.md b/files/fr/web/api/blobevent/index.md new file mode 100644 index 0000000000..c0b1079569 --- /dev/null +++ b/files/fr/web/api/blobevent/index.md @@ -0,0 +1,70 @@ +--- +title: BlobEvent +slug: Web/API/BlobEvent +tags: + - API + - Audio + - Blob + - Interface + - Media + - MediaStream Recording + - MediaStream Recording API + - Reference + - Video + - events +translation_of: Web/API/BlobEvent +--- +
{{APIRef ("Media Capture and Streams")}}
+ +

L'interface BlobEvent représente les événements associés à un {{domxref ("Blob")}}. Ces blobs sont généralement, mais pas nécessairement, associés au contenu multimédia.

+ +

Constructeur

+ +
+
{{domxref("BlobEvent.BlobEvent", "BlobEvent()")}}
+
Crée un événement BlobEvent avec les paramètres donnés.
+
+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("Event")}}.

+ +
+
{{domxref("BlobEvent.data")}} {{readonlyInline}}
+
Un objet {{domxref("Blob")}} qui représente les données associées à l'évènement. L'évènement a été déclenché sur le {{domxref("EventTarget")}} en raison de quelque chose survenu spécifiquement sur ce {{domxref("Blob")}}.
+
{{domxref("BlobEvent.timecode")}} {{readonlyinline}}
+
{{domxref("DOMHighResTimeStamp")}} indique la différence entre l'horodatage du premier bloc de données et l'horadatage du premier bloc BlobEvent produit par cet enregistreur. On notera que le timecode du premier BlobEvent produit , n'a pas besoin d'être nul.
+
+ +

Méthodes

+ +

Pas de méthode spécifique ; hérite des méthodes de son parent {{domxref("Event")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}{{Spec2('MediaStream Recording')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.BlobEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/btoa/index.html b/files/fr/web/api/btoa/index.html deleted file mode 100644 index 3d4bad306e..0000000000 --- a/files/fr/web/api/btoa/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: WindowBase64.btoa() -slug: Web/API/btoa -tags: - - API - - DOM - - Méthode - - Reference - - Web - - WindowOrWorkerGlobalScope - - btoa - - chaînes - - données -translation_of: Web/API/WindowOrWorkerGlobalScope/btoa -original_slug: 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

- -

{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/btoa/index.md b/files/fr/web/api/btoa/index.md new file mode 100644 index 0000000000..3d4bad306e --- /dev/null +++ b/files/fr/web/api/btoa/index.md @@ -0,0 +1,123 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/btoa +tags: + - API + - DOM + - Méthode + - Reference + - Web + - WindowOrWorkerGlobalScope + - btoa + - chaînes + - données +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +original_slug: 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

+ +

{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/add/index.html b/files/fr/web/api/cache/add/index.html deleted file mode 100644 index 83fd3085ba..0000000000 --- a/files/fr/web/api/cache/add/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Cache.add() -slug: Web/API/Cache/add -tags: - - API - - Add - - Cache - - Experimental - - Méthode - - Reference - - Service Worker - - Service worker API - - ServiceWorker -translation_of: Web/API/Cache/add ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La méthode add() de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode add() est équivalent au code suivant :

- -
fetch(url).then(function(response) {
-  if (!response.ok) {
-    throw new TypeError('bad response status');
-  }
-  return cache.put(url, response);
-})
- -

Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement.

- -
-

Note : add() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.

-
- -

Syntaxe

- -
cache.add(request).then(function() {
-  //request a été ajoutée au cache
-});
-
- -

Paramètres

- -
-
request
-
La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL.
-
- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.

- -

Exceptions

- - - - - - - - - - - - - - -
ExceptionArrive quand
TypeError -

Le schéma d'URL n'est pas http ou https.

- -

Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une cross-origin no-cors (auquel cas le statut retourné est systématiquement 0.)

-
- -

Exemples

- -

Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources.

- -
this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.add('/sw-test/index.html');
-    })
-  );
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Cache.add")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cache/add/index.md b/files/fr/web/api/cache/add/index.md new file mode 100644 index 0000000000..83fd3085ba --- /dev/null +++ b/files/fr/web/api/cache/add/index.md @@ -0,0 +1,112 @@ +--- +title: Cache.add() +slug: Web/API/Cache/add +tags: + - API + - Add + - Cache + - Experimental + - Méthode + - Reference + - Service Worker + - Service worker API + - ServiceWorker +translation_of: Web/API/Cache/add +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode add() de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode add() est équivalent au code suivant :

+ +
fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})
+ +

Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement.

+ +
+

Note : add() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.

+
+ +

Syntaxe

+ +
cache.add(request).then(function() {
+  //request a été ajoutée au cache
+});
+
+ +

Paramètres

+ +
+
request
+
La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL.
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.

+ +

Exceptions

+ + + + + + + + + + + + + + +
ExceptionArrive quand
TypeError +

Le schéma d'URL n'est pas http ou https.

+ +

Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une cross-origin no-cors (auquel cas le statut retourné est systématiquement 0.)

+
+ +

Exemples

+ +

Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Cache.add")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/addall/index.html b/files/fr/web/api/cache/addall/index.html deleted file mode 100644 index 98f5111d78..0000000000 --- a/files/fr/web/api/cache/addall/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Cache.addAll() -slug: Web/API/Cache/addAll -tags: - - API - - Cache - - Experimental - - Méthode - - Reference - - Service Worker - - Service worker API - - ServiceWorker - - addAll -translation_of: Web/API/Cache/addAll ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La méthode addAll() de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. 

- -
-

Note : addAll() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération put() ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode addAll().

-
- -

Syntaxe

- -
cache.addAll(requests[]).then(function() {
-  //requests have been added to the cache
-});
-
- -

Paramètres

- -
-
requests
-
Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache.
-
- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.

- -

Exceptions

- - - - - - - - - - - - - - -
ExceptionArrive quand
TypeError -

Le schéma d'URL n'est pas http ou https.

- -

Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une cross-origin no-cors (auquel cas le statut retourné est systématiquement 0.)

-
- -

Exemples

- -

Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser addAll() pour y ajouter une série de ressources.

- -
this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll([
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      ]);
-    })
-  );
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Cache.addAll")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cache/addall/index.md b/files/fr/web/api/cache/addall/index.md new file mode 100644 index 0000000000..98f5111d78 --- /dev/null +++ b/files/fr/web/api/cache/addall/index.md @@ -0,0 +1,114 @@ +--- +title: Cache.addAll() +slug: Web/API/Cache/addAll +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Worker + - Service worker API + - ServiceWorker + - addAll +translation_of: Web/API/Cache/addAll +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode addAll() de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. 

+ +
+

Note : addAll() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération put() ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode addAll().

+
+ +

Syntaxe

+ +
cache.addAll(requests[]).then(function() {
+  //requests have been added to the cache
+});
+
+ +

Paramètres

+ +
+
requests
+
Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache.
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.

+ +

Exceptions

+ + + + + + + + + + + + + + +
ExceptionArrive quand
TypeError +

Le schéma d'URL n'est pas http ou https.

+ +

Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une cross-origin no-cors (auquel cas le statut retourné est systématiquement 0.)

+
+ +

Exemples

+ +

Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser addAll() pour y ajouter une série de ressources.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Cache.addAll")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/delete/index.html b/files/fr/web/api/cache/delete/index.html deleted file mode 100644 index 5100ece8c8..0000000000 --- a/files/fr/web/api/cache/delete/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Cache.delete() -slug: Web/API/Cache/delete -tags: - - API - - Cache - - Experimental - - Méthode - - Reference - - Service Workers - - ServiceWorker - - delete -translation_of: Web/API/Cache/delete ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La méthode delete() de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à true. Dans le cas contraire, la promesse est résolue à false.

- -

Syntaxe

- -
cache.delete(request,{options}).then(function(true) {
-  //your cache entry has been deleted
-});
-
- -

Paramètres

- -
-
request
-
La {{domxref("Request", "Requête")}} à supprimer.
-
options {{optional_inline}}
-
Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de delete. Les options disponibles sont : -
    -
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • -
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • -
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • -
  • cacheName: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par Cache.delete().
    • -
-
-
- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} qui est résolue à true si l'entrée de cache est supprimée, ou à false dans le cas contraire.

- -

Exemples

- -
caches.open('v1').then(function(cache) {
-  cache.delete('/images/image.png').then(function(response) {
-    someUIUpdateFunction();
-  });
-})
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.Cache.delete")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cache/delete/index.md b/files/fr/web/api/cache/delete/index.md new file mode 100644 index 0000000000..5100ece8c8 --- /dev/null +++ b/files/fr/web/api/cache/delete/index.md @@ -0,0 +1,81 @@ +--- +title: Cache.delete() +slug: Web/API/Cache/delete +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Workers + - ServiceWorker + - delete +translation_of: Web/API/Cache/delete +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode delete() de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à true. Dans le cas contraire, la promesse est résolue à false.

+ +

Syntaxe

+ +
cache.delete(request,{options}).then(function(true) {
+  //your cache entry has been deleted
+});
+
+ +

Paramètres

+ +
+
request
+
La {{domxref("Request", "Requête")}} à supprimer.
+
options {{optional_inline}}
+
Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de delete. Les options disponibles sont : +
    +
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • +
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • +
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • +
  • cacheName: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par Cache.delete().
    • +
+
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue à true si l'entrée de cache est supprimée, ou à false dans le cas contraire.

+ +

Exemples

+ +
caches.open('v1').then(function(cache) {
+  cache.delete('/images/image.png').then(function(response) {
+    someUIUpdateFunction();
+  });
+})
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.Cache.delete")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/index.html b/files/fr/web/api/cache/index.html deleted file mode 100644 index 384689d3fa..0000000000 --- a/files/fr/web/api/cache/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Cache -slug: Web/API/Cache -tags: - - API - - API Cache - - API Service worker - - Cache - - Interface - - Reference - - Service Workers - - Stockage - - hors ligne -translation_of: Web/API/Cache ---- -

{{APIRef("Service Workers API")}} {{SeeCompatTable}}

- -

L'interface Cache fournit un mécanisme de stockage pour les paires d'objets Request/Response qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface Cache est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers.

- -

Une origine peut avoir plusieurs objets nommés Cache. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet Cache spécifique et appelez ensuite l'une des méthodes Cache pour maintenir le Cache.

- -

Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir Suppression des anciens caches.

- -
-

Note : Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.

-
- -
-

Note : L'algorithme des correspondances de clés est dépendant de la valeur de l'en-tête VARY. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.

-
- -
-

Note : L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP.

-
- -

Méthodes

- -
-
{{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}.
-
{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}.
-
{{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}}
-
Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats  au cache.
-
{{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}}
-
Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné.
-
{{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}}
-
Prend à la fois une requête et sa réponse et l'ajoute au cache donné.
-
{{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}}
-
Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à true. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne false.
-
{{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}.
-
- -

Exemples

- -

Cet extrait de code provient de l'exemple de mise en cache sélective. (voir selective caching live) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par font/.

- -

Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée.

- -

Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié.

- -

Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant  court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans CURRENT_CACHES.

- -
-

Note: In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.

-
- -
var CACHE_VERSION = 1;
-
-// Shorthand identifier mapped to specific versioned cache.
-var CURRENT_CACHES = {
-  font: 'font-cache-v' + CACHE_VERSION
-};
-
-self.addEventListener('activate', function(event) {
-  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
-    return CURRENT_CACHES[key];
-  });
-
-  // Active worker won't be treated as activated until promise resolves successfully.
-  event.waitUntil(
-    caches.keys().then(function(cacheNames) {
-      return Promise.all(
-        cacheNames.map(function(cacheName) {
-          if (expectedCacheNames.indexOf(cacheName) == -1) {
-            console.log('Deleting out of date cache:', cacheName);
-
-            return caches.delete(cacheName);
-          }
-        })
-      );
-    })
-  );
-});
-
-self.addEventListener('fetch', function(event) {
-  console.log('Handling fetch event for', event.request.url);
-
-  event.respondWith(
-
-    // Opens Cache objects that start with 'font'.
-    caches.open(CURRENT_CACHES['font']).then(function(cache) {
-      return cache.match(event.request).then(function(response) {
-        if (response) {
-          console.log(' Found response in cache:', response);
-
-          return response;
-        }
-      }).catch(function(error) {
-
-        // Handles exceptions that arise from match() or fetch().
-        console.error('  Error in fetch handler:', error);
-
-        throw error;
-      });
-    })
-  );
-});
- -

Storing cookies in Caches

- -

L'API Fetch exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Cache")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cache/index.md b/files/fr/web/api/cache/index.md new file mode 100644 index 0000000000..384689d3fa --- /dev/null +++ b/files/fr/web/api/cache/index.md @@ -0,0 +1,154 @@ +--- +title: Cache +slug: Web/API/Cache +tags: + - API + - API Cache + - API Service worker + - Cache + - Interface + - Reference + - Service Workers + - Stockage + - hors ligne +translation_of: Web/API/Cache +--- +

{{APIRef("Service Workers API")}} {{SeeCompatTable}}

+ +

L'interface Cache fournit un mécanisme de stockage pour les paires d'objets Request/Response qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface Cache est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers.

+ +

Une origine peut avoir plusieurs objets nommés Cache. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet Cache spécifique et appelez ensuite l'une des méthodes Cache pour maintenir le Cache.

+ +

Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir Suppression des anciens caches.

+ +
+

Note : Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.

+
+ +
+

Note : L'algorithme des correspondances de clés est dépendant de la valeur de l'en-tête VARY. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.

+
+ +
+

Note : L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP.

+
+ +

Méthodes

+ +
+
{{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}}
+
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}.
+
{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}}
+
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}.
+
{{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}}
+
Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats  au cache.
+
{{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}}
+
Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné.
+
{{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}}
+
Prend à la fois une requête et sa réponse et l'ajoute au cache donné.
+
{{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}}
+
Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à true. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne false.
+
{{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}}
+
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}.
+
+ +

Exemples

+ +

Cet extrait de code provient de l'exemple de mise en cache sélective. (voir selective caching live) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par font/.

+ +

Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée.

+ +

Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié.

+ +

Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant  court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans CURRENT_CACHES.

+ +
+

Note: In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.

+
+ +
var CACHE_VERSION = 1;
+
+// Shorthand identifier mapped to specific versioned cache.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Active worker won't be treated as activated until promise resolves successfully.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Opens Cache objects that start with 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log(' Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Handles exceptions that arise from match() or fetch().
+        console.error('  Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});
+ +

Storing cookies in Caches

+ +

L'API Fetch exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Cache")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/keys/index.html b/files/fr/web/api/cache/keys/index.html deleted file mode 100644 index faabe1581d..0000000000 --- a/files/fr/web/api/cache/keys/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Cache.keys() -slug: Web/API/Cache/keys -tags: - - API - - Cache - - Experimental - - Méthode - - Reference - - Service Workers - - ServiceWorker - - keys -translation_of: Web/API/Cache/keys ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La méthode keys() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.

- -

Les requêtes sont retournées dans le même ordre que l'ordre d'insertion.

- -
-

Note : Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header VARY.

-
- -

Syntaxe

- -
cache.keys(request,{options}).then(function(response) {
-  // fait quelque chose avec votre tableau de réponses
-});
-
- -

Paramètres

- -
-
request {{optional_inline}}
-
La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée.
-
options {{optional_inline}}
-

Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération keys. Les options disponibles sont :

-
    -
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • -
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées). Est à  false par défaut.
    • -
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • -
  • cacheName: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par Cache.keys().
    • -
-
-
- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.

- -

Exemples

- -
caches.open('v1').then(function(cache) {
-  cache.keys().then(function(keys) {
-    keys.forEach(function(request, index, array) {
-      cache.delete(request);
-    });
-  });
-})
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.Cache.keys")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cache/keys/index.md b/files/fr/web/api/cache/keys/index.md new file mode 100644 index 0000000000..faabe1581d --- /dev/null +++ b/files/fr/web/api/cache/keys/index.md @@ -0,0 +1,89 @@ +--- +title: Cache.keys() +slug: Web/API/Cache/keys +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Workers + - ServiceWorker + - keys +translation_of: Web/API/Cache/keys +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode keys() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.

+ +

Les requêtes sont retournées dans le même ordre que l'ordre d'insertion.

+ +
+

Note : Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header VARY.

+
+ +

Syntaxe

+ +
cache.keys(request,{options}).then(function(response) {
+  // fait quelque chose avec votre tableau de réponses
+});
+
+ +

Paramètres

+ +
+
request {{optional_inline}}
+
La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée.
+
options {{optional_inline}}
+

Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération keys. Les options disponibles sont :

+
    +
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • +
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées). Est à  false par défaut.
    • +
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • +
  • cacheName: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par Cache.keys().
    • +
+
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.

+ +

Exemples

+ +
caches.open('v1').then(function(cache) {
+  cache.keys().then(function(keys) {
+    keys.forEach(function(request, index, array) {
+      cache.delete(request);
+    });
+  });
+})
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.Cache.keys")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/match/index.html b/files/fr/web/api/cache/match/index.html deleted file mode 100644 index 7867ba79a6..0000000000 --- a/files/fr/web/api/cache/match/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Cache.match() -slug: Web/API/Cache/match -tags: - - API - - Cache - - Experimental - - Méthode - - Reference - - Service Workers - - Service worker API - - ServiceWorker - - match -translation_of: Web/API/Cache/match ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La méthode match() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}.

- -

Syntaxe

- -
cache.match(request,{options}).then(function(response) {
-  // faire quelque chose avec la réponse
-});
-
- -

Paramètres

- -
-
request
-
La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}.
-
options {{optional_inline}}
-
Un objet qui définit des options pour l'opération de match. Les options disponibles sont les suivantes : -
    -
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • -
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • -
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • -
-
-
- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée.

- -
-

Note : Cache.match() est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).

-
- -

Exemples

- -

Cet exemple est extrait de l'exemple Page hors ligne custom (demo).

- -

L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause catch() est déclenchée quand l'appel à fetch() lève une exception. A l'intérieur de la clause catch(), match() est utilisée to pour retourner la réponse appropriée.

- -

Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition if() est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler event.respondWith(). Si aucun gestionnaire fetch ne décide d'appeler event.respondWith(), la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si fetch() retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause catch() ne sera PAS appelée. 

- -
self.addEventListener('fetch', function(event) {
-  // We only want to call event.respondWith() if this is a GET request for an HTML document.
-  if (event.request.method === 'GET' &&
-      event.request.headers.get('accept').indexOf('text/html') !== -1) {
-    console.log('Handling fetch event for', event.request.url);
-    event.respondWith(
-      fetch(event.request).catch(function(e) {
-        console.error('Fetch failed; returning offline page instead.', e);
-        return caches.open(OFFLINE_CACHE).then(function(cache) {
-          return cache.match(OFFLINE_URL);
-        });
-      })
-    );
-  }
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.Cache.match")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cache/match/index.md b/files/fr/web/api/cache/match/index.md new file mode 100644 index 0000000000..7867ba79a6 --- /dev/null +++ b/files/fr/web/api/cache/match/index.md @@ -0,0 +1,101 @@ +--- +title: Cache.match() +slug: Web/API/Cache/match +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - match +translation_of: Web/API/Cache/match +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode match() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}.

+ +

Syntaxe

+ +
cache.match(request,{options}).then(function(response) {
+  // faire quelque chose avec la réponse
+});
+
+ +

Paramètres

+ +
+
request
+
La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}.
+
options {{optional_inline}}
+
Un objet qui définit des options pour l'opération de match. Les options disponibles sont les suivantes : +
    +
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • +
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • +
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • +
+
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée.

+ +
+

Note : Cache.match() est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).

+
+ +

Exemples

+ +

Cet exemple est extrait de l'exemple Page hors ligne custom (demo).

+ +

L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause catch() est déclenchée quand l'appel à fetch() lève une exception. A l'intérieur de la clause catch(), match() est utilisée to pour retourner la réponse appropriée.

+ +

Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition if() est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler event.respondWith(). Si aucun gestionnaire fetch ne décide d'appeler event.respondWith(), la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si fetch() retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause catch() ne sera PAS appelée. 

+ +
self.addEventListener('fetch', function(event) {
+  // We only want to call event.respondWith() if this is a GET request for an HTML document.
+  if (event.request.method === 'GET' &&
+      event.request.headers.get('accept').indexOf('text/html') !== -1) {
+    console.log('Handling fetch event for', event.request.url);
+    event.respondWith(
+      fetch(event.request).catch(function(e) {
+        console.error('Fetch failed; returning offline page instead.', e);
+        return caches.open(OFFLINE_CACHE).then(function(cache) {
+          return cache.match(OFFLINE_URL);
+        });
+      })
+    );
+  }
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.Cache.match")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/matchall/index.html b/files/fr/web/api/cache/matchall/index.html deleted file mode 100644 index 86d1dad2bf..0000000000 --- a/files/fr/web/api/cache/matchall/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Cache.matchAll() -slug: Web/API/Cache/matchAll -tags: - - API - - Cache - - Experimental - - Méthode - - Reference - - Service Workers - - Service worker API - - ServiceWorker - - matchAll -translation_of: Web/API/Cache/matchAll ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La méthode matchAll() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.

- -

Syntaxe

- -
cache.matchAll(request,{options}).then(function(response) {
-  // faire quelque chose avec le tableau des réponses
-});
-
- -

Paramètres

- -
-
request
-
La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.
-
options {{optional_inline}}
-

Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes :

-
    -
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • -
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • -
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • -
-
-
- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.

- -
-

Note : {{domxref("Cache.match()")}} est quasiment identique à Cache.matchAll(), si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).

-
- -

Exemples

- -
caches.open('v1').then(function(cache) {
-  cache.matchAll('/images/').then(function(response) {
-    response.forEach(function(element, index, array) {
-      cache.delete(element);
-    });
-  });
-})
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.Cache.matchAll")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cache/matchall/index.md b/files/fr/web/api/cache/matchall/index.md new file mode 100644 index 0000000000..86d1dad2bf --- /dev/null +++ b/files/fr/web/api/cache/matchall/index.md @@ -0,0 +1,87 @@ +--- +title: Cache.matchAll() +slug: Web/API/Cache/matchAll +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - matchAll +translation_of: Web/API/Cache/matchAll +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode matchAll() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.

+ +

Syntaxe

+ +
cache.matchAll(request,{options}).then(function(response) {
+  // faire quelque chose avec le tableau des réponses
+});
+
+ +

Paramètres

+ +
+
request
+
La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.
+
options {{optional_inline}}
+

Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes :

+
    +
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • +
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • +
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • +
+
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.

+ +
+

Note : {{domxref("Cache.match()")}} est quasiment identique à Cache.matchAll(), si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).

+
+ +

Exemples

+ +
caches.open('v1').then(function(cache) {
+  cache.matchAll('/images/').then(function(response) {
+    response.forEach(function(element, index, array) {
+      cache.delete(element);
+    });
+  });
+})
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.Cache.matchAll")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cache/put/index.html b/files/fr/web/api/cache/put/index.html deleted file mode 100644 index b8a7f9f5cd..0000000000 --- a/files/fr/web/api/cache/put/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Cache.put() -slug: Web/API/Cache/put -tags: - - API - - Cache - - Experimental - - Méthode - - Reference - - Service Workers - - Service worker API - - ServiceWorker - - put -translation_of: Web/API/Cache/put ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La méthode put() de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours.

- -

Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser  {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations :

- -
fetch(url).then(function(response) {
-  if (!response.ok) {
-    throw new TypeError('Bad response status');
-  }
-  return cache.put(url, response);
-})
- -
-

Note : put() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.

-
- -
-

Note : Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses   {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage.  Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.

-
- -
-

Note : Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.

-
- -

Syntaxe

- -
cache.put(request, response).then(function() {
-  // la paire requête/réponse a été ajoutée au cache
-});
-
- -

Paramètres

- -
-
request
-
La {{domxref("Request", "Requête")}} à ajouter au cache.
-
response
-
La {{domxref("Response", "Réponse")}} à associer à la requête.
-
- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} est retournée avec void.

- -
-

Note : La promesse sera rompue avec un TypeError si le schéma d'URL n'est pas http ou https.

-
- -

Exemples

- -

Cet extrait de code est tiré du MDN sw-test example (lancez sw-test dans votre navigateur). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante :

- -
    -
  1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à  {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse.
    2. -
  2. Sinon, ouvrir le cache v1 avec open(), insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec return response.clone() — nécessaire car put() détruit le corps de la réponse.
    3. -
  3. En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours.
    4. -
- -
var response;
-var cachedResponse = caches.match(event.request).catch(function() {
-  return fetch(event.request);
-}).then(function(r) {
-  response = r;
-  caches.open('v1').then(function(cache) {
-    cache.put(event.request, response);
-  });
-  return response.clone();
-}).catch(function() {
-  return caches.match('/sw-test/gallery/myLittleVader.jpg');
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Cache.put")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cache/put/index.md b/files/fr/web/api/cache/put/index.md new file mode 100644 index 0000000000..b8a7f9f5cd --- /dev/null +++ b/files/fr/web/api/cache/put/index.md @@ -0,0 +1,115 @@ +--- +title: Cache.put() +slug: Web/API/Cache/put +tags: + - API + - Cache + - Experimental + - Méthode + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - put +translation_of: Web/API/Cache/put +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode put() de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours.

+ +

Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser  {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations :

+ +
fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('Bad response status');
+  }
+  return cache.put(url, response);
+})
+ +
+

Note : put() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.

+
+ +
+

Note : Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses   {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage.  Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.

+
+ +
+

Note : Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.

+
+ +

Syntaxe

+ +
cache.put(request, response).then(function() {
+  // la paire requête/réponse a été ajoutée au cache
+});
+
+ +

Paramètres

+ +
+
request
+
La {{domxref("Request", "Requête")}} à ajouter au cache.
+
response
+
La {{domxref("Response", "Réponse")}} à associer à la requête.
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} est retournée avec void.

+ +
+

Note : La promesse sera rompue avec un TypeError si le schéma d'URL n'est pas http ou https.

+
+ +

Exemples

+ +

Cet extrait de code est tiré du MDN sw-test example (lancez sw-test dans votre navigateur). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante :

+ +
    +
  1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à  {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse.
    2. +
  2. Sinon, ouvrir le cache v1 avec open(), insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec return response.clone() — nécessaire car put() détruit le corps de la réponse.
    3. +
  3. En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours.
    4. +
+ +
var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Cache.put")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/caches/index.html b/files/fr/web/api/caches/index.html deleted file mode 100644 index b5b57df7ee..0000000000 --- a/files/fr/web/api/caches/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.caches -slug: Web/API/caches -translation_of: Web/API/WindowOrWorkerGlobalScope/caches -original_slug: Web/API/WindowOrWorkerGlobalScope/caches ---- -

{{APIRef()}}{{SeeCompatTable}}

- -

La propriété en lecture seule  caches de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes.

- -

Syntaxe

- -
var myCacheStorage = self.caches; // ou simplement caches
-
- -

Value

- -

Un objet de type {{domxref("CacheStorage")}}.

- -

Exemple

- -

L'exemple suivant montre comment mettre en cache un contexte de service worker pour stocker des ressources et les utiliser hors-ligne.

- -
this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll([
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      ]);
-    })
-  );
-});
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}} -

Défini dans un WindowOrWorkerGlobalScope partiel dans la nouvelle spec.

-
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WindowOrWorkerGlobalScope.caches")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/caches/index.md b/files/fr/web/api/caches/index.md new file mode 100644 index 0000000000..b5b57df7ee --- /dev/null +++ b/files/fr/web/api/caches/index.md @@ -0,0 +1,80 @@ +--- +title: WindowOrWorkerGlobalScope.caches +slug: Web/API/caches +translation_of: Web/API/WindowOrWorkerGlobalScope/caches +original_slug: Web/API/WindowOrWorkerGlobalScope/caches +--- +

{{APIRef()}}{{SeeCompatTable}}

+ +

La propriété en lecture seule  caches de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes.

+ +

Syntaxe

+ +
var myCacheStorage = self.caches; // ou simplement caches
+
+ +

Value

+ +

Un objet de type {{domxref("CacheStorage")}}.

+ +

Exemple

+ +

L'exemple suivant montre comment mettre en cache un contexte de service worker pour stocker des ressources et les utiliser hors-ligne.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}} +

Défini dans un WindowOrWorkerGlobalScope partiel dans la nouvelle spec.

+
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.caches")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cachestorage/delete/index.html b/files/fr/web/api/cachestorage/delete/index.html deleted file mode 100644 index 6d088f5d7f..0000000000 --- a/files/fr/web/api/cachestorage/delete/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: CacheStorage.delete() -slug: Web/API/CacheStorage/delete -tags: - - API - - CacheStorage - - Experimental - - Reference - - Service Workers - - ServiceWorker - - delete -translation_of: Web/API/CacheStorage/delete ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La fonction delete() de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un cacheName, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie true. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne false.

- -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

- -

Syntaxe

- -
caches.delete(cacheName).then(function(true) {
-  // le cache est maintenant supprimé
-});
-
- -

Paramètres

- -
-
cacheName
-
Le nom du cache que vous souhaitez supprimer.
-
- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} qui renvoie true si l'objet {{domxref("Cache")}} est trouvé et supprimé, false sinon.

- -

Exemples

- -

Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec delete().

- -
this.addEventListener('activate', function(event) {
-  var cacheWhitelist = ['v2'];
-
-  event.waitUntil(
-    caches.keys().then(function(keyList) {
-      return Promise.all(keyList.map(function(key) {
-        if (cacheWhitelist.indexOf(key) === -1) {
-          return caches.delete(key);
-        }
-      }));
-    })
-  );
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- - - -

{{Compat("api.CacheStorage.delete")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cachestorage/delete/index.md b/files/fr/web/api/cachestorage/delete/index.md new file mode 100644 index 0000000000..6d088f5d7f --- /dev/null +++ b/files/fr/web/api/cachestorage/delete/index.md @@ -0,0 +1,85 @@ +--- +title: CacheStorage.delete() +slug: Web/API/CacheStorage/delete +tags: + - API + - CacheStorage + - Experimental + - Reference + - Service Workers + - ServiceWorker + - delete +translation_of: Web/API/CacheStorage/delete +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La fonction delete() de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un cacheName, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie true. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne false.

+ +

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+ +

Syntaxe

+ +
caches.delete(cacheName).then(function(true) {
+  // le cache est maintenant supprimé
+});
+
+ +

Paramètres

+ +
+
cacheName
+
Le nom du cache que vous souhaitez supprimer.
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui renvoie true si l'objet {{domxref("Cache")}} est trouvé et supprimé, false sinon.

+ +

Exemples

+ +

Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec delete().

+ +
this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ + + +

{{Compat("api.CacheStorage.delete")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cachestorage/has/index.html b/files/fr/web/api/cachestorage/has/index.html deleted file mode 100644 index 5b1b6a6ae0..0000000000 --- a/files/fr/web/api/cachestorage/has/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: CacheStorage.has() -slug: Web/API/CacheStorage/has -tags: - - API - - CacheStorage - - Experimental - - Méthode - - Reference - - Service Workers - - ServiceWorker - - has -translation_of: Web/API/CacheStorage/has ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La méthode has() de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie true si un objet {{domxref("Cache")}} est égal au cacheName.

- -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

- -

Syntaxe

- -
caches.has(cacheName).then(function(true) {
-  // le cache existe!
-});
-
- -

Paramètres

- -
-
cacheName
-
Un  {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}.
-
- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} qui renvoie true si le cache existe.

- -

Exemples

- -

L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse has() est rejetée) alors nous exécutons une sorte d'initialisation du cache.

- -
caches.has('v1').then(function() {
-  caches.open('v1').then(function(cache) {
-      return cache.addAll(myAssets);
-  });
-}).catch(function() {
-  someCacheSetupfunction();
-});;
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- - - -

{{Compat("api.CacheStorage.has")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cachestorage/has/index.md b/files/fr/web/api/cachestorage/has/index.md new file mode 100644 index 0000000000..5b1b6a6ae0 --- /dev/null +++ b/files/fr/web/api/cachestorage/has/index.md @@ -0,0 +1,80 @@ +--- +title: CacheStorage.has() +slug: Web/API/CacheStorage/has +tags: + - API + - CacheStorage + - Experimental + - Méthode + - Reference + - Service Workers + - ServiceWorker + - has +translation_of: Web/API/CacheStorage/has +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode has() de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie true si un objet {{domxref("Cache")}} est égal au cacheName.

+ +

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+ +

Syntaxe

+ +
caches.has(cacheName).then(function(true) {
+  // le cache existe!
+});
+
+ +

Paramètres

+ +
+
cacheName
+
Un  {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}.
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui renvoie true si le cache existe.

+ +

Exemples

+ +

L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse has() est rejetée) alors nous exécutons une sorte d'initialisation du cache.

+ +
caches.has('v1').then(function() {
+  caches.open('v1').then(function(cache) {
+      return cache.addAll(myAssets);
+  });
+}).catch(function() {
+  someCacheSetupfunction();
+});;
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ + + +

{{Compat("api.CacheStorage.has")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cachestorage/index.html b/files/fr/web/api/cachestorage/index.html deleted file mode 100644 index 276393aa31..0000000000 --- a/files/fr/web/api/cachestorage/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: CacheStorage -slug: Web/API/CacheStorage -tags: - - API - - Cache de stockage - - Experimental - - Interface - - Reference - - Service Workers - - ServiceWorker -translation_of: Web/API/CacheStorage ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

L'interface CacheStorage représente le stockage des objets {{domxref("Cache")}}.

- -

L'interface :

- - - -

Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}.

- -

Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet CacheStorage surveille.

- -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

- -
-

Note : CacheStorage échouera systématiquement avec une SecurityError sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.

-
- -
-

Note : {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.

-
- -

Méthodes

- -
-
{{domxref("CacheStorage.match()")}} {{experimental_inline}}
-
Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}.
-
{{domxref("CacheStorage.has()")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en true si un objet {{domxref("Cache")}} qui correspond au cacheName existe.
-
{{domxref("CacheStorage.open()")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au cacheName (si il n'existe pas, un nouveau cache est créé).
-
{{domxref("CacheStorage.delete()")}} {{experimental_inline}}
-
Trouve l'objet {{domxref("Cache")}} correspondant au cacheName, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à true. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à false.
-
{{domxref("CacheStorage.keys()")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}.
-
- -

Exemples

- -

Cet extrait de code est tiré de l'exemple MDN sw-test (lancer sw-test dans votre navigateur). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets.

- -

Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit :

- -
    -
  1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.
    2. -
  2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).)
    3. -
  3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.
    4. -
- -

Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}.

- -
this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll([
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      ]);
-    })
-  );
-});
-
-self.addEventListener('fetch', function(event) {
-  event.respondWith(caches.match(event.request).then(function(response) {
-    // caches.match() fonctionne toujours
-    // mais en cas de succès, la réponse aura une valeur
-    if (response !== undefined) {
-      return response;
-    } else {
-      return fetch(event.request).then(function (response) {
-        // la réponse ne peut être utilisée qu'une seule fois
-        // nous devons sauvegarder le clone pour mettre
-        // une copie en cache et servir le second
-        let responseClone = response.clone();
-
-        caches.open('v1').then(function (cache) {
-          cache.put(event.request, responseClone);
-        });
-        return response;
-      }).catch(function () {
-        return caches.match('/sw-test/gallery/myLittleVader.jpg');
-      });
-    }
-  }));
-});
- -

Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible.

- -
// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct.
-async function getData() {
-   const cacheVersion = 1;
-   const cacheName    = `myapp-${ cacheVersion }`;
-   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
-   let cachedData     = await getCachedData( cacheName, url );
-
-   if ( cachedData ) {
-      console.log( 'Récupération des données mises en cache' );
-      return cachedData;
-   }
-
-   console.log( 'Obtenir de nouvelles données' );
-
-   const cacheStorage = await caches.open( cacheName );
-   await cacheStorage.add( url );
-   cachedData = await getCachedData( cacheName, url );
-   await deleteOldCaches( cacheName );
-
-   return cachedData;
-}
-
-// Obtenir des données du cache.
-async function getCachedData( cacheName, url ) {
-   const cacheStorage   = await caches.open( cacheName );
-   const cachedResponse = await cacheStorage.match( url );
-
-   if ( ! cachedResponse || ! cachedResponse.ok ) {
-      return false;
-   }
-
-   return await cachedResponse.json();
-}
-
-// Delete any old caches to respect user's disk space.
-async function deleteOldCaches( currentCache ) {
-   const keys = await caches.keys();
-
-   for ( const key of keys ) {
-      const isOurCache = 'myapp-' === key.substr( 0, 6 );
-
-      if ( currentCache === key || ! isOurCache ) {
-         continue;
-      }
-
-      caches.delete( key );
-   }
-}
-
-try {
-   const data = await getData();
-   console.log( { data } );
-} catch ( error ) {
-   console.error( { error } );
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- - - -

{{Compat("api.CacheStorage")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cachestorage/index.md b/files/fr/web/api/cachestorage/index.md new file mode 100644 index 0000000000..276393aa31 --- /dev/null +++ b/files/fr/web/api/cachestorage/index.md @@ -0,0 +1,201 @@ +--- +title: CacheStorage +slug: Web/API/CacheStorage +tags: + - API + - Cache de stockage + - Experimental + - Interface + - Reference + - Service Workers + - ServiceWorker +translation_of: Web/API/CacheStorage +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

L'interface CacheStorage représente le stockage des objets {{domxref("Cache")}}.

+ +

L'interface :

+ + + +

Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}.

+ +

Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet CacheStorage surveille.

+ +

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+ +
+

Note : CacheStorage échouera systématiquement avec une SecurityError sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.

+
+ +
+

Note : {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.

+
+ +

Méthodes

+ +
+
{{domxref("CacheStorage.match()")}} {{experimental_inline}}
+
Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}.
+
{{domxref("CacheStorage.has()")}} {{experimental_inline}}
+
Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en true si un objet {{domxref("Cache")}} qui correspond au cacheName existe.
+
{{domxref("CacheStorage.open()")}} {{experimental_inline}}
+
Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au cacheName (si il n'existe pas, un nouveau cache est créé).
+
{{domxref("CacheStorage.delete()")}} {{experimental_inline}}
+
Trouve l'objet {{domxref("Cache")}} correspondant au cacheName, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à true. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à false.
+
{{domxref("CacheStorage.keys()")}} {{experimental_inline}}
+
Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}.
+
+ +

Exemples

+ +

Cet extrait de code est tiré de l'exemple MDN sw-test (lancer sw-test dans votre navigateur). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets.

+ +

Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit :

+ +
    +
  1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.
    2. +
  2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).)
    3. +
  3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.
    4. +
+ +

Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() fonctionne toujours
+    // mais en cas de succès, la réponse aura une valeur
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // la réponse ne peut être utilisée qu'une seule fois
+        // nous devons sauvegarder le clone pour mettre
+        // une copie en cache et servir le second
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});
+ +

Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible.

+ +
// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct.
+async function getData() {
+   const cacheVersion = 1;
+   const cacheName    = `myapp-${ cacheVersion }`;
+   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
+   let cachedData     = await getCachedData( cacheName, url );
+
+   if ( cachedData ) {
+      console.log( 'Récupération des données mises en cache' );
+      return cachedData;
+   }
+
+   console.log( 'Obtenir de nouvelles données' );
+
+   const cacheStorage = await caches.open( cacheName );
+   await cacheStorage.add( url );
+   cachedData = await getCachedData( cacheName, url );
+   await deleteOldCaches( cacheName );
+
+   return cachedData;
+}
+
+// Obtenir des données du cache.
+async function getCachedData( cacheName, url ) {
+   const cacheStorage   = await caches.open( cacheName );
+   const cachedResponse = await cacheStorage.match( url );
+
+   if ( ! cachedResponse || ! cachedResponse.ok ) {
+      return false;
+   }
+
+   return await cachedResponse.json();
+}
+
+// Delete any old caches to respect user's disk space.
+async function deleteOldCaches( currentCache ) {
+   const keys = await caches.keys();
+
+   for ( const key of keys ) {
+      const isOurCache = 'myapp-' === key.substr( 0, 6 );
+
+      if ( currentCache === key || ! isOurCache ) {
+         continue;
+      }
+
+      caches.delete( key );
+   }
+}
+
+try {
+   const data = await getData();
+   console.log( { data } );
+} catch ( error ) {
+   console.error( { error } );
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ + + +

{{Compat("api.CacheStorage")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cachestorage/keys/index.html b/files/fr/web/api/cachestorage/keys/index.html deleted file mode 100644 index ed61c3716c..0000000000 --- a/files/fr/web/api/cachestorage/keys/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: CacheStorage.keys() -slug: Web/API/CacheStorage/keys -tags: - - API - - CacheStorage - - Experimental - - Méthodes - - Reference - - Service Workers - - ServiceWorker - - keys -translation_of: Web/API/CacheStorage/keys ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La méthode keys() de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}.

- -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

- -

Syntaxe

- -
caches.keys().then(function(keyList) {
-  // faire quelque-chose avec votre keylist
-});
-
- -

Paramètres

- -

Aucun.

- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.

- -

Exemples

- -

Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec delete().

- -
this.addEventListener('activate', function(event) {
-  var cacheWhitelist = ['v2'];
-
-  event.waitUntil(
-    caches.keys().then(function(keyList) {
-      return Promise.all(keyList.map(function(key) {
-        if (cacheWhitelist.indexOf(key) === -1) {
-          return caches.delete(key);
-        }
-      });
-    })
-  );
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- - - -

{{Compat("api.CacheStorage.keys")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cachestorage/keys/index.md b/files/fr/web/api/cachestorage/keys/index.md new file mode 100644 index 0000000000..ed61c3716c --- /dev/null +++ b/files/fr/web/api/cachestorage/keys/index.md @@ -0,0 +1,83 @@ +--- +title: CacheStorage.keys() +slug: Web/API/CacheStorage/keys +tags: + - API + - CacheStorage + - Experimental + - Méthodes + - Reference + - Service Workers + - ServiceWorker + - keys +translation_of: Web/API/CacheStorage/keys +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La méthode keys() de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}.

+ +

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+ +

Syntaxe

+ +
caches.keys().then(function(keyList) {
+  // faire quelque-chose avec votre keylist
+});
+
+ +

Paramètres

+ +

Aucun.

+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.

+ +

Exemples

+ +

Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec delete().

+ +
this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      });
+    })
+  );
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ + + +

{{Compat("api.CacheStorage.keys")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cachestorage/match/index.html b/files/fr/web/api/cachestorage/match/index.html deleted file mode 100644 index 704f299794..0000000000 --- a/files/fr/web/api/cachestorage/match/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: CacheStorage.match() -slug: Web/API/CacheStorage/match -tags: - - API - - CacheStorage - - Experimental - - Méthode - - Reference - - Service Workers - - ServiceWorkers - - match -translation_of: Web/API/CacheStorage/match ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La fonction match() de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante.

- -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

- -

Les objets Cache sont cherchés par ordre de création.

- -
-

Note : {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.

-
- -

Syntaxe

- -
caches.match(request,{options}).then(function(response) {
-  // faire quelque-chose avec la requête et la réponse
-});
-
- -

Paramètres

- -
-
request
-
La {{domxref("Request", "Requête")}} recherchée.
-
options {{optional_inline}}
-
Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération match. Les options disponible sont: -
    -
  • ignoreSearch: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à true, la partie ?value=bar de http://foo.com/?value=bar sera ignoré lors d'un rapporchement. La valeur par défaut est false.
    • -
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand défini à true, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} http (normalement, seulement GET et HEAD sont authorisés) La valeur par défaut est false.
    • -
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand défini à true, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header VARY. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header VARY. La valeur par défaut est false.
    • -
  • cacheName: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.
    • -
-
-
- -

Valeur retournée

- -

Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.

- -

Exemples

- -

Cet exemple est tiré du MDN sw-test example (voir sw-test running live). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit:

- -
    -
  1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir.
    2. -
  2. Si non, ouvrire le cache v1 avec open(), mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant return response.clone() — obligatoire car put() détruit le corps de la réponse.
    3. -
  3. Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours.
    4. -
- -
self.addEventListener('fetch', function(event) {
-  event.respondWith(caches.match(event.request).then(function(response) {
-    // caches.match() always resolves
-    // but in case of success response will have value
-    if (response !== undefined) {
-      return response;
-    } else {
-      return fetch(event.request).then(function (response) {
-        // response may be used only once
-        // we need to save clone to put one copy in cache
-        // and serve second one
-        let responseClone = response.clone();
-
-        caches.open('v1').then(function (cache) {
-          cache.put(event.request, responseClone);
-        });
-        return response;
-      }).catch(function () {
-        return caches.match('/sw-test/gallery/myLittleVader.jpg');
-      });
-    }
-  }));
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- - - -

{{Compat("api.CacheStorage.match")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cachestorage/match/index.md b/files/fr/web/api/cachestorage/match/index.md new file mode 100644 index 0000000000..704f299794 --- /dev/null +++ b/files/fr/web/api/cachestorage/match/index.md @@ -0,0 +1,117 @@ +--- +title: CacheStorage.match() +slug: Web/API/CacheStorage/match +tags: + - API + - CacheStorage + - Experimental + - Méthode + - Reference + - Service Workers + - ServiceWorkers + - match +translation_of: Web/API/CacheStorage/match +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La fonction match() de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante.

+ +

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+ +

Les objets Cache sont cherchés par ordre de création.

+ +
+

Note : {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.

+
+ +

Syntaxe

+ +
caches.match(request,{options}).then(function(response) {
+  // faire quelque-chose avec la requête et la réponse
+});
+
+ +

Paramètres

+ +
+
request
+
La {{domxref("Request", "Requête")}} recherchée.
+
options {{optional_inline}}
+
Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération match. Les options disponible sont: +
    +
  • ignoreSearch: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à true, la partie ?value=bar de http://foo.com/?value=bar sera ignoré lors d'un rapporchement. La valeur par défaut est false.
    • +
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand défini à true, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} http (normalement, seulement GET et HEAD sont authorisés) La valeur par défaut est false.
    • +
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand défini à true, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header VARY. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header VARY. La valeur par défaut est false.
    • +
  • cacheName: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.
    • +
+
+
+ +

Valeur retournée

+ +

Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.

+ +

Exemples

+ +

Cet exemple est tiré du MDN sw-test example (voir sw-test running live). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit:

+ +
    +
  1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir.
    2. +
  2. Si non, ouvrire le cache v1 avec open(), mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant return response.clone() — obligatoire car put() détruit le corps de la réponse.
    3. +
  3. Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours.
    4. +
+ +
self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() always resolves
+    // but in case of success response will have value
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // response may be used only once
+        // we need to save clone to put one copy in cache
+        // and serve second one
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ + + +

{{Compat("api.CacheStorage.match")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cachestorage/open/index.html b/files/fr/web/api/cachestorage/open/index.html deleted file mode 100644 index 87d45d11b3..0000000000 --- a/files/fr/web/api/cachestorage/open/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: CacheStorage.open() -slug: Web/API/CacheStorage/open -tags: - - API - - CacheStorage - - Experimental - - Méthode - - Reference - - Service Workers - - ServiceWorkers - - open -translation_of: Web/API/CacheStorage/open ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La fonction open()de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un cacheName.

- -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

- -
-

Note : Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec cacheName et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.

-
- -

Syntaxe

- -
caches.open(cacheName).then(function(cache) {
-  // faire quelque-chose avec le cache
-});
-
- -

Paramètres

- -
-
cacheName
-
Le nom du cache que vous voulez ouvrir.
-
- -

Retour

- -

Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.

- -

Exemples

- -

Cet exemple est tiré de l'exemple MDN sw-test (voir sw-test en direct). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler CacheStorage.open() pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments.

- -
self.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll([
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      ]);
-    })
-  );
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- - - -

{{Compat("api.CacheStorage.open")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cachestorage/open/index.md b/files/fr/web/api/cachestorage/open/index.md new file mode 100644 index 0000000000..87d45d11b3 --- /dev/null +++ b/files/fr/web/api/cachestorage/open/index.md @@ -0,0 +1,93 @@ +--- +title: CacheStorage.open() +slug: Web/API/CacheStorage/open +tags: + - API + - CacheStorage + - Experimental + - Méthode + - Reference + - Service Workers + - ServiceWorkers + - open +translation_of: Web/API/CacheStorage/open +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La fonction open()de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un cacheName.

+ +

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+ +
+

Note : Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec cacheName et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.

+
+ +

Syntaxe

+ +
caches.open(cacheName).then(function(cache) {
+  // faire quelque-chose avec le cache
+});
+
+ +

Paramètres

+ +
+
cacheName
+
Le nom du cache que vous voulez ouvrir.
+
+ +

Retour

+ +

Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.

+ +

Exemples

+ +

Cet exemple est tiré de l'exemple MDN sw-test (voir sw-test en direct). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler CacheStorage.open() pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments.

+ +
self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ + + +

{{Compat("api.CacheStorage.open")}}

+ +

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 deleted file mode 100644 index b3520fecbd..0000000000 --- a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Un raycaster basique avec canvas -slug: Web/API/Canvas_API/A_basic_ray-caster -tags: - - 3D - - Canvas - - Exemples - - Graphismes - - Web -translation_of: Web/API/Canvas_API/A_basic_ray-caster -original_slug: Un_raycaster_basique_avec_canvas ---- -

{{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/a_basic_ray-caster/index.md b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md new file mode 100644 index 0000000000..b3520fecbd --- /dev/null +++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md @@ -0,0 +1,53 @@ +--- +title: Un raycaster basique avec canvas +slug: Web/API/Canvas_API/A_basic_ray-caster +tags: + - 3D + - Canvas + - Exemples + - Graphismes + - Web +translation_of: Web/API/Canvas_API/A_basic_ray-caster +original_slug: Un_raycaster_basique_avec_canvas +--- +

{{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/index.html b/files/fr/web/api/canvas_api/index.html deleted file mode 100644 index 9c3ea0f0ef..0000000000 --- a/files/fr/web/api/canvas_api/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: API canvas -slug: Web/API/Canvas_API -tags: - - API - - Canvas - - Reference -translation_of: Web/API/Canvas_API ---- -
{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}
- -

Ajouté en HTML5, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts JavaScript. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.

- -

Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire Firefox 1.5). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte <canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de <canvas> en incluant un script depuis le projet Explorer Canvas  de Google.

- -

L'élément <canvas> est aussi utilisé par WebGL pour afficher des graphismes 3D avec accélération matérielle sur des pages web.

- -

Exemple

- -

Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 100, 100);
-
- -

Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Références

- - - -

Les interfaces liées au WebGLRenderingContext sont référencées sous WebGL.

- -

{{domxref("CanvasCaptureMediaStream")}} est lié.

- -

Guides et tutoriels

- -
-
Tutoriel canvas
-
Un tutoriel complet qui couvre à la fois l'usage élémentaire de <canvas> mais aussi ses fonctionnalités avancées.
-
Extraits de code : Canvas
-
Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <canvas>.
-
Demo: Un raycaster basique avec canvas
-
Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.
-
Dessiner des objets DOM dans un élément canvas
-
Comment dessiner un contenu DOM, tel que des éléments HTML, dans un canvas.
-
Manipulation vidéo avec la balise canvas
-
Combiner {{HTMLElement("video")}} et {{HTMLElement("canvas")}} pour manipuler des données video en temps réel.
-
- -

Ressources

- -

Général

- - - -

Bibliothèques

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
- -

Voir aussi

- - diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md new file mode 100644 index 0000000000..9c3ea0f0ef --- /dev/null +++ b/files/fr/web/api/canvas_api/index.md @@ -0,0 +1,164 @@ +--- +title: API canvas +slug: Web/API/Canvas_API +tags: + - API + - Canvas + - Reference +translation_of: Web/API/Canvas_API +--- +
{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}
+ +

Ajouté en HTML5, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts JavaScript. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.

+ +

Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire Firefox 1.5). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte <canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de <canvas> en incluant un script depuis le projet Explorer Canvas  de Google.

+ +

L'élément <canvas> est aussi utilisé par WebGL pour afficher des graphismes 3D avec accélération matérielle sur des pages web.

+ +

Exemple

+ +

Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}.

+ +

HTML

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

JavaScript

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

Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Références

+ + + +

Les interfaces liées au WebGLRenderingContext sont référencées sous WebGL.

+ +

{{domxref("CanvasCaptureMediaStream")}} est lié.

+ +

Guides et tutoriels

+ +
+
Tutoriel canvas
+
Un tutoriel complet qui couvre à la fois l'usage élémentaire de <canvas> mais aussi ses fonctionnalités avancées.
+
Extraits de code : Canvas
+
Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <canvas>.
+
Demo: Un raycaster basique avec canvas
+
Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.
+
Dessiner des objets DOM dans un élément canvas
+
Comment dessiner un contenu DOM, tel que des éléments HTML, dans un canvas.
+
Manipulation vidéo avec la balise canvas
+
Combiner {{HTMLElement("video")}} et {{HTMLElement("canvas")}} pour manipuler des données video en temps réel.
+
+ +

Ressources

+ +

Général

+ + + +

Bibliothèques

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
+ +

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 deleted file mode 100644 index 80e8707ba3..0000000000 --- a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Manipulation vidéo avec la balise canvas -slug: Web/API/Canvas_API/Manipulating_video_using_canvas -tags: - - Canvas - - Video -translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas -original_slug: HTML/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 à :

- -

- -

À 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 :

- -

- -

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 :

- -

- -

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/manipulating_video_using_canvas/index.md b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md new file mode 100644 index 0000000000..80e8707ba3 --- /dev/null +++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md @@ -0,0 +1,159 @@ +--- +title: Manipulation vidéo avec la balise canvas +slug: Web/API/Canvas_API/Manipulating_video_using_canvas +tags: + - Canvas + - Video +translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas +original_slug: HTML/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 à :

+ +

+ +

À 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 :

+ +

+ +

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 :

+ +

+ +

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 deleted file mode 100644 index d21ac69028..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: Animations avancées -slug: Web/API/Canvas_API/Tutorial/Advanced_animations -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations -original_slug: Web/API/Canvas_API/Tutoriel_canvas/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.

- -

Deuxième démo

- - - - - -

{{EmbedLiveSample("deuxième_démo", "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);
- -

Troisième démo

- - - - - -

{{EmbedLiveSample("troisième_démo", "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/advanced_animations/index.md b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md new file mode 100644 index 0000000000..d21ac69028 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -0,0 +1,367 @@ +--- +title: Animations avancées +slug: Web/API/Canvas_API/Tutorial/Advanced_animations +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +original_slug: Web/API/Canvas_API/Tutoriel_canvas/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.

+ +

Deuxième démo

+ + + + + +

{{EmbedLiveSample("deuxième_démo", "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);
+ +

Troisième démo

+ + + + + +

{{EmbedLiveSample("troisième_démo", "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 deleted file mode 100644 index 12d7d76e45..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,693 +0,0 @@ ---- -title: Ajout de styles et de couleurs -slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors -tags: - - Canvas - - Couleurs - - Formes géométriques - - Graphismes - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors -original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs ---- -
{{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).

- -
-

Note : 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, "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", "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", "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", "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", "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", "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", "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 :

- - - -

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", "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", "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", "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", "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 = '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);
-
-  }
-}
- - - - - -

Le résultat ressemble à ceci :

- -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "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", "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", "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/applying_styles_and_colors/index.md b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md new file mode 100644 index 0000000000..12d7d76e45 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -0,0 +1,693 @@ +--- +title: Ajout de styles et de couleurs +slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +tags: + - Canvas + - Couleurs + - Formes géométriques + - Graphismes + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs +--- +
{{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).

+ +
+

Note : 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, "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", "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", "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", "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", "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", "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", "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 :

+ + + +

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", "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", "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", "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", "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 = '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);
+
+  }
+}
+ + + + + +

Le résultat ressemble à ceci :

+ +

{{EmbedLiveSample("A_createPattern_example", "180", "180", "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", "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", "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 deleted file mode 100644 index e37d15eba9..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Animations basiques -slug: Web/API/Canvas_API/Tutorial/Basic_animations -tags: - - Canvas - - Graphiques - - HTML - - HTML5 - - Intermédiaire - - Tutoriel -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations -original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques ---- -
{{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.

- -
-

Note : 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 = 'canvas_sun.png';
-  moon.src = 'canvas_moon.png';
-  earth.src = '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", "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", "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 = '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_animations/index.md b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md new file mode 100644 index 0000000000..e37d15eba9 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md @@ -0,0 +1,334 @@ +--- +title: Animations basiques +slug: Web/API/Canvas_API/Tutorial/Basic_animations +tags: + - Canvas + - Graphiques + - HTML + - HTML5 + - Intermédiaire + - Tutoriel +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques +--- +
{{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.

+ +
+

Note : 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 = 'canvas_sun.png';
+  moon.src = 'canvas_moon.png';
+  earth.src = '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", "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", "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 = '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 deleted file mode 100644 index 0faa7a82ec..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Utilisation de base des canvas -slug: Web/API/Canvas_API/Tutorial/Basic_usage -tags: - - Canvas - - Graphismes - - HTML - - Tutoriel_canvas - - Tutoriels -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage -original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base ---- -

{{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, "canvas_ex1.png")}}

- -

{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md new file mode 100644 index 0000000000..0faa7a82ec --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md @@ -0,0 +1,147 @@ +--- +title: Utilisation de base des canvas +slug: Web/API/Canvas_API/Tutorial/Basic_usage +tags: + - Canvas + - Graphismes + - HTML + - Tutoriel_canvas + - Tutoriels +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base +--- +

{{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, "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 deleted file mode 100644 index f2992ea69d..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: Exemple de composition -slug: Web/API/Canvas_API/Tutorial/Compositing/Example -tags: - - Canvas - - Exemple - - Graphisme - - HTML - - HTML5 - - Tutoriel -translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example -original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/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/example/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md new file mode 100644 index 0000000000..f2992ea69d --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md @@ -0,0 +1,296 @@ +--- +title: Exemple de composition +slug: Web/API/Canvas_API/Tutorial/Compositing/Example +tags: + - Canvas + - Exemple + - Graphisme + - HTML + - HTML5 + - Tutoriel +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/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 deleted file mode 100644 index 0ce19656af..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/compositing/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Composition et découpe -slug: Web/API/Canvas_API/Tutorial/Compositing -tags: - - Canvas - - Composition - - dessin -translation_of: Web/API/Canvas_API/Tutorial/Compositing -original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition ---- -
{{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", "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/compositing/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/index.md new file mode 100644 index 0000000000..0ce19656af --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.md @@ -0,0 +1,109 @@ +--- +title: Composition et découpe +slug: Web/API/Canvas_API/Tutorial/Compositing +tags: + - Canvas + - Composition + - dessin +translation_of: Web/API/Canvas_API/Tutorial/Compositing +original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition +--- +
{{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", "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 deleted file mode 100644 index b265fb649a..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html +++ /dev/null @@ -1,568 +0,0 @@ ---- -title: Dessiner des formes avec le canevas -slug: Web/API/Canvas_API/Tutorial/Drawing_shapes -tags: - - Canvas - - Graphisme - - Guide - - HTML - - HTML5 - - Intermédiaire - - Tutoriel -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes -original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques ---- -

{{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, "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, "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, "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, "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, "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, "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, "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, "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_shapes/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md new file mode 100644 index 0000000000..b265fb649a --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md @@ -0,0 +1,568 @@ +--- +title: Dessiner des formes avec le canevas +slug: Web/API/Canvas_API/Tutorial/Drawing_shapes +tags: + - Canvas + - Graphisme + - Guide + - HTML + - HTML5 + - Intermédiaire + - Tutoriel +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques +--- +

{{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, "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, "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, "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, "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, "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, "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, "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, "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 deleted file mode 100644 index 4a1dfdcfa8..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Dessin de texte avec canvas -slug: Web/API/Canvas_API/Tutorial/Drawing_text -tags: - - Canvas - - Graphismes - - HTML - - Tutoriels -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text -original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas ---- -

{{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);
- -

Playable code

- - - - - -

{{ 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/drawing_text/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md new file mode 100644 index 0000000000..4a1dfdcfa8 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md @@ -0,0 +1,156 @@ +--- +title: Dessin de texte avec canvas +slug: Web/API/Canvas_API/Tutorial/Drawing_text +tags: + - Canvas + - Graphismes + - HTML + - Tutoriels +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas +--- +

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

Playable code

+ + + + + +

{{ 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 deleted file mode 100644 index 4370d57dec..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Hit regions and accessibility -slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility -original_slug: Web/API/Canvas_API/Tutoriel_canvas/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/hit_regions_and_accessibility/index.md b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md new file mode 100644 index 0000000000..4370d57dec --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md @@ -0,0 +1,98 @@ +--- +title: Hit regions and accessibility +slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +original_slug: Web/API/Canvas_API/Tutoriel_canvas/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 deleted file mode 100644 index d10b22ec7a..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Tutoriel canvas -slug: Web/API/Canvas_API/Tutorial -tags: - - Canvas - - Guide - - HTML - - Tutoriel_canvas - - Tutoriels -translation_of: Web/API/Canvas_API/Tutorial -original_slug: Web/API/Canvas_API/Tutoriel_canvas ---- -
{{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/index.md b/files/fr/web/api/canvas_api/tutorial/index.md new file mode 100644 index 0000000000..d10b22ec7a --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/index.md @@ -0,0 +1,51 @@ +--- +title: Tutoriel canvas +slug: Web/API/Canvas_API/Tutorial +tags: + - Canvas + - Guide + - HTML + - Tutoriel_canvas + - Tutoriels +translation_of: Web/API/Canvas_API/Tutorial +original_slug: Web/API/Canvas_API/Tutoriel_canvas +--- +
{{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 deleted file mode 100644 index 700966e07c..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Optimiser les Canvas -slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas -original_slug: Web/API/Canvas_API/Tutoriel_canvas/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

- - - -

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/optimizing_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md new file mode 100644 index 0000000000..700966e07c --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -0,0 +1,111 @@ +--- +title: Optimiser les Canvas +slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +original_slug: Web/API/Canvas_API/Tutoriel_canvas/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

+ + + +

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 deleted file mode 100644 index 053a07aa30..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Manipulation de pixels avec canvas -slug: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas -translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas -original_slug: Web/API/Canvas_API/Tutoriel_canvas/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 = './assets/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 = './assets/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).

- -

Exemple de zoom

- - - - - -

{{ EmbedLiveSample('exemple_de_zoom', 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/pixel_manipulation_with_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md new file mode 100644 index 0000000000..053a07aa30 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -0,0 +1,251 @@ +--- +title: Manipulation de pixels avec canvas +slug: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +original_slug: Web/API/Canvas_API/Tutoriel_canvas/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 = './assets/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 = './assets/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).

+ +

Exemple de zoom

+ + + + + +

{{ EmbedLiveSample('exemple_de_zoom', 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 deleted file mode 100644 index eec783769b..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/transformations/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: Transformations -slug: Web/API/Canvas_API/Tutorial/Transformations -tags: - - Canvas - - Graphismes - - Guide - - HTML - - Web -translation_of: Web/API/Canvas_API/Tutorial/Transformations -original_slug: Web/API/Canvas_API/Tutoriel_canvas/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 :

- - - -

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", "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", "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 ().

- -
-

Note : 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", "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", "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", "canvas_transform.png")}}

- -

{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.md b/files/fr/web/api/canvas_api/tutorial/transformations/index.md new file mode 100644 index 0000000000..eec783769b --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.md @@ -0,0 +1,269 @@ +--- +title: Transformations +slug: Web/API/Canvas_API/Tutorial/Transformations +tags: + - Canvas + - Graphismes + - Guide + - HTML + - Web +translation_of: Web/API/Canvas_API/Tutorial/Transformations +original_slug: Web/API/Canvas_API/Tutoriel_canvas/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 :

+ + + +

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", "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", "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 ().

+ +
+

Note : 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", "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", "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", "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 deleted file mode 100644 index cd72e968a9..0000000000 --- a/files/fr/web/api/canvas_api/tutorial/using_images/index.html +++ /dev/null @@ -1,355 +0,0 @@ ---- -title: Utilisation d'images -slug: Web/API/Canvas_API/Tutorial/Using_images -tags: - - Advanced - - Canvas - - Graphics - - HTML - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Using_images -original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images ---- -

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

- -

Jusqu'à présent, nous avons créé nos propres formes et styles appliqués. L'une des fonctionnalités les plus intéressantes de <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 dans un canevas se déroule en deux étapes :

- -
    -
  1. L'obtention d'une référence à un objet 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. Le dessin de l'image à l'aide de la fonction drawImage() .
    3. -
- -

Voyons comment faire.

- -

Obtenir des images à dessiner

- -

L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :

- -
-
HTMLImageElement
-
Il s'agit d'images créées à l'aide du constructeur Image(), ainsi que de tout élément HTML <img>.
-
SVGImageElement
-
Ce sont des images incorporées en utilisant l'élément SVG <image>.
-
HTMLVideoElement
-
L'utilisation d'un élément HTML <video> comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.
-
HTMLCanvasElement
-
Vous pouvez utiliser un autre élément <canvas> comme source d'image.
-
- -

Ces sources sont collectivement référencées par le type CanvasImageSource.

- -

Il existe plusieurs façons d'obtenir des images pour une utilisation sur un canevas.

- -

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 :

- - - -

Utilisation d'images d'un autre domaine

- -

En utilisant l'attribut crossorigin d'un élément <img> (reflété par la propriété 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 corrompre 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 document.getElementsByTagName() ou 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 HTMLImageElement dans le script même. Pour ce faire, vous pouvez utiliser le constructeur Image().

- -
-let 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 pourra même déclencher une exception). Utilisez donc l'événement load pour ne pas dessiner avant que l'image ne soit chargée :

- -
-let 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 gérer plus d'une image, vous devrez recourir à quelque chose de plus astucieux. Nous ne verrons pas les stratégies de préchargement dans ce tutoriel, toutefois, gardez à l'esprit l'éventuelle nécessité de ces techniques.

- -

Intégration d'une image via une URL de données

- -

Un autre moyen possible d'inclure des images consiste à utiliser les URL de données (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.

- -
-let 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. Cela permet également d'encapsuler dans un fichier tous vos CSS, JavaScript, HTML et images, ce qui les rend plus portables vers d'autres endroits.

- -

Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et que, 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 <video> (même si la vidéo n'est pas visible). Par exemple, si vous avez un élément <video> avec l'identifiant myvideo, vous pouvez faire :

- -
-function getMyVideo() {
-  let canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    let ctx = canvas.getContext('2d');
-
-    return document.getElementById('myvideo');
-  }
-}
-
- -

Cela renvoie l'objet 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 :

- -
-
drawImage(image, x, y)
-
Dessine le CanvasImageSource spécifié par le paramètre image aux coordonnées (x, y).
-
- -
-

Note : 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.

- - - -
-function draw() {
-  console.log("tt");
-  let ctx = document.getElementById('canvas').getContext('2d');
-  let 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 = 'backdrop.png';
-}
-
- -

Le graphique résultant ressemble à ceci :

- -

{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "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.

- -
-
drawImage(image, x, y, width, height)
-
Cette variante ajoute les paramètres width et height qui indiquent la taille à laquelle mettre à l'échelle l'image lorsqu'elle est dessinée sur le canevas.
-
- -

Exemple : mosaïque à partir d'une image

- -

Dans cet exemple, nous utiliserons une image comme fond d'écran en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle qui place 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.

-
- - - -
-function draw() {
-  let ctx = document.getElementById('canvas').getContext('2d');
-  let img = new Image();
-  img.onload = function() {
-    for (let i = 0; i < 4; i++) {
-      for (let j = 0; j < 3; j++) {
-        ctx.drawImage(img, j * 50, i * 38, 50, 38);
-      }
-    }
-  };
-  img.src = 'rhino.jpg';
-}
-
- -

Le canevas résultant ressemble à ceci :

- -

{{EmbedLiveSample("example_tiling_an_image", 160, 160, "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.

- -
-
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 puis dessine cette portion de l'image dans le canevas en le plaçant sur le canevas (aux coordonnées dx, dy) et le redimensionne à la taille spécifiée par dWidth et dHeight.
-
- -

Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image qui suit. 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.

- -Un schéma avec l'image source et le canevas destination qui illustre les rôles de chacun des paramètres. - -

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="rhino.jpg" width="300" height="227">
-     <img id="frame" src="canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
-</html>
-
- -
-function draw() {
-  let canvas = document.getElementById('canvas');
-  let ctx = canvas.getContext('2d');
-
-  // On dessine la portion d'image
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
-
-  // On dessine le cadre
-  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 HTMLImageElement, nous les avons incluses comme balises <img> directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées via la propriété CSS display qui vaut none.

- -

{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}}

- -

Chaque <img> se voit attribuer un attribut id, ce qui facilite leur sélection en utilisant document.getElementById(). Nous utilisons 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-dessus 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 <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.

- -

Dans le code qui suit, nous parcourons le conteneur document.images et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement l'utilisation de la méthode 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="gallery_1.jpg"></td>
-      <td><img src="gallery_2.jpg"></td>
-      <td><img src="gallery_3.jpg"></td>
-      <td><img src="gallery_4.jpg"></td>
-    </tr>
-    <tr>
-      <td><img src="gallery_5.jpg"></td>
-      <td><img src="gallery_6.jpg"></td>
-      <td><img src="gallery_7.jpg"></td>
-      <td><img src="gallery_8.jpg"></td>
-    </tr>
-    </table>
-    <img id="frame" src="canvas_picture_frame.png" width="132" height="150">
-  </body>
-</html>
-
- -

Voici la feuille de style CSS pour mettre en forme :

- -
-body {
-  background: 0 -100px repeat-x url(bg_gallery.png) #4F191A;
-  margin: 10px;
-}
-
-img {
-  display: none;
-}
-
-table {
-  margin: 0 auto;
-}
-
-td {
-  padding: 15px;
-}
-
- -

Relions l'ensemble avec du JavaScript qui permettra de dessiner les images encadrées :

- -
-function draw() {
-
-  // Boucle à travers toutes les images
-  for (let 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 le canevas
-      ctx.drawImage(document.images[i], 15, 20);
-
-      // Ajoute un cadre
-      ctx.drawImage(document.getElementById('frame'), 0, 0);
-    }
-  }
-}
-
- -

{{EmbedLiveSample("art_gallery_example", 725, 400)}}

- -

Contrôler 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 redimensionnement. Vous pouvez utiliser la propriété imageSmoothingEnabled du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors du redimensionnement des images dans votre contexte. Par défaut, cette propriété vaut true, ce qui signifie que les images seront lissées lors du redimensionnement. Cette fonctionnalité peut être désactivée ainsi :

- -
-ctx.mozImageSmoothingEnabled = false;
-ctx.webkitImageSmoothingEnabled = false;
-ctx.msImageSmoothingEnabled = false;
-ctx.imageSmoothingEnabled = false;
-
- -

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

diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/index.md b/files/fr/web/api/canvas_api/tutorial/using_images/index.md new file mode 100644 index 0000000000..cd72e968a9 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.md @@ -0,0 +1,355 @@ +--- +title: Utilisation d'images +slug: Web/API/Canvas_API/Tutorial/Using_images +tags: + - Advanced + - Canvas + - Graphics + - HTML + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Using_images +original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images +--- +

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

+ +

Jusqu'à présent, nous avons créé nos propres formes et styles appliqués. L'une des fonctionnalités les plus intéressantes de <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 dans un canevas se déroule en deux étapes :

+ +
    +
  1. L'obtention d'une référence à un objet 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. Le dessin de l'image à l'aide de la fonction drawImage() .
    3. +
+ +

Voyons comment faire.

+ +

Obtenir des images à dessiner

+ +

L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :

+ +
+
HTMLImageElement
+
Il s'agit d'images créées à l'aide du constructeur Image(), ainsi que de tout élément HTML <img>.
+
SVGImageElement
+
Ce sont des images incorporées en utilisant l'élément SVG <image>.
+
HTMLVideoElement
+
L'utilisation d'un élément HTML <video> comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.
+
HTMLCanvasElement
+
Vous pouvez utiliser un autre élément <canvas> comme source d'image.
+
+ +

Ces sources sont collectivement référencées par le type CanvasImageSource.

+ +

Il existe plusieurs façons d'obtenir des images pour une utilisation sur un canevas.

+ +

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 :

+ + + +

Utilisation d'images d'un autre domaine

+ +

En utilisant l'attribut crossorigin d'un élément <img> (reflété par la propriété 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 corrompre 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 document.getElementsByTagName() ou 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 HTMLImageElement dans le script même. Pour ce faire, vous pouvez utiliser le constructeur Image().

+ +
+let 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 pourra même déclencher une exception). Utilisez donc l'événement load pour ne pas dessiner avant que l'image ne soit chargée :

+ +
+let 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 gérer plus d'une image, vous devrez recourir à quelque chose de plus astucieux. Nous ne verrons pas les stratégies de préchargement dans ce tutoriel, toutefois, gardez à l'esprit l'éventuelle nécessité de ces techniques.

+ +

Intégration d'une image via une URL de données

+ +

Un autre moyen possible d'inclure des images consiste à utiliser les URL de données (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.

+ +
+let 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. Cela permet également d'encapsuler dans un fichier tous vos CSS, JavaScript, HTML et images, ce qui les rend plus portables vers d'autres endroits.

+ +

Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et que, 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 <video> (même si la vidéo n'est pas visible). Par exemple, si vous avez un élément <video> avec l'identifiant myvideo, vous pouvez faire :

+ +
+function getMyVideo() {
+  let canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    let ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+
+ +

Cela renvoie l'objet 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 :

+ +
+
drawImage(image, x, y)
+
Dessine le CanvasImageSource spécifié par le paramètre image aux coordonnées (x, y).
+
+ +
+

Note : 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.

+ + + +
+function draw() {
+  console.log("tt");
+  let ctx = document.getElementById('canvas').getContext('2d');
+  let 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 = 'backdrop.png';
+}
+
+ +

Le graphique résultant ressemble à ceci :

+ +

{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "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.

+ +
+
drawImage(image, x, y, width, height)
+
Cette variante ajoute les paramètres width et height qui indiquent la taille à laquelle mettre à l'échelle l'image lorsqu'elle est dessinée sur le canevas.
+
+ +

Exemple : mosaïque à partir d'une image

+ +

Dans cet exemple, nous utiliserons une image comme fond d'écran en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle qui place 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.

+
+ + + +
+function draw() {
+  let ctx = document.getElementById('canvas').getContext('2d');
+  let img = new Image();
+  img.onload = function() {
+    for (let i = 0; i < 4; i++) {
+      for (let j = 0; j < 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'rhino.jpg';
+}
+
+ +

Le canevas résultant ressemble à ceci :

+ +

{{EmbedLiveSample("example_tiling_an_image", 160, 160, "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.

+ +
+
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 puis dessine cette portion de l'image dans le canevas en le plaçant sur le canevas (aux coordonnées dx, dy) et le redimensionne à la taille spécifiée par dWidth et dHeight.
+
+ +

Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image qui suit. 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.

+ +Un schéma avec l'image source et le canevas destination qui illustre les rôles de chacun des paramètres. + +

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="rhino.jpg" width="300" height="227">
+     <img id="frame" src="canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+
+ +
+function draw() {
+  let canvas = document.getElementById('canvas');
+  let ctx = canvas.getContext('2d');
+
+  // On dessine la portion d'image
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // On dessine le cadre
+  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 HTMLImageElement, nous les avons incluses comme balises <img> directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées via la propriété CSS display qui vaut none.

+ +

{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}}

+ +

Chaque <img> se voit attribuer un attribut id, ce qui facilite leur sélection en utilisant document.getElementById(). Nous utilisons 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-dessus 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 <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.

+ +

Dans le code qui suit, nous parcourons le conteneur document.images et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement l'utilisation de la méthode 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="gallery_1.jpg"></td>
+      <td><img src="gallery_2.jpg"></td>
+      <td><img src="gallery_3.jpg"></td>
+      <td><img src="gallery_4.jpg"></td>
+    </tr>
+    <tr>
+      <td><img src="gallery_5.jpg"></td>
+      <td><img src="gallery_6.jpg"></td>
+      <td><img src="gallery_7.jpg"></td>
+      <td><img src="gallery_8.jpg"></td>
+    </tr>
+    </table>
+    <img id="frame" src="canvas_picture_frame.png" width="132" height="150">
+  </body>
+</html>
+
+ +

Voici la feuille de style CSS pour mettre en forme :

+ +
+body {
+  background: 0 -100px repeat-x url(bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

Relions l'ensemble avec du JavaScript qui permettra de dessiner les images encadrées :

+ +
+function draw() {
+
+  // Boucle à travers toutes les images
+  for (let 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 le canevas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Ajoute un cadre
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}
+
+ +

{{EmbedLiveSample("art_gallery_example", 725, 400)}}

+ +

Contrôler 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 redimensionnement. Vous pouvez utiliser la propriété imageSmoothingEnabled du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors du redimensionnement des images dans votre contexte. Par défaut, cette propriété vaut true, ce qui signifie que les images seront lissées lors du redimensionnement. Cette fonctionnalité peut être désactivée ainsi :

+ +
+ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+
+ +

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

diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.html b/files/fr/web/api/canvasgradient/addcolorstop/index.html deleted file mode 100644 index f88d7413a9..0000000000 --- a/files/fr/web/api/canvasgradient/addcolorstop/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: CanvasGradient.addColorStop() -slug: Web/API/CanvasGradient/addColorStop -tags: - - API - - Canvas - - CanvasGradient - - Méthode - - Reference -translation_of: Web/API/CanvasGradient/addColorStop ---- -
{{APIRef("Canvas API")}}
- -

La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un décalage et une couleur, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée.

- -

Syntaxe

- -
void gradient.addColorStop(décalage, couleur);
-
- -

Paramètres

- -
-
décalage
-
Un nombre entre 0 et 1. Une erreur INDEX_SIZE_ERR est générée, si le nombre n'est pas dans cette plage.
-
couleur
-
Une {{cssxref ("<color>")}} CSS. Une erreur SYNTAX_ERR est générée, si la valeur ne peut pas être analysée en tant que valeur <color> CSS.
-
- -

Exemples

- -

Utilisation de la méthode addColorStop 

- -

Il s'agit seulement d'un simple fragment de code qui utilise la méthode addColorStop avec un objet {{domxref("CanvasGradient")}}.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-var degrade = ctx.createLinearGradient(0, 0, 200, 0);
-degrade.addColorStop(0, 'green');
-degrade.addColorStop(1, 'white');
-ctx.fillStyle = degrade;
-ctx.fillRect(10, 10, 200, 100);
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasGradient.addColorStop")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md new file mode 100644 index 0000000000..f88d7413a9 --- /dev/null +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md @@ -0,0 +1,124 @@ +--- +title: CanvasGradient.addColorStop() +slug: Web/API/CanvasGradient/addColorStop +tags: + - API + - Canvas + - CanvasGradient + - Méthode + - Reference +translation_of: Web/API/CanvasGradient/addColorStop +--- +
{{APIRef("Canvas API")}}
+ +

La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un décalage et une couleur, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée.

+ +

Syntaxe

+ +
void gradient.addColorStop(décalage, couleur);
+
+ +

Paramètres

+ +
+
décalage
+
Un nombre entre 0 et 1. Une erreur INDEX_SIZE_ERR est générée, si le nombre n'est pas dans cette plage.
+
couleur
+
Une {{cssxref ("<color>")}} CSS. Une erreur SYNTAX_ERR est générée, si la valeur ne peut pas être analysée en tant que valeur <color> CSS.
+
+ +

Exemples

+ +

Utilisation de la méthode addColorStop 

+ +

Il s'agit seulement d'un simple fragment de code qui utilise la méthode addColorStop avec un objet {{domxref("CanvasGradient")}}.

+ +

HTML

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

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+var degrade = ctx.createLinearGradient(0, 0, 200, 0);
+degrade.addColorStop(0, 'green');
+degrade.addColorStop(1, 'white');
+ctx.fillStyle = degrade;
+ctx.fillRect(10, 10, 200, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasGradient.addColorStop")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasgradient/index.html b/files/fr/web/api/canvasgradient/index.html deleted file mode 100644 index c3422b011a..0000000000 --- a/files/fr/web/api/canvasgradient/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: CanvasGradient -slug: Web/API/CanvasGradient -tags: - - API - - Canvas - - CanvasGradient - - Gradients - - Interface - - Reference -translation_of: Web/API/CanvasGradient ---- -
{{APIRef("Canvas API")}}
- -

L'interface CanvasGradient  représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.

- -

Propriétés

- -

Représentant un objet opaque, il n'y a aucune propriété exposée.

- -

Méthodes

- -

Il n'y a pas de méthode héritée.

- -
-
{{domxref("CanvasGradient.addColorStop()")}}
-
Ajoute un nouveau point d'arrêt, défini par un décalage et une couleur. Si le décalage n'est pas compris entre 0 et 1, une INDEX_SIZE_ERR est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS,  une SYNTAX_ERR est générée.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasGradient")}}

- -

Voir également

- - diff --git a/files/fr/web/api/canvasgradient/index.md b/files/fr/web/api/canvasgradient/index.md new file mode 100644 index 0000000000..c3422b011a --- /dev/null +++ b/files/fr/web/api/canvasgradient/index.md @@ -0,0 +1,58 @@ +--- +title: CanvasGradient +slug: Web/API/CanvasGradient +tags: + - API + - Canvas + - CanvasGradient + - Gradients + - Interface + - Reference +translation_of: Web/API/CanvasGradient +--- +
{{APIRef("Canvas API")}}
+ +

L'interface CanvasGradient  représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.

+ +

Propriétés

+ +

Représentant un objet opaque, il n'y a aucune propriété exposée.

+ +

Méthodes

+ +

Il n'y a pas de méthode héritée.

+ +
+
{{domxref("CanvasGradient.addColorStop()")}}
+
Ajoute un nouveau point d'arrêt, défini par un décalage et une couleur. Si le décalage n'est pas compris entre 0 et 1, une INDEX_SIZE_ERR est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS,  une SYNTAX_ERR est générée.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasGradient")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html deleted file mode 100644 index d51cb083df..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: CanvasRenderingContext2D.arc() -slug: Web/API/CanvasRenderingContext2D/arc -tags: - - Canvas - - CanvasRenderingContext2D - - Method - - Reference -translation_of: Web/API/CanvasRenderingContext2D/arc ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.arc() de l'API Canvas 2D permet d'ajouter un arc de cercle  au tracé, en le centrant aux positions (x, y) et avec un rayon r qui démarre à angleDépart et qui finit à angleFin, dans la direction de sensAntiHoraire (par défaut en sens horaire).

- -

Syntaxe

- -
void ctx.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);
-
- -

Paramètres

- -
-
x
-
La position en x du centre de l'arc.
-
y
-
La position en y du centre de l'arc.
-
radius (rayon)
-
Le rayon de l'arc.
-
startAngle (angle départ)
-
La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
-
endAngle (angle fin)
-
La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
-
anticlockwise (sens anti-horaire) {{optional_inline}}
-
Un {{jsxref("Booléen")}} facultatif qui, si à true(vrai), indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.
-
- -

Exemples

- -

En utilisant la méthode arc 

- -

Voici un code simple permettant de dessiner un cercle .

- -

HTML

- -
<canvas id="canvas"></canvas>
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.arc(75, 75, 50, 0, 2 * Math.PI);
-ctx.stroke();
- -

Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :

- -

Code jouable

- - - -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var textarea = document.getElementById("code");
-var reset = document.getElementById("reset");
-var edit = document.getElementById("edit");
-var code = textarea.value;
-
-function drawCanvas() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  eval(textarea.value);
-}
-
-reset.addEventListener("click", function() {
-  textarea.value = code;
-  drawCanvas();
-});
-
-edit.addEventListener("click", function() {
-  textarea.focus();
-})
-
-textarea.addEventListener("input", drawCanvas);
-window.addEventListener("load", drawCanvas);
-
- - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Exemple avec différentes formes

- -

Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par arc().

- - - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-// Draw shapes
-for (var i = 0; i < 4; i++) {
-  for(var j = 0; j < 3; j++) {
-    ctx.beginPath();
-    var x              = 25 + j * 50;               // x coordinate
-    var y              = 25 + i * 50;               // y coordinate
-    var radius         = 20;                    // Arc radius
-    var startAngle     = 0;                     // Starting point on circle
-    var endAngle       = Math.PI + (Math.PI * j) /2; // End point on circle
-    var anticlockwise  = i % 2 == 1;                // Draw anticlockwise
-
-    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-    if (i > 1) {
-      ctx.fill();
-    } else {
-      ctx.stroke();
-    }
-  }
-}
- -

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.arc")}}

- -

Notes spécifiques à Gecko

- -

Avec Gecko 2.0 {{geckoRelease("2.0")}}:

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md new file mode 100644 index 0000000000..d51cb083df --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -0,0 +1,167 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +tags: + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.arc() de l'API Canvas 2D permet d'ajouter un arc de cercle  au tracé, en le centrant aux positions (x, y) et avec un rayon r qui démarre à angleDépart et qui finit à angleFin, dans la direction de sensAntiHoraire (par défaut en sens horaire).

+ +

Syntaxe

+ +
void ctx.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);
+
+ +

Paramètres

+ +
+
x
+
La position en x du centre de l'arc.
+
y
+
La position en y du centre de l'arc.
+
radius (rayon)
+
Le rayon de l'arc.
+
startAngle (angle départ)
+
La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
+
endAngle (angle fin)
+
La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
+
anticlockwise (sens anti-horaire) {{optional_inline}}
+
Un {{jsxref("Booléen")}} facultatif qui, si à true(vrai), indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.
+
+ +

Exemples

+ +

En utilisant la méthode arc 

+ +

Voici un code simple permettant de dessiner un cercle .

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+ +

Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :

+ +

Code jouable

+ + + +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+ + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Exemple avec différentes formes

+ +

Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par arc().

+ + + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (var i = 0; i < 4; i++) {
+  for(var j = 0; j < 3; j++) {
+    ctx.beginPath();
+    var x              = 25 + j * 50;               // x coordinate
+    var y              = 25 + i * 50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI + (Math.PI * j) /2; // End point on circle
+    var anticlockwise  = i % 2 == 1;                // Draw anticlockwise
+
+    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+    if (i > 1) {
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}
+ +

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.arc")}}

+ +

Notes spécifiques à Gecko

+ +

Avec Gecko 2.0 {{geckoRelease("2.0")}}:

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html deleted file mode 100644 index e59e5be4a4..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: CanvasRenderingContext2D.beginPath() -slug: Web/API/CanvasRenderingContext2D/beginPath -tags: - - API - - Canvas - - CanvasRenderingContext2D -translation_of: Web/API/CanvasRenderingContext2D/beginPath ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.beginPath() de l'API Canvas 2D permet de commencer un nouveau chemin en vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.

- -

Syntaxe

- -
void ctx.beginPath();
-
- -

Exemples

- -

Utiliser la méthode beginPath

- -

Ceci est un simple snippet de code qui utilise la méthode beginPath.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-// Premier chemin
-ctx.beginPath();
-ctx.strokeStyle = 'blue';
-ctx.moveTo(20, 20);
-ctx.lineTo(200, 20);
-ctx.stroke();
-
-// Second chemin
-ctx.beginPath();
-ctx.strokeStyle = 'green';
-ctx.moveTo(20, 20);
-ctx.lineTo(120, 120);
-ctx.stroke();
-
- -

Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 460) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.beginPath")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md new file mode 100644 index 0000000000..e59e5be4a4 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.beginPath() +slug: Web/API/CanvasRenderingContext2D/beginPath +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/beginPath +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.beginPath() de l'API Canvas 2D permet de commencer un nouveau chemin en vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.

+ +

Syntaxe

+ +
void ctx.beginPath();
+
+ +

Exemples

+ +

Utiliser la méthode beginPath

+ +

Ceci est un simple snippet de code qui utilise la méthode beginPath.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Premier chemin
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// Second chemin
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+
+ +

Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 460) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.beginPath")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html deleted file mode 100644 index f5e140589e..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: CanvasRenderingContext2D.bezierCurveTo() -slug: Web/API/CanvasRenderingContext2D/bezierCurveTo -translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo -browser-compat: api.CanvasRenderingContext2D.bezierCurveTo ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.bezierCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode moveTo() avant de créer une courbe de Bézier.

- -

Syntaxe

- -
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-
- -

Paramètres

- -
-
cp1x
-
L'abscisse du premier point de contrôle.
-
cp1y
-
L'ordonnée du premier point de contrôle.
-
cp2x
-
L'abscisse du second point de contrôle.
-
cp2y
-
L'ordonnée du second point de contrôle.
-
x
-
L'abscisse du point d'arrivée.
-
y
-
L'ordonnée du point d'arrivée.
-
- -

Exemples

- -

Fonctionnement de bezierCurveTo()

- -

Cet exemple montre comment une courbe cubique de Bézier est dessinée.

- -

HTML

- -
-<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
-// Define canvas and context
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-// Define the points as {x, y}
-let debut = { x: 50,    y: 20  };
-let cp1 =   { x: 230,   y: 30  };
-let cp2 =   { x: 150,   y: 80  };
-let fin =   { x: 250,   y: 100 };
-
-// Courbe de Bézier cubique
-ctx.beginPath();
-ctx.moveTo(debut.x, debut.y);
-ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, fin.x, fin.y);
-ctx.stroke();
-
-// Points de début et d'arrivée
-ctx.fillStyle = 'blue';
-ctx.beginPath();
-ctx.arc(debut.x, debut.y, 5, 0, 2 * Math.PI);  // Début
-ctx.arc(fin.x, fin.y, 5, 0, 2 * Math.PI);      // Fin
-ctx.fill();
-
-// Points de contrôles
-ctx.fillStyle = 'red';
-ctx.beginPath();
-ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°1
-ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°2
-ctx.fill();
-
- -

Résultat

- -

Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.

- -

{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}

- -

Une courbe cubique de Bézier simple

- -

Cet exemple dessine une courbe cubique de Bézier simple en utilisant bezierCurveTo().

- -

HTML

- -
-<canvas id="canvas"></canvas>
-
- -

JavaScript

- -

La courbe débute au point spécifié par moveTo() : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).

- -
-const canvas = document.getElementById("canvas");
-const contexte2D = canvas.getContext("2d");
-
-contexte2D.beginPath();
-contexte2D.moveTo(30, 30);
-contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
-contexte2D.stroke();
- -

Résultat

- -

{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md new file mode 100644 index 0000000000..f5e140589e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -0,0 +1,125 @@ +--- +title: CanvasRenderingContext2D.bezierCurveTo() +slug: Web/API/CanvasRenderingContext2D/bezierCurveTo +translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo +browser-compat: api.CanvasRenderingContext2D.bezierCurveTo +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.bezierCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode moveTo() avant de créer une courbe de Bézier.

+ +

Syntaxe

+ +
void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+
+ +

Paramètres

+ +
+
cp1x
+
L'abscisse du premier point de contrôle.
+
cp1y
+
L'ordonnée du premier point de contrôle.
+
cp2x
+
L'abscisse du second point de contrôle.
+
cp2y
+
L'ordonnée du second point de contrôle.
+
x
+
L'abscisse du point d'arrivée.
+
y
+
L'ordonnée du point d'arrivée.
+
+ +

Exemples

+ +

Fonctionnement de bezierCurveTo()

+ +

Cet exemple montre comment une courbe cubique de Bézier est dessinée.

+ +

HTML

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

JavaScript

+ +
+// Define canvas and context
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Define the points as {x, y}
+let debut = { x: 50,    y: 20  };
+let cp1 =   { x: 230,   y: 30  };
+let cp2 =   { x: 150,   y: 80  };
+let fin =   { x: 250,   y: 100 };
+
+// Courbe de Bézier cubique
+ctx.beginPath();
+ctx.moveTo(debut.x, debut.y);
+ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, fin.x, fin.y);
+ctx.stroke();
+
+// Points de début et d'arrivée
+ctx.fillStyle = 'blue';
+ctx.beginPath();
+ctx.arc(debut.x, debut.y, 5, 0, 2 * Math.PI);  // Début
+ctx.arc(fin.x, fin.y, 5, 0, 2 * Math.PI);      // Fin
+ctx.fill();
+
+// Points de contrôles
+ctx.fillStyle = 'red';
+ctx.beginPath();
+ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°1
+ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°2
+ctx.fill();
+
+ +

Résultat

+ +

Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.

+ +

{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}

+ +

Une courbe cubique de Bézier simple

+ +

Cet exemple dessine une courbe cubique de Bézier simple en utilisant bezierCurveTo().

+ +

HTML

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

JavaScript

+ +

La courbe débute au point spécifié par moveTo() : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).

+ +
+const canvas = document.getElementById("canvas");
+const contexte2D = canvas.getContext("2d");
+
+contexte2D.beginPath();
+contexte2D.moveTo(30, 30);
+contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
+contexte2D.stroke();
+ +

Résultat

+ +

{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html deleted file mode 100644 index c548b4ed9e..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: CanvasRenderingContext2D.canvas -slug: Web/API/CanvasRenderingContext2D/canvas -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/canvas ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.canvas est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}.

- -

Syntaxe

- -
ctx.canvas;
- -

Exemples

- -

Soit cet élément {{HTMLElement("canvas")}}:

- -
<canvas id="canvas"></canvas>
-
- -

Vous pouvez obtenir la référence à l'élément canvas grâce à CanvasRenderingContext2D en utilisant la propriété canvas :

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-ctx.canvas // HTMLCanvasElement
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.canvas")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md new file mode 100644 index 0000000000..c548b4ed9e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md @@ -0,0 +1,59 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.canvas est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}.

+ +

Syntaxe

+ +
ctx.canvas;
+ +

Exemples

+ +

Soit cet élément {{HTMLElement("canvas")}}:

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

Vous pouvez obtenir la référence à l'élément canvas grâce à CanvasRenderingContext2D en utilisant la propriété canvas :

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.canvas")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html deleted file mode 100644 index 7bf854557e..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: CanvasRenderingContext2D.clearRect() -slug: Web/API/CanvasRenderingContext2D/clearRect -tags: - - API - - Canvas - - CanvasRendering2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/clearRect ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.clearRect() de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées (x, y) et par les tailles (largeur, hauteur), supprimant tout contenu précédemment dessiné.

- -

Syntaxe

- -
void ctx.clearRect(x, y, largeur, hauteur);
-
- -

Paramètres

- -
-
x
-
La coordonnée sur l'axe des x du point de départ du rectangle.
-
y
-
La coordonnée sur l'axe des y du point de départ du rectangle.
-
largeur
-
La largeur du rectangle.
-
hauteur
-
La hauteur de rectangle.
-
- -

Notes d'utilisation

- -

Un problème classique avec clearRect est qu'il peut apparaître comme ne fonctionnant pas si l'on n'utilise pas les trajets de façon appropriée. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé clearRect.

- -

Exemples

- -

Utilisation de la méthode clearRect

- -

Ceci est seulement un fragment de code simple qui utilise la méthode clearRect.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById("canvas");
-var ctx = canevas.getContext("2d");
-
-ctx.beginPath();
-ctx.moveTo(20,20);
-ctx.lineTo(200,20);
-ctx.lineTo(120,120);
-ctx.closePath(); // dessine la dernière ligne du triangle
-ctx.stroke();
-
-ctx.clearRect(10, 10, 100, 100);
-
-// effacer le canevas entièrement
-// ctx.clearRect(0, 0, canvas.width, canvas.height);
-
- -

Modifiez le code suivant et voyez vos changements en direct dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 400) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.clearRect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md new file mode 100644 index 0000000000..7bf854557e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -0,0 +1,141 @@ +--- +title: CanvasRenderingContext2D.clearRect() +slug: Web/API/CanvasRenderingContext2D/clearRect +tags: + - API + - Canvas + - CanvasRendering2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/clearRect +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.clearRect() de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées (x, y) et par les tailles (largeur, hauteur), supprimant tout contenu précédemment dessiné.

+ +

Syntaxe

+ +
void ctx.clearRect(x, y, largeur, hauteur);
+
+ +

Paramètres

+ +
+
x
+
La coordonnée sur l'axe des x du point de départ du rectangle.
+
y
+
La coordonnée sur l'axe des y du point de départ du rectangle.
+
largeur
+
La largeur du rectangle.
+
hauteur
+
La hauteur de rectangle.
+
+ +

Notes d'utilisation

+ +

Un problème classique avec clearRect est qu'il peut apparaître comme ne fonctionnant pas si l'on n'utilise pas les trajets de façon appropriée. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé clearRect.

+ +

Exemples

+ +

Utilisation de la méthode clearRect

+ +

Ceci est seulement un fragment de code simple qui utilise la méthode clearRect.

+ +

HTML

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

JavaScript

+ +
var canevas = document.getElementById("canvas");
+var ctx = canevas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // dessine la dernière ligne du triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// effacer le canevas entièrement
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ +

Modifiez le code suivant et voyez vos changements en direct dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 400) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.clearRect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html deleted file mode 100644 index ee83dd8db5..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: CanvasRenderingContext2D.closePath() -slug: Web/API/CanvasRenderingContext2D/closePath -tags: - - Méthode -translation_of: Web/API/CanvasRenderingContext2D/closePath ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.closePath() de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien.

- -

Syntax

- -
void ctx.closePath();
-
- -

Exemples

- -

Utiliser la méthode closePath

- -

Voici un exemple d'utilisation de la méthode closePath.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-
-ctx.beginPath();
-ctx.moveTo(20,20);
-ctx.lineTo(200,20);
-ctx.lineTo(120,120);
-ctx.closePath(); // ferme le triangle par une ligne droite
-ctx.stroke();
-
- -

Editez le code ci-dessous et observez les répercutions dans le canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 400) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.closePath")}}

- -

Voir également

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md new file mode 100644 index 0000000000..ee83dd8db5 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -0,0 +1,112 @@ +--- +title: CanvasRenderingContext2D.closePath() +slug: Web/API/CanvasRenderingContext2D/closePath +tags: + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/closePath +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.closePath() de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien.

+ +

Syntax

+ +
void ctx.closePath();
+
+ +

Exemples

+ +

Utiliser la méthode closePath

+ +

Voici un exemple d'utilisation de la méthode closePath.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // ferme le triangle par une ligne droite
+ctx.stroke();
+
+ +

Editez le code ci-dessous et observez les répercutions dans le canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 400) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.closePath")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html deleted file mode 100644 index d8bab917a3..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: CanvasRenderingContext2D.createLinearGradient() -slug: Web/API/CanvasRenderingContext2D/createLinearGradient -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Gradients - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.createLinearGradient() de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.

- -

- -

Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.

- -

NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".

- -

Syntaxe

- -
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
-
- -

Paramètres

- -
-
x0
-
La coordonnée sur l'axe des x du point de début.
-
y0
-
La coordonnée sur l'axe des y du point de début.
-
x1
-
La coordonnée sur l'axe des x du point de fin.
-
y1
-
La coordonnée sur l'axe des y du point de fin.
-
- -

Valeur retournée

- -
-
{{domxref("CanvasGradient")}}
-
Un CanvasGradient linéaire initialisé avec la ligne spécifiée.
-
- -

Exemples

- -

Utilisation de la méthode createLinearGradient

- -

Ceci est seulement un simple fragment de code qui utilise la méthode createLinearGradient pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var gradient = ctx.createLinearGradient(0, 0, 200, 0);
-gradient.addColorStop(0, 'green');
-gradient.addColorStop(1, 'white');
-ctx.fillStyle = gradient;
-ctx.fillRect(10, 10, 200, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}

- -

Notes spécifiques à Gecko

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md new file mode 100644 index 0000000000..d8bab917a3 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -0,0 +1,147 @@ +--- +title: CanvasRenderingContext2D.createLinearGradient() +slug: Web/API/CanvasRenderingContext2D/createLinearGradient +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Gradients + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.createLinearGradient() de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.

+ +

+ +

Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.

+ +

NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".

+ +

Syntaxe

+ +
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
+
+ +

Paramètres

+ +
+
x0
+
La coordonnée sur l'axe des x du point de début.
+
y0
+
La coordonnée sur l'axe des y du point de début.
+
x1
+
La coordonnée sur l'axe des x du point de fin.
+
y1
+
La coordonnée sur l'axe des y du point de fin.
+
+ +

Valeur retournée

+ +
+
{{domxref("CanvasGradient")}}
+
Un CanvasGradient linéaire initialisé avec la ligne spécifiée.
+
+ +

Exemples

+ +

Utilisation de la méthode createLinearGradient

+ +

Ceci est seulement un simple fragment de code qui utilise la méthode createLinearGradient pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var gradient = ctx.createLinearGradient(0, 0, 200, 0);
+gradient.addColorStop(0, 'green');
+gradient.addColorStop(1, 'white');
+ctx.fillStyle = gradient;
+ctx.fillRect(10, 10, 200, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}

+ +

Notes spécifiques à Gecko

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html deleted file mode 100644 index e4dae769e1..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: CanvasRenderingContext2D.direction -slug: Web/API/CanvasRenderingContext2D/direction -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Experimental - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/direction ---- -
{{APIRef}} {{SeeCompatTable}}
- -

La propriété CanvasRenderingContext2D.direction de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.

- -

Syntaxe

- -
ctx.direction = "ltr" || "rtl" || "inherit";
-
- -

Options

- -

Valeurs possibles :

- -
-
ltr
-
La direction du texte est de gauche à droite.
-
rtl
-
La direction du texte est de droite à gauche.
-
inherit
-
La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.
-
- -

La valeur par défaut est inherit.

- -

Exemples

- -

Utilisation de la propriété direction

- -

Ceci est seulement un fragment de code simple utilisant la propriété direction pour indiquer un réglage de ligne de base différent.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.direction = 'ltr';
-ctx.strokeText('Hello world', 0, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{EmbedLiveSample('code_jouable', 700, 360)}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.direction")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md new file mode 100644 index 0000000000..e4dae769e1 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -0,0 +1,125 @@ +--- +title: CanvasRenderingContext2D.direction +slug: Web/API/CanvasRenderingContext2D/direction +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/direction +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

La propriété CanvasRenderingContext2D.direction de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.

+ +

Syntaxe

+ +
ctx.direction = "ltr" || "rtl" || "inherit";
+
+ +

Options

+ +

Valeurs possibles :

+ +
+
ltr
+
La direction du texte est de gauche à droite.
+
rtl
+
La direction du texte est de droite à gauche.
+
inherit
+
La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.
+
+ +

La valeur par défaut est inherit.

+ +

Exemples

+ +

Utilisation de la propriété direction

+ +

Ceci est seulement un fragment de code simple utilisant la propriété direction pour indiquer un réglage de ligne de base différent.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.direction = 'ltr';
+ctx.strokeText('Hello world', 0, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{EmbedLiveSample('code_jouable', 700, 360)}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.direction")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html deleted file mode 100644 index 92bc5a9b9d..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: CanvasRenderingContext2D.drawImage() -slug: Web/API/CanvasRenderingContext2D/drawImage -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) -translation_of: Web/API/CanvasRenderingContext2D/drawImage ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.drawImage() de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.

- -

Syntaxe

- -
void ctx.drawImage(image, dx, dy);
-void ctx.drawImage(image, dx, dy, dLargeur, dHauteur);
-void ctx.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);
-
- -

drawImage

- -

Paramètres

- -
-
image
-
Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.
-
dx
-
La coordonnée x dans le canvas de destination où placer le coin supérieur gauche de l'image source.
-
dy
-
La coordonnée y dans le canvas de destination où placer le coin supérieur gauche de l'image source.
-
dLargeur
-
La largeur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.
-
dHauteur
-
La hauteur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.
-
sx
-
La coordonnée x du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
-
sy
-
La coordonnée y du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
-
sLargeur
-
La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins sx, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (sx ; sy) et jusqu'au bord en bas à droite.
-
sHauteur
-
La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins sy.
-
- -

Exceptions

- -
-
INDEX_SIZE_ERR
-
Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.
-
INVALID_STATE_ERR
-
L'image reçue n'en est pas une.
-
TYPE_MISMATCH_ERR
-
L'image reçue n'est pas supportée.
-
- -

Exemples

- -

Utiliser la méthode drawImage

- -

Ceci est un extrait de code utilisant la méthode drawImage :

- -

HTML

- -
<canvas id="canvas"></canvas>
-  <img id="source" src="rhino.jpg"
-       width="300" height="227">
-</div>
-
- -

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var image = document.getElementById("source");
-
-ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
-
- -

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.drawImage")}}

- -

Notes concernant la compatibilité

- - - -

Notes

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md new file mode 100644 index 0000000000..92bc5a9b9d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -0,0 +1,167 @@ +--- +title: CanvasRenderingContext2D.drawImage() +slug: Web/API/CanvasRenderingContext2D/drawImage +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/drawImage +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.drawImage() de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.

+ +

Syntaxe

+ +
void ctx.drawImage(image, dx, dy);
+void ctx.drawImage(image, dx, dy, dLargeur, dHauteur);
+void ctx.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);
+
+ +

drawImage

+ +

Paramètres

+ +
+
image
+
Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.
+
dx
+
La coordonnée x dans le canvas de destination où placer le coin supérieur gauche de l'image source.
+
dy
+
La coordonnée y dans le canvas de destination où placer le coin supérieur gauche de l'image source.
+
dLargeur
+
La largeur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.
+
dHauteur
+
La hauteur de l'image dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.
+
sx
+
La coordonnée x du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
+
sy
+
La coordonnée y du bord en haut à gauche de la partie de l'image source à dessiner dans le contexte du canvas.
+
sLargeur
+
La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins sx, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (sx ; sy) et jusqu'au bord en bas à droite.
+
sHauteur
+
La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins sy.
+
+ +

Exceptions

+ +
+
INDEX_SIZE_ERR
+
Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.
+
INVALID_STATE_ERR
+
L'image reçue n'en est pas une.
+
TYPE_MISMATCH_ERR
+
L'image reçue n'est pas supportée.
+
+ +

Exemples

+ +

Utiliser la méthode drawImage

+ +

Ceci est un extrait de code utilisant la méthode drawImage :

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+  <img id="source" src="rhino.jpg"
+       width="300" height="227">
+</div>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById("source");
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+
+ +

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.drawImage")}}

+ +

Notes concernant la compatibilité

+ + + +

Notes

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html deleted file mode 100644 index 49a19c218c..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: CanvasRenderingContext2D.ellipse() -slug: Web/API/CanvasRenderingContext2D/ellipse -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Experimental - - Méthode -translation_of: Web/API/CanvasRenderingContext2D/ellipse ---- -
{{APIRef}} {{SeeCompatTable}}
- -

La méthode CanvasRenderingContext2D.ellipse() de l'API Canvas 2D ajoute une ellipse au trajet, centrée en (x, y), les rayons rayonX et rayonY commençant à angleDeDébut et se terminant à angleDeFin, en allant dans le sens indiqué par antiHoraire (par défaut, horaire).

- -

Syntaxe

- -
void ctx.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);
-
- -

Paramètres

- -
-
x
-
La coordonnée sur l'axe des x du centre de l'ellipse.
-
y
-
La coordonnée sur l'axe des y du centre de l'ellipse.
-
rayonX
-
Le rayon du grand axe de l'ellipse.
-
rayonY
-
Le rayon du petit axe de l'ellipse.
-
rotation
-
La rotation pour cette ellipse, exprimée en radians.
-
angleDébut
-
L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.
-
angleFin
-
L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.
-
antihoraire {{optional_inline}}
-
Un {{jsxref("Boolean")}} optionnel qui, si true, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.
-
- -

Exemples

- -

Utilisation de la méthode ellipse

- -

Ceci est seulement un fragment de code simple dessinant une ellipse.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.beginPath();
-ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
-ctx.stroke();
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.ellipse")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md new file mode 100644 index 0000000000..49a19c218c --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -0,0 +1,130 @@ +--- +title: CanvasRenderingContext2D.ellipse() +slug: Web/API/CanvasRenderingContext2D/ellipse +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/ellipse +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

La méthode CanvasRenderingContext2D.ellipse() de l'API Canvas 2D ajoute une ellipse au trajet, centrée en (x, y), les rayons rayonX et rayonY commençant à angleDeDébut et se terminant à angleDeFin, en allant dans le sens indiqué par antiHoraire (par défaut, horaire).

+ +

Syntaxe

+ +
void ctx.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);
+
+ +

Paramètres

+ +
+
x
+
La coordonnée sur l'axe des x du centre de l'ellipse.
+
y
+
La coordonnée sur l'axe des y du centre de l'ellipse.
+
rayonX
+
Le rayon du grand axe de l'ellipse.
+
rayonY
+
Le rayon du petit axe de l'ellipse.
+
rotation
+
La rotation pour cette ellipse, exprimée en radians.
+
angleDébut
+
L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.
+
angleFin
+
L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.
+
antihoraire {{optional_inline}}
+
Un {{jsxref("Boolean")}} optionnel qui, si true, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.
+
+ +

Exemples

+ +

Utilisation de la méthode ellipse

+ +

Ceci est seulement un fragment de code simple dessinant une ellipse.

+ +

HTML

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

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
+ctx.stroke();
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.ellipse")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html deleted file mode 100644 index f71a817ce6..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: CanvasRenderingContext2D.fill() -slug: Web/API/CanvasRenderingContext2D/fill -tags: - - API - - Canvas - - CanvasRenderingContext2D -translation_of: Web/API/CanvasRenderingContext2D/fill ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.fill() de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.

- -

Syntaxe

- -
void ctx.fill([fillRule]);
-void ctx.fill(path[, fillRule]);
-
- -

Paramètres

- -
-
fillRule
-
L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.
- Valeurs possible: - -
-
path
-
Un chemin {{domxref("Path2D")}} à remplir.
-
- -

Exemples

- -

Utiliser la méthode fill

- -

Ceci est un simple snippet de code qui utilise la méthode fill pour remplir un chemin.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-ctx.rect(10, 10, 100, 100);
-ctx.fill();
-
- -

Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Utiliser l'option fillRule

- -

HTML

- -
<canvas id="canvas"></canvas>
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.moveTo(96.50,50.00);
-ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
-ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50);
-ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00);
-ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50);
-ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00);
-ctx.closePath();
-
-ctx.fillStyle = "lightblue";
-ctx.lineWidth = 2;
-ctx.fill("nonzero");
-ctx.stroke();
- -

Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:

- -

Code jouable 2

- - - - - -

{{EmbedLiveSample('code_jouable_2', 700, 360)}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.fill")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md new file mode 100644 index 0000000000..f71a817ce6 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -0,0 +1,197 @@ +--- +title: CanvasRenderingContext2D.fill() +slug: Web/API/CanvasRenderingContext2D/fill +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/fill +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.fill() de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.

+ +

Syntaxe

+ +
void ctx.fill([fillRule]);
+void ctx.fill(path[, fillRule]);
+
+ +

Paramètres

+ +
+
fillRule
+
L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.
+ Valeurs possible: + +
+
path
+
Un chemin {{domxref("Path2D")}} à remplir.
+
+ +

Exemples

+ +

Utiliser la méthode fill

+ +

Ceci est un simple snippet de code qui utilise la méthode fill pour remplir un chemin.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Utiliser l'option fillRule

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(96.50,50.00);
+ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
+ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50);
+ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00);
+ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50);
+ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00);
+ctx.closePath();
+
+ctx.fillStyle = "lightblue";
+ctx.lineWidth = 2;
+ctx.fill("nonzero");
+ctx.stroke();
+ +

Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:

+ +

Code jouable 2

+ + + + + +

{{EmbedLiveSample('code_jouable_2', 700, 360)}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.fill")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html deleted file mode 100644 index cd98d786b5..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: CanvasRenderingContext2D.fillRect() -slug: Web/API/CanvasRenderingContext2D/fillRect -tags: - - API - - Canvas - - CanvasRendering2D - - Méthode -translation_of: Web/API/CanvasRenderingContext2D/fillRect ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.fillRect() de l'API 2D des Canvas dessine un rectangle plein aux coordonnées (x, y), aux dimensions déterminées par largeur et hauteur et au style déterminé par l'attribut fillStyle.

- -

Syntaxe

- -
void ctx.fillRect(x, y, largeur, hauteur);
-
- -

Paramètres

- -
-
x
-
L'ordonnée x des coordonnées du point de départ du rectangle.
-
y
-
L'abscisse y des coordonnées du point de départ du rectangle.
-
largeur
-
La largeur du rectangle.
-
hauteur
-
La hauteur de rectangle.
-
- -

Exemples

- -

Utilisation de la méthode fillRect

- -

Ceci est juste un extrait de code qui utilise la méthode fillRect.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-ctx.fillStyle = "green";
-ctx.fillRect(10, 10, 100, 100);
-
-// remplir la balise entièrement
-// ctx.fillRect(0, 0, canvas.width, canvas.height);
-
- -

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.fillRect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md new file mode 100644 index 0000000000..cd98d786b5 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -0,0 +1,124 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +tags: + - API + - Canvas + - CanvasRendering2D + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.fillRect() de l'API 2D des Canvas dessine un rectangle plein aux coordonnées (x, y), aux dimensions déterminées par largeur et hauteur et au style déterminé par l'attribut fillStyle.

+ +

Syntaxe

+ +
void ctx.fillRect(x, y, largeur, hauteur);
+
+ +

Paramètres

+ +
+
x
+
L'ordonnée x des coordonnées du point de départ du rectangle.
+
y
+
L'abscisse y des coordonnées du point de départ du rectangle.
+
largeur
+
La largeur du rectangle.
+
hauteur
+
La hauteur de rectangle.
+
+ +

Exemples

+ +

Utilisation de la méthode fillRect

+ +

Ceci est juste un extrait de code qui utilise la méthode fillRect.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// remplir la balise entièrement
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ +

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.fillRect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html deleted file mode 100644 index 598ec204af..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: CanvasRenderingContext2D.fillStyle -slug: Web/API/CanvasRenderingContext2D/fillStyle -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/fillStyle ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.fillStyle de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est #000 (black).

- -

Voir également le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

- -

Syntaxe

- -
ctx.fillStyle = color;
-ctx.fillStyle = gradient;
-ctx.fillStyle = pattern;
-
- -

Options

- -
-
color
-
Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.
-
gradient
-
Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).
-
pattern
-
Un objet {{domxref("CanvasPattern")}} (une image répétée).
-
- -

Exemples

- -

Utiliser la propriété fillStyle pour définir une couleur différente

- -

Ceci est un simple snippet de code utilisant la propriété fillStyle pour définir une couleur différente.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'blue';
-ctx.fillRect(10, 10, 100, 100);
-
- -

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Un exemple fillStyle avec les boucles for

- -

Dans cet exemple, nous allons utiliser deux boucles for pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables i et j pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.

- - - - - - -

Le résultat devrait ressembler à ça:

- -

{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.fillStyle")}}

- - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md new file mode 100644 index 0000000000..598ec204af --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -0,0 +1,158 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.fillStyle de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est #000 (black).

+ +

Voir également le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

+ +

Syntaxe

+ +
ctx.fillStyle = color;
+ctx.fillStyle = gradient;
+ctx.fillStyle = pattern;
+
+ +

Options

+ +
+
color
+
Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.
+
gradient
+
Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).
+
pattern
+
Un objet {{domxref("CanvasPattern")}} (une image répétée).
+
+ +

Exemples

+ +

Utiliser la propriété fillStyle pour définir une couleur différente

+ +

Ceci est un simple snippet de code utilisant la propriété fillStyle pour définir une couleur différente.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Un exemple fillStyle avec les boucles for

+ +

Dans cet exemple, nous allons utiliser deux boucles for pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables i et j pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.

+ + + + + + +

Le résultat devrait ressembler à ça:

+ +

{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.fillStyle")}}

+ + + + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html deleted file mode 100644 index fefd1c875a..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: CanvasRenderingContext2D.fillText() -slug: Web/API/CanvasRenderingContext2D/fillText -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/fillText ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.fillText() de l'API Canvas 2D écrit un texte donné à la position (x, y) donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.

- -

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.

- -

Syntaxe

- -
void ctx.fillText(texte, x, y [, largeurMax]);
-
- -

Paramètres

- -
-
texte
-
Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.
-
- -
-
x
-
La valeur de la coordonnée sur l'axe des x du point de début du texte.
-
y
-
La valeur de la coordonnée sur l'axe des y du point de fin du texte.
-
largeurMax {{optional_inline}}
-
La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.
-
- -

Exemples

- -

Utilisation de la méthode fillText

- -

Ceci est seulement un fragment de code simple utilisant la méthode fillText.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.fillText('Hello world', 50, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.fillText")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md new file mode 100644 index 0000000000..fefd1c875a --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -0,0 +1,126 @@ +--- +title: CanvasRenderingContext2D.fillText() +slug: Web/API/CanvasRenderingContext2D/fillText +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/fillText +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.fillText() de l'API Canvas 2D écrit un texte donné à la position (x, y) donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.

+ +

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.

+ +

Syntaxe

+ +
void ctx.fillText(texte, x, y [, largeurMax]);
+
+ +

Paramètres

+ +
+
texte
+
Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.
+
+ +
+
x
+
La valeur de la coordonnée sur l'axe des x du point de début du texte.
+
y
+
La valeur de la coordonnée sur l'axe des y du point de fin du texte.
+
largeurMax {{optional_inline}}
+
La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.
+
+ +

Exemples

+ +

Utilisation de la méthode fillText

+ +

Ceci est seulement un fragment de code simple utilisant la méthode fillText.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.fillText('Hello world', 50, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.fillText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.html b/files/fr/web/api/canvasrenderingcontext2d/font/index.html deleted file mode 100644 index 34b90f9580..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: CanvasRenderingContext2D.font -slug: Web/API/CanvasRenderingContext2D/font -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/font ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.font de l'API Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de police CSS. La police par défaut est 10px sans-serif.

- -

Syntaxe

- -
ctx.font = value;
-
- -

Options

- -
-
valeur
-
Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.
-
- -

Exemples

- -

Utilisation de la propriété font

- -

Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.strokeText('Hello world', 50, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Chargement de polices avec l'API CSS Font Loading

- -

A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.

- -
var f = new FontFace('test', 'url(x)');
-
-f.load().then(function() {
-  // Prêt à utiliser la police dans un contexte de canevas
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.font")}}

- -

Notes spécifiques à Gecko

- - - -

Notes relatives à Quantum

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md new file mode 100644 index 0000000000..34b90f9580 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -0,0 +1,136 @@ +--- +title: CanvasRenderingContext2D.font +slug: Web/API/CanvasRenderingContext2D/font +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/font +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.font de l'API Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de police CSS. La police par défaut est 10px sans-serif.

+ +

Syntaxe

+ +
ctx.font = value;
+
+ +

Options

+ +
+
valeur
+
Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.
+
+ +

Exemples

+ +

Utilisation de la propriété font

+ +

Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Chargement de polices avec l'API CSS Font Loading

+ +

A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.

+ +
var f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // Prêt à utiliser la police dans un contexte de canevas
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.font")}}

+ +

Notes spécifiques à Gecko

+ + + +

Notes relatives à Quantum

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html deleted file mode 100644 index 94059efba8..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: CanvasRenderingContext2D.getImageData() -slug: Web/API/CanvasRenderingContext2D/getImageData -tags: - - API - - Canvas - - Canvas API - - CanvasRenderingContext2D - - Image - - ImageData - - Méthode - - Méthodes - - References - - getImageDate -translation_of: Web/API/CanvasRenderingContext2D/getImageData ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.getImageData() de l'API Canvas 2D retourne un  objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions (sx, sy) et qui possède des attributs : largeur (sw) et hauteur (sh). Cette méthode n'est pas affectée par la matrice de transformation du canevas.

- -

Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.

- -

Syntaxe

- -
ImageData ctx.getImageData(sx, sy, sw, sh);
-
- -

Paramètres

- -
-
sx
-
La coordonnée x du coin supérieur gauche du rectangle à partir duquel ImageData sera extrait.
-
sy
-
La coordonnée y du coin supérieur gauche du rectangle à partir duquel ImageData  sera extrait.
-
sw
-
La largeur du rectangle à partir duquel ImageData sera extrait.
-
sh
-
La hauteur du rectangle à partir duquel ImageData sera extrait.
-
- -

Valeur retournée

- -

Un objet {{domxref("ImageData")}}  contenant les données de l'image pour le rectangle donné du canevas.

- -

Erreurs renvoyées

- -
-
IndexSizeError
-
Renvoyé si l'un des arguments de  largeur ou de hauteur est égal à zéro.
-
- -

Exemples

- -

Utilisation de la méthode  getImageData

- -

Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez  Manipulation de pixels avec canvas et l'objet {{domxref("ImageData")}}.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-ctx.rect(10, 10, 100, 100);
-ctx.fill();
-
-console.log(ctx.getImageData(50, 50, 100, 100));
-// ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] }
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md new file mode 100644 index 0000000000..94059efba8 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md @@ -0,0 +1,101 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +tags: + - API + - Canvas + - Canvas API + - CanvasRenderingContext2D + - Image + - ImageData + - Méthode + - Méthodes + - References + - getImageDate +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.getImageData() de l'API Canvas 2D retourne un  objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions (sx, sy) et qui possède des attributs : largeur (sw) et hauteur (sh). Cette méthode n'est pas affectée par la matrice de transformation du canevas.

+ +

Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.

+ +

Syntaxe

+ +
ImageData ctx.getImageData(sx, sy, sw, sh);
+
+ +

Paramètres

+ +
+
sx
+
La coordonnée x du coin supérieur gauche du rectangle à partir duquel ImageData sera extrait.
+
sy
+
La coordonnée y du coin supérieur gauche du rectangle à partir duquel ImageData  sera extrait.
+
sw
+
La largeur du rectangle à partir duquel ImageData sera extrait.
+
sh
+
La hauteur du rectangle à partir duquel ImageData sera extrait.
+
+ +

Valeur retournée

+ +

Un objet {{domxref("ImageData")}}  contenant les données de l'image pour le rectangle donné du canevas.

+ +

Erreurs renvoyées

+ +
+
IndexSizeError
+
Renvoyé si l'un des arguments de  largeur ou de hauteur est égal à zéro.
+
+ +

Exemples

+ +

Utilisation de la méthode  getImageData

+ +

Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez  Manipulation de pixels avec canvas et l'objet {{domxref("ImageData")}}.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] }
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html deleted file mode 100644 index 5b404da724..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: CanvasRenderingContext2D.globalAlpha -slug: Web/API/CanvasRenderingContext2D/globalAlpha -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/globalAlpha ---- -
{{APIRef}}
- -
La propriété CanvasRenderingContext2D.globalAlpha de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque).
- -
 
- -

Voir aussi le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

- -

Syntaxe

- -
ctx.globalAlpha = valeur;
-
- -

Options

- -
-
valeur
-
Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et globalAlpha conservera sa valeur précédente.
-
- -

Exemples

- -

Utilisation de la propriété globalAlpha

- -

Il s'agit seulement d'un simple fragment de code utilisant la propriété globalAlpha pour dessiner deux rectangles semi-transparents.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.globalAlpha = 0.5;
-
-ctx.fillStyle = "blue";
-ctx.fillRect(10, 10, 100, 100);
-
-ctx.fillStyle = "red";
-ctx.fillRect(50, 50, 100, 100);
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 380) }}

- -

Un exemple de globalAlpha

- -

Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle for dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image.

- -
var ctx = document.getElementById('canevas').getContext('2d');
-
-// Dessiner l'arrière-plan
-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';
-
-// Définir la valeur de transparence
-ctx.globalAlpha = 0.2;
-
-// Dessiner les 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", "canvas_globalalpha.png")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}

- -

Notes spécifiques à Gecko

- - - - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md new file mode 100644 index 0000000000..5b404da724 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -0,0 +1,173 @@ +--- +title: CanvasRenderingContext2D.globalAlpha +slug: Web/API/CanvasRenderingContext2D/globalAlpha +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/globalAlpha +--- +
{{APIRef}}
+ +
La propriété CanvasRenderingContext2D.globalAlpha de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque).
+ +
 
+ +

Voir aussi le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

+ +

Syntaxe

+ +
ctx.globalAlpha = valeur;
+
+ +

Options

+ +
+
valeur
+
Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et globalAlpha conservera sa valeur précédente.
+
+ +

Exemples

+ +

Utilisation de la propriété globalAlpha

+ +

Il s'agit seulement d'un simple fragment de code utilisant la propriété globalAlpha pour dessiner deux rectangles semi-transparents.

+ +

HTML

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

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = "red";
+ctx.fillRect(50, 50, 100, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 380) }}

+ +

Un exemple de globalAlpha

+ +

Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle for dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image.

+ +
var ctx = document.getElementById('canevas').getContext('2d');
+
+// Dessiner l'arrière-plan
+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';
+
+// Définir la valeur de transparence
+ctx.globalAlpha = 0.2;
+
+// Dessiner les 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", "canvas_globalalpha.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}

+ +

Notes spécifiques à Gecko

+ + + + + + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html deleted file mode 100644 index 7291e23e2b..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: CanvasRenderingContext2D.globalCompositeOperation -slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation -translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.globalCompositeOperation de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.

- -

Voir aussi Composition et découpe dans le Tutoriel canvas.

- -

Syntaxe

- -
ctx.globalCompositeOperation = type;
- -

type est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.

- -

Types

- -

{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

- -

Examples

- -

Changer l'opération de composition

- -

Cet exemple utilise la propriété globalCompositeOperation pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-ctx.globalCompositeOperation = 'xor';
-
-ctx.fillStyle = 'blue';
-ctx.fillRect(10, 10, 100, 100);
-
-ctx.fillStyle = 'red';
-ctx.fillRect(50, 50, 100, 100);
-
- -

Résultat

- -

{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationEtatCommentaires
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}{{Spec2('HTML WHATWG')}}
{{SpecName('Compositing')}}{{Spec2('Compositing')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}

- - - - - -

Remarques concernant Gecko

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md new file mode 100644 index 0000000000..7291e23e2b --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -0,0 +1,95 @@ +--- +title: CanvasRenderingContext2D.globalCompositeOperation +slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation +translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.globalCompositeOperation de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.

+ +

Voir aussi Composition et découpe dans le Tutoriel canvas.

+ +

Syntaxe

+ +
ctx.globalCompositeOperation = type;
+ +

type est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.

+ +

Types

+ +

{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

Examples

+ +

Changer l'opération de composition

+ +

Cet exemple utilise la propriété globalCompositeOperation pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.globalCompositeOperation = 'xor';
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationEtatCommentaires
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}{{Spec2('HTML WHATWG')}}
{{SpecName('Compositing')}}{{Spec2('Compositing')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}

+ + + + + +

Remarques concernant Gecko

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html deleted file mode 100644 index d9064377d8..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: CanvasRenderingContext2D.imageSmoothingEnabled -slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled -tags: - - API - - Canevas - - Canvas - - CanvasRenderingContext2D - - Experimental - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled ---- -
{{APIRef}} {{SeeCompatTable}}
- -

La propriété CanvasRenderingContext2D.imageSmoothingEnabled de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (true, par défaut) ou non (false). Lors de la récupération de la propriété imageSmoothingEnabled, la dernière valeur à laquelle elle a été définie est renvoyée.

- -

Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à false dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.

- -

Syntaxe

- -
ctx.imageSmoothingEnabled = valeur;
- -

Options

- -
-
valeur
-
Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.
-
- -

exemples

- -

Désactiver le lissage d'image

- -

Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé.

- -

HTML

- -
<canvas id="canvas" width="460" height="210"></canvas>
-
- -

JavaScript

- -
const canvas = document.getElementById('canvas');
-
-const ctx = canvas.getContext('2d');
-ctx.font = '16px sans-serif';
-ctx.textAlign = 'center';
-
-const img = new Image();
-img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png';
-img.onload = function() {
-  const w = img.width,
-        h = img.height;
-
-  ctx.fillText('Source', w * .5, 20);
-  ctx.drawImage(img, 0, 24, w, h);
-
-  ctx.fillText('Smoothing = TRUE', w * 2.5, 20);
-  ctx.imageSmoothingEnabled = true;
-  ctx.drawImage(img, w, 24, w * 3, h * 3);
-
-  ctx.fillText('Smoothing = FALSE', w * 5.5, 20);
-  ctx.imageSmoothingEnabled = false;
-  ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
-};
-
- -

Résultat

- -

{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md new file mode 100644 index 0000000000..d9064377d8 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -0,0 +1,99 @@ +--- +title: CanvasRenderingContext2D.imageSmoothingEnabled +slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +tags: + - API + - Canevas + - Canvas + - CanvasRenderingContext2D + - Experimental + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

La propriété CanvasRenderingContext2D.imageSmoothingEnabled de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (true, par défaut) ou non (false). Lors de la récupération de la propriété imageSmoothingEnabled, la dernière valeur à laquelle elle a été définie est renvoyée.

+ +

Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à false dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.

+ +

Syntaxe

+ +
ctx.imageSmoothingEnabled = valeur;
+ +

Options

+ +
+
valeur
+
Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.
+
+ +

exemples

+ +

Désactiver le lissage d'image

+ +

Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé.

+ +

HTML

+ +
<canvas id="canvas" width="460" height="210"></canvas>
+
+ +

JavaScript

+ +
const canvas = document.getElementById('canvas');
+
+const ctx = canvas.getContext('2d');
+ctx.font = '16px sans-serif';
+ctx.textAlign = 'center';
+
+const img = new Image();
+img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png';
+img.onload = function() {
+  const w = img.width,
+        h = img.height;
+
+  ctx.fillText('Source', w * .5, 20);
+  ctx.drawImage(img, 0, 24, w, h);
+
+  ctx.fillText('Smoothing = TRUE', w * 2.5, 20);
+  ctx.imageSmoothingEnabled = true;
+  ctx.drawImage(img, w, 24, w * 3, h * 3);
+
+  ctx.fillText('Smoothing = FALSE', w * 5.5, 20);
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
+};
+
+ +

Résultat

+ +

{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.html b/files/fr/web/api/canvasrenderingcontext2d/index.html deleted file mode 100644 index 73758824a3..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/index.html +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: CanvasRenderingContext2D -slug: Web/API/CanvasRenderingContext2D -tags: - - API - - Canvas - - CanvasRenderingContext2D - - graphique -translation_of: Web/API/CanvasRenderingContext2D ---- -

{{APIRef}}

- -

L'interface CanvasRenderingContext2D est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}.

- -

Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <canvas>, en fournissant "2d" comme argument :

- -
var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
-var ctx = canevas.getContext('2d');
-
- -

Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :

- -
ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle
-ctx.fillRect(10, 10, 55, 50);   // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50
-
- -

Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le tutoriel canvas a davantage d'informations, d'exemples et de ressources également.

- -

Dessin de rectangles

- -

Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.

- -
-
{{domxref("CanvasRenderingContext2D.clearRect()")}}
-
Initialise tous les pixels dans le rectangle défini par le point de départ (x, y) et la taille (largeur, hauteur) à noir transparent, en effaçant tout contenu précédemment dessiné.
-
{{domxref("CanvasRenderingContext2D.fillRect()")}}
-
Dessine un rectangle rempli à la position (x, y) dont la taille est déterminée par largeur et hauteur.
-
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
-
Peint un rectangle ayant un point de départ en (x, y), une largeur l et une hauteur h sur le canevas, en utilisant le style de trait en cours.
-
- -

Dessiner du texte

- -

Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.

- -
-
{{domxref("CanvasRenderingContext2D.fillText()")}}
-
Dessine (rempli) un texte donné à la position (x,y) donnée.
-
{{domxref("CanvasRenderingContext2D.strokeText()")}}
-
Dessine (contour) un texte donné à la position (x, y) donnée.
-
{{domxref("CanvasRenderingContext2D.measureText()")}}
-
Renvoie un objet {{domxref("TextMetrics")}}.
-
- -

Styles de ligne

- -

Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth")}}
-
Largeur des lignes. Défaut 1.0
-
{{domxref("CanvasRenderingContext2D.lineCap")}}
-
Type de finission pour la fin de la ligne. Valeurs possible: butt (défaut), round, square.
-
{{domxref("CanvasRenderingContext2D.lineJoin")}}
-
Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: round, bevel, miter (défaut).
-
{{domxref("CanvasRenderingContext2D.miterLimit")}}
-
Le taux limite du miter. Sa valeur par défaut est 10.
-
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
-
Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.
-
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
-
Définit le modèle du trait courant.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
-
Specifies where to start a dash array on a line.
-
- -

Styles de texte

- -

Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.

- -
-
{{domxref("CanvasRenderingContext2D.font")}}
-
Paramètre de fonte dont la valeur par défaut est 10px sans-serif.
-
{{domxref("CanvasRenderingContext2D.textAlign")}}
-
Paramètre d’alignement horizontal. Ses valeurs possibles sont : start (par défaut), end, left, right et center.
-
{{domxref("CanvasRenderingContext2D.textBaseline")}}
-
Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : top, hanging, middle, alphabetic (par défaut), ideographic, bottom.
-
{{domxref("CanvasRenderingContext2D.direction")}}
-
Direction d’affichage. Ses valeurs possibles sont : ltr, rtl, inherit (par défaut).
-
- -

Fill and stroke styles

- -

Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle")}}
-
Color or style to use inside shapes. Default #000 (black).
-
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
-
Color or style to use for the lines around shapes. Default #000 (black).
-
- -

Gradients and patterns

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
-
Creates a linear gradient along the line given by the coordinates represented by the parameters.
-
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
-
Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
-
{{domxref("CanvasRenderingContext2D.createPattern()")}}
-
Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.
-
- -

Shadows

- -
-
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
-
Specifies the blurring effect. Default 0
-
{{domxref("CanvasRenderingContext2D.shadowColor")}}
-
Color of the shadow. Default fully-transparent black.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
-
Horizontal distance the shadow will be offset. Default 0.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
-
Vertical distance the shadow will be offset. Default 0.
-
- -

Paths

- -

The following methods can be used to manipulate paths of objects.

- -
-
{{domxref("CanvasRenderingContext2D.beginPath()")}}
-
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
-
{{domxref("CanvasRenderingContext2D.closePath()")}}
-
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
-
{{domxref("CanvasRenderingContext2D.moveTo()")}}
-
Moves the starting point of a new sub-path to the (x, y) coordinates.
-
{{domxref("CanvasRenderingContext2D.lineTo()")}}
-
Connects the last point in the subpath to the x, y coordinates with a straight line.
-
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
-
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo()before creating the Bézier curve.
-
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
-
Adds a quadratic Bézier curve to the current path.
-
{{domxref("CanvasRenderingContext2D.arc()")}}
-
Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
-
{{domxref("CanvasRenderingContext2D.arcTo()")}}
-
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
-
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
-
Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
-
{{domxref("CanvasRenderingContext2D.rect()")}}
-
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
-
- -

Drawing paths

- -
-
{{domxref("CanvasRenderingContext2D.fill()")}}
-
Fills the subpaths with the current fill style.
-
{{domxref("CanvasRenderingContext2D.stroke()")}}
-
Strokes the subpaths with the current stroke style.
-
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
-
If a given element is focused, this method draws a focus ring around the current path.
-
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
-
Scrolls the current path or a given path into the view.
-
{{domxref("CanvasRenderingContext2D.clip()")}}
-
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
-
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
-
Reports whether or not the specified point is contained in the current path.
-
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
-
Reports whether or not the specified point is inside the area contained by the stroking of a path.
-
- -

Transformations

- -

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.

- -
-
{{domxref("CanvasRenderingContext2D.currentTransform")}}
-
Current transformation matrix ({{domxref("SVGMatrix")}} object).
-
{{domxref("CanvasRenderingContext2D.rotate()")}}
-
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
-
{{domxref("CanvasRenderingContext2D.scale()")}}
-
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
-
{{domxref("CanvasRenderingContext2D.translate()")}}
-
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
-
{{domxref("CanvasRenderingContext2D.transform()")}}
-
Multiplies the current transformation matrix with the matrix described by its arguments.
-
{{domxref("CanvasRenderingContext2D.setTransform()")}}
-
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
-
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
-
Resets the current transform by the identity matrix.
-
- -

Compositing

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
-
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0(opaque).
-
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
-
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.
-
- -

Drawing images

- -
-
{{domxref("CanvasRenderingContext2D.drawImage()")}}
-
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
-
- -

Pixel manipulation

- -

See also the {{domxref("ImageData")}} object.

- -
-
{{domxref("CanvasRenderingContext2D.createImageData()")}}
-
Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.
-
{{domxref("CanvasRenderingContext2D.getImageData()")}}
-
Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
-
{{domxref("CanvasRenderingContext2D.putImageData()")}}
-
Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
-
- -

Image smoothing

- -
-
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
-
Image smoothing mode; if disabled, images will not be smoothed if scaled.
-
- -

The canvas state

- -

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

- -
-
{{domxref("CanvasRenderingContext2D.save()")}}
-
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
-
{{domxref("CanvasRenderingContext2D.restore()")}}
-
Restores the drawing style state to the last element on the 'state stack' saved by save().
-
{{domxref("CanvasRenderingContext2D.canvas")}}
-
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
-
- -

Hit regions

- -
-
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
-
Adds a hit region to the canvas.
-
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
-
Removes the hit region with the specified id from the canvas.
-
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
-
Removes all hit regions from the canvas.
-
- -

Non-standard APIs

- - - -

Most of these APIs are deprecated and will be removed in the future.

- -
-
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
-
Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
-
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
-
This is redundant with an equivalent overload of drawImage.
-
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
-
Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
-
Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
-
Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
-
Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
-
Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
-
Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
-
Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
-
Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
-
Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
-
Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
-
Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
-
Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
-
- - - -
-
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
-
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
-
- -

WebKit only

- -
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
-
The backing store size in relation to the canvas element. See High DPI Canvas.
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
-
Intended for HD backing stores, but removed from canvas specifications.
-
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
-
Intended for HD backing stores, but removed from canvas specifications.
-
- -
-
- -

Gecko only

- -
-
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
-
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
-
- -

Prefixed APIs

- -
-
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
-
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
-
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
-
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
-
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
-
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
-
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
-
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
-
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
-
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
-
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
-
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
-
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
-
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
-
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
-
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
-
- -

Internal APIs (chrome-context only)

- -
-
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
-
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
-
{{non-standard_inline}} CanvasRenderingContext2D.demote()
-
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
-
- -

Internet Explorer

- -
-
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
-
The fill rule to use. This must be one of evenodd or nonzero (default).
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- -

{{Compat("api.CanvasRenderingContext2D")}}

- -

See also

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.md b/files/fr/web/api/canvasrenderingcontext2d/index.md new file mode 100644 index 0000000000..73758824a3 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/index.md @@ -0,0 +1,380 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - graphique +translation_of: Web/API/CanvasRenderingContext2D +--- +

{{APIRef}}

+ +

L'interface CanvasRenderingContext2D est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}.

+ +

Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <canvas>, en fournissant "2d" comme argument :

+ +
var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
+var ctx = canevas.getContext('2d');
+
+ +

Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :

+ +
ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle
+ctx.fillRect(10, 10, 55, 50);   // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50
+
+ +

Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le tutoriel canvas a davantage d'informations, d'exemples et de ressources également.

+ +

Dessin de rectangles

+ +

Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Initialise tous les pixels dans le rectangle défini par le point de départ (x, y) et la taille (largeur, hauteur) à noir transparent, en effaçant tout contenu précédemment dessiné.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Dessine un rectangle rempli à la position (x, y) dont la taille est déterminée par largeur et hauteur.
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Peint un rectangle ayant un point de départ en (x, y), une largeur l et une hauteur h sur le canevas, en utilisant le style de trait en cours.
+
+ +

Dessiner du texte

+ +

Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Dessine (rempli) un texte donné à la position (x,y) donnée.
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Dessine (contour) un texte donné à la position (x, y) donnée.
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Renvoie un objet {{domxref("TextMetrics")}}.
+
+ +

Styles de ligne

+ +

Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Largeur des lignes. Défaut 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Type de finission pour la fin de la ligne. Valeurs possible: butt (défaut), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: round, bevel, miter (défaut).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Le taux limite du miter. Sa valeur par défaut est 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Définit le modèle du trait courant.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Specifies where to start a dash array on a line.
+
+ +

Styles de texte

+ +

Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Paramètre de fonte dont la valeur par défaut est 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Paramètre d’alignement horizontal. Ses valeurs possibles sont : start (par défaut), end, left, right et center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : top, hanging, middle, alphabetic (par défaut), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Direction d’affichage. Ses valeurs possibles sont : ltr, rtl, inherit (par défaut).
+
+ +

Fill and stroke styles

+ +

Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Color or style to use inside shapes. Default #000 (black).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Color or style to use for the lines around shapes. Default #000 (black).
+
+ +

Gradients and patterns

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Creates a linear gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.
+
+ +

Shadows

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Specifies the blurring effect. Default 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Color of the shadow. Default fully-transparent black.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Horizontal distance the shadow will be offset. Default 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Vertical distance the shadow will be offset. Default 0.
+
+ +

Paths

+ +

The following methods can be used to manipulate paths of objects.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Moves the starting point of a new sub-path to the (x, y) coordinates.
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Connects the last point in the subpath to the x, y coordinates with a straight line.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo()before creating the Bézier curve.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Adds a quadratic Bézier curve to the current path.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
+
+ +

Drawing paths

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Fills the subpaths with the current fill style.
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Strokes the subpaths with the current stroke style.
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
If a given element is focused, this method draws a focus ring around the current path.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Scrolls the current path or a given path into the view.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Reports whether or not the specified point is contained in the current path.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Reports whether or not the specified point is inside the area contained by the stroking of a path.
+
+ +

Transformations

+ +

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}}
+
Current transformation matrix ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Multiplies the current transformation matrix with the matrix described by its arguments.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Resets the current transform by the identity matrix.
+
+ +

Compositing

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0(opaque).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.
+
+ +

Drawing images

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
+
+ +

Pixel manipulation

+ +

See also the {{domxref("ImageData")}} object.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
+
+ +

Image smoothing

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Image smoothing mode; if disabled, images will not be smoothed if scaled.
+
+ +

The canvas state

+ +

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Restores the drawing style state to the last element on the 'state stack' saved by save().
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+ +

Hit regions

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Adds a hit region to the canvas.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Removes the hit region with the specified id from the canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Removes all hit regions from the canvas.
+
+ +

Non-standard APIs

+ + + +

Most of these APIs are deprecated and will be removed in the future.

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
+
Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
This is redundant with an equivalent overload of drawImage.
+
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
+
Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
+
Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
+
Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
+
Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
+
Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
+
Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
+
Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
+
+ +

WebKit only

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
The backing store size in relation to the canvas element. See High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
+ +
+
+ +

Gecko only

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

{{Compat("api.CanvasRenderingContext2D")}}

+ +

See also

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html deleted file mode 100644 index ee87a2aafe..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: CanvasRenderingContext2D.lineCap -slug: Web/API/CanvasRenderingContext2D/lineCap -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/lineCap ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.lineCap de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : butt, round et square. Par défaut, cette propriété est définie comme butt.

- -

Voir aussi le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

- -

Syntaxe

- -
ctx.lineCap = "butt";
-ctx.lineCap = "round";
-ctx.lineCap = "square";
- -

Options

- -
-
butt
-
Les extrémités de ligne sont coupées à angle droit.
-
round
-
Les extrémités de ligne sont arrondies.
-
square
-
Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié.
-
- -

Exemples

- -

Utilisation de la propriété lineCap

- -

Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.beginPath();
-ctx.moveTo(0, 0);
-ctx.lineWidth = 15;
-ctx.lineCap = 'round';
-ctx.lineTo(100, 100);
-ctx.stroke();
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Un exemple de lineCap

- -

Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété lineCap. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides.

- -

La ligne à gauche utilise l'option par défaut butt. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option round. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option square. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.

- -
var ctx = document.getElementById('canevas').getContext('2d');
-var lineCap = ['butt','round','square'];
-
-// Dessiner les 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 les 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", "canvas_linecap.png")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

- - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md new file mode 100644 index 0000000000..ee87a2aafe --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -0,0 +1,171 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.lineCap de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : butt, round et square. Par défaut, cette propriété est définie comme butt.

+ +

Voir aussi le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

+ +

Syntaxe

+ +
ctx.lineCap = "butt";
+ctx.lineCap = "round";
+ctx.lineCap = "square";
+ +

Options

+ +
+
butt
+
Les extrémités de ligne sont coupées à angle droit.
+
round
+
Les extrémités de ligne sont arrondies.
+
square
+
Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié.
+
+ +

Exemples

+ +

Utilisation de la propriété lineCap

+ +

Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies.

+ +

HTML

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

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(0, 0);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Un exemple de lineCap

+ +

Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété lineCap. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides.

+ +

La ligne à gauche utilise l'option par défaut butt. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option round. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option square. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.

+ +
var ctx = document.getElementById('canevas').getContext('2d');
+var lineCap = ['butt','round','square'];
+
+// Dessiner les 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 les 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", "canvas_linecap.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

+ + + + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html deleted file mode 100644 index 93b38bb13d..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: CanvasRenderingContext2D.lineJoin -slug: Web/API/CanvasRenderingContext2D/lineJoin -tags: - - API - - Canvas - - Propriété - - arrondit - - coin - - stroke -translation_of: Web/API/CanvasRenderingContext2D/lineJoin ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.lineJoin de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.

- -

Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.

- -
-

Note: Les lignes peuvent être dessinées aves les méthodes  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.

-
- -

Syntaxe

- -
ctx.lineJoin = "bevel" || "round" || "miter";
-
- -

Options

- -

Il y a trois valeurs possibles pour cette propriété: "round", "bevel" et "miter". Celle par défaut est "miter".

- -

- -
-
"round" (rond)
-
Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .
-
"bevel" (biseau)
-
Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.
-
"miter" (onglet)
-
Les segments raccordés  sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.
-
- -

Exemples

- -

Modifier les jointures d'un tracé

- -

Cet exemple applique des jointures arrondies au tracé.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-ctx.lineWidth = 20;
-ctx.lineJoin = 'round';
-ctx.beginPath();
-ctx.moveTo(20, 20);
-ctx.lineTo(190, 100);
-ctx.lineTo(280, 20);
-ctx.lineTo(280, 150);
-ctx.stroke();
-
- -

Résultat

- -

{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}

- -

Comparaison des jointures de lignes

- -

L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de lineJoin.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var lineJoin = ['round', 'bevel', 'miter'];
-ctx.lineWidth = 10;
-
-for (let 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("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des naviagateurs

- - - -

{{Compat("api.CanvasRenderingContext2D.lineJoin")}}

- - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md new file mode 100644 index 0000000000..93b38bb13d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -0,0 +1,133 @@ +--- +title: CanvasRenderingContext2D.lineJoin +slug: Web/API/CanvasRenderingContext2D/lineJoin +tags: + - API + - Canvas + - Propriété + - arrondit + - coin + - stroke +translation_of: Web/API/CanvasRenderingContext2D/lineJoin +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.lineJoin de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.

+ +

Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.

+ +
+

Note: Les lignes peuvent être dessinées aves les méthodes  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.

+
+ +

Syntaxe

+ +
ctx.lineJoin = "bevel" || "round" || "miter";
+
+ +

Options

+ +

Il y a trois valeurs possibles pour cette propriété: "round", "bevel" et "miter". Celle par défaut est "miter".

+ +

+ +
+
"round" (rond)
+
Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .
+
"bevel" (biseau)
+
Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.
+
"miter" (onglet)
+
Les segments raccordés  sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.
+
+ +

Exemples

+ +

Modifier les jointures d'un tracé

+ +

Cet exemple applique des jointures arrondies au tracé.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.lineWidth = 20;
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(190, 100);
+ctx.lineTo(280, 20);
+ctx.lineTo(280, 150);
+ctx.stroke();
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}

+ +

Comparaison des jointures de lignes

+ +

L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de lineJoin.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var lineJoin = ['round', 'bevel', 'miter'];
+ctx.lineWidth = 10;
+
+for (let 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("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des naviagateurs

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineJoin")}}

+ + + + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html deleted file mode 100644 index 6ed54f222e..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CanvasRenderingContext2D.lineTo() -slug: Web/API/CanvasRenderingContext2D/lineTo -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/lineTo ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.lineTo() de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées x, y spécifiées avec une ligne droite (sans tracer réellement le chemin).

- -

Syntaxe

- -
void ctx.lineTo(x, y);
-
- -

Paramètres

- -
-
x
-
L'abscisse x du point d'arrivée.
-
y
-
L'ordonnée y du point d'arrivée.
-
- -

Exemples

- -

Utilisation de la méthode lineTo

- -

Ceci est un extrait de code utilisant la méthode lineTo. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-
-ctx.beginPath();
-ctx.moveTo(50,50);
-ctx.lineTo(100, 100);
-ctx.stroke();
-
- -

Éditez le code suivant pour voir les changements en direct:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.lineTo")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md new file mode 100644 index 0000000000..6ed54f222e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -0,0 +1,122 @@ +--- +title: CanvasRenderingContext2D.lineTo() +slug: Web/API/CanvasRenderingContext2D/lineTo +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/lineTo +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.lineTo() de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées x, y spécifiées avec une ligne droite (sans tracer réellement le chemin).

+ +

Syntaxe

+ +
void ctx.lineTo(x, y);
+
+ +

Paramètres

+ +
+
x
+
L'abscisse x du point d'arrivée.
+
y
+
L'ordonnée y du point d'arrivée.
+
+ +

Exemples

+ +

Utilisation de la méthode lineTo

+ +

Ceci est un extrait de code utilisant la méthode lineTo. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

Éditez le code suivant pour voir les changements en direct:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.lineTo")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html deleted file mode 100644 index ef2a1af3a9..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CanvasRenderingContext2D.measureText() -slug: Web/API/CanvasRenderingContext2D/measureText -tags: - - API - - Canevas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/measureText ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.measureText() renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).

- -

Syntaxe

- -
ctx.measureText(texte);
- -

Paramètres

- -
-
texte
-
Le texte à mesurer.
-
- -

Valeur retournée

- -

Un objet {{domxref("TextMetrics")}}.

- -

Exemples

- -

Étant donné cet élément {{HTMLElement("canvas")}} :

- -
<canvas id="canevas"></canvas>
-
- -

vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-var texte = ctx.measureText('foo'); // objet TextMetrics
-texte.width; // 16;
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.measureText")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md new file mode 100644 index 0000000000..ef2a1af3a9 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md @@ -0,0 +1,73 @@ +--- +title: CanvasRenderingContext2D.measureText() +slug: Web/API/CanvasRenderingContext2D/measureText +tags: + - API + - Canevas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/measureText +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.measureText() renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).

+ +

Syntaxe

+ +
ctx.measureText(texte);
+ +

Paramètres

+ +
+
texte
+
Le texte à mesurer.
+
+ +

Valeur retournée

+ +

Un objet {{domxref("TextMetrics")}}.

+ +

Exemples

+ +

Étant donné cet élément {{HTMLElement("canvas")}} :

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

vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+var texte = ctx.measureText('foo'); // objet TextMetrics
+texte.width; // 16;
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.measureText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html deleted file mode 100644 index 958b41c5aa..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CanvasRenderingContext2D.moveTo() -slug: Web/API/CanvasRenderingContext2D/moveTo -tags: - - API - - Canvas - - CanvasRenderingContext2D -translation_of: Web/API/CanvasRenderingContext2D/moveTo ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.moveTo() de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées (x, y).

- -

Syntaxe

- -
void ctx.moveTo(x, y);
-
- -

Paramètres

- -
-
x
-
L'axe des x du point.
-
y
-
L'axe des y du point.
-
- -

Exemples

- -

Utiliser la méthode moveTo

- -

Ceci est un simple snippet de code qui utilise la méthode moveTo pour déplacer le stylo à une position de départ pour dessiner une ligne.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.moveTo(50, 50);
-ctx.lineTo(200, 50);
-ctx.stroke();
-
- -

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.moveTo")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md new file mode 100644 index 0000000000..958b41c5aa --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -0,0 +1,120 @@ +--- +title: CanvasRenderingContext2D.moveTo() +slug: Web/API/CanvasRenderingContext2D/moveTo +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/moveTo +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.moveTo() de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées (x, y).

+ +

Syntaxe

+ +
void ctx.moveTo(x, y);
+
+ +

Paramètres

+ +
+
x
+
L'axe des x du point.
+
y
+
L'axe des y du point.
+
+ +

Exemples

+ +

Utiliser la méthode moveTo

+ +

Ceci est un simple snippet de code qui utilise la méthode moveTo pour déplacer le stylo à une position de départ pour dessiner une ligne.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(50, 50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+
+ +

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.moveTo")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html deleted file mode 100644 index 7587faa897..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: CanvasRenderingContext2D.quadraticCurveTo() -slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo -tags: - - API - - Bézier - - Canevas - - Canvas - - CanvasRenderingContext2D - - Courbe - - Courbe de Bézier - - Courbe quadratique - - Courbe quadratique de Bézier - - Méthode - - Quadratique - - Reference -translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.quadraticCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.

- -

Syntaxe

- -
void contexte2D.quadraticCurveTo(pointContrôleX, pointContrôleY, pointArrivéeX, pointArrivéeY);
-
- -

Paramètress

- -
-
pointContrôleX
-
La coordonnée en x du point de contrôle.
-
pointContrôleY
-
La coordonnée en y du point de contrôle.
-
pointArrivéeX
-
La coordonnée en x du point d'arrivée.
-
pointArrivéeY
-
La coordonnée en y du point d'arrivée.
-
- -

Exemples

- -

Comment quadraticCurveTo fonctionne

- -

Cet exemple montre comment un courbe quadratique de Bézier est dessinée.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
const canevas = document.getElementById("canvas");
-const contexte2D= canevas.getContext("2d");
-
-// courbe quadratique de Bézier
-contexte2D.beginPath();
-contexte2D.moveTo(50, 20);
-contexte2D.quadraticCurveTo(230, 30, 50, 100);
-contexte2D.stroke();
-
-// Points de départ et d'arrivée
-contexte2D.fillStyle = "blue";
-contexte2D.beginPath();
-contexte2D.arc(50, 20, 5, 0, 2 * Math.PI);   // Point de départ
-contexte2D.arc(50, 100, 5, 0, 2 * Math.PI);  // Point d'arrivée
-contexte2D.fill();
-
-// Point de contrôle
-contexte2D.fillStyle = 'red';
-contexte2D.beginPath();
-contexte2D.arc(230, 30, 5, 0, 2 * Math.PI);
-contexte2D.fill();
-
- -

Résultat

- -

Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu.

- -

{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}

- -

Une courbe quadratique simple

- -

Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode quadraticCurveTo().

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -

La courbe commence au point spécifié par moveTo(): (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).

- -
const canevas = document.getElementById("canvas");
-const contexte2D = canevas.getContext("2d");
-
-contexte2D.beginPath();
-contexte2D.moveTo(20, 110);
-contexte2D.quadraticCurveTo(230, 150, 250, 20);
-contexte2D.stroke();
-
- -

Résultat

- -

{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md new file mode 100644 index 0000000000..7587faa897 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -0,0 +1,137 @@ +--- +title: CanvasRenderingContext2D.quadraticCurveTo() +slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo +tags: + - API + - Bézier + - Canevas + - Canvas + - CanvasRenderingContext2D + - Courbe + - Courbe de Bézier + - Courbe quadratique + - Courbe quadratique de Bézier + - Méthode + - Quadratique + - Reference +translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.quadraticCurveTo() de l'API Canvas 2D ajoute une courbe de Bézier quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.

+ +

Syntaxe

+ +
void contexte2D.quadraticCurveTo(pointContrôleX, pointContrôleY, pointArrivéeX, pointArrivéeY);
+
+ +

Paramètress

+ +
+
pointContrôleX
+
La coordonnée en x du point de contrôle.
+
pointContrôleY
+
La coordonnée en y du point de contrôle.
+
pointArrivéeX
+
La coordonnée en x du point d'arrivée.
+
pointArrivéeY
+
La coordonnée en y du point d'arrivée.
+
+ +

Exemples

+ +

Comment quadraticCurveTo fonctionne

+ +

Cet exemple montre comment un courbe quadratique de Bézier est dessinée.

+ +

HTML

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

JavaScript

+ +
const canevas = document.getElementById("canvas");
+const contexte2D= canevas.getContext("2d");
+
+// courbe quadratique de Bézier
+contexte2D.beginPath();
+contexte2D.moveTo(50, 20);
+contexte2D.quadraticCurveTo(230, 30, 50, 100);
+contexte2D.stroke();
+
+// Points de départ et d'arrivée
+contexte2D.fillStyle = "blue";
+contexte2D.beginPath();
+contexte2D.arc(50, 20, 5, 0, 2 * Math.PI);   // Point de départ
+contexte2D.arc(50, 100, 5, 0, 2 * Math.PI);  // Point d'arrivée
+contexte2D.fill();
+
+// Point de contrôle
+contexte2D.fillStyle = 'red';
+contexte2D.beginPath();
+contexte2D.arc(230, 30, 5, 0, 2 * Math.PI);
+contexte2D.fill();
+
+ +

Résultat

+ +

Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu.

+ +

{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}

+ +

Une courbe quadratique simple

+ +

Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode quadraticCurveTo().

+ +

HTML

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

JavaScript

+ +

La courbe commence au point spécifié par moveTo(): (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).

+ +
const canevas = document.getElementById("canvas");
+const contexte2D = canevas.getContext("2d");
+
+contexte2D.beginPath();
+contexte2D.moveTo(20, 110);
+contexte2D.quadraticCurveTo(230, 150, 250, 20);
+contexte2D.stroke();
+
+ +

Résultat

+ +

{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html deleted file mode 100644 index 8a822dd115..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CanvasRenderingContext2D.rect() -slug: Web/API/CanvasRenderingContext2D/rect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode -translation_of: Web/API/CanvasRenderingContext2D/rect ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.rect() de l'API Canvas 2D crée un chemin de rectangle à la position (x, y) et de dimensions width et height. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser fill ou stroke pour dessiner ce rectangle.

- -

Syntaxe

- -
void ctx.rect(x, y, width, height);
-
- -

Paramètres

- -
-
x
-
La coordonnée x pour le côté gauche du rectangle.
-
y
-
La coordonnée y pour le haut du rectangle.
-
width
-
La largeur du rectangle.
-
height
-
La hauteur du rectangle.
-
- -

Exemples

- -

Utiliser la méthode rect

- -

Ceci est un simple bout de code qui utilise la méthode rect pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-ctx.rect(10, 10, 100, 100);
-ctx.fill();
-
- -

Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.rect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md new file mode 100644 index 0000000000..8a822dd115 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -0,0 +1,122 @@ +--- +title: CanvasRenderingContext2D.rect() +slug: Web/API/CanvasRenderingContext2D/rect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/rect +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.rect() de l'API Canvas 2D crée un chemin de rectangle à la position (x, y) et de dimensions width et height. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser fill ou stroke pour dessiner ce rectangle.

+ +

Syntaxe

+ +
void ctx.rect(x, y, width, height);
+
+ +

Paramètres

+ +
+
x
+
La coordonnée x pour le côté gauche du rectangle.
+
y
+
La coordonnée y pour le haut du rectangle.
+
width
+
La largeur du rectangle.
+
height
+
La hauteur du rectangle.
+
+ +

Exemples

+ +

Utiliser la méthode rect

+ +

Ceci est un simple bout de code qui utilise la méthode rect pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+ +

Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.rect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html deleted file mode 100644 index 5cde5f8af5..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CanvasRenderingContext2D.rotate() -slug: Web/API/CanvasRenderingContext2D/rotate -tags: - - API - - Cancas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/rotate ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.rotate() de l'API Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.

- -

Syntaxe

- -
void ctx.rotate(angle);
-
- -

- -

Paramètres

- -
-
angle
-
L'angle de rotation horaire en radians. Vous pouvez utiliser degrés * Math.PI / 180 si vous voulez faire la conversion à partir d'une valeur en degrés.
-
- -

Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.

- -

Exemples

- -

Utilisation de la méthode rotate

- -

Ceci est seulement un fragment de code simple qui utilise la méthode rotate.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.rotate(45 * Math.PI / 180);
-ctx.fillRect(70, 0, 100, 30);
-
-// réinitialise la matrice de transformation courante à la matrice identité
-ctx.setTransform(1, 0, 0, 1, 0, 0);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.rotate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md new file mode 100644 index 0000000000..5cde5f8af5 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -0,0 +1,122 @@ +--- +title: CanvasRenderingContext2D.rotate() +slug: Web/API/CanvasRenderingContext2D/rotate +tags: + - API + - Cancas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/rotate +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.rotate() de l'API Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.

+ +

Syntaxe

+ +
void ctx.rotate(angle);
+
+ +

+ +

Paramètres

+ +
+
angle
+
L'angle de rotation horaire en radians. Vous pouvez utiliser degrés * Math.PI / 180 si vous voulez faire la conversion à partir d'une valeur en degrés.
+
+ +

Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.

+ +

Exemples

+ +

Utilisation de la méthode rotate

+ +

Ceci est seulement un fragment de code simple qui utilise la méthode rotate.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70, 0, 100, 30);
+
+// réinitialise la matrice de transformation courante à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.rotate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.html b/files/fr/web/api/canvasrenderingcontext2d/save/index.html deleted file mode 100644 index d91e31ffbe..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/save/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: CanvasRenderingContext2D.save() -slug: Web/API/CanvasRenderingContext2D/save -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Restaurer - - Save -translation_of: Web/API/CanvasRenderingContext2D/save ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.save() de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.

- -

L'état du dessin

- -

L'état du dessin qui est sauvegardé dans une stack se compose de:

- - - -

Syntaxe

- -
void ctx.save();
- -

Exemple

- -

Enregistrer l'état du dessin

- -

Cet exemple utilise la méthode save() pour enregistrer l'état par défaut et restore()  pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-// On sauvegarde l'état par défaut
-ctx.save();
-
-ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 100, 100);
-
-// On restaure l'état par défaut
-ctx.restore();
-
-ctx.fillRect(150, 40, 100, 100);
-
- -

Résultat

- -

{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.CanvasRenderingContext2D.save")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.md b/files/fr/web/api/canvasrenderingcontext2d/save/index.md new file mode 100644 index 0000000000..d91e31ffbe --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/save/index.md @@ -0,0 +1,91 @@ +--- +title: CanvasRenderingContext2D.save() +slug: Web/API/CanvasRenderingContext2D/save +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Restaurer + - Save +translation_of: Web/API/CanvasRenderingContext2D/save +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.save() de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.

+ +

L'état du dessin

+ +

L'état du dessin qui est sauvegardé dans une stack se compose de:

+ + + +

Syntaxe

+ +
void ctx.save();
+ +

Exemple

+ +

Enregistrer l'état du dessin

+ +

Cet exemple utilise la méthode save() pour enregistrer l'état par défaut et restore()  pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// On sauvegarde l'état par défaut
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// On restaure l'état par défaut
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.CanvasRenderingContext2D.save")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html deleted file mode 100644 index cb24a37aa0..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: CanvasRenderingContext2D.scale() -slug: Web/API/CanvasRenderingContext2D/scale -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) -translation_of: Web/API/CanvasRenderingContext2D/scale ---- -
{{APIRef}}
- -

La méhode CanvasRenderingContext2D.scale() de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.

- -

Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes.

- -

Syntaxe

- -
void ctx.scale(x, y);
-
- -

Paramètres

- -
-
x
-
Facteur d'échelle dans la direction horizontale.
-
y
-
Facteur d'échelle dans la direction verticale.
-
- -

Exemples

- -

Utilisation de la méthode scale

- -

Ceci est seulement un fragment de code simple qui utilise la méthode scale.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.scale(10, 3);
-ctx.fillRect(10, 10, 10, 10);
-
-// remet la matrice de transformation courante à la matrice identité
-ctx.setTransform(1, 0, 0, 1, 0, 0);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Utilisation de scale pour un retournement horizontal ou vertical

- -

Vous pouvez utiliser ctx.scale(-1, 1) pour retourner le contexte horizontalement et ctx.scale(1, -1) pour le retourner verticalement.

- -

Code jouable 2

- - - - - -

{{ EmbedLiveSample('code_jouable_2', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateur

- -

{{Compat("api.CanvasRenderingContext2D.scale")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md new file mode 100644 index 0000000000..cb24a37aa0 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -0,0 +1,167 @@ +--- +title: CanvasRenderingContext2D.scale() +slug: Web/API/CanvasRenderingContext2D/scale +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/scale +--- +
{{APIRef}}
+ +

La méhode CanvasRenderingContext2D.scale() de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.

+ +

Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes.

+ +

Syntaxe

+ +
void ctx.scale(x, y);
+
+ +

Paramètres

+ +
+
x
+
Facteur d'échelle dans la direction horizontale.
+
y
+
Facteur d'échelle dans la direction verticale.
+
+ +

Exemples

+ +

Utilisation de la méthode scale

+ +

Ceci est seulement un fragment de code simple qui utilise la méthode scale.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.scale(10, 3);
+ctx.fillRect(10, 10, 10, 10);
+
+// remet la matrice de transformation courante à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Utilisation de scale pour un retournement horizontal ou vertical

+ +

Vous pouvez utiliser ctx.scale(-1, 1) pour retourner le contexte horizontalement et ctx.scale(1, -1) pour le retourner verticalement.

+ +

Code jouable 2

+ + + + + +

{{ EmbedLiveSample('code_jouable_2', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateur

+ +

{{Compat("api.CanvasRenderingContext2D.scale")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html deleted file mode 100644 index e8cdb0416e..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: CanvasRenderingContext2D.setLineDash() -slug: Web/API/CanvasRenderingContext2D/setLineDash -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Lignes - - Modèle - - Méthodes - - Pointillés - - Reference - - patterns - - setLineDash -translation_of: Web/API/CanvasRenderingContext2D/setLineDash ---- -
{{APIRef}}
- -

La méthode setLineDash() de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.

- -
-

Note : Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.

-
- -

Syntaxe

- -
ctx.setLineDash(segments);
-
- -

Paramètres

- -
-
segments
-
Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, [5, 15, 25] est transformé en [5, 15, 25, 5, 15, 25]. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.
-
- -

Valeur de retour

- -

undefined.

- -

Exemples

- -

C'est simplement un fragment de code qui utilise la méthode setLineDash() pour dessiner une ligne pointillée au dessus d'une ligne pleine.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.setLineDash([5, 15]);
-ctx.moveTo(0, 50);
-ctx.lineTo(400, 50);
-ctx.stroke();
-
-ctx.beginPath();
-ctx.setLineDash([]);
-ctx.moveTo(0, 150);
-ctx.lineTo(400, 150);
-ctx.stroke();
-
- -

Essayez le

- -

Editez le code ci-dessous et observez les changements se produire dans le canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 10, 410) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navivgateurs

- -

{{Compat("api.CanvasRenderingContext2D.setLineDash")}}

- -

Notes spécifiques pour Gecko

- - - -

Notes spécifiques pour WebKit

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md new file mode 100644 index 0000000000..e8cdb0416e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -0,0 +1,159 @@ +--- +title: CanvasRenderingContext2D.setLineDash() +slug: Web/API/CanvasRenderingContext2D/setLineDash +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Lignes + - Modèle + - Méthodes + - Pointillés + - Reference + - patterns + - setLineDash +translation_of: Web/API/CanvasRenderingContext2D/setLineDash +--- +
{{APIRef}}
+ +

La méthode setLineDash() de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.

+ +
+

Note : Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.

+
+ +

Syntaxe

+ +
ctx.setLineDash(segments);
+
+ +

Paramètres

+ +
+
segments
+
Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, [5, 15, 25] est transformé en [5, 15, 25, 5, 15, 25]. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.
+
+ +

Valeur de retour

+ +

undefined.

+ +

Exemples

+ +

C'est simplement un fragment de code qui utilise la méthode setLineDash() pour dessiner une ligne pointillée au dessus d'une ligne pleine.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.setLineDash([5, 15]);
+ctx.moveTo(0, 50);
+ctx.lineTo(400, 50);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.setLineDash([]);
+ctx.moveTo(0, 150);
+ctx.lineTo(400, 150);
+ctx.stroke();
+
+ +

Essayez le

+ +

Editez le code ci-dessous et observez les changements se produire dans le canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 10, 410) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navivgateurs

+ +

{{Compat("api.CanvasRenderingContext2D.setLineDash")}}

+ +

Notes spécifiques pour Gecko

+ + + +

Notes spécifiques pour WebKit

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html deleted file mode 100644 index e66241605d..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: CanvasRenderingContext2D.setTransform() -slug: Web/API/CanvasRenderingContext2D/setTransform -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/setTransform ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.setTransform() de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.

- -

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..

- -

Syntaxe

- -
void ctx.setTransform(a, b, c, d, e, f);
-
- -

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]

- -

Paramètres

- -
-
a (m11)
-
Échelle horizontale.
-
b (m12)
-
Inclinaison horizontale.
-
c (m21)
-
Inclinaison verticale.
-
d (m22)
-
Échelle verticale.
-
e (dx)
-
Déplacement horizontal.
-
f (dy)
-
Déplacement vertical.
-
- -

Exemples

- -

Utilisation de la méthode setTransform

- -

Ceci est seulement un fragment de code simple qui utilise la méthode setTransform.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.setTransform(1, 1, 0, 1, 0, 0);
-ctx.fillRect(0, 0, 100, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.setTransform")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md new file mode 100644 index 0000000000..e66241605d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -0,0 +1,129 @@ +--- +title: CanvasRenderingContext2D.setTransform() +slug: Web/API/CanvasRenderingContext2D/setTransform +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/setTransform +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.setTransform() de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.

+ +

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..

+ +

Syntaxe

+ +
void ctx.setTransform(a, b, c, d, e, f);
+
+ +

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]

+ +

Paramètres

+ +
+
a (m11)
+
Échelle horizontale.
+
b (m12)
+
Inclinaison horizontale.
+
c (m21)
+
Inclinaison verticale.
+
d (m22)
+
Échelle verticale.
+
e (dx)
+
Déplacement horizontal.
+
f (dy)
+
Déplacement vertical.
+
+ +

Exemples

+ +

Utilisation de la méthode setTransform

+ +

Ceci est seulement un fragment de code simple qui utilise la méthode setTransform.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.setTransform(1, 1, 0, 1, 0, 0);
+ctx.fillRect(0, 0, 100, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.setTransform")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html deleted file mode 100644 index fd836674ad..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: CanvasRenderingContext2D.stroke() -slug: Web/API/CanvasRenderingContext2D/stroke -translation_of: Web/API/CanvasRenderingContext2D/stroke ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.stroke() de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.

- -

Syntaxe

- -
void ctx.stroke();
-void ctx.stroke(path);
-
- -

Paramètres

- -
-
path
-
Un chemin {{domxref("Path2D")}} à dessiner.
-
- -

Exemples

- -

Utilisation de la méthode stroke

- -

Il s'agit d'un extrait de code simple utilisant la méthode stroke pour tracer un chemin.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-ctx.rect(10, 10, 100, 100);
-ctx.stroke();
-
- -

Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.stroke")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md new file mode 100644 index 0000000000..fd836674ad --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -0,0 +1,108 @@ +--- +title: CanvasRenderingContext2D.stroke() +slug: Web/API/CanvasRenderingContext2D/stroke +translation_of: Web/API/CanvasRenderingContext2D/stroke +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.stroke() de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.

+ +

Syntaxe

+ +
void ctx.stroke();
+void ctx.stroke(path);
+
+ +

Paramètres

+ +
+
path
+
Un chemin {{domxref("Path2D")}} à dessiner.
+
+ +

Exemples

+ +

Utilisation de la méthode stroke

+ +

Il s'agit d'un extrait de code simple utilisant la méthode stroke pour tracer un chemin.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+
+ +

Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.stroke")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html deleted file mode 100644 index 14620b3c66..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: CanvasRenderingContext2D.strokeRect() -slug: Web/API/CanvasRenderingContext2D/strokeRect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) -translation_of: Web/API/CanvasRenderingContext2D/strokeRect ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.strokeRect() de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche (x, y) et aux dimensions déterminées par largeur et hauteur dans la balise canvas, et en utilisant l'actuel strokeStyle.

- -

Syntaxe

- -
void ctx.strokeRect(x, y, largeur, hauteur);
-
- -

Paramètres

- -
-
x
-
L'abcisse x des coordonnées du point de départ du rectangle.
-
y
-
L'ordonnée y des coordonnées du point de départ du rectangle.
-
largeur
-
La largeur du rectangle.
-
hauteur
-
La hauteur de rectangle.
-
- -

Exemples

- -

Utilisation de la méthode strokeRect

- -

Ceci est juste un extrait de code qui utilise la méthode strokeRect.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-
-ctx.strokeStyle = "green";
-ctx.strokeRect(10, 10, 100, 100);
-
- -

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.strokeRect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md new file mode 100644 index 0000000000..14620b3c66 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -0,0 +1,123 @@ +--- +title: CanvasRenderingContext2D.strokeRect() +slug: Web/API/CanvasRenderingContext2D/strokeRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/strokeRect +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.strokeRect() de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche (x, y) et aux dimensions déterminées par largeur et hauteur dans la balise canvas, et en utilisant l'actuel strokeStyle.

+ +

Syntaxe

+ +
void ctx.strokeRect(x, y, largeur, hauteur);
+
+ +

Paramètres

+ +
+
x
+
L'abcisse x des coordonnées du point de départ du rectangle.
+
y
+
L'ordonnée y des coordonnées du point de départ du rectangle.
+
largeur
+
La largeur du rectangle.
+
hauteur
+
La hauteur de rectangle.
+
+ +

Exemples

+ +

Utilisation de la méthode strokeRect

+ +

Ceci est juste un extrait de code qui utilise la méthode strokeRect.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);
+
+ +

Éditez le code suivant pour voir les changements en direct dans la balise canvas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.strokeRect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html deleted file mode 100644 index fa703e43d0..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: CanvasRenderingContext2D.strokeStyle -slug: Web/API/CanvasRenderingContext2D/strokeStyle -translation_of: Web/API/CanvasRenderingContext2D/strokeStyle ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.strokeStyle de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est #000 (black).

- -

Voir également le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

- -

Syntaxe

- -
ctx.strokeStyle = color;
-ctx.strokeStyle = gradient;
-ctx.strokeStyle = pattern;
-
- -

Options

- -
-
color
-
Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.
-
gradient
-
Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).
-
pattern
-
Un objet {{domxref("CanvasPattern")}} (une image répétée).
-
- -

Exemples

- -

Utiliser la propriété strokeStyle pour définir une couleur différente

- -

Ceci est un simple snippet de code utilisant la propriété strokeStyle pour définir une couleur différente.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.strokeStyle = 'blue';
-ctx.strokeRect(10, 10, 100, 100);
-
- -

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Un exemple strokeStyle

- -

Cet exemple utilise la propriété strokeStyle pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.

- -
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 devrait ressembler à ça:

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- -

{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}

- - - - - -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md new file mode 100644 index 0000000000..fa703e43d0 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -0,0 +1,154 @@ +--- +title: CanvasRenderingContext2D.strokeStyle +slug: Web/API/CanvasRenderingContext2D/strokeStyle +translation_of: Web/API/CanvasRenderingContext2D/strokeStyle +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.strokeStyle de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est #000 (black).

+ +

Voir également le chapitre Ajout de styles et de couleurs dans le Tutoriel canvas.

+ +

Syntaxe

+ +
ctx.strokeStyle = color;
+ctx.strokeStyle = gradient;
+ctx.strokeStyle = pattern;
+
+ +

Options

+ +
+
color
+
Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.
+
gradient
+
Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).
+
pattern
+
Un objet {{domxref("CanvasPattern")}} (une image répétée).
+
+ +

Exemples

+ +

Utiliser la propriété strokeStyle pour définir une couleur différente

+ +

Ceci est un simple snippet de code utilisant la propriété strokeStyle pour définir une couleur différente.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = 'blue';
+ctx.strokeRect(10, 10, 100, 100);
+
+ +

Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Un exemple strokeStyle

+ +

Cet exemple utilise la propriété strokeStyle pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.

+ +
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 devrait ressembler à ça:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}

+ + + + + +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html deleted file mode 100644 index c1b20a2580..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: CanvasRenderingContext2D.strokeText() -slug: Web/API/CanvasRenderingContext2D/strokeText -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/strokeText ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.strokeText() de l'API Canvas 2D trace le texte fourni à la position donnée (x, y). Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.

- -

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.

- -

Syntaxe

- -
void ctx.strokeText(texte, x, y [, largeurMax]);
-
- -

Paramètres

- -
-
texte
-
Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}.
-
- -
-
x
-
La coordonnée sur l'axe des x du point de départ du texte.
-
y
-
La coordonnée sur l'axe des y du point de départ du texte.
-
largeurMax {{optional_inline}}
-
La largeur maximum à dessiner.  Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.
-
- -

Exemples

- -

Utilisation de la méthode strokeText

- -

Il ne s'agit que d'un extrait de code simple qui utilise la méthode strokeText.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.strokeText('Hello world', 50, 100);
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.strokeText")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md new file mode 100644 index 0000000000..c1b20a2580 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -0,0 +1,126 @@ +--- +title: CanvasRenderingContext2D.strokeText() +slug: Web/API/CanvasRenderingContext2D/strokeText +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/strokeText +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.strokeText() de l'API Canvas 2D trace le texte fourni à la position donnée (x, y). Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.

+ +

Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.

+ +

Syntaxe

+ +
void ctx.strokeText(texte, x, y [, largeurMax]);
+
+ +

Paramètres

+ +
+
texte
+
Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}.
+
+ +
+
x
+
La coordonnée sur l'axe des x du point de départ du texte.
+
y
+
La coordonnée sur l'axe des y du point de départ du texte.
+
largeurMax {{optional_inline}}
+
La largeur maximum à dessiner.  Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.
+
+ +

Exemples

+ +

Utilisation de la méthode strokeText

+ +

Il ne s'agit que d'un extrait de code simple qui utilise la méthode strokeText.

+ +

HTML

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

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.strokeText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html deleted file mode 100644 index ba3b152f70..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: CanvasRenderingContext2D.textAlign -slug: Web/API/CanvasRenderingContext2D/textAlign -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/textAlign ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.textAlign de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.fillText. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.

- -

Syntaxe

- -
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
-
- -

Options

- -

Valeurs possibles :

- -
-
left
-
Le texte est aligné à gauche.
-
right
-
Le texte est aligné à droite.
-
center
-
Le texte est centré.
-
start
-
Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).
-
end
-
Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).
-
- -

La valeur pa défaut est start.

- -

Exemples

- -

Utilisation de la propriété textAlign

- -

Ceci est seulement un fragment de code simple utilisant la propriété textAlign pour indiquer un alignement de texte.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.textAlign = 'left';
-ctx.strokeText('Hello world', 0, 100);
-
- -

Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Playable code

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.textAlign")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md new file mode 100644 index 0000000000..ba3b152f70 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.textAlign +slug: Web/API/CanvasRenderingContext2D/textAlign +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/textAlign +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.textAlign de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.fillText. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.

+ +

Syntaxe

+ +
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
+
+ +

Options

+ +

Valeurs possibles :

+ +
+
left
+
Le texte est aligné à gauche.
+
right
+
Le texte est aligné à droite.
+
center
+
Le texte est centré.
+
start
+
Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).
+
end
+
Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).
+
+ +

La valeur pa défaut est start.

+ +

Exemples

+ +

Utilisation de la propriété textAlign

+ +

Ceci est seulement un fragment de code simple utilisant la propriété textAlign pour indiquer un alignement de texte.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+
+ +

Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Playable code

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.textAlign")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html deleted file mode 100644 index c2dadee8db..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: CanvasRenderingContext2D.textBaseline -slug: Web/API/CanvasRenderingContext2D/textBaseline -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference -translation_of: Web/API/CanvasRenderingContext2D/textBaseline ---- -
{{APIRef}}
- -

La propriété CanvasRenderingContext2D.textBaseline de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.

- -

Syntaxe

- -
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
-
- -

Options

- -

Valeurs possibles :

- -
-
top
-
La ligne de base du texte est le haut du cadratin.
-
hanging
-
La ligne de base du texte est la ligne de base supérieure.
-
middle
-
La ligne de base du texte est le milieu du cadratin.
-
alphabetic
-
La ligne de base du texte est la ligne de base normale alphabétique.
-
ideographic
-
La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique.
-
bottom
-
La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages.
-
- -

La valeur par défaut est alphabetic.

- -

Exemples

- -

Utilisation de la propritété textBaseline

- -

Ceci est seulement un fragment de code simple utilisant la propriété textBaseline pour définir un réglage différent de ligne de base de texte.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
-
- -

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.textBaseline")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md new file mode 100644 index 0000000000..c2dadee8db --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -0,0 +1,130 @@ +--- +title: CanvasRenderingContext2D.textBaseline +slug: Web/API/CanvasRenderingContext2D/textBaseline +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/textBaseline +--- +
{{APIRef}}
+ +

La propriété CanvasRenderingContext2D.textBaseline de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.

+ +

Syntaxe

+ +
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
+
+ +

Options

+ +

Valeurs possibles :

+ +
+
top
+
La ligne de base du texte est le haut du cadratin.
+
hanging
+
La ligne de base du texte est la ligne de base supérieure.
+
middle
+
La ligne de base du texte est le milieu du cadratin.
+
alphabetic
+
La ligne de base du texte est la ligne de base normale alphabétique.
+
ideographic
+
La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique.
+
bottom
+
La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages.
+
+ +

La valeur par défaut est alphabetic.

+ +

Exemples

+ +

Utilisation de la propritété textBaseline

+ +

Ceci est seulement un fragment de code simple utilisant la propriété textBaseline pour définir un réglage différent de ligne de base de texte.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.textBaseline")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html deleted file mode 100644 index c80bc02507..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: CanvasRenderingContext2D.transform() -slug: Web/API/CanvasRenderingContext2D/transform -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/transform ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.transform () de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.

- -

Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque transform().

- -

Syntaxe

- -
void ctx.transform(a, b, c, d, e, f);
-
- -

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]

- -

Paramètres

- -
-
a (m11)
-
Échelle horizontale.
-
b (m12)
-
Inclinaison horizontale.
-
c (m21)
-
Inclinaison verticale.
-
d (m22)
-
Échelle verticale.
-
e (dx)
-
Déplacement horizontal.
-
f (dy)
-
Déplacement vertical.
-
- -

Exemples

- -

Utilisation de la méthode transform

- -

Ceci est seulement un fragment de code simple utilisant la méthode transform.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.transform(1, 1, 0, 1, 0, 0);
-ctx.fillRect(0, 0, 100, 100);
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.transform")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md new file mode 100644 index 0000000000..c80bc02507 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -0,0 +1,132 @@ +--- +title: CanvasRenderingContext2D.transform() +slug: Web/API/CanvasRenderingContext2D/transform +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/transform +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.transform () de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.

+ +

Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque transform().

+ +

Syntaxe

+ +
void ctx.transform(a, b, c, d, e, f);
+
+ +

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]

+ +

Paramètres

+ +
+
a (m11)
+
Échelle horizontale.
+
b (m12)
+
Inclinaison horizontale.
+
c (m21)
+
Inclinaison verticale.
+
d (m22)
+
Échelle verticale.
+
e (dx)
+
Déplacement horizontal.
+
f (dy)
+
Déplacement vertical.
+
+ +

Exemples

+ +

Utilisation de la méthode transform

+ +

Ceci est seulement un fragment de code simple utilisant la méthode transform.

+ +

HTML

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

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.transform(1, 1, 0, 1, 0, 0);
+ctx.fillRect(0, 0, 100, 100);
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.transform")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html deleted file mode 100644 index 9b82274d6d..0000000000 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: CanvasRenderingContext2D.translate() -slug: Web/API/CanvasRenderingContext2D/translate -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference -translation_of: Web/API/CanvasRenderingContext2D/translate ---- -
{{APIRef}}
- -

La méthode CanvasRenderingContext2D.translate() de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille.

- -

Syntaxe

- -
void ctx.translate(x, y);
-
- -

- -

Paramètres

- -
-
x
-
Distance de déplacement dans le sens horizontal.
-
y
-
Distance de déplacement dans le sens vertical.
-
- -

Exemples

- -

Utilisation de la méthode translate

- -

Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.

- -

HTML

- -
<canvas id="canevas"></canvas>
-
- -

JavaScript

- -
var canevas = document.getElementById('canevas');
-var ctx = canevas.getContext('2d');
-
-ctx.translate(50, 50);
-ctx.fillRect(0, 0, 100, 100);
-
-// Réinitialise la matrice de transformation en cours à la matrice identité
-ctx.setTransform(1, 0, 0, 1, 0, 0);
-
- -

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :

- -

Code jouable

- - - - - -

{{ EmbedLiveSample('code_jouable', 700, 360) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CanvasRenderingContext2D.translate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md new file mode 100644 index 0000000000..9b82274d6d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -0,0 +1,122 @@ +--- +title: CanvasRenderingContext2D.translate() +slug: Web/API/CanvasRenderingContext2D/translate +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/translate +--- +
{{APIRef}}
+ +

La méthode CanvasRenderingContext2D.translate() de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille.

+ +

Syntaxe

+ +
void ctx.translate(x, y);
+
+ +

+ +

Paramètres

+ +
+
x
+
Distance de déplacement dans le sens horizontal.
+
y
+
Distance de déplacement dans le sens vertical.
+
+ +

Exemples

+ +

Utilisation de la méthode translate

+ +

Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.

+ +

HTML

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

JavaScript

+ +
var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.translate(50, 50);
+ctx.fillRect(0, 0, 100, 100);
+
+// Réinitialise la matrice de transformation en cours à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :

+ +

Code jouable

+ + + + + +

{{ EmbedLiveSample('code_jouable', 700, 360) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CanvasRenderingContext2D.translate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cdatasection/index.html b/files/fr/web/api/cdatasection/index.html deleted file mode 100644 index 2f1d631cef..0000000000 --- a/files/fr/web/api/cdatasection/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: CDATASection -slug: Web/API/CDATASection -tags: - - API - - DOM - - Interface - - Référence(2) - - Section -translation_of: Web/API/CDATASection ---- -
{{APIRef("DOM")}}
- -

L'interface CDATASection représente une section CDATA qui peut être utilisée dans un document XML afin d'inclure des portions de texte qui ne sont pas échappées (les symboles < et & présents dans ces portions n'ont pas besoin d'être échappés comme ils doivent l'être normalement dans un document XML).

- -

En termes de balisage, une section CDATA a la forme suivante :

- -
<![CDATA[  ... ]]>
-
- -

Par exemple :

- -
<toto>
-  Voici une section CDATA :
-  <![CDATA[  < > & ]]> dans laquelle
-  le texte n'est pas échappé.
-</toto>
-
- -

La seule séquence qui n'est pas autorisée dans une section CDATA est le délimiteur de fin d'une séquence CDATA lui-même :

- -
<![CDATA[  ]]> causera une erreur   ]]>
-
- -

On notera que les sections ne doivent pas être utilisées dans des documents HTML.

- -

{{InheritanceDiagram(600,120)}}

- -

Propriétés

- -

Cette interface ne dispose pas de propriétés spécifiques et implémente celles de son parent : {{domxref("Text")}}.

- -

Méthodes

- -

Cette interface ne dispose pas de méthodes spécifiques et implémente celles de son parent : {{domxref("Text")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}}{{Spec2('DOM WHATWG')}}Rajouté dans le bogue #295
{{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}}{{Spec2('DOM3 Core')}}Aucune modification depuis {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}}{{Spec2('DOM2 Core')}}Aucune modification depuis {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.CDATASection")}}

diff --git a/files/fr/web/api/cdatasection/index.md b/files/fr/web/api/cdatasection/index.md new file mode 100644 index 0000000000..2f1d631cef --- /dev/null +++ b/files/fr/web/api/cdatasection/index.md @@ -0,0 +1,85 @@ +--- +title: CDATASection +slug: Web/API/CDATASection +tags: + - API + - DOM + - Interface + - Référence(2) + - Section +translation_of: Web/API/CDATASection +--- +
{{APIRef("DOM")}}
+ +

L'interface CDATASection représente une section CDATA qui peut être utilisée dans un document XML afin d'inclure des portions de texte qui ne sont pas échappées (les symboles < et & présents dans ces portions n'ont pas besoin d'être échappés comme ils doivent l'être normalement dans un document XML).

+ +

En termes de balisage, une section CDATA a la forme suivante :

+ +
<![CDATA[  ... ]]>
+
+ +

Par exemple :

+ +
<toto>
+  Voici une section CDATA :
+  <![CDATA[  < > & ]]> dans laquelle
+  le texte n'est pas échappé.
+</toto>
+
+ +

La seule séquence qui n'est pas autorisée dans une section CDATA est le délimiteur de fin d'une séquence CDATA lui-même :

+ +
<![CDATA[  ]]> causera une erreur   ]]>
+
+ +

On notera que les sections ne doivent pas être utilisées dans des documents HTML.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Propriétés

+ +

Cette interface ne dispose pas de propriétés spécifiques et implémente celles de son parent : {{domxref("Text")}}.

+ +

Méthodes

+ +

Cette interface ne dispose pas de méthodes spécifiques et implémente celles de son parent : {{domxref("Text")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}}{{Spec2('DOM WHATWG')}}Rajouté dans le bogue #295
{{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}}{{Spec2('DOM3 Core')}}Aucune modification depuis {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}}{{Spec2('DOM2 Core')}}Aucune modification depuis {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.CDATASection")}}

diff --git a/files/fr/web/api/characterdata/index.html b/files/fr/web/api/characterdata/index.html deleted file mode 100644 index 4ae6c1bbad..0000000000 --- a/files/fr/web/api/characterdata/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: CharacterData -slug: Web/API/CharacterData -tags: - - API - - DOM -translation_of: Web/API/CharacterData ---- -

{{APIRef("DOM")}}

- -

L'interface abstraite CharacterData représente un objet {{domxref("Node")}} (noeud) qui contient des caractères. C'est une interface abstraite, ce qui signifie qu'il n'existe aucun objet de type CharacterData : elle est implémentée par d'autres interfaces comme {{domxref("Text")}}, {{domxref("Comment")}} ou {{domxref("ProcessingInstruction")}} qui ne sont pas abstraites.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Hérite des propriétés de son parent {{domxref("Node")}} et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}.

- -
-
{{domxref("CharacterData.data")}}
-
est une {{domxref("DOMString")}} (chaîne de caractères) representant les données textuelles contenues dans cet objet.
-
{{domxref("CharacterData.length")}} {{readonlyInline}}
-
Retourne un unsigned long représentant la taille de la chaîne de caractères contenue dans CharacterData.data.
-
{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}
-
Retourne l'{{domxref("Element")}} immédiatement après celui spécifié dans la liste des enfants de son parent, ou null si l'élément spécifié est le dernier de la liste.
-
{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}
-
Retourne l'{{domxref("Element")}} immédiatement avant celui spécifié dans la liste des enfants de son parent, ou null si l'élément spécifié est le premier de la liste.
-
- -

Méthodes

- -

Hérite des méthodes de son parent {{domxref("Node")}}, et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}.

- -
-
{{domxref("CharacterData.appendData()")}}
-
Ajoute la {{domxref("DOMString")}} (chaîne de caractères) donnée à la chaîne CharacterData.data ; dans le retour de la méthode, data contient la {{domxref("DOMString")}} concaténée .
-
{{domxref("CharacterData.deleteData()")}}
-
Supprime la quantité spécifiée de caractères, en commençant au point désigné, à partir de la chaîne CharacterData.data ; dans le retour de la méthode, data contient le raccourci {{domxref ("DOMString")}}.
-
{{domxref("CharacterData.insertData()")}}
-
Insère les caractères spécifiés, au point désigné, dans la chaîne CharacterData.data ; dans le retour de cette méthode, data contient la {{domxref ("DOMString")}} (chaîne de caractères) modifiée.
-
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
-
Supprime l'objet de la liste d'enfants de son parent.
-
{{domxref("CharacterData.replaceData()")}}
-
Remplace la quantité spécifiée de caractères, en commençant au point désigné, avec la {{domxref ("DOMString")}} (chaîne de caractères) spécifiée ; dans le retour de cette méthode, data contient la {{domxref ("DOMString")}} modifiée.
-
{{domxref("CharacterData.substringData()")}}
-
Renvoie une {{domxref ("DOMString")}} (chaîne de caractères) contenant la partie de CharacterData.data de la longueur spécifiée et commençant au point désigné.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}}{{Spec2('DOM WHATWG')}}Ajoute une implémention des interfaces {{domxref("ChildNode")}} et{{domxref("NonDocumentTypeChildNode")}}.
{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}{{Spec2('DOM3 Core')}}Pas de changement depuis {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}{{Spec2('DOM2 Core')}}Pas de changement depuis {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.CharacterData")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/characterdata/index.md b/files/fr/web/api/characterdata/index.md new file mode 100644 index 0000000000..4ae6c1bbad --- /dev/null +++ b/files/fr/web/api/characterdata/index.md @@ -0,0 +1,89 @@ +--- +title: CharacterData +slug: Web/API/CharacterData +tags: + - API + - DOM +translation_of: Web/API/CharacterData +--- +

{{APIRef("DOM")}}

+ +

L'interface abstraite CharacterData représente un objet {{domxref("Node")}} (noeud) qui contient des caractères. C'est une interface abstraite, ce qui signifie qu'il n'existe aucun objet de type CharacterData : elle est implémentée par d'autres interfaces comme {{domxref("Text")}}, {{domxref("Comment")}} ou {{domxref("ProcessingInstruction")}} qui ne sont pas abstraites.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Hérite des propriétés de son parent {{domxref("Node")}} et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}.

+ +
+
{{domxref("CharacterData.data")}}
+
est une {{domxref("DOMString")}} (chaîne de caractères) representant les données textuelles contenues dans cet objet.
+
{{domxref("CharacterData.length")}} {{readonlyInline}}
+
Retourne un unsigned long représentant la taille de la chaîne de caractères contenue dans CharacterData.data.
+
{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}
+
Retourne l'{{domxref("Element")}} immédiatement après celui spécifié dans la liste des enfants de son parent, ou null si l'élément spécifié est le dernier de la liste.
+
{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}
+
Retourne l'{{domxref("Element")}} immédiatement avant celui spécifié dans la liste des enfants de son parent, ou null si l'élément spécifié est le premier de la liste.
+
+ +

Méthodes

+ +

Hérite des méthodes de son parent {{domxref("Node")}}, et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}.

+ +
+
{{domxref("CharacterData.appendData()")}}
+
Ajoute la {{domxref("DOMString")}} (chaîne de caractères) donnée à la chaîne CharacterData.data ; dans le retour de la méthode, data contient la {{domxref("DOMString")}} concaténée .
+
{{domxref("CharacterData.deleteData()")}}
+
Supprime la quantité spécifiée de caractères, en commençant au point désigné, à partir de la chaîne CharacterData.data ; dans le retour de la méthode, data contient le raccourci {{domxref ("DOMString")}}.
+
{{domxref("CharacterData.insertData()")}}
+
Insère les caractères spécifiés, au point désigné, dans la chaîne CharacterData.data ; dans le retour de cette méthode, data contient la {{domxref ("DOMString")}} (chaîne de caractères) modifiée.
+
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
+
Supprime l'objet de la liste d'enfants de son parent.
+
{{domxref("CharacterData.replaceData()")}}
+
Remplace la quantité spécifiée de caractères, en commençant au point désigné, avec la {{domxref ("DOMString")}} (chaîne de caractères) spécifiée ; dans le retour de cette méthode, data contient la {{domxref ("DOMString")}} modifiée.
+
{{domxref("CharacterData.substringData()")}}
+
Renvoie une {{domxref ("DOMString")}} (chaîne de caractères) contenant la partie de CharacterData.data de la longueur spécifiée et commençant au point désigné.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}}{{Spec2('DOM WHATWG')}}Ajoute une implémention des interfaces {{domxref("ChildNode")}} et{{domxref("NonDocumentTypeChildNode")}}.
{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}{{Spec2('DOM3 Core')}}Pas de changement depuis {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}{{Spec2('DOM2 Core')}}Pas de changement depuis {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CharacterData")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/clearinterval/index.html b/files/fr/web/api/clearinterval/index.html deleted file mode 100644 index a6dbfe8cb4..0000000000 --- a/files/fr/web/api/clearinterval/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.clearInterval() -slug: Web/API/clearInterval -tags: - - API - - Méthode - - Reference - - WindowOrWorkerGlobalScope - - clearInterval -translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval -original_slug: 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

- - diff --git a/files/fr/web/api/clearinterval/index.md b/files/fr/web/api/clearinterval/index.md new file mode 100644 index 0000000000..a6dbfe8cb4 --- /dev/null +++ b/files/fr/web/api/clearinterval/index.md @@ -0,0 +1,72 @@ +--- +title: WindowOrWorkerGlobalScope.clearInterval() +slug: Web/API/clearInterval +tags: + - API + - Méthode + - Reference + - WindowOrWorkerGlobalScope + - clearInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +original_slug: 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

+ + diff --git a/files/fr/web/api/client/frametype/index.html b/files/fr/web/api/client/frametype/index.html deleted file mode 100644 index 4d3ed3cae9..0000000000 --- a/files/fr/web/api/client/frametype/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Client.frameType -slug: Web/API/Client/frameType -tags: - - API - - Client - - Experimental - - Property - - Reference - - ServiceWorker - - frameType -translation_of: Web/API/Client/frameType ---- -

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

- -

La propriété frameType (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être auxiliary, top-level, nested, ou none.

- -

Syntaxe

- -
var myFrameType = Client.frameType;
- -

Exemple

- -
TBD
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#client-frametype', 'frameType')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Client.frameType")}}

diff --git a/files/fr/web/api/client/frametype/index.md b/files/fr/web/api/client/frametype/index.md new file mode 100644 index 0000000000..4d3ed3cae9 --- /dev/null +++ b/files/fr/web/api/client/frametype/index.md @@ -0,0 +1,46 @@ +--- +title: Client.frameType +slug: Web/API/Client/frameType +tags: + - API + - Client + - Experimental + - Property + - Reference + - ServiceWorker + - frameType +translation_of: Web/API/Client/frameType +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

La propriété frameType (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être auxiliary, top-level, nested, ou none.

+ +

Syntaxe

+ +
var myFrameType = Client.frameType;
+ +

Exemple

+ +
TBD
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#client-frametype', 'frameType')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Client.frameType")}}

diff --git a/files/fr/web/api/client/id/index.html b/files/fr/web/api/client/id/index.html deleted file mode 100644 index 5860d16888..0000000000 --- a/files/fr/web/api/client/id/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Client.id -slug: Web/API/Client/id -tags: - - API - - Client - - Experimental - - Propriété - - Reference - - Service Workers - - ServiceWorkers - - id -translation_of: Web/API/Client/id ---- -

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

- -

La propriété id (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}.

- -

Syntaxe

- -
var clientId = Client.id;
- -

Exemple

- -
TBD
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#client-id', 'id')}}{{Spec2('Service Workers')}}Initial definition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Client.id")}}

diff --git a/files/fr/web/api/client/id/index.md b/files/fr/web/api/client/id/index.md new file mode 100644 index 0000000000..5860d16888 --- /dev/null +++ b/files/fr/web/api/client/id/index.md @@ -0,0 +1,47 @@ +--- +title: Client.id +slug: Web/API/Client/id +tags: + - API + - Client + - Experimental + - Propriété + - Reference + - Service Workers + - ServiceWorkers + - id +translation_of: Web/API/Client/id +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

La propriété id (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}.

+ +

Syntaxe

+ +
var clientId = Client.id;
+ +

Exemple

+ +
TBD
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#client-id', 'id')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Client.id")}}

diff --git a/files/fr/web/api/client/index.html b/files/fr/web/api/client/index.html deleted file mode 100644 index 1852bcbdb3..0000000000 --- a/files/fr/web/api/client/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Client -slug: Web/API/Client -tags: - - API - - Client - - Experimental - - Interface - - Reference - - Service Workers - - Service worker API - - ServiceWorkerClient - - ServiceWorkers -translation_of: Web/API/Client ---- -

{{APIRef("Service Workers API")}}

- -

L'interface Client de l'API ServiceWorker représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets Client/WindowClient via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}.

- -

Méthodes

- -
-
{{domxref("Client.postMessage()")}}
-
Permet à un service worker d'envoyer un message au ServiceWorkerClient.
-
- -

Propriétés

- -
-
{{domxref("Client.id")}} {{readonlyInline}}
-
Retourne l'identifiant universellement unique de l'objet Client.
-
{{domxref("Client.type")}} {{readonlyInline}}
-
Indique le type de contexte de navigation du client courant. Cette valeur peut être auxiliary, top-level, nested, or none.
-
{{domxref("Client.url")}} {{readonlyInline}}
-
Retourne l'URL du client service worker courant.
-
- -

Exemples

- -

Ce code est basé sur un fragment pris d'un exemple d'envoi de message (voir l'exemple en ligne.) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}.

- -

Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur.

- -
// client service worker (par exemple un document)
-function sendMessage(message) {
-  return new Promise(function(resolve, reject) {
-    // Notez que c'est la version du ServiceWorker.postMessage
-    navigator.serviceWorker.controller.postMessage(message);
-    window.serviceWorker.onMessage = function(e) {
-      resolve(e.data);
-    };
-  });
-}
-
-// Contrôle du service worker
-self.addEventListener("message", function(e) {
-  // e.source est un object client
-  e.source.postMessage("Hello! Your message was: " + e.data);
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#client', 'Client')}}{{Spec2('Service Workers')}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.Client")}}
- -

Voir également

- - diff --git a/files/fr/web/api/client/index.md b/files/fr/web/api/client/index.md new file mode 100644 index 0000000000..1852bcbdb3 --- /dev/null +++ b/files/fr/web/api/client/index.md @@ -0,0 +1,92 @@ +--- +title: Client +slug: Web/API/Client +tags: + - API + - Client + - Experimental + - Interface + - Reference + - Service Workers + - Service worker API + - ServiceWorkerClient + - ServiceWorkers +translation_of: Web/API/Client +--- +

{{APIRef("Service Workers API")}}

+ +

L'interface Client de l'API ServiceWorker représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets Client/WindowClient via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}.

+ +

Méthodes

+ +
+
{{domxref("Client.postMessage()")}}
+
Permet à un service worker d'envoyer un message au ServiceWorkerClient.
+
+ +

Propriétés

+ +
+
{{domxref("Client.id")}} {{readonlyInline}}
+
Retourne l'identifiant universellement unique de l'objet Client.
+
{{domxref("Client.type")}} {{readonlyInline}}
+
Indique le type de contexte de navigation du client courant. Cette valeur peut être auxiliary, top-level, nested, or none.
+
{{domxref("Client.url")}} {{readonlyInline}}
+
Retourne l'URL du client service worker courant.
+
+ +

Exemples

+ +

Ce code est basé sur un fragment pris d'un exemple d'envoi de message (voir l'exemple en ligne.) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}.

+ +

Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur.

+ +
// client service worker (par exemple un document)
+function sendMessage(message) {
+  return new Promise(function(resolve, reject) {
+    // Notez que c'est la version du ServiceWorker.postMessage
+    navigator.serviceWorker.controller.postMessage(message);
+    window.serviceWorker.onMessage = function(e) {
+      resolve(e.data);
+    };
+  });
+}
+
+// Contrôle du service worker
+self.addEventListener("message", function(e) {
+  // e.source est un object client
+  e.source.postMessage("Hello! Your message was: " + e.data);
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#client', 'Client')}}{{Spec2('Service Workers')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Client")}}
+ +

Voir également

+ + diff --git a/files/fr/web/api/client/postmessage/index.html b/files/fr/web/api/client/postmessage/index.html deleted file mode 100644 index 3ea26daa58..0000000000 --- a/files/fr/web/api/client/postmessage/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Client.postMessage() -slug: Web/API/Client/postMessage -tags: - - API - - Client - - Méthode - - Reference - - Service Worker - - ServiceWorker - - postMessage -translation_of: Web/API/Client/postMessage ---- -

{{SeeCompatTable}}{{APIRef("Client")}}

- -

La méthode postMessage() de l'interface {{domxref("Client")}} permet à un service worker client d'envoyer un message à un {{domxref("ServiceWorker")}}.

- -

Syntaxe

- -
Client.postMessage(message[, transfer]);
- -

Valeur de retour

- -

Void.

- -

Paramètres

- -
-
message
-
Le message à envoyer au service worker.
-
transfer {{optional_inline}}
-
Un objet transferable, comme par exemple une référence à un port.
-
- -

Exemples

- -

Ce fragment de code est tiré de l'exemple d'envoi de message du service worker exemple d'envoi de message du service worker (voir exemple en ligne). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}.

- -

Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur.

- -
function sendMessage(message) {
-  return new Promise(function(resolve, reject) {
-     var messageChannel = new MessageChannel();
-     messageChannel.port1.onmessage = function(event) {
-       if (event.data.error) {
-         reject(event.data.error);
-       } else {
-         resolve(event.data);
-       }
-     };
-    navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
-  });
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#client-postmessage-method', 'postMessage()')}}{{Spec2('Service Workers')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Client.postMessage")}}

diff --git a/files/fr/web/api/client/postmessage/index.md b/files/fr/web/api/client/postmessage/index.md new file mode 100644 index 0000000000..3ea26daa58 --- /dev/null +++ b/files/fr/web/api/client/postmessage/index.md @@ -0,0 +1,74 @@ +--- +title: Client.postMessage() +slug: Web/API/Client/postMessage +tags: + - API + - Client + - Méthode + - Reference + - Service Worker + - ServiceWorker + - postMessage +translation_of: Web/API/Client/postMessage +--- +

{{SeeCompatTable}}{{APIRef("Client")}}

+ +

La méthode postMessage() de l'interface {{domxref("Client")}} permet à un service worker client d'envoyer un message à un {{domxref("ServiceWorker")}}.

+ +

Syntaxe

+ +
Client.postMessage(message[, transfer]);
+ +

Valeur de retour

+ +

Void.

+ +

Paramètres

+ +
+
message
+
Le message à envoyer au service worker.
+
transfer {{optional_inline}}
+
Un objet transferable, comme par exemple une référence à un port.
+
+ +

Exemples

+ +

Ce fragment de code est tiré de l'exemple d'envoi de message du service worker exemple d'envoi de message du service worker (voir exemple en ligne). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}.

+ +

Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur.

+ +
function sendMessage(message) {
+  return new Promise(function(resolve, reject) {
+     var messageChannel = new MessageChannel();
+     messageChannel.port1.onmessage = function(event) {
+       if (event.data.error) {
+         reject(event.data.error);
+       } else {
+         resolve(event.data);
+       }
+     };
+    navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
+  });
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#client-postmessage-method', 'postMessage()')}}{{Spec2('Service Workers')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Client.postMessage")}}

diff --git a/files/fr/web/api/client/url/index.html b/files/fr/web/api/client/url/index.html deleted file mode 100644 index e024102c50..0000000000 --- a/files/fr/web/api/client/url/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Client.url -slug: Web/API/Client/url -tags: - - API - - Client - - Experimental - - Property - - Reference - - ServiceWorkers - - URL -translation_of: Web/API/Client/url ---- -
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
- -
La propriété url (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant.
- -
 
- -

Syntaxe

- -
var clientUrl = Client.url;
- -

Valeur de retour

- -

Valeur de type {{domxref("USVString")}}.

- -

Exemple

- -
self.addEventListener('notificationclick', function(event) {
-  console.log('Au click de notification : ', event.notification.tag);
-  event.notification.close();
-
-  // Vérification pour savoir si l'évenement est ouvert et
-  // se focalise dessus si c'est le cas
-  event.waitUntil(clients.matchAll({
-    type: "window"
-  }).then(function(clientList) {
-    for (var i = 0; i < clientList.length; i++) {
-      var client = clientList[i];
-      if (client.url == '/' && 'focus' in client)
-        return client.focus();
-    }
-    if (clients.openWindow)
-      return clients.openWindow('/');
-  }));
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#client-url', 'url')}}{{Spec2('Service Workers')}}Défintion initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Client.url")}}

diff --git a/files/fr/web/api/client/url/index.md b/files/fr/web/api/client/url/index.md new file mode 100644 index 0000000000..e024102c50 --- /dev/null +++ b/files/fr/web/api/client/url/index.md @@ -0,0 +1,68 @@ +--- +title: Client.url +slug: Web/API/Client/url +tags: + - API + - Client + - Experimental + - Property + - Reference + - ServiceWorkers + - URL +translation_of: Web/API/Client/url +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +
La propriété url (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant.
+ +
 
+ +

Syntaxe

+ +
var clientUrl = Client.url;
+ +

Valeur de retour

+ +

Valeur de type {{domxref("USVString")}}.

+ +

Exemple

+ +
self.addEventListener('notificationclick', function(event) {
+  console.log('Au click de notification : ', event.notification.tag);
+  event.notification.close();
+
+  // Vérification pour savoir si l'évenement est ouvert et
+  // se focalise dessus si c'est le cas
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i < clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' && 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#client-url', 'url')}}{{Spec2('Service Workers')}}Défintion initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Client.url")}}

diff --git a/files/fr/web/api/clients/claim/index.html b/files/fr/web/api/clients/claim/index.html deleted file mode 100644 index bd76981af1..0000000000 --- a/files/fr/web/api/clients/claim/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Clients.claim() -slug: Web/API/Clients/claim -tags: - - API - - Clients - - Méthode - - Reference - - Service Workers - - claim -translation_of: Web/API/Clients/claim ---- -

{{SeeCompatTable}}{{APIRef("Service Worker Clients")}}

- -

La méthode claim() de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker.

- -

Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs.

- -

Syntaxe

- -
ServiceWorkerClients.claim().then(function() {
-  // Faire quelque chose
-});
-
- -

Paramètres

- -

None.

- -

Valeur de retour

- -

Une Promise.

- -

Exemple

- -

L'exemple suivant utilise claim() dans le gestionnaire d'évènement onActivate d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker.

- -
self.addEventListener('install', function(event) {
-  event.waitUntil(self.skipWaiting());
-});
-self.addEventListener('activate', function(event) {
-  event.waitUntil(self.clients.claim());
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Définition initiale. Toujours en cours de développement (voir ticket 414 et ticket 423).
- -

Compatibilité de navigateurs

- -

{{Compat("api.Clients.claim")}}

- -

À voir aussi

- - diff --git a/files/fr/web/api/clients/claim/index.md b/files/fr/web/api/clients/claim/index.md new file mode 100644 index 0000000000..bd76981af1 --- /dev/null +++ b/files/fr/web/api/clients/claim/index.md @@ -0,0 +1,75 @@ +--- +title: Clients.claim() +slug: Web/API/Clients/claim +tags: + - API + - Clients + - Méthode + - Reference + - Service Workers + - claim +translation_of: Web/API/Clients/claim +--- +

{{SeeCompatTable}}{{APIRef("Service Worker Clients")}}

+ +

La méthode claim() de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker.

+ +

Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs.

+ +

Syntaxe

+ +
ServiceWorkerClients.claim().then(function() {
+  // Faire quelque chose
+});
+
+ +

Paramètres

+ +

None.

+ +

Valeur de retour

+ +

Une Promise.

+ +

Exemple

+ +

L'exemple suivant utilise claim() dans le gestionnaire d'évènement onActivate d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker.

+ +
self.addEventListener('install', function(event) {
+  event.waitUntil(self.skipWaiting());
+});
+self.addEventListener('activate', function(event) {
+  event.waitUntil(self.clients.claim());
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Définition initiale. Toujours en cours de développement (voir ticket 414 et ticket 423).
+ +

Compatibilité de navigateurs

+ +

{{Compat("api.Clients.claim")}}

+ +

À voir aussi

+ + diff --git a/files/fr/web/api/clients/get/index.html b/files/fr/web/api/clients/get/index.html deleted file mode 100644 index dd2d46c018..0000000000 --- a/files/fr/web/api/clients/get/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Clients.get() -slug: Web/API/Clients/get -tags: - - API - - Clients - - Méthode - - Reference - - Service Workers - - get -translation_of: Web/API/Clients/get ---- -
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
- -
La méthode get() de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}.
- -

Syntaxe

- -
self.clients.get(id).then(function(client) {
-  // Faire quelque chose avec le client
-});
- -

Paramètres

- -
-
id
-
Une {{domxref("DOMString")}} représentant l'id du client que vous souhaitez récuperer.
-
- -

Valeur de retour

- -

Une Promise qui se résoud avec un objet {{domxref("Client")}}.

- -

Exemples

- -
self.clients.get(options).then(function(client) {
-  self.clients.openWindow(client.url);
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Service Workers', '#clients-get-method', 'get()')}}{{Spec2('Service Workers')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Clients.get")}}

diff --git a/files/fr/web/api/clients/get/index.md b/files/fr/web/api/clients/get/index.md new file mode 100644 index 0000000000..dd2d46c018 --- /dev/null +++ b/files/fr/web/api/clients/get/index.md @@ -0,0 +1,59 @@ +--- +title: Clients.get() +slug: Web/API/Clients/get +tags: + - API + - Clients + - Méthode + - Reference + - Service Workers + - get +translation_of: Web/API/Clients/get +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +
La méthode get() de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}.
+ +

Syntaxe

+ +
self.clients.get(id).then(function(client) {
+  // Faire quelque chose avec le client
+});
+ +

Paramètres

+ +
+
id
+
Une {{domxref("DOMString")}} représentant l'id du client que vous souhaitez récuperer.
+
+ +

Valeur de retour

+ +

Une Promise qui se résoud avec un objet {{domxref("Client")}}.

+ +

Exemples

+ +
self.clients.get(options).then(function(client) {
+  self.clients.openWindow(client.url);
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Service Workers', '#clients-get-method', 'get()')}}{{Spec2('Service Workers')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Clients.get")}}

diff --git a/files/fr/web/api/clients/index.html b/files/fr/web/api/clients/index.html deleted file mode 100644 index aab1e6c132..0000000000 --- a/files/fr/web/api/clients/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Clients -slug: Web/API/Clients -tags: - - API - - Clients - - Experimental - - Interface - - Reference - - Service Workers - - Service worker API - - ServiceWorker - - Workers -translation_of: Web/API/Clients ---- -
{{APIRef("Service Workers API")}}
- -

L'interface Clients permet d'accéder aux objets Client. On y accède via self.clients au sein d'un service worker.

- -

Méthodes

- -
-
Clients.get()
-
Retourne une Promise (« Promesse ») pour un Client correspondant à un id donné.
-
Clients.matchAll()
-
Retourne une Promise (« Promesse ») pour un tableau d'objets Client. L'argument options vous permet de contrôler les types de clients renvoyés.
-
Clients.openWindow()
-
Ouvre une nouvelle fenêtre de navigateur pour une url donnée et renvoie une Promise (« Promesse ») pour le nouveau WindowClient.
-
Clients.claim()
-
Permet à un service worker actif de se définir comme le controller (« Controlleur ») pour tous les clients dans son scope (« sa portée »).
-
- -

Exemple

- -

L'exemple suivant montre une fenêtre de chat existante ou en crée une nouvelle lorsque l'utilisateur clique sur une notification.

- -
addEventListener('notificationclick', event => {
-  event.waitUntil(async function() {
-    const allClients = await clients.matchAll({
-      includeUncontrolled: true
-    });
-
-    let chatClient;
-
-    // Voyons si nous avons déjà une fenêtre de discussion ouverte :
-    for (const client of allClients) {
-      const url = new URL(client.url);
-
-      if (url.pathname == '/chat/') {
-        // Excellent, utilisons-la !
-        client.focus();
-        chatClient = client;
-        break;
-      }
-    }
-
-    // Si nous n'avons pas trouvé de fenêtre de discussion existante,
-    // ouvrons-en une nouvelle :
-    if (!chatClient) {
-      chatClient = await clients.openWindow('/chat/');
-    }
-
-    // Envoyez un message au client :
-    chatClient.postMessage("Nouveaux messages !");
-  }());
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Clients")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/clients/index.md b/files/fr/web/api/clients/index.md new file mode 100644 index 0000000000..aab1e6c132 --- /dev/null +++ b/files/fr/web/api/clients/index.md @@ -0,0 +1,97 @@ +--- +title: Clients +slug: Web/API/Clients +tags: + - API + - Clients + - Experimental + - Interface + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - Workers +translation_of: Web/API/Clients +--- +
{{APIRef("Service Workers API")}}
+ +

L'interface Clients permet d'accéder aux objets Client. On y accède via self.clients au sein d'un service worker.

+ +

Méthodes

+ +
+
Clients.get()
+
Retourne une Promise (« Promesse ») pour un Client correspondant à un id donné.
+
Clients.matchAll()
+
Retourne une Promise (« Promesse ») pour un tableau d'objets Client. L'argument options vous permet de contrôler les types de clients renvoyés.
+
Clients.openWindow()
+
Ouvre une nouvelle fenêtre de navigateur pour une url donnée et renvoie une Promise (« Promesse ») pour le nouveau WindowClient.
+
Clients.claim()
+
Permet à un service worker actif de se définir comme le controller (« Controlleur ») pour tous les clients dans son scope (« sa portée »).
+
+ +

Exemple

+ +

L'exemple suivant montre une fenêtre de chat existante ou en crée une nouvelle lorsque l'utilisateur clique sur une notification.

+ +
addEventListener('notificationclick', event => {
+  event.waitUntil(async function() {
+    const allClients = await clients.matchAll({
+      includeUncontrolled: true
+    });
+
+    let chatClient;
+
+    // Voyons si nous avons déjà une fenêtre de discussion ouverte :
+    for (const client of allClients) {
+      const url = new URL(client.url);
+
+      if (url.pathname == '/chat/') {
+        // Excellent, utilisons-la !
+        client.focus();
+        chatClient = client;
+        break;
+      }
+    }
+
+    // Si nous n'avons pas trouvé de fenêtre de discussion existante,
+    // ouvrons-en une nouvelle :
+    if (!chatClient) {
+      chatClient = await clients.openWindow('/chat/');
+    }
+
+    // Envoyez un message au client :
+    chatClient.postMessage("Nouveaux messages !");
+  }());
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Clients")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/clients/matchall/index.html b/files/fr/web/api/clients/matchall/index.html deleted file mode 100644 index 2636074f8d..0000000000 --- a/files/fr/web/api/clients/matchall/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Clients.matchAll() -slug: Web/API/Clients/matchAll -tags: - - API - - Client - - Expérimental(2) - - Méthode - - Référence(2) - - Service Workers -translation_of: Web/API/Clients/matchAll ---- -
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
- -
La méthode matchAll() de l'interface {{domxref("Clients")}} retourne une Promesse pour une liste de service worker clients. Inclure le paramètre options permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si options n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker.
- -
 
- -

Syntaxe

- -
ServiceWorkerClients.matchAll(options).then(function(clients) {
-  // faire quelque chose avec la list de clients
-});
- -

Paramètres

- -
-
options
-

L'objet option vous permet de définir les options pour l'opération. Les options disponibles sont :

-
    -
  • includeUncontrolled: Un {{domxref("Boolean")}} — défini à true, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est false.
    • -
  • type: Défini le type de client que vous voulez observer. Les types disponibles sont window, worker, sharedworker, et all. La valeur par défaut est all.
    • -
-
-
- -

Valeur de retour

- -

Une  Promesse qui se résout avec un tableau d'objets {{domxref("Client")}}.

- -

Exemples

- -
clients.matchAll(options).then(function(clientList) {
-  for(var i = 0 ; i < clients.length ; i++) {
-    if(clientList[i].url === 'index.html') {
-      clients.openWindow(clientList[i]);
-      // ou faire quelque chose avec le client
-    }
-  }
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Définition initial.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Clients.matchAll")}}

diff --git a/files/fr/web/api/clients/matchall/index.md b/files/fr/web/api/clients/matchall/index.md new file mode 100644 index 0000000000..2636074f8d --- /dev/null +++ b/files/fr/web/api/clients/matchall/index.md @@ -0,0 +1,71 @@ +--- +title: Clients.matchAll() +slug: Web/API/Clients/matchAll +tags: + - API + - Client + - Expérimental(2) + - Méthode + - Référence(2) + - Service Workers +translation_of: Web/API/Clients/matchAll +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +
La méthode matchAll() de l'interface {{domxref("Clients")}} retourne une Promesse pour une liste de service worker clients. Inclure le paramètre options permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si options n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker.
+ +
 
+ +

Syntaxe

+ +
ServiceWorkerClients.matchAll(options).then(function(clients) {
+  // faire quelque chose avec la list de clients
+});
+ +

Paramètres

+ +
+
options
+

L'objet option vous permet de définir les options pour l'opération. Les options disponibles sont :

+
    +
  • includeUncontrolled: Un {{domxref("Boolean")}} — défini à true, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est false.
    • +
  • type: Défini le type de client que vous voulez observer. Les types disponibles sont window, worker, sharedworker, et all. La valeur par défaut est all.
    • +
+
+
+ +

Valeur de retour

+ +

Une  Promesse qui se résout avec un tableau d'objets {{domxref("Client")}}.

+ +

Exemples

+ +
clients.matchAll(options).then(function(clientList) {
+  for(var i = 0 ; i < clients.length ; i++) {
+    if(clientList[i].url === 'index.html') {
+      clients.openWindow(clientList[i]);
+      // ou faire quelque chose avec le client
+    }
+  }
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Définition initial.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Clients.matchAll")}}

diff --git a/files/fr/web/api/clients/openwindow/index.html b/files/fr/web/api/clients/openwindow/index.html deleted file mode 100644 index 1116da97f5..0000000000 --- a/files/fr/web/api/clients/openwindow/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Clients.openWindow() -slug: Web/API/Clients/openWindow -translation_of: Web/API/Clients/openWindow ---- -

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

- -

La méthode openWindow() de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup,   openWindow() lèvera une InvalidAccessError.

- -

Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification.

- -

Syntaxe

- -
ServiceWorkerClients.openWindow(url).then(function(WindowClient) {
-  // Faire quelque chose avec le WindowClient
-});
- -

Paramètres

- -
-
url
-
Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même  origine que le script d'origine.
-
- -

Valeur de retour

- -

Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon.

- -

Exemples

- -
// Quand l'utilisateur click sur une notification, focus sur la fenêtre si elle existe,
-// ou ouvre en une autre.
-onotificationclick = function(event) {
-  var found = false;
-  clients.matchAll().then(function(clients) {
-    for (i = 0; i < clients.length; i++) {
-      if (clients[i].url === event.data.url) {
-        // La fenêtre existe, focus dessus.
-        found = true;
-        clients[i].focus();
-        break;
-      }
-    }
-    if (!found) {
-      // Crée une nouvelle fenêtre
-      clients.openWindow(event.data.url).then(function(windowClient) {
-        // Faire quelque chose avec le WindowClient
-      });
-    }
-  });
-};
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Clients.openWindow")}}

diff --git a/files/fr/web/api/clients/openwindow/index.md b/files/fr/web/api/clients/openwindow/index.md new file mode 100644 index 0000000000..1116da97f5 --- /dev/null +++ b/files/fr/web/api/clients/openwindow/index.md @@ -0,0 +1,73 @@ +--- +title: Clients.openWindow() +slug: Web/API/Clients/openWindow +translation_of: Web/API/Clients/openWindow +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

La méthode openWindow() de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup,   openWindow() lèvera une InvalidAccessError.

+ +

Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification.

+ +

Syntaxe

+ +
ServiceWorkerClients.openWindow(url).then(function(WindowClient) {
+  // Faire quelque chose avec le WindowClient
+});
+ +

Paramètres

+ +
+
url
+
Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même  origine que le script d'origine.
+
+ +

Valeur de retour

+ +

Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon.

+ +

Exemples

+ +
// Quand l'utilisateur click sur une notification, focus sur la fenêtre si elle existe,
+// ou ouvre en une autre.
+onotificationclick = function(event) {
+  var found = false;
+  clients.matchAll().then(function(clients) {
+    for (i = 0; i < clients.length; i++) {
+      if (clients[i].url === event.data.url) {
+        // La fenêtre existe, focus dessus.
+        found = true;
+        clients[i].focus();
+        break;
+      }
+    }
+    if (!found) {
+      // Crée une nouvelle fenêtre
+      clients.openWindow(event.data.url).then(function(windowClient) {
+        // Faire quelque chose avec le WindowClient
+      });
+    }
+  });
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#clients', 'Clients')}}{{Spec2('Service Workers')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Clients.openWindow")}}

diff --git a/files/fr/web/api/clipboard/index.html b/files/fr/web/api/clipboard/index.html deleted file mode 100644 index 2dbef5414b..0000000000 --- a/files/fr/web/api/clipboard/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Clipboard -slug: Web/API/Clipboard -tags: - - API - - Clip - - Clipboard - - Clipboard API - - Editing - - Interface - - Pasteboard - - Presse-papiers - - Reference -translation_of: Web/API/Clipboard ---- -

{{APIRef("Clipboard API")}}

- -
-

Note : Le presse-papiers est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies.

- -

Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces.

-
- -

L’interface Clipboard implémente l’API clipboard, qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web.

- -

Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}.

- -

Les appels aux méthodes de l’objet Clipboard échoueront si l’utilisateur ou l’utilisatrice n’a pas accordé les permissions requises en utilisant l’API permissions, et la permission "clipboard-read" ou "clipboard-write" selon le besoin.

- -
-

Note : En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails.

-
- -

Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé.

- -

Méthodes

- -

Clipboard est basé sur l’interface {{domxref("EventTarget")}}, et inclut les méthodes de celle-ci.

- -
-
{{domxref("Clipboard.read()","read()")}}
-
Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données.
-
{{domxref("Clipboard.readText()","readText()")}}
-
Demande du texte depuis le presse-papiers du système ; renvoie une Promise qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible.
-
{{domxref("Clipboard.write()","write()")}}
-
Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la Promise renvoyée.
-
{{domxref("Clipboard.writeText()","writeText()")}}
-
Écrit du texte dans le presse-papiers du système, renvoyant une Promise qui est résolue une fois que le texte est entièrement copié dans le presse-papiers.
-
- -

Disponibilité du presse-papiers

- -

L’API clipboard asynchrone est une addition relativement récente, et son processus de mise en œuvre dans les navigateurs n’est pas encore terminé. En raison de questions de sécurité et de complexités techniques, l’intégration de cette API se fait progressivement dans la plupart des navigateurs.

- -

Par exemple, Firefox ne supporte pas encore les permissions "clipboard-read" et "clipboard-write", et l’accès aux méthodes pour lire et modifier le contenu du presse-papiers sont restreintes d’autres façons.

- -

Pour les WebExtensions, vous pouvez demander les permissions "clipboardRead" et "clipboardWrite" afin de pouvoir utiliser clipboard.readText() et clipboard.writeText(). Les {{Glossary("Content Script", "scripts de contenu")}} appliqués à des sites HTTP n’ont pas accès à l’objet Clipboard. Voir extensions in Firefox 63.

- -

De plus, {{domxref("Clipboard.read", "read()")}} et {{domxref("Clipboard.write", "write()")}} sont désactivées par défaut et requièrent de changer une préférence pour les activer. Consultez les tables de compatibilité de chaque méthode avant de les utiliser.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Clipboard API','#clipboard-interface','Clipboard')}}{{Spec2('Clipboard API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Clipboard")}}

diff --git a/files/fr/web/api/clipboard/index.md b/files/fr/web/api/clipboard/index.md new file mode 100644 index 0000000000..2dbef5414b --- /dev/null +++ b/files/fr/web/api/clipboard/index.md @@ -0,0 +1,80 @@ +--- +title: Clipboard +slug: Web/API/Clipboard +tags: + - API + - Clip + - Clipboard + - Clipboard API + - Editing + - Interface + - Pasteboard + - Presse-papiers + - Reference +translation_of: Web/API/Clipboard +--- +

{{APIRef("Clipboard API")}}

+ +
+

Note : Le presse-papiers est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies.

+ +

Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces.

+
+ +

L’interface Clipboard implémente l’API clipboard, qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web.

+ +

Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}.

+ +

Les appels aux méthodes de l’objet Clipboard échoueront si l’utilisateur ou l’utilisatrice n’a pas accordé les permissions requises en utilisant l’API permissions, et la permission "clipboard-read" ou "clipboard-write" selon le besoin.

+ +
+

Note : En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails.

+
+ +

Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé.

+ +

Méthodes

+ +

Clipboard est basé sur l’interface {{domxref("EventTarget")}}, et inclut les méthodes de celle-ci.

+ +
+
{{domxref("Clipboard.read()","read()")}}
+
Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données.
+
{{domxref("Clipboard.readText()","readText()")}}
+
Demande du texte depuis le presse-papiers du système ; renvoie une Promise qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible.
+
{{domxref("Clipboard.write()","write()")}}
+
Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la Promise renvoyée.
+
{{domxref("Clipboard.writeText()","writeText()")}}
+
Écrit du texte dans le presse-papiers du système, renvoyant une Promise qui est résolue une fois que le texte est entièrement copié dans le presse-papiers.
+
+ +

Disponibilité du presse-papiers

+ +

L’API clipboard asynchrone est une addition relativement récente, et son processus de mise en œuvre dans les navigateurs n’est pas encore terminé. En raison de questions de sécurité et de complexités techniques, l’intégration de cette API se fait progressivement dans la plupart des navigateurs.

+ +

Par exemple, Firefox ne supporte pas encore les permissions "clipboard-read" et "clipboard-write", et l’accès aux méthodes pour lire et modifier le contenu du presse-papiers sont restreintes d’autres façons.

+ +

Pour les WebExtensions, vous pouvez demander les permissions "clipboardRead" et "clipboardWrite" afin de pouvoir utiliser clipboard.readText() et clipboard.writeText(). Les {{Glossary("Content Script", "scripts de contenu")}} appliqués à des sites HTTP n’ont pas accès à l’objet Clipboard. Voir extensions in Firefox 63.

+ +

De plus, {{domxref("Clipboard.read", "read()")}} et {{domxref("Clipboard.write", "write()")}} sont désactivées par défaut et requièrent de changer une préférence pour les activer. Consultez les tables de compatibilité de chaque méthode avant de les utiliser.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Clipboard API','#clipboard-interface','Clipboard')}}{{Spec2('Clipboard API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Clipboard")}}

diff --git a/files/fr/web/api/clipboard/write/index.html b/files/fr/web/api/clipboard/write/index.html deleted file mode 100644 index 214a32eac6..0000000000 --- a/files/fr/web/api/clipboard/write/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Clipboard.write() -slug: Web/API/Clipboard/write -translation_of: Web/API/Clipboard/write ---- -
{{APIRef("Clipboard API")}}
- -

La methode write() de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller.

- -

Avant de pouvoir écrire dans le presse-papier, vous devez utiliser Permissions API pour avoir l'autorisation "clipboard-write".

- -
-

Note: Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information.

-
- -

Syntax

- -
var promise = navigator.clipboard.write(dataTransfer)
- -

Paramètres

- -
-
dataTransfer
-
Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier.
-
- -

Return value

- -

Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue.

- -

Exemple

- -

Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre.

- -
function setClipboard(text) {
-  let data = new DataTransfer();
-
-  data.items.add(text, "text/plain");
-  navigator.clipboard.write(data).then(function() {
-    /* success */
-  }, function() {
-    /* failure */
-  });
-}
-
- -

Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte àDataTransfer, ensuite write() est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur.

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Clipboard API','#h-clipboard-write-data','write()')}}{{Spec2('Clipboard API')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.Clipboard.write")}}

diff --git a/files/fr/web/api/clipboard/write/index.md b/files/fr/web/api/clipboard/write/index.md new file mode 100644 index 0000000000..214a32eac6 --- /dev/null +++ b/files/fr/web/api/clipboard/write/index.md @@ -0,0 +1,70 @@ +--- +title: Clipboard.write() +slug: Web/API/Clipboard/write +translation_of: Web/API/Clipboard/write +--- +
{{APIRef("Clipboard API")}}
+ +

La methode write() de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller.

+ +

Avant de pouvoir écrire dans le presse-papier, vous devez utiliser Permissions API pour avoir l'autorisation "clipboard-write".

+ +
+

Note: Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information.

+
+ +

Syntax

+ +
var promise = navigator.clipboard.write(dataTransfer)
+ +

Paramètres

+ +
+
dataTransfer
+
Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier.
+
+ +

Return value

+ +

Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue.

+ +

Exemple

+ +

Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre.

+ +
function setClipboard(text) {
+  let data = new DataTransfer();
+
+  data.items.add(text, "text/plain");
+  navigator.clipboard.write(data).then(function() {
+    /* success */
+  }, function() {
+    /* failure */
+  });
+}
+
+ +

Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte àDataTransfer, ensuite write() est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Clipboard API','#h-clipboard-write-data','write()')}}{{Spec2('Clipboard API')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Clipboard.write")}}

diff --git a/files/fr/web/api/clipboard/writetext/index.html b/files/fr/web/api/clipboard/writetext/index.html deleted file mode 100644 index 93b7310625..0000000000 --- a/files/fr/web/api/clipboard/writetext/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Clipboard.writeText() -slug: Web/API/Clipboard/writeText -translation_of: Web/API/Clipboard/writeText ---- -
{{APIRef("Clipboard API")}}
- -

La méthode writeText() de l’interface {{domxref("Clipboard")}} écrit le texte spécifié dans le presse-papiers du système.

- -
-

Note : La spécification requiert que l’API Permissions soit utilisée pour obtenir la permission "clipboardWrite" avant d’écrire dans le presse-papiers. Cependant, les prérequis exacts varient de navigateur en navigateur, car c’est une API récente. Consultez la {{anch("Browser compatibility", "table de compatibilité")}} et {{SectionOnPage("/docs/Web/API/Clipboard", "Clipboard availability")}} pour plus de détails.

-
- -

Syntaxe

- -
var promesse = navigator.clipboard.writeText(nouveauTexte)
- -

Paramètres

- -
-
nouveauTexte
-
La {{domxref("DOMString")}} devant être écrite dans le presse-papiers.
-
- -

Valeur de retour

- -

Une {{jsxref("Promise")}} qui sera résolue une fois que le contenu du presse-papiers aura été mis à jour. La promesse est rejetée si le code appelant n’a pas la permission d’écrire dans le presse-papiers.

- -

Exemple

- -

Cet exemple définit le contenu du presse-papiers comme la chaîne "<presse-papiers vide>".

- -
navigator.clipboard.writeText("<presse-papiers vide>").then(function() {
-  /* presse-papiers modifié avec succès */
-}, function() {
-  /* échec de l’écriture dans le presse-papiers */
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Clipboard API','#h-clipboard-writetext-data','writeText()')}}{{Spec2('Clipboard API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Clipboard.writeText")}}

diff --git a/files/fr/web/api/clipboard/writetext/index.md b/files/fr/web/api/clipboard/writetext/index.md new file mode 100644 index 0000000000..93b7310625 --- /dev/null +++ b/files/fr/web/api/clipboard/writetext/index.md @@ -0,0 +1,59 @@ +--- +title: Clipboard.writeText() +slug: Web/API/Clipboard/writeText +translation_of: Web/API/Clipboard/writeText +--- +
{{APIRef("Clipboard API")}}
+ +

La méthode writeText() de l’interface {{domxref("Clipboard")}} écrit le texte spécifié dans le presse-papiers du système.

+ +
+

Note : La spécification requiert que l’API Permissions soit utilisée pour obtenir la permission "clipboardWrite" avant d’écrire dans le presse-papiers. Cependant, les prérequis exacts varient de navigateur en navigateur, car c’est une API récente. Consultez la {{anch("Browser compatibility", "table de compatibilité")}} et {{SectionOnPage("/docs/Web/API/Clipboard", "Clipboard availability")}} pour plus de détails.

+
+ +

Syntaxe

+ +
var promesse = navigator.clipboard.writeText(nouveauTexte)
+ +

Paramètres

+ +
+
nouveauTexte
+
La {{domxref("DOMString")}} devant être écrite dans le presse-papiers.
+
+ +

Valeur de retour

+ +

Une {{jsxref("Promise")}} qui sera résolue une fois que le contenu du presse-papiers aura été mis à jour. La promesse est rejetée si le code appelant n’a pas la permission d’écrire dans le presse-papiers.

+ +

Exemple

+ +

Cet exemple définit le contenu du presse-papiers comme la chaîne "<presse-papiers vide>".

+ +
navigator.clipboard.writeText("<presse-papiers vide>").then(function() {
+  /* presse-papiers modifié avec succès */
+}, function() {
+  /* échec de l’écriture dans le presse-papiers */
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Clipboard API','#h-clipboard-writetext-data','writeText()')}}{{Spec2('Clipboard API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Clipboard.writeText")}}

diff --git a/files/fr/web/api/clipboard_api/index.html b/files/fr/web/api/clipboard_api/index.html deleted file mode 100644 index bef8e4bafd..0000000000 --- a/files/fr/web/api/clipboard_api/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: API Clipboard -slug: Web/API/Clipboard_API -translation_of: 'Web/API/Clipboard_API' ---- -
{{DefaultAPISidebar("Clipboard API")}}
- -

L'API Clipboard (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'API Permissions : la permission clipboard-write est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission clipboard-read doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers.

- -
-

Note : Cette API n'est pas disponible dans les Web Workers (elle n'est pas exposée via {{domxref("WorkerNavigator")}}).

-
- -

Cette API est conçue pour remplacer l'accès au presse-papiers précédemment proposé via {{domxref("document.execCommand()")}}.

- -

Accéder au presse-papier

- -

Au lieu de créer un objet Clipboard lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} :

- -
navigator.clipboard.readText().then(
-  clipText => document.querySelector(".editor").innerText += clipText);
- -

Ce bout de code analyse le texte à partir du presse-papiers et l'insère après le premier élément trouvé comportant la classe editor. Puisque {{domxref("Clipboard.readText", "readText()")}} (sans oublier {{domxref("Clipboard.read", "read()")}}) retournent une chaîne vide si le contenu du presse-papier n'est pas textuel, ce code est sécurisé.

- -

Interfaces

- -
-
{{domxref("Clipboard")}} {{securecontext_inline}}
-
Fournit une interface pour la lecture et l'écriture de texte et de données sur le presse-papiers du système. La spécification s'y réfère avec le terme "Async Clipboard API".
-
{{domxref("ClipboardEvent")}} {{securecontext_inline}}
-
Représente les évènements fournissant l'information relative à la modification du presse-papiers, qui peut être l'évènement {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}} ou {{domxref("Element/paste_event", "paste")}}. La spécification s'y réfère avec le terme "Clipboard Event API".
-
{{domxref("ClipboardItem")}} {{securecontext_inline}}
-
Représente un format de terme unique utilisé pour lire ou écrire des données.
-
- -

Spécifications

- -

{{Specifications("api.Clipboard")}}

- -

Compatibilité des navigateurs

- -

Clipboard

- -

{{Compat("api.Clipboard")}}

- -

ClipboardEvent

- -

{{Compat("api.ClipboardEvent")}}

- -

ClipboardItem

- -

{{Compat("api.ClipboardItem")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/clipboard_api/index.md b/files/fr/web/api/clipboard_api/index.md new file mode 100644 index 0000000000..bef8e4bafd --- /dev/null +++ b/files/fr/web/api/clipboard_api/index.md @@ -0,0 +1,61 @@ +--- +title: API Clipboard +slug: Web/API/Clipboard_API +translation_of: 'Web/API/Clipboard_API' +--- +
{{DefaultAPISidebar("Clipboard API")}}
+ +

L'API Clipboard (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'API Permissions : la permission clipboard-write est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission clipboard-read doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers.

+ +
+

Note : Cette API n'est pas disponible dans les Web Workers (elle n'est pas exposée via {{domxref("WorkerNavigator")}}).

+
+ +

Cette API est conçue pour remplacer l'accès au presse-papiers précédemment proposé via {{domxref("document.execCommand()")}}.

+ +

Accéder au presse-papier

+ +

Au lieu de créer un objet Clipboard lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} :

+ +
navigator.clipboard.readText().then(
+  clipText => document.querySelector(".editor").innerText += clipText);
+ +

Ce bout de code analyse le texte à partir du presse-papiers et l'insère après le premier élément trouvé comportant la classe editor. Puisque {{domxref("Clipboard.readText", "readText()")}} (sans oublier {{domxref("Clipboard.read", "read()")}}) retournent une chaîne vide si le contenu du presse-papier n'est pas textuel, ce code est sécurisé.

+ +

Interfaces

+ +
+
{{domxref("Clipboard")}} {{securecontext_inline}}
+
Fournit une interface pour la lecture et l'écriture de texte et de données sur le presse-papiers du système. La spécification s'y réfère avec le terme "Async Clipboard API".
+
{{domxref("ClipboardEvent")}} {{securecontext_inline}}
+
Représente les évènements fournissant l'information relative à la modification du presse-papiers, qui peut être l'évènement {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}} ou {{domxref("Element/paste_event", "paste")}}. La spécification s'y réfère avec le terme "Clipboard Event API".
+
{{domxref("ClipboardItem")}} {{securecontext_inline}}
+
Représente un format de terme unique utilisé pour lire ou écrire des données.
+
+ +

Spécifications

+ +

{{Specifications("api.Clipboard")}}

+ +

Compatibilité des navigateurs

+ +

Clipboard

+ +

{{Compat("api.Clipboard")}}

+ +

ClipboardEvent

+ +

{{Compat("api.ClipboardEvent")}}

+ +

ClipboardItem

+ +

{{Compat("api.ClipboardItem")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/closeevent/index.html b/files/fr/web/api/closeevent/index.html deleted file mode 100644 index 3873ad5d76..0000000000 --- a/files/fr/web/api/closeevent/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: CloseEvent -slug: Web/API/CloseEvent -tags: - - API - - Interface - - Reference - - Web - - WebSocket -translation_of: Web/API/CloseEvent ---- -

{{APIRef("Websockets API")}}

- -

Un événement CloseEvent est envoyé au client utilisant une WebSocket lorsque la connexion est fermée. Cet événement est envoyé au listener indiqué par l'attribut onclose de la WebSocket.

- -

Constructeur

- -
-
{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
-
Construit un nouvel événement CloseEvent.
-
- -

Propriétés

- -

Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.

- -
-
{{domxref("CloseEvent.code")}} {{readOnlyInline}}
-
Retourne un unsigned short contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Status codeNomDescription
0–999 Reservé et inutilisé.
1000CLOSE_NORMALFermeture normale ; la connexion s'est terminée normalement.
1001CLOSE_GOING_AWAY -

Reçu lorsque une erreur est apparue sur le serveur ou le navigateur quitte la page ayant ouvert la connexion.

-
1002CLOSE_PROTOCOL_ERRORL'autre partie de la connexion termine la connexion à cause d'une erreur de protocole.
1003CLOSE_UNSUPPORTEDLa connexion est terminée car le serveur à reçu des données d'un type qu'il ne peut pas accepter (par exemple des données binaire plutôt que du texte).
1004 Réservé. Une utilisation pourrait être définie dans le futur.
1005CLOSE_NO_STATUSRéservé. Indique qu'aucun code n'est donné bien qu'un code était attendu.
1006CLOSE_ABNORMALRéservé. Utilisé pour indiquer que la connexion a été terminée anormalement (sans paquet indiquant la fermeture).
1007 Le serveur termine la connexion car un message contenant des données incohérentes a été reçu (e.g., des données qui ne sont pas au format UTF-8 dans un message texte).
1008 Le serveur termine la connexion car un message ne respectant pas la politique du serveur est reçu. C'est un code d'état générique qui est utilisé lorsque les codes 1003 et 1009 ne correspondent pas à la situation.
1009CLOSE_TOO_LARGELe serveur termine la connexion car les données reçues sont trop grosses.
1010 Le client termine la connexion car il souhaitait négocier une ou plusieurs extensions mais le serveur ne l'a pas fait.
1011 Le serveur termine la connexion car il a rencontré un problème qui l'empêche de traiter la requête.
–1014 Réservé pour une utilisation future par le standard WebSocket.
1015 Réservé. Indique que la connexion a été fermée à cause d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne peut pas être vérifié).
1016–1999 Réservé pour une utilisation future par le standard WebSocket.
2000–2999 Réservé pour une utilisation future par le standard WebSocket.
3000–3999 Disponible pour être utilisé par des bibliothèques ou des frameworks. Ces codes ne doivent pas être utilisés par des applications.
4000–4999 Disponible pour être utilisés par des applications.
-
-
{{domxref("CloseEvent.reason")}} {{readOnlyInline}}
-
Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé.
-
{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}
-
Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non.
-
- -

Méthodes

- -

Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.

- -
-
{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}
-
Initialise la valeur d'un CloseEvent. Si l'événement a déjà été envoyé, cette méthode ne fait rien.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('HTML WHATWG', 'web-sockets.html#the-closeevent-interface', 'CloseEvent') }}{{ Spec2('HTML WHATWG') }}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.CloseEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/closeevent/index.md b/files/fr/web/api/closeevent/index.md new file mode 100644 index 0000000000..3873ad5d76 --- /dev/null +++ b/files/fr/web/api/closeevent/index.md @@ -0,0 +1,179 @@ +--- +title: CloseEvent +slug: Web/API/CloseEvent +tags: + - API + - Interface + - Reference + - Web + - WebSocket +translation_of: Web/API/CloseEvent +--- +

{{APIRef("Websockets API")}}

+ +

Un événement CloseEvent est envoyé au client utilisant une WebSocket lorsque la connexion est fermée. Cet événement est envoyé au listener indiqué par l'attribut onclose de la WebSocket.

+ +

Constructeur

+ +
+
{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
+
Construit un nouvel événement CloseEvent.
+
+ +

Propriétés

+ +

Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.

+ +
+
{{domxref("CloseEvent.code")}} {{readOnlyInline}}
+
Retourne un unsigned short contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Status codeNomDescription
0–999 Reservé et inutilisé.
1000CLOSE_NORMALFermeture normale ; la connexion s'est terminée normalement.
1001CLOSE_GOING_AWAY +

Reçu lorsque une erreur est apparue sur le serveur ou le navigateur quitte la page ayant ouvert la connexion.

+
1002CLOSE_PROTOCOL_ERRORL'autre partie de la connexion termine la connexion à cause d'une erreur de protocole.
1003CLOSE_UNSUPPORTEDLa connexion est terminée car le serveur à reçu des données d'un type qu'il ne peut pas accepter (par exemple des données binaire plutôt que du texte).
1004 Réservé. Une utilisation pourrait être définie dans le futur.
1005CLOSE_NO_STATUSRéservé. Indique qu'aucun code n'est donné bien qu'un code était attendu.
1006CLOSE_ABNORMALRéservé. Utilisé pour indiquer que la connexion a été terminée anormalement (sans paquet indiquant la fermeture).
1007 Le serveur termine la connexion car un message contenant des données incohérentes a été reçu (e.g., des données qui ne sont pas au format UTF-8 dans un message texte).
1008 Le serveur termine la connexion car un message ne respectant pas la politique du serveur est reçu. C'est un code d'état générique qui est utilisé lorsque les codes 1003 et 1009 ne correspondent pas à la situation.
1009CLOSE_TOO_LARGELe serveur termine la connexion car les données reçues sont trop grosses.
1010 Le client termine la connexion car il souhaitait négocier une ou plusieurs extensions mais le serveur ne l'a pas fait.
1011 Le serveur termine la connexion car il a rencontré un problème qui l'empêche de traiter la requête.
–1014 Réservé pour une utilisation future par le standard WebSocket.
1015 Réservé. Indique que la connexion a été fermée à cause d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne peut pas être vérifié).
1016–1999 Réservé pour une utilisation future par le standard WebSocket.
2000–2999 Réservé pour une utilisation future par le standard WebSocket.
3000–3999 Disponible pour être utilisé par des bibliothèques ou des frameworks. Ces codes ne doivent pas être utilisés par des applications.
4000–4999 Disponible pour être utilisés par des applications.
+
+
{{domxref("CloseEvent.reason")}} {{readOnlyInline}}
+
Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé.
+
{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}
+
Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non.
+
+ +

Méthodes

+ +

Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.

+ +
+
{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}
+
Initialise la valeur d'un CloseEvent. Si l'événement a déjà été envoyé, cette méthode ne fait rien.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('HTML WHATWG', 'web-sockets.html#the-closeevent-interface', 'CloseEvent') }}{{ Spec2('HTML WHATWG') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CloseEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/comment/comment/index.html b/files/fr/web/api/comment/comment/index.html deleted file mode 100644 index 8e4017c0d3..0000000000 --- a/files/fr/web/api/comment/comment/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Comment() -slug: Web/API/Comment/Comment -tags: - - API - - Commentaires - - DOM -translation_of: Web/API/Comment/Comment ---- -

{{ApiRef("DOM")}}{{seeCompatTable}}

- -

Le constructeur Comment() renvoie un objet {{domxref("Comment")}} (Commentaire) nouvellement créé avec le {{domxref ("DOMString")}} donné en paramètre comme contenu textuel.

- -

Syntaxe

- -
comment1 = new Comment(); // Create an empty comment
-comment2 = new Comment("This is a comment");
-
- -

Exemple

- -
var comment = new Comment("Test");
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#comment', 'Comment.Comment()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Comment.Comment")}}

- -

Voir aussi

- - - -

 

diff --git a/files/fr/web/api/comment/comment/index.md b/files/fr/web/api/comment/comment/index.md new file mode 100644 index 0000000000..8e4017c0d3 --- /dev/null +++ b/files/fr/web/api/comment/comment/index.md @@ -0,0 +1,53 @@ +--- +title: Comment() +slug: Web/API/Comment/Comment +tags: + - API + - Commentaires + - DOM +translation_of: Web/API/Comment/Comment +--- +

{{ApiRef("DOM")}}{{seeCompatTable}}

+ +

Le constructeur Comment() renvoie un objet {{domxref("Comment")}} (Commentaire) nouvellement créé avec le {{domxref ("DOMString")}} donné en paramètre comme contenu textuel.

+ +

Syntaxe

+ +
comment1 = new Comment(); // Create an empty comment
+comment2 = new Comment("This is a comment");
+
+ +

Exemple

+ +
var comment = new Comment("Test");
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#comment', 'Comment.Comment()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Comment.Comment")}}

+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/api/comment/index.html b/files/fr/web/api/comment/index.html deleted file mode 100644 index 804bd44d58..0000000000 --- a/files/fr/web/api/comment/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Comment -slug: Web/API/Comment -tags: - - API - - DOM -translation_of: Web/API/Comment ---- -

{{ ApiRef("DOM") }}

- -

L'interface Comment représente des annotations textuelles au sein du balisage; même si elles ne sont généralement pas montrées, elles sont disponibles à la lecture dans le code source. Les commentaires sont représentés en HTML et XML avec du contenu entre cette balise '<!--' et celle ci '-->'. Pour XML, la séquence de caractère suivante '--' ne peut être utilisée dans un commentaire.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.

- -

Constructeur

- -
-
{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}
-
Retourne un objet Comment avec son contenu textuel en paramètre.
-
- -

Méthodes

- -

Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#comment', 'Comment')}}{{Spec2('DOM WHATWG')}}Ajoute le constructeur.
{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM3 Core')}}Pas de changement à partir de {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM2 Core')}}Pas de changement à partir de {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM1')}}Définition initale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Comment")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/comment/index.md b/files/fr/web/api/comment/index.md new file mode 100644 index 0000000000..804bd44d58 --- /dev/null +++ b/files/fr/web/api/comment/index.md @@ -0,0 +1,70 @@ +--- +title: Comment +slug: Web/API/Comment +tags: + - API + - DOM +translation_of: Web/API/Comment +--- +

{{ ApiRef("DOM") }}

+ +

L'interface Comment représente des annotations textuelles au sein du balisage; même si elles ne sont généralement pas montrées, elles sont disponibles à la lecture dans le code source. Les commentaires sont représentés en HTML et XML avec du contenu entre cette balise '<!--' et celle ci '-->'. Pour XML, la séquence de caractère suivante '--' ne peut être utilisée dans un commentaire.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.

+ +

Constructeur

+ +
+
{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}
+
Retourne un objet Comment avec son contenu textuel en paramètre.
+
+ +

Méthodes

+ +

Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#comment', 'Comment')}}{{Spec2('DOM WHATWG')}}Ajoute le constructeur.
{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM3 Core')}}Pas de changement à partir de {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM2 Core')}}Pas de changement à partir de {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM1')}}Définition initale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Comment")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/compositionevent/index.html b/files/fr/web/api/compositionevent/index.html deleted file mode 100644 index cf94e5b643..0000000000 --- a/files/fr/web/api/compositionevent/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: CompositionEvent -slug: Web/API/CompositionEvent -tags: - - API - - DOM - - Evènement -translation_of: Web/API/CompositionEvent ---- -

{{APIRef("DOM Events")}}

- -

Le CompositionEvent DOM représente les évènements qui se produisent en raison de l'utilisateur entrant indirectement le texte.

- -

Constructeur

- -
-
{{domxref("CompositionEvent.CompositionEvent()", "CompositionEvent()")}}
-
Crée une nouvelle instance d'objet CompositionEvent .
-
- -

Propriétés

- -

Cette interface hérite également des propriétés de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.

- -
-
{{domxref("CompositionEvent.data")}} {{readonlyinline}}
-
Renvoie les caractères générés par la méthode d'entrée qui a relevé l'événement ; cela varie en fonction du type d'événement ayant généré l'objet CompositionEvent.
-
{{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}}
-
Renvoie les paramètres régionaux de la méthode de saisie actuelle (par exemple, les paramètres régionaux de disposition du clavier si la composition est associée à IME).
-
- -

Méthodes

- -

Cette interface hérite également des méthodes de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.

- -
-
{{domxref("CompositionEvent.initCompositionEvent()")}} {{deprecated_inline}}
-
Initialise les attributs d'un objet CompositionEvent.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}}{{Spec2('UI Events')}} 
{{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}}{{Spec2('DOM3 Events')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.CompositionEvent")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/compositionevent/index.md b/files/fr/web/api/compositionevent/index.md new file mode 100644 index 0000000000..cf94e5b643 --- /dev/null +++ b/files/fr/web/api/compositionevent/index.md @@ -0,0 +1,79 @@ +--- +title: CompositionEvent +slug: Web/API/CompositionEvent +tags: + - API + - DOM + - Evènement +translation_of: Web/API/CompositionEvent +--- +

{{APIRef("DOM Events")}}

+ +

Le CompositionEvent DOM représente les évènements qui se produisent en raison de l'utilisateur entrant indirectement le texte.

+ +

Constructeur

+ +
+
{{domxref("CompositionEvent.CompositionEvent()", "CompositionEvent()")}}
+
Crée une nouvelle instance d'objet CompositionEvent .
+
+ +

Propriétés

+ +

Cette interface hérite également des propriétés de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.

+ +
+
{{domxref("CompositionEvent.data")}} {{readonlyinline}}
+
Renvoie les caractères générés par la méthode d'entrée qui a relevé l'événement ; cela varie en fonction du type d'événement ayant généré l'objet CompositionEvent.
+
{{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}}
+
Renvoie les paramètres régionaux de la méthode de saisie actuelle (par exemple, les paramètres régionaux de disposition du clavier si la composition est associée à IME).
+
+ +

Méthodes

+ +

Cette interface hérite également des méthodes de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.

+ +
+
{{domxref("CompositionEvent.initCompositionEvent()")}} {{deprecated_inline}}
+
Initialise les attributs d'un objet CompositionEvent.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}}{{Spec2('UI Events')}} 
{{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}}{{Spec2('DOM3 Events')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.CompositionEvent")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/assert/index.html b/files/fr/web/api/console/assert/index.html deleted file mode 100644 index db81d236b2..0000000000 --- a/files/fr/web/api/console/assert/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Console.assert() -slug: Web/API/Console/assert -tags: - - API - - DOM - - Méthodes - - débogage -translation_of: Web/API/console/assert ---- -

{{APIRef("Console API")}}

- -

Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'assertion est vraie, rien ne se produit.

- -

{{AvailableInWorkers}}

- -
-

Note: La méthode console.assert() est implémentée différement dans les vieilles version de Node.js que dans celle disponible dans les navigateurs.

- -

Plus précisément, dans les navigateurs, appeler console.assert() avec une condition fausse affichera le message dans la console sans interrompre l'éxecution du code suivant. Dans les versions inférieure à la v10 de Node.js, cependant, une assertion fausse lèvera une exception AssertionError. Cette différence de comportement a été corrigée par la v10 de Node et console.assert() se comporte maintenant de la même façon dans Node et dans les navigateurs.

-
- -

Syntaxe

- -
console.assert(assertion, obj1 [, obj2, ..., objN]);
-console.assert(assertion, msg [, subst1, ..., substN]);
-
- -

Paramètres

- -
-
assertion
-
N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console.
-
obj1 ... objN
-
Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée.
-
msg
-
Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution.
-
subst1 ... substN
-
L'objet javascript avec lequel remplacer les chaînes de substitution dans msg. Ceci vous offre plus de contrôle sur ce qui est affiché.
-
- -

Allez voir Afficher du texte dans la console dans la documentation de {{domxref("console")}} pour plus de détails.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Console API", "#assert", "console.assert()")}}{{Spec2("Console API")}}Définition initiale
- -

 

- -

Compatibilité entre les navigateurs

- -

{{Compat("api.Console.assert")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/assert/index.md b/files/fr/web/api/console/assert/index.md new file mode 100644 index 0000000000..db81d236b2 --- /dev/null +++ b/files/fr/web/api/console/assert/index.md @@ -0,0 +1,76 @@ +--- +title: Console.assert() +slug: Web/API/Console/assert +tags: + - API + - DOM + - Méthodes + - débogage +translation_of: Web/API/console/assert +--- +

{{APIRef("Console API")}}

+ +

Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'assertion est vraie, rien ne se produit.

+ +

{{AvailableInWorkers}}

+ +
+

Note: La méthode console.assert() est implémentée différement dans les vieilles version de Node.js que dans celle disponible dans les navigateurs.

+ +

Plus précisément, dans les navigateurs, appeler console.assert() avec une condition fausse affichera le message dans la console sans interrompre l'éxecution du code suivant. Dans les versions inférieure à la v10 de Node.js, cependant, une assertion fausse lèvera une exception AssertionError. Cette différence de comportement a été corrigée par la v10 de Node et console.assert() se comporte maintenant de la même façon dans Node et dans les navigateurs.

+
+ +

Syntaxe

+ +
console.assert(assertion, obj1 [, obj2, ..., objN]);
+console.assert(assertion, msg [, subst1, ..., substN]);
+
+ +

Paramètres

+ +
+
assertion
+
N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console.
+
obj1 ... objN
+
Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée.
+
msg
+
Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution.
+
subst1 ... substN
+
L'objet javascript avec lequel remplacer les chaînes de substitution dans msg. Ceci vous offre plus de contrôle sur ce qui est affiché.
+
+ +

Allez voir Afficher du texte dans la console dans la documentation de {{domxref("console")}} pour plus de détails.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#assert", "console.assert()")}}{{Spec2("Console API")}}Définition initiale
+ +

 

+ +

Compatibilité entre les navigateurs

+ +

{{Compat("api.Console.assert")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/clear/index.html b/files/fr/web/api/console/clear/index.html deleted file mode 100644 index 0df1cf3edf..0000000000 --- a/files/fr/web/api/console/clear/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: clear() -slug: Web/API/Console/clear -translation_of: Web/API/Console/clear ---- -
{{APIRef("Console API")}}
- -

Vide la console.

- -

Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared").

- -

À noter: sur Google Chrome, console.clear() n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les paramètres de l'inspecteur.

- -

Syntaxe

- -
console.clear();
-
- -

Paramètres

- - - - - - - - - - - - - - - - -
ParamètresStatusCommentaire
{{SpecName("Console API", "#clear", "console.clear()")}}{{Spec2("Console API")}}Définition Initial
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.clear")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/clear/index.md b/files/fr/web/api/console/clear/index.md new file mode 100644 index 0000000000..0df1cf3edf --- /dev/null +++ b/files/fr/web/api/console/clear/index.md @@ -0,0 +1,48 @@ +--- +title: clear() +slug: Web/API/Console/clear +translation_of: Web/API/Console/clear +--- +
{{APIRef("Console API")}}
+ +

Vide la console.

+ +

Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared").

+ +

À noter: sur Google Chrome, console.clear() n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les paramètres de l'inspecteur.

+ +

Syntaxe

+ +
console.clear();
+
+ +

Paramètres

+ + + + + + + + + + + + + + + + +
ParamètresStatusCommentaire
{{SpecName("Console API", "#clear", "console.clear()")}}{{Spec2("Console API")}}Définition Initial
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.clear")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/count/index.html b/files/fr/web/api/console/count/index.html deleted file mode 100644 index 6c10e8458f..0000000000 --- a/files/fr/web/api/console/count/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Console.count() -slug: Web/API/Console/count -tags: - - API - - DOM - - Développement - - Méthodes - - Web - - console - - débogage -translation_of: Web/API/Console/count ---- -
{{APIRef("Console API")}}
- -

Affiche dans la console le nombre de fois où la fonction count() a été appelée. Cette fonction accepte l'argument optionnel label.

- -

{{AvailableInWorkers}}

- -

Si un label est passé en paramètre, la fonction affiche le nombre de fois où la fonction count() a été appelée pour ce label spécifiquempent.

- -

Si aucun label est passé en paramètre, la fonction affiche le nombre de fois où la fonction count() a été appelée jusqu'à présent.

- -

Ci-dessous, un exemple d'utilisation :

- -
function greet() {
-  console.count();
-  return "hi " + user;
-}
-
-var user = "bob";
-greet();
-user = "alice";
-greet();
-greet();
-console.count();
- -

La console affichera les lignes suivantes :

- -
"<no label>: 1"
-"<no label>: 2"
-"<no label>: 3"
-"<no label>: 1"
-
- -

A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction count() de la ligne 11 qui est traité comme un événement indépendant.

- -

Si la variable user est passée à la fonction comme paramètre label, le code ci-dessous génèrera un nouveau compteur lorsque la variable user sera modifiée :

- -
function greet() {
-  console.count(user);
-  return "hi " + user;
-}
-
-var user = "bob";
-greet();
-user = "alice";
-greet();
-greet();
-console.count("alice");
- -

La console affichera les lignes suivantes :

- -
"bob: 1"
-"alice: 1"
-"alice: 2"
-"alice: 3"
- -

Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction count() avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà.

- -

Syntaxe

- -
console.count([label]);
-
- -

Paramètres

- -
-
label
-

Une chaîne de caractères. Si ce paramètre est renseigné, count() affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, count() affiche le nombre de fois que la fonction a été appelée sur cette ligne.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName("Console API", "#count", "console.count()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.count")}}

\ No newline at end of file diff --git a/files/fr/web/api/console/count/index.md b/files/fr/web/api/console/count/index.md new file mode 100644 index 0000000000..6c10e8458f --- /dev/null +++ b/files/fr/web/api/console/count/index.md @@ -0,0 +1,104 @@ +--- +title: Console.count() +slug: Web/API/Console/count +tags: + - API + - DOM + - Développement + - Méthodes + - Web + - console + - débogage +translation_of: Web/API/Console/count +--- +
{{APIRef("Console API")}}
+ +

Affiche dans la console le nombre de fois où la fonction count() a été appelée. Cette fonction accepte l'argument optionnel label.

+ +

{{AvailableInWorkers}}

+ +

Si un label est passé en paramètre, la fonction affiche le nombre de fois où la fonction count() a été appelée pour ce label spécifiquempent.

+ +

Si aucun label est passé en paramètre, la fonction affiche le nombre de fois où la fonction count() a été appelée jusqu'à présent.

+ +

Ci-dessous, un exemple d'utilisation :

+ +
function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+var user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+ +

La console affichera les lignes suivantes :

+ +
"<no label>: 1"
+"<no label>: 2"
+"<no label>: 3"
+"<no label>: 1"
+
+ +

A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction count() de la ligne 11 qui est traité comme un événement indépendant.

+ +

Si la variable user est passée à la fonction comme paramètre label, le code ci-dessous génèrera un nouveau compteur lorsque la variable user sera modifiée :

+ +
function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+var user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");
+ +

La console affichera les lignes suivantes :

+ +
"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"
+ +

Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction count() avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà.

+ +

Syntaxe

+ +
console.count([label]);
+
+ +

Paramètres

+ +
+
label
+

Une chaîne de caractères. Si ce paramètre est renseigné, count() affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, count() affiche le nombre de fois que la fonction a été appelée sur cette ligne.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName("Console API", "#count", "console.count()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.count")}}

\ No newline at end of file diff --git a/files/fr/web/api/console/countreset/index.html b/files/fr/web/api/console/countreset/index.html deleted file mode 100644 index 7cf74195e7..0000000000 --- a/files/fr/web/api/console/countreset/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Console.countReset() -slug: Web/API/Console/countReset -translation_of: Web/API/Console/countReset ---- -
{{APIRef("Console API")}}
- -

Remet le compteur à zero. Cette fonction prend un argument optionnel label

- -

{{AvailableInWorkers}}

- -

Syntax

- -
console.countReset([label]);
-
- -

Parameters

- -
-
label
-
Si specifié, countReset() remet à zero le compteur associé à ce label. S'il n'est pas specifié, countReset() remet à zéro le compteur par defaut.
-
- -

Return value

- -

Si le paramètre label à été spécifié :

- -
 counter-name: 0
- -

Si aucun label n'as été specifié

- -
default: 0
- -

Warnings

- -

Si label est specifié mais n'existe pas countReset() renvoie cet avertissement :

- -
Counter "counter-name" doesn’t exist.
- -

Si label n'est pas specifé et que count() n'as pas encore été appellé countReset() renvoie cette avertissement :

- -
Counter "default" doesn’t exist.
- -

Examples

- -

Par exemple avec un code comme celui ci :

- -
var user = "";
-
-function greet() {
-  console.count();
-  return "hi " + user;
-}
-
-user = "bob";
-greet();
-user = "alice";
-greet();
-greet();
-console.count();
-console.countReset();
- -

Le retour de la console ressemblera à ceci :

- -
"default: 1"
-"default: 2"
-"default: 3"
-"default: 1"
-"default: 0"
-
- -

Pour information l'appel à console.counterReset() remet à zero la valeur du compteur par défaut.

- -

S'il on passe la variable user comme argument pour label et que l'on effectue un premier appel de la fonction count(), avec la chaine "bob" puis un second appel avec la chaine "alice" :

- -
var user = "";
-
-function greet() {
-  console.count(user);
-  return "hi " + user;
-}
-
-user = "bob";
-greet();
-user = "alice";
-greet();
-greet();
-console.countReset("bob");
-console.count("alice");
- -

On obtiendra ce retour dans la console

- -
"bob: 1"
-"alice: 1"
-"alice: 2"
-"bob: 0"
-"alice: 3"
- -

Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Console API", "#count", "console.countReset()")}}{{Spec2("Console API")}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.Console.countReset")}}

diff --git a/files/fr/web/api/console/countreset/index.md b/files/fr/web/api/console/countreset/index.md new file mode 100644 index 0000000000..7cf74195e7 --- /dev/null +++ b/files/fr/web/api/console/countreset/index.md @@ -0,0 +1,124 @@ +--- +title: Console.countReset() +slug: Web/API/Console/countReset +translation_of: Web/API/Console/countReset +--- +
{{APIRef("Console API")}}
+ +

Remet le compteur à zero. Cette fonction prend un argument optionnel label

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
console.countReset([label]);
+
+ +

Parameters

+ +
+
label
+
Si specifié, countReset() remet à zero le compteur associé à ce label. S'il n'est pas specifié, countReset() remet à zéro le compteur par defaut.
+
+ +

Return value

+ +

Si le paramètre label à été spécifié :

+ +
 counter-name: 0
+ +

Si aucun label n'as été specifié

+ +
default: 0
+ +

Warnings

+ +

Si label est specifié mais n'existe pas countReset() renvoie cet avertissement :

+ +
Counter "counter-name" doesn’t exist.
+ +

Si label n'est pas specifé et que count() n'as pas encore été appellé countReset() renvoie cette avertissement :

+ +
Counter "default" doesn’t exist.
+ +

Examples

+ +

Par exemple avec un code comme celui ci :

+ +
var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+console.countReset();
+ +

Le retour de la console ressemblera à ceci :

+ +
"default: 1"
+"default: 2"
+"default: 3"
+"default: 1"
+"default: 0"
+
+ +

Pour information l'appel à console.counterReset() remet à zero la valeur du compteur par défaut.

+ +

S'il on passe la variable user comme argument pour label et que l'on effectue un premier appel de la fonction count(), avec la chaine "bob" puis un second appel avec la chaine "alice" :

+ +
var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.countReset("bob");
+console.count("alice");
+ +

On obtiendra ce retour dans la console

+ +
"bob: 1"
+"alice: 1"
+"alice: 2"
+"bob: 0"
+"alice: 3"
+ +

Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#count", "console.countReset()")}}{{Spec2("Console API")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Console.countReset")}}

diff --git a/files/fr/web/api/console/debug/index.html b/files/fr/web/api/console/debug/index.html deleted file mode 100644 index 03082131d9..0000000000 --- a/files/fr/web/api/console/debug/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Console.debug() -slug: Web/API/Console/debug -tags: - - API - - Développement - - Méthodes - - Web - - console - - débogage - - outils de développement -translation_of: Web/API/Console/debug ---- -
{{APIRef("Console API")}}
- -

Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
console.debug(obj1 [, obj2, ..., objN]);
-console.debug(msg [, subst1, ..., substN]);
-
- -

Paramètres

- -
-
obj1 ... objN
-
Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractères, de chacun de ces objets est affichée dans l'ordre de la liste.
-
msg
-
Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
-
subst1 ... substN
-
Une liste d'objets JavaScript qui remplace les chaînes de caractéres de msg. Cela vous donne plus de contrôle sur le format de sortie. Voir {{SectionOnPage("fr/docs/Web/API/Console", "Utiliser les caractères de substitution")}} pour une description du fonctionnement des substitutions.
-
- -

Voir Afficher du texte dans la console dans la documentation de {{domxref("console")}} pour plus de détails.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#debug", "console.debug()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.debug")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/debug/index.md b/files/fr/web/api/console/debug/index.md new file mode 100644 index 0000000000..03082131d9 --- /dev/null +++ b/files/fr/web/api/console/debug/index.md @@ -0,0 +1,68 @@ +--- +title: Console.debug() +slug: Web/API/Console/debug +tags: + - API + - Développement + - Méthodes + - Web + - console + - débogage + - outils de développement +translation_of: Web/API/Console/debug +--- +
{{APIRef("Console API")}}
+ +

Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
console.debug(obj1 [, obj2, ..., objN]);
+console.debug(msg [, subst1, ..., substN]);
+
+ +

Paramètres

+ +
+
obj1 ... objN
+
Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractères, de chacun de ces objets est affichée dans l'ordre de la liste.
+
msg
+
Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
+
subst1 ... substN
+
Une liste d'objets JavaScript qui remplace les chaînes de caractéres de msg. Cela vous donne plus de contrôle sur le format de sortie. Voir {{SectionOnPage("fr/docs/Web/API/Console", "Utiliser les caractères de substitution")}} pour une description du fonctionnement des substitutions.
+
+ +

Voir Afficher du texte dans la console dans la documentation de {{domxref("console")}} pour plus de détails.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#debug", "console.debug()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.debug")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/dir/index.html b/files/fr/web/api/console/dir/index.html deleted file mode 100644 index 82b45f36cf..0000000000 --- a/files/fr/web/api/console/dir/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Console.dir() -slug: Web/API/Console/dir -tags: - - API - - DOM - - Développement - - Méthodes - - Web - - console - - débogage -translation_of: Web/API/Console/dir ---- -
{{APIRef("Console API")}}
- -

Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants.

- -

En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet.

- -

{{AvailableInWorkers}}

- -

- -

Syntaxe

- -
console.dir(object);
-
- -

Paramètres

- -
-
object
-
Un objet Javascript qui contient les propriétés qui doivent être affichées.
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#dir", "console.dir()")}}{{Spec2("Console API")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Console.dir")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/dir/index.md b/files/fr/web/api/console/dir/index.md new file mode 100644 index 0000000000..82b45f36cf --- /dev/null +++ b/files/fr/web/api/console/dir/index.md @@ -0,0 +1,67 @@ +--- +title: Console.dir() +slug: Web/API/Console/dir +tags: + - API + - DOM + - Développement + - Méthodes + - Web + - console + - débogage +translation_of: Web/API/Console/dir +--- +
{{APIRef("Console API")}}
+ +

Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants.

+ +

En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet.

+ +

{{AvailableInWorkers}}

+ +

+ +

Syntaxe

+ +
console.dir(object);
+
+ +

Paramètres

+ +
+
object
+
Un objet Javascript qui contient les propriétés qui doivent être affichées.
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#dir", "console.dir()")}}{{Spec2("Console API")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Console.dir")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/dirxml/index.html b/files/fr/web/api/console/dirxml/index.html deleted file mode 100644 index 8571cc33a4..0000000000 --- a/files/fr/web/api/console/dirxml/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Console.dirxml() -slug: Web/API/Console/dirxml -tags: - - API - - DOM - - Développement - - Méthodes - - console - - débogage -translation_of: Web/API/Console/dirxml ---- -
{{APIRef ("Console API")}}
- -
Affiche un arbre interactif des éléments descendants de l'élément XML / HTML spécifié. S'il n'est pas possible d'afficher en tant qu'élément, la vue Objet JavaScript est affichée à la place. La sortie est présentée sous la forme d'une liste hiérarchique des noeuds extensibles qui vous permettent de voir le contenu des nœuds enfants.
- -

Syntaxe

- -
console.dirxml(object);
-
- -

Paramètres

- -
-
object
-
Un objet JavaScript dont les propriétés doivent être sorties.
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#dirxml", "console.dirxml()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Console.dirxml")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/dirxml/index.md b/files/fr/web/api/console/dirxml/index.md new file mode 100644 index 0000000000..8571cc33a4 --- /dev/null +++ b/files/fr/web/api/console/dirxml/index.md @@ -0,0 +1,58 @@ +--- +title: Console.dirxml() +slug: Web/API/Console/dirxml +tags: + - API + - DOM + - Développement + - Méthodes + - console + - débogage +translation_of: Web/API/Console/dirxml +--- +
{{APIRef ("Console API")}}
+ +
Affiche un arbre interactif des éléments descendants de l'élément XML / HTML spécifié. S'il n'est pas possible d'afficher en tant qu'élément, la vue Objet JavaScript est affichée à la place. La sortie est présentée sous la forme d'une liste hiérarchique des noeuds extensibles qui vous permettent de voir le contenu des nœuds enfants.
+ +

Syntaxe

+ +
console.dirxml(object);
+
+ +

Paramètres

+ +
+
object
+
Un objet JavaScript dont les propriétés doivent être sorties.
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#dirxml", "console.dirxml()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Console.dirxml")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/error/index.html b/files/fr/web/api/console/error/index.html deleted file mode 100644 index 21bfa8b40a..0000000000 --- a/files/fr/web/api/console/error/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: console.error() -slug: Web/API/Console/error -tags: - - API - - DOM - - Développement - - Méthodes - - Web - - console - - débogage -translation_of: Web/API/Console/error ---- -
{{APIRef("Console API")}}
- -

Affiche un message d'erreur dans la console du navigateur.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
console.error(obj1 [, obj2, ..., objN]);
-console.error(msg [, subst1, ..., substN]);
-console.exception(obj1 [, obj2, ..., objN]);
-console.exception(msg [, subst1, ..., substN]);
-
- -
-

Note: console.exception() est un alias de console.error(); ils sont fonctionnellement identiques.

-
- -

Paramètres

- -
-
obj1 ... objN
-
Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.
-
msg
-
Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
-
subst1 ... substN
-
Une liste d'objets JavaScript qui remplace les chaînes de caractéres de msg. Cela vous donne plus de contrôle sur le format de sortie.
-
- -

Voir Afficher du texte dans la console dans la documentation de  {{domxref("console")}} pour plus de détails.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Console API", "#error", "console.error()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.Console.error")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/console/error/index.md b/files/fr/web/api/console/error/index.md new file mode 100644 index 0000000000..21bfa8b40a --- /dev/null +++ b/files/fr/web/api/console/error/index.md @@ -0,0 +1,74 @@ +--- +title: console.error() +slug: Web/API/Console/error +tags: + - API + - DOM + - Développement + - Méthodes + - Web + - console + - débogage +translation_of: Web/API/Console/error +--- +
{{APIRef("Console API")}}
+ +

Affiche un message d'erreur dans la console du navigateur.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
console.error(obj1 [, obj2, ..., objN]);
+console.error(msg [, subst1, ..., substN]);
+console.exception(obj1 [, obj2, ..., objN]);
+console.exception(msg [, subst1, ..., substN]);
+
+ +
+

Note: console.exception() est un alias de console.error(); ils sont fonctionnellement identiques.

+
+ +

Paramètres

+ +
+
obj1 ... objN
+
Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.
+
msg
+
Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
+
subst1 ... substN
+
Une liste d'objets JavaScript qui remplace les chaînes de caractéres de msg. Cela vous donne plus de contrôle sur le format de sortie.
+
+ +

Voir Afficher du texte dans la console dans la documentation de  {{domxref("console")}} pour plus de détails.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#error", "console.error()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Console.error")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/group/index.html b/files/fr/web/api/console/group/index.html deleted file mode 100644 index 0a3e6f8265..0000000000 --- a/files/fr/web/api/console/group/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Console.group() -slug: Web/API/Console/group -tags: - - API - - DOM - - Développement - - Méthodes - - Web - - console - - débogage -translation_of: Web/API/Console/group ---- -
{{APIRef("Console API")}}
- -

Création d'un nouveau groupe en ligne dans la console Web. Cela indente les messages de console suivants par un niveau supplémentaire, jusqu'à ce que {{domxref("console.groupEnd()")}} soit appelé.

- -

{{AvailableInWorkers}}

- -

Syntax

- -
console.group();
-
- -

Paramètres

- -
-
label
-
donne une étiquette au groupe. Facultatif. (Chrome 59 testé). Ne fonctionne pas avec console.groupEnd().
-
- -

{{h3_gecko_minversion("Using groups in the console", "9.0")}}

- -

Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants. Pour créer un nouveau bloc imbriqué, appelez console.group (). La méthode console.groupCollapsed () est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire.

- -
-

Note : De Gecko 9 jusqu'à Gecko 51, la méthode groupCollapsed() n'était pas identique à group(). Les groupes réduits sont entièrement pris en charge depuis Gecko 52. Voir {{bug("1088360")}}.

-
- -

Pour sortir du groupe courant, appeler console.groupEnd(). Par exemple, étant donné ce code :

- -
console.log("This is the outer level");
-console.group();
-console.log("Level 2");
-console.group();
-console.log("Level 3");
-console.warn("More of level 3");
-console.groupEnd();
-console.log("Back to level 2");
-console.groupEnd();
-console.log("Back to the outer level");
- -

La sortie ressemble à ceci :

- -

Une capture d'écran de messages imbriqués dans la sortie de la console.

- -

Pour plus de détail, se reporter à l'article Using groups in the console dans la documentation sur la {{domxref("console")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#consolegroupobject-object-", "console.group()")}}{{Spec2("Console API")}}Initial definition
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.group")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/group/index.md b/files/fr/web/api/console/group/index.md new file mode 100644 index 0000000000..0a3e6f8265 --- /dev/null +++ b/files/fr/web/api/console/group/index.md @@ -0,0 +1,86 @@ +--- +title: Console.group() +slug: Web/API/Console/group +tags: + - API + - DOM + - Développement + - Méthodes + - Web + - console + - débogage +translation_of: Web/API/Console/group +--- +
{{APIRef("Console API")}}
+ +

Création d'un nouveau groupe en ligne dans la console Web. Cela indente les messages de console suivants par un niveau supplémentaire, jusqu'à ce que {{domxref("console.groupEnd()")}} soit appelé.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
console.group();
+
+ +

Paramètres

+ +
+
label
+
donne une étiquette au groupe. Facultatif. (Chrome 59 testé). Ne fonctionne pas avec console.groupEnd().
+
+ +

{{h3_gecko_minversion("Using groups in the console", "9.0")}}

+ +

Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants. Pour créer un nouveau bloc imbriqué, appelez console.group (). La méthode console.groupCollapsed () est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire.

+ +
+

Note : De Gecko 9 jusqu'à Gecko 51, la méthode groupCollapsed() n'était pas identique à group(). Les groupes réduits sont entièrement pris en charge depuis Gecko 52. Voir {{bug("1088360")}}.

+
+ +

Pour sortir du groupe courant, appeler console.groupEnd(). Par exemple, étant donné ce code :

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.log("Back to the outer level");
+ +

La sortie ressemble à ceci :

+ +

Une capture d'écran de messages imbriqués dans la sortie de la console.

+ +

Pour plus de détail, se reporter à l'article Using groups in the console dans la documentation sur la {{domxref("console")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#consolegroupobject-object-", "console.group()")}}{{Spec2("Console API")}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.group")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/groupcollapsed/index.html b/files/fr/web/api/console/groupcollapsed/index.html deleted file mode 100644 index 5956aca479..0000000000 --- a/files/fr/web/api/console/groupcollapsed/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Console.groupCollapsed() -slug: Web/API/Console/groupCollapsed -tags: - - API - - DOM - - Développement - - Méthode - - Reference - - Web - - console - - débogage -translation_of: Web/API/Console/groupCollapsed ---- -
{{APIRef("Console API")}}
- -

Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit. L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe.

- -

Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent.

- -

Voir Using groups in the console dans la documentation  de {{domxref("console")}}  pour plus de détails et des exemples.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
console.groupCollapsed([label]);
-
- -

Paramètres

- -
-
label
-
Étiquette pour le groupe. Facultatif.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#groupcollapsed", "console.groupCollapsed()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.groupCollapsed")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/groupcollapsed/index.md b/files/fr/web/api/console/groupcollapsed/index.md new file mode 100644 index 0000000000..5956aca479 --- /dev/null +++ b/files/fr/web/api/console/groupcollapsed/index.md @@ -0,0 +1,64 @@ +--- +title: Console.groupCollapsed() +slug: Web/API/Console/groupCollapsed +tags: + - API + - DOM + - Développement + - Méthode + - Reference + - Web + - console + - débogage +translation_of: Web/API/Console/groupCollapsed +--- +
{{APIRef("Console API")}}
+ +

Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit. L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe.

+ +

Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent.

+ +

Voir Using groups in the console dans la documentation  de {{domxref("console")}}  pour plus de détails et des exemples.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
console.groupCollapsed([label]);
+
+ +

Paramètres

+ +
+
label
+
Étiquette pour le groupe. Facultatif.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#groupcollapsed", "console.groupCollapsed()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.groupCollapsed")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/groupend/index.html b/files/fr/web/api/console/groupend/index.html deleted file mode 100644 index bb64ea32cb..0000000000 --- a/files/fr/web/api/console/groupend/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Console.groupEnd() -slug: Web/API/Console/groupEnd -tags: - - API - - DOM - - Développement - - Méthode - - console - - débogage -translation_of: Web/API/Console/groupEnd ---- -

{{APIRef("Console API")}}

- -

Quitte le groupe en ligne actuel dans la console Web. Voir  Using groups in the console  dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
console.groupEnd();
-
- -

Paramètres

- -

Aucun.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#groupend", "console.groupEnd()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.groupEnd")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/groupend/index.md b/files/fr/web/api/console/groupend/index.md new file mode 100644 index 0000000000..bb64ea32cb --- /dev/null +++ b/files/fr/web/api/console/groupend/index.md @@ -0,0 +1,55 @@ +--- +title: Console.groupEnd() +slug: Web/API/Console/groupEnd +tags: + - API + - DOM + - Développement + - Méthode + - console + - débogage +translation_of: Web/API/Console/groupEnd +--- +

{{APIRef("Console API")}}

+ +

Quitte le groupe en ligne actuel dans la console Web. Voir  Using groups in the console  dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
console.groupEnd();
+
+ +

Paramètres

+ +

Aucun.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#groupend", "console.groupEnd()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.groupEnd")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/index.html b/files/fr/web/api/console/index.html deleted file mode 100644 index 3fea02614b..0000000000 --- a/files/fr/web/api/console/index.html +++ /dev/null @@ -1,277 +0,0 @@ ---- -title: Console -slug: Web/API/Console -tags: - - API - - Interface - - Reference - - console - - débogage -translation_of: Web/API/Console ---- -
{{APIRef("Console API")}}
- -

L'objet console donne accès à la console de débogage du navigateur (par exemple., la Console Web dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.

- -

La console est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple :

- -
console.log("Failed to open the specified link")
- -

Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'objet console et donne quelques {{anch("Usage", "exemples d'utilisation")}}.

- -

{{AvailableInWorkers}}

- -

Méthodes

- -
-
{{domxref("Console.assert()")}}
-
Affiche un message et une trace d'appels dans la console si l'assertion en argument est à false.
-
{{domxref("Console.clear()")}}
-
Vide la console.
-
{{domxref("Console.count()")}}
-
Affiche le nombre de fois que la ligne a été appelée avec un label donné.
-
{{domxref("Console.debug()")}}
-
Un alias de log().
-
- -
-

Note : À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.

-
- -
-
{{domxref("Console.dir()")}} {{Non-standard_inline}}
-
Affiche une liste interactive des propriétés d'un objet JavaScript donné. Cette liste vous permet d'examiner le contenu des enfants de l'objet en ouvrant les détails (petits triangles).
-
{{domxref("Console.dirxml()")}} {{Non-standard_inline}}
-
-

Affiche si possible une représentation d'éléments XML/HTML d'un objet spécifié. Sinon, c'est une vue de l'objet JavaScript.

-
-
{{domxref("Console.error()")}}
-
Affiche un message d'erreur. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
-
{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
-
Un alias d'error();
-
{{domxref("Console.group()")}}
-
Crée un nouveau groupe en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à group(). Pour revenir au niveau précédent, appeler groupEnd().
-
{{domxref("Console.groupCollapsed()")}}
-
Crée un nouveau groupe en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à group() , cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir. Pour revenir au niveau précédent, appeler groupEnd().
-
{{domxref("Console.groupEnd()")}}
-
Quitte le groupe d'indentation courant.
-
{{domxref("Console.info()")}}
-
Affiche un message d'information. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
-
{{domxref("Console.log()")}}
-
Permet d'afficher des messages dans la console. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
-
{{domxref("Console.profile()")}} {{Non-standard_inline}}
-
démarre le profilage du navigateur (par exemple, l'outil performances de Firefox). Vous pouvez spécifier un nom en option pour ce profil.
-
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
-
Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'outil performance Firefox).
-
{{domxref("Console.table()")}}
-
Affiche des données tabulaires comme un tableau.
-
{{domxref("Console.time()")}}
-
Démarre un chronomètre que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.
-
{{domxref("Console.timeEnd()")}}
-
Arrête le chronomètre spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.
-
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
-
Ajoute un marqueur dans la Timeline du navigateur ou l'outil Waterfall.
-
{{domxref("Console.trace()")}}
-
Affiche une trace d'appels.
-
{{domxref("Console.warn()")}}
-
Affiche un message d'avertissement. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
-
- - -

Exemples d'utilisation

- -

Afficher du texte dans la console

- -

La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, et {{domxref("console.error()")}}. Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent.

- -

Il y a deux manières d'utiliser chacune de ces méthodes de sortie ; Vous pouvez passer une liste d'objets dont leur représentation sera concaténée dans une seule chaine et s'affichera dans la console, ou vous pouvez passer une chaîne de caractères contenant zéro et plus de caractères de substitution suivis d'une liste d'objets avec lesquels les remplacer.

- -

Afficher un seul objet

- -

La manière la plus simple d'utiliser les méthodes de « log » est d'afficher un seul objet :

- -
var someObject = { str: "Some text", id: 5 };
-console.log(someObject);
-
- -

L'affichage ressemblera à ceci :

- -
[09:27:13.475] ({str:"Some text", id:5})
- -

Afficher plusieurs objets

- -

Vous pouvez aussi afficher plusieurs objets, en les séparant par une virgule, comme ceci :

- -
var car = "Dodge Charger";
-var someObject = {str:"Some text", id:5};
-console.info("My first car was a", car, ". The object is: ", someObject);
- -

L'affichage ressemblera à ceci :

- -
[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
-
- -

Utiliser les caractères de substitution

- -

Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution :

- - - - - - - - - - - - - - - - - - - - - - - - -
caractère de substitutiondescription
%o or %OAffiche un lien hypertexte sur un objet JavaScript. Cliquer le lien ouvre l'inspecteur.
%d or %iAffiche un entier. Le formatage des nombres est supporté, par exemple console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux chiffres significatifs avec un 0 : Foo 01
%sAffiche une chaîne de caractères.
%fAffiche un nombre réél. Le formatage est supporté, par exemple, console.log("Foo %.2f", 1.1) affichera un nombre avec 2 décimales : Foo 1.10 .
- -

Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple :

- -
for (var i=0; i<5; i++) {
-  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
-}
-
- -

L'affichage ressemblera à ceci :

- -
[13:14:13.481] Hello, Bob. You've called me 1 times.
-[13:14:13.483] Hello, Bob. You've called me 2 times.
-[13:14:13.485] Hello, Bob. You've called me 3 times.
-[13:14:13.487] Hello, Bob. You've called me 4 times.
-[13:14:13.488] Hello, Bob. You've called me 5 times.
-
- -

Donner un style à l'affichage de la console

- -

Vous pouvez utiliser l'instruction "%c" pour appliquer du style CSS à l'affichage de la console :

- -
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
- -

- -
-

Note : Un certain nombre de propriétés CSS sont supportées par ce style; vous devriez expérimenter et voir lesquels s'avèrent utiles.

-
- -

{{h3_gecko_minversion("Using groups in the console", "9.0")}}

- -

Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez console.group(). La méthode console.groupCollapsed() est similaire, mais elle crée un bloc qui sera réduit.

- -
-

Note : "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode groupCollapsed() est la même que group() en ce moment.

-
- -

Pour quitter le groupe dans lequel on est, appeler console.groupEnd(). Par exemple, examinez ce code :

- -
console.log("This is the outer level");
-console.group();
-console.log("Level 2");
-console.group();
-console.log("Level 3");
-console.warn("More of level 3");
-console.groupEnd();
-console.log("Back to level 2");
-console.groupEnd();
-console.debug("Back to the outer level");
-
- -

L'affichage ressemblera à ceci :

- -

Démonstration de groupes imbriqués dans la console Firefox

- -
{{h3_gecko_minversion("Timers", "10.0")}}
- -

Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet console.  pour démarrer un chronomètre, appelez la méthode console.time() en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode console.timeEnd(), en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres.

- -

Par exemple, voici ce code :

- -
console.time("answer time");
-alert("Click to continue");
-console.timeEnd("answer time");
-
- -

affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :

- -

- -

Notez que le nom du chronomètre est affiché deux fois, à son départ et quand il se termine.

- -
-

Note: Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console.

-
- -

Traces d'appel

- -

L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le chemin pris pour atteindre l'endroit auquel vous avez fait appel à la fonction {{domxref("console.trace()")}}. Ce qui donne avec ce code :

- -
foo();
-
-function foo() {
-  function bar() {
-    console.trace();
-  }
-  bar();
-}
-
- -

L'affichage dans la console ressemblera à ceci :

- -

- -

Spécification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Définition initiale.
- -

Notes

- - - -

Voir aussi

- - - -

Autres implémentations

- - diff --git a/files/fr/web/api/console/index.md b/files/fr/web/api/console/index.md new file mode 100644 index 0000000000..3fea02614b --- /dev/null +++ b/files/fr/web/api/console/index.md @@ -0,0 +1,277 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - Interface + - Reference + - console + - débogage +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}
+ +

L'objet console donne accès à la console de débogage du navigateur (par exemple., la Console Web dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.

+ +

La console est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple :

+ +
console.log("Failed to open the specified link")
+ +

Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'objet console et donne quelques {{anch("Usage", "exemples d'utilisation")}}.

+ +

{{AvailableInWorkers}}

+ +

Méthodes

+ +
+
{{domxref("Console.assert()")}}
+
Affiche un message et une trace d'appels dans la console si l'assertion en argument est à false.
+
{{domxref("Console.clear()")}}
+
Vide la console.
+
{{domxref("Console.count()")}}
+
Affiche le nombre de fois que la ligne a été appelée avec un label donné.
+
{{domxref("Console.debug()")}}
+
Un alias de log().
+
+ +
+

Note : À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.

+
+ +
+
{{domxref("Console.dir()")}} {{Non-standard_inline}}
+
Affiche une liste interactive des propriétés d'un objet JavaScript donné. Cette liste vous permet d'examiner le contenu des enfants de l'objet en ouvrant les détails (petits triangles).
+
{{domxref("Console.dirxml()")}} {{Non-standard_inline}}
+
+

Affiche si possible une représentation d'éléments XML/HTML d'un objet spécifié. Sinon, c'est une vue de l'objet JavaScript.

+
+
{{domxref("Console.error()")}}
+
Affiche un message d'erreur. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
+
{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
Un alias d'error();
+
{{domxref("Console.group()")}}
+
Crée un nouveau groupe en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à group(). Pour revenir au niveau précédent, appeler groupEnd().
+
{{domxref("Console.groupCollapsed()")}}
+
Crée un nouveau groupe en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à group() , cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir. Pour revenir au niveau précédent, appeler groupEnd().
+
{{domxref("Console.groupEnd()")}}
+
Quitte le groupe d'indentation courant.
+
{{domxref("Console.info()")}}
+
Affiche un message d'information. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
+
{{domxref("Console.log()")}}
+
Permet d'afficher des messages dans la console. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
+
{{domxref("Console.profile()")}} {{Non-standard_inline}}
+
démarre le profilage du navigateur (par exemple, l'outil performances de Firefox). Vous pouvez spécifier un nom en option pour ce profil.
+
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
+
Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'outil performance Firefox).
+
{{domxref("Console.table()")}}
+
Affiche des données tabulaires comme un tableau.
+
{{domxref("Console.time()")}}
+
Démarre un chronomètre que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.
+
{{domxref("Console.timeEnd()")}}
+
Arrête le chronomètre spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.
+
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
+
Ajoute un marqueur dans la Timeline du navigateur ou l'outil Waterfall.
+
{{domxref("Console.trace()")}}
+
Affiche une trace d'appels.
+
{{domxref("Console.warn()")}}
+
Affiche un message d'avertissement. Vous pouvez utiliser les caractères de substitution et des arguments supplémentaires avec cette méthode.
+
+ + +

Exemples d'utilisation

+ +

Afficher du texte dans la console

+ +

La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, et {{domxref("console.error()")}}. Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent.

+ +

Il y a deux manières d'utiliser chacune de ces méthodes de sortie ; Vous pouvez passer une liste d'objets dont leur représentation sera concaténée dans une seule chaine et s'affichera dans la console, ou vous pouvez passer une chaîne de caractères contenant zéro et plus de caractères de substitution suivis d'une liste d'objets avec lesquels les remplacer.

+ +

Afficher un seul objet

+ +

La manière la plus simple d'utiliser les méthodes de « log » est d'afficher un seul objet :

+ +
var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+
+ +

L'affichage ressemblera à ceci :

+ +
[09:27:13.475] ({str:"Some text", id:5})
+ +

Afficher plusieurs objets

+ +

Vous pouvez aussi afficher plusieurs objets, en les séparant par une virgule, comme ceci :

+ +
var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);
+ +

L'affichage ressemblera à ceci :

+ +
[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+
+ +

Utiliser les caractères de substitution

+ +

Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution :

+ + + + + + + + + + + + + + + + + + + + + + + + +
caractère de substitutiondescription
%o or %OAffiche un lien hypertexte sur un objet JavaScript. Cliquer le lien ouvre l'inspecteur.
%d or %iAffiche un entier. Le formatage des nombres est supporté, par exemple console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux chiffres significatifs avec un 0 : Foo 01
%sAffiche une chaîne de caractères.
%fAffiche un nombre réél. Le formatage est supporté, par exemple, console.log("Foo %.2f", 1.1) affichera un nombre avec 2 décimales : Foo 1.10 .
+ +

Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple :

+ +
for (var i=0; i<5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+
+ +

L'affichage ressemblera à ceci :

+ +
[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+
+ +

Donner un style à l'affichage de la console

+ +

Vous pouvez utiliser l'instruction "%c" pour appliquer du style CSS à l'affichage de la console :

+ +
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+ +

+ +
+

Note : Un certain nombre de propriétés CSS sont supportées par ce style; vous devriez expérimenter et voir lesquels s'avèrent utiles.

+
+ +

{{h3_gecko_minversion("Using groups in the console", "9.0")}}

+ +

Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez console.group(). La méthode console.groupCollapsed() est similaire, mais elle crée un bloc qui sera réduit.

+ +
+

Note : "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode groupCollapsed() est la même que group() en ce moment.

+
+ +

Pour quitter le groupe dans lequel on est, appeler console.groupEnd(). Par exemple, examinez ce code :

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+
+ +

L'affichage ressemblera à ceci :

+ +

Démonstration de groupes imbriqués dans la console Firefox

+ +
{{h3_gecko_minversion("Timers", "10.0")}}
+ +

Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet console.  pour démarrer un chronomètre, appelez la méthode console.time() en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode console.timeEnd(), en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres.

+ +

Par exemple, voici ce code :

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+
+ +

affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :

+ +

+ +

Notez que le nom du chronomètre est affiché deux fois, à son départ et quand il se termine.

+ +
+

Note: Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console.

+
+ +

Traces d'appel

+ +

L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le chemin pris pour atteindre l'endroit auquel vous avez fait appel à la fonction {{domxref("console.trace()")}}. Ce qui donne avec ce code :

+ +
foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+ +

L'affichage dans la console ressemblera à ceci :

+ +

+ +

Spécification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Définition initiale.
+ +

Notes

+ + + +

Voir aussi

+ + + +

Autres implémentations

+ + diff --git a/files/fr/web/api/console/info/index.html b/files/fr/web/api/console/info/index.html deleted file mode 100644 index a9263f8f27..0000000000 --- a/files/fr/web/api/console/info/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Console.info() -slug: Web/API/Console/info -tags: - - API - - Debugging - - Method - - NeedsBrowserCompatibility - - web console -translation_of: Web/API/Console/info ---- -

{{ APIRef("Console API") }}{{Non-standard_header}}

- -

Affiche un message informatif dans la console du navigateur. Dans Firefox et Chrome, une petit icône de i s'affiche devant le message.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
console.info(obj1 [, obj2, ..., objN]);
-console.info(msg [, subst1, ..., substN]);
-
- -

Paramètres

- -
-
obj1 ... objN
-
Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.
-
msg
-
Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
-
subst1 ... substN
-
Une liste d'objets JavaScript qui remplace les chaînes de caractéres de msg. Cela vous donne plus de contrôle sur le format de sortie.
-
- -

Voir Afficher du texte sur la console dans la documentation de {{ domxref("console") }} pour plus de détails.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#info", "console.info()")}}{{Spec2("Console API")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.info")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/info/index.md b/files/fr/web/api/console/info/index.md new file mode 100644 index 0000000000..a9263f8f27 --- /dev/null +++ b/files/fr/web/api/console/info/index.md @@ -0,0 +1,65 @@ +--- +title: Console.info() +slug: Web/API/Console/info +tags: + - API + - Debugging + - Method + - NeedsBrowserCompatibility + - web console +translation_of: Web/API/Console/info +--- +

{{ APIRef("Console API") }}{{Non-standard_header}}

+ +

Affiche un message informatif dans la console du navigateur. Dans Firefox et Chrome, une petit icône de i s'affiche devant le message.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
console.info(obj1 [, obj2, ..., objN]);
+console.info(msg [, subst1, ..., substN]);
+
+ +

Paramètres

+ +
+
obj1 ... objN
+
Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.
+
msg
+
Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
+
subst1 ... substN
+
Une liste d'objets JavaScript qui remplace les chaînes de caractéres de msg. Cela vous donne plus de contrôle sur le format de sortie.
+
+ +

Voir Afficher du texte sur la console dans la documentation de {{ domxref("console") }} pour plus de détails.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#info", "console.info()")}}{{Spec2("Console API")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.info")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/log/index.html b/files/fr/web/api/console/log/index.html deleted file mode 100644 index c1f9577c6a..0000000000 --- a/files/fr/web/api/console/log/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: console.log() -slug: Web/API/Console/log -translation_of: Web/API/Console/log -browser-compat: api.Console.log ---- -
{{APIRef("Console API")}}
- -

La méthode console.log() affiche un message dans la console Web. Le message peut être une simple chaine de caractères (avec des valeurs optionnelles de substitution) ou peut être composé d'un ou plusieurs objets JavaScript.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-console.log(obj1 [, obj2, ..., objN]);
-console.log(msg [, subst1, ..., substN]);
-
- -

Paramètres

- -
-
obj1 ... objN
-
Une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées dans la console du navigateur selon l'ordre indiqué. Attention, pour les versions récentes de Chrome et Firefox, ce qui apparaît dans la console est une référence à l'objet et pas nécessairement la valeur de l'objet au moment de l'appel à console.log() mais sa valeur au moment où on ouvre la console.
-
msg
-
Une chaîne de caractères JavaScript contenant zéro ou plusieurs chaînes de substitution.
-
subst1 ... substN
-
Des objets JavaScript dont les valeurs textuelles remplaceront les emplacements à substituer indiqués dans msg. Cela offre plus de contrôle sur le format d'affichage.
-
- -

Voir Afficher du texte sur la console dans la documentation de console pour plus de détails.

- -

Différence entre console.log() et console.dir()

- -

Vous pourriez vous demander quelles sont les différences entre console.dir() et console.log().

- -

Celles-ci concernent principalement la gestion particulière des objets du DOM :

- - -

- - -

Affichage d'objets dans la console

- -

Évitez d'utiliser console.log(obj) mais préférez console.log(JSON.parse(JSON.stringify(obj))) si vous souhaîtez être sûr·e d'observer la valeur de l'objet au moment de l'exécution de console.log(). Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/log/index.md b/files/fr/web/api/console/log/index.md new file mode 100644 index 0000000000..c1f9577c6a --- /dev/null +++ b/files/fr/web/api/console/log/index.md @@ -0,0 +1,64 @@ +--- +title: console.log() +slug: Web/API/Console/log +translation_of: Web/API/Console/log +browser-compat: api.Console.log +--- +
{{APIRef("Console API")}}
+ +

La méthode console.log() affiche un message dans la console Web. Le message peut être une simple chaine de caractères (avec des valeurs optionnelles de substitution) ou peut être composé d'un ou plusieurs objets JavaScript.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+
+ +

Paramètres

+ +
+
obj1 ... objN
+
Une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées dans la console du navigateur selon l'ordre indiqué. Attention, pour les versions récentes de Chrome et Firefox, ce qui apparaît dans la console est une référence à l'objet et pas nécessairement la valeur de l'objet au moment de l'appel à console.log() mais sa valeur au moment où on ouvre la console.
+
msg
+
Une chaîne de caractères JavaScript contenant zéro ou plusieurs chaînes de substitution.
+
subst1 ... substN
+
Des objets JavaScript dont les valeurs textuelles remplaceront les emplacements à substituer indiqués dans msg. Cela offre plus de contrôle sur le format d'affichage.
+
+ +

Voir Afficher du texte sur la console dans la documentation de console pour plus de détails.

+ +

Différence entre console.log() et console.dir()

+ +

Vous pourriez vous demander quelles sont les différences entre console.dir() et console.log().

+ +

Celles-ci concernent principalement la gestion particulière des objets du DOM :

+ + +

+ + +

Affichage d'objets dans la console

+ +

Évitez d'utiliser console.log(obj) mais préférez console.log(JSON.parse(JSON.stringify(obj))) si vous souhaîtez être sûr·e d'observer la valeur de l'objet au moment de l'exécution de console.log(). Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/profile/index.html b/files/fr/web/api/console/profile/index.html deleted file mode 100644 index d26727f201..0000000000 --- a/files/fr/web/api/console/profile/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Console.profile() -slug: Web/API/Console/profile -tags: - - API - - DOM - - Méthodes - - Profils - - débogage -translation_of: Web/API/Console/profile ---- -

{{APIRef("Console API")}}{{Non-standard_header}}

- -

Commence l'enregistrement d'un profil de performance (par exemple, l'outil performance de Firefox).

- -

Vous pouvez éventuellement fournir un argument pour nommer le profil, ce qui vous permet d'arrêter uniquement ce profil si plusieurs profils sont enregistrés. Voir {{domxref("Console.profileEnd()")}} pour voir comment cet argument est interprété.

- -

Pour arrêter l'enregistrement, appeler {{domxref("Console.profileEnd()")}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
console.profile(profileName);
-
- -

Paramètres

- -
-
profileName
-
Le nom à donner au profil. Facultatif.
-
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.profile")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/profile/index.md b/files/fr/web/api/console/profile/index.md new file mode 100644 index 0000000000..d26727f201 --- /dev/null +++ b/files/fr/web/api/console/profile/index.md @@ -0,0 +1,42 @@ +--- +title: Console.profile() +slug: Web/API/Console/profile +tags: + - API + - DOM + - Méthodes + - Profils + - débogage +translation_of: Web/API/Console/profile +--- +

{{APIRef("Console API")}}{{Non-standard_header}}

+ +

Commence l'enregistrement d'un profil de performance (par exemple, l'outil performance de Firefox).

+ +

Vous pouvez éventuellement fournir un argument pour nommer le profil, ce qui vous permet d'arrêter uniquement ce profil si plusieurs profils sont enregistrés. Voir {{domxref("Console.profileEnd()")}} pour voir comment cet argument est interprété.

+ +

Pour arrêter l'enregistrement, appeler {{domxref("Console.profileEnd()")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
console.profile(profileName);
+
+ +

Paramètres

+ +
+
profileName
+
Le nom à donner au profil. Facultatif.
+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.profile")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/profileend/index.html b/files/fr/web/api/console/profileend/index.html deleted file mode 100644 index 9b267eb029..0000000000 --- a/files/fr/web/api/console/profileend/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Console.profileEnd() -slug: Web/API/Console/profileEnd -tags: - - API - - DOM - - Méthodes - - Profils -translation_of: Web/API/Console/profileEnd ---- -

{{APIRef("Console API")}}{{Non-standard_header}}

- -
-

Attention : L'appel de cet API immédiatement après console.profile() peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un  setTimeout avec un délai d'au-moins 5 ms. Voir bug #1173588.

-
- -

La méthode profileEnd  arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}.

- -

Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils.

- - - -

{{AvailableInWorkers}}

- -

Syntaxe

- -
console.profileEnd(profileName);
-
- -

Paramètres

- -
-
profileName
-
Le nom à donner au profil. Ce paramètre est facultatif.
-
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.profileEnd")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/profileend/index.md b/files/fr/web/api/console/profileend/index.md new file mode 100644 index 0000000000..9b267eb029 --- /dev/null +++ b/files/fr/web/api/console/profileend/index.md @@ -0,0 +1,49 @@ +--- +title: Console.profileEnd() +slug: Web/API/Console/profileEnd +tags: + - API + - DOM + - Méthodes + - Profils +translation_of: Web/API/Console/profileEnd +--- +

{{APIRef("Console API")}}{{Non-standard_header}}

+ +
+

Attention : L'appel de cet API immédiatement après console.profile() peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un  setTimeout avec un délai d'au-moins 5 ms. Voir bug #1173588.

+
+ +

La méthode profileEnd  arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}.

+ +

Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils.

+ + + +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
console.profileEnd(profileName);
+
+ +

Paramètres

+ +
+
profileName
+
Le nom à donner au profil. Ce paramètre est facultatif.
+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.profileEnd")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/table/index.html b/files/fr/web/api/console/table/index.html deleted file mode 100644 index 1f5beabcd2..0000000000 --- a/files/fr/web/api/console/table/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Console.table -slug: Web/API/Console/table -tags: - - API - - DOM - - Développement - - Méthode - - console - - débogage -translation_of: Web/API/Console/table ---- -
{{APIRef("Console API")}}
- -

Affiche des données tabulaires sous la forme d'un tableau.

- -

Cette fonction prend un argument obligatoire data, qui doit être un tableau (Array) ou un objet, et un argument facultatif columns.

- -

Il affiche data sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet)

- -

La première colonne dans le tableau sera intitulé (index). Si data est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si data est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) :  console.table est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté)

- -

{{AvailableInWorkers}}

- -

Collections de données primitives

- -

data peut contenir un tableau ou un objet.

- -
// un tableau de chaînes de caractères
-
-console.table(["apples", "oranges", "bananas"]);
- -

- -
// un objet dont les propriétés sont des chaînes de caractères
-
-function Person(firstName, lastName) {
-  this.firstName = firstName;
-  this.lastName = lastName;
-}
-
-var me = new Person("John", "Smith");
-
-console.table(me);
- -

- -

Collections de données composées

- -

Si les éléments d'un tableau, ou les propriétés d'un objet, sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, un élément par colonne :

- -
// un tableau de tableaux
-
-var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
-console.table(people);
- -

Un tableau qui affiche un tableau de tableaux

- -
// un tableau d'objets
-
-function Person(firstName, lastName) {
-  this.firstName = firstName;
-  this.lastName = lastName;
-}
-
-var john = new Person("John", "Smith");
-var jane = new Person("Jane", "Doe");
-var emily = new Person("Emily", "Jones");
-
-console.table([john, jane, emily]);
- -

Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés.

- -

Un tableau qui affiche un tableau d'objets

- -
// un objet contenant des propriétés qui sont des objets
-
-var family = {};
-
-family.mother = new Person("Jane", "Smith");
-family.father = new Person("John", "Smith");
-family.daughter = new Person("Emily", "Smith");
-
-console.table(family);
- -

Un tableau affichant des objets composés d'objets

- -

Restreindre les colonnes affichées

- -

Par défaut, console.table() liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif columns pour sélectionner un sous-ensemble de colonnes à afficher :

- -
// un tableau d'objets, affichant seulement firstName
-
-function Person(firstName, lastName) {
-  this.firstName = firstName;
-  this.lastName = lastName;
-}
-
-var john = new Person("John", "Smith");
-var jane = new Person("Jane", "Doe");
-var emily = new Person("Emily", "Jones");
-
-console.table([john, jane, emily], ["firstName"]);
- -

Un tableau affichant un tableau d'objets dont la sortie est filtrée

- -

Ordonner les colonnes

- -

Vous pouvez ordonner les colonnes en cliquant sur l'intitulé de la colonne.

- -

Syntaxe

- -
console.table(data [, columns]);
-
- -

Paramètres

- -
-
data
-
La donnée à afficher. Doit être un tableau ou un objet.
-
columns
-
Un tableau contenant les noms des colonnes à inclure dans la sortie.
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.Console.table")}}
diff --git a/files/fr/web/api/console/table/index.md b/files/fr/web/api/console/table/index.md new file mode 100644 index 0000000000..1f5beabcd2 --- /dev/null +++ b/files/fr/web/api/console/table/index.md @@ -0,0 +1,146 @@ +--- +title: Console.table +slug: Web/API/Console/table +tags: + - API + - DOM + - Développement + - Méthode + - console + - débogage +translation_of: Web/API/Console/table +--- +
{{APIRef("Console API")}}
+ +

Affiche des données tabulaires sous la forme d'un tableau.

+ +

Cette fonction prend un argument obligatoire data, qui doit être un tableau (Array) ou un objet, et un argument facultatif columns.

+ +

Il affiche data sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet)

+ +

La première colonne dans le tableau sera intitulé (index). Si data est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si data est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) :  console.table est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté)

+ +

{{AvailableInWorkers}}

+ +

Collections de données primitives

+ +

data peut contenir un tableau ou un objet.

+ +
// un tableau de chaînes de caractères
+
+console.table(["apples", "oranges", "bananas"]);
+ +

+ +
// un objet dont les propriétés sont des chaînes de caractères
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);
+ +

+ +

Collections de données composées

+ +

Si les éléments d'un tableau, ou les propriétés d'un objet, sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, un élément par colonne :

+ +
// un tableau de tableaux
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);
+ +

Un tableau qui affiche un tableau de tableaux

+ +
// un tableau d'objets
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);
+ +

Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés.

+ +

Un tableau qui affiche un tableau d'objets

+ +
// un objet contenant des propriétés qui sont des objets
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);
+ +

Un tableau affichant des objets composés d'objets

+ +

Restreindre les colonnes affichées

+ +

Par défaut, console.table() liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif columns pour sélectionner un sous-ensemble de colonnes à afficher :

+ +
// un tableau d'objets, affichant seulement firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);
+ +

Un tableau affichant un tableau d'objets dont la sortie est filtrée

+ +

Ordonner les colonnes

+ +

Vous pouvez ordonner les colonnes en cliquant sur l'intitulé de la colonne.

+ +

Syntaxe

+ +
console.table(data [, columns]);
+
+ +

Paramètres

+ +
+
data
+
La donnée à afficher. Doit être un tableau ou un objet.
+
columns
+
Un tableau contenant les noms des colonnes à inclure dans la sortie.
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Console.table")}}
diff --git a/files/fr/web/api/console/time/index.html b/files/fr/web/api/console/time/index.html deleted file mode 100644 index 271b2e5497..0000000000 --- a/files/fr/web/api/console/time/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: console.time -slug: Web/API/Console/time -tags: - - API - - DOM - - Développement - - Méthode - - Web - - console - - débogage -translation_of: Web/API/Console/time ---- -

{{APIRef("Console API")}}

- -

Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console.

- -

Voir Timers dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.

- -

Syntaxe

- -
console.time(label);
-
- -

Paramètres

- -
-
label
-
Nom qui identifiera le nouveau "timer". Il faut utiliser le même nom pour {{ domxref("console.timeEnd()") }} pour arrêter le "timer" et afficher le temps dans la console.
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#time", "console.time()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité  des navigateurs

- -

{{Compat("api.Console.time")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/time/index.md b/files/fr/web/api/console/time/index.md new file mode 100644 index 0000000000..271b2e5497 --- /dev/null +++ b/files/fr/web/api/console/time/index.md @@ -0,0 +1,60 @@ +--- +title: console.time +slug: Web/API/Console/time +tags: + - API + - DOM + - Développement + - Méthode + - Web + - console + - débogage +translation_of: Web/API/Console/time +--- +

{{APIRef("Console API")}}

+ +

Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console.

+ +

Voir Timers dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.

+ +

Syntaxe

+ +
console.time(label);
+
+ +

Paramètres

+ +
+
label
+
Nom qui identifiera le nouveau "timer". Il faut utiliser le même nom pour {{ domxref("console.timeEnd()") }} pour arrêter le "timer" et afficher le temps dans la console.
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#time", "console.time()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité  des navigateurs

+ +

{{Compat("api.Console.time")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/timeend/index.html b/files/fr/web/api/console/timeend/index.html deleted file mode 100644 index dc45ee8468..0000000000 --- a/files/fr/web/api/console/timeend/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: console.timeEnd -slug: Web/API/Console/timeEnd -tags: - - API - - Console Web - - DOM - - Développement Web - - Methode(2) - - Méthode -translation_of: Web/API/Console/timeEnd ---- -
{{APIRef("Console API")}}
- -

Arrête un chronomètre (timer) précédemment démarré par {{domxref("console.time()")}}.

- -

Voir Timers dans la documentation de {{domxref("console")}} pour des détails et des exemples.

- -

Syntaxe

- -
console.timeEnd(label);
-
- -

Paramètres

- -
-
label
-
Le nom du timer à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la Console Web.
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#timeend", "console.timeEnd()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.Console.timeEnd")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/console/timeend/index.md b/files/fr/web/api/console/timeend/index.md new file mode 100644 index 0000000000..dc45ee8468 --- /dev/null +++ b/files/fr/web/api/console/timeend/index.md @@ -0,0 +1,58 @@ +--- +title: console.timeEnd +slug: Web/API/Console/timeEnd +tags: + - API + - Console Web + - DOM + - Développement Web + - Methode(2) + - Méthode +translation_of: Web/API/Console/timeEnd +--- +
{{APIRef("Console API")}}
+ +

Arrête un chronomètre (timer) précédemment démarré par {{domxref("console.time()")}}.

+ +

Voir Timers dans la documentation de {{domxref("console")}} pour des détails et des exemples.

+ +

Syntaxe

+ +
console.timeEnd(label);
+
+ +

Paramètres

+ +
+
label
+
Le nom du timer à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la Console Web.
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#timeend", "console.timeEnd()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Console.timeEnd")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/timelog/index.html b/files/fr/web/api/console/timelog/index.html deleted file mode 100644 index cd1f33d3be..0000000000 --- a/files/fr/web/api/console/timelog/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Console.timeLog() -slug: Web/API/Console/timeLog -tags: - - API - - Console Web - - DOM - - Développement Web - - Méthode - - console - - débogage -translation_of: Web/API/Console/timeLog ---- -
{{APIRef("Console API")}}
- -

Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}}

- -

Voir Timers dans la documentation pour des exemples et plus de détails

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
console.timeLog(label);
-
- -

Paramètres

- -
-
label
-
Le nom du timer à afficher sur la console
-
- -

Valeur de retour

- -

Si aucun label n'est inclus

- -
default: 1042ms
- -

Si un label est inclus:

- -
timer name: 1242ms
- -

Exceptions

- -

Si aucun timer n'est en cours d'éxecution, timeLog() retourne l'avertissement suivant :

- -
Timer “default” doesn’t exist.
- -

Si le paramètre label est spécifé mais aucun timer n'y correspond :

- -
 Timer “timer name” doesn’t exist.
- -

Exemples

- -
console.time("answer time");
-alert("Click to continue");
-console.timeLog("answer time");
-alert("Do a bunch of other stuff...");
-console.timeEnd("answer time");
- -

Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fermer la première pop-up d'alerte, puis le temps que l'utilisateur a pris pour fermer la seconde :

- -

- -

Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par timeLog() et lorsque le timer est arrêté

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#timelog", "console.timeLog()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.Console.timeLog")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/console/timelog/index.md b/files/fr/web/api/console/timelog/index.md new file mode 100644 index 0000000000..cd1f33d3be --- /dev/null +++ b/files/fr/web/api/console/timelog/index.md @@ -0,0 +1,99 @@ +--- +title: Console.timeLog() +slug: Web/API/Console/timeLog +tags: + - API + - Console Web + - DOM + - Développement Web + - Méthode + - console + - débogage +translation_of: Web/API/Console/timeLog +--- +
{{APIRef("Console API")}}
+ +

Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}}

+ +

Voir Timers dans la documentation pour des exemples et plus de détails

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
console.timeLog(label);
+
+ +

Paramètres

+ +
+
label
+
Le nom du timer à afficher sur la console
+
+ +

Valeur de retour

+ +

Si aucun label n'est inclus

+ +
default: 1042ms
+ +

Si un label est inclus:

+ +
timer name: 1242ms
+ +

Exceptions

+ +

Si aucun timer n'est en cours d'éxecution, timeLog() retourne l'avertissement suivant :

+ +
Timer “default” doesn’t exist.
+ +

Si le paramètre label est spécifé mais aucun timer n'y correspond :

+ +
 Timer “timer name” doesn’t exist.
+ +

Exemples

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+ +

Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fermer la première pop-up d'alerte, puis le temps que l'utilisateur a pris pour fermer la seconde :

+ +

+ +

Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par timeLog() et lorsque le timer est arrêté

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#timelog", "console.timeLog()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Console.timeLog")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/timestamp/index.html b/files/fr/web/api/console/timestamp/index.html deleted file mode 100644 index ebf2f9bd83..0000000000 --- a/files/fr/web/api/console/timestamp/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Console.timeStamp() -slug: Web/API/Console/timeStamp -tags: - - API - - DOM - - Développement - - Méthodes - - console -translation_of: Web/API/Console/timeStamp ---- -
{{APIRef("Console API")}}{{Non-standard_header}}
- -

Ajoute un seul marqueur à l'outil Performance ou Waterfall du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture.

- -

Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
console.timeStamp(label);
-
- -

Paramètres

- -
-
label
-
Étiquette pour l'horodatage. Facultatif.
-
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.timestamp")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/timestamp/index.md b/files/fr/web/api/console/timestamp/index.md new file mode 100644 index 0000000000..ebf2f9bd83 --- /dev/null +++ b/files/fr/web/api/console/timestamp/index.md @@ -0,0 +1,42 @@ +--- +title: Console.timeStamp() +slug: Web/API/Console/timeStamp +tags: + - API + - DOM + - Développement + - Méthodes + - console +translation_of: Web/API/Console/timeStamp +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Ajoute un seul marqueur à l'outil Performance ou Waterfall du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture.

+ +

Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
console.timeStamp(label);
+
+ +

Paramètres

+ +
+
label
+
Étiquette pour l'horodatage. Facultatif.
+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.timestamp")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console/trace/index.html b/files/fr/web/api/console/trace/index.html deleted file mode 100644 index 481fb9f954..0000000000 --- a/files/fr/web/api/console/trace/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Console.trace() -slug: Web/API/Console/trace -tags: - - API - - DOM - - Développement - - Méthode - - console - - débogage - - trace -translation_of: Web/API/Console/trace ---- -

{{ APIRef("Console API") }}

- -

Affiche la stack trace dans la Web Console.

- -

{{AvailableInWorkers}}

- -

Voir Stack traces dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples.

- -

Syntaxe

- -
console.trace();
-
- -

Exemple

- -
function foo() {
-  function bar() {
-    console.trace();
-  }
-  bar();
-}
-
-foo();
- -

Dans la console, la trace suivante sera affichée :

- -
bar
-foo
-<anonymous>
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#trace", "console.trace()")}}{{Spec2("Console API")}}Définition Initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.trace")}}

- -

Voir aussi

- -

Opera Dragonfly documentation: Console

diff --git a/files/fr/web/api/console/trace/index.md b/files/fr/web/api/console/trace/index.md new file mode 100644 index 0000000000..481fb9f954 --- /dev/null +++ b/files/fr/web/api/console/trace/index.md @@ -0,0 +1,69 @@ +--- +title: Console.trace() +slug: Web/API/Console/trace +tags: + - API + - DOM + - Développement + - Méthode + - console + - débogage + - trace +translation_of: Web/API/Console/trace +--- +

{{ APIRef("Console API") }}

+ +

Affiche la stack trace dans la Web Console.

+ +

{{AvailableInWorkers}}

+ +

Voir Stack traces dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples.

+ +

Syntaxe

+ +
console.trace();
+
+ +

Exemple

+ +
function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+ +

Dans la console, la trace suivante sera affichée :

+ +
bar
+foo
+<anonymous>
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#trace", "console.trace()")}}{{Spec2("Console API")}}Définition Initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.trace")}}

+ +

Voir aussi

+ +

Opera Dragonfly documentation: Console

diff --git a/files/fr/web/api/console/warn/index.html b/files/fr/web/api/console/warn/index.html deleted file mode 100644 index f67adb3582..0000000000 --- a/files/fr/web/api/console/warn/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Console.warn() -slug: Web/API/Console/warn -tags: - - API - - DOM - - Développement - - Méthode - - console - - débogage -translation_of: Web/API/Console/warn ---- -

{{ APIRef("Console API") }}

- -

Affiche un message d'avertissement dans la console web.

- -

{{AvailableInWorkers}}

- -
-

Note : Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement

-
- -

Syntaxe

- -
console.warn(obj1 [, obj2, ..., objN]);
-console.warn(msg [, subst1, ..., substN]);
-
- -

Paramétres

- -
-
obj1 ... objN
-
Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.
-
msg
-
Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
-
subst1 ... substN
-
Une liste d'objets JavaScript qui remplace les chaînes de caractéres de msg. Cela vous donne plus de contrôle sur le format de sortie.
-
- -

Voir Outputting text to the console dans la documentation de {{ domxref("console") }} pour plus de détails.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Console API", "#warn", "console.warn()")}}{{Spec2("Console API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console.warn")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/console/warn/index.md b/files/fr/web/api/console/warn/index.md new file mode 100644 index 0000000000..f67adb3582 --- /dev/null +++ b/files/fr/web/api/console/warn/index.md @@ -0,0 +1,70 @@ +--- +title: Console.warn() +slug: Web/API/Console/warn +tags: + - API + - DOM + - Développement + - Méthode + - console + - débogage +translation_of: Web/API/Console/warn +--- +

{{ APIRef("Console API") }}

+ +

Affiche un message d'avertissement dans la console web.

+ +

{{AvailableInWorkers}}

+ +
+

Note : Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement

+
+ +

Syntaxe

+ +
console.warn(obj1 [, obj2, ..., objN]);
+console.warn(msg [, subst1, ..., substN]);
+
+ +

Paramétres

+ +
+
obj1 ... objN
+
Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.
+
msg
+
Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
+
subst1 ... substN
+
Une liste d'objets JavaScript qui remplace les chaînes de caractéres de msg. Cela vous donne plus de contrôle sur le format de sortie.
+
+ +

Voir Outputting text to the console dans la documentation de {{ domxref("console") }} pour plus de détails.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Console API", "#warn", "console.warn()")}}{{Spec2("Console API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console.warn")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/console_api/index.html b/files/fr/web/api/console_api/index.html deleted file mode 100644 index 95de8bab21..0000000000 --- a/files/fr/web/api/console_api/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Console API -slug: Web/API/Console_API -tags: - - API - - Aperçu - - Journal - - Sortie - - console - - débogage - - test -translation_of: Web/API/Console_API ---- -
{{DefaultAPISidebar("Console API")}}
- -

L'API Console fournit des fonctionnalités permettant aux développeurs d'effectuer des tâches de débogage, telles que la journalisation des messages ou les valeurs des variables à des points définis dans votre code, ou calculer la durée d'une opération.

- -

Concepts et utilisation

- -

L'API Console a commencé comme une API largement propriétaire, avec différents navigateurs l'implémentant, bien que cela ne soit pas cohérent. La spécification de l'API Console a été créée pour définir un comportement cohérent, et tous les navigateurs modernes ont finalement décidé d'implémenter ce comportement - bien que certaines implémentations aient toujours leurs propres fonctions propriétaires supplémentaires. Découvrez-les sur:

- - - -

L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la console - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la console Web du navigateur.

- -

La méthode de loin la plus couramment utilisée est {{domxref ("console.log")}}, qui est utilisée pour consigner la valeur en cours contenue dans une variable spécifique.

- -

Interfaces

- -
-
{{domxref("console")}}
-
Fournit des fonctionnalités de débogage rudimentaires, y compris la journalisation, les traces de pile, les minuteries et les compteurs.
-
- -

Exemples

- -
let myString = 'Hello world'
-
-// Output "Hello world" to the console
-console.log(myString)
- -

Consultez la page de référence de la console pour plus d'exemples.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Définition initial.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Console")}}

- -

Voir également

- - diff --git a/files/fr/web/api/console_api/index.md b/files/fr/web/api/console_api/index.md new file mode 100644 index 0000000000..95de8bab21 --- /dev/null +++ b/files/fr/web/api/console_api/index.md @@ -0,0 +1,74 @@ +--- +title: Console API +slug: Web/API/Console_API +tags: + - API + - Aperçu + - Journal + - Sortie + - console + - débogage + - test +translation_of: Web/API/Console_API +--- +
{{DefaultAPISidebar("Console API")}}
+ +

L'API Console fournit des fonctionnalités permettant aux développeurs d'effectuer des tâches de débogage, telles que la journalisation des messages ou les valeurs des variables à des points définis dans votre code, ou calculer la durée d'une opération.

+ +

Concepts et utilisation

+ +

L'API Console a commencé comme une API largement propriétaire, avec différents navigateurs l'implémentant, bien que cela ne soit pas cohérent. La spécification de l'API Console a été créée pour définir un comportement cohérent, et tous les navigateurs modernes ont finalement décidé d'implémenter ce comportement - bien que certaines implémentations aient toujours leurs propres fonctions propriétaires supplémentaires. Découvrez-les sur:

+ + + +

L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la console - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la console Web du navigateur.

+ +

La méthode de loin la plus couramment utilisée est {{domxref ("console.log")}}, qui est utilisée pour consigner la valeur en cours contenue dans une variable spécifique.

+ +

Interfaces

+ +
+
{{domxref("console")}}
+
Fournit des fonctionnalités de débogage rudimentaires, y compris la journalisation, les traces de pile, les minuteries et les compteurs.
+
+ +

Exemples

+ +
let myString = 'Hello world'
+
+// Output "Hello world" to the console
+console.log(myString)
+ +

Consultez la page de référence de la console pour plus d'exemples.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Définition initial.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Console")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/credential/index.html b/files/fr/web/api/credential/index.html deleted file mode 100644 index f5dd37c020..0000000000 --- a/files/fr/web/api/credential/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Credential -slug: Web/API/Credential -tags: - - API - - Credential - - Credential Management API - - Interface - - Reference -translation_of: Web/API/Credential ---- -

{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}

- -

L'interface Credential, rattachée à l'API Credential Management, fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.

- -

Propriétés

- -
-
{{domxref("Credential.id")}} {{readonlyInline}}
-
Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique.
-
{{domxref("Credential.type")}} {{readonlyInline}}
-
Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont -
    -
  • password (pour {{domxref("PasswordCredential")}})
    • -
  • federated (pour {{domxref("FederatedCredential")}})
    • -
  • public-key (pour {{domxref("PublicKeyCredential")}})
    • -
-
-
- -

Gestionnaires d'évènements

- -

Aucun.

- -

Méthodes

- -

Aucune.

- -

Exemples

- -
// TBD
- -

Specifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Credential")}}

diff --git a/files/fr/web/api/credential/index.md b/files/fr/web/api/credential/index.md new file mode 100644 index 0000000000..f5dd37c020 --- /dev/null +++ b/files/fr/web/api/credential/index.md @@ -0,0 +1,64 @@ +--- +title: Credential +slug: Web/API/Credential +tags: + - API + - Credential + - Credential Management API + - Interface + - Reference +translation_of: Web/API/Credential +--- +

{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}

+ +

L'interface Credential, rattachée à l'API Credential Management, fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.

+ +

Propriétés

+ +
+
{{domxref("Credential.id")}} {{readonlyInline}}
+
Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique.
+
{{domxref("Credential.type")}} {{readonlyInline}}
+
Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont +
    +
  • password (pour {{domxref("PasswordCredential")}})
    • +
  • federated (pour {{domxref("FederatedCredential")}})
    • +
  • public-key (pour {{domxref("PublicKeyCredential")}})
    • +
+
+
+ +

Gestionnaires d'évènements

+ +

Aucun.

+ +

Méthodes

+ +

Aucune.

+ +

Exemples

+ +
// TBD
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Credential")}}

diff --git a/files/fr/web/api/credential_management_api/index.html b/files/fr/web/api/credential_management_api/index.html deleted file mode 100644 index 643d918367..0000000000 --- a/files/fr/web/api/credential_management_api/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Credential Management API -slug: Web/API/Credential_Management_API -tags: - - API - - Credential Management API - - Landing - - Reference - - Web Authentification API - - WebAuthn -translation_of: Web/API/Credential_Management_API ---- -
-

{{APIRef("Credential Management API")}}{{ SeeCompatTable() }}

- -

L'API Credential Management (en français : gestion des informations d'authentification) permet à un site web d'enregistrer et de récupérer des informations d'authentifications pour un utilisateur (qu'elles soient fédérées, utilisent un mot de passe ou une paire de clés asymétrique). Un utilisateur peut ainsi se connecter à un service sans avoir à saisir de mot de passe, de voir le compte fédéré utilisé pour se connecter à un site, de rouvrir une session sans avoir à se reconnecter après une session expirée.

- -

Concepts et utilisation de l'API Credential Management

- -

Cette API permet aux sites web d'interagir avec le système de mots de passe de l'agent utilisateur afin que les sites web puissent gérer de façon uniforme les informations d'authentification. Ainsi, les sites et agents utilisateur peuvent mieux communiquer sur ces aspects.

- -

Ainsi, sans cette API, un agent utilisateur pourra rencontrer certaines difficultés à gérer des fournisseurs d'identité fédérée ou d'autres mécanismes de connexion.

- -
-

Note : Cette API est restreinte aux contextes de plus haut niveau. Les appels à get() et store() depuis une {{HTMLElement("iframe")}} seront résolus sans aucun effet.

-
- -

Informations d'authentification partagées entre les sous-domaines

- -

Les versions les plus récentes de la spécification permettent de récupérer les informations relatives à un sous-domaine différent. Ainsi, un mot de passe enregistré pour login.example.com pourrait être utilisé pour se connecter à www.example.com. Pour permettre cela, le mot de passe doit explicitement être stocké en appelant {{domxref("CredentialsContainer.store()")}}. Ce comportement est parfois intitulé Public suffix list (PSL) matching (correspondance des listes de suffixes publics). Toutefois, la spécification ne fait que recommander l'utilisation du PSL pour déterminer la portée des informations d'authentification. Formellement, le PSL n'est pas obligatoire. Les navigateurs peuvent donc varier dans leurs implémentations.

- -

Interfaces

- -
-
{{domxref("Credential")}}
-
Cette interface fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.
-
{{domxref("CredentialsContainer")}}
-
Cette interface expose des méthodes pour récupérer des informations d'authentification et notifier l'agent utilisateur lorsque des évènements pertinents se produisent (connexion ou déconnexion réussies par exemple). Cette interface est accessible via navigator.credentials.
-
{{domxref("FederatedCredential")}}
-
Cette interface fournit des informations relatives à des informations d'authentifcation provenant d'un fournisseur d'identité fédéré (c'est une entité à laquelle un site web fait confiance pour authentifier un utilisateur et qui fournit une API à cet effet). Le framework OpenID Connect est un exemple d'un tel cas de figure.
-
{{domxref("PasswordCredential")}}
-
Cette interface fournit des informations à propos d'un couple nom d'utilisateur / mot de passe.
-
{{domxref("PublicKeyCredential")}}
-
Cette interface fournit des informations d'authentification pour se connecter à l'aide d'une paire de clés asymétrique (permettant d'éviter le hameçonnage et la fuite de données) plutôt qu'avec un mot de passe.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
diff --git a/files/fr/web/api/credential_management_api/index.md b/files/fr/web/api/credential_management_api/index.md new file mode 100644 index 0000000000..643d918367 --- /dev/null +++ b/files/fr/web/api/credential_management_api/index.md @@ -0,0 +1,69 @@ +--- +title: Credential Management API +slug: Web/API/Credential_Management_API +tags: + - API + - Credential Management API + - Landing + - Reference + - Web Authentification API + - WebAuthn +translation_of: Web/API/Credential_Management_API +--- +
+

{{APIRef("Credential Management API")}}{{ SeeCompatTable() }}

+ +

L'API Credential Management (en français : gestion des informations d'authentification) permet à un site web d'enregistrer et de récupérer des informations d'authentifications pour un utilisateur (qu'elles soient fédérées, utilisent un mot de passe ou une paire de clés asymétrique). Un utilisateur peut ainsi se connecter à un service sans avoir à saisir de mot de passe, de voir le compte fédéré utilisé pour se connecter à un site, de rouvrir une session sans avoir à se reconnecter après une session expirée.

+ +

Concepts et utilisation de l'API Credential Management

+ +

Cette API permet aux sites web d'interagir avec le système de mots de passe de l'agent utilisateur afin que les sites web puissent gérer de façon uniforme les informations d'authentification. Ainsi, les sites et agents utilisateur peuvent mieux communiquer sur ces aspects.

+ +

Ainsi, sans cette API, un agent utilisateur pourra rencontrer certaines difficultés à gérer des fournisseurs d'identité fédérée ou d'autres mécanismes de connexion.

+ +
+

Note : Cette API est restreinte aux contextes de plus haut niveau. Les appels à get() et store() depuis une {{HTMLElement("iframe")}} seront résolus sans aucun effet.

+
+ +

Informations d'authentification partagées entre les sous-domaines

+ +

Les versions les plus récentes de la spécification permettent de récupérer les informations relatives à un sous-domaine différent. Ainsi, un mot de passe enregistré pour login.example.com pourrait être utilisé pour se connecter à www.example.com. Pour permettre cela, le mot de passe doit explicitement être stocké en appelant {{domxref("CredentialsContainer.store()")}}. Ce comportement est parfois intitulé Public suffix list (PSL) matching (correspondance des listes de suffixes publics). Toutefois, la spécification ne fait que recommander l'utilisation du PSL pour déterminer la portée des informations d'authentification. Formellement, le PSL n'est pas obligatoire. Les navigateurs peuvent donc varier dans leurs implémentations.

+ +

Interfaces

+ +
+
{{domxref("Credential")}}
+
Cette interface fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.
+
{{domxref("CredentialsContainer")}}
+
Cette interface expose des méthodes pour récupérer des informations d'authentification et notifier l'agent utilisateur lorsque des évènements pertinents se produisent (connexion ou déconnexion réussies par exemple). Cette interface est accessible via navigator.credentials.
+
{{domxref("FederatedCredential")}}
+
Cette interface fournit des informations relatives à des informations d'authentifcation provenant d'un fournisseur d'identité fédéré (c'est une entité à laquelle un site web fait confiance pour authentifier un utilisateur et qui fournit une API à cet effet). Le framework OpenID Connect est un exemple d'un tel cas de figure.
+
{{domxref("PasswordCredential")}}
+
Cette interface fournit des informations à propos d'un couple nom d'utilisateur / mot de passe.
+
{{domxref("PublicKeyCredential")}}
+
Cette interface fournit des informations d'authentification pour se connecter à l'aide d'une paire de clés asymétrique (permettant d'éviter le hameçonnage et la fuite de données) plutôt qu'avec un mot de passe.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
diff --git a/files/fr/web/api/credentialscontainer/create/index.html b/files/fr/web/api/credentialscontainer/create/index.html deleted file mode 100644 index 88f609ad56..0000000000 --- a/files/fr/web/api/credentialscontainer/create/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: CredentialsContainer.create() -slug: Web/API/CredentialsContainer/create -tags: - - API - - Credential Management API - - Méthode - - Reference - - Web Authentication API - - WebAuthn -translation_of: Web/API/CredentialsContainer/create ---- -

{{APIRef("Credential Management")}}{{SeeCompatTable}}

- -

La méthode create(), rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en

- -
    -
  • une nouvelle instance {{domxref("Credential")}} construite avec les options fournies
    • -
  • {{jsxref("null")}} si aucun objet Credential ne peut être créé.
    • -
- -
-

Note : Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.

-
- -

Syntaxe

- -
var promise = CredentialsContainer.create([options])
- -

Paramètres

- -
-
options
-
Un objet de type {{domxref("CredentialCreationOptions")}} qui contient des options pour le nouvel objet Credentials demandé. Cet objet doit posséder au moins une des propriétés parmi "password", "federated" ou "publicKey". Les options sont : -
    -
  • password: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}} -
      -
    • id: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.
      • -
    • name: {{optional_inline}} {{domxref("USVString")}}
      • -
    • iconURL: {{optional_inline}} {{domxref("USVString")}}
      • -
    • password: (required) {{domxref("USVString")}}
      • -
    -
    • -
  • federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont : -
      -
    • id: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.
      • -
    • name: {{optional_inline}} {{domxref("USVString")}}
      • -
    • iconURL: {{optional_inline}} {{domxref("USVString")}}
      • -
    • provider: (required) {{domxref("USVString")}}
      • -
    • protocol: {{optional_inline}} {{domxref("USVString")}}
      • -
    -
    • -
  • publicKey : {{optional_inline}} un objet {{domxref("PublicKeyCredentialCreationOptions")}} qui décrit les options pour créer une information d'authentification WebAuthn.
    • -
-
-
- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance {{domxref("Credential")}} telle que {{domxref("PasswordCredential")}}, {{domxref("FederatedCredential")}} ou {{domxref("PublicKeyCredential")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}}{{Spec2('Credential Management')}}Définition initiale.
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.CredentialsContainer.create")}}

diff --git a/files/fr/web/api/credentialscontainer/create/index.md b/files/fr/web/api/credentialscontainer/create/index.md new file mode 100644 index 0000000000..88f609ad56 --- /dev/null +++ b/files/fr/web/api/credentialscontainer/create/index.md @@ -0,0 +1,88 @@ +--- +title: CredentialsContainer.create() +slug: Web/API/CredentialsContainer/create +tags: + - API + - Credential Management API + - Méthode + - Reference + - Web Authentication API + - WebAuthn +translation_of: Web/API/CredentialsContainer/create +--- +

{{APIRef("Credential Management")}}{{SeeCompatTable}}

+ +

La méthode create(), rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en

+ +
    +
  • une nouvelle instance {{domxref("Credential")}} construite avec les options fournies
    • +
  • {{jsxref("null")}} si aucun objet Credential ne peut être créé.
    • +
+ +
+

Note : Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.

+
+ +

Syntaxe

+ +
var promise = CredentialsContainer.create([options])
+ +

Paramètres

+ +
+
options
+
Un objet de type {{domxref("CredentialCreationOptions")}} qui contient des options pour le nouvel objet Credentials demandé. Cet objet doit posséder au moins une des propriétés parmi "password", "federated" ou "publicKey". Les options sont : +
    +
  • password: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}} +
      +
    • id: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.
      • +
    • name: {{optional_inline}} {{domxref("USVString")}}
      • +
    • iconURL: {{optional_inline}} {{domxref("USVString")}}
      • +
    • password: (required) {{domxref("USVString")}}
      • +
    +
    • +
  • federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont : +
      +
    • id: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.
      • +
    • name: {{optional_inline}} {{domxref("USVString")}}
      • +
    • iconURL: {{optional_inline}} {{domxref("USVString")}}
      • +
    • provider: (required) {{domxref("USVString")}}
      • +
    • protocol: {{optional_inline}} {{domxref("USVString")}}
      • +
    +
    • +
  • publicKey : {{optional_inline}} un objet {{domxref("PublicKeyCredentialCreationOptions")}} qui décrit les options pour créer une information d'authentification WebAuthn.
    • +
+
+
+ +

Valeur de retour

+ +

Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance {{domxref("Credential")}} telle que {{domxref("PasswordCredential")}}, {{domxref("FederatedCredential")}} ou {{domxref("PublicKeyCredential")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}}{{Spec2('Credential Management')}}Définition initiale.
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CredentialsContainer.create")}}

diff --git a/files/fr/web/api/credentialscontainer/get/index.html b/files/fr/web/api/credentialscontainer/get/index.html deleted file mode 100644 index a58d9405bf..0000000000 --- a/files/fr/web/api/credentialscontainer/get/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: CredentialsContainer.get() -slug: Web/API/CredentialsContainer/get -tags: - - API - - Credential Management API - - CredentialsContainer - - Méthode - - Reference - - Web Authentication API - - WebAuthn -translation_of: Web/API/CredentialsContainer/get ---- -

{{APIRef("Credential Management")}}{{SeeCompatTable}}

- -

La méthode get(), rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en une instance de {{domxref("Credential")}} correspondant aux paramètres fournis. Si aucune correspondance n'est trouvée, la promesse sera résolue avec la valeur {{jsxref("null")}}.

- -

Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument options). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information.

- -

Cette méthode récupère les informations d'authentification en appelant la méthode CollectFromCredentialStore pour chaque type d'authentification permis par l'argument options. Ainsi, si la propriété options.password existe dans l'argument passé,   {{domxref("PasswordCredential")}}.[[CollectFromCredentialStore]] sera appelée.

- -
-

Note : Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.

-
- -

Syntaxe

- -
var promise = CredentialsContainer.get([options])
- -

Paramètres

- -
-
options {{optional_inline}}
-
Un objet de type {{domxref("CredentialRequestOptions")}} qui contient les critères de la requête. et les options d'interaction avec l'utilisateur. Cet objet peut contenir les propriétés suivantes : -
    -
  • password : un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée devrait contenir les informations sur l'utilisateur (contrairement aux informations d'authentification fédérées).
    • -
  • federated : un objet {{domxref("FederatedCredentialRequestOptions")}} qui contient les critères que doivent respecter les informations d'authentification fédérées. Les options disponibles sont : -
      -
    • providers : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les fournisseurs d'identité potentiels
      • -
    • protocols : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les protocoles de fédération à rechercher.
      • -
    -
    • -
  • publicKey : un objet {{domxref("PublicKeyCredentialRequestOptions")}} contenant les conditions que doivent respecter les informations d'authentification WebAuthn qui seront renvoyées.
    • -
  • mediation : une chaîne de caractères {{jsxref("String")}} qui indique si l'utilisateur devra se reconnecter à chaque visite sur le site. Les valeurs valides sont "silent", "optional" ou "required".
    • -
  • unmediated : {{deprecated_inline()}} un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée ne devrait pas nécessiter de médiation avec l'utilisateur.
    • -
-
-
- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}) qui est résolue avec une instance {{domxref("Credential")}} correspondant aux paramètres fournis. S'il n'est pas possible d'obtenir une seule instance sans ambiguïté, la promesse sera résolue avec la valeur {{jsxref("null")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}}{{Spec2('Credential Management')}}Définition initiale.
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.CredentialsContainer.get")}}

diff --git a/files/fr/web/api/credentialscontainer/get/index.md b/files/fr/web/api/credentialscontainer/get/index.md new file mode 100644 index 0000000000..a58d9405bf --- /dev/null +++ b/files/fr/web/api/credentialscontainer/get/index.md @@ -0,0 +1,80 @@ +--- +title: CredentialsContainer.get() +slug: Web/API/CredentialsContainer/get +tags: + - API + - Credential Management API + - CredentialsContainer + - Méthode + - Reference + - Web Authentication API + - WebAuthn +translation_of: Web/API/CredentialsContainer/get +--- +

{{APIRef("Credential Management")}}{{SeeCompatTable}}

+ +

La méthode get(), rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en une instance de {{domxref("Credential")}} correspondant aux paramètres fournis. Si aucune correspondance n'est trouvée, la promesse sera résolue avec la valeur {{jsxref("null")}}.

+ +

Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument options). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information.

+ +

Cette méthode récupère les informations d'authentification en appelant la méthode CollectFromCredentialStore pour chaque type d'authentification permis par l'argument options. Ainsi, si la propriété options.password existe dans l'argument passé,   {{domxref("PasswordCredential")}}.[[CollectFromCredentialStore]] sera appelée.

+ +
+

Note : Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.

+
+ +

Syntaxe

+ +
var promise = CredentialsContainer.get([options])
+ +

Paramètres

+ +
+
options {{optional_inline}}
+
Un objet de type {{domxref("CredentialRequestOptions")}} qui contient les critères de la requête. et les options d'interaction avec l'utilisateur. Cet objet peut contenir les propriétés suivantes : +
    +
  • password : un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée devrait contenir les informations sur l'utilisateur (contrairement aux informations d'authentification fédérées).
    • +
  • federated : un objet {{domxref("FederatedCredentialRequestOptions")}} qui contient les critères que doivent respecter les informations d'authentification fédérées. Les options disponibles sont : +
      +
    • providers : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les fournisseurs d'identité potentiels
      • +
    • protocols : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les protocoles de fédération à rechercher.
      • +
    +
    • +
  • publicKey : un objet {{domxref("PublicKeyCredentialRequestOptions")}} contenant les conditions que doivent respecter les informations d'authentification WebAuthn qui seront renvoyées.
    • +
  • mediation : une chaîne de caractères {{jsxref("String")}} qui indique si l'utilisateur devra se reconnecter à chaque visite sur le site. Les valeurs valides sont "silent", "optional" ou "required".
    • +
  • unmediated : {{deprecated_inline()}} un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée ne devrait pas nécessiter de médiation avec l'utilisateur.
    • +
+
+
+ +

Valeur de retour

+ +

Une promesse ({{jsxref("Promise")}}) qui est résolue avec une instance {{domxref("Credential")}} correspondant aux paramètres fournis. S'il n'est pas possible d'obtenir une seule instance sans ambiguïté, la promesse sera résolue avec la valeur {{jsxref("null")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}}{{Spec2('Credential Management')}}Définition initiale.
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CredentialsContainer.get")}}

diff --git a/files/fr/web/api/credentialscontainer/index.html b/files/fr/web/api/credentialscontainer/index.html deleted file mode 100644 index 31e6195ae8..0000000000 --- a/files/fr/web/api/credentialscontainer/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: CredentialsContainer -slug: Web/API/CredentialsContainer -tags: - - API - - Credential Management API - - Interface - - Reference - - Web Authentication API - - WebAuthn -translation_of: Web/API/CredentialsContainer ---- -

{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}

- -

L'interface CredentialsContainer, rattachée à l'API Credential Management, expose des méthodes pour demander l'accès aux informations d'authentification et informer l'agent utilisateur lorsque des évènements pertinents se produisent (connexion et déconnexion réussies par exemple). On peut accéder à cette interface via {{domxref('Navigator.credentials')}}.

- -

Propriétés

- -

Aucune.

- -

Gestionnaires d'évènements

- -

Aucun.

- -

Methods

- -
-
{{domxref("CredentialsContainer.create()")}}{{securecontext_inline}}
-
Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec une nouvelle instance {{domxref("Credential")}} construite selon les options fournies ou null si aucun objet Credential ne peut être créé.
-
{{domxref("CredentialsContainer.get()")}}{{securecontext_inline}}
-
Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec l'instance de {{domxref("Credential")}} qui correspond aux paramètres fournis.
-
{{domxref("CredentialsContainer.preventSilentAccess()")}}{{securecontext_inline}}
-
Cette méthode active un marqueur qui indique si une connexion automatique est autorisée pour les futures visites sur cette origine et renvoie une promesse ({{jsxref("Promise")}}) vide. 
-
- On pourra par exemple appeler cette méthode après qu'un utilisateur se soit déconnecté d'un site web pour s'assurer qu'il n'est pas reconnecté à la prochaine visite. Dans des versions antérieures de la spécification, cette méthode était intitulée requireUserMediation(). Voir le tableau de compatibilité ci-après pour plus de détails.
-
{{domxref("CredentialsContainer.store()")}}{{securecontext_inline}}
-
Cette méthode enregistre des informations d'authentification pour un utilisateur à partir d'une instance {{domxref("Credential")}} fournie et renvoie cette instance dans une promesse ({{jsxref("Promise")}}).
-
- -

Exemples

- -
// TBD
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.CredentialsContainer")}}

diff --git a/files/fr/web/api/credentialscontainer/index.md b/files/fr/web/api/credentialscontainer/index.md new file mode 100644 index 0000000000..31e6195ae8 --- /dev/null +++ b/files/fr/web/api/credentialscontainer/index.md @@ -0,0 +1,70 @@ +--- +title: CredentialsContainer +slug: Web/API/CredentialsContainer +tags: + - API + - Credential Management API + - Interface + - Reference + - Web Authentication API + - WebAuthn +translation_of: Web/API/CredentialsContainer +--- +

{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}

+ +

L'interface CredentialsContainer, rattachée à l'API Credential Management, expose des méthodes pour demander l'accès aux informations d'authentification et informer l'agent utilisateur lorsque des évènements pertinents se produisent (connexion et déconnexion réussies par exemple). On peut accéder à cette interface via {{domxref('Navigator.credentials')}}.

+ +

Propriétés

+ +

Aucune.

+ +

Gestionnaires d'évènements

+ +

Aucun.

+ +

Methods

+ +
+
{{domxref("CredentialsContainer.create()")}}{{securecontext_inline}}
+
Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec une nouvelle instance {{domxref("Credential")}} construite selon les options fournies ou null si aucun objet Credential ne peut être créé.
+
{{domxref("CredentialsContainer.get()")}}{{securecontext_inline}}
+
Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec l'instance de {{domxref("Credential")}} qui correspond aux paramètres fournis.
+
{{domxref("CredentialsContainer.preventSilentAccess()")}}{{securecontext_inline}}
+
Cette méthode active un marqueur qui indique si une connexion automatique est autorisée pour les futures visites sur cette origine et renvoie une promesse ({{jsxref("Promise")}}) vide. 
+
+ On pourra par exemple appeler cette méthode après qu'un utilisateur se soit déconnecté d'un site web pour s'assurer qu'il n'est pas reconnecté à la prochaine visite. Dans des versions antérieures de la spécification, cette méthode était intitulée requireUserMediation(). Voir le tableau de compatibilité ci-après pour plus de détails.
+
{{domxref("CredentialsContainer.store()")}}{{securecontext_inline}}
+
Cette méthode enregistre des informations d'authentification pour un utilisateur à partir d'une instance {{domxref("Credential")}} fournie et renvoie cette instance dans une promesse ({{jsxref("Promise")}}).
+
+ +

Exemples

+ +
// TBD
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CredentialsContainer")}}

diff --git a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.html b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.html deleted file mode 100644 index 3742b9fd86..0000000000 --- a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: CredentialsContainer.preventSilentAccess() -slug: Web/API/CredentialsContainer/preventSilentAccess -tags: - - API - - Credential Management API - - CredentialsContainer - - Méthode - - Reference -translation_of: Web/API/CredentialsContainer/preventSilentAccess ---- -

{{APIRef("")}}{{SeeCompatTable}}

- -

La méthode preventSilentAccess(), rattachée à l'interface  {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide.

- -

Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine.

- -

Dans des versions antérieures de la spécification, cette méthode était intitulée requireUserMediation(). Voir le tableau ci-après sur la compatibilité des navigateurs pour plus de détails.

- -

Syntaxe

- -
var Promise = CredentialsContainer.preventSilentAccess()
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}) vide.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-credentialscontainer-preventsilentaccess','preventSilentAccess()')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.CredentialsContainer.preventSilentAccess")}}

diff --git a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md new file mode 100644 index 0000000000..3742b9fd86 --- /dev/null +++ b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md @@ -0,0 +1,53 @@ +--- +title: CredentialsContainer.preventSilentAccess() +slug: Web/API/CredentialsContainer/preventSilentAccess +tags: + - API + - Credential Management API + - CredentialsContainer + - Méthode + - Reference +translation_of: Web/API/CredentialsContainer/preventSilentAccess +--- +

{{APIRef("")}}{{SeeCompatTable}}

+ +

La méthode preventSilentAccess(), rattachée à l'interface  {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide.

+ +

Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine.

+ +

Dans des versions antérieures de la spécification, cette méthode était intitulée requireUserMediation(). Voir le tableau ci-après sur la compatibilité des navigateurs pour plus de détails.

+ +

Syntaxe

+ +
var Promise = CredentialsContainer.preventSilentAccess()
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Une promesse ({{jsxref("Promise")}}) vide.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-credentialscontainer-preventsilentaccess','preventSilentAccess()')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CredentialsContainer.preventSilentAccess")}}

diff --git a/files/fr/web/api/credentialscontainer/store/index.html b/files/fr/web/api/credentialscontainer/store/index.html deleted file mode 100644 index a6f3af8023..0000000000 --- a/files/fr/web/api/credentialscontainer/store/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: CredentialsContainer.store() -slug: Web/API/CredentialsContainer/store -tags: - - API - - Credential Management API - - CredentialsContainer - - Méthode - - Reference -translation_of: Web/API/CredentialsContainer/store ---- -

{{APIRef("")}}{{SeeCompatTable}}

- -

La méthode store(), rattachée à l'interface {{domxref("CredentialsContainer")}}, enregistre un ensemble d'informations d'authentification pour l'utilisateur dans une instance {{domxref("Credential")}} et renvoie cette instance au travers d'une promesse ({{domxref("Promise")}}).

- -
-

Note : Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.

-
- -

Syntaxe

- -
CredentialsContainer.store(cred).then(function(credRes) { ... } )
- -

Paramètres

- -
-
cred
-
Une instance valide de {{domxref("Credential")}}.
-
- -

Valeur de retour

- -

Une promesse ({{domxref("Promise")}}) qui sera résolue avec l'instance de {{domxref("Credential")}} passée en argument.

- -

Exemples

- -
// TBD
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.CredentialsContainer.store")}}

diff --git a/files/fr/web/api/credentialscontainer/store/index.md b/files/fr/web/api/credentialscontainer/store/index.md new file mode 100644 index 0000000000..a6f3af8023 --- /dev/null +++ b/files/fr/web/api/credentialscontainer/store/index.md @@ -0,0 +1,60 @@ +--- +title: CredentialsContainer.store() +slug: Web/API/CredentialsContainer/store +tags: + - API + - Credential Management API + - CredentialsContainer + - Méthode + - Reference +translation_of: Web/API/CredentialsContainer/store +--- +

{{APIRef("")}}{{SeeCompatTable}}

+ +

La méthode store(), rattachée à l'interface {{domxref("CredentialsContainer")}}, enregistre un ensemble d'informations d'authentification pour l'utilisateur dans une instance {{domxref("Credential")}} et renvoie cette instance au travers d'une promesse ({{domxref("Promise")}}).

+ +
+

Note : Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.

+
+ +

Syntaxe

+ +
CredentialsContainer.store(cred).then(function(credRes) { ... } )
+ +

Paramètres

+ +
+
cred
+
Une instance valide de {{domxref("Credential")}}.
+
+ +

Valeur de retour

+ +

Une promesse ({{domxref("Promise")}}) qui sera résolue avec l'instance de {{domxref("Credential")}} passée en argument.

+ +

Exemples

+ +
// TBD
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CredentialsContainer.store")}}

diff --git a/files/fr/web/api/crossoriginisolated/index.html b/files/fr/web/api/crossoriginisolated/index.html deleted file mode 100644 index 0fd49fde85..0000000000 --- a/files/fr/web/api/crossoriginisolated/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.crossOriginIsolated -slug: Web/API/crossOriginIsolated -translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated -original_slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated ---- -
{{APIRef()}}{{SeeCompatTable}}
- -

La propriéte en lecture seule crossOriginIsolated de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}.

- -

Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse.

- -

Syntaxe

- -
var myCrossOriginIsolated = self.crossOriginIsolated; // or just crossOriginIsolated
-
- -

Valeur

- -

Une valeur booléenne

- -

Exemples

- -
if(crossOriginIsolated) {
-  // Post SharedArrayBuffer
-} else {
-  // Do something else
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG")}}Pas encore ajouté à la spécification
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/crossoriginisolated/index.md b/files/fr/web/api/crossoriginisolated/index.md new file mode 100644 index 0000000000..0fd49fde85 --- /dev/null +++ b/files/fr/web/api/crossoriginisolated/index.md @@ -0,0 +1,59 @@ +--- +title: WindowOrWorkerGlobalScope.crossOriginIsolated +slug: Web/API/crossOriginIsolated +translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated +original_slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated +--- +
{{APIRef()}}{{SeeCompatTable}}
+ +

La propriéte en lecture seule crossOriginIsolated de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}.

+ +

Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse.

+ +

Syntaxe

+ +
var myCrossOriginIsolated = self.crossOriginIsolated; // or just crossOriginIsolated
+
+ +

Valeur

+ +

Une valeur booléenne

+ +

Exemples

+ +
if(crossOriginIsolated) {
+  // Post SharedArrayBuffer
+} else {
+  // Do something else
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG")}}Pas encore ajouté à la spécification
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/crypto/getrandomvalues/index.html b/files/fr/web/api/crypto/getrandomvalues/index.html deleted file mode 100644 index 7c0b91e5d7..0000000000 --- a/files/fr/web/api/crypto/getrandomvalues/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: RandomSource.getRandomValues() -slug: Web/API/Crypto/getRandomValues -tags: - - API - - Cryptographie - - Methode(2) - - Méthode - - Reference - - Référence(2) -translation_of: Web/API/Crypto/getRandomValues -original_slug: Web/API/RandomSource/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/crypto/getrandomvalues/index.md b/files/fr/web/api/crypto/getrandomvalues/index.md new file mode 100644 index 0000000000..7c0b91e5d7 --- /dev/null +++ b/files/fr/web/api/crypto/getrandomvalues/index.md @@ -0,0 +1,76 @@ +--- +title: RandomSource.getRandomValues() +slug: Web/API/Crypto/getRandomValues +tags: + - API + - Cryptographie + - Methode(2) + - Méthode + - Reference + - Référence(2) +translation_of: Web/API/Crypto/getRandomValues +original_slug: Web/API/RandomSource/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/crypto/index.html b/files/fr/web/api/crypto/index.html deleted file mode 100644 index f31a2ebaf6..0000000000 --- a/files/fr/web/api/crypto/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Crypto -slug: Web/API/Crypto -translation_of: Web/API/Crypto ---- -

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

- -

L'interface Crypto représente les fonctions cryptographiques de base dans notre contexte actuel. Elle permet d'accéder à de solides générateur de nombres aléatoires dédiés à la cryptographie ainsi qu'aux principales primitives cryptographiques.

- -

Un objet avec cette interface est disponible dans le contexte web de la page via la propriété {{domxref("Window.crypto")}}.

- -

Propriétés

- -

Cette interface implémente les propriétés définies dans {{domxref("RandomSource")}}.

- -
-
{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}
-
Retourne un objet {{domxref("SubtleCrypto")}} procurant un accès aux principales primitives cryptographiques, comme le hashage, les signatures, le chiffrement ou le déchiffrement.
-
- -

Methodes

- -

Cette interface implémente les méthodes définies dans {{domxref("RandomSource")}}.

- -
-
{{domxref("RandomSource.getRandomValues()") }}
-
Rempli le {{ jsxref("TypedArray") }} passé avec des valeurs aléatoires utilisables pour la cryptographie.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}Definition
- initiale
- -

Voir aussi

- - \ No newline at end of file diff --git a/files/fr/web/api/crypto/index.md b/files/fr/web/api/crypto/index.md new file mode 100644 index 0000000000..f31a2ebaf6 --- /dev/null +++ b/files/fr/web/api/crypto/index.md @@ -0,0 +1,54 @@ +--- +title: Crypto +slug: Web/API/Crypto +translation_of: Web/API/Crypto +--- +

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

+ +

L'interface Crypto représente les fonctions cryptographiques de base dans notre contexte actuel. Elle permet d'accéder à de solides générateur de nombres aléatoires dédiés à la cryptographie ainsi qu'aux principales primitives cryptographiques.

+ +

Un objet avec cette interface est disponible dans le contexte web de la page via la propriété {{domxref("Window.crypto")}}.

+ +

Propriétés

+ +

Cette interface implémente les propriétés définies dans {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}
+
Retourne un objet {{domxref("SubtleCrypto")}} procurant un accès aux principales primitives cryptographiques, comme le hashage, les signatures, le chiffrement ou le déchiffrement.
+
+ +

Methodes

+ +

Cette interface implémente les méthodes définies dans {{domxref("RandomSource")}}.

+ +
+
{{domxref("RandomSource.getRandomValues()") }}
+
Rempli le {{ jsxref("TypedArray") }} passé avec des valeurs aléatoires utilisables pour la cryptographie.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}Definition
+ initiale
+ +

Voir aussi

+ + \ No newline at end of file diff --git a/files/fr/web/api/crypto/subtle/index.html b/files/fr/web/api/crypto/subtle/index.html deleted file mode 100644 index 5b0b24a70b..0000000000 --- a/files/fr/web/api/crypto/subtle/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Crypto.subtle -slug: Web/API/Crypto/subtle -translation_of: Web/API/Crypto/subtle ---- -

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

- -

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

- -

La propriété Crypto.subtle en mode lecture seule retourne un objet {{domxref("SubtleCrypto")}} permettant de réaliser des opérations cryptographiques.

- -

Syntaxe

- -
var crypto = crypto.subtle;
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}{{ Spec2('Web Crypto API') }}Définition initiale.
- -

Compatibilité navigateur

- -

{{Compat("api.Crypto.subtle")}}

- -

Voir aussi

- -
    -
  • {{domxref("Crypto")}}.
    • -
  • {{domxref("SubtleCrypto")}}.
    • -
diff --git a/files/fr/web/api/crypto/subtle/index.md b/files/fr/web/api/crypto/subtle/index.md new file mode 100644 index 0000000000..5b0b24a70b --- /dev/null +++ b/files/fr/web/api/crypto/subtle/index.md @@ -0,0 +1,42 @@ +--- +title: Crypto.subtle +slug: Web/API/Crypto/subtle +translation_of: Web/API/Crypto/subtle +--- +

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

+ +

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

+ +

La propriété Crypto.subtle en mode lecture seule retourne un objet {{domxref("SubtleCrypto")}} permettant de réaliser des opérations cryptographiques.

+ +

Syntaxe

+ +
var crypto = crypto.subtle;
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}{{ Spec2('Web Crypto API') }}Définition initiale.
+ +

Compatibilité navigateur

+ +

{{Compat("api.Crypto.subtle")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("Crypto")}}.
    • +
  • {{domxref("SubtleCrypto")}}.
    • +
diff --git a/files/fr/web/api/crypto_property/index.html b/files/fr/web/api/crypto_property/index.html deleted file mode 100644 index 80365515c5..0000000000 --- a/files/fr/web/api/crypto_property/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Window.crypto -slug: Web/API/crypto_property -translation_of: Web/API/Window/crypto -original_slug: Web/API/Window/crypto ---- -

{{APIRef}}

- -

La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}}  associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie.

- -

Syntaxe

- -
var cryptoObj = window.crypto || window.msCrypto; // pour IE 11
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}{{Spec2("Web Crypto API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.crypto")}}

- -

Voir aussi

- -
    -
  • L'objet global {{domxref("Window")}}
    • -
  • L'interface {{domxref("Crypto")}}
    • -
diff --git a/files/fr/web/api/crypto_property/index.md b/files/fr/web/api/crypto_property/index.md new file mode 100644 index 0000000000..80365515c5 --- /dev/null +++ b/files/fr/web/api/crypto_property/index.md @@ -0,0 +1,44 @@ +--- +title: Window.crypto +slug: Web/API/crypto_property +translation_of: Web/API/Window/crypto +original_slug: Web/API/Window/crypto +--- +

{{APIRef}}

+ +

La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}}  associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie.

+ +

Syntaxe

+ +
var cryptoObj = window.crypto || window.msCrypto; // pour IE 11
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}{{Spec2("Web Crypto API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.crypto")}}

+ +

Voir aussi

+ +
    +
  • L'objet global {{domxref("Window")}}
    • +
  • L'interface {{domxref("Crypto")}}
    • +
diff --git a/files/fr/web/api/cryptokey/index.html b/files/fr/web/api/cryptokey/index.html deleted file mode 100644 index e02b9889d6..0000000000 --- a/files/fr/web/api/cryptokey/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: CryptoKey -slug: Web/API/CryptoKey -tags: - - API - - Interface - - Reference - - Web Crypto API -translation_of: Web/API/CryptoKey ---- -

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

- -

L'interface CryptoKey représente une {{glossary("clef")}} cryptographique dérivé d'un algorithme de clef spécifique.

- -

Un objet CryptoKey peut être obtenu en utilisant : {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} ou {{domxref("SubtleCrypto.importKey()")}}

- -

Propriétés

- -

Cette interface n'hérite d'aucune propriété.

- -
-
{{domxref("CryptoKey.type")}}
-
Retourne  une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique)
-
{{domxref("CryptoKey.extractable")}}
-
Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non.
-
{{domxref("CryptoKey.algorithm")}}
-
Retourne un objet opaque représentant  un chiffre particulier avec lequel la clé doit être utilisée avec.
-
{{domxref("CryptoKey.usages")}}
-
Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée.
-
- -

Méthodes

- -

Cette interface n'hérite et n'implémente aucune méthode.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }}{{ Spec2('Web Crypto API') }}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.CryptoKey")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/cryptokey/index.md b/files/fr/web/api/cryptokey/index.md new file mode 100644 index 0000000000..e02b9889d6 --- /dev/null +++ b/files/fr/web/api/cryptokey/index.md @@ -0,0 +1,64 @@ +--- +title: CryptoKey +slug: Web/API/CryptoKey +tags: + - API + - Interface + - Reference + - Web Crypto API +translation_of: Web/API/CryptoKey +--- +

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

+ +

L'interface CryptoKey représente une {{glossary("clef")}} cryptographique dérivé d'un algorithme de clef spécifique.

+ +

Un objet CryptoKey peut être obtenu en utilisant : {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} ou {{domxref("SubtleCrypto.importKey()")}}

+ +

Propriétés

+ +

Cette interface n'hérite d'aucune propriété.

+ +
+
{{domxref("CryptoKey.type")}}
+
Retourne  une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique)
+
{{domxref("CryptoKey.extractable")}}
+
Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non.
+
{{domxref("CryptoKey.algorithm")}}
+
Retourne un objet opaque représentant  un chiffre particulier avec lequel la clé doit être utilisée avec.
+
{{domxref("CryptoKey.usages")}}
+
Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée.
+
+ +

Méthodes

+ +

Cette interface n'hérite et n'implémente aucune méthode.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }}{{ Spec2('Web Crypto API') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CryptoKey")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/css/index.html b/files/fr/web/api/css/index.html deleted file mode 100644 index 93f55c6ad4..0000000000 --- a/files/fr/web/api/css/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: CSS -slug: Web/API/CSS -translation_of: Web/API/CSS ---- -
{{APIRef("CSSOM")}}
- -

L'interface CSS possède les méthodes utiles au CSS. Aucun objet de cette interface ne sont implémentés : il ne contient que des méthodes statiques et est donc une interface abstraite.

- -

Propriétés

- -

L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.

- -

Méthodes

- -

L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.

- -

Static methods

- -

Aucun héritage de méthode statique.

- -
-
{{domxref("CSS.supports()")}}
-
Retourne un {{domxref("Boolean")}} qui indique si la paire propriété/valeur, ou si la condition, passée en paramètre est supportée.
-
- -
-
{{domxref("CSS.escape()")}} {{experimental_inline}}
-
Utilisée pour protéger une chaine de caractère qui sera utiliser comme sélecteur CSS.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}{{Spec2('CSSOM')}}Ajoute la méthode statique escape()
{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}{{Spec2('CSS3 Conditional')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.CSS")}}

- -

Voir également

- - diff --git a/files/fr/web/api/css/index.md b/files/fr/web/api/css/index.md new file mode 100644 index 0000000000..93f55c6ad4 --- /dev/null +++ b/files/fr/web/api/css/index.md @@ -0,0 +1,64 @@ +--- +title: CSS +slug: Web/API/CSS +translation_of: Web/API/CSS +--- +
{{APIRef("CSSOM")}}
+ +

L'interface CSS possède les méthodes utiles au CSS. Aucun objet de cette interface ne sont implémentés : il ne contient que des méthodes statiques et est donc une interface abstraite.

+ +

Propriétés

+ +

L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.

+ +

Méthodes

+ +

L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.

+ +

Static methods

+ +

Aucun héritage de méthode statique.

+ +
+
{{domxref("CSS.supports()")}}
+
Retourne un {{domxref("Boolean")}} qui indique si la paire propriété/valeur, ou si la condition, passée en paramètre est supportée.
+
+ +
+
{{domxref("CSS.escape()")}} {{experimental_inline}}
+
Utilisée pour protéger une chaine de caractère qui sera utiliser comme sélecteur CSS.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}{{Spec2('CSSOM')}}Ajoute la méthode statique escape()
{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}{{Spec2('CSS3 Conditional')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CSS")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/css_counter_styles/index.html b/files/fr/web/api/css_counter_styles/index.html deleted file mode 100644 index 09454dc3ac..0000000000 --- a/files/fr/web/api/css_counter_styles/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Module CSS Styles de compteurs (Counter Styles) -slug: Web/API/CSS_Counter_Styles -translation_of: 'Web/API/CSS_Counter_Styles' ---- -
{{DefaultAPISidebar("CSS Counter Styles")}}{{SeeCompatTable}}
- -

Le module CSS Styles de compteurs (Counter Styles) permet de définir des styles de compteurs personnalisés qui peuvent être utilisés pour les marqueurs de listes CSS et les compteurs des contenus générés.

- -

Interfaces

- -
-
{{domxref("CSSCounterStyleRule")}}
-
Représente une règle {{cssxref("@counter-style")}}.
-
- -

Spécifications

- -

{{Specifications("api.CSSCounterStyleRule")}}

- -

Compatibilité des navigateurs

- -

Interface CSSCounterStyleRule

- -

{{Compat("api.CSSCounterStyleRule")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/css_counter_styles/index.md b/files/fr/web/api/css_counter_styles/index.md new file mode 100644 index 0000000000..09454dc3ac --- /dev/null +++ b/files/fr/web/api/css_counter_styles/index.md @@ -0,0 +1,31 @@ +--- +title: Module CSS Styles de compteurs (Counter Styles) +slug: Web/API/CSS_Counter_Styles +translation_of: 'Web/API/CSS_Counter_Styles' +--- +
{{DefaultAPISidebar("CSS Counter Styles")}}{{SeeCompatTable}}
+ +

Le module CSS Styles de compteurs (Counter Styles) permet de définir des styles de compteurs personnalisés qui peuvent être utilisés pour les marqueurs de listes CSS et les compteurs des contenus générés.

+ +

Interfaces

+ +
+
{{domxref("CSSCounterStyleRule")}}
+
Représente une règle {{cssxref("@counter-style")}}.
+
+ +

Spécifications

+ +

{{Specifications("api.CSSCounterStyleRule")}}

+ +

Compatibilité des navigateurs

+ +

Interface CSSCounterStyleRule

+ +

{{Compat("api.CSSCounterStyleRule")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/css_font_loading_api/index.html b/files/fr/web/api/css_font_loading_api/index.html deleted file mode 100644 index 664e4de90a..0000000000 --- a/files/fr/web/api/css_font_loading_api/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: CSS Font Loading API -slug: Web/API/CSS_Font_Loading_API -translation_of: Web/API/CSS_Font_Loading_API ---- -
{{DefaultAPISidebar("CSS Font Loading API")}}{{SeeCompatTable}}
- -

L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices.

- -
-

Note : cette fonctionnalité est disponible dans l'API Web Workers (self.fonts donne accès à {{domxref('FontFaceSet')}}).

-
- -

Interfaces

- -
-
{{domxref('FontFace')}}
-
Représente une police unique mise à disposition.
-
{{domxref('FontFaceSet')}}
-
Une interface chargeant les polices et vérifiant le statut de leur téléchargement.
-
{{domxref('FontFaceSource')}}
-
Un {{Glossary("mixin")}} fournissant toutes les polices utilisées dans les opérations liées aux polices, à moins qu'elles ne soient définies autrement. Cela définit la propriété {{domxref("FontFaceSources.fonts")}} disponible pour le {{domxref("Document")}} et le {{domxref("WorkerGlobalScope")}}.
-
{{domxref('FontFaceSetLoadEvent')}}
-
Déclenché lorsqu'un {{domxref("FontFaceSet")}} est chargé.
-
- -

Spécifications

- -

{{Specifications("api.FontFace")}}

- -

Compatibilité navigateur

- -

{{Compat("api.FontFace")}}

\ No newline at end of file diff --git a/files/fr/web/api/css_font_loading_api/index.md b/files/fr/web/api/css_font_loading_api/index.md new file mode 100644 index 0000000000..664e4de90a --- /dev/null +++ b/files/fr/web/api/css_font_loading_api/index.md @@ -0,0 +1,33 @@ +--- +title: CSS Font Loading API +slug: Web/API/CSS_Font_Loading_API +translation_of: Web/API/CSS_Font_Loading_API +--- +
{{DefaultAPISidebar("CSS Font Loading API")}}{{SeeCompatTable}}
+ +

L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices.

+ +
+

Note : cette fonctionnalité est disponible dans l'API Web Workers (self.fonts donne accès à {{domxref('FontFaceSet')}}).

+
+ +

Interfaces

+ +
+
{{domxref('FontFace')}}
+
Représente une police unique mise à disposition.
+
{{domxref('FontFaceSet')}}
+
Une interface chargeant les polices et vérifiant le statut de leur téléchargement.
+
{{domxref('FontFaceSource')}}
+
Un {{Glossary("mixin")}} fournissant toutes les polices utilisées dans les opérations liées aux polices, à moins qu'elles ne soient définies autrement. Cela définit la propriété {{domxref("FontFaceSources.fonts")}} disponible pour le {{domxref("Document")}} et le {{domxref("WorkerGlobalScope")}}.
+
{{domxref('FontFaceSetLoadEvent')}}
+
Déclenché lorsqu'un {{domxref("FontFaceSet")}} est chargé.
+
+ +

Spécifications

+ +

{{Specifications("api.FontFace")}}

+ +

Compatibilité navigateur

+ +

{{Compat("api.FontFace")}}

\ No newline at end of file diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html deleted file mode 100644 index 4b0fc4ff56..0000000000 --- a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Déterminer les dimensions des éléments -slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements -translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements ---- -

{{APIRef("CSSOM View")}}

- -

Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins.

- -

Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .

- -

Si vous voulez définir la largeur et la hauteur d'un élément, utilisez width et height; ou les propriétés min-width, max-width, min-height et max-height.

- -

Que faut-il utiliser ?

- -

Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés offsetWidth et offsetHeight.

- -

La plupart du temps ce sont les mêmes que la largeur et la hauteur de getBoundingClientRect(), quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, offsetWidth et offsetHeight renvoie la disposition de la largeur et la hauteur de l'élément, tandis que getBoundingClientRect() retourne le rendu de la largeur et de la hauteur.

- -

A titre d'exemple, si l'élément a width: 100px; et transform: scale(0.5); getBoundingClientRect() retournera 50 comme largeur, tandis que offsetWidth retournera 100.

- -

- -

Quelle est la taille du contenu affiché ?

- -

Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés clientWidth et  clientHeight :

- -

- -

Grandeur totale

- -

Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés scrollWidth et scrollHeight.

- -

Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.

- -

Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, scrollWidth retourne 600 tandis que scrollHeight retourne 400.

- -

Voir aussi

- - diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md new file mode 100644 index 0000000000..4b0fc4ff56 --- /dev/null +++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md @@ -0,0 +1,43 @@ +--- +title: Déterminer les dimensions des éléments +slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements +translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements +--- +

{{APIRef("CSSOM View")}}

+ +

Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins.

+ +

Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .

+ +

Si vous voulez définir la largeur et la hauteur d'un élément, utilisez width et height; ou les propriétés min-width, max-width, min-height et max-height.

+ +

Que faut-il utiliser ?

+ +

Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés offsetWidth et offsetHeight.

+ +

La plupart du temps ce sont les mêmes que la largeur et la hauteur de getBoundingClientRect(), quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, offsetWidth et offsetHeight renvoie la disposition de la largeur et la hauteur de l'élément, tandis que getBoundingClientRect() retourne le rendu de la largeur et de la hauteur.

+ +

A titre d'exemple, si l'élément a width: 100px; et transform: scale(0.5); getBoundingClientRect() retournera 50 comme largeur, tandis que offsetWidth retournera 100.

+ +

+ +

Quelle est la taille du contenu affiché ?

+ +

Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés clientWidth et  clientHeight :

+ +

+ +

Grandeur totale

+ +

Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés scrollWidth et scrollHeight.

+ +

Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.

+ +

Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, scrollWidth retourne 600 tandis que scrollHeight retourne 400.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/css_object_model/index.html b/files/fr/web/api/css_object_model/index.html deleted file mode 100644 index ae59f591a9..0000000000 --- a/files/fr/web/api/css_object_model/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: CSS Object Model -slug: Web/API/CSS_Object_Model -tags: - - API - - CSSOM - - Reference -translation_of: Web/API/CSS_Object_Model ---- -

{{DefaultAPISidebar('CSSOM')}}

- -

Le CSS Object Model est un ensemble d’API permettant de manipuler le CSS depuis JavaScript. C’est l’équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement.

- -

Référence

- -
    -
  • {{domxref("AnimationEvent")}}
    • -
  • {{domxref("CaretPosition")}}
    • -
  • {{domxref("CSS")}}
    • -
  • {{domxref("CSSCharsetRule")}}
    • -
  • {{domxref("CSSConditionRule")}}
    • -
  • {{domxref("CSSCounterStyleRule")}}
    • -
  • {{domxref("CSSFontFaceRule")}}
    • -
  • {{domxref("CSSFontFeatureValuesMap")}}
    • -
  • {{domxref("CSSFontFeatureValuesRule")}}
    • -
  • {{domxref("CSSGroupingRule")}}
    • -
  • {{domxref("CSSImportRule")}}
    • -
  • {{domxref("CSSKeyframeRule")}}
    • -
  • {{domxref("CSSKeyframesRule")}}
    • -
  • {{domxref("CSSMarginRule")}}
    • -
  • {{domxref("CSSMediaRule")}}
    • -
  • {{domxref("CSSNamespaceRule")}}
    • -
  • {{domxref("CSSPageRule")}}
    • -
  • {{domxref("CSSRule")}}
    • -
  • {{domxref("CSSRuleList")}}
    • -
  • {{domxref("CSSStylesheet")}}
    • -
  • {{domxref("CSSStyleDeclaration")}}
    • -
  • {{domxref("CSSSupportsRule")}}
    • -
  • {{domxref("CSSVariablesMap")}}
    • -
  • {{domxref("CSSViewportRule")}}
    • -
  • {{domxref("ElementCSSInlineStyle")}}
    • -
  • {{domxref("GeometryUtils")}}
    • -
  • {{domxref("GetStyleUtils")}}
    • -
  • {{domxref("LinkStyle")}}
    • -
  • {{domxref("MediaList")}}
    • -
  • {{domxref("MediaQueryList")}}
    • -
  • {{domxref("PseudoElement")}}
    • -
  • {{domxref("Screen")}}
    • -
  • {{domxref("Stylesheet")}}
    • -
  • {{domxref("StylesheetList")}}
    • -
  • {{domxref("TransitionEvent")}}
    • -
- -

Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}.

- -

Tutoriels

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("CSSOM")}}{{Spec2("CSSOM")}} 
{{SpecName("CSSOM View")}}{{Spec2("CSSOM View")}} 
{{SpecName("Screen Orientation")}}{{Spec2("Screen Orientation")}} 
{{SpecName("CSS3 Fonts")}}{{Spec2("CSS3 Fonts")}} 
{{SpecName("CSS3 Animations")}}{{Spec2("CSS3 Animations")}} 
{{SpecName("CSS3 Transitions")}}{{Spec2("CSS3 Transitions")}} 
{{SpecName("CSS3 Variables")}}{{Spec2("CSS3 Variables")}} 
{{SpecName("CSS3 Conditional")}}{{Spec2("CSS3 Conditional")}} 
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}} 
{{SpecName("CSS3 Counter Styles")}}{{Spec2("CSS3 Counter Styles")}} 
- -

Notes sur la compatibilité des navigateurs

- -

Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités.

diff --git a/files/fr/web/api/css_object_model/index.md b/files/fr/web/api/css_object_model/index.md new file mode 100644 index 0000000000..ae59f591a9 --- /dev/null +++ b/files/fr/web/api/css_object_model/index.md @@ -0,0 +1,127 @@ +--- +title: CSS Object Model +slug: Web/API/CSS_Object_Model +tags: + - API + - CSSOM + - Reference +translation_of: Web/API/CSS_Object_Model +--- +

{{DefaultAPISidebar('CSSOM')}}

+ +

Le CSS Object Model est un ensemble d’API permettant de manipuler le CSS depuis JavaScript. C’est l’équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement.

+ +

Référence

+ +
    +
  • {{domxref("AnimationEvent")}}
    • +
  • {{domxref("CaretPosition")}}
    • +
  • {{domxref("CSS")}}
    • +
  • {{domxref("CSSCharsetRule")}}
    • +
  • {{domxref("CSSConditionRule")}}
    • +
  • {{domxref("CSSCounterStyleRule")}}
    • +
  • {{domxref("CSSFontFaceRule")}}
    • +
  • {{domxref("CSSFontFeatureValuesMap")}}
    • +
  • {{domxref("CSSFontFeatureValuesRule")}}
    • +
  • {{domxref("CSSGroupingRule")}}
    • +
  • {{domxref("CSSImportRule")}}
    • +
  • {{domxref("CSSKeyframeRule")}}
    • +
  • {{domxref("CSSKeyframesRule")}}
    • +
  • {{domxref("CSSMarginRule")}}
    • +
  • {{domxref("CSSMediaRule")}}
    • +
  • {{domxref("CSSNamespaceRule")}}
    • +
  • {{domxref("CSSPageRule")}}
    • +
  • {{domxref("CSSRule")}}
    • +
  • {{domxref("CSSRuleList")}}
    • +
  • {{domxref("CSSStylesheet")}}
    • +
  • {{domxref("CSSStyleDeclaration")}}
    • +
  • {{domxref("CSSSupportsRule")}}
    • +
  • {{domxref("CSSVariablesMap")}}
    • +
  • {{domxref("CSSViewportRule")}}
    • +
  • {{domxref("ElementCSSInlineStyle")}}
    • +
  • {{domxref("GeometryUtils")}}
    • +
  • {{domxref("GetStyleUtils")}}
    • +
  • {{domxref("LinkStyle")}}
    • +
  • {{domxref("MediaList")}}
    • +
  • {{domxref("MediaQueryList")}}
    • +
  • {{domxref("PseudoElement")}}
    • +
  • {{domxref("Screen")}}
    • +
  • {{domxref("Stylesheet")}}
    • +
  • {{domxref("StylesheetList")}}
    • +
  • {{domxref("TransitionEvent")}}
    • +
+ +

Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}.

+ +

Tutoriels

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSSOM")}}{{Spec2("CSSOM")}} 
{{SpecName("CSSOM View")}}{{Spec2("CSSOM View")}} 
{{SpecName("Screen Orientation")}}{{Spec2("Screen Orientation")}} 
{{SpecName("CSS3 Fonts")}}{{Spec2("CSS3 Fonts")}} 
{{SpecName("CSS3 Animations")}}{{Spec2("CSS3 Animations")}} 
{{SpecName("CSS3 Transitions")}}{{Spec2("CSS3 Transitions")}} 
{{SpecName("CSS3 Variables")}}{{Spec2("CSS3 Variables")}} 
{{SpecName("CSS3 Conditional")}}{{Spec2("CSS3 Conditional")}} 
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}} 
{{SpecName("CSS3 Counter Styles")}}{{Spec2("CSS3 Counter Styles")}} 
+ +

Notes sur la compatibilité des navigateurs

+ +

Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités.

diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.html b/files/fr/web/api/css_object_model/managing_screen_orientation/index.html deleted file mode 100644 index 73406a99b5..0000000000 --- a/files/fr/web/api/css_object_model/managing_screen_orientation/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Gérer l'orientation de l'écran -slug: Web/API/CSS_Object_Model/Managing_screen_orientation -tags: - - Avancé - - CSSOM View - - Guide - - Screen Orientation -translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation ---- -

{{SeeCompatTable}}{{APIRef}}

- -

Sommaire

- -

L'orientation de l'écran est quelque chose de légèrement différent de l'orientation de l'appareil. Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.

- -

Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:

- -
    -
  • La première est la media query orientation. Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).
    • -
  • La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.
    • -
- -

Ajuster la mise en page selon l'orientation

- -

Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement.

- -

Prenons pour exemple le code HTML suivant:

- -
<ul id="toolbar">
-  <li>A</li>
-  <li>B</li>
-  <li>C</li>
-</ul>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
-
- -

Le CSS s'appuie sur une media query orientation pour gérer les styles spécifiques liés à l'orientation de l'écran.

- -
/* D'abord, on définit les styles communs */
-
-html, body {
-  width : 100%;
-  height: 100%;
-}
-
-body {
-  border: 1px solid black;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-p {
-  font   : 1em sans-serif;
-  margin : 0;
-  padding: .5em;
-}
-
-ul {
-  list-style: none;
-
-  font   : 1em monospace;
-  margin : 0;
-  padding: .5em;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  background: black;
-}
-
-li {
-  display: inline-block;
-  margin : 0;
-  padding: 0.5em;
-  background: white;
-}
-
- -

Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation.

- -
/* En mode portrait, on veut la barre d'outils en haut */
-
-@media screen and (orientation: portrait) {
-  #toolbar {
-    width: 100%;
-  }
-}
-
-/* En mode paysage, on veut la barre d'outils à gauche */
-
-@media screen and (orientation: landscape) {
-  #toolbar {
-    position: fixed;
-    width: 2.65em;
-    height: 100%;
-  }
-
-  p {
-    margin-left: 2em;
-  }
-
-  li + li {
-    margin-top: .5em;
-  }
-}
-
- -

Et voici le résultat:

- - - - - - - - - - - - - - -
PortraitLandscape
{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 180, 350) }}{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 350, 180) }}
- -
-

Note: La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil.

-
- -

Verrouiller l'orientation de l'écran

- -
-

Attention : Cette API est expérimentale et est actuellement disponible sur Firefox OS et Firefox pour Android avec le préfixe moz, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe ms.

-
- -

Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.

- -

L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.

- -

Écouter les changements d'orientation

- -

L'événement {{event("orientationchange")}} est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété {{domxref("Screen.orientation")}}.

- -
screen.addEventListener("orientationchange", function () {
-  console.log("The orientation of the screen is: " + screen.orientation);
-});
-
- -

Empêcher le changement d'orientation

- -

Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}.

- -

{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, landscape (Voir {{domxref("Screen.lockOrientation")}}  pour en savoir plus sur ces valeurs).

- -
screen.lockOrientation('landscape');
- -
-

Note: Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à landscape et l'application B est verrouillée à portrait, passer de l'application A à B ou à A ne va pas déclencher un événement {{event("orientationchange")}} parce que les deux applications gardent l'orientation qu'elles avaient.

- -

En revanche, verrouiller l'orientation peut décléncher l'événement {{event("orientationchange")}} si l'orientation a dû être changée pour satisfaire aux critères du verrouillage.

-
- -

Firefox OS et Android: Verrouiller l'orientation avec le manifeste

- -

Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ orientation dans le fichier manifeste de votre application, par exemple:

- -
"orientation": "portrait"
- -

Voir aussi

- - diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md new file mode 100644 index 0000000000..73406a99b5 --- /dev/null +++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md @@ -0,0 +1,180 @@ +--- +title: Gérer l'orientation de l'écran +slug: Web/API/CSS_Object_Model/Managing_screen_orientation +tags: + - Avancé + - CSSOM View + - Guide + - Screen Orientation +translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +--- +

{{SeeCompatTable}}{{APIRef}}

+ +

Sommaire

+ +

L'orientation de l'écran est quelque chose de légèrement différent de l'orientation de l'appareil. Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.

+ +

Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:

+ +
    +
  • La première est la media query orientation. Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).
    • +
  • La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.
    • +
+ +

Ajuster la mise en page selon l'orientation

+ +

Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement.

+ +

Prenons pour exemple le code HTML suivant:

+ +
<ul id="toolbar">
+  <li>A</li>
+  <li>B</li>
+  <li>C</li>
+</ul>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
+
+ +

Le CSS s'appuie sur une media query orientation pour gérer les styles spécifiques liés à l'orientation de l'écran.

+ +
/* D'abord, on définit les styles communs */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+
+ +

Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation.

+ +
/* En mode portrait, on veut la barre d'outils en haut */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* En mode paysage, on veut la barre d'outils à gauche */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+
+ +

Et voici le résultat:

+ + + + + + + + + + + + + + +
PortraitLandscape
{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 180, 350) }}{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 350, 180) }}
+ +
+

Note: La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil.

+
+ +

Verrouiller l'orientation de l'écran

+ +
+

Attention : Cette API est expérimentale et est actuellement disponible sur Firefox OS et Firefox pour Android avec le préfixe moz, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe ms.

+
+ +

Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.

+ +

L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.

+ +

Écouter les changements d'orientation

+ +

L'événement {{event("orientationchange")}} est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété {{domxref("Screen.orientation")}}.

+ +
screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + screen.orientation);
+});
+
+ +

Empêcher le changement d'orientation

+ +

Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}.

+ +

{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, landscape (Voir {{domxref("Screen.lockOrientation")}}  pour en savoir plus sur ces valeurs).

+ +
screen.lockOrientation('landscape');
+ +
+

Note: Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à landscape et l'application B est verrouillée à portrait, passer de l'application A à B ou à A ne va pas déclencher un événement {{event("orientationchange")}} parce que les deux applications gardent l'orientation qu'elles avaient.

+ +

En revanche, verrouiller l'orientation peut décléncher l'événement {{event("orientationchange")}} si l'orientation a dû être changée pour satisfaire aux critères du verrouillage.

+
+ +

Firefox OS et Android: Verrouiller l'orientation avec le manifeste

+ +

Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ orientation dans le fichier manifeste de votre application, par exemple:

+ +
"orientation": "portrait"
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/css_properties_and_values_api/index.html b/files/fr/web/api/css_properties_and_values_api/index.html deleted file mode 100644 index 639f947c8c..0000000000 --- a/files/fr/web/api/css_properties_and_values_api/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: CSS Properties and Values API (Propriétés et valeurs) -slug: Web/API/CSS_Properties_and_Values_API -translation_of: 'Web/API/CSS_Properties_and_Values_API' ---- -

{{SeeCompatTable}} L'API Propriétés et valeurs CSS — qui fait partie de l'ensemble d'API CSS Houdini — sert à définir explicitement des propriétés CSS personnalisées, ce qui permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non.

- -

Interfaces

- -
-
{{domxref('CSS.registerProperty')}}
-
Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait en JavaScript via {{domxref('CSS.registerProperty')}}.
-
{{cssxref('@property')}}
-
Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait à l'aide d'une règle at-rule {{cssxref('@property')}} en CSS.
-
- -

Exemples

- -

L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en JavaScript pour typer une propriété CSS personnalisée, --ma-couleur en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur :

- -
window.CSS.registerProperty({
-  name: '--ma-couleur',
-  syntax: '<color>',
-  inherits: false,
-  initialValue: '#c0ffee',
-});
-
- -

Le même enregistrement peut se faire en CSS en utilisant la règle at-rule {{cssxref('@property')}} :

- -
@property --ma-couleur {
-  syntax: '<color>';
-  inherits: false;
-  initial-value: #c0ffee;
-}
-
- -

Spécifications

- -

{{Specifications("api.CSS.registerProperty")}}

- -

Compatibilité des navigateurs

- -

Voir les interfaces individuelles

- -

Voir aussi

- - diff --git a/files/fr/web/api/css_properties_and_values_api/index.md b/files/fr/web/api/css_properties_and_values_api/index.md new file mode 100644 index 0000000000..639f947c8c --- /dev/null +++ b/files/fr/web/api/css_properties_and_values_api/index.md @@ -0,0 +1,52 @@ +--- +title: CSS Properties and Values API (Propriétés et valeurs) +slug: Web/API/CSS_Properties_and_Values_API +translation_of: 'Web/API/CSS_Properties_and_Values_API' +--- +

{{SeeCompatTable}} L'API Propriétés et valeurs CSS — qui fait partie de l'ensemble d'API CSS Houdini — sert à définir explicitement des propriétés CSS personnalisées, ce qui permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non.

+ +

Interfaces

+ +
+
{{domxref('CSS.registerProperty')}}
+
Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait en JavaScript via {{domxref('CSS.registerProperty')}}.
+
{{cssxref('@property')}}
+
Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait à l'aide d'une règle at-rule {{cssxref('@property')}} en CSS.
+
+ +

Exemples

+ +

L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en JavaScript pour typer une propriété CSS personnalisée, --ma-couleur en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur :

+ +
window.CSS.registerProperty({
+  name: '--ma-couleur',
+  syntax: '<color>',
+  inherits: false,
+  initialValue: '#c0ffee',
+});
+
+ +

Le même enregistrement peut se faire en CSS en utilisant la règle at-rule {{cssxref('@property')}} :

+ +
@property --ma-couleur {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: #c0ffee;
+}
+
+ +

Spécifications

+ +

{{Specifications("api.CSS.registerProperty")}}

+ +

Compatibilité des navigateurs

+ +

Voir les interfaces individuelles

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/cssmediarule/index.html b/files/fr/web/api/cssmediarule/index.html deleted file mode 100644 index dfcbb83536..0000000000 --- a/files/fr/web/api/cssmediarule/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: CSSMediaRule -slug: Web/API/CSSMediaRule -tags: - - API - - CSSOM - - Interface - - Reference -translation_of: Web/API/CSSMediaRule ---- -
{{APIRef("CSSOM")}}
- -

L'interface CSSMediaRule représente une seule règle CSS {{cssxref("@media")}}. Elle met en œuvre l'interface {{domxref("CSSConditionRule")}}, et donc l'interface {{domxref("CSSGroupingRule")}} et l'interface {{domxref("CSSRule")}} avec une valeur de type 4 (CSSRule.MEDIA_RULE).

- -

Syntaxe

- -

La syntaxe est décrite en utilisant le format WebIDL.

- -
interface CSSMediaRule : CSSConditionRule {
-    readonly attribute MediaList media;
-}
-
- -

Propriétés

- -

En tant que {{domxref("CSSConditionRule")}}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, CSSMediaRule implémente également les propriétés de ces interfaces. Elle a la propriété spécifique suivante :

- -
-
{{domxref("CSSMediaRule.media")}} {{readonlyinline}}
-
Spécifie un {{domxref("MediaList")}} représentant le support de destination prévu pour les informations de style.
-
- -

Méthodes

- -

En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, CSSMediaRule met également en œuvre les méthodes de cette interface. Elle n'a pas de méthodes spécifiques.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }}{{ Spec2('CSS3 Conditional')}}Dérivé de la règle  {{domxref("CSSConditionRule")}}.
{{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}{{ Spec2('CSSOM') }}Aucun changement par rapport à {{SpecName('DOM2 Style')}}
{{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}{{ Spec2('DOM2 Style') }}
- -

Compatibilité des navigateurs

- -

{{Compat("api.CSSMediaRule")}}

diff --git a/files/fr/web/api/cssmediarule/index.md b/files/fr/web/api/cssmediarule/index.md new file mode 100644 index 0000000000..dfcbb83536 --- /dev/null +++ b/files/fr/web/api/cssmediarule/index.md @@ -0,0 +1,68 @@ +--- +title: CSSMediaRule +slug: Web/API/CSSMediaRule +tags: + - API + - CSSOM + - Interface + - Reference +translation_of: Web/API/CSSMediaRule +--- +
{{APIRef("CSSOM")}}
+ +

L'interface CSSMediaRule représente une seule règle CSS {{cssxref("@media")}}. Elle met en œuvre l'interface {{domxref("CSSConditionRule")}}, et donc l'interface {{domxref("CSSGroupingRule")}} et l'interface {{domxref("CSSRule")}} avec une valeur de type 4 (CSSRule.MEDIA_RULE).

+ +

Syntaxe

+ +

La syntaxe est décrite en utilisant le format WebIDL.

+ +
interface CSSMediaRule : CSSConditionRule {
+    readonly attribute MediaList media;
+}
+
+ +

Propriétés

+ +

En tant que {{domxref("CSSConditionRule")}}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, CSSMediaRule implémente également les propriétés de ces interfaces. Elle a la propriété spécifique suivante :

+ +
+
{{domxref("CSSMediaRule.media")}} {{readonlyinline}}
+
Spécifie un {{domxref("MediaList")}} représentant le support de destination prévu pour les informations de style.
+
+ +

Méthodes

+ +

En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, CSSMediaRule met également en œuvre les méthodes de cette interface. Elle n'a pas de méthodes spécifiques.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }}{{ Spec2('CSS3 Conditional')}}Dérivé de la règle  {{domxref("CSSConditionRule")}}.
{{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}{{ Spec2('CSSOM') }}Aucun changement par rapport à {{SpecName('DOM2 Style')}}
{{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}{{ Spec2('DOM2 Style') }}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CSSMediaRule")}}

diff --git a/files/fr/web/api/cssrulelist/index.html b/files/fr/web/api/cssrulelist/index.html deleted file mode 100644 index 86f5f4cc8a..0000000000 --- a/files/fr/web/api/cssrulelist/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: CSSRuleList -slug: Web/API/CSSRuleList -tags: - - CSSOM - - DOM -translation_of: Web/API/CSSRuleList ---- -

{{ APIRef("CSSOM") }}

- -

A CSSRuleList est un objet de type tableau contenant une collection ordonnée d'objects CSSRule.

- -

Description

- -

Chaque règle CSSRule peut être atteinte via rules.item(index), ou simplement rules[index], où rules est un objet implementant l'interface  CSSRuleList, et index est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est rules.length.

- -

Exemple

- -
// récuperer la première règle de la première feuille de style
-var firstRule = document.styleSheets[0].cssRules[0];
-
- -

Voir aussi

- - - -

Implémentations de CSSRuleList

- -

Il existe plusieurs propriétés dans le CSSOM qui retourne une CSSRuleList :

- -
    -
  • {{ domxref("CSSStyleSheet") }} property {{ domxref("CSSStyleSheet/cssRules", "cssRules") }}
    • -
  • {{ domxref("CSSMediaRule") }} property {{ domxref("CSSMediaRule/cssRules", "cssRules") }}
    • -
  • {{ domxref("CSSKeyframesRule") }} property {{ domxref("CSSKeyframesRule/cssRules", "cssRules") }}
    • -
  • {{ domxref("CSSMozDocumentRule") }} property {{ domxref("CSSMozDocumentRule/cssRules", "cssRules") }}
    • -
- -

Spécification

- - diff --git a/files/fr/web/api/cssrulelist/index.md b/files/fr/web/api/cssrulelist/index.md new file mode 100644 index 0000000000..86f5f4cc8a --- /dev/null +++ b/files/fr/web/api/cssrulelist/index.md @@ -0,0 +1,47 @@ +--- +title: CSSRuleList +slug: Web/API/CSSRuleList +tags: + - CSSOM + - DOM +translation_of: Web/API/CSSRuleList +--- +

{{ APIRef("CSSOM") }}

+ +

A CSSRuleList est un objet de type tableau contenant une collection ordonnée d'objects CSSRule.

+ +

Description

+ +

Chaque règle CSSRule peut être atteinte via rules.item(index), ou simplement rules[index], où rules est un objet implementant l'interface  CSSRuleList, et index est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est rules.length.

+ +

Exemple

+ +
// récuperer la première règle de la première feuille de style
+var firstRule = document.styleSheets[0].cssRules[0];
+
+ +

Voir aussi

+ + + +

Implémentations de CSSRuleList

+ +

Il existe plusieurs propriétés dans le CSSOM qui retourne une CSSRuleList :

+ +
    +
  • {{ domxref("CSSStyleSheet") }} property {{ domxref("CSSStyleSheet/cssRules", "cssRules") }}
    • +
  • {{ domxref("CSSMediaRule") }} property {{ domxref("CSSMediaRule/cssRules", "cssRules") }}
    • +
  • {{ domxref("CSSKeyframesRule") }} property {{ domxref("CSSKeyframesRule/cssRules", "cssRules") }}
    • +
  • {{ domxref("CSSMozDocumentRule") }} property {{ domxref("CSSMozDocumentRule/cssRules", "cssRules") }}
    • +
+ +

Spécification

+ + diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.html b/files/fr/web/api/cssstyledeclaration/csstext/index.html deleted file mode 100644 index e8b9d228ae..0000000000 --- a/files/fr/web/api/cssstyledeclaration/csstext/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: CSSStyleDeclaration.cssText -slug: Web/API/CSSStyleDeclaration/cssText -translation_of: Web/API/CSSStyleDeclaration/cssText ---- -

A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRule.cssText")}}.

- -
{{APIRef("CSSOM") }}
- -

cssText retourne ou définit seulement le texte de la déclaration de style inline de l'élément. Pour pouvoir définir dynamiquement une règle d'une stylesheet, voir Utilisation d'informations de mise en forme dynamiques.

- -

Syntaxe

- -
chaine = elem.style.cssText
-
- -

Exemple

- -
<span id="s1" style="color: red;">
-Du texte
-</span>
-
-<script>
-  var elem = document.getElementById("s1");
-  alert(elem.style.cssText); // "color: red;"
-</script>
-
- -

Spécification

- - diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.md b/files/fr/web/api/cssstyledeclaration/csstext/index.md new file mode 100644 index 0000000000..e8b9d228ae --- /dev/null +++ b/files/fr/web/api/cssstyledeclaration/csstext/index.md @@ -0,0 +1,33 @@ +--- +title: CSSStyleDeclaration.cssText +slug: Web/API/CSSStyleDeclaration/cssText +translation_of: Web/API/CSSStyleDeclaration/cssText +--- +

A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRule.cssText")}}.

+ +
{{APIRef("CSSOM") }}
+ +

cssText retourne ou définit seulement le texte de la déclaration de style inline de l'élément. Pour pouvoir définir dynamiquement une règle d'une stylesheet, voir Utilisation d'informations de mise en forme dynamiques.

+ +

Syntaxe

+ +
chaine = elem.style.cssText
+
+ +

Exemple

+ +
<span id="s1" style="color: red;">
+Du texte
+</span>
+
+<script>
+  var elem = document.getElementById("s1");
+  alert(elem.style.cssText); // "color: red;"
+</script>
+
+ +

Spécification

+ + diff --git a/files/fr/web/api/cssstyledeclaration/index.html b/files/fr/web/api/cssstyledeclaration/index.html deleted file mode 100644 index e9169825d9..0000000000 --- a/files/fr/web/api/cssstyledeclaration/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: CSSStyleDeclaration -slug: Web/API/CSSStyleDeclaration -tags: - - API - - CSSOM - - Interface - - NeedsCompatTable - - NeedsMarkupWork - - Reference -translation_of: Web/API/CSSStyleDeclaration ---- -

{{ APIRef("CSSOM") }}

- -

CSSStyleDeclaration représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API :

- -
    -
  • {{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (<elem style="...">) ;
    • -
  • (AFAIRE : à reformuler) est une interface avec le declaration block renvoyé par la propriété style d'une cssRule dans une feuille de style, lorsque la règle est une CSSStyleRule ;
    • -
  • CSSStyleDeclaration est également une interface en lecture seule pour le résultat de window.getComputedStyle().
    • -
- -

Attributs

- -
-
{{domxref("CSSStyleDeclaration.cssText")}}
-
Représentation textuelle du bloc de déclaration. La définition de cet attribut modifie le style.
-
{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}
-
Le nombre de propriétés. Voir la méthode {{domxref("CSSStyleDeclaration.item",'item()')}} ci-dessous.
-
{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}
-
Le contenant {{domxref("CSSRule")}}.
-
- -

Méthodes

- -
-
{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}
-
Retourne la priorité facultative "important".
-
{{domxref("CSSStyleDeclaration.getPropertyValue()")}}
-
Retourne la valeur de la propriété avec un nom de propriété.
-
{{domxref("CSSStyleDeclaration.item()")}}
-
Retourne un nom de propriété.
-
{{domxref("CSSStyleDeclaration.removeProperty()")}}
-
Supprime une propriété du bloc de déclaration CSS.
-
{{domxref("CSSStyleDeclaration.setProperty()")}}
-
Modifie une propriété CSS existante ou crée une nouvelle propriété CSS dans le bloc de déclaration.
-
{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}
-
Uniquement supporté via getComputedStyle dans Firefox. Retourne la valeur de la propriété en tant que {{domxref("CSSPrimitiveValue")}} ou null pour les propriétés raccourcies.
-
- -

Exemple

- -
var objStyle = document.styleSheets[0].cssRules[0].style;
-console.log(objStyle.cssText);
-
-for (var i = objStyle.length; i--;) {
-  var chaineNom = objStyle[i];
-  objStyle.removeProperty(chaineNom);
-}
-
-console.log(objStyle.cssText);
- -

Notes

- -

Le bloc de déclaration est la partie de la règle de mise en forme qui apparaît dans les accolades et qui fournit les définitions de mise en forme (pour le sélecteur, la partie qui précède les accolades).

- -

Voir aussi

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}{{Spec2('CSSOM')}} 
{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}{{Spec2('DOM2 Style')}}Définition initiale.
diff --git a/files/fr/web/api/cssstyledeclaration/index.md b/files/fr/web/api/cssstyledeclaration/index.md new file mode 100644 index 0000000000..e9169825d9 --- /dev/null +++ b/files/fr/web/api/cssstyledeclaration/index.md @@ -0,0 +1,95 @@ +--- +title: CSSStyleDeclaration +slug: Web/API/CSSStyleDeclaration +tags: + - API + - CSSOM + - Interface + - NeedsCompatTable + - NeedsMarkupWork + - Reference +translation_of: Web/API/CSSStyleDeclaration +--- +

{{ APIRef("CSSOM") }}

+ +

CSSStyleDeclaration représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API :

+ +
    +
  • {{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (<elem style="...">) ;
    • +
  • (AFAIRE : à reformuler) est une interface avec le declaration block renvoyé par la propriété style d'une cssRule dans une feuille de style, lorsque la règle est une CSSStyleRule ;
    • +
  • CSSStyleDeclaration est également une interface en lecture seule pour le résultat de window.getComputedStyle().
    • +
+ +

Attributs

+ +
+
{{domxref("CSSStyleDeclaration.cssText")}}
+
Représentation textuelle du bloc de déclaration. La définition de cet attribut modifie le style.
+
{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}
+
Le nombre de propriétés. Voir la méthode {{domxref("CSSStyleDeclaration.item",'item()')}} ci-dessous.
+
{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}
+
Le contenant {{domxref("CSSRule")}}.
+
+ +

Méthodes

+ +
+
{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}
+
Retourne la priorité facultative "important".
+
{{domxref("CSSStyleDeclaration.getPropertyValue()")}}
+
Retourne la valeur de la propriété avec un nom de propriété.
+
{{domxref("CSSStyleDeclaration.item()")}}
+
Retourne un nom de propriété.
+
{{domxref("CSSStyleDeclaration.removeProperty()")}}
+
Supprime une propriété du bloc de déclaration CSS.
+
{{domxref("CSSStyleDeclaration.setProperty()")}}
+
Modifie une propriété CSS existante ou crée une nouvelle propriété CSS dans le bloc de déclaration.
+
{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}
+
Uniquement supporté via getComputedStyle dans Firefox. Retourne la valeur de la propriété en tant que {{domxref("CSSPrimitiveValue")}} ou null pour les propriétés raccourcies.
+
+ +

Exemple

+ +
var objStyle = document.styleSheets[0].cssRules[0].style;
+console.log(objStyle.cssText);
+
+for (var i = objStyle.length; i--;) {
+  var chaineNom = objStyle[i];
+  objStyle.removeProperty(chaineNom);
+}
+
+console.log(objStyle.cssText);
+ +

Notes

+ +

Le bloc de déclaration est la partie de la règle de mise en forme qui apparaît dans les accolades et qui fournit les définitions de mise en forme (pour le sélecteur, la partie qui précède les accolades).

+ +

Voir aussi

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}{{Spec2('CSSOM')}} 
{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}{{Spec2('DOM2 Style')}}Définition initiale.
diff --git a/files/fr/web/api/cssstylerule/index.html b/files/fr/web/api/cssstylerule/index.html deleted file mode 100644 index 01f85ea178..0000000000 --- a/files/fr/web/api/cssstylerule/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: CSSStyleRule -slug: Web/API/CSSStyleRule -translation_of: Web/API/CSSStyleRule ---- -

{{ APIRef("CSSOM") }}

- -

CSSStyleRule représente une règle de style CSS unique. Il implémente l'interface {{domxref ("CSSRule")}} avec une valeur de type 1 (CSSRule STYLE_RULE).

- -

Syntax

- -

La syntaxe est décrite à l'aide du format WebIDL.

- -
interface CSSStyleRule : CSSRule {
-    attribute DOMString selectorText;
-    readonly attribute CSSStyleDeclaration style;
-};
- -

Properties

- -
-
{{domxref("CSSStyleRule.selectorText")}}
-
Obtient la représentation textuelle du sélecteur pour cette règle, par exemple "H1, H2".
-
{{domxref("CSSStyleRule.style")}}
-
Retourne l'objet {{domxref("CSSStyleDeclaration")}} pour cette règle.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }}{{ Spec2('CSSOM') }}pas de changement
{{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }}{{ Spec2('DOM2 Style') }} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.CSSStyleRule")}}

diff --git a/files/fr/web/api/cssstylerule/index.md b/files/fr/web/api/cssstylerule/index.md new file mode 100644 index 0000000000..01f85ea178 --- /dev/null +++ b/files/fr/web/api/cssstylerule/index.md @@ -0,0 +1,54 @@ +--- +title: CSSStyleRule +slug: Web/API/CSSStyleRule +translation_of: Web/API/CSSStyleRule +--- +

{{ APIRef("CSSOM") }}

+ +

CSSStyleRule représente une règle de style CSS unique. Il implémente l'interface {{domxref ("CSSRule")}} avec une valeur de type 1 (CSSRule STYLE_RULE).

+ +

Syntax

+ +

La syntaxe est décrite à l'aide du format WebIDL.

+ +
interface CSSStyleRule : CSSRule {
+    attribute DOMString selectorText;
+    readonly attribute CSSStyleDeclaration style;
+};
+ +

Properties

+ +
+
{{domxref("CSSStyleRule.selectorText")}}
+
Obtient la représentation textuelle du sélecteur pour cette règle, par exemple "H1, H2".
+
{{domxref("CSSStyleRule.style")}}
+
Retourne l'objet {{domxref("CSSStyleDeclaration")}} pour cette règle.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }}{{ Spec2('CSSOM') }}pas de changement
{{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }}{{ Spec2('DOM2 Style') }} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CSSStyleRule")}}

diff --git a/files/fr/web/api/cssvalue/index.html b/files/fr/web/api/cssvalue/index.html deleted file mode 100644 index 871a2b70ce..0000000000 --- a/files/fr/web/api/cssvalue/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: CSSValue -slug: Web/API/CSSValue -tags: - - API - - DOM - - Interface - - Reference -translation_of: Web/API/CSSValue ---- -
{{APIRef ("DOM")}}
- -
L'interface CSSValue représente la valeur calculée actuelle d'une propriété CSS.
- -

Propriétés

- -
-
{{domxref("CSSValue.cssText")}}
-
-

Une {{domxref ("DOMString")}} représentant la valeur actuelle.

-
-
{{domxref("CSSValue.cssValueType")}} {{readonlyInline}}
-
Un raccourci non signé ( unsigned short ) représentant un code définissant le type de valeur. Les valeurs possibles sont: - - - - - - - - - - - - - - - - - - - - - - - -
ConstantDescription
CSS_CUSTOM -

La valeur est une valeur personnalisée.

-
CSS_INHERITLa valeur est héritée et cssText contient "inherit".
CSS_PRIMITIVE_VALUELa valeur est une valeur primitive et une instance de l'interface {{domxref ("CSSPrimitiveValue")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.
CSS_VALUE_LISTLa valeur est une liste CSSValue et une instance de l'interface {{domxref ("CSSValueList")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.
-
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}}{{Spec2('DOM2 Style')}}Définition initiale
- -

Compatibilité des navigateurs

- -
-
- - -

{{Compat("api.CSSValue")}}

-
- -

Voir aussi

-
- -
    -
  • {{domxref("CSSPrimitiveValue")}}
    • -
  • {{domxref("CSSValueList")}}
    • -
diff --git a/files/fr/web/api/cssvalue/index.md b/files/fr/web/api/cssvalue/index.md new file mode 100644 index 0000000000..871a2b70ce --- /dev/null +++ b/files/fr/web/api/cssvalue/index.md @@ -0,0 +1,85 @@ +--- +title: CSSValue +slug: Web/API/CSSValue +tags: + - API + - DOM + - Interface + - Reference +translation_of: Web/API/CSSValue +--- +
{{APIRef ("DOM")}}
+ +
L'interface CSSValue représente la valeur calculée actuelle d'une propriété CSS.
+ +

Propriétés

+ +
+
{{domxref("CSSValue.cssText")}}
+
+

Une {{domxref ("DOMString")}} représentant la valeur actuelle.

+
+
{{domxref("CSSValue.cssValueType")}} {{readonlyInline}}
+
Un raccourci non signé ( unsigned short ) représentant un code définissant le type de valeur. Les valeurs possibles sont: + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
CSS_CUSTOM +

La valeur est une valeur personnalisée.

+
CSS_INHERITLa valeur est héritée et cssText contient "inherit".
CSS_PRIMITIVE_VALUELa valeur est une valeur primitive et une instance de l'interface {{domxref ("CSSPrimitiveValue")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.
CSS_VALUE_LISTLa valeur est une liste CSSValue et une instance de l'interface {{domxref ("CSSValueList")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}}{{Spec2('DOM2 Style')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
+
+ + +

{{Compat("api.CSSValue")}}

+
+ +

Voir aussi

+
+ +
    +
  • {{domxref("CSSPrimitiveValue")}}
    • +
  • {{domxref("CSSValueList")}}
    • +
diff --git a/files/fr/web/api/cssvaluelist/index.html b/files/fr/web/api/cssvaluelist/index.html deleted file mode 100644 index cb78129d96..0000000000 --- a/files/fr/web/api/cssvaluelist/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: CSSValueList -slug: Web/API/CSSValueList -tags: - - API - - CSSValueList - - DOM - - Interface - - Reference -translation_of: Web/API/CSSValueList ---- -
{{APIRef("DOM")}}
- -

L'interface CSSValueList dérive de l'interface {{domxref("CSSValue")}} et fournit l'abstraction d'une collection ordonnée de valeurs CSS.

- -

Certaines propriétés autorisent une liste vide dans leur syntaxe. Dans ce cas, ces propriétés prennent l'identifiant none. Ainsi, une liste vide signifie que la propriété a une valeur none (aucune valeur).

- -

Les éléments dans CSSValueList sont accessibles par un index integral commençant à 0.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Hérite des propriétés de son parent {{domxref("CSSValue")}}.

- -
-
{{domxref("CSSValueList.length")}} {{readonlyInline}}
-
Un unsigned long représentant le nombre de CSSValues (valeurs CSS) dans la liste.
-
- -

Méthodes

- -
-
{{domxref("CSSValueList.item()")}}
-
Cette méthode est utilisée pour  récupérer une {{domxref("CSSValue")}} (valeur CSS) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie null.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM2 Style', 'css.html#CSS-CSSValuesList', 'CSSValuesList')}}{{Spec2('DOM2 Style')}}Définition initiale
- -

Compatibilité des navigateurs

- -
-
- - -

{{Compat("api.CSSValueList")}}

-
- -

Voir aussi

-
- -
    -
  • {{domxref("CSSPrimitiveValue")}}
    • -
  • {{domxref("CSSValue")}}
    • -
diff --git a/files/fr/web/api/cssvaluelist/index.md b/files/fr/web/api/cssvaluelist/index.md new file mode 100644 index 0000000000..cb78129d96 --- /dev/null +++ b/files/fr/web/api/cssvaluelist/index.md @@ -0,0 +1,70 @@ +--- +title: CSSValueList +slug: Web/API/CSSValueList +tags: + - API + - CSSValueList + - DOM + - Interface + - Reference +translation_of: Web/API/CSSValueList +--- +
{{APIRef("DOM")}}
+ +

L'interface CSSValueList dérive de l'interface {{domxref("CSSValue")}} et fournit l'abstraction d'une collection ordonnée de valeurs CSS.

+ +

Certaines propriétés autorisent une liste vide dans leur syntaxe. Dans ce cas, ces propriétés prennent l'identifiant none. Ainsi, une liste vide signifie que la propriété a une valeur none (aucune valeur).

+ +

Les éléments dans CSSValueList sont accessibles par un index integral commençant à 0.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Hérite des propriétés de son parent {{domxref("CSSValue")}}.

+ +
+
{{domxref("CSSValueList.length")}} {{readonlyInline}}
+
Un unsigned long représentant le nombre de CSSValues (valeurs CSS) dans la liste.
+
+ +

Méthodes

+ +
+
{{domxref("CSSValueList.item()")}}
+
Cette méthode est utilisée pour  récupérer une {{domxref("CSSValue")}} (valeur CSS) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie null.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM2 Style', 'css.html#CSS-CSSValuesList', 'CSSValuesList')}}{{Spec2('DOM2 Style')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
+
+ + +

{{Compat("api.CSSValueList")}}

+
+ +

Voir aussi

+
+ +
    +
  • {{domxref("CSSPrimitiveValue")}}
    • +
  • {{domxref("CSSValue")}}
    • +
diff --git a/files/fr/web/api/customevent/detail/index.html b/files/fr/web/api/customevent/detail/index.html deleted file mode 100644 index 17b2453a60..0000000000 --- a/files/fr/web/api/customevent/detail/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: CustomEvent.detail -slug: Web/API/CustomEvent/detail -tags: - - API - - DOM - - Propriétés - - Évènement personnalisé -translation_of: Web/API/CustomEvent/detail ---- -

{{APIRef("DOM")}}

- -

Le detail de la propriété en lecture seule de l'interface {{domxref("CustomEvent")}} renvoie toutes les données transmises lors de l'initialisation de l'évènement.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
 let myDetail = customEventInstance.detail;
- -

Valeur retournée

- -

Toute donnée initialisée avec l'évènement.

- -

Exemple

- -
// ajoute un écouteur d'évènement approprié
-obj.addEventListener("cat", function(e) { process(e.detail) });
-
-// crée et distribue l'évènement
-let event = new CustomEvent("cat", {
-  detail: {
-    hazcheeseburger: true
-  }
-});
-obj.dispatchEvent(event);
-
-// Retournera un objet contenant la propriété hazcheeseburger
-let myDetail = event.detail;
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-customeventinit-detail','detail')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.CustomEvent.detail")}}

- -

Voir aussi

- -
    -
  • {{domxref("CustomEvent")}}
    • -
- -

 

diff --git a/files/fr/web/api/customevent/detail/index.md b/files/fr/web/api/customevent/detail/index.md new file mode 100644 index 0000000000..17b2453a60 --- /dev/null +++ b/files/fr/web/api/customevent/detail/index.md @@ -0,0 +1,73 @@ +--- +title: CustomEvent.detail +slug: Web/API/CustomEvent/detail +tags: + - API + - DOM + - Propriétés + - Évènement personnalisé +translation_of: Web/API/CustomEvent/detail +--- +

{{APIRef("DOM")}}

+ +

Le detail de la propriété en lecture seule de l'interface {{domxref("CustomEvent")}} renvoie toutes les données transmises lors de l'initialisation de l'évènement.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
 let myDetail = customEventInstance.detail;
+ +

Valeur retournée

+ +

Toute donnée initialisée avec l'évènement.

+ +

Exemple

+ +
// ajoute un écouteur d'évènement approprié
+obj.addEventListener("cat", function(e) { process(e.detail) });
+
+// crée et distribue l'évènement
+let event = new CustomEvent("cat", {
+  detail: {
+    hazcheeseburger: true
+  }
+});
+obj.dispatchEvent(event);
+
+// Retournera un objet contenant la propriété hazcheeseburger
+let myDetail = event.detail;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-customeventinit-detail','detail')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.CustomEvent.detail")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("CustomEvent")}}
    • +
+ +

 

diff --git a/files/fr/web/api/customevent/index.html b/files/fr/web/api/customevent/index.html deleted file mode 100644 index 5fcc5dc9a1..0000000000 --- a/files/fr/web/api/customevent/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: CustomEvent -slug: Web/API/CustomEvent -tags: - - API - - DOM - - Interface - - Reference - - évènements -translation_of: Web/API/CustomEvent ---- -

{{APIRef("DOM")}}

- -

Les interfaces CustomEvent DOM sont des évènements initialisés par une application pour n'importe quel usage.

- -

{{AvailableInWorkers}}

- -

Constructeur

- -
-
{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
-
Crée un CustomEvent.
-
- -

Propriétés

- -
-
{{domxref("CustomEvent.detail")}} {{readonlyinline}}
-
Toute donnée transmise lors de l'initialisation de l'événement.
-
- -

Cette interface hérite des propriétés de son parent {{domxref("Event")}}:

- -

{{Page("/fr/docs/Web/API/Event", "Propriétés")}}

- -

Méthodes

- -
-
{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}
-
Initialise un objet CustomEvent. Si l'événement a déjà été distribué, cette méthode ne fait rien.
-
- -

Cette interface hérite les méthodes de son parent {{domxref("Event")}}:

- -

{{Page("/fr/docs/Web/API/Event", "Méthodes")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}Définition initial
- -

Compatibilité des navigateurs

- -

{{Compat("api.CustomEvent")}}

- -

Déclenchement à partir de code privilégié vers du code non-privilégié

- -

Lors du déclenchement d'un CustomEvent depuis du code privilégié (une extension, par exemple) vers du code non-privilégié (une page web par exemple), vous devez prendre en considération la sécurité. Firefox et les autres applications Gecko empêchent qu'un objet créé dans un contexte soit utilisé dans un autre, ce qui empêchera généralement les failles de sécurité, mais ces restrictions peuvent aussi empêcher votre code de s'executer comme prévu.

- -

Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même fenêtre que celle où vous déclencherez l'évenement.

- -
// doc est une référence au contenu du document
-function dispatchCustomEvent(doc) {
-  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
-  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
-  doc.dispatchEvent(myEvent);
-}
- -

Notez qu'exposer une fonction permettra au script de l'exécuter avec les privilèges qu'accorde Chrome ce qui peut ouvrir une faille de sécurité.

- -

Voir aussi

- - diff --git a/files/fr/web/api/customevent/index.md b/files/fr/web/api/customevent/index.md new file mode 100644 index 0000000000..5fcc5dc9a1 --- /dev/null +++ b/files/fr/web/api/customevent/index.md @@ -0,0 +1,91 @@ +--- +title: CustomEvent +slug: Web/API/CustomEvent +tags: + - API + - DOM + - Interface + - Reference + - évènements +translation_of: Web/API/CustomEvent +--- +

{{APIRef("DOM")}}

+ +

Les interfaces CustomEvent DOM sont des évènements initialisés par une application pour n'importe quel usage.

+ +

{{AvailableInWorkers}}

+ +

Constructeur

+ +
+
{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
+
Crée un CustomEvent.
+
+ +

Propriétés

+ +
+
{{domxref("CustomEvent.detail")}} {{readonlyinline}}
+
Toute donnée transmise lors de l'initialisation de l'événement.
+
+ +

Cette interface hérite des propriétés de son parent {{domxref("Event")}}:

+ +

{{Page("/fr/docs/Web/API/Event", "Propriétés")}}

+ +

Méthodes

+ +
+
{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}
+
Initialise un objet CustomEvent. Si l'événement a déjà été distribué, cette méthode ne fait rien.
+
+ +

Cette interface hérite les méthodes de son parent {{domxref("Event")}}:

+ +

{{Page("/fr/docs/Web/API/Event", "Méthodes")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}Définition initial
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.CustomEvent")}}

+ +

Déclenchement à partir de code privilégié vers du code non-privilégié

+ +

Lors du déclenchement d'un CustomEvent depuis du code privilégié (une extension, par exemple) vers du code non-privilégié (une page web par exemple), vous devez prendre en considération la sécurité. Firefox et les autres applications Gecko empêchent qu'un objet créé dans un contexte soit utilisé dans un autre, ce qui empêchera généralement les failles de sécurité, mais ces restrictions peuvent aussi empêcher votre code de s'executer comme prévu.

+ +

Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même fenêtre que celle où vous déclencherez l'évenement.

+ +
// doc est une référence au contenu du document
+function dispatchCustomEvent(doc) {
+  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+  doc.dispatchEvent(myEvent);
+}
+ +

Notez qu'exposer une fonction permettra au script de l'exécuter avec les privilèges qu'accorde Chrome ce qui peut ouvrir une faille de sécurité.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/customevent/initcustomevent/index.html b/files/fr/web/api/customevent/initcustomevent/index.html deleted file mode 100644 index 29dfb281d8..0000000000 --- a/files/fr/web/api/customevent/initcustomevent/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: CustomEvent.initCustomEvent() -slug: Web/API/CustomEvent/initCustomEvent -tags: - - API - - DOM - - Méthodes -translation_of: Web/API/CustomEvent/initCustomEvent ---- -

{{APIRef("DOM")}}{{deprecated_header}}

- -

La méthode CustomEvent.initCustomEvent() initialise un objet CustomEvent. Si l'évènement a déjà été distribué, cette méthode ne change rien.

- -

Les évènements initialisés par ce moyen doivent être créés avec la méthode {{domxref("Document.createEvent()")}}. Cette méthode doit être appelée pour définir l'évènement avant son envoi en utilisant {{domxref("EventTarget.dispatchEvent()") }}. Une fois l'évènement envoyé, la méthode ne fait rien.

- -
-

Attention : N'utilisez plus cette méthode car elle est dépréciée.

- -

À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page Création et déclenchement d'évènements donne plus d'informations sur la façon de les utiliser.

-
- -

Syntaxe

- -
event.initCustomEvent(type, canBubble, cancelable, detail);
-
- -

Paramètres

- -
-
type
-
est une {{domxref("DOMString")}} (chaîne de caractères) contenant le nom de l'évènement.
-
canBubble
-
est un {{jsxref("Boolean")}} (booléen) indiquant si l'événement passe à travers le DOM ou non.
-
cancelable
-
est un {{jsxref("Boolean")}} indiquant si l'événement est annulable.
-
detail
-
Les données transmises lors de l'initialisation de l'évènement.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}Définition initiale, mais déjà dépréciée au profit de l'utilisation d'un constructeur,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.CustomEvent.initCustomEvent")}}

- -

Voir aussi

- -
    -
  • {{domxref("CustomEvent")}}
    • -
  • Le constructeur à utiliser à la place de cette méthode obsolète : {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.
    • -
diff --git a/files/fr/web/api/customevent/initcustomevent/index.md b/files/fr/web/api/customevent/initcustomevent/index.md new file mode 100644 index 0000000000..29dfb281d8 --- /dev/null +++ b/files/fr/web/api/customevent/initcustomevent/index.md @@ -0,0 +1,70 @@ +--- +title: CustomEvent.initCustomEvent() +slug: Web/API/CustomEvent/initCustomEvent +tags: + - API + - DOM + - Méthodes +translation_of: Web/API/CustomEvent/initCustomEvent +--- +

{{APIRef("DOM")}}{{deprecated_header}}

+ +

La méthode CustomEvent.initCustomEvent() initialise un objet CustomEvent. Si l'évènement a déjà été distribué, cette méthode ne change rien.

+ +

Les évènements initialisés par ce moyen doivent être créés avec la méthode {{domxref("Document.createEvent()")}}. Cette méthode doit être appelée pour définir l'évènement avant son envoi en utilisant {{domxref("EventTarget.dispatchEvent()") }}. Une fois l'évènement envoyé, la méthode ne fait rien.

+ +
+

Attention : N'utilisez plus cette méthode car elle est dépréciée.

+ +

À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page Création et déclenchement d'évènements donne plus d'informations sur la façon de les utiliser.

+
+ +

Syntaxe

+ +
event.initCustomEvent(type, canBubble, cancelable, detail);
+
+ +

Paramètres

+ +
+
type
+
est une {{domxref("DOMString")}} (chaîne de caractères) contenant le nom de l'évènement.
+
canBubble
+
est un {{jsxref("Boolean")}} (booléen) indiquant si l'événement passe à travers le DOM ou non.
+
cancelable
+
est un {{jsxref("Boolean")}} indiquant si l'événement est annulable.
+
detail
+
Les données transmises lors de l'initialisation de l'évènement.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}Définition initiale, mais déjà dépréciée au profit de l'utilisation d'un constructeur,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.CustomEvent.initCustomEvent")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("CustomEvent")}}
    • +
  • Le constructeur à utiliser à la place de cette méthode obsolète : {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.
    • +
diff --git a/files/fr/web/api/datatransfer/cleardata/index.html b/files/fr/web/api/datatransfer/cleardata/index.html deleted file mode 100644 index c594fa95e7..0000000000 --- a/files/fr/web/api/datatransfer/cleardata/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: DataTransfer.clearData() -slug: Web/API/DataTransfer/clearData -tags: - - API - - HTML DOM - - Method - - Reference - - drag and drop -translation_of: Web/API/DataTransfer/clearData ---- -
{{APIRef("HTML Drag and Drop API")}}
- -

La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet.

- -
-

Note : Si cette méthode est appelée sans argument, ou que le format donné est une  {{domxref("DOMString","chaîne de caractères")}}  vide, les données de tous les formats seront retirées.

-
- -

Syntaxe

- -
void dataTransfer.clearData([format]);
-
- -

Paramètres

- -
-
format{{optional_inline}}
-
Une {{domxref("DOMString","chaîne de caractères")}} représentant le format de donnée à retirer.
-
- -

Valeur de retour

- -

Void.

- -

Exemple

- -

Cette exemple illustre l'utilisation des méthodes {{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} et {{domxref("DataTransfer.clearData()","clearData()")}} de l'objet {{domxref("DataTransfer")}}.

- -

HTML

- -
<span class="tweaked" id="source" draggable="true">
-  Sélectionnez cet élément, glissez-le et déposez-le dans la Zone de Dépose pour le déplacer.
-</span>
-<span class="tweaked" id="target">Zone de Dépose</span>
-<div>Status: <span id="status">Glissez pour démarrer</span></div>
-<div>Data is: <span id="data">non initialisé</span></div>
-
- -

CSS

- -
span.tweaked {
-  display: inline-block;
-  margin: 1em 0;
-  padding: 1em 2em;
-}
-
-#source {
-  color: blue;
-  border: 1px solid black;
-}
-
-#target {
-  border: 1px solid black;
-}
-
- -

JavaScript

- -
window.addEventListener('DOMContentLoaded', function () {
-  // Séléctionner les éléments HTML
-  var draggable = document.getElementById('source')
-  var dropable = document.getElementById('target')
-  var status = document.getElementById('status')
-  var data = document.getElementById('data')
-  var dropped = false
-
-  // Enregistrer les évènements
-  draggable.addEventListener('dragstart', dragStartHandler)
-  draggable.addEventListener('dragend', dragEndHandler)
-  dropable.addEventListener('dragover', dragOverHandler)
-  dropable.addEventListener('dragleave', dragLeaveHandler)
-  dropable.addEventListener('drop', dropHandler)
-
-  function dragStartHandler (event) {
-    status.innerHTML = 'Glisse en cours'
-
-    // Modifier la bordure de l'élément pour indiquer qu'une opération de glisse a démarré
-    event.currentTarget.style.border = '1px dashed blue'
-
-    // Définir le type et la donnée associée à l'opération de glisse (utilise l'ID de la cible de l'évènement pour la donnée)
-    event.dataTransfer.setData('text/plain', event.target.id)
-
-    data.innerHTML = event.dataTransfer.getData('text/plain')
-  }
-
-  function dragEndHandler (event) {
-    if (!dropped) {
-      status.innerHTML = 'Glisse annulée'
-    }
-
-    data.innerHTML = event.dataTransfer.getData('text/plain') || 'vide'
-
-    // Modifier la bordure de l'élément pour indiquer que l'opération de glisse n'est plus en cours
-    event.currentTarget.style.border = '1px solid black'
-
-    if (dropped) {
-      // Retirer tous les évènements enregistrés précédemment
-      draggable.removeEventListener('dragstart', dragStartHandler)
-      draggable.removeEventListener('dragend', dragEndHandler)
-      dropable.removeEventListener('dragover', dragOverHandler)
-      dropable.removeEventListener('dragleave', dragLeaveHandler)
-      dropable.removeEventListener('drop', dropHandler)
-    }
-  }
-
-  function dragOverHandler (event) {
-    status.innerHTML = 'Dépose disponible'
-
-    event.preventDefault()
-  }
-
-  function dragLeaveHandler (event) {
-    status.innerHTML = 'Glisse en cours (la dépose était disponible)'
-
-    event.preventDefault()
-  }
-
-  function dropHandler (event) {
-    dropped = true
-
-    status.innerHTML = 'Dépose effectuée'
-
-    event.preventDefault()
-
-    // Récupérer la donnée liée au type « text/plain »
-    var _data = event.dataTransfer.getData('text/plain')
-    var element = document.getElementById(_data)
-
-    // Insérer l'élément source de l'opération de glisse en tant que dernier enfant de l'élément cible de l'opération de dépose
-    event.target.appendChild(element)
-
-    // Modifier les styles CSS et le texte affiché
-    element.style.cssText = 'border: 1px solid black;display: block; color: red'
-    element.innerHTML = "J'suis dans la Zone de Dépose !"
-
-    // Effacer les données de TOUS les types liés à l'opération de glisse (car on n'a pas donné de paramètre)
-    event.dataTransfer.clearData()
-  }
-})
-
- -

{{EmbedLiveSample('Exemple', 300, 250)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}{{Spec2('HTML5.1')}}Définition initiale
- -

Compatibilité

- -

{{Compat("api.DataTransfer.clearData")}}

- -

À voir également

- -

{{page("/fr/docs/Web/API/DataTransfer", "See also")}}

diff --git a/files/fr/web/api/datatransfer/cleardata/index.md b/files/fr/web/api/datatransfer/cleardata/index.md new file mode 100644 index 0000000000..c594fa95e7 --- /dev/null +++ b/files/fr/web/api/datatransfer/cleardata/index.md @@ -0,0 +1,183 @@ +--- +title: DataTransfer.clearData() +slug: Web/API/DataTransfer/clearData +tags: + - API + - HTML DOM + - Method + - Reference + - drag and drop +translation_of: Web/API/DataTransfer/clearData +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet.

+ +
+

Note : Si cette méthode est appelée sans argument, ou que le format donné est une  {{domxref("DOMString","chaîne de caractères")}}  vide, les données de tous les formats seront retirées.

+
+ +

Syntaxe

+ +
void dataTransfer.clearData([format]);
+
+ +

Paramètres

+ +
+
format{{optional_inline}}
+
Une {{domxref("DOMString","chaîne de caractères")}} représentant le format de donnée à retirer.
+
+ +

Valeur de retour

+ +

Void.

+ +

Exemple

+ +

Cette exemple illustre l'utilisation des méthodes {{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} et {{domxref("DataTransfer.clearData()","clearData()")}} de l'objet {{domxref("DataTransfer")}}.

+ +

HTML

+ +
<span class="tweaked" id="source" draggable="true">
+  Sélectionnez cet élément, glissez-le et déposez-le dans la Zone de Dépose pour le déplacer.
+</span>
+<span class="tweaked" id="target">Zone de Dépose</span>
+<div>Status: <span id="status">Glissez pour démarrer</span></div>
+<div>Data is: <span id="data">non initialisé</span></div>
+
+ +

CSS

+ +
span.tweaked {
+  display: inline-block;
+  margin: 1em 0;
+  padding: 1em 2em;
+}
+
+#source {
+  color: blue;
+  border: 1px solid black;
+}
+
+#target {
+  border: 1px solid black;
+}
+
+ +

JavaScript

+ +
window.addEventListener('DOMContentLoaded', function () {
+  // Séléctionner les éléments HTML
+  var draggable = document.getElementById('source')
+  var dropable = document.getElementById('target')
+  var status = document.getElementById('status')
+  var data = document.getElementById('data')
+  var dropped = false
+
+  // Enregistrer les évènements
+  draggable.addEventListener('dragstart', dragStartHandler)
+  draggable.addEventListener('dragend', dragEndHandler)
+  dropable.addEventListener('dragover', dragOverHandler)
+  dropable.addEventListener('dragleave', dragLeaveHandler)
+  dropable.addEventListener('drop', dropHandler)
+
+  function dragStartHandler (event) {
+    status.innerHTML = 'Glisse en cours'
+
+    // Modifier la bordure de l'élément pour indiquer qu'une opération de glisse a démarré
+    event.currentTarget.style.border = '1px dashed blue'
+
+    // Définir le type et la donnée associée à l'opération de glisse (utilise l'ID de la cible de l'évènement pour la donnée)
+    event.dataTransfer.setData('text/plain', event.target.id)
+
+    data.innerHTML = event.dataTransfer.getData('text/plain')
+  }
+
+  function dragEndHandler (event) {
+    if (!dropped) {
+      status.innerHTML = 'Glisse annulée'
+    }
+
+    data.innerHTML = event.dataTransfer.getData('text/plain') || 'vide'
+
+    // Modifier la bordure de l'élément pour indiquer que l'opération de glisse n'est plus en cours
+    event.currentTarget.style.border = '1px solid black'
+
+    if (dropped) {
+      // Retirer tous les évènements enregistrés précédemment
+      draggable.removeEventListener('dragstart', dragStartHandler)
+      draggable.removeEventListener('dragend', dragEndHandler)
+      dropable.removeEventListener('dragover', dragOverHandler)
+      dropable.removeEventListener('dragleave', dragLeaveHandler)
+      dropable.removeEventListener('drop', dropHandler)
+    }
+  }
+
+  function dragOverHandler (event) {
+    status.innerHTML = 'Dépose disponible'
+
+    event.preventDefault()
+  }
+
+  function dragLeaveHandler (event) {
+    status.innerHTML = 'Glisse en cours (la dépose était disponible)'
+
+    event.preventDefault()
+  }
+
+  function dropHandler (event) {
+    dropped = true
+
+    status.innerHTML = 'Dépose effectuée'
+
+    event.preventDefault()
+
+    // Récupérer la donnée liée au type « text/plain »
+    var _data = event.dataTransfer.getData('text/plain')
+    var element = document.getElementById(_data)
+
+    // Insérer l'élément source de l'opération de glisse en tant que dernier enfant de l'élément cible de l'opération de dépose
+    event.target.appendChild(element)
+
+    // Modifier les styles CSS et le texte affiché
+    element.style.cssText = 'border: 1px solid black;display: block; color: red'
+    element.innerHTML = "J'suis dans la Zone de Dépose !"
+
+    // Effacer les données de TOUS les types liés à l'opération de glisse (car on n'a pas donné de paramètre)
+    event.dataTransfer.clearData()
+  }
+})
+
+ +

{{EmbedLiveSample('Exemple', 300, 250)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}{{Spec2('HTML5.1')}}Définition initiale
+ +

Compatibilité

+ +

{{Compat("api.DataTransfer.clearData")}}

+ +

À voir également

+ +

{{page("/fr/docs/Web/API/DataTransfer", "See also")}}

diff --git a/files/fr/web/api/datatransfer/files/index.html b/files/fr/web/api/datatransfer/files/index.html deleted file mode 100644 index 122add4eae..0000000000 --- a/files/fr/web/api/datatransfer/files/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: DataTransfer.files -slug: Web/API/DataTransfer/files -tags: - - API - - Glisser Déposer - - HTML DOM - - Propriété - - References -translation_of: Web/API/DataTransfer/files ---- -
{{APIRef("HTML Drag and Drop API")}}
- -

La propriété DataTransfer.files est une  {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide.

- -

Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur.

- -

Syntaxe

- -
dataTransfer.files;
-
- -

Valeur de retour

- -

Une {{domxref("FileList","liste")}} de fichiers associés au "glisser", un élément de liste pour chaque fichier dans l'opération. Si l'opération de "glisser" ne contient aucun fichier alors la liste est vide.

- -

Exemple

- -

Voici deux exemples :

- - - -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}}{{Spec2("HTML5.1")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.DataTransfer.files")}}

diff --git a/files/fr/web/api/datatransfer/files/index.md b/files/fr/web/api/datatransfer/files/index.md new file mode 100644 index 0000000000..122add4eae --- /dev/null +++ b/files/fr/web/api/datatransfer/files/index.md @@ -0,0 +1,60 @@ +--- +title: DataTransfer.files +slug: Web/API/DataTransfer/files +tags: + - API + - Glisser Déposer + - HTML DOM + - Propriété + - References +translation_of: Web/API/DataTransfer/files +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

La propriété DataTransfer.files est une  {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide.

+ +

Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur.

+ +

Syntaxe

+ +
dataTransfer.files;
+
+ +

Valeur de retour

+ +

Une {{domxref("FileList","liste")}} de fichiers associés au "glisser", un élément de liste pour chaque fichier dans l'opération. Si l'opération de "glisser" ne contient aucun fichier alors la liste est vide.

+ +

Exemple

+ +

Voici deux exemples :

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DataTransfer.files")}}

diff --git a/files/fr/web/api/datatransfer/index.html b/files/fr/web/api/datatransfer/index.html deleted file mode 100644 index 45608285ef..0000000000 --- a/files/fr/web/api/datatransfer/index.html +++ /dev/null @@ -1,388 +0,0 @@ ---- -title: DataTransfer -slug: Web/API/DataTransfer -tags: - - API - - Glisser-deposer -translation_of: Web/API/DataTransfer ---- -

L'objet DataTransfer contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir Glisser et déposer.

- -

Cet objet est disponible depuis la propriété dataTransfer de tous les événements de glisser. Il ne peut pas être créé séparément.

- -

Aperçu des proprietés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéType
dropEffectString
effectAllowedString
files{{ domxref("FileList") }}
mozCursor {{ non-standard_inline() }}String
mozItemCount {{ non-standard_inline() }}unsigned long
mozSourceNode {{ non-standard_inline() }}{{ domxref("Node") }}
mozUserCancelledBoolean
typesStringList
- -

Aperçu des méthodes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
void addElement(in Element image)
void clearData([in String type])
String getData(in String type)
void setData(in String type, in String data)
void setDragImage(in nsIDOMElement image, in long x, in long y)
void mozClearDataAt([in String type, in unsigned long index])
nsIVariant mozGetDataAt(in String type, in unsigned long index)
void mozSetDataAt(in String type, in nsIVariant data, in unsigned long index)
StringList mozTypesAt([in unsigned long index])
- -

Propriétés

- -

dropEffect

- -

L'effet utilisé, qui doit toujours être l'une des valeurs possibles de effectAllowed.

- -

Pour les événements dragenter et dragover, la propriété dropEffect est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement dragenter et dragover, la propriété dropEffect peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée.

- -

Pour les évènements dragstart, drag, and dragleave events, dropEffect est initialisé à "none". Toute valeur peut être assignée à dropEffect, mais elle sera ignorée.

- -

Pour les évènements drop et dragend , dropEffect est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de dropEffect après le dernier événement dragenter ou dragover.

- -

Valeurs possibles:

- -
    -
  • copy: Une copie de l'élément source est faite au nouvel emplacement.
    • -
  • move: Un élément est déplacé vers un nouvel emplacement.
    • -
  • link: Un lien est établi depuis la source vers le nouvel emplacement.
    • -
  • none: L'élément ne peut pas être déposé.
    • -
- -

Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.

- -

effectAllowed

- -

Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement dragstart pour définir les effets souhaités pour la source, et dans les événements dragenter et dragover pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements.

- -

Valeurs possibles:

- -
    -
  • copy: Une copie de l'élément source peut être faite à son nouvel emplacement.
    • -
  • move: Un élément peut être déplacé vers un nouvel emplacement.
    • -
  • link: Un lien peut être établi vers la source depuis le nouvel emplacement.
    • -
  • copyLink: Une opération copy ou link est autorisée.
    • -
  • copyMove: Une opération copy ou move est autorisée.
    • -
  • linkMove: Une opération link ou move est autorisée.
    • -
  • all: Toutes les opérations sont autorisées.
    • -
  • none: l'élément ne peut être déposé.
    • -
  • uninitialized: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all.
    • -
- -

Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.

- -

files

- -

Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie null.

- -

Exemple

- -

Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur:  http://jsfiddle.net/9C2EF/

- -

types

- -

Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée.

- -

L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet.

- -
-

Note : Cette méthode n'est actuellement implémentée que sur Windows.

-
- -

Valeurs possibles

- -
-
auto
-
Utilise le comportement par défaut du système.
-
default
-
Utilise le comportement par défaut de Gecko, qui consiste à utiliser une flèche pour curseur au cours d'un glisser.
-
- -
-

Note : Si vous spécifiez une valeur autre que "default", "auto" est supposé.

-
- -

mozItemCount

- -

Le nombre d'éléments glissés.

- -
-

Note : Cette propriété est  spécifique a Gecko.

-
- -

mozSourceNode

- -

le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud.

- -
-

Note : Cette propriété est  spécifique a Gecko.

-
- -

mozUserCancelled

- -

Cette propriété s'applique uniquement à l'événement dragend, et est positionnée à true si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à false dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux.

- -
-

Note : Cette propriété est  spécifique a Gecko.

-
- -

Methods

- -

addElement()

- -

Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements drag et dragend. La cible par défaut est le nœud qui est glissé.

- -
 void addElement(
-   in Element element
- );
-
- -

Parametres

- -
-
element
-
L'élément à ajouter.
-
- -

clearData()

- -

Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet.

- -
 void clearData(
-   [optional] in String type
- );
-
- -

Parametres

- -
-
type
-
The type of data to remove.
-
- -

getData()

- -

Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée.

- -

Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop.

- -
 void getData(
-   in String type
- );
-
- -

Parametres

- -
-
type
-
Le type de donnée à récupérer.
-
- -

setData()

- -

Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type.

- -
 void setData(
-   in String type,
-   in String data
- );
-
- -

Parametres

- -
-
type
-
Le type de la donnée à ajouter.
-
data
-
La donnée à ajouter.
-
- -

setDragImage()

- -

Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé.
-
- Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place.
-
- Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image.

- -
 void setDragImage(
-   in Element image,
-   in long x,
-   in long y
- );
-
- -

Parametres

- -
-
image
-
Un élément à utiliser comme image pendant le glisser
-
x
-
Décalage horizontal à l'intérieur de l'image.
-
y
-
Décalage vertical à l'intérieur de l'image.
-
- -

mozClearDataAt()

- -

Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un.
-
- Si le dernier format de l'élément est supprimé, l'élément entier est retiré, réduisant mozItemCount par un.
-
- Si la liste format est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet.
-  

- -
-

Note : Cette méthode est spécifique à Gecko.

-
- -
 void mozClearDataAt(
-   [optional] in String type,
-   in unsigned long index
- );
-
- -

Parametres

- -
-
type
-
Le type de la donnée à supprimer.
-
index
-
L'index de la donnée à supprimer.
-
- -

mozGetDataAt()

- -

Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un.

- -
-

Note : Cette méthode est spécifique à Gecko.

-
- -
 nsIVariant mozGetDataAt(
-   [optional] in String type,
-   in unsigned long index
- );
-
- -

Parametres

- -
-
type
-
Le type de donnée à récupérer.
-
index
-
L'indice de la donnée à récupérer.
-
- -

mozSetDataAt()

- -

Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. mozSetDataAt() ne peut être appelé qu'avec un index inférieur à mozItemCount, auquel cas un élément existant est modifié, ou égal à mozItemCount, auquel cas un nouvel élément est ajouté, et mozItemCount est incrémenté de un.
-
- Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente.
-
- La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une nsISupports.

- -
-

Note : Cette méthode est spécifique à Gecko.

-
- -
 void mozSetDataAt(
-   [optional] in String type,
-   in nsIVariant data,
-   in unsigned long index
- );
-
- -

Parametres

- -
-
type
-
Le type de donnée à ajouter.
-
data
-
La donnée à ajouter.
-
index
-
L'index de la donnée à ajouter.
-
- -

mozTypesAt()

- -

Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée.

- -
-

Note : Cette méthode est spécifique à Gecko.

-
- -
 nsIVariant mozTypesAt(
-   in unsigned long index
- );
-
- -

Parameters

- -
-
index
-
L'index de la donnée pour laquelle récupérer les types.
-
- -

Voir Aussi

- -

Drag and Drop

diff --git a/files/fr/web/api/datatransfer/index.md b/files/fr/web/api/datatransfer/index.md new file mode 100644 index 0000000000..45608285ef --- /dev/null +++ b/files/fr/web/api/datatransfer/index.md @@ -0,0 +1,388 @@ +--- +title: DataTransfer +slug: Web/API/DataTransfer +tags: + - API + - Glisser-deposer +translation_of: Web/API/DataTransfer +--- +

L'objet DataTransfer contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir Glisser et déposer.

+ +

Cet objet est disponible depuis la propriété dataTransfer de tous les événements de glisser. Il ne peut pas être créé séparément.

+ +

Aperçu des proprietés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéType
dropEffectString
effectAllowedString
files{{ domxref("FileList") }}
mozCursor {{ non-standard_inline() }}String
mozItemCount {{ non-standard_inline() }}unsigned long
mozSourceNode {{ non-standard_inline() }}{{ domxref("Node") }}
mozUserCancelledBoolean
typesStringList
+ +

Aperçu des méthodes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
void addElement(in Element image)
void clearData([in String type])
String getData(in String type)
void setData(in String type, in String data)
void setDragImage(in nsIDOMElement image, in long x, in long y)
void mozClearDataAt([in String type, in unsigned long index])
nsIVariant mozGetDataAt(in String type, in unsigned long index)
void mozSetDataAt(in String type, in nsIVariant data, in unsigned long index)
StringList mozTypesAt([in unsigned long index])
+ +

Propriétés

+ +

dropEffect

+ +

L'effet utilisé, qui doit toujours être l'une des valeurs possibles de effectAllowed.

+ +

Pour les événements dragenter et dragover, la propriété dropEffect est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement dragenter et dragover, la propriété dropEffect peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée.

+ +

Pour les évènements dragstart, drag, and dragleave events, dropEffect est initialisé à "none". Toute valeur peut être assignée à dropEffect, mais elle sera ignorée.

+ +

Pour les évènements drop et dragend , dropEffect est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de dropEffect après le dernier événement dragenter ou dragover.

+ +

Valeurs possibles:

+ +
    +
  • copy: Une copie de l'élément source est faite au nouvel emplacement.
    • +
  • move: Un élément est déplacé vers un nouvel emplacement.
    • +
  • link: Un lien est établi depuis la source vers le nouvel emplacement.
    • +
  • none: L'élément ne peut pas être déposé.
    • +
+ +

Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.

+ +

effectAllowed

+ +

Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement dragstart pour définir les effets souhaités pour la source, et dans les événements dragenter et dragover pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements.

+ +

Valeurs possibles:

+ +
    +
  • copy: Une copie de l'élément source peut être faite à son nouvel emplacement.
    • +
  • move: Un élément peut être déplacé vers un nouvel emplacement.
    • +
  • link: Un lien peut être établi vers la source depuis le nouvel emplacement.
    • +
  • copyLink: Une opération copy ou link est autorisée.
    • +
  • copyMove: Une opération copy ou move est autorisée.
    • +
  • linkMove: Une opération link ou move est autorisée.
    • +
  • all: Toutes les opérations sont autorisées.
    • +
  • none: l'élément ne peut être déposé.
    • +
  • uninitialized: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all.
    • +
+ +

Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.

+ +

files

+ +

Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie null.

+ +

Exemple

+ +

Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur:  http://jsfiddle.net/9C2EF/

+ +

types

+ +

Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée.

+ +

L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet.

+ +
+

Note : Cette méthode n'est actuellement implémentée que sur Windows.

+
+ +

Valeurs possibles

+ +
+
auto
+
Utilise le comportement par défaut du système.
+
default
+
Utilise le comportement par défaut de Gecko, qui consiste à utiliser une flèche pour curseur au cours d'un glisser.
+
+ +
+

Note : Si vous spécifiez une valeur autre que "default", "auto" est supposé.

+
+ +

mozItemCount

+ +

Le nombre d'éléments glissés.

+ +
+

Note : Cette propriété est  spécifique a Gecko.

+
+ +

mozSourceNode

+ +

le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud.

+ +
+

Note : Cette propriété est  spécifique a Gecko.

+
+ +

mozUserCancelled

+ +

Cette propriété s'applique uniquement à l'événement dragend, et est positionnée à true si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à false dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux.

+ +
+

Note : Cette propriété est  spécifique a Gecko.

+
+ +

Methods

+ +

addElement()

+ +

Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements drag et dragend. La cible par défaut est le nœud qui est glissé.

+ +
 void addElement(
+   in Element element
+ );
+
+ +

Parametres

+ +
+
element
+
L'élément à ajouter.
+
+ +

clearData()

+ +

Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet.

+ +
 void clearData(
+   [optional] in String type
+ );
+
+ +

Parametres

+ +
+
type
+
The type of data to remove.
+
+ +

getData()

+ +

Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée.

+ +

Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop.

+ +
 void getData(
+   in String type
+ );
+
+ +

Parametres

+ +
+
type
+
Le type de donnée à récupérer.
+
+ +

setData()

+ +

Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type.

+ +
 void setData(
+   in String type,
+   in String data
+ );
+
+ +

Parametres

+ +
+
type
+
Le type de la donnée à ajouter.
+
data
+
La donnée à ajouter.
+
+ +

setDragImage()

+ +

Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé.
+
+ Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place.
+
+ Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image.

+ +
 void setDragImage(
+   in Element image,
+   in long x,
+   in long y
+ );
+
+ +

Parametres

+ +
+
image
+
Un élément à utiliser comme image pendant le glisser
+
x
+
Décalage horizontal à l'intérieur de l'image.
+
y
+
Décalage vertical à l'intérieur de l'image.
+
+ +

mozClearDataAt()

+ +

Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un.
+
+ Si le dernier format de l'élément est supprimé, l'élément entier est retiré, réduisant mozItemCount par un.
+
+ Si la liste format est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet.
+  

+ +
+

Note : Cette méthode est spécifique à Gecko.

+
+ +
 void mozClearDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+
+ +

Parametres

+ +
+
type
+
Le type de la donnée à supprimer.
+
index
+
L'index de la donnée à supprimer.
+
+ +

mozGetDataAt()

+ +

Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un.

+ +
+

Note : Cette méthode est spécifique à Gecko.

+
+ +
 nsIVariant mozGetDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+
+ +

Parametres

+ +
+
type
+
Le type de donnée à récupérer.
+
index
+
L'indice de la donnée à récupérer.
+
+ +

mozSetDataAt()

+ +

Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. mozSetDataAt() ne peut être appelé qu'avec un index inférieur à mozItemCount, auquel cas un élément existant est modifié, ou égal à mozItemCount, auquel cas un nouvel élément est ajouté, et mozItemCount est incrémenté de un.
+
+ Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente.
+
+ La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une nsISupports.

+ +
+

Note : Cette méthode est spécifique à Gecko.

+
+ +
 void mozSetDataAt(
+   [optional] in String type,
+   in nsIVariant data,
+   in unsigned long index
+ );
+
+ +

Parametres

+ +
+
type
+
Le type de donnée à ajouter.
+
data
+
La donnée à ajouter.
+
index
+
L'index de la donnée à ajouter.
+
+ +

mozTypesAt()

+ +

Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée.

+ +
+

Note : Cette méthode est spécifique à Gecko.

+
+ +
 nsIVariant mozTypesAt(
+   in unsigned long index
+ );
+
+ +

Parameters

+ +
+
index
+
L'index de la donnée pour laquelle récupérer les types.
+
+ +

Voir Aussi

+ +

Drag and Drop

diff --git a/files/fr/web/api/dedicatedworkerglobalscope/close/index.html b/files/fr/web/api/dedicatedworkerglobalscope/close/index.html deleted file mode 100644 index 919907cd8f..0000000000 --- a/files/fr/web/api/dedicatedworkerglobalscope/close/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: DedicatedWorkerGlobalScope.close() -slug: Web/API/DedicatedWorkerGlobalScope/close -tags: - - API - - Arrêter - - DOM - - Méthodes - - Worker -translation_of: Web/API/DedicatedWorkerGlobalScope/close ---- -

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

- -

La méthode close() de l'interface {{domxref("DedicatedWorkerGlobalScope")}} ferme toutes les tâches placées dans la boucle de l'évènement DedicatedWorkerGlobalScope, fermant effectivement cette portée particulière.

- -

Syntaxe

- -
self.close();
- -

Exemple

- -

Si vous souhaitez fermer votre instance de travail depuis l'intérieur du worker, vous pouvez appeler ce qui suit :

- -
close();
- -

close() et self.close() sont effectivement équivalents — les deux représentent une instruction close() qui est appelée de l'intérieur de la portée interne du worker.

- -
-

Note : Il y a une autre façon d'arrêter le worker depuis le fil principal : la méthode {{domxref("Worker.terminate")}}.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-close', 'close()')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.DedicatedWorkerGlobalScope.close")}}

- -

Voir aussi

- -

{{domxref("DedicatedWorkerGlobalScope")}}

diff --git a/files/fr/web/api/dedicatedworkerglobalscope/close/index.md b/files/fr/web/api/dedicatedworkerglobalscope/close/index.md new file mode 100644 index 0000000000..919907cd8f --- /dev/null +++ b/files/fr/web/api/dedicatedworkerglobalscope/close/index.md @@ -0,0 +1,55 @@ +--- +title: DedicatedWorkerGlobalScope.close() +slug: Web/API/DedicatedWorkerGlobalScope/close +tags: + - API + - Arrêter + - DOM + - Méthodes + - Worker +translation_of: Web/API/DedicatedWorkerGlobalScope/close +--- +

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

+ +

La méthode close() de l'interface {{domxref("DedicatedWorkerGlobalScope")}} ferme toutes les tâches placées dans la boucle de l'évènement DedicatedWorkerGlobalScope, fermant effectivement cette portée particulière.

+ +

Syntaxe

+ +
self.close();
+ +

Exemple

+ +

Si vous souhaitez fermer votre instance de travail depuis l'intérieur du worker, vous pouvez appeler ce qui suit :

+ +
close();
+ +

close() et self.close() sont effectivement équivalents — les deux représentent une instruction close() qui est appelée de l'intérieur de la portée interne du worker.

+ +
+

Note : Il y a une autre façon d'arrêter le worker depuis le fil principal : la méthode {{domxref("Worker.terminate")}}.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-close', 'close()')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DedicatedWorkerGlobalScope.close")}}

+ +

Voir aussi

+ +

{{domxref("DedicatedWorkerGlobalScope")}}

diff --git a/files/fr/web/api/dedicatedworkerglobalscope/index.html b/files/fr/web/api/dedicatedworkerglobalscope/index.html deleted file mode 100644 index 20417cc38e..0000000000 --- a/files/fr/web/api/dedicatedworkerglobalscope/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: DedicatedWorkerGlobalScope -slug: Web/API/DedicatedWorkerGlobalScope -translation_of: Web/API/DedicatedWorkerGlobalScope ---- -

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

- -

L'objet DedicatedWorkerGlobalScope (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la  Référence JavaScript. Consultez aussi : Fonctions et classes disponibles dans les Web Workers.

- -

Propriétés

- -

Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.

- -
-
{{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}
-
Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage.
-
- -

Propriétés héritées de WorkerGlobalScope

- -
-
{{domxref("WorkerGlobalScope.self")}}
-
Retourne une référence d'objet à l'objet DedicatedWorkerGlobalScope lui-même.
-
{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}
-
Retourne la {{domxref("Console")}} associée au worker.
-
{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
-
Retourne la {{domxref("WorkerLocation")}} associée au worker. WorkerLocation est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.
-
{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
-
Retourne le {{domxref("WorkerNavigator")}} associé au worker. WorkerNavigator est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.
-
{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
-
Retourne l'objet {{domxref("Performance")}} associé au worker, qui correspond à l'objet performance normal, avec seulement à disposition un sous-ensemble de ses propriétés et méthodes.
-
- -

Gestionnaires d'événement

- -

Cette interface hérite des gestionnaires d'événement de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les gestionnaires d'événement de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.

- -
-
{{domxref("DedicatedWorkerGlobalScope.onmessage")}}
-
C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("message")}} est déclenché. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le worker reçoit un message du document qui l'a initialisé (i.e. à partir de la méthode {{domxref("Worker.postMessage")}}.)
-
{{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}
-
C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("messageerror")}} est déclenché.
-
- -

Méthodes

- -

Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les méthodes de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.

- -
-
{{domxref("WorkerGlobalScope.close()")}}
-
Annule toute tâche en attente dans la boucle d'événement du WorkerGlobalScope, mettant alors fin à ce contexte précis.
-
{{domxref("DedicatedWorkerGlobalScope.postMessage")}}
-
Envoie un message — qui peut comprendre  n'importe quel objet JavaScript — au document parent qui a préalablement engendré le worker.
-
- -

Héritées de WorkerGlobalScope

- -
-
{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
-
Écrit un message dans la console.
-
{{domxref("WorkerGlobalScope.importScripts()")}}
-
Importe un ou plusieurs scripts dans le contexte du worker. Vous pouvez spécifier autant de fichiers que souhaité, en les séparant par des virgules. Par exemple: importScripts('foo.js', 'bar.js');
-
- -

Implémentées à partir d'autres endroits

- -
-
{{domxref("WindowBase64.atob()")}}
-
Décode une chaîne de données qui a été encodée en base-64.
-
{{domxref("WindowBase64.btoa()")}}
-
Crée une chaîne ASCII en base-64 à partir d'une chaîne de données binaires.
-
{{domxref("WindowTimers.clearInterval()")}}
-
Annule l'exécution répétée initiée par {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Annule l'exécution répété initiée par {{domxref("WindowTimers.setTimeout()")}}.
-
{{domxref("WindowTimers.setInterval()")}}
-
Planifie l'exécution d'une fonction toutes les X millisecondes.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Fixe un délai pour l'exécution d'une fonction.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.DedicatedWorkerGlobalScope")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/dedicatedworkerglobalscope/index.md b/files/fr/web/api/dedicatedworkerglobalscope/index.md new file mode 100644 index 0000000000..20417cc38e --- /dev/null +++ b/files/fr/web/api/dedicatedworkerglobalscope/index.md @@ -0,0 +1,114 @@ +--- +title: DedicatedWorkerGlobalScope +slug: Web/API/DedicatedWorkerGlobalScope +translation_of: Web/API/DedicatedWorkerGlobalScope +--- +

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

+ +

L'objet DedicatedWorkerGlobalScope (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la  Référence JavaScript. Consultez aussi : Fonctions et classes disponibles dans les Web Workers.

+ +

Propriétés

+ +

Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}
+
Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage.
+
+ +

Propriétés héritées de WorkerGlobalScope

+ +
+
{{domxref("WorkerGlobalScope.self")}}
+
Retourne une référence d'objet à l'objet DedicatedWorkerGlobalScope lui-même.
+
{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}
+
Retourne la {{domxref("Console")}} associée au worker.
+
{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
+
Retourne la {{domxref("WorkerLocation")}} associée au worker. WorkerLocation est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.
+
{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
+
Retourne le {{domxref("WorkerNavigator")}} associé au worker. WorkerNavigator est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.
+
{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
+
Retourne l'objet {{domxref("Performance")}} associé au worker, qui correspond à l'objet performance normal, avec seulement à disposition un sous-ensemble de ses propriétés et méthodes.
+
+ +

Gestionnaires d'événement

+ +

Cette interface hérite des gestionnaires d'événement de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les gestionnaires d'événement de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("DedicatedWorkerGlobalScope.onmessage")}}
+
C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("message")}} est déclenché. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le worker reçoit un message du document qui l'a initialisé (i.e. à partir de la méthode {{domxref("Worker.postMessage")}}.)
+
{{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}
+
C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("messageerror")}} est déclenché.
+
+ +

Méthodes

+ +

Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les méthodes de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("WorkerGlobalScope.close()")}}
+
Annule toute tâche en attente dans la boucle d'événement du WorkerGlobalScope, mettant alors fin à ce contexte précis.
+
{{domxref("DedicatedWorkerGlobalScope.postMessage")}}
+
Envoie un message — qui peut comprendre  n'importe quel objet JavaScript — au document parent qui a préalablement engendré le worker.
+
+ +

Héritées de WorkerGlobalScope

+ +
+
{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
+
Écrit un message dans la console.
+
{{domxref("WorkerGlobalScope.importScripts()")}}
+
Importe un ou plusieurs scripts dans le contexte du worker. Vous pouvez spécifier autant de fichiers que souhaité, en les séparant par des virgules. Par exemple: importScripts('foo.js', 'bar.js');
+
+ +

Implémentées à partir d'autres endroits

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Décode une chaîne de données qui a été encodée en base-64.
+
{{domxref("WindowBase64.btoa()")}}
+
Crée une chaîne ASCII en base-64 à partir d'une chaîne de données binaires.
+
{{domxref("WindowTimers.clearInterval()")}}
+
Annule l'exécution répétée initiée par {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Annule l'exécution répété initiée par {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Planifie l'exécution d'une fonction toutes les X millisecondes.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Fixe un délai pour l'exécution d'une fonction.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.DedicatedWorkerGlobalScope")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/dedicatedworkerglobalscope/name/index.html b/files/fr/web/api/dedicatedworkerglobalscope/name/index.html deleted file mode 100644 index fb63f1cc74..0000000000 --- a/files/fr/web/api/dedicatedworkerglobalscope/name/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: DedicatedWorkerGlobalScope.name -slug: Web/API/DedicatedWorkerGlobalScope/name -tags: - - API - - DOM - - Nom - - Propriétés - - Worker -translation_of: Web/API/DedicatedWorkerGlobalScope/name ---- -
{{APIRef("Web Workers API")}}
- -

La propriété en lecture seule name de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au  {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}.

- -

Syntaxe

- -
var nameObj = self.name;
- -

Valeur

- -

Une {{domxref("DOMString")}} (chaîne de caractères).

- -

Exemple

- -

Un worker est créé en utilisant un constructeur avec une option de name :

- -
var myWorker = new Worker("worker.js", { name : "myWorker" });
- -

le {{domxref("DedicatedWorkerGlobalScope")}} aura désormais le nom de "myWorker", qui peut être renvoyé pendant l'exécution

- -
self.name
- -

à l'intérieur du worker.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.DedicatedWorkerGlobalScope.name")}}

- -

Voir aussi

- -
    -
  • {{domxref("DedicatedWorkerGlobalScope")}}
    • -
diff --git a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md new file mode 100644 index 0000000000..fb63f1cc74 --- /dev/null +++ b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md @@ -0,0 +1,61 @@ +--- +title: DedicatedWorkerGlobalScope.name +slug: Web/API/DedicatedWorkerGlobalScope/name +tags: + - API + - DOM + - Nom + - Propriétés + - Worker +translation_of: Web/API/DedicatedWorkerGlobalScope/name +--- +
{{APIRef("Web Workers API")}}
+ +

La propriété en lecture seule name de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au  {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}.

+ +

Syntaxe

+ +
var nameObj = self.name;
+ +

Valeur

+ +

Une {{domxref("DOMString")}} (chaîne de caractères).

+ +

Exemple

+ +

Un worker est créé en utilisant un constructeur avec une option de name :

+ +
var myWorker = new Worker("worker.js", { name : "myWorker" });
+ +

le {{domxref("DedicatedWorkerGlobalScope")}} aura désormais le nom de "myWorker", qui peut être renvoyé pendant l'exécution

+ +
self.name
+ +

à l'intérieur du worker.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DedicatedWorkerGlobalScope.name")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("DedicatedWorkerGlobalScope")}}
    • +
diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html deleted file mode 100644 index 64ab8dff1d..0000000000 --- a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: DeviceMotionEvent.accelerationIncludingGravity -slug: Web/API/DeviceMotionEvent/accelerationIncludingGravity -tags: - - API - - Appareil - - Mobile - - Mouvement - - Orientation - - Propriétés - - axes -translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity ---- -

{{ ApiRef("Device Orientation Events") }}

- -

La propriété accelerationIncludingGravity renvoie la valeur d'accélération enregistrée par l'appareil, en mètres par seconde au carré (m/s2). Contrairement à  {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité.

- -

Cette valeur n'est pas  aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope.

- -

Syntaxe

- -
var acceleration = instanceOfDeviceMotionEvent.accelerationIncludingGravity;
-
- -

Valeur

- -

La propriété accelerationIncludingGravity est un objet fournissant une information sur l'accélération des 3 axes. Pour chacun d'eux, elle est représentée par leur propre propriété :

- -
-
x
-
Représente l'accélération sur l'axe x qui est l'axe est-ouest.
-
y
-
Représente l'accélération sur l'axe y qui est l'axe nord-sud
-
z
-
Représente l'accélération sur l'axe z qui est l'axe haut-bas
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DeviceMotionEvent.accelerationIncludingGravity")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md new file mode 100644 index 0000000000..64ab8dff1d --- /dev/null +++ b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md @@ -0,0 +1,71 @@ +--- +title: DeviceMotionEvent.accelerationIncludingGravity +slug: Web/API/DeviceMotionEvent/accelerationIncludingGravity +tags: + - API + - Appareil + - Mobile + - Mouvement + - Orientation + - Propriétés + - axes +translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity +--- +

{{ ApiRef("Device Orientation Events") }}

+ +

La propriété accelerationIncludingGravity renvoie la valeur d'accélération enregistrée par l'appareil, en mètres par seconde au carré (m/s2). Contrairement à  {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité.

+ +

Cette valeur n'est pas  aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope.

+ +

Syntaxe

+ +
var acceleration = instanceOfDeviceMotionEvent.accelerationIncludingGravity;
+
+ +

Valeur

+ +

La propriété accelerationIncludingGravity est un objet fournissant une information sur l'accélération des 3 axes. Pour chacun d'eux, elle est représentée par leur propre propriété :

+ +
+
x
+
Représente l'accélération sur l'axe x qui est l'axe est-ouest.
+
y
+
Représente l'accélération sur l'axe y qui est l'axe nord-sud
+
z
+
Représente l'accélération sur l'axe z qui est l'axe haut-bas
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DeviceMotionEvent.accelerationIncludingGravity")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.html b/files/fr/web/api/devicemotionevent/devicemotionevent/index.html deleted file mode 100644 index c8fa453f7e..0000000000 --- a/files/fr/web/api/devicemotionevent/devicemotionevent/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: DeviceMotionEvent.DeviceMotionEvent() -slug: Web/API/DeviceMotionEvent/DeviceMotionEvent -tags: - - API - - Constructeurs - - Mobile - - Mouvement - - Orientation - - axes -translation_of: Web/API/DeviceMotionEvent/DeviceMotionEvent ---- -

{{APIRef("Device Orientation Events")}}{{Non-standard_header}}

- -

Le constructeur DeviceMotionEvent crée un nouveau {{domxref("DeviceMotionEvent")}}.

- -

Syntaxe

- -
var deviceMotionEvent = new DeviceMotionEvent(type[, options])
- -

Paramètres

- -
-
type
-
Doit être "devicemotion".
-
options {{optional_inline}}
-

Les options sont les suivantes :

-
    -
  • acceleration : un  objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en m/s2.
    • -
  • accelerationIncludingGravity : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en m/s2.
    • -
  • rotationRate : un objet donnant la vitesse de rotation du changement d'orientation de l'appareil sur les axes alpha, beta et gamma. La vitesse de rotation est exprimée en degrés par seconde.
    • -
  • interval : Un nombre représentant l'intervalle de temps, en millisecondes, avant d'obtenir des données à partir de l'appareil.
    • -
-
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DeviceMotionEvent.DeviceMotionEvent")}}

diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md new file mode 100644 index 0000000000..c8fa453f7e --- /dev/null +++ b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md @@ -0,0 +1,56 @@ +--- +title: DeviceMotionEvent.DeviceMotionEvent() +slug: Web/API/DeviceMotionEvent/DeviceMotionEvent +tags: + - API + - Constructeurs + - Mobile + - Mouvement + - Orientation + - axes +translation_of: Web/API/DeviceMotionEvent/DeviceMotionEvent +--- +

{{APIRef("Device Orientation Events")}}{{Non-standard_header}}

+ +

Le constructeur DeviceMotionEvent crée un nouveau {{domxref("DeviceMotionEvent")}}.

+ +

Syntaxe

+ +
var deviceMotionEvent = new DeviceMotionEvent(type[, options])
+ +

Paramètres

+ +
+
type
+
Doit être "devicemotion".
+
options {{optional_inline}}
+

Les options sont les suivantes :

+
    +
  • acceleration : un  objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en m/s2.
    • +
  • accelerationIncludingGravity : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en m/s2.
    • +
  • rotationRate : un objet donnant la vitesse de rotation du changement d'orientation de l'appareil sur les axes alpha, beta et gamma. La vitesse de rotation est exprimée en degrés par seconde.
    • +
  • interval : Un nombre représentant l'intervalle de temps, en millisecondes, avant d'obtenir des données à partir de l'appareil.
    • +
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DeviceMotionEvent.DeviceMotionEvent")}}

diff --git a/files/fr/web/api/devicemotionevent/index.html b/files/fr/web/api/devicemotionevent/index.html deleted file mode 100644 index 259f1c68b0..0000000000 --- a/files/fr/web/api/devicemotionevent/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: DeviceMotionEvent -slug: Web/API/DeviceMotionEvent -tags: - - API - - Device Orientation - - Experimental - - Firefox OS - - Mobile - - Motion - - Orientation - - TopicStub -translation_of: Web/API/DeviceMotionEvent ---- -

{{apiref("Device Orientation Events")}}{{SeeCompatTable}}

- -

Résumé

- -

DeviceMotionEvent fournit aux développeurs Web des informations sur la vitesse des changements de position et d'orientation de l'appareil.

- -
-

Attention : Actuellement, Firefox et Chrome ne gèrent pas les coordonnées de la même manière. Faites attention à cela lorsque vous les utilisez.

-
- -

Constructeur

- -
-
{{domxref("DeviceMotionEvent.DeviceMotionEvent","DeviceMotionEvent.DeviceMotionEvent()")}}
-

Crée un nouvel DeviceMotionEvent.

-
- -

Propriétés

- -
-
{{domxref("DeviceMotionEvent.acceleration")}} {{readonlyinline}}
-
Un objet donnant l'accélération du dispositif sur les trois axes X, Y et Z. L'accélération est exprimée en m/s2.
-
{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}} {{readonlyinline}}
-
Un objet donnant l'accélération de l'appareil sur les trois axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en m/s2.
-
{{domxref("DeviceMotionEvent.rotationRate")}} {{readonlyinline}}
-
Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma. Le taux de rotation est exprimé en degrés par seconde.
-
{{domxref("DeviceMotionEvent.interval")}} {{readonlyinline}}
-
Nombre représentant l'intervalle de temps, en millisecondes, auquel les données sont obtenues à partir de l'appareil.
-
- -

Exemple

- -
window.addEventListener('devicemotion', function(event) {
-  console.log(event.acceleration.x + ' m/s2');
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DeviceMotionEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/index.md new file mode 100644 index 0000000000..259f1c68b0 --- /dev/null +++ b/files/fr/web/api/devicemotionevent/index.md @@ -0,0 +1,82 @@ +--- +title: DeviceMotionEvent +slug: Web/API/DeviceMotionEvent +tags: + - API + - Device Orientation + - Experimental + - Firefox OS + - Mobile + - Motion + - Orientation + - TopicStub +translation_of: Web/API/DeviceMotionEvent +--- +

{{apiref("Device Orientation Events")}}{{SeeCompatTable}}

+ +

Résumé

+ +

DeviceMotionEvent fournit aux développeurs Web des informations sur la vitesse des changements de position et d'orientation de l'appareil.

+ +
+

Attention : Actuellement, Firefox et Chrome ne gèrent pas les coordonnées de la même manière. Faites attention à cela lorsque vous les utilisez.

+
+ +

Constructeur

+ +
+
{{domxref("DeviceMotionEvent.DeviceMotionEvent","DeviceMotionEvent.DeviceMotionEvent()")}}
+

Crée un nouvel DeviceMotionEvent.

+
+ +

Propriétés

+ +
+
{{domxref("DeviceMotionEvent.acceleration")}} {{readonlyinline}}
+
Un objet donnant l'accélération du dispositif sur les trois axes X, Y et Z. L'accélération est exprimée en m/s2.
+
{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}} {{readonlyinline}}
+
Un objet donnant l'accélération de l'appareil sur les trois axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en m/s2.
+
{{domxref("DeviceMotionEvent.rotationRate")}} {{readonlyinline}}
+
Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma. Le taux de rotation est exprimé en degrés par seconde.
+
{{domxref("DeviceMotionEvent.interval")}} {{readonlyinline}}
+
Nombre représentant l'intervalle de temps, en millisecondes, auquel les données sont obtenues à partir de l'appareil.
+
+ +

Exemple

+ +
window.addEventListener('devicemotion', function(event) {
+  console.log(event.acceleration.x + ' m/s2');
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DeviceMotionEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/devicemotionevent/interval/index.html b/files/fr/web/api/devicemotionevent/interval/index.html deleted file mode 100644 index 65ff85c399..0000000000 --- a/files/fr/web/api/devicemotionevent/interval/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: DeviceMotionEvent.interval -slug: Web/API/DeviceMotionEvent/interval -tags: - - API - - Propriété - - Reference -translation_of: Web/API/DeviceMotionEvent/interval ---- -

{{apiref("Device Orientation Events")}}

- -

La propriété interval renvoie la granularité temporelle, exprimée en millisecondes, avec laquelle les données relatives aux mouvements sont obtenues du matériel.

- -

Syntaxe

- -
var interval = instanceOfDeviceMotionEvent.interval;
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.DeviceMotionEvent.interval")}}

- -

Voir aussi

- -
    -
  • {{ domxref("DeviceMotionEvent") }}
    • -
  • {{ event("devicemotion") }}
    • -
  • {{ domxref("window.ondevicemotion") }}
    • -
  • {{ event("deviceorientation") }}
    • -
  • {{ domxref("DeviceOrientationEvent") }}
    • -
  • Detecting device orientation
    • -
diff --git a/files/fr/web/api/devicemotionevent/interval/index.md b/files/fr/web/api/devicemotionevent/interval/index.md new file mode 100644 index 0000000000..65ff85c399 --- /dev/null +++ b/files/fr/web/api/devicemotionevent/interval/index.md @@ -0,0 +1,51 @@ +--- +title: DeviceMotionEvent.interval +slug: Web/API/DeviceMotionEvent/interval +tags: + - API + - Propriété + - Reference +translation_of: Web/API/DeviceMotionEvent/interval +--- +

{{apiref("Device Orientation Events")}}

+ +

La propriété interval renvoie la granularité temporelle, exprimée en millisecondes, avec laquelle les données relatives aux mouvements sont obtenues du matériel.

+ +

Syntaxe

+ +
var interval = instanceOfDeviceMotionEvent.interval;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DeviceMotionEvent.interval")}}

+ +

Voir aussi

+ +
    +
  • {{ domxref("DeviceMotionEvent") }}
    • +
  • {{ event("devicemotion") }}
    • +
  • {{ domxref("window.ondevicemotion") }}
    • +
  • {{ event("deviceorientation") }}
    • +
  • {{ domxref("DeviceOrientationEvent") }}
    • +
  • Detecting device orientation
    • +
diff --git a/files/fr/web/api/devicemotionevent/rotationrate/index.html b/files/fr/web/api/devicemotionevent/rotationrate/index.html deleted file mode 100644 index d12e2c76d7..0000000000 --- a/files/fr/web/api/devicemotionevent/rotationrate/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: DeviceMotionEvent.rotationRate -slug: Web/API/DeviceMotionEvent/rotationRate -tags: - - API - - DOM - - Mobile - - Orientation - - Propriété - - Vitesse -translation_of: Web/API/DeviceMotionEvent/rotationRate ---- -

{{ ApiRef("Device Orientation Events") }}

- -

La propriété rotationRate renvoie la vitesse de rotation de l'appareil autour de chacun de ses axes en degrés par seconde.

- -
-

Note : Si le matériel n'est pas capable de fournir cette information, la propriété renvoie null.

-
- -

Syntaxe

- -
var rates = instanceOfDeviceMotionEvent.rotationRate;
-
- -

Valeurs

- -

La propriété rotationRates est un objet en lecture seule décrivant la vitesse de rotation d'un appareil autour de chacun de ses axes :

- -
-
alpha
-
La vitesse de rotation de l'appareil sur son axe Z ; c'est-à-dire déplacé autour d'une ligne perpendiculaire à l'écran.
-
beta
-
La vitesse de rotation de l'appareil sur son axe X ; c'est-à-dire de l'avant vers l'arrière.
-
gamma
-
La vitesse de rotation de l'appareil sur son axe Y ; c'est-à-dire d'un côté à l'autre.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DeviceMotionEvent.rotationRate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/devicemotionevent/rotationrate/index.md b/files/fr/web/api/devicemotionevent/rotationrate/index.md new file mode 100644 index 0000000000..d12e2c76d7 --- /dev/null +++ b/files/fr/web/api/devicemotionevent/rotationrate/index.md @@ -0,0 +1,72 @@ +--- +title: DeviceMotionEvent.rotationRate +slug: Web/API/DeviceMotionEvent/rotationRate +tags: + - API + - DOM + - Mobile + - Orientation + - Propriété + - Vitesse +translation_of: Web/API/DeviceMotionEvent/rotationRate +--- +

{{ ApiRef("Device Orientation Events") }}

+ +

La propriété rotationRate renvoie la vitesse de rotation de l'appareil autour de chacun de ses axes en degrés par seconde.

+ +
+

Note : Si le matériel n'est pas capable de fournir cette information, la propriété renvoie null.

+
+ +

Syntaxe

+ +
var rates = instanceOfDeviceMotionEvent.rotationRate;
+
+ +

Valeurs

+ +

La propriété rotationRates est un objet en lecture seule décrivant la vitesse de rotation d'un appareil autour de chacun de ses axes :

+ +
+
alpha
+
La vitesse de rotation de l'appareil sur son axe Z ; c'est-à-dire déplacé autour d'une ligne perpendiculaire à l'écran.
+
beta
+
La vitesse de rotation de l'appareil sur son axe X ; c'est-à-dire de l'avant vers l'arrière.
+
gamma
+
La vitesse de rotation de l'appareil sur son axe Y ; c'est-à-dire d'un côté à l'autre.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DeviceMotionEvent.rotationRate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html deleted file mode 100644 index 219e4cc1e9..0000000000 --- a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: DeviceRotationRate.alpha -slug: Web/API/DeviceMotionEventRotationRate/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 -original_slug: 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

- -

{{Compat("api.DeviceMotionEventRotationRate.alpha")}}

diff --git a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md new file mode 100644 index 0000000000..219e4cc1e9 --- /dev/null +++ b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md @@ -0,0 +1,56 @@ +--- +title: DeviceRotationRate.alpha +slug: Web/API/DeviceMotionEventRotationRate/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 +original_slug: 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

+ +

{{Compat("api.DeviceMotionEventRotationRate.alpha")}}

diff --git a/files/fr/web/api/devicemotioneventrotationrate/beta/index.html b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html deleted file mode 100644 index a5868c5ca1..0000000000 --- a/files/fr/web/api/devicemotioneventrotationrate/beta/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: DeviceRotationRate.beta -slug: Web/API/DeviceMotionEventRotationRate/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 -original_slug: 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

- -

{{Compat("api.DeviceMotionEventRotationRate.beta")}}

diff --git a/files/fr/web/api/devicemotioneventrotationrate/beta/index.md b/files/fr/web/api/devicemotioneventrotationrate/beta/index.md new file mode 100644 index 0000000000..a5868c5ca1 --- /dev/null +++ b/files/fr/web/api/devicemotioneventrotationrate/beta/index.md @@ -0,0 +1,56 @@ +--- +title: DeviceRotationRate.beta +slug: Web/API/DeviceMotionEventRotationRate/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 +original_slug: 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

+ +

{{Compat("api.DeviceMotionEventRotationRate.beta")}}

diff --git a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html deleted file mode 100644 index 09b40183ba..0000000000 --- a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: DeviceRotationRate.gamma -slug: Web/API/DeviceMotionEventRotationRate/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 -original_slug: 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

- -

{{Compat("api.DeviceMotionEventRotationRate.gamma")}}

diff --git a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md new file mode 100644 index 0000000000..09b40183ba --- /dev/null +++ b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md @@ -0,0 +1,56 @@ +--- +title: DeviceRotationRate.gamma +slug: Web/API/DeviceMotionEventRotationRate/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 +original_slug: 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

+ +

{{Compat("api.DeviceMotionEventRotationRate.gamma")}}

diff --git a/files/fr/web/api/devicemotioneventrotationrate/index.html b/files/fr/web/api/devicemotioneventrotationrate/index.html deleted file mode 100644 index fb363b6c54..0000000000 --- a/files/fr/web/api/devicemotioneventrotationrate/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: DeviceRotationRate -slug: Web/API/DeviceMotionEventRotationRate -tags: - - API - - Coordonnées - - DOM - - Mobile - - Vitesse - - rotation -translation_of: Web/API/DeviceMotionEventRotationRate -translation_of_original: Web/API/DeviceRotationRate -original_slug: 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

- -

{{Compat("api.DeviceMotionEventRotationRate")}}

diff --git a/files/fr/web/api/devicemotioneventrotationrate/index.md b/files/fr/web/api/devicemotioneventrotationrate/index.md new file mode 100644 index 0000000000..fb363b6c54 --- /dev/null +++ b/files/fr/web/api/devicemotioneventrotationrate/index.md @@ -0,0 +1,51 @@ +--- +title: DeviceRotationRate +slug: Web/API/DeviceMotionEventRotationRate +tags: + - API + - Coordonnées + - DOM + - Mobile + - Vitesse + - rotation +translation_of: Web/API/DeviceMotionEventRotationRate +translation_of_original: Web/API/DeviceRotationRate +original_slug: 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

+ +

{{Compat("api.DeviceMotionEventRotationRate")}}

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 9feaac1fdd..0000000000 --- a/files/fr/web/api/deviceorientationevent/absolute/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: DeviceOrientationEvent.absolute -slug: Web/API/DeviceOrientationEvent/absolute -translation_of: Web/API/DeviceOrientationEvent/absolute -original_slug: Web/API/DeviceOrientationEvent.absolute ---- -

{{ ApiRef() }}

- -

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.md b/files/fr/web/api/deviceorientationevent/absolute/index.md new file mode 100644 index 0000000000..9feaac1fdd --- /dev/null +++ b/files/fr/web/api/deviceorientationevent/absolute/index.md @@ -0,0 +1,55 @@ +--- +title: DeviceOrientationEvent.absolute +slug: Web/API/DeviceOrientationEvent/absolute +translation_of: Web/API/DeviceOrientationEvent/absolute +original_slug: Web/API/DeviceOrientationEvent.absolute +--- +

{{ ApiRef() }}

+ +

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/index.html b/files/fr/web/api/deviceorientationevent/index.html deleted file mode 100644 index fed84dfd6d..0000000000 --- a/files/fr/web/api/deviceorientationevent/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: DeviceOrientationEvent -slug: Web/API/DeviceOrientationEvent -tags: - - B2G - - Device Orientation - - Experimental - - Firefox OS - - Mobile - - Orientation - - WebAPI - - events - - évènements -translation_of: Web/API/DeviceOrientationEvent ---- -

{{ApiRef}}{{SeeCompatTable}}

-

Sommaire

-

L'évènement DeviceOrientationEvent met à la disposition du développeur des informations sur l'orientation de l'appareil visitant une page Web

-
-

Attention : à l'heure actuelle, Firefox et Chrome ne gèrent pas les cordonnées de la même façon. Tenez-en compte lors de l'utilisation de cette API.

-
-

Propriétés

-
-
- {{domxref("DeviceOrientationEvent.absolute")}} {{readonlyinline}}
-
- Un booléen, indiquant si l'appareil partage les informations sur son orientation absolue.
-
- {{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}}
-
- Un nombre, représentant le mouvement de l'appareil sur l'axe « z » exprimé en degrés sur une échelle de 0° à 360°.
-
- {{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}}
-
- Un Nombre représentant le déplacement de l'appareil sur l'axe « x », exprimé en degrés sur une échelle de -180° à 180°.
-
- {{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}}
-
- Un nombre représentant le déplacement de l'appareil sur l'axe « y », exprimé en degrés sur une échelle de -90° à 90°.
-
-

Exemple

-
window.addEventListener('deviceorientation', function(event) {
-  console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma);
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DeviceMotionEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/deviceorientationevent/index.md b/files/fr/web/api/deviceorientationevent/index.md new file mode 100644 index 0000000000..fed84dfd6d --- /dev/null +++ b/files/fr/web/api/deviceorientationevent/index.md @@ -0,0 +1,77 @@ +--- +title: DeviceOrientationEvent +slug: Web/API/DeviceOrientationEvent +tags: + - B2G + - Device Orientation + - Experimental + - Firefox OS + - Mobile + - Orientation + - WebAPI + - events + - évènements +translation_of: Web/API/DeviceOrientationEvent +--- +

{{ApiRef}}{{SeeCompatTable}}

+

Sommaire

+

L'évènement DeviceOrientationEvent met à la disposition du développeur des informations sur l'orientation de l'appareil visitant une page Web

+
+

Attention : à l'heure actuelle, Firefox et Chrome ne gèrent pas les cordonnées de la même façon. Tenez-en compte lors de l'utilisation de cette API.

+
+

Propriétés

+
+
+ {{domxref("DeviceOrientationEvent.absolute")}} {{readonlyinline}}
+
+ Un booléen, indiquant si l'appareil partage les informations sur son orientation absolue.
+
+ {{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}}
+
+ Un nombre, représentant le mouvement de l'appareil sur l'axe « z » exprimé en degrés sur une échelle de 0° à 360°.
+
+ {{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}}
+
+ Un Nombre représentant le déplacement de l'appareil sur l'axe « x », exprimé en degrés sur une échelle de -180° à 180°.
+
+ {{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}}
+
+ Un nombre représentant le déplacement de l'appareil sur l'axe « y », exprimé en degrés sur une échelle de -90° à 90°.
+
+

Exemple

+
window.addEventListener('deviceorientation', function(event) {
+  console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma);
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DeviceMotionEvent")}}

+ +

Voir aussi

+ + 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 2b09fac218..0000000000 --- a/files/fr/web/api/document/activeelement/index.html +++ /dev/null @@ -1,21 +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 -original_slug: Web/API/DocumentOrShadowRoot/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

- \ No newline at end of file diff --git a/files/fr/web/api/document/activeelement/index.md b/files/fr/web/api/document/activeelement/index.md new file mode 100644 index 0000000000..2b09fac218 --- /dev/null +++ b/files/fr/web/api/document/activeelement/index.md @@ -0,0 +1,21 @@ +--- +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 +original_slug: Web/API/DocumentOrShadowRoot/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

+ \ No newline at end of file diff --git a/files/fr/web/api/document/adoptnode/index.html b/files/fr/web/api/document/adoptnode/index.html deleted file mode 100644 index 3c5270aa80..0000000000 --- a/files/fr/web/api/document/adoptnode/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Document.adoptNode() -slug: Web/API/Document/adoptNode -tags: - - API - - DOM - - Document - - Méthodes - - Noeuds - - Propriétaire -translation_of: Web/API/Document/adoptNode ---- -
{{ ApiRef("DOM") }}
- -
 
- -

Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son ownerDocument (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours.

- -

Pris en charge depuis Gecko 1.9 (Firefox 3)

- -

Syntaxe

- -
node = document.adoptNode(externalNode);
-
- -
-
   node
-
est le noeud adopté  qui a maintenant ce document en tant que son ownerDocument (document propriétaire). Le parentNode du noeud est null, car il n'a pas encore été inséré dans l'arborescence du document.  Notez que node et externalNode sont le même objet après cet appel.  
-
externalNode
-
est le noeud à adopter existant dans un autre document.
-
- -

Exemple

- -
var iframe = document.getElementById('my-iframe');
-var iframeImages = iframe.contentDocument.getElementsByTagName('img');
-
-var newParent = document.getElementByTagName('images');
-
-for (var i = 0; i < iframeImages.length; i++) {
-    newParent.appendChild(document.adoptNode(iframeImages[i]));
-}
-
- -

Notes

- -

En général l'appel de adoptNode peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur.

- -

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.

- - -

Spécification

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/adoptnode/index.md b/files/fr/web/api/document/adoptnode/index.md new file mode 100644 index 0000000000..3c5270aa80 --- /dev/null +++ b/files/fr/web/api/document/adoptnode/index.md @@ -0,0 +1,68 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +tags: + - API + - DOM + - Document + - Méthodes + - Noeuds + - Propriétaire +translation_of: Web/API/Document/adoptNode +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son ownerDocument (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours.

+ +

Pris en charge depuis Gecko 1.9 (Firefox 3)

+ +

Syntaxe

+ +
node = document.adoptNode(externalNode);
+
+ +
+
   node
+
est le noeud adopté  qui a maintenant ce document en tant que son ownerDocument (document propriétaire). Le parentNode du noeud est null, car il n'a pas encore été inséré dans l'arborescence du document.  Notez que node et externalNode sont le même objet après cet appel.  
+
externalNode
+
est le noeud à adopter existant dans un autre document.
+
+ +

Exemple

+ +
var iframe = document.getElementById('my-iframe');
+var iframeImages = iframe.contentDocument.getElementsByTagName('img');
+
+var newParent = document.getElementByTagName('images');
+
+for (var i = 0; i < iframeImages.length; i++) {
+    newParent.appendChild(document.adoptNode(iframeImages[i]));
+}
+
+ +

Notes

+ +

En général l'appel de adoptNode peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur.

+ +

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.

+ + +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/alinkcolor/index.html b/files/fr/web/api/document/alinkcolor/index.html deleted file mode 100644 index 5f8b845548..0000000000 --- a/files/fr/web/api/document/alinkcolor/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Document.alinkColor -slug: Web/API/Document/alinkColor -tags: - - API - - HTML DOM - - Obsolete - - Propriété - - Reference -translation_of: Web/API/Document/alinkColor ---- -
{{APIRef("DOM")}}{{Deprecated_header}}
- -

Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements mousedown et mouseup.

- -

Syntaxe

- -
var color = document.alinkColor;
-document.alinkColor = color;
-
- -

color est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., blue pour bleu, darkblue pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, #0000FF)

- -

Notes

- -

La valeur par défaut pour cette propriété est rouge (#ee000 en hexadécimal) sur Mozilla Firefox.

- -

document.alinkColor est obsolète dans DOM Level 2 HTML (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}.

- -

Une autre alternative est document.body.aLink, même si elle est obsolète dans HTML 4.01 (lien en anglais) en faveur de l'alternative CSS ci-dessus.

- -

Gecko supporte alinkColor/:active et {{Cssxref(":focus")}}. Internet Explorer 6 et 7 supportent alinkColor/:active seulement pour la balise HTML des liens (<a>) et le comportement est le même que :focus sur Gecko. Il n'y a pas de support pour :focus sur IE.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.alinkColor")}}

diff --git a/files/fr/web/api/document/alinkcolor/index.md b/files/fr/web/api/document/alinkcolor/index.md new file mode 100644 index 0000000000..5f8b845548 --- /dev/null +++ b/files/fr/web/api/document/alinkcolor/index.md @@ -0,0 +1,36 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - API + - HTML DOM + - Obsolete + - Propriété + - Reference +translation_of: Web/API/Document/alinkColor +--- +
{{APIRef("DOM")}}{{Deprecated_header}}
+ +

Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements mousedown et mouseup.

+ +

Syntaxe

+ +
var color = document.alinkColor;
+document.alinkColor = color;
+
+ +

color est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., blue pour bleu, darkblue pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, #0000FF)

+ +

Notes

+ +

La valeur par défaut pour cette propriété est rouge (#ee000 en hexadécimal) sur Mozilla Firefox.

+ +

document.alinkColor est obsolète dans DOM Level 2 HTML (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}.

+ +

Une autre alternative est document.body.aLink, même si elle est obsolète dans HTML 4.01 (lien en anglais) en faveur de l'alternative CSS ci-dessus.

+ +

Gecko supporte alinkColor/:active et {{Cssxref(":focus")}}. Internet Explorer 6 et 7 supportent alinkColor/:active seulement pour la balise HTML des liens (<a>) et le comportement est le même que :focus sur Gecko. Il n'y a pas de support pour :focus sur IE.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.alinkColor")}}

diff --git a/files/fr/web/api/document/anchors/index.html b/files/fr/web/api/document/anchors/index.html deleted file mode 100644 index ea16e0f96f..0000000000 --- a/files/fr/web/api/document/anchors/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Document.anchors -slug: Web/API/Document/anchors -translation_of: Web/API/Document/anchors -original_slug: Web/API/Document/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/anchors/index.md b/files/fr/web/api/document/anchors/index.md new file mode 100644 index 0000000000..ea16e0f96f --- /dev/null +++ b/files/fr/web/api/document/anchors/index.md @@ -0,0 +1,81 @@ +--- +title: Document.anchors +slug: Web/API/Document/anchors +translation_of: Web/API/Document/anchors +original_slug: Web/API/Document/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/applets/index.html b/files/fr/web/api/document/applets/index.html deleted file mode 100644 index ea763af9a4..0000000000 --- a/files/fr/web/api/document/applets/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Document.applets -slug: Web/API/Document/applets -translation_of: Web/API/Document/applets ---- -

{{ ApiRef() }}

- -

applets retourne une liste ordonnée des applets contenus dans un document.

-

Syntaxe

-
nodeList = document.applets
-
-

Exemple

-
// ( Si vous savez que le second applet est celui que vous voulez )
-my_java_app = document.applets[1];
-
-

Spécification

-

DOM Level 2 HTML: applets

diff --git a/files/fr/web/api/document/applets/index.md b/files/fr/web/api/document/applets/index.md new file mode 100644 index 0000000000..ea763af9a4 --- /dev/null +++ b/files/fr/web/api/document/applets/index.md @@ -0,0 +1,17 @@ +--- +title: Document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +

{{ ApiRef() }}

+ +

applets retourne une liste ordonnée des applets contenus dans un document.

+

Syntaxe

+
nodeList = document.applets
+
+

Exemple

+
// ( Si vous savez que le second applet est celui que vous voulez )
+my_java_app = document.applets[1];
+
+

Spécification

+

DOM Level 2 HTML: applets

diff --git a/files/fr/web/api/document/bgcolor/index.html b/files/fr/web/api/document/bgcolor/index.html deleted file mode 100644 index b379774259..0000000000 --- a/files/fr/web/api/document/bgcolor/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Document.bgColor -slug: Web/API/Document/bgColor -translation_of: Web/API/Document/bgColor ---- -

{{APIRef("DOM")}} {{ Deprecated_header() }}

- -

La propriété obsolète bgColor renvoie ou déinit la couleur de fond (background-color) du document courant.

- -

Syntaxe

- -
color = document.bgColor
-document.bgColor =color
-
- -

Parametres

- -
    -
  • color est une chaîne de caractères représentant la couleur comme un mot (e.g., "red") ou une valeur hexadécimale (e.g., "#ff0000").
    • -
- -

Exemple

- -
document.bgColor = "darkblue";
-
- -

Notes

- -

La valeur par défaut pour cette propriété sur Firefox est le blanc (#ffffff en hexadécimal).

- -

document.bgColor est obsolète dans le DOM Niveau 2 HTML. L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec document.body.style.backgroundColor. Une autre alternative est document.body.bgColor, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.bgColor")}}

diff --git a/files/fr/web/api/document/bgcolor/index.md b/files/fr/web/api/document/bgcolor/index.md new file mode 100644 index 0000000000..b379774259 --- /dev/null +++ b/files/fr/web/api/document/bgcolor/index.md @@ -0,0 +1,35 @@ +--- +title: Document.bgColor +slug: Web/API/Document/bgColor +translation_of: Web/API/Document/bgColor +--- +

{{APIRef("DOM")}} {{ Deprecated_header() }}

+ +

La propriété obsolète bgColor renvoie ou déinit la couleur de fond (background-color) du document courant.

+ +

Syntaxe

+ +
color = document.bgColor
+document.bgColor =color
+
+ +

Parametres

+ +
    +
  • color est une chaîne de caractères représentant la couleur comme un mot (e.g., "red") ou une valeur hexadécimale (e.g., "#ff0000").
    • +
+ +

Exemple

+ +
document.bgColor = "darkblue";
+
+ +

Notes

+ +

La valeur par défaut pour cette propriété sur Firefox est le blanc (#ffffff en hexadécimal).

+ +

document.bgColor est obsolète dans le DOM Niveau 2 HTML. L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec document.body.style.backgroundColor. Une autre alternative est document.body.bgColor, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.bgColor")}}

diff --git a/files/fr/web/api/document/body/index.html b/files/fr/web/api/document/body/index.html deleted file mode 100644 index 57a6cdfe79..0000000000 --- a/files/fr/web/api/document/body/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: document.body -slug: Web/API/Document/body -tags: - - DOM - - Référence_du_DOM_Gecko -translation_of: Web/API/Document/body ---- -
- {{ApiRef}}
-

Retourne l'élément <body> ou <frameset> du document courant.

-

Syntaxe

-
var objRef = document.body;
-document.body = objRef;
-

Exemple

-
// dans le HTML: <body id="ancienElementBody"></body>
-alert(document.body.id); // "ancienElementBody"
-
-var unNouvelElementBody = document.createElement("body");
-
-unNouvelElementBody .id = "nouvelElementBody";
-document.body = unNouvelElementBody ;
-alert(document.body.id); // "nouvelElementBody"
-
-

Notes

-

document.body est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément <body> celui-ci est retourné, et dans les documents de type frameset l'élément <frameset> le plus extérieur est retourné.

-

Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du <body> existant.

-

Spécification

- diff --git a/files/fr/web/api/document/body/index.md b/files/fr/web/api/document/body/index.md new file mode 100644 index 0000000000..57a6cdfe79 --- /dev/null +++ b/files/fr/web/api/document/body/index.md @@ -0,0 +1,31 @@ +--- +title: document.body +slug: Web/API/Document/body +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/Document/body +--- +
+ {{ApiRef}}
+

Retourne l'élément <body> ou <frameset> du document courant.

+

Syntaxe

+
var objRef = document.body;
+document.body = objRef;
+

Exemple

+
// dans le HTML: <body id="ancienElementBody"></body>
+alert(document.body.id); // "ancienElementBody"
+
+var unNouvelElementBody = document.createElement("body");
+
+unNouvelElementBody .id = "nouvelElementBody";
+document.body = unNouvelElementBody ;
+alert(document.body.id); // "nouvelElementBody"
+
+

Notes

+

document.body est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément <body> celui-ci est retourné, et dans les documents de type frameset l'élément <frameset> le plus extérieur est retourné.

+

Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du <body> existant.

+

Spécification

+ diff --git a/files/fr/web/api/document/caretrangefrompoint/index.html b/files/fr/web/api/document/caretrangefrompoint/index.html deleted file mode 100644 index ed72fe6bd7..0000000000 --- a/files/fr/web/api/document/caretrangefrompoint/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Document.caretRangeFromPoint() -slug: Web/API/Document/caretRangeFromPoint -tags: - - API - - DOM - - Document - - Insertion - - Méthode -translation_of: Web/API/Document/caretRangeFromPoint ---- -

{{APIRef("DOM")}}{{Non-standard_header}} 

- -

La méthode caretRangeFromPoint() de l'interface {{domxref("Document")}} renvoie un objet "Range" (chaîne) pour le fragment de document aux coordonnées spécifiées.

- -

Syntaxe

- -
var range = document.caretRangeFromPoint(float x, float y);
-
- -

Retourne

- -

Une des réponses suivantes :

- -
    -
  • Un {{domxref("Range")}}.
    • -
  • Null si x ou y sont négatifs, hors de la fenêtre, ou s'il n'y a pas de noeud d'entrée de texte.
    • -
- -

Paramètres

- -
-
x
-
Une position horizontale dans la fenêtre courante.
-
y
-
Une position verticale dans la fenêtre courante.
-
- -

Exemple

- -

Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :

- -

Contenu HTML

- -
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
-sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
- -

Contenu JavaScript

- -
function insertBreakAtPoint(e) {
-
-    var range;
-    var textNode;
-    var offset;
-
-    if (document.caretPositionFromPoint) {
-        range = document.caretPositionFromPoint(e.clientX, e.clientY);
-        textNode = range.offsetNode;
-        offset = range.offset;
-
-    } else if (document.caretRangeFromPoint) {
-        range = document.caretRangeFromPoint(e.clientX, e.clientY);
-        textNode = range.startContainer;
-        offset = range.startOffset;
-    }
-
-    // divise seulement les TEXT_NODE (noeuds texte)
-    if (textNode && textNode.nodeType == 3) {
-        var replacement = textNode.splitText(offset);
-        var br = document.createElement('br');
-        textNode.parentNode.insertBefore(br, replacement);
-    }
-}
-
-var paragraphs = document.getElementsByTagName("p");
-for (i=0 ; i < paragraphs.length; i++) {
-    paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
-}
- -

{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}

- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.caretRangeFromPoint")}}

diff --git a/files/fr/web/api/document/caretrangefrompoint/index.md b/files/fr/web/api/document/caretrangefrompoint/index.md new file mode 100644 index 0000000000..ed72fe6bd7 --- /dev/null +++ b/files/fr/web/api/document/caretrangefrompoint/index.md @@ -0,0 +1,86 @@ +--- +title: Document.caretRangeFromPoint() +slug: Web/API/Document/caretRangeFromPoint +tags: + - API + - DOM + - Document + - Insertion + - Méthode +translation_of: Web/API/Document/caretRangeFromPoint +--- +

{{APIRef("DOM")}}{{Non-standard_header}} 

+ +

La méthode caretRangeFromPoint() de l'interface {{domxref("Document")}} renvoie un objet "Range" (chaîne) pour le fragment de document aux coordonnées spécifiées.

+ +

Syntaxe

+ +
var range = document.caretRangeFromPoint(float x, float y);
+
+ +

Retourne

+ +

Une des réponses suivantes :

+ +
    +
  • Un {{domxref("Range")}}.
    • +
  • Null si x ou y sont négatifs, hors de la fenêtre, ou s'il n'y a pas de noeud d'entrée de texte.
    • +
+ +

Paramètres

+ +
+
x
+
Une position horizontale dans la fenêtre courante.
+
y
+
Une position verticale dans la fenêtre courante.
+
+ +

Exemple

+ +

Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :

+ +

Contenu HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+ +

Contenu JavaScript

+ +
function insertBreakAtPoint(e) {
+
+    var range;
+    var textNode;
+    var offset;
+
+    if (document.caretPositionFromPoint) {
+        range = document.caretPositionFromPoint(e.clientX, e.clientY);
+        textNode = range.offsetNode;
+        offset = range.offset;
+
+    } else if (document.caretRangeFromPoint) {
+        range = document.caretRangeFromPoint(e.clientX, e.clientY);
+        textNode = range.startContainer;
+        offset = range.startOffset;
+    }
+
+    // divise seulement les TEXT_NODE (noeuds texte)
+    if (textNode && textNode.nodeType == 3) {
+        var replacement = textNode.splitText(offset);
+        var br = document.createElement('br');
+        textNode.parentNode.insertBefore(br, replacement);
+    }
+}
+
+var paragraphs = document.getElementsByTagName("p");
+for (i=0 ; i < paragraphs.length; i++) {
+    paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
+}
+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.caretRangeFromPoint")}}

diff --git a/files/fr/web/api/document/characterset/index.html b/files/fr/web/api/document/characterset/index.html deleted file mode 100644 index d43772b7fb..0000000000 --- a/files/fr/web/api/document/characterset/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Document.characterSet -slug: Web/API/Document/characterSet -tags: - - API - - DOM - - Document - - Property - - Read-only - - Reference -translation_of: Web/API/Document/characterSet ---- -

{{ApiRef("DOM")}}

- -

Document.characterSet propriété en lecture seule, renvoie l'encodage du document en cours. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères.

- -
-

Note : La propriété document.charset et document.inputEncoding sont les alias de document.characterSet. Ne plus les utiliser.

-
- -

Les utilisateurs peuvent surcharger l'encodage indiqué pour le document (transmis par l'en-tête {{HTTPHeader("Content-Type")}} ou via le {{HTMLElement("meta")}} : <meta charset="utf-8">) grâce au menu Affichage → Encodage du texte. Cela peut notamment permettre de corriger le comportement d'un document dont l'encodage indiqué est incorrect.

- -

Syntaxe

- -
var string = document.characterSet
- -

Exemples

- -
<button onclick="console.log(document.characterSet);">
-  Affiche le jeu de caractère
-</button>
-<!-- logs document's character set, such as "ISO-8859-1" or "UTF-8" -->
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationEtatCommentaires
{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.characterSet")}}

diff --git a/files/fr/web/api/document/characterset/index.md b/files/fr/web/api/document/characterset/index.md new file mode 100644 index 0000000000..d43772b7fb --- /dev/null +++ b/files/fr/web/api/document/characterset/index.md @@ -0,0 +1,54 @@ +--- +title: Document.characterSet +slug: Web/API/Document/characterSet +tags: + - API + - DOM + - Document + - Property + - Read-only + - Reference +translation_of: Web/API/Document/characterSet +--- +

{{ApiRef("DOM")}}

+ +

Document.characterSet propriété en lecture seule, renvoie l'encodage du document en cours. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères.

+ +
+

Note : La propriété document.charset et document.inputEncoding sont les alias de document.characterSet. Ne plus les utiliser.

+
+ +

Les utilisateurs peuvent surcharger l'encodage indiqué pour le document (transmis par l'en-tête {{HTTPHeader("Content-Type")}} ou via le {{HTMLElement("meta")}} : <meta charset="utf-8">) grâce au menu Affichage → Encodage du texte. Cela peut notamment permettre de corriger le comportement d'un document dont l'encodage indiqué est incorrect.

+ +

Syntaxe

+ +
var string = document.characterSet
+ +

Exemples

+ +
<button onclick="console.log(document.characterSet);">
+  Affiche le jeu de caractère
+</button>
+<!-- logs document's character set, such as "ISO-8859-1" or "UTF-8" -->
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationEtatCommentaires
{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.characterSet")}}

diff --git a/files/fr/web/api/document/clear/index.html b/files/fr/web/api/document/clear/index.html deleted file mode 100644 index 24fab67361..0000000000 --- a/files/fr/web/api/document/clear/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Document.clear() -slug: Web/API/Document/clear -tags: - - API - - Deprecated - - Document - - HTML DOM - - Method - - NeedsExample - - NeedsMarkupWork - - NeedsSpecTable - - Reference -translation_of: Web/API/Document/clear ---- -

{{APIRef("DOM")}}{{ Deprecated_header() }}

- -

Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla.

- -

Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien.

- -

Syntaxe

- -
document.clear()
-
- -

Spécifications

- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.Document.clear")}}

diff --git a/files/fr/web/api/document/clear/index.md b/files/fr/web/api/document/clear/index.md new file mode 100644 index 0000000000..24fab67361 --- /dev/null +++ b/files/fr/web/api/document/clear/index.md @@ -0,0 +1,37 @@ +--- +title: Document.clear() +slug: Web/API/Document/clear +tags: + - API + - Deprecated + - Document + - HTML DOM + - Method + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Reference +translation_of: Web/API/Document/clear +--- +

{{APIRef("DOM")}}{{ Deprecated_header() }}

+ +

Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla.

+ +

Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien.

+ +

Syntaxe

+ +
document.clear()
+
+ +

Spécifications

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.clear")}}

diff --git a/files/fr/web/api/document/compatmode/index.html b/files/fr/web/api/document/compatmode/index.html deleted file mode 100644 index fd984565fe..0000000000 --- a/files/fr/web/api/document/compatmode/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: document.compatMode -slug: Web/API/Document/compatMode -tags: - - API - - DOM - - Propriété - - Reference -translation_of: Web/API/Document/compatMode ---- -

{{ ApiRef("DOM") }}

- -

Indique si le document est affiché en mode dégradé (Quirks mode) ou dans le respect des standards.

- -

Syntaxe

- -
mode = document.compatMode
-
- -

Valeurs

- -
    -
  • "BackCompat" si le document est a ffiché en mode   "quirks" ; 
    • -
- -
-
mode
-
est une  valeur énumérée qui peut être :
-
- -
    -
  • "CSS1Compat" si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard").
    • -
- -
-
- -
-

Note : tous ces modes sont maintenant définis dans les normes, de sorte que les anciens «standards» et «presque standards» sont absurdes et ne sont plus utilisés dans les normes.

-
- -

Exemple

- -
if (document.compatMode == "BackCompat") {
-  // en mode Quirks
-}
-
- -

Spécifications

- - diff --git a/files/fr/web/api/document/compatmode/index.md b/files/fr/web/api/document/compatmode/index.md new file mode 100644 index 0000000000..fd984565fe --- /dev/null +++ b/files/fr/web/api/document/compatmode/index.md @@ -0,0 +1,53 @@ +--- +title: document.compatMode +slug: Web/API/Document/compatMode +tags: + - API + - DOM + - Propriété + - Reference +translation_of: Web/API/Document/compatMode +--- +

{{ ApiRef("DOM") }}

+ +

Indique si le document est affiché en mode dégradé (Quirks mode) ou dans le respect des standards.

+ +

Syntaxe

+ +
mode = document.compatMode
+
+ +

Valeurs

+ +
    +
  • "BackCompat" si le document est a ffiché en mode   "quirks" ; 
    • +
+ +
+
mode
+
est une  valeur énumérée qui peut être :
+
+ +
    +
  • "CSS1Compat" si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard").
    • +
+ +
+
+ +
+

Note : tous ces modes sont maintenant définis dans les normes, de sorte que les anciens «standards» et «presque standards» sont absurdes et ne sont plus utilisés dans les normes.

+
+ +

Exemple

+ +
if (document.compatMode == "BackCompat") {
+  // en mode Quirks
+}
+
+ +

Spécifications

+ + diff --git a/files/fr/web/api/document/contenttype/index.html b/files/fr/web/api/document/contenttype/index.html deleted file mode 100644 index 32d072bbae..0000000000 --- a/files/fr/web/api/document/contenttype/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Document.contentType -slug: Web/API/Document/contentType -tags: - - API - - DOM - - Document - - MIME - - Propriétés - - Rendu -translation_of: Web/API/Document/contentType ---- -

{{ ApiRef("DOM") }}{{Non-standard_header}}

- -

Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions.

- -

Syntaxe

- -
contentType = document.contentType;
-
- -

contentType est une propriété en lecture seule.

- -

Notes

- -

La  propriété n'est pas affectée par les balises META.

- -

Spécifications

- -

{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}}

diff --git a/files/fr/web/api/document/contenttype/index.md b/files/fr/web/api/document/contenttype/index.md new file mode 100644 index 0000000000..32d072bbae --- /dev/null +++ b/files/fr/web/api/document/contenttype/index.md @@ -0,0 +1,30 @@ +--- +title: Document.contentType +slug: Web/API/Document/contentType +tags: + - API + - DOM + - Document + - MIME + - Propriétés + - Rendu +translation_of: Web/API/Document/contentType +--- +

{{ ApiRef("DOM") }}{{Non-standard_header}}

+ +

Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions.

+ +

Syntaxe

+ +
contentType = document.contentType;
+
+ +

contentType est une propriété en lecture seule.

+ +

Notes

+ +

La  propriété n'est pas affectée par les balises META.

+ +

Spécifications

+ +

{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}}

diff --git a/files/fr/web/api/document/createattribute/index.html b/files/fr/web/api/document/createattribute/index.html deleted file mode 100644 index bfec33bfa2..0000000000 --- a/files/fr/web/api/document/createattribute/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: document.createAttribute -slug: Web/API/Document/createAttribute -tags: - - API - - DOM - - Méthodes - - Reference -translation_of: Web/API/Document/createAttribute ---- -

{{ApiRef("DOM")}}

- -

La méthode Document.createAttribute() crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface {{domxref("Attr")}}. Le DOM n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière.

- -
-

Note : La chaîne de caractères donnée dans le paramètre est convertie en minuscules.

-
- -

Syntaxe

- -
attribut = document.createAttribute(nom)
-
- -

Paramètres

- -
    -
  • nom est une chaîne de caractères contenant le nom de l'attribut.
    • -
- -

Valeur de retour

- -

Un nœud {{domxref("Attr")}}.

- -

Exceptions levées

- -
    -
  • INVALID_CHARACTER_ERR  si le paramètre contient un caractère invalide pour un attribut XML.
    • -
- -

Exemples

- - -
var node = document.getElementById("div1");
-var a = document.createAttribute("my_attrib");
-a.value = "newVal";
-node.setAttributeNode(a);
-console.log(node.getAttribute("my_attrib")); // "newVal"
-
-

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}{{Spec2("DOM WHATWG")}} Comportement précis avec des caractères majuscules.
{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM3 Core')}}Pas de modification.
{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM2 Core')}}Pas de modification.
{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.createAttribute")}}

- -

Voir aussi

- -
    -
  • {{domxref("Document.createElement()")}}
    • -
diff --git a/files/fr/web/api/document/createattribute/index.md b/files/fr/web/api/document/createattribute/index.md new file mode 100644 index 0000000000..bfec33bfa2 --- /dev/null +++ b/files/fr/web/api/document/createattribute/index.md @@ -0,0 +1,91 @@ +--- +title: document.createAttribute +slug: Web/API/Document/createAttribute +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/createAttribute +--- +

{{ApiRef("DOM")}}

+ +

La méthode Document.createAttribute() crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface {{domxref("Attr")}}. Le DOM n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière.

+ +
+

Note : La chaîne de caractères donnée dans le paramètre est convertie en minuscules.

+
+ +

Syntaxe

+ +
attribut = document.createAttribute(nom)
+
+ +

Paramètres

+ +
    +
  • nom est une chaîne de caractères contenant le nom de l'attribut.
    • +
+ +

Valeur de retour

+ +

Un nœud {{domxref("Attr")}}.

+ +

Exceptions levées

+ +
    +
  • INVALID_CHARACTER_ERR  si le paramètre contient un caractère invalide pour un attribut XML.
    • +
+ +

Exemples

+ + +
var node = document.getElementById("div1");
+var a = document.createAttribute("my_attrib");
+a.value = "newVal";
+node.setAttributeNode(a);
+console.log(node.getAttribute("my_attrib")); // "newVal"
+
+

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}{{Spec2("DOM WHATWG")}} Comportement précis avec des caractères majuscules.
{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM3 Core')}}Pas de modification.
{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM2 Core')}}Pas de modification.
{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.createAttribute")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("Document.createElement()")}}
    • +
diff --git a/files/fr/web/api/document/createcdatasection/index.html b/files/fr/web/api/document/createcdatasection/index.html deleted file mode 100644 index f1a44c9a07..0000000000 --- a/files/fr/web/api/document/createcdatasection/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Document.createCDATASection() -slug: Web/API/Document/createCDATASection -tags: - - API - - Création - - DOM - - Document - - Méthode - - Section - - XML - - données -translation_of: Web/API/Document/createCDATASection ---- -
{{APIRef("DOM")}}
- -

createCDATASection() crée un nouveau noeud de section CDATA et le renvoie.

- -

Syntaxe

- -
CDATASectionNode = document.createCDATASection(data)
-
- -
    -
  • CDATASectionNode est un noeud de Section CDATA.
    • -
  • data est une string (chaîne de caractères) contenant les données à ajouter à la section CDATA.
    • -
- -

Exemple

- -
var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")
-
-var cdata = docu.createCDATASection('Some <CDATA> data & then some');
-
-docu.getElementsByTagName('xml')[0].appendChild(cdata);
-
-alert(new XMLSerializer().serializeToString(docu));
-// Affiche : <xml><![CDATA[Some <CDATA> data & then some]]></xml>
-
- -

Notes

- -
    -
  • Cela fonctionnera uniquement avec XML, pas avec les documents HTML (car les documents HTML ne supportent pas les sections CDATA) ; le tenter sur un document HTML va lancer une exception NOT_SUPPORTED_ERR.
    • -
  • Va lancer une exception NS_ERROR_DOM_INVALID_CHARACTER_ERR si on essaye de soumettre la séquence CDATA de fermeture ("]]>") en tant que partie des données ; les données fournies par l'utilisateur non échappées, ne peuvent pas être utilisées en toute sécurité sans qu'avec cette méthode on obtienne cette exception (createTextNode() peut souvent être utilisé à sa place).
    • -
- -

Spécification

- - diff --git a/files/fr/web/api/document/createcdatasection/index.md b/files/fr/web/api/document/createcdatasection/index.md new file mode 100644 index 0000000000..f1a44c9a07 --- /dev/null +++ b/files/fr/web/api/document/createcdatasection/index.md @@ -0,0 +1,52 @@ +--- +title: Document.createCDATASection() +slug: Web/API/Document/createCDATASection +tags: + - API + - Création + - DOM + - Document + - Méthode + - Section + - XML + - données +translation_of: Web/API/Document/createCDATASection +--- +
{{APIRef("DOM")}}
+ +

createCDATASection() crée un nouveau noeud de section CDATA et le renvoie.

+ +

Syntaxe

+ +
CDATASectionNode = document.createCDATASection(data)
+
+ +
    +
  • CDATASectionNode est un noeud de Section CDATA.
    • +
  • data est une string (chaîne de caractères) contenant les données à ajouter à la section CDATA.
    • +
+ +

Exemple

+ +
var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")
+
+var cdata = docu.createCDATASection('Some <CDATA> data & then some');
+
+docu.getElementsByTagName('xml')[0].appendChild(cdata);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche : <xml><![CDATA[Some <CDATA> data & then some]]></xml>
+
+ +

Notes

+ +
    +
  • Cela fonctionnera uniquement avec XML, pas avec les documents HTML (car les documents HTML ne supportent pas les sections CDATA) ; le tenter sur un document HTML va lancer une exception NOT_SUPPORTED_ERR.
    • +
  • Va lancer une exception NS_ERROR_DOM_INVALID_CHARACTER_ERR si on essaye de soumettre la séquence CDATA de fermeture ("]]>") en tant que partie des données ; les données fournies par l'utilisateur non échappées, ne peuvent pas être utilisées en toute sécurité sans qu'avec cette méthode on obtienne cette exception (createTextNode() peut souvent être utilisé à sa place).
    • +
+ +

Spécification

+ + diff --git a/files/fr/web/api/document/createcomment/index.html b/files/fr/web/api/document/createcomment/index.html deleted file mode 100644 index 5e16be2ecb..0000000000 --- a/files/fr/web/api/document/createcomment/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: document.createComment -slug: Web/API/Document/createComment -tags: - - API - - DOM - - Méthodes - - Reference -translation_of: Web/API/Document/createComment ---- -
{{APIRef("DOM")}}
- -

createComment() crée et retourne un nouveau noeud de type commentaire.

- -

Syntaxe

- -
CommentNode = document.createComment(data)
-
- -

Paramètres

- -
-
data
-
Une chaîne de caractères représentant le contenu du commentaire.
-
- -

Exemple

- -
var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml");
-var comment = docu.createComment('Voici un commentaire pas très bien caché');
-
-docu.getElementsByTagName('xml')[0].appendChild(comment);
-
-alert(new XMLSerializer().serializeToString(docu));
-// Affiche: <xml><!--Voici un commentaire pas très bien caché--></xml>
- -

Spécification

- - diff --git a/files/fr/web/api/document/createcomment/index.md b/files/fr/web/api/document/createcomment/index.md new file mode 100644 index 0000000000..5e16be2ecb --- /dev/null +++ b/files/fr/web/api/document/createcomment/index.md @@ -0,0 +1,41 @@ +--- +title: document.createComment +slug: Web/API/Document/createComment +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/createComment +--- +
{{APIRef("DOM")}}
+ +

createComment() crée et retourne un nouveau noeud de type commentaire.

+ +

Syntaxe

+ +
CommentNode = document.createComment(data)
+
+ +

Paramètres

+ +
+
data
+
Une chaîne de caractères représentant le contenu du commentaire.
+
+ +

Exemple

+ +
var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml");
+var comment = docu.createComment('Voici un commentaire pas très bien caché');
+
+docu.getElementsByTagName('xml')[0].appendChild(comment);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche: <xml><!--Voici un commentaire pas très bien caché--></xml>
+ +

Spécification

+ + diff --git a/files/fr/web/api/document/createdocumentfragment/index.html b/files/fr/web/api/document/createdocumentfragment/index.html deleted file mode 100644 index 629d26ed27..0000000000 --- a/files/fr/web/api/document/createdocumentfragment/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: document.createDocumentFragment -slug: Web/API/Document/createDocumentFragment -tags: - - API - - DOM - - Document - - HTML - - Méthode - - Reference -translation_of: Web/API/Document/createDocumentFragment ---- -
{{ApiRef("DOM")}}
- -

Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}.

- -

Syntaxe

- -
var fragment = document.createDocumentFragment();
-
- -

fragment est une référence vers un objet vide de type {{domxref("DocumentFragment")}} .

- -

Description

- -

Les objets DocumentFragments sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.

- -

Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de reflow (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une amélioration des performances.

- -

Exemple

- -

Cet exemple crée une liste des principaux navigateurs du web.

- -

HTML

- -
<ul id="ul">
-</ul>
- -

JavaScript

- -
var element  = document.getElementById('ul'); // en supposant qu'ul existe
-var fragment = document.createDocumentFragment();
-var browsers = ['Firefox', 'Chrome', 'Opera',
-    'Safari', 'Internet Explorer'];
-
-browsers.forEach(function(browser) {
-    var li = document.createElement('li');
-    li.textContent = browser;
-    fragment.appendChild(li);
-});
-
-element.appendChild(fragment);
- -

Résultat

- -

{{EmbedLiveSample("Example", 600, 140)}}

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM WHATWG')}}Définition initiale dans la spécification DOM 1.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.createDocumentFragment")}}

- -

Voir aussi

-
- - diff --git a/files/fr/web/api/document/createdocumentfragment/index.md b/files/fr/web/api/document/createdocumentfragment/index.md new file mode 100644 index 0000000000..629d26ed27 --- /dev/null +++ b/files/fr/web/api/document/createdocumentfragment/index.md @@ -0,0 +1,87 @@ +--- +title: document.createDocumentFragment +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - Document + - HTML + - Méthode + - Reference +translation_of: Web/API/Document/createDocumentFragment +--- +
{{ApiRef("DOM")}}
+ +

Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}.

+ +

Syntaxe

+ +
var fragment = document.createDocumentFragment();
+
+ +

fragment est une référence vers un objet vide de type {{domxref("DocumentFragment")}} .

+ +

Description

+ +

Les objets DocumentFragments sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.

+ +

Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de reflow (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une amélioration des performances.

+ +

Exemple

+ +

Cet exemple crée une liste des principaux navigateurs du web.

+ +

HTML

+ +
<ul id="ul">
+</ul>
+ +

JavaScript

+ +
var element  = document.getElementById('ul'); // en supposant qu'ul existe
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+ +

Résultat

+ +

{{EmbedLiveSample("Example", 600, 140)}}

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM WHATWG')}}Définition initiale dans la spécification DOM 1.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.createDocumentFragment")}}

+ +

Voir aussi

+
+ + diff --git a/files/fr/web/api/document/createelement/index.html b/files/fr/web/api/document/createelement/index.html deleted file mode 100644 index aaf9bf831b..0000000000 --- a/files/fr/web/api/document/createelement/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: document.createElement -slug: Web/API/Document/createElement -tags: - - API - - Création - - DOM - - Document - - Elements - - Méthodes -translation_of: Web/API/Document/createElement ---- -
{{APIRef("DOM")}}
- -

Dans un document HTML, la méthode document.createElement() crée un élément HTML du type spécifié par tagName ou un {{domxref("HTMLUnknownElement")}} si tagName n’est pas reconnu.

- -

Syntaxe

- -
var element = document.createElement(tagName[, options]);
- -

Paramètres

- -
-
tagName
-
Une chaîne de caractères ({{domxref("DOMString")}}) spécifiant le type d’élément à créer. Le {{domxref("Node.nodeName", "nodeName")}} (nom du noeud) de l’élément créé est initialisé avec la valeur de tagName. N’utilisez pas le nom qualifié (comme "html:a") avec cette méthode. Quand elle est appelée sur un document HTML, createElement() convertit tagName en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, createElement(null) fonctionne comme createElement("null").
-
options{{optional_inline}}
-
-

Un objet ElementCreationOptions facultatif contenant une seule propriété nommée is dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec customElements.define(). Voir {{anch("Web component example")}} pour plus de détails.

-
-
- -

Valeur de retour

- -

L’objet {{domxref("Element")}} créé.

- -

Exemples

- -

Exemple de base

- -

Ici est créé un nouveau <div> qui est inséré avant l’élément avec l’identifiant "div1".

- -

HTML

- -
<!DOCTYPE html>
-<html>
-<head>
-  <title>||Working with elements||</title>
-</head>
-<body>
-  <div id="div1">The text above has been created dynamically.</div>
-</body>
-</html>
- -

JavaScript

- -
document.body.onload = addElement;
-
-function addElement () {
-  // crée un nouvel élément div
-  var newDiv = document.createElement("div");
-  // et lui donne un peu de contenu
-  var newContent = document.createTextNode('Hi there and greetings!');
-  // ajoute le nœud texte au nouveau div créé
-  newDiv.appendChild(newContent);
-
-  // ajoute le nouvel élément créé et son contenu dans le DOM
-  var currentDiv = document.getElementById('div1');
-  document.body.insertBefore(newDiv, currentDiv);
-}
- -

{{EmbedLiveSample("Basic_example", 500, 50)}}

- -

Exemple de composant web

- -

L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}.

- -
// Crée une classe pour l’élément
-class ExpandingList extends HTMLUListElement {
-  constructor() {
-    // Toujours appeler « super » en premier dans le constructeur
-    super();
-
-    // définition du constructeur omise pour la brièveté
-    ...
-  }
-}
-
-// Définit le nouvel élément
-customElements.define('expanding-list', ExpandingList, { extends: 'ul' });
- -

Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante :

- -
let expandingList = document.createElement('ul', { is : 'expanding-list' })
- -

Le nouvel élément donnera un attribut is dont la valeur est la balise de nom de l’élément personnalisé.

- -
-

Note : Pour la rétrocompatibilité avec les versions précédentes de la spécification des éléments personnalisés, quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé.

-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.createElement")}}

- -

Notes CSS Quantum

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/createelement/index.md b/files/fr/web/api/document/createelement/index.md new file mode 100644 index 0000000000..aaf9bf831b --- /dev/null +++ b/files/fr/web/api/document/createelement/index.md @@ -0,0 +1,137 @@ +--- +title: document.createElement +slug: Web/API/Document/createElement +tags: + - API + - Création + - DOM + - Document + - Elements + - Méthodes +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

Dans un document HTML, la méthode document.createElement() crée un élément HTML du type spécifié par tagName ou un {{domxref("HTMLUnknownElement")}} si tagName n’est pas reconnu.

+ +

Syntaxe

+ +
var element = document.createElement(tagName[, options]);
+ +

Paramètres

+ +
+
tagName
+
Une chaîne de caractères ({{domxref("DOMString")}}) spécifiant le type d’élément à créer. Le {{domxref("Node.nodeName", "nodeName")}} (nom du noeud) de l’élément créé est initialisé avec la valeur de tagName. N’utilisez pas le nom qualifié (comme "html:a") avec cette méthode. Quand elle est appelée sur un document HTML, createElement() convertit tagName en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, createElement(null) fonctionne comme createElement("null").
+
options{{optional_inline}}
+
+

Un objet ElementCreationOptions facultatif contenant une seule propriété nommée is dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec customElements.define(). Voir {{anch("Web component example")}} pour plus de détails.

+
+
+ +

Valeur de retour

+ +

L’objet {{domxref("Element")}} créé.

+ +

Exemples

+ +

Exemple de base

+ +

Ici est créé un nouveau <div> qui est inséré avant l’élément avec l’identifiant "div1".

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Working with elements||</title>
+</head>
+<body>
+  <div id="div1">The text above has been created dynamically.</div>
+</body>
+</html>
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // crée un nouvel élément div
+  var newDiv = document.createElement("div");
+  // et lui donne un peu de contenu
+  var newContent = document.createTextNode('Hi there and greetings!');
+  // ajoute le nœud texte au nouveau div créé
+  newDiv.appendChild(newContent);
+
+  // ajoute le nouvel élément créé et son contenu dans le DOM
+  var currentDiv = document.getElementById('div1');
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

Exemple de composant web

+ +

L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}.

+ +
// Crée une classe pour l’élément
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Toujours appeler « super » en premier dans le constructeur
+    super();
+
+    // définition du constructeur omise pour la brièveté
+    ...
+  }
+}
+
+// Définit le nouvel élément
+customElements.define('expanding-list', ExpandingList, { extends: 'ul' });
+ +

Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante :

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

Le nouvel élément donnera un attribut is dont la valeur est la balise de nom de l’élément personnalisé.

+ +
+

Note : Pour la rétrocompatibilité avec les versions précédentes de la spécification des éléments personnalisés, quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé.

+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.createElement")}}

+ +

Notes CSS Quantum

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/createelementns/index.html b/files/fr/web/api/document/createelementns/index.html deleted file mode 100644 index 4949f5203e..0000000000 --- a/files/fr/web/api/document/createelementns/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: document.createElementNS -slug: Web/API/Document/createElementNS -tags: - - API - - Création - - DOM - - Document - - Elements - - Méthodes - - URI -translation_of: Web/API/Document/createElementNS ---- -
{{ApiRef("DOM")}}
- -

Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié.

- -

Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode createElement .

- -

Syntaxe

- -
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
- -

Paramètres

- -
-
namespaceURI
-
est une chaîne de caractères qui spécifie l'URI de l'espace de noms à associer à l'élément. La propriété namespaceURI de l'élément créé est initialisée avec la valeur de namespaceURI. voir URI d'espaces de nom valides
-
qualifiedName
-
est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété nodeName de l'élément créé est initialisée avec la valeur de qualifiedName
-
Options Facultatif
-

Un objet facultatif ElementCreationOptions contient une propriété unique nommée is, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de  customElements.define() . Pour la rétro-compatibilité avec les versions précédentes de la spécification des éléments personnalisés, quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir  Extending native HTML elements  pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut is dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs.

-
- -

Valeur de retour

- -

Le nouvel element.

- -

URI d'espaces de nom valides

- - - -

Exemple

- -

Cet exemple crée un nouvel élément <div> dans l'espace de noms XHTML et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document XUL très utile, cela montre l'utilisation d'éléments de deux espaces de noms différents au sein d'un même document :

- -
<?xml version="1.0"?>
-<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-      xmlns:html="http://www.w3.org/1999/xhtml"
-      title="||Working with elements||"
-      onload="init()">
-
-<script type="text/javascript"><![CDATA[
- var container;
- var newdiv;
- var txtnode;
-
- function init(){
-   container = document.getElementById("ContainerBox");
-   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
-   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
-   newdiv.appendChild(txtnode);
-   container.appendChild(newdiv);
- }
-
-]]></script>
-
- <vbox id='ContainerBox' flex='1'>
-  <html:div>
-   Le script sur cette page ajoutera du contenu dynamique ci-dessous :
-  </html:div>
- </vbox>
-
-</page>
- -
-

Note : Cet exemple utilise un script interne, ce qui n'est pas recommandé dans les documents XHTML. Cet exemple particulier est en fait un document XUL intégrant du XHTML. Cependant, la recommandation s'applique quand même.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.createElementNS")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/createelementns/index.md b/files/fr/web/api/document/createelementns/index.md new file mode 100644 index 0000000000..4949f5203e --- /dev/null +++ b/files/fr/web/api/document/createelementns/index.md @@ -0,0 +1,113 @@ +--- +title: document.createElementNS +slug: Web/API/Document/createElementNS +tags: + - API + - Création + - DOM + - Document + - Elements + - Méthodes + - URI +translation_of: Web/API/Document/createElementNS +--- +
{{ApiRef("DOM")}}
+ +

Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié.

+ +

Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode createElement .

+ +

Syntaxe

+ +
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
+ +

Paramètres

+ +
+
namespaceURI
+
est une chaîne de caractères qui spécifie l'URI de l'espace de noms à associer à l'élément. La propriété namespaceURI de l'élément créé est initialisée avec la valeur de namespaceURI. voir URI d'espaces de nom valides
+
qualifiedName
+
est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété nodeName de l'élément créé est initialisée avec la valeur de qualifiedName
+
Options Facultatif
+

Un objet facultatif ElementCreationOptions contient une propriété unique nommée is, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de  customElements.define() . Pour la rétro-compatibilité avec les versions précédentes de la spécification des éléments personnalisés, quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir  Extending native HTML elements  pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut is dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs.

+
+ +

Valeur de retour

+ +

Le nouvel element.

+ +

URI d'espaces de nom valides

+ + + +

Exemple

+ +

Cet exemple crée un nouvel élément <div> dans l'espace de noms XHTML et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document XUL très utile, cela montre l'utilisation d'éléments de deux espaces de noms différents au sein d'un même document :

+ +
<?xml version="1.0"?>
+<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Working with elements||"
+      onload="init()">
+
+<script type="text/javascript"><![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]></script>
+
+ <vbox id='ContainerBox' flex='1'>
+  <html:div>
+   Le script sur cette page ajoutera du contenu dynamique ci-dessous :
+  </html:div>
+ </vbox>
+
+</page>
+ +
+

Note : Cet exemple utilise un script interne, ce qui n'est pas recommandé dans les documents XHTML. Cet exemple particulier est en fait un document XUL intégrant du XHTML. Cependant, la recommandation s'applique quand même.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.createElementNS")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/createentityreference/index.html b/files/fr/web/api/document/createentityreference/index.html deleted file mode 100644 index 46269f94bc..0000000000 --- a/files/fr/web/api/document/createentityreference/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Document.createEntityReference() -slug: Web/API/Document/createEntityReference -translation_of: Web/API/Document/createEntityReference ---- -

{{ ApiRef("DOM") }}

- -

{{ obsolete_header("7.0") }}

- -

Avant {{ gecko("7.0") }} cette méthode apparaissait présente mais en raison du bogue {{bug("9850")}}, elle renvoyait toujours uniquement "null". La seule solution consiste à créer un noeud de texte, une section CDATA, une valeur de noeud d'attribut, etc., qui ont la valeur référencée par l'entité, en utilisant Les caractères d'échappement ou fromCharCode() si nécessaire.

- -

Spécifications

- -

createEntityReference

diff --git a/files/fr/web/api/document/createentityreference/index.md b/files/fr/web/api/document/createentityreference/index.md new file mode 100644 index 0000000000..46269f94bc --- /dev/null +++ b/files/fr/web/api/document/createentityreference/index.md @@ -0,0 +1,14 @@ +--- +title: Document.createEntityReference() +slug: Web/API/Document/createEntityReference +translation_of: Web/API/Document/createEntityReference +--- +

{{ ApiRef("DOM") }}

+ +

{{ obsolete_header("7.0") }}

+ +

Avant {{ gecko("7.0") }} cette méthode apparaissait présente mais en raison du bogue {{bug("9850")}}, elle renvoyait toujours uniquement "null". La seule solution consiste à créer un noeud de texte, une section CDATA, une valeur de noeud d'attribut, etc., qui ont la valeur référencée par l'entité, en utilisant Les caractères d'échappement ou fromCharCode() si nécessaire.

+ +

Spécifications

+ +

createEntityReference

diff --git a/files/fr/web/api/document/createevent/index.html b/files/fr/web/api/document/createevent/index.html deleted file mode 100644 index 3cccde91e3..0000000000 --- a/files/fr/web/api/document/createevent/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Document.createEvent() -slug: Web/API/Document/createEvent -tags: - - API - - DOM - - Méthode - - Reference -translation_of: Web/API/Document/createEvent ---- -
-

Attention : De nombreuses méthodes utilisées avec createEvent, tels que initCustomEvent, sont obsolètes. Utilisez le constructeur d'événement à la place.

-
- -
{{ ApiRef("DOM") }}
- -

Crée un event du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à element.dispatchEvent.

- -

Syntaxe

- -
var event = document.createEvent(type);
-
- - - -

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 tout Element ou autre EventTarget.
-elem.dispatchEvent(event);
-
- -

Notes

- -

Les chaînes de type d'événement appropriées pour passer à createEvent () sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement.

- -

Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :

- - - - - - - - - - - - - - - - - - - - - - - - -
Event ModuleStandard event objectGecko also supports
Text event moduleTextEventTextEvents
Keyboard event moduleKeyboardEventKeyEvents
Basic events moduleEventEvents
- -

Spécification

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/createevent/index.md b/files/fr/web/api/document/createevent/index.md new file mode 100644 index 0000000000..3cccde91e3 --- /dev/null +++ b/files/fr/web/api/document/createevent/index.md @@ -0,0 +1,88 @@ +--- +title: Document.createEvent() +slug: Web/API/Document/createEvent +tags: + - API + - DOM + - Méthode + - Reference +translation_of: Web/API/Document/createEvent +--- +
+

Attention : De nombreuses méthodes utilisées avec createEvent, tels que initCustomEvent, sont obsolètes. Utilisez le constructeur d'événement à la place.

+
+ +
{{ ApiRef("DOM") }}
+ +

Crée un event du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à element.dispatchEvent.

+ +

Syntaxe

+ +
var event = document.createEvent(type);
+
+ + + +

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 tout Element ou autre EventTarget.
+elem.dispatchEvent(event);
+
+ +

Notes

+ +

Les chaînes de type d'événement appropriées pour passer à createEvent () sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement.

+ +

Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :

+ + + + + + + + + + + + + + + + + + + + + + + + +
Event ModuleStandard event objectGecko also supports
Text event moduleTextEventTextEvents
Keyboard event moduleKeyboardEventKeyEvents
Basic events moduleEventEvents
+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/createexpression/index.html b/files/fr/web/api/document/createexpression/index.html deleted file mode 100644 index 778ef4bdd4..0000000000 --- a/files/fr/web/api/document/createexpression/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Document.createExpression() -slug: Web/API/Document/createExpression -tags: - - API - - DOM - - Méthode - - XPath -translation_of: Web/API/Document/createExpression ---- -

{{ ApiRef("DOM") }}

- -

Cette méthode compile une XPathExpression qui peut ensuite être utilisée pour des évaluations (répétées).

- -

Syntaxe

- -
xpathExpr = document.createExpression(xpathText, namespaceURLMapper);
-
- -

Paramètres

- - - -

{{ Fx_minversion_note(3, "Avant Firefox 3, vous pouviez appeler cette méthode sur des documents autres que celui que vous aviez prévu d'exécuter avec XPath. Sous Firefox 3, vous devez l'appeler sur le même document.") }}

- -

Valeur retournée

- -

XPathExpression

diff --git a/files/fr/web/api/document/createexpression/index.md b/files/fr/web/api/document/createexpression/index.md new file mode 100644 index 0000000000..778ef4bdd4 --- /dev/null +++ b/files/fr/web/api/document/createexpression/index.md @@ -0,0 +1,31 @@ +--- +title: Document.createExpression() +slug: Web/API/Document/createExpression +tags: + - API + - DOM + - Méthode + - XPath +translation_of: Web/API/Document/createExpression +--- +

{{ ApiRef("DOM") }}

+ +

Cette méthode compile une XPathExpression qui peut ensuite être utilisée pour des évaluations (répétées).

+ +

Syntaxe

+ +
xpathExpr = document.createExpression(xpathText, namespaceURLMapper);
+
+ +

Paramètres

+ + + +

{{ Fx_minversion_note(3, "Avant Firefox 3, vous pouviez appeler cette méthode sur des documents autres que celui que vous aviez prévu d'exécuter avec XPath. Sous Firefox 3, vous devez l'appeler sur le même document.") }}

+ +

Valeur retournée

+ +

XPathExpression

diff --git a/files/fr/web/api/document/createnodeiterator/index.html b/files/fr/web/api/document/createnodeiterator/index.html deleted file mode 100644 index 7183969144..0000000000 --- a/files/fr/web/api/document/createnodeiterator/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Document.createNodeIterator() -slug: Web/API/Document/createNodeIterator -tags: - - API - - DOM - - Méthodes -translation_of: Web/API/Document/createNodeIterator ---- -

{{APIRef("DOM")}}

- -

Renvoie un  nouvel objet NodeIterator.

- -

Syntaxe

- -
var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
-
- -

Valeurs

- -
-
root
-
Le noeud racine à partir duquel commencer la traversée de {{domxref("NodeIterator")}}.
-
whatToShow {{ optional_inline() }}
-
Est un unsigned long (long non signé) facultatif représentant un masque de bits créé par la combinaison des constantes de la propriété NodeFilter. C'est un moyen pratique de filtrage pour certains types de noeuds. Il est par défaut 0xFFFFFFFF représentant la constante SHOW_ALL. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
-
-
filter {{ optional_inline() }}
-
Un objet implémentant l'interface {{ domxref("NodeFilter") }} ; sa méthode acceptNode() sera appelée pour chaque nœud du sous-arbre basé à la racine qui est accepté comme inclus par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds iterables (une simple fonction de rappel peut également être utilisée à la place). La méthode devrait retourner l'un des NodeFilter.FILTER_ACCEPT, NodeFilter.FILTER_REJECT ou NodeFilter.FILTER_SKIP. Voir l'{{anch("Exemple")}}.
-
- -
-

Note : Avant Gecko 12.0 {{geckoRelease("12.0")}}, cette méthode acceptait un quatrième paramètre facultatif (entityReferenceExpansion). Cela ne faisait pas partie de la spécification DOM4 et a donc été supprimé. Ce paramètre indiquait si les enfants des nœuds de référence d'entité étaient visibles ou non par l'itérateur. Puisque de tels noeuds n'ont jamais été créés dans les navigateurs, ce paramètre n'a eu aucun effet.

-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    function(node) {
-        return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-    }
-);
-var pars = [];
-var currentNode;
-
-while (currentNode = nodeIterator.nextNode()) {
-  pars.push(currentNode);
-}
-
-
- -

Compatibilité des navigateurs

- -

Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge

- -

Voir aussi

- - - -

Spécifications

- -

DOM Level 2 Traversal : NodeIterator

diff --git a/files/fr/web/api/document/createnodeiterator/index.md b/files/fr/web/api/document/createnodeiterator/index.md new file mode 100644 index 0000000000..7183969144 --- /dev/null +++ b/files/fr/web/api/document/createnodeiterator/index.md @@ -0,0 +1,139 @@ +--- +title: Document.createNodeIterator() +slug: Web/API/Document/createNodeIterator +tags: + - API + - DOM + - Méthodes +translation_of: Web/API/Document/createNodeIterator +--- +

{{APIRef("DOM")}}

+ +

Renvoie un  nouvel objet NodeIterator.

+ +

Syntaxe

+ +
var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
+
+ +

Valeurs

+ +
+
root
+
Le noeud racine à partir duquel commencer la traversée de {{domxref("NodeIterator")}}.
+
whatToShow {{ optional_inline() }}
+
Est un unsigned long (long non signé) facultatif représentant un masque de bits créé par la combinaison des constantes de la propriété NodeFilter. C'est un moyen pratique de filtrage pour certains types de noeuds. Il est par défaut 0xFFFFFFFF représentant la constante SHOW_ALL. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
+
+
filter {{ optional_inline() }}
+
Un objet implémentant l'interface {{ domxref("NodeFilter") }} ; sa méthode acceptNode() sera appelée pour chaque nœud du sous-arbre basé à la racine qui est accepté comme inclus par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds iterables (une simple fonction de rappel peut également être utilisée à la place). La méthode devrait retourner l'un des NodeFilter.FILTER_ACCEPT, NodeFilter.FILTER_REJECT ou NodeFilter.FILTER_SKIP. Voir l'{{anch("Exemple")}}.
+
+ +
+

Note : Avant Gecko 12.0 {{geckoRelease("12.0")}}, cette méthode acceptait un quatrième paramètre facultatif (entityReferenceExpansion). Cela ne faisait pas partie de la spécification DOM4 et a donc été supprimé. Ce paramètre indiquait si les enfants des nœuds de référence d'entité étaient visibles ou non par l'itérateur. Puisque de tels noeuds n'ont jamais été créés dans les navigateurs, ce paramètre n'a eu aucun effet.

+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    function(node) {
+        return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+    }
+);
+var pars = [];
+var currentNode;
+
+while (currentNode = nodeIterator.nextNode()) {
+  pars.push(currentNode);
+}
+
+
+ +

Compatibilité des navigateurs

+ +

Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge

+ +

Voir aussi

+ + + +

Spécifications

+ +

DOM Level 2 Traversal : NodeIterator

diff --git a/files/fr/web/api/document/creatensresolver/index.html b/files/fr/web/api/document/creatensresolver/index.html deleted file mode 100644 index 1311c87a86..0000000000 --- a/files/fr/web/api/document/creatensresolver/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Document.createNSResolver() -slug: Web/API/Document/createNSResolver -tags: - - API - - DOM - - Méthodes - - XPath -translation_of: Web/API/Document/createNSResolver ---- -

{{ ApiRef("DOM") }}

- -

Crée un XPathNSResolver qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié.

- -

Syntaxe

- -
nsResolver = document.createNSResolver(node);
-
- -

Paramètres

- - - -

Valeur retournée

- - - -

Notes

- -

Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression XPath puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode  lookupNamespaceURI  du DOM de niveau 3 sur les noeuds lors de la résolution de namespaceURI à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de lookupNamespaceURI. Résout aussi correctement le préfixe implicite xml.

- -

Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, p[@id='_myid'] pour xmlns='http://www.w3.org/1999/xhtml'). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que *namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid'] (cette approche fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur comment créer un résolveur d'espace de nom défini par l'utilisateur si vous souhaitez adopter cette dernière approche.

- -

createNSResolver a été introduit dans DOM Niveau 3.

- -

Voir aussi

- - - -

Spécifications

- -

DOM Level 3 XPath Specification : createNSResolver

diff --git a/files/fr/web/api/document/creatensresolver/index.md b/files/fr/web/api/document/creatensresolver/index.md new file mode 100644 index 0000000000..1311c87a86 --- /dev/null +++ b/files/fr/web/api/document/creatensresolver/index.md @@ -0,0 +1,49 @@ +--- +title: Document.createNSResolver() +slug: Web/API/Document/createNSResolver +tags: + - API + - DOM + - Méthodes + - XPath +translation_of: Web/API/Document/createNSResolver +--- +

{{ ApiRef("DOM") }}

+ +

Crée un XPathNSResolver qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié.

+ +

Syntaxe

+ +
nsResolver = document.createNSResolver(node);
+
+ +

Paramètres

+ + + +

Valeur retournée

+ + + +

Notes

+ +

Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression XPath puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode  lookupNamespaceURI  du DOM de niveau 3 sur les noeuds lors de la résolution de namespaceURI à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de lookupNamespaceURI. Résout aussi correctement le préfixe implicite xml.

+ +

Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, p[@id='_myid'] pour xmlns='http://www.w3.org/1999/xhtml'). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que *namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid'] (cette approche fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur comment créer un résolveur d'espace de nom défini par l'utilisateur si vous souhaitez adopter cette dernière approche.

+ +

createNSResolver a été introduit dans DOM Niveau 3.

+ +

Voir aussi

+ + + +

Spécifications

+ +

DOM Level 3 XPath Specification : createNSResolver

diff --git a/files/fr/web/api/document/createprocessinginstruction/index.html b/files/fr/web/api/document/createprocessinginstruction/index.html deleted file mode 100644 index 0bdd5ee83f..0000000000 --- a/files/fr/web/api/document/createprocessinginstruction/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Document.createProcessingInstruction() -slug: Web/API/Document/createProcessingInstruction -tags: - - API - - Création - - DOM - - Méthodes - - Noeuds - - Reference - - Traitement - - instructions -translation_of: Web/API/Document/createProcessingInstruction ---- -
{{APIRef("DOM")}}
- -

createProcessingInstruction() crée un nouveau noeud d'instruction de traitement et le renvoie.

- -

Syntaxe

- -
Processing instruction node = document.createProcessingInstruction(target, data)
-
- -

Paramètres

- - - -

Exceptions

- -
-
NOT_SUPPORTED_ERR
-
Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 {{ geckoRelease("9.0") }} ou antérieurs. Dans Gecko 10.0 {{ geckoRelease("10.0") }} et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML.
-
DOM_INVALID_CHARACTER
-
Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?>") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations.
-
- -

Exemple

- -
var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")
-
-var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
-
-docu.insertBefore(pi, docu.firstChild);
-
-alert(new XMLSerializer().serializeToString(docu));
-// Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/>
-
- -

Spécifications

- -

DOM 4: createProcessingInstruction

diff --git a/files/fr/web/api/document/createprocessinginstruction/index.md b/files/fr/web/api/document/createprocessinginstruction/index.md new file mode 100644 index 0000000000..0bdd5ee83f --- /dev/null +++ b/files/fr/web/api/document/createprocessinginstruction/index.md @@ -0,0 +1,55 @@ +--- +title: Document.createProcessingInstruction() +slug: Web/API/Document/createProcessingInstruction +tags: + - API + - Création + - DOM + - Méthodes + - Noeuds + - Reference + - Traitement + - instructions +translation_of: Web/API/Document/createProcessingInstruction +--- +
{{APIRef("DOM")}}
+ +

createProcessingInstruction() crée un nouveau noeud d'instruction de traitement et le renvoie.

+ +

Syntaxe

+ +
Processing instruction node = document.createProcessingInstruction(target, data)
+
+ +

Paramètres

+ + + +

Exceptions

+ +
+
NOT_SUPPORTED_ERR
+
Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 {{ geckoRelease("9.0") }} ou antérieurs. Dans Gecko 10.0 {{ geckoRelease("10.0") }} et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML.
+
DOM_INVALID_CHARACTER
+
Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?>") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations.
+
+ +

Exemple

+ +
var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")
+
+var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
+
+docu.insertBefore(pi, docu.firstChild);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/>
+
+ +

Spécifications

+ +

DOM 4: createProcessingInstruction

diff --git a/files/fr/web/api/document/createrange/index.html b/files/fr/web/api/document/createrange/index.html deleted file mode 100644 index 9ef3bffc27..0000000000 --- a/files/fr/web/api/document/createrange/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Document.createRange -slug: Web/API/Document/createRange -tags: - - API - - DOM - - Document - - Méthodes -translation_of: Web/API/Document/createRange ---- -
{{APIRef("DOM")}}
- -

Retourne un objet {{domxref("Range")}}.

- -

Syntaxe

- -
range = document.createRange();
-
- -

range devient un objet {{domxref("Range")}}.

- -

Exemple

- -
var range = document.createRange();
-
-range.setStart(startNode, startOffset);
-range.setEnd(endNode, endOffset);
-
- -

Notes

- -

Une fois un objet Range créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes.

- -

Spécification

- - diff --git a/files/fr/web/api/document/createrange/index.md b/files/fr/web/api/document/createrange/index.md new file mode 100644 index 0000000000..9ef3bffc27 --- /dev/null +++ b/files/fr/web/api/document/createrange/index.md @@ -0,0 +1,38 @@ +--- +title: Document.createRange +slug: Web/API/Document/createRange +tags: + - API + - DOM + - Document + - Méthodes +translation_of: Web/API/Document/createRange +--- +
{{APIRef("DOM")}}
+ +

Retourne un objet {{domxref("Range")}}.

+ +

Syntaxe

+ +
range = document.createRange();
+
+ +

range devient un objet {{domxref("Range")}}.

+ +

Exemple

+ +
var range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+
+ +

Notes

+ +

Une fois un objet Range créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes.

+ +

Spécification

+ + diff --git a/files/fr/web/api/document/createtextnode/index.html b/files/fr/web/api/document/createtextnode/index.html deleted file mode 100644 index 7fc4bfe701..0000000000 --- a/files/fr/web/api/document/createtextnode/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: document.createTextNode -slug: Web/API/Document/createTextNode -tags: - - API - - DOM - - Méthodes - - Reference -translation_of: Web/API/Document/createTextNode ---- -

{{APIRef("DOM")}}

- -

Crée un nouveau nœud de texte.

- -

Syntaxe

- -
var text = document.createTextNode(données);
-
- - - -

Exemple

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>createTextNode example</title>
-<script>
-function addTextNode(text) {
-  var newtext = document.createTextNode(text),
-      p1 = document.getElementById("p1");
-
-  p1.appendChild(newtext);
-}
-</script>
-</head>
-
-<body>
-  <button onclick="addTextNode('YES! ');">YES!</button>
-  <button onclick="addTextNode('NO! ');">NO!</button>
-  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
-
-  <hr />
-
-  <p id="p1">First line of paragraph.</p>
-</body>
-</html>
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM3 Core")}}Pas de changement
{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM2 Core")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.createTextNode")}}

diff --git a/files/fr/web/api/document/createtextnode/index.md b/files/fr/web/api/document/createtextnode/index.md new file mode 100644 index 0000000000..7fc4bfe701 --- /dev/null +++ b/files/fr/web/api/document/createtextnode/index.md @@ -0,0 +1,78 @@ +--- +title: document.createTextNode +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/createTextNode +--- +

{{APIRef("DOM")}}

+ +

Crée un nouveau nœud de texte.

+ +

Syntaxe

+ +
var text = document.createTextNode(données);
+
+ + + +

Exemple

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode example</title>
+<script>
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="addTextNode('YES! ');">YES!</button>
+  <button onclick="addTextNode('NO! ');">NO!</button>
+  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
+
+  <hr />
+
+  <p id="p1">First line of paragraph.</p>
+</body>
+</html>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM3 Core")}}Pas de changement
{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM2 Core")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.createTextNode")}}

diff --git a/files/fr/web/api/document/createtreewalker/index.html b/files/fr/web/api/document/createtreewalker/index.html deleted file mode 100644 index 66c736285f..0000000000 --- a/files/fr/web/api/document/createtreewalker/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Document.createTreeWalker() -slug: Web/API/Document/createTreeWalker -tags: - - API - - Arborescence - - DOM - - Document - - Filtre - - Méthodes - - Noeuds -translation_of: Web/API/Document/createTreeWalker ---- -
{{ApiRef("Document")}}
- -

La méthode de création Document.createTreeWalker() renvoie un nouvel objet {{domxref("TreeWalker")}}.

- -

Syntaxe

- -
treeWalker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion);
-
- -

Paramètres

- -
-
root
-
est le {{domxref("Node")}} (noeud) racine du {{domxref("TreeWalker")}} à traverser. Généralement, ce sera un élément appartenant au document.
-
whatToShow {{optional_inline}}
-
est un unsigned long (long non signé) facultatif représentant un masque de bits créé par combinaison des propriétés de constante de NodeFilter. C'est un moyen pratique de filtrage pour certains types de nœuds. Par défaut 0xFFFFFFFF représentant la constante SHOW_ALL. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
-
-
filter {{optional_inline}}
-
est un {{domxref("NodeFilter")}} (filtre de noeud) facultatif, c'est à dire un objet avec une méthode acceptNode appelé par {{domxref("TreeWalker")}} pour déterminer s'il doit accepter ou non un nœud qui a passé le test whatToShow.
-
entityReferenceExpansion {{optional_inline}} {{obsolete_inline}}
-
est un {{domxref("Boolean")}} (booléen) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, son sous-arbre doit être supprimé en même temps.
-
- -

Exemple

- -

L'exemple suivant passe à travers tous les noeuds du "body" (corps du document), réduit l'ensemble des noeuds aux éléments, passe simplement à travers chaque noeud acceptable (à la place, il pourrait réduire l'ensemble dans la méthode acceptNode()), puis utilise l'itérateur de traversée de l'arbre créé pour avancer à travers les nœuds (maintenant tous les éléments) et les écrire dans un tableau.

- -
var treeWalker = document.createTreeWalker(
-  document.body,
-  NodeFilter.SHOW_ELEMENT,
-  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-  false
-);
-
-var nodeList = [];
-
-while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}{{Spec2('DOM WHATWG')}}Suppression du paramètre expandEntityReferences. Les paramètres facultatifs  whatToShow et filter .
{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.createTreeWalker")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/createtreewalker/index.md b/files/fr/web/api/document/createtreewalker/index.md new file mode 100644 index 0000000000..66c736285f --- /dev/null +++ b/files/fr/web/api/document/createtreewalker/index.md @@ -0,0 +1,157 @@ +--- +title: Document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +tags: + - API + - Arborescence + - DOM + - Document + - Filtre + - Méthodes + - Noeuds +translation_of: Web/API/Document/createTreeWalker +--- +
{{ApiRef("Document")}}
+ +

La méthode de création Document.createTreeWalker() renvoie un nouvel objet {{domxref("TreeWalker")}}.

+ +

Syntaxe

+ +
treeWalker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion);
+
+ +

Paramètres

+ +
+
root
+
est le {{domxref("Node")}} (noeud) racine du {{domxref("TreeWalker")}} à traverser. Généralement, ce sera un élément appartenant au document.
+
whatToShow {{optional_inline}}
+
est un unsigned long (long non signé) facultatif représentant un masque de bits créé par combinaison des propriétés de constante de NodeFilter. C'est un moyen pratique de filtrage pour certains types de nœuds. Par défaut 0xFFFFFFFF représentant la constante SHOW_ALL. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
+
+
filter {{optional_inline}}
+
est un {{domxref("NodeFilter")}} (filtre de noeud) facultatif, c'est à dire un objet avec une méthode acceptNode appelé par {{domxref("TreeWalker")}} pour déterminer s'il doit accepter ou non un nœud qui a passé le test whatToShow.
+
entityReferenceExpansion {{optional_inline}} {{obsolete_inline}}
+
est un {{domxref("Boolean")}} (booléen) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, son sous-arbre doit être supprimé en même temps.
+
+ +

Exemple

+ +

L'exemple suivant passe à travers tous les noeuds du "body" (corps du document), réduit l'ensemble des noeuds aux éléments, passe simplement à travers chaque noeud acceptable (à la place, il pourrait réduire l'ensemble dans la méthode acceptNode()), puis utilise l'itérateur de traversée de l'arbre créé pour avancer à travers les nœuds (maintenant tous les éléments) et les écrire dans un tableau.

+ +
var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}{{Spec2('DOM WHATWG')}}Suppression du paramètre expandEntityReferences. Les paramètres facultatifs  whatToShow et filter .
{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.createTreeWalker")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/currentscript/index.html b/files/fr/web/api/document/currentscript/index.html deleted file mode 100644 index d0758e6c1e..0000000000 --- a/files/fr/web/api/document/currentscript/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Document.currentScript -slug: Web/API/Document/currentScript -tags: - - API - - DOM - - Propriété - - Reference - - Script -translation_of: Web/API/Document/currentScript ---- -
{{ApiRef("DOM")}}
- -

Retourne l'élément {{HTMLElement("script")}} dont le script est en cours de traitement.

- -

Syntaxe

- -
var curScriptElement = document.currentScript;
-
- -

Exemple

- -

Cet exemple vérifie si le script s'exécute de manière asynchrone :

- -
if (document.currentScript.async) {
-  console.log("Exécution asynchrone");
-} else {
-  console.log("Exécution synchrone");
-}
- -

Voir l'exemple sur une page

- -

Notes

- -

Il est important de noter que l'élément {{HTMLElement("script")}} ne sera pas référencé si le code dans le script est appelé par une fonction de rappel ou par un gestionnaire d'événements ; seul sera référencé l'élément alors qu'il est initialement en cours d'exécution.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}{{Spec2("HTML WHATWG")}}Définition initiale
- -

Compatibilité navigateur

- -
{{Compat("api.Document.currentScript")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/document/currentscript/index.md b/files/fr/web/api/document/currentscript/index.md new file mode 100644 index 0000000000..d0758e6c1e --- /dev/null +++ b/files/fr/web/api/document/currentscript/index.md @@ -0,0 +1,66 @@ +--- +title: Document.currentScript +slug: Web/API/Document/currentScript +tags: + - API + - DOM + - Propriété + - Reference + - Script +translation_of: Web/API/Document/currentScript +--- +
{{ApiRef("DOM")}}
+ +

Retourne l'élément {{HTMLElement("script")}} dont le script est en cours de traitement.

+ +

Syntaxe

+ +
var curScriptElement = document.currentScript;
+
+ +

Exemple

+ +

Cet exemple vérifie si le script s'exécute de manière asynchrone :

+ +
if (document.currentScript.async) {
+  console.log("Exécution asynchrone");
+} else {
+  console.log("Exécution synchrone");
+}
+ +

Voir l'exemple sur une page

+ +

Notes

+ +

Il est important de noter que l'élément {{HTMLElement("script")}} ne sera pas référencé si le code dans le script est appelé par une fonction de rappel ou par un gestionnaire d'événements ; seul sera référencé l'élément alors qu'il est initialement en cours d'exécution.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}{{Spec2("HTML WHATWG")}}Définition initiale
+ +

Compatibilité navigateur

+ +
{{Compat("api.Document.currentScript")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/defaultview/index.html b/files/fr/web/api/document/defaultview/index.html deleted file mode 100644 index fce4d88134..0000000000 --- a/files/fr/web/api/document/defaultview/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: document.defaultView -slug: Web/API/Document/defaultView -translation_of: Web/API/Document/defaultView ---- -

Dans les navigateurs, cette propriété renvoie l'objet window associé au document ou null si non disponible.

-

Syntaxe

-
var win = document.defaultView;
-

Cette propriété est en lecture seule.

-

Notes

-

D'après quirksmode, defaultView n'est pas supporté dans les versions d'IE inférieures à 9.

-

Spécification

- diff --git a/files/fr/web/api/document/defaultview/index.md b/files/fr/web/api/document/defaultview/index.md new file mode 100644 index 0000000000..fce4d88134 --- /dev/null +++ b/files/fr/web/api/document/defaultview/index.md @@ -0,0 +1,17 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +translation_of: Web/API/Document/defaultView +--- +

Dans les navigateurs, cette propriété renvoie l'objet window associé au document ou null si non disponible.

+

Syntaxe

+
var win = document.defaultView;
+

Cette propriété est en lecture seule.

+

Notes

+

D'après quirksmode, defaultView n'est pas supporté dans les versions d'IE inférieures à 9.

+

Spécification

+ diff --git a/files/fr/web/api/document/designmode/index.html b/files/fr/web/api/document/designmode/index.html deleted file mode 100644 index 0a4edb5920..0000000000 --- a/files/fr/web/api/document/designmode/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Document.designMode -slug: Web/API/Document/designMode -translation_of: Web/API/Document/designMode ---- -
{{ ApiRef() }}
- -

document.designMode contrôle si l'ensemble du document est modifiable. Les valeurs valides sont "on" et "off". Conformément à la spécification, cette propriété est par défaut sur "off". Firefox suit cette norme. Les versions antérieures de Chrome et IE ont par défaut la valeur "inherit". Pour les versions entre IE6-10, la valeur est en majuscule.

- -

Syntaxe

- -
var mode = document.designMode;
-document.designMode = "on";
-document.designMode = "off";
- -

Exemple

- -

Rendre un document {{HTMLElement("iframe")}} éditable

- -
iframe_node.contentDocument.designMode = "on";
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.designMode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/designmode/index.md b/files/fr/web/api/document/designmode/index.md new file mode 100644 index 0000000000..0a4edb5920 --- /dev/null +++ b/files/fr/web/api/document/designmode/index.md @@ -0,0 +1,51 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +translation_of: Web/API/Document/designMode +--- +
{{ ApiRef() }}
+ +

document.designMode contrôle si l'ensemble du document est modifiable. Les valeurs valides sont "on" et "off". Conformément à la spécification, cette propriété est par défaut sur "off". Firefox suit cette norme. Les versions antérieures de Chrome et IE ont par défaut la valeur "inherit". Pour les versions entre IE6-10, la valeur est en majuscule.

+ +

Syntaxe

+ +
var mode = document.designMode;
+document.designMode = "on";
+document.designMode = "off";
+ +

Exemple

+ +

Rendre un document {{HTMLElement("iframe")}} éditable

+ +
iframe_node.contentDocument.designMode = "on";
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.designMode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/dir/index.html b/files/fr/web/api/document/dir/index.html deleted file mode 100644 index 03e94f3230..0000000000 --- a/files/fr/web/api/document/dir/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Document.dir -slug: Web/API/Document/dir -tags: - - API - - Document - - Propriété - - Reference -translation_of: Web/API/Document/dir ---- -

{{ApiRef("")}}

- -

La propriété Document.dir est une chaîne de caractères {{domxref("DOMString")}} représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche. Les valeurs possibles sont 'rtl', droite vers gauche, et 'ltr', gauche vers droite.

- -

Syntaxe

- -
dirStr = document.dir;
-document.dir = dirStr;
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "#dom-document-dir", "Document.dir")}}{{Spec2("HTML WHATWG")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.dir")}}

diff --git a/files/fr/web/api/document/dir/index.md b/files/fr/web/api/document/dir/index.md new file mode 100644 index 0000000000..03e94f3230 --- /dev/null +++ b/files/fr/web/api/document/dir/index.md @@ -0,0 +1,42 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +tags: + - API + - Document + - Propriété + - Reference +translation_of: Web/API/Document/dir +--- +

{{ApiRef("")}}

+ +

La propriété Document.dir est une chaîne de caractères {{domxref("DOMString")}} représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche. Les valeurs possibles sont 'rtl', droite vers gauche, et 'ltr', gauche vers droite.

+ +

Syntaxe

+ +
dirStr = document.dir;
+document.dir = dirStr;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "#dom-document-dir", "Document.dir")}}{{Spec2("HTML WHATWG")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.dir")}}

diff --git a/files/fr/web/api/document/doctype/index.html b/files/fr/web/api/document/doctype/index.html deleted file mode 100644 index 980447cc3c..0000000000 --- a/files/fr/web/api/document/doctype/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Document.doctype -slug: Web/API/Document/doctype -tags: - - API - - DOM - - DTD - - Document - - Propriétés - - Type -translation_of: Web/API/Document/doctype ---- -
{{ApiRef("DOM")}}
- -

Renvoie la "Document Type Declaration (DTD)" (déclaration de type de document) associée avec le document actuel. L'objet renvoyé implémente l'interface {{domxref("DocumentType")}}. Utilisez {{domxref("DOMImplementation.createDocumentType()")}} pour créer un DocumentType.

- -

Syntaxe

- -
doctype = document.doctype;
-
- - - -

Exemple

- -
var doctypeObj = document.doctype;
-
-console.log(
-  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
-  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
-  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
-  "doctypeObj.systemId: "       + doctypeObj.systemId
-);
- -

Notes

- -

La propriété renvoie null si aucune DTD n'est associée au document en cours.

- -

DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM3 Core")}}Valeur de retour modifiée pour les documents HTML avec absence d'élément {{HTMLElement("html")}}. Définit que le type de document peut être modifié.
{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM2 Core")}}Définition initiale
diff --git a/files/fr/web/api/document/doctype/index.md b/files/fr/web/api/document/doctype/index.md new file mode 100644 index 0000000000..980447cc3c --- /dev/null +++ b/files/fr/web/api/document/doctype/index.md @@ -0,0 +1,65 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +tags: + - API + - DOM + - DTD + - Document + - Propriétés + - Type +translation_of: Web/API/Document/doctype +--- +
{{ApiRef("DOM")}}
+ +

Renvoie la "Document Type Declaration (DTD)" (déclaration de type de document) associée avec le document actuel. L'objet renvoyé implémente l'interface {{domxref("DocumentType")}}. Utilisez {{domxref("DOMImplementation.createDocumentType()")}} pour créer un DocumentType.

+ +

Syntaxe

+ +
doctype = document.doctype;
+
+ + + +

Exemple

+ +
var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);
+ +

Notes

+ +

La propriété renvoie null si aucune DTD n'est associée au document en cours.

+ +

DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM3 Core")}}Valeur de retour modifiée pour les documents HTML avec absence d'élément {{HTMLElement("html")}}. Définit que le type de document peut être modifié.
{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM2 Core")}}Définition initiale
diff --git a/files/fr/web/api/document/document/index.html b/files/fr/web/api/document/document/index.html deleted file mode 100644 index 7b0e3c2501..0000000000 --- a/files/fr/web/api/document/document/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Document() -slug: Web/API/Document/Document -tags: - - API - - Constructeur - - DOM - - Document - - Reference -translation_of: Web/API/Document/Document ---- -

{{APIRef}}

- -

Le constructeur Document crée un nouvel objet de {{domxref("Document")}}, lequel c'est la référence de la page courante dans le navigateur et servant comme point d'entrer aux contenus de la page.

- -

Syntaxe

- -
var document = new Document()
- -

Paramètres

- -

None.

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Compatibilité Navigateurs

- -
{{Compat("api.Document.Document")}}
diff --git a/files/fr/web/api/document/document/index.md b/files/fr/web/api/document/document/index.md new file mode 100644 index 0000000000..7b0e3c2501 --- /dev/null +++ b/files/fr/web/api/document/document/index.md @@ -0,0 +1,43 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - Constructeur + - DOM + - Document + - Reference +translation_of: Web/API/Document/Document +--- +

{{APIRef}}

+ +

Le constructeur Document crée un nouvel objet de {{domxref("Document")}}, lequel c'est la référence de la page courante dans le navigateur et servant comme point d'entrer aux contenus de la page.

+ +

Syntaxe

+ +
var document = new Document()
+ +

Paramètres

+ +

None.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Compatibilité Navigateurs

+ +
{{Compat("api.Document.Document")}}
diff --git a/files/fr/web/api/document/documentelement/index.html b/files/fr/web/api/document/documentelement/index.html deleted file mode 100644 index 84e62d8bea..0000000000 --- a/files/fr/web/api/document/documentelement/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: document.documentElement -slug: Web/API/Document/documentElement -tags: - - API - - DOM - - Noeud - - Propriétés - - Racine - - Reference -translation_of: Web/API/Document/documentElement ---- -

{{ ApiRef("DOM") }}

- -

Document.documentElementrenvoie l'Element qui est l'élément racine du document (par exemple, l'élément <html> pour les documents HTML).

- -

Syntaxe

- -
var element = document.documentElement;
-
- -

Exemple

- -
var racine = document.documentElement;
-var premierNiveau = racine.childNodes;
-// premierNiveau est une NodeList des enfants directs de l'élément racine
-for (var i = 0; i < premierNiveau.length; i++) {
-   // fait quelque chose avec chaque enfant direct de l'élément racine
-   // en tant que premierNiveau[i]
-}
-
- -

Notes

- -

Pour tout document HTML non vide, document.documentElement sera toujours un élément {{HTMLElement ("html")}}. Pour tout document XML non vide, document.documentElement sera toujours l'élément racine du document.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM2 Core')}} 
{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM3 Core')}} 
{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM4')}} 
{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Document.documentElement")}}

diff --git a/files/fr/web/api/document/documentelement/index.md b/files/fr/web/api/document/documentelement/index.md new file mode 100644 index 0000000000..84e62d8bea --- /dev/null +++ b/files/fr/web/api/document/documentelement/index.md @@ -0,0 +1,72 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - API + - DOM + - Noeud + - Propriétés + - Racine + - Reference +translation_of: Web/API/Document/documentElement +--- +

{{ ApiRef("DOM") }}

+ +

Document.documentElementrenvoie l'Element qui est l'élément racine du document (par exemple, l'élément <html> pour les documents HTML).

+ +

Syntaxe

+ +
var element = document.documentElement;
+
+ +

Exemple

+ +
var racine = document.documentElement;
+var premierNiveau = racine.childNodes;
+// premierNiveau est une NodeList des enfants directs de l'élément racine
+for (var i = 0; i < premierNiveau.length; i++) {
+   // fait quelque chose avec chaque enfant direct de l'élément racine
+   // en tant que premierNiveau[i]
+}
+
+ +

Notes

+ +

Pour tout document HTML non vide, document.documentElement sera toujours un élément {{HTMLElement ("html")}}. Pour tout document XML non vide, document.documentElement sera toujours l'élément racine du document.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM2 Core')}} 
{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM3 Core')}} 
{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM4')}} 
{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.documentElement")}}

diff --git a/files/fr/web/api/document/documenturi/index.html b/files/fr/web/api/document/documenturi/index.html deleted file mode 100644 index 31e15a16be..0000000000 --- a/files/fr/web/api/document/documenturi/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Document.documentURI -slug: Web/API/Document/documentURI -tags: - - API - - DOM - - Document - - Propriétés - - URI -translation_of: Web/API/Document/documentURI ---- -
{{ApiRef("DOM")}}
- -

La propriété documentURI de l'interface {{domxref("Document")}} renvoie l'emplacement du document sous forme "string" (chaîne de caractères).

- -

Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule.

- -

Syntaxe

- -
var string = document.documentURI;
-
- -

Notes

- -

Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie la même valeur. Contrairement à l'URL, documentURI est disponible pour tous les types de documents.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}{{Spec2('DOM3 Core')}}Définition initiale
- -

Compatibilité des navigateurs

- - - - -

{{Compat("api.Document.documentURI")}}

diff --git a/files/fr/web/api/document/documenturi/index.md b/files/fr/web/api/document/documenturi/index.md new file mode 100644 index 0000000000..31e15a16be --- /dev/null +++ b/files/fr/web/api/document/documenturi/index.md @@ -0,0 +1,54 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +tags: + - API + - DOM + - Document + - Propriétés + - URI +translation_of: Web/API/Document/documentURI +--- +
{{ApiRef("DOM")}}
+ +

La propriété documentURI de l'interface {{domxref("Document")}} renvoie l'emplacement du document sous forme "string" (chaîne de caractères).

+ +

Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule.

+ +

Syntaxe

+ +
var string = document.documentURI;
+
+ +

Notes

+ +

Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie la même valeur. Contrairement à l'URL, documentURI est disponible pour tous les types de documents.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}{{Spec2('DOM3 Core')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + + +

{{Compat("api.Document.documentURI")}}

diff --git a/files/fr/web/api/document/documenturiobject/index.html b/files/fr/web/api/document/documenturiobject/index.html deleted file mode 100644 index cc5030a977..0000000000 --- a/files/fr/web/api/document/documenturiobject/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: document.documentURIObject -slug: Web/API/Document/documentURIObject -tags: - - API - - DOM - - Propriétés - - Reference -translation_of: Web/API/Document/documentURIObject ---- -

{{ ApiRef("DOM") }}

- -

La propriété en lecture seule Document.documentURIObject renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du document.

- -

Cette propriété fonctionne uniquement pour les scripts privilégiés (UniversalXPConnect), comme le code des extensions. Pour le contenu Web, elle n'a aucune signification particulière et peut être utilisée comme n'importe quelle propriété personnalisée.

- -

Dans le cas d'un code privilégié, il convient de faire attention à ne pas essayer d'obtenir ou modifier cette propriété sur un objet de contenu non enveloppé (par exemple sur l'objet wrappedJSObject d'un XPCNativeWrapper). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails.

- -

Syntaxe

- -
var uri = doc.documentURIObject;
- -

Exemple

- -
// Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http »,
-// en supposant que ce code s'exécute dans le contexte de browser.xul
-
-var uriObj = content.document.documentURIObject;
-var uriPort = uriObj.port;
-
-if (uriObj.schemeIs('http')) {
-  ...
-}
-
- -

Spécifications

- -

Ne fait partie d'aucune spécification.

diff --git a/files/fr/web/api/document/documenturiobject/index.md b/files/fr/web/api/document/documenturiobject/index.md new file mode 100644 index 0000000000..cc5030a977 --- /dev/null +++ b/files/fr/web/api/document/documenturiobject/index.md @@ -0,0 +1,38 @@ +--- +title: document.documentURIObject +slug: Web/API/Document/documentURIObject +tags: + - API + - DOM + - Propriétés + - Reference +translation_of: Web/API/Document/documentURIObject +--- +

{{ ApiRef("DOM") }}

+ +

La propriété en lecture seule Document.documentURIObject renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du document.

+ +

Cette propriété fonctionne uniquement pour les scripts privilégiés (UniversalXPConnect), comme le code des extensions. Pour le contenu Web, elle n'a aucune signification particulière et peut être utilisée comme n'importe quelle propriété personnalisée.

+ +

Dans le cas d'un code privilégié, il convient de faire attention à ne pas essayer d'obtenir ou modifier cette propriété sur un objet de contenu non enveloppé (par exemple sur l'objet wrappedJSObject d'un XPCNativeWrapper). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails.

+ +

Syntaxe

+ +
var uri = doc.documentURIObject;
+ +

Exemple

+ +
// Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http »,
+// en supposant que ce code s'exécute dans le contexte de browser.xul
+
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+
+ +

Spécifications

+ +

Ne fait partie d'aucune spécification.

diff --git a/files/fr/web/api/document/domain/index.html b/files/fr/web/api/document/domain/index.html deleted file mode 100644 index 94575c1b4b..0000000000 --- a/files/fr/web/api/document/domain/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Document.domain -slug: Web/API/Document/domain -tags: - - API - - Document - - HTML DOM - - NeedsCompatTable - - NeedsMarkupWork - - NeedsSpecTable - - Propriété - - Reference -translation_of: Web/API/Document/domain ---- -
{{ApiRef}}
- -

Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la politique d'origine identique.

- -

Syntaxe

- -
var chaineDomaine = document.domain; document.domain = chaine;
-
- -

Exemple

- -
// Pour le document www.example.xxx/good.html,
-// ce script ferme la fenêtre
-var mauvaisDomaine = "www.example.xxx";
-
-if (document.domain == mauvaisDomaine )
-   window.close(); // juste un exemple - window.close() n'a parfois aucun effet.
- -
// Pour l'URI https://developer.mozilla.org/en-US/docs/Web, ce qui
-// suit définit le domaine comme étant la chaîne "developer.mozilla.org"
-var domaine = document.domain;
-
- -

Notes

- -

Cette propriété retourne null si le domaine du document ne peut pas être identifié.

- -

Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son domaine de base. Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org".

- -

Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null.

- -

Mozilla fait la distinction entre la propriété d'un document.domain qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini document.domain à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini document.domain et que les domaines dans les URLs sont les mêmes (implementation). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS)  depuis ses sous-domaines (par exemple, https://bugzilla.mozilla.org pourrait être attaqué par des pièces jointes de bugs sur https://bug*.bugzilla.mozilla.org).

- -

Spécification

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/domain/index.md b/files/fr/web/api/document/domain/index.md new file mode 100644 index 0000000000..94575c1b4b --- /dev/null +++ b/files/fr/web/api/document/domain/index.md @@ -0,0 +1,59 @@ +--- +title: Document.domain +slug: Web/API/Document/domain +tags: + - API + - Document + - HTML DOM + - NeedsCompatTable + - NeedsMarkupWork + - NeedsSpecTable + - Propriété + - Reference +translation_of: Web/API/Document/domain +--- +
{{ApiRef}}
+ +

Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la politique d'origine identique.

+ +

Syntaxe

+ +
var chaineDomaine = document.domain; document.domain = chaine;
+
+ +

Exemple

+ +
// Pour le document www.example.xxx/good.html,
+// ce script ferme la fenêtre
+var mauvaisDomaine = "www.example.xxx";
+
+if (document.domain == mauvaisDomaine )
+   window.close(); // juste un exemple - window.close() n'a parfois aucun effet.
+ +
// Pour l'URI https://developer.mozilla.org/en-US/docs/Web, ce qui
+// suit définit le domaine comme étant la chaîne "developer.mozilla.org"
+var domaine = document.domain;
+
+ +

Notes

+ +

Cette propriété retourne null si le domaine du document ne peut pas être identifié.

+ +

Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son domaine de base. Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org".

+ +

Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null.

+ +

Mozilla fait la distinction entre la propriété d'un document.domain qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini document.domain à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini document.domain et que les domaines dans les URLs sont les mêmes (implementation). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS)  depuis ses sous-domaines (par exemple, https://bugzilla.mozilla.org pourrait être attaqué par des pièces jointes de bugs sur https://bug*.bugzilla.mozilla.org).

+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/domcontentloaded_event/index.html b/files/fr/web/api/document/domcontentloaded_event/index.html deleted file mode 100644 index 516c713b20..0000000000 --- a/files/fr/web/api/document/domcontentloaded_event/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: 'Document: DOMContentLoaded event' -slug: Web/API/Document/DOMContentLoaded_event -translation_of: Web/API/Document/DOMContentLoaded_event ---- -
{{APIRef}}
- -

L'évènement DOMContentLoaded est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.

- - - - - - - - - - - - - - - - - - - - -
BouillonneOui
AnnulableOui (bien que spécifié comme évènement simple non annulable)
Interface{{domxref("Event")}}
Propriété de gestion de l’évènementAucune
- -

Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord load là où DOMContentLoaded serait plus approprié.

- -

Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code (en) JavaScript asynchrone et (en) optimiser le chargement des feuilles de styles. Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML.

- -

Exemples

- -

Usage simple

- -
document.addEventListener('DOMContentLoaded', (event) => {
-    console.log('DOM fully loaded and parsed');
-});
-
- -

Retarde DOMContentLoaded

- -
<script>
-  document.addEventListener('DOMContentLoaded', (event) => {
-    console.log('DOM fully loaded and parsed');
-  });
-
-for( let i = 0; i < 1000000000; i++)
-{} // This synchronous script is going to delay parsing of the DOM,
-   // so the DOMContentLoaded event is going to launch later.
-</script>
-
- -

Vérifie que le contenu si le chargement est déjà fini

- -

L'évènement DOMContentLoaded peut-être déclenché avant que le script soit exécuté, donc il vaut mieux vérifier avant d'ajouter un écouteur d'évènement.

- -
function doSomething() {
-  console.info('DOM loaded');
-}
-
-if (document.readyState === 'loading') {  // Loading hasn't finished yet
-  document.addEventListener('DOMContentLoaded', doSomething);
-} else {  // `DOMContentLoaded` has already fired
-  doSomething();
-}
-
- -

Démonstration

- -

HTML

- -
<div class="controls">
-  <button id="reload" type="button">Reload</button>
-</div>
-
-<div class="event-log">
-  <label>Event log:</label>
-  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
-</div>
- - - -

JS

- -
const log = document.querySelector('.event-log-contents');
-const reload = document.querySelector('#reload');
-
-reload.addEventListener('click', () => {
-  log.textContent ='';
-  window.setTimeout(() => {
-      window.location.reload(true);
-  }, 200);
-});
-
-window.addEventListener('load', (event) => {
-    log.textContent = log.textContent + 'load\n';
-});
-
-document.addEventListener('readystatechange', (event) => {
-    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
-});
-
-document.addEventListener('DOMContentLoaded', (event) => {
-    log.textContent = log.textContent + `DOMContentLoaded\n`;
-});
-
-
- -

Résultat

- -

{{ EmbedLiveSample('Live_example', '100%', '160px') }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Document.DOMContentLoaded_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md new file mode 100644 index 0000000000..516c713b20 --- /dev/null +++ b/files/fr/web/api/document/domcontentloaded_event/index.md @@ -0,0 +1,180 @@ +--- +title: 'Document: DOMContentLoaded event' +slug: Web/API/Document/DOMContentLoaded_event +translation_of: Web/API/Document/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

L'évènement DOMContentLoaded est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.

+ + + + + + + + + + + + + + + + + + + + +
BouillonneOui
AnnulableOui (bien que spécifié comme évènement simple non annulable)
Interface{{domxref("Event")}}
Propriété de gestion de l’évènementAucune
+ +

Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord load là où DOMContentLoaded serait plus approprié.

+ +

Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code (en) JavaScript asynchrone et (en) optimiser le chargement des feuilles de styles. Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML.

+ +

Exemples

+ +

Usage simple

+ +
document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+});
+
+ +

Retarde DOMContentLoaded

+ +
<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+  });
+
+for( let i = 0; i < 1000000000; i++)
+{} // This synchronous script is going to delay parsing of the DOM,
+   // so the DOMContentLoaded event is going to launch later.
+</script>
+
+ +

Vérifie que le contenu si le chargement est déjà fini

+ +

L'évènement DOMContentLoaded peut-être déclenché avant que le script soit exécuté, donc il vaut mieux vérifier avant d'ajouter un écouteur d'évènement.

+ +
function doSomething() {
+  console.info('DOM loaded');
+}
+
+if (document.readyState === 'loading') {  // Loading hasn't finished yet
+  document.addEventListener('DOMContentLoaded', doSomething);
+} else {  // `DOMContentLoaded` has already fired
+  doSomething();
+}
+
+ +

Démonstration

+ +

HTML

+ +
<div class="controls">
+  <button id="reload" type="button">Reload</button>
+</div>
+
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
+</div>
+ + + +

JS

+ +
const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () => {
+  log.textContent ='';
+  window.setTimeout(() => {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) => {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) => {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Live_example', '100%', '160px') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.DOMContentLoaded_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/drag_event/index.html b/files/fr/web/api/document/drag_event/index.html deleted file mode 100644 index 18ffca7385..0000000000 --- a/files/fr/web/api/document/drag_event/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: drag -slug: Web/API/Document/drag_event -translation_of: Web/API/Document/drag_event ---- -
{{APIRef}}
- -

L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)

- -

Informations générales

- -
-
Interface
-
{{domxref("DragEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Oui
-
Cible
-
{{domxref("Document")}}, {{domxref("Element")}}
-
Action par défaut
-
Continuer l'opération drag & drop.
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
- -

Exemple

- -
<div class="dropzone">
-  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
-    This div is draggable
-  </div>
-</div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-
-<style>
-  #draggable {
-    width: 200px;
-    height: 20px;
-    text-align: center;
-    background: white;
-  }
-
-  .dropzone {
-    width: 200px;
-    height: 20px;
-    background: blueviolet;
-    margin-bottom: 10px;
-    padding: 10px;
-  }
-</style>
-
-<script>
-  var dragged;
-
-  /* Les événements sont déclenchés sur les objets glissables */
-  document.addEventListener("drag", function( event ) {
-
-  }, false);
-
-  document.addEventListener("dragstart", function( event ) {
-      // Stocke une référence sur l'objet glissable
-      dragged = event.target;
-      // transparence 50%
-      event.target.style.opacity = .5;
-  }, false);
-
-  document.addEventListener("dragend", function( event ) {
-      // reset de la transparence
-      event.target.style.opacity = "";
-  }, false);
-
-  /* Les événements sont déclenchés sur les cibles du drop */
-  document.addEventListener("dragover", function( event ) {
-      // Empêche default d'autoriser le drop
-      event.preventDefault();
-  }, false);
-
-  document.addEventListener("dragenter", function( event ) {
-      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "purple";
-      }
-
-  }, false);
-
-  document.addEventListener("dragleave", function( event ) {
-      /* reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent */
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-      }
-
-  }, false);
-
-  document.addEventListener("drop", function( event ) {
-      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
-      event.preventDefault();
-      // Déplace l'élément traîné vers la cible du drop sélectionnée
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-          dragged.parentNode.removeChild( dragged );
-          event.target.appendChild( dragged );
-      }
-
-  }, false);
-</script>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}{{Spec2("HTML5.1")}}Définition initiale
- -

Compatibilités navigateur

- -

{{Compat("api.Document.drag_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/drag_event/index.md b/files/fr/web/api/document/drag_event/index.md new file mode 100644 index 0000000000..18ffca7385 --- /dev/null +++ b/files/fr/web/api/document/drag_event/index.md @@ -0,0 +1,261 @@ +--- +title: drag +slug: Web/API/Document/drag_event +translation_of: Web/API/Document/drag_event +--- +
{{APIRef}}
+ +

L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)

+ +

Informations générales

+ +
+
Interface
+
{{domxref("DragEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
{{domxref("Document")}}, {{domxref("Element")}}
+
Action par défaut
+
Continuer l'opération drag & drop.
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      /* reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent */
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilités navigateur

+ +

{{Compat("api.Document.drag_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/dragend_event/index.html b/files/fr/web/api/document/dragend_event/index.html deleted file mode 100644 index 8435a6c7e4..0000000000 --- a/files/fr/web/api/document/dragend_event/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: dragend -slug: Web/API/Document/dragend_event -translation_of: Web/API/Document/dragend_event ---- -

L'événement dragend est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).

- -

Informations générales

- -
-
Interface
-
{{domxref("DragEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Document")}}, {{domxref("Element")}}
-
Action par défaut
-
Varie
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
- -

Exemple

- -
<div class="dropzone">
-  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
-    This div is draggable
-  </div>
-</div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-
-<style>
-  #draggable {
-    width: 200px;
-    height: 20px;
-    text-align: center;
-    background: white;
-  }
-
-  .dropzone {
-    width: 200px;
-    height: 20px;
-    background: blueviolet;
-    margin-bottom: 10px;
-    padding: 10px;
-  }
-</style>
-
-<script>
-  var dragged;
-
-  /* Les événements sont déclenchés sur les objets glissables */
-  document.addEventListener("drag", function( event ) {
-
-  }, false);
-
-  document.addEventListener("dragstart", function( event ) {
-      // Stocke une référence sur l'objet glissable
-      dragged = event.target;
-      // transparence 50%
-      event.target.style.opacity = .5;
-  }, false);
-
-  document.addEventListener("dragend", function( event ) {
-      // reset de la transparence
-      event.target.style.opacity = "";
-  }, false);
-
-  /* Les événements sont déclenchés sur les cibles du drop */
-  document.addEventListener("dragover", function( event ) {
-      // Empêche default d'autoriser le drop
-      event.preventDefault();
-  }, false);
-
-  document.addEventListener("dragenter", function( event ) {
-      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "purple";
-      }
-
-  }, false);
-
-  document.addEventListener("dragleave", function( event ) {
-      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-      }
-
-  }, false);
-
-  document.addEventListener("drop", function( event ) {
-      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
-      event.preventDefault();
-      // Déplace l'élément traîné vers la cible du drop sélectionnée
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-          dragged.parentNode.removeChild( dragged );
-          event.target.appendChild( dragged );
-      }
-
-  }, false);
-</script>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}}{{Spec2("HTML5.1")}}Définition initiale
- -

Compatibilités navigateurs

- -

{{Compat("api.Document.dragend_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/dragend_event/index.md b/files/fr/web/api/document/dragend_event/index.md new file mode 100644 index 0000000000..8435a6c7e4 --- /dev/null +++ b/files/fr/web/api/document/dragend_event/index.md @@ -0,0 +1,258 @@ +--- +title: dragend +slug: Web/API/Document/dragend_event +translation_of: Web/API/Document/dragend_event +--- +

L'événement dragend est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).

+ +

Informations générales

+ +
+
Interface
+
{{domxref("DragEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Document")}}, {{domxref("Element")}}
+
Action par défaut
+
Varie
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilités navigateurs

+ +

{{Compat("api.Document.dragend_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/dragenter_event/index.html b/files/fr/web/api/document/dragenter_event/index.html deleted file mode 100644 index 370d84b4d3..0000000000 --- a/files/fr/web/api/document/dragenter_event/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: dragenter -slug: Web/API/Document/dragenter_event -translation_of: Web/API/Document/dragenter_event ---- -
{{APIRef}}
- -

L'événement dragenter est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide.

- -

Informations générales

- -
-
Interface
-
{{domxref("DragEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Oui
-
Cible
-
La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}.
-
Action par défaut
-
Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel
-
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
- -

Exemple

- -
<div class="dropzone">
-  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
-    This div is draggable
-  </div>
-</div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-
-<style>
-  #draggable {
-    width: 200px;
-    height: 20px;
-    text-align: center;
-    background: white;
-  }
-
-  .dropzone {
-    width: 200px;
-    height: 20px;
-    background: blueviolet;
-    margin-bottom: 10px;
-    padding: 10px;
-  }
-</style>
-
-<script>
-  var dragged;
-
-  /* Les événements sont déclenchés sur les objets glissables */
-  document.addEventListener("drag", function( event ) {
-
-  }, false);
-
-  document.addEventListener("dragstart", function( event ) {
-      // Stocke une référence sur l'objet glissable
-      dragged = event.target;
-      // transparence 50%
-      event.target.style.opacity = .5;
-  }, false);
-
-  document.addEventListener("dragend", function( event ) {
-      // reset de la transparence
-      event.target.style.opacity = "";
-  }, false);
-
-  /* Les événements sont déclenchés sur les cibles du drop */
-  document.addEventListener("dragover", function( event ) {
-      // Empêche default d'autoriser le drop
-      event.preventDefault();
-  }, false);
-
-  document.addEventListener("dragenter", function( event ) {
-      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "purple";
-      }
-
-  }, false);
-
-  document.addEventListener("dragleave", function( event ) {
-      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-      }
-
-  }, false);
-
-  document.addEventListener("drop", function( event ) {
-      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
-      event.preventDefault();
-      // Déplace l'élément traîné vers la cible du drop sélectionnée
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-          dragged.parentNode.removeChild( dragged );
-          event.target.appendChild( dragged );
-      }
-
-  }, false);
-</script>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}}{{Spec2("HTML5.1")}}Définition initiale
- -

Compatiblités navigateurs

- -

{{Compat("api.Document.dragenter_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/dragenter_event/index.md b/files/fr/web/api/document/dragenter_event/index.md new file mode 100644 index 0000000000..370d84b4d3 --- /dev/null +++ b/files/fr/web/api/document/dragenter_event/index.md @@ -0,0 +1,260 @@ +--- +title: dragenter +slug: Web/API/Document/dragenter_event +translation_of: Web/API/Document/dragenter_event +--- +
{{APIRef}}
+ +

L'événement dragenter est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide.

+ +

Informations générales

+ +
+
Interface
+
{{domxref("DragEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}.
+
Action par défaut
+
Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatiblités navigateurs

+ +

{{Compat("api.Document.dragenter_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/dragleave_event/index.html b/files/fr/web/api/document/dragleave_event/index.html deleted file mode 100644 index b8624adb26..0000000000 --- a/files/fr/web/api/document/dragleave_event/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: dragleave -slug: Web/API/Document/dragleave_event -translation_of: Web/API/Document/dragleave_event ---- -

L'événement dragleave est déclenché lorsqu'un élément glissé ou une sélection de texte quitte une cible de dépôt valide.

- -

Informations générales

- -
-
Interface
-
DragEvent
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Document")}}, {{domxref("Element")}}
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
- -

Exemple

- -
<div class="dropzone">
-  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
-    This div is draggable
-  </div>
-</div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-
-<style>
-  #draggable {
-    width: 200px;
-    height: 20px;
-    text-align: center;
-    background: white;
-  }
-
-  .dropzone {
-    width: 200px;
-    height: 20px;
-    background: blueviolet;
-    margin-bottom: 10px;
-    padding: 10px;
-  }
-</style>
-
-<script>
-  var dragged;
-
-  /* Les événements sont déclenchés sur les objets glissables */
-  document.addEventListener("drag", function( event ) {
-
-  }, false);
-
-  document.addEventListener("dragstart", function( event ) {
-      // Stocke une référence sur l'objet glissable
-      dragged = event.target;
-      // transparence 50%
-      event.target.style.opacity = .5;
-  }, false);
-
-  document.addEventListener("dragend", function( event ) {
-      // reset de la transparence
-      event.target.style.opacity = "";
-  }, false);
-
-  /* Les événements sont déclenchés sur les cibles du drop */
-  document.addEventListener("dragover", function( event ) {
-      // Empêche default d'autoriser le drop
-      event.preventDefault();
-  }, false);
-
-  document.addEventListener("dragenter", function( event ) {
-      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "purple";
-      }
-
-  }, false);
-
-  document.addEventListener("dragleave", function( event ) {
-      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-      }
-
-  }, false);
-
-  document.addEventListener("drop", function( event ) {
-      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
-      event.preventDefault();
-      // Déplace l'élément traîné vers la cible du drop sélectionnée
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-          dragged.parentNode.removeChild( dragged );
-          event.target.appendChild( dragged );
-      }
-
-  }, false);
-</script>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}}{{Spec2("HTML5.1")}}Définition initiale
- -

Compatibilités navigateur

- -

{{Compat("api.Document.dragleave_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/dragleave_event/index.md b/files/fr/web/api/document/dragleave_event/index.md new file mode 100644 index 0000000000..b8624adb26 --- /dev/null +++ b/files/fr/web/api/document/dragleave_event/index.md @@ -0,0 +1,258 @@ +--- +title: dragleave +slug: Web/API/Document/dragleave_event +translation_of: Web/API/Document/dragleave_event +--- +

L'événement dragleave est déclenché lorsqu'un élément glissé ou une sélection de texte quitte une cible de dépôt valide.

+ +

Informations générales

+ +
+
Interface
+
DragEvent
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Document")}}, {{domxref("Element")}}
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilités navigateur

+ +

{{Compat("api.Document.dragleave_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/dragover_event/index.html b/files/fr/web/api/document/dragover_event/index.html deleted file mode 100644 index eb7ab548fd..0000000000 --- a/files/fr/web/api/document/dragover_event/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: dragover -slug: Web/API/Document/dragover_event -translation_of: Web/API/Document/dragover_event ---- -
{{APIRef}}
- -

L'événement dragover est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms)

- -

Informations générales

- -
-
Interface
-
DragEvent
-
Propagation
-
Oui
-
Annulable
-
Oui
-
Cible
-
{{domxref("Document")}}, {{domxref("Element")}}
-
Action par défaut
-
Reset l'opération de glissement courante à "none"
-
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
- -

Exemple

- -
<div class="dropzone">
-  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
-    This div is draggable
-  </div>
-</div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-
-<style>
-  #draggable {
-    width: 200px;
-    height: 20px;
-    text-align: center;
-    background: white;
-  }
-
-  .dropzone {
-    width: 200px;
-    height: 20px;
-    background: blueviolet;
-    margin-bottom: 10px;
-    padding: 10px;
-  }
-</style>
-
-<script>
-  var dragged;
-
-  /* Les événements sont déclenchés sur les objets glissables */
-  document.addEventListener("drag", function( event ) {
-
-  }, false);
-
-  document.addEventListener("dragstart", function( event ) {
-      // Stocke une référence sur l'objet glissable
-      dragged = event.target;
-      // transparence 50%
-      event.target.style.opacity = .5;
-  }, false);
-
-  document.addEventListener("dragend", function( event ) {
-      // reset de la transparence
-      event.target.style.opacity = "";
-  }, false);
-
-  /* Les événements sont déclenchés sur les cibles du drop */
-  document.addEventListener("dragover", function( event ) {
-      // Empêche default d'autoriser le drop
-      event.preventDefault();
-  }, false);
-
-  document.addEventListener("dragenter", function( event ) {
-      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "purple";
-      }
-
-  }, false);
-
-  document.addEventListener("dragleave", function( event ) {
-      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-      }
-
-  }, false);
-
-  document.addEventListener("drop", function( event ) {
-      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
-      event.preventDefault();
-      // Déplace l'élément traîné vers la cible du drop sélectionnée
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-          dragged.parentNode.removeChild( dragged );
-          event.target.appendChild( dragged );
-      }
-
-  }, false);
-</script>
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}{{Spec2("HTML5.1")}}Définition initiale
- -

Compatibilités navigateur

- -

{{Compat("api.Document.dragover_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/dragover_event/index.md b/files/fr/web/api/document/dragover_event/index.md new file mode 100644 index 0000000000..eb7ab548fd --- /dev/null +++ b/files/fr/web/api/document/dragover_event/index.md @@ -0,0 +1,259 @@ +--- +title: dragover +slug: Web/API/Document/dragover_event +translation_of: Web/API/Document/dragover_event +--- +
{{APIRef}}
+ +

L'événement dragover est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms)

+ +

Informations générales

+ +
+
Interface
+
DragEvent
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
{{domxref("Document")}}, {{domxref("Element")}}
+
Action par défaut
+
Reset l'opération de glissement courante à "none"
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilités navigateur

+ +

{{Compat("api.Document.dragover_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/dragstart_event/index.html b/files/fr/web/api/document/dragstart_event/index.html deleted file mode 100644 index f45827df5c..0000000000 --- a/files/fr/web/api/document/dragstart_event/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: dragstart -slug: Web/API/Document/dragstart_event -translation_of: Web/API/Document/dragstart_event ---- -

L'événement dragstart est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte.

- -

Informations générales

- -
-
Interface
-
DragEvent
-
Propagation
-
Oui
-
Annulable
-
Oui
-
Cible
-
{{domxref("Document")}}, {{domxref("Element")}}
-
Action par défaut
-
Initie l'opération de glisser-déposer
-
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
- -

Exemple：dropzone

- -

HTML Content

- -
<div class="dropzone">
-  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
-    This div is draggable
-  </div>
-</div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-
- -

CSS Content

- -
  #draggable {
-    width: 200px;
-    height: 20px;
-    text-align: center;
-    background: white;
-  }
-
-  .dropzone {
-    width: 200px;
-    height: 20px;
-    background: blueviolet;
-    margin-bottom: 10px;
-    padding: 10px;
-  }
-
- -

JavaScript Content

- -
  var dragged;
-
-  /* Les événements sont déclenchés sur les objets glissables */
-  document.addEventListener("drag", function( event ) {
-
-  }, false);
-
-  document.addEventListener("dragstart", function( event ) {
-      // Stocke une référence sur l'objet glissable
-      dragged = event.target;
-      // transparence 50%
-      event.target.style.opacity = .5;
-  }, false);
-
-  document.addEventListener("dragend", function( event ) {
-      // reset de la transparence
-      event.target.style.opacity = "";
-  }, false);
-
-  /* Les événements sont déclenchés sur les cibles du drop */
-  document.addEventListener("dragover", function( event ) {
-      // Empêche default d'autoriser le drop
-      event.preventDefault();
-  }, false);
-
-  document.addEventListener("dragenter", function( event ) {
-      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "purple";
-      }
-
-  }, false);
-
-  document.addEventListener("dragleave", function( event ) {
-      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-      }
-
-  }, false);
-
-  document.addEventListener("drop", function( event ) {
-      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
-      event.preventDefault();
-      // Déplace l'élément traîné vers la cible du drop sélectionnée
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-          dragged.parentNode.removeChild( dragged );
-          event.target.appendChild( dragged );
-      }
-
-  }, false);
- -

{{ EmbedLiveSample('Example：dropzone') }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}}{{Spec2("HTML5.1")}}Définition initiale
- -

Compatibilités navigateur

- -

{{Compat("api.Document.dragstart_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/dragstart_event/index.md b/files/fr/web/api/document/dragstart_event/index.md new file mode 100644 index 0000000000..f45827df5c --- /dev/null +++ b/files/fr/web/api/document/dragstart_event/index.md @@ -0,0 +1,263 @@ +--- +title: dragstart +slug: Web/API/Document/dragstart_event +translation_of: Web/API/Document/dragstart_event +--- +

L'événement dragstart est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte.

+ +

Informations générales

+ +
+
Interface
+
DragEvent
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
{{domxref("Document")}}, {{domxref("Element")}}
+
Action par défaut
+
Initie l'opération de glisser-déposer
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple：dropzone

+ +

HTML Content

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+ +

CSS Content

+ +
  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+
+ +

JavaScript Content

+ +
  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+ +

{{ EmbedLiveSample('Example：dropzone') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilités navigateur

+ +

{{Compat("api.Document.dragstart_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/drop_event/index.html b/files/fr/web/api/document/drop_event/index.html deleted file mode 100644 index 64453e9860..0000000000 --- a/files/fr/web/api/document/drop_event/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: drop -slug: Web/API/Document/drop_event -translation_of: Web/API/Document/drop_event ---- -
{{APIRef}}
- -

L'événement drop est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide.

- -

Informations générales

- -
-
Interface
-
DragEvent
-
Propagation
-
Oui
-
Annulable
-
Oui
-
Cible
-
Document, Element
-
Action par défaut
-
Varie
-
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
- -

Exemple

- -
<div class="dropzone">
-  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
-    Cette div peut être glissée
-  </div>
-</div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-<div class="dropzone"></div>
-
-<style>
-  #draggable {
-    width: 200px;
-    height: 20px;
-    text-align: center;
-    background: white;
-  }
-
-  .dropzone {
-    width: 200px;
-    height: 20px;
-    background: blueviolet;
-    margin-bottom: 10px;
-    padding: 10px;
-  }
-</style>
-
-<script>
-  var dragged;
-
-  /* Les événements sont déclenchés sur les objets glissables */
-  document.addEventListener("drag", function( event ) {
-
-  }, false);
-
-  document.addEventListener("dragstart", function( event ) {
-      // Stocke une référence sur l'objet glissable
-      dragged = event.target;
-      // transparence 50%
-      event.target.style.opacity = .5;
-  }, false);
-
-  document.addEventListener("dragend", function( event ) {
-      // réinitialisation de la transparence
-      event.target.style.opacity = "";
-  }, false);
-
-  /* Les événements sont déclenchés sur les cibles du drop */
-  document.addEventListener("dragover", function( event ) {
-      // Empêche le comportement par défaut afin d'autoriser le drop
-      event.preventDefault();
-  }, false);
-
-  document.addEventListener("dragenter", function( event ) {
-      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "purple";
-      }
-
-  }, false);
-
-  document.addEventListener("dragleave", function( event ) {
-      // réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-      }
-
-  }, false);
-
-  document.addEventListener("drop", function( event ) {
-      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
-      event.preventDefault();
-      // Déplace l'élément traîné vers la cible du drop sélectionnée
-      if ( event.target.className == "dropzone" ) {
-          event.target.style.background = "";
-          dragged.parentNode.removeChild( dragged );
-          event.target.appendChild( dragged );
-      }
-
-  }, false);
-</script>
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}}{{Spec2("HTML5.1")}}Première définition
- -

Compatibilités navigateur

- -

{{Compat("api.Document.drop_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/drop_event/index.md b/files/fr/web/api/document/drop_event/index.md new file mode 100644 index 0000000000..64453e9860 --- /dev/null +++ b/files/fr/web/api/document/drop_event/index.md @@ -0,0 +1,259 @@ +--- +title: drop +slug: Web/API/Document/drop_event +translation_of: Web/API/Document/drop_event +--- +
{{APIRef}}
+ +

L'événement drop est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide.

+ +

Informations générales

+ +
+
Interface
+
DragEvent
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
Document, Element
+
Action par défaut
+
Varie
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
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.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemple

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    Cette div peut être glissée
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // réinitialisation de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche le comportement par défaut afin d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}}{{Spec2("HTML5.1")}}Première définition
+ +

Compatibilités navigateur

+ +

{{Compat("api.Document.drop_event")}}

+ +

Voir aussi

+ + 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 8028725d21..0000000000 --- a/files/fr/web/api/document/elementfrompoint/index.html +++ /dev/null @@ -1,50 +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 -original_slug: Web/API/DocumentOrShadowRoot/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

- -

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

- \ No newline at end of file diff --git a/files/fr/web/api/document/elementfrompoint/index.md b/files/fr/web/api/document/elementfrompoint/index.md new file mode 100644 index 0000000000..8028725d21 --- /dev/null +++ b/files/fr/web/api/document/elementfrompoint/index.md @@ -0,0 +1,50 @@ +--- +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 +original_slug: Web/API/DocumentOrShadowRoot/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

+ +

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

+ \ No newline at end of file diff --git a/files/fr/web/api/document/elementsfrompoint/index.html b/files/fr/web/api/document/elementsfrompoint/index.html deleted file mode 100644 index 259d9da6fc..0000000000 --- a/files/fr/web/api/document/elementsfrompoint/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: DocumentOrShadowRoot.elementsFromPoint() -slug: Web/API/Document/elementsFromPoint -tags: - - API - - Document - - DocumentOrShadowRoot - - Méthode - - Reference - - ShadowRoot - - elementsFromPoint - - elementsFromPoint() - - shadow dom -translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint -original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint ---- -
{{APIRef("DOM")}}{{SeeCompatTable}}
- -

La propriété elementsFromPoint() de l'interface {{domxref("DocumentOrShadowRoot")}}  renvoie un tableau (array) de tous les éléments présents sous le point fourni en paramètre (relatif au viewport).

- -

Syntaxe

- -
var elements = document.elementsFromPoint(x, y);
- -

Paramètres

- -
-
x
-
L'abscisse du point (coordonnée horizontale).
-
y
-
L'ordonnée du point (coordonnée verticale).
-
- -

Valeur de retour

- -

Un tableau (array) d'objets {{domxref('element')}} représentants les éléments du DOM concernés.

- -

Exemples

- -

HTML

- -
<div>
-  <p>Du texte</p>
-</div>
-<p>Éléments au point 30, 20:</p>
-<div id="output"></div>
-
- -

JavaScript

- -
var output = document.getElementById("output");
-if (document.elementsFromPoint) {
-  var elements = document.elementsFromPoint(30, 20);
-  for(var i = 0; i < elements.length; i++) {
-    output.textContent += elements[i].localName;
-    if (i < elements.length - 1) {
-      output.textContent += " < ";
-    }
-  }
-} else {
-  output.innerHTML = "<span style=\"color: red;\">" +
-     "Votre navigateur ne prend pas en charge <code>document.elementsFromPoint()</code>" +
-     "</span>";
-}
- -

Résultat

- -

{{EmbedLiveSample('Example', '420', '120')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}{{Spec2('Shadow DOM')}}Définition initiale
{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'Document')}}{{Spec2('CSSOM View')}}Précise l'ordre selon lequel les éléments sont peints.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DocumentOrShadowRoot.elementsFromPoint")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/elementsfrompoint/index.md b/files/fr/web/api/document/elementsfrompoint/index.md new file mode 100644 index 0000000000..259d9da6fc --- /dev/null +++ b/files/fr/web/api/document/elementsfrompoint/index.md @@ -0,0 +1,103 @@ +--- +title: DocumentOrShadowRoot.elementsFromPoint() +slug: Web/API/Document/elementsFromPoint +tags: + - API + - Document + - DocumentOrShadowRoot + - Méthode + - Reference + - ShadowRoot + - elementsFromPoint + - elementsFromPoint() + - shadow dom +translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint +original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

La propriété elementsFromPoint() de l'interface {{domxref("DocumentOrShadowRoot")}}  renvoie un tableau (array) de tous les éléments présents sous le point fourni en paramètre (relatif au viewport).

+ +

Syntaxe

+ +
var elements = document.elementsFromPoint(x, y);
+ +

Paramètres

+ +
+
x
+
L'abscisse du point (coordonnée horizontale).
+
y
+
L'ordonnée du point (coordonnée verticale).
+
+ +

Valeur de retour

+ +

Un tableau (array) d'objets {{domxref('element')}} représentants les éléments du DOM concernés.

+ +

Exemples

+ +

HTML

+ +
<div>
+  <p>Du texte</p>
+</div>
+<p>Éléments au point 30, 20:</p>
+<div id="output"></div>
+
+ +

JavaScript

+ +
var output = document.getElementById("output");
+if (document.elementsFromPoint) {
+  var elements = document.elementsFromPoint(30, 20);
+  for(var i = 0; i < elements.length; i++) {
+    output.textContent += elements[i].localName;
+    if (i < elements.length - 1) {
+      output.textContent += " < ";
+    }
+  }
+} else {
+  output.innerHTML = "<span style=\"color: red;\">" +
+     "Votre navigateur ne prend pas en charge <code>document.elementsFromPoint()</code>" +
+     "</span>";
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Example', '420', '120')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}{{Spec2('Shadow DOM')}}Définition initiale
{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'Document')}}{{Spec2('CSSOM View')}}Précise l'ordre selon lequel les éléments sont peints.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DocumentOrShadowRoot.elementsFromPoint")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.html b/files/fr/web/api/document/enablestylesheetsforset/index.html deleted file mode 100644 index f0aca39903..0000000000 --- a/files/fr/web/api/document/enablestylesheetsforset/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Document.enableStyleSheetsForSet() -slug: Web/API/Document/enableStyleSheetsForSet -tags: - - API - - Activation - - CSS - - DOM - - Feuilles de styles - - Méthode -translation_of: Web/API/Document/enableStyleSheetsForSet ---- -

{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}

- -

Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées).

- -

Syntaxe

- -
document.enableStyleSheetsForSet(name)
-
- -

Paramètres

- -
-
name
-
Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre name pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut title (titre)).
-
- -

Notes

- - - -

Exemple

- -
document.enableStyleSheetsForSet("Some style sheet set name");
-
- -

Spécifications

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.md b/files/fr/web/api/document/enablestylesheetsforset/index.md new file mode 100644 index 0000000000..f0aca39903 --- /dev/null +++ b/files/fr/web/api/document/enablestylesheetsforset/index.md @@ -0,0 +1,59 @@ +--- +title: Document.enableStyleSheetsForSet() +slug: Web/API/Document/enableStyleSheetsForSet +tags: + - API + - Activation + - CSS + - DOM + - Feuilles de styles + - Méthode +translation_of: Web/API/Document/enableStyleSheetsForSet +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}

+ +

Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées).

+ +

Syntaxe

+ +
document.enableStyleSheetsForSet(name)
+
+ +

Paramètres

+ +
+
name
+
Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre name pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut title (titre)).
+
+ +

Notes

+ + + +

Exemple

+ +
document.enableStyleSheetsForSet("Some style sheet set name");
+
+ +

Spécifications

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/evaluate/index.html b/files/fr/web/api/document/evaluate/index.html deleted file mode 100644 index 03cc732e3e..0000000000 --- a/files/fr/web/api/document/evaluate/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: document.evaluate -slug: Web/API/Document/evaluate -tags: - - API - - DOM - - Méthode - - Reference - - XPath -translation_of: Web/API/Document/evaluate ---- -

{{ ApiRef("DOM") }}

- -

La méthode evaluate() renvoie un {{domxref("XPathResult")}} basé sur une expression XPath et d'autres paramètres donnés.

- -

Syntaxe

- -
var xpathResult = document.evaluate(
- xpathExpression,
- contextNode,
- namespaceResolver,
- resultType,
- result
-);
- - - -

Exemples

- -
 var  headings  =  document .  evaluate  ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null);
- /* Cherche le document pour tout élément h2.
- * Le résultat sera probablement un itérateur de noeuds non ordonné. */
- var  thisHeading  =  headings .  iterateNext  (  )  ;
- var  alertText  =   "Level 2 headings in this document are:\n"  ;
- while   ( thisHeading )   {
-  alertText  +  =  thisHeading . textContent  +   "\n"  ;
-  thisHeading  =  headings .  iterateNext  (  )  ;
- }
- alert  ( alertText )  ;   // Alerte le texte de tout élément h2
- -

Note : dans l'exemple ci-dessus, un XPath plus verbeux est préféré aux raccourcis communs tels que //h2. Généralement, des sélecteurs XPath plus spécifiques, comme dans l'exemple ci-dessus, améliorent de façon significative les performances, en particulier pour les documents très volumineux. C'est parce que l'évaluation de la requête ne perd pas de temps à visiter des noeuds inutiles. L'utilisation de // est généralement lente car elle visite tous les nœuds de la racine et tous les sous-nœuds à la recherche de correspondances possibles.

- -

Une optimisation supplémentaire peut être obtenue en utilisant soigneusement le paramètre de contexte. Par exemple, si vous savez que le contenu que vous recherchez se trouve quelque part dans la balise body, vous pouvez utiliser ceci :

- -
document .  evaluate  ( " .  //h2", document.body, null, XPathResult.ANY_TYPE, null);
- -

Remarquez ci-dessus,  document.body a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le "." est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant //h2), la requête démarrera à partir du noeud racine ( html) ce qui serait plus inutile.)

- -

Voir Introduction à l'utilisation de XPath avec JavaScript  pour plus d'informations.

- -

Notes

- - - -

Types de résultats

- -

Ce sont des valeurs prises en charge pour le paramètre resultType de la méthode evaluate :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de résultatValeurDescription
ANY_TYPE0Quel que soit le type, résulte naturellement de l'expression donnée.
NUMBER_TYPE1Un ensemble de résultats contenant un seul nombre. Utile, par exemple, dans une expression XPath utilisant la fonction count().
STRING_TYPE2Un ensemble de résultats contenant une seule chaîne de caractères.
BOOLEAN_TYPE3Un ensemble de résultats contenant une seule valeur booléenne. Utile pour, par exemple, une expression XPath utilisant la fonction not().
UNORDERED_NODE_ITERATOR_TYPE4Un ensemble de résultats contenant tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document.
ORDERED_NODE_ITERATOR_TYPE5Un ensemble de résultats contenant tous les noeuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .
UNORDERED_NODE_SNAPSHOT_TYPE6Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document .
ORDERED_NODE_SNAPSHOT_TYPE7Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .
ANY_UNORDERED_NODE_TYPE8Un ensemble de résultats contenant un seul nœud correspondant à l'expression. Le noeud n'est pas nécessairement le premier noeud du document qui correspond à l'expression.
FIRST_ORDERED_NODE_TYPE9Un ensemble de résultats contenant le premier nœud du document qui correspond à l'expression.
- -

Les résultats des types NODE_ITERATOR contiennent des références aux noeuds du document. La modification d'un nœud invalidera l'itérateur. Après avoir modifié un nœud, tenter de parcourir les résultats entraînera une erreur.

- -

Les résultats des types NODE_SNAPSHOT sont des instantanés, qui sont essentiellement des listes de nœuds correspondants. Vous pouvez apporter des modifications au document en modifiant les nœuds de capture instantanée. La modification du document n'invalide pas l'instantané. Toutefois, si le document est modifié, l'instantané peut ne pas correspondre à l'état actuel du document, car les nœuds peuvent avoir été déplacés, modifiés, ajoutés ou supprimés.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}{{Spec2("DOM3 XPath")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.evaluate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/evaluate/index.md b/files/fr/web/api/document/evaluate/index.md new file mode 100644 index 0000000000..03cc732e3e --- /dev/null +++ b/files/fr/web/api/document/evaluate/index.md @@ -0,0 +1,161 @@ +--- +title: document.evaluate +slug: Web/API/Document/evaluate +tags: + - API + - DOM + - Méthode + - Reference + - XPath +translation_of: Web/API/Document/evaluate +--- +

{{ ApiRef("DOM") }}

+ +

La méthode evaluate() renvoie un {{domxref("XPathResult")}} basé sur une expression XPath et d'autres paramètres donnés.

+ +

Syntaxe

+ +
var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);
+ + + +

Exemples

+ +
 var  headings  =  document .  evaluate  ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null);
+ /* Cherche le document pour tout élément h2.
+ * Le résultat sera probablement un itérateur de noeuds non ordonné. */
+ var  thisHeading  =  headings .  iterateNext  (  )  ;
+ var  alertText  =   "Level 2 headings in this document are:\n"  ;
+ while   ( thisHeading )   {
+  alertText  +  =  thisHeading . textContent  +   "\n"  ;
+  thisHeading  =  headings .  iterateNext  (  )  ;
+ }
+ alert  ( alertText )  ;   // Alerte le texte de tout élément h2
+ +

Note : dans l'exemple ci-dessus, un XPath plus verbeux est préféré aux raccourcis communs tels que //h2. Généralement, des sélecteurs XPath plus spécifiques, comme dans l'exemple ci-dessus, améliorent de façon significative les performances, en particulier pour les documents très volumineux. C'est parce que l'évaluation de la requête ne perd pas de temps à visiter des noeuds inutiles. L'utilisation de // est généralement lente car elle visite tous les nœuds de la racine et tous les sous-nœuds à la recherche de correspondances possibles.

+ +

Une optimisation supplémentaire peut être obtenue en utilisant soigneusement le paramètre de contexte. Par exemple, si vous savez que le contenu que vous recherchez se trouve quelque part dans la balise body, vous pouvez utiliser ceci :

+ +
document .  evaluate  ( " .  //h2", document.body, null, XPathResult.ANY_TYPE, null);
+ +

Remarquez ci-dessus,  document.body a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le "." est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant //h2), la requête démarrera à partir du noeud racine ( html) ce qui serait plus inutile.)

+ +

Voir Introduction à l'utilisation de XPath avec JavaScript  pour plus d'informations.

+ +

Notes

+ + + +

Types de résultats

+ +

Ce sont des valeurs prises en charge pour le paramètre resultType de la méthode evaluate :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de résultatValeurDescription
ANY_TYPE0Quel que soit le type, résulte naturellement de l'expression donnée.
NUMBER_TYPE1Un ensemble de résultats contenant un seul nombre. Utile, par exemple, dans une expression XPath utilisant la fonction count().
STRING_TYPE2Un ensemble de résultats contenant une seule chaîne de caractères.
BOOLEAN_TYPE3Un ensemble de résultats contenant une seule valeur booléenne. Utile pour, par exemple, une expression XPath utilisant la fonction not().
UNORDERED_NODE_ITERATOR_TYPE4Un ensemble de résultats contenant tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document.
ORDERED_NODE_ITERATOR_TYPE5Un ensemble de résultats contenant tous les noeuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .
UNORDERED_NODE_SNAPSHOT_TYPE6Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document .
ORDERED_NODE_SNAPSHOT_TYPE7Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .
ANY_UNORDERED_NODE_TYPE8Un ensemble de résultats contenant un seul nœud correspondant à l'expression. Le noeud n'est pas nécessairement le premier noeud du document qui correspond à l'expression.
FIRST_ORDERED_NODE_TYPE9Un ensemble de résultats contenant le premier nœud du document qui correspond à l'expression.
+ +

Les résultats des types NODE_ITERATOR contiennent des références aux noeuds du document. La modification d'un nœud invalidera l'itérateur. Après avoir modifié un nœud, tenter de parcourir les résultats entraînera une erreur.

+ +

Les résultats des types NODE_SNAPSHOT sont des instantanés, qui sont essentiellement des listes de nœuds correspondants. Vous pouvez apporter des modifications au document en modifiant les nœuds de capture instantanée. La modification du document n'invalide pas l'instantané. Toutefois, si le document est modifié, l'instantané peut ne pas correspondre à l'état actuel du document, car les nœuds peuvent avoir été déplacés, modifiés, ajoutés ou supprimés.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}{{Spec2("DOM3 XPath")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.evaluate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/execcommand/index.html b/files/fr/web/api/document/execcommand/index.html deleted file mode 100644 index c581db094d..0000000000 --- a/files/fr/web/api/document/execcommand/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: document.execCommand -slug: Web/API/Document/execCommand -tags: - - API - - DOM - - Method - - Méthodes - - Reference -translation_of: Web/API/Document/execCommand ---- -
{{ApiRef("DOM")}}{{deprecated_header}}
- -

Lorsqu'un document HTML passe en designMode, l'objet document correspondant expose une méthode execCommand() permettant d'exécuter des commandes manipulant la région éditable courante tels que les champs de formulaire ou les éléments contentEditable.

- -

La plupart des commandes affectent la sélection du document (mise en gras, italique, etc.), tandis que - d'autres insèrent de nouveaux éléments (un lien) ou modifient toute une ligne (indentation). Lorsqu'on - utilise contentEditable, execCommand() affecte l'élément éditable - courant.

- -

Syntaxe

- -
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
-
- -

Valeur de retour

- -

Un booléen ({{jsxref('Boolean')}}) qui vaut false si la commande n'est pas - prise en charge ou si elle est désactivée.

- -
-

Note : document.execCommand() ne renvoie - true que s'il est appelé à partir d'une interaction utilisateur. On ne - peut pas l'invoquer dans un script afin de vérifier la prise en charge navigateur avant - d'appeler une commande. À partir de Firefox 82, les appels imbriqués à - document.execCommand() renverront toujours false.

-
- -

Paramètres

- -
-
aCommandName
-
Une chaîne de caractères {{domxref("DOMString")}} indiquant le nom de la commande à - exécuter. Voir {{anch("Commands")}} pour une liste de commandes possibles.
-
aShowDefaultUI
-
Un booléen ({{jsxref("Boolean")}}) indiquant si l'interface utilisateur par défaut - devrait être affichée. Ce n'est pas implémenté par Mozilla.
-
aValueArgument
-
Pour les commandes utilisant un argument en entrée, il s'agit d'une chaîne {{domxref("DOMString")}} - qui fournit cette information. On pourra, par exemple, insertImage utilise - l'URL de l'image à insérer. On utilisera null si aucun argument n'est utilisé.
-
- -

Commandes

- -
-
backColor
-

Modifie la couleur d'arrière-plan du document. Avec le mode styleWithCss cela affecte la couleur d'arrière-plan du bloc englobant. Une chaîne de caractères décrivant une valeur {{cssxref("<color>")}} doit être passée en argument. On notera qu'Internet Explorer utilise ceci pour la couleur d'arrière-plan du texte.

-
bold
-

Active ou désactive la mise en gras pour la sélection ou à partir du point d'insertion Internet Explorer utilise la balise {{HTMLElement("strong")}} plutôt que {{HTMLElement("b")}}.

-
ClearAuthenticationCache
-

Supprime toutes les informations d'authentification credentials) du cache.

-
contentReadOnly
-

Rend le contenu du document en lecture seule ou éditable en fonction du booléen passé en argument (n'est pas pris en charge par Internet Explorer)

-
copy
-

Copie la sélection courante vers le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.

-
createLink
-

Crée un hyperlien à partir de la sélection (sous réserve qu'il y en ait une). Une chaîne de caractères formant un URI est nécessaire comme argument afin de fournir la valeur de l'attribut href. L'URI doit contenir au moins un caractère (qui peut être un blanc). (Internet Explorer créera un lien avec une valeur null.)

-
cut
-

Coupe le contenu de la sélection courante et le copie dans le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.

-
decreaseFontSize
-

Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.)

-
defaultParagraphSeparator
-

Modifie le séparateur de paragraphe utilisé lorsque de nouveaux paragraphes sont créés dans les zones de texte éditables. Voir Différences dans la génération du balisage pour plus de détails.

-
delete
-

Supprimer la sélection courante.

-
enableAbsolutePositionEditor
-

Active ou désactive la poignée qui permet de déplacer les éléments positionnés de façon absolue. Celle-ci est désactivée par défaut depuis Firefox 64 ({{bug(1490641)}}).

-
enableInlineTableEditing
-

Active ou désactive les contrôles pour l'insertion ou la suppression des lignes ou colonnes de tableau. Les contrôles sont désactivés par défaut depuis Firefox 64 ({{bug(1490641)}}).

-
enableObjectResizing
-

Active ou désactive les contrôles permettant de redimensionner les images, tableaux ou les éléments positionnés de façon absolue. Les poignées sont désactivées par défaut depuis Firefox 64 ({{bug(1490641)}}).

-
fontName
-

Modifie le nom de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un nom de police (ex. "Arial").

-
fontSize
-

Modifie la taille de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un entier compris entre 1 et 7.

-
foreColor
-

Modifie la couleur de la police pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères décrivant une couleur exprimée en notation hexadécimale.

-
formatBlock
-

Ajoute un élément HTML de bloc autour de la ligne contenant la sélection courante et remplace l'éventuel élément de bloc englobant s'il en existe un (pour Firefox, {{HTMLElement("blockquote")}} fera exception et englobera n'importe quel bloc). L'argument passé doit être un nom de balise. Tous les éléments de bloc peuvent en théorie être utilisés. (Internet Explorer et Edge ne prennent en charge que les balises H1H6, ADDRESS, et PRE qui doivent être passées entre chevrons : "<H1>".)

-
forwardDelete
-

Supprime un caractère à la position du curseur. Le comportement obtenu est le même que lorsqu'on appuie sur la touche Suppr d'un clavier Windows.

-
heading
-

Ajoute un élément de titre autour de la sélection ou au niveau du point d'insertion. L'argument doit être le nom d'une balise de titre ("H1" à "H6"). (Non pris en charge par Internet Explorer et Safari.)

-
hiliteColor
-

Modifie la couleur d'arrière-plan pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères définissant une couleur et useCSS doit valoir true. (Non pris en charge par Internet Explorer.)

-
increaseFontSize
-

Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou à partir du point d'insertion. (Non pris en charge par Internet Explorer).

-
indent
-

Augmente l'indentation de la ligne contenant la sélection ou le point d'insertion. Pour Firefox, si la sélection s'étend sur plusieurs lignes ayant différents niveaux d'indentation, seules les lignes les moins indentées seront décalées.

-
insertBrOnReturn
-

Contrôle si la touche Entrée insère un élément {{HTMLElement("br")}} ou si le bloc courant est scindé en deux. (Non pris en charge par Internet Explorer.)

-
insertHorizontalRule
-

Insère un élément {{HTMLElement("hr")}} au point d'insertion ou remplace la sélection courante par cet élément.

-
insertHTML
-

Insère un élément au point d'insertion en supprimant la sélection. Une chaîne de caractères HTML valide doit être fournie en argument. (Non pris en charge par Internet Explorer.)

-
insertImage
-

Insère une image au point d'insertion en supprimant la sélection. L'argument doit être une chaîne de caractères indiquant l'URL à utiliser pour l'attribut src de l'image. Les prérequis de cette valeur sont les mêmes que pour createLink.

-
insertOrderedList
-

Crée une liste numérotée ordonnée pour la sélection ou à partir du point d'insertion.

-
insertUnorderedList
-

Crée une liste non-ordonnée pour la sélection ou à partir du point d'insertion.

-
insertParagraph
-

Insère un paragraphe autour de la sélection pour la ligne courante. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)

-
insertText
-

Insère le texte indiqué au point d'insertion (quitte à supprimer l'éventuelle sélection courante).

-
italic
-

Active ou désactive la mise en italique pour la sélection ou à partir du point d'insertion. (Internet Explorer utilisera l'élément {{HTMLElement("em")}} plutôt que {{HTMLElement("i")}}.)

-
justifyCenter
-

Centre la sélection ou le point d'insertion.

-
justifyFull
-

Justifie la sélection ou le point d'insertion.

-
justifyLeft
-

Justifie à gauche la sélection ou le point d'insertion.

-
justifyRight
-

Justifie à droite la sélection ou le point d'insertion.

-
outdent
-

Effectue un retrait d'indentation pour la ligne courante.

-
paste
-

Colle le contenu du presse-papier au point d'insertion (et remplace éventuellement la sélection actuelle). Fonctionnalité désactivée pour le contenu web.

-
redo
-

Rejoue l'action annulée par la précédente commande undo.

-
removeFormat
-

Supprime toute mise en forme pour la sélection courante.

-
selectAll
-

Sélectionne l'ensemble du contenu de la région éditable.

-
strikeThrough
-

Active ou désactive la rayure de la sélection ou à partir d'un point d'insertion.

-
subscript
-

Active ou désactive la mise en indice pour la sélection ou au point d'insertion

-
superscript
-

Active ou désactive la mise en exposant pour la sélection ou au point d'insertion

-
underline
-

Active ou désactive le soulignement pour la sélection ou au point d'insertion.

-
undo
-

Annule la dernière commande exécutée.

-
unlink
-

Retire l'ancre de l'hyperlien sélectionné.

-
useCSS {{Deprecated_inline}}
-

Active/désactive l'utilisation de balises HTML ou de CSS pour le balisage généré. La valeur de l'argument doit être un booléen. Note : cet argument possède une logique inversée (false permet d'utiliser CSS et true permet d'utiliser HTML). Cette valeur n'est pas prise en charge par Internet Explorer et a été dépréciée en faveur de styleWithCSS.

styleWithCSS
-

Remplace la commande useCSS. true modifie/génère des attributs style dans le balisage tandis que false génère des éléments HTML de présentation.

-
- -

Exemple

- -

Un exemple d'utilisation est disponible - sur CodePen.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
execCommandBrouillon non officiel
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.execCommand")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/execcommand/index.md b/files/fr/web/api/document/execcommand/index.md new file mode 100644 index 0000000000..c581db094d --- /dev/null +++ b/files/fr/web/api/document/execcommand/index.md @@ -0,0 +1,193 @@ +--- +title: document.execCommand +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - Method + - Méthodes + - Reference +translation_of: Web/API/Document/execCommand +--- +
{{ApiRef("DOM")}}{{deprecated_header}}
+ +

Lorsqu'un document HTML passe en designMode, l'objet document correspondant expose une méthode execCommand() permettant d'exécuter des commandes manipulant la région éditable courante tels que les champs de formulaire ou les éléments contentEditable.

+ +

La plupart des commandes affectent la sélection du document (mise en gras, italique, etc.), tandis que + d'autres insèrent de nouveaux éléments (un lien) ou modifient toute une ligne (indentation). Lorsqu'on + utilise contentEditable, execCommand() affecte l'élément éditable + courant.

+ +

Syntaxe

+ +
document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+
+ +

Valeur de retour

+ +

Un booléen ({{jsxref('Boolean')}}) qui vaut false si la commande n'est pas + prise en charge ou si elle est désactivée.

+ +
+

Note : document.execCommand() ne renvoie + true que s'il est appelé à partir d'une interaction utilisateur. On ne + peut pas l'invoquer dans un script afin de vérifier la prise en charge navigateur avant + d'appeler une commande. À partir de Firefox 82, les appels imbriqués à + document.execCommand() renverront toujours false.

+
+ +

Paramètres

+ +
+
aCommandName
+
Une chaîne de caractères {{domxref("DOMString")}} indiquant le nom de la commande à + exécuter. Voir {{anch("Commands")}} pour une liste de commandes possibles.
+
aShowDefaultUI
+
Un booléen ({{jsxref("Boolean")}}) indiquant si l'interface utilisateur par défaut + devrait être affichée. Ce n'est pas implémenté par Mozilla.
+
aValueArgument
+
Pour les commandes utilisant un argument en entrée, il s'agit d'une chaîne {{domxref("DOMString")}} + qui fournit cette information. On pourra, par exemple, insertImage utilise + l'URL de l'image à insérer. On utilisera null si aucun argument n'est utilisé.
+
+ +

Commandes

+ +
+
backColor
+

Modifie la couleur d'arrière-plan du document. Avec le mode styleWithCss cela affecte la couleur d'arrière-plan du bloc englobant. Une chaîne de caractères décrivant une valeur {{cssxref("<color>")}} doit être passée en argument. On notera qu'Internet Explorer utilise ceci pour la couleur d'arrière-plan du texte.

+
bold
+

Active ou désactive la mise en gras pour la sélection ou à partir du point d'insertion Internet Explorer utilise la balise {{HTMLElement("strong")}} plutôt que {{HTMLElement("b")}}.

+
ClearAuthenticationCache
+

Supprime toutes les informations d'authentification credentials) du cache.

+
contentReadOnly
+

Rend le contenu du document en lecture seule ou éditable en fonction du booléen passé en argument (n'est pas pris en charge par Internet Explorer)

+
copy
+

Copie la sélection courante vers le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.

+
createLink
+

Crée un hyperlien à partir de la sélection (sous réserve qu'il y en ait une). Une chaîne de caractères formant un URI est nécessaire comme argument afin de fournir la valeur de l'attribut href. L'URI doit contenir au moins un caractère (qui peut être un blanc). (Internet Explorer créera un lien avec une valeur null.)

+
cut
+

Coupe le contenu de la sélection courante et le copie dans le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.

+
decreaseFontSize
+

Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.)

+
defaultParagraphSeparator
+

Modifie le séparateur de paragraphe utilisé lorsque de nouveaux paragraphes sont créés dans les zones de texte éditables. Voir Différences dans la génération du balisage pour plus de détails.

+
delete
+

Supprimer la sélection courante.

+
enableAbsolutePositionEditor
+

Active ou désactive la poignée qui permet de déplacer les éléments positionnés de façon absolue. Celle-ci est désactivée par défaut depuis Firefox 64 ({{bug(1490641)}}).

+
enableInlineTableEditing
+

Active ou désactive les contrôles pour l'insertion ou la suppression des lignes ou colonnes de tableau. Les contrôles sont désactivés par défaut depuis Firefox 64 ({{bug(1490641)}}).

+
enableObjectResizing
+

Active ou désactive les contrôles permettant de redimensionner les images, tableaux ou les éléments positionnés de façon absolue. Les poignées sont désactivées par défaut depuis Firefox 64 ({{bug(1490641)}}).

+
fontName
+

Modifie le nom de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un nom de police (ex. "Arial").

+
fontSize
+

Modifie la taille de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un entier compris entre 1 et 7.

+
foreColor
+

Modifie la couleur de la police pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères décrivant une couleur exprimée en notation hexadécimale.

+
formatBlock
+

Ajoute un élément HTML de bloc autour de la ligne contenant la sélection courante et remplace l'éventuel élément de bloc englobant s'il en existe un (pour Firefox, {{HTMLElement("blockquote")}} fera exception et englobera n'importe quel bloc). L'argument passé doit être un nom de balise. Tous les éléments de bloc peuvent en théorie être utilisés. (Internet Explorer et Edge ne prennent en charge que les balises H1H6, ADDRESS, et PRE qui doivent être passées entre chevrons : "<H1>".)

+
forwardDelete
+

Supprime un caractère à la position du curseur. Le comportement obtenu est le même que lorsqu'on appuie sur la touche Suppr d'un clavier Windows.

+
heading
+

Ajoute un élément de titre autour de la sélection ou au niveau du point d'insertion. L'argument doit être le nom d'une balise de titre ("H1" à "H6"). (Non pris en charge par Internet Explorer et Safari.)

+
hiliteColor
+

Modifie la couleur d'arrière-plan pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères définissant une couleur et useCSS doit valoir true. (Non pris en charge par Internet Explorer.)

+
increaseFontSize
+

Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou à partir du point d'insertion. (Non pris en charge par Internet Explorer).

+
indent
+

Augmente l'indentation de la ligne contenant la sélection ou le point d'insertion. Pour Firefox, si la sélection s'étend sur plusieurs lignes ayant différents niveaux d'indentation, seules les lignes les moins indentées seront décalées.

+
insertBrOnReturn
+

Contrôle si la touche Entrée insère un élément {{HTMLElement("br")}} ou si le bloc courant est scindé en deux. (Non pris en charge par Internet Explorer.)

+
insertHorizontalRule
+

Insère un élément {{HTMLElement("hr")}} au point d'insertion ou remplace la sélection courante par cet élément.

+
insertHTML
+

Insère un élément au point d'insertion en supprimant la sélection. Une chaîne de caractères HTML valide doit être fournie en argument. (Non pris en charge par Internet Explorer.)

+
insertImage
+

Insère une image au point d'insertion en supprimant la sélection. L'argument doit être une chaîne de caractères indiquant l'URL à utiliser pour l'attribut src de l'image. Les prérequis de cette valeur sont les mêmes que pour createLink.

+
insertOrderedList
+

Crée une liste numérotée ordonnée pour la sélection ou à partir du point d'insertion.

+
insertUnorderedList
+

Crée une liste non-ordonnée pour la sélection ou à partir du point d'insertion.

+
insertParagraph
+

Insère un paragraphe autour de la sélection pour la ligne courante. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)

+
insertText
+

Insère le texte indiqué au point d'insertion (quitte à supprimer l'éventuelle sélection courante).

+
italic
+

Active ou désactive la mise en italique pour la sélection ou à partir du point d'insertion. (Internet Explorer utilisera l'élément {{HTMLElement("em")}} plutôt que {{HTMLElement("i")}}.)

+
justifyCenter
+

Centre la sélection ou le point d'insertion.

+
justifyFull
+

Justifie la sélection ou le point d'insertion.

+
justifyLeft
+

Justifie à gauche la sélection ou le point d'insertion.

+
justifyRight
+

Justifie à droite la sélection ou le point d'insertion.

+
outdent
+

Effectue un retrait d'indentation pour la ligne courante.

+
paste
+

Colle le contenu du presse-papier au point d'insertion (et remplace éventuellement la sélection actuelle). Fonctionnalité désactivée pour le contenu web.

+
redo
+

Rejoue l'action annulée par la précédente commande undo.

+
removeFormat
+

Supprime toute mise en forme pour la sélection courante.

+
selectAll
+

Sélectionne l'ensemble du contenu de la région éditable.

+
strikeThrough
+

Active ou désactive la rayure de la sélection ou à partir d'un point d'insertion.

+
subscript
+

Active ou désactive la mise en indice pour la sélection ou au point d'insertion

+
superscript
+

Active ou désactive la mise en exposant pour la sélection ou au point d'insertion

+
underline
+

Active ou désactive le soulignement pour la sélection ou au point d'insertion.

+
undo
+

Annule la dernière commande exécutée.

+
unlink
+

Retire l'ancre de l'hyperlien sélectionné.

+
useCSS {{Deprecated_inline}}
+

Active/désactive l'utilisation de balises HTML ou de CSS pour le balisage généré. La valeur de l'argument doit être un booléen. Note : cet argument possède une logique inversée (false permet d'utiliser CSS et true permet d'utiliser HTML). Cette valeur n'est pas prise en charge par Internet Explorer et a été dépréciée en faveur de styleWithCSS.

styleWithCSS
+

Remplace la commande useCSS. true modifie/génère des attributs style dans le balisage tandis que false génère des éléments HTML de présentation.

+
+ +

Exemple

+ +

Un exemple d'utilisation est disponible + sur CodePen.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
execCommandBrouillon non officiel
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.execCommand")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/exitfullscreen/index.html b/files/fr/web/api/document/exitfullscreen/index.html deleted file mode 100644 index 5bff1f4f8c..0000000000 --- a/files/fr/web/api/document/exitfullscreen/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Document.exitFullscreen() -slug: Web/API/Document/exitFullscreen -tags: - - API - - Affichage - - DOM - - Méthodes - - Plein écran -translation_of: Web/API/Document/exitFullscreen ---- -
{{ApiRef("Fullscreen API")}}
- -

La méthode Document.exitFullscreen() extrait le document du mode plein écran ; elle est utilisée pour inverser les effets d'un appel au mode plein écran réalisé avec la méthode {{domxref("Element.requestFullscreen()")}}.

- -
-

Note : Si un autre élément était précédemment en mode plein écran lorsque l'élément en cours a été placé en mode plein écran, cet élément précédent reprend le mode plein écran. Une "pile" d'éléments en plein écran est maintenue par le navigateur à cette fin.

-
- -

Syntaxe

- -
document.exitFullscreen();
-
- -

Exemple

- -
// Click bascule en mode plein écran
-document.onclick = function (event) {
-  if (document.fullscreenElement) {
-    document.exitFullscreen()
-  } else {
-    document.documentElement.requestFullscreen()
-  }
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}{{Spec2("Fullscreen")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.exitFullscreen")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/exitfullscreen/index.md b/files/fr/web/api/document/exitfullscreen/index.md new file mode 100644 index 0000000000..5bff1f4f8c --- /dev/null +++ b/files/fr/web/api/document/exitfullscreen/index.md @@ -0,0 +1,67 @@ +--- +title: Document.exitFullscreen() +slug: Web/API/Document/exitFullscreen +tags: + - API + - Affichage + - DOM + - Méthodes + - Plein écran +translation_of: Web/API/Document/exitFullscreen +--- +
{{ApiRef("Fullscreen API")}}
+ +

La méthode Document.exitFullscreen() extrait le document du mode plein écran ; elle est utilisée pour inverser les effets d'un appel au mode plein écran réalisé avec la méthode {{domxref("Element.requestFullscreen()")}}.

+ +
+

Note : Si un autre élément était précédemment en mode plein écran lorsque l'élément en cours a été placé en mode plein écran, cet élément précédent reprend le mode plein écran. Une "pile" d'éléments en plein écran est maintenue par le navigateur à cette fin.

+
+ +

Syntaxe

+ +
document.exitFullscreen();
+
+ +

Exemple

+ +
// Click bascule en mode plein écran
+document.onclick = function (event) {
+  if (document.fullscreenElement) {
+    document.exitFullscreen()
+  } else {
+    document.documentElement.requestFullscreen()
+  }
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}{{Spec2("Fullscreen")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.exitFullscreen")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/exitpointerlock/index.html b/files/fr/web/api/document/exitpointerlock/index.html deleted file mode 100644 index 72a24c5f2f..0000000000 --- a/files/fr/web/api/document/exitpointerlock/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Document.exitPointerLock() -slug: Web/API/Document/exitPointerLock -tags: - - API - - DOM - - Experimental - - Méthode - - Reference -translation_of: Web/API/Document/exitPointerLock ---- -
{{APIRef("DOM")}}{{SeeCompatTable}}
- -

La méthode exitPointerLock() permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode {{domxref("Element.requestPointerLock()")}}.

- -

Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}.

- -

Syntaxe

- -
document.exitPointerLock();
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Pointer Lock','l#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extension de l'interface Document
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.exitPointerLock")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/exitpointerlock/index.md b/files/fr/web/api/document/exitpointerlock/index.md new file mode 100644 index 0000000000..72a24c5f2f --- /dev/null +++ b/files/fr/web/api/document/exitpointerlock/index.md @@ -0,0 +1,50 @@ +--- +title: Document.exitPointerLock() +slug: Web/API/Document/exitPointerLock +tags: + - API + - DOM + - Experimental + - Méthode + - Reference +translation_of: Web/API/Document/exitPointerLock +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

La méthode exitPointerLock() permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode {{domxref("Element.requestPointerLock()")}}.

+ +

Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}.

+ +

Syntaxe

+ +
document.exitPointerLock();
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Pointer Lock','l#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extension de l'interface Document
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.exitPointerLock")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/featurepolicy/index.html b/files/fr/web/api/document/featurepolicy/index.html deleted file mode 100644 index 4c2dbbe9ba..0000000000 --- a/files/fr/web/api/document/featurepolicy/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Document.featurePolicy -slug: Web/API/Document/featurePolicy -tags: - - API - - Document - - Feature Policy - - Feature-Policy - - Reference -translation_of: Web/API/Document/featurePolicy ---- -

{{APIRef("Feature Policy")}}

- -

La propriété en lecture seule featurePolicy de l'interface {{domxref("Document")}} retourne l'interface {{domxref("FeaturePolicy")}}, qui fournit une API permettant de consulter facilement les règles de fonctionnalités appliquées sur un document spécifique.

- -

Syntaxe

- -
var policy = iframeElement.featurePolicy
- -

Valeur

- -

Un objet {{domxref("FeaturePolicy")}} pouvant être utilisé pour consulter les paramètres de Feature Policy appliqués au document.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Feature Policy")}}{{Spec2("Feature Policy")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Document.featurePolicy")}}

diff --git a/files/fr/web/api/document/featurepolicy/index.md b/files/fr/web/api/document/featurepolicy/index.md new file mode 100644 index 0000000000..4c2dbbe9ba --- /dev/null +++ b/files/fr/web/api/document/featurepolicy/index.md @@ -0,0 +1,47 @@ +--- +title: Document.featurePolicy +slug: Web/API/Document/featurePolicy +tags: + - API + - Document + - Feature Policy + - Feature-Policy + - Reference +translation_of: Web/API/Document/featurePolicy +--- +

{{APIRef("Feature Policy")}}

+ +

La propriété en lecture seule featurePolicy de l'interface {{domxref("Document")}} retourne l'interface {{domxref("FeaturePolicy")}}, qui fournit une API permettant de consulter facilement les règles de fonctionnalités appliquées sur un document spécifique.

+ +

Syntaxe

+ +
var policy = iframeElement.featurePolicy
+ +

Valeur

+ +

Un objet {{domxref("FeaturePolicy")}} pouvant être utilisé pour consulter les paramètres de Feature Policy appliqués au document.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Feature Policy")}}{{Spec2("Feature Policy")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Document.featurePolicy")}}

diff --git a/files/fr/web/api/document/forms/index.html b/files/fr/web/api/document/forms/index.html deleted file mode 100644 index 69a310feb2..0000000000 --- a/files/fr/web/api/document/forms/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Document.forms -slug: Web/API/Document/forms -tags: - - API - - DOM - - Document - - Formulaires - - Propriétés -translation_of: Web/API/Document/forms ---- -
{{APIRef("DOM")}}
- -

La propriété forms de {{domxref("Document")}} retourne une collection ({{domxref("HTMLCollection")}}) des éléments {{HTMLElement("form")}} présents dans le document actuel.

- -
-

Note : De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur d'un formulaire à l'aide de la propriété {{domxref ("HTMLFormElement.elements")}}.

-
- -

Syntaxe

- -
collection = document.forms;
- -

Valeur

- -

Un objet {{domxref("HTMLCollection")}} listant tous les formulaires du document. Chaque élément de la collection est un {{domxref("HTMLFormElement")}} représentant un seul élément <form>.

- -

Exemples

- -

Récupérer les informations d'un formulaire

- -
<!DOCTYPE html>
-<html lang="en">
-
-<head>
-<title>document.forms example</title>
-</head>
-
-<body>
-
-<form id="robby">
-  <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
-</form>
-
-<form id="dave">
-  <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
-</form>
-
-<form id="paul">
-  <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
-</form>
-
-</body>
-</html>
-
- -

Accéder à un élément contenu dans un formulaire

- -
var selectForm = document.forms[index];
-var selectFormElement = document.forms[index].elements[index];
-
- -

Accéder aux formulaires nommés

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <title>document.forms example</title>
-</head>
-
-<body>
-
-<form name="login">
-  <input name="email" type="email">
-  <input name="password" type="password">
-  <button type="submit">Log in</button>
-</form>
-
-<script>
-  var loginForm = document.forms.login; // Ou document.forms['login']
-  loginForm.elements.email.placeholder = 'test@example.com';
-  loginForm.elements.password.placeholder = 'password';
-</script>
-</body>
-</html>
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}{{ Spec2('DOM2 Events') }}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/api/document/forms/index.md b/files/fr/web/api/document/forms/index.md new file mode 100644 index 0000000000..69a310feb2 --- /dev/null +++ b/files/fr/web/api/document/forms/index.md @@ -0,0 +1,116 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - Formulaires + - Propriétés +translation_of: Web/API/Document/forms +--- +
{{APIRef("DOM")}}
+ +

La propriété forms de {{domxref("Document")}} retourne une collection ({{domxref("HTMLCollection")}}) des éléments {{HTMLElement("form")}} présents dans le document actuel.

+ +
+

Note : De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur d'un formulaire à l'aide de la propriété {{domxref ("HTMLFormElement.elements")}}.

+
+ +

Syntaxe

+ +
collection = document.forms;
+ +

Valeur

+ +

Un objet {{domxref("HTMLCollection")}} listant tous les formulaires du document. Chaque élément de la collection est un {{domxref("HTMLFormElement")}} représentant un seul élément <form>.

+ +

Exemples

+ +

Récupérer les informations d'un formulaire

+ +
<!DOCTYPE html>
+<html lang="en">
+
+<head>
+<title>document.forms example</title>
+</head>
+
+<body>
+
+<form id="robby">
+  <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
+</form>
+
+<form id="dave">
+  <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
+</form>
+
+<form id="paul">
+  <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
+</form>
+
+</body>
+</html>
+
+ +

Accéder à un élément contenu dans un formulaire

+ +
var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+
+ +

Accéder aux formulaires nommés

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>document.forms example</title>
+</head>
+
+<body>
+
+<form name="login">
+  <input name="email" type="email">
+  <input name="password" type="password">
+  <button type="submit">Log in</button>
+</form>
+
+<script>
+  var loginForm = document.forms.login; // Ou document.forms['login']
+  loginForm.elements.email.placeholder = 'test@example.com';
+  loginForm.elements.password.placeholder = 'password';
+</script>
+</body>
+</html>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}{{ Spec2('DOM2 Events') }}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/fullscreenchange_event/index.html b/files/fr/web/api/document/fullscreenchange_event/index.html deleted file mode 100644 index a2606c65b2..0000000000 --- a/files/fr/web/api/document/fullscreenchange_event/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: fullscreenchange -slug: Web/API/Document/fullscreenchange_event -translation_of: Web/API/Document/fullscreenchange_event ---- -

L'événement onfullscreenchange est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran.

- -

Informations générales

- -
-
Spécification
-
Fullscreen
-
Interface
-
{{domxref("Event")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Document")}}
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}L'élément recevant l'événement.
type {{readonlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Indique si l'événement bubble habituellement ou non.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Indique si l'événement est annulable ou non.
- -

Exemple

- -
// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant
-document.addEventListener("fullscreenchange", function( event ) {
-
-    // L'objet event ne porte pas l'information à propos du mode plein écran
-    // Cependant, il est possible de la trouver à travers l'API fullscreen
-    if ( document.fullscreen ) {
-
-        // La cible de l'événement est toujours le document,
-        // mais il est possible de retrouver l'élément fullscreen à travers l'API
-        document.fullscreenElement;
-    }
-
-});
- -

Evénements liés

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/fullscreenchange_event/index.md b/files/fr/web/api/document/fullscreenchange_event/index.md new file mode 100644 index 0000000000..a2606c65b2 --- /dev/null +++ b/files/fr/web/api/document/fullscreenchange_event/index.md @@ -0,0 +1,85 @@ +--- +title: fullscreenchange +slug: Web/API/Document/fullscreenchange_event +translation_of: Web/API/Document/fullscreenchange_event +--- +

L'événement onfullscreenchange est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran.

+ +

Informations générales

+ +
+
Spécification
+
Fullscreen
+
Interface
+
{{domxref("Event")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Document")}}
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}L'élément recevant l'événement.
type {{readonlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Indique si l'événement bubble habituellement ou non.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Indique si l'événement est annulable ou non.
+ +

Exemple

+ +
// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant
+document.addEventListener("fullscreenchange", function( event ) {
+
+    // L'objet event ne porte pas l'information à propos du mode plein écran
+    // Cependant, il est possible de la trouver à travers l'API fullscreen
+    if ( document.fullscreen ) {
+
+        // La cible de l'événement est toujours le document,
+        // mais il est possible de retrouver l'élément fullscreen à travers l'API
+        document.fullscreenElement;
+    }
+
+});
+ +

Evénements liés

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/fullscreenerror_event/index.html b/files/fr/web/api/document/fullscreenerror_event/index.html deleted file mode 100644 index dafb34cf85..0000000000 --- a/files/fr/web/api/document/fullscreenerror_event/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: fullscreenerror -slug: Web/API/Document/fullscreenerror_event -translation_of: Web/API/Document/fullscreenerror_event ---- -

L'événement fullscreenerror est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.

- -

Informations générales

- -
-
Spécification
-
Fullscreen
-
Interface
-
{{domxref("Event")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Document")}}
-
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

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/fullscreenerror_event/index.md b/files/fr/web/api/document/fullscreenerror_event/index.md new file mode 100644 index 0000000000..dafb34cf85 --- /dev/null +++ b/files/fr/web/api/document/fullscreenerror_event/index.md @@ -0,0 +1,69 @@ +--- +title: fullscreenerror +slug: Web/API/Document/fullscreenerror_event +translation_of: Web/API/Document/fullscreenerror_event +--- +

L'événement fullscreenerror est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.

+ +

Informations générales

+ +
+
Spécification
+
Fullscreen
+
Interface
+
{{domxref("Event")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Document")}}
+
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

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/getboxobjectfor/index.html b/files/fr/web/api/document/getboxobjectfor/index.html deleted file mode 100644 index 5160c98e2a..0000000000 --- a/files/fr/web/api/document/getboxobjectfor/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Document.getBoxObjectFor() -slug: Web/API/Document/getBoxObjectFor -tags: - - API - - Boîte - - DOM - - Méthodes - - Objets -translation_of: Web/API/Document/getBoxObjectFor ---- -

{{ ApiRef("DOM") }} {{obsolete_header}}

- -

Renvoie un boxObject (x, y, largeur, hauteur) pour un élément spécifié.

- -
-

Note : Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.

-
- -

Syntaxe

- -
boxObject = document.getBoxObjectFor(element);
-
- - - -

Exemple

- -
var myDiv = document.getElementById("myDiv"),
-    boxObj = document.getBoxObjectFor (myDiv);
-
-alert (
-  "x:" + boxObj.x +
-  ", y:" + boxObj.y +
-  ", Width:" + boxObj.width +
-  ", Height:" + boxObj.height
-);
- -

Notes

- -

Spécifié dans nsIXULDocument.idl

diff --git a/files/fr/web/api/document/getboxobjectfor/index.md b/files/fr/web/api/document/getboxobjectfor/index.md new file mode 100644 index 0000000000..5160c98e2a --- /dev/null +++ b/files/fr/web/api/document/getboxobjectfor/index.md @@ -0,0 +1,44 @@ +--- +title: Document.getBoxObjectFor() +slug: Web/API/Document/getBoxObjectFor +tags: + - API + - Boîte + - DOM + - Méthodes + - Objets +translation_of: Web/API/Document/getBoxObjectFor +--- +

{{ ApiRef("DOM") }} {{obsolete_header}}

+ +

Renvoie un boxObject (x, y, largeur, hauteur) pour un élément spécifié.

+ +
+

Note : Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.

+
+ +

Syntaxe

+ +
boxObject = document.getBoxObjectFor(element);
+
+ + + +

Exemple

+ +
var myDiv = document.getElementById("myDiv"),
+    boxObj = document.getBoxObjectFor (myDiv);
+
+alert (
+  "x:" + boxObj.x +
+  ", y:" + boxObj.y +
+  ", Width:" + boxObj.width +
+  ", Height:" + boxObj.height
+);
+ +

Notes

+ +

Spécifié dans nsIXULDocument.idl

diff --git a/files/fr/web/api/document/getelementbyid/index.html b/files/fr/web/api/document/getelementbyid/index.html deleted file mode 100644 index eacf9ef0a2..0000000000 --- a/files/fr/web/api/document/getelementbyid/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: document.getElementById -slug: Web/API/Document/getElementById -tags: - - API - - DOM - - Document - - Elements - - Identifiant - - Méthodes -translation_of: Web/API/Document/getElementById ---- -

{{ ApiRef("DOM") }}

- -

La méthode getElementById() de {{domxref("Document")}} renvoie un objet  {{domxref("Element")}} représentant l'élément dont la propriété  {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.

- -

Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}.

- -

Syntaxe

- -
var element = document.getElementById(id);
-
- -

Paramètres

- -
-
id
-

L'ID (identifiant) de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.

-
- -

Valeur de retour

- -

Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou null si aucun n'a été trouvé dans le document.

- -

Exemple

- -

Contenu HTML

- -
<html>
-<head>
-  <title>getElementById example</title>
-</head>
-<body>
-  <p id="para">Some text here</p>
-  <button onclick="changeColor('blue');">blue</button>
-  <button onclick="changeColor('red');">red</button>
-</body>
-</html>
- -

Contenu JavaScript

- -
function changeColor(newColor) {
-  var elem = document.getElementById('para');
-  elem.style.color = newColor;
-}
- -

Résultat

- -

{{ EmbedLiveSample('Example1', 250, 100) }}

- -

Notes d'utilisation

- -

L'écriture de la lettre capitale de « Id » dans le nom de cette méthode doit être respectée pour que le code fonctionne ; getElementByID() n'est pas valide et ne fonctionnera pas, même si elle semble naturelle.

- -

Contrairement à d'autres méthodes de recherche d'éléments, comme  {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, getElementById est uniquement disponible comme méthode de l'objet global document et n'est pas disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.

- -

Exemple

- -
<!doctype html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Document</title>
-</head>
-<body>
-    <div id="parent-id">
-        <p>hello word1</p>
-        <p id="test1">hello word2</p>
-        <p>hello word3</p>
-        <p>hello word4</p>
-    </div>
-    <script>
-        var parentDOM = document.getElementById('parent-id');
-        var test1=parentDOM.getElementById('test1');
-        //erreur de lancement 
-        //TypeError inattendu : parentDOM.getElementById n'est pas une fonction 
-    </script>
-</body>
-</html>
- -

S'il n'y a pas d'élément avec l'id fourni, cette fonction retourne null. A noter que le paramètre id est sensible à la casse, ainsi document.getElementById("Main") retournera null au lieu de l'élément <div id="main"> étant donné que "M" et "m" sont différents pour cette méthode.

- -

Les éléments absents du document ne sont pas cherchés par getElementById(). Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec getElementById() :

- -
var element = document.createElement('div');
-element.id = 'testqq';
-var el = document.getElementById('testqq'); // el vaudra null !
- -

Les documents non-HTML. Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut id est défini comme étant de type ID dans les langages courants comme XHTML ou XUL. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer null.

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Définition initiale de l'interface
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Remplace DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Remplace DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Remplacera DOM 3
- -

Traduction en français (non normative) : getElementById

- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.getElementById")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md new file mode 100644 index 0000000000..eacf9ef0a2 --- /dev/null +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -0,0 +1,145 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elements + - Identifiant + - Méthodes +translation_of: Web/API/Document/getElementById +--- +

{{ ApiRef("DOM") }}

+ +

La méthode getElementById() de {{domxref("Document")}} renvoie un objet  {{domxref("Element")}} représentant l'élément dont la propriété  {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.

+ +

Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}.

+ +

Syntaxe

+ +
var element = document.getElementById(id);
+
+ +

Paramètres

+ +
+
id
+

L'ID (identifiant) de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.

+
+ +

Valeur de retour

+ +

Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou null si aucun n'a été trouvé dans le document.

+ +

Exemple

+ +

Contenu HTML

+ +
<html>
+<head>
+  <title>getElementById example</title>
+</head>
+<body>
+  <p id="para">Some text here</p>
+  <button onclick="changeColor('blue');">blue</button>
+  <button onclick="changeColor('red');">red</button>
+</body>
+</html>
+ +

Contenu JavaScript

+ +
function changeColor(newColor) {
+  var elem = document.getElementById('para');
+  elem.style.color = newColor;
+}
+ +

Résultat

+ +

{{ EmbedLiveSample('Example1', 250, 100) }}

+ +

Notes d'utilisation

+ +

L'écriture de la lettre capitale de « Id » dans le nom de cette méthode doit être respectée pour que le code fonctionne ; getElementByID() n'est pas valide et ne fonctionnera pas, même si elle semble naturelle.

+ +

Contrairement à d'autres méthodes de recherche d'éléments, comme  {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, getElementById est uniquement disponible comme méthode de l'objet global document et n'est pas disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.

+ +

Exemple

+ +
<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p id="test1">hello word2</p>
+        <p>hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById('parent-id');
+        var test1=parentDOM.getElementById('test1');
+        //erreur de lancement 
+        //TypeError inattendu : parentDOM.getElementById n'est pas une fonction 
+    </script>
+</body>
+</html>
+ +

S'il n'y a pas d'élément avec l'id fourni, cette fonction retourne null. A noter que le paramètre id est sensible à la casse, ainsi document.getElementById("Main") retournera null au lieu de l'élément <div id="main"> étant donné que "M" et "m" sont différents pour cette méthode.

+ +

Les éléments absents du document ne sont pas cherchés par getElementById(). Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec getElementById() :

+ +
var element = document.createElement('div');
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el vaudra null !
+ +

Les documents non-HTML. Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut id est défini comme étant de type ID dans les langages courants comme XHTML ou XUL. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer null.

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Définition initiale de l'interface
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Remplace DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Remplace DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Remplacera DOM 3
+ +

Traduction en français (non normative) : getElementById

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.getElementById")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/getelementsbyclassname/index.html b/files/fr/web/api/document/getelementsbyclassname/index.html deleted file mode 100644 index 43ff0fb18a..0000000000 --- a/files/fr/web/api/document/getelementsbyclassname/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: document.getElementsByClassName -slug: Web/API/Document/getElementsByClassName -tags: - - API - - DOM - - Méthodes - - Reference -translation_of: Web/API/Document/getElementsByClassName ---- -

{{APIRef("DOM")}}

- -

Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.

- -

Syntaxe

- -
var elements = document.getElementsByClassName(names); // or:
-var elements = rootElement.getElementsByClassName(names);
- - - -

Exemples

- -

Trouve tous les éléments ayant la classe « test » :

- -
 document.getElementsByClassName('test')
-
- -

Trouve tous les éléments ayant les classes « rouge » et « test » :

- -
 document.getElementsByClassName('rouge test')
-
- -

Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :

- -
 document.getElementById('main').getElementsByClassName('test')
-
- -

Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':

- -
var testElements = document.getElementsByClassName('test');
-var testDivs = Array.prototype.filter.call(testElements, function(testElement){
-    return testElement.nodeName === 'DIV';
-});
- -

XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code>

- -

Obtenir la classe  des éléments test

- -

C'est la méthode d'opération la plus couramment utilisée.

- -
<!doctype html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Document</title>
-</head>
-<body>
-    <div id="parent-id">
-        <p>hello word1</p>
-        <p class="test">hello word2</p>
-        <p >hello word3</p>
-        <p>hello word4</p>
-    </div>
-    <script>
-        var parentDOM = document.getElementById("parent-id");
-
-        var test=parentDOM.getElementsByClassName("test");//test is not target element
-        console.log(test);//HTMLCollection[1]
-
-        var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target
-        console.log(testTarget);//<p class="test">hello word2</p>
-    </script>
-</body>
-</html>
- -

Compatibilité des navigateurs

- - -

{{Compat("api.Document.getElementsByClassName")}}

- - - -

Spécification

- - diff --git a/files/fr/web/api/document/getelementsbyclassname/index.md b/files/fr/web/api/document/getelementsbyclassname/index.md new file mode 100644 index 0000000000..43ff0fb18a --- /dev/null +++ b/files/fr/web/api/document/getelementsbyclassname/index.md @@ -0,0 +1,92 @@ +--- +title: document.getElementsByClassName +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.

+ +

Syntaxe

+ +
var elements = document.getElementsByClassName(names); // or:
+var elements = rootElement.getElementsByClassName(names);
+ + + +

Exemples

+ +

Trouve tous les éléments ayant la classe « test » :

+ +
 document.getElementsByClassName('test')
+
+ +

Trouve tous les éléments ayant les classes « rouge » et « test » :

+ +
 document.getElementsByClassName('rouge test')
+
+ +

Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :

+ +
 document.getElementById('main').getElementsByClassName('test')
+
+ +

Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

XXX writeme == Notes == Une méthode semblable existe pour <code>Element</code>

+ +

Obtenir la classe  des éléments test

+ +

C'est la méthode d'opération la plus couramment utilisée.

+ +
<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p class="test">hello word2</p>
+        <p >hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById("parent-id");
+
+        var test=parentDOM.getElementsByClassName("test");//test is not target element
+        console.log(test);//HTMLCollection[1]
+
+        var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target
+        console.log(testTarget);//<p class="test">hello word2</p>
+    </script>
+</body>
+</html>
+ +

Compatibilité des navigateurs

+ + +

{{Compat("api.Document.getElementsByClassName")}}

+ + + +

Spécification

+ + diff --git a/files/fr/web/api/document/getelementsbyname/index.html b/files/fr/web/api/document/getelementsbyname/index.html deleted file mode 100644 index d2087a0d22..0000000000 --- a/files/fr/web/api/document/getelementsbyname/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: document.getElementsByName() -slug: Web/API/Document/getElementsByName -tags: - - API - - DOM - - Document - - HTML - - Méthodes -translation_of: Web/API/Document/getElementsByName ---- -

{{ ApiRef("DOM") }}

- -

Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.

- -

Syntaxe

- -
elements = document.getElementsByName(name)
-
- - - -

Exemple

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
- ...
-</head>
-
-<body>
-<form name="up"><input type="text"></form>
-<div name="down"><input type="text"></div>
-
-<script>
-var up_forms = document.getElementsByName("up");
-console.log(up_forms[0].tagName); // retourne "FORM"
-</script>
-</body>
-</html>
- -

Notes

- -

L'attribut name est uniquement applicable aux documents (X) HTML. La méthode renvoie une collection {{domxref("NodeList")}} en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que {{htmlelement("meta")}} ou {{htmlelement("object")}} ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut name.

- -

La méthode getElementsByName fonctionne différemment dans différents navigateurs. Dans IE <10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée. Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}{{Spec2("DOM2 HTML")}}Définition initiale
- -

Voir aussi

- - - -

 

diff --git a/files/fr/web/api/document/getelementsbyname/index.md b/files/fr/web/api/document/getelementsbyname/index.md new file mode 100644 index 0000000000..d2087a0d22 --- /dev/null +++ b/files/fr/web/api/document/getelementsbyname/index.md @@ -0,0 +1,86 @@ +--- +title: document.getElementsByName() +slug: Web/API/Document/getElementsByName +tags: + - API + - DOM + - Document + - HTML + - Méthodes +translation_of: Web/API/Document/getElementsByName +--- +

{{ ApiRef("DOM") }}

+ +

Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.

+ +

Syntaxe

+ +
elements = document.getElementsByName(name)
+
+ + + +

Exemple

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+ ...
+</head>
+
+<body>
+<form name="up"><input type="text"></form>
+<div name="down"><input type="text"></div>
+
+<script>
+var up_forms = document.getElementsByName("up");
+console.log(up_forms[0].tagName); // retourne "FORM"
+</script>
+</body>
+</html>
+ +

Notes

+ +

L'attribut name est uniquement applicable aux documents (X) HTML. La méthode renvoie une collection {{domxref("NodeList")}} en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que {{htmlelement("meta")}} ou {{htmlelement("object")}} ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut name.

+ +

La méthode getElementsByName fonctionne différemment dans différents navigateurs. Dans IE <10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée. Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}{{Spec2("DOM2 HTML")}}Définition initiale
+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/api/document/getelementsbytagname/index.html b/files/fr/web/api/document/getelementsbytagname/index.html deleted file mode 100644 index b90d19fbe0..0000000000 --- a/files/fr/web/api/document/getelementsbytagname/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: document.getElementsByTagName -slug: Web/API/Document/getElementsByTagName -tags: - - API - - DOM - - Elements - - Méthodes -translation_of: Web/API/Document/getElementsByTagName ---- -
{{ ApiRef("DOM") }}
- -
 
- -

Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné. Le document complet est recherché, y compris le nœud racine. Le HTMLCollection renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName ().

- -

Syntaxe

- -
var elements = document.getElementsByTagName(name);
- - - -
-

Note : La dernière spécification W3C dit que  elements est une   HTMLCollection ; cependant cette méthode renvoie une  {{domxref("NodeList")}} dans les navigateurs WebKit. Voir  {{bug(14869)}} pour plus de détails.

-
- -

Exemple

- -

Dans l'exemple suivant, getElementsByTagName() commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de name. Cela démontre à la fois document.getElementsByTagName() et son homologue {{domxref ("Element.getElementsByTagName ()")}}, qui lance la recherche sur un élément spécifique dans l'arbre DOM.

- -

Cliquer sur les boutons utilise getElementsByTagName() pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments {{HTMLElement ("div")}} imbriqués).

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>getElementsByTagName example</title>
-  <script>
-    function getAllParaElems() {
-      var allParas = document.getElementsByTagName('p');
-      var num = allParas.length;
-      alert('There are ' + num + ' paragraph in this document');
-    }
-
-    function div1ParaElems() {
-      var div1 = document.getElementById('div1');
-      var div1Paras = div1.getElementsByTagName('p');
-      var num = div1Paras.length;
-      alert('There are ' + num + ' paragraph in #div1');
-    }
-
-    function div2ParaElems() {
-      var div2 = document.getElementById('div2');
-      var div2Paras = div2.getElementsByTagName('p');
-      var num = div2Paras.length;
-      alert('There are ' + num + ' paragraph in #div2');
-    }
-  </script>
-</head>
-<body style="border: solid green 3px">
-  <p>Some outer text</p>
-  <p>Some outer text</p>
-
-  <div id="div1" style="border: solid blue 3px">
-    <p>Some div1 text</p>
-    <p>Some div1 text</p>
-    <p>Some div1 text</p>
-
-    <div id="div2" style="border: solid red 3px">
-      <p>Some div2 text</p>
-      <p>Some div2 text</p>
-    </div>
-  </div>
-
-  <p>Some outer text</p>
-  <p>Some outer text</p>
-
-  <button onclick="getAllParaElems();">
-    show all p elements in document</button><br />
-
-  <button onclick="div1ParaElems();">
-    show all p elements in div1 element</button><br />
-
-  <button onclick="div2ParaElems();">
-    show all p elements in div2 element</button>
-
-</body>
-</html>
- -

Notes

- -

Lorsqu'elle est appelée sur un document HTML, getElementsByTagName() classe son argument avant de continuer. Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML. {{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas. Voir aussi {{Bug (499656)}}.
-
- document.getElementsByTagName() est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.

- -

Spécifications

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/getelementsbytagname/index.md b/files/fr/web/api/document/getelementsbytagname/index.md new file mode 100644 index 0000000000..b90d19fbe0 --- /dev/null +++ b/files/fr/web/api/document/getelementsbytagname/index.md @@ -0,0 +1,113 @@ +--- +title: document.getElementsByTagName +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Elements + - Méthodes +translation_of: Web/API/Document/getElementsByTagName +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné. Le document complet est recherché, y compris le nœud racine. Le HTMLCollection renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName ().

+ +

Syntaxe

+ +
var elements = document.getElementsByTagName(name);
+ + + +
+

Note : La dernière spécification W3C dit que  elements est une   HTMLCollection ; cependant cette méthode renvoie une  {{domxref("NodeList")}} dans les navigateurs WebKit. Voir  {{bug(14869)}} pour plus de détails.

+
+ +

Exemple

+ +

Dans l'exemple suivant, getElementsByTagName() commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de name. Cela démontre à la fois document.getElementsByTagName() et son homologue {{domxref ("Element.getElementsByTagName ()")}}, qui lance la recherche sur un élément spécifique dans l'arbre DOM.

+ +

Cliquer sur les boutons utilise getElementsByTagName() pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments {{HTMLElement ("div")}} imbriqués).

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>getElementsByTagName example</title>
+  <script>
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName('p');
+      var num = allParas.length;
+      alert('There are ' + num + ' paragraph in this document');
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById('div1');
+      var div1Paras = div1.getElementsByTagName('p');
+      var num = div1Paras.length;
+      alert('There are ' + num + ' paragraph in #div1');
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById('div2');
+      var div2Paras = div2.getElementsByTagName('p');
+      var num = div2Paras.length;
+      alert('There are ' + num + ' paragraph in #div2');
+    }
+  </script>
+</head>
+<body style="border: solid green 3px">
+  <p>Some outer text</p>
+  <p>Some outer text</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+
+    <div id="div2" style="border: solid red 3px">
+      <p>Some div2 text</p>
+      <p>Some div2 text</p>
+    </div>
+  </div>
+
+  <p>Some outer text</p>
+  <p>Some outer text</p>
+
+  <button onclick="getAllParaElems();">
+    show all p elements in document</button><br />
+
+  <button onclick="div1ParaElems();">
+    show all p elements in div1 element</button><br />
+
+  <button onclick="div2ParaElems();">
+    show all p elements in div2 element</button>
+
+</body>
+</html>
+ +

Notes

+ +

Lorsqu'elle est appelée sur un document HTML, getElementsByTagName() classe son argument avant de continuer. Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML. {{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas. Voir aussi {{Bug (499656)}}.
+
+ document.getElementsByTagName() est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.

+ +

Spécifications

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/getelementsbytagnamens/index.html b/files/fr/web/api/document/getelementsbytagnamens/index.html deleted file mode 100644 index a91fcc93bb..0000000000 --- a/files/fr/web/api/document/getelementsbytagnamens/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Document.getElementsByTagNameNS() -slug: Web/API/Document/getElementsByTagNameNS -tags: - - API - - DOM - - Elements - - Méthodes - - Nom - - XPath -translation_of: Web/API/Document/getElementsByTagNameNS ---- -

{{ ApiRef("DOM") }}

- -

{{ fx_minversion_note("3.6","Voir la section Notes de element.getElementsByTagNameNS pour les changements qui s'appliquent aussi à cet API dans Firefox 3.6.") }}

- -

Renvoie une liste d'éléments avec la balise de nom donnée appartenant à l'espace de noms donné. Le document complet est recherché, y compris le noeud racine.

- -

Syntaxe

- -
elements = document.getElementsByTagNameNS(namespace,name)
-
- - - -
-

Note : Tandis que la spécification W3C indique que les elements sont des NodeList, cette méthode renvoie une {{domxref("HTMLCollection")}} dans Gecko et Internet Explorer. Opera retourne une NodeList, mais avec une méthode implémentée namedItem, ce qui la rend similaire à une HTMLCollection. À partir de Janvier 2012, dans les navigateurs WebKit seulement, la valeur retournée est une pure NodeList. Voir bug 14869 pour plus de détails.

-
- -

Exemple

- -

Dans l'exemple suivant, getElementsByTagNameNS commence à partir d'un élément parent particulier et cherche dans le DOM récursivement de haut en bas à partir de cet élément parent, les éléments enfants correspondant au paramètre name de la balise.

- -

Notez que lorsque le noeud sur lequel getElementsByTagName est invoqué n'est pas un noeud document, la méthode element.getElementsByTagNameNS est en fait utilisée.

- -

Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml.

- -
http://www.w3.org/1999/xhtml">
-
-<head>
-<title>getElementsByTagNameNS example</title>
-
-<script type="text/javascript">
-
-function getAllParaElems()
-{
-  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
-
-  var num = allParas.length;
-
-  alert("There are " + num + " &lt;p&gt; elements in this document");
-}
-
-
-function div1ParaElems()
-{
-  var div1 = document.getElementById("div1")
-  var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
-
-  var num = div1Paras.length;
-
-  alert("There are " + num + " &lt;p&gt; elements in div1 element");
-}
-
-
-function div2ParaElems()
-{
-  var div2 = document.getElementById("div2")
-  var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
-
-  var num = div2Paras.length;
-
-  alert("There are " + num + " &lt;p&gt; elements in div2 element");
-}
-
-</script>
-</head>
-
-<body style="border: solid green 3px">
-<p>Some outer text</p>
-<p>Some outer text</p>
-
-  <div id="div1" style="border: solid blue 3px">
-    <p>Some div1 text</p>
-    <p>Some div1 text</p>
-    <p>Some div1 text</p>
-
-    <div id="div2" style="border: solid red 3px">
-    <p>Some div2 text</p>
-    <p>Some div2 text</p>
-    </div>
-  </div>
-
-<p>Some outer text</p>
-<p>Some outer text</p>
-
-<button onclick="getAllParaElems();">
- show all p elements in document</button><br />
-
-<button onclick="div1ParaElems();">
- show all p elements in div1 element</button><br />
-
-<button onclick="div2ParaElems();">
- show all p elements in div2 element</button>
-
-</body>
-</html>
-
- -

Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath

- -

Si le navigateur souhaité ne supporte pas XPath, une autre approche (comme traverser le DOM à travers tous ses enfants, identifier toutes les instances de @xmlns, etc.) serait nécessaire pour trouver toutes les balises avec le nom local et l'espace de noms, mais XPath est beaucoup plus rapide. (Pour adapter à Explorer, on pourrait appeler un wrapper XPath au lieu du XPath dans la fonction ci-dessous (comme Explorer supporte XPath avec une API différente), comme cette classe wrapper.)

- -
function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
-	if (!doc) {
-		doc = document;
-	}
-	if (!context) {
-		context = doc;
-	}
-
-	var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-
-        var a = [];
-        for(var i = 0; i < result.snapshotLength; i++) {
-            a[i] = result.snapshotItem(i);
-        }
-        return a;
-}
-
- -

Spécifications

- -

DOM Level 2 Core: Document.getElementsByTagNameNS

diff --git a/files/fr/web/api/document/getelementsbytagnamens/index.md b/files/fr/web/api/document/getelementsbytagnamens/index.md new file mode 100644 index 0000000000..a91fcc93bb --- /dev/null +++ b/files/fr/web/api/document/getelementsbytagnamens/index.md @@ -0,0 +1,138 @@ +--- +title: Document.getElementsByTagNameNS() +slug: Web/API/Document/getElementsByTagNameNS +tags: + - API + - DOM + - Elements + - Méthodes + - Nom + - XPath +translation_of: Web/API/Document/getElementsByTagNameNS +--- +

{{ ApiRef("DOM") }}

+ +

{{ fx_minversion_note("3.6","Voir la section Notes de element.getElementsByTagNameNS pour les changements qui s'appliquent aussi à cet API dans Firefox 3.6.") }}

+ +

Renvoie une liste d'éléments avec la balise de nom donnée appartenant à l'espace de noms donné. Le document complet est recherché, y compris le noeud racine.

+ +

Syntaxe

+ +
elements = document.getElementsByTagNameNS(namespace,name)
+
+ + + +
+

Note : Tandis que la spécification W3C indique que les elements sont des NodeList, cette méthode renvoie une {{domxref("HTMLCollection")}} dans Gecko et Internet Explorer. Opera retourne une NodeList, mais avec une méthode implémentée namedItem, ce qui la rend similaire à une HTMLCollection. À partir de Janvier 2012, dans les navigateurs WebKit seulement, la valeur retournée est une pure NodeList. Voir bug 14869 pour plus de détails.

+
+ +

Exemple

+ +

Dans l'exemple suivant, getElementsByTagNameNS commence à partir d'un élément parent particulier et cherche dans le DOM récursivement de haut en bas à partir de cet élément parent, les éléments enfants correspondant au paramètre name de la balise.

+ +

Notez que lorsque le noeud sur lequel getElementsByTagName est invoqué n'est pas un noeud document, la méthode element.getElementsByTagNameNS est en fait utilisée.

+ +

Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml.

+ +
http://www.w3.org/1999/xhtml">
+
+<head>
+<title>getElementsByTagNameNS example</title>
+
+<script type="text/javascript">
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = allParas.length;
+
+  alert("There are " + num + " &lt;p&gt; elements in this document");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div1Paras.length;
+
+  alert("There are " + num + " &lt;p&gt; elements in div1 element");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div2Paras.length;
+
+  alert("There are " + num + " &lt;p&gt; elements in div2 element");
+}
+
+</script>
+</head>
+
+<body style="border: solid green 3px">
+<p>Some outer text</p>
+<p>Some outer text</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+
+    <div id="div2" style="border: solid red 3px">
+    <p>Some div2 text</p>
+    <p>Some div2 text</p>
+    </div>
+  </div>
+
+<p>Some outer text</p>
+<p>Some outer text</p>
+
+<button onclick="getAllParaElems();">
+ show all p elements in document</button><br />
+
+<button onclick="div1ParaElems();">
+ show all p elements in div1 element</button><br />
+
+<button onclick="div2ParaElems();">
+ show all p elements in div2 element</button>
+
+</body>
+</html>
+
+ +

Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath

+ +

Si le navigateur souhaité ne supporte pas XPath, une autre approche (comme traverser le DOM à travers tous ses enfants, identifier toutes les instances de @xmlns, etc.) serait nécessaire pour trouver toutes les balises avec le nom local et l'espace de noms, mais XPath est beaucoup plus rapide. (Pour adapter à Explorer, on pourrait appeler un wrapper XPath au lieu du XPath dans la fonction ci-dessous (comme Explorer supporte XPath avec une API différente), comme cette classe wrapper.)

+ +
function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
+	if (!doc) {
+		doc = document;
+	}
+	if (!context) {
+		context = doc;
+	}
+
+	var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+
+        var a = [];
+        for(var i = 0; i < result.snapshotLength; i++) {
+            a[i] = result.snapshotItem(i);
+        }
+        return a;
+}
+
+ +

Spécifications

+ +

DOM Level 2 Core: Document.getElementsByTagNameNS

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 e485df22ae..0000000000 --- a/files/fr/web/api/document/getselection/index.html +++ /dev/null @@ -1,16 +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 -original_slug: Web/API/DocumentOrShadowRoot/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/getselection/index.md b/files/fr/web/api/document/getselection/index.md new file mode 100644 index 0000000000..e485df22ae --- /dev/null +++ b/files/fr/web/api/document/getselection/index.md @@ -0,0 +1,16 @@ +--- +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 +original_slug: Web/API/DocumentOrShadowRoot/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/hasfocus/index.html b/files/fr/web/api/document/hasfocus/index.html deleted file mode 100644 index fb6088c0a9..0000000000 --- a/files/fr/web/api/document/hasfocus/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: document.hasFocus -slug: Web/API/Document/hasFocus -tags: - - API - - DOM - - Focus - - Méthodes - - Reference -translation_of: Web/API/Document/hasFocus ---- -

{{ ApiRef() }}

- -

La méthode Document.hasFocus() retourne une valeur  {{jsxref("Boolean")}} true (vrai) indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.

- -
-

Note : Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.

-
- -

Syntaxe

- -
focused = document.hasFocus();
-
- -

Valeur retournée

- -

false (faux) si l'élément actif dans le document n'a pas de focus ; true (vrai) si l'élément actif dans le document a le focus.

- -

Exemple

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8" />
-<title>TEST</title>
-<style>
-#message { font-weight: bold; }
-</style>
-<script>
-setInterval( checkPageFocus, 200 );
-
-function checkPageFocus() {
-  var info = document.getElementById("message");
-
-  if ( document.hasFocus() ) {
-    info.innerHTML = "The document has the focus.";
-  } else {
-    info.innerHTML = "The document doesn't have the focus.";
-  }
-}
-
-function openWindow() {
-  window.open (
-    "https://developer.mozilla.org/",
-    "mozdev",
-    "width=640,height=300,left=150,top=260"
-  );
-}
-</script>
-</head>
-<body>
-  <h1>JavaScript hasFocus example</h1>
-  <div id="message">Waiting for user action</div>
-  <div><button onclick="openWindow()">Open a new window</button></div>
-</body>
-</html>
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}{{Spec2('HTML WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.hasFocus")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/hasfocus/index.md b/files/fr/web/api/document/hasfocus/index.md new file mode 100644 index 0000000000..fb6088c0a9 --- /dev/null +++ b/files/fr/web/api/document/hasfocus/index.md @@ -0,0 +1,95 @@ +--- +title: document.hasFocus +slug: Web/API/Document/hasFocus +tags: + - API + - DOM + - Focus + - Méthodes + - Reference +translation_of: Web/API/Document/hasFocus +--- +

{{ ApiRef() }}

+ +

La méthode Document.hasFocus() retourne une valeur  {{jsxref("Boolean")}} true (vrai) indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.

+ +
+

Note : Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.

+
+ +

Syntaxe

+ +
focused = document.hasFocus();
+
+ +

Valeur retournée

+ +

false (faux) si l'élément actif dans le document n'a pas de focus ; true (vrai) si l'élément actif dans le document a le focus.

+ +

Exemple

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>TEST</title>
+<style>
+#message { font-weight: bold; }
+</style>
+<script>
+setInterval( checkPageFocus, 200 );
+
+function checkPageFocus() {
+  var info = document.getElementById("message");
+
+  if ( document.hasFocus() ) {
+    info.innerHTML = "The document has the focus.";
+  } else {
+    info.innerHTML = "The document doesn't have the focus.";
+  }
+}
+
+function openWindow() {
+  window.open (
+    "https://developer.mozilla.org/",
+    "mozdev",
+    "width=640,height=300,left=150,top=260"
+  );
+}
+</script>
+</head>
+<body>
+  <h1>JavaScript hasFocus example</h1>
+  <div id="message">Waiting for user action</div>
+  <div><button onclick="openWindow()">Open a new window</button></div>
+</body>
+</html>
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}{{Spec2('HTML WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.hasFocus")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/head/index.html b/files/fr/web/api/document/head/index.html deleted file mode 100644 index ef80950d76..0000000000 --- a/files/fr/web/api/document/head/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: document.head -slug: Web/API/Document/head -tags: - - DOM - - Document - - HTML5 -translation_of: Web/API/Document/head ---- - -

Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément <head>, le premier est retourné.

- -

Syntaxe

- -
var objRef = document.head;
-
- -

Exemple

- -
// en HTML: <head id="my-document-head">
-var aHead = document.head;
-
-alert(aHead.id); // "my-document-head";
-
-alert( document.head === document.querySelector("head") ); // true
-
- -

Notes

- -

document.head est en lecture seule. Essayer d'assigner une valeur à cettre propriété échouera en silence ou lancera une TypeError si le mode strict d'ECMAScript est activé dans un navigateur Gecko.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Initial definition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.head")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/head/index.md b/files/fr/web/api/document/head/index.md new file mode 100644 index 0000000000..ef80950d76 --- /dev/null +++ b/files/fr/web/api/document/head/index.md @@ -0,0 +1,69 @@ +--- +title: document.head +slug: Web/API/Document/head +tags: + - DOM + - Document + - HTML5 +translation_of: Web/API/Document/head +--- + +

Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément <head>, le premier est retourné.

+ +

Syntaxe

+ +
var objRef = document.head;
+
+ +

Exemple

+ +
// en HTML: <head id="my-document-head">
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+
+ +

Notes

+ +

document.head est en lecture seule. Essayer d'assigner une valeur à cettre propriété échouera en silence ou lancera une TypeError si le mode strict d'ECMAScript est activé dans un navigateur Gecko.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.head")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/height/index.html b/files/fr/web/api/document/height/index.html deleted file mode 100644 index 6dbe1f47e8..0000000000 --- a/files/fr/web/api/document/height/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Document.height -slug: Web/API/Document/height -translation_of: Web/API/Document/height ---- -
{{APIRef("DOM")}} {{Obsolete_header}}
- -
-

Note: Apparu avec {{Gecko("6.0")}}, document.height n'est plus supporté. Utilisez à la place document.body.clientHeight. Voir {{domxref("element.clientHeight")}}.

-
- -

Résumé

- -

Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant.

- -

Syntaxe

- -
height_value = document.height
-
- -

Exemple

- -
// alert document height
-alert(document.height);
-
- -

Alternatives

- -
document.body.clientHeight
-document.documentElement.clientHeight
-document.documentElement.scrollHeight
-
- -

Spécification

- -

HTML5

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/height/index.md b/files/fr/web/api/document/height/index.md new file mode 100644 index 0000000000..6dbe1f47e8 --- /dev/null +++ b/files/fr/web/api/document/height/index.md @@ -0,0 +1,44 @@ +--- +title: Document.height +slug: Web/API/Document/height +translation_of: Web/API/Document/height +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

Note: Apparu avec {{Gecko("6.0")}}, document.height n'est plus supporté. Utilisez à la place document.body.clientHeight. Voir {{domxref("element.clientHeight")}}.

+
+ +

Résumé

+ +

Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant.

+ +

Syntaxe

+ +
height_value = document.height
+
+ +

Exemple

+ +
// alert document height
+alert(document.height);
+
+ +

Alternatives

+ +
document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+
+ +

Spécification

+ +

HTML5

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/hidden/index.html b/files/fr/web/api/document/hidden/index.html deleted file mode 100644 index 66da5b2e9d..0000000000 --- a/files/fr/web/api/document/hidden/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Document.hidden -slug: Web/API/Document/hidden -translation_of: Web/API/Document/hidden ---- -

{{ ApiRef("DOM") }}

- -

La propriété Document.hidden retourne un Booléen qui indique si la page est considérée cachée ou pas.

- -

Syntaxe

- -
var boolean = document.hidden
- -

Exemples

- -
document.addEventListener("visibilitychange", function() {
-  console.log( document.hidden );
-  // Modifier le comportement...
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}{{Spec2('Page Visibility API')}}Initial definition
- -

Browser compatibility

- -

{{Compat("api.Document.hidden")}}

diff --git a/files/fr/web/api/document/hidden/index.md b/files/fr/web/api/document/hidden/index.md new file mode 100644 index 0000000000..66da5b2e9d --- /dev/null +++ b/files/fr/web/api/document/hidden/index.md @@ -0,0 +1,41 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +translation_of: Web/API/Document/hidden +--- +

{{ ApiRef("DOM") }}

+ +

La propriété Document.hidden retourne un Booléen qui indique si la page est considérée cachée ou pas.

+ +

Syntaxe

+ +
var boolean = document.hidden
+ +

Exemples

+ +
document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // Modifier le comportement...
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}{{Spec2('Page Visibility API')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.Document.hidden")}}

diff --git a/files/fr/web/api/document/images/index.html b/files/fr/web/api/document/images/index.html deleted file mode 100644 index 1b127eb980..0000000000 --- a/files/fr/web/api/document/images/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: document.images -slug: Web/API/Document/images -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Document/images ---- -

{{ ApiRef() }}

- -

document.images renvoie une collection des images du document HTML courant.

- -

Syntaxe

- -
HTMLCollection =document.images
- -

Exemple

- -
var listeimg = document.images;
-for(var i = 0; i < listeimg.length; i++) {
-    if(listeimg[i] == "banner.gif") {
-         // l'image banner a été trouvée
-    }
-}
-
- -

Notes

- -

document.images fait partie du DOM HTML, et fonctionne uniquement pour les document HTML.

-

Spécification

- diff --git a/files/fr/web/api/document/images/index.md b/files/fr/web/api/document/images/index.md new file mode 100644 index 0000000000..1b127eb980 --- /dev/null +++ b/files/fr/web/api/document/images/index.md @@ -0,0 +1,33 @@ +--- +title: document.images +slug: Web/API/Document/images +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Document/images +--- +

{{ ApiRef() }}

+ +

document.images renvoie une collection des images du document HTML courant.

+ +

Syntaxe

+ +
HTMLCollection =document.images
+ +

Exemple

+ +
var listeimg = document.images;
+for(var i = 0; i < listeimg.length; i++) {
+    if(listeimg[i] == "banner.gif") {
+         // l'image banner a été trouvée
+    }
+}
+
+ +

Notes

+ +

document.images fait partie du DOM HTML, et fonctionne uniquement pour les document HTML.

+

Spécification

+ diff --git a/files/fr/web/api/document/implementation/index.html b/files/fr/web/api/document/implementation/index.html deleted file mode 100644 index f7684fa56f..0000000000 --- a/files/fr/web/api/document/implementation/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: document.implementation -slug: Web/API/Document/implementation -tags: - - API - - DOM - - Propriétés - - Reference -translation_of: Web/API/Document/implementation ---- -

Résumé

- -

Retourne un objet {{domxref("DOMImplementation")}} associé avec le document courant.

- -

Syntaxe

- -
DOMImpObj = document.implementation;
-
- -

Exemple

- -
var modName = "HTML";
-var modVer = "2.0";
-var conformTest = document.implementation.hasFeature( modName, modVer );
-
-alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest );
-
-// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.
- -

Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la Conformance Section DOM niveau 2.

- -

Notes

- -

La recommandation DOM niveau 1 du W3C ne spécifiait que la méthode hasFeature, qui est un moyen de déterminer si un module DOM est supporté par un navigateur (voir l'exemple ci-dessus et ce que votre agent utilisateur prétend prendre en charge ?). Si disponibles, d'autres méthodes DOMImplementation fournissent des services pour contrôler des choses en dehors d'un document unique. Par exemple, l'interface DOMImplementation inclut une méthode createDocumentType avec laquelle des DTD peuvent être créées pour un ou plusieurs documents gérés par l'implémentation.

- -

Spécifications

- - - -

Notes propres à Gecko

- - diff --git a/files/fr/web/api/document/implementation/index.md b/files/fr/web/api/document/implementation/index.md new file mode 100644 index 0000000000..f7684fa56f --- /dev/null +++ b/files/fr/web/api/document/implementation/index.md @@ -0,0 +1,47 @@ +--- +title: document.implementation +slug: Web/API/Document/implementation +tags: + - API + - DOM + - Propriétés + - Reference +translation_of: Web/API/Document/implementation +--- +

Résumé

+ +

Retourne un objet {{domxref("DOMImplementation")}} associé avec le document courant.

+ +

Syntaxe

+ +
DOMImpObj = document.implementation;
+
+ +

Exemple

+ +
var modName = "HTML";
+var modVer = "2.0";
+var conformTest = document.implementation.hasFeature( modName, modVer );
+
+alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest );
+
+// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.
+ +

Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la Conformance Section DOM niveau 2.

+ +

Notes

+ +

La recommandation DOM niveau 1 du W3C ne spécifiait que la méthode hasFeature, qui est un moyen de déterminer si un module DOM est supporté par un navigateur (voir l'exemple ci-dessus et ce que votre agent utilisateur prétend prendre en charge ?). Si disponibles, d'autres méthodes DOMImplementation fournissent des services pour contrôler des choses en dehors d'un document unique. Par exemple, l'interface DOMImplementation inclut une méthode createDocumentType avec laquelle des DTD peuvent être créées pour un ou plusieurs documents gérés par l'implémentation.

+ +

Spécifications

+ + + +

Notes propres à Gecko

+ + diff --git a/files/fr/web/api/document/importnode/index.html b/files/fr/web/api/document/importnode/index.html deleted file mode 100644 index afda055041..0000000000 --- a/files/fr/web/api/document/importnode/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: document.importNode -slug: Web/API/Document/importNode -tags: - - API - - Copie - - Document - - Méthodes - - Noeud - - Reference -translation_of: Web/API/Document/importNode ---- -

{{APIRef("DOM")}}

- -

La méthode {{domxref ("Document")}} importNode() crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.

- -

Syntaxe

- -
var node = document.importNode(externalNode, deep);
-
- -
-
externalNode
-
Le nouveau Node ou DocumentFragment à importer dans le document courant. Après l'importation, le nouveau parentNode du noeud est null, car il n'a pas encore été inséré dans l'arborescence du document.
-
deep
-
Une valeur booléenne qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de externalNode. Si ce paramètre est true (vrai), alors externalNode et tous ses descendants sont copiés; si false (faux), seul le nœud unique, externalNode, est importé.
-
- -
-

Note : Dans la spécification DOM4, deep est répertorié en tant qu'argument facultatif. S'il est omis, la méthode agit comme si la valeur de deep était true, par défaut, elle utilisait le clonage profond comme comportement par défaut. Pour créer un clone superficiel, la profondeur doit être définie sur false.
-
- Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de deep était false. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument deep à la fois pour la compatibilité en amont et en aval. Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.

-
- -

Exemple

- -
var iframe = document.getElementsByTagName("iframe")[0];
-var oldNode = iframe.contentWindow.document.getElementById("myNode");
-var newNode = document.importNode(oldNode, true);
-document.getElementById("container").appendChild(newNode);
- -

Notes

- -

Le noeud d'origine n'est pas supprimé du document d'origine. Le noeud importé est un clone de l'original.

- -

 

- -

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.

- -

 

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}{{Spec2("DOM2 Core")}}Définition initiale
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.Document.importNode")}}  

-
- -

Voir aussi

- - - -

 

diff --git a/files/fr/web/api/document/importnode/index.md b/files/fr/web/api/document/importnode/index.md new file mode 100644 index 0000000000..afda055041 --- /dev/null +++ b/files/fr/web/api/document/importnode/index.md @@ -0,0 +1,92 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +tags: + - API + - Copie + - Document + - Méthodes + - Noeud + - Reference +translation_of: Web/API/Document/importNode +--- +

{{APIRef("DOM")}}

+ +

La méthode {{domxref ("Document")}} importNode() crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.

+ +

Syntaxe

+ +
var node = document.importNode(externalNode, deep);
+
+ +
+
externalNode
+
Le nouveau Node ou DocumentFragment à importer dans le document courant. Après l'importation, le nouveau parentNode du noeud est null, car il n'a pas encore été inséré dans l'arborescence du document.
+
deep
+
Une valeur booléenne qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de externalNode. Si ce paramètre est true (vrai), alors externalNode et tous ses descendants sont copiés; si false (faux), seul le nœud unique, externalNode, est importé.
+
+ +
+

Note : Dans la spécification DOM4, deep est répertorié en tant qu'argument facultatif. S'il est omis, la méthode agit comme si la valeur de deep était true, par défaut, elle utilisait le clonage profond comme comportement par défaut. Pour créer un clone superficiel, la profondeur doit être définie sur false.
+
+ Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de deep était false. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument deep à la fois pour la compatibilité en amont et en aval. Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.

+
+ +

Exemple

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+ +

Notes

+ +

Le noeud d'origine n'est pas supprimé du document d'origine. Le noeud importé est un clone de l'original.

+ +

 

+ +

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.

+ +

 

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}{{Spec2("DOM2 Core")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Document.importNode")}}  

+
+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/api/document/index.html b/files/fr/web/api/document/index.html deleted file mode 100644 index 186904db9e..0000000000 --- a/files/fr/web/api/document/index.html +++ /dev/null @@ -1,490 +0,0 @@ ---- -title: document -slug: Web/API/Document -tags: - - API - - DOM - - Document - - Interface - - Reference -translation_of: Web/API/Document ---- -

{{ApiRef}}

- -

L'interface Document représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM. L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} (corps) et {{HTMLElement ("table")}} (tableau), parmi beaucoup d'autres. Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document.

- -

{{inheritanceDiagram}}

- -

L'interface Document décrit les propriétés et méthodes communes à tout type de document. En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type text/html, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que les documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}.

- -

Constructeur

- -
-
{{domxref("Document.Document","Document()")}}{{non-standard_inline}}
-
crée un nouvel objet Document .
-
- -

Propriétés

- -

Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} .

- -
-
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
-
fournit un accès à tous les éléments du document. C'est une interface héritée non standard qui ne doit pas être utilisée.
-
- -
-
{{domxref("Document.async")}} {{Deprecated_inline}}
-
utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone.
-
- -
-
{{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}}
-
renvoie le jeu de caractères utilisé par le document.
-
- -
-
{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}
-
indique si le document est rendu en mode Quirks ou Strict.
-
- -
-
{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}
-
Renvoie le type de contenu de l'en-tête MIME du document courant.
-
- -
-
{{domxref("Document.doctype")}} {{readonlyinline}}
-
Renvoie le DTD (Document Type Definition) du document courant.
-
- -
-
{{domxref("Document.documentElement")}} {{readonlyinline}}
-
Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}.
-
{{domxref("Document.documentURI")}} {{readonlyinline}}
-
retroune l'emplacement du document sous la forme d'une chaîne de caractères.
-
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
-
devrait retourner un objet {{domxref("DOMConfiguration")}} .
-
{{domxref("Document.fullscreen")}} {{obsolete_inline}}
-
true (vrai) quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}.
-
{{domxref("Document.hidden")}} {{readonlyinline}}
-
...
-
{{domxref("Document.implementation")}} {{readonlyinline}}
-
Renvoie l'implémentation DOM associée au document courant.
-
{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}
-
alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place.
-
{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}
-
retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur null jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de  {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
-
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
-
retourne un {{jsxref("Boolean")}} qui est true (vrai) seulement si le document est synthétique, tel qu'une image autonome, une vidéo, un fichier audio ou similaire.
-
{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
-
L'élément qui est actuellement affiché en mode plein écran pour ce document.
-
{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
-
true (vrai) si l'appel  {{domxref("Element.mozRequestFullscreen()")}}  est réussi dans le document courant.
-
{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}
-
renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. null si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document.
-
{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}
-
renvoie la page de style préférée spécifiée par l'auteur de la page.
-
{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}
-
retourne une référence à l'{{domxref("Element")}} qui fait défiler le document.
-
{{domxref("Document.selectedStyleSheetSet")}}
-
renvoie la feuille de style actuellement utilisée.
-
{{domxref("Document.styleSheets")}} {{readonlyinline}}
-
Renvoie une liste de tous les objets {{domxref("stylesheet")}} (feuilles de styles) du document courant.
-
{{domxref("Document.timeline")}} {{readonlyinline}}
-
...
-
{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}
-
...
-
{{domxref("Document.visibilityState")}} {{readonlyinline}}
-
renvoie une string (chaîne de caractères) indiquant l'état de visibilité du document. Les valeurs possibles sont visible , hidden (masqué) , prerender (pré-rendu) et unloaded (déchargées).
-
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
-
retourne le codage déterminé par une déclaration XML.
-
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
-
renvoie true si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon false (faux).
-
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
-
retourne le numéro de la version spécifié dans la déclaration XML ou "1.0" si la déclaration est absente.
-
- -

L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :

- -

{{page("/fr/docs/Web/API/ParentNode","Propriétés")}}

- -

Extensions du document HTML

- -

L'interface Document, pour les documents HTML, hérite de l'interface {{domxref("HTMLDocument")}}  ou depuis HTML5, est étendue pour eux.

- -
-
{{domxref("Document.activeElement")}} {{readonlyinline}}
-
Renvoie l'élément courant qui a la focus.
-
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
-
Renvoie ou définit la couleur des liens actifs du corps du document.
-
{{domxref("Document.anchors")}}
-
Renvoie une liste de toutes les ancres du document.
-
{{domxref("Document.applets")}} {{Deprecated_inline}}
-
Renvoie une liste ordonnée des "applets" du document.
-
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
-
bgColor renvoie ou définit la couleur d'arrière-plan du document courant.
-
- -
-
{{domxref("Document.body")}}
-
body renvoie l'élément  {{HTMLElement("body")}} du document en cours.
-
{{domxref("Document.cookie")}}
-
Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie.
-
- -
-
{{domxref("Document.defaultView")}} {{readonlyinline}}
-
Renvoie une référence à l'objet window.
-
{{domxref("Document.designMode")}}
-
renvoie ou définit les capacités d'édition du document entier.
-
{{domxref("Document.dir")}} {{readonlyinline}}
-
Assigne / renvoie le sens du texte (rtl/ltr) (de gauche à droite / de droite à gauche) du document.
-
{{domxref("Document.domain")}}
-
renvoie ou affecte le domaine de l'élément courant.
-
{{domxref("Document.embeds")}} {{readonlyinline}}
-
renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant.
-
- -
-
{{domxref("Document.fgColor")}} {{Deprecated_inline}}
-
renvoie ou définit la couleur du texte du document courant.
-
{{domxref("Document.forms")}} {{readonlyinline}}
-
forms renvoie une liste des éléments {{HTMLElement("form")}} du document courant
-
{{domxref("Document.head")}} {{readonlyinline}}
-
Renvoie l'élément {{HTMLElement("head")}} du document.
-
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
-
renvoie ou définit la hauteur du document courant.
-
{{domxref("Document.images")}} {{readonlyinline}}
-
renvoie une liste des images du document courant.
-
{{domxref("Document.lastModified")}} {{readonlyinline}}
-
Renvoie la date de dernière modification du document.
-
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
-
Renvoie ou définit la couleur des liens du document.
-
{{domxref("Document.links")}} {{readonlyinline}}
-
Renvoie un tableau de tous les liens du document.
-
{{domxref("Document.location")}} {{readonlyinline}}
-
Renvoie l'URI (Uniform Ressource Identifier : identifiant uniforme de ressource) du document courant.
-
{{domxref("Document.plugins")}} {{readonlyinline}}
-
Renvoie une liste des plugins disponibles.
-
{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}
-
retourne l'état du chargement du document.
-
{{domxref("Document.referrer")}} {{readonlyinline}}
-
Renvoie l'URI de la page qui a amené à cette page.
-
{{domxref("Document.scripts")}} {{readonlyinline}}
-
renvoie tous les éléments {{HTMLElement("script")}}  sur le document.
-
{{domxref("Document.title")}}
-
Renvoie le titre du document courant.
-
{{domxref("Document.URL")}}  {{readonlyInline}}
-
Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", repère uniforme de ressource) du document courant.
-
- -
-
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
-
Renvoie ou définit la couleur des liens visités du document.
-
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
-
Renvoie la largeur du document courant.
-
- -

Gestionnaire d'évènements

- -
-
{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}
-
représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}}
-
{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}
-
retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} .
-
{{domxref("Document.oncopy")}} {{non-standard_inline}}
-
représente le code de gestion d'évènements pour l'évènement {{event("copy")}} .
-
{{domxref("Document.oncut")}} {{non-standard_inline}}
-
représente le code de gestion d'évènements pour l'évènement {{event("cut")}} .
-
{{domxref("Document.onfullscreenchange")}}
-
est un  {{event("Event_handlers", "event handler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé.
-
{{domxref("Document.onfullscreenerror")}}
-
{{domxref("Document.onfullscreenchange")}}
-
est un  {{event("Event_handlers", "event handler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé.
-
{{domxref("Document.onpaste")}} {{non-standard_inline}}
-
représente le code de gestion d'évènements pour l'évènement {{event("paste")}} .
-
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
-
représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} .
-
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
-
représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} .
-
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
-
représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} .
-
{{domxref("Document.onselectionchange")}} {{experimental_inline}}
-
est un  {{event("Event_handlers", "event handler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé.
-
{{domxref("Document.onvisibilitychange")}}
-
est un  {{event("Event_handlers", "event handler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé.
-
{{domxref("Document.onwheel")}} {{non-standard_inline}}
-
représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} .
-
- -

L'interface Document est étendue avec l'interface {{domxref("GlobalEventHandlers")}} :

- -

{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}}

- -

Méthodes

- -

Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.

- -
-
{{domxref("Document.adoptNode()")}}
-
adopte le noeud d'un document externe.
-
{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}
-
voir {{domxref("Window.captureEvents")}}.
-
{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}
-
obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées.
-
{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}
-
Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées.
-
{{domxref("Document.createAttribute()")}}
-
Crée un nouvel objet {{domxref("Attr")}} et le renvoie.
-
{{domxref("Document.createAttributeNS()")}}
-
Crée un nouveau noeud dans l'espace nom donné et le renvoie.
-
{{domxref("Document.createCDATASection()")}}
-
Crée un nouveau nœud CDATA et le renvoie.
-
{{domxref("Document.createComment()")}}
-
Crée un nouveau nœud de commentaire et le renvoie.
-
{{domxref("Document.createDocumentFragment()")}}
-
Crée un nouveau fragment de document.
-
{{domxref("Document.createElement()")}}
-
Crée un nouvel élément avec l'étiquette spécifiée.
-
{{domxref("Document.createElementNS()")}}
-
Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés.
-
{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}
-
Crée un nouvel objet de référence à une entité et le renvoie.
-
{{domxref("Document.createEvent()")}}
-
Crée un nouvel évènement.
-
{{domxref("Document.createNodeIterator()")}}
-
crée un objet {{domxref("NodeIterator")}} .
-
{{domxref("Document.createProcessingInstruction()")}}
-
crée un nouvel objet {{domxref("ProcessingInstruction")}} .
-
{{domxref("Document.createRange()")}}
-
Crée un objet {{domxref("Range")}} .
-
{{domxref("Document.createTextNode()")}}
-
Crée un nœud de texte.
-
{{domxref("Document.createTouch()")}} {{Deprecated_inline}}
-
crée un objet {{domxref("Touch")}}
-
{{domxref("Document.createTouchList()")}}
-
crée un objet {{domxref("TouchList")}}
-
{{domxref("Document.createTreeWalker()")}}
-
Crée un objet {{domxref("TreeWalker")}} .
-
{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}
-
Renvoie l'élément visible aux coordonnées spécifiées.
-
{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}
-
Renvoie un tableau de tous les éléments aux coordonnées spécifiées.
-
{{domxref("Document.enableStyleSheetsForSet()")}}
-
active les feuilles de style pour l'ensemble de feuilles de style spécifié.
-
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
-
Supprime le verrou du pointeur.
-
{{domxref("Document.getAnimations()")}} {{experimental_inline}}
-
retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce document.
-
- -
-
{{domxref("Document.getElementsByClassName()")}}
-
Renvoie une liste des éléments ayant le nom de classe donné.
-
- -
-
{{domxref("Document.getElementsByTagName()")}}
-
Renvoie une liste des éléments ayant le nom de balise donné.
-
- -
-
{{domxref("Document.getElementsByTagNameNS()")}}
-
Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés.
-
- -
-
{{domxref("Document.importNode()")}}
-
Renvoie une copie (un clone) d'un élément provenant d'un document externe.
-
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
-
remplace les entités, normalise les noeuds de texte, etc.
-
{{domxref("Document.registerElement()")}} {{experimental_inline}}
-
Enregistre un composant Web.
-
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
-
Libère la capture de la souris en cours s'il s'agit d'un élément de ce document.
-
{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}
-
voir {{domxref("Window.releaseEvents()")}}.
-
{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}
-
Voir {{domxref("Window.routeEvent()")}}.
-
{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
-
Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié.
-
- -

L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :

- -
-
{{domxref("document.getElementById","document.getElementById(String id)")}}
-
retourne une référence d'objet à l'élément identifié.
-
{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
-
Renvoie le premier noeud Element dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés.
-
{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
-
retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés.
-
- -

L'interface Document est étendue avec l'interface  {{domxref("XPathEvaluator")}} :

- -
-
{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}
-
compile une XPathExpression qui peut ensuite être utilisée pour des évaluations (répétées).
-
{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}
-
crée un objet {{domxref("XPathNSResolver")}} .
-
{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
-
évalue l'expression XPath .
-
- -

Extensions pour les documents HTML

- -
-
{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
-
dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien.
-
{{domxref("document.close()")}}
-
ferme un flux de document pour l'écriture.
-
{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}
-
Sur un document modifiable, exécute une commande de formatage.
-
{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}
-
retourne une liste d'éléments ayant le nom donné.
-
{{domxref("document.getSelection()")}}
-
retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document.
-
{{domxref("document.hasFocus()")}}
-
retourne true (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié.
-
{{domxref("document.open()")}}
-
Ouvre un flux pour l'écriture dans le document.
-
{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}
-
Renvoie true si la commande de formatage peut être exécutée sur la plage courante.
-
{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}
-
Renvoie true si la commande de formatage est dans un état indéterminé sur la plage courante.
-
{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}
-
Renvoie true si la commande de formatage a été exécutée sur la plage courante.
-
{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}
-
retourne true (vrai) si la commande de formatage est supportée sur la plage courante.
-
{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}
-
renvoie la valeur courante de la plage en cours pour une commande de formatage.
-
{{domxref("document.write","document.write(String text)")}}
-
Écrit du texte dans le document.
-
{{domxref("document.writeln","document.writeln(String text)")}}
-
Écrit une ligne de texte dans le document.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}{{Spec2('Page Visibility API')}}Ajoute onvisibilitychange.
{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}{{Spec2('Selection API')}}Ajoute onselectstartet onselectionchange.
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Définition initiale pour l'interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Remplace DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}remplace DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}en vue de remplacer DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Transforme l'interface {{domxref("HTMLDocument")}} en une extension de Document
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document.
{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}{{Spec2('Page Visibility API')}}Étend l'interface Document  avec les attributs visibilityState et hidden.
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Étend l'interface Document
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Étend l'interface Document
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Étend l'interface Document
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Étend l'interface Document
- -

Compatibilité des navigateurs notes

- -

Notes concernant Firefox :

- -

Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL :

- -
-
{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
-
retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution.
-
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
-
(extensions Mozilla seulement) retourne l'objet  {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect).
-
{{domxref("document.popupNode")}}
-
retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle.
-
{{domxref("document.tooltipNode")}}
-
retourne le noeud qui est la cible de l'info-bulle actuelle.
-
- -

Mozilla a également défini quelques méthodes non standard :

- -
-
{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
-
Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.
-
{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}
-
Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place.
-
{{domxref("document.loadOverlay")}}
-
charge dynamiquement un XUL overlay . Celui-ci fonctionne seulement dans les documents XUL.
-
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
-
Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.
-
- -

Notes concernant Internet Explorer

- -

Microsoft a défini quelques propriétés non standard :

- -
-
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
-
Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir  MSDN.
-
- -

Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document :

- -
-
{{domxref("document.contains")}}
-
Pour contourner le problème, document.body.contains () peut être utilisé.
-
diff --git a/files/fr/web/api/document/index.md b/files/fr/web/api/document/index.md new file mode 100644 index 0000000000..186904db9e --- /dev/null +++ b/files/fr/web/api/document/index.md @@ -0,0 +1,490 @@ +--- +title: document +slug: Web/API/Document +tags: + - API + - DOM + - Document + - Interface + - Reference +translation_of: Web/API/Document +--- +

{{ApiRef}}

+ +

L'interface Document représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM. L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} (corps) et {{HTMLElement ("table")}} (tableau), parmi beaucoup d'autres. Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document.

+ +

{{inheritanceDiagram}}

+ +

L'interface Document décrit les propriétés et méthodes communes à tout type de document. En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type text/html, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que les documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}.

+ +

Constructeur

+ +
+
{{domxref("Document.Document","Document()")}}{{non-standard_inline}}
+
crée un nouvel objet Document .
+
+ +

Propriétés

+ +

Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} .

+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
fournit un accès à tous les éléments du document. C'est une interface héritée non standard qui ne doit pas être utilisée.
+
+ +
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone.
+
+ +
+
{{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}}
+
renvoie le jeu de caractères utilisé par le document.
+
+ +
+
{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}
+
indique si le document est rendu en mode Quirks ou Strict.
+
+ +
+
{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}
+
Renvoie le type de contenu de l'en-tête MIME du document courant.
+
+ +
+
{{domxref("Document.doctype")}} {{readonlyinline}}
+
Renvoie le DTD (Document Type Definition) du document courant.
+
+ +
+
{{domxref("Document.documentElement")}} {{readonlyinline}}
+
Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}.
+
{{domxref("Document.documentURI")}} {{readonlyinline}}
+
retroune l'emplacement du document sous la forme d'une chaîne de caractères.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
devrait retourner un objet {{domxref("DOMConfiguration")}} .
+
{{domxref("Document.fullscreen")}} {{obsolete_inline}}
+
true (vrai) quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}.
+
{{domxref("Document.hidden")}} {{readonlyinline}}
+
...
+
{{domxref("Document.implementation")}} {{readonlyinline}}
+
Renvoie l'implémentation DOM associée au document courant.
+
{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}
+
alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place.
+
{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}
+
retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur null jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de  {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
retourne un {{jsxref("Boolean")}} qui est true (vrai) seulement si le document est synthétique, tel qu'une image autonome, une vidéo, un fichier audio ou similaire.
+
{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
L'élément qui est actuellement affiché en mode plein écran pour ce document.
+
{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true (vrai) si l'appel  {{domxref("Element.mozRequestFullscreen()")}}  est réussi dans le document courant.
+
{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}
+
renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. null si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document.
+
{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}
+
renvoie la page de style préférée spécifiée par l'auteur de la page.
+
{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}
+
retourne une référence à l'{{domxref("Element")}} qui fait défiler le document.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
renvoie la feuille de style actuellement utilisée.
+
{{domxref("Document.styleSheets")}} {{readonlyinline}}
+
Renvoie une liste de tous les objets {{domxref("stylesheet")}} (feuilles de styles) du document courant.
+
{{domxref("Document.timeline")}} {{readonlyinline}}
+
...
+
{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}
+
...
+
{{domxref("Document.visibilityState")}} {{readonlyinline}}
+
renvoie une string (chaîne de caractères) indiquant l'état de visibilité du document. Les valeurs possibles sont visible , hidden (masqué) , prerender (pré-rendu) et unloaded (déchargées).
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
retourne le codage déterminé par une déclaration XML.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
renvoie true si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon false (faux).
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
retourne le numéro de la version spécifié dans la déclaration XML ou "1.0" si la déclaration est absente.
+
+ +

L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :

+ +

{{page("/fr/docs/Web/API/ParentNode","Propriétés")}}

+ +

Extensions du document HTML

+ +

L'interface Document, pour les documents HTML, hérite de l'interface {{domxref("HTMLDocument")}}  ou depuis HTML5, est étendue pour eux.

+ +
+
{{domxref("Document.activeElement")}} {{readonlyinline}}
+
Renvoie l'élément courant qui a la focus.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Renvoie ou définit la couleur des liens actifs du corps du document.
+
{{domxref("Document.anchors")}}
+
Renvoie une liste de toutes les ancres du document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Renvoie une liste ordonnée des "applets" du document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
bgColor renvoie ou définit la couleur d'arrière-plan du document courant.
+
+ +
+
{{domxref("Document.body")}}
+
body renvoie l'élément  {{HTMLElement("body")}} du document en cours.
+
{{domxref("Document.cookie")}}
+
Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie.
+
+ +
+
{{domxref("Document.defaultView")}} {{readonlyinline}}
+
Renvoie une référence à l'objet window.
+
{{domxref("Document.designMode")}}
+
renvoie ou définit les capacités d'édition du document entier.
+
{{domxref("Document.dir")}} {{readonlyinline}}
+
Assigne / renvoie le sens du texte (rtl/ltr) (de gauche à droite / de droite à gauche) du document.
+
{{domxref("Document.domain")}}
+
renvoie ou affecte le domaine de l'élément courant.
+
{{domxref("Document.embeds")}} {{readonlyinline}}
+
renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant.
+
+ +
+
{{domxref("Document.fgColor")}} {{Deprecated_inline}}
+
renvoie ou définit la couleur du texte du document courant.
+
{{domxref("Document.forms")}} {{readonlyinline}}
+
forms renvoie une liste des éléments {{HTMLElement("form")}} du document courant
+
{{domxref("Document.head")}} {{readonlyinline}}
+
Renvoie l'élément {{HTMLElement("head")}} du document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
renvoie ou définit la hauteur du document courant.
+
{{domxref("Document.images")}} {{readonlyinline}}
+
renvoie une liste des images du document courant.
+
{{domxref("Document.lastModified")}} {{readonlyinline}}
+
Renvoie la date de dernière modification du document.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Renvoie ou définit la couleur des liens du document.
+
{{domxref("Document.links")}} {{readonlyinline}}
+
Renvoie un tableau de tous les liens du document.
+
{{domxref("Document.location")}} {{readonlyinline}}
+
Renvoie l'URI (Uniform Ressource Identifier : identifiant uniforme de ressource) du document courant.
+
{{domxref("Document.plugins")}} {{readonlyinline}}
+
Renvoie une liste des plugins disponibles.
+
{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}
+
retourne l'état du chargement du document.
+
{{domxref("Document.referrer")}} {{readonlyinline}}
+
Renvoie l'URI de la page qui a amené à cette page.
+
{{domxref("Document.scripts")}} {{readonlyinline}}
+
renvoie tous les éléments {{HTMLElement("script")}}  sur le document.
+
{{domxref("Document.title")}}
+
Renvoie le titre du document courant.
+
{{domxref("Document.URL")}}  {{readonlyInline}}
+
Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", repère uniforme de ressource) du document courant.
+
+ +
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Renvoie ou définit la couleur des liens visités du document.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Renvoie la largeur du document courant.
+
+ +

Gestionnaire d'évènements

+ +
+
{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}}
+
{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}
+
retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} .
+
{{domxref("Document.oncopy")}} {{non-standard_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("copy")}} .
+
{{domxref("Document.oncut")}} {{non-standard_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("cut")}} .
+
{{domxref("Document.onfullscreenchange")}}
+
est un  {{event("Event_handlers", "event handler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé.
+
{{domxref("Document.onfullscreenerror")}}
+
{{domxref("Document.onfullscreenchange")}}
+
est un  {{event("Event_handlers", "event handler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé.
+
{{domxref("Document.onpaste")}} {{non-standard_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("paste")}} .
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} .
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} .
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} .
+
{{domxref("Document.onselectionchange")}} {{experimental_inline}}
+
est un  {{event("Event_handlers", "event handler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé.
+
{{domxref("Document.onvisibilitychange")}}
+
est un  {{event("Event_handlers", "event handler")}} ( gestionnaire d'évènements) représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé.
+
{{domxref("Document.onwheel")}} {{non-standard_inline}}
+
représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} .
+
+ +

L'interface Document est étendue avec l'interface {{domxref("GlobalEventHandlers")}} :

+ +

{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}}

+ +

Méthodes

+ +

Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.

+ +
+
{{domxref("Document.adoptNode()")}}
+
adopte le noeud d'un document externe.
+
{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}
+
voir {{domxref("Window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}
+
obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées.
+
{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}
+
Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées.
+
{{domxref("Document.createAttribute()")}}
+
Crée un nouvel objet {{domxref("Attr")}} et le renvoie.
+
{{domxref("Document.createAttributeNS()")}}
+
Crée un nouveau noeud dans l'espace nom donné et le renvoie.
+
{{domxref("Document.createCDATASection()")}}
+
Crée un nouveau nœud CDATA et le renvoie.
+
{{domxref("Document.createComment()")}}
+
Crée un nouveau nœud de commentaire et le renvoie.
+
{{domxref("Document.createDocumentFragment()")}}
+
Crée un nouveau fragment de document.
+
{{domxref("Document.createElement()")}}
+
Crée un nouvel élément avec l'étiquette spécifiée.
+
{{domxref("Document.createElementNS()")}}
+
Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés.
+
{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}
+
Crée un nouvel objet de référence à une entité et le renvoie.
+
{{domxref("Document.createEvent()")}}
+
Crée un nouvel évènement.
+
{{domxref("Document.createNodeIterator()")}}
+
crée un objet {{domxref("NodeIterator")}} .
+
{{domxref("Document.createProcessingInstruction()")}}
+
crée un nouvel objet {{domxref("ProcessingInstruction")}} .
+
{{domxref("Document.createRange()")}}
+
Crée un objet {{domxref("Range")}} .
+
{{domxref("Document.createTextNode()")}}
+
Crée un nœud de texte.
+
{{domxref("Document.createTouch()")}} {{Deprecated_inline}}
+
crée un objet {{domxref("Touch")}}
+
{{domxref("Document.createTouchList()")}}
+
crée un objet {{domxref("TouchList")}}
+
{{domxref("Document.createTreeWalker()")}}
+
Crée un objet {{domxref("TreeWalker")}} .
+
{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}
+
Renvoie l'élément visible aux coordonnées spécifiées.
+
{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}
+
Renvoie un tableau de tous les éléments aux coordonnées spécifiées.
+
{{domxref("Document.enableStyleSheetsForSet()")}}
+
active les feuilles de style pour l'ensemble de feuilles de style spécifié.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Supprime le verrou du pointeur.
+
{{domxref("Document.getAnimations()")}} {{experimental_inline}}
+
retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce document.
+
+ +
+
{{domxref("Document.getElementsByClassName()")}}
+
Renvoie une liste des éléments ayant le nom de classe donné.
+
+ +
+
{{domxref("Document.getElementsByTagName()")}}
+
Renvoie une liste des éléments ayant le nom de balise donné.
+
+ +
+
{{domxref("Document.getElementsByTagNameNS()")}}
+
Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés.
+
+ +
+
{{domxref("Document.importNode()")}}
+
Renvoie une copie (un clone) d'un élément provenant d'un document externe.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
remplace les entités, normalise les noeuds de texte, etc.
+
{{domxref("Document.registerElement()")}} {{experimental_inline}}
+
Enregistre un composant Web.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Libère la capture de la souris en cours s'il s'agit d'un élément de ce document.
+
{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
voir {{domxref("Window.releaseEvents()")}}.
+
{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
Voir {{domxref("Window.routeEvent()")}}.
+
{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié.
+
+ +

L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :

+ +
+
{{domxref("document.getElementById","document.getElementById(String id)")}}
+
retourne une référence d'objet à l'élément identifié.
+
{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Renvoie le premier noeud Element dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés.
+
{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés.
+
+ +

L'interface Document est étendue avec l'interface  {{domxref("XPathEvaluator")}} :

+ +
+
{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}
+
compile une XPathExpression qui peut ensuite être utilisée pour des évaluations (répétées).
+
{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}
+
crée un objet {{domxref("XPathNSResolver")}} .
+
{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
évalue l'expression XPath .
+
+ +

Extensions pour les documents HTML

+ +
+
{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien.
+
{{domxref("document.close()")}}
+
ferme un flux de document pour l'écriture.
+
{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
Sur un document modifiable, exécute une commande de formatage.
+
{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}
+
retourne une liste d'éléments ayant le nom donné.
+
{{domxref("document.getSelection()")}}
+
retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document.
+
{{domxref("document.hasFocus()")}}
+
retourne true (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié.
+
{{domxref("document.open()")}}
+
Ouvre un flux pour l'écriture dans le document.
+
{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}
+
Renvoie true si la commande de formatage peut être exécutée sur la plage courante.
+
{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}
+
Renvoie true si la commande de formatage est dans un état indéterminé sur la plage courante.
+
{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}
+
Renvoie true si la commande de formatage a été exécutée sur la plage courante.
+
{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}
+
retourne true (vrai) si la commande de formatage est supportée sur la plage courante.
+
{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}
+
renvoie la valeur courante de la plage en cours pour une commande de formatage.
+
{{domxref("document.write","document.write(String text)")}}
+
Écrit du texte dans le document.
+
{{domxref("document.writeln","document.writeln(String text)")}}
+
Écrit une ligne de texte dans le document.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}{{Spec2('Page Visibility API')}}Ajoute onvisibilitychange.
{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}{{Spec2('Selection API')}}Ajoute onselectstartet onselectionchange.
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Définition initiale pour l'interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Remplace DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}remplace DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}en vue de remplacer DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Transforme l'interface {{domxref("HTMLDocument")}} en une extension de Document
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document.
{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}{{Spec2('Page Visibility API')}}Étend l'interface Document  avec les attributs visibilityState et hidden.
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Étend l'interface Document
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Étend l'interface Document
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Étend l'interface Document
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Étend l'interface Document
+ +

Compatibilité des navigateurs notes

+ +

Notes concernant Firefox :

+ +

Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL :

+ +
+
{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(extensions Mozilla seulement) retourne l'objet  {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect).
+
{{domxref("document.popupNode")}}
+
retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle.
+
{{domxref("document.tooltipNode")}}
+
retourne le noeud qui est la cible de l'info-bulle actuelle.
+
+ +

Mozilla a également défini quelques méthodes non standard :

+ +
+
{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.
+
{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}
+
Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place.
+
{{domxref("document.loadOverlay")}}
+
charge dynamiquement un XUL overlay . Celui-ci fonctionne seulement dans les documents XUL.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.
+
+ +

Notes concernant Internet Explorer

+ +

Microsoft a défini quelques propriétés non standard :

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir  MSDN.
+
+ +

Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document :

+ +
+
{{domxref("document.contains")}}
+
Pour contourner le problème, document.body.contains () peut être utilisé.
+
diff --git a/files/fr/web/api/document/keypress_event/index.html b/files/fr/web/api/document/keypress_event/index.html deleted file mode 100644 index 76807b1f92..0000000000 --- a/files/fr/web/api/document/keypress_event/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: keypress -slug: Web/API/Document/keypress_event -tags: - - DOM - - Déprécié - - Evènement - - KeyboardEvent - - Reference -translation_of: Web/API/Document/keypress_event ---- -
{{APIRef}} {{deprecated_header}}
- -

L'évènement keypress est déclenché lorsqu'une touche produisant un caractère est pressée. Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches Alt, Shift, Ctrl ou Meta ne sont pas concernées.

- -
-

Attention : Cet évènement est déprécié et il faudrait plutôt utiliser beforeinput ou keydown.

-
- - - - - - - - - - - - - - - - - - - - - - -
Interface{{domxref("KeyboardEvent")}}
Remonte sur les parents (bubbles)Oui
AnnulableOui
Action par défautCela peut varier : évènement keypress ; ouverture du système de composition du texte ; évènements blur et focus ; évènement DOMActivate {{deprecated_inline}}; autre évènement.
- -

Exemples

- -

Ajout d'un addEventListener

- -

Dans cet exemple, on affiche la valeur de {{domxref("KeyboardEvent.code")}} lorsqu'on appuie sur une touche :

- -
<p>
-   Cliquez dans l'iframe pour lui passer le focus
-   puis appuyez sur des touches du clavier.
-</p>
-<p id="log"></p>
- -
const log = document.getElementById('log');
-
-document.addEventListener('keypress', logKey);
-
-function logKey(e) {
-  log.textContent += ` ${e.code}`;
-}
- -

{{EmbedLiveSample("addEventListener_keypress_example")}}

- -

Équivalent onkeypress

- -
document.onkeypress = logKey;
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-keypress')}}{{Spec2('UI Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.keypress_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/keypress_event/index.md b/files/fr/web/api/document/keypress_event/index.md new file mode 100644 index 0000000000..76807b1f92 --- /dev/null +++ b/files/fr/web/api/document/keypress_event/index.md @@ -0,0 +1,102 @@ +--- +title: keypress +slug: Web/API/Document/keypress_event +tags: + - DOM + - Déprécié + - Evènement + - KeyboardEvent + - Reference +translation_of: Web/API/Document/keypress_event +--- +
{{APIRef}} {{deprecated_header}}
+ +

L'évènement keypress est déclenché lorsqu'une touche produisant un caractère est pressée. Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches Alt, Shift, Ctrl ou Meta ne sont pas concernées.

+ +
+

Attention : Cet évènement est déprécié et il faudrait plutôt utiliser beforeinput ou keydown.

+
+ + + + + + + + + + + + + + + + + + + + + + +
Interface{{domxref("KeyboardEvent")}}
Remonte sur les parents (bubbles)Oui
AnnulableOui
Action par défautCela peut varier : évènement keypress ; ouverture du système de composition du texte ; évènements blur et focus ; évènement DOMActivate {{deprecated_inline}}; autre évènement.
+ +

Exemples

+ +

Ajout d'un addEventListener

+ +

Dans cet exemple, on affiche la valeur de {{domxref("KeyboardEvent.code")}} lorsqu'on appuie sur une touche :

+ +
<p>
+   Cliquez dans l'iframe pour lui passer le focus
+   puis appuyez sur des touches du clavier.
+</p>
+<p id="log"></p>
+ +
const log = document.getElementById('log');
+
+document.addEventListener('keypress', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

{{EmbedLiveSample("addEventListener_keypress_example")}}

+ +

Équivalent onkeypress

+ +
document.onkeypress = logKey;
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-keypress')}}{{Spec2('UI Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.keypress_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/lastmodified/index.html b/files/fr/web/api/document/lastmodified/index.html deleted file mode 100644 index 90a7738bb3..0000000000 --- a/files/fr/web/api/document/lastmodified/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Document.lastModified -slug: Web/API/Document/lastModified -translation_of: Web/API/Document/lastModified ---- -
{{APIRef("DOM")}}
- -

Retourne une chaîne de caractère contenant la date et l'heure à laquelle le présent document a été modifié pour la dernière fois.

- -

Syntaxe

- -
string = document.lastModified;
-
- -

Exemples

- -

Exemple #1: Utilisation simple

- -
alert(document.lastModified);
-// renvoie: 11/28/2015 16:11:15
-
- -

Exemple #2: Transformer lastModified en un objet de type Date

- -
var oLastModif = new Date(document.lastModified);
-
- -

Exemple #3: Transformer lastModified en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale.

- -
var nLastModif = Date.parse(document.lastModified);
-
- -

Notes

- -

Veuillez noter qu'en tant que chaîne de caractères, lastModified ne peut être facilement utilisé pour des comparaisons entre les dates modifées des documents. Voici un exemple possible qui montre comment afficher une alerte quand la page change (voir aussi: API des cookies en JavaScript):

- -
if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) {
-    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
-    alert("Cette page a changé !");
-}
- -

… le même exemple, mais en ignorant la première visite:

- -
var
-
-    nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
-    nLastModif = Date.parse(document.lastModified);
-
-if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
-    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
-    if (isFinite(nLastVisit)) {
-        alert("Cette page a changé !");
-    }
-}
- -
-

Note: WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local)

-
- -

Si vous voulez savoir si une page externe a changé, veuillez lire ce paragraphe à propos de l'API XMLHttpRequest().

- -

Spécification

- -

HTML5

- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.lastModified")}}

diff --git a/files/fr/web/api/document/lastmodified/index.md b/files/fr/web/api/document/lastmodified/index.md new file mode 100644 index 0000000000..90a7738bb3 --- /dev/null +++ b/files/fr/web/api/document/lastmodified/index.md @@ -0,0 +1,68 @@ +--- +title: Document.lastModified +slug: Web/API/Document/lastModified +translation_of: Web/API/Document/lastModified +--- +
{{APIRef("DOM")}}
+ +

Retourne une chaîne de caractère contenant la date et l'heure à laquelle le présent document a été modifié pour la dernière fois.

+ +

Syntaxe

+ +
string = document.lastModified;
+
+ +

Exemples

+ +

Exemple #1: Utilisation simple

+ +
alert(document.lastModified);
+// renvoie: 11/28/2015 16:11:15
+
+ +

Exemple #2: Transformer lastModified en un objet de type Date

+ +
var oLastModif = new Date(document.lastModified);
+
+ +

Exemple #3: Transformer lastModified en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale.

+ +
var nLastModif = Date.parse(document.lastModified);
+
+ +

Notes

+ +

Veuillez noter qu'en tant que chaîne de caractères, lastModified ne peut être facilement utilisé pour des comparaisons entre les dates modifées des documents. Voici un exemple possible qui montre comment afficher une alerte quand la page change (voir aussi: API des cookies en JavaScript):

+ +
if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) {
+    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
+    alert("Cette page a changé !");
+}
+ +

… le même exemple, mais en ignorant la première visite:

+ +
var
+
+    nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
+    nLastModif = Date.parse(document.lastModified);
+
+if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
+    if (isFinite(nLastVisit)) {
+        alert("Cette page a changé !");
+    }
+}
+ +
+

Note: WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local)

+
+ +

Si vous voulez savoir si une page externe a changé, veuillez lire ce paragraphe à propos de l'API XMLHttpRequest().

+ +

Spécification

+ +

HTML5

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.lastModified")}}

diff --git a/files/fr/web/api/document/laststylesheetset/index.html b/files/fr/web/api/document/laststylesheetset/index.html deleted file mode 100644 index dce73ac17e..0000000000 --- a/files/fr/web/api/document/laststylesheetset/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Document.lastStyleSheetSet -slug: Web/API/Document/lastStyleSheetSet -tags: - - API - - DOM - - Feuilles de styles - - Propriétés -translation_of: Web/API/Document/lastStyleSheetSet ---- -

{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}

- -

Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété {{ domxref("document.selectedStyleSheetSet") }} est modifiée.

- -

Syntaxe

- -
lastStyleSheetSet = document.lastStyleSheetSet
-
- -

En retour, lastStyleSheetSet indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant {{ domxref("document.selectedStyleSheetSet") }}, la valeur retournée est null.

- -
-

Note : Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.

-
- -

Exemple

- -
var lastSheetSet = document.lastStyleSheetSet;
-if (!lastSheetSet) {
-  lastSheetSet = "Sheet not yet changed";
-}
-console.log("The last sheet set is: " + lastSheetSet);
-
- -

Voir aussi

- - - -

Spécifications

- - diff --git a/files/fr/web/api/document/laststylesheetset/index.md b/files/fr/web/api/document/laststylesheetset/index.md new file mode 100644 index 0000000000..dce73ac17e --- /dev/null +++ b/files/fr/web/api/document/laststylesheetset/index.md @@ -0,0 +1,48 @@ +--- +title: Document.lastStyleSheetSet +slug: Web/API/Document/lastStyleSheetSet +tags: + - API + - DOM + - Feuilles de styles + - Propriétés +translation_of: Web/API/Document/lastStyleSheetSet +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}

+ +

Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété {{ domxref("document.selectedStyleSheetSet") }} est modifiée.

+ +

Syntaxe

+ +
lastStyleSheetSet = document.lastStyleSheetSet
+
+ +

En retour, lastStyleSheetSet indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant {{ domxref("document.selectedStyleSheetSet") }}, la valeur retournée est null.

+ +
+

Note : Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.

+
+ +

Exemple

+ +
var lastSheetSet = document.lastStyleSheetSet;
+if (!lastSheetSet) {
+  lastSheetSet = "Sheet not yet changed";
+}
+console.log("The last sheet set is: " + lastSheetSet);
+
+ +

Voir aussi

+ + + +

Spécifications

+ + diff --git a/files/fr/web/api/document/location/index.html b/files/fr/web/api/document/location/index.html deleted file mode 100644 index 2a6f3e51c3..0000000000 --- a/files/fr/web/api/document/location/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Document.location -slug: Web/API/Document/location -tags: - - API - - Document - - HTML DOM - - Propriété - - Reference - - lecture seule -translation_of: Web/API/Document/location ---- -

La propriété en lecture seule Document.location renvoie un objet {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL.

- -

Bien que Document.location soit un objet  Location en lecture seule, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: document.location = 'http://www.example.com' est un synonyme de document.location.href = 'http://www.example.com'.

- -

Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée.

- -

Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est null.

- -

Syntaxe

- -
locationObj = document.location
-document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org'
-
- -

Exemple

- -
console.log(document.location);
-// Affiche un string-like
-// "http://www.example.com/juicybits.html" dans la console
-
- -

Spécification

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}{{Spec2('HTML WHATWG')}}Pas de changement avec {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.location")}}

- -

Voir également

- - diff --git a/files/fr/web/api/document/location/index.md b/files/fr/web/api/document/location/index.md new file mode 100644 index 0000000000..2a6f3e51c3 --- /dev/null +++ b/files/fr/web/api/document/location/index.md @@ -0,0 +1,65 @@ +--- +title: Document.location +slug: Web/API/Document/location +tags: + - API + - Document + - HTML DOM + - Propriété + - Reference + - lecture seule +translation_of: Web/API/Document/location +--- +

La propriété en lecture seule Document.location renvoie un objet {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL.

+ +

Bien que Document.location soit un objet  Location en lecture seule, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: document.location = 'http://www.example.com' est un synonyme de document.location.href = 'http://www.example.com'.

+ +

Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée.

+ +

Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est null.

+ +

Syntaxe

+ +
locationObj = document.location
+document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org'
+
+ +

Exemple

+ +
console.log(document.location);
+// Affiche un string-like
+// "http://www.example.com/juicybits.html" dans la console
+
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}{{Spec2('HTML WHATWG')}}Pas de changement avec {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.location")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/document/mozsetimageelement/index.html b/files/fr/web/api/document/mozsetimageelement/index.html deleted file mode 100644 index aa70b99736..0000000000 --- a/files/fr/web/api/document/mozsetimageelement/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Document.mozSetImageElement() -slug: Web/API/Document/mozSetImageElement -tags: - - API - - Arrière-plan - - CSS - - DOM - - Image - - Méthodes -translation_of: Web/API/Document/mozSetImageElement ---- -

{{ ApiRef("DOM") }}

- -

{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}

- -

Change l'élément utilisé comme arrière-plan CSS par un arrière-plan avec un ID d'élément d'arrière-plan donné.

- -

Syntaxe

- -
document.mozSetImageElement(imageElementId, imageElement);
-
- -

Paramètres

- - - -

Exemple

- -

Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.

- -

Vue de cet exemple en direct.

- -
<style type="text/css">
-  #mybox {
-    background-image: -moz-element(#canvasbg);
-    text-align: center;
-    width: 400px;
-    height: 400px;
-    cursor: pointer;
-  }
-</style>
-
- -

Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan.

- -
var c = 0x00;
-function clicked() {
-  var canvas = document.createElement("canvas");
-  canvas.setAttribute("width", 100);
-  canvas.setAttribute("height", 100);
-
-  var ctx = canvas.getContext('2d');
-  ctx.fillStyle = "#" + c.toString(16) + "0000";
-  ctx.fillRect(25, 25, 75, 75);
-
-  c += 0x11;
-  if (c > 0xff) {
-    c = 0x00;
-  }
-
-  document.mozSetImageElement("canvasbg", canvas);
-}
-
- -

Le code ici est appelé chaque fois que l'utilisateur clique sur l'élément {{ HTMLElement("div") }}. Il crée un nouveau {{ HTMLElement("canvas") }} avec la largeur et la hauteur définies à 100 pixels et le dessine dans un carré de 50 par 50 pixels. Chaque fois que la fonction est appelée, le carré est d'une couleur différente (sa composante rouge est augmentée à chaque fois), donc chaque fois que l'utilisateur clique sur l'élément, le fond est plus lumineux et rempli d'un motif plus lumineux de carreaux rouges.

- -

Une fois le canvas dessiné, document.mozSetImageElement() est appelée pour définir l'arrière-plan de tout CSS en utilisant l'ID "canvasbg" comme ID d'élément d'arrière-plan pour être notre nouveau canvas.

- -

Spécifications

- -

Ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/mozsetimageelement/index.md b/files/fr/web/api/document/mozsetimageelement/index.md new file mode 100644 index 0000000000..aa70b99736 --- /dev/null +++ b/files/fr/web/api/document/mozsetimageelement/index.md @@ -0,0 +1,81 @@ +--- +title: Document.mozSetImageElement() +slug: Web/API/Document/mozSetImageElement +tags: + - API + - Arrière-plan + - CSS + - DOM + - Image + - Méthodes +translation_of: Web/API/Document/mozSetImageElement +--- +

{{ ApiRef("DOM") }}

+ +

{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}

+ +

Change l'élément utilisé comme arrière-plan CSS par un arrière-plan avec un ID d'élément d'arrière-plan donné.

+ +

Syntaxe

+ +
document.mozSetImageElement(imageElementId, imageElement);
+
+ +

Paramètres

+ + + +

Exemple

+ +

Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.

+ +

Vue de cet exemple en direct.

+ +
<style type="text/css">
+  #mybox {
+    background-image: -moz-element(#canvasbg);
+    text-align: center;
+    width: 400px;
+    height: 400px;
+    cursor: pointer;
+  }
+</style>
+
+ +

Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan.

+ +
var c = 0x00;
+function clicked() {
+  var canvas = document.createElement("canvas");
+  canvas.setAttribute("width", 100);
+  canvas.setAttribute("height", 100);
+
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = "#" + c.toString(16) + "0000";
+  ctx.fillRect(25, 25, 75, 75);
+
+  c += 0x11;
+  if (c > 0xff) {
+    c = 0x00;
+  }
+
+  document.mozSetImageElement("canvasbg", canvas);
+}
+
+ +

Le code ici est appelé chaque fois que l'utilisateur clique sur l'élément {{ HTMLElement("div") }}. Il crée un nouveau {{ HTMLElement("canvas") }} avec la largeur et la hauteur définies à 100 pixels et le dessine dans un carré de 50 par 50 pixels. Chaque fois que la fonction est appelée, le carré est d'une couleur différente (sa composante rouge est augmentée à chaque fois), donc chaque fois que l'utilisateur clique sur l'élément, le fond est plus lumineux et rempli d'un motif plus lumineux de carreaux rouges.

+ +

Une fois le canvas dessiné, document.mozSetImageElement() est appelée pour définir l'arrière-plan de tout CSS en utilisant l'ID "canvasbg" comme ID d'élément d'arrière-plan pour être notre nouveau canvas.

+ +

Spécifications

+ +

Ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.html b/files/fr/web/api/document/mozsyntheticdocument/index.html deleted file mode 100644 index c8847269ca..0000000000 --- a/files/fr/web/api/document/mozsyntheticdocument/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Document.mozSyntheticDocument -slug: Web/API/Document/mozSyntheticDocument -tags: - - API - - DOM - - Document - - Propriétés -translation_of: Web/API/Document/mozSyntheticDocument ---- -

{{ ApiRef("DOM") }}

- -

Indique si le document est synthétique ou non ; c'est-à-dire un document représentant une image autonome, une vidéo, un son ou analogue.

- -

Syntaxe

- -
var isSynthetic = document.mozSyntheticDocument;
-
- -

En retour, isSynthetic est true (vrai) si le document est synthétique ; sinon, false (faux).

- -

Exemple

- -

Il peut être utile, si vous avez un élément de menu contextuel que vous souhaitez uniquement afficher pour les documents synthétiques (ou, inversement, pour les documents qui ne sont pas synthétiques).

- -
var isSynthetic = document.mozSyntheticDocument;
-
-if (isSynthetic) {
-  /* insert your menu item here */
-}
-
- -

Spécifications

- -

Ne fait partie d'aucune spécification.

diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.md b/files/fr/web/api/document/mozsyntheticdocument/index.md new file mode 100644 index 0000000000..c8847269ca --- /dev/null +++ b/files/fr/web/api/document/mozsyntheticdocument/index.md @@ -0,0 +1,35 @@ +--- +title: Document.mozSyntheticDocument +slug: Web/API/Document/mozSyntheticDocument +tags: + - API + - DOM + - Document + - Propriétés +translation_of: Web/API/Document/mozSyntheticDocument +--- +

{{ ApiRef("DOM") }}

+ +

Indique si le document est synthétique ou non ; c'est-à-dire un document représentant une image autonome, une vidéo, un son ou analogue.

+ +

Syntaxe

+ +
var isSynthetic = document.mozSyntheticDocument;
+
+ +

En retour, isSynthetic est true (vrai) si le document est synthétique ; sinon, false (faux).

+ +

Exemple

+ +

Il peut être utile, si vous avez un élément de menu contextuel que vous souhaitez uniquement afficher pour les documents synthétiques (ou, inversement, pour les documents qui ne sont pas synthétiques).

+ +
var isSynthetic = document.mozSyntheticDocument;
+
+if (isSynthetic) {
+  /* insert your menu item here */
+}
+
+ +

Spécifications

+ +

Ne fait partie d'aucune spécification.

diff --git a/files/fr/web/api/document/onafterscriptexecute/index.html b/files/fr/web/api/document/onafterscriptexecute/index.html deleted file mode 100644 index 9c3d8d138a..0000000000 --- a/files/fr/web/api/document/onafterscriptexecute/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Document.onafterscriptexecute -slug: Web/API/Document/onafterscriptexecute -tags: - - API - - DOM - - Propriétés - - scripts -translation_of: Web/API/Document/onafterscriptexecute ---- -
{{ ApiRef("DOM") }} {{non-standard_header}}
- -
 
- -

Résumé

- -

Lancé lorsqu'un élément {{HTMLElement("script")}} statique achève l'exécution de son script. N'est pas lancé si l'élément est ajouté dynamiquement, par exemple avec appendChild().

- -

Syntaxe

- -
document.onafterscriptexecute = funcRef;
-
- -

funcRef est une référence de fonction appelée lorsqu'un évènement est lancé. L'attribut de la target (cible) d'évènement est défini sur l'{{domxref("Element")}} script dont l'exécution vient de s'achever.

- -

Exemple

- -
function finished(e) {
-  logMessage("Finished script with ID: " + e.target.id);
-}
-
-document.addEventListener("afterscriptexecute", finished, true);
-
- -

Voir l'exemple sur une page

- -

Spécification

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/onafterscriptexecute/index.md b/files/fr/web/api/document/onafterscriptexecute/index.md new file mode 100644 index 0000000000..9c3d8d138a --- /dev/null +++ b/files/fr/web/api/document/onafterscriptexecute/index.md @@ -0,0 +1,48 @@ +--- +title: Document.onafterscriptexecute +slug: Web/API/Document/onafterscriptexecute +tags: + - API + - DOM + - Propriétés + - scripts +translation_of: Web/API/Document/onafterscriptexecute +--- +
{{ ApiRef("DOM") }} {{non-standard_header}}
+ +
 
+ +

Résumé

+ +

Lancé lorsqu'un élément {{HTMLElement("script")}} statique achève l'exécution de son script. N'est pas lancé si l'élément est ajouté dynamiquement, par exemple avec appendChild().

+ +

Syntaxe

+ +
document.onafterscriptexecute = funcRef;
+
+ +

funcRef est une référence de fonction appelée lorsqu'un évènement est lancé. L'attribut de la target (cible) d'évènement est défini sur l'{{domxref("Element")}} script dont l'exécution vient de s'achever.

+ +

Exemple

+ +
function finished(e) {
+  logMessage("Finished script with ID: " + e.target.id);
+}
+
+document.addEventListener("afterscriptexecute", finished, true);
+
+ +

Voir l'exemple sur une page

+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/onbeforescriptexecute/index.html b/files/fr/web/api/document/onbeforescriptexecute/index.html deleted file mode 100644 index 8527a38555..0000000000 --- a/files/fr/web/api/document/onbeforescriptexecute/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Document.onbeforescriptexecute -slug: Web/API/Document/onbeforescriptexecute -tags: - - API - - DOM - - Propriétés - - scripts -translation_of: Web/API/Document/onbeforescriptexecute ---- -
{{ApiRef("DOM")}} {{non-standard_header }}
- -

Résumé

- -

Lancé lorsque le code dans un élément {{HTMLElement("script")}} déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild().

- -

Syntaxe

- -
document.onbeforescriptexecute = funcRef;
-
- -

funcRef est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la target (cible) d'évènement est défini dans l'{{domxref("Element")}} script qui est sur le point d'être exécuté.

- -

Exemple

- -
function starting(e) {
-  logMessage("Starting script with ID: " + e.target.id);
-}
-
-document.addEventListener("beforescriptexecute", starting, true);
-
- -

Voir l'exemple sur une page

- -

Spécification

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/onbeforescriptexecute/index.md b/files/fr/web/api/document/onbeforescriptexecute/index.md new file mode 100644 index 0000000000..8527a38555 --- /dev/null +++ b/files/fr/web/api/document/onbeforescriptexecute/index.md @@ -0,0 +1,46 @@ +--- +title: Document.onbeforescriptexecute +slug: Web/API/Document/onbeforescriptexecute +tags: + - API + - DOM + - Propriétés + - scripts +translation_of: Web/API/Document/onbeforescriptexecute +--- +
{{ApiRef("DOM")}} {{non-standard_header }}
+ +

Résumé

+ +

Lancé lorsque le code dans un élément {{HTMLElement("script")}} déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild().

+ +

Syntaxe

+ +
document.onbeforescriptexecute = funcRef;
+
+ +

funcRef est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la target (cible) d'évènement est défini dans l'{{domxref("Element")}} script qui est sur le point d'être exécuté.

+ +

Exemple

+ +
function starting(e) {
+  logMessage("Starting script with ID: " + e.target.id);
+}
+
+document.addEventListener("beforescriptexecute", starting, true);
+
+ +

Voir l'exemple sur une page

+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/onfullscreenchange/index.html b/files/fr/web/api/document/onfullscreenchange/index.html deleted file mode 100644 index a3251b0188..0000000000 --- a/files/fr/web/api/document/onfullscreenchange/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Document.onfullscreenchange -slug: Web/API/Document/onfullscreenchange -translation_of: Web/API/Document/onfullscreenchange ---- -
{{ApiRef("Fullscreen API")}}
- -

La propriété Document.onfullscreenchange est un gestionnaire d'événement pour l'événement {{event("fullscreenchange")}} qui est lancé lorsque le document entre ou sort du mode plein écran.

- -

Syntaxe

- -
targetDocument.onfullscreenchange = fullscreenChangeHandler;
-
- -

Exemple

- -
document.onfullscreenchange = function ( event ) {
-  console.log("FULL SCREEN CHANGE")
-};
-document.documentElement.onclick = function () {
-  // requestFullscreen() doit être un gestionnaire d'événement, sinon ça échouera
-  document.documentElement.requestFullscreen();
-}
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}{{Spec2("HTML WHATWG")}}Initial definition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.onfullscreenchange")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/onfullscreenchange/index.md b/files/fr/web/api/document/onfullscreenchange/index.md new file mode 100644 index 0000000000..a3251b0188 --- /dev/null +++ b/files/fr/web/api/document/onfullscreenchange/index.md @@ -0,0 +1,52 @@ +--- +title: Document.onfullscreenchange +slug: Web/API/Document/onfullscreenchange +translation_of: Web/API/Document/onfullscreenchange +--- +
{{ApiRef("Fullscreen API")}}
+ +

La propriété Document.onfullscreenchange est un gestionnaire d'événement pour l'événement {{event("fullscreenchange")}} qui est lancé lorsque le document entre ou sort du mode plein écran.

+ +

Syntaxe

+ +
targetDocument.onfullscreenchange = fullscreenChangeHandler;
+
+ +

Exemple

+ +
document.onfullscreenchange = function ( event ) {
+  console.log("FULL SCREEN CHANGE")
+};
+document.documentElement.onclick = function () {
+  // requestFullscreen() doit être un gestionnaire d'événement, sinon ça échouera
+  document.documentElement.requestFullscreen();
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}{{Spec2("HTML WHATWG")}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.onfullscreenchange")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/onoffline/index.html b/files/fr/web/api/document/onoffline/index.html deleted file mode 100644 index 4e9ac673aa..0000000000 --- a/files/fr/web/api/document/onoffline/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Document.onoffline -slug: Web/API/Document/onoffline -tags: - - API - - DOM - - Document - - Propriétés -translation_of: Web/API/Document/onoffline ---- -

{{APIRef("DOM")}}

- -

Le gestionnaire d'évènements est appelé lorsqu'un évènement {{event("offline")}} est lancé sur le corps (body) et propagé, quand la propriété navigator.onLine change et devient false (fausse).

diff --git a/files/fr/web/api/document/onoffline/index.md b/files/fr/web/api/document/onoffline/index.md new file mode 100644 index 0000000000..4e9ac673aa --- /dev/null +++ b/files/fr/web/api/document/onoffline/index.md @@ -0,0 +1,13 @@ +--- +title: Document.onoffline +slug: Web/API/Document/onoffline +tags: + - API + - DOM + - Document + - Propriétés +translation_of: Web/API/Document/onoffline +--- +

{{APIRef("DOM")}}

+ +

Le gestionnaire d'évènements est appelé lorsqu'un évènement {{event("offline")}} est lancé sur le corps (body) et propagé, quand la propriété navigator.onLine change et devient false (fausse).

diff --git a/files/fr/web/api/document/ononline/index.html b/files/fr/web/api/document/ononline/index.html deleted file mode 100644 index 0665ed87be..0000000000 --- a/files/fr/web/api/document/ononline/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Document.ononline -slug: Web/API/Document/ononline -tags: - - API - - DOM - - Document - - En ligne - - Propriétés -translation_of: Web/API/Document/ononline ---- -

{{APIRef("DOM")}}

- -

Un évènement "online" est lancé sur le <body> (corps) de chaque page quand le navigateur bascule entre les modes online (en ligne) et offline (hors ligne). De plus les évènements se propagent de document.body vers document et finalement sur window. Les deux évènements ne sont pas annulables (vous ne pouvez pas empêcher l'utilisateur de se connecter ou de vous déconnecter).

- -

window.navigator.onLine renvoie un booléen true (vrai) si le navigateur est online et false s'il est définitivement offline (déconnecté du réseau). Les évènements online et offline sont lancés si la valeur de cet attribut change.

- -
-

Note : Il est important de noter que cet événement et cet attribut sont intrinsèquement peu fiables. Un ordinateur peut être connecté à un réseau sans avoir accès à Internet.

-
- -

Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles :

- - - -

Exemple

- -

Il existe  un cas de test simple que vous pouvez exécuter pour vérifier le fonctionnement des évènements.

- -

Références

- - diff --git a/files/fr/web/api/document/ononline/index.md b/files/fr/web/api/document/ononline/index.md new file mode 100644 index 0000000000..0665ed87be --- /dev/null +++ b/files/fr/web/api/document/ononline/index.md @@ -0,0 +1,39 @@ +--- +title: Document.ononline +slug: Web/API/Document/ononline +tags: + - API + - DOM + - Document + - En ligne + - Propriétés +translation_of: Web/API/Document/ononline +--- +

{{APIRef("DOM")}}

+ +

Un évènement "online" est lancé sur le <body> (corps) de chaque page quand le navigateur bascule entre les modes online (en ligne) et offline (hors ligne). De plus les évènements se propagent de document.body vers document et finalement sur window. Les deux évènements ne sont pas annulables (vous ne pouvez pas empêcher l'utilisateur de se connecter ou de vous déconnecter).

+ +

window.navigator.onLine renvoie un booléen true (vrai) si le navigateur est online et false s'il est définitivement offline (déconnecté du réseau). Les évènements online et offline sont lancés si la valeur de cet attribut change.

+ +
+

Note : Il est important de noter que cet événement et cet attribut sont intrinsèquement peu fiables. Un ordinateur peut être connecté à un réseau sans avoir accès à Internet.

+
+ +

Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles :

+ + + +

Exemple

+ +

Il existe  un cas de test simple que vous pouvez exécuter pour vérifier le fonctionnement des évènements.

+ +

Références

+ + diff --git a/files/fr/web/api/document/open/index.html b/files/fr/web/api/document/open/index.html deleted file mode 100644 index c8da92836a..0000000000 --- a/files/fr/web/api/document/open/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: document.open -slug: Web/API/Document/open -tags: - - API - - DOM - - Méthodes - - Reference -translation_of: Web/API/Document/open ---- -
{{APIRef("DOM")}}
- -
 
- -

La méthode document.open() ouvre un document pour l'écriture.

- -

Syntaxe

- -
document.open();
-
- -

Exemple

- -
// Dans cet exemple, le contenu du document est
-// écrasé au cours de la réinitialisation avec open()
-document.write("<html><p>supprimez-moi</p></html>");
-document.open();
-// Le document est vide.
-
- -

Notes

- -

Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus).

- -

Par ailleurs, un appel automatique à document.open() est réalisé lorsque document.write() est appelé après que la page ait été chargée, bien que ce ne soit pas défini dans la spécification du W3C. documenter les paramètres à document.open ne figurant pas dans la spécification

- -

Cette méthode ne doit pas être confondue avec window.open(). document.open permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que window.open fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme window est l'objet, si on appelle juste open(...), il sera traité comme un appel à window.open(...). Le document ouvert peut être fermé à l'aide de document.close().

- -

Voir Security check basics  pour plus d'informations sur les principaux.

- -

Si vous ne voulez pas créer une entrée d'historique, remplacez open() par open("text/html", "replace").

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.open")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/open/index.md b/files/fr/web/api/document/open/index.md new file mode 100644 index 0000000000..c8da92836a --- /dev/null +++ b/files/fr/web/api/document/open/index.md @@ -0,0 +1,76 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - API + - DOM + - Méthodes + - Reference +translation_of: Web/API/Document/open +--- +
{{APIRef("DOM")}}
+ +
 
+ +

La méthode document.open() ouvre un document pour l'écriture.

+ +

Syntaxe

+ +
document.open();
+
+ +

Exemple

+ +
// Dans cet exemple, le contenu du document est
+// écrasé au cours de la réinitialisation avec open()
+document.write("<html><p>supprimez-moi</p></html>");
+document.open();
+// Le document est vide.
+
+ +

Notes

+ +

Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus).

+ +

Par ailleurs, un appel automatique à document.open() est réalisé lorsque document.write() est appelé après que la page ait été chargée, bien que ce ne soit pas défini dans la spécification du W3C. documenter les paramètres à document.open ne figurant pas dans la spécification

+ +

Cette méthode ne doit pas être confondue avec window.open(). document.open permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que window.open fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme window est l'objet, si on appelle juste open(...), il sera traité comme un appel à window.open(...). Le document ouvert peut être fermé à l'aide de document.close().

+ +

Voir Security check basics  pour plus d'informations sur les principaux.

+ +

Si vous ne voulez pas créer une entrée d'historique, remplacez open() par open("text/html", "replace").

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.open")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/origin/index.html b/files/fr/web/api/document/origin/index.html deleted file mode 100644 index 646f4e1242..0000000000 --- a/files/fr/web/api/document/origin/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Document.origin -slug: Web/API/Document/origin -tags: - - API - - DOM - - Document - - Propriétés - - origine -translation_of: Web/API/Document/origin ---- -
{{APIRef("DOM")}}{{SeeCompatTable}}
- -

La propriété en lecture seule Document.origin renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à  document.defaultView.location.origin.

- -

Exemples

- -
var origin = document.origin;
-// Sur cette page, renvoie:'https://developer.mozilla.org'
-
-var origin = document.origin;
-// Sur "about:blank", renvoie :'null'
-
-var origin = document.origin;
-// Sur "data:text/html,<b>foo</b>", renvoie :'null'
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}{{Spec2('DOM WHATWG')}}Définition initiale.
{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}{{Spec2('HTML WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
{{Compat("api.Document.origin")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/document/origin/index.md b/files/fr/web/api/document/origin/index.md new file mode 100644 index 0000000000..646f4e1242 --- /dev/null +++ b/files/fr/web/api/document/origin/index.md @@ -0,0 +1,58 @@ +--- +title: Document.origin +slug: Web/API/Document/origin +tags: + - API + - DOM + - Document + - Propriétés + - origine +translation_of: Web/API/Document/origin +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule Document.origin renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à  document.defaultView.location.origin.

+ +

Exemples

+ +
var origin = document.origin;
+// Sur cette page, renvoie:'https://developer.mozilla.org'
+
+var origin = document.origin;
+// Sur "about:blank", renvoie :'null'
+
+var origin = document.origin;
+// Sur "data:text/html,<b>foo</b>", renvoie :'null'
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}{{Spec2('DOM WHATWG')}}Définition initiale.
{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}{{Spec2('HTML WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Document.origin")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/popupnode/index.html b/files/fr/web/api/document/popupnode/index.html deleted file mode 100644 index be0b64250e..0000000000 --- a/files/fr/web/api/document/popupnode/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Document.popupNode -slug: Web/API/Document/popupNode -tags: - - API - - DOM - - Document - - Fenêtre contextuelle - - Propriétés - - XUL -translation_of: Web/API/Document/popupNode ---- -
{{ApiRef("DOM")}}{{deprecated_header}}
- -
-

Note : À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété menupopup triggerNode à la place.

-
- -

Quand une fenêtre contextuelle attachée via les attributs popup ou context est ouverte, la propriété popupNode du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte.

- -

Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs popup ou context. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode showPopup de la fenêtre contextuelle, vous pouvez définir la propriété popupNode directement au préalable.

- -

Cette propriété s'applique seulement aux documents XUL.

- -

Syntaxe

- -
var node = document.popupNode;
-
- -

Exemple

- -
<menupopup id="toolbarContextMenu">
-  ...
-  <menuitem oncommand="mailNewsCore.deleteButton(document.popupNode)">
-  ...
-</menupopup>
-
- -

Voir http://www.mozilla.org/xpfe/xptoolkit/popups.html

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/popupnode/index.md b/files/fr/web/api/document/popupnode/index.md new file mode 100644 index 0000000000..be0b64250e --- /dev/null +++ b/files/fr/web/api/document/popupnode/index.md @@ -0,0 +1,45 @@ +--- +title: Document.popupNode +slug: Web/API/Document/popupNode +tags: + - API + - DOM + - Document + - Fenêtre contextuelle + - Propriétés + - XUL +translation_of: Web/API/Document/popupNode +--- +
{{ApiRef("DOM")}}{{deprecated_header}}
+ +
+

Note : À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété menupopup triggerNode à la place.

+
+ +

Quand une fenêtre contextuelle attachée via les attributs popup ou context est ouverte, la propriété popupNode du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte.

+ +

Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs popup ou context. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode showPopup de la fenêtre contextuelle, vous pouvez définir la propriété popupNode directement au préalable.

+ +

Cette propriété s'applique seulement aux documents XUL.

+ +

Syntaxe

+ +
var node = document.popupNode;
+
+ +

Exemple

+ +
<menupopup id="toolbarContextMenu">
+  ...
+  <menuitem oncommand="mailNewsCore.deleteButton(document.popupNode)">
+  ...
+</menupopup>
+
+ +

Voir http://www.mozilla.org/xpfe/xptoolkit/popups.html

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/preferredstylesheetset/index.html b/files/fr/web/api/document/preferredstylesheetset/index.html deleted file mode 100644 index ab47840dd3..0000000000 --- a/files/fr/web/api/document/preferredstylesheetset/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Document.preferredStyleSheetSet -slug: Web/API/Document/preferredStyleSheetSet -tags: - - API - - CSSOM - - Document - - Feuilles de style - - Propriétés - - Reference -translation_of: Web/API/Document/preferredStyleSheetSet ---- -
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}
- -

Retourne la feuille de style préférée, telle que définie par l'auteur de la page.

- -

Syntaxe

- -
preferredStyleSheetSet = document.preferredStyleSheetSet
-
- -

Au retour, preferredStyleSheetSet indique la feuille de style préférée par l'auteur. Ceci est déterminé par l'ordre des déclarations des feuilles de style et par l'entête HTTP intitulé Default-Style.

- -

En l'absence de feuille de style préférée, une chaine vide ("") est retournée.

- -

Exemple

- -
if (document.preferredStyleSheetSet) {
-  console.log("La feuille de style préférée est : " + document.preferredStyleSheetSet);
-} else {
-  console.log("Il n'y a pas de feuille de style préférée.");
-}
-
- -

Spécifications

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/preferredstylesheetset/index.md b/files/fr/web/api/document/preferredstylesheetset/index.md new file mode 100644 index 0000000000..ab47840dd3 --- /dev/null +++ b/files/fr/web/api/document/preferredstylesheetset/index.md @@ -0,0 +1,48 @@ +--- +title: Document.preferredStyleSheetSet +slug: Web/API/Document/preferredStyleSheetSet +tags: + - API + - CSSOM + - Document + - Feuilles de style + - Propriétés + - Reference +translation_of: Web/API/Document/preferredStyleSheetSet +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}
+ +

Retourne la feuille de style préférée, telle que définie par l'auteur de la page.

+ +

Syntaxe

+ +
preferredStyleSheetSet = document.preferredStyleSheetSet
+
+ +

Au retour, preferredStyleSheetSet indique la feuille de style préférée par l'auteur. Ceci est déterminé par l'ordre des déclarations des feuilles de style et par l'entête HTTP intitulé Default-Style.

+ +

En l'absence de feuille de style préférée, une chaine vide ("") est retournée.

+ +

Exemple

+ +
if (document.preferredStyleSheetSet) {
+  console.log("La feuille de style préférée est : " + document.preferredStyleSheetSet);
+} else {
+  console.log("Il n'y a pas de feuille de style préférée.");
+}
+
+ +

Spécifications

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/querycommandstate/index.html b/files/fr/web/api/document/querycommandstate/index.html deleted file mode 100644 index ca874815cb..0000000000 --- a/files/fr/web/api/document/querycommandstate/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Document.queryCommandState() -slug: Web/API/Document/queryCommandState -tags: - - API - - DOM - - Document -translation_of: Web/API/Document/queryCommandState ---- -
{{ApiRef("DOM")}}
- -

Syntaxe

- -
queryCommandState(String command)
-
- -

Exemple

- -

TBD

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML Editing','#execcommand()','execCommand')}}{{Spec2('HTML Editing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.queryCommandState")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/querycommandstate/index.md b/files/fr/web/api/document/querycommandstate/index.md new file mode 100644 index 0000000000..ca874815cb --- /dev/null +++ b/files/fr/web/api/document/querycommandstate/index.md @@ -0,0 +1,49 @@ +--- +title: Document.queryCommandState() +slug: Web/API/Document/queryCommandState +tags: + - API + - DOM + - Document +translation_of: Web/API/Document/queryCommandState +--- +
{{ApiRef("DOM")}}
+ +

Syntaxe

+ +
queryCommandState(String command)
+
+ +

Exemple

+ +

TBD

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML Editing','#execcommand()','execCommand')}}{{Spec2('HTML Editing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.queryCommandState")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/querycommandsupported/index.html b/files/fr/web/api/document/querycommandsupported/index.html deleted file mode 100644 index ddd356a31b..0000000000 --- a/files/fr/web/api/document/querycommandsupported/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Document.queryCommandSupported() -slug: Web/API/Document/queryCommandSupported -tags: - - API - - Commandes - - DOM - - Document - - Méthodes - - editeur -translation_of: Web/API/Document/queryCommandSupported ---- -
{{ApiRef("DOM")}}
- -

La méthode Document.queryCommandSupported() indique si la commande d'éditeur spécifiée est prise en charge par le navigateur.

- -

Syntaxe

- -
isSupported = document.queryCommandSupported(command);
-
- -

Paramètres

- -
-
command
-
La commande pour laquelle on veut déterminer si elle est prise en charge.
-
- -

Valeur de retour

- -

Renvoie un {{jsxref("Boolean")}} qui est true (vrai) si la commande est prise en charge et false (faux) sinon.

- -

Notes

- -

La commande 'paste' (coller) renvoie false (faux), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action [1].

- -

Exemple

- -
var flg = document.queryCommandSupported("SelectAll");
-
-if(flg) {
-  // ...Faire quelque chose
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}}{{Spec2('HTML Editing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.queryCommandSupported")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/querycommandsupported/index.md b/files/fr/web/api/document/querycommandsupported/index.md new file mode 100644 index 0000000000..ddd356a31b --- /dev/null +++ b/files/fr/web/api/document/querycommandsupported/index.md @@ -0,0 +1,72 @@ +--- +title: Document.queryCommandSupported() +slug: Web/API/Document/queryCommandSupported +tags: + - API + - Commandes + - DOM + - Document + - Méthodes + - editeur +translation_of: Web/API/Document/queryCommandSupported +--- +
{{ApiRef("DOM")}}
+ +

La méthode Document.queryCommandSupported() indique si la commande d'éditeur spécifiée est prise en charge par le navigateur.

+ +

Syntaxe

+ +
isSupported = document.queryCommandSupported(command);
+
+ +

Paramètres

+ +
+
command
+
La commande pour laquelle on veut déterminer si elle est prise en charge.
+
+ +

Valeur de retour

+ +

Renvoie un {{jsxref("Boolean")}} qui est true (vrai) si la commande est prise en charge et false (faux) sinon.

+ +

Notes

+ +

La commande 'paste' (coller) renvoie false (faux), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action [1].

+ +

Exemple

+ +
var flg = document.queryCommandSupported("SelectAll");
+
+if(flg) {
+  // ...Faire quelque chose
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}}{{Spec2('HTML Editing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.queryCommandSupported")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/queryselector/index.html b/files/fr/web/api/document/queryselector/index.html deleted file mode 100644 index bb81eb32c0..0000000000 --- a/files/fr/web/api/document/queryselector/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: document.querySelector -slug: Web/API/Document/querySelector -tags: - - API - - CSS - - DOM - - Document - - JavaScript - - Méthodes - - Sélecteurs - - Échappement -translation_of: Web/API/Document/querySelector ---- -
{{ ApiRef("DOM") }}
- -

La méthode querySelector() de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou null si aucune correspondance n'est trouvée.

- -
-

Note : La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.

-
- -

Syntaxe

- -
element = document.querySelector(sélecteurs);
-
- -

Paramètres

- -
-
selectors (sélecteurs)
-
une  {{domxref("DOMString")}} (chaîne de caractères) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception SYNTAX_ERR est lancée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur les sélecteurs et leur gestion.
-
- -
-

Note : les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations.

-
- -

Valeur retournée

- -

Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de sélecteurs CSS spécifié, ou null s'il n'y a pas de correspondances.

- -

Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place.

- -

Exception

- -
-
SYNTAX_ERR
-
La syntaxe des sélecteurs spécifiés est invalide.
-
- -

Notes d'utilisation

- -

Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné.

- -

Les pseudo-éléments CSS ne retourneront jamais aucun élément, comme spécifié dans l'API des sélecteurs (en).

- -

Caractère spécial d'échappement

- -

Pour faire correspondre un ID (identifiant) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper deux fois (une pour la chaîne de caractères JavaScript et une autre fois pour querySelector) :

- -
<div id="machin\bidule"></div>
-<div id="machin:bidule"></div>
-
-<script>
-  console.log('#machin\bidule')               // "#machinidule" (\b est le caractère de contrôle retour arrière)
-  document.querySelector('#machin\bidule')    // ne correspond à rien
-
-  console.log('#machin\\bidule')              // "#machin\bidule"
-  console.log('#machin\\\\bidule')            // "#machin\\bidule"
-  document.querySelector('#machin\\\\bidule') // correspond au premier div
-
-  document.querySelector('#machin:bidule')    // ne correspond à rien
-  document.querySelector('#machin\\:bidule')  // correspond au second div
-</script>
-
- -

Exemples

- -

Trouver le premier élément correspondant à une classe

- -

Dans cet exemple, le premier élément dans le document qui contient la classe "maclasse" est retourné :

- -
var el = document.querySelector(".maclasse");
- -

Un sélecteur plus complexe

- -

Les sélecteurs peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément <input name="identifiant"/> dans un <div class="panneau-utilisateur principal"> dans le document est retourné :

- -
var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']");
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}} 
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.Document.querySelector")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/document/queryselector/index.md b/files/fr/web/api/document/queryselector/index.md new file mode 100644 index 0000000000..bb81eb32c0 --- /dev/null +++ b/files/fr/web/api/document/queryselector/index.md @@ -0,0 +1,126 @@ +--- +title: document.querySelector +slug: Web/API/Document/querySelector +tags: + - API + - CSS + - DOM + - Document + - JavaScript + - Méthodes + - Sélecteurs + - Échappement +translation_of: Web/API/Document/querySelector +--- +
{{ ApiRef("DOM") }}
+ +

La méthode querySelector() de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou null si aucune correspondance n'est trouvée.

+ +
+

Note : La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.

+
+ +

Syntaxe

+ +
element = document.querySelector(sélecteurs);
+
+ +

Paramètres

+ +
+
selectors (sélecteurs)
+
une  {{domxref("DOMString")}} (chaîne de caractères) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception SYNTAX_ERR est lancée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur les sélecteurs et leur gestion.
+
+ +
+

Note : les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations.

+
+ +

Valeur retournée

+ +

Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de sélecteurs CSS spécifié, ou null s'il n'y a pas de correspondances.

+ +

Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place.

+ +

Exception

+ +
+
SYNTAX_ERR
+
La syntaxe des sélecteurs spécifiés est invalide.
+
+ +

Notes d'utilisation

+ +

Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné.

+ +

Les pseudo-éléments CSS ne retourneront jamais aucun élément, comme spécifié dans l'API des sélecteurs (en).

+ +

Caractère spécial d'échappement

+ +

Pour faire correspondre un ID (identifiant) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper deux fois (une pour la chaîne de caractères JavaScript et une autre fois pour querySelector) :

+ +
<div id="machin\bidule"></div>
+<div id="machin:bidule"></div>
+
+<script>
+  console.log('#machin\bidule')               // "#machinidule" (\b est le caractère de contrôle retour arrière)
+  document.querySelector('#machin\bidule')    // ne correspond à rien
+
+  console.log('#machin\\bidule')              // "#machin\bidule"
+  console.log('#machin\\\\bidule')            // "#machin\\bidule"
+  document.querySelector('#machin\\\\bidule') // correspond au premier div
+
+  document.querySelector('#machin:bidule')    // ne correspond à rien
+  document.querySelector('#machin\\:bidule')  // correspond au second div
+</script>
+
+ +

Exemples

+ +

Trouver le premier élément correspondant à une classe

+ +

Dans cet exemple, le premier élément dans le document qui contient la classe "maclasse" est retourné :

+ +
var el = document.querySelector(".maclasse");
+ +

Un sélecteur plus complexe

+ +

Les sélecteurs peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément <input name="identifiant"/> dans un <div class="panneau-utilisateur principal"> dans le document est retourné :

+ +
var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']");
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}} 
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Document.querySelector")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/queryselectorall/index.html b/files/fr/web/api/document/queryselectorall/index.html deleted file mode 100644 index 7b73477245..0000000000 --- a/files/fr/web/api/document/queryselectorall/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Document.querySelectorAll() -slug: Web/API/Document/querySelectorAll -tags: - - API - - DOM - - Document - - Méthodes - - Sélecteurs -translation_of: Web/API/Document/querySelectorAll ---- -
{{APIRef("DOM")}}
- -

La méthode querySelectorAll()  de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.

- -
-

Note : Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode  du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .

-
- -

Syntaxe

- -
elementList = parentNode.querySelectorAll(selectors);
-
- -

Paramètres

- -
-
selecteurs
-
une {{domxref("DOMString")}} (chaîne de caractères) qui contient un ou plusieurs sélecteurs CSS ; s'il n'y en a pas, une exception  SyntaxError est lancée. Voir localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.
-
- -
-

Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.

-
- -

Valeur renvoyée

- -

Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .

- -
-

Note : Si les selectors spécifiés contiennent un pseudo-element CSS, la liste retournée sera toujours vide.

-
- -

Exceptions

- -
-
SyntaxError
-
la syntaxe des chaînes selectors spécifiés n'est pas valide.
-
- -

Exemples

- -

Pour obtenir une {{domxref("NodeList")}} (liste de noeuds) de tous les éléments {{HTMLElement("p")}}  dans le document :

- -
const matches = document.querySelectorAll("p");
- -

Cet exemple renvoie la liste de tous les éléments div du document dont l'attribut de classe a pour valeur "note" ou "alert" :

- -
const matches = document.querySelectorAll("div.note, div.alert");
-
- -

Ici, nous obtenons une liste des éléments <p> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe "highlighted" et qui sont situés dans un conteneur dont l'identifiant est "test".

- -
const container = document.querySelector("#test");
-const matches = container.querySelectorAll("div.highlighted > p");
- -

Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé "data-src" :

- -
const matches = document.querySelectorAll("iframe[data-src]");
- -

Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est "userlist" lequel a un attribut "data-active" dont la valeur est "1":

- -
const container = document.querySelector("#userlist");
-const matches = container.querySelectorAll("li[data-active='1']");
- -

Accès aux correspondances

- -

Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (array). Si le tableau est vide (c'est quand sa propriété length est 0), alors aucune correspondance n'a été trouvée.

- -

Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :

- -
const highlightedItems = userList.querySelectorAll(".highlighted");
-
-highlightedItems.forEach(function(userItem) {
-  deleteUser(userItem);
-});
- -

Notes d'utilisation

- -

querySelectorAll() se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.

- -

HTML

- -

Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués.

- -
<div class="outer">
-  <div class="select">
-    <div class="inner">
-    </div>
-  </div>
-</div>
- -

JavaScript

- -
const select = document.querySelector('.select');
-const inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1, not 0!
- -

Dans cet exemple, lors de la sélection de ".outer .inner" dans le contexte, le <div> avec la classe "select", l'élément avec la classe ".inner" est toujours trouvé, même si .outer n'est pas un descendant de l'élément de base sur lequel la recherche (".select") est effectuée. Par défaut, querySelectorAll() vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.

- -

La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :

- -
const select = document.querySelector('.select');
-const inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0
- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Norme actuelle
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Pas de changement
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Définition initiale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition originale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.querySelectorAll")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/queryselectorall/index.md b/files/fr/web/api/document/queryselectorall/index.md new file mode 100644 index 0000000000..7b73477245 --- /dev/null +++ b/files/fr/web/api/document/queryselectorall/index.md @@ -0,0 +1,164 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - DOM + - Document + - Méthodes + - Sélecteurs +translation_of: Web/API/Document/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

La méthode querySelectorAll()  de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.

+ +
+

Note : Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode  du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .

+
+ +

Syntaxe

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Paramètres

+ +
+
selecteurs
+
une {{domxref("DOMString")}} (chaîne de caractères) qui contient un ou plusieurs sélecteurs CSS ; s'il n'y en a pas, une exception  SyntaxError est lancée. Voir localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.
+
+ +
+

Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.

+
+ +

Valeur renvoyée

+ +

Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .

+ +
+

Note : Si les selectors spécifiés contiennent un pseudo-element CSS, la liste retournée sera toujours vide.

+
+ +

Exceptions

+ +
+
SyntaxError
+
la syntaxe des chaînes selectors spécifiés n'est pas valide.
+
+ +

Exemples

+ +

Pour obtenir une {{domxref("NodeList")}} (liste de noeuds) de tous les éléments {{HTMLElement("p")}}  dans le document :

+ +
const matches = document.querySelectorAll("p");
+ +

Cet exemple renvoie la liste de tous les éléments div du document dont l'attribut de classe a pour valeur "note" ou "alert" :

+ +
const matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Ici, nous obtenons une liste des éléments <p> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe "highlighted" et qui sont situés dans un conteneur dont l'identifiant est "test".

+ +
const container = document.querySelector("#test");
+const matches = container.querySelectorAll("div.highlighted > p");
+ +

Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé "data-src" :

+ +
const matches = document.querySelectorAll("iframe[data-src]");
+ +

Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est "userlist" lequel a un attribut "data-active" dont la valeur est "1":

+ +
const container = document.querySelector("#userlist");
+const matches = container.querySelectorAll("li[data-active='1']");
+ +

Accès aux correspondances

+ +

Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (array). Si le tableau est vide (c'est quand sa propriété length est 0), alors aucune correspondance n'a été trouvée.

+ +

Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :

+ +
const highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Notes d'utilisation

+ +

querySelectorAll() se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.

+ +

HTML

+ +

Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
const select = document.querySelector('.select');
+const inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+ +

Dans cet exemple, lors de la sélection de ".outer .inner" dans le contexte, le <div> avec la classe "select", l'élément avec la classe ".inner" est toujours trouvé, même si .outer n'est pas un descendant de l'élément de base sur lequel la recherche (".select") est effectuée. Par défaut, querySelectorAll() vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.

+ +

La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :

+ +
const select = document.querySelector('.select');
+const inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Norme actuelle
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Pas de changement
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Définition initiale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition originale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.querySelectorAll")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/readystate/index.html b/files/fr/web/api/document/readystate/index.html deleted file mode 100644 index 36d01f7c11..0000000000 --- a/files/fr/web/api/document/readystate/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Document.readyState -slug: Web/API/Document/readyState -tags: - - API - - DOM - - HTML - - Référence(2) -translation_of: Web/API/Document/readyState ---- -
{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}
- -

La valeur Document.readyState est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document.

- -

À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}.

- -

Syntaxe

- -
var string = document.readyState;
-
- -

Valeurs

- -

La variable readyState peut valoir :

- -
-
loading
-
Le {{ domxref("document") }} est encore en chargement.
-
interactive
-
Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis.
-
complete
-
Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.
-
- -

Exemples

- -

Différents états de chargement

- -
switch (document.readyState) {
-  case "loading":
-    // Encore en chargement.
-    break;
-  case "interactive":
-    // Le DOM est construit, on peut y accéder.
-    var span = document.createElement("span");
-    span.textContent = "A <span> element.";
-    document.body.appendChild(span);
-    break;
-  case "complete":
-    // La page est pleinement chargée.
-    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
-    break;
-}
-
- -

readystatechange comme alternative à  DOMContentLoaded

- -
// alternative à DOMContentLoaded
-document.onreadystatechange = function () {
-  if (document.readyState == "interactive") {
-    initApplication();
-  }
-}
- -

readystatechange comme alternative à load

- -
// alternative à load
-document.onreadystatechange = function () {
-  if (document.readyState == "complete") {
-    initApplication();
-  }
-}
- -

readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded

- -
// Modification du document <body> dès que possible en utilisant un script externe
-var bootstrap = function(evt){
-  if (evt.target.readyState === "interactive") { initLoader(); }
-  else if (evt.target.readyState === "complete") { initApp(); }
-}
-document.addEventListener('readystatechange', bootstrap, false);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationsStatusCommentaires
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}}
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}Spécification initiale.
- -

Compatibilité des navigateurs

- -
{{Compat("api.Document.readyState")}}
- -

[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5).

- -

[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' peut être notifié trop tôt avant que le document soit entièrement analysé.

- -

[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML.

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/readystate/index.md b/files/fr/web/api/document/readystate/index.md new file mode 100644 index 0000000000..36d01f7c11 --- /dev/null +++ b/files/fr/web/api/document/readystate/index.md @@ -0,0 +1,127 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - DOM + - HTML + - Référence(2) +translation_of: Web/API/Document/readyState +--- +
{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}
+ +

La valeur Document.readyState est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document.

+ +

À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}.

+ +

Syntaxe

+ +
var string = document.readyState;
+
+ +

Valeurs

+ +

La variable readyState peut valoir :

+ +
+
loading
+
Le {{ domxref("document") }} est encore en chargement.
+
interactive
+
Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis.
+
complete
+
Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.
+
+ +

Exemples

+ +

Différents états de chargement

+ +
switch (document.readyState) {
+  case "loading":
+    // Encore en chargement.
+    break;
+  case "interactive":
+    // Le DOM est construit, on peut y accéder.
+    var span = document.createElement("span");
+    span.textContent = "A <span> element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // La page est pleinement chargée.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}
+
+ +

readystatechange comme alternative à  DOMContentLoaded

+ +
// alternative à DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}
+ +

readystatechange comme alternative à load

+ +
// alternative à load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}
+ +

readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded

+ +
// Modification du document <body> dès que possible en utilisant un script externe
+var bootstrap = function(evt){
+  if (evt.target.readyState === "interactive") { initLoader(); }
+  else if (evt.target.readyState === "complete") { initApp(); }
+}
+document.addEventListener('readystatechange', bootstrap, false);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationsStatusCommentaires
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}}
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Document.readyState")}}
+ +

[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5).

+ +

[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' peut être notifié trop tôt avant que le document soit entièrement analysé.

+ +

[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/readystatechange_event/index.html b/files/fr/web/api/document/readystatechange_event/index.html deleted file mode 100644 index 95c60dae30..0000000000 --- a/files/fr/web/api/document/readystatechange_event/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: readystatechange -slug: Web/API/Document/readystatechange_event -translation_of: Web/API/Document/readystatechange_event -original_slug: Web/Events/readystatechange ---- -

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

- - diff --git a/files/fr/web/api/document/readystatechange_event/index.md b/files/fr/web/api/document/readystatechange_event/index.md new file mode 100644 index 0000000000..95c60dae30 --- /dev/null +++ b/files/fr/web/api/document/readystatechange_event/index.md @@ -0,0 +1,88 @@ +--- +title: readystatechange +slug: Web/API/Document/readystatechange_event +translation_of: Web/API/Document/readystatechange_event +original_slug: Web/Events/readystatechange +--- +

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

+ + diff --git a/files/fr/web/api/document/referrer/index.html b/files/fr/web/api/document/referrer/index.html deleted file mode 100644 index 075f837b2a..0000000000 --- a/files/fr/web/api/document/referrer/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Document.referrer -slug: Web/API/Document/referrer -tags: - - API - - HTML DOM - - Propriété - - Reference -translation_of: Web/API/Document/referrer ---- -
- {{APIRef}}
-

Résumé

-

Renvoie l'URI de la page de provenance.

-

Syntaxe

-
string = document.referrer;
-
-

Notes

-

La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance.

-

Spécification

- diff --git a/files/fr/web/api/document/referrer/index.md b/files/fr/web/api/document/referrer/index.md new file mode 100644 index 0000000000..075f837b2a --- /dev/null +++ b/files/fr/web/api/document/referrer/index.md @@ -0,0 +1,23 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - API + - HTML DOM + - Propriété + - Reference +translation_of: Web/API/Document/referrer +--- +
+ {{APIRef}}
+

Résumé

+

Renvoie l'URI de la page de provenance.

+

Syntaxe

+
string = document.referrer;
+
+

Notes

+

La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance.

+

Spécification

+ diff --git a/files/fr/web/api/document/registerelement/index.html b/files/fr/web/api/document/registerelement/index.html deleted file mode 100644 index 8512a48f5f..0000000000 --- a/files/fr/web/api/document/registerelement/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Document.registerElement() -slug: Web/API/Document/registerElement -tags: - - API - - Composants Web - - DOM - - Expérimental(2) - - Méthode - - Référence(2) -translation_of: Web/API/Document/registerElement ---- -

{{APIRef("DOM")}} {{Deprecated_header}}

- -
-

Attention : document.registerElement() est déprécié en faveur de customElements.define().

-
- -

{{draft}}

- -

La méthode Document.registerElement() permet d'enregistrer un nouvel élément personnalisé dans le navigateur, et retourne un constructeur pour ce nouvel élément.

- -
-

Note : Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir Activer les Composants Web dans Firefox.

-
- -

Syntaxe

- -
var constructeur = document.registerElement(nom-tag, options);
- -

Paramètres

- -
-
nom-tag
-
Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple mon-tag.
-
options {{optional_inline}}
-
Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre.
-
- -

Exemple

- -

Voici un exemple très simple :

- -
var Montag = document.registerElement('mon-tag');
-
- -

Le nouveau tag est désormais enregistré dans le navigateur. La variable Montag contient un constructeur que vous pouvez utiliser pour créer des éléments mon-tag dans le document de la façon suivante :

- -
document.body.appendChild(new Montag());
- -

Ceci insert un élément mon-tag vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag :

- -
var montag = document.getElementsByTagName("mon-tag")[0];
-montag.textContent = "Je suis un élément mon-tag.";
-
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.Document.registerElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/registerelement/index.md b/files/fr/web/api/document/registerelement/index.md new file mode 100644 index 0000000000..8512a48f5f --- /dev/null +++ b/files/fr/web/api/document/registerelement/index.md @@ -0,0 +1,65 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +tags: + - API + - Composants Web + - DOM + - Expérimental(2) + - Méthode + - Référence(2) +translation_of: Web/API/Document/registerElement +--- +

{{APIRef("DOM")}} {{Deprecated_header}}

+ +
+

Attention : document.registerElement() est déprécié en faveur de customElements.define().

+
+ +

{{draft}}

+ +

La méthode Document.registerElement() permet d'enregistrer un nouvel élément personnalisé dans le navigateur, et retourne un constructeur pour ce nouvel élément.

+ +
+

Note : Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir Activer les Composants Web dans Firefox.

+
+ +

Syntaxe

+ +
var constructeur = document.registerElement(nom-tag, options);
+ +

Paramètres

+ +
+
nom-tag
+
Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple mon-tag.
+
options {{optional_inline}}
+
Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre.
+
+ +

Exemple

+ +

Voici un exemple très simple :

+ +
var Montag = document.registerElement('mon-tag');
+
+ +

Le nouveau tag est désormais enregistré dans le navigateur. La variable Montag contient un constructeur que vous pouvez utiliser pour créer des éléments mon-tag dans le document de la façon suivante :

+ +
document.body.appendChild(new Montag());
+ +

Ceci insert un élément mon-tag vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag :

+ +
var montag = document.getElementsByTagName("mon-tag")[0];
+montag.textContent = "Je suis un élément mon-tag.";
+
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.Document.registerElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/releasecapture/index.html b/files/fr/web/api/document/releasecapture/index.html deleted file mode 100644 index bb7cafb599..0000000000 --- a/files/fr/web/api/document/releasecapture/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Document.releaseCapture() -slug: Web/API/Document/releaseCapture -tags: - - API - - Capture - - DOM - - Document - - Méthodes - - Souris -translation_of: Web/API/Document/releaseCapture ---- -
{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}
- -
 
- -

Libère la capture de la souris si elle est actuellement activée (bouton gauche enfoncé) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant {{domxref("element.setCapture()")}}.

- -

Syntaxe

- -
document.releaseCapture()
-
- -

Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée.

- -

Exemple

- -

Voir l'exemple pour {{domxref("element.setCapture()")}}.

- -

Spécifications

- -

Basé sur l'implémentation Internet Explorer.

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/releasecapture/index.md b/files/fr/web/api/document/releasecapture/index.md new file mode 100644 index 0000000000..bb7cafb599 --- /dev/null +++ b/files/fr/web/api/document/releasecapture/index.md @@ -0,0 +1,38 @@ +--- +title: Document.releaseCapture() +slug: Web/API/Document/releaseCapture +tags: + - API + - Capture + - DOM + - Document + - Méthodes + - Souris +translation_of: Web/API/Document/releaseCapture +--- +
{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}
+ +
 
+ +

Libère la capture de la souris si elle est actuellement activée (bouton gauche enfoncé) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant {{domxref("element.setCapture()")}}.

+ +

Syntaxe

+ +
document.releaseCapture()
+
+ +

Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée.

+ +

Exemple

+ +

Voir l'exemple pour {{domxref("element.setCapture()")}}.

+ +

Spécifications

+ +

Basé sur l'implémentation Internet Explorer.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/scripts/index.html b/files/fr/web/api/document/scripts/index.html deleted file mode 100644 index cf019c81d2..0000000000 --- a/files/fr/web/api/document/scripts/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Document.scripts -slug: Web/API/Document/scripts -tags: - - API - - Document - - HTML DOM - - Property - - Reference -translation_of: Web/API/Document/scripts ---- -
{{ApiRef}}
- -

Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.

- -

Syntaxe

- -
var scriptList = document.scripts;
-
- -

La liste scriptList est un objet {{domxref("HTMLCollection")}} qu'on peut utiliser comme un tableau pour accéder aux éléments qu'elle contient.

- -

Exemple

- -

Cet exemple détecte la présence d'éléments {{HTMLElement("script")}} dans le document.

- -
var scripts = document.scripts;
-
-if (scripts.length) {
-  alert("This page has scripts!");
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}}{{ Spec2('HTML WHATWG') }}
- -

Compatibilité des navigateurs

- -
{{Compat("api.Document.scripts")}}
diff --git a/files/fr/web/api/document/scripts/index.md b/files/fr/web/api/document/scripts/index.md new file mode 100644 index 0000000000..cf019c81d2 --- /dev/null +++ b/files/fr/web/api/document/scripts/index.md @@ -0,0 +1,55 @@ +--- +title: Document.scripts +slug: Web/API/Document/scripts +tags: + - API + - Document + - HTML DOM + - Property + - Reference +translation_of: Web/API/Document/scripts +--- +
{{ApiRef}}
+ +

Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.

+ +

Syntaxe

+ +
var scriptList = document.scripts;
+
+ +

La liste scriptList est un objet {{domxref("HTMLCollection")}} qu'on peut utiliser comme un tableau pour accéder aux éléments qu'elle contient.

+ +

Exemple

+ +

Cet exemple détecte la présence d'éléments {{HTMLElement("script")}} dans le document.

+ +
var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}}{{ Spec2('HTML WHATWG') }}
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Document.scripts")}}
diff --git a/files/fr/web/api/document/scroll_event/index.html b/files/fr/web/api/document/scroll_event/index.html deleted file mode 100644 index 21c5ba592e..0000000000 --- a/files/fr/web/api/document/scroll_event/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: scroll -slug: Web/API/Document/scroll_event -tags: - - API - - Event Handler - - Reference - - events - - requestAnimationFrame -translation_of: Web/API/Document/scroll_event ---- -
{{APIRef}}
- -

L’évènement scroll (défilement) est émis lorsque l’on fait défiler le document ou un élément.

- -

Informations générales

- - - - - - - - - - - - - - - - - - - - - - - - -
BouillonnePas sur les éléments, mais bouillonne vers la defaultView si émis sur le document
AnnulableNon
Interface{{domxref("UIEvent")}}
CibleDefaultView, {{domxref("Document")}}, {{domxref("Element")}}
Action par défautAucune
- -
-

Note : Sur iOS UIWebViews, les évènements scroll ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir Bootstrap issue #16202. Safari et WKWebViews ne sont pas affectés par ce bogue.

-
- -

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}}{{domxref("Boolean")}}Si l’évènement bouillonne ou non.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Si l’évènement est annulable ou non.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (objet window du document)
detail {{readonlyInline}}long (float)0.
- -

Exemple

- -

Temporisation des évènements scroll

- -

Comme les évènements scroll peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit.

- -

Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement scroll avec requestAnimationFrame.

- -
// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/
-
-var derniere_position_de_scroll_connue = 0;
-var ticking = false;
-
-function faireQuelqueChose(position_scroll) {
-  // faire quelque chose avec la position du scroll
-}
-
-window.addEventListener('scroll', function(e) {
-  derniere_position_de_scroll_connue = window.scrollY;
-
-  if (!ticking) {
-    window.requestAnimationFrame(function() {
-      faireQuelqueChose(derniere_position_de_scroll_connue);
-      ticking = false;
-    });
-  }
-
-  ticking = true;
-});
- -

Autres exemples

- -

Pour plus d’exemples similaires, voir l’évènement resize.

- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('CSSOM View', '#scrolling-events')}}{{Spec2('CSSOM View')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.scroll_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/scroll_event/index.md b/files/fr/web/api/document/scroll_event/index.md new file mode 100644 index 0000000000..21c5ba592e --- /dev/null +++ b/files/fr/web/api/document/scroll_event/index.md @@ -0,0 +1,148 @@ +--- +title: scroll +slug: Web/API/Document/scroll_event +tags: + - API + - Event Handler + - Reference + - events + - requestAnimationFrame +translation_of: Web/API/Document/scroll_event +--- +
{{APIRef}}
+ +

L’évènement scroll (défilement) est émis lorsque l’on fait défiler le document ou un élément.

+ +

Informations générales

+ + + + + + + + + + + + + + + + + + + + + + + + +
BouillonnePas sur les éléments, mais bouillonne vers la defaultView si émis sur le document
AnnulableNon
Interface{{domxref("UIEvent")}}
CibleDefaultView, {{domxref("Document")}}, {{domxref("Element")}}
Action par défautAucune
+ +
+

Note : Sur iOS UIWebViews, les évènements scroll ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir Bootstrap issue #16202. Safari et WKWebViews ne sont pas affectés par ce bogue.

+
+ +

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}}{{domxref("Boolean")}}Si l’évènement bouillonne ou non.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Si l’évènement est annulable ou non.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (objet window du document)
detail {{readonlyInline}}long (float)0.
+ +

Exemple

+ +

Temporisation des évènements scroll

+ +

Comme les évènements scroll peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit.

+ +

Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement scroll avec requestAnimationFrame.

+ +
// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+var derniere_position_de_scroll_connue = 0;
+var ticking = false;
+
+function faireQuelqueChose(position_scroll) {
+  // faire quelque chose avec la position du scroll
+}
+
+window.addEventListener('scroll', function(e) {
+  derniere_position_de_scroll_connue = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      faireQuelqueChose(derniere_position_de_scroll_connue);
+      ticking = false;
+    });
+  }
+
+  ticking = true;
+});
+ +

Autres exemples

+ +

Pour plus d’exemples similaires, voir l’évènement resize.

+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('CSSOM View', '#scrolling-events')}}{{Spec2('CSSOM View')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.scroll_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/selectedstylesheetset/index.html b/files/fr/web/api/document/selectedstylesheetset/index.html deleted file mode 100644 index 270c7d8821..0000000000 --- a/files/fr/web/api/document/selectedstylesheetset/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Document.selectedStyleSheetSet -slug: Web/API/Document/selectedStyleSheetSet -tags: - - API - - DOM - - Document - - Feuilles de styles - - Propriétés -translation_of: Web/API/Document/selectedStyleSheetSet ---- -

{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}

- -

Indique le nom du jeu de feuilles de styles actuellement utilisé.

- -

Syntaxe

- -
currentStyleSheetSet = document.selectedStyleSheetSet
-
-document.selectedStyleSheet = newStyleSheetSet
-
- -

En retour, currentStyleSheetSet indique le nom du jeu de feuilles de styles en cours d'utilisation. Vous pouvez aussi définir celui-ci en utilisant cette propriété.

- -

La définition de la valeur de cette propriété équivaut à appeler {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de currentStyleSheetSet, puis de définir la valeur de lastStyleSheetSet sur cette valeur.

- -
-

Note : Cette valeur d'attribut est directe : sa modification affectera la valeur de l'attribut.

-
- -

Exemple

- -
console.log("Current style sheet set: " + document.selectedStyleSheetSet);
-
-document.selectedStyleSheetSet = "Some other style sheet";
-
- -
-

Note : Cet exemple vous aidera à comprendre la différence de comportement entre la définition de la valeur de selectedStyleSheetSet et l'appel de {{ domxref("document.enableStyleSheetsForSet()") }}.

-
- -

Voir aussi

- - - -

Spécifications

- - diff --git a/files/fr/web/api/document/selectedstylesheetset/index.md b/files/fr/web/api/document/selectedstylesheetset/index.md new file mode 100644 index 0000000000..270c7d8821 --- /dev/null +++ b/files/fr/web/api/document/selectedstylesheetset/index.md @@ -0,0 +1,55 @@ +--- +title: Document.selectedStyleSheetSet +slug: Web/API/Document/selectedStyleSheetSet +tags: + - API + - DOM + - Document + - Feuilles de styles + - Propriétés +translation_of: Web/API/Document/selectedStyleSheetSet +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}

+ +

Indique le nom du jeu de feuilles de styles actuellement utilisé.

+ +

Syntaxe

+ +
currentStyleSheetSet = document.selectedStyleSheetSet
+
+document.selectedStyleSheet = newStyleSheetSet
+
+ +

En retour, currentStyleSheetSet indique le nom du jeu de feuilles de styles en cours d'utilisation. Vous pouvez aussi définir celui-ci en utilisant cette propriété.

+ +

La définition de la valeur de cette propriété équivaut à appeler {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de currentStyleSheetSet, puis de définir la valeur de lastStyleSheetSet sur cette valeur.

+ +
+

Note : Cette valeur d'attribut est directe : sa modification affectera la valeur de l'attribut.

+
+ +

Exemple

+ +
console.log("Current style sheet set: " + document.selectedStyleSheetSet);
+
+document.selectedStyleSheetSet = "Some other style sheet";
+
+ +
+

Note : Cet exemple vous aidera à comprendre la différence de comportement entre la définition de la valeur de selectedStyleSheetSet et l'appel de {{ domxref("document.enableStyleSheetsForSet()") }}.

+
+ +

Voir aussi

+ + + +

Spécifications

+ + 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 44b8d92e15..0000000000 --- a/files/fr/web/api/document/stylesheets/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Document.styleSheets -slug: Web/API/Document/styleSheets -translation_of: Web/API/DocumentOrShadowRoot/styleSheets -translation_of_original: Web/API/Document/styleSheets -original_slug: Web/API/DocumentOrShadowRoot/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

- - - - diff --git a/files/fr/web/api/document/stylesheets/index.md b/files/fr/web/api/document/stylesheets/index.md new file mode 100644 index 0000000000..44b8d92e15 --- /dev/null +++ b/files/fr/web/api/document/stylesheets/index.md @@ -0,0 +1,57 @@ +--- +title: Document.styleSheets +slug: Web/API/Document/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +translation_of_original: Web/API/Document/styleSheets +original_slug: Web/API/DocumentOrShadowRoot/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

+ + + + diff --git a/files/fr/web/api/document/stylesheetsets/index.html b/files/fr/web/api/document/stylesheetsets/index.html deleted file mode 100644 index f584192df8..0000000000 --- a/files/fr/web/api/document/stylesheetsets/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Document.styleSheetSets -slug: Web/API/Document/styleSheetSets -tags: - - API - - DOM - - Document - - Feuilles de styles - - Propriétés -translation_of: Web/API/Document/styleSheetSets ---- -
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}
- -

Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.

- -

Syntaxe

- -
sets = document.styleSheetSets
-
- -

En retour, sets est une liste de jeux de feuilles de styles disponibles.

- -

Exemple

- -

Étant donné un élément {{HTMLElement("ul")}} (liste) avec l'ID "sheetList", vous pouvez le remplir avec tous les noms de tous les jeux de feuilles de styles disponibles avec un code comme celui-ci :

- -
var list = document.getElementById("sheetList");
-var sheets = document.styleSheetSets;
-
-list.innerHTML = "";
-
-for (var i = 0; i < sheets.length; i++) {
-  var item = document.createElement("li");
-
-  item.innerHTML = sheets[i];
-  list.appendChild(item);
-}
- -

Notes

- -

La liste des jeux de feuilles de styles disponibles est construite par énumération de toutes les feuilles de styles disponibles pour le document, dans l'ordre dans lequel elles sont répertoriées dans l'attribut {{domxref("document.styleSheets")}}, en ajoutant le title (titre) de chacune de celles en ayant un. Les doublons sont supprimés de la liste (en utilisant une comparaison sensible à la casse).

- -

Spécifications

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/stylesheetsets/index.md b/files/fr/web/api/document/stylesheetsets/index.md new file mode 100644 index 0000000000..f584192df8 --- /dev/null +++ b/files/fr/web/api/document/stylesheetsets/index.md @@ -0,0 +1,58 @@ +--- +title: Document.styleSheetSets +slug: Web/API/Document/styleSheetSets +tags: + - API + - DOM + - Document + - Feuilles de styles + - Propriétés +translation_of: Web/API/Document/styleSheetSets +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}
+ +

Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.

+ +

Syntaxe

+ +
sets = document.styleSheetSets
+
+ +

En retour, sets est une liste de jeux de feuilles de styles disponibles.

+ +

Exemple

+ +

Étant donné un élément {{HTMLElement("ul")}} (liste) avec l'ID "sheetList", vous pouvez le remplir avec tous les noms de tous les jeux de feuilles de styles disponibles avec un code comme celui-ci :

+ +
var list = document.getElementById("sheetList");
+var sheets = document.styleSheetSets;
+
+list.innerHTML = "";
+
+for (var i = 0; i < sheets.length; i++) {
+  var item = document.createElement("li");
+
+  item.innerHTML = sheets[i];
+  list.appendChild(item);
+}
+ +

Notes

+ +

La liste des jeux de feuilles de styles disponibles est construite par énumération de toutes les feuilles de styles disponibles pour le document, dans l'ordre dans lequel elles sont répertoriées dans l'attribut {{domxref("document.styleSheets")}}, en ajoutant le title (titre) de chacune de celles en ayant un. Les doublons sont supprimés de la liste (en utilisant une comparaison sensible à la casse).

+ +

Spécifications

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/title/index.html b/files/fr/web/api/document/title/index.html deleted file mode 100644 index 8744193915..0000000000 --- a/files/fr/web/api/document/title/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Document.title -slug: Web/API/Document/title -translation_of: Web/API/Document/title ---- -
{{APIRef("DOM")}}
- -

Obtient ou défini le titre de la page.

- -

Syntaxe

- -
var docTitle = document.title;
-
- -

title est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par document.title, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous).

- -
document.title = newTitle;
-
- -

newTitle sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de document.title, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML <title>).

- -

Exemple

- -
<!DOCTYPE html>
-<html>
-<head>
-<title>Hello World!</title>
-</head>
-<body>
-
-<script>
-alert(document.title); // Affiche "Hello World!"
-document.title = "Goodbye World!";
-alert(document.title); // Affiche "Goodbye World!"
-</script>
-
-</body>
-</html>
-
- -

Notes

- -

Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.

- -

Pour les documents HTML, la valeur initiale de document.title est le texte de la balise <title>. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL.

- -

En XUL, accéder à document.title avant que le document soit complètement chargé a des conséquences variables (document.title peut retourner une chaîne vide et définir document.title peut n'avoir aucun effet).

- -

Spécification

- - diff --git a/files/fr/web/api/document/title/index.md b/files/fr/web/api/document/title/index.md new file mode 100644 index 0000000000..8744193915 --- /dev/null +++ b/files/fr/web/api/document/title/index.md @@ -0,0 +1,54 @@ +--- +title: Document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +
{{APIRef("DOM")}}
+ +

Obtient ou défini le titre de la page.

+ +

Syntaxe

+ +
var docTitle = document.title;
+
+ +

title est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par document.title, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous).

+ +
document.title = newTitle;
+
+ +

newTitle sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de document.title, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML <title>).

+ +

Exemple

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>Hello World!</title>
+</head>
+<body>
+
+<script>
+alert(document.title); // Affiche "Hello World!"
+document.title = "Goodbye World!";
+alert(document.title); // Affiche "Goodbye World!"
+</script>
+
+</body>
+</html>
+
+ +

Notes

+ +

Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.

+ +

Pour les documents HTML, la valeur initiale de document.title est le texte de la balise <title>. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL.

+ +

En XUL, accéder à document.title avant que le document soit complètement chargé a des conséquences variables (document.title peut retourner une chaîne vide et définir document.title peut n'avoir aucun effet).

+ +

Spécification

+ + diff --git a/files/fr/web/api/document/tooltipnode/index.html b/files/fr/web/api/document/tooltipnode/index.html deleted file mode 100644 index 13c0927cff..0000000000 --- a/files/fr/web/api/document/tooltipnode/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Document.tooltipNode -slug: Web/API/Document/tooltipNode -tags: - - API - - DOM - - Document - - Propriétés - - XUL -translation_of: Web/API/Document/tooltipNode ---- -

{{ ApiRef("DOM") }}

- -

{{draft}}

- -

Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.

- -

Syntaxe

- -
document.tooltipNode;
-
- -

Spécification

- -

XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.

diff --git a/files/fr/web/api/document/tooltipnode/index.md b/files/fr/web/api/document/tooltipnode/index.md new file mode 100644 index 0000000000..13c0927cff --- /dev/null +++ b/files/fr/web/api/document/tooltipnode/index.md @@ -0,0 +1,25 @@ +--- +title: Document.tooltipNode +slug: Web/API/Document/tooltipNode +tags: + - API + - DOM + - Document + - Propriétés + - XUL +translation_of: Web/API/Document/tooltipNode +--- +

{{ ApiRef("DOM") }}

+ +

{{draft}}

+ +

Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.

+ +

Syntaxe

+ +
document.tooltipNode;
+
+ +

Spécification

+ +

XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.

diff --git a/files/fr/web/api/document/touchend_event/index.html b/files/fr/web/api/document/touchend_event/index.html deleted file mode 100644 index a12b93005e..0000000000 --- a/files/fr/web/api/document/touchend_event/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: touchend -slug: Web/API/Document/touchend_event -tags: - - Tactile - - TouchEvent - - events -translation_of: Web/API/Document/touchend_event ---- -
{{APIRef}}
- -

L'événement touchend est déclenché quand un point de contact est retiré de la surface.

- -

Informations générales

- -
-
Spécification
-
Touch Events
-
Interface
-
{{domxref("TouchEvent")}}
-
Bubbles
-
Oui
-
Cancelable
-
Oui
-
Target
-
Document, Element
-
Default Action
-
indéfinie
-
- -

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.
touches {{readonlyInline}}TouchListA list of Touches for every point of contact currently touching the surface.
targetTouches {{readonlyInline}}TouchListA list of Touches for every point of contact that is touching the surface and started on the element that is the target of the current event.
changedTouches {{readonlyInline}}TouchListA list of Touches for every point of contact which contributed to the event.
- For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
- -

Exemples

- -

Des exemples d'implémentation de cet événement sont disponibles : Touch events.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.touchend_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/touchend_event/index.md b/files/fr/web/api/document/touchend_event/index.md new file mode 100644 index 0000000000..a12b93005e --- /dev/null +++ b/files/fr/web/api/document/touchend_event/index.md @@ -0,0 +1,125 @@ +--- +title: touchend +slug: Web/API/Document/touchend_event +tags: + - Tactile + - TouchEvent + - events +translation_of: Web/API/Document/touchend_event +--- +
{{APIRef}}
+ +

L'événement touchend est déclenché quand un point de contact est retiré de la surface.

+ +

Informations générales

+ +
+
Spécification
+
Touch Events
+
Interface
+
{{domxref("TouchEvent")}}
+
Bubbles
+
Oui
+
Cancelable
+
Oui
+
Target
+
Document, Element
+
Default Action
+
indéfinie
+
+ +

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.
touches {{readonlyInline}}TouchListA list of Touches for every point of contact currently touching the surface.
targetTouches {{readonlyInline}}TouchListA list of Touches for every point of contact that is touching the surface and started on the element that is the target of the current event.
changedTouches {{readonlyInline}}TouchListA list of Touches for every point of contact which contributed to the event.
+ For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Exemples

+ +

Des exemples d'implémentation de cet événement sont disponibles : Touch events.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.touchend_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/transitionend_event/index.html b/files/fr/web/api/document/transitionend_event/index.html deleted file mode 100644 index 55916580ec..0000000000 --- a/files/fr/web/api/document/transitionend_event/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'Document: évènement transitionend' -slug: Web/API/Document/transitionend_event -translation_of: Web/API/Document/transitionend_event ---- -
{{APIRef}}
- -

L’évènement transitionend est émis quand une transition CSS a terminé. Dans le cas où une transition est supprimée avant d’avoir terminé, comme lorsqu’une {{cssxref("transition-property")}} est supprimée ou lorsque {{cssxref("display")}} reçoit la valeur none, l’évènement n’est pas généré.

- - - - - - - - - - - - - - - - - - - - -
BouillonneOui
Est annulableOui
Interface{{domxref("TransitionEvent")}}
Propriété gestionnaire d’évènementontransitionend
- -

L’évènement transitionend est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement transitioncancel est émis, l’évènement transitionend ne se produira pas.

- -

La cible originale pour cet évènement est l’Element sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface Window pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page HTMLElement: transitionend.

- -

Exemples

- -

Le code suivant ajoute un gestionnaire sur l’évènement transitionend :

- -
document.addEventListener('transitionend', () => {
-  console.log('Transition terminée');
-});
- -

La même chose, mais en utilisant la propriété ontransitionend au lieu de addEventListener() :

- -
document.ontransitionend = () => {
-  console.log('Transition terminée');
-};
- -

Voir un exemple en direct sur cet évènement.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.transitionend_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/document/transitionend_event/index.md b/files/fr/web/api/document/transitionend_event/index.md new file mode 100644 index 0000000000..55916580ec --- /dev/null +++ b/files/fr/web/api/document/transitionend_event/index.md @@ -0,0 +1,83 @@ +--- +title: 'Document: évènement transitionend' +slug: Web/API/Document/transitionend_event +translation_of: Web/API/Document/transitionend_event +--- +
{{APIRef}}
+ +

L’évènement transitionend est émis quand une transition CSS a terminé. Dans le cas où une transition est supprimée avant d’avoir terminé, comme lorsqu’une {{cssxref("transition-property")}} est supprimée ou lorsque {{cssxref("display")}} reçoit la valeur none, l’évènement n’est pas généré.

+ + + + + + + + + + + + + + + + + + + + +
BouillonneOui
Est annulableOui
Interface{{domxref("TransitionEvent")}}
Propriété gestionnaire d’évènementontransitionend
+ +

L’évènement transitionend est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement transitioncancel est émis, l’évènement transitionend ne se produira pas.

+ +

La cible originale pour cet évènement est l’Element sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface Window pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page HTMLElement: transitionend.

+ +

Exemples

+ +

Le code suivant ajoute un gestionnaire sur l’évènement transitionend :

+ +
document.addEventListener('transitionend', () => {
+  console.log('Transition terminée');
+});
+ +

La même chose, mais en utilisant la propriété ontransitionend au lieu de addEventListener() :

+ +
document.ontransitionend = () => {
+  console.log('Transition terminée');
+};
+ +

Voir un exemple en direct sur cet évènement.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.transitionend_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/document/url/index.html b/files/fr/web/api/document/url/index.html deleted file mode 100644 index 1b599ff794..0000000000 --- a/files/fr/web/api/document/url/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Document.URL -slug: Web/API/Document/URL -translation_of: Web/API/Document/URL ---- -
{{APIRef("DOM")}}
- -

Retourne l'URL du {{domxref("Document")}} sous forme de string (lecture seule).

- -

Syntaxe

- -
var string = document.URL
-
- -

Exemple

- -
var currentURL = document.URL;
-alert(currentURL);
- -

Specification

- - diff --git a/files/fr/web/api/document/url/index.md b/files/fr/web/api/document/url/index.md new file mode 100644 index 0000000000..1b599ff794 --- /dev/null +++ b/files/fr/web/api/document/url/index.md @@ -0,0 +1,24 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

Retourne l'URL du {{domxref("Document")}} sous forme de string (lecture seule).

+ +

Syntaxe

+ +
var string = document.URL
+
+ +

Exemple

+ +
var currentURL = document.URL;
+alert(currentURL);
+ +

Specification

+ + diff --git a/files/fr/web/api/document/visibilitystate/index.html b/files/fr/web/api/document/visibilitystate/index.html deleted file mode 100644 index d8ea3d1139..0000000000 --- a/files/fr/web/api/document/visibilitystate/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Document.visibilityState -slug: Web/API/Document/visibilityState -tags: - - API - - DOM - - Document - - Propriétés - - Visibilité -translation_of: Web/API/Document/visibilityState ---- -

{{ ApiRef("DOM") }}

- -

La propriété en lecture seule Document.visibilityState renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont :

- - - -

Lorsque la valeur de cette propriété change, l'évènement {{event('visibilitychange')}} est envoyé au {{domxref("Document")}}.

- -

L'utilisation typique de ceci peut être d'empêcher le téléchargement de certains éléments actifs lorsque le document est uniquement prérendu, ou d'arrêter certaines activités lorsque le document est en arrière-plan ou réduit au minimum.

- -

Syntaxe

- -
var string = document.visibilityState
- -

Exemples

- -
document.addEventListener("visibilitychange", function() {
-  console.log( document.visibilityState );
-  // Modifier le comportement...
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}{{Spec2('Page Visibility API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.visibilityState")}}

diff --git a/files/fr/web/api/document/visibilitystate/index.md b/files/fr/web/api/document/visibilitystate/index.md new file mode 100644 index 0000000000..d8ea3d1139 --- /dev/null +++ b/files/fr/web/api/document/visibilitystate/index.md @@ -0,0 +1,57 @@ +--- +title: Document.visibilityState +slug: Web/API/Document/visibilityState +tags: + - API + - DOM + - Document + - Propriétés + - Visibilité +translation_of: Web/API/Document/visibilityState +--- +

{{ ApiRef("DOM") }}

+ +

La propriété en lecture seule Document.visibilityState renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont :

+ + + +

Lorsque la valeur de cette propriété change, l'évènement {{event('visibilitychange')}} est envoyé au {{domxref("Document")}}.

+ +

L'utilisation typique de ceci peut être d'empêcher le téléchargement de certains éléments actifs lorsque le document est uniquement prérendu, ou d'arrêter certaines activités lorsque le document est en arrière-plan ou réduit au minimum.

+ +

Syntaxe

+ +
var string = document.visibilityState
+ +

Exemples

+ +
document.addEventListener("visibilitychange", function() {
+  console.log( document.visibilityState );
+  // Modifier le comportement...
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}{{Spec2('Page Visibility API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.visibilityState")}}

diff --git a/files/fr/web/api/document/width/index.html b/files/fr/web/api/document/width/index.html deleted file mode 100644 index 8be64c2109..0000000000 --- a/files/fr/web/api/document/width/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Document.width -slug: Web/API/Document/width -translation_of: Web/API/Document/width ---- -
{{APIRef("DOM")}} {{Obsolete_header}}
- -
-

Note : À partir de {{Gecko("6.0")}}, document.width n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}.

-
- -

Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels.

- -

Non pris en charge par Internet Explorer.

- -

Syntaxe

- -
pixels = document.width;
-
- -

Exemple

- -
function init() {
-    alert("La largeur du document est " + document.width + " pixels.");
-}
-
- -

Alternatives

- -
document.body.clientWidth              /* largeur de <body> */
-document.documentElement.clientWidth   /* largeur de <html> */
-window.innerWidth                      /* largeur de la fenêtre */
-
- -

Spécification

- -

HTML5

- -

Voir également

- - diff --git a/files/fr/web/api/document/width/index.md b/files/fr/web/api/document/width/index.md new file mode 100644 index 0000000000..8be64c2109 --- /dev/null +++ b/files/fr/web/api/document/width/index.md @@ -0,0 +1,45 @@ +--- +title: Document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

Note : À partir de {{Gecko("6.0")}}, document.width n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}.

+
+ +

Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels.

+ +

Non pris en charge par Internet Explorer.

+ +

Syntaxe

+ +
pixels = document.width;
+
+ +

Exemple

+ +
function init() {
+    alert("La largeur du document est " + document.width + " pixels.");
+}
+
+ +

Alternatives

+ +
document.body.clientWidth              /* largeur de <body> */
+document.documentElement.clientWidth   /* largeur de <html> */
+window.innerWidth                      /* largeur de la fenêtre */
+
+ +

Spécification

+ +

HTML5

+ +

Voir également

+ + diff --git a/files/fr/web/api/document/write/index.html b/files/fr/web/api/document/write/index.html deleted file mode 100644 index deac04e6b3..0000000000 --- a/files/fr/web/api/document/write/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: document.write -slug: Web/API/Document/write -tags: - - API - - DOM - - Document - - Méthodes - - Rérérence -translation_of: Web/API/Document/write ---- -

{{ ApiRef("DOM") }}

- -

Écrit une chaîne de texte dans un document ouvert par document.open().

- -
-

Note : comme document.write écrit dans le flux de documents, appeler document.write sur un document fermé (chargé) appelle automatiquement document.open, ce qui efface le document.

-
- -

Syntaxe

- -
document.write(balisage);
-
- -

Paramètres

- -
-
markup
-
est une chaîne de caractères contenant le texte à écrire dans le document.
-
- -

Exemple

- -
<html>
-
-<head>
-<title>Exemple de document.write</title>
-
-<script type="text/javascript">
-
-function nouveauContenu()
-{
-alert("chargement du nouveau contenu");
-document.open();
-document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>");
-document.close();
-}
-
-</script>
-</head>
-
-<body onload="nouveauContenu();">
-<p>Ceci est le contenu original du document.</p>
-</body>
-</html>
-
- -

Notes

- -

Écrire dans un document qui a déjà été chargé sans appeler document.open() provoquera un appel automatique à document.open. Une fois l'écriture terminée, il est recommandé d'appeler document.close() pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément h1 devient un nœud dans le document.

- -

Si l'appel à document.write() est intégré directement dans le code HTML, il n'appellera pas document.open(). Par exemple :

- -
<script>
-  document.write("<h1>Main title</h1>")
-</script>
- -
-

Note : document.write et document.writeln ne fonctionnent pas dans les documents XHTML (vous obtiendrez une erreur  "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier  .xhtm ou pour tout document servi avec une  application/xhtml+xml de type MIME. Plus d'informations disponibles dans la   foire aux questions W3C XHTML (en).

-
- -
-

Note : document.write dans les scripts deferred (différé) ou asynchronous (asynchrone) sera ignoré et vous recevrez un message comme  "A call to document.write() from an asynchronously-loaded external script was ignored" dans la console d'erreurs.

-
- -
-

Note : Dans Edge seulement, appeler plusieurs fois document.write dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." (autorisation refusée).

-
- -
-

Note : À partir de la version 55, Chrome n'exécute pas les éléments <script> injectés via document.write() en cas d'échec de cache HTTP pour les utilisateurs sur une connexion 2G.

-
- -

Spécification

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document/write/index.md b/files/fr/web/api/document/write/index.md new file mode 100644 index 0000000000..deac04e6b3 --- /dev/null +++ b/files/fr/web/api/document/write/index.md @@ -0,0 +1,96 @@ +--- +title: document.write +slug: Web/API/Document/write +tags: + - API + - DOM + - Document + - Méthodes + - Rérérence +translation_of: Web/API/Document/write +--- +

{{ ApiRef("DOM") }}

+ +

Écrit une chaîne de texte dans un document ouvert par document.open().

+ +
+

Note : comme document.write écrit dans le flux de documents, appeler document.write sur un document fermé (chargé) appelle automatiquement document.open, ce qui efface le document.

+
+ +

Syntaxe

+ +
document.write(balisage);
+
+ +

Paramètres

+ +
+
markup
+
est une chaîne de caractères contenant le texte à écrire dans le document.
+
+ +

Exemple

+ +
<html>
+
+<head>
+<title>Exemple de document.write</title>
+
+<script type="text/javascript">
+
+function nouveauContenu()
+{
+alert("chargement du nouveau contenu");
+document.open();
+document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>");
+document.close();
+}
+
+</script>
+</head>
+
+<body onload="nouveauContenu();">
+<p>Ceci est le contenu original du document.</p>
+</body>
+</html>
+
+ +

Notes

+ +

Écrire dans un document qui a déjà été chargé sans appeler document.open() provoquera un appel automatique à document.open. Une fois l'écriture terminée, il est recommandé d'appeler document.close() pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément h1 devient un nœud dans le document.

+ +

Si l'appel à document.write() est intégré directement dans le code HTML, il n'appellera pas document.open(). Par exemple :

+ +
<script>
+  document.write("<h1>Main title</h1>")
+</script>
+ +
+

Note : document.write et document.writeln ne fonctionnent pas dans les documents XHTML (vous obtiendrez une erreur  "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier  .xhtm ou pour tout document servi avec une  application/xhtml+xml de type MIME. Plus d'informations disponibles dans la   foire aux questions W3C XHTML (en).

+
+ +
+

Note : document.write dans les scripts deferred (différé) ou asynchronous (asynchrone) sera ignoré et vous recevrez un message comme  "A call to document.write() from an asynchronously-loaded external script was ignored" dans la console d'erreurs.

+
+ +
+

Note : Dans Edge seulement, appeler plusieurs fois document.write dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." (autorisation refusée).

+
+ +
+

Note : À partir de la version 55, Chrome n'exécute pas les éléments <script> injectés via document.write() en cas d'échec de cache HTTP pour les utilisateurs sur une connexion 2G.

+
+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document/writeln/index.html b/files/fr/web/api/document/writeln/index.html deleted file mode 100644 index eb06d11321..0000000000 --- a/files/fr/web/api/document/writeln/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Document.writeln() -slug: Web/API/Document/writeln -tags: - - API - - DOM - - Method - - Reference -translation_of: Web/API/Document/writeln ---- -

{{ ApiRef("DOM") }}

- -

Écrit une chaine de caractères suivie d'un retour de ligne.

- -

Syntaxe

- -
document.writeln(ligne);
-
- -

Paramètres

- - - -

Exemple

- -
document.writeln("<p>Entrez votre mot de passe :</p>");
-
- -

Notes

- -

document.writeln est identique à {{domxref("document.write")}}, mais ajoute une nouvelle ligne.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}{{Spec2("DOM2 HTML")}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.writeln")}}

diff --git a/files/fr/web/api/document/writeln/index.md b/files/fr/web/api/document/writeln/index.md new file mode 100644 index 0000000000..eb06d11321 --- /dev/null +++ b/files/fr/web/api/document/writeln/index.md @@ -0,0 +1,56 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/writeln +--- +

{{ ApiRef("DOM") }}

+ +

Écrit une chaine de caractères suivie d'un retour de ligne.

+ +

Syntaxe

+ +
document.writeln(ligne);
+
+ +

Paramètres

+ + + +

Exemple

+ +
document.writeln("<p>Entrez votre mot de passe :</p>");
+
+ +

Notes

+ +

document.writeln est identique à {{domxref("document.write")}}, mais ajoute une nouvelle ligne.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}{{Spec2("DOM2 HTML")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.writeln")}}

diff --git a/files/fr/web/api/document/xmlencoding/index.html b/files/fr/web/api/document/xmlencoding/index.html deleted file mode 100644 index a7236fc2f6..0000000000 --- a/files/fr/web/api/document/xmlencoding/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Document.xmlEncoding -slug: Web/API/Document/xmlEncoding -tags: - - API - - DOM - - Document - - Encodage - - Propriétés - - XML -translation_of: Web/API/Document/xmlEncoding ---- -

{{APIRef("DOM")}}{{ obsolete_header("10.0") }}

- -

Renvoie le codage déterminé par la déclaration XML. Devrait être null si non précisé ou inconnu.

- -
-

Attention : N'utilisez pas cet attribut ; il a été supprimé de la spécification DOM Niveau 4 et n'est plus pris en charge dans Gecko 10.0 {{ geckoRelease("10.0") }}.

-
- -

Si la déclaration XML indique :

- -
<?xml version="1.0" encoding="UTF-16"?>
-
- -

... le résultat doit être "UTF-16".

- -

Cependant, Firefox 3.0 inclut des informations sur l'"endianness" (par exemple, UTF-16BE pour le codage "big endian") et, tandis que cette information supplémentaire est supprimée à partir de Firefox 3.1b3, Firefox 3.1b3 consulte toujours l'encodage du fichier plutôt que la déclaration XML, comme la spécification le prévoit ("Un attribut spécifiant, dans le cadre de la déclaration XML, l'encodage de ce document.").

- -

Spécification

- - diff --git a/files/fr/web/api/document/xmlencoding/index.md b/files/fr/web/api/document/xmlencoding/index.md new file mode 100644 index 0000000000..a7236fc2f6 --- /dev/null +++ b/files/fr/web/api/document/xmlencoding/index.md @@ -0,0 +1,35 @@ +--- +title: Document.xmlEncoding +slug: Web/API/Document/xmlEncoding +tags: + - API + - DOM + - Document + - Encodage + - Propriétés + - XML +translation_of: Web/API/Document/xmlEncoding +--- +

{{APIRef("DOM")}}{{ obsolete_header("10.0") }}

+ +

Renvoie le codage déterminé par la déclaration XML. Devrait être null si non précisé ou inconnu.

+ +
+

Attention : N'utilisez pas cet attribut ; il a été supprimé de la spécification DOM Niveau 4 et n'est plus pris en charge dans Gecko 10.0 {{ geckoRelease("10.0") }}.

+
+ +

Si la déclaration XML indique :

+ +
<?xml version="1.0" encoding="UTF-16"?>
+
+ +

... le résultat doit être "UTF-16".

+ +

Cependant, Firefox 3.0 inclut des informations sur l'"endianness" (par exemple, UTF-16BE pour le codage "big endian") et, tandis que cette information supplémentaire est supprimée à partir de Firefox 3.1b3, Firefox 3.1b3 consulte toujours l'encodage du fichier plutôt que la déclaration XML, comme la spécification le prévoit ("Un attribut spécifiant, dans le cadre de la déclaration XML, l'encodage de ce document.").

+ +

Spécification

+ + diff --git a/files/fr/web/api/document/xmlversion/index.html b/files/fr/web/api/document/xmlversion/index.html deleted file mode 100644 index 4145a61548..0000000000 --- a/files/fr/web/api/document/xmlversion/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Document.xmlVersion -slug: Web/API/Document/xmlVersion -tags: - - API - - DOM - - Document - - Propriétés - - XML - - version -translation_of: Web/API/Document/xmlVersion ---- -

{{APIRef("DOM")}}{{ obsolete_header("10.0") }}

- -

Renvoie le numéro de version comme spécifié dans la déclaration XML (par exemple, <?xml version="1.0"?>) ou "1.0" si la déclaration est absente.

- -

Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) :

- -
if (document.createElement("foo").tagName == "FOO") {
-  /* le document n'est pas XML */
-}
-
- -

Spécifications

- - diff --git a/files/fr/web/api/document/xmlversion/index.md b/files/fr/web/api/document/xmlversion/index.md new file mode 100644 index 0000000000..4145a61548 --- /dev/null +++ b/files/fr/web/api/document/xmlversion/index.md @@ -0,0 +1,29 @@ +--- +title: Document.xmlVersion +slug: Web/API/Document/xmlVersion +tags: + - API + - DOM + - Document + - Propriétés + - XML + - version +translation_of: Web/API/Document/xmlVersion +--- +

{{APIRef("DOM")}}{{ obsolete_header("10.0") }}

+ +

Renvoie le numéro de version comme spécifié dans la déclaration XML (par exemple, <?xml version="1.0"?>) ou "1.0" si la déclaration est absente.

+ +

Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) :

+ +
if (document.createElement("foo").tagName == "FOO") {
+  /* le document n'est pas XML */
+}
+
+ +

Spécifications

+ + diff --git a/files/fr/web/api/document_object_model/examples/index.html b/files/fr/web/api/document_object_model/examples/index.html deleted file mode 100644 index 9754cae903..0000000000 --- a/files/fr/web/api/document_object_model/examples/index.html +++ /dev/null @@ -1,370 +0,0 @@ ---- -title: Exemples -slug: Web/API/Document_Object_Model/Examples -tags: - - DOM - - Exemples -translation_of: Web/API/Document_Object_Model/Examples -original_slug: Web/API/Document_Object_Model/Exemples ---- -

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

- - - - - - diff --git a/files/fr/web/api/document_object_model/examples/index.md b/files/fr/web/api/document_object_model/examples/index.md new file mode 100644 index 0000000000..9754cae903 --- /dev/null +++ b/files/fr/web/api/document_object_model/examples/index.md @@ -0,0 +1,370 @@ +--- +title: Exemples +slug: Web/API/Document_Object_Model/Examples +tags: + - DOM + - Exemples +translation_of: Web/API/Document_Object_Model/Examples +original_slug: Web/API/Document_Object_Model/Exemples +--- +

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

+ + + + + + 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 deleted file mode 100644 index ed1a422071..0000000000 --- a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Comment créer un arbre DOM -slug: Web/API/Document_object_model/How_to_create_a_DOM_tree -tags: - - AJAX - - DOM - - Extensions -translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree -original_slug: Comment_créer_un_arbre_DOM ---- -

 

- -

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/how_to_create_a_dom_tree/index.md b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md new file mode 100644 index 0000000000..ed1a422071 --- /dev/null +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md @@ -0,0 +1,147 @@ +--- +title: Comment créer un arbre DOM +slug: Web/API/Document_object_model/How_to_create_a_DOM_tree +tags: + - AJAX + - DOM + - Extensions +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +original_slug: Comment_créer_un_arbre_DOM +--- +

 

+ +

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/index.html b/files/fr/web/api/document_object_model/index.html deleted file mode 100644 index dad3cd1a68..0000000000 --- a/files/fr/web/api/document_object_model/index.html +++ /dev/null @@ -1,408 +0,0 @@ ---- -title: Référence du DOM -slug: Web/API/Document_Object_Model -tags: - - API - - DOM - - Intermédiaire - - Référence(2) -translation_of: Web/API/Document_Object_Model ---- -
{{DefaultAPISidebar("DOM")}}
- -

Le Document Object Model ou DOM (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.

- -

Pour mieux comprendre le fonctionnement du DOM, une introduction est disponible.

- -

Interfaces du DOM

- - - -

Interfaces obsolètes du DOM {{obsolete_inline}}

- -

Le DOM a été simplifié au cours du temps. Pour cette raison, les interfaces qui suivent, présentes dans la spécification du DOM de niveau 3 ou des niveaux antérieurs, ont été supprimées. Bien qu'il ne soit pas certain qu'elles ne soient pas réintroduites, elles doivent être considérées comme obsolètes et il faut éviter de les utiliser :

- - - -

Interfaces HTML

- -

Un document contenant du HTML est décrit grâce à l'interface {{domxref("HTMLDocument")}}. On notera que la spécification HTML étend également l'interface {{domxref("Document")}}.

- -

Un objet HTMLDocument donne également accès à différentes fonctionnalités liées au navigateur comme l'onglet ou la fenêtre dans laquelle la page est dessinée, notamment grâce à l'interface {{domxref("Window")}}. On peut accéder à la mise en forme de la page via {{domxref("window.style")}} (généralement le CSS associé au document), à l'historique de navigation relatif au contexte via {{domxref("window.history")}} et enfin à la sélection faite dans le document via {{domxref("Selection")}}.

- -

Interfaces des éléments HTML

- - - -

Autres interfaces

- - - -

Interfaces HTML obsolètes {{obsolete_inline}}

- - - -

Interfaces SVG

- -

Interfaces des éléments SVG

- - - -

Interfaces pour les types de donnée SVG

- -

Voici l'API du DOM pour les types de donnée utilisés pour les propriétés et attributs SVG.

- -
-

Note : À partir de {{Gecko("5.0")}}, les interfaces suivantes relatives à SVG et qui représentent des listes d'objets sont indexées et permettent d'y accéder. Elles possèdent en plus une propriété de longueur qui indique le nombre d'éléments dans la liste : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}.

-
- -

Interfaces statiques

- - - -

Interfaces animées

- - - -

Interfaces relatives à SMIL

- - - -

Autres interfaces SVG

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/document_object_model/index.md b/files/fr/web/api/document_object_model/index.md new file mode 100644 index 0000000000..dad3cd1a68 --- /dev/null +++ b/files/fr/web/api/document_object_model/index.md @@ -0,0 +1,408 @@ +--- +title: Référence du DOM +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - Intermédiaire + - Référence(2) +translation_of: Web/API/Document_Object_Model +--- +
{{DefaultAPISidebar("DOM")}}
+ +

Le Document Object Model ou DOM (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.

+ +

Pour mieux comprendre le fonctionnement du DOM, une introduction est disponible.

+ +

Interfaces du DOM

+ + + +

Interfaces obsolètes du DOM {{obsolete_inline}}

+ +

Le DOM a été simplifié au cours du temps. Pour cette raison, les interfaces qui suivent, présentes dans la spécification du DOM de niveau 3 ou des niveaux antérieurs, ont été supprimées. Bien qu'il ne soit pas certain qu'elles ne soient pas réintroduites, elles doivent être considérées comme obsolètes et il faut éviter de les utiliser :

+ + + +

Interfaces HTML

+ +

Un document contenant du HTML est décrit grâce à l'interface {{domxref("HTMLDocument")}}. On notera que la spécification HTML étend également l'interface {{domxref("Document")}}.

+ +

Un objet HTMLDocument donne également accès à différentes fonctionnalités liées au navigateur comme l'onglet ou la fenêtre dans laquelle la page est dessinée, notamment grâce à l'interface {{domxref("Window")}}. On peut accéder à la mise en forme de la page via {{domxref("window.style")}} (généralement le CSS associé au document), à l'historique de navigation relatif au contexte via {{domxref("window.history")}} et enfin à la sélection faite dans le document via {{domxref("Selection")}}.

+ +

Interfaces des éléments HTML

+ + + +

Autres interfaces

+ + + +

Interfaces HTML obsolètes {{obsolete_inline}}

+ + + +

Interfaces SVG

+ +

Interfaces des éléments SVG

+ + + +

Interfaces pour les types de donnée SVG

+ +

Voici l'API du DOM pour les types de donnée utilisés pour les propriétés et attributs SVG.

+ +
+

Note : À partir de {{Gecko("5.0")}}, les interfaces suivantes relatives à SVG et qui représentent des listes d'objets sont indexées et permettent d'y accéder. Elles possèdent en plus une propriété de longueur qui indique le nombre d'éléments dans la liste : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}.

+
+ +

Interfaces statiques

+ + + +

Interfaces animées

+ + + +

Interfaces relatives à SMIL

+ + + +

Autres interfaces SVG

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/document_object_model/introduction/index.html b/files/fr/web/api/document_object_model/introduction/index.html deleted file mode 100644 index fa1af30b15..0000000000 --- a/files/fr/web/api/document_object_model/introduction/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: Introduction -slug: Web/API/Document_Object_Model/Introduction -tags: - - Beginner - - DOM - - Document - - Guide - - HTML DOM - - Introduction - - Tutorial -translation_of: Web/API/Document_Object_Model/Introduction ---- -
{{DefaultAPISidebar("DOM")}}
- -

Le Modèle Objet de Document (DOM: Document object Model) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.

- -

Qu'est-ce que le DOM?

- -

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.

- -

Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript.

- -

Les normes DOM du W3C et WHATWG DOM forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.

- -

Par exemple, DOM du W3C spécifie que la méthode getElementsByTagName dans le code ci-dessous doit renvoyer une liste de tous les éléments <P> présents dans le document :

- -
const paragraphs = document.querySelectorAll("p");
-// paragraphes[0] est le premier élément <p>
-// paragraphes[1] est le second élément <p>, etc.
-alert(paragraphes[0].nodeName);
-
- -

Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet document qui représente le document lui-même, l'objet table qui implémente l'interface DOM particulière HTMLTableElement permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.

- -

DOM et JavaScript

- -

Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en JavaScript. C'est-à-dire qu'il est écrit en JavaScript, mais qu'il utilise le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.

- -

À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :

- -

API(page Web ou XML) = DOM + JS(langage de script)

- -

Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :

- -
# Exemple d'utilisation du DOM en Python
-import xml.dom.minidom as m
-doc = m.parse("C:\\Projects\\Py\\chap1.xml");
-doc.nodeName # Propriété DOM de l'objet document;
-p_list = doc.getElementsByTagName("para");
-
- -

Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir Survol des technologies JavaScript.

- -

Méthodes d'accès au DOM

- -

Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.

- -

Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <SCRIPT> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments document ou window, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction alert() de l'objet window, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.

- -

Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).

- -
<body onload="window.alert('Bienvenue sur ma page Web !');">
- -

Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :

- -
<html>
-  <head>
-    <script>
-       // run this function when the document is loaded
-       window.onload = function() {
-
-         // create a couple of elements in an otherwise empty HTML page
-         const heading = document.createElement("h1");
-         const heading_text = document.createTextNode("Gros titre !");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
-
- -

Types de données fondamentaux

- -

Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.

- -
-

Note : Parce que la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.

-
- -

NDTR: (Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant elements, aux tableaux de nœuds en tant que nodeLists (ou même simplement éléments), et aux nœuds d'attributs en tant qu'attributes).

- -

Le tableau suivant décrit brièvement ces types de données.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de donnée (Interface)Description
{{domxref("Document")}}Lorsqu'un membre renvoie un objet de type document (par exemple la propriété ownerDocument d'un élément, qui retourne le document auquel il appartient), cet objet est l'objet document racine lui-même. Le chapitre référence de DOM document décrit l'objet document en détail.
{{domxref("Node")}}Chaque objet du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi un nœud text ou nœud attribut.
{{domxref("Element")}}Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode document.createElement() renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces décrivant les capacités d'éléments spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).
{{domxref("NodeList")}}Une nodeList est un tableau d'éléments, comme celui qui est renvoyé par la méthode document.getElementsByTagName(). Les éléments d'une nodeList sont accessibles par un index de deux manières différentes : -
    -
  • list.item(1)
    • -
  • list[1]
    • -
- -

Ces deux lignes sont équivalentes. Dans la première, item() est la méthode de l'objet nodeList. La seconde utilise la syntaxe habituelle d'un tableau pour accéder au second élément de la liste.

-
{{domxref("Attribute")}}Lorsqu'un attribute est renvoyé par un membre (par exemple par la méthode createAttribute()), il s'agit d'une référence à un objet qui expose une interface particulière (et limitée) aux attributs. Les attributs sont des nœuds dans le DOM tout comme les éléments, mais ils seront rarement utilisés de cette manière.
{{domxref("NamedNodeMap")}}Une namedNodeMap est comme un tableau, mais où l'on peut accéder aux éléments à la fois par nom ou par index. Cette dernière possibilité est cependant juste là pour faciliter l'énumération, car la liste n'est pas dans un ordre particulier. Une namedNodeMap a une méthode item() pour la même raison, et il est également possible d'ajouter et de retirer des élements d'une namedNodeMap.
- -

Les interfaces DOM

- -

Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont leschoses réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément HTML FORM reçoit sa propriété name de l'interface HTMLElement. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.

- -

Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.

- -

Les interfaces et les objets

- -

De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une interface spécialisée de l'élément HTML Table, qui comprend des méthodes telles que createCaption et insertRow. Mais comme il s'agit également d'un élément HTML, table implémente aussi l'interface Element décrite dans le chapitre Référence de DOM element. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique Node, dont dérive Element.

- -

Lorsque vous obtiendrez une référence à un objet table, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.

- -
var table = document.getElementById("table");
-var tableAttrs = table.attributes; // Interface Node/Element
-for(var i = 0; i < tableAttrs.length; i++){
-  // Interface HTMLTableElement : attribut border
-  if(tableAttrs[i].nodeName.toLowerCase() == "border")
-    table.border = "1";
-}
-// Interface HTMLTableElement : attribut summary
-table.summary = "note : bordure plus large";
-
- -

Interfaces essentielles du DOM

- -

Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre Exemples d'utilisation du DOM à la fin de livre.

- -

Les objets document et window sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet window représente quelque chose comme le navigateur, et l'objet document est la racine du document lui-même. Element hérite de l'interface générique Node, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet table donné en exemple dans la section précédente.

- -

Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.

- - - -

Test de l'API DOM

- -

Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément <script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.

- -

Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scriptes. La page suivante, très simple, fournit un élément <script> dans l'entête dans lequel vous pouvez placer les fonctions qui testent l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur.

- -

Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction test(), créer plus de boutons, ou ajouter d'autres éléments si nécessaire.

- -
<html>
-<head>
-  <title>Tests du DOM</title>
-  <script type="application/x-javascript">
-  function setBodyAttr(attr,value){
-    if(document.body) eval('document.body.'+attr+'="'+value+'"');
-    else notSupported();
-  }
-  </script>
-</head>
-<body>
-  <div style="margin: .5in; height="400"">
-    <p><b><tt>text</tt> color</p>
-    <form>
-      <select onChange="setBodyAttr('text',
-          this.options[this.selectedIndex].value);">
-        <option value="black">black
-        <option value="darkblue">darkblue
-      </select>
-      <p><b><tt>bgColor</tt></p>
-      <select onChange="setBodyAttr('bgColor',
-          this.options[this.selectedIndex].value);">
-        <option value="white">white
-        <option value="lightgrey">gray
-      </select>
-      <p><b><tt>link</tt></p>
-      <select onChange="setBodyAttr('link',
-          this.options[this.selectedIndex].value);">
-        <option value="blue">blue
-        <option value="green">green
-      </select>  <small>
-          <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
-      (exemple de lien)</a></small><br>
-    </form>
-    <form>
-      <input type="button" value="version" onclick="ver()" />
-    </form>
-  </div>
-</body>
-</html>
- -

Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.

- -

Figure 0.1 Exemple de page de test du DOM

- -

- -

Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (bgColor), la couleur des hyperliens (aLink) et la couleur du texte (text). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.

diff --git a/files/fr/web/api/document_object_model/introduction/index.md b/files/fr/web/api/document_object_model/introduction/index.md new file mode 100644 index 0000000000..fa1af30b15 --- /dev/null +++ b/files/fr/web/api/document_object_model/introduction/index.md @@ -0,0 +1,242 @@ +--- +title: Introduction +slug: Web/API/Document_Object_Model/Introduction +tags: + - Beginner + - DOM + - Document + - Guide + - HTML DOM + - Introduction + - Tutorial +translation_of: Web/API/Document_Object_Model/Introduction +--- +
{{DefaultAPISidebar("DOM")}}
+ +

Le Modèle Objet de Document (DOM: Document object Model) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.

+ +

Qu'est-ce que le DOM?

+ +

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.

+ +

Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript.

+ +

Les normes DOM du W3C et WHATWG DOM forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.

+ +

Par exemple, DOM du W3C spécifie que la méthode getElementsByTagName dans le code ci-dessous doit renvoyer une liste de tous les éléments <P> présents dans le document :

+ +
const paragraphs = document.querySelectorAll("p");
+// paragraphes[0] est le premier élément <p>
+// paragraphes[1] est le second élément <p>, etc.
+alert(paragraphes[0].nodeName);
+
+ +

Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet document qui représente le document lui-même, l'objet table qui implémente l'interface DOM particulière HTMLTableElement permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.

+ +

DOM et JavaScript

+ +

Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en JavaScript. C'est-à-dire qu'il est écrit en JavaScript, mais qu'il utilise le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.

+ +

À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :

+ +

API(page Web ou XML) = DOM + JS(langage de script)

+ +

Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :

+ +
# Exemple d'utilisation du DOM en Python
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # Propriété DOM de l'objet document;
+p_list = doc.getElementsByTagName("para");
+
+ +

Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir Survol des technologies JavaScript.

+ +

Méthodes d'accès au DOM

+ +

Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.

+ +

Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <SCRIPT> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments document ou window, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction alert() de l'objet window, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.

+ +

Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).

+ +
<body onload="window.alert('Bienvenue sur ma page Web !');">
+ +

Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :

+ +
<html>
+  <head>
+    <script>
+       // run this function when the document is loaded
+       window.onload = function() {
+
+         // create a couple of elements in an otherwise empty HTML page
+         const heading = document.createElement("h1");
+         const heading_text = document.createTextNode("Gros titre !");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+
+ +

Types de données fondamentaux

+ +

Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.

+ +
+

Note : Parce que la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.

+
+ +

NDTR: (Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant elements, aux tableaux de nœuds en tant que nodeLists (ou même simplement éléments), et aux nœuds d'attributs en tant qu'attributes).

+ +

Le tableau suivant décrit brièvement ces types de données.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de donnée (Interface)Description
{{domxref("Document")}}Lorsqu'un membre renvoie un objet de type document (par exemple la propriété ownerDocument d'un élément, qui retourne le document auquel il appartient), cet objet est l'objet document racine lui-même. Le chapitre référence de DOM document décrit l'objet document en détail.
{{domxref("Node")}}Chaque objet du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi un nœud text ou nœud attribut.
{{domxref("Element")}}Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode document.createElement() renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces décrivant les capacités d'éléments spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).
{{domxref("NodeList")}}Une nodeList est un tableau d'éléments, comme celui qui est renvoyé par la méthode document.getElementsByTagName(). Les éléments d'une nodeList sont accessibles par un index de deux manières différentes : +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ +

Ces deux lignes sont équivalentes. Dans la première, item() est la méthode de l'objet nodeList. La seconde utilise la syntaxe habituelle d'un tableau pour accéder au second élément de la liste.

+
{{domxref("Attribute")}}Lorsqu'un attribute est renvoyé par un membre (par exemple par la méthode createAttribute()), il s'agit d'une référence à un objet qui expose une interface particulière (et limitée) aux attributs. Les attributs sont des nœuds dans le DOM tout comme les éléments, mais ils seront rarement utilisés de cette manière.
{{domxref("NamedNodeMap")}}Une namedNodeMap est comme un tableau, mais où l'on peut accéder aux éléments à la fois par nom ou par index. Cette dernière possibilité est cependant juste là pour faciliter l'énumération, car la liste n'est pas dans un ordre particulier. Une namedNodeMap a une méthode item() pour la même raison, et il est également possible d'ajouter et de retirer des élements d'une namedNodeMap.
+ +

Les interfaces DOM

+ +

Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont leschoses réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément HTML FORM reçoit sa propriété name de l'interface HTMLElement. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.

+ +

Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.

+ +

Les interfaces et les objets

+ +

De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une interface spécialisée de l'élément HTML Table, qui comprend des méthodes telles que createCaption et insertRow. Mais comme il s'agit également d'un élément HTML, table implémente aussi l'interface Element décrite dans le chapitre Référence de DOM element. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique Node, dont dérive Element.

+ +

Lorsque vous obtiendrez une référence à un objet table, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.

+ +
var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Interface Node/Element
+for(var i = 0; i < tableAttrs.length; i++){
+  // Interface HTMLTableElement : attribut border
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// Interface HTMLTableElement : attribut summary
+table.summary = "note : bordure plus large";
+
+ +

Interfaces essentielles du DOM

+ +

Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre Exemples d'utilisation du DOM à la fin de livre.

+ +

Les objets document et window sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet window représente quelque chose comme le navigateur, et l'objet document est la racine du document lui-même. Element hérite de l'interface générique Node, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet table donné en exemple dans la section précédente.

+ +

Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.

+ + + +

Test de l'API DOM

+ +

Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément <script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.

+ +

Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scriptes. La page suivante, très simple, fournit un élément <script> dans l'entête dans lequel vous pouvez placer les fonctions qui testent l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur.

+ +

Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction test(), créer plus de boutons, ou ajouter d'autres éléments si nécessaire.

+ +
<html>
+<head>
+  <title>Tests du DOM</title>
+  <script type="application/x-javascript">
+  function setBodyAttr(attr,value){
+    if(document.body) eval('document.body.'+attr+'="'+value+'"');
+    else notSupported();
+  }
+  </script>
+</head>
+<body>
+  <div style="margin: .5in; height="400"">
+    <p><b><tt>text</tt> color</p>
+    <form>
+      <select onChange="setBodyAttr('text',
+          this.options[this.selectedIndex].value);">
+        <option value="black">black
+        <option value="darkblue">darkblue
+      </select>
+      <p><b><tt>bgColor</tt></p>
+      <select onChange="setBodyAttr('bgColor',
+          this.options[this.selectedIndex].value);">
+        <option value="white">white
+        <option value="lightgrey">gray
+      </select>
+      <p><b><tt>link</tt></p>
+      <select onChange="setBodyAttr('link',
+          this.options[this.selectedIndex].value);">
+        <option value="blue">blue
+        <option value="green">green
+      </select>  <small>
+          <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+      (exemple de lien)</a></small><br>
+    </form>
+    <form>
+      <input type="button" value="version" onclick="ver()" />
+    </form>
+  </div>
+</body>
+</html>
+ +

Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.

+ +

Figure 0.1 Exemple de page de test du DOM

+ +

+ +

Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (bgColor), la couleur des hyperliens (aLink) et la couleur du texte (text). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.

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 deleted file mode 100644 index 72893cd5ab..0000000000 --- a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Localisation des éléments DOM avec les sélecteurs -slug: Web/API/Document_object_model/Locating_DOM_elements_using_selectors -tags: - - API - - DOM - - Débutant - - Elements - - Sélecteurs -translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors -original_slug: >- - Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs ---- -
{{ 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.md b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md new file mode 100644 index 0000000000..72893cd5ab --- /dev/null +++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md @@ -0,0 +1,58 @@ +--- +title: Localisation des éléments DOM avec les sélecteurs +slug: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +tags: + - API + - DOM + - Débutant + - Elements + - Sélecteurs +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +original_slug: >- + Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs +--- +
{{ 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/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 deleted file mode 100644 index cc245fd99b..0000000000 --- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html +++ /dev/null @@ -1,361 +0,0 @@ ---- -title: Explorer un tableau HTML avec des interfaces DOM et JavaScript -slug: >- - Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces -tags: - - DOM - - Guide - - HTML - - JavaScript -translation_of: >- - Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces -original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript ---- -

 

- -

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.

- -
-

Note :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 :

- -

- -

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

- -

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 :

- -

- -
-

Note :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);
-
- -

- -

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 :

- -

- -

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

- -

- -

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 :

- - - -

Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.

- -
-

Note : 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>.

- -
-

Note : 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/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md new file mode 100644 index 0000000000..cc245fd99b --- /dev/null +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md @@ -0,0 +1,361 @@ +--- +title: Explorer un tableau HTML avec des interfaces DOM et JavaScript +slug: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +tags: + - DOM + - Guide + - HTML + - JavaScript +translation_of: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript +--- +

 

+ +

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.

+ +
+

Note :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 :

+ +

+ +

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

+ +

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 :

+ +

+ +
+

Note :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);
+
+ +

+ +

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 :

+ +

+ +

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

+ +

+ +

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 :

+ + + +

Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.

+ +
+

Note : 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>.

+ +
+

Note : 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 deleted file mode 100644 index e4298a2055..0000000000 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Exemple -slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example -tags: - - API - - DOM - - Débutant - - Exemples -translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example -original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple ---- - -
 <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/example/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md new file mode 100644 index 0000000000..e4298a2055 --- /dev/null +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md @@ -0,0 +1,44 @@ +--- +title: Exemple +slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example +tags: + - API + - DOM + - Débutant + - Exemples +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example +original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple +--- + +
 <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 deleted file mode 100644 index c59fe45427..0000000000 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Utilisation du DOM Level 1 Core du W3C -slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core -tags: - - Arbre - - DOM - - Noeud - - Texte -translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core -original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C ---- -

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

- -

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.

\ No newline at end of file diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md new file mode 100644 index 0000000000..c59fe45427 --- /dev/null +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md @@ -0,0 +1,84 @@ +--- +title: Utilisation du DOM Level 1 Core du W3C +slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +tags: + - Arbre + - DOM + - Noeud + - Texte +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C +--- +

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

+ +

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.

\ No newline at end of file diff --git a/files/fr/web/api/document_object_model/whitespace/index.html b/files/fr/web/api/document_object_model/whitespace/index.html deleted file mode 100644 index 9529722049..0000000000 --- a/files/fr/web/api/document_object_model/whitespace/index.html +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: Gestion des espaces dans le DOM -slug: Web/API/Document_Object_Model/Whitespace -tags: - - DOM -translation_of: Web/API/Document_Object_Model/Whitespace ---- -

Le problème

- -

La présence d'espaces et de blancs dans le DOM peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction white-space: pre en CSS fonctionne.) Cela signifie que :

- - - -

En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) :

- -
<!-- My document -->
-<html>
-<head>
-  <title>My Document</title>
-</head>
-<body>
-  <h1>Header</h1>
-  <p>
-    Paragraph
-  </p>
-</body>
-</html>
-
- -

Arbre du DOM équivalent à l'exemple HTML ci-avant

- -

Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs.

- -

Rendre les choses plus faciles

- -

On peut formater leur code comme indiqué ci-dessous pour contourner le problème:

- -
<!-- jolie impression conventionnelle
-     avec des espaces entre les balises:
- -->
-<div>
- <ul>
-  <li>Position 1</li>
-  <li>Position 2</li>
-  <li>Position 3</li>
- </ul>
-</div>
-
-<!-- jolie impression adaptée au problème :
- -->
-<div
- ><ul
-  ><li>Position 1</li
-  ><li>Position 2</li
-  ><li>Position 3</li
- ></ul
-></div>
- -

Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :

- -
/**
- * Tout au long, les espaces sont définis comme l'un des caractères
- *  "\t" TAB \u0009
- *  "\n" LF  \u000A
- *  "\r" CR  \u000D
- *  " "  SPC \u0020
- *
- * Ceci n'utilise pas le "\s" de Javascript parce que cela inclut le non-brisement
- * espaces (et aussi d'autres caractères).
- */
-
-
-/**
- * Détermine si le contenu du texte d'un nœud est entièrement blanc.
- *
- * @param nod  Un nœud implémentant l'interface |CharacterData| (c'est-à-dire,
- *             un nœud |Text|, |Comment| ou |CDATASection|
- * @return     True (vrai) Si tout le contenu du texte du |nod| est un espace,
- *             sinon false (faux).
- */
-function is_all_ws( nod )
-{
-  // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
-  return !(/[^\t\n\r ]/.test(nod.textContent));
-}
-
-
-/**
- * Détermine si le nœud doit être ignoré par les fonctions d'itération.
- *
- * @param nod  Un objet implémentant l'interface DOM1 |Node|.
- * @return     true (vrai) si le nœud est :
- *                1) un nœud |Text| qui est tout en espace
- *                2) un nœud |Comment|
- *             et autrement false (faux).
- */
-
-function is_ignorable( nod )
-{
-  return ( nod.nodeType == 8) || // un nœud commentaire
-         ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nœud texte, tout espace
-}
-
-/**
- * Version de |previousSibling| qui ignore les nœuds qui sont entièrement
- * espace ou commentaire.  (Normalement |previousSibling| est une propriété
- * de tous les nœuds DOM qui donnent le nœud frère, le nœud qui est
- * un enfant du même parent, qui se produit immédiatement avant le
- * nœud référence.)
- *
- * @param sib  Le nœud référence .
- * @return     soit :
- *               1) le frère précédent le plus proche de |sib| qui ne peut
- *                  être ignoré du fait de la fonction |is_ignorable|, ou
- *               2) null si aucun nœud n'existe.
- */
-function node_before( sib )
-{
-  while ((sib = sib.previousSibling)) {
-    if (!is_ignorable(sib)) return sib;
-  }
-  return null;
-}
-
-/**
- * Version de |nextSibling| qui ignore les nœuds qui sont entièrement
- * espace ou commentaire.
- *
- * @param sib  Le nœud référence .
- * @return     soit :
- *               1) le frère précédent le plus proche de |sib| qui ne peut
- *                  être ignoré du fait de la fonction |is_ignorable|, ou
- *               2) null si aucun nœud n'existe.
- */
-function node_after( sib )
-{
-  while ((sib = sib.nextSibling)) {
-    if (!is_ignorable(sib)) return sib;
-  }
-  return null;
-}
-
-/**
- * Version de |lastChild| qui ignore les nœuds qui sont entièrement
- * espace ou commentaire. (Normalement |lastChild| est une propriété
- * de tous les nœuds DOM qui donnent le dernier des nœuds contenus
- * directement dans le nœud de référence.)
- *
- * @param sib  Le nœud référence.
- * @return     soit :
- *               1) Le dernier enfant de |sib| qui ne peut
- *                  être ignoré du fait de la fonction |is_ignorable|, ou
- *               2) null si aucun nœud n'existe.
- */
-function last_child( par )
-{
-  var res=par.lastChild;
-  while (res) {
-    if (!is_ignorable(res)) return res;
-    res = res.previousSibling;
-  }
-  return null;
-}
-
-/**
- * Version de |firstChild| qui ignore les nœuds qui sont entièrement
- * espace ou commentaire..
- *
- * @param sib  le nœud référence.
- * @return     soit:
- *               1) le nœud premier enfant de |sib| qui ne peut
- *                  être ignoré du fait de la fonction |is_ignorable|, ou
- *               2) null si aucun nœud n'existe.
- */
-function first_child( par )
-{
-  var res=par.firstChild;
-  while (res) {
-    if (!is_ignorable(res)) return res;
-    res = res.nextSibling;
-  }
-  return null;
-}
-
-/**
- * Version de |data| cela n'inclut pas les espaces au début
- * et termine et normalise tous les espaces dans un seul espace. (Normalement
- * |data | est une propriété des nœuds de texte qui donne le texte du nœud.)
- *
- * @param txt  Le nœud de texte dont les données doivent être renvoyées
- * @return     Une chaîne donnant le contenu du nœud de texte avec
- *             espace blanc s'est effondré.
- */
-function data_of( txt )
-{
-  var data = txt.textContent;
-  // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
-  data = data.replace(/[\t\n\r ]+/g, " ");
-  if (data.charAt(0) == " ")
-    data = data.substring(1, data.length);
-  if (data.charAt(data.length - 1) == " ")
-    data = data.substring(0, data.length - 1);
-  return data;
-}
- -

Exemple

- -

Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est "Ceci est le troisième paragraphe", et change ensuite l'attribut class et le contenu de ce paragraphe.

- -
var cur = first_child(document.getElementById("test"));
-while (cur)
-{
-  if (data_of(cur.firstChild) == "This is the third paragraph.")
-  {
-      cur.className = "magic";
-      cur.firstChild.textContent = "This is the magic paragraph.";
-  }
-  cur = node_after(cur);
-}
\ No newline at end of file diff --git a/files/fr/web/api/document_object_model/whitespace/index.md b/files/fr/web/api/document_object_model/whitespace/index.md new file mode 100644 index 0000000000..9529722049 --- /dev/null +++ b/files/fr/web/api/document_object_model/whitespace/index.md @@ -0,0 +1,222 @@ +--- +title: Gestion des espaces dans le DOM +slug: Web/API/Document_Object_Model/Whitespace +tags: + - DOM +translation_of: Web/API/Document_Object_Model/Whitespace +--- +

Le problème

+ +

La présence d'espaces et de blancs dans le DOM peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction white-space: pre en CSS fonctionne.) Cela signifie que :

+ + + +

En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) :

+ +
<!-- My document -->
+<html>
+<head>
+  <title>My Document</title>
+</head>
+<body>
+  <h1>Header</h1>
+  <p>
+    Paragraph
+  </p>
+</body>
+</html>
+
+ +

Arbre du DOM équivalent à l'exemple HTML ci-avant

+ +

Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs.

+ +

Rendre les choses plus faciles

+ +

On peut formater leur code comme indiqué ci-dessous pour contourner le problème:

+ +
<!-- jolie impression conventionnelle
+     avec des espaces entre les balises:
+ -->
+<div>
+ <ul>
+  <li>Position 1</li>
+  <li>Position 2</li>
+  <li>Position 3</li>
+ </ul>
+</div>
+
+<!-- jolie impression adaptée au problème :
+ -->
+<div
+ ><ul
+  ><li>Position 1</li
+  ><li>Position 2</li
+  ><li>Position 3</li
+ ></ul
+></div>
+ +

Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :

+ +
/**
+ * Tout au long, les espaces sont définis comme l'un des caractères
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Ceci n'utilise pas le "\s" de Javascript parce que cela inclut le non-brisement
+ * espaces (et aussi d'autres caractères).
+ */
+
+
+/**
+ * Détermine si le contenu du texte d'un nœud est entièrement blanc.
+ *
+ * @param nod  Un nœud implémentant l'interface |CharacterData| (c'est-à-dire,
+ *             un nœud |Text|, |Comment| ou |CDATASection|
+ * @return     True (vrai) Si tout le contenu du texte du |nod| est un espace,
+ *             sinon false (faux).
+ */
+function is_all_ws( nod )
+{
+  // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
+  return !(/[^\t\n\r ]/.test(nod.textContent));
+}
+
+
+/**
+ * Détermine si le nœud doit être ignoré par les fonctions d'itération.
+ *
+ * @param nod  Un objet implémentant l'interface DOM1 |Node|.
+ * @return     true (vrai) si le nœud est :
+ *                1) un nœud |Text| qui est tout en espace
+ *                2) un nœud |Comment|
+ *             et autrement false (faux).
+ */
+
+function is_ignorable( nod )
+{
+  return ( nod.nodeType == 8) || // un nœud commentaire
+         ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nœud texte, tout espace
+}
+
+/**
+ * Version de |previousSibling| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire.  (Normalement |previousSibling| est une propriété
+ * de tous les nœuds DOM qui donnent le nœud frère, le nœud qui est
+ * un enfant du même parent, qui se produit immédiatement avant le
+ * nœud référence.)
+ *
+ * @param sib  Le nœud référence .
+ * @return     soit :
+ *               1) le frère précédent le plus proche de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Version de |nextSibling| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire.
+ *
+ * @param sib  Le nœud référence .
+ * @return     soit :
+ *               1) le frère précédent le plus proche de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Version de |lastChild| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire. (Normalement |lastChild| est une propriété
+ * de tous les nœuds DOM qui donnent le dernier des nœuds contenus
+ * directement dans le nœud de référence.)
+ *
+ * @param sib  Le nœud référence.
+ * @return     soit :
+ *               1) Le dernier enfant de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Version de |firstChild| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire..
+ *
+ * @param sib  le nœud référence.
+ * @return     soit:
+ *               1) le nœud premier enfant de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * Version de |data| cela n'inclut pas les espaces au début
+ * et termine et normalise tous les espaces dans un seul espace. (Normalement
+ * |data | est une propriété des nœuds de texte qui donne le texte du nœud.)
+ *
+ * @param txt  Le nœud de texte dont les données doivent être renvoyées
+ * @return     Une chaîne donnant le contenu du nœud de texte avec
+ *             espace blanc s'est effondré.
+ */
+function data_of( txt )
+{
+  var data = txt.textContent;
+  // Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+ +

Exemple

+ +

Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est "Ceci est le troisième paragraphe", et change ensuite l'attribut class et le contenu de ce paragraphe.

+ +
var cur = first_child(document.getElementById("test"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "This is the third paragraph.")
+  {
+      cur.className = "magic";
+      cur.firstChild.textContent = "This is the magic paragraph.";
+  }
+  cur = node_after(cur);
+}
\ No newline at end of file diff --git a/files/fr/web/api/documentfragment/documentfragment/index.html b/files/fr/web/api/documentfragment/documentfragment/index.html deleted file mode 100644 index f9c636ecef..0000000000 --- a/files/fr/web/api/documentfragment/documentfragment/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: DocumentFragment() -slug: Web/API/DocumentFragment/DocumentFragment -tags: - - API - - Constructeur - - DOM - - Document - - Elements - - Fragments -translation_of: Web/API/DocumentFragment/DocumentFragment ---- -

{{ApiRef("DOM")}}{{seeCompatTable}}

- -

Le constructeur DocumentFragment() renvoie un nouvel objet  {{domxref("DocumentFragment")}} créé vide.

- -

Syntaxe

- -
fragment = new DocumentFragment()
- -

Exemple

- -
fragment = new DocumentFragment();
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-documentfragment', 'DocumentFragment.DocumentFragment()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DocumentFragment.DocumentFragment")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/documentfragment/documentfragment/index.md b/files/fr/web/api/documentfragment/documentfragment/index.md new file mode 100644 index 0000000000..f9c636ecef --- /dev/null +++ b/files/fr/web/api/documentfragment/documentfragment/index.md @@ -0,0 +1,50 @@ +--- +title: DocumentFragment() +slug: Web/API/DocumentFragment/DocumentFragment +tags: + - API + - Constructeur + - DOM + - Document + - Elements + - Fragments +translation_of: Web/API/DocumentFragment/DocumentFragment +--- +

{{ApiRef("DOM")}}{{seeCompatTable}}

+ +

Le constructeur DocumentFragment() renvoie un nouvel objet  {{domxref("DocumentFragment")}} créé vide.

+ +

Syntaxe

+ +
fragment = new DocumentFragment()
+ +

Exemple

+ +
fragment = new DocumentFragment();
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-documentfragment', 'DocumentFragment.DocumentFragment()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DocumentFragment.DocumentFragment")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/documentfragment/index.html b/files/fr/web/api/documentfragment/index.html deleted file mode 100644 index 23025411fa..0000000000 --- a/files/fr/web/api/documentfragment/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: DocumentFragment -slug: Web/API/DocumentFragment -tags: - - API - - DOM - - Document - - Fragments - - Interface - - Noeuds -translation_of: Web/API/DocumentFragment ---- -

{{ ApiRef("DOM") }}

- -

L’interface DocumentFragment représente un objet document minimal qui n’a pas de parent. Il est utilisé comme une version légère de {{domxref("Document")}} pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n’affectent pas le document, ne causent pas de {{Glossary("Reflow")}} , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits.

- -

Un usage courant de DocumentFragment est de créer un fragment, assembler un sous-arbre DOM au sein de celui-ci, puis ajouter ou insérer le fragment dans le DOM en utilisant les méthodes de l’interface {{domxref("Node")}} (telles que {{domxref("Node.appendChild", "appendChild()")}} ou {{domxref("Node.insertBefore", "insertBefore()")}}). En faisant ainsi, on place les nœuds du fragment dans le DOM, en laissant derrière un DocumentFragment vide. Comme tous les nœuds sont insérés dans le document en une seule fois, un seul reflow et un seul rendu sont déclenchés, au lieu de potentiellement un pour chaque nœud inséré s’ils avaient été insérés séparément.

- -

Cette interface est également beaucoup utilisée avec les Web components : les éléments {{HTMLElement("template")}} contiennent un DocumentFragment dans leur propriété {{domxref("HTMLTemplateElement.content")}}.

- -

Un DocumentFragment vide peut être créé en utilisant la méthode {{domxref("document.createDocumentFragment()")}} ou le constructeur.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Cette interface n’a pas de propriétés spécifiques, mais hérite de celles de son parent, {{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}.

- -
-
{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
-
Retourne une {{domxref("HTMLCollection")}} dynamique contenant tous les objets de type {{domxref("Element")}} enfants de l’objet DocumentFragment.
-
{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
-
Retourne un {{domxref("Element")}} qui est le premier enfant de l’objet DocumentFragment, ou null s’il n’y en a aucun.
-
{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
-
Retourne un {{domxref("Element")}} qui est le dernier enfant de l’objet DocumentFragment, ou null s’il n’y en a aucun.
-
{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
-
Retourne un unsigned long indiquant le nomble d’enfants que le DocumentFragment possède.
-
- -

Constructeur

- -
-
{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}
-
Retourne un objet DocumentFragment vide.
-
- -

Méthodes

- -

Cette interface hérite des méthodes de son parent, {{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}.

- -
-
{{domxref("DocumentFragment.querySelector()")}}
-
Retourne le premier nœud {{domxref("Element")}} du DocumentFragment, dans l’ordre du document, correspondant aux sélécteurs spécifiés.
-
{{domxref("DocumentFragment.querySelectorAll()")}}
-
Retourne une {{domxref("NodeList")}} de tous les nœuds {{domxref("Element")}} du DocumentFragment qui correspondent aux sélecteurs spécifiés.
-
{{domxref("DocumentFragment.getElementById()")}}
-
Retourne le premier nœud {{domxref("Element")}} du DocumentFragment, dans l’ordre du document, qui correspond à l’ID spécifié.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}{{Spec2('DOM WHATWG')}}Ajouté le constructeur et l’implémentation de {{domxref("ParentNode")}}.
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 1')}}Ajouté les méthodes querySelector() et querySelectorAll().
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM3 Core')}}Pas de changement depuis {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM2 Core')}}Pas de changement depuis {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.DocumentFragment")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/documentfragment/index.md b/files/fr/web/api/documentfragment/index.md new file mode 100644 index 0000000000..23025411fa --- /dev/null +++ b/files/fr/web/api/documentfragment/index.md @@ -0,0 +1,105 @@ +--- +title: DocumentFragment +slug: Web/API/DocumentFragment +tags: + - API + - DOM + - Document + - Fragments + - Interface + - Noeuds +translation_of: Web/API/DocumentFragment +--- +

{{ ApiRef("DOM") }}

+ +

L’interface DocumentFragment représente un objet document minimal qui n’a pas de parent. Il est utilisé comme une version légère de {{domxref("Document")}} pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n’affectent pas le document, ne causent pas de {{Glossary("Reflow")}} , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits.

+ +

Un usage courant de DocumentFragment est de créer un fragment, assembler un sous-arbre DOM au sein de celui-ci, puis ajouter ou insérer le fragment dans le DOM en utilisant les méthodes de l’interface {{domxref("Node")}} (telles que {{domxref("Node.appendChild", "appendChild()")}} ou {{domxref("Node.insertBefore", "insertBefore()")}}). En faisant ainsi, on place les nœuds du fragment dans le DOM, en laissant derrière un DocumentFragment vide. Comme tous les nœuds sont insérés dans le document en une seule fois, un seul reflow et un seul rendu sont déclenchés, au lieu de potentiellement un pour chaque nœud inséré s’ils avaient été insérés séparément.

+ +

Cette interface est également beaucoup utilisée avec les Web components : les éléments {{HTMLElement("template")}} contiennent un DocumentFragment dans leur propriété {{domxref("HTMLTemplateElement.content")}}.

+ +

Un DocumentFragment vide peut être créé en utilisant la méthode {{domxref("document.createDocumentFragment()")}} ou le constructeur.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Cette interface n’a pas de propriétés spécifiques, mais hérite de celles de son parent, {{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}.

+ +
+
{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
+
Retourne une {{domxref("HTMLCollection")}} dynamique contenant tous les objets de type {{domxref("Element")}} enfants de l’objet DocumentFragment.
+
{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Retourne un {{domxref("Element")}} qui est le premier enfant de l’objet DocumentFragment, ou null s’il n’y en a aucun.
+
{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Retourne un {{domxref("Element")}} qui est le dernier enfant de l’objet DocumentFragment, ou null s’il n’y en a aucun.
+
{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
+
Retourne un unsigned long indiquant le nomble d’enfants que le DocumentFragment possède.
+
+ +

Constructeur

+ +
+
{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}
+
Retourne un objet DocumentFragment vide.
+
+ +

Méthodes

+ +

Cette interface hérite des méthodes de son parent, {{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}.

+ +
+
{{domxref("DocumentFragment.querySelector()")}}
+
Retourne le premier nœud {{domxref("Element")}} du DocumentFragment, dans l’ordre du document, correspondant aux sélécteurs spécifiés.
+
{{domxref("DocumentFragment.querySelectorAll()")}}
+
Retourne une {{domxref("NodeList")}} de tous les nœuds {{domxref("Element")}} du DocumentFragment qui correspondent aux sélecteurs spécifiés.
+
{{domxref("DocumentFragment.getElementById()")}}
+
Retourne le premier nœud {{domxref("Element")}} du DocumentFragment, dans l’ordre du document, qui correspond à l’ID spécifié.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}{{Spec2('DOM WHATWG')}}Ajouté le constructeur et l’implémentation de {{domxref("ParentNode")}}.
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 1')}}Ajouté les méthodes querySelector() et querySelectorAll().
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM3 Core')}}Pas de changement depuis {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM2 Core')}}Pas de changement depuis {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DocumentFragment")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/documentfragment/queryselector/index.html b/files/fr/web/api/documentfragment/queryselector/index.html deleted file mode 100644 index 86aac6075b..0000000000 --- a/files/fr/web/api/documentfragment/queryselector/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: DocumentFragment.querySelector() -slug: Web/API/DocumentFragment/querySelector -tags: - - API - - DOM - - Document - - Méthodes - - fragment -translation_of: Web/API/DocumentFragment/querySelector ---- -
{{ApiRef("DOM")}}
- -

La méthode DocumentFragment.querySelector() renvoie le premier élément ou null si aucune correspondance n'est trouvée, dans le {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), avec le groupe spécifié de sélecteurs.

- -

Si le sélecteur correspond à un ID (identifiant) et que cet ID est utilisé plusieurs fois par erreur dans le document, il renvoie le premier élément correspondant.

- -

Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur SYNTAX_ERR est lancée.

- -

Syntaxe

- -
element = documentfragment.querySelector(selectors);
- -

Paramètres

- -
-
selectors
-
est une {{domxref("DOMString")}} (chaîne de caractères) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.
-
- -

Exemples

- -

Exemple de base

- -

Dans cet exemple de base, le premier élément dans le {{domxref("DocumentFragment")}} avec la classe "myclass" est renvoyé :

- -
var el = documentfragment.querySelector(".myclass");
-
- -

Syntaxe CSS et argument de la méthode

- -

L'argument chaîne transmis à querySelector doit suivre la syntaxe CSS. Pour faire correspondre un identifiant ou des sélecteurs qui ne suivent pas la syntaxe CSS (utilisant un point-virgule ou un espace inappropriés par exemple), il est obligatoire d'échapper les mauvais caractères avec une double barre oblique inverse :

- -
<div id="foo\bar"></div>
-<div id="foo:bar"></div>
-
-<script>
-document.querySelector('#foo\bar')    // Ne correspond à rien
-document.querySelector('#foo\\\\bar') // Correspond au premier div
-document.querySelector('#foo:bar')     //  Ne correspond à rien
-document.querySelector('#foo\\:bar')   // Correspond au second div
-</script>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}}{{Spec2('Selectors API Level 2')}}Pas de changement de {{SpecName('Selectors API Level 1')}}
{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}}{{Spec2('Selectors API Level 1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DocumentFragment.querySelector")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/documentfragment/queryselector/index.md b/files/fr/web/api/documentfragment/queryselector/index.md new file mode 100644 index 0000000000..86aac6075b --- /dev/null +++ b/files/fr/web/api/documentfragment/queryselector/index.md @@ -0,0 +1,85 @@ +--- +title: DocumentFragment.querySelector() +slug: Web/API/DocumentFragment/querySelector +tags: + - API + - DOM + - Document + - Méthodes + - fragment +translation_of: Web/API/DocumentFragment/querySelector +--- +
{{ApiRef("DOM")}}
+ +

La méthode DocumentFragment.querySelector() renvoie le premier élément ou null si aucune correspondance n'est trouvée, dans le {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), avec le groupe spécifié de sélecteurs.

+ +

Si le sélecteur correspond à un ID (identifiant) et que cet ID est utilisé plusieurs fois par erreur dans le document, il renvoie le premier élément correspondant.

+ +

Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur SYNTAX_ERR est lancée.

+ +

Syntaxe

+ +
element = documentfragment.querySelector(selectors);
+ +

Paramètres

+ +
+
selectors
+
est une {{domxref("DOMString")}} (chaîne de caractères) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.
+
+ +

Exemples

+ +

Exemple de base

+ +

Dans cet exemple de base, le premier élément dans le {{domxref("DocumentFragment")}} avec la classe "myclass" est renvoyé :

+ +
var el = documentfragment.querySelector(".myclass");
+
+ +

Syntaxe CSS et argument de la méthode

+ +

L'argument chaîne transmis à querySelector doit suivre la syntaxe CSS. Pour faire correspondre un identifiant ou des sélecteurs qui ne suivent pas la syntaxe CSS (utilisant un point-virgule ou un espace inappropriés par exemple), il est obligatoire d'échapper les mauvais caractères avec une double barre oblique inverse :

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+document.querySelector('#foo\bar')    // Ne correspond à rien
+document.querySelector('#foo\\\\bar') // Correspond au premier div
+document.querySelector('#foo:bar')     //  Ne correspond à rien
+document.querySelector('#foo\\:bar')   // Correspond au second div
+</script>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}}{{Spec2('Selectors API Level 2')}}Pas de changement de {{SpecName('Selectors API Level 1')}}
{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}}{{Spec2('Selectors API Level 1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DocumentFragment.querySelector")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/documentfragment/queryselectorall/index.html b/files/fr/web/api/documentfragment/queryselectorall/index.html deleted file mode 100644 index c5468e6e6a..0000000000 --- a/files/fr/web/api/documentfragment/queryselectorall/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: DocumentFragment.querySelectorAll() -slug: Web/API/DocumentFragment/querySelectorAll -tags: - - API - - DOM - - Document - - Méthodes - - fragment -translation_of: Web/API/DocumentFragment/querySelectorAll ---- -
{{ApiRef("DOM")}}
- -

La méthode DocumentFragment.querySelectorAll() renvoie une {{domxref("NodeList")}} (liste de noeuds) des éléments du {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), qui correspondent avec le groupe spécifié de sélecteurs.

- -

Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur SYNTAX_ERR est lancée.

- -
-

Note : La définition de cet API a été déplacé vers l'interface {{domxref("ParentNode")}}.

-
- -

Syntaxe

- -
elementList = documentframgment.querySelectorAll(selectors);
- -

Paramètres

- -
-
selectors
-
est une {{domxref("DOMString")}} (chaîne de caractères) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.
-
- -

Exemples

- -

Cet exemple renvoie une liste de tous les éléments div du DocumentFragment avec une classe soit "note" soit "alert" :

- -
var matches = documentfrag.querySelectorAll("div.note, div.alert");
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelectorAll')}}{{Spec2('Selectors API Level 1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DocumentFragment.querySelectorAll")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/documentfragment/queryselectorall/index.md b/files/fr/web/api/documentfragment/queryselectorall/index.md new file mode 100644 index 0000000000..c5468e6e6a --- /dev/null +++ b/files/fr/web/api/documentfragment/queryselectorall/index.md @@ -0,0 +1,65 @@ +--- +title: DocumentFragment.querySelectorAll() +slug: Web/API/DocumentFragment/querySelectorAll +tags: + - API + - DOM + - Document + - Méthodes + - fragment +translation_of: Web/API/DocumentFragment/querySelectorAll +--- +
{{ApiRef("DOM")}}
+ +

La méthode DocumentFragment.querySelectorAll() renvoie une {{domxref("NodeList")}} (liste de noeuds) des éléments du {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), qui correspondent avec le groupe spécifié de sélecteurs.

+ +

Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur SYNTAX_ERR est lancée.

+ +
+

Note : La définition de cet API a été déplacé vers l'interface {{domxref("ParentNode")}}.

+
+ +

Syntaxe

+ +
elementList = documentframgment.querySelectorAll(selectors);
+ +

Paramètres

+ +
+
selectors
+
est une {{domxref("DOMString")}} (chaîne de caractères) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.
+
+ +

Exemples

+ +

Cet exemple renvoie une liste de tous les éléments div du DocumentFragment avec une classe soit "note" soit "alert" :

+ +
var matches = documentfrag.querySelectorAll("div.note, div.alert");
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelectorAll')}}{{Spec2('Selectors API Level 1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DocumentFragment.querySelectorAll")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/documenttype/index.html b/files/fr/web/api/documenttype/index.html deleted file mode 100644 index c3f4a28204..0000000000 --- a/files/fr/web/api/documenttype/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: DocumentType -slug: Web/API/DocumentType -tags: - - API - - DOM - - DocumentType - - Interface -translation_of: Web/API/DocumentType ---- -
{{APIRef("DOM")}}
- -

L'interface DocumentType représente un nœud ({{domxref("Node")}}) contenant un doctype.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Cette interface hérite de propriétés de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.

- -
-
...
-
{{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}}
-
Une {{domxref ("NamedNodeMap")}} des entités déclarées dans la DTD. Chaque noeud de cette carte implémente l'interface {{domxref ("Entity")}}.
-
{{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}}
-
Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "<! ELEMENT foo (bar)">
-
{{domxref("DocumentType.name")}} {{readonlyInline}}
-
une {{domxref("DOMString")}}, par exemple, "html" pour <!DOCTYPE HTML>.
-
{{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}}
-
une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}.
-
{{domxref("DocumentType.publicId")}} {{readonlyInline}}
-
une {{domxref("DOMString")}}, par exemple "-//W3C//DTD HTML 4.01//EN", chaîne vide pour HTML5.
-
{{domxref("DocumentType.systemId")}} {{readonlyInline}}
-
une {{domxref("DOMString")}}, par exemple, "http://www.w3.org/TR/html4/strict.dtd", chaîne vide pour HTML5.
-
- -

Méthodes

- -

Cette interface hérite de méthodes de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.

- -
-
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
-
Cette méthode retire l'objet de la liste des enfants de son élément parent.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#documenttype', 'DocumentType')}}{{Spec2('DOM WHATWG')}}Implémente désormais l'interface {{domxref("ChildNode")}}.
- Retrait des propriétés internalSubset, entities et notation.
{{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}}{{Spec2('DOM3 Core')}}Aucune modification depuis {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}}{{Spec2('DOM2 Core')}}Ajout des propriétés publicID, systemID  et internalSubset.
{{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DocumentType")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/documenttype/index.md b/files/fr/web/api/documenttype/index.md new file mode 100644 index 0000000000..c3f4a28204 --- /dev/null +++ b/files/fr/web/api/documenttype/index.md @@ -0,0 +1,89 @@ +--- +title: DocumentType +slug: Web/API/DocumentType +tags: + - API + - DOM + - DocumentType + - Interface +translation_of: Web/API/DocumentType +--- +
{{APIRef("DOM")}}
+ +

L'interface DocumentType représente un nœud ({{domxref("Node")}}) contenant un doctype.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Cette interface hérite de propriétés de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.

+ +
+
...
+
{{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}}
+
Une {{domxref ("NamedNodeMap")}} des entités déclarées dans la DTD. Chaque noeud de cette carte implémente l'interface {{domxref ("Entity")}}.
+
{{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}}
+
Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "<! ELEMENT foo (bar)">
+
{{domxref("DocumentType.name")}} {{readonlyInline}}
+
une {{domxref("DOMString")}}, par exemple, "html" pour <!DOCTYPE HTML>.
+
{{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}}
+
une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}.
+
{{domxref("DocumentType.publicId")}} {{readonlyInline}}
+
une {{domxref("DOMString")}}, par exemple "-//W3C//DTD HTML 4.01//EN", chaîne vide pour HTML5.
+
{{domxref("DocumentType.systemId")}} {{readonlyInline}}
+
une {{domxref("DOMString")}}, par exemple, "http://www.w3.org/TR/html4/strict.dtd", chaîne vide pour HTML5.
+
+ +

Méthodes

+ +

Cette interface hérite de méthodes de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.

+ +
+
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
+
Cette méthode retire l'objet de la liste des enfants de son élément parent.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#documenttype', 'DocumentType')}}{{Spec2('DOM WHATWG')}}Implémente désormais l'interface {{domxref("ChildNode")}}.
+ Retrait des propriétés internalSubset, entities et notation.
{{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}}{{Spec2('DOM3 Core')}}Aucune modification depuis {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}}{{Spec2('DOM2 Core')}}Ajout des propriétés publicID, systemID  et internalSubset.
{{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DocumentType")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domerror/index.html b/files/fr/web/api/domerror/index.html deleted file mode 100644 index 8e481bab48..0000000000 --- a/files/fr/web/api/domerror/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: DOMError -slug: Web/API/DOMError -tags: - - API - - DOM - - Erreurs - - Interface - - Reference -translation_of: Web/API/DOMError ---- -

{{ APIRef("DOM") }}{{deprecated_header}}

- -

L'interface DOMError  décrit un objet d'erreur contenant le nom de l'erreur.

- -

Propriétés

- -
-
{{domxref("DOMError.name")}} {{readOnlyInline}}
-
Retourne une {{ domxref("DOMString") }} (chaîne de caractères) représentant l'un des noms de type d'erreur (voir ci-dessous).
-
{{domxref("DOMError.message")}} {{readOnlyInline}}
-
Retourne une {{ domxref("DOMString") }} (chaîne de caractères) représentant un message ou une description associée avec le nom de type d'erreur.
-
- -

Type d'erreurs

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeDescription
IndexSizeErrorL'index n'est pas dans l'étendue autorisée (par exemple, déclenché dans un objet {{ domxref("range") }}).
HierarchyRequestErrorLa hiérarchie de l'arbre de noeud est incorrecte.
WrongDocumentErrorL'objet est dans le mauvais {{ domxref("document") }}.
InvalidCharacterErrorLa chaîne de caractères contient des caractères non valides.
NoModificationAllowedErrorL'objet ne peut pas être modifié.
NotFoundErrorL'objet ne peut pas être trouvé.
NotSupportedErrorCette opération n'est pas supportée.
InvalidStateErrorL'objet est dans un état non valide.
SyntaxErrorLa chaîne de caractère ne correspond pas au motif attendu.
InvalidModificationErrorL'objet ne peut pas être modifié de cette façon.
NamespaceErrorCette opération n'est pas autorisée par les Namespaces en XML.
InvalidAccessErrorL'objet ne supporte pas cette opération ou cet argument.
TypeMismatchErrorLe type de l'objet ne correspond pas au type attendu.
SecurityErrorL'opération n'est pas sécurisée.
NetworkErrorUne erreur réseau est survenue.
AbortErrorL'opération a été annulée.
URLMismatchErrorL'URL fournie ne correspond pas à une autre URL.
QuotaExceededErrorLe quota a été dépassé.
TimeoutErrorL'opération a dépassé le temps autorisé. (Time Out)
InvalidNodeTypeErrorLe noeud est incorrect ou a un ancêtre incorrect pour cette opération.
DataCloneErrorL'objet n'a pas pu être cloné.
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM4', '#interface-domerror', 'DOMError')}}{{Spec2('DOM4')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.DOMError")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domerror/index.md b/files/fr/web/api/domerror/index.md new file mode 100644 index 0000000000..8e481bab48 --- /dev/null +++ b/files/fr/web/api/domerror/index.md @@ -0,0 +1,147 @@ +--- +title: DOMError +slug: Web/API/DOMError +tags: + - API + - DOM + - Erreurs + - Interface + - Reference +translation_of: Web/API/DOMError +--- +

{{ APIRef("DOM") }}{{deprecated_header}}

+ +

L'interface DOMError  décrit un objet d'erreur contenant le nom de l'erreur.

+ +

Propriétés

+ +
+
{{domxref("DOMError.name")}} {{readOnlyInline}}
+
Retourne une {{ domxref("DOMString") }} (chaîne de caractères) représentant l'un des noms de type d'erreur (voir ci-dessous).
+
{{domxref("DOMError.message")}} {{readOnlyInline}}
+
Retourne une {{ domxref("DOMString") }} (chaîne de caractères) représentant un message ou une description associée avec le nom de type d'erreur.
+
+ +

Type d'erreurs

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeDescription
IndexSizeErrorL'index n'est pas dans l'étendue autorisée (par exemple, déclenché dans un objet {{ domxref("range") }}).
HierarchyRequestErrorLa hiérarchie de l'arbre de noeud est incorrecte.
WrongDocumentErrorL'objet est dans le mauvais {{ domxref("document") }}.
InvalidCharacterErrorLa chaîne de caractères contient des caractères non valides.
NoModificationAllowedErrorL'objet ne peut pas être modifié.
NotFoundErrorL'objet ne peut pas être trouvé.
NotSupportedErrorCette opération n'est pas supportée.
InvalidStateErrorL'objet est dans un état non valide.
SyntaxErrorLa chaîne de caractère ne correspond pas au motif attendu.
InvalidModificationErrorL'objet ne peut pas être modifié de cette façon.
NamespaceErrorCette opération n'est pas autorisée par les Namespaces en XML.
InvalidAccessErrorL'objet ne supporte pas cette opération ou cet argument.
TypeMismatchErrorLe type de l'objet ne correspond pas au type attendu.
SecurityErrorL'opération n'est pas sécurisée.
NetworkErrorUne erreur réseau est survenue.
AbortErrorL'opération a été annulée.
URLMismatchErrorL'URL fournie ne correspond pas à une autre URL.
QuotaExceededErrorLe quota a été dépassé.
TimeoutErrorL'opération a dépassé le temps autorisé. (Time Out)
InvalidNodeTypeErrorLe noeud est incorrect ou a un ancêtre incorrect pour cette opération.
DataCloneErrorL'objet n'a pas pu être cloné.
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM4', '#interface-domerror', 'DOMError')}}{{Spec2('DOM4')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.DOMError")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domexception/index.html b/files/fr/web/api/domexception/index.html deleted file mode 100644 index a2b859da99..0000000000 --- a/files/fr/web/api/domexception/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: DOMException -slug: Web/API/DOMException -tags: - - API - - DOM - - Erreurs - - exceptions -translation_of: Web/API/DOMException ---- -

{{ APIRef("DOM") }}

- -

L'interface DOMException représente un évènement anormal (appelé exception) qui appraît suite à l'appel d'une méthode ou à l'accès à une propriété d'une API web. C'est essentiellement lié à la façon dont les conditions d'erreur sont décrites dans les API web.

- -

Chaque exception a un nom, qui est une courte chaîne identifiant l'erreur ou la condition anormale.

- -

Constructeur

- -
-
{{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}}
-
Retourne un objet DOMException avec un message et un nom spécifiés.
-
- -

Propriétés

- -
-
{{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}
-
Renvoie un court message qui contient l'un des {{anch ("Noms d'erreur", "constantes de code d'erreur")}} ou 0 si aucun ne correspond. Ce champ est utilisé pour des raisons historiques. Les nouvelles exceptions DOM ne l'utilisent plus : elles mettent cette information dans l'attribut {{domxref("DOMException.name")}}.
-
{{domxref("DOMException.message")}} {{readOnlyInline}}
-
Returne une {{domxref("DOMString")}} (chaîne de caractères) représentant un message ou une description associé avec le nom d'erreur donné.
-
{{domxref("DOMException.name")}} {{readOnlyInline}}
-
Retourne une {{domxref("DOMString")}} (chaîne de caractères) qui contient l'une des chaînes associées à un nom d'erreur.
-
- -

Noms d'erreur

- -

Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent leurs propres ensembles de noms, il ne s'agit donc pas ici nécessairement d'une liste complète.

- -
-

Note : Parce qu'historiquement les erreurs ont été identifiées par une valeur numérique qui correspondait à une variable nommée définie pour avoir cette valeur, certaines des entrées ci-dessous indiquent la valeur de code héritée et le nom de constante qui ont été utilisés dans le passé.

-
- -
-
IndexSizeError
-
L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : 1 et nom de la constante héritée : INDEX_SIZE_ERR)
-
HierarchyRequestError
-
La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : 3 et nom de la constante héritée : HIERARCHY_REQUEST_ERR)
-
WrongDocumentError
-
L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : 4 et nom de la constante héritée : WRONG_DOCUMENT_ERR)
-
InvalidCharacterError
-
La chaîne contient des caractères non valides. (Valeur de code héritée : 5 et nom de la constante héritée : INVALID_CHARACTER_ERR)
-
NoModificationAllowedError
-
L'objet ne peut être modifié. (Valeur de code héritée : 7 et nom de la constante héritée : NO_MODIFICATION_ALLOWED_ERR)
-
NotFoundError
-
L'objet ne peut être trouvé ici. (Valeur de code héritée : 8 et nom de la constante héritée : NOT_FOUND_ERR)
-
NotSupportedError
-
L'opération n'est pas supportée. (Valeur de code héritée : 9 et nom de la constante héritée : NOT_SUPPORTED_ERR)
-
InvalidStateError
-
L'objet est dans un état non valide. (Valeur de code héritée : 11 et nom de la constante héritée : INVALID_STATE_ERR)
-
SyntaxError
-
La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : 12 et nom de la constante héritée : SYNTAX_ERR)
-
InvalidModificationError
-
L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : 13 et nom de la constante héritée : INVALID_MODIFICATION_ERR)
-
NamespaceError
-
L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : 14 et nom de la constante héritée : NAMESPACE_ERR)
-
InvalidAccessError
-
L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : 15 et nom de la constante héritée : INVALID_ACCESS_ERR)
-
TypeMismatchError {{deprecated_inline}}
-
Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : 17 et nom de la constante héritée : TYPE_MISMATCH_ERR). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une DOMException avec cette valeur.
-
SecurityError {{experimental_inline}}
-
L'opération n'est pas sécurisée. (Valeur de code héritée : 18 et nom de la constante héritée : SECURITY_ERR)
-
NetworkError {{experimental_inline}}
-
Une erreur réseau s'est produite. (Valeur de code héritée : 19 et nom de la constante héritée : NETWORK_ERR)
-
AbortError {{experimental_inline}}
-
L'opération a été annulée (Valeur de code héritée : 20 et nom de la constante héritée : ABORT_ERR)
-
URLMismatchError {{experimental_inline}}
-
L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : 21 et nom de la constante héritée : URL_MISMATCH_ERR)
-
QuotaExceededError {{experimental_inline}}
-
Le quota a été dépassé. (Valeur de code héritée : 22 et nom de la constante héritée : QUOTA_EXCEEDED_ERR)
-
TimeoutError {{experimental_inline}}
-
Le temps est dépassé. (Valeur de code héritée : 23 et nom de la constante héritée : TIMEOUT_ERR)
-
InvalidNodeTypeError {{experimental_inline}}
-
Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : 24 et nom de la constante héritée : INVALID_NODE_TYPE_ERR)
-
DataCloneError {{experimental_inline}}
-
L'objet ne peut pas être cloné. ( Valeur de code héritée : 25 et nom de la constante héritée : DATA_CLONE_ERR)
-
EncodingError {{experimental_inline}}
-
L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités).
-
NotReadableError {{experimental_inline}}
-
L'opération de lecture entrée / sortie a échoué (Pas de valeur de code ni de nom de constante hérités).
-
UnknownError {{experimental_inline}}
-
L'opération a échoué pour une raison transitoire inconnue (par exemple dépassement de mémoire) (Pas de valeur de code ni de nom de constante hérités) .
-
ConstraintError {{experimental_inline}}
-
Une opération de mutation dans une transaction a échoué car une contrainte n'a pas été satisfaite (Pas de valeur de code ni de nom de constante hérités) .
-
DataError {{experimental_inline}}
-
Provided data is inadequate (No legacy code value and constant name).
-
TransactionInactiveError {{experimental_inline}}
-
Une demande a été placée contre une transaction qui n'est actuellement pas active ou qui est terminée (Pas de valeur de code ni de nom de constante hérités).
-
ReadOnlyError {{experimental_inline}}
-
L'opération de mutation a été tentée dans une transaction "en lecture seule" (Pas de valeur de code ni de nom de constante hérités).
-
VersionError {{experimental_inline}}
-
Une tentative a été faite pour ouvrir une base de données en utilisant une version inférieure à la version existante (Pas de valeur de code ni de nom de constante hérités).
-
OperationError {{experimental_inline}}
-
L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités).
-
NotAllowedError {{experimental_inline}}
-
La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission  (Pas de valeur de code ni de nom de constante hérités).
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('WebIDL', '#es-DOMException-call', 'constructor')}}{{Spec2('WebIDL')}}Ajout du constructeur pour la classe DOMException. Ajout des valeurs NotReadableError, UnknownError, ConstraintError, DataError, TransactionInactiveError, ReadOnlyError, VersionError, OperationError et NotAllowedError.
{{SpecName('DOM4', '#exception-domexception', 'DOMException')}}{{Spec2('DOM4')}}Ajout des SECURITY_ERR, NETWORK_ERR, ABORT_ERR, URL_MISMATCH_ERR, QUOTA_EXCEEDED_ERR, TIMEOUT_ERR, INVALID_NODE_TYPE_ERR, et DATA_CLONE_ERR. La propriété code a été dépréciée pour les valeurs d'exception. La valeur EncodingError ajoutée.
{{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}}{{Spec2('DOM3 Core')}}Ajout de VALIDATION_ERR et TYPE_MISMATCH_ERR.
{{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}}{{Spec2('DOM2 Core')}}Ajout de INVALID_STATE_ERR, SYNTAX_ERR, INVALID_MODIFICATION_ERR, NAMESPACE_ERR, and INVALID_ACCESS_ERR.
{{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMException")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domexception/index.md b/files/fr/web/api/domexception/index.md new file mode 100644 index 0000000000..a2b859da99 --- /dev/null +++ b/files/fr/web/api/domexception/index.md @@ -0,0 +1,153 @@ +--- +title: DOMException +slug: Web/API/DOMException +tags: + - API + - DOM + - Erreurs + - exceptions +translation_of: Web/API/DOMException +--- +

{{ APIRef("DOM") }}

+ +

L'interface DOMException représente un évènement anormal (appelé exception) qui appraît suite à l'appel d'une méthode ou à l'accès à une propriété d'une API web. C'est essentiellement lié à la façon dont les conditions d'erreur sont décrites dans les API web.

+ +

Chaque exception a un nom, qui est une courte chaîne identifiant l'erreur ou la condition anormale.

+ +

Constructeur

+ +
+
{{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}}
+
Retourne un objet DOMException avec un message et un nom spécifiés.
+
+ +

Propriétés

+ +
+
{{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}
+
Renvoie un court message qui contient l'un des {{anch ("Noms d'erreur", "constantes de code d'erreur")}} ou 0 si aucun ne correspond. Ce champ est utilisé pour des raisons historiques. Les nouvelles exceptions DOM ne l'utilisent plus : elles mettent cette information dans l'attribut {{domxref("DOMException.name")}}.
+
{{domxref("DOMException.message")}} {{readOnlyInline}}
+
Returne une {{domxref("DOMString")}} (chaîne de caractères) représentant un message ou une description associé avec le nom d'erreur donné.
+
{{domxref("DOMException.name")}} {{readOnlyInline}}
+
Retourne une {{domxref("DOMString")}} (chaîne de caractères) qui contient l'une des chaînes associées à un nom d'erreur.
+
+ +

Noms d'erreur

+ +

Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent leurs propres ensembles de noms, il ne s'agit donc pas ici nécessairement d'une liste complète.

+ +
+

Note : Parce qu'historiquement les erreurs ont été identifiées par une valeur numérique qui correspondait à une variable nommée définie pour avoir cette valeur, certaines des entrées ci-dessous indiquent la valeur de code héritée et le nom de constante qui ont été utilisés dans le passé.

+
+ +
+
IndexSizeError
+
L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : 1 et nom de la constante héritée : INDEX_SIZE_ERR)
+
HierarchyRequestError
+
La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : 3 et nom de la constante héritée : HIERARCHY_REQUEST_ERR)
+
WrongDocumentError
+
L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : 4 et nom de la constante héritée : WRONG_DOCUMENT_ERR)
+
InvalidCharacterError
+
La chaîne contient des caractères non valides. (Valeur de code héritée : 5 et nom de la constante héritée : INVALID_CHARACTER_ERR)
+
NoModificationAllowedError
+
L'objet ne peut être modifié. (Valeur de code héritée : 7 et nom de la constante héritée : NO_MODIFICATION_ALLOWED_ERR)
+
NotFoundError
+
L'objet ne peut être trouvé ici. (Valeur de code héritée : 8 et nom de la constante héritée : NOT_FOUND_ERR)
+
NotSupportedError
+
L'opération n'est pas supportée. (Valeur de code héritée : 9 et nom de la constante héritée : NOT_SUPPORTED_ERR)
+
InvalidStateError
+
L'objet est dans un état non valide. (Valeur de code héritée : 11 et nom de la constante héritée : INVALID_STATE_ERR)
+
SyntaxError
+
La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : 12 et nom de la constante héritée : SYNTAX_ERR)
+
InvalidModificationError
+
L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : 13 et nom de la constante héritée : INVALID_MODIFICATION_ERR)
+
NamespaceError
+
L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : 14 et nom de la constante héritée : NAMESPACE_ERR)
+
InvalidAccessError
+
L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : 15 et nom de la constante héritée : INVALID_ACCESS_ERR)
+
TypeMismatchError {{deprecated_inline}}
+
Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : 17 et nom de la constante héritée : TYPE_MISMATCH_ERR). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une DOMException avec cette valeur.
+
SecurityError {{experimental_inline}}
+
L'opération n'est pas sécurisée. (Valeur de code héritée : 18 et nom de la constante héritée : SECURITY_ERR)
+
NetworkError {{experimental_inline}}
+
Une erreur réseau s'est produite. (Valeur de code héritée : 19 et nom de la constante héritée : NETWORK_ERR)
+
AbortError {{experimental_inline}}
+
L'opération a été annulée (Valeur de code héritée : 20 et nom de la constante héritée : ABORT_ERR)
+
URLMismatchError {{experimental_inline}}
+
L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : 21 et nom de la constante héritée : URL_MISMATCH_ERR)
+
QuotaExceededError {{experimental_inline}}
+
Le quota a été dépassé. (Valeur de code héritée : 22 et nom de la constante héritée : QUOTA_EXCEEDED_ERR)
+
TimeoutError {{experimental_inline}}
+
Le temps est dépassé. (Valeur de code héritée : 23 et nom de la constante héritée : TIMEOUT_ERR)
+
InvalidNodeTypeError {{experimental_inline}}
+
Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : 24 et nom de la constante héritée : INVALID_NODE_TYPE_ERR)
+
DataCloneError {{experimental_inline}}
+
L'objet ne peut pas être cloné. ( Valeur de code héritée : 25 et nom de la constante héritée : DATA_CLONE_ERR)
+
EncodingError {{experimental_inline}}
+
L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités).
+
NotReadableError {{experimental_inline}}
+
L'opération de lecture entrée / sortie a échoué (Pas de valeur de code ni de nom de constante hérités).
+
UnknownError {{experimental_inline}}
+
L'opération a échoué pour une raison transitoire inconnue (par exemple dépassement de mémoire) (Pas de valeur de code ni de nom de constante hérités) .
+
ConstraintError {{experimental_inline}}
+
Une opération de mutation dans une transaction a échoué car une contrainte n'a pas été satisfaite (Pas de valeur de code ni de nom de constante hérités) .
+
DataError {{experimental_inline}}
+
Provided data is inadequate (No legacy code value and constant name).
+
TransactionInactiveError {{experimental_inline}}
+
Une demande a été placée contre une transaction qui n'est actuellement pas active ou qui est terminée (Pas de valeur de code ni de nom de constante hérités).
+
ReadOnlyError {{experimental_inline}}
+
L'opération de mutation a été tentée dans une transaction "en lecture seule" (Pas de valeur de code ni de nom de constante hérités).
+
VersionError {{experimental_inline}}
+
Une tentative a été faite pour ouvrir une base de données en utilisant une version inférieure à la version existante (Pas de valeur de code ni de nom de constante hérités).
+
OperationError {{experimental_inline}}
+
L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités).
+
NotAllowedError {{experimental_inline}}
+
La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission  (Pas de valeur de code ni de nom de constante hérités).
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('WebIDL', '#es-DOMException-call', 'constructor')}}{{Spec2('WebIDL')}}Ajout du constructeur pour la classe DOMException. Ajout des valeurs NotReadableError, UnknownError, ConstraintError, DataError, TransactionInactiveError, ReadOnlyError, VersionError, OperationError et NotAllowedError.
{{SpecName('DOM4', '#exception-domexception', 'DOMException')}}{{Spec2('DOM4')}}Ajout des SECURITY_ERR, NETWORK_ERR, ABORT_ERR, URL_MISMATCH_ERR, QUOTA_EXCEEDED_ERR, TIMEOUT_ERR, INVALID_NODE_TYPE_ERR, et DATA_CLONE_ERR. La propriété code a été dépréciée pour les valeurs d'exception. La valeur EncodingError ajoutée.
{{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}}{{Spec2('DOM3 Core')}}Ajout de VALIDATION_ERR et TYPE_MISMATCH_ERR.
{{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}}{{Spec2('DOM2 Core')}}Ajout de INVALID_STATE_ERR, SYNTAX_ERR, INVALID_MODIFICATION_ERR, NAMESPACE_ERR, and INVALID_ACCESS_ERR.
{{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMException")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domhighrestimestamp/index.html b/files/fr/web/api/domhighrestimestamp/index.html deleted file mode 100644 index b089be1d46..0000000000 --- a/files/fr/web/api/domhighrestimestamp/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: DOMHighResTimeStamp -slug: Web/API/DOMHighResTimeStamp -translation_of: Web/API/DOMHighResTimeStamp ---- -

{{APIRef("High Resolution Time")}}

- -

Le type DOMHighResTimeStamp est un double et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps.

- -

L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting.

- -

De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde.

- -

Précision temporelle réduite

- -

Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur.
- Dans Firefox, l'option privacy.reduceTimerPrecision est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut.

- -
// précision temporelle réduite (2ms) dans Firefox 60
-event.timeStamp
-// 1519211809934
-// 1519211810362
-// 1519211811670
-// ...
-
-
-// précision temporelle réduite avec `privacy.resistFingerprinting` activé
-event.timeStamp;
-// 1519129853500
-// 1519129858900
-// 1519129864400
-// ...
-
- -

Dans Firefox, vous pouvez aussi activer privacy.resistFingerprinting, la précision sera alors de 100ms ou la valeur de privacy.resistFingerprinting.reduceTimerPrecision.microseconds, la valeur la plus large étant retenue.

- -

Propriétés

- -

Ce type n'a pas de propriétés. C'est une valeur à virgule flottante double précision.

- -

Valeur

- -

La valeur d'un DOMHighResTimeStamp est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'origine temporelle.

- -

L'origine temporelle

- -

L'origine temporelle est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit :

- - - -

Méthodes

- -

Ce type n'a pas de méthodes.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}}{{Spec2('Highres Time Level 2')}}Définitions plus strictes des interfaces et des types.
{{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}}{{Spec2('Highres Time')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMHighResTimestamp")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domhighrestimestamp/index.md b/files/fr/web/api/domhighrestimestamp/index.md new file mode 100644 index 0000000000..b089be1d46 --- /dev/null +++ b/files/fr/web/api/domhighrestimestamp/index.md @@ -0,0 +1,98 @@ +--- +title: DOMHighResTimeStamp +slug: Web/API/DOMHighResTimeStamp +translation_of: Web/API/DOMHighResTimeStamp +--- +

{{APIRef("High Resolution Time")}}

+ +

Le type DOMHighResTimeStamp est un double et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps.

+ +

L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting.

+ +

De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde.

+ +

Précision temporelle réduite

+ +

Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur.
+ Dans Firefox, l'option privacy.reduceTimerPrecision est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut.

+ +
// précision temporelle réduite (2ms) dans Firefox 60
+event.timeStamp
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// précision temporelle réduite avec `privacy.resistFingerprinting` activé
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+
+ +

Dans Firefox, vous pouvez aussi activer privacy.resistFingerprinting, la précision sera alors de 100ms ou la valeur de privacy.resistFingerprinting.reduceTimerPrecision.microseconds, la valeur la plus large étant retenue.

+ +

Propriétés

+ +

Ce type n'a pas de propriétés. C'est une valeur à virgule flottante double précision.

+ +

Valeur

+ +

La valeur d'un DOMHighResTimeStamp est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'origine temporelle.

+ +

L'origine temporelle

+ +

L'origine temporelle est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit :

+ + + +

Méthodes

+ +

Ce type n'a pas de méthodes.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}}{{Spec2('Highres Time Level 2')}}Définitions plus strictes des interfaces et des types.
{{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}}{{Spec2('Highres Time')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMHighResTimestamp")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domimplementation/createdocument/index.html b/files/fr/web/api/domimplementation/createdocument/index.html deleted file mode 100644 index 63bccf3cb1..0000000000 --- a/files/fr/web/api/domimplementation/createdocument/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: DOMImplementation.createDocument() -slug: Web/API/DOMImplementation/createDocument -tags: - - API - - DOM - - Méthode - - Reference - - implementation -translation_of: Web/API/DOMImplementation/createDocument ---- -

{{ApiRef("DOM")}}

- -

La méthode DOMImplementation.createDocument() crée et retourne un {{domxref("XMLDocument")}}.

- -

Syntaxe

- -
doc = document.implementation.createDocument(namespaceURI, qualifiedNameStr, documentType);
- -

Paramètres

- -
-
namespaceURI
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant l'URI de l'espace de noms du document à créer, ou null si le document n'appartient à aucun espace de noms.
-
- -
-
qualifiedNameStr
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le nom qualifié, c'est-à-dire optionnellement un préfixe et deux points, plus le nom local de l'élément racine, du document à créer.
-
- -
-
documentType {{optional_inline}}
-
Est le DocumentType du document à créer. Vaut null par défaut.
-
- - - -

Exemple

- -
var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
-var body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body');
-body.setAttribute('id', 'abc');
-doc.documentElement.appendChild(body);
-alert(doc.getElementById('abc')); // [objet HTMLBodyElement]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-domimplementation-createdocument', 'DOMImplementation.createDocument')}}{{Spec2('DOM WHATWG')}}Modification du type retourné par createDocument() de {{domxref("Document")}} à{{domxref("XMLDocument")}}.
- Le troisième argument de createDocument(), doctype, est maintenant optionnel et vaut null par defaut.
{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}{{Spec2('DOM3 Core')}}Pas de changement depuis {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}{{Spec2('DOM2 Core')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMImplementation.createDocument")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domimplementation/createdocument/index.md b/files/fr/web/api/domimplementation/createdocument/index.md new file mode 100644 index 0000000000..63bccf3cb1 --- /dev/null +++ b/files/fr/web/api/domimplementation/createdocument/index.md @@ -0,0 +1,85 @@ +--- +title: DOMImplementation.createDocument() +slug: Web/API/DOMImplementation/createDocument +tags: + - API + - DOM + - Méthode + - Reference + - implementation +translation_of: Web/API/DOMImplementation/createDocument +--- +

{{ApiRef("DOM")}}

+ +

La méthode DOMImplementation.createDocument() crée et retourne un {{domxref("XMLDocument")}}.

+ +

Syntaxe

+ +
doc = document.implementation.createDocument(namespaceURI, qualifiedNameStr, documentType);
+ +

Paramètres

+ +
+
namespaceURI
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant l'URI de l'espace de noms du document à créer, ou null si le document n'appartient à aucun espace de noms.
+
+ +
+
qualifiedNameStr
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le nom qualifié, c'est-à-dire optionnellement un préfixe et deux points, plus le nom local de l'élément racine, du document à créer.
+
+ +
+
documentType {{optional_inline}}
+
Est le DocumentType du document à créer. Vaut null par défaut.
+
+ + + +

Exemple

+ +
var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
+var body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body');
+body.setAttribute('id', 'abc');
+doc.documentElement.appendChild(body);
+alert(doc.getElementById('abc')); // [objet HTMLBodyElement]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-domimplementation-createdocument', 'DOMImplementation.createDocument')}}{{Spec2('DOM WHATWG')}}Modification du type retourné par createDocument() de {{domxref("Document")}} à{{domxref("XMLDocument")}}.
+ Le troisième argument de createDocument(), doctype, est maintenant optionnel et vaut null par defaut.
{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}{{Spec2('DOM3 Core')}}Pas de changement depuis {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}{{Spec2('DOM2 Core')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMImplementation.createDocument")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domimplementation/createdocumenttype/index.html b/files/fr/web/api/domimplementation/createdocumenttype/index.html deleted file mode 100644 index b626e674ac..0000000000 --- a/files/fr/web/api/domimplementation/createdocumenttype/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: DOMImplementation.createDocumentType() -slug: Web/API/DOMImplementation/createDocumentType -tags: - - API - - DOM - - DOMImplementation - - Méthode - - Reference -translation_of: Web/API/DOMImplementation/createDocumentType ---- -

{{ ApiRef("DOM")}}

- -

La méthode DOMImplementation.createDocumentType() renvoie un objet {{domxref("DocumentType")}}  qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}.

- -

Syntaxe

- -
doctype = document.implementation.createDocumentType(qualifiedNameStr, publicId, systemId)
- -

Paramètres

- -
-
qualifiedNameStr
-
est une {{domxref("DOMString")}} (chaîne de caractères) contenant le nom qualifié comme svg:svg.
-
- -
-
publicId
-
est une {{domxref("DOMString")}} (chaîne de caractères) contenant l'identifiant PUBLIC.
-
- -
-
systemId
-
est une {{domxref("DOMString")}} (chaîne de caractères) contenant les identifiants SYSTEM.
-
- -

Exemple

- -
var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
-var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt);
-alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN
-
- -

 Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-domimplementation-createdocumenttype', 'DOMImplementation.createDocumentType')}}{{Spec2('DOM WHATWG')}}Pas de modification de {{SpecName("DOM3 Core")}}
{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}{{Spec2('DOM3 Core')}}Pas de modification de {{SpecName("DOM2 Core")}}
{{SpecName('DOM2 Core', 'core.html##Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}{{Spec2('DOM2 Core')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMImplementation.createDocumentType")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domimplementation/createdocumenttype/index.md b/files/fr/web/api/domimplementation/createdocumenttype/index.md new file mode 100644 index 0000000000..b626e674ac --- /dev/null +++ b/files/fr/web/api/domimplementation/createdocumenttype/index.md @@ -0,0 +1,79 @@ +--- +title: DOMImplementation.createDocumentType() +slug: Web/API/DOMImplementation/createDocumentType +tags: + - API + - DOM + - DOMImplementation + - Méthode + - Reference +translation_of: Web/API/DOMImplementation/createDocumentType +--- +

{{ ApiRef("DOM")}}

+ +

La méthode DOMImplementation.createDocumentType() renvoie un objet {{domxref("DocumentType")}}  qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}.

+ +

Syntaxe

+ +
doctype = document.implementation.createDocumentType(qualifiedNameStr, publicId, systemId)
+ +

Paramètres

+ +
+
qualifiedNameStr
+
est une {{domxref("DOMString")}} (chaîne de caractères) contenant le nom qualifié comme svg:svg.
+
+ +
+
publicId
+
est une {{domxref("DOMString")}} (chaîne de caractères) contenant l'identifiant PUBLIC.
+
+ +
+
systemId
+
est une {{domxref("DOMString")}} (chaîne de caractères) contenant les identifiants SYSTEM.
+
+ +

Exemple

+ +
var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
+var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt);
+alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN
+
+ +

 Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-domimplementation-createdocumenttype', 'DOMImplementation.createDocumentType')}}{{Spec2('DOM WHATWG')}}Pas de modification de {{SpecName("DOM3 Core")}}
{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}{{Spec2('DOM3 Core')}}Pas de modification de {{SpecName("DOM2 Core")}}
{{SpecName('DOM2 Core', 'core.html##Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}{{Spec2('DOM2 Core')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMImplementation.createDocumentType")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domimplementation/createhtmldocument/index.html b/files/fr/web/api/domimplementation/createhtmldocument/index.html deleted file mode 100644 index 7bdda41853..0000000000 --- a/files/fr/web/api/domimplementation/createhtmldocument/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: DOMImplementation.createHTMLDocument() -slug: Web/API/DOMImplementation/createHTMLDocument -tags: - - API - - DOM - - DOM Référence(2) - - DOM implémentation - - Expérimental(2) - - Méthode - - Référence(2) -translation_of: Web/API/DOMImplementation/createHTMLDocument ---- -

{{ApiRef("DOM")}}{{SeeCompatTable}}

- -

La méthode DOMImplementation.createHTMLDocument()  crée un nouveau {{domxref("Document")}} HTML.

- -

Syntaxe

- -
newDoc = document.implementation.createHTMLDocument(titre);
- -

Paramètres

- -
-
title  {{optional_inline}}  (excepté dans IE)
-
C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML.
-
- -

Exemple

- -

Dans cet exemple, on crée un nouveau document HTML que l'on insère dans un {{HTMLElement("iframe")}} dans le document courant.

- -

Ci-dessous, le code HTML pour cet exemple:

- -
<body>
-  <p>Cliquez <a href="javascript:makeDocument()">ici</a> pour créer un nouveau document et l'insérer au dessous.</p>
-  <iframe id="laFrame" src="about:blank" />
-</body>
-
- -

L'implémentation en JavaScript de la méthode makeDocument():

- -
function makeDocument() {
-  var frame = document.getElementById("laFrame");
-
-  var doc = document.implementation.createHTMLDocument("Nouveau Document");
-  var p = doc.createElement("p");
-  p.innerHTML = "Ceci est un nouveau paragraphe.";
-
-  try {
-    doc.body.appendChild(p);
-  } catch(e) {
-    console.log(e);
-  }
-
-  // Copie le nouveau document HTML dans la frame
-
-  var destDocument = frame.contentDocument;
-  var srcNode = doc.documentElement;
-  var newNode = destDocument.importNode(srcNode, true);
-
-  destDocument.replaceChild(newNode, destDocument.documentElement);
-}
-
- -

Le code des lignes 4 à 12 permet la création du nouveau document HTML et l'insertion de contenu dans ce dernier. La ligne 4 utilise la méthode createHTMLDocument() pour construire le nouveau document HTML et définir son {{ HTMLElement("title") }} comme "Nouveau Document". Dans les lignes 5 et 6, est créé un nouvel élément paragraphe avec un simple contenu, enfin, les lignes 8 à 12 permettent l'insertion de ce nouveau paragraphe dans le nouveau document.

- -

La ligne 16 récupère le contentDocument (contenu du document) du cadre ; c'est le document dans lequel nous allons injecter le nouveau contenu. Les deux lignes suivantes permettent d'importer le contenu du nouveau document dans le nouveau contexte du document. Pour finir, la ligne 20 remplace le contenu du cadre par le contenu du nouveau document.

- -

Voir l'exemple sur une page

- -

Le document retourné est préconstruit avec le code HTML suivant :

- -
<!doctype html>
-<html>
-<head>
-<title>titre</title>
-</head>
-<body>
-</body>
-</html>
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}}{{Spec2('DOM WHATWG')}}Première définition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMImplementation.createHTMLDocument")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domimplementation/createhtmldocument/index.md b/files/fr/web/api/domimplementation/createhtmldocument/index.md new file mode 100644 index 0000000000..7bdda41853 --- /dev/null +++ b/files/fr/web/api/domimplementation/createhtmldocument/index.md @@ -0,0 +1,109 @@ +--- +title: DOMImplementation.createHTMLDocument() +slug: Web/API/DOMImplementation/createHTMLDocument +tags: + - API + - DOM + - DOM Référence(2) + - DOM implémentation + - Expérimental(2) + - Méthode + - Référence(2) +translation_of: Web/API/DOMImplementation/createHTMLDocument +--- +

{{ApiRef("DOM")}}{{SeeCompatTable}}

+ +

La méthode DOMImplementation.createHTMLDocument()  crée un nouveau {{domxref("Document")}} HTML.

+ +

Syntaxe

+ +
newDoc = document.implementation.createHTMLDocument(titre);
+ +

Paramètres

+ +
+
title  {{optional_inline}}  (excepté dans IE)
+
C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML.
+
+ +

Exemple

+ +

Dans cet exemple, on crée un nouveau document HTML que l'on insère dans un {{HTMLElement("iframe")}} dans le document courant.

+ +

Ci-dessous, le code HTML pour cet exemple:

+ +
<body>
+  <p>Cliquez <a href="javascript:makeDocument()">ici</a> pour créer un nouveau document et l'insérer au dessous.</p>
+  <iframe id="laFrame" src="about:blank" />
+</body>
+
+ +

L'implémentation en JavaScript de la méthode makeDocument():

+ +
function makeDocument() {
+  var frame = document.getElementById("laFrame");
+
+  var doc = document.implementation.createHTMLDocument("Nouveau Document");
+  var p = doc.createElement("p");
+  p.innerHTML = "Ceci est un nouveau paragraphe.";
+
+  try {
+    doc.body.appendChild(p);
+  } catch(e) {
+    console.log(e);
+  }
+
+  // Copie le nouveau document HTML dans la frame
+
+  var destDocument = frame.contentDocument;
+  var srcNode = doc.documentElement;
+  var newNode = destDocument.importNode(srcNode, true);
+
+  destDocument.replaceChild(newNode, destDocument.documentElement);
+}
+
+ +

Le code des lignes 4 à 12 permet la création du nouveau document HTML et l'insertion de contenu dans ce dernier. La ligne 4 utilise la méthode createHTMLDocument() pour construire le nouveau document HTML et définir son {{ HTMLElement("title") }} comme "Nouveau Document". Dans les lignes 5 et 6, est créé un nouvel élément paragraphe avec un simple contenu, enfin, les lignes 8 à 12 permettent l'insertion de ce nouveau paragraphe dans le nouveau document.

+ +

La ligne 16 récupère le contentDocument (contenu du document) du cadre ; c'est le document dans lequel nous allons injecter le nouveau contenu. Les deux lignes suivantes permettent d'importer le contenu du nouveau document dans le nouveau contexte du document. Pour finir, la ligne 20 remplace le contenu du cadre par le contenu du nouveau document.

+ +

Voir l'exemple sur une page

+ +

Le document retourné est préconstruit avec le code HTML suivant :

+ +
<!doctype html>
+<html>
+<head>
+<title>titre</title>
+</head>
+<body>
+</body>
+</html>
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}}{{Spec2('DOM WHATWG')}}Première définition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMImplementation.createHTMLDocument")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domimplementation/hasfeature/index.html b/files/fr/web/api/domimplementation/hasfeature/index.html deleted file mode 100644 index 45adfcedba..0000000000 --- a/files/fr/web/api/domimplementation/hasfeature/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: DOMImplementation.hasFeature() -slug: Web/API/DOMImplementation/hasFeature -tags: - - API - - DOM - - Méthodes -translation_of: Web/API/DOMImplementation/hasFeature ---- -

{{ApiRef("DOM")}}

- -

{{deprecated_header()}}

- -

La méthode DOMImplementation.hasFeature() renvoie un {{domxref("Boolean")}} (booléen) indiquant si une fonctionnalité donnée est prise en charge. Cette méthode est dépréciée et les navigateurs modernes renvoient true (vrai) dans tous les cas.

- -

Les différentes implémentations ont été assez divergentes quant au type de caractéristiques signalées. La dernière version de la spécification a décidé de forcer cette méthode à toujours renvoyer true, là où la fonctionnalité était précisée et utilisée.

- -

Syntaxe

- -
flag = document.implementation.hasFeature(feature, version);
- -

Paramètres

- -
-
feature
-
est une {{domxref("DOMString")}} (chaîne de caractères) représentant le nom de la fonctionnalité.
-
version
-
est une {{domxref("DOMString")}} (chaîne de caractères) représentant la version de la spécification définissant la fonctionnalité.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-domimplementation-hasfeature', 'DOMImplementation.hasFeature')}}{{Spec2('DOM WHATWG')}}Modifié pour toujours renvoyer true sauf pour les fonctionnalités SVG.
{{SpecName('DOM3 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}{{Spec2('DOM3 Core')}}Pas de modification de {{SpecName("DOM2 Core")}}
{{SpecName('DOM2 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}{{Spec2('DOM2 Core')}}Pas de modification de {{SpecName("DOM1")}}
{{SpecName('DOM1', 'level-one-core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMImplementation.hasFeature")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domimplementation/hasfeature/index.md b/files/fr/web/api/domimplementation/hasfeature/index.md new file mode 100644 index 0000000000..45adfcedba --- /dev/null +++ b/files/fr/web/api/domimplementation/hasfeature/index.md @@ -0,0 +1,71 @@ +--- +title: DOMImplementation.hasFeature() +slug: Web/API/DOMImplementation/hasFeature +tags: + - API + - DOM + - Méthodes +translation_of: Web/API/DOMImplementation/hasFeature +--- +

{{ApiRef("DOM")}}

+ +

{{deprecated_header()}}

+ +

La méthode DOMImplementation.hasFeature() renvoie un {{domxref("Boolean")}} (booléen) indiquant si une fonctionnalité donnée est prise en charge. Cette méthode est dépréciée et les navigateurs modernes renvoient true (vrai) dans tous les cas.

+ +

Les différentes implémentations ont été assez divergentes quant au type de caractéristiques signalées. La dernière version de la spécification a décidé de forcer cette méthode à toujours renvoyer true, là où la fonctionnalité était précisée et utilisée.

+ +

Syntaxe

+ +
flag = document.implementation.hasFeature(feature, version);
+ +

Paramètres

+ +
+
feature
+
est une {{domxref("DOMString")}} (chaîne de caractères) représentant le nom de la fonctionnalité.
+
version
+
est une {{domxref("DOMString")}} (chaîne de caractères) représentant la version de la spécification définissant la fonctionnalité.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-domimplementation-hasfeature', 'DOMImplementation.hasFeature')}}{{Spec2('DOM WHATWG')}}Modifié pour toujours renvoyer true sauf pour les fonctionnalités SVG.
{{SpecName('DOM3 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}{{Spec2('DOM3 Core')}}Pas de modification de {{SpecName("DOM2 Core")}}
{{SpecName('DOM2 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}{{Spec2('DOM2 Core')}}Pas de modification de {{SpecName("DOM1")}}
{{SpecName('DOM1', 'level-one-core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMImplementation.hasFeature")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domimplementation/index.html b/files/fr/web/api/domimplementation/index.html deleted file mode 100644 index 71e10fab87..0000000000 --- a/files/fr/web/api/domimplementation/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: DOMImplementation -slug: Web/API/DOMImplementation -tags: - - API - - DOM - - Interface - - Reference -translation_of: Web/API/DOMImplementation ---- -

{{ ApiRef("DOM") }}

- -

L'interface DOMImplementation représente un objet fournissant des méthodes qui ne dépendent pas d'un document particulier. Un tel objet est renvoyé par la propriété {{domxref("Document.implementation")}}.

- -

Propriété

- -

Cette interface n'a pas de propriété spécifique et n'en hérite aucune.

- -

Méthodes

- -

Pas de méthode héritée.

- -
-
{{domxref("DOMImplementation.createDocument()")}}
-
Crée et retourne un {{domxref("XMLDocument")}}.
-
{{domxref("DOMImplementation.createDocumentType()")}}
-
Crée et retourne un {{domxref("DocumentType")}}.
-
{{domxref("DOMImplementation.createHTMLDocument()")}}
-
Crée et retourne un {{domxref("Document")}} HTML.
-
{{domxref("DOMImplementation.hasFeature()")}}
-
Retourne un {{domxref("Boolean")}} indiquant si une caractéristique donnée est supportée ou non. Cette fonction n'est pas fiable et est conservée uniquement à des fins de compatibilité : à l'exception des requêtes liées au SVG, elle renvoie toujours la valeur true (vrai). Les anciens navigateurs sont très incohérents dans leur comportement.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}{{Spec2('DOM WHATWG')}}Supprime la méthode getFeature().
- Ajoute la méthode createHTMLDocument().
- Modifie le type de retour de createDocument() de {{domxref("Document")}} à {{domxref("XMLDocument")}}.
{{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}{{Spec2('DOM3 Core')}}Ajoute la méthode getFeature() (jamais implémentée par un agent utilisateur).
{{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}{{Spec2('DOM2 Core')}}Ajoute les méthodes createDocument() et createDocumentType().
{{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}}{{Spec2('DOM1')}}Définition initial.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMImplementation")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domimplementation/index.md b/files/fr/web/api/domimplementation/index.md new file mode 100644 index 0000000000..71e10fab87 --- /dev/null +++ b/files/fr/web/api/domimplementation/index.md @@ -0,0 +1,76 @@ +--- +title: DOMImplementation +slug: Web/API/DOMImplementation +tags: + - API + - DOM + - Interface + - Reference +translation_of: Web/API/DOMImplementation +--- +

{{ ApiRef("DOM") }}

+ +

L'interface DOMImplementation représente un objet fournissant des méthodes qui ne dépendent pas d'un document particulier. Un tel objet est renvoyé par la propriété {{domxref("Document.implementation")}}.

+ +

Propriété

+ +

Cette interface n'a pas de propriété spécifique et n'en hérite aucune.

+ +

Méthodes

+ +

Pas de méthode héritée.

+ +
+
{{domxref("DOMImplementation.createDocument()")}}
+
Crée et retourne un {{domxref("XMLDocument")}}.
+
{{domxref("DOMImplementation.createDocumentType()")}}
+
Crée et retourne un {{domxref("DocumentType")}}.
+
{{domxref("DOMImplementation.createHTMLDocument()")}}
+
Crée et retourne un {{domxref("Document")}} HTML.
+
{{domxref("DOMImplementation.hasFeature()")}}
+
Retourne un {{domxref("Boolean")}} indiquant si une caractéristique donnée est supportée ou non. Cette fonction n'est pas fiable et est conservée uniquement à des fins de compatibilité : à l'exception des requêtes liées au SVG, elle renvoie toujours la valeur true (vrai). Les anciens navigateurs sont très incohérents dans leur comportement.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}{{Spec2('DOM WHATWG')}}Supprime la méthode getFeature().
+ Ajoute la méthode createHTMLDocument().
+ Modifie le type de retour de createDocument() de {{domxref("Document")}} à {{domxref("XMLDocument")}}.
{{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}{{Spec2('DOM3 Core')}}Ajoute la méthode getFeature() (jamais implémentée par un agent utilisateur).
{{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}{{Spec2('DOM2 Core')}}Ajoute les méthodes createDocument() et createDocumentType().
{{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}}{{Spec2('DOM1')}}Définition initial.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMImplementation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/dommatrix/index.html b/files/fr/web/api/dommatrix/index.html deleted file mode 100644 index b12c8ab849..0000000000 --- a/files/fr/web/api/dommatrix/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: CSSMatrix -slug: Web/API/DOMMatrix -tags: - - API - - Reference -translation_of: Web/API/DOMMatrix -translation_of_original: Web/API/CSSMatrix -original_slug: 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

- -

{{Compat("api.DOMMatrix")}}

- -

{{Compat("api.WebKitCSSMatrix")}}

- -

Voir aussi

- - -
diff --git a/files/fr/web/api/dommatrix/index.md b/files/fr/web/api/dommatrix/index.md new file mode 100644 index 0000000000..b12c8ab849 --- /dev/null +++ b/files/fr/web/api/dommatrix/index.md @@ -0,0 +1,29 @@ +--- +title: CSSMatrix +slug: Web/API/DOMMatrix +tags: + - API + - Reference +translation_of: Web/API/DOMMatrix +translation_of_original: Web/API/CSSMatrix +original_slug: 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

+ +

{{Compat("api.DOMMatrix")}}

+ +

{{Compat("api.WebKitCSSMatrix")}}

+ +

Voir aussi

+ + +
diff --git a/files/fr/web/api/domobject/index.html b/files/fr/web/api/domobject/index.html deleted file mode 100644 index e179526e13..0000000000 --- a/files/fr/web/api/domobject/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: DOMObject -slug: Web/API/DOMObject -tags: - - API - - DOM - - Objets -translation_of: Web/API/DOMObject ---- -
{{APIRef("DOM")}}{{Obsolete_header}}
- -

L'interface obsolète DOMObject était utilisée dans les versions antérieures de la spécification DOM comme classe de base  pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript .

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#DOMObject", "DOMObject")}}{{Spec2("DOM3 Core")}}Définition initiale
diff --git a/files/fr/web/api/domobject/index.md b/files/fr/web/api/domobject/index.md new file mode 100644 index 0000000000..e179526e13 --- /dev/null +++ b/files/fr/web/api/domobject/index.md @@ -0,0 +1,31 @@ +--- +title: DOMObject +slug: Web/API/DOMObject +tags: + - API + - DOM + - Objets +translation_of: Web/API/DOMObject +--- +
{{APIRef("DOM")}}{{Obsolete_header}}
+ +

L'interface obsolète DOMObject était utilisée dans les versions antérieures de la spécification DOM comme classe de base  pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript .

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#DOMObject", "DOMObject")}}{{Spec2("DOM3 Core")}}Définition initiale
diff --git a/files/fr/web/api/domparser/index.html b/files/fr/web/api/domparser/index.html deleted file mode 100644 index 28daa45409..0000000000 --- a/files/fr/web/api/domparser/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: DOMParser -slug: Web/API/DOMParser -tags: - - API - - DOM - - HTML - - SVG - - XML -translation_of: Web/API/DOMParser ---- -

{{APIRef("DOM")}}

- -

L'interface DOMParser permet d'analyser le code source {{Glossary("XML")}} ou {{Glossary("HTML")}} d'une chaîne de caractères dans le DOM {{domxref("Document")}}.

- -

Vous pouvez effectuer l'opération inverse - convertir un arbre DOM en source XML ou HTML - en utilisant l'interface {{domxref("XMLSerializer")}}.

- -

Dans le cas d'un document HTML, vous pouvez également remplacer des parties du DOM par de nouveaux arbres DOM construits à partir de HTML en définissant la valeur des propriétés {{domxref("Element.innerHTML", "innerHTML")}} et {{domxref("Element.outerHTML", "outerHTML")}}. Ces propriétés peuvent également être lues pour récupérer les fragments HTML correspondant au sous-arbre DOM correspondant.

- -

Notez que {{domxref("XMLHttpRequest")}} peut analyser le XML et le HTML directement à partir d'une ressource adressable par URL, en renvoyant un Document dans sa propriété {{domxref("XMLHttpRequest.response", "response")}}.

- -

Constructeur

- -
-
{{domxref("DOMParser.DOMParser","DOMParser()")}}
-
Crée un nouvel objet DOMParser.
-
- -

Méthodes

- -
-
{{domxref("DOMParser.parseFromString()")}}
-
Analyse une chaîne de caractères à l'aide de l'analyseur HTML ou de l'analyseur XML, et retourne un {{domxref("HTMLDocument")}} ou {{domxref("XMLDocument")}}.
-
- -

Exemple

- -

Analyse syntaxique de XML, SVG et HTML

- -

Cet exemple montre comment analyser le XML, le SVG et le HTML. Notez qu'un type MIME de text/html invoquera l'analyseur HTML, et que tout autre type MIME accepté par cette méthode invoquera l'analyseur XML.

- -
const parser = new DOMParser();
-
-const xmlString = "<warning>Attention au tigre</warning>";
-const doc1 = parser.parseFromString(xmlString, "application/xml");
-// XMLDocument
-
-const svgString = "<circle cx=\"50\" cy=\"50\" r=\"50\"/>";
-const doc2 = parser.parseFromString(svgString, "image/svg+xml");
-// XMLDocument
-
-const htmlString = "<strong>Attention au léopard</strong>";
-const doc3 = parser.parseFromString(htmlString, "text/html");
-// HTMLDocument
-
-console.log(doc1.documentElement.textContent)
-// "Attention au tigre"
-
-console.log(doc2.firstChild.tagName);
-// "circle"
-
-console.log(doc3.body.firstChild.textContent);
-// "Attention au léopard"
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-parsing-and-serialization', 'DOM parsing')}} - {{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMParser", 3)}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domparser/index.md b/files/fr/web/api/domparser/index.md new file mode 100644 index 0000000000..28daa45409 --- /dev/null +++ b/files/fr/web/api/domparser/index.md @@ -0,0 +1,98 @@ +--- +title: DOMParser +slug: Web/API/DOMParser +tags: + - API + - DOM + - HTML + - SVG + - XML +translation_of: Web/API/DOMParser +--- +

{{APIRef("DOM")}}

+ +

L'interface DOMParser permet d'analyser le code source {{Glossary("XML")}} ou {{Glossary("HTML")}} d'une chaîne de caractères dans le DOM {{domxref("Document")}}.

+ +

Vous pouvez effectuer l'opération inverse - convertir un arbre DOM en source XML ou HTML - en utilisant l'interface {{domxref("XMLSerializer")}}.

+ +

Dans le cas d'un document HTML, vous pouvez également remplacer des parties du DOM par de nouveaux arbres DOM construits à partir de HTML en définissant la valeur des propriétés {{domxref("Element.innerHTML", "innerHTML")}} et {{domxref("Element.outerHTML", "outerHTML")}}. Ces propriétés peuvent également être lues pour récupérer les fragments HTML correspondant au sous-arbre DOM correspondant.

+ +

Notez que {{domxref("XMLHttpRequest")}} peut analyser le XML et le HTML directement à partir d'une ressource adressable par URL, en renvoyant un Document dans sa propriété {{domxref("XMLHttpRequest.response", "response")}}.

+ +

Constructeur

+ +
+
{{domxref("DOMParser.DOMParser","DOMParser()")}}
+
Crée un nouvel objet DOMParser.
+
+ +

Méthodes

+ +
+
{{domxref("DOMParser.parseFromString()")}}
+
Analyse une chaîne de caractères à l'aide de l'analyseur HTML ou de l'analyseur XML, et retourne un {{domxref("HTMLDocument")}} ou {{domxref("XMLDocument")}}.
+
+ +

Exemple

+ +

Analyse syntaxique de XML, SVG et HTML

+ +

Cet exemple montre comment analyser le XML, le SVG et le HTML. Notez qu'un type MIME de text/html invoquera l'analyseur HTML, et que tout autre type MIME accepté par cette méthode invoquera l'analyseur XML.

+ +
const parser = new DOMParser();
+
+const xmlString = "<warning>Attention au tigre</warning>";
+const doc1 = parser.parseFromString(xmlString, "application/xml");
+// XMLDocument
+
+const svgString = "<circle cx=\"50\" cy=\"50\" r=\"50\"/>";
+const doc2 = parser.parseFromString(svgString, "image/svg+xml");
+// XMLDocument
+
+const htmlString = "<strong>Attention au léopard</strong>";
+const doc3 = parser.parseFromString(htmlString, "text/html");
+// HTMLDocument
+
+console.log(doc1.documentElement.textContent)
+// "Attention au tigre"
+
+console.log(doc2.firstChild.tagName);
+// "circle"
+
+console.log(doc3.body.firstChild.textContent);
+// "Attention au léopard"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-parsing-and-serialization', 'DOM parsing')}} + {{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMParser", 3)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/dompoint/dompoint/index.html b/files/fr/web/api/dompoint/dompoint/index.html deleted file mode 100644 index 952a148a55..0000000000 --- a/files/fr/web/api/dompoint/dompoint/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: DOMPoint.DOMPoint() -slug: Web/API/DOMPoint/DOMPoint -tags: - - API - - Constructeurs - - DOM - - Géométrie - - Quadrilatère -translation_of: Web/API/DOMPoint/DOMPoint ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

Le constructeur DOMPoint() crée un nouvel objet {{domxref("DOMPoint")}}.

- -

Syntaxe

- -
var myDOMPoint = new DOMPoint(x, y, z, w);
- -

Paramètres

- -
-
x
-
La coordonnée x pour le nouveau DOMPoint.
-
y
-
La coordonnée y pour le nouveau DOMPoint.
-
z
-
La coordonnée z pour le nouveau DOMPoint.
-
w
-
La valeur de perspective du nouveau DOMPoint.
-
- -

Exemples

- -

Pour créer un nouveau DOMPoint, vous pourriez exécuter une ligne de code comme celle-ci :

- -
var myDOMPoint = new DOMPoint(0.4, 0.5, -0.5, 1);
-// le lancement de 'myDOMPoint' dans la console devrait renvoyer
-// DOMPoint { x: 0.4, y: 0.5, z: -0.5, w: 1 }
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-dompoint-dompointx-y-z-w', 'DOMPoint()')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMPoint.DOMPoint")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/dompoint/dompoint/index.md b/files/fr/web/api/dompoint/dompoint/index.md new file mode 100644 index 0000000000..952a148a55 --- /dev/null +++ b/files/fr/web/api/dompoint/dompoint/index.md @@ -0,0 +1,68 @@ +--- +title: DOMPoint.DOMPoint() +slug: Web/API/DOMPoint/DOMPoint +tags: + - API + - Constructeurs + - DOM + - Géométrie + - Quadrilatère +translation_of: Web/API/DOMPoint/DOMPoint +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

Le constructeur DOMPoint() crée un nouvel objet {{domxref("DOMPoint")}}.

+ +

Syntaxe

+ +
var myDOMPoint = new DOMPoint(x, y, z, w);
+ +

Paramètres

+ +
+
x
+
La coordonnée x pour le nouveau DOMPoint.
+
y
+
La coordonnée y pour le nouveau DOMPoint.
+
z
+
La coordonnée z pour le nouveau DOMPoint.
+
w
+
La valeur de perspective du nouveau DOMPoint.
+
+ +

Exemples

+ +

Pour créer un nouveau DOMPoint, vous pourriez exécuter une ligne de code comme celle-ci :

+ +
var myDOMPoint = new DOMPoint(0.4, 0.5, -0.5, 1);
+// le lancement de 'myDOMPoint' dans la console devrait renvoyer
+// DOMPoint { x: 0.4, y: 0.5, z: -0.5, w: 1 }
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-dompoint-dompointx-y-z-w', 'DOMPoint()')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMPoint.DOMPoint")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/dompoint/index.html b/files/fr/web/api/dompoint/index.html deleted file mode 100644 index 13f1adc696..0000000000 --- a/files/fr/web/api/dompoint/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: DOMPoint -slug: Web/API/DOMPoint -tags: - - API - - DOM - - Géométrie - - Point - - Quadrilatère -translation_of: Web/API/DOMPoint ---- -

{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}

- -

Un DOMPoint représente un point 2D ou 3D dans le système de coordonnées.

- -

En général, un x positif représente une position à droite de l'origine ; un y positif est une position au-dessus de l'origine ; et un z positif est une position vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur).

- -

Il hérite de son parent {{domxref("DOMPointReadOnly")}}.

- -

Constructeur

- -
-
{{domxref("DOMPoint.DOMPoint","DOMPoint()")}}
-
Crée un nouvel objet DOMPoint.
-
- -

Méthodes

- -

DOMPoint hérite des méthodes de son parent {{domxref("DOMPointReadOnly")}}.

- -
-
{{domxref("DOMPointReadOnly.fromPoint")}}
-
Traduit la position/perspective d'un DOMPoint à une nouvelle position (ne semble pas encore être pris en charge).
-
- -

Propriétés

- -

DOMPoint hérite des propriétés de son parent {{domxref("DOMPointReadOnly")}}.

- -
-
{{domxref("DOMPointReadOnly.x")}}
-
La coordonnée x du DOMPoint.
-
{{domxref("DOMPointReadOnly.y")}}
-
La coordonnée y du DOMPoint.
-
{{domxref("DOMPointReadOnly.z")}}
-
La coordonnée z du DOMPoint.
-
{{domxref("DOMPointReadOnly.w")}}
-
La valeur de perspective du DOMPoint.
-
- -

Exemples

- -

Dans l' API WebVR (VR = réalité virtuelle), les valeurs DOMPoint sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la  {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un DOMPoint. Notez ci-dessous l'utilisation de position.x, position.y et position.z.

- -
function setView() {
-      var posState = gPositionSensor.getState();
-      if(posState.hasPosition) {
-        posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y"
-                                    + roundToTwo(posState.position.y) + " z"
-                                    + roundToTwo(posState.position.z);
-        xPos = -posState.position.x * WIDTH * 2;
-        yPos = posState.position.y * HEIGHT * 2;
-        if(-posState.position.z > 0.01) {
-          zPos = -posState.position.z;
-        } else {
-          zPos = 0.01;
-        }
-      }
-
-  ...
-
-}
- -
-

Note : Voir notre positionsensorvrdevice demo pour le code complet.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}{{Spec2('Geometry Interfaces')}}Dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMPoint")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/dompoint/index.md b/files/fr/web/api/dompoint/index.md new file mode 100644 index 0000000000..13f1adc696 --- /dev/null +++ b/files/fr/web/api/dompoint/index.md @@ -0,0 +1,103 @@ +--- +title: DOMPoint +slug: Web/API/DOMPoint +tags: + - API + - DOM + - Géométrie + - Point + - Quadrilatère +translation_of: Web/API/DOMPoint +--- +

{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}

+ +

Un DOMPoint représente un point 2D ou 3D dans le système de coordonnées.

+ +

En général, un x positif représente une position à droite de l'origine ; un y positif est une position au-dessus de l'origine ; et un z positif est une position vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur).

+ +

Il hérite de son parent {{domxref("DOMPointReadOnly")}}.

+ +

Constructeur

+ +
+
{{domxref("DOMPoint.DOMPoint","DOMPoint()")}}
+
Crée un nouvel objet DOMPoint.
+
+ +

Méthodes

+ +

DOMPoint hérite des méthodes de son parent {{domxref("DOMPointReadOnly")}}.

+ +
+
{{domxref("DOMPointReadOnly.fromPoint")}}
+
Traduit la position/perspective d'un DOMPoint à une nouvelle position (ne semble pas encore être pris en charge).
+
+ +

Propriétés

+ +

DOMPoint hérite des propriétés de son parent {{domxref("DOMPointReadOnly")}}.

+ +
+
{{domxref("DOMPointReadOnly.x")}}
+
La coordonnée x du DOMPoint.
+
{{domxref("DOMPointReadOnly.y")}}
+
La coordonnée y du DOMPoint.
+
{{domxref("DOMPointReadOnly.z")}}
+
La coordonnée z du DOMPoint.
+
{{domxref("DOMPointReadOnly.w")}}
+
La valeur de perspective du DOMPoint.
+
+ +

Exemples

+ +

Dans l' API WebVR (VR = réalité virtuelle), les valeurs DOMPoint sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la  {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un DOMPoint. Notez ci-dessous l'utilisation de position.x, position.y et position.z.

+ +
function setView() {
+      var posState = gPositionSensor.getState();
+      if(posState.hasPosition) {
+        posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y"
+                                    + roundToTwo(posState.position.y) + " z"
+                                    + roundToTwo(posState.position.z);
+        xPos = -posState.position.x * WIDTH * 2;
+        yPos = posState.position.y * HEIGHT * 2;
+        if(-posState.position.z > 0.01) {
+          zPos = -posState.position.z;
+        } else {
+          zPos = 0.01;
+        }
+      }
+
+  ...
+
+}
+ +
+

Note : Voir notre positionsensorvrdevice demo pour le code complet.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}{{Spec2('Geometry Interfaces')}}Dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMPoint")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/dompointreadonly/index.html b/files/fr/web/api/dompointreadonly/index.html deleted file mode 100644 index f200ed1509..0000000000 --- a/files/fr/web/api/dompointreadonly/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: DOMPointReadOnly -slug: Web/API/DOMPointReadOnly -tags: - - API - - DOM - - Géométrie - - Interface - - Quadrilatère -translation_of: Web/API/DOMPointReadOnly ---- -

{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}

- -

L'interface DOMPointReadOnly spécifie les propriétés standard utilisées par {{domxref("DOMPoint")}} pour définir un point 2D ou 3D dans un système de coordonnées.

- -

Constructeur

- -
-
{{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}}
-
Défini pour créer un nouvel objet DOMPointReadOnly, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un  typeError "constructeur illégal" .
-
- -

Méthodes

- -
-
{{domxref("DOMPointReadOnly.fromPoint")}}
-
Traduit la position / perspective d'un DOMPoint à une nouvelle position (ne semble pas encore être pris en charge).
-
{{domxref("DOMPointReadOnly.matrixTransform")}}
-
Applique une transformation matricielle à un objet DOMPointReadOnly  (ne semble pas encore être pris en charge).
-
{{domxref("DOMPointReadOnly.toJSON()")}}
-
Renvoie une représentation JSON de l'objet DOMPointReadOnly.
-
- -

Propriétés

- -
-
{{domxref("DOMPointReadOnly.x")}} {{readonlyInline}}
-
La coordonnée x du DOMPoint.
-
{{domxref("DOMPointReadOnly.y")}} {{readonlyInline}}
-
La coordonnée y du DOMPoint.
-
{{domxref("DOMPointReadOnly.z")}} {{readonlyInline}}
-
La coordonnée z du DOMPoint.
-
{{domxref("DOMPointReadOnly.w")}} {{readonlyInline}}
-
La valeur de perspective du DOMPoint.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMPointReadOnly")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/dompointreadonly/index.md b/files/fr/web/api/dompointreadonly/index.md new file mode 100644 index 0000000000..f200ed1509 --- /dev/null +++ b/files/fr/web/api/dompointreadonly/index.md @@ -0,0 +1,74 @@ +--- +title: DOMPointReadOnly +slug: Web/API/DOMPointReadOnly +tags: + - API + - DOM + - Géométrie + - Interface + - Quadrilatère +translation_of: Web/API/DOMPointReadOnly +--- +

{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}

+ +

L'interface DOMPointReadOnly spécifie les propriétés standard utilisées par {{domxref("DOMPoint")}} pour définir un point 2D ou 3D dans un système de coordonnées.

+ +

Constructeur

+ +
+
{{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}}
+
Défini pour créer un nouvel objet DOMPointReadOnly, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un  typeError "constructeur illégal" .
+
+ +

Méthodes

+ +
+
{{domxref("DOMPointReadOnly.fromPoint")}}
+
Traduit la position / perspective d'un DOMPoint à une nouvelle position (ne semble pas encore être pris en charge).
+
{{domxref("DOMPointReadOnly.matrixTransform")}}
+
Applique une transformation matricielle à un objet DOMPointReadOnly  (ne semble pas encore être pris en charge).
+
{{domxref("DOMPointReadOnly.toJSON()")}}
+
Renvoie une représentation JSON de l'objet DOMPointReadOnly.
+
+ +

Propriétés

+ +
+
{{domxref("DOMPointReadOnly.x")}} {{readonlyInline}}
+
La coordonnée x du DOMPoint.
+
{{domxref("DOMPointReadOnly.y")}} {{readonlyInline}}
+
La coordonnée y du DOMPoint.
+
{{domxref("DOMPointReadOnly.z")}} {{readonlyInline}}
+
La coordonnée z du DOMPoint.
+
{{domxref("DOMPointReadOnly.w")}} {{readonlyInline}}
+
La valeur de perspective du DOMPoint.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMPointReadOnly")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/dompointreadonly/w/index.html b/files/fr/web/api/dompointreadonly/w/index.html deleted file mode 100644 index 6eab04af2c..0000000000 --- a/files/fr/web/api/dompointreadonly/w/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: DOMPoint.w -slug: Web/API/DOMPointReadOnly/w -tags: - - API - - Coordonnées - - DOM - - Géométrie - - Propriétés - - Quadrilatère - - W -translation_of: Web/API/DOMPointReadOnly/w ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule w de l'interface DOMPointReadOnly représente la perspective d'un point.

- -

Syntaxe

- -
var perspective = DOMPoint.w;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-w', 'w')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMPointReadOnly.w")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/dompointreadonly/w/index.md b/files/fr/web/api/dompointreadonly/w/index.md new file mode 100644 index 0000000000..6eab04af2c --- /dev/null +++ b/files/fr/web/api/dompointreadonly/w/index.md @@ -0,0 +1,51 @@ +--- +title: DOMPoint.w +slug: Web/API/DOMPointReadOnly/w +tags: + - API + - Coordonnées + - DOM + - Géométrie + - Propriétés + - Quadrilatère + - W +translation_of: Web/API/DOMPointReadOnly/w +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule w de l'interface DOMPointReadOnly représente la perspective d'un point.

+ +

Syntaxe

+ +
var perspective = DOMPoint.w;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-w', 'w')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMPointReadOnly.w")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/dompointreadonly/x/index.html b/files/fr/web/api/dompointreadonly/x/index.html deleted file mode 100644 index 77c78c54d4..0000000000 --- a/files/fr/web/api/dompointreadonly/x/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: DOMPoint.x -slug: Web/API/DOMPointReadOnly/x -tags: - - API - - Coordonnées - - DOM - - Géométrie - - Propriétés - - Quadrilatère - - x -translation_of: Web/API/DOMPointReadOnly/x ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule x de l'interface DOMPointReadOnly représente la coordonnée x d'un point.

- -

En général, x positif signifie à droite et négatif à gauche (par rapport à l'origine).

- -

Syntaxe

- -
var xPos = DOMPoint.x;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-x', 'x')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMPointReadOnly.x")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/dompointreadonly/x/index.md b/files/fr/web/api/dompointreadonly/x/index.md new file mode 100644 index 0000000000..77c78c54d4 --- /dev/null +++ b/files/fr/web/api/dompointreadonly/x/index.md @@ -0,0 +1,53 @@ +--- +title: DOMPoint.x +slug: Web/API/DOMPointReadOnly/x +tags: + - API + - Coordonnées + - DOM + - Géométrie + - Propriétés + - Quadrilatère + - x +translation_of: Web/API/DOMPointReadOnly/x +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule x de l'interface DOMPointReadOnly représente la coordonnée x d'un point.

+ +

En général, x positif signifie à droite et négatif à gauche (par rapport à l'origine).

+ +

Syntaxe

+ +
var xPos = DOMPoint.x;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-x', 'x')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMPointReadOnly.x")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/dompointreadonly/y/index.html b/files/fr/web/api/dompointreadonly/y/index.html deleted file mode 100644 index 74e42ccf0f..0000000000 --- a/files/fr/web/api/dompointreadonly/y/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: DOMPoint.y -slug: Web/API/DOMPointReadOnly/y -tags: - - API - - Coordonnées - - DOM - - Géométrie - - Propriétés - - Quadrilatère - - 'y' -translation_of: Web/API/DOMPointReadOnly/y ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule y de l'interface DOMPointReadOnly représente la coordonnée y d'un point.

- -

En général, y positif signifie en haut et négatif en bas (par rapport à l'origine).

- -

Syntaxe

- -
var yPos = DOMPoint.y;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-y', 'y')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMPointReadOnly.y")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/dompointreadonly/y/index.md b/files/fr/web/api/dompointreadonly/y/index.md new file mode 100644 index 0000000000..74e42ccf0f --- /dev/null +++ b/files/fr/web/api/dompointreadonly/y/index.md @@ -0,0 +1,53 @@ +--- +title: DOMPoint.y +slug: Web/API/DOMPointReadOnly/y +tags: + - API + - Coordonnées + - DOM + - Géométrie + - Propriétés + - Quadrilatère + - 'y' +translation_of: Web/API/DOMPointReadOnly/y +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule y de l'interface DOMPointReadOnly représente la coordonnée y d'un point.

+ +

En général, y positif signifie en haut et négatif en bas (par rapport à l'origine).

+ +

Syntaxe

+ +
var yPos = DOMPoint.y;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-y', 'y')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMPointReadOnly.y")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/dompointreadonly/z/index.html b/files/fr/web/api/dompointreadonly/z/index.html deleted file mode 100644 index 3befe72ac8..0000000000 --- a/files/fr/web/api/dompointreadonly/z/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: DOMPoint.z -slug: Web/API/DOMPointReadOnly/z -tags: - - API - - Coordonnées - - DOM - - Géométrie - - Point - - Propriétés - - Quadrilatère - - z -translation_of: Web/API/DOMPointReadOnly/z ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule z de l'interface DOMPointReadOnly représente la coordonnée z d'un point.

- -

En général, z positif signifie vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur) et négatif vers l'intérieur de l'écran (dans la même direction que l'utilisateur).

- -

Syntaxe

- -
var zPos = DOMPoint.z;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-z', 'z')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMPointReadOnly.z")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/dompointreadonly/z/index.md b/files/fr/web/api/dompointreadonly/z/index.md new file mode 100644 index 0000000000..3befe72ac8 --- /dev/null +++ b/files/fr/web/api/dompointreadonly/z/index.md @@ -0,0 +1,54 @@ +--- +title: DOMPoint.z +slug: Web/API/DOMPointReadOnly/z +tags: + - API + - Coordonnées + - DOM + - Géométrie + - Point + - Propriétés + - Quadrilatère + - z +translation_of: Web/API/DOMPointReadOnly/z +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule z de l'interface DOMPointReadOnly représente la coordonnée z d'un point.

+ +

En général, z positif signifie vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur) et négatif vers l'intérieur de l'écran (dans la même direction que l'utilisateur).

+ +

Syntaxe

+ +
var zPos = DOMPoint.z;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-z', 'z')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMPointReadOnly.z")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domquad/index.html b/files/fr/web/api/domquad/index.html deleted file mode 100644 index 2838177964..0000000000 --- a/files/fr/web/api/domquad/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: DOMQuad -slug: Web/API/DOMQuad -tags: - - API - - Coordonnées - - DOM - - Géométrie - - Interfaces - - Quadrilatère - - dimensions -translation_of: Web/API/DOMQuad ---- -

{{SeeCompatTable}}{{APIRef("Geometry Interfaces")}}

- -

Un DOMQuad est une collection de 4 DOMPoint définissant les coins d'un quadrilatère arbitraire. Renvoyer des DOMQuad permet à getBoxQuads() de retourner des informations précises, même lorsque des transformations 2D ou 3D arbitraires sont présentes. Il possède un attribut bounds pratique qui retourne un DOMRectReadOnly pour les cas où vous voulez juste un rectangle de délimitation aligné sur l'axe.

- -

Constructeur

- -
-
{{domxref("DOMQuad.DOMQuad()")}}
-
Crée un nouvel objet DOMQuad.
-
- -

Propriétés

- -
-
p1,p2,p3,p4 {{readonlyinline}}
-
sont des objets {{domxref("DOMPoint")}} pour chacun des 4 coins de l'objet DOMQuad.
-
- -

Méthode

- -
-
{{domxref("DOMQuad.fromRect()")}}
-
Renvoie un nouvel objet DOMQuad basé sur l'ensemble de coordonnées fournit.
-
{{domxref("DOMQuad.fromQuad()")}}
-
Renvoie un nouvel objet DOMQuad basé sur l'ensemble de coordonnées fournit.
-
{{domxref("DOMQuad.getBounds()")}}
-
Renvoie un objet {{domxref("DOMRect")}} avec les coordonnées et les dimensions de l'objet DOMQuad.
-
{{domxref("DOMQuad.toJSON()")}}
-
Renvoie une représentation JSON de l'objet DOMQuad.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces','#DOMQuad','DOMQuad')}}{{Spec2('Geometry Interfaces')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMQuad")}}

diff --git a/files/fr/web/api/domquad/index.md b/files/fr/web/api/domquad/index.md new file mode 100644 index 0000000000..2838177964 --- /dev/null +++ b/files/fr/web/api/domquad/index.md @@ -0,0 +1,64 @@ +--- +title: DOMQuad +slug: Web/API/DOMQuad +tags: + - API + - Coordonnées + - DOM + - Géométrie + - Interfaces + - Quadrilatère + - dimensions +translation_of: Web/API/DOMQuad +--- +

{{SeeCompatTable}}{{APIRef("Geometry Interfaces")}}

+ +

Un DOMQuad est une collection de 4 DOMPoint définissant les coins d'un quadrilatère arbitraire. Renvoyer des DOMQuad permet à getBoxQuads() de retourner des informations précises, même lorsque des transformations 2D ou 3D arbitraires sont présentes. Il possède un attribut bounds pratique qui retourne un DOMRectReadOnly pour les cas où vous voulez juste un rectangle de délimitation aligné sur l'axe.

+ +

Constructeur

+ +
+
{{domxref("DOMQuad.DOMQuad()")}}
+
Crée un nouvel objet DOMQuad.
+
+ +

Propriétés

+ +
+
p1,p2,p3,p4 {{readonlyinline}}
+
sont des objets {{domxref("DOMPoint")}} pour chacun des 4 coins de l'objet DOMQuad.
+
+ +

Méthode

+ +
+
{{domxref("DOMQuad.fromRect()")}}
+
Renvoie un nouvel objet DOMQuad basé sur l'ensemble de coordonnées fournit.
+
{{domxref("DOMQuad.fromQuad()")}}
+
Renvoie un nouvel objet DOMQuad basé sur l'ensemble de coordonnées fournit.
+
{{domxref("DOMQuad.getBounds()")}}
+
Renvoie un objet {{domxref("DOMRect")}} avec les coordonnées et les dimensions de l'objet DOMQuad.
+
{{domxref("DOMQuad.toJSON()")}}
+
Renvoie une représentation JSON de l'objet DOMQuad.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces','#DOMQuad','DOMQuad')}}{{Spec2('Geometry Interfaces')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMQuad")}}

diff --git a/files/fr/web/api/domrect/domrect/index.html b/files/fr/web/api/domrect/domrect/index.html deleted file mode 100644 index a138a60cd0..0000000000 --- a/files/fr/web/api/domrect/domrect/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: DOMRect.DOMRect() -slug: Web/API/DOMRect/DOMRect -tags: - - API - - Constructeurs - - DOM - - Géométrie - - Rectangle -translation_of: Web/API/DOMRect/DOMRect ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

Le constructeur DOMRect() crée un nouvel objet {{domxref("DOMRect")}}.

- -

Syntaxe

- -
var myDOMRect = new DOMRect(x, y, width, height);
- -

Paramètres

- -
-
x
-
La coordonnée x de l'orginie du DOMRect.
-
y
-
La coordonnée y de l'origine du DOMRect.
-
width
-
La largeur du DOMRect.
-
height
-
La hauteur du DOMRect.
-
- -

Exemples

- -

Pour créer un nouveau DOMPoint, vous pouvez exécuter une ligne de code telle que celle-ci :

- -
myDOMRect = new DOMRect(0,0,100,100);
-// l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
-// DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-domrectreadonlyx-y-width-height', 'DOMRect()')}}{{Spec2('Geometry Interfaces')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRect.DOMRect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrect/domrect/index.md b/files/fr/web/api/domrect/domrect/index.md new file mode 100644 index 0000000000..a138a60cd0 --- /dev/null +++ b/files/fr/web/api/domrect/domrect/index.md @@ -0,0 +1,68 @@ +--- +title: DOMRect.DOMRect() +slug: Web/API/DOMRect/DOMRect +tags: + - API + - Constructeurs + - DOM + - Géométrie + - Rectangle +translation_of: Web/API/DOMRect/DOMRect +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

Le constructeur DOMRect() crée un nouvel objet {{domxref("DOMRect")}}.

+ +

Syntaxe

+ +
var myDOMRect = new DOMRect(x, y, width, height);
+ +

Paramètres

+ +
+
x
+
La coordonnée x de l'orginie du DOMRect.
+
y
+
La coordonnée y de l'origine du DOMRect.
+
width
+
La largeur du DOMRect.
+
height
+
La hauteur du DOMRect.
+
+ +

Exemples

+ +

Pour créer un nouveau DOMPoint, vous pouvez exécuter une ligne de code telle que celle-ci :

+ +
myDOMRect = new DOMRect(0,0,100,100);
+// l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
+// DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-domrectreadonlyx-y-width-height', 'DOMRect()')}}{{Spec2('Geometry Interfaces')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRect.DOMRect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrect/index.html b/files/fr/web/api/domrect/index.html deleted file mode 100644 index a97d1c8d4e..0000000000 --- a/files/fr/web/api/domrect/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: DOMRect -slug: Web/API/DOMRect -tags: - - API - - DOM - - Géométrie - - Objets - - Rectangle -translation_of: Web/API/DOMRect ---- -

{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}

- -

Un DOMRect représente un rectangle.

- -

Le type de boîte représenté par le DOMRect est spécifié par la méthode ou la propriété qui l'a retourné. Par exemple, {{domxref("VREyeParameters.renderRect")}} de l'API WebVR spécifie la fenêtre d'un élément canvas dans laquelle le visuel pour un oeil doit être rendu.

- -

Il hérite de son parent {{domxref("DOMRectReadOnly")}}.

- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
{{domxref("DOMRect.DOMRect","DOMRect()")}}
-
Crée un nouvel objet DOMRect.
-
- -

Propriétés

- -
-
- -

DOMRect hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}}. À une différence près, elles ne sont plus en lecture seule.

- -
-
{{domxref("DOMRectReadOnly.x")}}
-
La coordonnée x de l'origine du DOMRect.
-
{{domxref("DOMRectReadOnly.y")}}
-
La coordonnée y de l'origine du DOMRect.
-
{{domxref("DOMRectReadOnly.width")}}
-
La largeur du DOMRect.
-
{{domxref("DOMRectReadOnly.height")}}
-
La hauteur du DOMRect.
-
{{domxref("DOMRectReadOnly.top")}}
-
Renvoie la valeur de la coordonnée supérieure de DOMRect (a la même valeur que y, ou y + height (y + hauteur) si height est négative).
-
{{domxref("DOMRectReadOnly.right")}}
-
Renvoie la valeur de la coordonnée droite du DOMRect (a la même valeur que  x + width (x + largeur), ou x si width est négative).
-
{{domxref("DOMRectReadOnly.bottom")}}
-
Renvoie la valeur de la coordonnée du bas du DOMRect (a la même valeur que  y + height (y + hauteur), ou y si height est négative).
-
{{domxref("DOMRectReadOnly.left")}}
-
Renvoie la valeur de la coordonnée de gauche du DOMRect (a la même valeur que x, ou x + width (x + largeur) si width est négative).
-
- -

Méthodes

- -

DOMRect hérite des méthodes de son parent {{domxref("DOMRectReadOnly")}}.

- -
-
{{domxref("DOMRectReadOnly.fromRect()")}}
-
Crée un nouvel objet DOMRect avec l'emplacement et les dimensions données.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect')}}{{Spec2('Geometry Interfaces')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrect/index.md b/files/fr/web/api/domrect/index.md new file mode 100644 index 0000000000..a97d1c8d4e --- /dev/null +++ b/files/fr/web/api/domrect/index.md @@ -0,0 +1,89 @@ +--- +title: DOMRect +slug: Web/API/DOMRect +tags: + - API + - DOM + - Géométrie + - Objets + - Rectangle +translation_of: Web/API/DOMRect +--- +

{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}

+ +

Un DOMRect représente un rectangle.

+ +

Le type de boîte représenté par le DOMRect est spécifié par la méthode ou la propriété qui l'a retourné. Par exemple, {{domxref("VREyeParameters.renderRect")}} de l'API WebVR spécifie la fenêtre d'un élément canvas dans laquelle le visuel pour un oeil doit être rendu.

+ +

Il hérite de son parent {{domxref("DOMRectReadOnly")}}.

+ +

{{InheritanceDiagram}}

+ +

Constructeur

+ +
+
{{domxref("DOMRect.DOMRect","DOMRect()")}}
+
Crée un nouvel objet DOMRect.
+
+ +

Propriétés

+ +
+
+ +

DOMRect hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}}. À une différence près, elles ne sont plus en lecture seule.

+ +
+
{{domxref("DOMRectReadOnly.x")}}
+
La coordonnée x de l'origine du DOMRect.
+
{{domxref("DOMRectReadOnly.y")}}
+
La coordonnée y de l'origine du DOMRect.
+
{{domxref("DOMRectReadOnly.width")}}
+
La largeur du DOMRect.
+
{{domxref("DOMRectReadOnly.height")}}
+
La hauteur du DOMRect.
+
{{domxref("DOMRectReadOnly.top")}}
+
Renvoie la valeur de la coordonnée supérieure de DOMRect (a la même valeur que y, ou y + height (y + hauteur) si height est négative).
+
{{domxref("DOMRectReadOnly.right")}}
+
Renvoie la valeur de la coordonnée droite du DOMRect (a la même valeur que  x + width (x + largeur), ou x si width est négative).
+
{{domxref("DOMRectReadOnly.bottom")}}
+
Renvoie la valeur de la coordonnée du bas du DOMRect (a la même valeur que  y + height (y + hauteur), ou y si height est négative).
+
{{domxref("DOMRectReadOnly.left")}}
+
Renvoie la valeur de la coordonnée de gauche du DOMRect (a la même valeur que x, ou x + width (x + largeur) si width est négative).
+
+ +

Méthodes

+ +

DOMRect hérite des méthodes de son parent {{domxref("DOMRectReadOnly")}}.

+ +
+
{{domxref("DOMRectReadOnly.fromRect()")}}
+
Crée un nouvel objet DOMRect avec l'emplacement et les dimensions données.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect')}}{{Spec2('Geometry Interfaces')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrectreadonly/bottom/index.html b/files/fr/web/api/domrectreadonly/bottom/index.html deleted file mode 100644 index 16fb24cd52..0000000000 --- a/files/fr/web/api/domrectreadonly/bottom/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: DOMRectReadOnly.bottom -slug: Web/API/DOMRectReadOnly/bottom -tags: - - API - - Bas - - DOM - - Géométrie - - Propriétés - - Rectangle -translation_of: Web/API/DOMRectReadOnly/bottom ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule bottom d'une interface DOMRectReadOnly renvoie la valeur des coordonnées du pied du DOMRect (a la même valeur que y + height (y + hauteur), ou y si height est négative).

- -

Syntaxe

- -
var recBottom = DOMRect.bottom;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-bottom', 'bottom')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRectReadOnly.bottom")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrectreadonly/bottom/index.md b/files/fr/web/api/domrectreadonly/bottom/index.md new file mode 100644 index 0000000000..16fb24cd52 --- /dev/null +++ b/files/fr/web/api/domrectreadonly/bottom/index.md @@ -0,0 +1,50 @@ +--- +title: DOMRectReadOnly.bottom +slug: Web/API/DOMRectReadOnly/bottom +tags: + - API + - Bas + - DOM + - Géométrie + - Propriétés + - Rectangle +translation_of: Web/API/DOMRectReadOnly/bottom +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule bottom d'une interface DOMRectReadOnly renvoie la valeur des coordonnées du pied du DOMRect (a la même valeur que y + height (y + hauteur), ou y si height est négative).

+ +

Syntaxe

+ +
var recBottom = DOMRect.bottom;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-bottom', 'bottom')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRectReadOnly.bottom")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrectreadonly/domrectreadonly/index.html b/files/fr/web/api/domrectreadonly/domrectreadonly/index.html deleted file mode 100644 index bb7039230b..0000000000 --- a/files/fr/web/api/domrectreadonly/domrectreadonly/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: DOMRectReadOnly() -slug: Web/API/DOMRectReadOnly/DOMRectReadOnly -tags: - - API - - Constructeurs - - DOM - - Géométrie - - Rectangle -translation_of: Web/API/DOMRectReadOnly/DOMRectReadOnly ---- -

{{APIRef("DOM")}}{{ SeeCompatTable }}

- -

Le constructeur DOMRectReadOnly() crée un nouvel objet {{domxref("DOMRectReadOnly")}}.

- -

Syntaxe

- -
var myDOMRectReadOnly = new DOMRectReadOnly(x, y, width, height);
- -

Paramètres

- -
-
x
-
La coordonnée x de l'origine d'un DOMRectReadOnly.
-
y
-
La coordonnée y de l'origine d'un DOMRectReadOnly.
-
width
-
La largeur d'un DOMRectReadOnly.
-
height
-
La hauteur d'un DOMRectReadOnly.
-
- -

Exemples

- -

Pour créer un nouveau DOMPoint, vous pouvez exécuter une ligne de code comme celle-ci :

- -
myDOMRect = new DOMRectReadOnly(0,0,100,100);
-// l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
-// DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect()')}}{{Spec2('Geometry Interfaces')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRectReadOnly.DOMRectReadOnly")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrectreadonly/domrectreadonly/index.md b/files/fr/web/api/domrectreadonly/domrectreadonly/index.md new file mode 100644 index 0000000000..bb7039230b --- /dev/null +++ b/files/fr/web/api/domrectreadonly/domrectreadonly/index.md @@ -0,0 +1,68 @@ +--- +title: DOMRectReadOnly() +slug: Web/API/DOMRectReadOnly/DOMRectReadOnly +tags: + - API + - Constructeurs + - DOM + - Géométrie + - Rectangle +translation_of: Web/API/DOMRectReadOnly/DOMRectReadOnly +--- +

{{APIRef("DOM")}}{{ SeeCompatTable }}

+ +

Le constructeur DOMRectReadOnly() crée un nouvel objet {{domxref("DOMRectReadOnly")}}.

+ +

Syntaxe

+ +
var myDOMRectReadOnly = new DOMRectReadOnly(x, y, width, height);
+ +

Paramètres

+ +
+
x
+
La coordonnée x de l'origine d'un DOMRectReadOnly.
+
y
+
La coordonnée y de l'origine d'un DOMRectReadOnly.
+
width
+
La largeur d'un DOMRectReadOnly.
+
height
+
La hauteur d'un DOMRectReadOnly.
+
+ +

Exemples

+ +

Pour créer un nouveau DOMPoint, vous pouvez exécuter une ligne de code comme celle-ci :

+ +
myDOMRect = new DOMRectReadOnly(0,0,100,100);
+// l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
+// DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect()')}}{{Spec2('Geometry Interfaces')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRectReadOnly.DOMRectReadOnly")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrectreadonly/height/index.html b/files/fr/web/api/domrectreadonly/height/index.html deleted file mode 100644 index e617faaa94..0000000000 --- a/files/fr/web/api/domrectreadonly/height/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: DOMRectReadOnly.height -slug: Web/API/DOMRectReadOnly/height -tags: - - API - - DOM - - Géométrie - - Hauteur - - Propriétés - - Rectangle -translation_of: Web/API/DOMRectReadOnly/height ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule height de l'interface of the DOMRectReadOnly représente la hauteur du DOMRect.

- -

Syntaxe

- -
var recHeight = DOMRect.height;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-height', 'height')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRectReadOnly.height")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrectreadonly/height/index.md b/files/fr/web/api/domrectreadonly/height/index.md new file mode 100644 index 0000000000..e617faaa94 --- /dev/null +++ b/files/fr/web/api/domrectreadonly/height/index.md @@ -0,0 +1,50 @@ +--- +title: DOMRectReadOnly.height +slug: Web/API/DOMRectReadOnly/height +tags: + - API + - DOM + - Géométrie + - Hauteur + - Propriétés + - Rectangle +translation_of: Web/API/DOMRectReadOnly/height +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule height de l'interface of the DOMRectReadOnly représente la hauteur du DOMRect.

+ +

Syntaxe

+ +
var recHeight = DOMRect.height;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-height', 'height')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRectReadOnly.height")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrectreadonly/index.html b/files/fr/web/api/domrectreadonly/index.html deleted file mode 100644 index 6a80fa9ce0..0000000000 --- a/files/fr/web/api/domrectreadonly/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: DOMRectReadOnly -slug: Web/API/DOMRectReadOnly -tags: - - API - - DOM Reference - - DOMRectReadOnly - - Experimental - - Geometry - - Rectangle - - Reference - - TopicStub -translation_of: Web/API/DOMRectReadOnly ---- -

{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}

- -

L'interface DOMRectReadOnly spécifie les propriétés standard utilisées par {{domxref("DOMRect")}} pour définir un rectangle.

- -

Constructeur

- -
-
{{domxref("DOMRectReadOnly.DOMRectReadOnly","DOMRectReadOnly()")}}
-
Défini pour créer un nouvel objet DOMRectReadOnly, mais notez que ce constructeur ne peut pas être appelé par JavaScript tiers: cela renvoie une erreur de type "Constructeur illégal".
-
- -

Propriétés

- -
-
- -
-
{{domxref("DOMRectReadOnly.x")}} {{readonlyInline}}
-
La coordonnée x de l'origine du DOMRect.
-
{{domxref("DOMRectReadOnly.y")}} {{readonlyInline}}
-
La coordonnée y de l'origine du DOMRect.
-
{{domxref("DOMRectReadOnly.width")}} {{readonlyInline}}
-
La largeur du DOMRect.
-
{{domxref("DOMRectReadOnly.height")}} {{readonlyInline}}
-
La hauteur du DOMRect.
-
{{domxref("DOMRectReadOnly.top")}} {{readonlyInline}}
-
Renvoie la valeur de coordonnée supérieur du DOMRect (généralement la même que y).
-
{{domxref("DOMRectReadOnly.right")}} {{readonlyInline}}
-
Renvoie la valeur de coordonnée droite du DOMRect (généralement identique à x + largeur).
-
{{domxref("DOMRectReadOnly.bottom")}} {{readonlyInline}}
-
Renvoie la valeur de coordonnée inférieur du DOMRect (généralement la même que y + hauteur).
-
{{domxref("DOMRectReadOnly.left")}} {{readonlyInline}}
-
Renvoie la valeur de coordonnée gauche du DOMRect (généralement la même que x).
-
- -

Méthodes

- -
-
{{domxref("DOMRectReadOnly.fromRect()")}}
-
Crée un nouvel objet DOMRect avec un emplacement et des dimensions donnés.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRectReadOnly')}}{{Spec2('Geometry Interfaces')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRectReadOnly")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrectreadonly/index.md b/files/fr/web/api/domrectreadonly/index.md new file mode 100644 index 0000000000..6a80fa9ce0 --- /dev/null +++ b/files/fr/web/api/domrectreadonly/index.md @@ -0,0 +1,82 @@ +--- +title: DOMRectReadOnly +slug: Web/API/DOMRectReadOnly +tags: + - API + - DOM Reference + - DOMRectReadOnly + - Experimental + - Geometry + - Rectangle + - Reference + - TopicStub +translation_of: Web/API/DOMRectReadOnly +--- +

{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}

+ +

L'interface DOMRectReadOnly spécifie les propriétés standard utilisées par {{domxref("DOMRect")}} pour définir un rectangle.

+ +

Constructeur

+ +
+
{{domxref("DOMRectReadOnly.DOMRectReadOnly","DOMRectReadOnly()")}}
+
Défini pour créer un nouvel objet DOMRectReadOnly, mais notez que ce constructeur ne peut pas être appelé par JavaScript tiers: cela renvoie une erreur de type "Constructeur illégal".
+
+ +

Propriétés

+ +
+
+ +
+
{{domxref("DOMRectReadOnly.x")}} {{readonlyInline}}
+
La coordonnée x de l'origine du DOMRect.
+
{{domxref("DOMRectReadOnly.y")}} {{readonlyInline}}
+
La coordonnée y de l'origine du DOMRect.
+
{{domxref("DOMRectReadOnly.width")}} {{readonlyInline}}
+
La largeur du DOMRect.
+
{{domxref("DOMRectReadOnly.height")}} {{readonlyInline}}
+
La hauteur du DOMRect.
+
{{domxref("DOMRectReadOnly.top")}} {{readonlyInline}}
+
Renvoie la valeur de coordonnée supérieur du DOMRect (généralement la même que y).
+
{{domxref("DOMRectReadOnly.right")}} {{readonlyInline}}
+
Renvoie la valeur de coordonnée droite du DOMRect (généralement identique à x + largeur).
+
{{domxref("DOMRectReadOnly.bottom")}} {{readonlyInline}}
+
Renvoie la valeur de coordonnée inférieur du DOMRect (généralement la même que y + hauteur).
+
{{domxref("DOMRectReadOnly.left")}} {{readonlyInline}}
+
Renvoie la valeur de coordonnée gauche du DOMRect (généralement la même que x).
+
+ +

Méthodes

+ +
+
{{domxref("DOMRectReadOnly.fromRect()")}}
+
Crée un nouvel objet DOMRect avec un emplacement et des dimensions donnés.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRectReadOnly')}}{{Spec2('Geometry Interfaces')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRectReadOnly")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrectreadonly/left/index.html b/files/fr/web/api/domrectreadonly/left/index.html deleted file mode 100644 index 63ef22ecf6..0000000000 --- a/files/fr/web/api/domrectreadonly/left/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: DOMRectReadOnly.left -slug: Web/API/DOMRectReadOnly/left -tags: - - API - - DOM - - Gauche - - Géométrie - - Propriétés - - Rectangle -translation_of: Web/API/DOMRectReadOnly/left ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule left de l'interface DOMRectReadOnly renvoie la valeur de la coordonnée gauche du DOMRect (a la même valeur que x, ou x + width (x + largeur) si width est négative).

- -

Syntaxe

- -
var recLeft = DOMRect.left;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-left', 'left')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRectReadOnly.left")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrectreadonly/left/index.md b/files/fr/web/api/domrectreadonly/left/index.md new file mode 100644 index 0000000000..63ef22ecf6 --- /dev/null +++ b/files/fr/web/api/domrectreadonly/left/index.md @@ -0,0 +1,50 @@ +--- +title: DOMRectReadOnly.left +slug: Web/API/DOMRectReadOnly/left +tags: + - API + - DOM + - Gauche + - Géométrie + - Propriétés + - Rectangle +translation_of: Web/API/DOMRectReadOnly/left +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule left de l'interface DOMRectReadOnly renvoie la valeur de la coordonnée gauche du DOMRect (a la même valeur que x, ou x + width (x + largeur) si width est négative).

+ +

Syntaxe

+ +
var recLeft = DOMRect.left;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-left', 'left')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRectReadOnly.left")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrectreadonly/right/index.html b/files/fr/web/api/domrectreadonly/right/index.html deleted file mode 100644 index 011e820cf3..0000000000 --- a/files/fr/web/api/domrectreadonly/right/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: DOMRectReadOnly.right -slug: Web/API/DOMRectReadOnly/right -tags: - - API - - DOM - - Droite - - Géométrie - - Propriétés - - Rectangle -translation_of: Web/API/DOMRectReadOnly/right ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule right de l'interface DOMRectReadOnly renvoie la valeur de la coordonnée droite du DOMRect. (a la même valeur que x + width (x + largeur), ou x si width est négative).

- -

Syntaxe

- -
var recRight = DOMRect.right;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-right', 'right')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRectReadOnly.right")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrectreadonly/right/index.md b/files/fr/web/api/domrectreadonly/right/index.md new file mode 100644 index 0000000000..011e820cf3 --- /dev/null +++ b/files/fr/web/api/domrectreadonly/right/index.md @@ -0,0 +1,50 @@ +--- +title: DOMRectReadOnly.right +slug: Web/API/DOMRectReadOnly/right +tags: + - API + - DOM + - Droite + - Géométrie + - Propriétés + - Rectangle +translation_of: Web/API/DOMRectReadOnly/right +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule right de l'interface DOMRectReadOnly renvoie la valeur de la coordonnée droite du DOMRect. (a la même valeur que x + width (x + largeur), ou x si width est négative).

+ +

Syntaxe

+ +
var recRight = DOMRect.right;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-right', 'right')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRectReadOnly.right")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrectreadonly/top/index.html b/files/fr/web/api/domrectreadonly/top/index.html deleted file mode 100644 index fa6b1644ef..0000000000 --- a/files/fr/web/api/domrectreadonly/top/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: DOMRectReadOnly.top -slug: Web/API/DOMRectReadOnly/top -tags: - - API - - DOM - - Géométrie - - Haut - - Propriétés - - Rectangle -translation_of: Web/API/DOMRectReadOnly/top ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule top de l'interface DOMRectReadOnly renvoie la valeur de la coordonnée haute du DOMRect. (A la même valeur que y, ou y + height (y + hauteur) si height est négative.)

- -

Syntaxe

- -
var recTop = DOMRect.top;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-top', 'top')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRectReadOnly.top")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrectreadonly/top/index.md b/files/fr/web/api/domrectreadonly/top/index.md new file mode 100644 index 0000000000..fa6b1644ef --- /dev/null +++ b/files/fr/web/api/domrectreadonly/top/index.md @@ -0,0 +1,50 @@ +--- +title: DOMRectReadOnly.top +slug: Web/API/DOMRectReadOnly/top +tags: + - API + - DOM + - Géométrie + - Haut + - Propriétés + - Rectangle +translation_of: Web/API/DOMRectReadOnly/top +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule top de l'interface DOMRectReadOnly renvoie la valeur de la coordonnée haute du DOMRect. (A la même valeur que y, ou y + height (y + hauteur) si height est négative.)

+ +

Syntaxe

+ +
var recTop = DOMRect.top;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-top', 'top')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRectReadOnly.top")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrectreadonly/width/index.html b/files/fr/web/api/domrectreadonly/width/index.html deleted file mode 100644 index 60b7427e0f..0000000000 --- a/files/fr/web/api/domrectreadonly/width/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: DOMRectReadOnly.width -slug: Web/API/DOMRectReadOnly/width -tags: - - API - - DOM - - Géométrie - - Largeur - - Propriétés - - Rectangle -translation_of: Web/API/DOMRectReadOnly/width ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule width de l'interface DOMRectReadOnly représente la largeur du DOMRect.

- -

Syntaxe

- -
var recWidth = DOMRect.width;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-width', 'width')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRectReadOnly.width")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrectreadonly/width/index.md b/files/fr/web/api/domrectreadonly/width/index.md new file mode 100644 index 0000000000..60b7427e0f --- /dev/null +++ b/files/fr/web/api/domrectreadonly/width/index.md @@ -0,0 +1,50 @@ +--- +title: DOMRectReadOnly.width +slug: Web/API/DOMRectReadOnly/width +tags: + - API + - DOM + - Géométrie + - Largeur + - Propriétés + - Rectangle +translation_of: Web/API/DOMRectReadOnly/width +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule width de l'interface DOMRectReadOnly représente la largeur du DOMRect.

+ +

Syntaxe

+ +
var recWidth = DOMRect.width;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-width', 'width')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRectReadOnly.width")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrectreadonly/x/index.html b/files/fr/web/api/domrectreadonly/x/index.html deleted file mode 100644 index 89aee41f8b..0000000000 --- a/files/fr/web/api/domrectreadonly/x/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: DOMRectReadOnly.x -slug: Web/API/DOMRectReadOnly/x -tags: - - API - - Coordonnées - - DOM - - Géométrie - - Propriétés - - Rectangle - - x -translation_of: Web/API/DOMRectReadOnly/x ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule x de l'interface DOMRectReadOnly représente la coordonnée x d' l'origine du DOMRect.

- -

Syntaxe

- -
var recX = DOMRect.x;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-x', 'x')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRectReadOnly.x")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrectreadonly/x/index.md b/files/fr/web/api/domrectreadonly/x/index.md new file mode 100644 index 0000000000..89aee41f8b --- /dev/null +++ b/files/fr/web/api/domrectreadonly/x/index.md @@ -0,0 +1,51 @@ +--- +title: DOMRectReadOnly.x +slug: Web/API/DOMRectReadOnly/x +tags: + - API + - Coordonnées + - DOM + - Géométrie + - Propriétés + - Rectangle + - x +translation_of: Web/API/DOMRectReadOnly/x +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule x de l'interface DOMRectReadOnly représente la coordonnée x d' l'origine du DOMRect.

+ +

Syntaxe

+ +
var recX = DOMRect.x;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-x', 'x')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRectReadOnly.x")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domrectreadonly/y/index.html b/files/fr/web/api/domrectreadonly/y/index.html deleted file mode 100644 index 4daf265c51..0000000000 --- a/files/fr/web/api/domrectreadonly/y/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: DOMRectReadOnly.y -slug: Web/API/DOMRectReadOnly/y -tags: - - API - - Coordonnées - - DOM - - Géométrie - - Propriétés - - Rectangle - - 'y' -translation_of: Web/API/DOMRectReadOnly/y ---- -

{{APIRef("DOM")}}{{ SeeCompatTable() }}

- -

La propriété en lecture seule y de l'interface DOMRectReadOnly représente la coordonnée y de l'origine du DOMRect.

- -

Syntaxe

- -
var recY = DOMRect.y;
- -

Valeur

- -

Un double.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-y', 'y')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
- -

Compatibilité des navigateurs

- -

{{Compat("api.DOMRectReadOnly.y")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/domrectreadonly/y/index.md b/files/fr/web/api/domrectreadonly/y/index.md new file mode 100644 index 0000000000..4daf265c51 --- /dev/null +++ b/files/fr/web/api/domrectreadonly/y/index.md @@ -0,0 +1,51 @@ +--- +title: DOMRectReadOnly.y +slug: Web/API/DOMRectReadOnly/y +tags: + - API + - Coordonnées + - DOM + - Géométrie + - Propriétés + - Rectangle + - 'y' +translation_of: Web/API/DOMRectReadOnly/y +--- +

{{APIRef("DOM")}}{{ SeeCompatTable() }}

+ +

La propriété en lecture seule y de l'interface DOMRectReadOnly représente la coordonnée y de l'origine du DOMRect.

+ +

Syntaxe

+ +
var recY = DOMRect.y;
+ +

Valeur

+ +

Un double.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-y', 'y')}}{{Spec2('Geometry Interfaces')}}La dernière version de la spécification est un ED.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DOMRectReadOnly.y")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domstring/binary/index.html b/files/fr/web/api/domstring/binary/index.html deleted file mode 100644 index c58db9b8c9..0000000000 --- a/files/fr/web/api/domstring/binary/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Chaîne de caractères binaire -slug: Web/API/DOMString/Binary -tags: - - Chaînes de caractères - - JavaScript - - binaire - - données -translation_of: Web/API/DOMString/Binary ---- -

En termes simples, une chaîne de caractères binaire est une séquence de 1 et de 0. JavaScript est chargé de riches fonctionnalités pour manipuler des données binaires brutes au niveau inférieur.

- -

Au fur et à mesure que les applications Web deviennent de plus en plus puissantes, ajoutant des fonctionnalités telles que la manipulation d'audio et de vidéo, l'accès aux données brutes à l'aide de WebSockets, etc., il apparaît clairement parfois que le code JavaScript peut être utile pour manipuler rapidement et facilement des données binaires brutes. Dans le passé, cela devait être simulé en traitant les données brutes string (chaîne de caractères) et en utilisant la méthode charCodeAt() pour lire les octets à partir des tampons de données.

- -

Cependant, ceci est lent et sujet aux erreurs, en raison du besoin de conversions multiples (en particulier si les données binaires ne sont pas réellement des données au format octet, mais, par exemple, des entiers ou des flottants de 32 bits).

- -

Un tableau typé en JavaScript fournit un mécanisme pour accèder aux données brutes binaires beaucoup plus efficacement. Le constructeur StringView Non native est un niveau au-dessus des tableaux typés et fournit une interface de type C pour les chaînes de caractères.

- -

Voir aussi

- - diff --git a/files/fr/web/api/domstring/binary/index.md b/files/fr/web/api/domstring/binary/index.md new file mode 100644 index 0000000000..c58db9b8c9 --- /dev/null +++ b/files/fr/web/api/domstring/binary/index.md @@ -0,0 +1,27 @@ +--- +title: Chaîne de caractères binaire +slug: Web/API/DOMString/Binary +tags: + - Chaînes de caractères + - JavaScript + - binaire + - données +translation_of: Web/API/DOMString/Binary +--- +

En termes simples, une chaîne de caractères binaire est une séquence de 1 et de 0. JavaScript est chargé de riches fonctionnalités pour manipuler des données binaires brutes au niveau inférieur.

+ +

Au fur et à mesure que les applications Web deviennent de plus en plus puissantes, ajoutant des fonctionnalités telles que la manipulation d'audio et de vidéo, l'accès aux données brutes à l'aide de WebSockets, etc., il apparaît clairement parfois que le code JavaScript peut être utile pour manipuler rapidement et facilement des données binaires brutes. Dans le passé, cela devait être simulé en traitant les données brutes string (chaîne de caractères) et en utilisant la méthode charCodeAt() pour lire les octets à partir des tampons de données.

+ +

Cependant, ceci est lent et sujet aux erreurs, en raison du besoin de conversions multiples (en particulier si les données binaires ne sont pas réellement des données au format octet, mais, par exemple, des entiers ou des flottants de 32 bits).

+ +

Un tableau typé en JavaScript fournit un mécanisme pour accèder aux données brutes binaires beaucoup plus efficacement. Le constructeur StringView Non native est un niveau au-dessus des tableaux typés et fournit une interface de type C pour les chaînes de caractères.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domstring/index.html b/files/fr/web/api/domstring/index.html deleted file mode 100644 index 7357eaec7a..0000000000 --- a/files/fr/web/api/domstring/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: DOMString -slug: Web/API/DOMString -tags: - - API - - Chaîne de caractères - - DOM - - Reference -translation_of: Web/API/DOMString ---- -

Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, DOMString est directement associé à String.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}Reformulation de la définition pour éviter quelques cas particuliers bizarres.
{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}{{Spec2('DOM3 Core')}}Aucun changement par rapport à {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM2 Core')}}Aucun changement par rapport à {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM1')}}Première définition
- -

Voir aussi

- - diff --git a/files/fr/web/api/domstring/index.md b/files/fr/web/api/domstring/index.md new file mode 100644 index 0000000000..7357eaec7a --- /dev/null +++ b/files/fr/web/api/domstring/index.md @@ -0,0 +1,53 @@ +--- +title: DOMString +slug: Web/API/DOMString +tags: + - API + - Chaîne de caractères + - DOM + - Reference +translation_of: Web/API/DOMString +--- +

Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, DOMString est directement associé à String.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}Reformulation de la définition pour éviter quelques cas particuliers bizarres.
{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}{{Spec2('DOM3 Core')}}Aucun changement par rapport à {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM2 Core')}}Aucun changement par rapport à {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM1')}}Première définition
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domstringlist/index.html b/files/fr/web/api/domstringlist/index.html deleted file mode 100644 index dd5850119c..0000000000 --- a/files/fr/web/api/domstringlist/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: DOMStringList -slug: Web/API/DOMStringList -tags: - - API - - Chaînes de caractères - - DOM - - Types -translation_of: Web/API/DOMStringList ---- -

{{ APIRef("DOM") }}

- -

Un type renvoyé par certaines API contenant une liste de DOMString (chaînes de caractères).

- -

Propriétés

- -
-
{{domxref("DOMStringList.length")}} {{ReadOnlyInline}}
-
Renvoie la longueur de la liste.
-
- -

Méthodes

- -
-
{{domxref("DOMStringList.item()")}}
-
Renvoie une {{domxref("DOMString")}} (chaîne de caractères).
-
{{domxref("DOMStringList.contains()")}}
-
Renvoie un {{jsxref("Boolean")}} (booléen) indiquant si la chaîne de caractères donnée est dans la liste.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}}{{Spec2("HTML WHATWG")}}Définition  initiale.
diff --git a/files/fr/web/api/domstringlist/index.md b/files/fr/web/api/domstringlist/index.md new file mode 100644 index 0000000000..dd5850119c --- /dev/null +++ b/files/fr/web/api/domstringlist/index.md @@ -0,0 +1,48 @@ +--- +title: DOMStringList +slug: Web/API/DOMStringList +tags: + - API + - Chaînes de caractères + - DOM + - Types +translation_of: Web/API/DOMStringList +--- +

{{ APIRef("DOM") }}

+ +

Un type renvoyé par certaines API contenant une liste de DOMString (chaînes de caractères).

+ +

Propriétés

+ +
+
{{domxref("DOMStringList.length")}} {{ReadOnlyInline}}
+
Renvoie la longueur de la liste.
+
+ +

Méthodes

+ +
+
{{domxref("DOMStringList.item()")}}
+
Renvoie une {{domxref("DOMString")}} (chaîne de caractères).
+
{{domxref("DOMStringList.contains()")}}
+
Renvoie un {{jsxref("Boolean")}} (booléen) indiquant si la chaîne de caractères donnée est dans la liste.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}}{{Spec2("HTML WHATWG")}}Définition  initiale.
diff --git a/files/fr/web/api/domtimestamp/index.html b/files/fr/web/api/domtimestamp/index.html deleted file mode 100644 index 6f9e563048..0000000000 --- a/files/fr/web/api/domtimestamp/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: DOMTimeStamp -slug: Web/API/DOMTimeStamp -tags: - - API - - DOM - - Référence DOM -translation_of: Web/API/DOMTimeStamp ---- -

{{APIRef("DOM")}}

- -

Le type DOMTimeStamp représente une quantité de millisecondes, exprimées de manière absolue ou relative, en fonction de la spécification dans laquelle il apparaît.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("WebIDL", "#common-DOMTimeStamp", "DOMTimeStamp")}}{{Spec2("WebIDL")}}Initial specification
diff --git a/files/fr/web/api/domtimestamp/index.md b/files/fr/web/api/domtimestamp/index.md new file mode 100644 index 0000000000..6f9e563048 --- /dev/null +++ b/files/fr/web/api/domtimestamp/index.md @@ -0,0 +1,31 @@ +--- +title: DOMTimeStamp +slug: Web/API/DOMTimeStamp +tags: + - API + - DOM + - Référence DOM +translation_of: Web/API/DOMTimeStamp +--- +

{{APIRef("DOM")}}

+ +

Le type DOMTimeStamp représente une quantité de millisecondes, exprimées de manière absolue ou relative, en fonction de la spécification dans laquelle il apparaît.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("WebIDL", "#common-DOMTimeStamp", "DOMTimeStamp")}}{{Spec2("WebIDL")}}Initial specification
diff --git a/files/fr/web/api/domtokenlist/add/index.html b/files/fr/web/api/domtokenlist/add/index.html deleted file mode 100644 index b274f15ac0..0000000000 --- a/files/fr/web/api/domtokenlist/add/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: DOMTokenList.add() -slug: Web/API/DOMTokenList/add -tags: - - API - - Ajout - - Chaînes de caractères - - DOM - - Listes - - Méthodes -translation_of: Web/API/DOMTokenList/add ---- -

{{APIRef("DOM")}}

- -

La méthode add() de l'interface {{domxref("DOMTokenList")}} ajoute  le token (marque) à la liste.

- -

Syntaxe

- -
tokenList.add(token1[, token2[, ...]]);
- -

Paramètres

- -
-
token
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la marque (token) que vous souhaitez ajouter à la liste.
-
- -

Valeur renvoyée

- -

Vide.

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que DOMTokenList, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la  liste et écrivons la liste dans un  {{domxref("Node.textContent")}} du <span>.

- -

Tout d'abord, le code HTML :

- -
<span class="a b c"></span>
- -

Maintenant, le JavaScript :

- -
var span = document.querySelector("span");
-var classes = span.classList;
-classes.add("d");
-span.textContent = classes;
-
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Vous pouvez ajouter plusieurs token :

- -
span.classList.add("d", "e", "f");
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.add")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/add/index.md b/files/fr/web/api/domtokenlist/add/index.md new file mode 100644 index 0000000000..b274f15ac0 --- /dev/null +++ b/files/fr/web/api/domtokenlist/add/index.md @@ -0,0 +1,75 @@ +--- +title: DOMTokenList.add() +slug: Web/API/DOMTokenList/add +tags: + - API + - Ajout + - Chaînes de caractères + - DOM + - Listes + - Méthodes +translation_of: Web/API/DOMTokenList/add +--- +

{{APIRef("DOM")}}

+ +

La méthode add() de l'interface {{domxref("DOMTokenList")}} ajoute  le token (marque) à la liste.

+ +

Syntaxe

+ +
tokenList.add(token1[, token2[, ...]]);
+ +

Paramètres

+ +
+
token
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la marque (token) que vous souhaitez ajouter à la liste.
+
+ +

Valeur renvoyée

+ +

Vide.

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que DOMTokenList, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la  liste et écrivons la liste dans un  {{domxref("Node.textContent")}} du <span>.

+ +

Tout d'abord, le code HTML :

+ +
<span class="a b c"></span>
+ +

Maintenant, le JavaScript :

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+classes.add("d");
+span.textContent = classes;
+
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Vous pouvez ajouter plusieurs token :

+ +
span.classList.add("d", "e", "f");
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.add")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/contains/index.html b/files/fr/web/api/domtokenlist/contains/index.html deleted file mode 100644 index 9954b4108f..0000000000 --- a/files/fr/web/api/domtokenlist/contains/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: DOMTokenList.contains() -slug: Web/API/DOMTokenList/contains -tags: - - API - - Chaînes de caractères - - DOM - - Listes - - Méthodes - - Recherche contenu -translation_of: Web/API/DOMTokenList/contains ---- -

{{APIRef("DOM")}}

- -

La méthode contains() de l'interface {{domxref("DOMTokenList")}} renvoie un {{domxref("Boolean")}} (booléen) — true (vrai) si la liste sous-jacente contient le symbole donné, sinon false (faux).

- -

Syntaxe

- -
tokenList.contains(token);
- -

Paramètres

- -
-
token
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la "token" (marque) dont vous voulez vérifier l'existence dans la liste.
-
- -

Valeur renvoyée

- -

Un {{domxref("Boolean")}} (booléen)— true (vrai) si la liste sous-jacente contient la marque donnée, sinon false (faux).

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous testons ensuite l'existence de "c" dans la liste, et écrivons le résultat dans le {{domxref("Node.textContent")}} du <span>.

- -

Tout d'abord, le code HTML :

- -
<span class="a b c"></span>
- -

Maintenant, le JavaScript :

- -
var span = document.querySelector("span");
-var classes = span.classList;
-var result = classes.contains("c");
-if(result) {
-  span.textContent = "The classList contains 'c'";
-} else {
-   span.textContent = "The classList does not contain 'c'";
-}
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-contains','contains()')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.contains")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/contains/index.md b/files/fr/web/api/domtokenlist/contains/index.md new file mode 100644 index 0000000000..9954b4108f --- /dev/null +++ b/files/fr/web/api/domtokenlist/contains/index.md @@ -0,0 +1,74 @@ +--- +title: DOMTokenList.contains() +slug: Web/API/DOMTokenList/contains +tags: + - API + - Chaînes de caractères + - DOM + - Listes + - Méthodes + - Recherche contenu +translation_of: Web/API/DOMTokenList/contains +--- +

{{APIRef("DOM")}}

+ +

La méthode contains() de l'interface {{domxref("DOMTokenList")}} renvoie un {{domxref("Boolean")}} (booléen) — true (vrai) si la liste sous-jacente contient le symbole donné, sinon false (faux).

+ +

Syntaxe

+ +
tokenList.contains(token);
+ +

Paramètres

+ +
+
token
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la "token" (marque) dont vous voulez vérifier l'existence dans la liste.
+
+ +

Valeur renvoyée

+ +

Un {{domxref("Boolean")}} (booléen)— true (vrai) si la liste sous-jacente contient la marque donnée, sinon false (faux).

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous testons ensuite l'existence de "c" dans la liste, et écrivons le résultat dans le {{domxref("Node.textContent")}} du <span>.

+ +

Tout d'abord, le code HTML :

+ +
<span class="a b c"></span>
+ +

Maintenant, le JavaScript :

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var result = classes.contains("c");
+if(result) {
+  span.textContent = "The classList contains 'c'";
+} else {
+   span.textContent = "The classList does not contain 'c'";
+}
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-contains','contains()')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.contains")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/entries/index.html b/files/fr/web/api/domtokenlist/entries/index.html deleted file mode 100644 index 8642f149aa..0000000000 --- a/files/fr/web/api/domtokenlist/entries/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: DOMTokenList.entries() -slug: Web/API/DOMTokenList/entries -tags: - - API - - Chaînes de caractères - - DOM - - Itérateurs - - Listes - - Méthodes -translation_of: Web/API/DOMTokenList/entries ---- -
{{APIRef("DOM")}}
- -

La méthode DOMTokenList.entries() renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. Les valeurs sont des objets {{domxref("DOMString")}} (chaînes de caractères), chacun représentant une seule marque.

- -

Syntaxe

- -
tokenList.entries();
- -

Valeur retournée

- -

Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant entries(), puis parcourons chacune d'entre elles en utilisant une boucle for ... of , et les écrivons dans un  {{domxref("Node.textContent")}}  du <span>.

- -

D'abord le HTML :

- -
<span class="a b c"></span>
- -

Maintenant le JavaScript :

- -
var span = document.querySelector("span");
-var classes = span.classList;
-var iterator = classes.entries();
-
-for(var value of iterator) {
-  span.textContent += value + ' ++ ';
-}
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-domtokenlist','entries() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.entries")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/domtokenlist/entries/index.md b/files/fr/web/api/domtokenlist/entries/index.md new file mode 100644 index 0000000000..8642f149aa --- /dev/null +++ b/files/fr/web/api/domtokenlist/entries/index.md @@ -0,0 +1,72 @@ +--- +title: DOMTokenList.entries() +slug: Web/API/DOMTokenList/entries +tags: + - API + - Chaînes de caractères + - DOM + - Itérateurs + - Listes + - Méthodes +translation_of: Web/API/DOMTokenList/entries +--- +
{{APIRef("DOM")}}
+ +

La méthode DOMTokenList.entries() renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. Les valeurs sont des objets {{domxref("DOMString")}} (chaînes de caractères), chacun représentant une seule marque.

+ +

Syntaxe

+ +
tokenList.entries();
+ +

Valeur retournée

+ +

Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant entries(), puis parcourons chacune d'entre elles en utilisant une boucle for ... of , et les écrivons dans un  {{domxref("Node.textContent")}}  du <span>.

+ +

D'abord le HTML :

+ +
<span class="a b c"></span>
+ +

Maintenant le JavaScript :

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.entries();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-domtokenlist','entries() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.entries")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domtokenlist/foreach/index.html b/files/fr/web/api/domtokenlist/foreach/index.html deleted file mode 100644 index 738ad80d7c..0000000000 --- a/files/fr/web/api/domtokenlist/foreach/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: DOMTokenList.forEach() -slug: Web/API/DOMTokenList/forEach -tags: - - API - - Boucle - - Chaînes de caractères - - DOM - - Itérateurs - - Méthodes - - Pour chaque -translation_of: Web/API/DOMTokenList/forEach ---- -

{{APIRef("DOM")}}

- -

La méthode forEach() de l'interface {{domxref("DOMTokenList")}} appelle le retour donné en paramètre, un pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.

- -

Syntaxe

- -
tokenList.forEach(callback);
-tokenList.forEach(callback, argument);
-
- -

Paramètres

- -
-
callback
-
Fonction à exécuter pour chaque élément, prenant éventuellement 3 arguments : -
-
currentValue
-
L'élément en cours de traitement dans le tableau.
-
currentIndex
-
L'index de l'élément en cours de traitement dans le tableau.
-
listObj
-
Le tableau que forEach() est en train d'appliquer.
-
-
-
argument {{Optional_inline}}
-
Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du callback (rappel).
-
- -

Valeur renvoyée

- -

{{jsxref('undefined')}} (indéfinie).

- -

Exemple

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec forEach() et écrivons chacune d'elles dans le  {{domxref("Node.textContent")}} du <span> pendant l'exécution de la fonction interne forEach().

- -

HTML

- -
<span class="a b c"></span>
- -

JavaScript

- -
var span = document.querySelector("span");
-var classes = span.classList;
-var iterator = classes.values();
-
-classes.forEach(
-  function(value, key, listObj) {
-    span.textContent += value + ' ' + key + "/" + this + '  ++  ';
-  },
-  "arg"
-);
- -

Résultat

- -

{{ EmbedLiveSample('Example', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-domtokenlist','forEach() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.forEach")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/domtokenlist/foreach/index.md b/files/fr/web/api/domtokenlist/foreach/index.md new file mode 100644 index 0000000000..738ad80d7c --- /dev/null +++ b/files/fr/web/api/domtokenlist/foreach/index.md @@ -0,0 +1,96 @@ +--- +title: DOMTokenList.forEach() +slug: Web/API/DOMTokenList/forEach +tags: + - API + - Boucle + - Chaînes de caractères + - DOM + - Itérateurs + - Méthodes + - Pour chaque +translation_of: Web/API/DOMTokenList/forEach +--- +

{{APIRef("DOM")}}

+ +

La méthode forEach() de l'interface {{domxref("DOMTokenList")}} appelle le retour donné en paramètre, un pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.

+ +

Syntaxe

+ +
tokenList.forEach(callback);
+tokenList.forEach(callback, argument);
+
+ +

Paramètres

+ +
+
callback
+
Fonction à exécuter pour chaque élément, prenant éventuellement 3 arguments : +
+
currentValue
+
L'élément en cours de traitement dans le tableau.
+
currentIndex
+
L'index de l'élément en cours de traitement dans le tableau.
+
listObj
+
Le tableau que forEach() est en train d'appliquer.
+
+
+
argument {{Optional_inline}}
+
Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du callback (rappel).
+
+ +

Valeur renvoyée

+ +

{{jsxref('undefined')}} (indéfinie).

+ +

Exemple

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec forEach() et écrivons chacune d'elles dans le  {{domxref("Node.textContent")}} du <span> pendant l'exécution de la fonction interne forEach().

+ +

HTML

+ +
<span class="a b c"></span>
+ +

JavaScript

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.values();
+
+classes.forEach(
+  function(value, key, listObj) {
+    span.textContent += value + ' ' + key + "/" + this + '  ++  ';
+  },
+  "arg"
+);
+ +

Résultat

+ +

{{ EmbedLiveSample('Example', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-domtokenlist','forEach() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.forEach")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domtokenlist/index.html b/files/fr/web/api/domtokenlist/index.html deleted file mode 100644 index 8f454506dd..0000000000 --- a/files/fr/web/api/domtokenlist/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: DOMTokenList -slug: Web/API/DOMTokenList -tags: - - API - - Chaînes de caractères - - DOM - - Interface - - Listes - - Marques -translation_of: Web/API/DOMTokenList ---- -
{{APIRef("DOM")}}
- -

L'interface DOMTokenList représente un ensemble de "token" (marques) séparées par un espace. On obtient un tel ensemble grâce aux propriétés {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} ou {{domxref("HTMLAreaElement.relList")}}. Les positions de cette liste sont numérotées à partir de 0. DOMTokenList est toujours sensible à la casse.

- -

Propriétés

- -
-
{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
-
Un entier qui représente le nombre d'objets qui sont stockés dans l'objet.
-
{{domxref("DOMTokenList.value")}} {{ReadOnlyInline}}
-
retourne la valeur de la liste comme une {{domxref("DOMString")}}  (chaîne de caractères).
-
- -

Méthodes

- -
-
{{domxref("DOMTokenList.item()")}}
-
renvoie un élément de la liste à partir de son index (ou {{jsxref("undefined")}} lorsque le nombre passé est supérieur ou égal à la longueur de la liste).
-
{{domxref("DOMTokenList.contains()")}}
-
renvoie true (vrai) si la chaîne de caractères contient la marque (token) passée en argument, false (faux) sinon.
-
{{domxref("DOMTokenList.add()")}}
-
ajoute une marque à la chaîne sous-jacente.
-
{{domxref("DOMTokenList.remove()")}}
-
retire une marque de la chaîne sous-jacente.
-
{{domxref("DOMTokenList.replace()")}}
-
remplace une marque existant par une nouvelle.
-
{{domxref("DOMTokenList.supports()")}}
-
renvoie true (vrai) si une marque passée en argument appartient bien aux marques prises en charge pour l'attribut correspondant.
-
{{domxref("DOMTokenList.toggle()")}}
-
retire une marque de la chaîne de caractères sous-jacente et renvoie false. Si la marque n'existe pas, elle est ajoutée et la méthode renvoie true.
-
{{domxref("DOMTokenList.entries()")}}
-
renvoie un {{jsxref("Iteration_protocols","itérateur","",1)}} qui permet de parcourir l'ensemble des clés/valeurs contenues dans cet objet.
-
{{domxref("DOMTokenList.forEach()")}}
-
exécute une fonction pour chaque élément de la DOMTokenList.
-
{{domxref("DOMTokenList.keys()")}}
-
renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des clés contenues dans cet objet.
-
{{domxref("DOMTokenList.values()")}}
-
renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des valeurs contenues dans cet objet.
-
- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément {{htmlelement("p")}} en tant que DOMTokenList en utilisant  {{domxref("Element.classList")}}, ajoutons une classe en utilisant  {{domxref("DOMTokenList.add()")}}, puis mettons à jour le {{domxref("Node.textContent")}} du <p> pour qu'il soit égal à la  DOMTokenList.

- -

D'abord HTML :

- -
<p class="a b c"></p>
- -

Puis Javascript :

- -
var para = document.querySelector("p");
-var classes = para.classList;
-para.classList.add("d");
-para.textContent = 'paragraph classList is "' + classes + '"';
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Découpage des espaces et suppression des doublons

- -

Les méthodes qui modifient la DOMTokenList (comme {{domxref("DOMTokenList.add()")}}) suppriment automatiquement les espaces en excès et les valeurs en double de la liste. Par exemple :

- -
<span class="    d   d e f"></span>
- -
var span = document.querySelector("span");
-var classes = span.classList;
-span.classList.add("x");
-span.textContent = 'span classList is "' + classes + '"';
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/domtokenlist/index.md b/files/fr/web/api/domtokenlist/index.md new file mode 100644 index 0000000000..8f454506dd --- /dev/null +++ b/files/fr/web/api/domtokenlist/index.md @@ -0,0 +1,114 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +tags: + - API + - Chaînes de caractères + - DOM + - Interface + - Listes + - Marques +translation_of: Web/API/DOMTokenList +--- +
{{APIRef("DOM")}}
+ +

L'interface DOMTokenList représente un ensemble de "token" (marques) séparées par un espace. On obtient un tel ensemble grâce aux propriétés {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} ou {{domxref("HTMLAreaElement.relList")}}. Les positions de cette liste sont numérotées à partir de 0. DOMTokenList est toujours sensible à la casse.

+ +

Propriétés

+ +
+
{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
+
Un entier qui représente le nombre d'objets qui sont stockés dans l'objet.
+
{{domxref("DOMTokenList.value")}} {{ReadOnlyInline}}
+
retourne la valeur de la liste comme une {{domxref("DOMString")}}  (chaîne de caractères).
+
+ +

Méthodes

+ +
+
{{domxref("DOMTokenList.item()")}}
+
renvoie un élément de la liste à partir de son index (ou {{jsxref("undefined")}} lorsque le nombre passé est supérieur ou égal à la longueur de la liste).
+
{{domxref("DOMTokenList.contains()")}}
+
renvoie true (vrai) si la chaîne de caractères contient la marque (token) passée en argument, false (faux) sinon.
+
{{domxref("DOMTokenList.add()")}}
+
ajoute une marque à la chaîne sous-jacente.
+
{{domxref("DOMTokenList.remove()")}}
+
retire une marque de la chaîne sous-jacente.
+
{{domxref("DOMTokenList.replace()")}}
+
remplace une marque existant par une nouvelle.
+
{{domxref("DOMTokenList.supports()")}}
+
renvoie true (vrai) si une marque passée en argument appartient bien aux marques prises en charge pour l'attribut correspondant.
+
{{domxref("DOMTokenList.toggle()")}}
+
retire une marque de la chaîne de caractères sous-jacente et renvoie false. Si la marque n'existe pas, elle est ajoutée et la méthode renvoie true.
+
{{domxref("DOMTokenList.entries()")}}
+
renvoie un {{jsxref("Iteration_protocols","itérateur","",1)}} qui permet de parcourir l'ensemble des clés/valeurs contenues dans cet objet.
+
{{domxref("DOMTokenList.forEach()")}}
+
exécute une fonction pour chaque élément de la DOMTokenList.
+
{{domxref("DOMTokenList.keys()")}}
+
renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des clés contenues dans cet objet.
+
{{domxref("DOMTokenList.values()")}}
+
renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des valeurs contenues dans cet objet.
+
+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément {{htmlelement("p")}} en tant que DOMTokenList en utilisant  {{domxref("Element.classList")}}, ajoutons une classe en utilisant  {{domxref("DOMTokenList.add()")}}, puis mettons à jour le {{domxref("Node.textContent")}} du <p> pour qu'il soit égal à la  DOMTokenList.

+ +

D'abord HTML :

+ +
<p class="a b c"></p>
+ +

Puis Javascript :

+ +
var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Découpage des espaces et suppression des doublons

+ +

Les méthodes qui modifient la DOMTokenList (comme {{domxref("DOMTokenList.add()")}}) suppriment automatiquement les espaces en excès et les valeurs en double de la liste. Par exemple :

+ +
<span class="    d   d e f"></span>
+ +
var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/domtokenlist/item/index.html b/files/fr/web/api/domtokenlist/item/index.html deleted file mode 100644 index c3f6c7dc17..0000000000 --- a/files/fr/web/api/domtokenlist/item/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: DOMTokenList.item() -slug: Web/API/DOMTokenList/item -tags: - - API - - Chaînes de caractères - - DOM - - Listes - - Méthodes -translation_of: Web/API/DOMTokenList/item ---- -

{{APIRef("DOM")}}

- -

La méthode item() de l'interface {{domxref("DOMTokenList")}} renvoie un élément de la liste par son index.

- -

Syntaxe

- -
tokenList.item(index);
- -

Paramètres

- -
-
index
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant l'index de l'élément dont on veut le retour.
-
- -

Valeur retournée

- -

Une {{domxref("DOMString")}} (chaîne de caractères) représentant l'élément renvoyé. Le retour est undefined (indéfini) si le nombre est plus grand que ou égal à la longueur de la liste.

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous récupérons le dernier élément dans la liste en utilisant item(length-1) et l'écrivons dans le {{domxref("Node.textContent")}} du <span>.

- -

D'abord le code HTML :

- -
<span class="a b c"></span>
- -

Maintenant le JavaScript :

- -
var span = document.querySelector("span");
-var classes = span.classList;
-var item = classes.item(classes.length-1);
-span.textContent = item;
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.item")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/item/index.md b/files/fr/web/api/domtokenlist/item/index.md new file mode 100644 index 0000000000..c3f6c7dc17 --- /dev/null +++ b/files/fr/web/api/domtokenlist/item/index.md @@ -0,0 +1,69 @@ +--- +title: DOMTokenList.item() +slug: Web/API/DOMTokenList/item +tags: + - API + - Chaînes de caractères + - DOM + - Listes + - Méthodes +translation_of: Web/API/DOMTokenList/item +--- +

{{APIRef("DOM")}}

+ +

La méthode item() de l'interface {{domxref("DOMTokenList")}} renvoie un élément de la liste par son index.

+ +

Syntaxe

+ +
tokenList.item(index);
+ +

Paramètres

+ +
+
index
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant l'index de l'élément dont on veut le retour.
+
+ +

Valeur retournée

+ +

Une {{domxref("DOMString")}} (chaîne de caractères) représentant l'élément renvoyé. Le retour est undefined (indéfini) si le nombre est plus grand que ou égal à la longueur de la liste.

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous récupérons le dernier élément dans la liste en utilisant item(length-1) et l'écrivons dans le {{domxref("Node.textContent")}} du <span>.

+ +

D'abord le code HTML :

+ +
<span class="a b c"></span>
+ +

Maintenant le JavaScript :

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var item = classes.item(classes.length-1);
+span.textContent = item;
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.item")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/keys/index.html b/files/fr/web/api/domtokenlist/keys/index.html deleted file mode 100644 index b707fae355..0000000000 --- a/files/fr/web/api/domtokenlist/keys/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: DOMTokenList.keys() -slug: Web/API/DOMTokenList/keys -tags: - - API - - Boucle - - Clés - - DOM - - Itérateur - - Listes - - Méthodes - - for of -translation_of: Web/API/DOMTokenList/keys ---- -

{{APIRef("DOM")}}

- -

La méthode keys() de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont de type unsigned integer (entier non signé).

- -

Syntaxe

- -
tokenList.keys();
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Ensuite nous récupérons un itérateur contenant les clés en utilisant values(), alors, nous itérons ces clés avec une boucle for ... of et écrivons chacune dans le {{domxref("Node.textContent")}} du <span>.

- -

D'abord, le HTML :

- -
<span class="a b c"></span>
- -

Maintenant le JavaScript:

- -
var span = document.querySelector("span");
-var classes = span.classList;
-var iterator = classes.keys();
-
-for(var value of iterator) {
-  span.textContent += value + ' ++ ';
-}
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-domtokenList','keys() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.keys")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/keys/index.md b/files/fr/web/api/domtokenlist/keys/index.md new file mode 100644 index 0000000000..b707fae355 --- /dev/null +++ b/files/fr/web/api/domtokenlist/keys/index.md @@ -0,0 +1,72 @@ +--- +title: DOMTokenList.keys() +slug: Web/API/DOMTokenList/keys +tags: + - API + - Boucle + - Clés + - DOM + - Itérateur + - Listes + - Méthodes + - for of +translation_of: Web/API/DOMTokenList/keys +--- +

{{APIRef("DOM")}}

+ +

La méthode keys() de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont de type unsigned integer (entier non signé).

+ +

Syntaxe

+ +
tokenList.keys();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur retournée

+ +

Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Ensuite nous récupérons un itérateur contenant les clés en utilisant values(), alors, nous itérons ces clés avec une boucle for ... of et écrivons chacune dans le {{domxref("Node.textContent")}} du <span>.

+ +

D'abord, le HTML :

+ +
<span class="a b c"></span>
+ +

Maintenant le JavaScript:

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.keys();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-domtokenList','keys() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.keys")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/length/index.html b/files/fr/web/api/domtokenlist/length/index.html deleted file mode 100644 index 1e21b1727f..0000000000 --- a/files/fr/web/api/domtokenlist/length/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: DOMTokenList.length -slug: Web/API/DOMTokenList/length -tags: - - API - - DOM - - Listes - - Longueur - - Propriétés -translation_of: Web/API/DOMTokenList/length ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule length (longueur) de l'interface {{domxref("DOMTokenList")}} est un integer (entier) représentant le nombre d'objets stockés dans la liste.

- -

Syntaxe

- -
tokenList.length;
- -

Value

- -

Un integer (entier).

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}, puis écrivons la longueur (length) de la liste dans le {{domxref("Node.textContent")}} du <span>.

- -

D'abord le HTML:

- -
<span class="a b c"></span>
- -

Maintenant le JavaScript:

- -
var span = document.querySelector("span");
-var classes = span.classList;
-var length = classes.length;
-
-span.textContent = 'classList length = ' + length;
-
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.length")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/length/index.md b/files/fr/web/api/domtokenlist/length/index.md new file mode 100644 index 0000000000..1e21b1727f --- /dev/null +++ b/files/fr/web/api/domtokenlist/length/index.md @@ -0,0 +1,64 @@ +--- +title: DOMTokenList.length +slug: Web/API/DOMTokenList/length +tags: + - API + - DOM + - Listes + - Longueur + - Propriétés +translation_of: Web/API/DOMTokenList/length +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule length (longueur) de l'interface {{domxref("DOMTokenList")}} est un integer (entier) représentant le nombre d'objets stockés dans la liste.

+ +

Syntaxe

+ +
tokenList.length;
+ +

Value

+ +

Un integer (entier).

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}, puis écrivons la longueur (length) de la liste dans le {{domxref("Node.textContent")}} du <span>.

+ +

D'abord le HTML:

+ +
<span class="a b c"></span>
+ +

Maintenant le JavaScript:

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var length = classes.length;
+
+span.textContent = 'classList length = ' + length;
+
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.length")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/remove/index.html b/files/fr/web/api/domtokenlist/remove/index.html deleted file mode 100644 index b68c42de55..0000000000 --- a/files/fr/web/api/domtokenlist/remove/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: DOMTokenList.remove() -slug: Web/API/DOMTokenList/remove -tags: - - API - - DOM - - Listes - - Méthodes - - Suppression -translation_of: Web/API/DOMTokenList/remove ---- -

{{APIRef("DOM")}}

- -

La méthode remove() de l'interface {{domxref("DOMTokenList")}} supprime sur la liste la marque (token) spécifiée.

- -

Syntaxe

- -
tokenList.remove(token1[, token2[, ...]]);
- -

Paramètres

- -
-
tokenN...
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la marque que vous voulez supprimer sur la liste. Si la chaîne de caractères n'existe pas sur la liste, aucune erreur n'est levée et rien ne se passe.
-
- -

Valeur retournée

- -

Vide.

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies dans l'élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous retirons ensuite une marque sur la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <span>.

- -

D'abord, le HTML :

- -
<span class="a b c"></span>
- -

Maintenant le JavaScript :

- -
var span = document.querySelector("span");
-var classes = span.classList;
-classes.remove("c");
-span.textContent = classes;
-
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (array) avec la syntaxe de décomposition. L'ordre des classes n'a pas d'importance :

- -
let span = document.getElementsByTagName("span")[0],
-  classes = span.classList;
-
-classes.remove(...['c', 'b']);
-span.textContent = classes;
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.remove")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/remove/index.md b/files/fr/web/api/domtokenlist/remove/index.md new file mode 100644 index 0000000000..b68c42de55 --- /dev/null +++ b/files/fr/web/api/domtokenlist/remove/index.md @@ -0,0 +1,79 @@ +--- +title: DOMTokenList.remove() +slug: Web/API/DOMTokenList/remove +tags: + - API + - DOM + - Listes + - Méthodes + - Suppression +translation_of: Web/API/DOMTokenList/remove +--- +

{{APIRef("DOM")}}

+ +

La méthode remove() de l'interface {{domxref("DOMTokenList")}} supprime sur la liste la marque (token) spécifiée.

+ +

Syntaxe

+ +
tokenList.remove(token1[, token2[, ...]]);
+ +

Paramètres

+ +
+
tokenN...
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la marque que vous voulez supprimer sur la liste. Si la chaîne de caractères n'existe pas sur la liste, aucune erreur n'est levée et rien ne se passe.
+
+ +

Valeur retournée

+ +

Vide.

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies dans l'élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous retirons ensuite une marque sur la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <span>.

+ +

D'abord, le HTML :

+ +
<span class="a b c"></span>
+ +

Maintenant le JavaScript :

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+classes.remove("c");
+span.textContent = classes;
+
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (array) avec la syntaxe de décomposition. L'ordre des classes n'a pas d'importance :

+ +
let span = document.getElementsByTagName("span")[0],
+  classes = span.classList;
+
+classes.remove(...['c', 'b']);
+span.textContent = classes;
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.remove")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/replace/index.html b/files/fr/web/api/domtokenlist/replace/index.html deleted file mode 100644 index e3c1d8d799..0000000000 --- a/files/fr/web/api/domtokenlist/replace/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: DOMTokenList.replace() -slug: Web/API/DOMTokenList/replace -tags: - - API - - DOM - - Listes - - Méthodes - - Remplacement -translation_of: Web/API/DOMTokenList/replace ---- -

{{APIRef("DOM")}}

- -

La méthode replace() de l'interface {{domxref("DOMTokenList")}} remplace une marque (token) existante par une nouvelle marque.

- -

Syntaxe

- -
tokenList.replace(oldToken,newToken);
- -

Paramètres

- -
-
oldToken
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la marque que vous voulez remplacer.
-
newToken
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la marque avec laquelle vous voulez remplacer l'ancienne.
-
- -

Valeur retournée

- -

Vide.

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors la marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <span>.

- -

D'abord, le HTML :

- -
<span class="a b c"></span>
- -

Maintenant le JavaScript :

- -
var span = document.querySelector("span");
-var classes = span.classList;
-try {
-  classes.replace("c", "z");
-  span.textContent = classes;
-} catch(e) {
-  span.textContent = e;
-}
-
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.replace")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/replace/index.md b/files/fr/web/api/domtokenlist/replace/index.md new file mode 100644 index 0000000000..e3c1d8d799 --- /dev/null +++ b/files/fr/web/api/domtokenlist/replace/index.md @@ -0,0 +1,76 @@ +--- +title: DOMTokenList.replace() +slug: Web/API/DOMTokenList/replace +tags: + - API + - DOM + - Listes + - Méthodes + - Remplacement +translation_of: Web/API/DOMTokenList/replace +--- +

{{APIRef("DOM")}}

+ +

La méthode replace() de l'interface {{domxref("DOMTokenList")}} remplace une marque (token) existante par une nouvelle marque.

+ +

Syntaxe

+ +
tokenList.replace(oldToken,newToken);
+ +

Paramètres

+ +
+
oldToken
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la marque que vous voulez remplacer.
+
newToken
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la marque avec laquelle vous voulez remplacer l'ancienne.
+
+ +

Valeur retournée

+ +

Vide.

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors la marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <span>.

+ +

D'abord, le HTML :

+ +
<span class="a b c"></span>
+ +

Maintenant le JavaScript :

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+try {
+  classes.replace("c", "z");
+  span.textContent = classes;
+} catch(e) {
+  span.textContent = e;
+}
+
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.replace")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/supports/index.html b/files/fr/web/api/domtokenlist/supports/index.html deleted file mode 100644 index b9fb5ea4cf..0000000000 --- a/files/fr/web/api/domtokenlist/supports/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: DOMTokenList.supports() -slug: Web/API/DOMTokenList/supports -tags: - - API - - DOM - - Méthodes -translation_of: Web/API/DOMTokenList/supports ---- -

{{APIRef("DOM")}}{{SeeCompatTable}}

- -

La méthode supports() de l'interface {{domxref("DOMTokenList")}} renvoie true (vrai) si une marque (token) donnée se trouve parmi les marques prises en charge dans l'attribut associé. Cette méthode est destinée à la détection des fonctionnalités.

- -

Syntaxe

- -
var boolean = element.supports(token)
- -

Paramètres

- -
-
token
-
Une {{domxref("DOMString")}} (chaîne de caractères) contenant la marque à interroger.
-
- -

Renvoie

- -

un {{jsxref("Boolean")}} (booléen) indiquant si la marque a été trouvée.

- -

Exemple

- -
var iframe = document.getElementById('display');
-if (iframe.sandbox.supports('an-upcoming-feature')) {
-  // code de support pour la future et mystérieuse fonctionnalité
-} else {
-  // code de secours
-}
-
-if (iframe.sandbox.supports('allow-scripts')) {
-  // instruction cadre de l'exécution de JavaScript
-   // NOTE: ceci fonctionne bien mais est juste un exemple!
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.supports")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/supports/index.md b/files/fr/web/api/domtokenlist/supports/index.md new file mode 100644 index 0000000000..b9fb5ea4cf --- /dev/null +++ b/files/fr/web/api/domtokenlist/supports/index.md @@ -0,0 +1,62 @@ +--- +title: DOMTokenList.supports() +slug: Web/API/DOMTokenList/supports +tags: + - API + - DOM + - Méthodes +translation_of: Web/API/DOMTokenList/supports +--- +

{{APIRef("DOM")}}{{SeeCompatTable}}

+ +

La méthode supports() de l'interface {{domxref("DOMTokenList")}} renvoie true (vrai) si une marque (token) donnée se trouve parmi les marques prises en charge dans l'attribut associé. Cette méthode est destinée à la détection des fonctionnalités.

+ +

Syntaxe

+ +
var boolean = element.supports(token)
+ +

Paramètres

+ +
+
token
+
Une {{domxref("DOMString")}} (chaîne de caractères) contenant la marque à interroger.
+
+ +

Renvoie

+ +

un {{jsxref("Boolean")}} (booléen) indiquant si la marque a été trouvée.

+ +

Exemple

+ +
var iframe = document.getElementById('display');
+if (iframe.sandbox.supports('an-upcoming-feature')) {
+  // code de support pour la future et mystérieuse fonctionnalité
+} else {
+  // code de secours
+}
+
+if (iframe.sandbox.supports('allow-scripts')) {
+  // instruction cadre de l'exécution de JavaScript
+   // NOTE: ceci fonctionne bien mais est juste un exemple!
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.supports")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/toggle/index.html b/files/fr/web/api/domtokenlist/toggle/index.html deleted file mode 100644 index ef036a01e7..0000000000 --- a/files/fr/web/api/domtokenlist/toggle/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: DOMTokenList.toggle() -slug: Web/API/DOMTokenList/toggle -tags: - - API - - Basculement - - DOM - - Listes - - Méthodes -translation_of: Web/API/DOMTokenList/toggle ---- -

{{APIRef("DOM")}}

- -

La méthode toggle() (bascule) de l'interface {{domxref("DOMTokenList")}} supprime une marque (token) donnée de la liste et renvoie false (faux). Si token n'existe pas, il est ajouté et la fonction renvoie true.

- -

Syntaxe

- -
tokenList.toggle(token, force);
- -

Paramètres

- -
-
token
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la marque que l'on veut activer.
-
force {{optional_inline}}
-
Un {{domxref("Boolean")}} (booléen) qui, si inclus, transforme la bascule (toggle) en opération unique. Si elle est définie false (faux), la marque sera seulement supprimée et aucun ajout ne suivra. Si elle est définie true (vrai), la marque sera seulement ajoutée et pas supprimée après.
-
- -

Valeur retournée

- -

Un {{domxref("Boolean")}} (booléen) — false (faux) si la marque n'est pas dans la liste après l'appel ou true (vrai) si elle y est.

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors une marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <span>.

- -

D'abord, le HTML :

- -
<span class="a b">classList is 'a b'</span>
- -

Maintenant le JavaScript :

- -
var span = document.querySelector("span");
-var classes = span.classList;
-span.onclick = function() {
-  var result = classes.toggle("c");
-  if(result) {
-    span.textContent = "'c' added; classList is now '" + classes + "'.";
-  } else {
-    span.textContent = "'c' removed; classList is now '" + classes + "'.";
-  }
-}
-
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.toggle")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/toggle/index.md b/files/fr/web/api/domtokenlist/toggle/index.md new file mode 100644 index 0000000000..ef036a01e7 --- /dev/null +++ b/files/fr/web/api/domtokenlist/toggle/index.md @@ -0,0 +1,78 @@ +--- +title: DOMTokenList.toggle() +slug: Web/API/DOMTokenList/toggle +tags: + - API + - Basculement + - DOM + - Listes + - Méthodes +translation_of: Web/API/DOMTokenList/toggle +--- +

{{APIRef("DOM")}}

+ +

La méthode toggle() (bascule) de l'interface {{domxref("DOMTokenList")}} supprime une marque (token) donnée de la liste et renvoie false (faux). Si token n'existe pas, il est ajouté et la fonction renvoie true.

+ +

Syntaxe

+ +
tokenList.toggle(token, force);
+ +

Paramètres

+ +
+
token
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la marque que l'on veut activer.
+
force {{optional_inline}}
+
Un {{domxref("Boolean")}} (booléen) qui, si inclus, transforme la bascule (toggle) en opération unique. Si elle est définie false (faux), la marque sera seulement supprimée et aucun ajout ne suivra. Si elle est définie true (vrai), la marque sera seulement ajoutée et pas supprimée après.
+
+ +

Valeur retournée

+ +

Un {{domxref("Boolean")}} (booléen) — false (faux) si la marque n'est pas dans la liste après l'appel ou true (vrai) si elle y est.

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors une marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <span>.

+ +

D'abord, le HTML :

+ +
<span class="a b">classList is 'a b'</span>
+ +

Maintenant le JavaScript :

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+span.onclick = function() {
+  var result = classes.toggle("c");
+  if(result) {
+    span.textContent = "'c' added; classList is now '" + classes + "'.";
+  } else {
+    span.textContent = "'c' removed; classList is now '" + classes + "'.";
+  }
+}
+
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.toggle")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/value/index.html b/files/fr/web/api/domtokenlist/value/index.html deleted file mode 100644 index da23f74aaf..0000000000 --- a/files/fr/web/api/domtokenlist/value/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: DOMTokenList.value -slug: Web/API/DOMTokenList/value -tags: - - API - - DOM - - Méthodes - - Valeur -translation_of: Web/API/DOMTokenList/value ---- -

{{APIRef("DOM")}}

- -

La propriété value (valeur) de l'interface {{domxref("DOMTokenList")}} renvoie la valeur de la liste en tant que {{domxref("DOMString")}} (chaîne de caractères), ou efface et définit la liste à la valeur donnée.

- -

Syntaxe

- -
tokenList.value;
- -

Valeur

- -

Une {{domxref("DOMString")}} (chaîne de caractères).

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}, puis écrivons alors la valeur de la liste dans le {{domxref("Node.textContent")}} du <span>.

- -

D'abord le HTML :

- -
<span class="a b c"></span>
- -

Maintenant le JavaScript :

- -
var span = document.querySelector("span");
-var classes = span.classList;
-span.textContent = classes.value;
-
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-value','value')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.value")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/value/index.md b/files/fr/web/api/domtokenlist/value/index.md new file mode 100644 index 0000000000..da23f74aaf --- /dev/null +++ b/files/fr/web/api/domtokenlist/value/index.md @@ -0,0 +1,61 @@ +--- +title: DOMTokenList.value +slug: Web/API/DOMTokenList/value +tags: + - API + - DOM + - Méthodes + - Valeur +translation_of: Web/API/DOMTokenList/value +--- +

{{APIRef("DOM")}}

+ +

La propriété value (valeur) de l'interface {{domxref("DOMTokenList")}} renvoie la valeur de la liste en tant que {{domxref("DOMString")}} (chaîne de caractères), ou efface et définit la liste à la valeur donnée.

+ +

Syntaxe

+ +
tokenList.value;
+ +

Valeur

+ +

Une {{domxref("DOMString")}} (chaîne de caractères).

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}, puis écrivons alors la valeur de la liste dans le {{domxref("Node.textContent")}} du <span>.

+ +

D'abord le HTML :

+ +
<span class="a b c"></span>
+ +

Maintenant le JavaScript :

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+span.textContent = classes.value;
+
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-domtokenlist-value','value')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.value")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/values/index.html b/files/fr/web/api/domtokenlist/values/index.html deleted file mode 100644 index 294f75dd1c..0000000000 --- a/files/fr/web/api/domtokenlist/values/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: DOMTokenList.values() -slug: Web/API/DOMTokenList/values -tags: - - API - - DOM - - Itérateurs - - Listes - - Méthodes - - Valeurs -translation_of: Web/API/DOMTokenList/values ---- -

{{APIRef("DOM")}}

- -

La méthode values() (valeurs) de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant aux développeurs de passer en revue toutes les valeurs contenues dans la DOMTokenList. Individuellement, les valeurs sont des objets {{domxref("DOMString")}} (chaînes de caractères).

- -

Syntaxe

- -
tokenList.values();
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

- -

Exemples

- -

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Si nous récupérons un itérateur contenant les valeurs en utilisant values(), nous les itérons alors en utilisant une boucle for ... of et écrivons chacune dans le {{domxref("Node.textContent")}} du <span>.

- -

D'abord, le HTML :

- -
<span class="a b c"></span>
- -

Maintenant le JavaScript :

- -
var span = document.querySelector("span");
-var classes = span.classList;
-var iterator = classes.values();
-
-for(var value of iterator) {
-  span.textContent += value + ' ++ ';
-}
- -

La sortie ressemble à ceci :

- -

{{ EmbedLiveSample('Examples', '100%', 60) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-domtokenList','values() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -
{{Compat("api.DOMTokenList.values")}}
\ No newline at end of file diff --git a/files/fr/web/api/domtokenlist/values/index.md b/files/fr/web/api/domtokenlist/values/index.md new file mode 100644 index 0000000000..294f75dd1c --- /dev/null +++ b/files/fr/web/api/domtokenlist/values/index.md @@ -0,0 +1,70 @@ +--- +title: DOMTokenList.values() +slug: Web/API/DOMTokenList/values +tags: + - API + - DOM + - Itérateurs + - Listes + - Méthodes + - Valeurs +translation_of: Web/API/DOMTokenList/values +--- +

{{APIRef("DOM")}}

+ +

La méthode values() (valeurs) de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant aux développeurs de passer en revue toutes les valeurs contenues dans la DOMTokenList. Individuellement, les valeurs sont des objets {{domxref("DOMString")}} (chaînes de caractères).

+ +

Syntaxe

+ +
tokenList.values();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur retournée

+ +

Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

+ +

Exemples

+ +

Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que DOMTokenList en utilisant {{domxref("Element.classList")}}. Si nous récupérons un itérateur contenant les valeurs en utilisant values(), nous les itérons alors en utilisant une boucle for ... of et écrivons chacune dans le {{domxref("Node.textContent")}} du <span>.

+ +

D'abord, le HTML :

+ +
<span class="a b c"></span>
+ +

Maintenant le JavaScript :

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.values();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}
+ +

La sortie ressemble à ceci :

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-domtokenList','values() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.DOMTokenList.values")}}
\ No newline at end of file diff --git a/files/fr/web/api/effecttiming/delay/index.html b/files/fr/web/api/effecttiming/delay/index.html deleted file mode 100644 index 82ec0c5c0c..0000000000 --- a/files/fr/web/api/effecttiming/delay/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Delay -slug: Web/API/EffectTiming/delay -tags: - - API - - Animation - - AnimationEffectTimingProperties - - Experimental - - Propriété - - Reference -translation_of: Web/API/EffectTiming/delay -original_slug: Web/API/AnimationEffectTimingProperties/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

- -

{{Compat("api.EffectTiming.delay")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/effecttiming/delay/index.md b/files/fr/web/api/effecttiming/delay/index.md new file mode 100644 index 0000000000..82ec0c5c0c --- /dev/null +++ b/files/fr/web/api/effecttiming/delay/index.md @@ -0,0 +1,87 @@ +--- +title: Delay +slug: Web/API/EffectTiming/delay +tags: + - API + - Animation + - AnimationEffectTimingProperties + - Experimental + - Propriété + - Reference +translation_of: Web/API/EffectTiming/delay +original_slug: Web/API/AnimationEffectTimingProperties/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

+ +

{{Compat("api.EffectTiming.delay")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/effecttiming/index.html b/files/fr/web/api/effecttiming/index.html deleted file mode 100644 index 3cbcad981f..0000000000 --- a/files/fr/web/api/effecttiming/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Animation Effect Timing Properties -slug: Web/API/EffectTiming -tags: - - API - - Animation - - AnimationEffectTimingProperties - - Dictionnaire - - Experimental - - Interface - - Reference -translation_of: Web/API/EffectTiming -original_slug: Web/API/AnimationEffectTimingProperties ---- -
{{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

- -

{{Compat("api.EffectTiming")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/effecttiming/index.md b/files/fr/web/api/effecttiming/index.md new file mode 100644 index 0000000000..3cbcad981f --- /dev/null +++ b/files/fr/web/api/effecttiming/index.md @@ -0,0 +1,71 @@ +--- +title: Animation Effect Timing Properties +slug: Web/API/EffectTiming +tags: + - API + - Animation + - AnimationEffectTimingProperties + - Dictionnaire + - Experimental + - Interface + - Reference +translation_of: Web/API/EffectTiming +original_slug: Web/API/AnimationEffectTimingProperties +--- +
{{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

+ +

{{Compat("api.EffectTiming")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/animate/index.html b/files/fr/web/api/element/animate/index.html deleted file mode 100644 index acdf64b4b6..0000000000 --- a/files/fr/web/api/element/animate/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Element.animate() -slug: Web/API/Element/animate -tags: - - API -translation_of: Web/API/Element/animate ---- -

{{APIRef('Web Animations')}} {{SeeCompatTable}}

- -

La méthode Element.animate() est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée.

- -
-

Note : Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.

-
- -

Syntaxe

- -
element.animate(keyframes, options); 
- -

Paramèters

- -
-
keyframes
-

Un objet formatté représentant un ensemble de keyframes.

-
options
-

Un nombre entier (Integer) représentant la durée de l'animation (en millisecondes), ou un objet (Object) contenant une ou plusieurs propriétés de timing:

-
-
id {{optional_inline}}
-
Une propriété unique pour animate(): une DOMString qui permet de référencer l'animation.
-
-
-
- -
{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
- -

Options à venir

- -

Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche.

- -
-
composite {{optional_inline}}
-
Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est replace. -
    -
  • add induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour transform, une valeur translateX(-200px) n'annulerait pas une précédente valeur rotate(20deg) mais s'y ajouterait, pour donner translateX(-200px) rotate(20deg).
    • -
  • accumulate est similaire mais un peu plus intéressant: blur(2) et blur(5) deviennent blur(7) et non blur(2) blur(5).
    • -
  • replace, quand à elle, remplace la précédente valeur par la nouvelle. 
    • -
-
-
iterationComposite {{optional_inline}}
-
Détermine comment les valeurs se construisent, d'itération en itération, dans une même animation. Peut être définie par accumulate ou replace (voir ci-dessus). La valeur par défaut est replace.
-
spacing {{optional_inline}}
-

Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est distribute.

-
    -
  • distribute positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.
    • -
  • paced positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.
    • -
-
-
- -

Valeur de retour

- -

Retourne un objet de type {{domxref("Animation")}}.

- -

Exemple

- -

Dans la démo Down the Rabbit Hole (with the Web Animation API), la méthode animate() est utilisée pour immédiatement créer et jouer une animation sur l'élément #tunnel, pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation.

- -
document.getElementById("tunnel").animate([
-  // keyframes
-  { transform: 'translateY(0px)' },
-  { transform: 'translateY(-300px)' }
-], {
-  // timing options
-  duration: 1000,
-  iterations: Infinity
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Initial definition
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.animate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/animate/index.md b/files/fr/web/api/element/animate/index.md new file mode 100644 index 0000000000..acdf64b4b6 --- /dev/null +++ b/files/fr/web/api/element/animate/index.md @@ -0,0 +1,106 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - API +translation_of: Web/API/Element/animate +--- +

{{APIRef('Web Animations')}} {{SeeCompatTable}}

+ +

La méthode Element.animate() est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée.

+ +
+

Note : Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.

+
+ +

Syntaxe

+ +
element.animate(keyframes, options); 
+ +

Paramèters

+ +
+
keyframes
+

Un objet formatté représentant un ensemble de keyframes.

+
options
+

Un nombre entier (Integer) représentant la durée de l'animation (en millisecondes), ou un objet (Object) contenant une ou plusieurs propriétés de timing:

+
+
id {{optional_inline}}
+
Une propriété unique pour animate(): une DOMString qui permet de référencer l'animation.
+
+
+
+ +
{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
+ +

Options à venir

+ +

Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche.

+ +
+
composite {{optional_inline}}
+
Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est replace. +
    +
  • add induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour transform, une valeur translateX(-200px) n'annulerait pas une précédente valeur rotate(20deg) mais s'y ajouterait, pour donner translateX(-200px) rotate(20deg).
    • +
  • accumulate est similaire mais un peu plus intéressant: blur(2) et blur(5) deviennent blur(7) et non blur(2) blur(5).
    • +
  • replace, quand à elle, remplace la précédente valeur par la nouvelle. 
    • +
+
+
iterationComposite {{optional_inline}}
+
Détermine comment les valeurs se construisent, d'itération en itération, dans une même animation. Peut être définie par accumulate ou replace (voir ci-dessus). La valeur par défaut est replace.
+
spacing {{optional_inline}}
+

Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est distribute.

+
    +
  • distribute positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.
    • +
  • paced positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.
    • +
+
+
+ +

Valeur de retour

+ +

Retourne un objet de type {{domxref("Animation")}}.

+ +

Exemple

+ +

Dans la démo Down the Rabbit Hole (with the Web Animation API), la méthode animate() est utilisée pour immédiatement créer et jouer une animation sur l'élément #tunnel, pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation.

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.animate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/attachshadow/index.html b/files/fr/web/api/element/attachshadow/index.html deleted file mode 100644 index cde6764b54..0000000000 --- a/files/fr/web/api/element/attachshadow/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Element.attachShadow() -slug: Web/API/Element/attachShadow -translation_of: Web/API/Element/attachShadow ---- -

{{APIRef('Shadow DOM')}} {{SeeCompatTable}}

- -

La méthode Element.attachShadow() attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son ShadowRoot.

- -

Syntaxe

- -
var shadowroot = element.attachShadow(shadowRootInit);
-
- -

Paramètres

- -
-
shadowRootInit
-
Un dictionnaire ShadowRootInit, avec les propriétés suivantes : -
    -
  • mode : une chaîne de caractères spécifiant le mode d'encapsulation de l'arbre du Shadow DOM, parmi les options suivantes : -
      -
    • open : spécifie une encapsulation ouverte.
      • -
    • closed : spécifie une encapsulation fermée.
      • -
    -
    • -
-
-
- -

Retour

- -

Retourne un {{domxref("ShadowRoot")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}{{Spec2('Shadow DOM')}}Définition initiale.
- -

Browser compatibility

- -

{{Compat("api.Element.attachShadow")}}

diff --git a/files/fr/web/api/element/attachshadow/index.md b/files/fr/web/api/element/attachshadow/index.md new file mode 100644 index 0000000000..cde6764b54 --- /dev/null +++ b/files/fr/web/api/element/attachshadow/index.md @@ -0,0 +1,54 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +translation_of: Web/API/Element/attachShadow +--- +

{{APIRef('Shadow DOM')}} {{SeeCompatTable}}

+ +

La méthode Element.attachShadow() attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son ShadowRoot.

+ +

Syntaxe

+ +
var shadowroot = element.attachShadow(shadowRootInit);
+
+ +

Paramètres

+ +
+
shadowRootInit
+
Un dictionnaire ShadowRootInit, avec les propriétés suivantes : +
    +
  • mode : une chaîne de caractères spécifiant le mode d'encapsulation de l'arbre du Shadow DOM, parmi les options suivantes : +
      +
    • open : spécifie une encapsulation ouverte.
      • +
    • closed : spécifie une encapsulation fermée.
      • +
    +
    • +
+
+
+ +

Retour

+ +

Retourne un {{domxref("ShadowRoot")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}{{Spec2('Shadow DOM')}}Définition initiale.
+ +

Browser compatibility

+ +

{{Compat("api.Element.attachShadow")}}

diff --git a/files/fr/web/api/element/attributes/index.html b/files/fr/web/api/element/attributes/index.html deleted file mode 100644 index 14c104bcfa..0000000000 --- a/files/fr/web/api/element/attributes/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: element.attributes -slug: Web/API/Element/attributes -tags: - - API - - DOM - - Element - - Propriété - - Reference -translation_of: Web/API/Element/attributes ---- -

{{ APIRef("DOM") }}

- -

La propriété Element.attributes renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (Array), aussi il n'a pas de méthodes  {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les attributs sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.

- -

Syntaxe

- -
var attr = element.attributes;
-
- -

Exemple

- -

Exemples basiques

- -
// récupère le premier élément <p> du document
-var para = document.getElementsByTagName("p")[0];
-var attr = para.attributes;
-
- -

Énumération des attributs d'éléments

- -

L'indexation numérique est utile pour parcourir tous les attributs d'un élément.
- L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.

- -
<!DOCTYPE html>
-
-<html>
-
- <head>
-  <title>Exemple d'attributs</title>
-  <script type="text/javascript">
-   function listAttributes() {
-     var paragraph = document.getElementById("paragraph");
-     var result = document.getElementById("result");
-
-     // D'abord, vérifier que le "paragraph" a quelques attributs    
-     if (paragraph.hasAttributes()) {
-       var attrs = paragraph.attributes;
-       var output = "";
-       for(var i = attrs.length - 1; i >= 0; i--) {
-         output += attrs[i].name + "->" + attrs[i].value;
-       }
-       result.value = output;
-     } else {
-       result.value = "No attributes to show";
-     }
-   }
-  </script>
- </head>
-
-<body>
- <p id="paragraph" >Sample Paragraph</p>
- <form action="">
-  <p>
-    <input type="button" value="Show first attribute name and value"
-      onclick="listAttributes();">
-    <input id="result" type="text" value="">
-  </p>
- </form>
-</body>
-</html>
- -

 

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}De {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}Pas de changement de {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}Pas de changement de {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.attributes")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/attributes/index.md b/files/fr/web/api/element/attributes/index.md new file mode 100644 index 0000000000..14c104bcfa --- /dev/null +++ b/files/fr/web/api/element/attributes/index.md @@ -0,0 +1,116 @@ +--- +title: element.attributes +slug: Web/API/Element/attributes +tags: + - API + - DOM + - Element + - Propriété + - Reference +translation_of: Web/API/Element/attributes +--- +

{{ APIRef("DOM") }}

+ +

La propriété Element.attributes renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (Array), aussi il n'a pas de méthodes  {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les attributs sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.

+ +

Syntaxe

+ +
var attr = element.attributes;
+
+ +

Exemple

+ +

Exemples basiques

+ +
// récupère le premier élément <p> du document
+var para = document.getElementsByTagName("p")[0];
+var attr = para.attributes;
+
+ +

Énumération des attributs d'éléments

+ +

L'indexation numérique est utile pour parcourir tous les attributs d'un élément.
+ L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+  <title>Exemple d'attributs</title>
+  <script type="text/javascript">
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // D'abord, vérifier que le "paragraph" a quelques attributs    
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" >Sample Paragraph</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+ +

 

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}De {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}Pas de changement de {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}Pas de changement de {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.attributes")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/childelementcount/index.html b/files/fr/web/api/element/childelementcount/index.html deleted file mode 100644 index a23de9fbaa..0000000000 --- a/files/fr/web/api/element/childelementcount/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: ParentNode.childElementCount -slug: Web/API/Element/childElementCount -tags: - - API - - DOM - - Noeuds - - Propriétés - - Reference - - parent -translation_of: Web/API/ParentNode/childElementCount -original_slug: Web/API/ParentNode/childElementCount ---- -
-

{{APIRef("DOM") }}

-
- -

La propriété ParentNode.childElementCount en lecture seule renvoie un unsigned long (long non signé) représentant le nombre d'élèments fils de l'élément donné.

- -
-

Note : Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.
- Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (noeuds) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, childElementCount a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.

-
- -

Syntaxe

- -
var count = node.childElementCount;
-
- -
-
count
-
détient la valeur de retour, un type unsigned long (long non signé) (simplement un nombre entier)
-
node
-
est un objet représentant un Document, un DocumentFragment ou un Element.
-
- -

Exemple

- -
var foo = document.getElementById("foo");
-if (foo.childElementCount > 0) {
-    // faire quelque chose
-}
- -

Polyfill pour IE8 & IE9 & Safari

- -

Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.

- -
;(function(constructor) {
-    if (constructor &&
-        constructor.prototype &&
-        constructor.prototype.childElementCount == null) {
-        Object.defineProperty(constructor.prototype, 'childElementCount', {
-            get: function() {
-                var i = 0, count = 0, node, nodes = this.childNodes;
-                while (node = nodes[i++]) {
-                    if (node.nodeType === 1) count++;
-                }
-                return count;
-            }
-        });
-    }
-})(window.Node || window.Element);
- -

Spécification

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}Divise l'interface ElementTraversal en {{domxref("ChildNode")}} et ParentNode. La propriété est maintenant définie sur cette dernière.
- Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}}Ajout de sa définition initiale à la pure interface ElementTraversal et de son utilisation sur {{domxref("Element")}}.
- -

Compatibilité des navigateurs

- - -

{{Compat("api.ParentNode.childElementCount")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/childelementcount/index.md b/files/fr/web/api/element/childelementcount/index.md new file mode 100644 index 0000000000..a23de9fbaa --- /dev/null +++ b/files/fr/web/api/element/childelementcount/index.md @@ -0,0 +1,97 @@ +--- +title: ParentNode.childElementCount +slug: Web/API/Element/childElementCount +tags: + - API + - DOM + - Noeuds + - Propriétés + - Reference + - parent +translation_of: Web/API/ParentNode/childElementCount +original_slug: Web/API/ParentNode/childElementCount +--- +
+

{{APIRef("DOM") }}

+
+ +

La propriété ParentNode.childElementCount en lecture seule renvoie un unsigned long (long non signé) représentant le nombre d'élèments fils de l'élément donné.

+ +
+

Note : Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.
+ Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (noeuds) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, childElementCount a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.

+
+ +

Syntaxe

+ +
var count = node.childElementCount;
+
+ +
+
count
+
détient la valeur de retour, un type unsigned long (long non signé) (simplement un nombre entier)
+
node
+
est un objet représentant un Document, un DocumentFragment ou un Element.
+
+ +

Exemple

+ +
var foo = document.getElementById("foo");
+if (foo.childElementCount > 0) {
+    // faire quelque chose
+}
+ +

Polyfill pour IE8 & IE9 & Safari

+ +

Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.

+ +
;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.childElementCount == null) {
+        Object.defineProperty(constructor.prototype, 'childElementCount', {
+            get: function() {
+                var i = 0, count = 0, node, nodes = this.childNodes;
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) count++;
+                }
+                return count;
+            }
+        });
+    }
+})(window.Node || window.Element);
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}Divise l'interface ElementTraversal en {{domxref("ChildNode")}} et ParentNode. La propriété est maintenant définie sur cette dernière.
+ Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}}Ajout de sa définition initiale à la pure interface ElementTraversal et de son utilisation sur {{domxref("Element")}}.
+ +

Compatibilité des navigateurs

+ + +

{{Compat("api.ParentNode.childElementCount")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/classlist/index.html b/files/fr/web/api/element/classlist/index.html deleted file mode 100644 index 62a8048b85..0000000000 --- a/files/fr/web/api/element/classlist/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: element.classList -slug: Web/API/Element/classList -tags: - - API - - Classe - - DOM - - Element - - Liste - - Propriétés -translation_of: Web/API/Element/classList ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule Element.classList retourne une collection directe  {{domxref("DOMTokenList")}} des attributs de classe de l'élément.

- -

L'utilisation de classList est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.

- -

Syntaxe

- -
const elementClasses = elementNodeReference.classList;
-
- -

elementClasses est une DOMTokenList représentant l'attribut class de elementNodeReference. Si l'attribut class n'a pas été défini ou est vide elementClasses.length retourne 0. element.classList est en lecture seule. Pour la modifier il convient d'utiliser les méthodes add() et remove().

- -

Méthodes

- -
-
add( String [, String] )
-
Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.
-
remove( String [, String] )
-
Supprime les classes spécifiées.
- Note: Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.
-
item( Number )
-
Renvoie la position d'une classe dans une collection.
-
toggle( String [, force] )
-
Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie false, dans le cas inverse, ajoute cette classe et retourne true.
- Si le second argument est présent : Si l'argument force est à true, ajoute cette classe, si l'argument est à false, la supprime.
-
contains( String )
-
Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.
-
replace( oldClass, newClass )
-
Remplace une classe par une autre.
-
- -

Exemples

- -
const div = document.createElement('div');
-div.className = 'foo';
-
-// notre point de départ: <div class="foo"></div>
-console.log(div.outerHTML);
-
-// utiliser l'API classList pour supprimer et ajouter des classes
-div.classList.remove("foo");
-div.classList.add("anotherclass");
-
-// <div class="anotherclass"></div>
-console.log(div.outerHTML);
-
-// si "visible" est défini, le supprimer, sinon, l'ajouter
-div.classList.toggle("visible");
-
-// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10
-div.classList.toggle("visible", i < 10 );
-
-console.log(div.classList.contains("foo"));
-
-// ajouter ou supprimer plusieurs classes
-div.classList.add("foo", "bar", "baz");
-div.classList.remove("foo", "bar", "baz");
-
-// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation
-const cls = ["foo", "bar"];
-div.classList.add(...cls);
-div.classList.remove(...cls);
-
-// remplacer la classe "foo" par la classe "bar"
-div.classList.replace("foo", "bar");
- -
-

Note : Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir https://bugzilla.mozilla.org/show_bug.cgi?id=814014

-
- -

Prothèse d'émulation

- -

L'ancien événement onpropertychange peut être utilisé pour créer une maquette classList vivante grâce à une propriété Element.prototype.className qui déclenche l'événement spécifié une fois qu'il est modifié.

- -

La polyfill suivante pour classList et DOMTokenList garantit une conformité totale (couverture) pour toutes les méthodes et propriétés standard de Element.prototype.classList pour les navigateurs IE10-IE11 ainsi qu'un comportement quasi conforme pour IE 6-9. Consultez ce qui suit :

- -
// 1. String.prototype.trim polyfill
-if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
-(function(window){"use strict"; // prevent global namespace pollution
-if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
-var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
-  if (V === "") throw new DOMException(
-    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
-  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
-    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
-}
-// 2. Implement the barebones DOMTokenList livelyness polyfill
-if (typeof DOMTokenList !== "function") (function(window){
-    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
-    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
-    function DOMTokenList(){
-        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
-    }
-    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
-    DOMTokenList.prototype.add = function(){
-        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
-            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
-            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
-                if (this[i] === val) continue a; else resStr += " " + this[i];
-            this[Len] = val, proto.length += 1, proto.value = resStr;
-        }
-        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
-    };
-    DOMTokenList.prototype.remove = function(){
-        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
-            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
-            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
-                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
-            if (!is) continue;
-            delete this[Len], proto.length -= 1, proto.value = resStr;
-        }
-        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
-    };
-    window.DOMTokenList = DOMTokenList;
-    function whenPropChanges(){
-        var evt = window.event, prop = evt.propertyName;
-        if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) {
-            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
-            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
-            var oldLen = protoObjProto.length;
-            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
-                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
-                resTokenList[cI-sub] = tokens[cI];
-            }
-            for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
-            if(prop !== "classList") return;
-            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
-            skipPropChange = 0, resTokenList.length = tokens.length - sub;
-        }
-    }
-    function polyfillClassList(ele){
-        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
-        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
-        allowTokenListConstruction = 1;
-        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
-        finally { allowTokenListConstruction = 0 }
-        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
-        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
-            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
-            this[cI-sub] = toks[cI];
-        }
-        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
-        if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM
-            enumerable:   1, get: function(){return resTokenList},
-            configurable: 0, set: function(newVal){
-                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
-                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
-                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
-                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
-                    resTokenList[cI-sub] = toks[cI];
-                }
-                for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
-            }
-        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
-            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
-        }); defineProperty(protoObjProto, " uCL", {
-            enumerable: 0, configurable: 0, writeable: 0, value: ele
-        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
-        ele.attachEvent( "onpropertychange", whenPropChanges );
-    }
-    try { // Much faster & cleaner version for IE8 & IE9:
-        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
-        window.Object.defineProperty(window.Element.prototype, "classList", {
-            enumerable: 1,   get: function(val){
-                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
-                                 return this.classList;
-                             },
-            configurable: 0, set: function(val){this.className = val}
-        });
-    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
-        window[" uCL"] = polyfillClassList;
-        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
-        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
-            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + //  IE6
-            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8
-        );
-    }
-})(window);
-// 3. Patch in unsupported methods in DOMTokenList
-(function(DOMTokenListProto, testClass){
-    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
-        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
-    };
-    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
-        if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
-        var oldValue = this.value;
-        return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/);
-    };
-    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
-        DOMTokenListProto.replace = function(oldToken, newToken){
-            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
-            var oldValue = this.value;
-            return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true));
-        };
-    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
-        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
-        return false;
-    };
-    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
-        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
-        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
-    };
-    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
-        var nextIndex = 0, that = this;
-        return {next: function() {
-            return nextIndex<that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true};
-        }};
-    };
-    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
-        var nextIndex = 0, that = this;
-        return {next: function() {
-            return nextIndex<that.length ? {value: that[nextIndex++], done: false} : {done: true};
-        }};
-    };
-    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
-        var nextIndex = 0, that = this;
-        return {next: function() {
-            return nextIndex<that.length ? {value: nextIndex++, done: false} : {done: true};
-        }};
-    };
-})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
-})(window);
-
- -

Mise en garde

- -

La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par document.createElement avant d'être ajoutés à un nœud parent) dans IE6-7.

- -

Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de classList et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation.

- -

Une note mineure est que dans IE6-7, cette prothèse utilise la propriété window[" uCL"] de l'objet window pour communiquer avec les expressions CSS, la propriété css x-uCLp sur tous les éléments, et la propriété element[" uCL"] sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété element[" uCLp"] supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété DOMTokenList[" uCL"] est ajoutée à chaque objet element["classList"] pour garantir que la DOMTokenList est liée à son propre élément.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Définition initiale.
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.classList")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/classlist/index.md b/files/fr/web/api/element/classlist/index.md new file mode 100644 index 0000000000..62a8048b85 --- /dev/null +++ b/files/fr/web/api/element/classlist/index.md @@ -0,0 +1,284 @@ +--- +title: element.classList +slug: Web/API/Element/classList +tags: + - API + - Classe + - DOM + - Element + - Liste + - Propriétés +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule Element.classList retourne une collection directe  {{domxref("DOMTokenList")}} des attributs de classe de l'élément.

+ +

L'utilisation de classList est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.

+ +

Syntaxe

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses est une DOMTokenList représentant l'attribut class de elementNodeReference. Si l'attribut class n'a pas été défini ou est vide elementClasses.length retourne 0. element.classList est en lecture seule. Pour la modifier il convient d'utiliser les méthodes add() et remove().

+ +

Méthodes

+ +
+
add( String [, String] )
+
Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.
+
remove( String [, String] )
+
Supprime les classes spécifiées.
+ Note: Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.
+
item( Number )
+
Renvoie la position d'une classe dans une collection.
+
toggle( String [, force] )
+
Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie false, dans le cas inverse, ajoute cette classe et retourne true.
+ Si le second argument est présent : Si l'argument force est à true, ajoute cette classe, si l'argument est à false, la supprime.
+
contains( String )
+
Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.
+
replace( oldClass, newClass )
+
Remplace une classe par une autre.
+
+ +

Exemples

+ +
const div = document.createElement('div');
+div.className = 'foo';
+
+// notre point de départ: <div class="foo"></div>
+console.log(div.outerHTML);
+
+// utiliser l'API classList pour supprimer et ajouter des classes
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// <div class="anotherclass"></div>
+console.log(div.outerHTML);
+
+// si "visible" est défini, le supprimer, sinon, l'ajouter
+div.classList.toggle("visible");
+
+// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10
+div.classList.toggle("visible", i < 10 );
+
+console.log(div.classList.contains("foo"));
+
+// ajouter ou supprimer plusieurs classes
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// remplacer la classe "foo" par la classe "bar"
+div.classList.replace("foo", "bar");
+ +
+

Note : Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Prothèse d'émulation

+ +

L'ancien événement onpropertychange peut être utilisé pour créer une maquette classList vivante grâce à une propriété Element.prototype.className qui déclenche l'événement spécifié une fois qu'il est modifié.

+ +

La polyfill suivante pour classList et DOMTokenList garantit une conformité totale (couverture) pour toutes les méthodes et propriétés standard de Element.prototype.classList pour les navigateurs IE10-IE11 ainsi qu'un comportement quasi conforme pour IE 6-9. Consultez ce qui suit :

+ +
// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster & cleaner version for IE8 & IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: that[nextIndex++], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: nextIndex++, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+
+ +

Mise en garde

+ +

La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par document.createElement avant d'être ajoutés à un nœud parent) dans IE6-7.

+ +

Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de classList et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation.

+ +

Une note mineure est que dans IE6-7, cette prothèse utilise la propriété window[" uCL"] de l'objet window pour communiquer avec les expressions CSS, la propriété css x-uCLp sur tous les éléments, et la propriété element[" uCL"] sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété element[" uCLp"] supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété DOMTokenList[" uCL"] est ajoutée à chaque objet element["classList"] pour garantir que la DOMTokenList est liée à son propre élément.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Définition initiale.
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.classList")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/classname/index.html b/files/fr/web/api/element/classname/index.html deleted file mode 100644 index 125374a9db..0000000000 --- a/files/fr/web/api/element/classname/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: element.className -slug: Web/API/Element/className -tags: - - API - - Classe - - DOM - - Element - - Propriétés -translation_of: Web/API/Element/className ---- -

{{APIRef("DOM")}}

- -

La propriété className de l'interface {{domxref("Element")}} récupère et définit la valeur de l'attribut class de l'élément spécifié.

- -

Syntaxe

- -
var cName = elementNodeReference.className;
-elementNodeReference.className = cName;
- - - -

Exemple

- -
let elm = document.getElementById('item');
-
-if(elm.className === 'active'){
-    elm.className = 'inactive';
-} else {
-    elm.className = 'active';
-}
- -

Notes

- -

Le nom className est utilisé pour cette propriété au lieu de class à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.

- -

className peut être une instance de {{domxref("SVGAnimatedString")}} si l'element est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de className ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. 

- -
elm.setAttribute('class', elm.getAttribute('class'))
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.className")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/classname/index.md b/files/fr/web/api/element/classname/index.md new file mode 100644 index 0000000000..125374a9db --- /dev/null +++ b/files/fr/web/api/element/classname/index.md @@ -0,0 +1,79 @@ +--- +title: element.className +slug: Web/API/Element/className +tags: + - API + - Classe + - DOM + - Element + - Propriétés +translation_of: Web/API/Element/className +--- +

{{APIRef("DOM")}}

+ +

La propriété className de l'interface {{domxref("Element")}} récupère et définit la valeur de l'attribut class de l'élément spécifié.

+ +

Syntaxe

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Exemple

+ +
let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}
+ +

Notes

+ +

Le nom className est utilisé pour cette propriété au lieu de class à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.

+ +

className peut être une instance de {{domxref("SVGAnimatedString")}} si l'element est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de className ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. 

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.className")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/click_event/index.html b/files/fr/web/api/element/click_event/index.html deleted file mode 100644 index 8e18c242d9..0000000000 --- a/files/fr/web/api/element/click_event/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: 'Element : évènement click' -slug: Web/API/Element/click_event -tags: - - API - - DOM - - Element - - Reference - - click -translation_of: Web/API/Element/click_event ---- -
{{APIRef}}
- -

L'évènement click est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onclick", "onclick")}}
- -

Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments.

- -

click est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés.

- -

Notes d'utilisation

- -

L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est click) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, detail vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité).

- -

Internet Explorer

- -

Internet Explorer 8 & 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut transparent qui recouvrent d'autres éléments ne recevront pas d'évènements click. Les évènements click toucheront les éléments en dessous à la place.

- -

Quelques méthodes de contournement pour ce bug :

- - - -

Safari Mobile

- -

Safari Mobile 7.0+ (et antérieures) souffre d'un bug indiquant que les évènements click ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir la documentation de Safari sur le fait de rendre les éléments cliquables et la définition d'un élément cliquable.

- -

Méthodes de contournement connues :

- - - -

Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) :

- - - -

Exemples

- -

Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}).

- -

HTML

- -
<button>Cliquer ici</button>
- -

JavaScript

- -
const button = document.querySelector('button');
-
-button.addEventListener('click', event => {
-  button.innerHTML = `Nombre de clics : ${event.detail}`;
-});
- -

Résultat

- -

Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro.

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-click')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-click', 'click')}}{{Spec2('DOM3 Events')}}
{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}{{Spec2('DOM2 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.click_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/click_event/index.md b/files/fr/web/api/element/click_event/index.md new file mode 100644 index 0000000000..8e18c242d9 --- /dev/null +++ b/files/fr/web/api/element/click_event/index.md @@ -0,0 +1,153 @@ +--- +title: 'Element : évènement click' +slug: Web/API/Element/click_event +tags: + - API + - DOM + - Element + - Reference + - click +translation_of: Web/API/Element/click_event +--- +
{{APIRef}}
+ +

L'évènement click est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onclick", "onclick")}}
+ +

Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments.

+ +

click est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés.

+ +

Notes d'utilisation

+ +

L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est click) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, detail vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité).

+ +

Internet Explorer

+ +

Internet Explorer 8 & 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut transparent qui recouvrent d'autres éléments ne recevront pas d'évènements click. Les évènements click toucheront les éléments en dessous à la place.

+ +

Quelques méthodes de contournement pour ce bug :

+ + + +

Safari Mobile

+ +

Safari Mobile 7.0+ (et antérieures) souffre d'un bug indiquant que les évènements click ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir la documentation de Safari sur le fait de rendre les éléments cliquables et la définition d'un élément cliquable.

+ +

Méthodes de contournement connues :

+ + + +

Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) :

+ + + +

Exemples

+ +

Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}).

+ +

HTML

+ +
<button>Cliquer ici</button>
+ +

JavaScript

+ +
const button = document.querySelector('button');
+
+button.addEventListener('click', event => {
+  button.innerHTML = `Nombre de clics : ${event.detail}`;
+});
+ +

Résultat

+ +

Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro.

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-click')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-click', 'click')}}{{Spec2('DOM3 Events')}}
{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}{{Spec2('DOM2 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.click_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/clientheight/index.html b/files/fr/web/api/element/clientheight/index.html deleted file mode 100644 index 3e88e1a801..0000000000 --- a/files/fr/web/api/element/clientheight/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Element.clientHeight -slug: Web/API/Element/clientHeight -translation_of: Web/API/Element/clientHeight -browser-compat: api.Element.clientHeight ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule Element.clientHeight vaut zéro pour les éléments sans CSS ou sans boîte de disposition en ligne/incise ; sinon elle vaut la hauteur interne d'un élément, exprimée en pixels. Cette hauteur inclut le remplissage (padding) mais exclut les bordures, les marges et les éventuelles barres de défilement horizontales.

- -

clientHeight peut être calculée comme : hauteur CSS + remplissage CSS - hauteur des barres de défilement horizontales s'il y en a.

- -

Lorsque clientHeight est utilisée sur l'élément racine (l'élément <html>), (ou sur <body> si le document est en mode de compatibilité (quirks mode)), c'est la hauteur de la zone d'affichage (viewport) (sans tenir compte des barres de défilement) qui est renvoyée. Il s'agit ici d'un cas aux limites pour clientHeight.

- -
-

Note : Cette propriété sera arrondie en un entier. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser element.getBoundingClientRect().

-
- -

Syntaxe

- -
-var intElemClientHeight = element.clientHeight;
-
- -

intElemClientHeight est un entier correspondant à la valeur de clientHeight pour l'élément représenté par element, exprimée en pixels. La propriété clientHeight est uniquement accessible en lecture-seule.

- -

Exemples

- -

- -

Spécifications

- -

{{Specifications}}

- -

Notes

- -

clientHeight est une propriété introduite par le modèle objet d'Internet Explorer.

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/clientheight/index.md b/files/fr/web/api/element/clientheight/index.md new file mode 100644 index 0000000000..3e88e1a801 --- /dev/null +++ b/files/fr/web/api/element/clientheight/index.md @@ -0,0 +1,49 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +translation_of: Web/API/Element/clientHeight +browser-compat: api.Element.clientHeight +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule Element.clientHeight vaut zéro pour les éléments sans CSS ou sans boîte de disposition en ligne/incise ; sinon elle vaut la hauteur interne d'un élément, exprimée en pixels. Cette hauteur inclut le remplissage (padding) mais exclut les bordures, les marges et les éventuelles barres de défilement horizontales.

+ +

clientHeight peut être calculée comme : hauteur CSS + remplissage CSS - hauteur des barres de défilement horizontales s'il y en a.

+ +

Lorsque clientHeight est utilisée sur l'élément racine (l'élément <html>), (ou sur <body> si le document est en mode de compatibilité (quirks mode)), c'est la hauteur de la zone d'affichage (viewport) (sans tenir compte des barres de défilement) qui est renvoyée. Il s'agit ici d'un cas aux limites pour clientHeight.

+ +
+

Note : Cette propriété sera arrondie en un entier. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser element.getBoundingClientRect().

+
+ +

Syntaxe

+ +
+var intElemClientHeight = element.clientHeight;
+
+ +

intElemClientHeight est un entier correspondant à la valeur de clientHeight pour l'élément représenté par element, exprimée en pixels. La propriété clientHeight est uniquement accessible en lecture-seule.

+ +

Exemples

+ +

+ +

Spécifications

+ +

{{Specifications}}

+ +

Notes

+ +

clientHeight est une propriété introduite par le modèle objet d'Internet Explorer.

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/clientleft/index.html b/files/fr/web/api/element/clientleft/index.html deleted file mode 100644 index 72f3d71689..0000000000 --- a/files/fr/web/api/element/clientleft/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Element.clientLeft -slug: Web/API/Element/clientLeft -translation_of: Web/API/Element/clientLeft -browser-compat: api.Element.clientLeft ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule Element.clientLeft représente la largeur de la bordure gauche d'un élément, exprimée en pixels. Cette largeur inclut l'éventuelle largeur de la barre de défilement verticale si le texte se lit de droite à gauche et s'il y a un dépassement entraînant l'apparition d'une barre de défilement à gauche. clientLeft n'inclut pas la marge gauche ou le remplissage (padding) à gauche.

- -

Lorsque la préférence layout.scrollbar.side est paramétrée à 1 ou à 3 et que la direction du texte est de droite à gauche, alors la barre de défilement verticale est placée à gauche et ce placement aura donc un impact sur la valeur de clientLeft.

- -
-

Note : Cette propriété sera arrondie en une valeur entière. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser element.getBoundingClientRect().

-
- -
-

Note : Lorsqu'un élément se voit appliquer display: inline, clientLeft renvoie 0, quelle que soit la bordure de l'élément.

-
- -

Syntaxe

- -
-var left = element.clientLeft;
-
- -

Exemple

- -

Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure border-left noire de 24px. La valeur de clientLeft correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px.

- -

HTML

- -
-<div id="container">
-  <div id="contained">
-    <p>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.</p>
-  </div>
-</div>
-
- -

CSS

- -
-
-#container {
-	margin: 3rem;
-	background-color: rgb(255, 255, 204);
-	border: 4px dashed black;
-}
-
-#contained {
-	margin: 1rem;
-	border-left: 24px black solid;
-	padding: 0px 28px;
-	overflow: auto;
-	background-color: white;
-}
-
- -

Résultat

- -{{EmbedLiveSample("Exemple", 400, 350)}} - -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Notes

- -

clientLeft fut introduit avec le modèle d'objet DHTML d'Internet Explorer.

- -

La position de la barre de défilement verticale pour les textes écrits de droite à gauche dépend de la préférence layout.scrollbar.side.

- -

Les applications utilisant le moteur Gecko prennent en charge clientLeft depuis Gecko 1.9 (Firefox 3 l'implémente avec le bug 111207). Cette propriété n'est pas prise en charge pour Firefox 2 et les versions antérieures.

diff --git a/files/fr/web/api/element/clientleft/index.md b/files/fr/web/api/element/clientleft/index.md new file mode 100644 index 0000000000..72f3d71689 --- /dev/null +++ b/files/fr/web/api/element/clientleft/index.md @@ -0,0 +1,80 @@ +--- +title: Element.clientLeft +slug: Web/API/Element/clientLeft +translation_of: Web/API/Element/clientLeft +browser-compat: api.Element.clientLeft +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule Element.clientLeft représente la largeur de la bordure gauche d'un élément, exprimée en pixels. Cette largeur inclut l'éventuelle largeur de la barre de défilement verticale si le texte se lit de droite à gauche et s'il y a un dépassement entraînant l'apparition d'une barre de défilement à gauche. clientLeft n'inclut pas la marge gauche ou le remplissage (padding) à gauche.

+ +

Lorsque la préférence layout.scrollbar.side est paramétrée à 1 ou à 3 et que la direction du texte est de droite à gauche, alors la barre de défilement verticale est placée à gauche et ce placement aura donc un impact sur la valeur de clientLeft.

+ +
+

Note : Cette propriété sera arrondie en une valeur entière. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser element.getBoundingClientRect().

+
+ +
+

Note : Lorsqu'un élément se voit appliquer display: inline, clientLeft renvoie 0, quelle que soit la bordure de l'élément.

+
+ +

Syntaxe

+ +
+var left = element.clientLeft;
+
+ +

Exemple

+ +

Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure border-left noire de 24px. La valeur de clientLeft correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px.

+ +

HTML

+ +
+<div id="container">
+  <div id="contained">
+    <p>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.</p>
+  </div>
+</div>
+
+ +

CSS

+ +
+
+#container {
+	margin: 3rem;
+	background-color: rgb(255, 255, 204);
+	border: 4px dashed black;
+}
+
+#contained {
+	margin: 1rem;
+	border-left: 24px black solid;
+	padding: 0px 28px;
+	overflow: auto;
+	background-color: white;
+}
+
+ +

Résultat

+ +{{EmbedLiveSample("Exemple", 400, 350)}} + +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Notes

+ +

clientLeft fut introduit avec le modèle d'objet DHTML d'Internet Explorer.

+ +

La position de la barre de défilement verticale pour les textes écrits de droite à gauche dépend de la préférence layout.scrollbar.side.

+ +

Les applications utilisant le moteur Gecko prennent en charge clientLeft depuis Gecko 1.9 (Firefox 3 l'implémente avec le bug 111207). Cette propriété n'est pas prise en charge pour Firefox 2 et les versions antérieures.

diff --git a/files/fr/web/api/element/clientwidth/index.html b/files/fr/web/api/element/clientwidth/index.html deleted file mode 100644 index 9a3bd1012c..0000000000 --- a/files/fr/web/api/element/clientwidth/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: element.clientWidth -slug: Web/API/Element/clientWidth -tags: - - API - - CSSOM View - - Propriété - - Reference -translation_of: Web/API/Element/clientWidth ---- -
{{APIRef("DOM")}}
- -

La propriété Element.clientWidth vaut zéro pour les éléments en ligne (inline) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (padding) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales.

- -

Lorsque clientWidth est utilisée sur l'élément racine (l'élément <html> par défaut ou <body> si le document utilise le mode quirks), c'est la largeur de la zone d'affichage (viewport) à l'exception des barres de défilement qui est renvoyée. Il s'agit d'un cas au limite pour clientWidth.

- -
-

Note : La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}.

-
- -

Syntaxe

- -
var intElemClientWidth = element.clientWidth;
- -

intElemClientWidth est un entier correspondant à la largeur d'element, en pixels. La propriété clientWidth est uniquement accessible en lecture-seule.

- -

Exemple

- -

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}}
- -

Notes

- -

clientWidth fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer.

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Element.clientWidth")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/clientwidth/index.md b/files/fr/web/api/element/clientwidth/index.md new file mode 100644 index 0000000000..9a3bd1012c --- /dev/null +++ b/files/fr/web/api/element/clientwidth/index.md @@ -0,0 +1,66 @@ +--- +title: element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - API + - CSSOM View + - Propriété + - Reference +translation_of: Web/API/Element/clientWidth +--- +
{{APIRef("DOM")}}
+ +

La propriété Element.clientWidth vaut zéro pour les éléments en ligne (inline) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (padding) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales.

+ +

Lorsque clientWidth est utilisée sur l'élément racine (l'élément <html> par défaut ou <body> si le document utilise le mode quirks), c'est la largeur de la zone d'affichage (viewport) à l'exception des barres de défilement qui est renvoyée. Il s'agit d'un cas au limite pour clientWidth.

+ +
+

Note : La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}.

+
+ +

Syntaxe

+ +
var intElemClientWidth = element.clientWidth;
+ +

intElemClientWidth est un entier correspondant à la largeur d'element, en pixels. La propriété clientWidth est uniquement accessible en lecture-seule.

+ +

Exemple

+ +

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}}
+ +

Notes

+ +

clientWidth fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Element.clientWidth")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/closest/index.html b/files/fr/web/api/element/closest/index.html deleted file mode 100644 index 61a0e9f93f..0000000000 --- a/files/fr/web/api/element/closest/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Element.closest() -slug: Web/API/Element/closest -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/closest ---- -

{{APIRef('Shadow DOM')}}

- -

La méthode Element.closest() renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie null.

- -

Syntaxe

- -
var elt = element.closest(selecteurs);
-
- -

Paramètres

- -
-
selecteurs
-
Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que "p:hover, .toto + q"
-
- -

Valeur de retour

- -

L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.

- -

Exceptions

- - - -

Exemples

- -

HTML

- -
<article>
-  <div id="div-01">Here is div-01
-    <div id="div-02">Here is div-02
-      <div id="div-03">Here is div-03</div>
-    </div>
-  </div>
-</article>
- -

JavaScript

- -
var el = document.getElementById('div-03');
-
-var r1 = el.closest("#div-02");
-// Renvoie l'élément avec l'identifiant id=div-02
-
-var r2 = el.closest("div div");
-// Renvoie le plus proche ancêtre qui est un div
-// dans un div. Ici, c'est div-03 lui-même.
-
-var r3 = el.closest("article > div");
-// Renvoie le plus proche ancêtre qui est un div
-// et dont l'élément parent est article. Ici c'est
-// div-01.
-
-var r4 = el.closest(":not(div)");
-// Renvoie le plus proche ancêtre qui n'est pas un
-// div. Dans ce cas, c'est l'élément article.
- -

Polyfill

- -

Pour les navigateurs qui ne prennent pas en charge Element.closest() mais qui permettent d'utiliser element.matches() (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :

- -
if (!Element.prototype.matches)
-    Element.prototype.matches = Element.prototype.msMatchesSelector ||
-                                Element.prototype.webkitMatchesSelector;
-
-if (!Element.prototype.closest)
-    Element.prototype.closest = function(s) {
-        var el = this;
-        if (!document.documentElement.contains(el)) return null;
-        do {
-            if (el.matches(s)) return el;
-            el = el.parentElement || el.parentNode;
-        } while (el !== null && el.nodeType == 1);
-        return null;
-    };
- -

Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :

- -
if (window.Element && !Element.prototype.closest) {
-  Element.prototype.closest =
-  function(s) {
-    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-        i,
-        el = this;
-    do {
-      i = matches.length;
-      while (--i >= 0 && matches.item(i) !== el) {};
-    } while ((i < 0) && (el = el.parentElement));
-    return el;
-  };
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.closest")}}

- -

Notes de compatibilité

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/element/closest/index.md b/files/fr/web/api/element/closest/index.md new file mode 100644 index 0000000000..61a0e9f93f --- /dev/null +++ b/files/fr/web/api/element/closest/index.md @@ -0,0 +1,138 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/closest +--- +

{{APIRef('Shadow DOM')}}

+ +

La méthode Element.closest() renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie null.

+ +

Syntaxe

+ +
var elt = element.closest(selecteurs);
+
+ +

Paramètres

+ +
+
selecteurs
+
Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que "p:hover, .toto + q"
+
+ +

Valeur de retour

+ +

L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.

+ +

Exceptions

+ + + +

Exemples

+ +

HTML

+ +
<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+ +

JavaScript

+ +
var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// Renvoie l'élément avec l'identifiant id=div-02
+
+var r2 = el.closest("div div");
+// Renvoie le plus proche ancêtre qui est un div
+// dans un div. Ici, c'est div-03 lui-même.
+
+var r3 = el.closest("article > div");
+// Renvoie le plus proche ancêtre qui est un div
+// et dont l'élément parent est article. Ici c'est
+// div-01.
+
+var r4 = el.closest(":not(div)");
+// Renvoie le plus proche ancêtre qui n'est pas un
+// div. Dans ce cas, c'est l'élément article.
+ +

Polyfill

+ +

Pour les navigateurs qui ne prennent pas en charge Element.closest() mais qui permettent d'utiliser element.matches() (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :

+ +
if (!Element.prototype.matches)
+    Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                                Element.prototype.webkitMatchesSelector;
+
+if (!Element.prototype.closest)
+    Element.prototype.closest = function(s) {
+        var el = this;
+        if (!document.documentElement.contains(el)) return null;
+        do {
+            if (el.matches(s)) return el;
+            el = el.parentElement || el.parentNode;
+        } while (el !== null && el.nodeType == 1);
+        return null;
+    };
+ +

Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :

+ +
if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
+    return el;
+  };
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.closest")}}

+ +

Notes de compatibilité

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/element/compositionend_event/index.html b/files/fr/web/api/element/compositionend_event/index.html deleted file mode 100644 index 546f6b3c5f..0000000000 --- a/files/fr/web/api/element/compositionend_event/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: compositionend -slug: Web/API/Element/compositionend_event -translation_of: Web/API/Element/compositionend_event -original_slug: Web/Events/compositionend ---- -

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

- - diff --git a/files/fr/web/api/element/compositionend_event/index.md b/files/fr/web/api/element/compositionend_event/index.md new file mode 100644 index 0000000000..546f6b3c5f --- /dev/null +++ b/files/fr/web/api/element/compositionend_event/index.md @@ -0,0 +1,128 @@ +--- +title: compositionend +slug: Web/API/Element/compositionend_event +translation_of: Web/API/Element/compositionend_event +original_slug: Web/Events/compositionend +--- +

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

+ + diff --git a/files/fr/web/api/element/compositionstart_event/index.html b/files/fr/web/api/element/compositionstart_event/index.html deleted file mode 100644 index 4de27018bc..0000000000 --- a/files/fr/web/api/element/compositionstart_event/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: compositionstart -slug: Web/API/Element/compositionstart_event -tags: - - Element - - Event - - Input method - - Reference - - compositionstart -translation_of: Web/API/Element/compositionstart_event -original_slug: Web/Events/compositionstart ---- -
{{APIRef}}
- -

L'événement compositionstart est déclenché lorsqu'un système de composition de texte tel qu'une {{glossary("input method editor","méthode de saisie")}} démarre une nouvelle session de composition.

- -

Par exemple, cet événement pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un Pinyin IME.

- - - - - - - - - - - - - - - - - - - - -
PropagationOui
AnnulableOui
Interface{{domxref("CompositionEvent")}}
Propriété du gestionnaire d'événementsAucune
- -

Exemples

- -
const inputElement = document.querySelector('input[type="text"]');
-
-inputElement.addEventListener('compositionstart', (event) => {
-  console.log(`generated characters were: ${event.data}`);
-});
- -

Exemple concret

- -

HTML

- -
<div class="control">
-  <label for="name">Sur macOS, cliquez dans la zone de texte ci-dessous,<br> puis tapez <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd> :</label>
-  <input type="text" id="example" name="example">
-</div>
-
-<div class="event-log">
-  <label>Event log:</label>
-  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
-  <button class="clear-log">Clear</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);
-
- -

Résultat

- -

{{ EmbedLiveSample('Live_example', '100%', '180px') }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('UI Events', '#event-type-compositionstart')}}{{Spec2('UI Events')}}
- -

Compatibilités navigateur

- -

{{Compat("api.Element.compositionstart_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md new file mode 100644 index 0000000000..4de27018bc --- /dev/null +++ b/files/fr/web/api/element/compositionstart_event/index.md @@ -0,0 +1,144 @@ +--- +title: compositionstart +slug: Web/API/Element/compositionstart_event +tags: + - Element + - Event + - Input method + - Reference + - compositionstart +translation_of: Web/API/Element/compositionstart_event +original_slug: Web/Events/compositionstart +--- +
{{APIRef}}
+ +

L'événement compositionstart est déclenché lorsqu'un système de composition de texte tel qu'une {{glossary("input method editor","méthode de saisie")}} démarre une nouvelle session de composition.

+ +

Par exemple, cet événement pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un Pinyin IME.

+ + + + + + + + + + + + + + + + + + + + +
PropagationOui
AnnulableOui
Interface{{domxref("CompositionEvent")}}
Propriété du gestionnaire d'événementsAucune
+ +

Exemples

+ +
const inputElement = document.querySelector('input[type="text"]');
+
+inputElement.addEventListener('compositionstart', (event) => {
+  console.log(`generated characters were: ${event.data}`);
+});
+ +

Exemple concret

+ +

HTML

+ +
<div class="control">
+  <label for="name">Sur macOS, cliquez dans la zone de texte ci-dessous,<br> puis tapez <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd> :</label>
+  <input type="text" id="example" name="example">
+</div>
+
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
+  <button class="clear-log">Clear</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);
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Live_example', '100%', '180px') }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('UI Events', '#event-type-compositionstart')}}{{Spec2('UI Events')}}
+ +

Compatibilités navigateur

+ +

{{Compat("api.Element.compositionstart_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/compositionupdate_event/index.html b/files/fr/web/api/element/compositionupdate_event/index.html deleted file mode 100644 index f0ae9bc134..0000000000 --- a/files/fr/web/api/element/compositionupdate_event/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: compositionupdate -slug: Web/API/Element/compositionupdate_event -translation_of: Web/API/Element/compositionupdate_event -original_slug: Web/Events/compositionupdate ---- -

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

- -

{{Compat("api.Element.compositionupdate_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/compositionupdate_event/index.md b/files/fr/web/api/element/compositionupdate_event/index.md new file mode 100644 index 0000000000..f0ae9bc134 --- /dev/null +++ b/files/fr/web/api/element/compositionupdate_event/index.md @@ -0,0 +1,86 @@ +--- +title: compositionupdate +slug: Web/API/Element/compositionupdate_event +translation_of: Web/API/Element/compositionupdate_event +original_slug: Web/Events/compositionupdate +--- +

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

+ +

{{Compat("api.Element.compositionupdate_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/contextmenu_event/index.html b/files/fr/web/api/element/contextmenu_event/index.html deleted file mode 100644 index 28b416e62e..0000000000 --- a/files/fr/web/api/element/contextmenu_event/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 'Element : évènement contextmenu' -slug: Web/API/Element/contextmenu_event -tags: - - API - - DOM - - Element - - Event - - Reference - - contextemenu -translation_of: Web/API/Element/contextmenu_event ---- -
{{APIRef}}
- -

L'évènement contextmenu est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.

- -

Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.

- -

Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement contextmenu sur l'élément cible.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{DOMxRef("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}
- -

Exemples

- -

Dans cet exemple, on annule l'action par défaut de l'évènement contextmenu avec preventDefault() lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.

- -

HTML

- -
<p id="noContextMenu">Le menu contextuel a été désactivé sur ce paragraphe.</p>
-<p>Mais pas sur celui-ci.</p>
- -

JavaScript

- -
noContext = document.getElementById('noContextMenu');
-
-noContext.addEventListener('contextmenu', e => {
-  e.preventDefault();
-});
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{ SpecName('HTML WHATWG', 'indices.html#event-contextmenu', 'contextmenu')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.contextmenu_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/contextmenu_event/index.md b/files/fr/web/api/element/contextmenu_event/index.md new file mode 100644 index 0000000000..28b416e62e --- /dev/null +++ b/files/fr/web/api/element/contextmenu_event/index.md @@ -0,0 +1,104 @@ +--- +title: 'Element : évènement contextmenu' +slug: Web/API/Element/contextmenu_event +tags: + - API + - DOM + - Element + - Event + - Reference + - contextemenu +translation_of: Web/API/Element/contextmenu_event +--- +
{{APIRef}}
+ +

L'évènement contextmenu est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.

+ +

Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.

+ +

Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement contextmenu sur l'élément cible.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{DOMxRef("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}
+ +

Exemples

+ +

Dans cet exemple, on annule l'action par défaut de l'évènement contextmenu avec preventDefault() lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.

+ +

HTML

+ +
<p id="noContextMenu">Le menu contextuel a été désactivé sur ce paragraphe.</p>
+<p>Mais pas sur celui-ci.</p>
+ +

JavaScript

+ +
noContext = document.getElementById('noContextMenu');
+
+noContext.addEventListener('contextmenu', e => {
+  e.preventDefault();
+});
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{ SpecName('HTML WHATWG', 'indices.html#event-contextmenu', 'contextmenu')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.contextmenu_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/copy_event/index.html b/files/fr/web/api/element/copy_event/index.html deleted file mode 100644 index d4b370823a..0000000000 --- a/files/fr/web/api/element/copy_event/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: copy -slug: Web/API/Element/copy_event -translation_of: Web/API/Element/copy_event -original_slug: Web/Events/copy ---- -

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:

- - - -

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

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('Clipboard API', '#clipboard-event-copy')}}{{Spec2('Clipboard API')}}
- -

Compatibilités navigateur

- -

{{Compat("api.Element.copy_event")}}

- -

Voir aussi

- - - \ No newline at end of file diff --git a/files/fr/web/api/element/copy_event/index.md b/files/fr/web/api/element/copy_event/index.md new file mode 100644 index 0000000000..d4b370823a --- /dev/null +++ b/files/fr/web/api/element/copy_event/index.md @@ -0,0 +1,107 @@ +--- +title: copy +slug: Web/API/Element/copy_event +translation_of: Web/API/Element/copy_event +original_slug: Web/Events/copy +--- +

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:

+ + + +

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

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('Clipboard API', '#clipboard-event-copy')}}{{Spec2('Clipboard API')}}
+ +

Compatibilités navigateur

+ +

{{Compat("api.Element.copy_event")}}

+ +

Voir aussi

+ + + \ No newline at end of file diff --git a/files/fr/web/api/element/dblclick_event/index.html b/files/fr/web/api/element/dblclick_event/index.html deleted file mode 100644 index 9f82b49bd9..0000000000 --- a/files/fr/web/api/element/dblclick_event/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: 'Element : évènement dblclick' -slug: Web/API/Element/dblclick_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - dblclick -translation_of: Web/API/Element/dblclick_event ---- -
{{APIRef}}
- -

L'évènement dblclick se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).

- -

dblclick se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}
- -

Exemples

- -

Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.

- -

JavaScript

- -
const card = document.querySelector('aside');
-
-card.addEventListener('dblclick', function (e) {
-  card.classList.toggle('large');
-});
- -

HTML

- -
<aside>
-  <h3>Une tuile</h3>
-  <p>Double-cliquer pour redimensionner cet objet.</p>
-</aside>
- -

CSS

- -
aside {
-  background: #fe9;
-  border-radius: 1em;
-  display: inline-block;
-  padding: 1em;
-  transform: scale(.9);
-  transform-origin: 0 0;
-  transition: transform .6s;
-}
-
-.large {
-  transform: scale(1.3);
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 700, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.dblclick_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/dblclick_event/index.md b/files/fr/web/api/element/dblclick_event/index.md new file mode 100644 index 0000000000..9f82b49bd9 --- /dev/null +++ b/files/fr/web/api/element/dblclick_event/index.md @@ -0,0 +1,119 @@ +--- +title: 'Element : évènement dblclick' +slug: Web/API/Element/dblclick_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - dblclick +translation_of: Web/API/Element/dblclick_event +--- +
{{APIRef}}
+ +

L'évènement dblclick se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).

+ +

dblclick se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}
+ +

Exemples

+ +

Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.

+ +

JavaScript

+ +
const card = document.querySelector('aside');
+
+card.addEventListener('dblclick', function (e) {
+  card.classList.toggle('large');
+});
+ +

HTML

+ +
<aside>
+  <h3>Une tuile</h3>
+  <p>Double-cliquer pour redimensionner cet objet.</p>
+</aside>
+ +

CSS

+ +
aside {
+  background: #fe9;
+  border-radius: 1em;
+  display: inline-block;
+  padding: 1em;
+  transform: scale(.9);
+  transform-origin: 0 0;
+  transition: transform .6s;
+}
+
+.large {
+  transform: scale(1.3);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 700, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.dblclick_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/error_event/index.html b/files/fr/web/api/element/error_event/index.html deleted file mode 100644 index 8c17b86401..0000000000 --- a/files/fr/web/api/element/error_event/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: error -slug: Web/API/Element/error_event -tags: - - DOM - - Erreurs - - Gestionnaire d'erreurs - - Interface - - évènements -translation_of: Web/API/Element/error_event -original_slug: Web/Events/error ---- -

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/error_event/index.md b/files/fr/web/api/element/error_event/index.md new file mode 100644 index 0000000000..8c17b86401 --- /dev/null +++ b/files/fr/web/api/element/error_event/index.md @@ -0,0 +1,91 @@ +--- +title: error +slug: Web/API/Element/error_event +tags: + - DOM + - Erreurs + - Gestionnaire d'erreurs + - Interface + - évènements +translation_of: Web/API/Element/error_event +original_slug: Web/Events/error +--- +

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 deleted file mode 100644 index 4930d87a2e..0000000000 --- a/files/fr/web/api/element/focusin_event/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: focusin -slug: Web/API/Element/focusin_event -translation_of: Web/API/Element/focusin_event -original_slug: Web/Events/focusin ---- -

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

- -

{{Compat("api.Element.focusin_event")}}

- -

Evénements liés

- - diff --git a/files/fr/web/api/element/focusin_event/index.md b/files/fr/web/api/element/focusin_event/index.md new file mode 100644 index 0000000000..4930d87a2e --- /dev/null +++ b/files/fr/web/api/element/focusin_event/index.md @@ -0,0 +1,76 @@ +--- +title: focusin +slug: Web/API/Element/focusin_event +translation_of: Web/API/Element/focusin_event +original_slug: Web/Events/focusin +--- +

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

+ +

{{Compat("api.Element.focusin_event")}}

+ +

Evénements liés

+ + diff --git a/files/fr/web/api/element/focusout_event/index.html b/files/fr/web/api/element/focusout_event/index.html deleted file mode 100644 index 382060c404..0000000000 --- a/files/fr/web/api/element/focusout_event/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: focusout -slug: Web/API/Element/focusout_event -translation_of: Web/API/Element/focusout_event -original_slug: Web/Events/focusout ---- -

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

- -

{{Compat("api.Element.focusout_event")}}

- -

Evénements liés

- - diff --git a/files/fr/web/api/element/focusout_event/index.md b/files/fr/web/api/element/focusout_event/index.md new file mode 100644 index 0000000000..382060c404 --- /dev/null +++ b/files/fr/web/api/element/focusout_event/index.md @@ -0,0 +1,76 @@ +--- +title: focusout +slug: Web/API/Element/focusout_event +translation_of: Web/API/Element/focusout_event +original_slug: Web/Events/focusout +--- +

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

+ +

{{Compat("api.Element.focusout_event")}}

+ +

Evénements liés

+ + diff --git a/files/fr/web/api/element/getattribute/index.html b/files/fr/web/api/element/getattribute/index.html deleted file mode 100644 index e0aa50f459..0000000000 --- a/files/fr/web/api/element/getattribute/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: element.getAttribute -slug: Web/API/Element/getAttribute -tags: - - API - - DOM - - Element - - Method - - Méthode - - Reference -translation_of: Web/API/Element/getAttribute ---- -

{{APIRef("DOM")}}

- -

getAttribute renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit null soit "" (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.

- -

Syntaxe

- -
let attribut = element.getAttribute(nom_attribut)
-
- -

où

- - - -

Exemple

- -

Soit l'HTML :

- -
const div1 = document.getElementById("div1");
- -

Exemple de JavaScript :

- -
const div1 = document.getElementById("div1");
-//=> <div id="div1">Hi Champ!</div>
-
-const attributID = div1.getAttribute("id");
-//=> "div1"
-
-cont alignement = div1.getAttribute("align");
-//=> null
-
- -

Description

- -

Sensibilité à la casse

- -

Le paramètre nom_attribut est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.

- -

Attributs inexistants

- -

À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient null lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide "", et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler getAttribute() s'il est possible que l'attribut n'existe pas sur l'élément spécifié.

- -

Récupération de nonces

- -

Pour des raisons de sécurité, les nonces CSP des sources autres que des scripts, telles que les feuilles de style CSS, et les appels .getAttribute("nonce") sont interdits.

- -
let nonce = script.getAttribute("nonce");
-// renvoie une chaine vide
- -

Plutôt que de tenter de lire le nonce via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :

- -
let nonce = script.nonce;
- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}}{{Spec2('DOM WHATWG')}}
- -

Compatibilité des navigateurs

- -
{{Compat("api.Element.getAttribute")}}
diff --git a/files/fr/web/api/element/getattribute/index.md b/files/fr/web/api/element/getattribute/index.md new file mode 100644 index 0000000000..e0aa50f459 --- /dev/null +++ b/files/fr/web/api/element/getattribute/index.md @@ -0,0 +1,85 @@ +--- +title: element.getAttribute +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - Element + - Method + - Méthode + - Reference +translation_of: Web/API/Element/getAttribute +--- +

{{APIRef("DOM")}}

+ +

getAttribute renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit null soit "" (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.

+ +

Syntaxe

+ +
let attribut = element.getAttribute(nom_attribut)
+
+ +

où

+ + + +

Exemple

+ +

Soit l'HTML :

+ +
const div1 = document.getElementById("div1");
+ +

Exemple de JavaScript :

+ +
const div1 = document.getElementById("div1");
+//=> <div id="div1">Hi Champ!</div>
+
+const attributID = div1.getAttribute("id");
+//=> "div1"
+
+cont alignement = div1.getAttribute("align");
+//=> null
+
+ +

Description

+ +

Sensibilité à la casse

+ +

Le paramètre nom_attribut est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.

+ +

Attributs inexistants

+ +

À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient null lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide "", et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler getAttribute() s'il est possible que l'attribut n'existe pas sur l'élément spécifié.

+ +

Récupération de nonces

+ +

Pour des raisons de sécurité, les nonces CSP des sources autres que des scripts, telles que les feuilles de style CSS, et les appels .getAttribute("nonce") sont interdits.

+ +
let nonce = script.getAttribute("nonce");
+// renvoie une chaine vide
+ +

Plutôt que de tenter de lire le nonce via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :

+ +
let nonce = script.nonce;
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Element.getAttribute")}}
diff --git a/files/fr/web/api/element/getattributenames/index.html b/files/fr/web/api/element/getattributenames/index.html deleted file mode 100644 index d99f4465fe..0000000000 --- a/files/fr/web/api/element/getattributenames/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Element.getAttributeNames() -slug: Web/API/Element/getAttributeNames -tags: - - API - - Attributs - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/getAttributeNames ---- -

{{APIRef("DOM")}}

- -

Element.getAttributeNames() renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (tableau) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide.

- -

L'utilisation de getAttributeNames() complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}.

- -

Syntaxe

- -
let attributeNames = element.getAttributeNames();
-
- -

Exemple

- -
// Itérer sur les attributs de l'élément
-for(let name of element.getAttributeNames())
-{
-	let value = element.getAttribute(name);
-	console.log(name, value);
-}
-
- -

Polyfill

- -
if (Element.prototype.getAttributeNames == undefined) {
-  Element.prototype.getAttributeNames = function () {
-    var attributes = this.attributes;
-    var length = attributes.length;
-    var result = new Array(length);
-    for (var i = 0; i < length; i++) {
-      result[i] = attributes[i].name;
-    }
-    return result;
-  };
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}{{Spec2("DOM WHATWG")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.getAttributeNames")}}

diff --git a/files/fr/web/api/element/getattributenames/index.md b/files/fr/web/api/element/getattributenames/index.md new file mode 100644 index 0000000000..d99f4465fe --- /dev/null +++ b/files/fr/web/api/element/getattributenames/index.md @@ -0,0 +1,66 @@ +--- +title: Element.getAttributeNames() +slug: Web/API/Element/getAttributeNames +tags: + - API + - Attributs + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/getAttributeNames +--- +

{{APIRef("DOM")}}

+ +

Element.getAttributeNames() renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (tableau) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide.

+ +

L'utilisation de getAttributeNames() complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}.

+ +

Syntaxe

+ +
let attributeNames = element.getAttributeNames();
+
+ +

Exemple

+ +
// Itérer sur les attributs de l'élément
+for(let name of element.getAttributeNames())
+{
+	let value = element.getAttribute(name);
+	console.log(name, value);
+}
+
+ +

Polyfill

+ +
if (Element.prototype.getAttributeNames == undefined) {
+  Element.prototype.getAttributeNames = function () {
+    var attributes = this.attributes;
+    var length = attributes.length;
+    var result = new Array(length);
+    for (var i = 0; i < length; i++) {
+      result[i] = attributes[i].name;
+    }
+    return result;
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}{{Spec2("DOM WHATWG")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.getAttributeNames")}}

diff --git a/files/fr/web/api/element/getattributenode/index.html b/files/fr/web/api/element/getattributenode/index.html deleted file mode 100644 index 3fd3fd508d..0000000000 --- a/files/fr/web/api/element/getattributenode/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: element.getAttributeNode -slug: Web/API/Element/getAttributeNode -tags: - - API - - Attributs - - DOM - - Element - - Méthodes - - Noeud -translation_of: Web/API/Element/getAttributeNode ---- -

{{ APIRef("DOM") }}

- -

Résumé

- -

Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud Attr.

- -

Syntaxe

- -
var attrNode = element.getAttributeNode(attrName);
- - - -

Exemple

- -
// html: <div id="top" />
-var t = document.getElementById("top");
-var idAttr = t.getAttributeNode("id");
-alert(idAttr.value == "top")
-
- -

Notes

- -

Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, getAttributeNode passe en minuscules son argument avant de continuer.

- -

Les nœuds Attr héritent de Node, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme parentNode, previousSibling, et nextSibling sont null pour un nœud Attr. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété ownerElement.

- -

getAttribute est habituellement utilisé à la place de getAttributeNode pour obtenir la valeur d'un attribut d'un élément.

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - \ No newline at end of file diff --git a/files/fr/web/api/element/getattributenode/index.md b/files/fr/web/api/element/getattributenode/index.md new file mode 100644 index 0000000000..3fd3fd508d --- /dev/null +++ b/files/fr/web/api/element/getattributenode/index.md @@ -0,0 +1,51 @@ +--- +title: element.getAttributeNode +slug: Web/API/Element/getAttributeNode +tags: + - API + - Attributs + - DOM + - Element + - Méthodes + - Noeud +translation_of: Web/API/Element/getAttributeNode +--- +

{{ APIRef("DOM") }}

+ +

Résumé

+ +

Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud Attr.

+ +

Syntaxe

+ +
var attrNode = element.getAttributeNode(attrName);
+ + + +

Exemple

+ +
// html: <div id="top" />
+var t = document.getElementById("top");
+var idAttr = t.getAttributeNode("id");
+alert(idAttr.value == "top")
+
+ +

Notes

+ +

Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, getAttributeNode passe en minuscules son argument avant de continuer.

+ +

Les nœuds Attr héritent de Node, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme parentNode, previousSibling, et nextSibling sont null pour un nœud Attr. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété ownerElement.

+ +

getAttribute est habituellement utilisé à la place de getAttributeNode pour obtenir la valeur d'un attribut d'un élément.

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + \ No newline at end of file diff --git a/files/fr/web/api/element/getattributenodens/index.html b/files/fr/web/api/element/getattributenodens/index.html deleted file mode 100644 index a9a9a56f60..0000000000 --- a/files/fr/web/api/element/getattributenodens/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: element.getAttributeNodeNS -slug: Web/API/Element/getAttributeNodeNS -translation_of: Web/API/Element/getAttributeNodeNS ---- -

{{ ApiRef() }}

- -

Résumé

- -

Renvoie le nœud Attr pour l'attribut avec l'espace de noms et le nom donnés.

- -

Syntaxe

- -
attributeNode = element.getAttributeNodeNS(namespace,nodeName)
-
- -

Paramètres

- -
-
attributeNode
-
Le nœud pour l'attribut spécifié.
-
namespace
-
Une chaîne spécifiant l'espace de noms de l'attribut.
-
nodeName
-
Une chaîne spécifiant le nom de l'attribut.
-
- -

== Example == TBD The example needs to be fixed // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top"

- -

Notes

- -

getAttributeNodeNS est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}.

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - \ No newline at end of file diff --git a/files/fr/web/api/element/getattributenodens/index.md b/files/fr/web/api/element/getattributenodens/index.md new file mode 100644 index 0000000000..a9a9a56f60 --- /dev/null +++ b/files/fr/web/api/element/getattributenodens/index.md @@ -0,0 +1,40 @@ +--- +title: element.getAttributeNodeNS +slug: Web/API/Element/getAttributeNodeNS +translation_of: Web/API/Element/getAttributeNodeNS +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

Renvoie le nœud Attr pour l'attribut avec l'espace de noms et le nom donnés.

+ +

Syntaxe

+ +
attributeNode = element.getAttributeNodeNS(namespace,nodeName)
+
+ +

Paramètres

+ +
+
attributeNode
+
Le nœud pour l'attribut spécifié.
+
namespace
+
Une chaîne spécifiant l'espace de noms de l'attribut.
+
nodeName
+
Une chaîne spécifiant le nom de l'attribut.
+
+ +

== Example == TBD The example needs to be fixed // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top"

+ +

Notes

+ +

getAttributeNodeNS est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}.

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + \ No newline at end of file diff --git a/files/fr/web/api/element/getattributens/index.html b/files/fr/web/api/element/getattributens/index.html deleted file mode 100644 index 6a5d33ddb7..0000000000 --- a/files/fr/web/api/element/getattributens/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: element.getAttributeNS -slug: Web/API/Element/getAttributeNS -tags: - - API - - DOM - - Méthode - - Reference -translation_of: Web/API/Element/getAttributeNS ---- -

{{APIRef("DOM")}}

- -

getAttributeNS() est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit null, soit "" (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails.

- -

Syntaxe

- -
attrVal =element.getAttributeNS(namespace,name)
-
- -

Paramètres

- -
-
namespace
-
L'espace de noms dans lequel rechercher l'attribut spécifié.
-
name
-
Le nom de l'attribut à chercher.
-
- -

Valeur de retour

- -

La valeur de chaîne de caractères de l'attribut spécifié. Si  l'attribut n'existe pas, le résultat est null.

- -
-

Note : Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.

-
- -

Exemples

- -

Le document SVG suivant utilise une valeur d'attribut foo d'un espace de nom spécifique :

- -
<svg xmlns="http://www.w3.org/2000/svg"
-    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
-
-  <circle id="target" cx="12" cy="12" r="10" stroke="#444"
-      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/>
-
-  <script type="text/javascript">
-    var ns = 'http://www.example.com/2014/test';
-    var circle = document.getElementById( 'target' );
-
-    console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' );
-  </script>
-</svg>
-
- -

Dans un document HTML5, il faut utiliser test:foo pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge.

- -
<!DOCTYPE html>
-<html>
-<body>
-
-<svg xmlns="http://www.w3.org/2000/svg"
-    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
-  <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2"
-      fill="none" test:foo="Foo value"/>
-</svg>
-
-<script type="text/javascript">
-  var ns = 'http://www.example.com/2014/test';
-  var circle = document.getElementById( 'target' );
-  console.log('Attribute value: ' + circle.getAttribute('test:foo'));
-</script>
-
-</body>
-</html>
- -

Notes

- -

Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place getAttribute() .

- -

La méthode getAttributeNS diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla.

- -

Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler getAttributeNS() s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié.

- -

{{ DOMAttributeMethods() }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}{{Spec2("DOM3 Core")}}Specifie qu'une exception NOT_SUPPORTED_ERR  est levée si l'agent utilisateur ne supporte pas la fonctionnalité "XML". Spécifie également que null doit être passé pour n'avoir aucun espace de noms.
{{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}{{Spec2("DOM2 Core")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.getAttributeNS")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/getattributens/index.md b/files/fr/web/api/element/getattributens/index.md new file mode 100644 index 0000000000..6a5d33ddb7 --- /dev/null +++ b/files/fr/web/api/element/getattributens/index.md @@ -0,0 +1,124 @@ +--- +title: element.getAttributeNS +slug: Web/API/Element/getAttributeNS +tags: + - API + - DOM + - Méthode + - Reference +translation_of: Web/API/Element/getAttributeNS +--- +

{{APIRef("DOM")}}

+ +

getAttributeNS() est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit null, soit "" (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails.

+ +

Syntaxe

+ +
attrVal =element.getAttributeNS(namespace,name)
+
+ +

Paramètres

+ +
+
namespace
+
L'espace de noms dans lequel rechercher l'attribut spécifié.
+
name
+
Le nom de l'attribut à chercher.
+
+ +

Valeur de retour

+ +

La valeur de chaîne de caractères de l'attribut spécifié. Si  l'attribut n'existe pas, le résultat est null.

+ +
+

Note : Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.

+
+ +

Exemples

+ +

Le document SVG suivant utilise une valeur d'attribut foo d'un espace de nom spécifique :

+ +
<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
+
+  <circle id="target" cx="12" cy="12" r="10" stroke="#444"
+      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/>
+
+  <script type="text/javascript">
+    var ns = 'http://www.example.com/2014/test';
+    var circle = document.getElementById( 'target' );
+
+    console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' );
+  </script>
+</svg>
+
+ +

Dans un document HTML5, il faut utiliser test:foo pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge.

+ +
<!DOCTYPE html>
+<html>
+<body>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
+  <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2"
+      fill="none" test:foo="Foo value"/>
+</svg>
+
+<script type="text/javascript">
+  var ns = 'http://www.example.com/2014/test';
+  var circle = document.getElementById( 'target' );
+  console.log('Attribute value: ' + circle.getAttribute('test:foo'));
+</script>
+
+</body>
+</html>
+ +

Notes

+ +

Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place getAttribute() .

+ +

La méthode getAttributeNS diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla.

+ +

Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler getAttributeNS() s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié.

+ +

{{ DOMAttributeMethods() }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}{{Spec2("DOM3 Core")}}Specifie qu'une exception NOT_SUPPORTED_ERR  est levée si l'agent utilisateur ne supporte pas la fonctionnalité "XML". Spécifie également que null doit être passé pour n'avoir aucun espace de noms.
{{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}{{Spec2("DOM2 Core")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.getAttributeNS")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/getboundingclientrect/index.html b/files/fr/web/api/element/getboundingclientrect/index.html deleted file mode 100644 index 7fef648005..0000000000 --- a/files/fr/web/api/element/getboundingclientrect/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Element.getBoundingClientRect() -slug: Web/API/Element/getBoundingClientRect -tags: - - API - - Boundary - - Bounding - - Bounds - - CSSOM View - - Client - - Containing - - DOM - - Element - - Enclosing - - Method - - Méthode - - Minimum - - Rectangle - - Reference - - Smallest - - clientHeight - - getBoundingClientRect - - getClientRects - - offsetHeight - - scrollHeight -translation_of: Web/API/Element/getBoundingClientRect ---- -
{{APIRef("DOM")}}
- -

La méthode Element.getBoundingClientRect() retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la zone d'affichage.

- -

Syntaxe

- -
objetRect = object.getBoundingClientRect();
- -

Valeur de retour

- -

La valeur de retour est un objet {{domxref("DOMRect")}} qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés left, top, right, bottom, x, y, width, et height, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que width et height sont relatives au coin en haut à gauche de la zone d'affichage.Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode.

- -

Les propriétés width et height de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le padding et border-width, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété width ou height de l'élément + padding + border-width. Mais si box-sizing: border-box est défini pour l'élément, cela correpondrait seulement width ou height.

- -

La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.

- -

Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel width et height valent 0 et où top et left correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément.

- -

La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (top, right, bottom, left) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues).

- -

Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés top et left (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.

- -

Solution de prise en charge multi-navigateurs

- -

Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser window.pageXOffset et window.pageYOffset plutôt que window.scrollX et window.scrollY. Les scripts qui ne peuvent pas utiliser window.pageXOffset, window.pageYOffset, window.scrollX ou window.scrollY pourront utiliser cette méthode :

- -
// Pour scrollX
-(((t = document.documentElement) || (t = document.body.parentNode))
-  && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
-// Pour scrollY
-(((t = document.documentElement) || (t = document.body.parentNode))
-  && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
-
- -

Exemple

- -

Ce simple exemple récupère l'objet DOMRect représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.

- -
<div></div>
- -
div {
-  width: 400px;
-  height: 200px;
-  padding: 20px;
-  margin: 50px auto;
-  background: purple;
-}
- -
let elem = document.querySelector('div');
-let rect = elem.getBoundingClientRect();
-for (let key in rect) {
-  if(typeof rect[key] !== 'function') {
-    let para = document.createElement('p');
-    para.textContent  = `${ key } : ${ rect[key] }`;
-    document.body.appendChild(para);
-  }
-}
- -

{{EmbedLiveSample('Example', '100%', 640)}}

- -

Remarquez comme les width/height sont égales à - width/height + padding.

- -

Remarquez aussi que les valeurs de x/left, - y/top, right, et bottom sont égales à la distance absolue depuis le bord de la zone d'affichage jusqu'au coté de l'element dans chaque cas.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Définition initiale.
- -

Notes

- -

L'objet DOMRect retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement DOMRectReadOnly. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet ClientRect qu'ils retournent empêche d'ajouter le support de x et y.

- -

En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés top, left, right, et bottom.

- -

Les propriétés dans l'objet DOMRect retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs in et for...in vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que Object.assign() et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.

- -
rect = elt.getBoundingClientRect()
-// The result in emptyObj is {}
-emptyObj = Object.assign({}, rect)
-emptyObj = { ...rect }
-{ width, ...emptyObj } = rect
- -

Les propriétés top, left, right, et bottom de DOMRect sont calculées en utilisant les valeurs des autres propriétés de l'objet.

- -

Compatibilité des navigateurs

- -
{{Compat("api.Element.getBoundingClientRect")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md new file mode 100644 index 0000000000..7fef648005 --- /dev/null +++ b/files/fr/web/api/element/getboundingclientrect/index.md @@ -0,0 +1,139 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Boundary + - Bounding + - Bounds + - CSSOM View + - Client + - Containing + - DOM + - Element + - Enclosing + - Method + - Méthode + - Minimum + - Rectangle + - Reference + - Smallest + - clientHeight + - getBoundingClientRect + - getClientRects + - offsetHeight + - scrollHeight +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

La méthode Element.getBoundingClientRect() retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la zone d'affichage.

+ +

Syntaxe

+ +
objetRect = object.getBoundingClientRect();
+ +

Valeur de retour

+ +

La valeur de retour est un objet {{domxref("DOMRect")}} qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés left, top, right, bottom, x, y, width, et height, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que width et height sont relatives au coin en haut à gauche de la zone d'affichage.Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode.

+ +

Les propriétés width et height de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le padding et border-width, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété width ou height de l'élément + padding + border-width. Mais si box-sizing: border-box est défini pour l'élément, cela correpondrait seulement width ou height.

+ +

La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.

+ +

Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel width et height valent 0 et où top et left correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément.

+ +

La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (top, right, bottom, left) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues).

+ +

Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés top et left (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.

+ +

Solution de prise en charge multi-navigateurs

+ +

Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser window.pageXOffset et window.pageYOffset plutôt que window.scrollX et window.scrollY. Les scripts qui ne peuvent pas utiliser window.pageXOffset, window.pageYOffset, window.scrollX ou window.scrollY pourront utiliser cette méthode :

+ +
// Pour scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
+// Pour scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
+
+ +

Exemple

+ +

Ce simple exemple récupère l'objet DOMRect représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.

+ +
<div></div>
+ +
div {
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  margin: 50px auto;
+  background: purple;
+}
+ +
let elem = document.querySelector('div');
+let rect = elem.getBoundingClientRect();
+for (let key in rect) {
+  if(typeof rect[key] !== 'function') {
+    let para = document.createElement('p');
+    para.textContent  = `${ key } : ${ rect[key] }`;
+    document.body.appendChild(para);
+  }
+}
+ +

{{EmbedLiveSample('Example', '100%', 640)}}

+ +

Remarquez comme les width/height sont égales à + width/height + padding.

+ +

Remarquez aussi que les valeurs de x/left, + y/top, right, et bottom sont égales à la distance absolue depuis le bord de la zone d'affichage jusqu'au coté de l'element dans chaque cas.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Définition initiale.
+ +

Notes

+ +

L'objet DOMRect retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement DOMRectReadOnly. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet ClientRect qu'ils retournent empêche d'ajouter le support de x et y.

+ +

En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés top, left, right, et bottom.

+ +

Les propriétés dans l'objet DOMRect retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs in et for...in vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que Object.assign() et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.

+ +
rect = elt.getBoundingClientRect()
+// The result in emptyObj is {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{ width, ...emptyObj } = rect
+ +

Les propriétés top, left, right, et bottom de DOMRect sont calculées en utilisant les valeurs des autres propriétés de l'objet.

+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Element.getBoundingClientRect")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/getelementsbyclassname/index.html b/files/fr/web/api/element/getelementsbyclassname/index.html deleted file mode 100644 index 016d94535a..0000000000 --- a/files/fr/web/api/element/getelementsbyclassname/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Element.getElementsByClassName() -slug: Web/API/Element/getElementsByClassName -tags: - - API - - Classes - - Element - - Method - - Reference - - getElementByClassName -translation_of: Web/API/Element/getElementsByClassName ---- -

{{APIRef("DOM")}}

- -

La méthode Element.getElementsByClassName() retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.

- -

À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.

- -

Syntaxe

- -
var elements = element.getElementsByClassName(names);
- - - -

Exemples

- -

Obtient tous les élements ayant une classe test:

- -
element.getElementsByClassName('test');
- -

Obtient tous les élements ayant à la fois la classe red et la classe test:

- -
element.getElementsByClassName('red test');
- -

Obtient tous les élements qui ont une classe test, à l'intérieur d'un élement qui a pour id main:

- -
document.getElementById('main').getElementsByClassName('test');
- -

On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la HTMLCollection comme valeur this de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe test:

- -
var testElements = document.getElementsByClassName('test');
-var testDivs = Array.prototype.filter.call(testElements, function(testElement){
-    return testElement.nodeName === 'div';
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.getElementsByClassName")}}

diff --git a/files/fr/web/api/element/getelementsbyclassname/index.md b/files/fr/web/api/element/getelementsbyclassname/index.md new file mode 100644 index 0000000000..016d94535a --- /dev/null +++ b/files/fr/web/api/element/getelementsbyclassname/index.md @@ -0,0 +1,69 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +tags: + - API + - Classes + - Element + - Method + - Reference + - getElementByClassName +translation_of: Web/API/Element/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

La méthode Element.getElementsByClassName() retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.

+ +

À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.

+ +

Syntaxe

+ +
var elements = element.getElementsByClassName(names);
+ + + +

Exemples

+ +

Obtient tous les élements ayant une classe test:

+ +
element.getElementsByClassName('test');
+ +

Obtient tous les élements ayant à la fois la classe red et la classe test:

+ +
element.getElementsByClassName('red test');
+ +

Obtient tous les élements qui ont une classe test, à l'intérieur d'un élement qui a pour id main:

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la HTMLCollection comme valeur this de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe test:

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.getElementsByClassName")}}

diff --git a/files/fr/web/api/element/getelementsbytagname/index.html b/files/fr/web/api/element/getelementsbytagname/index.html deleted file mode 100644 index 8cbef3215e..0000000000 --- a/files/fr/web/api/element/getelementsbytagname/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: element.getElementsByTagName -slug: Web/API/Element/getElementsByTagName -tags: - - API - - DOM - - Element - - Méthode - - Reference -translation_of: Web/API/Element/getElementsByTagName ---- -

{{APIRef("DOM")}}

- -

La méthode Element.getElementsByTagName() retourne une liste des éléments portant le nom de balise donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est live, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois Element.getElementsByTagName() avec le même élément et les mêmes arguments.

- -

Quand elle est appelée sur un élément HTML dans un document HTML, getElementsByTagName place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased" dans une sous-arborescence dans un document HTML. {{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.

- -

Element.getElementsByTagName est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.

- -

Syntaxe

- -
elements = element.getElementsByTagName(tagName)
- - - -

Exemple

- -
// vérifie l'alignement sur un nombre de cellules dans un tableau. 
-var table = document.getElementById("forecast-table");
-var cells = table.getElementsByTagName("td");
-for (var i = 0; i < cells.length; i++) {
-    var status = cells[i].getAttribute("data-status");
-    if ( status == "open" ) {
-        // saisit les données 
-    }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}{{Spec2('DOM WHATWG')}}Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}}
{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM3 Core')}}Pas de changement par rapport à {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM2 Core')}}Pas de changement par rapport à {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.getElementsByTagName")}}

diff --git a/files/fr/web/api/element/getelementsbytagname/index.md b/files/fr/web/api/element/getelementsbytagname/index.md new file mode 100644 index 0000000000..8cbef3215e --- /dev/null +++ b/files/fr/web/api/element/getelementsbytagname/index.md @@ -0,0 +1,76 @@ +--- +title: element.getElementsByTagName +slug: Web/API/Element/getElementsByTagName +tags: + - API + - DOM + - Element + - Méthode + - Reference +translation_of: Web/API/Element/getElementsByTagName +--- +

{{APIRef("DOM")}}

+ +

La méthode Element.getElementsByTagName() retourne une liste des éléments portant le nom de balise donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est live, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois Element.getElementsByTagName() avec le même élément et les mêmes arguments.

+ +

Quand elle est appelée sur un élément HTML dans un document HTML, getElementsByTagName place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased" dans une sous-arborescence dans un document HTML. {{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.

+ +

Element.getElementsByTagName est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.

+ +

Syntaxe

+ +
elements = element.getElementsByTagName(tagName)
+ + + +

Exemple

+ +
// vérifie l'alignement sur un nombre de cellules dans un tableau. 
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i < cells.length; i++) {
+    var status = cells[i].getAttribute("data-status");
+    if ( status == "open" ) {
+        // saisit les données 
+    }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}{{Spec2('DOM WHATWG')}}Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}}
{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM3 Core')}}Pas de changement par rapport à {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM2 Core')}}Pas de changement par rapport à {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.getElementsByTagName")}}

diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.html b/files/fr/web/api/element/getelementsbytagnamens/index.html deleted file mode 100644 index 3bb1bbba96..0000000000 --- a/files/fr/web/api/element/getelementsbytagnamens/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Element.getElementsByTagNameNS() -slug: Web/API/Element/getElementsByTagNameNS -tags: - - API - - DOM - - Element - - Méthode - - Reference -translation_of: Web/API/Element/getElementsByTagNameNS ---- -

{{APIRef("DOM")}}

- -

La méthode Element.getElementsByTagNameNS() renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que getElementsByTagNameNS() recherche parmi les descendants de l'élément courant.

- -

Syntaxe

- -
elements = element.getElementsByTagNameNS(namespaceURI,localName);
- -

Paramètres

- -
-
namespaceURI
-
L'URI de l'espace de noms des éléments à rechercher (cf. namespaceURI). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, http://www.w3.org/1999/xhtml.
-
localName
-
Le nom local des éléments à rechercher ou la valeur spéciale "*" (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}.
-
- -

Valeur de retour

- -

Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.

- -

Exemples

- -
// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
-var table = document.getElementById("forecast-table");
-var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
-for (var i = 0; i < cells.length; i++) {
-  var axis = cells[i].getAttribute("axis");
-  if (axis == "year") {
-    // saisit les données
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM WHATWG')}}Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}.
{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM3 Core')}}Aucune modification depuis {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM2 Core')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.getElementsByTagNameNS")}}

diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.md b/files/fr/web/api/element/getelementsbytagnamens/index.md new file mode 100644 index 0000000000..3bb1bbba96 --- /dev/null +++ b/files/fr/web/api/element/getelementsbytagnamens/index.md @@ -0,0 +1,75 @@ +--- +title: Element.getElementsByTagNameNS() +slug: Web/API/Element/getElementsByTagNameNS +tags: + - API + - DOM + - Element + - Méthode + - Reference +translation_of: Web/API/Element/getElementsByTagNameNS +--- +

{{APIRef("DOM")}}

+ +

La méthode Element.getElementsByTagNameNS() renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que getElementsByTagNameNS() recherche parmi les descendants de l'élément courant.

+ +

Syntaxe

+ +
elements = element.getElementsByTagNameNS(namespaceURI,localName);
+ +

Paramètres

+ +
+
namespaceURI
+
L'URI de l'espace de noms des éléments à rechercher (cf. namespaceURI). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, http://www.w3.org/1999/xhtml.
+
localName
+
Le nom local des éléments à rechercher ou la valeur spéciale "*" (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}.
+
+ +

Valeur de retour

+ +

Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.

+ +

Exemples

+ +
// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
+for (var i = 0; i < cells.length; i++) {
+  var axis = cells[i].getAttribute("axis");
+  if (axis == "year") {
+    // saisit les données
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM WHATWG')}}Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}.
{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM3 Core')}}Aucune modification depuis {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM2 Core')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.getElementsByTagNameNS")}}

diff --git a/files/fr/web/api/element/hasattribute/index.html b/files/fr/web/api/element/hasattribute/index.html deleted file mode 100644 index 5c90c03771..0000000000 --- a/files/fr/web/api/element/hasattribute/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: element.hasAttribute -slug: Web/API/Element/hasAttribute -tags: - - API - - DOM - - Element - - Méthode - - Reference -translation_of: Web/API/Element/hasAttribute ---- -

{{APIRef("DOM")}}

- -

La méthode Element.hasAttribute() renvoie une valeur booléenne indiquant si l'élément courant possède l'attribut spécifié ou non.

- -

Syntaxe

- -
var result = element.hasAttribute(name);
-
- -
-
result
-
récupère la valeur de retour true ou false.
-
name
-
est une chaine de caractères représentant le nom de l'attribut.
-
- -

Exemple

- -
var foo = document.getElementById("foo");
-if (foo.hasAttribute("bar")) {
-    // faire quelque chose
-}
- -

Polyfill

- -
;(function(prototype) {
-    prototype.hasAttribute = prototype.hasAttribute || function(name) {
-        return !!(this.attributes[name] &&
-                  this.attributes[name].specified);
-    }
-})(Element.prototype);
- -

Notes

- -

{{DOMAttributeMethods}}

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Pas de changement par rapport à {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Définition initiale.
- -

Browser compatibility

- -

{{Compat("api.Element.hasAttribute")}}

diff --git a/files/fr/web/api/element/hasattribute/index.md b/files/fr/web/api/element/hasattribute/index.md new file mode 100644 index 0000000000..5c90c03771 --- /dev/null +++ b/files/fr/web/api/element/hasattribute/index.md @@ -0,0 +1,77 @@ +--- +title: element.hasAttribute +slug: Web/API/Element/hasAttribute +tags: + - API + - DOM + - Element + - Méthode + - Reference +translation_of: Web/API/Element/hasAttribute +--- +

{{APIRef("DOM")}}

+ +

La méthode Element.hasAttribute() renvoie une valeur booléenne indiquant si l'élément courant possède l'attribut spécifié ou non.

+ +

Syntaxe

+ +
var result = element.hasAttribute(name);
+
+ +
+
result
+
récupère la valeur de retour true ou false.
+
name
+
est une chaine de caractères représentant le nom de l'attribut.
+
+ +

Exemple

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // faire quelque chose
+}
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &&
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+ +

Notes

+ +

{{DOMAttributeMethods}}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Pas de changement par rapport à {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Définition initiale.
+ +

Browser compatibility

+ +

{{Compat("api.Element.hasAttribute")}}

diff --git a/files/fr/web/api/element/hasattributens/index.html b/files/fr/web/api/element/hasattributens/index.html deleted file mode 100644 index d30aca00e1..0000000000 --- a/files/fr/web/api/element/hasattributens/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: element.hasAttributeNS -slug: Web/API/Element/hasAttributeNS -tags: - - API - - Attributs - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/hasAttributeNS ---- -

{{ APIRef("DOM") }}

- -

Résumé

- -

hasAttributeNS renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.

- -

Syntaxe

- -
result =
-element.hasAttributeNS(
-namespace,
-localName)
- -
-
result
-
Une valeur booléenne true ou false.
-
namespace
-
Une chaîne spécifiant l'espace de noms de l'attribut.
-
localName
-
Le nom de l'attribut.
-
- -

Exemple

- -
// Vérifie que l'attribut existe
-// avant de définir une valeur
-var d = document.getElementById("div1");
-if (d.hasAttributeNS(
-        "http://www.mozilla.org/ns/specialspace/",
-        "special-align")) {
-   d.setAttribute("align", "center");
-}
-
- -

Notes

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - diff --git a/files/fr/web/api/element/hasattributens/index.md b/files/fr/web/api/element/hasattributens/index.md new file mode 100644 index 0000000000..d30aca00e1 --- /dev/null +++ b/files/fr/web/api/element/hasattributens/index.md @@ -0,0 +1,54 @@ +--- +title: element.hasAttributeNS +slug: Web/API/Element/hasAttributeNS +tags: + - API + - Attributs + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/hasAttributeNS +--- +

{{ APIRef("DOM") }}

+ +

Résumé

+ +

hasAttributeNS renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.

+ +

Syntaxe

+ +
result =
+element.hasAttributeNS(
+namespace,
+localName)
+ +
+
result
+
Une valeur booléenne true ou false.
+
namespace
+
Une chaîne spécifiant l'espace de noms de l'attribut.
+
localName
+
Le nom de l'attribut.
+
+ +

Exemple

+ +
// Vérifie que l'attribut existe
+// avant de définir une valeur
+var d = document.getElementById("div1");
+if (d.hasAttributeNS(
+        "http://www.mozilla.org/ns/specialspace/",
+        "special-align")) {
+   d.setAttribute("align", "center");
+}
+
+ +

Notes

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/hasattributes/index.html b/files/fr/web/api/element/hasattributes/index.html deleted file mode 100644 index ec7c62931f..0000000000 --- a/files/fr/web/api/element/hasattributes/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: element.hasAttributes -slug: Web/API/Element/hasAttributes -tags: - - API - - DOM - - Element - - Méthode - - Reference - - polyfill -translation_of: Web/API/Element/hasAttributes ---- -
{{ApiRef("DOM")}}
- -

La méthode hasAttributes(), rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non.

- -

Syntaxe

- -
var result = element.hasAttributes();
- -

Valeur de retour

- -
-
result
-
contient la valeur de retour true ou false.
-
- -

Exemple

- -
var foo = document.getElementById("foo");
-if (foo.hasAttributes()) {
-    // faire quelque chose avec 'foo.attributes'
-}
- -

Polyfill

- -
;(function(prototype) {
-    prototype.hasAttributes = prototype.hasAttributes || function() {
-        return (this.attributes.length > 0);
-    }
-})(Element.prototype);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}{{Spec2('DOM WHATWG')}}Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}.
{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM3 Core')}}Pas de changement par rapport à {{SpecName("DOM2 Core")}}
{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM2 Core')}}Définition initiale, sur l'interface {{domxref("Node")}}.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.hasAttributes")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/hasattributes/index.md b/files/fr/web/api/element/hasattributes/index.md new file mode 100644 index 0000000000..ec7c62931f --- /dev/null +++ b/files/fr/web/api/element/hasattributes/index.md @@ -0,0 +1,79 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - API + - DOM + - Element + - Méthode + - Reference + - polyfill +translation_of: Web/API/Element/hasAttributes +--- +
{{ApiRef("DOM")}}
+ +

La méthode hasAttributes(), rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non.

+ +

Syntaxe

+ +
var result = element.hasAttributes();
+ +

Valeur de retour

+ +
+
result
+
contient la valeur de retour true ou false.
+
+ +

Exemple

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttributes()) {
+    // faire quelque chose avec 'foo.attributes'
+}
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttributes = prototype.hasAttributes || function() {
+        return (this.attributes.length > 0);
+    }
+})(Element.prototype);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}{{Spec2('DOM WHATWG')}}Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}.
{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM3 Core')}}Pas de changement par rapport à {{SpecName("DOM2 Core")}}
{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}{{Spec2('DOM2 Core')}}Définition initiale, sur l'interface {{domxref("Node")}}.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.hasAttributes")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/id/index.html b/files/fr/web/api/element/id/index.html deleted file mode 100644 index 29e4752a20..0000000000 --- a/files/fr/web/api/element/id/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: element.id -slug: Web/API/Element/id -tags: - - API - - DOM - - Element - - Propriété - - Reference -translation_of: Web/API/Element/id ---- -

{{ApiRef("DOM")}}

- -

La propriété Element.id représente l'identifiant de l'élément, reflétant l' id global de l'attribut.

- -

Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}. Les autres utilisations courantes de id comprennent l'utilisation de l'ID de l'élément en tant que sélecteur lors de la mise en forme du document avec CSS.

- -
-

Note : Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir Sensibilité à la casse dans les noms de classe et d'identifiant).

-
- -

Syntaxe

- -
var idStr = elt.id; // Obtenez l'identifiant
-elt.id = idStr; // Définir l'identifiant
- - - -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}{{Spec2('DOM WHATWG')}}Pas de changement par rapport à {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}}Pas de changement par rapport à {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.id")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/id/index.md b/files/fr/web/api/element/id/index.md new file mode 100644 index 0000000000..29e4752a20 --- /dev/null +++ b/files/fr/web/api/element/id/index.md @@ -0,0 +1,68 @@ +--- +title: element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - Element + - Propriété + - Reference +translation_of: Web/API/Element/id +--- +

{{ApiRef("DOM")}}

+ +

La propriété Element.id représente l'identifiant de l'élément, reflétant l' id global de l'attribut.

+ +

Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}. Les autres utilisations courantes de id comprennent l'utilisation de l'ID de l'élément en tant que sélecteur lors de la mise en forme du document avec CSS.

+ +
+

Note : Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir Sensibilité à la casse dans les noms de classe et d'identifiant).

+
+ +

Syntaxe

+ +
var idStr = elt.id; // Obtenez l'identifiant
+elt.id = idStr; // Définir l'identifiant
+ + + +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}{{Spec2('DOM WHATWG')}}Pas de changement par rapport à {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}}Pas de changement par rapport à {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.id")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html deleted file mode 100644 index ac94a2ffc9..0000000000 --- a/files/fr/web/api/element/index.html +++ /dev/null @@ -1,425 +0,0 @@ ---- -title: Element -slug: Web/API/Element -translation_of: Web/API/Element -browser-compat: api.Element ---- -
{{APIRef("DOM")}}
- -

Element est la classe de base la plus générique dont héritent tous les objets qui représentent des éléments d'un Document. Elle contient uniquement des méthodes et propriétés communes à l'ensemble des éléments. Des classes plus spécifiques héritent d'Element. Ainsi, l'interface HTMLElement correspond à l'interface de base pour les éléments HTML tandis que l'interface SVGElement représente la base pour les éléments SVG. La plupart des fonctionnalités sont définies dans les classes situées plus loin dans la hiérarchie.

- -

Propriétés

- -

Element hérite des propriétés de son interface parente : Node (et donc indirectement des propriétés du parent de celle-ci : EventTarget).

- -
-
Element.assignedSlot{{readonlyInline}}
-
Renvoie un objet HTMLSlotElement représentant l'emplacement (<slot>) dans lequel le nœud est inséré.
-
Element.attributes {{readOnlyInline}}
-
Renvoie un objet NamedNodeMap contenant les attributs affectés de l'élément HTML correspondant.
-
Element.childElementCount {{readonlyInline}}
-
Renvoie le nombre d'éléments enfants de cet élément.
-
Element.children {{readonlyInline}}
-
Renvoie les éléments enfants de cet élément.
-
Element.classList {{readOnlyInline}}
-
Renvoie un objet DOMTokenList contenant la liste des attributs de classe.
-
Element.className
-
Une chaîne de caractères DOMString qui représente la classe de l'élément.
-
Element.clientHeight {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la hauteur intérieure de l'élément.
-
Element.clientLeft {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la largeur de la bordure gauche de l'élément.
-
Element.clientTop {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la largeur de la bordure haute de l'élément.
-
Element.clientWidth {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la largeur intérieure de l'élément.
-
Element.firstElementChild {{readonlyInline}}
-
Renvoie le premier élément enfant de cet élément.
-
Element.id
-
Une chaîne de caractères DOMString qui représente l'identifiant de l'élément.
-
Element.innerHTML
-
Une chaîne de caractères DOMString qui représente le balisage du contenu de l'élément.
-
Element.lastElementChild {{readonlyInline}}
-
Renvoie le dernier élément enfant de cet élément.
-
Element.localName {{readOnlyInline}}
-
Une chaîne de caractères DOMString qui représente la partie locale pour le nom qualifié de l'élément.
-
Element.namespaceURI {{readonlyInline}}
-
L'URI pour l'espace de noms de l'élément ou null s'il n'y en a pas. -
-

Note : Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms http://www.w3.org/1999/xhtml tant pour les arbres HTML que XML.

-
-
-
Element.nextElementSibling {{readOnlyInline}}
-
Un objet Element qui représente l'élément qui suit immédiatement l'élément courant dans l'arbre ou null si l'élément courant n'a pas de voisin.
-
Element.outerHTML
-
Une chaîne de caractères DOMString qui représente le balisage de l'élément (incluant son contenu). Lorsque cette propriété est utilisée en modification, cela remplace l'élément avec les noeuds construits à partir de l'analyse de la chaîne de caractères fournie.
-
Element.part
-
Représente les identifiants des parties de l'élément (c'est-à-dire ceux définis avec l'attribut part) sous la forme d'un objet DOMTokenList.
-
Element.prefix {{readOnlyInline}}
-
Une chaîne de caractères DOMString qui représente le préfixe de l'espace de nom pour l'élément ou null si aucun préfixe n'est défini.
-
Element.previousElementSibling {{readOnlyInline}}
-
Un objet Element qui représente l'élément qui précède immédiatement l'élément courant dans l'arbre ou null si l'élément courant n'a pas de voisin.
-
Element.scrollHeight {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la hauteur de la vue de défilement pour l'élément.
-
Element.scrollLeft
-
Un nombre (Number) qui représente le décalage à gauche de l'élément lié au défilement.
-
Element.scrollLeftMax {{Non-standard_Inline}} {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant le décalage à gauche maximal pour l'élément lors du défilement.
-
Element.scrollTop
-
Un nombre (Number) qui représente le nombre de pixels dont on a fait défiler verticalement le haut de l'élément.
-
Element.scrollTopMax {{Non-standard_Inline}} {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant le décalage maximal depuis le haut de l'élément lors du défilement.
-
Element.scrollWidth {{readOnlyInline}}
-
Renvoie un nombre (Number) représentant la largeur de la vue de défilement pour l'élément.
-
Element.shadowRoot{{readOnlyInline}}
-
Renvoie la racine sombre ouverte (open shadow root) hébergée par l'élément ou null si aucune racine sombre ouverte n'est présente.
-
Element.openOrClosedShadowRoot {{Non-standard_Inline}}{{readOnlyInline}}
-
Renvoie la racine sombre hébergée par l'élément (qu'elle soit ouverte ou fermée). Uniquement disponible pour les WebExtensions.
-
Element.slot {{Experimental_Inline}}
-
Renvoie le nom de l'emplacement du DOM sombre dans lequel l'élément est inséré.
-
Element.tagName {{readOnlyInline}}
-
Renvoie une chaîne de caractères (String) qui est le nom de la balise pour l'élément courant.
-
- -

Propriétés provenant d'ARIA

- -

L'interface Element inclut les propriétés suivantes, définies sur le mixin ARIAMixin.

- -
-
Element.ariaAtomic
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-atomic qui indique si des technologies d'assistance présenteront tout ou partie de la région modifiée selon les notifications définies par l'attribut aria-relevant.
-
Element.ariaAutoComplete
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-autocomplete qui indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs prédictions pour la valeur saisie par l'utilisateur à destination d'une liste de choix, d'une boîte de recherche ou d'une zone de texte. Elle indique également la façon dont les éventuelles prédictions seraient présentées.
-
Element.ariaBusy
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-busy qui indique d'un élément est en train d'être modifié. Les technologies d'assistance peuvent alors faire le choix d'attendre la fin de la modification avant d'exposer le contenu à l'utilisateur.
-
Element.ariaChecked
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-checked indiquant l'état coché (ou non) des cases à cocher, des boutons radio ou des autres éléments d'interface graphique qui peuvent être cochés.
-
Element.ariaColCount
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-colcount indiquant le nombre de colonnes d'un tableau, d'une grille ou d'une grille arborescente.
-
Element.ariaColIndex
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-colindex qui définit l'indice de la colonne d'un élément ou sa position par rapport au nombre total de colonnes d'un tableau, d'une grille ou d'une grille arborescente.
-
Element.ariaColIndexText
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-colindextext qui définit texte alternatif à aria-colindex qui soit compréhensible par un humain.
-
Element.ariaColSpan
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-colspan qui définit le nombre de colonnes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.
-
Element.ariaCurrent
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-current qui indique l'élément représente l'objet courant dans un conteneur ou un ensemble d'éléments.
-
Element.ariaDescription
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-description qui définit la chaîne de caractères pour décrire ou annoter l'élément courant.
-
Element.ariaDisabled
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-disabled qui indique que l'élément est perceptible mais désactivé et qu'il ne peut être édité ou manipulé.
-
Element.ariaExpanded
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-expanded qui indique si un élément de groupement contrôlé par l'élément courant est développé ou replié.
-
Element.ariaHasPopup
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-haspopup qui indique la disponibilité et le type d'élément interactif visuel comme un menu ou une boîte de dialogue pouvant être généré par l'élément courant.
-
Element.ariaHidden
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-hidden qui indique si l'élément est exposé à une API d'accessibilité.
-
Element.ariaKeyShortcuts
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-keyshortcuts qui indique les raccourcis clavier implémentés spécifiquement pour activer ou fournir le focus à un élément.
-
Element.ariaLabel
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-label qui définit une chaîne de caractères étant un libellé pour l'élément courant.
-
Element.ariaLevel
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-level qui définit le niveau hiérarchique de l'élément au sein d'une structure.
-
Element.ariaLive
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-live qui indique que l'élément sera mis à jour et qui décrit les types de mises à jour qui peuvent être attendues par les agents utilisateur, les outils d'assistance et l'utilisateur.
-
Element.ariaModal
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-modal qui indique si un élément est modal lorsqu'il est affiché.
-
Element.ariaMultiline
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-multiline qui indique si une zone de texte accepte une saisie sur plusieurs lignes ou sur une seule ligne.
-
Element.ariaMultiSelectable
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-multiselectable qui indique que la personne peut choisir plus d'un élément parmi les éléments descendants qui peuvent être sélectionnés.
-
Element.ariaOrientation
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-orientation qui indique si l'orientation de l'élément est horizontale, verticale ou inconnue voire ambigüe.
-
Element.ariaPlaceholder
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-placeholder qui définit une indication courte destinée à aider l'utilisateur à saisir une valeur lorsque le contrôle ne possède pas de valeur.
-
Element.ariaPosInSet
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-posinset qui définit l'index ou la position de l'élément courant dans l'ensemble ou l'arbre d'éléments.
-
Element.ariaPressed
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-pressed qui indique l'état actif/pressé des boutons.
-
Element.ariaReadOnly
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-readonly qui indique que l'élément ne peut pas être édité mais qu'il peut être utilisé sinon.
-
Element.ariaRelevant
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-relevant qui indique les notifications qui seront déclenchées par l'agent utilisateur lorsque l'arbre d'accessibilité d'une région interactive sera modifié. Cette propriété est utilisée afin de décrire quels changements d'une région aria-live sont pertinents et devraient être annoncés.
-
Element.ariaRequired
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-required qui indique que la saisie d'une utilisatrice ou d'un utilisateur est requise sur l'élément avant qu'un formulaire puisse être envoyé.
-
Element.ariaRoleDescription
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-roledescription qui définit une description compréhensible par un humain, adaptée par l'autrice ou l'auteur du document pour le rôle de l'élément courant.
-
Element.ariaRowCount
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowcount qui définit le nombre total de lignes dans un tableau, une grille ou une grille arborescente.
-
Element.ariaRowIndex
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowindex qui définit l'index ou la position de la ligne de l'élément par rapport au nombre total de lignes dans le tableau, la grille ou la grille arborescente.
-
Element.ariaRowIndexText
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowindextext qui définit un libellé alternatif à aria-rowindex, compréhensible par un humain.
-
Element.ariaRowSpan
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowspan qui définit le nombre de lignes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.
-
Element.ariaSelected
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-selected qui indique l'état de sélection pour les éléments qui peuvent être sélectionnés.
-
Element.ariaSetSize
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-setsize qui définit le nombre d'objets dans l'ensemble d'éléments d'une liste ou d'un arbre.
-
Element.ariaSort
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-sort qui indique si les objets d'un tableau ou d'une grille sont triés par ordre croissant ou décroissant.
-
Element.ariaValueMax
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-valueMax qui définit la valeur maximale autorisée pour un élément d'interface utilisateur décrivant un intervalle.
-
Element.ariaValueMin
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-valueMin qui définit la valeur minimale autorisée pour un élément d'interface utilisateur décrivant un intervalle.
-
Element.ariaValueNow
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-valueNow qui définit la valeur courante d'un élément d'interface utilisateur décrivant un intervalle.
-
Element.ariaValueText
-
Une chaîne de caractères DOMString qui reflète l'attribut aria-valuetext qui définit une alternative textuelle à aria-valuenow compréhensible par un humain.
-
- -

Gestionnaires d'évènements

- -
-
Element.onfullscreenchange
-
Un gestionnaire d'évènement pour l'évènement fullscreenchange qui est envoyé lorsque l'élément passe en mode plein écran ou sort de celui-ci. Cet évènement peut être utilisé pour surveiller les transitions entre les deux modes mais aussi pour surveiller les modifications inattendues comme lorsque l'application s'exécute en arrière-plan.
-
Element.onfullscreenerror
-
Un gestionnaire d'évènement pour fullscreenerror qui est envoyé lorsqu'une erreur se produit lors du passage au mode plein écran.
-
- -

Méthodes

- -

Element hérite des méthodes fournit par la classe parente Node et de sa classe parente avant elle : EventTarget.

- -
-
EventTarget.addEventListener()
-
Enregistre un gestionnaire d'évènement sur l'élément pour un type d'évènement donné.
-
Element.after()
-
Insère un ensemble d'objets Node ou DOMString dans la liste des enfants du parent de l'élément courant, juste après ce dernier.
-
Element.attachShadow()
-
Attache un arbre du DOM sombre à l'élément indiqué puis renvoie une référence à sa racine ShadowRoot.
-
Element.animate() {{Experimental_Inline}}
-
Une méthode synthétique pour créer et exécuter une animation sur un élément. Renvoie l'instance de l'objet Animation créé.
-
Element.append()
-
Insère un ensemble d'objet Node ou DOMString après le dernier enfant de l'élément.
-
Element.before()
-
Insère un ensemble d'objet Node ou DOMString dans la liste des enfants du parent de l'élément courant, juste avant ce dernier.
-
Element.closest()
-
Renvoie l'élément (Element) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre.
-
Element.createShadowRoot() {{Non-standard_Inline}} {{Deprecated_Inline}}
-
Crée un DOM sombre sur l'élément, le transformant ainsi en hôte sombre. Renvoie un objet ShadowRoot.
-
Element.computedStyleMap() {{Experimental_Inline}}
-
Renvoie une interface StylePropertyMapReadOnly qui fournit une représentation en lecture seule d'un bloc de déclaration CSS alternatif à CSSStyleDeclaration.
-
EventTarget.dispatchEvent()
-
Diffuse un évènement sur ce nœud dans le DOM et renvoie un booléen qui indique si aucun gestionnaire n'a annulé l'évènement.
-
Element.getAnimations() {{Experimental_Inline}}
-
Renvoie un tableau des objets Animation actuellement actifs sur l'élément.
-
Element.getAttribute()
-
Récupère la valeur de l'attribut nommé pour le nœud courant et le renvoie comme un objet.
-
Element.getAttributeNames()
-
Renvoie un tableau de noms d'attribut pour l'élément courant.
-
Element.getAttributeNode()
-
Récupère la représentation du nœud pour l'attrtibut nommé du nœud courant et le renvoie comme un objet Attr.
-
Element.getAttributeNodeNS()
-
Depuis le nœud courant, récupère la représentation du nœud pour l'attribut avec le nom et l'espace de noms indiqués et renvoie la valeur obtenue sous la forme d'un objet Attr.
-
Element.getAttributeNS()
-
Depuis le nœud courant, récupère la valeur de l'attribut avec le nom et l'espace de noms indiqués et la renvoie sous la forme d'un objet.
-
Element.getBoundingClientRect()
-
Renvoie la taille d'un élément et sa position relative dans la zone d'affichage (viewport).
-
Element.getBoxQuads() {{experimental_inline}}
-
Renvoie une liste d'objets DOMQuad qui représentent les fragments CSS pour le nœud.
-
Element.getClientRects()
-
Renvoie une collection de rectangles qui indique les rectangles englobants pour chaque ligne de texte d'un client.
-
Element.getElementsByClassName()
-
Renvoie une collection dynamique HTMLCollection qui contient tous les descendants de l'élément courant et qui possèdent la liste de classes fournie en paramètre.
-
Element.getElementsByTagName()
-
Renvoie une collection dynamique HTMLCollection qui contient tous les descendants de l'élément courant avec un nom de balise donné.
-
Element.getElementsByTagNameNS()
-
Renvoie une collection dynamique HTMLCollection qui contient tous les descendants de l'élément courant qui ont un nom de balise et un espace de noms donnés.
-
Element.hasAttribute()
-
Renvoie un booléen indiquant si l'élément courant possède l'attribut donné.
-
Element.hasAttributeNS()
-
Renvoie un booléen indiquant si l'élément courant possède l'attribut donné pour l'espace de noms donné.
-
Element.hasAttributes()
-
Renvoie un booléen qui indique si l'élément courant a un ou plusieurs attributs HTML.
-
Element.hasPointerCapture()
-
Indique si l'élément a la capture du pointeur pour le pointeur identifié par l'identifiant passé en argument.
-
Element.insertAdjacentElement()
-
Insère un nœud d'élément à la position relative indiquée par rapport à l'élément courant.
-
Element.insertAdjacentHTML()
-
Analyse le texte comme HTML ou XML puis insère les nœuds résultatns dans l'arbre à la position indiquée.
-
Element.insertAdjacentText()
-
Insère un nœud textuel à la position relative indiquée, par rapport à l'élément courant.
-
Element.matches()
-
Renvoie un booléen qui indique si l'élément serait ciblé par la chaîne de caractères passée en argument qui décrit un sélecteur.
-
Element.prepend()
-
Insère un ensemble d'objets Node ou DOMString avant le premier enfant de l'élément courant.
-
Element.querySelector()
-
Renvoie le premier objet Node qui correspond au sélecteur donné, relatif à l'élément courant.
-
Element.querySelectorAll()
-
Renvoie un objet NodeList contenant les nœuds pour lesquels le sélecteur, passé en argument, relatif à l'élément courant.
-
Element.releasePointerCapture()
-
Libère (arrête) la capture du pointeur précédemment activée pour un évènement de pointeur spécifique.
-
Element.remove()
-
Retire l'élément de la liste des éléments enfants de son parent.
-
Element.removeAttribute()
-
Retire l'attribut nommé du nœud courant.
-
Element.removeAttributeNode()
-
Retire la représentation nodale de l'attribut nommé pour le nœud courant.
-
Element.removeAttributeNS()
-
Sur le nœud courant, retire l'attribut avec le nom et l'espace de noms indiqués.
-
EventTarget.removeEventListener()
-
Retire un gestionnaire d'évènement de l'élément.
-
Element.replaceChildren()
-
Remplace l'enfant existant d'un nœud avec un nouvel ensemble d'enfants.
-
Element.replaceWith()
-
Remplace l'élément dans la liste des enfants de son parent par un ensemble d'objets Node ou DOMString.
-
Element.requestFullscreen() {{Experimental_Inline}}
-
Demande au navigateur, de façon asynchrone, d'afficher l'élément en plein écran.
-
Element.requestPointerLock() {{Experimental_Inline}}
-
Demande au navigateur, de façon asynchrone, de bloquer le pointeur sur l'élément indiqué.
-
Element.scroll()
-
Défile jusqu'à un ensemble de coordonnées données à l'intérieur de l'élément courant.
-
Element.scrollBy()
-
Défile un élément de la quantité indiquée.
-
Element.scrollIntoView() {{Experimental_Inline}}
-
Défile la page jusqu'à ce que l'élément apparaisse dans la vue.
-
Element.scrollTo()
-
Défile jusqu'à un ensemble de coordonnées particulier à l'intérieur de l'élément donné.
-
Element.setAttribute()
-
Définit la valeur d'un attribut nommé pour le nœud courant.
-
Element.setAttributeNode()
-
Définit la représentation nodale d'un attribut nommé pour le nœud courant.
-
Element.setAttributeNodeNS()
-
Pour le nœud courant, définit la représentation nodale d'un attribut avec le nom et l'espace de noms indiqués.
-
Element.setAttributeNS()
-
Pour le nœud courant, définit la valeur de l'attribut avec le nom et l'espace de noms indiqués.
-
Element.setCapture() {{Non-standard_Inline}}{{Deprecated_Inline}}
-
Initialise la capture des évènements liés à la souris, redirigeant ainsi tous les évènements de la souris sur cet élément.
-
Element.setPointerCapture()
-
Désigne un élément spécifique comme future cible pour la capture des évènements de pointeur.
-
Element.toggleAttribute()
-
Active/désactive un attribut booléen sur l'élément courant : s'il est présent, cela le retire et s'il est absent, cela l'ajoute.
-
- -

Évènements

- -

On peut écouter ces évènements en utilisant la méthode addEventListener() ou en affectant un gestionnaire d'évènement à la propriété onnomevenement de cette interface.

- -
-
cancel
-
Déclenché sur un élément <dialog> lorsque la personne indique au navigateur le souhait de fermer la boîte de dialogue courante. Un navigateur pourra par exemple déclencher cet évènement lors d'un appui sur la touche Echap ou lors d'un clic sur le bouton « Fermer cette boîte de dialogue » fourni par le navigateur. Également disponible via la propriété oncancel.
-
error
-
Déclenché lors de l'échec du chargement d'une ressource ou lorsque celle-ci ne peut être utilisée. Cet évènement sera par exemple déclenché lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou est invalide. Également disponible via la propriété onerror.
-
scroll
-
Déclenché lors du défilement de la vue du document ou d'un élément. Également disponible via la propriété onscroll.
-
select
-
Déclenché lors de la sélection de texte. Également disponible via la propriété onselect.
-
show
-
Déclenché lorsqu'un évènement contextmenu a été déclenché ou a bouillonné sur un élément qui dispose de l'attribut contextmenu attribute. {{deprecated_inline}} Également disponible via la propriété onshow.
-
wheel
-
Déclenché lorsque l'utilisateur fait tourner la molette d'un appareil de pointage (généralement une souris). Également disponible via la propriété onwheel.
-
- -

Évènements du presse-papiers

- -
-
copy
-
Déclenché lorsque l'utilisateur initie une action de copie via l'interface du navigateur. Également disponible via la propriété oncopy.
-
cut
-
Déclenché lorsque l'utilisateur initie une action de coupe via l'interface du navigateur. Également disponible via la propriété oncut.
-
paste
-
Déclenché lorsque l'utilisateur initie une action pour coller via l'interface du navigateur. Également disponible via la propriété onpaste.
-
- -

Évènements de composition

- -
-
compositionend
-
Déclenché lorsqu'un système de composition textuel tel qu'un éditeur de méthode de saisie termine ou annule la session de composition courante.
-
compositionstart
-
Déclenché lorsqu'un système de composition textuel tel qu'un éditeur de méthode de saisie démarre une nouvelle session de composition.
-
compositionupdate
-
Déclenché lorsqu'un nouveau caractère est reçu dans le contexte d'une session de composition textuelle.
-
- -

Évènements pour le focus

- -
-
blur
-
Déclenché lorsqu'un élément a perdu le focus. Également disponible via la propriété onblur.
-
focus
-
Déclenché lorsqu'un élément reçoit le focus. Également disponible via la propriété onfocus.
-
focusin
-
Déclenché lorsqu'un élément s'apprête à recevoir le focus.
-
focusout
-
Déclenché lorsqu'un élément s'apprête à perdre le focus.
-
- -

Évènements relatifs au plein écran

- -
-
fullscreenchange
-
Envoyé à un élément (Element) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode plein écran. Également disponible via la propriété onfullscreenchange.
-
fullscreenerror
-
Envoyé à un élément Element si une erreur se produit lors d'une transition (entrée ou sortie) pour le mode plein écran. Également disponible via la propriété onfullscreenerror.
-
- -

Évènements relatifs au clavier

- -
-
keydown
-
Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété onkeydown.
-
keypress
-
Déclenché lorsqu'une touche produit un caractère lorsqu'elle est pressée. {{deprecated_inline}} Également disponible via la propriété onkeypress.
-
keyup
-
Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété onkeyup.
-
- -

Évènements relatifs à la souris

- -
-
auxclick
-
Déclenché lorsqu'un bouton non primaire d'un appareil de pointage (c'est-à-dire tout bouton de la souris en dehors du bouton gauche) a été pressé puis relâché sur un élément. Également disponible via la propriété onauxclick.
-
click
-
Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été pressé puis relâche sur un élément. Également disponible via la propriété onclick.
-
contextmenu
-
Déclenché lorsqu'un utilisateur tente d'ouvrir un menu contextuel. Également disponible via la propriété oncontextmenu.
-
dblclick
-
Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été utilisé pour un double-clic sur un élément. Également disponible via la propriété ondblclick.
-
DOMActivate {{Deprecated_Inline}}
-
Se produit lorsqu'un élément est activé, par exemple avec un clic de souris ou l'appui d'une touche.
-
mousedown
-
Déclenché lorsqu'un bouton d'un appareil de pointage est pressé sur un élément. Également disponible via la propriété onmousedown.
-
mouseenter
-
Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé pour arriver sur l'élément disposant du gestionnaire d'évènement. Également disponible via la propriété onmouseenter.
-
mouseleave
-
Déclenché lorsque le pointeur d'un appareil de pointage (généralement une souris) est déplacée en dehors de l'élément qui dispose du gestionnaire d'évènement. Également disponible via la propriété onmouseleave.
-
mousemove
-
Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé sur un élément. Également disponible via la propriété onmousemove.
-
mouseout
-
Déclenché lorsqu'un appareil de pointage (généralement une souris) se déplace pour quitter l'élément qui dispose du gestionnaire d'évènement (ou lorsque le pointeur quitte l'un des enfants de cet élément). Également disponible via la propriété onmouseout.
-
mouseover
-
Déclenché lorsqu'un appareil de pointage arrive sur l'élément (ou l'un de ses enfants) qui dispose du gestionnaire d'évènement. Également disponible via la propriété onmouseover.
-
mouseup
-
Déclenché lorsque le bouton d'un appareil de pointage est relâché pour un élément. Également disponible via la propriété onmouseup.
-
webkitmouseforcechanged
-
Déclenché à chaque fois que la quantite dé pression change sur le pavé ou l'écran tactile.
-
webkitmouseforcedown
-
Déclenché après l'évènement mousedown dès que suffisamment de pression a été appliquée pour qualifier ce clic de clic forcé.
-
webkitmouseforcewillbegin
-
Déclenché avant l'évènement mousedown.
-
webkitmouseforceup
-
Déclenché après l'évènement webkitmouseforcedown dès que suffisamment de pression a été relâchée pour terminer le clic forcé.
-
- -

Évènements tactiles

- -
-
touchcancel
-
Déclenché lorsqu'un ou plusieurs points de toucher ont été perturbés de façon spécifique à l'implémentation (par exemple lorsque trop de points de toucher ont été créés). Également disponible avec la propriété ontouchcancel.
-
touchend
-
Déclenché lorsqu'un ou plusieurs points de toucher sont retirés de la surface tactile. Également disponible via la propriété ontouchend.
-
touchmove
-
Déclenché lorsqu'un ou plusieurs points de toucher se déplacent sur la surface tactile. Également disponible via la propriété ontouchmove.
-
touchstart
-
Déclenché lorsqu'un ou plusieurs points de toucher sont placés sur la surface tactile. Également disponible via la propriété ontouchstart.
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/element/index.md b/files/fr/web/api/element/index.md new file mode 100644 index 0000000000..ac94a2ffc9 --- /dev/null +++ b/files/fr/web/api/element/index.md @@ -0,0 +1,425 @@ +--- +title: Element +slug: Web/API/Element +translation_of: Web/API/Element +browser-compat: api.Element +--- +
{{APIRef("DOM")}}
+ +

Element est la classe de base la plus générique dont héritent tous les objets qui représentent des éléments d'un Document. Elle contient uniquement des méthodes et propriétés communes à l'ensemble des éléments. Des classes plus spécifiques héritent d'Element. Ainsi, l'interface HTMLElement correspond à l'interface de base pour les éléments HTML tandis que l'interface SVGElement représente la base pour les éléments SVG. La plupart des fonctionnalités sont définies dans les classes situées plus loin dans la hiérarchie.

+ +

Propriétés

+ +

Element hérite des propriétés de son interface parente : Node (et donc indirectement des propriétés du parent de celle-ci : EventTarget).

+ +
+
Element.assignedSlot{{readonlyInline}}
+
Renvoie un objet HTMLSlotElement représentant l'emplacement (<slot>) dans lequel le nœud est inséré.
+
Element.attributes {{readOnlyInline}}
+
Renvoie un objet NamedNodeMap contenant les attributs affectés de l'élément HTML correspondant.
+
Element.childElementCount {{readonlyInline}}
+
Renvoie le nombre d'éléments enfants de cet élément.
+
Element.children {{readonlyInline}}
+
Renvoie les éléments enfants de cet élément.
+
Element.classList {{readOnlyInline}}
+
Renvoie un objet DOMTokenList contenant la liste des attributs de classe.
+
Element.className
+
Une chaîne de caractères DOMString qui représente la classe de l'élément.
+
Element.clientHeight {{readOnlyInline}}
+
Renvoie un nombre (Number) représentant la hauteur intérieure de l'élément.
+
Element.clientLeft {{readOnlyInline}}
+
Renvoie un nombre (Number) représentant la largeur de la bordure gauche de l'élément.
+
Element.clientTop {{readOnlyInline}}
+
Renvoie un nombre (Number) représentant la largeur de la bordure haute de l'élément.
+
Element.clientWidth {{readOnlyInline}}
+
Renvoie un nombre (Number) représentant la largeur intérieure de l'élément.
+
Element.firstElementChild {{readonlyInline}}
+
Renvoie le premier élément enfant de cet élément.
+
Element.id
+
Une chaîne de caractères DOMString qui représente l'identifiant de l'élément.
+
Element.innerHTML
+
Une chaîne de caractères DOMString qui représente le balisage du contenu de l'élément.
+
Element.lastElementChild {{readonlyInline}}
+
Renvoie le dernier élément enfant de cet élément.
+
Element.localName {{readOnlyInline}}
+
Une chaîne de caractères DOMString qui représente la partie locale pour le nom qualifié de l'élément.
+
Element.namespaceURI {{readonlyInline}}
+
L'URI pour l'espace de noms de l'élément ou null s'il n'y en a pas. +
+

Note : Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms http://www.w3.org/1999/xhtml tant pour les arbres HTML que XML.

+
+
+
Element.nextElementSibling {{readOnlyInline}}
+
Un objet Element qui représente l'élément qui suit immédiatement l'élément courant dans l'arbre ou null si l'élément courant n'a pas de voisin.
+
Element.outerHTML
+
Une chaîne de caractères DOMString qui représente le balisage de l'élément (incluant son contenu). Lorsque cette propriété est utilisée en modification, cela remplace l'élément avec les noeuds construits à partir de l'analyse de la chaîne de caractères fournie.
+
Element.part
+
Représente les identifiants des parties de l'élément (c'est-à-dire ceux définis avec l'attribut part) sous la forme d'un objet DOMTokenList.
+
Element.prefix {{readOnlyInline}}
+
Une chaîne de caractères DOMString qui représente le préfixe de l'espace de nom pour l'élément ou null si aucun préfixe n'est défini.
+
Element.previousElementSibling {{readOnlyInline}}
+
Un objet Element qui représente l'élément qui précède immédiatement l'élément courant dans l'arbre ou null si l'élément courant n'a pas de voisin.
+
Element.scrollHeight {{readOnlyInline}}
+
Renvoie un nombre (Number) représentant la hauteur de la vue de défilement pour l'élément.
+
Element.scrollLeft
+
Un nombre (Number) qui représente le décalage à gauche de l'élément lié au défilement.
+
Element.scrollLeftMax {{Non-standard_Inline}} {{readOnlyInline}}
+
Renvoie un nombre (Number) représentant le décalage à gauche maximal pour l'élément lors du défilement.
+
Element.scrollTop
+
Un nombre (Number) qui représente le nombre de pixels dont on a fait défiler verticalement le haut de l'élément.
+
Element.scrollTopMax {{Non-standard_Inline}} {{readOnlyInline}}
+
Renvoie un nombre (Number) représentant le décalage maximal depuis le haut de l'élément lors du défilement.
+
Element.scrollWidth {{readOnlyInline}}
+
Renvoie un nombre (Number) représentant la largeur de la vue de défilement pour l'élément.
+
Element.shadowRoot{{readOnlyInline}}
+
Renvoie la racine sombre ouverte (open shadow root) hébergée par l'élément ou null si aucune racine sombre ouverte n'est présente.
+
Element.openOrClosedShadowRoot {{Non-standard_Inline}}{{readOnlyInline}}
+
Renvoie la racine sombre hébergée par l'élément (qu'elle soit ouverte ou fermée). Uniquement disponible pour les WebExtensions.
+
Element.slot {{Experimental_Inline}}
+
Renvoie le nom de l'emplacement du DOM sombre dans lequel l'élément est inséré.
+
Element.tagName {{readOnlyInline}}
+
Renvoie une chaîne de caractères (String) qui est le nom de la balise pour l'élément courant.
+
+ +

Propriétés provenant d'ARIA

+ +

L'interface Element inclut les propriétés suivantes, définies sur le mixin ARIAMixin.

+ +
+
Element.ariaAtomic
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-atomic qui indique si des technologies d'assistance présenteront tout ou partie de la région modifiée selon les notifications définies par l'attribut aria-relevant.
+
Element.ariaAutoComplete
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-autocomplete qui indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs prédictions pour la valeur saisie par l'utilisateur à destination d'une liste de choix, d'une boîte de recherche ou d'une zone de texte. Elle indique également la façon dont les éventuelles prédictions seraient présentées.
+
Element.ariaBusy
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-busy qui indique d'un élément est en train d'être modifié. Les technologies d'assistance peuvent alors faire le choix d'attendre la fin de la modification avant d'exposer le contenu à l'utilisateur.
+
Element.ariaChecked
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-checked indiquant l'état coché (ou non) des cases à cocher, des boutons radio ou des autres éléments d'interface graphique qui peuvent être cochés.
+
Element.ariaColCount
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-colcount indiquant le nombre de colonnes d'un tableau, d'une grille ou d'une grille arborescente.
+
Element.ariaColIndex
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-colindex qui définit l'indice de la colonne d'un élément ou sa position par rapport au nombre total de colonnes d'un tableau, d'une grille ou d'une grille arborescente.
+
Element.ariaColIndexText
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-colindextext qui définit texte alternatif à aria-colindex qui soit compréhensible par un humain.
+
Element.ariaColSpan
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-colspan qui définit le nombre de colonnes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.
+
Element.ariaCurrent
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-current qui indique l'élément représente l'objet courant dans un conteneur ou un ensemble d'éléments.
+
Element.ariaDescription
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-description qui définit la chaîne de caractères pour décrire ou annoter l'élément courant.
+
Element.ariaDisabled
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-disabled qui indique que l'élément est perceptible mais désactivé et qu'il ne peut être édité ou manipulé.
+
Element.ariaExpanded
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-expanded qui indique si un élément de groupement contrôlé par l'élément courant est développé ou replié.
+
Element.ariaHasPopup
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-haspopup qui indique la disponibilité et le type d'élément interactif visuel comme un menu ou une boîte de dialogue pouvant être généré par l'élément courant.
+
Element.ariaHidden
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-hidden qui indique si l'élément est exposé à une API d'accessibilité.
+
Element.ariaKeyShortcuts
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-keyshortcuts qui indique les raccourcis clavier implémentés spécifiquement pour activer ou fournir le focus à un élément.
+
Element.ariaLabel
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-label qui définit une chaîne de caractères étant un libellé pour l'élément courant.
+
Element.ariaLevel
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-level qui définit le niveau hiérarchique de l'élément au sein d'une structure.
+
Element.ariaLive
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-live qui indique que l'élément sera mis à jour et qui décrit les types de mises à jour qui peuvent être attendues par les agents utilisateur, les outils d'assistance et l'utilisateur.
+
Element.ariaModal
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-modal qui indique si un élément est modal lorsqu'il est affiché.
+
Element.ariaMultiline
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-multiline qui indique si une zone de texte accepte une saisie sur plusieurs lignes ou sur une seule ligne.
+
Element.ariaMultiSelectable
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-multiselectable qui indique que la personne peut choisir plus d'un élément parmi les éléments descendants qui peuvent être sélectionnés.
+
Element.ariaOrientation
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-orientation qui indique si l'orientation de l'élément est horizontale, verticale ou inconnue voire ambigüe.
+
Element.ariaPlaceholder
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-placeholder qui définit une indication courte destinée à aider l'utilisateur à saisir une valeur lorsque le contrôle ne possède pas de valeur.
+
Element.ariaPosInSet
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-posinset qui définit l'index ou la position de l'élément courant dans l'ensemble ou l'arbre d'éléments.
+
Element.ariaPressed
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-pressed qui indique l'état actif/pressé des boutons.
+
Element.ariaReadOnly
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-readonly qui indique que l'élément ne peut pas être édité mais qu'il peut être utilisé sinon.
+
Element.ariaRelevant
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-relevant qui indique les notifications qui seront déclenchées par l'agent utilisateur lorsque l'arbre d'accessibilité d'une région interactive sera modifié. Cette propriété est utilisée afin de décrire quels changements d'une région aria-live sont pertinents et devraient être annoncés.
+
Element.ariaRequired
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-required qui indique que la saisie d'une utilisatrice ou d'un utilisateur est requise sur l'élément avant qu'un formulaire puisse être envoyé.
+
Element.ariaRoleDescription
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-roledescription qui définit une description compréhensible par un humain, adaptée par l'autrice ou l'auteur du document pour le rôle de l'élément courant.
+
Element.ariaRowCount
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowcount qui définit le nombre total de lignes dans un tableau, une grille ou une grille arborescente.
+
Element.ariaRowIndex
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowindex qui définit l'index ou la position de la ligne de l'élément par rapport au nombre total de lignes dans le tableau, la grille ou la grille arborescente.
+
Element.ariaRowIndexText
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowindextext qui définit un libellé alternatif à aria-rowindex, compréhensible par un humain.
+
Element.ariaRowSpan
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-rowspan qui définit le nombre de lignes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.
+
Element.ariaSelected
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-selected qui indique l'état de sélection pour les éléments qui peuvent être sélectionnés.
+
Element.ariaSetSize
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-setsize qui définit le nombre d'objets dans l'ensemble d'éléments d'une liste ou d'un arbre.
+
Element.ariaSort
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-sort qui indique si les objets d'un tableau ou d'une grille sont triés par ordre croissant ou décroissant.
+
Element.ariaValueMax
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-valueMax qui définit la valeur maximale autorisée pour un élément d'interface utilisateur décrivant un intervalle.
+
Element.ariaValueMin
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-valueMin qui définit la valeur minimale autorisée pour un élément d'interface utilisateur décrivant un intervalle.
+
Element.ariaValueNow
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-valueNow qui définit la valeur courante d'un élément d'interface utilisateur décrivant un intervalle.
+
Element.ariaValueText
+
Une chaîne de caractères DOMString qui reflète l'attribut aria-valuetext qui définit une alternative textuelle à aria-valuenow compréhensible par un humain.
+
+ +

Gestionnaires d'évènements

+ +
+
Element.onfullscreenchange
+
Un gestionnaire d'évènement pour l'évènement fullscreenchange qui est envoyé lorsque l'élément passe en mode plein écran ou sort de celui-ci. Cet évènement peut être utilisé pour surveiller les transitions entre les deux modes mais aussi pour surveiller les modifications inattendues comme lorsque l'application s'exécute en arrière-plan.
+
Element.onfullscreenerror
+
Un gestionnaire d'évènement pour fullscreenerror qui est envoyé lorsqu'une erreur se produit lors du passage au mode plein écran.
+
+ +

Méthodes

+ +

Element hérite des méthodes fournit par la classe parente Node et de sa classe parente avant elle : EventTarget.

+ +
+
EventTarget.addEventListener()
+
Enregistre un gestionnaire d'évènement sur l'élément pour un type d'évènement donné.
+
Element.after()
+
Insère un ensemble d'objets Node ou DOMString dans la liste des enfants du parent de l'élément courant, juste après ce dernier.
+
Element.attachShadow()
+
Attache un arbre du DOM sombre à l'élément indiqué puis renvoie une référence à sa racine ShadowRoot.
+
Element.animate() {{Experimental_Inline}}
+
Une méthode synthétique pour créer et exécuter une animation sur un élément. Renvoie l'instance de l'objet Animation créé.
+
Element.append()
+
Insère un ensemble d'objet Node ou DOMString après le dernier enfant de l'élément.
+
Element.before()
+
Insère un ensemble d'objet Node ou DOMString dans la liste des enfants du parent de l'élément courant, juste avant ce dernier.
+
Element.closest()
+
Renvoie l'élément (Element) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre.
+
Element.createShadowRoot() {{Non-standard_Inline}} {{Deprecated_Inline}}
+
Crée un DOM sombre sur l'élément, le transformant ainsi en hôte sombre. Renvoie un objet ShadowRoot.
+
Element.computedStyleMap() {{Experimental_Inline}}
+
Renvoie une interface StylePropertyMapReadOnly qui fournit une représentation en lecture seule d'un bloc de déclaration CSS alternatif à CSSStyleDeclaration.
+
EventTarget.dispatchEvent()
+
Diffuse un évènement sur ce nœud dans le DOM et renvoie un booléen qui indique si aucun gestionnaire n'a annulé l'évènement.
+
Element.getAnimations() {{Experimental_Inline}}
+
Renvoie un tableau des objets Animation actuellement actifs sur l'élément.
+
Element.getAttribute()
+
Récupère la valeur de l'attribut nommé pour le nœud courant et le renvoie comme un objet.
+
Element.getAttributeNames()
+
Renvoie un tableau de noms d'attribut pour l'élément courant.
+
Element.getAttributeNode()
+
Récupère la représentation du nœud pour l'attrtibut nommé du nœud courant et le renvoie comme un objet Attr.
+
Element.getAttributeNodeNS()
+
Depuis le nœud courant, récupère la représentation du nœud pour l'attribut avec le nom et l'espace de noms indiqués et renvoie la valeur obtenue sous la forme d'un objet Attr.
+
Element.getAttributeNS()
+
Depuis le nœud courant, récupère la valeur de l'attribut avec le nom et l'espace de noms indiqués et la renvoie sous la forme d'un objet.
+
Element.getBoundingClientRect()
+
Renvoie la taille d'un élément et sa position relative dans la zone d'affichage (viewport).
+
Element.getBoxQuads() {{experimental_inline}}
+
Renvoie une liste d'objets DOMQuad qui représentent les fragments CSS pour le nœud.
+
Element.getClientRects()
+
Renvoie une collection de rectangles qui indique les rectangles englobants pour chaque ligne de texte d'un client.
+
Element.getElementsByClassName()
+
Renvoie une collection dynamique HTMLCollection qui contient tous les descendants de l'élément courant et qui possèdent la liste de classes fournie en paramètre.
+
Element.getElementsByTagName()
+
Renvoie une collection dynamique HTMLCollection qui contient tous les descendants de l'élément courant avec un nom de balise donné.
+
Element.getElementsByTagNameNS()
+
Renvoie une collection dynamique HTMLCollection qui contient tous les descendants de l'élément courant qui ont un nom de balise et un espace de noms donnés.
+
Element.hasAttribute()
+
Renvoie un booléen indiquant si l'élément courant possède l'attribut donné.
+
Element.hasAttributeNS()
+
Renvoie un booléen indiquant si l'élément courant possède l'attribut donné pour l'espace de noms donné.
+
Element.hasAttributes()
+
Renvoie un booléen qui indique si l'élément courant a un ou plusieurs attributs HTML.
+
Element.hasPointerCapture()
+
Indique si l'élément a la capture du pointeur pour le pointeur identifié par l'identifiant passé en argument.
+
Element.insertAdjacentElement()
+
Insère un nœud d'élément à la position relative indiquée par rapport à l'élément courant.
+
Element.insertAdjacentHTML()
+
Analyse le texte comme HTML ou XML puis insère les nœuds résultatns dans l'arbre à la position indiquée.
+
Element.insertAdjacentText()
+
Insère un nœud textuel à la position relative indiquée, par rapport à l'élément courant.
+
Element.matches()
+
Renvoie un booléen qui indique si l'élément serait ciblé par la chaîne de caractères passée en argument qui décrit un sélecteur.
+
Element.prepend()
+
Insère un ensemble d'objets Node ou DOMString avant le premier enfant de l'élément courant.
+
Element.querySelector()
+
Renvoie le premier objet Node qui correspond au sélecteur donné, relatif à l'élément courant.
+
Element.querySelectorAll()
+
Renvoie un objet NodeList contenant les nœuds pour lesquels le sélecteur, passé en argument, relatif à l'élément courant.
+
Element.releasePointerCapture()
+
Libère (arrête) la capture du pointeur précédemment activée pour un évènement de pointeur spécifique.
+
Element.remove()
+
Retire l'élément de la liste des éléments enfants de son parent.
+
Element.removeAttribute()
+
Retire l'attribut nommé du nœud courant.
+
Element.removeAttributeNode()
+
Retire la représentation nodale de l'attribut nommé pour le nœud courant.
+
Element.removeAttributeNS()
+
Sur le nœud courant, retire l'attribut avec le nom et l'espace de noms indiqués.
+
EventTarget.removeEventListener()
+
Retire un gestionnaire d'évènement de l'élément.
+
Element.replaceChildren()
+
Remplace l'enfant existant d'un nœud avec un nouvel ensemble d'enfants.
+
Element.replaceWith()
+
Remplace l'élément dans la liste des enfants de son parent par un ensemble d'objets Node ou DOMString.
+
Element.requestFullscreen() {{Experimental_Inline}}
+
Demande au navigateur, de façon asynchrone, d'afficher l'élément en plein écran.
+
Element.requestPointerLock() {{Experimental_Inline}}
+
Demande au navigateur, de façon asynchrone, de bloquer le pointeur sur l'élément indiqué.
+
Element.scroll()
+
Défile jusqu'à un ensemble de coordonnées données à l'intérieur de l'élément courant.
+
Element.scrollBy()
+
Défile un élément de la quantité indiquée.
+
Element.scrollIntoView() {{Experimental_Inline}}
+
Défile la page jusqu'à ce que l'élément apparaisse dans la vue.
+
Element.scrollTo()
+
Défile jusqu'à un ensemble de coordonnées particulier à l'intérieur de l'élément donné.
+
Element.setAttribute()
+
Définit la valeur d'un attribut nommé pour le nœud courant.
+
Element.setAttributeNode()
+
Définit la représentation nodale d'un attribut nommé pour le nœud courant.
+
Element.setAttributeNodeNS()
+
Pour le nœud courant, définit la représentation nodale d'un attribut avec le nom et l'espace de noms indiqués.
+
Element.setAttributeNS()
+
Pour le nœud courant, définit la valeur de l'attribut avec le nom et l'espace de noms indiqués.
+
Element.setCapture() {{Non-standard_Inline}}{{Deprecated_Inline}}
+
Initialise la capture des évènements liés à la souris, redirigeant ainsi tous les évènements de la souris sur cet élément.
+
Element.setPointerCapture()
+
Désigne un élément spécifique comme future cible pour la capture des évènements de pointeur.
+
Element.toggleAttribute()
+
Active/désactive un attribut booléen sur l'élément courant : s'il est présent, cela le retire et s'il est absent, cela l'ajoute.
+
+ +

Évènements

+ +

On peut écouter ces évènements en utilisant la méthode addEventListener() ou en affectant un gestionnaire d'évènement à la propriété onnomevenement de cette interface.

+ +
+
cancel
+
Déclenché sur un élément <dialog> lorsque la personne indique au navigateur le souhait de fermer la boîte de dialogue courante. Un navigateur pourra par exemple déclencher cet évènement lors d'un appui sur la touche Echap ou lors d'un clic sur le bouton « Fermer cette boîte de dialogue » fourni par le navigateur. Également disponible via la propriété oncancel.
+
error
+
Déclenché lors de l'échec du chargement d'une ressource ou lorsque celle-ci ne peut être utilisée. Cet évènement sera par exemple déclenché lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou est invalide. Également disponible via la propriété onerror.
+
scroll
+
Déclenché lors du défilement de la vue du document ou d'un élément. Également disponible via la propriété onscroll.
+
select
+
Déclenché lors de la sélection de texte. Également disponible via la propriété onselect.
+
show
+
Déclenché lorsqu'un évènement contextmenu a été déclenché ou a bouillonné sur un élément qui dispose de l'attribut contextmenu attribute. {{deprecated_inline}} Également disponible via la propriété onshow.
+
wheel
+
Déclenché lorsque l'utilisateur fait tourner la molette d'un appareil de pointage (généralement une souris). Également disponible via la propriété onwheel.
+
+ +

Évènements du presse-papiers

+ +
+
copy
+
Déclenché lorsque l'utilisateur initie une action de copie via l'interface du navigateur. Également disponible via la propriété oncopy.
+
cut
+
Déclenché lorsque l'utilisateur initie une action de coupe via l'interface du navigateur. Également disponible via la propriété oncut.
+
paste
+
Déclenché lorsque l'utilisateur initie une action pour coller via l'interface du navigateur. Également disponible via la propriété onpaste.
+
+ +

Évènements de composition

+ +
+
compositionend
+
Déclenché lorsqu'un système de composition textuel tel qu'un éditeur de méthode de saisie termine ou annule la session de composition courante.
+
compositionstart
+
Déclenché lorsqu'un système de composition textuel tel qu'un éditeur de méthode de saisie démarre une nouvelle session de composition.
+
compositionupdate
+
Déclenché lorsqu'un nouveau caractère est reçu dans le contexte d'une session de composition textuelle.
+
+ +

Évènements pour le focus

+ +
+
blur
+
Déclenché lorsqu'un élément a perdu le focus. Également disponible via la propriété onblur.
+
focus
+
Déclenché lorsqu'un élément reçoit le focus. Également disponible via la propriété onfocus.
+
focusin
+
Déclenché lorsqu'un élément s'apprête à recevoir le focus.
+
focusout
+
Déclenché lorsqu'un élément s'apprête à perdre le focus.
+
+ +

Évènements relatifs au plein écran

+ +
+
fullscreenchange
+
Envoyé à un élément (Element) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode plein écran. Également disponible via la propriété onfullscreenchange.
+
fullscreenerror
+
Envoyé à un élément Element si une erreur se produit lors d'une transition (entrée ou sortie) pour le mode plein écran. Également disponible via la propriété onfullscreenerror.
+
+ +

Évènements relatifs au clavier

+ +
+
keydown
+
Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété onkeydown.
+
keypress
+
Déclenché lorsqu'une touche produit un caractère lorsqu'elle est pressée. {{deprecated_inline}} Également disponible via la propriété onkeypress.
+
keyup
+
Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété onkeyup.
+
+ +

Évènements relatifs à la souris

+ +
+
auxclick
+
Déclenché lorsqu'un bouton non primaire d'un appareil de pointage (c'est-à-dire tout bouton de la souris en dehors du bouton gauche) a été pressé puis relâché sur un élément. Également disponible via la propriété onauxclick.
+
click
+
Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été pressé puis relâche sur un élément. Également disponible via la propriété onclick.
+
contextmenu
+
Déclenché lorsqu'un utilisateur tente d'ouvrir un menu contextuel. Également disponible via la propriété oncontextmenu.
+
dblclick
+
Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été utilisé pour un double-clic sur un élément. Également disponible via la propriété ondblclick.
+
DOMActivate {{Deprecated_Inline}}
+
Se produit lorsqu'un élément est activé, par exemple avec un clic de souris ou l'appui d'une touche.
+
mousedown
+
Déclenché lorsqu'un bouton d'un appareil de pointage est pressé sur un élément. Également disponible via la propriété onmousedown.
+
mouseenter
+
Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé pour arriver sur l'élément disposant du gestionnaire d'évènement. Également disponible via la propriété onmouseenter.
+
mouseleave
+
Déclenché lorsque le pointeur d'un appareil de pointage (généralement une souris) est déplacée en dehors de l'élément qui dispose du gestionnaire d'évènement. Également disponible via la propriété onmouseleave.
+
mousemove
+
Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé sur un élément. Également disponible via la propriété onmousemove.
+
mouseout
+
Déclenché lorsqu'un appareil de pointage (généralement une souris) se déplace pour quitter l'élément qui dispose du gestionnaire d'évènement (ou lorsque le pointeur quitte l'un des enfants de cet élément). Également disponible via la propriété onmouseout.
+
mouseover
+
Déclenché lorsqu'un appareil de pointage arrive sur l'élément (ou l'un de ses enfants) qui dispose du gestionnaire d'évènement. Également disponible via la propriété onmouseover.
+
mouseup
+
Déclenché lorsque le bouton d'un appareil de pointage est relâché pour un élément. Également disponible via la propriété onmouseup.
+
webkitmouseforcechanged
+
Déclenché à chaque fois que la quantite dé pression change sur le pavé ou l'écran tactile.
+
webkitmouseforcedown
+
Déclenché après l'évènement mousedown dès que suffisamment de pression a été appliquée pour qualifier ce clic de clic forcé.
+
webkitmouseforcewillbegin
+
Déclenché avant l'évènement mousedown.
+
webkitmouseforceup
+
Déclenché après l'évènement webkitmouseforcedown dès que suffisamment de pression a été relâchée pour terminer le clic forcé.
+
+ +

Évènements tactiles

+ +
+
touchcancel
+
Déclenché lorsqu'un ou plusieurs points de toucher ont été perturbés de façon spécifique à l'implémentation (par exemple lorsque trop de points de toucher ont été créés). Également disponible avec la propriété ontouchcancel.
+
touchend
+
Déclenché lorsqu'un ou plusieurs points de toucher sont retirés de la surface tactile. Également disponible via la propriété ontouchend.
+
touchmove
+
Déclenché lorsqu'un ou plusieurs points de toucher se déplacent sur la surface tactile. Également disponible via la propriété ontouchmove.
+
touchstart
+
Déclenché lorsqu'un ou plusieurs points de toucher sont placés sur la surface tactile. Également disponible via la propriété ontouchstart.
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/element/innerhtml/index.html b/files/fr/web/api/element/innerhtml/index.html deleted file mode 100644 index 91ab29da37..0000000000 --- a/files/fr/web/api/element/innerhtml/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: element.innerHTML -slug: Web/API/Element/innerHTML -tags: - - API - - DOM - - Elements - - HTML - - Propriétés -translation_of: Web/API/Element/innerHTML -original_slug: Web/API/Element/innertHTML ---- -
{{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

- - diff --git a/files/fr/web/api/element/innerhtml/index.md b/files/fr/web/api/element/innerhtml/index.md new file mode 100644 index 0000000000..91ab29da37 --- /dev/null +++ b/files/fr/web/api/element/innerhtml/index.md @@ -0,0 +1,206 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - Elements + - HTML + - Propriétés +translation_of: Web/API/Element/innerHTML +original_slug: Web/API/Element/innertHTML +--- +
{{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

+ + diff --git a/files/fr/web/api/element/insertadjacentelement/index.html b/files/fr/web/api/element/insertadjacentelement/index.html deleted file mode 100644 index 8587eb5de0..0000000000 --- a/files/fr/web/api/element/insertadjacentelement/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Element.insertAdjacentElement() -slug: Web/API/Element/insertAdjacentElement -tags: - - API - - DOM - - Element - - Insertion - - Méthodes -translation_of: Web/API/Element/insertAdjacentElement ---- -

{{APIRef("DOM")}}

- -

La méthode insertAdjacentElement() insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.

- -

Syntaxe

- -
targetElement.insertAdjacentElement(position, element);
- -

Paramètres

- -
-
position
-
Un objet {{domxref("DOMString")}} (chaîne de caractères) représentant la position par rapport à targetElement ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : -
    -
  • 'beforebegin' : Avant targetElement lui-même.
    • -
  • 'afterbegin' : A l'intérieur de targetElement, avant son premier enfant.
    • -
  • 'beforeend' : A l'intérieur de targetElement, après son dernier enfant.
    • -
  • 'afterend' : Après targetElement lui-même.
    • -
-
-
element
-
L'élément à insérer dans l'arbre.
-
- -

Valeur retournée

- -

L'élément inséré ou null si l'insertion a échouée.

- -

Exceptions

- - - - - - - - - - - - - - - - - - -
ExceptionExplications
SyntaxErrorLa position donnée n'est pas une valeur reconnue.
TypeErrorL'element spécifié n'est pas un élément valide.
- -

Visualisation des positionnements

- -
<!-- beforebegin -->
-<p>
-<!-- afterbegin -->
-foo
-<!-- beforeend -->
-</p>
-<!-- afterend -->
- -
-

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.

-
- -

Exemple

- -
beforeBtn.addEventListener('click', function() {
-  var tempDiv = document.createElement('div');
-  tempDiv.style.backgroundColor = randomColor();
-  if (activeElem) {
-    activeElem.insertAdjacentElement('beforebegin',tempDiv);
-  }
-  setListener(tempDiv);
-});
-
-afterBtn.addEventListener('click', function() {
-  var tempDiv = document.createElement('div');
-  tempDiv.style.backgroundColor = randomColor();
-  if (activeElem) {
-    activeElem.insertAdjacentElement('afterend',tempDiv);
-  }
-  setListener(tempDiv);
-});
- -

Une démo de notre insertAdjacentElement.html est disponible sur Github ( avec le code source ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons Insert before (insérer avant) et Insert after (insérer après) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant insertAdjacentElement().

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.insertAdjacentElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/insertadjacentelement/index.md b/files/fr/web/api/element/insertadjacentelement/index.md new file mode 100644 index 0000000000..8587eb5de0 --- /dev/null +++ b/files/fr/web/api/element/insertadjacentelement/index.md @@ -0,0 +1,127 @@ +--- +title: Element.insertAdjacentElement() +slug: Web/API/Element/insertAdjacentElement +tags: + - API + - DOM + - Element + - Insertion + - Méthodes +translation_of: Web/API/Element/insertAdjacentElement +--- +

{{APIRef("DOM")}}

+ +

La méthode insertAdjacentElement() insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.

+ +

Syntaxe

+ +
targetElement.insertAdjacentElement(position, element);
+ +

Paramètres

+ +
+
position
+
Un objet {{domxref("DOMString")}} (chaîne de caractères) représentant la position par rapport à targetElement ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : +
    +
  • 'beforebegin' : Avant targetElement lui-même.
    • +
  • 'afterbegin' : A l'intérieur de targetElement, avant son premier enfant.
    • +
  • 'beforeend' : A l'intérieur de targetElement, après son dernier enfant.
    • +
  • 'afterend' : Après targetElement lui-même.
    • +
+
+
element
+
L'élément à insérer dans l'arbre.
+
+ +

Valeur retournée

+ +

L'élément inséré ou null si l'insertion a échouée.

+ +

Exceptions

+ + + + + + + + + + + + + + + + + + +
ExceptionExplications
SyntaxErrorLa position donnée n'est pas une valeur reconnue.
TypeErrorL'element spécifié n'est pas un élément valide.
+ +

Visualisation des positionnements

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin -->
+foo
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
+

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.

+
+ +

Exemple

+ +
beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});
+ +

Une démo de notre insertAdjacentElement.html est disponible sur Github ( avec le code source ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons Insert before (insérer avant) et Insert after (insérer après) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant insertAdjacentElement().

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.insertAdjacentElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/insertadjacenthtml/index.html b/files/fr/web/api/element/insertadjacenthtml/index.html deleted file mode 100644 index e1f0ffa06a..0000000000 --- a/files/fr/web/api/element/insertadjacenthtml/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: element.insertAdjacentHTML -slug: Web/API/Element/insertAdjacentHTML -tags: - - API - - DOM - - Méthode - - Reference -translation_of: Web/API/Element/insertAdjacentHTML ---- -
{{APIRef("DOM")}}
- -

insertAdjacentHTML() analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que innerHTML.

- -

Syntaxe

- -
element.insertAdjacentHTML(position, text);
- -

Paramètres

- -
-
position 
-
une {{domxref("DOMString")}}  représentant la position relative à l'element, et doit être une des chaînes de caractères suivantes :
-
- - - -
-
text
-
 est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.
-
- -

Visualisation des noms de position

- - -
<!-- beforebegin -->
-<p>
-  <!-- afterbegin -->
-  foo
-  <!-- beforeend -->
-</p>
-<!-- afterend -->
- -
-

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est un arbre et a un élément parent.

-
- -

Exemple

- -
// <div id="one">one</div>
-var d1 = document.getElementById('one');
-d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
-
-// Ici la nouvelle structure est :
-// <div id="one">one</div><div id="two">two</div>
- -

Notes

- -

Considérations de sécurité

- -

Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.

- -

Il est recommandé de ne pas utiliser insertAdjacentHTML lors de l'insertion de texte brut; à la place, utilisez la propriété node.textContent ou la méthode node.insertAdjacentText(). Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.insertAdjacentHTML")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/insertadjacenthtml/index.md b/files/fr/web/api/element/insertadjacenthtml/index.md new file mode 100644 index 0000000000..e1f0ffa06a --- /dev/null +++ b/files/fr/web/api/element/insertadjacenthtml/index.md @@ -0,0 +1,99 @@ +--- +title: element.insertAdjacentHTML +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - DOM + - Méthode + - Reference +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

insertAdjacentHTML() analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que innerHTML.

+ +

Syntaxe

+ +
element.insertAdjacentHTML(position, text);
+ +

Paramètres

+ +
+
position 
+
une {{domxref("DOMString")}}  représentant la position relative à l'element, et doit être une des chaînes de caractères suivantes :
+
+ + + +
+
text
+
 est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.
+
+ +

Visualisation des noms de position

+ + +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
+

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est un arbre et a un élément parent.

+
+ +

Exemple

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// Ici la nouvelle structure est :
+// <div id="one">one</div><div id="two">two</div>
+ +

Notes

+ +

Considérations de sécurité

+ +

Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.

+ +

Il est recommandé de ne pas utiliser insertAdjacentHTML lors de l'insertion de texte brut; à la place, utilisez la propriété node.textContent ou la méthode node.insertAdjacentText(). Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/insertadjacenttext/index.html b/files/fr/web/api/element/insertadjacenttext/index.html deleted file mode 100644 index f0ab71ddad..0000000000 --- a/files/fr/web/api/element/insertadjacenttext/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Element.insertAdjacentText() -slug: Web/API/Element/insertAdjacentText -tags: - - API - - DOM - - Element - - Insertion - - Méthodes - - Texte -translation_of: Web/API/Element/insertAdjacentText ---- -

{{APIRef("DOM")}}

- -

La méthode insertAdjacentText() insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.

- -

Syntaxe

- -
element.insertAdjacentText(position, element);
- -

Paramètres

- -
-
position
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la position par rapport à l'element ; elle doit être l'une des chaînes suivantes : -
    -
  • 'beforebegin' : avant l'element lui-même ;
    • -
  • 'afterbegin' : à l'intérieur de l'element, avant son premier enfant ;
    • -
  • 'beforeend' : à l'intérieur de l'element, avant son dernier enfant ;
    • -
  • 'afterend' : après l'element lui-même.
    • -
-
-
element
-
Une {{domxref("DOMString")}} (chaîne de caractères) représentant le texte à insérer dans l'arbre.
-
- -

Valeur renvoyée

- -

Vide.

- -

Exceptions

- - - - - - - - - - - - - - -
ExceptionExplication
SyntaxErrorLa position indiquée n'est pas une valeur reconnue.
- -

Visualisation des noms de position

- -
<!-- beforebegin -->
-<p>
-<!-- afterbegin> -->
-machin
-<!-- beforeend -->
-</p>
-<!-- afterend -->
- -
-

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.

-
- -

Exemple

- -
beforeBtn.addEventListener('click', function() {
-  para.insertAdjacentText('afterbegin',textInput.value);
-});
-
-afterBtn.addEventListener('click', function() {
-  para.insertAdjacentText('beforeend',textInput.value);
-});
- -

Jetez un œil à notre démo insertAdjacentText.html sur GitHub (voir le code source aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons Insert before (insère avant) et Insert after (insère après) pour l'insérer avant ou après le texte de paragraphe existant en utilisant insertAdjacentText(). Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.

- -

Émulation

- -

Vous pouvez utiliser une émulation de la méthode insertAdjacentText() dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :

- -
if (!Element.prototype.insertAdjacentText)
-  Element.prototype.insertAdjacentText = function(type, txt){
-    this.insertAdjacentHTML(
-      type,
-      (txt+'') // convertir en chaîne de caractères
-        .replace(/&/g, '&amp;') // intégrer des symboles d'esperluette
-        .replace(/</g, '&lt;') // intégrer les symboles "plus petit que"
-    )
-  }
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}{{ Spec2('DOM WHATWG') }}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.insertAdjacentText")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/insertadjacenttext/index.md b/files/fr/web/api/element/insertadjacenttext/index.md new file mode 100644 index 0000000000..f0ab71ddad --- /dev/null +++ b/files/fr/web/api/element/insertadjacenttext/index.md @@ -0,0 +1,127 @@ +--- +title: Element.insertAdjacentText() +slug: Web/API/Element/insertAdjacentText +tags: + - API + - DOM + - Element + - Insertion + - Méthodes + - Texte +translation_of: Web/API/Element/insertAdjacentText +--- +

{{APIRef("DOM")}}

+ +

La méthode insertAdjacentText() insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.

+ +

Syntaxe

+ +
element.insertAdjacentText(position, element);
+ +

Paramètres

+ +
+
position
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant la position par rapport à l'element ; elle doit être l'une des chaînes suivantes : +
    +
  • 'beforebegin' : avant l'element lui-même ;
    • +
  • 'afterbegin' : à l'intérieur de l'element, avant son premier enfant ;
    • +
  • 'beforeend' : à l'intérieur de l'element, avant son dernier enfant ;
    • +
  • 'afterend' : après l'element lui-même.
    • +
+
+
element
+
Une {{domxref("DOMString")}} (chaîne de caractères) représentant le texte à insérer dans l'arbre.
+
+ +

Valeur renvoyée

+ +

Vide.

+ +

Exceptions

+ + + + + + + + + + + + + + +
ExceptionExplication
SyntaxErrorLa position indiquée n'est pas une valeur reconnue.
+ +

Visualisation des noms de position

+ +
<!-- beforebegin -->
+<p>
+<!-- afterbegin> -->
+machin
+<!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
+

Note : Les positions beforebegin et afterend ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.

+
+ +

Exemple

+ +
beforeBtn.addEventListener('click', function() {
+  para.insertAdjacentText('afterbegin',textInput.value);
+});
+
+afterBtn.addEventListener('click', function() {
+  para.insertAdjacentText('beforeend',textInput.value);
+});
+ +

Jetez un œil à notre démo insertAdjacentText.html sur GitHub (voir le code source aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons Insert before (insère avant) et Insert after (insère après) pour l'insérer avant ou après le texte de paragraphe existant en utilisant insertAdjacentText(). Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.

+ +

Émulation

+ +

Vous pouvez utiliser une émulation de la méthode insertAdjacentText() dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :

+ +
if (!Element.prototype.insertAdjacentText)
+  Element.prototype.insertAdjacentText = function(type, txt){
+    this.insertAdjacentHTML(
+      type,
+      (txt+'') // convertir en chaîne de caractères
+        .replace(/&/g, '&amp;') // intégrer des symboles d'esperluette
+        .replace(/</g, '&lt;') // intégrer les symboles "plus petit que"
+    )
+  }
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}{{ Spec2('DOM WHATWG') }}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.insertAdjacentText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/localname/index.html b/files/fr/web/api/element/localname/index.html deleted file mode 100644 index d64738b272..0000000000 --- a/files/fr/web/api/element/localname/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Element.localName -slug: Web/API/Element/localName -tags: - - API - - DOM - - Element - - Nom - - Propriétés - - XML - - local -translation_of: Web/API/Element/localName ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule Element.localName renvoie la partie locale du nom qualifié d'un élément.

- -
-

Note : Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.

-
- -

Syntaxe

- -
name = element.localName
-
- -

Valeur renvoyée

- -

Une {{domxref("DOMString")}} (chaîne de caractères) représentant la partie locale du nom qualifié de l'élément.

- -

Exemple

- -

(Doit être servi avec un type de contenu XML, tel que text/xml ou application/xhtml+xml.)

- -
<html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:svg="http://www.w3.org/2000/svg">
-<head>
-  <script type="application/javascript"><![CDATA[
-  function test() {
-    var text = document.getElementById('text');
-    var circle = document.getElementById('circle');
-
-    text.value = "<svg:circle> has:\n" +
-                 "localName = '" + circle.localName + "'\n" +
-                 "namespaceURI = '" + circle.namespaceURI + "'";
-  }
-  ]]></script>
-</head>
-<body onload="test()">
-  <svg:svg version="1.1"
-    width="100px" height="100px"
-    viewBox="0 0 100 100">
-    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
-  </svg:svg>
-  <textarea id="text" rows="4" cols="55"/>
-</body>
-</html>
-
- -

Notes

- -

Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié ecomm:partners, partners est le nom local et ecomm est le préfixe :

- -
<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
-  <ecomm:partners>
-    <ecomm:partner id="1001">Tony's Syrup Warehouse
-    </ecomm:partner>
-  </ecomm:partner>
-</ecomm:business>
-
- -
-

Note : Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-localname', 'Element.localName')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.localName")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/localname/index.md b/files/fr/web/api/element/localname/index.md new file mode 100644 index 0000000000..d64738b272 --- /dev/null +++ b/files/fr/web/api/element/localname/index.md @@ -0,0 +1,106 @@ +--- +title: Element.localName +slug: Web/API/Element/localName +tags: + - API + - DOM + - Element + - Nom + - Propriétés + - XML + - local +translation_of: Web/API/Element/localName +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule Element.localName renvoie la partie locale du nom qualifié d'un élément.

+ +
+

Note : Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.

+
+ +

Syntaxe

+ +
name = element.localName
+
+ +

Valeur renvoyée

+ +

Une {{domxref("DOMString")}} (chaîne de caractères) représentant la partie locale du nom qualifié de l'élément.

+ +

Exemple

+ +

(Doit être servi avec un type de contenu XML, tel que text/xml ou application/xhtml+xml.)

+ +
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script type="application/javascript"><![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "<svg:circle> has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]></script>
+</head>
+<body onload="test()">
+  <svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+  <textarea id="text" rows="4" cols="55"/>
+</body>
+</html>
+
+ +

Notes

+ +

Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié ecomm:partners, partners est le nom local et ecomm est le préfixe :

+ +
<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+
+ +
+

Note : Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-element-localname', 'Element.localName')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.localName")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/matches/index.html b/files/fr/web/api/element/matches/index.html deleted file mode 100644 index 21e4a2ee68..0000000000 --- a/files/fr/web/api/element/matches/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Element.matches() -slug: Web/API/Element/matches -tags: - - API - - DOM - - Selector -translation_of: Web/API/Element/matches ---- -

{{ APIRef("DOM") }}

- -

La méthode element.matches() renvoie true lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie false.

- -
-

Attention : Certains navigateurs implémentent cette méthode sous le nom matchesSelector() non-standardisé et préfixé.

-
- -

Syntaxe

- -
var result = element.matches(selectorString);
-
- - - -

Exemple

- -
<ul id="birds">
-  <li>perroquet amazone</li>
-  <li class="endangered">aigle des Philippines</li>
-  <li>pélican blanc</li>
-</ul>
-
-<script type="text/javascript">
-  var birds = document.getElementsByTagName('li');
-
-  for (var i = 0; i < birds.length; i++) {
-    if (birds[i].matches('.endangered')) {
-      console.log('Le - ' + birds[i].textContent + '- est en voie de disparition !');
-    }
-  }
-</script>
- -

Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut class de valeur endangered.

- -

Exceptions

- -
-
SYNTAX_ERR
-
Lorsque la chaîne passée en paramêtre défini sélecteur invalide.
-
- -

Polyfill

- -

Pour les navigateurs qui ne supportent pas Element.matches() ou Element.matchesSelector(), mais fournissent le support de document.querySelectorAll(), il existe un polyfill :

- -
if (!Element.prototype.matches) {
-    Element.prototype.matches =
-        Element.prototype.matchesSelector ||
-        Element.prototype.mozMatchesSelector ||
-        Element.prototype.msMatchesSelector ||
-        Element.prototype.oMatchesSelector ||
-        Element.prototype.webkitMatchesSelector ||
-        function(s) {
-            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-                i = matches.length;
-            while (--i >= 0 && matches.item(i) !== this) {}
-            return i > -1;
-        };
-}
- -

Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).

- -
if (!Element.prototype.matches) {
-    Element.prototype.matches = Element.prototype.msMatchesSelector;
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatus
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Element.matches")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/matches/index.md b/files/fr/web/api/element/matches/index.md new file mode 100644 index 0000000000..21e4a2ee68 --- /dev/null +++ b/files/fr/web/api/element/matches/index.md @@ -0,0 +1,108 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +tags: + - API + - DOM + - Selector +translation_of: Web/API/Element/matches +--- +

{{ APIRef("DOM") }}

+ +

La méthode element.matches() renvoie true lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie false.

+ +
+

Attention : Certains navigateurs implémentent cette méthode sous le nom matchesSelector() non-standardisé et préfixé.

+
+ +

Syntaxe

+ +
var result = element.matches(selectorString);
+
+ + + +

Exemple

+ +
<ul id="birds">
+  <li>perroquet amazone</li>
+  <li class="endangered">aigle des Philippines</li>
+  <li>pélican blanc</li>
+</ul>
+
+<script type="text/javascript">
+  var birds = document.getElementsByTagName('li');
+
+  for (var i = 0; i < birds.length; i++) {
+    if (birds[i].matches('.endangered')) {
+      console.log('Le - ' + birds[i].textContent + '- est en voie de disparition !');
+    }
+  }
+</script>
+ +

Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut class de valeur endangered.

+ +

Exceptions

+ +
+
SYNTAX_ERR
+
Lorsque la chaîne passée en paramêtre défini sélecteur invalide.
+
+ +

Polyfill

+ +

Pour les navigateurs qui ne supportent pas Element.matches() ou Element.matchesSelector(), mais fournissent le support de document.querySelectorAll(), il existe un polyfill :

+ +
if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            while (--i >= 0 && matches.item(i) !== this) {}
+            return i > -1;
+        };
+}
+ +

Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).

+ +
if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector;
+}
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatus
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Element.matches")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mousedown_event/index.html b/files/fr/web/api/element/mousedown_event/index.html deleted file mode 100644 index 98ab94299d..0000000000 --- a/files/fr/web/api/element/mousedown_event/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'Element : évènement mousedown' -slug: Web/API/Element/mousedown_event -tags: - - API - - DOM - - Interface - - Reference - - events - - mousedown -translation_of: Web/API/Element/mousedown_event ---- -
{{APIRef}}
- -

L'évènement mousedown est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.

- -
-

Note : Cet évènement est différent de {{domxref("Element/click_event", "click")}}. click est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). mousedown est déclenché dès qu'on appuie sur le bouton.

-
- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}
- -

Exemples

- -

{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.mousedown_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mousedown_event/index.md b/files/fr/web/api/element/mousedown_event/index.md new file mode 100644 index 0000000000..98ab94299d --- /dev/null +++ b/files/fr/web/api/element/mousedown_event/index.md @@ -0,0 +1,88 @@ +--- +title: 'Element : évènement mousedown' +slug: Web/API/Element/mousedown_event +tags: + - API + - DOM + - Interface + - Reference + - events + - mousedown +translation_of: Web/API/Element/mousedown_event +--- +
{{APIRef}}
+ +

L'évènement mousedown est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.

+ +
+

Note : Cet évènement est différent de {{domxref("Element/click_event", "click")}}. click est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). mousedown est déclenché dès qu'on appuie sur le bouton.

+
+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}
+ +

Exemples

+ +

{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.mousedown_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mouseenter_event/index.html b/files/fr/web/api/element/mouseenter_event/index.html deleted file mode 100644 index ba2623f7c6..0000000000 --- a/files/fr/web/api/element/mouseenter_event/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: 'Element : évènement mouseenter' -slug: Web/API/Element/mouseenter_event -tags: - - API - - DOM - - Element - - Interface - - Reference - - mouseenter -translation_of: Web/API/Element/mouseenter_event ---- -
{{APIRef}}
- -

L'évènement mouseenter est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
- -

Notes d'utilisation

- -

Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, mouseenter est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.

- - - -

mouseenter est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.

- - -

Un seul évènement mouseover est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.

- -

Avec des hiérarchies profondes, le nombre d'évènements mouseenter envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements mouseover.

- -

Avec la combinaison de mouseenter et mouseleave (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.

- -

Exemples

- -

La documentation mouseover illustre la différence entre mouseover et mouseenter.

- -

Ici, on utilise mouseenter pour modifier la bordure d'un div lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements mouseenter ouor mouseleave event.

- -

HTML

- -
<div id='mouseTarget'>
- <ul id="unorderedList">
-  <li>No events yet!</li>
- </ul>
-</div>
- -

CSS

- -

On met en forme le div pour le rendre plus visible.

- -
#mouseTarget {
-  box-sizing: border-box;
-  width:15rem;
-  border:1px solid #333;
-}
- -

JavaScript

- -
var enterEventCount = 0;
-var leaveEventCount = 0;
-const mouseTarget = document.getElementById('mouseTarget');
-const unorderedList = document.getElementById('unorderedList');
-
-mouseTarget.addEventListener('mouseenter', e => {
-  mouseTarget.style.border = '5px dotted orange';
-  enterEventCount++;
-  addListItem("C'est le " + enterEventCount + "ème mouseenter.");
-});
-
-mouseTarget.addEventListener('mouseleave', e => {
-  mouseTarget.style.border = '1px solid #333';
-  leaveEventCount++;
-  addListItem("C'est le " + leaveEventCount + "ème mouseleave.");
-});
-
-function addListItem(text) {
-  // On crée un nouveau noeud text avec le texte fourni
-  var newTextNode = document.createTextNode(text);
-
-  // On crée un élément li
-  var newListItem = document.createElement("li");
-
-  // On ajoute le noeud texte à l'élément li
-  newListItem.appendChild(newTextNode);
-
-  // On ajoute l'élément de liste à la liste
-  unorderedList.appendChild(newListItem);
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.mouseenter_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mouseenter_event/index.md b/files/fr/web/api/element/mouseenter_event/index.md new file mode 100644 index 0000000000..ba2623f7c6 --- /dev/null +++ b/files/fr/web/api/element/mouseenter_event/index.md @@ -0,0 +1,157 @@ +--- +title: 'Element : évènement mouseenter' +slug: Web/API/Element/mouseenter_event +tags: + - API + - DOM + - Element + - Interface + - Reference + - mouseenter +translation_of: Web/API/Element/mouseenter_event +--- +
{{APIRef}}
+ +

L'évènement mouseenter est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
+ +

Notes d'utilisation

+ +

Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, mouseenter est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.

+ + + +

mouseenter est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.

+ + +

Un seul évènement mouseover est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.

+ +

Avec des hiérarchies profondes, le nombre d'évènements mouseenter envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements mouseover.

+ +

Avec la combinaison de mouseenter et mouseleave (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.

+ +

Exemples

+ +

La documentation mouseover illustre la différence entre mouseover et mouseenter.

+ +

Ici, on utilise mouseenter pour modifier la bordure d'un div lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements mouseenter ouor mouseleave event.

+ +

HTML

+ +
<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>No events yet!</li>
+ </ul>
+</div>
+ +

CSS

+ +

On met en forme le div pour le rendre plus visible.

+ +
#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}
+ +

JavaScript

+ +
var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e => {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem("C'est le " + enterEventCount + "ème mouseenter.");
+});
+
+mouseTarget.addEventListener('mouseleave', e => {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem("C'est le " + leaveEventCount + "ème mouseleave.");
+});
+
+function addListItem(text) {
+  // On crée un nouveau noeud text avec le texte fourni
+  var newTextNode = document.createTextNode(text);
+
+  // On crée un élément li
+  var newListItem = document.createElement("li");
+
+  // On ajoute le noeud texte à l'élément li
+  newListItem.appendChild(newTextNode);
+
+  // On ajoute l'élément de liste à la liste
+  unorderedList.appendChild(newListItem);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.mouseenter_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mouseleave_event/index.html b/files/fr/web/api/element/mouseleave_event/index.html deleted file mode 100644 index 2c9ee0d534..0000000000 --- a/files/fr/web/api/element/mouseleave_event/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: 'Element : évènement mouseleave' -slug: Web/API/Element/mouseleave_event -tags: - - API - - DOM - - Element - - Event - - Reference - - mouseleave -translation_of: Web/API/Element/mouseleave_event ---- -

{{APIRef}}

- -

L'évènement mouseleave est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}
- -

mouseleave et {{event('mouseout')}} se ressemblent mais mouseleave ne remonte pas dans le DOM tandis que mouseout remonte. mouseleave est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que mouseout est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).

- - -

Un évènement mouseleave est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <div> le plus haut dans la hiérarchie.

- - -

Un seul évènement mouseout est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.

- -

Exemples

- -

Voir la documentation de mouseout pour un exemple sur les différences entre mouseout et mouseleave.

- -

Ici, on utilise l'évènement mouseenter pour modifier la bordure d'un élément div lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements mouseenter et mouseleave.

- -

HTML

- -
<div id='mouseTarget'>
- <ul id="unorderedList">
-  <li>Pas encore d'évènement !</li>
- </ul>
-</div>
- -

CSS

- -

On met le div en forme afin de le rendre plus visible.

- -
#mouseTarget {
-  box-sizing: border-box;
-  width:15rem;
-  border:1px solid #333;
-}
- -

JavaScript

- -
var enterEventCount = 0;
-var leaveEventCount = 0;
-const mouseTarget = document.getElementById('mouseTarget');
-const unorderedList = document.getElementById('unorderedList');
-
-mouseTarget.addEventListener('mouseenter', e => {
-  mouseTarget.style.border = '5px dotted orange';
-  enterEventCount++;
-  addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
-});
-
-mouseTarget.addEventListener('mouseleave', e => {
-  mouseTarget.style.border = '1px solid #333';
-  leaveEventCount++;
-  addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + ".");
-});
-
-function addListItem(text) {
-  //  On crée un noeud texte avec le texte passé en argument
-  var newTextNode = document.createTextNode(text);
-
-  // On crée un nouvel élément li
-  var newListItem = document.createElement("li");
-
-  // On ajoute le noeud texte à l'élément li
-  newListItem.appendChild(newTextNode);
-
-  // On ajoute le nouvel élément à la liste
-  unorderedList.appendChild(newListItem);
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.mouseleave_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mouseleave_event/index.md b/files/fr/web/api/element/mouseleave_event/index.md new file mode 100644 index 0000000000..2c9ee0d534 --- /dev/null +++ b/files/fr/web/api/element/mouseleave_event/index.md @@ -0,0 +1,147 @@ +--- +title: 'Element : évènement mouseleave' +slug: Web/API/Element/mouseleave_event +tags: + - API + - DOM + - Element + - Event + - Reference + - mouseleave +translation_of: Web/API/Element/mouseleave_event +--- +

{{APIRef}}

+ +

L'évènement mouseleave est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMNon
AnnulableNon
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}
+ +

mouseleave et {{event('mouseout')}} se ressemblent mais mouseleave ne remonte pas dans le DOM tandis que mouseout remonte. mouseleave est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que mouseout est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).

+ + +

Un évènement mouseleave est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <div> le plus haut dans la hiérarchie.

+ + +

Un seul évènement mouseout est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.

+ +

Exemples

+ +

Voir la documentation de mouseout pour un exemple sur les différences entre mouseout et mouseleave.

+ +

Ici, on utilise l'évènement mouseenter pour modifier la bordure d'un élément div lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements mouseenter et mouseleave.

+ +

HTML

+ +
<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>Pas encore d'évènement !</li>
+ </ul>
+</div>
+ +

CSS

+ +

On met le div en forme afin de le rendre plus visible.

+ +
#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}
+ +

JavaScript

+ +
var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e => {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
+});
+
+mouseTarget.addEventListener('mouseleave', e => {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + ".");
+});
+
+function addListItem(text) {
+  //  On crée un noeud texte avec le texte passé en argument
+  var newTextNode = document.createTextNode(text);
+
+  // On crée un nouvel élément li
+  var newListItem = document.createElement("li");
+
+  // On ajoute le noeud texte à l'élément li
+  newListItem.appendChild(newTextNode);
+
+  // On ajoute le nouvel élément à la liste
+  unorderedList.appendChild(newListItem);
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.mouseleave_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mousemove_event/index.html b/files/fr/web/api/element/mousemove_event/index.html deleted file mode 100644 index d848446fb1..0000000000 --- a/files/fr/web/api/element/mousemove_event/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: 'Element : évènement mousemove' -slug: Web/API/Element/mousemove_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - events - - mousemove -translation_of: Web/API/Element/mousemove_event ---- -
{{APIRef}}
- -

L'évènement mousemove est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
- -

Exemples

- -

Dans l'exemple suivant, on utilise les évènements mousedown, mousemove et mouseup pour permettre à l'utilisateur de dessiner sur un canevas HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).

- -

Lors du chargement de la page, les constantes myPics et context sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante rect permet de stocker les coordonnées relatives du canevas par rapport à la page.

- -

Le dessin commence quand l'évènement mousedown est déclenché. On stocke les coordonnées du pointeur dans les variables x et y puis on passe la variable isDrawing à true pour indiquer qu'un dessin est en cours.

- -

Lorsque le pointeur se déplace sur la page, l'évènement mousemove est déclenché. Si isDrawing vaut true, le gestionnaire d'évènement appelle la fonction drawLine() afin de dessiner une ligne entre le point de coordonnées x et y (stockées dans ces variables) et la position actuelle (N.B. les coordonnées x et y sont "corrigées" avec la constante rect pour tenir compte du décalage entre le canevas et la page).

- -

Lorsque la fonction drawLine() a fini son exécution, on ajuste les coordonnées courante en les stockant dans x et y.

- -

Lorsque l'évènement mouseup est déclenché, on dessine le segment final du dessin en cours, on passe x et y à 0 puis on arrête le dessin en passant isDrawing à false.

- -

HTML

- -
<h1>Dessiner grâce aux évènements de souris</h1>
-<canvas id="myPics" width="560" height="360"></canvas>
-
- -

CSS

- -
canvas {
-  border: 1px solid black;
-  width: 560px;
-  height: 360px;
-}
- -

JavaScript

- -
// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
-// la souris entraîne un dessin sur le canevas
-let isDrawing = false;
-let x = 0;
-let y = 0;
-
-const myPics = document.getElementById('myPics');
-const context = myPics.getContext('2d');
-
-// On récupère le décalage du canevas en x et y par rapport aux bords
-// de la page
-const rect = myPics.getBoundingClientRect();
-
-// On ajoute les gestionnaires d'évènements pour mousedown, mousemove
-// et mouseup
-myPics.addEventListener('mousedown', e => {
-  x = e.clientX - rect.left;
-  y = e.clientY - rect.top;
-  isDrawing = true;
-});
-
-myPics.addEventListener('mousemove', e => {
-  if (isDrawing === true) {
-    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
-    x = e.clientX - rect.left;
-    y = e.clientY - rect.top;
-  }
-});
-
-window.addEventListener('mouseup', e => {
-  if (isDrawing === true) {
-    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
-    x = 0;
-    y = 0;
-    isDrawing = false;
-  }
-});
-
-function drawLine(context, x1, y1, x2, y2) {
-  context.beginPath();
-  context.strokeStyle = 'black';
-  context.lineWidth = 1;
-  context.moveTo(x1, y1);
-  context.lineTo(x2, y2);
-  context.stroke();
-  context.closePath();
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 640, 450)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.mousemove_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mousemove_event/index.md b/files/fr/web/api/element/mousemove_event/index.md new file mode 100644 index 0000000000..d848446fb1 --- /dev/null +++ b/files/fr/web/api/element/mousemove_event/index.md @@ -0,0 +1,161 @@ +--- +title: 'Element : évènement mousemove' +slug: Web/API/Element/mousemove_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - events + - mousemove +translation_of: Web/API/Element/mousemove_event +--- +
{{APIRef}}
+ +

L'évènement mousemove est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
+ +

Exemples

+ +

Dans l'exemple suivant, on utilise les évènements mousedown, mousemove et mouseup pour permettre à l'utilisateur de dessiner sur un canevas HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).

+ +

Lors du chargement de la page, les constantes myPics et context sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante rect permet de stocker les coordonnées relatives du canevas par rapport à la page.

+ +

Le dessin commence quand l'évènement mousedown est déclenché. On stocke les coordonnées du pointeur dans les variables x et y puis on passe la variable isDrawing à true pour indiquer qu'un dessin est en cours.

+ +

Lorsque le pointeur se déplace sur la page, l'évènement mousemove est déclenché. Si isDrawing vaut true, le gestionnaire d'évènement appelle la fonction drawLine() afin de dessiner une ligne entre le point de coordonnées x et y (stockées dans ces variables) et la position actuelle (N.B. les coordonnées x et y sont "corrigées" avec la constante rect pour tenir compte du décalage entre le canevas et la page).

+ +

Lorsque la fonction drawLine() a fini son exécution, on ajuste les coordonnées courante en les stockant dans x et y.

+ +

Lorsque l'évènement mouseup est déclenché, on dessine le segment final du dessin en cours, on passe x et y à 0 puis on arrête le dessin en passant isDrawing à false.

+ +

HTML

+ +
<h1>Dessiner grâce aux évènements de souris</h1>
+<canvas id="myPics" width="560" height="360"></canvas>
+
+ +

CSS

+ +
canvas {
+  border: 1px solid black;
+  width: 560px;
+  height: 360px;
+}
+ +

JavaScript

+ +
// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
+// la souris entraîne un dessin sur le canevas
+let isDrawing = false;
+let x = 0;
+let y = 0;
+
+const myPics = document.getElementById('myPics');
+const context = myPics.getContext('2d');
+
+// On récupère le décalage du canevas en x et y par rapport aux bords
+// de la page
+const rect = myPics.getBoundingClientRect();
+
+// On ajoute les gestionnaires d'évènements pour mousedown, mousemove
+// et mouseup
+myPics.addEventListener('mousedown', e => {
+  x = e.clientX - rect.left;
+  y = e.clientY - rect.top;
+  isDrawing = true;
+});
+
+myPics.addEventListener('mousemove', e => {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = e.clientX - rect.left;
+    y = e.clientY - rect.top;
+  }
+});
+
+window.addEventListener('mouseup', e => {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = 0;
+    y = 0;
+    isDrawing = false;
+  }
+});
+
+function drawLine(context, x1, y1, x2, y2) {
+  context.beginPath();
+  context.strokeStyle = 'black';
+  context.lineWidth = 1;
+  context.moveTo(x1, y1);
+  context.lineTo(x2, y2);
+  context.stroke();
+  context.closePath();
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 640, 450)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.mousemove_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mouseout_event/index.html b/files/fr/web/api/element/mouseout_event/index.html deleted file mode 100644 index 0e44a3ae9f..0000000000 --- a/files/fr/web/api/element/mouseout_event/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: 'Element : évènement mouseout' -slug: Web/API/Element/mouseout_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - mouseout -translation_of: Web/API/Element/mouseout_event ---- -
{{APIRef}}
- -

L'évènement mouseout est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. mouseout est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}
- -

Exemples

- -

Dans l'exemple suivant, on illustre la différence entre mouseout et mouseleave. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <ul>. mouseout est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.

- -

En essayant cet exemple, vous pourrez voir que mouseout est envoyé aux éléments individuels de la liste tandis que mouseleave est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.

- -

HTML

- -
<ul id="test">
-  <li>élément 1</li>
-  <li>élément 2</li>
-  <li>élément 3</li>
-</ul>
-
- -

JavaScript

- -
let test = document.getElementById("test");
-
-// On affiche la liste en violet lorsque le curseur quitte
-// l'élément <ul>
-test.addEventListener("mouseleave", function( event ) {
-  // on cible la cible de mouseleave
-  event.target.style.color = "purple";
-
-  // on réinitialise la couleur après quelques instants
-  setTimeout(function() {
-    event.target.style.color = "";
-  }, 1000);
-}, false);
-
-// On affiche les éléments <li> en orange lorsque la souris
-// les quitte
-test.addEventListener("mouseout", function( event ) {
-  // on cible la cible de mouseout
-  event.target.style.color = "orange";
-
- // on réinitialise la couleur après quelques instants
-  setTimeout(function() {
-    event.target.style.color = "";
-  }, 500);
-}, false);
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 640, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.mouseout_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mouseout_event/index.md b/files/fr/web/api/element/mouseout_event/index.md new file mode 100644 index 0000000000..0e44a3ae9f --- /dev/null +++ b/files/fr/web/api/element/mouseout_event/index.md @@ -0,0 +1,125 @@ +--- +title: 'Element : évènement mouseout' +slug: Web/API/Element/mouseout_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - mouseout +translation_of: Web/API/Element/mouseout_event +--- +
{{APIRef}}
+ +

L'évènement mouseout est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. mouseout est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènements{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}
+ +

Exemples

+ +

Dans l'exemple suivant, on illustre la différence entre mouseout et mouseleave. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <ul>. mouseout est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.

+ +

En essayant cet exemple, vous pourrez voir que mouseout est envoyé aux éléments individuels de la liste tandis que mouseleave est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.

+ +

HTML

+ +
<ul id="test">
+  <li>élément 1</li>
+  <li>élément 2</li>
+  <li>élément 3</li>
+</ul>
+
+ +

JavaScript

+ +
let test = document.getElementById("test");
+
+// On affiche la liste en violet lorsque le curseur quitte
+// l'élément <ul>
+test.addEventListener("mouseleave", function( event ) {
+  // on cible la cible de mouseleave
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 1000);
+}, false);
+
+// On affiche les éléments <li> en orange lorsque la souris
+// les quitte
+test.addEventListener("mouseout", function( event ) {
+  // on cible la cible de mouseout
+  event.target.style.color = "orange";
+
+ // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 640, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.mouseout_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mouseover_event/index.html b/files/fr/web/api/element/mouseover_event/index.html deleted file mode 100644 index 368e39ddfe..0000000000 --- a/files/fr/web/api/element/mouseover_event/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: 'Element : évènement mouseover' -slug: Web/API/Element/mouseover_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - mouseover -translation_of: Web/API/Element/mouseover_event ---- -
{{APIRef}}
- -

L'évènement mouseover est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}
- -

Exemples

- -

L'exemple suivant illustre la différence entre les évènements mouseover et mouseenter.

- -

HTML

- -
<ul id="test">
-  <li>item 1</li>
-  <li>item 2</li>
-  <li>item 3</li>
-</ul>
-
- -

JavaScript

- -
let test = document.getElementById("test");
-
-// Ce gestionnaire ne sera exécuté qu'une fois
-// lorsque le curseur se déplace sur la liste
-test.addEventListener("mouseenter", function( event ) {
-  // on met l'accent sur la cible de mouseenter
-  event.target.style.color = "purple";
-
-  // on réinitialise la couleur après quelques instants
-  setTimeout(function() {
-    event.target.style.color = "";
-  }, 500);
-}, false);
-
-// Ce gestionnaire sera exécuté à chaque fois que le curseur
-// se déplacera sur un autre élément de la liste
-test.addEventListener("mouseover", function( event ) {
-  // on met l'accent sur la cible de mouseover
-  event.target.style.color = "orange";
-
-  // on réinitialise la couleur après quelques instants
-  setTimeout(function() {
-    event.target.style.color = "";
-  }, 500);
-}, false);
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.mouseover_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mouseover_event/index.md b/files/fr/web/api/element/mouseover_event/index.md new file mode 100644 index 0000000000..368e39ddfe --- /dev/null +++ b/files/fr/web/api/element/mouseover_event/index.md @@ -0,0 +1,123 @@ +--- +title: 'Element : évènement mouseover' +slug: Web/API/Element/mouseover_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - mouseover +translation_of: Web/API/Element/mouseover_event +--- +
{{APIRef}}
+ +

L'évènement mouseover est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}
+ +

Exemples

+ +

L'exemple suivant illustre la différence entre les évènements mouseover et mouseenter.

+ +

HTML

+ +
<ul id="test">
+  <li>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ul>
+
+ +

JavaScript

+ +
let test = document.getElementById("test");
+
+// Ce gestionnaire ne sera exécuté qu'une fois
+// lorsque le curseur se déplace sur la liste
+test.addEventListener("mouseenter", function( event ) {
+  // on met l'accent sur la cible de mouseenter
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+
+// Ce gestionnaire sera exécuté à chaque fois que le curseur
+// se déplacera sur un autre élément de la liste
+test.addEventListener("mouseover", function( event ) {
+  // on met l'accent sur la cible de mouseover
+  event.target.style.color = "orange";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.mouseover_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/mouseup_event/index.html b/files/fr/web/api/element/mouseup_event/index.html deleted file mode 100644 index 8dcab880a9..0000000000 --- a/files/fr/web/api/element/mouseup_event/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: 'Element : évènement mouseup' -slug: Web/API/Element/mouseup_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - events - - mouseup -translation_of: Web/API/Element/mouseup_event ---- -
{{APIRef}}
- -

L'évènement mouseup est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.

- -

Les évènements mouseup peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on appuie sur un bouton.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}
- -

Exemples

- -

{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.mouseup_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mouseup_event/index.md b/files/fr/web/api/element/mouseup_event/index.md new file mode 100644 index 0000000000..8dcab880a9 --- /dev/null +++ b/files/fr/web/api/element/mouseup_event/index.md @@ -0,0 +1,85 @@ +--- +title: 'Element : évènement mouseup' +slug: Web/API/Element/mouseup_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - events + - mouseup +translation_of: Web/API/Element/mouseup_event +--- +
{{APIRef}}
+ +

L'évènement mouseup est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.

+ +

Les évènements mouseup peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on appuie sur un bouton.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}
+ +

Exemples

+ +

{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.mouseup_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/namespaceuri/index.html b/files/fr/web/api/element/namespaceuri/index.html deleted file mode 100644 index 998f6a875e..0000000000 --- a/files/fr/web/api/element/namespaceuri/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Element.namespaceURI -slug: Web/API/Element/namespaceURI -tags: - - API - - DOM - - Element - - Espace de noms - - Propriétés - - URI -translation_of: Web/API/Element/namespaceURI ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule Element.namespaceURI renvoie l'URI d'espace de noms de l'élément ou null si l'élément n'est pas dans un espace de nom.

- -
-

Note : Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.

-
- -

Syntaxe

- -
namespace = element.namespaceURI
- -

Exemple

- -

Dans cet extrait, un élément est examiné pour son {{domxref("localName")}} et son namespaceURI. Si le namespaceURI renvoie l'espace de noms XUL et le localName retourne "browser" (navigateur), alors le noeud est compris comme étant un <browser/> XUL.

- -
if (element.localName == "browser" &&
-    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
-  // c'est un navigateur XUL
-}
- -

Notes

- -

Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.

- -

Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est null. Dans les versions postérieures, en conformité avec HTML5, c'est http://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}

- -

Vous pouvez créer un élément avec l'namespaceURI spécifié en utilisant la méthode DOM niveau 2 document.createElementNS.

- -

Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un élément particulier, ne peut pas être modifié.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}{{Spec2("DOM4")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.namespaceURI")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/namespaceuri/index.md b/files/fr/web/api/element/namespaceuri/index.md new file mode 100644 index 0000000000..998f6a875e --- /dev/null +++ b/files/fr/web/api/element/namespaceuri/index.md @@ -0,0 +1,74 @@ +--- +title: Element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - API + - DOM + - Element + - Espace de noms + - Propriétés + - URI +translation_of: Web/API/Element/namespaceURI +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule Element.namespaceURI renvoie l'URI d'espace de noms de l'élément ou null si l'élément n'est pas dans un espace de nom.

+ +
+

Note : Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.

+
+ +

Syntaxe

+ +
namespace = element.namespaceURI
+ +

Exemple

+ +

Dans cet extrait, un élément est examiné pour son {{domxref("localName")}} et son namespaceURI. Si le namespaceURI renvoie l'espace de noms XUL et le localName retourne "browser" (navigateur), alors le noeud est compris comme étant un <browser/> XUL.

+ +
if (element.localName == "browser" &&
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // c'est un navigateur XUL
+}
+ +

Notes

+ +

Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.

+ +

Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est null. Dans les versions postérieures, en conformité avec HTML5, c'est http://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}

+ +

Vous pouvez créer un élément avec l'namespaceURI spécifié en utilisant la méthode DOM niveau 2 document.createElementNS.

+ +

Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un élément particulier, ne peut pas être modifié.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}{{Spec2("DOM4")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.namespaceURI")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/outerhtml/index.html b/files/fr/web/api/element/outerhtml/index.html deleted file mode 100644 index 243fac13e5..0000000000 --- a/files/fr/web/api/element/outerhtml/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Element.outerHTML -slug: Web/API/Element/outerHTML -tags: - - API - - DOM - - Privacy - - Propriétés -translation_of: Web/API/Element/outerHTML ---- -
{{APIRef("DOM")}}
- -

L'attribut outerHTML de l'interface DOM {{domxref("element")}} récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.

- -

Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.

- -

Syntaxe

- -
var content = element.outerHTML;
-
-element.outerHTML = htmlString;
- -

Valeur

- -

La lecture de la valeur de outerHTML renvoie 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 outerHTML en utilisant une chaîne qui n'est pas correctement formée HTML.
-
NoModificationAllowedError
-
Une tentative a été faite de définir  outerHTML  sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.
-
- -

Exemples

- -

Récupérer la valeur de la propriété outerHTML d'un élément :

- -
// HTML:
-// <div id="d"><p>Contenu</p><p>Plus Complexe</p></div>
-
-d = document.getElementById("d");
-dump(d.outerHTML);
-
-// la chaîne '<div id="d"><p>Contenu</p><p>Plus Complexe</p></div>'
-// est affichée dans la fenêtre console
-
- -

Remplacer un noeud en modifiant la propriété outerHTML :

- -
// HTML:
-// <div id="container"><div id="d">Ceci est un div.</div></div>
-
-container = document.getElementById("container");
-d = document.getElementById("d");
-console.log(container.firstChild.nodeName); // affiche "DIV"
-
-d.outerHTML = "<p>Ce paragraphe remplace le div original.</p>";
-console.log(container.firstChild.nodeName); // affiche "P"
-
-// Le div #d ne fait plus partie de l'arbre décrivant le document,
-// le nouveau paragraphe l'ayant remplacé.
-
- -

Notes

- -

Si un élément n'a pas de noeud parent, définir sa propriété outerHTML ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :

- -
var div = document.createElement("div");
-div.outerHTML = "<div class=\"test\">test</div>";
-console.log(div.outerHTML); // output: "<div></div>"
- -

Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété outerHTML a été modifiée contiendra toujours une référence à l'élément initial :

- -
var p = document.getElementsByTagName("p")[0];
-console.log(p.nodeName); // affiche: "P"
-p.outerHTML = "<div>Ce div remplace un paragraph.</div>";
-console.log(p.nodeName); // toujours "P";
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.outerHTML")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/outerhtml/index.md b/files/fr/web/api/element/outerhtml/index.md new file mode 100644 index 0000000000..243fac13e5 --- /dev/null +++ b/files/fr/web/api/element/outerhtml/index.md @@ -0,0 +1,111 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +tags: + - API + - DOM + - Privacy + - Propriétés +translation_of: Web/API/Element/outerHTML +--- +
{{APIRef("DOM")}}
+ +

L'attribut outerHTML de l'interface DOM {{domxref("element")}} récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.

+ +

Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.

+ +

Syntaxe

+ +
var content = element.outerHTML;
+
+element.outerHTML = htmlString;
+ +

Valeur

+ +

La lecture de la valeur de outerHTML renvoie 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 outerHTML en utilisant une chaîne qui n'est pas correctement formée HTML.
+
NoModificationAllowedError
+
Une tentative a été faite de définir  outerHTML  sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.
+
+ +

Exemples

+ +

Récupérer la valeur de la propriété outerHTML d'un élément :

+ +
// HTML:
+// <div id="d"><p>Contenu</p><p>Plus Complexe</p></div>
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// la chaîne '<div id="d"><p>Contenu</p><p>Plus Complexe</p></div>'
+// est affichée dans la fenêtre console
+
+ +

Remplacer un noeud en modifiant la propriété outerHTML :

+ +
// HTML:
+// <div id="container"><div id="d">Ceci est un div.</div></div>
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // affiche "DIV"
+
+d.outerHTML = "<p>Ce paragraphe remplace le div original.</p>";
+console.log(container.firstChild.nodeName); // affiche "P"
+
+// Le div #d ne fait plus partie de l'arbre décrivant le document,
+// le nouveau paragraphe l'ayant remplacé.
+
+ +

Notes

+ +

Si un élément n'a pas de noeud parent, définir sa propriété outerHTML ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :

+ +
var div = document.createElement("div");
+div.outerHTML = "<div class=\"test\">test</div>";
+console.log(div.outerHTML); // output: "<div></div>"
+ +

Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété outerHTML a été modifiée contiendra toujours une référence à l'élément initial :

+ +
var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // affiche: "P"
+p.outerHTML = "<div>Ce div remplace un paragraph.</div>";
+console.log(p.nodeName); // toujours "P";
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.outerHTML")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/prefix/index.html b/files/fr/web/api/element/prefix/index.html deleted file mode 100644 index 638e979793..0000000000 --- a/files/fr/web/api/element/prefix/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Element.prefix -slug: Web/API/Element/prefix -tags: - - API - - DOM - - Element - - Propriétés - - Préfixe -translation_of: Web/API/Element/prefix ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule Element.prefix renvoie le préfixe d'espace de noms de l'élément spécifié ou null si aucun préfixe n'est précisé.

- -
-

Note : Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.

-
- -

Syntaxe

- -
string = element.prefix
-
- -

Exemples

- -

Les logs "x" suivants à la console.

- -
<x:div onclick="console.log(this.prefix)"/>
-
- -

Notes

- -

Cela fonctionnera uniquement lorsqu'un analyseur connaissant l'espace de noms est utilisé, c'est-à-dire lorsqu'un document est servi avec un type XML MIME. Cela ne fonctionnera pas pour les documents HTML.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}}{{Spec2("DOM4")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.prefix")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/prefix/index.md b/files/fr/web/api/element/prefix/index.md new file mode 100644 index 0000000000..638e979793 --- /dev/null +++ b/files/fr/web/api/element/prefix/index.md @@ -0,0 +1,66 @@ +--- +title: Element.prefix +slug: Web/API/Element/prefix +tags: + - API + - DOM + - Element + - Propriétés + - Préfixe +translation_of: Web/API/Element/prefix +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule Element.prefix renvoie le préfixe d'espace de noms de l'élément spécifié ou null si aucun préfixe n'est précisé.

+ +
+

Note : Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.

+
+ +

Syntaxe

+ +
string = element.prefix
+
+ +

Exemples

+ +

Les logs "x" suivants à la console.

+ +
<x:div onclick="console.log(this.prefix)"/>
+
+ +

Notes

+ +

Cela fonctionnera uniquement lorsqu'un analyseur connaissant l'espace de noms est utilisé, c'est-à-dire lorsqu'un document est servi avec un type XML MIME. Cela ne fonctionnera pas pour les documents HTML.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}}{{Spec2("DOM4")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.prefix")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/queryselector/index.html b/files/fr/web/api/element/queryselector/index.html deleted file mode 100644 index 44325a3547..0000000000 --- a/files/fr/web/api/element/queryselector/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Element.querySelector() -slug: Web/API/Element/querySelector -tags: - - API - - CSS - - CSS Selectors - - DOM - - Element - - Elements - - Finding Elements - - Locating Elements - - Method - - Reference - - Searching Elements - - Selecting Elements - - Selectors - - querySelector -translation_of: Web/API/Element/querySelector ---- -
{{APIRef("DOM")}}
- -

La méthode querySelector() de l'interface Element renvoie le premier élément descendant de l'élément sur lequel elle est invoquée qui correspond au groupe de sélecteurs spécifié.

- -

Syntaxe

- -
element = baseElement.querySelector(selectors);
- -

Paramètres

- -
-
selectors
-
est un groupe de sélecteurs à faire correspondre aux éléments descendants du Element baseElement ; cette syntaxe CSS doit être valide ou une exception SyntaxError se produit. Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.
-
- -

Valeur retournée

- -

Le premier élément descendant de baseElement qui correspond au groupe de selectors « sélecteurs » spécifié. La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris baseElement et ses descendants ; En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels. Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de baseElement. La première correspondance de ces éléments restants est renvoyée par la méthode querySelector().

- -

Si aucune correspondance n'est trouvée, la valeur retournée est null.

- -

Exceptions

- -
-
SyntaxError
-
Les selectors spécifiés sont invalides.
-
- -

Exemple

- -

Dans ce premier exemple, est retourné le premier élément <style> dans le corps du document HTML qui, soit n'a pas de type, soit a le type text/css:

- -
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
- -

La hiérarchie entière compte

- -

Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des selectors, de sorte que les niveaux en dehors du baseElement spécifié sont toujours pris en compte lors de la recherche des correspondances.

- -

HTML

- -
<div>
-  <h5>Original content</h5>
-  <p>
-    inside paragraph
-    <span>inside span</span>
-    inside paragraph
-  </p>
-</div>
-<div>
-  <h5>Output</h5>
-  <div id="output"></div>
-</div>
- -

JavaScript

- -
var baseElement = document.querySelector("p");
-document.getElementById("output").innerHTML = (baseElement.querySelector("div span").innerHTML);
- -

Résultat

- -

Le résultat ressemble à ceci :

- -
{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}}
- -

Plus d'exemples

- -

Voir Document.querySelector() pour des exemples supplémentaires du format approprié pour les sélecteurs.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.querySelector")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/queryselector/index.md b/files/fr/web/api/element/queryselector/index.md new file mode 100644 index 0000000000..44325a3547 --- /dev/null +++ b/files/fr/web/api/element/queryselector/index.md @@ -0,0 +1,134 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +tags: + - API + - CSS + - CSS Selectors + - DOM + - Element + - Elements + - Finding Elements + - Locating Elements + - Method + - Reference + - Searching Elements + - Selecting Elements + - Selectors + - querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

La méthode querySelector() de l'interface Element renvoie le premier élément descendant de l'élément sur lequel elle est invoquée qui correspond au groupe de sélecteurs spécifié.

+ +

Syntaxe

+ +
element = baseElement.querySelector(selectors);
+ +

Paramètres

+ +
+
selectors
+
est un groupe de sélecteurs à faire correspondre aux éléments descendants du Element baseElement ; cette syntaxe CSS doit être valide ou une exception SyntaxError se produit. Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.
+
+ +

Valeur retournée

+ +

Le premier élément descendant de baseElement qui correspond au groupe de selectors « sélecteurs » spécifié. La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris baseElement et ses descendants ; En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels. Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de baseElement. La première correspondance de ces éléments restants est renvoyée par la méthode querySelector().

+ +

Si aucune correspondance n'est trouvée, la valeur retournée est null.

+ +

Exceptions

+ +
+
SyntaxError
+
Les selectors spécifiés sont invalides.
+
+ +

Exemple

+ +

Dans ce premier exemple, est retourné le premier élément <style> dans le corps du document HTML qui, soit n'a pas de type, soit a le type text/css:

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+ +

La hiérarchie entière compte

+ +

Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des selectors, de sorte que les niveaux en dehors du baseElement spécifié sont toujours pris en compte lors de la recherche des correspondances.

+ +

HTML

+ +
<div>
+  <h5>Original content</h5>
+  <p>
+    inside paragraph
+    <span>inside span</span>
+    inside paragraph
+  </p>
+</div>
+<div>
+  <h5>Output</h5>
+  <div id="output"></div>
+</div>
+ +

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML = (baseElement.querySelector("div span").innerHTML);
+ +

Résultat

+ +

Le résultat ressemble à ceci :

+ +
{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}}
+ +

Plus d'exemples

+ +

Voir Document.querySelector() pour des exemples supplémentaires du format approprié pour les sélecteurs.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.querySelector")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/queryselectorall/index.html b/files/fr/web/api/element/queryselectorall/index.html deleted file mode 100644 index cab55d02fe..0000000000 --- a/files/fr/web/api/element/queryselectorall/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Element.querySelectorAll() -slug: Web/API/Element/querySelectorAll -tags: - - API - - DOM - - Element - - Méthode - - Reference -translation_of: Web/API/Element/querySelectorAll ---- -
{{APIRef("DOM")}}
- -

La méthode  querySelectorAll() de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.

- -
-

Note : La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} .

-
- -

Syntaxe

- -
elementList = baseElement.querySelectorAll(selectors);
-
- -

Paramètres

- -
-
selectors 
-
une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les sélecteurs CSS ; si ce n'est pas le cas, une exception SyntaxError est levée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.
-
- -
-

Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.

-
- -

Valeur retournée

- -

Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.

- -
-

Note : Si le selectors spécifié inclus un pseudo-element CSS, la liste renvoyée est toujours vide.

-
- -

Exception

- -
-
SyntaxError
-
La syntaxe de la chaîne du selectors spécifié n'est pas correcte.
-
- -

Exemples

- -

Obtention d'une liste de correspondances

- -

Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément "myBox" :

- -
var matches = myBox.querySelectorAll("p");
- -

Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans "myBox"  avec une classe  "note" ou  "alert" :

- -
var matches = myBox.querySelectorAll("div.note, div.alert");
- -

Ici, nous obtenons une liste d'éléments p du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe 'highlighted' et qui sont inclus dans un conteneur dont l'ID est "test" :

- -
var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted > p");
- -

Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé 'data-src':

- -
var matches = document.querySelectorAll("iframe[data-src]");
- -

Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est "userlist" et qui ont un attribut "data-active" dont la valeur est "1":

- -
var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active=1]");
- -

Accès aux correspondances

- -

Une fois que la {{domxref("NodeList")}} des éléments correspondants est retournée, vous pouvez l'examiner pour n'importe quel tableau (array). Si le tableau est vide (sa propriété length est 0), alors aucune correspondance n'a été trouvée.

- -

Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :

- -
var highlightedItems = userList.querySelectorAll(".highlighted");
-
-highlightedItems.forEach(function(userItem) {
-  deleteUser(userItem);
-});
- -

Notes d'utilisation

- -

queryselectorAll se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.

- -

HTML

- -

Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.

- -
<div class="outer">
-  <div class="select">
-    <div class="inner">
-    </div>
-  </div>
-</div>
- -

JavaScript

- -
var select = document.querySelector('.select');
-var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1, pas 0!
- -

Dans cet exemple, en sélectionnant ".outer .inner" dans le contexte <div> avec la classe "select", l'élément avec la classe ".inner" est toujours trouvé, même si .outer n'est pas un descendant de l'élément sur lequel la recherche est effectuée (".select"). Par défaut, querySelectorAll() vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.

- -

La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :

- -
var select = document.querySelector('.select');
-var inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}norme actuelle
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Pas de changement
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Définition initiale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition originale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.querySelectorAll")}}

- -

Voir aussi

- - - diff --git a/files/fr/web/api/element/queryselectorall/index.md b/files/fr/web/api/element/queryselectorall/index.md new file mode 100644 index 0000000000..cab55d02fe --- /dev/null +++ b/files/fr/web/api/element/queryselectorall/index.md @@ -0,0 +1,166 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - API + - DOM + - Element + - Méthode + - Reference +translation_of: Web/API/Element/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

La méthode  querySelectorAll() de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.

+ +
+

Note : La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} .

+
+ +

Syntaxe

+ +
elementList = baseElement.querySelectorAll(selectors);
+
+ +

Paramètres

+ +
+
selectors 
+
une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les sélecteurs CSS ; si ce n'est pas le cas, une exception SyntaxError est levée. Voir Localisation des éléments DOM avec les sélecteurs pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.
+
+ +
+

Note : Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.

+
+ +

Valeur retournée

+ +

Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.

+ +
+

Note : Si le selectors spécifié inclus un pseudo-element CSS, la liste renvoyée est toujours vide.

+
+ +

Exception

+ +
+
SyntaxError
+
La syntaxe de la chaîne du selectors spécifié n'est pas correcte.
+
+ +

Exemples

+ +

Obtention d'une liste de correspondances

+ +

Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément "myBox" :

+ +
var matches = myBox.querySelectorAll("p");
+ +

Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans "myBox"  avec une classe  "note" ou  "alert" :

+ +
var matches = myBox.querySelectorAll("div.note, div.alert");
+ +

Ici, nous obtenons une liste d'éléments p du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe 'highlighted' et qui sont inclus dans un conteneur dont l'ID est "test" :

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Cet exemple utilise un sélecteur d'attribut pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé 'data-src':

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est "userlist" et qui ont un attribut "data-active" dont la valeur est "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active=1]");
+ +

Accès aux correspondances

+ +

Une fois que la {{domxref("NodeList")}} des éléments correspondants est retournée, vous pouvez l'examiner pour n'importe quel tableau (array). Si le tableau est vide (sa propriété length est 0), alors aucune correspondance n'a été trouvée.

+ +

Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Notes d'utilisation

+ +

queryselectorAll se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.

+ +

HTML

+ +

Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, pas 0!
+ +

Dans cet exemple, en sélectionnant ".outer .inner" dans le contexte <div> avec la classe "select", l'élément avec la classe ".inner" est toujours trouvé, même si .outer n'est pas un descendant de l'élément sur lequel la recherche est effectuée (".select"). Par défaut, querySelectorAll() vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.

+ +

La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}norme actuelle
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Pas de changement
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Définition initiale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition originale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.querySelectorAll")}}

+ +

Voir aussi

+ + + diff --git a/files/fr/web/api/element/releasepointercapture/index.html b/files/fr/web/api/element/releasepointercapture/index.html deleted file mode 100644 index 22be0475ac..0000000000 --- a/files/fr/web/api/element/releasepointercapture/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Element.releasePointerCapture() -slug: Web/API/Element/releasePointerCapture -tags: - - API - - DOM - - Element - - Méthodes - - Pointeur -translation_of: Web/API/Element/releasePointerCapture ---- -

{{APIRef("DOM")}}

- -

Relâche (arrête) la capture de pointeur précédemment définie pour un pointer ({{domxref("PointerEvent")}}) spécifique.

- -

Voir la méthode {{domxref("Element.setPointerCapture","Element.setPointerCapture()")}} pour une description de pointer capture et la façon de le définir pour un élément particulier.

- -

Syntaxe

- -
targetElement.releasePointerCapture(pointerId);
-
- -

Arguments

- -
-
pointerId
-
L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","pointer event")}}.
-
- -

Valeur retournée

- -

Si pointerId ne correspond à aucun pointeur actif, cette méthode renvoie void (vide) et déclenche une {{domxref("DOMException")}} avec le nom InvalidPointerId.

- -

Exemple

- -
<html>
-<script>
-function downHandler(ev) {
- var el=document.getElementById("target");
- // L'élément "target" va recevoir/capturer d'autres évènements
- el.setPointerCapture(ev.pointerId);
-}
-function cancelHandler(ev) {
- var el=document.getElementById("target");
- // Relâche la capture du pointeur
- el.releasePointerCapture(ev.pointerId);
-}
-function init() {
- var el=document.getElementById("target");
- // Enregistre les gestionnaires du pointeur
- el.onpointerdown = downHandler;
- el.onpointercancel = cancelHandler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Pointer Events 2','#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}{{Spec2('Pointer Events 2')}}Version non stable.
{{SpecName('Pointer Events', '#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}{{Spec2('Pointer Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.releasePointerCapture")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/releasepointercapture/index.md b/files/fr/web/api/element/releasepointercapture/index.md new file mode 100644 index 0000000000..22be0475ac --- /dev/null +++ b/files/fr/web/api/element/releasepointercapture/index.md @@ -0,0 +1,92 @@ +--- +title: Element.releasePointerCapture() +slug: Web/API/Element/releasePointerCapture +tags: + - API + - DOM + - Element + - Méthodes + - Pointeur +translation_of: Web/API/Element/releasePointerCapture +--- +

{{APIRef("DOM")}}

+ +

Relâche (arrête) la capture de pointeur précédemment définie pour un pointer ({{domxref("PointerEvent")}}) spécifique.

+ +

Voir la méthode {{domxref("Element.setPointerCapture","Element.setPointerCapture()")}} pour une description de pointer capture et la façon de le définir pour un élément particulier.

+ +

Syntaxe

+ +
targetElement.releasePointerCapture(pointerId);
+
+ +

Arguments

+ +
+
pointerId
+
L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","pointer event")}}.
+
+ +

Valeur retournée

+ +

Si pointerId ne correspond à aucun pointeur actif, cette méthode renvoie void (vide) et déclenche une {{domxref("DOMException")}} avec le nom InvalidPointerId.

+ +

Exemple

+ +
<html>
+<script>
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ // L'élément "target" va recevoir/capturer d'autres évènements
+ el.setPointerCapture(ev.pointerId);
+}
+function cancelHandler(ev) {
+ var el=document.getElementById("target");
+ // Relâche la capture du pointeur
+ el.releasePointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ // Enregistre les gestionnaires du pointeur
+ el.onpointerdown = downHandler;
+ el.onpointercancel = cancelHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Pointer Events 2','#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}{{Spec2('Pointer Events 2')}}Version non stable.
{{SpecName('Pointer Events', '#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}{{Spec2('Pointer Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.releasePointerCapture")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/removeattribute/index.html b/files/fr/web/api/element/removeattribute/index.html deleted file mode 100644 index b27f3eb813..0000000000 --- a/files/fr/web/api/element/removeattribute/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: element.removeAttribute -slug: Web/API/Element/removeAttribute -tags: - - API - - Attributs - - DOM - - Element - - Méthodes - - Suppression -translation_of: Web/API/Element/removeAttribute ---- -

{{ APIRef("DOM") }}

- -

removeAttribute supprime un attribut de l'élément spécifié.

- -

Syntaxe

- -
element.removeAttribute(nomAttribut);
-
- - - -

Exemple

- -
// avant : <div id="div1" align="left" width="200">
-document.getElementById("div1").removeAttribute("align");
-// maintenant : <div id="div1" width="200">
-
- -

Notes

- -

Il vaut mieux utiliser removeAttribute plutôt que de définir la valeur de l'attribut à null avec setAttribute.

- -

Tenter d'effacer un attribut que l'élément ne possède pas ne provoque aucune exception.

- -

removeAttribute ne renvoie rien, donc vous ne pouvez supprimer plusieurs attributs par enchaînement de cette méthode.

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - diff --git a/files/fr/web/api/element/removeattribute/index.md b/files/fr/web/api/element/removeattribute/index.md new file mode 100644 index 0000000000..b27f3eb813 --- /dev/null +++ b/files/fr/web/api/element/removeattribute/index.md @@ -0,0 +1,47 @@ +--- +title: element.removeAttribute +slug: Web/API/Element/removeAttribute +tags: + - API + - Attributs + - DOM + - Element + - Méthodes + - Suppression +translation_of: Web/API/Element/removeAttribute +--- +

{{ APIRef("DOM") }}

+ +

removeAttribute supprime un attribut de l'élément spécifié.

+ +

Syntaxe

+ +
element.removeAttribute(nomAttribut);
+
+ + + +

Exemple

+ +
// avant : <div id="div1" align="left" width="200">
+document.getElementById("div1").removeAttribute("align");
+// maintenant : <div id="div1" width="200">
+
+ +

Notes

+ +

Il vaut mieux utiliser removeAttribute plutôt que de définir la valeur de l'attribut à null avec setAttribute.

+ +

Tenter d'effacer un attribut que l'élément ne possède pas ne provoque aucune exception.

+ +

removeAttribute ne renvoie rien, donc vous ne pouvez supprimer plusieurs attributs par enchaînement de cette méthode.

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/removeattributenode/index.html b/files/fr/web/api/element/removeattributenode/index.html deleted file mode 100644 index 4ecd896414..0000000000 --- a/files/fr/web/api/element/removeattributenode/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: element.removeAttributeNode -slug: Web/API/Element/removeAttributeNode -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/removeAttributeNode ---- -

{{ APIRef("DOM") }}

- -

removeAttributeNode enlève l'attribut spécifié de l'élément courant.

- -

Syntaxe

- -
removedAttr =element.removeAttributeNode(attributeNode)
-
- - - -

Exemple

- -
// <div id="top" align="center" />
-var d = document.getElementById("top");
-var d_align = d.getAttributeNode("align");
-d.removeAttributeNode(d_align);
-// align est maintenant supprimé : <div id="top" />
- -

Notes

- -

Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.

- -

Il n'y a pas de removeAttributeNodeNS (contrairement à la paire setAttributeNode et setAttributeNodeNS pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant),  removeAttributeNode n'a pas cette exigence.  removeAttributeNode peut supprimer des attributs, qu'ils soient d'espace de noms ou pas.

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - diff --git a/files/fr/web/api/element/removeattributenode/index.md b/files/fr/web/api/element/removeattributenode/index.md new file mode 100644 index 0000000000..4ecd896414 --- /dev/null +++ b/files/fr/web/api/element/removeattributenode/index.md @@ -0,0 +1,45 @@ +--- +title: element.removeAttributeNode +slug: Web/API/Element/removeAttributeNode +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/removeAttributeNode +--- +

{{ APIRef("DOM") }}

+ +

removeAttributeNode enlève l'attribut spécifié de l'élément courant.

+ +

Syntaxe

+ +
removedAttr =element.removeAttributeNode(attributeNode)
+
+ + + +

Exemple

+ +
// <div id="top" align="center" />
+var d = document.getElementById("top");
+var d_align = d.getAttributeNode("align");
+d.removeAttributeNode(d_align);
+// align est maintenant supprimé : <div id="top" />
+ +

Notes

+ +

Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.

+ +

Il n'y a pas de removeAttributeNodeNS (contrairement à la paire setAttributeNode et setAttributeNodeNS pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant),  removeAttributeNode n'a pas cette exigence.  removeAttributeNode peut supprimer des attributs, qu'ils soient d'espace de noms ou pas.

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/removeattributens/index.html b/files/fr/web/api/element/removeattributens/index.html deleted file mode 100644 index 457c552bb9..0000000000 --- a/files/fr/web/api/element/removeattributens/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: element.removeAttributeNS -slug: Web/API/Element/removeAttributeNS -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/removeAttributeNS ---- -

{{ APIRef("DOM") }}

- -

removeAttributeNS supprime l'attribut spécifié d'un élément.

- -

Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.

- -

Syntaxe

- -
element.removeAttributeNS(namespace,attrName);
-
- - - -

Exemple

- -
// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
-//      special:specialAlign="utterleft" width="200px" />
-d = document.getElementById("div1");
-d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
-// l'élément est devenu : <div id="div1" width="200px" />
-
- -

Notes

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - diff --git a/files/fr/web/api/element/removeattributens/index.md b/files/fr/web/api/element/removeattributens/index.md new file mode 100644 index 0000000000..457c552bb9 --- /dev/null +++ b/files/fr/web/api/element/removeattributens/index.md @@ -0,0 +1,44 @@ +--- +title: element.removeAttributeNS +slug: Web/API/Element/removeAttributeNS +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/removeAttributeNS +--- +

{{ APIRef("DOM") }}

+ +

removeAttributeNS supprime l'attribut spécifié d'un élément.

+ +

Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.

+ +

Syntaxe

+ +
element.removeAttributeNS(namespace,attrName);
+
+ + + +

Exemple

+ +
// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
+//      special:specialAlign="utterleft" width="200px" />
+d = document.getElementById("div1");
+d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
+// l'élément est devenu : <div id="div1" width="200px" />
+
+ +

Notes

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/requestfullscreen/index.html b/files/fr/web/api/element/requestfullscreen/index.html deleted file mode 100644 index ad1dbf6456..0000000000 --- a/files/fr/web/api/element/requestfullscreen/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Element.requestFullscreen() -slug: Web/API/Element/requestFullScreen -tags: - - Méthode - - Plein écran -translation_of: Web/API/Element/requestFullScreen ---- -
{{APIRef("Fullscreen API")}}
- -

La méthode Element.requestFullscreen() envoie une requête asynchrone pour que l'élément soit affiché en plein écran.

- -

Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place.

- -

Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.

- -
-

Note : Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.

-
- -

Syntaxe

- -
Element.requestFullscreen();
-
- -

Exemple

- -

Avant d'appeler requestFullScreen(), mettez en place des gestionnaires (handlers) pour les évenements  {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée).

- -

tbd

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.requestFullscreen")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/requestfullscreen/index.md b/files/fr/web/api/element/requestfullscreen/index.md new file mode 100644 index 0000000000..ad1dbf6456 --- /dev/null +++ b/files/fr/web/api/element/requestfullscreen/index.md @@ -0,0 +1,65 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +tags: + - Méthode + - Plein écran +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("Fullscreen API")}}
+ +

La méthode Element.requestFullscreen() envoie une requête asynchrone pour que l'élément soit affiché en plein écran.

+ +

Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place.

+ +

Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.

+ +
+

Note : Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.

+
+ +

Syntaxe

+ +
Element.requestFullscreen();
+
+ +

Exemple

+ +

Avant d'appeler requestFullScreen(), mettez en place des gestionnaires (handlers) pour les évenements  {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée).

+ +

tbd

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.requestFullscreen")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollheight/index.html b/files/fr/web/api/element/scrollheight/index.html deleted file mode 100644 index 80bddbcd99..0000000000 --- a/files/fr/web/api/element/scrollheight/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Element.scrollHeight -slug: Web/API/Element/scrollHeight -translation_of: Web/API/Element/scrollHeight ---- -

{{ ApiRef() }}

- -

L'attribut en lecture seule element.scrollHeight est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur scrollHeight est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.

- -
-

Note : Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez element.getBoundingClientRect().

-
- -

Syntaxe

- -
var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
-
- -

intElemScrollHeight est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. scrollHeight est une propriété en lecture seule.

- -

Exemple

- -

Exemple

- -

Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}).

- -

La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé.

- -

HTML

- -
<form name="registration">
-  <p>
-    <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
-Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
-neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
-velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
-ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
-Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
-mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
-at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
-dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
-luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
-sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
-turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
-Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
-ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
-platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
-consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
-a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
-pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
-ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
-interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
-laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
-nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
-    </textarea>
-  </p>
-  <p>
-    <input type="checkbox" id="agree" name="accept" />
-    <label for="agree">I agree</label>
-    <input type="submit" id="nextstep" value="Next" />
-  </p>
-</form>
- -

CSS

- -
#notice {
-  display: inline-block;
-  margin-bottom: 12px;
-  border-radius: 5px;
-  width: 600px;
-  padding: 5px;
-  border: 2px #7FDF55 solid;
-}
-
-#rules {
-  width: 600px;
-  height: 130px;
-  padding: 5px;
-  border: #2A9F00 solid 2px;
-  border-radius: 5px;
-}
- -

JavaScript

- -
function checkReading () {
-  if (checkReading.read) {
-    return;
-  }
-  checkReading.read = this.scrollHeight - Math.round(this.scrollTop) === this.clientHeight;
-  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
-  checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
-}
-
-onload = function () {
-  var oToBeRead = document.getElementById("rules");
-  checkReading.noticeBox = document.createElement("span");
-  document.registration.accept.checked = false;
-  checkReading.noticeBox.id = "notice";
-  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
-  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
-  oToBeRead.onscroll = checkReading;
-  checkReading.call(oToBeRead);
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemple', '640', '400')}}

- -

Problèmes et solutions

- -

Déterminer si un élément a complètement été défilé

- -

L'expression suivante renvoie true si l'élément est à la fin du défilement, false si ça ne l'est pas.

- -
element.scrollHeight - element.scrollTop === element.clientHeight
- -

Associée à l'événement element.onscroll, l'expression peut être utile pour déterminer si un utilisateur a lu un texte ou non (voir aussi les propriétés element.scrollTop et element.clientHeight. Par exemple :

- -
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>MDN Example</title>
-<script type="text/javascript">
-function checkReading () {
-  if (checkReading.read) { return; }
-  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
-  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
-  checkReading.noticeBox.innerHTML = checkReading.read ?
-    "Merci." :
-    "Veuillez faire défiler la page et lire le texte qui suit.";
-}
-
-onload = function () {
-  var oToBeRead = document.getElementById("rules");
-  checkReading.noticeBox = document.createElement("span");
-  document.registration.accept.checked = false;
-  checkReading.noticeBox.id = "notice";
-  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
-  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
-  oToBeRead.onscroll = checkReading;
-  checkReading.call(oToBeRead);
-}
- -

Voir l'exemple en action

- -

Spécification

- -

scrollHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.

- -

Compatibilité des navigateurs

- - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurVersion
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | Webkit4.0 | 4.0 | ?
- -

Dans les versions inférieures à Firefox 21 : quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété scrollHeight est égale à sa propriété clientHeight. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS {{ cssxref("overflow") }} de l'élément a pour valeur visible.

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrollheight/index.md b/files/fr/web/api/element/scrollheight/index.md new file mode 100644 index 0000000000..80bddbcd99 --- /dev/null +++ b/files/fr/web/api/element/scrollheight/index.md @@ -0,0 +1,188 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +

{{ ApiRef() }}

+ +

L'attribut en lecture seule element.scrollHeight est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur scrollHeight est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.

+ +
+

Note : Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez element.getBoundingClientRect().

+
+ +

Syntaxe

+ +
var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
+
+ +

intElemScrollHeight est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. scrollHeight est une propriété en lecture seule.

+ +

Exemple

+ +

Exemple

+ +

Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}).

+ +

La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé.

+ +

HTML

+ +
<form name="registration">
+  <p>
+    <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
+neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
+velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
+ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
+Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
+mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
+at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
+dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
+luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
+sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
+turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
+Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
+ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
+platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
+consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
+a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
+pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
+ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
+interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
+laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
+nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
+    </textarea>
+  </p>
+  <p>
+    <input type="checkbox" id="agree" name="accept" />
+    <label for="agree">I agree</label>
+    <input type="submit" id="nextstep" value="Next" />
+  </p>
+</form>
+ +

CSS

+ +
#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+ +

JavaScript

+ +
function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - Math.round(this.scrollTop) === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple', '640', '400')}}

+ +

Problèmes et solutions

+ +

Déterminer si un élément a complètement été défilé

+ +

L'expression suivante renvoie true si l'élément est à la fin du défilement, false si ça ne l'est pas.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

Associée à l'événement element.onscroll, l'expression peut être utile pour déterminer si un utilisateur a lu un texte ou non (voir aussi les propriétés element.scrollTop et element.clientHeight. Par exemple :

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Merci." :
+    "Veuillez faire défiler la page et lire le texte qui suit.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+ +

Voir l'exemple en action

+ +

Spécification

+ +

scrollHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.

+ +

Compatibilité des navigateurs

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | Webkit4.0 | 4.0 | ?
+ +

Dans les versions inférieures à Firefox 21 : quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété scrollHeight est égale à sa propriété clientHeight. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS {{ cssxref("overflow") }} de l'élément a pour valeur visible.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollintoview/index.html b/files/fr/web/api/element/scrollintoview/index.html deleted file mode 100644 index 3dfbb5504a..0000000000 --- a/files/fr/web/api/element/scrollintoview/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: element.scrollIntoView -slug: Web/API/Element/scrollIntoView -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/scrollIntoView ---- -
{{ APIRef("DOM")}}{{SeeCompatTable}}
- -

La méthode Element.scrollIntoView() fait défiler la page de manière à rendre l'élément visible.

- -

Syntaxe

- -
element.scrollIntoView();
-element.scrollIntoView(alignToTop); // Paramètre booléen
-element.scrollIntoView(scrollIntoViewOptions); // Paramètre d'objet
-
- -

Paramètres

- -
-
alignToTop {{ optional_inline() }}
-

est une valeur {{jsxref("Boolean")}} optionnelle qui :

-
    -
  • si elle vaut true (vrai), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "start", inline: "nearest"}. C'est la valeur par défaut.
    • -
  • Si elle vaut false (faux), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "end", inline: "nearest"}.
    • -
-
-
scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
-
Est un objet qui a les propriétés suivantes :
-
behavior {{optional_inline}}
-
Définit l'animation de transition qui peut être "auto", "instant" ou "smooth". Par défaut : "auto".
-
block {{optional_inline}}
-
L'une des options  "start", "center", "end" ou"nearest". Par défaut : "center".
-
inline {{optional_inline}}
-
L'une des options "start", "center", "end" ou "nearest". Par défaut : "nearest".
-
- -

Exemple

- -
var element = document.getElementById("box");
-
-element.scrollIntoView();
-element.scrollIntoView(false);
-element.scrollIntoView({block: "end"});
-element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
-
- -

Notes

- -

L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.scrollIntoView")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrollintoview/index.md b/files/fr/web/api/element/scrollintoview/index.md new file mode 100644 index 0000000000..3dfbb5504a --- /dev/null +++ b/files/fr/web/api/element/scrollintoview/index.md @@ -0,0 +1,81 @@ +--- +title: element.scrollIntoView +slug: Web/API/Element/scrollIntoView +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/scrollIntoView +--- +
{{ APIRef("DOM")}}{{SeeCompatTable}}
+ +

La méthode Element.scrollIntoView() fait défiler la page de manière à rendre l'élément visible.

+ +

Syntaxe

+ +
element.scrollIntoView();
+element.scrollIntoView(alignToTop); // Paramètre booléen
+element.scrollIntoView(scrollIntoViewOptions); // Paramètre d'objet
+
+ +

Paramètres

+ +
+
alignToTop {{ optional_inline() }}
+

est une valeur {{jsxref("Boolean")}} optionnelle qui :

+
    +
  • si elle vaut true (vrai), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "start", inline: "nearest"}. C'est la valeur par défaut.
    • +
  • Si elle vaut false (faux), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à scrollIntoViewOptions: {block: "end", inline: "nearest"}.
    • +
+
+
scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
+
Est un objet qui a les propriétés suivantes :
+
behavior {{optional_inline}}
+
Définit l'animation de transition qui peut être "auto", "instant" ou "smooth". Par défaut : "auto".
+
block {{optional_inline}}
+
L'une des options  "start", "center", "end" ou"nearest". Par défaut : "center".
+
inline {{optional_inline}}
+
L'une des options "start", "center", "end" ou "nearest". Par défaut : "nearest".
+
+ +

Exemple

+ +
var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+
+ +

Notes

+ +

L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.scrollIntoView")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.html b/files/fr/web/api/element/scrollintoviewifneeded/index.html deleted file mode 100644 index c03e499120..0000000000 --- a/files/fr/web/api/element/scrollintoviewifneeded/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Element.scrollIntoViewIfNeeded() -slug: Web/API/Element/scrollIntoViewIfNeeded -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/scrollIntoViewIfNeeded ---- -
{{APIRef("DOM")}}{{Non-standard_header}}
- -

La méthode Element.scrollIntoViewIfNeeded() fait défiler l'élément en cours dans la zone visible de la fenêtre du navigateur s'il n'y est pas déjà. Si l'élément est déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu. Cette méthode est une variante propriétaire de la méthode standard Element.scrollIntoView().

- -

Syntaxe

- -

À faire.

- -

Paramètres

- -
-
opt_center
-
Est une valeur {{jsxref("Boolean")}} facultative avec la valeur true par défaut : -
    -
  • Si true (vrai), l'élément sera aligné sur le centre de la zone visible de l'ancêtre défilable.
    • -
  • Si false (faux), l'élément sera aligné sur le bord le plus proche de la zone visible de l'ancêtre défilable. Selon le bord de la zone visible le plus proche de l'élément, soit le haut de l'élément sera aligné sur le bord supérieur de la zone visible, soit le bord inférieur de l'élément sera aligné sur le bord inférieur de la zone visible .
    • -
-
-
- -

Exemple

- -

À faire

- -

Spécifications

- -

Ne fait partie d'aucune spécification. C'est une méthode propriétaire propre à WebKit.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.scrollIntoViewIfNeeded")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.md b/files/fr/web/api/element/scrollintoviewifneeded/index.md new file mode 100644 index 0000000000..c03e499120 --- /dev/null +++ b/files/fr/web/api/element/scrollintoviewifneeded/index.md @@ -0,0 +1,47 @@ +--- +title: Element.scrollIntoViewIfNeeded() +slug: Web/API/Element/scrollIntoViewIfNeeded +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/scrollIntoViewIfNeeded +--- +
{{APIRef("DOM")}}{{Non-standard_header}}
+ +

La méthode Element.scrollIntoViewIfNeeded() fait défiler l'élément en cours dans la zone visible de la fenêtre du navigateur s'il n'y est pas déjà. Si l'élément est déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu. Cette méthode est une variante propriétaire de la méthode standard Element.scrollIntoView().

+ +

Syntaxe

+ +

À faire.

+ +

Paramètres

+ +
+
opt_center
+
Est une valeur {{jsxref("Boolean")}} facultative avec la valeur true par défaut : +
    +
  • Si true (vrai), l'élément sera aligné sur le centre de la zone visible de l'ancêtre défilable.
    • +
  • Si false (faux), l'élément sera aligné sur le bord le plus proche de la zone visible de l'ancêtre défilable. Selon le bord de la zone visible le plus proche de l'élément, soit le haut de l'élément sera aligné sur le bord supérieur de la zone visible, soit le bord inférieur de l'élément sera aligné sur le bord inférieur de la zone visible .
    • +
+
+
+ +

Exemple

+ +

À faire

+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. C'est une méthode propriétaire propre à WebKit.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.scrollIntoViewIfNeeded")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollleft/index.html b/files/fr/web/api/element/scrollleft/index.html deleted file mode 100644 index 1d408aae3c..0000000000 --- a/files/fr/web/api/element/scrollleft/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: element.scrollLeft -slug: Web/API/Element/scrollLeft -tags: - - DOM - - DOM_0 -translation_of: Web/API/Element/scrollLeft ---- -

{{ ApiRef() }}

- -

Résumé

- -

Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.

- -

Syntaxe

- -
// Obtient le nombre de pixels défilés
-var sLeft = element.scrollLeft;
-
- -

sLeft est un entier représentant le nombre de pixels dont element a été défilé vers la gauche.

- -
// Définit le nombre de pixels défilés
-element.scrollLeft = 10;
-
- -

scrollLeft peut être n'importe quelle valeur entière, cependant :

- - - -

Exemple

- -
<script type="text/javascript">
-
-function doScrollLeft(el, p)
-{
-  el.scrollLeft = p;
-}
-
-</script>
-
-<div id="aDiv"
-     style="width: 100px; height: 200px; overflow: auto;"
->
-<script type="text/javascript">
-for (var i=0; i<100; ++i){
-  document.write(i + '-FooBar-FooBar-FooBar<br>');
-}
-</script>
-</div>
-<br>
-<input type="button" value="Défile de 50 pixels"
-       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
->
-
- -

Spécification

- -

{{ DOM0() }}

- -

Références

- - \ No newline at end of file diff --git a/files/fr/web/api/element/scrollleft/index.md b/files/fr/web/api/element/scrollleft/index.md new file mode 100644 index 0000000000..1d408aae3c --- /dev/null +++ b/files/fr/web/api/element/scrollleft/index.md @@ -0,0 +1,69 @@ +--- +title: element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - DOM + - DOM_0 +translation_of: Web/API/Element/scrollLeft +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.

+ +

Syntaxe

+ +
// Obtient le nombre de pixels défilés
+var sLeft = element.scrollLeft;
+
+ +

sLeft est un entier représentant le nombre de pixels dont element a été défilé vers la gauche.

+ +
// Définit le nombre de pixels défilés
+element.scrollLeft = 10;
+
+ +

scrollLeft peut être n'importe quelle valeur entière, cependant :

+ + + +

Exemple

+ +
<script type="text/javascript">
+
+function doScrollLeft(el, p)
+{
+  el.scrollLeft = p;
+}
+
+</script>
+
+<div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+>
+<script type="text/javascript">
+for (var i=0; i<100; ++i){
+  document.write(i + '-FooBar-FooBar-FooBar<br>');
+}
+</script>
+</div>
+<br>
+<input type="button" value="Défile de 50 pixels"
+       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
+>
+
+ +

Spécification

+ +

{{ DOM0() }}

+ +

Références

+ + \ No newline at end of file diff --git a/files/fr/web/api/element/scrollleftmax/index.html b/files/fr/web/api/element/scrollleftmax/index.html deleted file mode 100644 index cbf25a3745..0000000000 --- a/files/fr/web/api/element/scrollleftmax/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Element.scrollLeftMax -slug: Web/API/Element/scrollLeftMax -translation_of: Web/API/Element/scrollLeftMax ---- -

{{APIRef("DOM")}}{{Non-standard_header}}

- -

La propriété non modifiable  Element.scrollLeftMax renvoie un  {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément.

- -

Syntaxe

- -
var pxl = elt.scrollLeftMax;
- -

Spécifications

- -

Cette propriété ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.scrollLeftMax")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrollleftmax/index.md b/files/fr/web/api/element/scrollleftmax/index.md new file mode 100644 index 0000000000..cbf25a3745 --- /dev/null +++ b/files/fr/web/api/element/scrollleftmax/index.md @@ -0,0 +1,26 @@ +--- +title: Element.scrollLeftMax +slug: Web/API/Element/scrollLeftMax +translation_of: Web/API/Element/scrollLeftMax +--- +

{{APIRef("DOM")}}{{Non-standard_header}}

+ +

La propriété non modifiable  Element.scrollLeftMax renvoie un  {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément.

+ +

Syntaxe

+ +
var pxl = elt.scrollLeftMax;
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.scrollLeftMax")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollto/index.html b/files/fr/web/api/element/scrollto/index.html deleted file mode 100644 index ba30e5fecb..0000000000 --- a/files/fr/web/api/element/scrollto/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Element.scrollTo() -slug: Web/API/Element/scrollTo -tags: - - API - - Element - - Méthode - - Reference - - scrollTo -translation_of: Web/API/Element/scrollTo ---- -
{{ APIRef }}
- -

La méthode scrollTo() de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.

- -

Syntaxe

- -
element.scrollTo(x-coord, y-coord)
-element.scrollTo(options)
-
- -

Paramètres

- - - -

- ou -

- - - -

Exemples

- -

En utilisant des coordonnées :

- -
element.scrollTo(0, 1000);
-
- -

Ou en utilisant options :

- -
element.scrollTo({
-  top: 100,
-  left: 100,
-  behavior: 'smooth'
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}{{ Spec2('CSSOM View') }}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.scrollTo")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrollto/index.md b/files/fr/web/api/element/scrollto/index.md new file mode 100644 index 0000000000..ba30e5fecb --- /dev/null +++ b/files/fr/web/api/element/scrollto/index.md @@ -0,0 +1,78 @@ +--- +title: Element.scrollTo() +slug: Web/API/Element/scrollTo +tags: + - API + - Element + - Méthode + - Reference + - scrollTo +translation_of: Web/API/Element/scrollTo +--- +
{{ APIRef }}
+ +

La méthode scrollTo() de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.

+ +

Syntaxe

+ +
element.scrollTo(x-coord, y-coord)
+element.scrollTo(options)
+
+ +

Paramètres

+ + + +

- ou -

+ + + +

Exemples

+ +

En utilisant des coordonnées :

+ +
element.scrollTo(0, 1000);
+
+ +

Ou en utilisant options :

+ +
element.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}{{ Spec2('CSSOM View') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.scrollTo")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrolltop/index.html b/files/fr/web/api/element/scrolltop/index.html deleted file mode 100644 index 4b3d0ef24b..0000000000 --- a/files/fr/web/api/element/scrolltop/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Element.scrollTop -slug: Web/API/Element/scrollTop -tags: - - API - - CSSOM View - - Property - - Reference -translation_of: Web/API/Element/scrollTop ---- -
{{APIRef("DOM")}}
- -

La propriété Element.scrollTop permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.

- -

La valeur scrollTop d'un élément correspond à la distance entre le haut de l'élément et la partie la plus haute de son contenu visible. Lorsque le contenu d'un élément n'entraîne pas la création d'une barre de défilement verticale, la valeur de scrollTop est 0.

- -

Lorsque scrollTop est utilisé sur l'élément racine (c'est-à-dire l'élément <html>), c'est la valeur de scrollY pour la fenêtre qui est renvoyée. Il s'agit d'un cas aux limites pour scrollTop.

- -
-

Attention : Pour les systèmes qui utilisent un affichage mis à l'échelle (display scaling), scrollTop peut fournir une valeur décimale.

-
- -

Syntaxe

- -
// Obtenir le nombre de pixels qui ont défilé.
-var intElemScrollTop = someElement.scrollTop;
-
- -

Après avoir exécuté le code ci-dessus, intElemScrollTop sera un entier correspondant au nombre de pixels pour lesquels le contenu de l'élément a défilé vers le haut.

- -
// Définir le nombre de pixels à faire défiler.
-element.scrollTop = intValue;
-
- -

scrollTop peut être défini avec n'importe quelle valeur entière. Cependant :

- - - -

Exemple

- -

HTML

- -
<div id="container">
-  <div id="content">Utilisez le bouton :) Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!!</div>
-</div>
-
-<button id="slide" type="button">Défilez vers le bas</button>
- -

CSS

- -
#container {
-  height: 100px;
-  border: 1px solid #ccc;
-  overflow-y: scroll;
-}
-
-#content {
-  background-color: #ccc;
-}
- -

JavaScript

- -
const button = document.getElementById('slide');
-
-button.onclick = function () {
-  document.getElementById('container').scrollTop += 20;
-};
- -

Résultat

- -

{{EmbedLiveSample("Example")}}

- - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.scrollTop")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/scrolltop/index.md b/files/fr/web/api/element/scrolltop/index.md new file mode 100644 index 0000000000..4b3d0ef24b --- /dev/null +++ b/files/fr/web/api/element/scrolltop/index.md @@ -0,0 +1,106 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - CSSOM View + - Property + - Reference +translation_of: Web/API/Element/scrollTop +--- +
{{APIRef("DOM")}}
+ +

La propriété Element.scrollTop permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.

+ +

La valeur scrollTop d'un élément correspond à la distance entre le haut de l'élément et la partie la plus haute de son contenu visible. Lorsque le contenu d'un élément n'entraîne pas la création d'une barre de défilement verticale, la valeur de scrollTop est 0.

+ +

Lorsque scrollTop est utilisé sur l'élément racine (c'est-à-dire l'élément <html>), c'est la valeur de scrollY pour la fenêtre qui est renvoyée. Il s'agit d'un cas aux limites pour scrollTop.

+ +
+

Attention : Pour les systèmes qui utilisent un affichage mis à l'échelle (display scaling), scrollTop peut fournir une valeur décimale.

+
+ +

Syntaxe

+ +
// Obtenir le nombre de pixels qui ont défilé.
+var intElemScrollTop = someElement.scrollTop;
+
+ +

Après avoir exécuté le code ci-dessus, intElemScrollTop sera un entier correspondant au nombre de pixels pour lesquels le contenu de l'élément a défilé vers le haut.

+ +
// Définir le nombre de pixels à faire défiler.
+element.scrollTop = intValue;
+
+ +

scrollTop peut être défini avec n'importe quelle valeur entière. Cependant :

+ + + +

Exemple

+ +

HTML

+ +
<div id="container">
+  <div id="content">Utilisez le bouton :) Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!!</div>
+</div>
+
+<button id="slide" type="button">Défilez vers le bas</button>
+ +

CSS

+ +
#container {
+  height: 100px;
+  border: 1px solid #ccc;
+  overflow-y: scroll;
+}
+
+#content {
+  background-color: #ccc;
+}
+ +

JavaScript

+ +
const button = document.getElementById('slide');
+
+button.onclick = function () {
+  document.getElementById('container').scrollTop += 20;
+};
+ +

Résultat

+ +

{{EmbedLiveSample("Example")}}

+ + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.scrollTop")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/scrollwidth/index.html b/files/fr/web/api/element/scrollwidth/index.html deleted file mode 100644 index 9297b2f417..0000000000 --- a/files/fr/web/api/element/scrollwidth/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: element.scrollWidth -slug: Web/API/Element/scrollWidth -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Element/scrollWidth ---- -

{{ ApiRef() }}

-

Résumé

-

scrollWidth est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.

-

Syntaxe

-
var xScrollWidth = element.scrollWidth;
-
-

xScrollWidth est la largeur du contenu d'element en pixels.

-

Exemple

-
<div id="aDiv"
-     style="width: 100px; height: 200px; overflow: auto;"
->-FooBar-FooBar-FooBar</div>
-<br>
-<input type="button" value="Show scrollWidth"
-       onclick="alert(document.getElementById('aDiv').scrollWidth);">
-
-

Spécification

-

Il n'y a pas de spécification du W3C pour scrollWidth.

-

Un brouillon de l'éditeur existe cependant : Cascading Style Sheets Object Model (CSSOM)

-

Références

- \ No newline at end of file diff --git a/files/fr/web/api/element/scrollwidth/index.md b/files/fr/web/api/element/scrollwidth/index.md new file mode 100644 index 0000000000..9297b2f417 --- /dev/null +++ b/files/fr/web/api/element/scrollwidth/index.md @@ -0,0 +1,32 @@ +--- +title: element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Element/scrollWidth +--- +

{{ ApiRef() }}

+

Résumé

+

scrollWidth est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.

+

Syntaxe

+
var xScrollWidth = element.scrollWidth;
+
+

xScrollWidth est la largeur du contenu d'element en pixels.

+

Exemple

+
<div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+>-FooBar-FooBar-FooBar</div>
+<br>
+<input type="button" value="Show scrollWidth"
+       onclick="alert(document.getElementById('aDiv').scrollWidth);">
+
+

Spécification

+

Il n'y a pas de spécification du W3C pour scrollWidth.

+

Un brouillon de l'éditeur existe cependant : Cascading Style Sheets Object Model (CSSOM)

+

Références

+ \ No newline at end of file diff --git a/files/fr/web/api/element/select_event/index.html b/files/fr/web/api/element/select_event/index.html deleted file mode 100644 index f0be06d15b..0000000000 --- a/files/fr/web/api/element/select_event/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: select -slug: Web/API/Element/select_event -translation_of: Web/API/Element/select_event ---- -

L'évènement select est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en HTML5, les évènements select ne peuvent être envoyés que sur des éléments input de formulaire et textarea.

- -

Info générale

- -
-
Spécification
-
DOM L3
-
Interface
-
UIEvent si généré depuis une interface utilisateur, Event sinon.
-
Remonte
-
Oui
-
Annulable
-
Non
-
Cible
-
Élément
-
Action par Défault
-
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.
- -

Exemple

- -
<input id="test" type="text" value="Sélectionnez-moi !" />
-<script>
-  var elem = document.getElementById('test');
-  elem.addEventListener('select', function() {
-    alert('La sélection a changé !');
-  }, false);
-</script>
diff --git a/files/fr/web/api/element/select_event/index.md b/files/fr/web/api/element/select_event/index.md new file mode 100644 index 0000000000..f0be06d15b --- /dev/null +++ b/files/fr/web/api/element/select_event/index.md @@ -0,0 +1,77 @@ +--- +title: select +slug: Web/API/Element/select_event +translation_of: Web/API/Element/select_event +--- +

L'évènement select est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en HTML5, les évènements select ne peuvent être envoyés que sur des éléments input de formulaire et textarea.

+ +

Info générale

+ +
+
Spécification
+
DOM L3
+
Interface
+
UIEvent si généré depuis une interface utilisateur, Event sinon.
+
Remonte
+
Oui
+
Annulable
+
Non
+
Cible
+
Élément
+
Action par Défault
+
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.
+ +

Exemple

+ +
<input id="test" type="text" value="Sélectionnez-moi !" />
+<script>
+  var elem = document.getElementById('test');
+  elem.addEventListener('select', function() {
+    alert('La sélection a changé !');
+  }, false);
+</script>
diff --git a/files/fr/web/api/element/setattribute/index.html b/files/fr/web/api/element/setattribute/index.html deleted file mode 100644 index 2633e74e6b..0000000000 --- a/files/fr/web/api/element/setattribute/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Element.setAttribute() -slug: Web/API/Element/setAttribute -tags: - - API - - Attributs - - DOM - - Element - - Méthode -translation_of: Web/API/Element/setAttribute ---- -

{{APIRef("DOM")}}

- -

Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.

- -

Pour obtenir la valeur actuelle d'un attribut, utilisez {{domxref("Element.getAttribute", "getAttribute()")}} ; pour supprimer un attribut, appelez {{domxref("Element.removeAttribute", "removeAttribute()")}}.

- -

Syntaxe

- -
Element.setAttribute(name, value);
-
- -

Paramètres

- -
-
name
-
Une {{domxref("DOMString")}} (chaîne de caractères) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quand setAttribute() est appelé sur un élément HTML dans document HTML.
-
value
-
une {{domxref("DOMString")}} contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.
-
- -

Les attributs booléens sont considérés être true (vrai) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide ("") dans value (certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' {{anch("Exemple", "exemple")}} ce-dessous pour une démonstration pratique.

- -

Puisque la valeur spécifiée est convertie en chaîne, spécifier null ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme {{jsxref("null")}} , il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez {{domxref("Element.removeAttribute","removeAttribute()")}}.

- -

Valeur retournée

- -

{{jsxref("undefined")}}.

- -

Exceptions

- -
-
InvalidCharacterError
-
Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.
-
- -

Exemple

- -

Dans l'exemple suivant, setAttribute() est utilisé pour définir des attributs sur un {{HTMLElement("button")}} (bouton).

- -

HTML

- -
<button>Hello World</button>
- -

JavaScript

- -
var b = document.querySelector("button");
-
-b.setAttribute("name", "helloButton");
-b.setAttribute("disabled", "");
- -

Ceci démontre 2 choses :

- - - -

{{ EmbedLiveSample('Example', '300', '50') }}

- -

{{DOMAttributeMethods}}

- -

Spécifications

- - - -

Compatibilité des navigateurs

- -

Gecko notes

- -

L'utilisation de setAttribute() pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez Element.value à la place de Element.setAttribute().

diff --git a/files/fr/web/api/element/setattribute/index.md b/files/fr/web/api/element/setattribute/index.md new file mode 100644 index 0000000000..2633e74e6b --- /dev/null +++ b/files/fr/web/api/element/setattribute/index.md @@ -0,0 +1,84 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +tags: + - API + - Attributs + - DOM + - Element + - Méthode +translation_of: Web/API/Element/setAttribute +--- +

{{APIRef("DOM")}}

+ +

Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.

+ +

Pour obtenir la valeur actuelle d'un attribut, utilisez {{domxref("Element.getAttribute", "getAttribute()")}} ; pour supprimer un attribut, appelez {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Syntaxe

+ +
Element.setAttribute(name, value);
+
+ +

Paramètres

+ +
+
name
+
Une {{domxref("DOMString")}} (chaîne de caractères) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quand setAttribute() est appelé sur un élément HTML dans document HTML.
+
value
+
une {{domxref("DOMString")}} contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.
+
+ +

Les attributs booléens sont considérés être true (vrai) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide ("") dans value (certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' {{anch("Exemple", "exemple")}} ce-dessous pour une démonstration pratique.

+ +

Puisque la valeur spécifiée est convertie en chaîne, spécifier null ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme {{jsxref("null")}} , il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez {{domxref("Element.removeAttribute","removeAttribute()")}}.

+ +

Valeur retournée

+ +

{{jsxref("undefined")}}.

+ +

Exceptions

+ +
+
InvalidCharacterError
+
Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.
+
+ +

Exemple

+ +

Dans l'exemple suivant, setAttribute() est utilisé pour définir des attributs sur un {{HTMLElement("button")}} (bouton).

+ +

HTML

+ +
<button>Hello World</button>
+ +

JavaScript

+ +
var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+ +

Ceci démontre 2 choses :

+ + + +

{{ EmbedLiveSample('Example', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Spécifications

+ + + +

Compatibilité des navigateurs

+ +

Gecko notes

+ +

L'utilisation de setAttribute() pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez Element.value à la place de Element.setAttribute().

diff --git a/files/fr/web/api/element/setattributenode/index.html b/files/fr/web/api/element/setattributenode/index.html deleted file mode 100644 index 8f77b05d9a..0000000000 --- a/files/fr/web/api/element/setattributenode/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: element.setAttributeNode -slug: Web/API/Element/setAttributeNode -tags: - - API - - DOM - - Element - - Méthode - - Reference -translation_of: Web/API/Element/setAttributeNode ---- -

{{ APIRef("DOM") }}

- -

setAttributeNode() ajoute un nouveau nœud Attr à l'élément courant.

- -

Syntaxe

- -
var replacedAttr = element.setAttributeNode(attribute);
- - - -

Exemple

- -
// <div id="one" align="left">one</div>
-// <div id="two">two</div>
-var d1 = document.getElementById("one");
-var d2 = document.getElementById("two");
-var a = d1.getAttributeNode("align");
-d2.setAttributeNode(a);
-alert(d2.attributes[1].value)
-// retourne: `left'
-
- -

Notes

- -

Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.

- -

Cette méthode est peu utilisée. On lui préfère souvent  {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément.

- -

{{DOMAttributeMethods()}}

- -

Spécification

- - diff --git a/files/fr/web/api/element/setattributenode/index.md b/files/fr/web/api/element/setattributenode/index.md new file mode 100644 index 0000000000..8f77b05d9a --- /dev/null +++ b/files/fr/web/api/element/setattributenode/index.md @@ -0,0 +1,49 @@ +--- +title: element.setAttributeNode +slug: Web/API/Element/setAttributeNode +tags: + - API + - DOM + - Element + - Méthode + - Reference +translation_of: Web/API/Element/setAttributeNode +--- +

{{ APIRef("DOM") }}

+ +

setAttributeNode() ajoute un nouveau nœud Attr à l'élément courant.

+ +

Syntaxe

+ +
var replacedAttr = element.setAttributeNode(attribute);
+ + + +

Exemple

+ +
// <div id="one" align="left">one</div>
+// <div id="two">two</div>
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNode("align");
+d2.setAttributeNode(a);
+alert(d2.attributes[1].value)
+// retourne: `left'
+
+ +

Notes

+ +

Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.

+ +

Cette méthode est peu utilisée. On lui préfère souvent  {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément.

+ +

{{DOMAttributeMethods()}}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/setattributenodens/index.html b/files/fr/web/api/element/setattributenodens/index.html deleted file mode 100644 index b2abe3c907..0000000000 --- a/files/fr/web/api/element/setattributenodens/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: element.setAttributeNodeNS -slug: Web/API/Element/setAttributeNodeNS -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/setAttributeNodeNS ---- -

{{ APIRef("DOM") }}

- -

setAttributeNodeNS ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.

- -

Syntaxe

- -
replacedAttr = element.setAttributeNodeNS(attributeNode)
-
- -
-
replacedAttr
-
Le nœud attribut remplacé, si applicable, renvoyé par cette fonction.
-
attributeNode
-
Un nœud Attr.
-
- -

Exemple

- -
// <div id="one" special-align="utterleft">one</div>
-// <div id="two">two</div>
-
-var myns = "http://www.mozilla.org/ns/specialspace";
-var d1 = document.getElementById("one");
-var d2 = document.getElementById("two");
-var a = d1.getAttributeNodeNS(myns, "special-align");
-d2.setAttributeNodeNS(a);
-
-alert(d2.attributes[1].value) // renvoie : "utterleft"
-
- -

Notes

- -

Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.

- -

Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'Attr soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).

- -

{{ DOMAttributeMethods() }}

- -

Spécification

- - diff --git a/files/fr/web/api/element/setattributenodens/index.md b/files/fr/web/api/element/setattributenodens/index.md new file mode 100644 index 0000000000..b2abe3c907 --- /dev/null +++ b/files/fr/web/api/element/setattributenodens/index.md @@ -0,0 +1,53 @@ +--- +title: element.setAttributeNodeNS +slug: Web/API/Element/setAttributeNodeNS +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/setAttributeNodeNS +--- +

{{ APIRef("DOM") }}

+ +

setAttributeNodeNS ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.

+ +

Syntaxe

+ +
replacedAttr = element.setAttributeNodeNS(attributeNode)
+
+ +
+
replacedAttr
+
Le nœud attribut remplacé, si applicable, renvoyé par cette fonction.
+
attributeNode
+
Un nœud Attr.
+
+ +

Exemple

+ +
// <div id="one" special-align="utterleft">one</div>
+// <div id="two">two</div>
+
+var myns = "http://www.mozilla.org/ns/specialspace";
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNodeNS(myns, "special-align");
+d2.setAttributeNodeNS(a);
+
+alert(d2.attributes[1].value) // renvoie : "utterleft"
+
+ +

Notes

+ +

Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.

+ +

Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'Attr soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).

+ +

{{ DOMAttributeMethods() }}

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/setattributens/index.html b/files/fr/web/api/element/setattributens/index.html deleted file mode 100644 index 1274563722..0000000000 --- a/files/fr/web/api/element/setattributens/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: element.setAttributeNS -slug: Web/API/Element/setAttributeNS -tags: - - API - - DOM - - Element - - Méthodes -translation_of: Web/API/Element/setAttributeNS ---- -

{{ APIRef("DOM") }}

- -

setAttributeNS ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.

- -

Syntaxe

- -
element.setAttributeNS(
-namespace,
-name,
-value)
- - - -

Exemple

- -
var d = document.getElementById("d1");
-d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
-
- -

Notes

- -

{{ DOMAttributeMethods() }}

- -

setAttributeNS  est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire "namespace:localname".

- -

Spécification

- - diff --git a/files/fr/web/api/element/setattributens/index.md b/files/fr/web/api/element/setattributens/index.md new file mode 100644 index 0000000000..1274563722 --- /dev/null +++ b/files/fr/web/api/element/setattributens/index.md @@ -0,0 +1,45 @@ +--- +title: element.setAttributeNS +slug: Web/API/Element/setAttributeNS +tags: + - API + - DOM + - Element + - Méthodes +translation_of: Web/API/Element/setAttributeNS +--- +

{{ APIRef("DOM") }}

+ +

setAttributeNS ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.

+ +

Syntaxe

+ +
element.setAttributeNS(
+namespace,
+name,
+value)
+ + + +

Exemple

+ +
var d = document.getElementById("d1");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+
+ +

Notes

+ +

{{ DOMAttributeMethods() }}

+ +

setAttributeNS  est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire "namespace:localname".

+ +

Spécification

+ + diff --git a/files/fr/web/api/element/setcapture/index.html b/files/fr/web/api/element/setcapture/index.html deleted file mode 100644 index 28c60fdf20..0000000000 --- a/files/fr/web/api/element/setcapture/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Element.setCapture() -slug: Web/API/Element/setCapture -tags: - - API - - Capture - - DOM - - Elements - - Méthodes - - Souris -translation_of: Web/API/Element/setCapture ---- -

{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}

- -

Appelez cette méthode pendant la gestion d'un évènement de la souris pour recibler tous les évènements de la souris sur cet élément jusqu'à ce que le bouton de la souris soit relâché ou que soit appelée {{ domxref("document.releaseCapture()") }}.

- -

Syntaxe

- -
element.setCapture(retargetToElement);
-
- -
-
retargetToElement
-
Si la valeur est true (vrai), tous les évènements sont ciblés directement vers cet élément ; si elle est false (faux), les évènements peuvent aussi être déclenchés sur les descendants de cet élément.
-
- -

Exemple

- -

Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après un clic et un appui sur un élément.

- -
<html>
-<head>
-  <title>Mouse Capture Example</title>
-  <style type="text/css">
-    #myButton {
-      border: solid black 1px;
-      color: black;
-      padding: 2px;
-      box-shadow: black 2px 2px;
-    }
-  </style>
-
-  <script type="text/javascript">
-    function init() {
-      var btn = document.getElementById("myButton");
-      btn.addEventListener("mousedown", mouseDown, false);
-      btn.addEventListener("mouseup", mouseUp, false);
-    }
-
-    function mouseDown(e) {
-      //e.target.setCapture(); // cette méthode doit être définie
-      e.target.addEventListener("mousemove", mouseMoved, false);
-    }
-
-    function mouseUp(e) {
-      e.target.removeEventListener("mousemove", mouseMoved, false);
-    }
-
-    function mouseMoved(e) {
-      var output = document.getElementById("output");
-      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
-    }
-  </script>
-</head>
-<body onload="init()">
-  <p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p>
-  <p><a id="myButton" href="#">Test Me</a></p>
-  <div id="output">No events yet</div>
-</body>
-</html>
-
- -

Voir l'exemple sur une page

- -

Notes

- -

L'élément ne peut pas être entièrement déplacé vers le haut ou vers le bas, selon la disposition des autres éléments.

- -

Spécification

- -

Basé sur l'implémentation Internet Explorer.

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/setcapture/index.md b/files/fr/web/api/element/setcapture/index.md new file mode 100644 index 0000000000..28c60fdf20 --- /dev/null +++ b/files/fr/web/api/element/setcapture/index.md @@ -0,0 +1,87 @@ +--- +title: Element.setCapture() +slug: Web/API/Element/setCapture +tags: + - API + - Capture + - DOM + - Elements + - Méthodes + - Souris +translation_of: Web/API/Element/setCapture +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}

+ +

Appelez cette méthode pendant la gestion d'un évènement de la souris pour recibler tous les évènements de la souris sur cet élément jusqu'à ce que le bouton de la souris soit relâché ou que soit appelée {{ domxref("document.releaseCapture()") }}.

+ +

Syntaxe

+ +
element.setCapture(retargetToElement);
+
+ +
+
retargetToElement
+
Si la valeur est true (vrai), tous les évènements sont ciblés directement vers cet élément ; si elle est false (faux), les évènements peuvent aussi être déclenchés sur les descendants de cet élément.
+
+ +

Exemple

+ +

Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après un clic et un appui sur un élément.

+ +
<html>
+<head>
+  <title>Mouse Capture Example</title>
+  <style type="text/css">
+    #myButton {
+      border: solid black 1px;
+      color: black;
+      padding: 2px;
+      box-shadow: black 2px 2px;
+    }
+  </style>
+
+  <script type="text/javascript">
+    function init() {
+      var btn = document.getElementById("myButton");
+      btn.addEventListener("mousedown", mouseDown, false);
+      btn.addEventListener("mouseup", mouseUp, false);
+    }
+
+    function mouseDown(e) {
+      //e.target.setCapture(); // cette méthode doit être définie
+      e.target.addEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseUp(e) {
+      e.target.removeEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseMoved(e) {
+      var output = document.getElementById("output");
+      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
+    }
+  </script>
+</head>
+<body onload="init()">
+  <p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p>
+  <p><a id="myButton" href="#">Test Me</a></p>
+  <div id="output">No events yet</div>
+</body>
+</html>
+
+ +

Voir l'exemple sur une page

+ +

Notes

+ +

L'élément ne peut pas être entièrement déplacé vers le haut ou vers le bas, selon la disposition des autres éléments.

+ +

Spécification

+ +

Basé sur l'implémentation Internet Explorer.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/setpointercapture/index.html b/files/fr/web/api/element/setpointercapture/index.html deleted file mode 100644 index a412900e39..0000000000 --- a/files/fr/web/api/element/setpointercapture/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Element.setPointerCapture() -slug: Web/API/Element/setPointerCapture -tags: - - API - - Capture - - DOM - - Element - - Méthodes - - Pointeur -translation_of: Web/API/Element/setPointerCapture ---- -

{{APIRef("DOM")}}

- -

La Pointer capture (capture de pointeur) permet de re-cibler des événements pour un événement de pointeur particulier ({{domxref ("PointerEvent")}}) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).

- -

setPointerCapture() est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme cible de capture de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).

- -
-

Note : Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.

-
- -

Syntaxe

- -
.setPointerCapture(pointerId);
-
targetElement - -

Arguments

- -
-
pointerId
-
L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","évènement de pointeur")}}.
-
- -

Valeur de retour

- -

Cette méthode renvoie void et lance une {{domxref("DOMException")}} nommée InvalidPointerId si pointerId ne correspond à aucun des pointeurs actifs.

- -

Exemple

- -
<html>
-<script>
-function downHandler(ev) {
- var el=document.getElementById("target");
- //L'élément cible  ('target') recevra/capturera d'autres évènements
- el.setPointerCapture(ev.pointerId);
-}
-function init() {
- var el=document.getElementById("target");
- el.onpointerdown = downHandler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}{{Spec2('Pointer Events 2')}}Version non stable.
{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}{{Spec2('Pointer Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.setPointerCapture")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/setpointercapture/index.md b/files/fr/web/api/element/setpointercapture/index.md new file mode 100644 index 0000000000..a412900e39 --- /dev/null +++ b/files/fr/web/api/element/setpointercapture/index.md @@ -0,0 +1,90 @@ +--- +title: Element.setPointerCapture() +slug: Web/API/Element/setPointerCapture +tags: + - API + - Capture + - DOM + - Element + - Méthodes + - Pointeur +translation_of: Web/API/Element/setPointerCapture +--- +

{{APIRef("DOM")}}

+ +

La Pointer capture (capture de pointeur) permet de re-cibler des événements pour un événement de pointeur particulier ({{domxref ("PointerEvent")}}) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).

+ +

setPointerCapture() est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme cible de capture de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).

+ +
+

Note : Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.

+
+ +

Syntaxe

+ +
.setPointerCapture(pointerId);
+
targetElement + +

Arguments

+ +
+
pointerId
+
L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","évènement de pointeur")}}.
+
+ +

Valeur de retour

+ +

Cette méthode renvoie void et lance une {{domxref("DOMException")}} nommée InvalidPointerId si pointerId ne correspond à aucun des pointeurs actifs.

+ +

Exemple

+ +
<html>
+<script>
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ //L'élément cible  ('target') recevra/capturera d'autres évènements
+ el.setPointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerdown = downHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}{{Spec2('Pointer Events 2')}}Version non stable.
{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}{{Spec2('Pointer Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.setPointerCapture")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/element/tagname/index.html b/files/fr/web/api/element/tagname/index.html deleted file mode 100644 index 53bee23738..0000000000 --- a/files/fr/web/api/element/tagname/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: element.tagName -slug: Web/API/Element/tagName -tags: - - API - - DOM - - Element - - Nom - - Propriétés -translation_of: Web/API/Element/tagName ---- -

{{ApiRef("DOM")}}

- -

Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété tagName est "IMG" (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).

- -

Syntaxe

- -
elementName = element.tagName;
-
- -

Valeur

- -

Une chaîne indiquant le nom de l'étiquette de l'élément. Cette chaîne comporte des majuscules selon le type de document :

- - - -

Exemple

- -

Contenu HTML

- -
<span id="naissance">Lorsque je suis né…</span>
-
- -

Contenu JavaScript

- -
var span = document.getElementById("naissance");
-console.log(span.tagName);
- -

En XHTML (ou tout autre format XML), la casse d'origine sera conservée, de sorte que "span" sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules. En HTML, "SPAN" serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}{{Spec2("DOM3 Core")}}Pas de changement
{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}{{Spec2("DOM2 Core")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.tagName")}}

diff --git a/files/fr/web/api/element/tagname/index.md b/files/fr/web/api/element/tagname/index.md new file mode 100644 index 0000000000..53bee23738 --- /dev/null +++ b/files/fr/web/api/element/tagname/index.md @@ -0,0 +1,69 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - API + - DOM + - Element + - Nom + - Propriétés +translation_of: Web/API/Element/tagName +--- +

{{ApiRef("DOM")}}

+ +

Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété tagName est "IMG" (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).

+ +

Syntaxe

+ +
elementName = element.tagName;
+
+ +

Valeur

+ +

Une chaîne indiquant le nom de l'étiquette de l'élément. Cette chaîne comporte des majuscules selon le type de document :

+ + + +

Exemple

+ +

Contenu HTML

+ +
<span id="naissance">Lorsque je suis né…</span>
+
+ +

Contenu JavaScript

+ +
var span = document.getElementById("naissance");
+console.log(span.tagName);
+ +

En XHTML (ou tout autre format XML), la casse d'origine sera conservée, de sorte que "span" sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules. En HTML, "SPAN" serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}{{Spec2("DOM3 Core")}}Pas de changement
{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}{{Spec2("DOM2 Core")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.tagName")}}

diff --git a/files/fr/web/api/encoding_api/index.html b/files/fr/web/api/encoding_api/index.html deleted file mode 100644 index c6e927c6ad..0000000000 --- a/files/fr/web/api/encoding_api/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Encoding API -slug: Web/API/Encoding_API -tags: - - API - - Encoding - - Overview - - Reference -translation_of: Web/API/Encoding_API ---- -

{{DefaultAPISidebar("Encoding API")}}{{SeeCompatTable}}

- -

L'API Encoding fournit un mecanisme de traitement de texte dans plusieurs {{Glossary("character encoding", "character encodings")}}, incluant les encodings non-{{Glossary("UTF-8")}}.

- -

L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}.

- -

Interfaces

- - - -

Tutoriels & Outils

- - - -

Caracteristiques

- - - - - - - - - - - - - - -
CaracteristiquesStatutCommentaire
{{SpecName("Encoding")}}{{Spec2("Encoding")}}Définition initiale.
- -

Compatibilité

- - - -

TextDecoder

- -

{{Compat("api.TextDecoder")}}

- -

TextEncoder

- -

{{Compat("api.TextEncoder")}}

diff --git a/files/fr/web/api/encoding_api/index.md b/files/fr/web/api/encoding_api/index.md new file mode 100644 index 0000000000..c6e927c6ad --- /dev/null +++ b/files/fr/web/api/encoding_api/index.md @@ -0,0 +1,60 @@ +--- +title: Encoding API +slug: Web/API/Encoding_API +tags: + - API + - Encoding + - Overview + - Reference +translation_of: Web/API/Encoding_API +--- +

{{DefaultAPISidebar("Encoding API")}}{{SeeCompatTable}}

+ +

L'API Encoding fournit un mecanisme de traitement de texte dans plusieurs {{Glossary("character encoding", "character encodings")}}, incluant les encodings non-{{Glossary("UTF-8")}}.

+ +

L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}.

+ +

Interfaces

+ + + +

Tutoriels & Outils

+ + + +

Caracteristiques

+ + + + + + + + + + + + + + +
CaracteristiquesStatutCommentaire
{{SpecName("Encoding")}}{{Spec2("Encoding")}}Définition initiale.
+ +

Compatibilité

+ + + +

TextDecoder

+ +

{{Compat("api.TextDecoder")}}

+ +

TextEncoder

+ +

{{Compat("api.TextEncoder")}}

diff --git a/files/fr/web/api/errorevent/index.html b/files/fr/web/api/errorevent/index.html deleted file mode 100644 index 9d265d8ab4..0000000000 --- a/files/fr/web/api/errorevent/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: ErrorEvent -slug: Web/API/ErrorEvent -tags: - - API - - Evènement - - Worker API -translation_of: Web/API/ErrorEvent ---- -

{{APIRef("HTML DOM")}}

- -

L'interface ErrorEvent représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers.

- -

Propriétés

- -

Hérite également des propriétés de son parent {{domxref("Event")}}.

- -
-
{{domxref("ErrorEvent.message")}} {{readonlyInline}}
-
Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème.
-
{{domxref("ErrorEvent.filename")}} {{readonlyInline}}
-
Un {{domxref("DOMString")}} contenant le nom du fichier de script dans lequel l'erreur est survenue.
-
{{domxref("ErrorEvent.lineno")}} {{readonlyInline}}
-
Un integer contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue.
-
{{domxref("ErrorEvent.colno")}} {{readonlyInline}}
-
Un integer contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue.
-
{{domxref("ErrorEvent.error")}} {{readonlyInline}} {{experimental_inline}}
-
Un Object JavaScript qui est concerné par l'événement.
-
- -

Constructeur

- -
-
{{domxref("ErrorEvent.ErrorEvent", "ErrorEvent()")}}
-
Crée un événement ErrorEvent avec les paramètres fournis.
-
- -

Méthodes

- -

Hérite des méthodes de son parent {{domxref("Event")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}{{ Spec2('HTML WHATWG') }}Ajout de la propriété error et du 5ème paramètre du constructeur.
{{ SpecName('HTML5 W3C', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}{{ Spec2('HTML5 W3C') }}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.ErrorEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/errorevent/index.md b/files/fr/web/api/errorevent/index.md new file mode 100644 index 0000000000..9d265d8ab4 --- /dev/null +++ b/files/fr/web/api/errorevent/index.md @@ -0,0 +1,76 @@ +--- +title: ErrorEvent +slug: Web/API/ErrorEvent +tags: + - API + - Evènement + - Worker API +translation_of: Web/API/ErrorEvent +--- +

{{APIRef("HTML DOM")}}

+ +

L'interface ErrorEvent représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers.

+ +

Propriétés

+ +

Hérite également des propriétés de son parent {{domxref("Event")}}.

+ +
+
{{domxref("ErrorEvent.message")}} {{readonlyInline}}
+
Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème.
+
{{domxref("ErrorEvent.filename")}} {{readonlyInline}}
+
Un {{domxref("DOMString")}} contenant le nom du fichier de script dans lequel l'erreur est survenue.
+
{{domxref("ErrorEvent.lineno")}} {{readonlyInline}}
+
Un integer contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue.
+
{{domxref("ErrorEvent.colno")}} {{readonlyInline}}
+
Un integer contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue.
+
{{domxref("ErrorEvent.error")}} {{readonlyInline}} {{experimental_inline}}
+
Un Object JavaScript qui est concerné par l'événement.
+
+ +

Constructeur

+ +
+
{{domxref("ErrorEvent.ErrorEvent", "ErrorEvent()")}}
+
Crée un événement ErrorEvent avec les paramètres fournis.
+
+ +

Méthodes

+ +

Hérite des méthodes de son parent {{domxref("Event")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}{{ Spec2('HTML WHATWG') }}Ajout de la propriété error et du 5ème paramètre du constructeur.
{{ SpecName('HTML5 W3C', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}{{ Spec2('HTML5 W3C') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.ErrorEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/event/bubbles/index.html b/files/fr/web/api/event/bubbles/index.html deleted file mode 100644 index 6c9a6b68fc..0000000000 --- a/files/fr/web/api/event/bubbles/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Event.bubbles -slug: Web/API/Event/bubbles -tags: - - API - - DOM - - Propagation - - Propriétés - - évènements -translation_of: Web/API/Event/bubbles ---- -

{{ ApiRef("DOM") }}

- -

Indique si l'événement donné se propage à travers le DOM ou non.

- -
-

Note : Voir Propagation et capture des évènements pour plus d'informations sur la propagation.

-
- -

Syntaxe

- -
event.bubbles
- -

Valeur

- -

Retourne un booléen dont la valeur est true (vraie) si l'événement se propage à travers le DOM.

- -

Exemple

- -
function goInput(e) {
-  // vérifie la propagation et
-  if (!e.bubbles) {
-     // la lance si elle ne l'a pas été
-     passItOn(e);
-  }
-  // déjà propagé
-  doOutput(e)
-}
- -
-

Note : Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à  true. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}}{{ Spec2('DOM4') }} 
{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}{{ Spec2('DOM2 Events') }}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.bubbles")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/event/bubbles/index.md b/files/fr/web/api/event/bubbles/index.md new file mode 100644 index 0000000000..6c9a6b68fc --- /dev/null +++ b/files/fr/web/api/event/bubbles/index.md @@ -0,0 +1,83 @@ +--- +title: Event.bubbles +slug: Web/API/Event/bubbles +tags: + - API + - DOM + - Propagation + - Propriétés + - évènements +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef("DOM") }}

+ +

Indique si l'événement donné se propage à travers le DOM ou non.

+ +
+

Note : Voir Propagation et capture des évènements pour plus d'informations sur la propagation.

+
+ +

Syntaxe

+ +
event.bubbles
+ +

Valeur

+ +

Retourne un booléen dont la valeur est true (vraie) si l'événement se propage à travers le DOM.

+ +

Exemple

+ +
function goInput(e) {
+  // vérifie la propagation et
+  if (!e.bubbles) {
+     // la lance si elle ne l'a pas été
+     passItOn(e);
+  }
+  // déjà propagé
+  doOutput(e)
+}
+ +
+

Note : Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à  true. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}}{{ Spec2('DOM4') }} 
{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}{{ Spec2('DOM2 Events') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.bubbles")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/event/cancelable/index.html b/files/fr/web/api/event/cancelable/index.html deleted file mode 100644 index 3f3b86744b..0000000000 --- a/files/fr/web/api/event/cancelable/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Event.cancelable -slug: Web/API/Event/cancelable -tags: - - API - - Annulable - - DOM - - Propriétés - - évènements -translation_of: Web/API/Event/cancelable ---- -
{{ ApiRef("DOM") }}
- -

La propriété  cancelable (annulable) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété cancelable est à false (faux) et l'écouteur d'événement ne peut pas l'arrêter.

- -

L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec cancelable avant d'appeler leurs méthodes preventDefault().

- -

La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page. L'annulation des événements click, scroll ou beforeunload empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.

- -

Syntaxe

- -
bool = event.cancelable
-
- - - -

Exemple

- -

Par exemple, les vendeurs de navigateurs proposent que l'évènement wheel puisse être annulable seulement  la première fois que l'écouteur est appelé (en) ; les évènements  wheel suivants ne peuvent être annulés.

- -
function preventScrollWheel(event) {
-  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
-    // L'événement peut être annulé, alors nous le faisons.
-    event.preventDefault();
-  } else {
-    // L'évènement ne peut pas être annulé, il n'est donc pas sûr
-    // d'appeler preventDefault() sur lui.
-    console.warn(`The following event couldn't be canceled:`);
-    console.dir(event);
-  }
-}
-
-document.addEventListener('wheel', preventCancelableEvents);
- -

 

- -

Notes

- -

Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.

- -

Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefault", "preventDefault()")}} sur celui-ci. Cela permet d'empêcher l'action par défaut associée à l'événement de s'exécuter.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}}{{ Spec2('DOM4') }} 
{{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}}{{ Spec2('DOM2 Events') }}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.cancelable")}}

diff --git a/files/fr/web/api/event/cancelable/index.md b/files/fr/web/api/event/cancelable/index.md new file mode 100644 index 0000000000..3f3b86744b --- /dev/null +++ b/files/fr/web/api/event/cancelable/index.md @@ -0,0 +1,88 @@ +--- +title: Event.cancelable +slug: Web/API/Event/cancelable +tags: + - API + - Annulable + - DOM + - Propriétés + - évènements +translation_of: Web/API/Event/cancelable +--- +
{{ ApiRef("DOM") }}
+ +

La propriété  cancelable (annulable) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété cancelable est à false (faux) et l'écouteur d'événement ne peut pas l'arrêter.

+ +

L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec cancelable avant d'appeler leurs méthodes preventDefault().

+ +

La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page. L'annulation des événements click, scroll ou beforeunload empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.

+ +

Syntaxe

+ +
bool = event.cancelable
+
+ + + +

Exemple

+ +

Par exemple, les vendeurs de navigateurs proposent que l'évènement wheel puisse être annulable seulement  la première fois que l'écouteur est appelé (en) ; les évènements  wheel suivants ne peuvent être annulés.

+ +
function preventScrollWheel(event) {
+  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    // L'événement peut être annulé, alors nous le faisons.
+    event.preventDefault();
+  } else {
+    // L'évènement ne peut pas être annulé, il n'est donc pas sûr
+    // d'appeler preventDefault() sur lui.
+    console.warn(`The following event couldn't be canceled:`);
+    console.dir(event);
+  }
+}
+
+document.addEventListener('wheel', preventCancelableEvents);
+ +

 

+ +

Notes

+ +

Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.

+ +

Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefault", "preventDefault()")}} sur celui-ci. Cela permet d'empêcher l'action par défaut associée à l'événement de s'exécuter.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}}{{ Spec2('DOM4') }} 
{{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}}{{ Spec2('DOM2 Events') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.cancelable")}}

diff --git a/files/fr/web/api/event/cancelbubble/index.html b/files/fr/web/api/event/cancelbubble/index.html deleted file mode 100644 index 07d891daed..0000000000 --- a/files/fr/web/api/event/cancelbubble/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Event.cancelBubble -slug: Web/API/Event/cancelBubble -tags: - - API - - Annulation - - DOM - - Evènement - - Propagation - - Propriétés -translation_of: Web/API/Event/cancelBubble ---- -

{{APIRef("DOM Events")}}

- -

La propriété Event.cancelBubble est un alias historique de {{domxref("Event.stopPropagation()")}}. Définir sa valeur à true (vrai) avant le renvoi à partir d'un gestionnaire d'évènements empêche la propagation de l'évènement. Dans les implémentations les plus tardives, cette définition à false (faux) ne fait rien. Voir {{anch("Compatibilité des navigateurs")}} pour plus de détails. 

- -

Syntaxe

- -
event.cancelBubble = bool;
-var bool = event.cancelBubble;
-
- -

Exemple

- -
elem.onclick = function(e) {
- // fais des choses sympas ici
-  e.cancelBubble = true;
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.cancelBubble")}}

diff --git a/files/fr/web/api/event/cancelbubble/index.md b/files/fr/web/api/event/cancelbubble/index.md new file mode 100644 index 0000000000..07d891daed --- /dev/null +++ b/files/fr/web/api/event/cancelbubble/index.md @@ -0,0 +1,49 @@ +--- +title: Event.cancelBubble +slug: Web/API/Event/cancelBubble +tags: + - API + - Annulation + - DOM + - Evènement + - Propagation + - Propriétés +translation_of: Web/API/Event/cancelBubble +--- +

{{APIRef("DOM Events")}}

+ +

La propriété Event.cancelBubble est un alias historique de {{domxref("Event.stopPropagation()")}}. Définir sa valeur à true (vrai) avant le renvoi à partir d'un gestionnaire d'évènements empêche la propagation de l'évènement. Dans les implémentations les plus tardives, cette définition à false (faux) ne fait rien. Voir {{anch("Compatibilité des navigateurs")}} pour plus de détails. 

+ +

Syntaxe

+ +
event.cancelBubble = bool;
+var bool = event.cancelBubble;
+
+ +

Exemple

+ +
elem.onclick = function(e) {
+ // fais des choses sympas ici
+  e.cancelBubble = true;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.cancelBubble")}}

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 deleted file mode 100644 index 506a981aef..0000000000 --- a/files/fr/web/api/event/comparison_of_event_targets/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Comparaison des cibles d'évènements -slug: Web/API/Event/Comparison_of_Event_Targets -tags: - - Cibles - - DOM - - évènements -translation_of: Web/API/Event/Comparison_of_Event_Targets -original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements ---- -

{{ 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.md b/files/fr/web/api/event/comparison_of_event_targets/index.md new file mode 100644 index 0000000000..506a981aef --- /dev/null +++ b/files/fr/web/api/event/comparison_of_event_targets/index.md @@ -0,0 +1,169 @@ +--- +title: Comparaison des cibles d'évènements +slug: Web/API/Event/Comparison_of_Event_Targets +tags: + - Cibles + - DOM + - évènements +translation_of: Web/API/Event/Comparison_of_Event_Targets +original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements +--- +

{{ 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/currenttarget/index.html b/files/fr/web/api/event/currenttarget/index.html deleted file mode 100644 index d70ad8d00f..0000000000 --- a/files/fr/web/api/event/currenttarget/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Event.currentTarget -slug: Web/API/Event/currentTarget -tags: - - API - - Cible - - DOM - - Evènement - - Propriété -translation_of: Web/API/Event/currentTarget ---- -
{{APIRef("DOM")}}
- -

La propriété currentTarget, accessible en lecture seule et rattachée à l'interface {{domxref("Event")}}, identifie la cible courante pour l'évènement lorsque celui-ci traverse le DOM. Elle fait toujours référence à l'élément sur lequel le gestionnaire d'évènement a été attaché tandis que {{domxref("Event.target")}} identifie l'élément à partir duquel l'évènement s'est produit (event.target peut donc être un descendant de event.currentTarget).

- -

Syntaxe

- -
var currentEventTarget = event.currentTarget;
- -

Valeur

- -

{{domxref("EventTarget")}}

- -

Exemples

- -

Event.currentTarget peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.

- -
// Cette fonction masque la cible courante de l'évènement
-// et l'affiche dans la console.
-function hide(e){
-  e.currentTarget.style.visibility = 'hidden';
-  console.log(e.currentTarget);
-  // Lorsque cette fonction est utilisée en gestionnaire d'évènement
-  // on aura this === e.currentTarget
-}
-
-var ps = document.getElementsByTagName('p');
-
-for(var i = 0; i < ps.length; i++){
-  // On affiche l'élément <p> qui a été cliqué dans la console
-  ps[i].addEventListener('click', hide, false);
-}
-// On affiche l'élément <body> dans la console
-document.body.addEventListener('click', hide, false);
-
-
- -
-

Note : La valeur de event.currentTarget est uniquement disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de currentTarget a posteriori (ex. si on a stocké la valeur d'event dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, event.currentTarget aura la valeur null).

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM4")}}
{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}{{Spec2("DOM3 Events")}}
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}}Initial definition
- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.currentTarget")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/event/currenttarget/index.md b/files/fr/web/api/event/currenttarget/index.md new file mode 100644 index 0000000000..d70ad8d00f --- /dev/null +++ b/files/fr/web/api/event/currenttarget/index.md @@ -0,0 +1,92 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - Cible + - DOM + - Evènement + - Propriété +translation_of: Web/API/Event/currentTarget +--- +
{{APIRef("DOM")}}
+ +

La propriété currentTarget, accessible en lecture seule et rattachée à l'interface {{domxref("Event")}}, identifie la cible courante pour l'évènement lorsque celui-ci traverse le DOM. Elle fait toujours référence à l'élément sur lequel le gestionnaire d'évènement a été attaché tandis que {{domxref("Event.target")}} identifie l'élément à partir duquel l'évènement s'est produit (event.target peut donc être un descendant de event.currentTarget).

+ +

Syntaxe

+ +
var currentEventTarget = event.currentTarget;
+ +

Valeur

+ +

{{domxref("EventTarget")}}

+ +

Exemples

+ +

Event.currentTarget peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.

+ +
// Cette fonction masque la cible courante de l'évènement
+// et l'affiche dans la console.
+function hide(e){
+  e.currentTarget.style.visibility = 'hidden';
+  console.log(e.currentTarget);
+  // Lorsque cette fonction est utilisée en gestionnaire d'évènement
+  // on aura this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i < ps.length; i++){
+  // On affiche l'élément <p> qui a été cliqué dans la console
+  ps[i].addEventListener('click', hide, false);
+}
+// On affiche l'élément <body> dans la console
+document.body.addEventListener('click', hide, false);
+
+
+ +
+

Note : La valeur de event.currentTarget est uniquement disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de currentTarget a posteriori (ex. si on a stocké la valeur d'event dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, event.currentTarget aura la valeur null).

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM4")}}
{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}{{Spec2("DOM3 Events")}}
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.currentTarget")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/event/defaultprevented/index.html b/files/fr/web/api/event/defaultprevented/index.html deleted file mode 100644 index f5b25e7c7d..0000000000 --- a/files/fr/web/api/event/defaultprevented/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: event.defaultPrevented -slug: Web/API/Event/defaultPrevented -tags: - - API - - DOM - - Evènement - - Propriété -translation_of: Web/API/Event/defaultPrevented ---- -

{{APIRef("DOM")}}

- -

Résumé

- -

Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.

- -
-

Note : Cette propriété doit etre utilisée au lieu de la méthode getPreventDefault() qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).

-
- -

Syntaxe

- -
bool = event.defaultPrevented
- -

Exemple

- -
 if (e.defaultPrevented) {
-   /* Le comportement par défaut a été inhibé */
- }
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}{{ Spec2('DOM WHATWG') }} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.defaultPrevented")}}

- - diff --git a/files/fr/web/api/event/defaultprevented/index.md b/files/fr/web/api/event/defaultprevented/index.md new file mode 100644 index 0000000000..f5b25e7c7d --- /dev/null +++ b/files/fr/web/api/event/defaultprevented/index.md @@ -0,0 +1,58 @@ +--- +title: event.defaultPrevented +slug: Web/API/Event/defaultPrevented +tags: + - API + - DOM + - Evènement + - Propriété +translation_of: Web/API/Event/defaultPrevented +--- +

{{APIRef("DOM")}}

+ +

Résumé

+ +

Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.

+ +
+

Note : Cette propriété doit etre utilisée au lieu de la méthode getPreventDefault() qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).

+
+ +

Syntaxe

+ +
bool = event.defaultPrevented
+ +

Exemple

+ +
 if (e.defaultPrevented) {
+   /* Le comportement par défaut a été inhibé */
+ }
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.defaultPrevented")}}

+ + diff --git a/files/fr/web/api/event/event/index.html b/files/fr/web/api/event/event/index.html deleted file mode 100644 index 8a6992dc29..0000000000 --- a/files/fr/web/api/event/event/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Event() -slug: Web/API/Event/Event -tags: - - API - - Constructeur - - DOM - - évènements -translation_of: Web/API/Event/Event ---- -

{{APIRef("DOM")}}

- -

Le constructeur Event() crée un nouvel {{domxref("Event")}} (évènement).

- -

Syntaxe

- -
 event = new Event(typeArg, eventInit);
- -

Valeurs

- -
-
typeArg
-
C'est une {{domxref("DOMString")}} (chaîne de caractères) représentant le nom de l'évènement.
-
eventInit{{optional_inline}}
-

C'est un dictionnaire EventInit ayant les champs suivants :

-
    -
  • bubbles: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est false (faux).
    • -
  • cancelable: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est false (faux) .
    • -
  • composed: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est false (faux) .
    • -
-
-
- -

Exemple

- -
// crée un évènement "look" qui est diffusé et ne peut être annulé
-var evt = new Event("look", {"bubbles":true, "cancelable":false});
-document.dispatchEvent(evt);
-
-// l'événement peut être envoyé à partir de n'importe quel élément, pas seulement le document
-myDiv.dispatchEvent(evt);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-event','Event()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.Event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/event/event/index.md b/files/fr/web/api/event/event/index.md new file mode 100644 index 0000000000..8a6992dc29 --- /dev/null +++ b/files/fr/web/api/event/event/index.md @@ -0,0 +1,73 @@ +--- +title: Event() +slug: Web/API/Event/Event +tags: + - API + - Constructeur + - DOM + - évènements +translation_of: Web/API/Event/Event +--- +

{{APIRef("DOM")}}

+ +

Le constructeur Event() crée un nouvel {{domxref("Event")}} (évènement).

+ +

Syntaxe

+ +
 event = new Event(typeArg, eventInit);
+ +

Valeurs

+ +
+
typeArg
+
C'est une {{domxref("DOMString")}} (chaîne de caractères) représentant le nom de l'évènement.
+
eventInit{{optional_inline}}
+

C'est un dictionnaire EventInit ayant les champs suivants :

+
    +
  • bubbles: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est false (faux).
    • +
  • cancelable: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est false (faux) .
    • +
  • composed: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est false (faux) .
    • +
+
+
+ +

Exemple

+ +
// crée un évènement "look" qui est diffusé et ne peut être annulé
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// l'événement peut être envoyé à partir de n'importe quel élément, pas seulement le document
+myDiv.dispatchEvent(evt);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-event','Event()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.Event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/event/eventphase/index.html b/files/fr/web/api/event/eventphase/index.html deleted file mode 100644 index 290a0e6659..0000000000 --- a/files/fr/web/api/event/eventphase/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Event.eventPhase -slug: Web/API/Event/eventPhase -tags: - - API - - DOM - - Evènement - - Flux - - Phase - - Propriétés -translation_of: Web/API/Event/eventPhase ---- -

{{ApiRef("DOM")}}

- -

Indique quelle phase du flux d'événements est actuellement évaluée.

- -

Syntaxe

- -
var phase = event.eventPhase;
-
- -

Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans {{anch("Constantes de phase d'événement")}}.

- -

Constantes

- -

Constantes de phase d'événement

- -

Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstantValueDescription
Event.NONE0 -

Aucun événement n'est actuellement traité.

-
Event.CAPTURING_PHASE1 -

L'événement se propage à travers les objets ancêtres de la cible. Ce processus commence avec {{domxref("Window")}}, puis {{domxref("Document")}}, ensuite {{domxref("HTMLHtmlElement")}} et ainsi de suite à travers les éléments jusqu'à ce que le parent de la cible soit atteint. {{domxref("EventListener", "Event listeners", "", 1)}} sont enregistrés pour le mode capture lorsque {{domxref("EventTarget.addEventListener()")}} est appelé durant cette phase.

-
Event.AT_TARGET2L'événement est arrivé à {{domxref("EventTarget", "the event's target", "", 1)}}. Les écouteurs d'événements  enregistrés pour cette phase sont appelés à ce moment. Si {{domxref("Event.bubbles")}} vaut false (faux), le traitement de l'événement est terminé une fois la phase complète.
Event.BUBBLING_PHASE3L'événement se propage à rebours à travers les ancêtres de la cible dans l'ordre inverse, commençant avec le parent, et atteignant finalement le contenant {{domxref("Window")}}. Ceci est connu comme propagation et arrive seulement si {{domxref("Event.bubbles")}} vaut true (vrai). Les {{domxref("EventListener", "Event listeners", "", 1)}} enregistrés pour cette phase sont déclenchés durant ce traitement.
- -

Pour plus de détails, voir section 3.1, Event dispatch and DOM event flow (en) de la spécification du DOM niveau 3 sur les évènements .

- -

Exemple

- -

HTML

- -
<h4>Event Propagation Chain</h4>
-<ul>
-  <li>Click 'd1'</li>
-  <li>Analyse event propagation chain</li>
-  <li>Click next div and repeat the experience</li>
-  <li>Change Capturing mode</li>
-  <li>Repeat the experience</li>
-</ul>
-<input type="checkbox" id="chCapture" />
-<label for="chCapture">Use Capturing</label>
- <div id="d1">d1
-  <div id="d2">d2
-      <div id="d3">d3
-          <div id="d4">d4</div>
-      </div>
-  </div>
- </div>
- <div id="divInfo"></div>
-
- -

CSS

- -
div {
-  margin: 20px;
-  padding: 4px;
-  border: thin black solid;
-}
-
-#divInfo {
-  margin: 18px;
-  padding: 8px;
-  background-color:white;
-  font-size:80%;
-}
- -

JavaScript

- -
var clear = false, divInfo = null, divs = null, useCapture = false;
-window.onload = function () {
-  divInfo = document.getElementById("divInfo");
-  divs = document.getElementsByTagName('div');
-  chCapture = document.getElementById("chCapture");
-  chCapture.onclick = function () {
-    RemoveListeners();
-    AddListeners();
-  }
-  Clear();
-  AddListeners();
-}
-
-function RemoveListeners() {
-  for (var i = 0; i < divs.length; i++) {
-    var d = divs[i];
-    if (d.id != "divInfo") {
-      d.removeEventListener("click", OnDivClick, true);
-      d.removeEventListener("click", OnDivClick, false);
-    }
-  }
-}
-
-function AddListeners() {
-  for (var i = 0; i < divs.length; i++) {
-    var d = divs[i];
-    if (d.id != "divInfo") {
-      if (chCapture.checked)
-        d.addEventListener("click", OnDivClick, true);
-      else
-        d.addEventListener("click", OnDivClick, false);
-      d.onmousemove = function () { clear = true; };
-    }
-  }
-}
-
-function OnDivClick(e) {
-  if (clear) {
-    Clear(); clear = false;
-  }
-  if (e.eventPhase == 2)
-    e.currentTarget.style.backgroundColor = 'red';
-  var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error";
-  divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>";
-}
-
-function Clear() {
-  for (var i = 0; i < divs.length; i++) {
-    if (divs[i].id != "divInfo")
-      divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff";
-  }
-  divInfo.innerHTML = '';
-}
- -

{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}{{Spec2("DOM2 Events")}}Première définition
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.eventPhase")}}

diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md new file mode 100644 index 0000000000..290a0e6659 --- /dev/null +++ b/files/fr/web/api/event/eventphase/index.md @@ -0,0 +1,196 @@ +--- +title: Event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - API + - DOM + - Evènement + - Flux + - Phase + - Propriétés +translation_of: Web/API/Event/eventPhase +--- +

{{ApiRef("DOM")}}

+ +

Indique quelle phase du flux d'événements est actuellement évaluée.

+ +

Syntaxe

+ +
var phase = event.eventPhase;
+
+ +

Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans {{anch("Constantes de phase d'événement")}}.

+ +

Constantes

+ +

Constantes de phase d'événement

+ +

Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
Event.NONE0 +

Aucun événement n'est actuellement traité.

+
Event.CAPTURING_PHASE1 +

L'événement se propage à travers les objets ancêtres de la cible. Ce processus commence avec {{domxref("Window")}}, puis {{domxref("Document")}}, ensuite {{domxref("HTMLHtmlElement")}} et ainsi de suite à travers les éléments jusqu'à ce que le parent de la cible soit atteint. {{domxref("EventListener", "Event listeners", "", 1)}} sont enregistrés pour le mode capture lorsque {{domxref("EventTarget.addEventListener()")}} est appelé durant cette phase.

+
Event.AT_TARGET2L'événement est arrivé à {{domxref("EventTarget", "the event's target", "", 1)}}. Les écouteurs d'événements  enregistrés pour cette phase sont appelés à ce moment. Si {{domxref("Event.bubbles")}} vaut false (faux), le traitement de l'événement est terminé une fois la phase complète.
Event.BUBBLING_PHASE3L'événement se propage à rebours à travers les ancêtres de la cible dans l'ordre inverse, commençant avec le parent, et atteignant finalement le contenant {{domxref("Window")}}. Ceci est connu comme propagation et arrive seulement si {{domxref("Event.bubbles")}} vaut true (vrai). Les {{domxref("EventListener", "Event listeners", "", 1)}} enregistrés pour cette phase sont déclenchés durant ce traitement.
+ +

Pour plus de détails, voir section 3.1, Event dispatch and DOM event flow (en) de la spécification du DOM niveau 3 sur les évènements .

+ +

Exemple

+ +

HTML

+ +
<h4>Event Propagation Chain</h4>
+<ul>
+  <li>Click 'd1'</li>
+  <li>Analyse event propagation chain</li>
+  <li>Click next div and repeat the experience</li>
+  <li>Change Capturing mode</li>
+  <li>Repeat the experience</li>
+</ul>
+<input type="checkbox" id="chCapture" />
+<label for="chCapture">Use Capturing</label>
+ <div id="d1">d1
+  <div id="d2">d2
+      <div id="d3">d3
+          <div id="d4">d4</div>
+      </div>
+  </div>
+ </div>
+ <div id="divInfo"></div>
+
+ +

CSS

+ +
div {
+  margin: 20px;
+  padding: 4px;
+  border: thin black solid;
+}
+
+#divInfo {
+  margin: 18px;
+  padding: 8px;
+  background-color:white;
+  font-size:80%;
+}
+ +

JavaScript

+ +
var clear = false, divInfo = null, divs = null, useCapture = false;
+window.onload = function () {
+  divInfo = document.getElementById("divInfo");
+  divs = document.getElementsByTagName('div');
+  chCapture = document.getElementById("chCapture");
+  chCapture.onclick = function () {
+    RemoveListeners();
+    AddListeners();
+  }
+  Clear();
+  AddListeners();
+}
+
+function RemoveListeners() {
+  for (var i = 0; i < divs.length; i++) {
+    var d = divs[i];
+    if (d.id != "divInfo") {
+      d.removeEventListener("click", OnDivClick, true);
+      d.removeEventListener("click", OnDivClick, false);
+    }
+  }
+}
+
+function AddListeners() {
+  for (var i = 0; i < divs.length; i++) {
+    var d = divs[i];
+    if (d.id != "divInfo") {
+      if (chCapture.checked)
+        d.addEventListener("click", OnDivClick, true);
+      else
+        d.addEventListener("click", OnDivClick, false);
+      d.onmousemove = function () { clear = true; };
+    }
+  }
+}
+
+function OnDivClick(e) {
+  if (clear) {
+    Clear(); clear = false;
+  }
+  if (e.eventPhase == 2)
+    e.currentTarget.style.backgroundColor = 'red';
+  var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error";
+  divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>";
+}
+
+function Clear() {
+  for (var i = 0; i < divs.length; i++) {
+    if (divs[i].id != "divInfo")
+      divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff";
+  }
+  divInfo.innerHTML = '';
+}
+ +

{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}{{Spec2("DOM2 Events")}}Première définition
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.eventPhase")}}

diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.html b/files/fr/web/api/event/explicitoriginaltarget/index.html deleted file mode 100644 index 9844a934bf..0000000000 --- a/files/fr/web/api/event/explicitoriginaltarget/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Event.explicitOriginalTarget -slug: Web/API/Event/explicitOriginalTarget -tags: - - API - - DOM - - Gecko - - Non-standard - - Propriété - - Reference -translation_of: Web/API/Event/explicitOriginalTarget ---- -
{{ApiRef("DOM")}}{{Non-standard_header}}
- -

Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla.

- -

Si l'évènement a été déporté pour une autre raison qu'une traverséee de frontière anonyme, cette propriété correspondra à la cible avant la déportation de l'évènement. Par exemples, les évènements de la souris sont déportés vers leur nœud parent lorsqu'ils se produisent sur des nœuds texte (cf. {{Bug(185889)}}). Dans ce cas currentTarget pointera vers le parent et explicitOriginalTarget vers le nœud texte.

- -

À la différence de originalTarget, explicitOriginalTarget ne contiendra jamais de contenu anonyme.

- -

Voir aussi une comparaison des cibles pour les évènements.

- -

Exemples

- -

Cette propriété peut être utiliséee avec <command> afin d'obtenir les détails de l'évènement de l'objet qui a invoqué la commande.

- -

HTML

- -
<command id="my-cmd-anAction"
-         oncommand="myCommand(event);"/>
-<menulist>
-  <menupopup>
-    <menuitem label="Get my element name!"
-              command="my-cmd-anAction"/>
-  </menupopup>
-</menulist>
- -

JavaScript

- -
function myCommand(ev) {
-  console.log(ev.explicitOriginalTarget.nodeName);
-  // affichera 'menuitem'
-}
- -

Spécifications

- -

Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}

- -

Cette propriété n'est pas définie dans la spécification DOM Level 2 Events

diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.md b/files/fr/web/api/event/explicitoriginaltarget/index.md new file mode 100644 index 0000000000..9844a934bf --- /dev/null +++ b/files/fr/web/api/event/explicitoriginaltarget/index.md @@ -0,0 +1,49 @@ +--- +title: Event.explicitOriginalTarget +slug: Web/API/Event/explicitOriginalTarget +tags: + - API + - DOM + - Gecko + - Non-standard + - Propriété + - Reference +translation_of: Web/API/Event/explicitOriginalTarget +--- +
{{ApiRef("DOM")}}{{Non-standard_header}}
+ +

Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla.

+ +

Si l'évènement a été déporté pour une autre raison qu'une traverséee de frontière anonyme, cette propriété correspondra à la cible avant la déportation de l'évènement. Par exemples, les évènements de la souris sont déportés vers leur nœud parent lorsqu'ils se produisent sur des nœuds texte (cf. {{Bug(185889)}}). Dans ce cas currentTarget pointera vers le parent et explicitOriginalTarget vers le nœud texte.

+ +

À la différence de originalTarget, explicitOriginalTarget ne contiendra jamais de contenu anonyme.

+ +

Voir aussi une comparaison des cibles pour les évènements.

+ +

Exemples

+ +

Cette propriété peut être utiliséee avec <command> afin d'obtenir les détails de l'évènement de l'objet qui a invoqué la commande.

+ +

HTML

+ +
<command id="my-cmd-anAction"
+         oncommand="myCommand(event);"/>
+<menulist>
+  <menupopup>
+    <menuitem label="Get my element name!"
+              command="my-cmd-anAction"/>
+  </menupopup>
+</menulist>
+ +

JavaScript

+ +
function myCommand(ev) {
+  console.log(ev.explicitOriginalTarget.nodeName);
+  // affichera 'menuitem'
+}
+ +

Spécifications

+ +

Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}

+ +

Cette propriété n'est pas définie dans la spécification DOM Level 2 Events

diff --git a/files/fr/web/api/event/index.html b/files/fr/web/api/event/index.html deleted file mode 100644 index a85599f14b..0000000000 --- a/files/fr/web/api/event/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Event -slug: Web/API/Event -browser-compat: api.Event -translation_of: Web/API/Event ---- -

{{APIRef("DOM")}}

- -

L'interface Event interface représente un évènement qui se produit dans le DOM.

- -

Un évènement peut être déclenché par une action humaine (clic avec la souris, appui sur une touche du clavier) ou généré par des API pour représenter la progression d'une tâche asynchrone. Il est également possible de déclencher un évènement à partir d'un programme, en appelant par exemple la méthode HTMLElement.click() sur un élément ou en définissant l'évènement avant de l'envoyer sur une cible avec la méthode EventTarget.dispatchEvent().

- -

Il existe de nombreux types d'évènements dont certains utilisent d'autres interfaces basées sur Event. L'interface Event contient les propriétés et méthodes qui sont communes à l'ensemble des évènements.

- -

De nombreux éléments DOM peuvent être paramétrés afin d'accepter (« d'écouter ») ces évènements et d'exécuter du code en réaction afin de les traiter (« gérer »). Les gestionnaires d'évènements sont généralement connectés (« attachés ») aux éléments HTML (tels que <button>, <div>, <span>, etc.) grâce à la méthode EventTarget.addEventListener() qui remplace les anciens attributs de gestion d'évènement qui étaient auparavant utilisés en HTML. Avec cette méthode d'ajout plus récente, les gestionnaires peuvent également être déconnectés/détachés si besoin via la méthode EventTarget.removeEventListener().

- -
-

Note : Il est tout à fait possible d'attacher plusieurs gestionnaires d'évènement à un seul élément, y compris pour la gestion d'un évènement particulier. Ainsi, des modules de code indépendant peuvent attacher leurs gestionnaires de façon indépendante (par exemple, sur une page web, un module de publicité et un autre module d'analyse pourront tout à fait attacher des gestionnaires pour étudier la consultation d'une vidéo).

-
- -

Lorsqu'il y a de nombreux éléments imbriqués, chacun ayant ses propres gestionnaires d'évènement, le traitement des évènements peut se révéler compliqué, notamment lorsqu'un élément parent reçoit le même évènement que ses éléments enfants (par exemple pour des évènements qui se déclenchent sur la surface visuelle de l'élément enfant). Dans ce cas, l'ordre du traitement de ces évènements dépend des paramètres de bouillonnement (bubbling) et de capture définis sur chaque gestionnaire ainsi déclenché.

- -

Interfaces basées sur Event

- -

Voici une liste des interfaces basées sur Event avec un lien vers leur documentation dans la référence MDN.

- -

On notera que l'ensemble des interfaces d'évènements ont un nom qui termine par Event (« évènement » en anglais).

- - - -

Constructeur

- -
-
Event()
-
Crée un objet Event et le renvoie à l'appelant.
-
- -

Propriétés

- -
-
Event.bubbles {{readonlyinline}}
-
Un booléen qui indique si l'évènement bouillonne/remonte vers le haut dans l'arbre du DOM.
-
Event.cancelBubble
-
Un alias historique de Event.stopPropagation(). Définir sa valeur à true avant le retour d'un gestionnaire d'évènement empêchera la propagation de l'évènement.
-
Event.cancelable {{readonlyinline}}
-
Un booléen qui indique si l'évènement peut être annulé.
-
Event.composed {{ReadOnlyInline}}
-
Un booléen qui indique si l'évènement peut bouillonner entre l'arbre du shadow DOM et le DOM standard.
-
Event.currentTarget {{readonlyinline}}
-
Une référence vers la cible actuellement enregistrée pour l'évènement. Il s'agit de l'objet vers lequel l'évènement est présentement destiné à être envoyé. Cette cible peut avoir été modifiée pendant la vie de l'évènement via un reciblage.
-
Event.deepPath {{non-standard_inline}}
-
Un tableau (Array) de nœuds (Node) du DOM qui ont été parcourus lors du bouillonnement/de la remontée de l'évènement.
-
Event.defaultPrevented {{readonlyinline}}
-
Indique si un appel à Event.preventDefault() a annulé l'évènement.
-
Event.eventPhase {{readonlyinline}}
-
Indique la phase du flux de l'évènement qui est en cours de traitement.
-
Event.explicitOriginalTarget {{non-standard_inline}} {{readonlyinline}}
-
La cible explicite et originnelle de l'évènement (spécifique à Mozilla).
-
Event.originalTarget {{non-standard_inline}} {{readonlyinline}}
-
La cible originale de l'évènement avant tout reciblage (spécifique à Mozilla).
-
Event.returnValue {{Deprecated_Inline}}
-
Une propriété historique, introduite par Internet Explorer puis adoptée au sein de la spécification du DOM pour la compatibilité des sites existants. À la place, on privilégiera l'usage de Event.preventDefault() et Event.defaultPrevented.
-
Event.srcElement {{non-standard_inline}}
-
Un alias non-standard (provenant d'anciennes versions d'Internet Explorer) pour Event.target. Certains navigateurs le prennent en charge à des fins de compatibilité web.
-
Event.target {{readonlyinline}}
-
Une référence à la cible à laquelle l'évènement était initialement destiné.
-
Event.timeStamp {{readonlyinline}}
-
Le temps auquel l'évènement a été créé (exprimé en millisecondes). La spécification indique que cette valeur est relative à l'epoch mais l'implémentation des navigateurs peut varier. Des travaux sont en cours afin que cette valeur devienne une valeur de type DOMHighResTimeStamp.
-
Event.type {{readonlyinline}}
-
Le nom de l'évènement, exprimé de façon insensible à la casse.
-
Event.isTrusted {{readonlyinline}}
-
Indique si l'évènement a été initié par le navigateur (suite à une action humaine comme un clic) ou par un script (en utilisant une méthode de création comme Event.initEvent).
-
- -

Propriétés dépréciées

- -
-
Event.scoped {{readonlyinline}} {{deprecated_inline}}
-
Un booléen qui indique si l'évènement courant remontera de l'arbre du shadow DOM vers l'arbre du DOM classique. Event.composed doit être utilisé à la place.
-
- -

Méthodes

- -
-
Event.composedPath()
-
Renvoie le chemin de l'évènement (c'est-à-dire les objets pour lesquels des gestionnaires d'évènements seront appelés). Ce chemin n'inclut pas les nœuds des arbres shadow si la racine shadow a été créée avec un ShadowRoot.mode.
-
Event.preventDefault()
-
Annule l'évènement (si celui-ci peut être annulé).
-
Event.stopImmediatePropagation
-
Pour l'évènement courant, empêche les autres gestionnaires d'évènements d'être appelés. Cela inclut les gestionnaires attachés au même élément ainsi que ceux attachés aux éléments qui seront parcourus ensuite (pendant la phase de capture par exemple).
-
Event.stopPropagation
-
Arrête la propagation des évènements plus loin dans le DOM.
-
- -

Méthodes dépréciées

- -
-
Event.initEvent() {{deprecated_inline}}
-
Initialise la valeur d'un évènement créé. Si l'évènement a déjà diffusé, cette méthode n'a aucun effet.
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/event/index.md b/files/fr/web/api/event/index.md new file mode 100644 index 0000000000..a85599f14b --- /dev/null +++ b/files/fr/web/api/event/index.md @@ -0,0 +1,167 @@ +--- +title: Event +slug: Web/API/Event +browser-compat: api.Event +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

L'interface Event interface représente un évènement qui se produit dans le DOM.

+ +

Un évènement peut être déclenché par une action humaine (clic avec la souris, appui sur une touche du clavier) ou généré par des API pour représenter la progression d'une tâche asynchrone. Il est également possible de déclencher un évènement à partir d'un programme, en appelant par exemple la méthode HTMLElement.click() sur un élément ou en définissant l'évènement avant de l'envoyer sur une cible avec la méthode EventTarget.dispatchEvent().

+ +

Il existe de nombreux types d'évènements dont certains utilisent d'autres interfaces basées sur Event. L'interface Event contient les propriétés et méthodes qui sont communes à l'ensemble des évènements.

+ +

De nombreux éléments DOM peuvent être paramétrés afin d'accepter (« d'écouter ») ces évènements et d'exécuter du code en réaction afin de les traiter (« gérer »). Les gestionnaires d'évènements sont généralement connectés (« attachés ») aux éléments HTML (tels que <button>, <div>, <span>, etc.) grâce à la méthode EventTarget.addEventListener() qui remplace les anciens attributs de gestion d'évènement qui étaient auparavant utilisés en HTML. Avec cette méthode d'ajout plus récente, les gestionnaires peuvent également être déconnectés/détachés si besoin via la méthode EventTarget.removeEventListener().

+ +
+

Note : Il est tout à fait possible d'attacher plusieurs gestionnaires d'évènement à un seul élément, y compris pour la gestion d'un évènement particulier. Ainsi, des modules de code indépendant peuvent attacher leurs gestionnaires de façon indépendante (par exemple, sur une page web, un module de publicité et un autre module d'analyse pourront tout à fait attacher des gestionnaires pour étudier la consultation d'une vidéo).

+
+ +

Lorsqu'il y a de nombreux éléments imbriqués, chacun ayant ses propres gestionnaires d'évènement, le traitement des évènements peut se révéler compliqué, notamment lorsqu'un élément parent reçoit le même évènement que ses éléments enfants (par exemple pour des évènements qui se déclenchent sur la surface visuelle de l'élément enfant). Dans ce cas, l'ordre du traitement de ces évènements dépend des paramètres de bouillonnement (bubbling) et de capture définis sur chaque gestionnaire ainsi déclenché.

+ +

Interfaces basées sur Event

+ +

Voici une liste des interfaces basées sur Event avec un lien vers leur documentation dans la référence MDN.

+ +

On notera que l'ensemble des interfaces d'évènements ont un nom qui termine par Event (« évènement » en anglais).

+ + + +

Constructeur

+ +
+
Event()
+
Crée un objet Event et le renvoie à l'appelant.
+
+ +

Propriétés

+ +
+
Event.bubbles {{readonlyinline}}
+
Un booléen qui indique si l'évènement bouillonne/remonte vers le haut dans l'arbre du DOM.
+
Event.cancelBubble
+
Un alias historique de Event.stopPropagation(). Définir sa valeur à true avant le retour d'un gestionnaire d'évènement empêchera la propagation de l'évènement.
+
Event.cancelable {{readonlyinline}}
+
Un booléen qui indique si l'évènement peut être annulé.
+
Event.composed {{ReadOnlyInline}}
+
Un booléen qui indique si l'évènement peut bouillonner entre l'arbre du shadow DOM et le DOM standard.
+
Event.currentTarget {{readonlyinline}}
+
Une référence vers la cible actuellement enregistrée pour l'évènement. Il s'agit de l'objet vers lequel l'évènement est présentement destiné à être envoyé. Cette cible peut avoir été modifiée pendant la vie de l'évènement via un reciblage.
+
Event.deepPath {{non-standard_inline}}
+
Un tableau (Array) de nœuds (Node) du DOM qui ont été parcourus lors du bouillonnement/de la remontée de l'évènement.
+
Event.defaultPrevented {{readonlyinline}}
+
Indique si un appel à Event.preventDefault() a annulé l'évènement.
+
Event.eventPhase {{readonlyinline}}
+
Indique la phase du flux de l'évènement qui est en cours de traitement.
+
Event.explicitOriginalTarget {{non-standard_inline}} {{readonlyinline}}
+
La cible explicite et originnelle de l'évènement (spécifique à Mozilla).
+
Event.originalTarget {{non-standard_inline}} {{readonlyinline}}
+
La cible originale de l'évènement avant tout reciblage (spécifique à Mozilla).
+
Event.returnValue {{Deprecated_Inline}}
+
Une propriété historique, introduite par Internet Explorer puis adoptée au sein de la spécification du DOM pour la compatibilité des sites existants. À la place, on privilégiera l'usage de Event.preventDefault() et Event.defaultPrevented.
+
Event.srcElement {{non-standard_inline}}
+
Un alias non-standard (provenant d'anciennes versions d'Internet Explorer) pour Event.target. Certains navigateurs le prennent en charge à des fins de compatibilité web.
+
Event.target {{readonlyinline}}
+
Une référence à la cible à laquelle l'évènement était initialement destiné.
+
Event.timeStamp {{readonlyinline}}
+
Le temps auquel l'évènement a été créé (exprimé en millisecondes). La spécification indique que cette valeur est relative à l'epoch mais l'implémentation des navigateurs peut varier. Des travaux sont en cours afin que cette valeur devienne une valeur de type DOMHighResTimeStamp.
+
Event.type {{readonlyinline}}
+
Le nom de l'évènement, exprimé de façon insensible à la casse.
+
Event.isTrusted {{readonlyinline}}
+
Indique si l'évènement a été initié par le navigateur (suite à une action humaine comme un clic) ou par un script (en utilisant une méthode de création comme Event.initEvent).
+
+ +

Propriétés dépréciées

+ +
+
Event.scoped {{readonlyinline}} {{deprecated_inline}}
+
Un booléen qui indique si l'évènement courant remontera de l'arbre du shadow DOM vers l'arbre du DOM classique. Event.composed doit être utilisé à la place.
+
+ +

Méthodes

+ +
+
Event.composedPath()
+
Renvoie le chemin de l'évènement (c'est-à-dire les objets pour lesquels des gestionnaires d'évènements seront appelés). Ce chemin n'inclut pas les nœuds des arbres shadow si la racine shadow a été créée avec un ShadowRoot.mode.
+
Event.preventDefault()
+
Annule l'évènement (si celui-ci peut être annulé).
+
Event.stopImmediatePropagation
+
Pour l'évènement courant, empêche les autres gestionnaires d'évènements d'être appelés. Cela inclut les gestionnaires attachés au même élément ainsi que ceux attachés aux éléments qui seront parcourus ensuite (pendant la phase de capture par exemple).
+
Event.stopPropagation
+
Arrête la propagation des évènements plus loin dans le DOM.
+
+ +

Méthodes dépréciées

+ +
+
Event.initEvent() {{deprecated_inline}}
+
Initialise la valeur d'un évènement créé. Si l'évènement a déjà diffusé, cette méthode n'a aucun effet.
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/event/initevent/index.html b/files/fr/web/api/event/initevent/index.html deleted file mode 100644 index 6f06e8b7f3..0000000000 --- a/files/fr/web/api/event/initevent/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: event.initEvent -slug: Web/API/Event/initEvent -tags: - - API - - DOM - - Evènement - - Méthode - - Reference -translation_of: Web/API/Event/initEvent ---- -

{{ApiRef("DOM")}}{{deprecated_header}}

- -

La méthode Event.initEvent() est utilisée pour initialiser la valeur d'un objet {{domxref("event")}} créé à l'aide de {{domxref("Document.createEvent()")}}.

- -

Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien.

- -
-

Note : Ne pas utiliser cette méthode qui est dépréciée.

- -

À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page Création et déclenchement d'évènements vous donne plus d'informations sur la manière de les utiliser.

-
- -

Syntaxe

- -
event.initEvent(type, bubbles, cancelable)
-
- -
-
type
-
est une {{domxref("DOMString")}}  qui définit le type d'évènement.
-
bubbles
-
est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule  {{domxref("Event.bubbles")}} donnera sa valeur.
-
cancelable
-
Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule  {{ domxref("Event.cancelable") }}  donnera sa valeur.
-
- -

Exemple

- -
// Crée un évènement.
-var event = document.createEvent('Event');
-
-// Crée un évènement click qui doit se propager vers le haut
-// et ne peut être annulé
-event.initEvent('click', true, false);
-
-// Écoute les évènements.
-elem.addEventListener('click', function (e) {
-  // e.target matches elem
-}, false);
-
-elem.dispatchEvent(event);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}{{Spec2("DOM WHATWG")}}Depuis {{SpecName('DOM2 Events')}}, dépréciée, remplacée par les constructeurs d'événements.
{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}{{Spec2('DOM2 Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.initEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/event/initevent/index.md b/files/fr/web/api/event/initevent/index.md new file mode 100644 index 0000000000..6f06e8b7f3 --- /dev/null +++ b/files/fr/web/api/event/initevent/index.md @@ -0,0 +1,85 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - API + - DOM + - Evènement + - Méthode + - Reference +translation_of: Web/API/Event/initEvent +--- +

{{ApiRef("DOM")}}{{deprecated_header}}

+ +

La méthode Event.initEvent() est utilisée pour initialiser la valeur d'un objet {{domxref("event")}} créé à l'aide de {{domxref("Document.createEvent()")}}.

+ +

Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien.

+ +
+

Note : Ne pas utiliser cette méthode qui est dépréciée.

+ +

À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page Création et déclenchement d'évènements vous donne plus d'informations sur la manière de les utiliser.

+
+ +

Syntaxe

+ +
event.initEvent(type, bubbles, cancelable)
+
+ +
+
type
+
est une {{domxref("DOMString")}}  qui définit le type d'évènement.
+
bubbles
+
est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule  {{domxref("Event.bubbles")}} donnera sa valeur.
+
cancelable
+
Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule  {{ domxref("Event.cancelable") }}  donnera sa valeur.
+
+ +

Exemple

+ +
// Crée un évènement.
+var event = document.createEvent('Event');
+
+// Crée un évènement click qui doit se propager vers le haut
+// et ne peut être annulé
+event.initEvent('click', true, false);
+
+// Écoute les évènements.
+elem.addEventListener('click', function (e) {
+  // e.target matches elem
+}, false);
+
+elem.dispatchEvent(event);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}{{Spec2("DOM WHATWG")}}Depuis {{SpecName('DOM2 Events')}}, dépréciée, remplacée par les constructeurs d'événements.
{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}{{Spec2('DOM2 Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.initEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/event/istrusted/index.html b/files/fr/web/api/event/istrusted/index.html deleted file mode 100644 index 0267223d10..0000000000 --- a/files/fr/web/api/event/istrusted/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Event.isTrusted -slug: Web/API/Event/isTrusted -tags: - - API - - Event - - Property - - Read-only - - Référence(2) -translation_of: Web/API/Event/isTrusted ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent.

- -

Syntaxe

- -
var bool = event.isTrusted;
-
- -

Exemple

- -
 if (e.isTrusted) {
-     /* The event is trusted. */
- } else {
-     /* The event is not trusted. */
- }
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}{{Spec2('DOM3 Events')}} -

Ajoute des conditions à propos des événement trusted et untrusted. Cependant, cela ne défini pas la propriété isTrusted.

-
{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}{{Spec2('DOM4')}}Première définition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.isTrusted")}}

diff --git a/files/fr/web/api/event/istrusted/index.md b/files/fr/web/api/event/istrusted/index.md new file mode 100644 index 0000000000..0267223d10 --- /dev/null +++ b/files/fr/web/api/event/istrusted/index.md @@ -0,0 +1,61 @@ +--- +title: Event.isTrusted +slug: Web/API/Event/isTrusted +tags: + - API + - Event + - Property + - Read-only + - Référence(2) +translation_of: Web/API/Event/isTrusted +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent.

+ +

Syntaxe

+ +
var bool = event.isTrusted;
+
+ +

Exemple

+ +
 if (e.isTrusted) {
+     /* The event is trusted. */
+ } else {
+     /* The event is not trusted. */
+ }
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}{{Spec2('DOM3 Events')}} +

Ajoute des conditions à propos des événement trusted et untrusted. Cependant, cela ne défini pas la propriété isTrusted.

+
{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}{{Spec2('DOM4')}}Première définition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.isTrusted")}}

diff --git a/files/fr/web/api/event/originaltarget/index.html b/files/fr/web/api/event/originaltarget/index.html deleted file mode 100644 index 810c8276a5..0000000000 --- a/files/fr/web/api/event/originaltarget/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Event.originalTarget -slug: Web/API/Event/originalTarget -tags: - - API - - Cible - - DOM - - Evènement - - Propriétés - - origine -translation_of: Web/API/Event/originalTarget ---- -
{{ ApiRef("DOM") }} {{Non-standard_header}}
- -

La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)

- -

En présence de contenu anonyme XBL, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir Anonymous Content#Event_Flow_and_Targeting pour plus de détails.

- -

Note : originalTarget peut aussi être un contenu anonyme natif  (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.

- -

Voir aussi Comparaison des cibles d'évènements.

- -

Exemple

- -

Besoin d'un exemple qui ait du sens ici. ^^

- -

Spécification

- -

C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}

- -

Cette propriété d'évènements n'est pas définie dans la spécification W3.org DOM niveau 2 Events

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.originalTarget")}}

diff --git a/files/fr/web/api/event/originaltarget/index.md b/files/fr/web/api/event/originaltarget/index.md new file mode 100644 index 0000000000..810c8276a5 --- /dev/null +++ b/files/fr/web/api/event/originaltarget/index.md @@ -0,0 +1,37 @@ +--- +title: Event.originalTarget +slug: Web/API/Event/originalTarget +tags: + - API + - Cible + - DOM + - Evènement + - Propriétés + - origine +translation_of: Web/API/Event/originalTarget +--- +
{{ ApiRef("DOM") }} {{Non-standard_header}}
+ +

La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)

+ +

En présence de contenu anonyme XBL, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir Anonymous Content#Event_Flow_and_Targeting pour plus de détails.

+ +

Note : originalTarget peut aussi être un contenu anonyme natif  (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.

+ +

Voir aussi Comparaison des cibles d'évènements.

+ +

Exemple

+ +

Besoin d'un exemple qui ait du sens ici. ^^

+ +

Spécification

+ +

C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}

+ +

Cette propriété d'évènements n'est pas définie dans la spécification W3.org DOM niveau 2 Events

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.originalTarget")}}

diff --git a/files/fr/web/api/event/preventdefault/index.html b/files/fr/web/api/event/preventdefault/index.html deleted file mode 100644 index db435939bb..0000000000 --- a/files/fr/web/api/event/preventdefault/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Event.preventDefault() -slug: Web/API/Event/preventDefault -tags: - - API - - DOM - - Event - - Method - - Reference -translation_of: Web/API/Event/preventDefault -browser-compat: api.Event.preventDefault ---- -
{{apiref("DOM")}}
- -

La méthode preventDefault(), rattachée à l'interface Event, indique à l'agent utilisateur que si l'évènement n'est pas explicitement géré, l'action par défaut ne devrait pas être exécutée comme elle l'est normalement.

- -

L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque stopPropagation() ou stopImmediatePropagation() pour interrompre la propagation.

- -

Comme indiqué ci-après, appeler preventDefault() n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par EventTarget.dispatchEvent() sans avoir indiqué cancelable: true).

- -

Syntaxe

- -
event.preventDefault();
- -

Exemples

- -

Bloquer la gestion du clic par défaut

- -

Lorsqu'on clique sur une case à cocher, par défaut, cela coche ou décoche la case. Dans cet exemple, on illustre comment bloquer ce comportement par défaut :

- -

JavaScript

- -
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
-  console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci.");
-  event.preventDefault();
-}, false);
- -

HTML

- -
<p>Essayez de cliquer sur la case à cocher.</p>
-
-<form>
-  <label for="id-checkbox">Checkbox:</label>
-  <input type="checkbox" id="id-checkbox"/>
-</form>
- -

Résultat

- -

{{EmbedLiveSample("blocking_default_click_handling")}}

- -

Empêcher les pressions du clavier sur un champ texte

- -

Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à preventDefault().

- -

HTML

- -

Voici le formulaire contenant le champ texte :

- -
<form>
-  <label>Un champ texte
-    <input type="text" id="mon-champ-texte">
-  </label>
-</form>
- -

JavaScript

- -

Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour keypress :

- -
let monChampTexte = document.getElementById('mon-champ-texte');
-monChampTexte.addEventListener('keypress', bloqueSaisie, false);
- -

La fonction bloqueSaisie() empêche toute saisie au clavier :

- -
function bloqueSaisie(evt) {
-  evt.preventDefault();
-  console.log("Une saisie a été empêchée.");
-};
- -

Résultat

- -

{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}}

- -

Notes

- -

Invoquer preventDefault() à n'importe quel moment du cycle de vie d'un évènement annulera cet évènement. Cela signifie que toute action par défaut, normalement exécutée par le navigateur, n'aura pas lieu.

- -

On peut utiliser la propriété Event.cancelable afin de vérifier si un évènement est annulable. Invoquer preventDefault() sur un évènement non-annulable n'aura aucun effet.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/event/preventdefault/index.md b/files/fr/web/api/event/preventdefault/index.md new file mode 100644 index 0000000000..db435939bb --- /dev/null +++ b/files/fr/web/api/event/preventdefault/index.md @@ -0,0 +1,95 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - API + - DOM + - Event + - Method + - Reference +translation_of: Web/API/Event/preventDefault +browser-compat: api.Event.preventDefault +--- +
{{apiref("DOM")}}
+ +

La méthode preventDefault(), rattachée à l'interface Event, indique à l'agent utilisateur que si l'évènement n'est pas explicitement géré, l'action par défaut ne devrait pas être exécutée comme elle l'est normalement.

+ +

L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque stopPropagation() ou stopImmediatePropagation() pour interrompre la propagation.

+ +

Comme indiqué ci-après, appeler preventDefault() n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par EventTarget.dispatchEvent() sans avoir indiqué cancelable: true).

+ +

Syntaxe

+ +
event.preventDefault();
+ +

Exemples

+ +

Bloquer la gestion du clic par défaut

+ +

Lorsqu'on clique sur une case à cocher, par défaut, cela coche ou décoche la case. Dans cet exemple, on illustre comment bloquer ce comportement par défaut :

+ +

JavaScript

+ +
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+  console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci.");
+  event.preventDefault();
+}, false);
+ +

HTML

+ +
<p>Essayez de cliquer sur la case à cocher.</p>
+
+<form>
+  <label for="id-checkbox">Checkbox:</label>
+  <input type="checkbox" id="id-checkbox"/>
+</form>
+ +

Résultat

+ +

{{EmbedLiveSample("blocking_default_click_handling")}}

+ +

Empêcher les pressions du clavier sur un champ texte

+ +

Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à preventDefault().

+ +

HTML

+ +

Voici le formulaire contenant le champ texte :

+ +
<form>
+  <label>Un champ texte
+    <input type="text" id="mon-champ-texte">
+  </label>
+</form>
+ +

JavaScript

+ +

Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour keypress :

+ +
let monChampTexte = document.getElementById('mon-champ-texte');
+monChampTexte.addEventListener('keypress', bloqueSaisie, false);
+ +

La fonction bloqueSaisie() empêche toute saisie au clavier :

+ +
function bloqueSaisie(evt) {
+  evt.preventDefault();
+  console.log("Une saisie a été empêchée.");
+};
+ +

Résultat

+ +

{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}}

+ +

Notes

+ +

Invoquer preventDefault() à n'importe quel moment du cycle de vie d'un évènement annulera cet évènement. Cela signifie que toute action par défaut, normalement exécutée par le navigateur, n'aura pas lieu.

+ +

On peut utiliser la propriété Event.cancelable afin de vérifier si un évènement est annulable. Invoquer preventDefault() sur un évènement non-annulable n'aura aucun effet.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/event/returnvalue/index.html b/files/fr/web/api/event/returnvalue/index.html deleted file mode 100644 index 97654470d7..0000000000 --- a/files/fr/web/api/event/returnvalue/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Event.returnValue -slug: Web/API/Event/returnValue -tags: - - API - - DOM - - Propriétés - - action - - évènements -translation_of: Web/API/Event/returnValue ---- -

{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }}

- -

La propriété Event.returnValue indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à true (vrai) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à false (faux) empêche le déclenchement de l'action par défaut.

- -
-

Note : Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.

-
- -

Syntaxe

- -
event.returnValue = bool;
-var bool = event.returnValue;
-
- -

Spécifications

- -

Bien qu'elle ait été inclue dans l'ancien brouillon de travail de W3C DOM niveau 2, cette propriété ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.returnValue")}}

diff --git a/files/fr/web/api/event/returnvalue/index.md b/files/fr/web/api/event/returnvalue/index.md new file mode 100644 index 0000000000..97654470d7 --- /dev/null +++ b/files/fr/web/api/event/returnvalue/index.md @@ -0,0 +1,32 @@ +--- +title: Event.returnValue +slug: Web/API/Event/returnValue +tags: + - API + - DOM + - Propriétés + - action + - évènements +translation_of: Web/API/Event/returnValue +--- +

{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }}

+ +

La propriété Event.returnValue indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à true (vrai) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à false (faux) empêche le déclenchement de l'action par défaut.

+ +
+

Note : Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.

+
+ +

Syntaxe

+ +
event.returnValue = bool;
+var bool = event.returnValue;
+
+ +

Spécifications

+ +

Bien qu'elle ait été inclue dans l'ancien brouillon de travail de W3C DOM niveau 2, cette propriété ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.returnValue")}}

diff --git a/files/fr/web/api/event/srcelement/index.html b/files/fr/web/api/event/srcelement/index.html deleted file mode 100644 index 6b0ab681b4..0000000000 --- a/files/fr/web/api/event/srcelement/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Event.srcElement -slug: Web/API/Event/srcElement -tags: - - API - - DOM - - Evènement - - Propriétés - - Éléments SRC -translation_of: Web/API/Event/srcElement ---- -

{{ApiRef("DOM")}}

- -

{{ Non-standard_header() }}

- -

Event.srcElement est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.

- -

Spécification

- -

Ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.srcElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/event/srcelement/index.md b/files/fr/web/api/event/srcelement/index.md new file mode 100644 index 0000000000..6b0ab681b4 --- /dev/null +++ b/files/fr/web/api/event/srcelement/index.md @@ -0,0 +1,32 @@ +--- +title: Event.srcElement +slug: Web/API/Event/srcElement +tags: + - API + - DOM + - Evènement + - Propriétés + - Éléments SRC +translation_of: Web/API/Event/srcElement +--- +

{{ApiRef("DOM")}}

+ +

{{ Non-standard_header() }}

+ +

Event.srcElement est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.

+ +

Spécification

+ +

Ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.srcElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.html b/files/fr/web/api/event/stopimmediatepropagation/index.html deleted file mode 100644 index 8770b808a0..0000000000 --- a/files/fr/web/api/event/stopimmediatepropagation/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Event.stopImmediatePropagation() -slug: Web/API/Event/stopImmediatePropagation -tags: - - API - - Event - - Méthode - - Reference -translation_of: Web/API/Event/stopImmediatePropagation ---- -
{{APIRef("DOM")}}
- -

La méthode stopImmediatePropagation(), rattachée à l'interface {{domxref("Event")}}, empêche les gestionnaires d'évènement, associés à ce même évènement, d'être appelés.

- -

Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le même type d'évènement, ils sont appelés dans l'ordre dans lequel ils ont été ajoutés. Si stopImmediatePropagation() est appelé pendant un de ces appels, les gestionnaires restants ne sont pas invoqués.

- -

Syntaxe

- -
event.stopImmediatePropagation();
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.stopImmediatePropagation")}}

diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.md b/files/fr/web/api/event/stopimmediatepropagation/index.md new file mode 100644 index 0000000000..8770b808a0 --- /dev/null +++ b/files/fr/web/api/event/stopimmediatepropagation/index.md @@ -0,0 +1,42 @@ +--- +title: Event.stopImmediatePropagation() +slug: Web/API/Event/stopImmediatePropagation +tags: + - API + - Event + - Méthode + - Reference +translation_of: Web/API/Event/stopImmediatePropagation +--- +
{{APIRef("DOM")}}
+ +

La méthode stopImmediatePropagation(), rattachée à l'interface {{domxref("Event")}}, empêche les gestionnaires d'évènement, associés à ce même évènement, d'être appelés.

+ +

Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le même type d'évènement, ils sont appelés dans l'ordre dans lequel ils ont été ajoutés. Si stopImmediatePropagation() est appelé pendant un de ces appels, les gestionnaires restants ne sont pas invoqués.

+ +

Syntaxe

+ +
event.stopImmediatePropagation();
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.stopImmediatePropagation")}}

diff --git a/files/fr/web/api/event/stoppropagation/index.html b/files/fr/web/api/event/stoppropagation/index.html deleted file mode 100644 index 1f8dd6e09f..0000000000 --- a/files/fr/web/api/event/stoppropagation/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Event.stopPropagation() -slug: Web/API/Event/stopPropagation -tags: - - API - - DOM - - Evènement - - Méthode - - Reference -translation_of: Web/API/Event/stopPropagation ---- -
{{APIRef("DOM")}}
- -

Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.

- -

Syntaxe

- -
event.stopPropagation();
- -

Exemple

- -

Voir la section Exemple 5 : Propagation d'évènements dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.

- -

Notes

- -

Voir DOM specification (en)  pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon DOM Level 3 Event draft (en)).

- -

preventDefault est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}{{Spec2("DOM2 Events")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Event.stopPropagation")}}

\ No newline at end of file diff --git a/files/fr/web/api/event/stoppropagation/index.md b/files/fr/web/api/event/stoppropagation/index.md new file mode 100644 index 0000000000..1f8dd6e09f --- /dev/null +++ b/files/fr/web/api/event/stoppropagation/index.md @@ -0,0 +1,59 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +tags: + - API + - DOM + - Evènement + - Méthode + - Reference +translation_of: Web/API/Event/stopPropagation +--- +
{{APIRef("DOM")}}
+ +

Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.

+ +

Syntaxe

+ +
event.stopPropagation();
+ +

Exemple

+ +

Voir la section Exemple 5 : Propagation d'évènements dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.

+ +

Notes

+ +

Voir DOM specification (en)  pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon DOM Level 3 Event draft (en)).

+ +

preventDefault est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}{{Spec2("DOM2 Events")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Event.stopPropagation")}}

\ No newline at end of file diff --git a/files/fr/web/api/event/target/index.html b/files/fr/web/api/event/target/index.html deleted file mode 100644 index 2ab12c5de0..0000000000 --- a/files/fr/web/api/event/target/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Event.target -slug: Web/API/Event/target -tags: - - API - - Cible - - DOM - - Evènement - - Propriétés -translation_of: Web/API/Event/target ---- -

{{ ApiRef("DOM") }}

- -

C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de {{domxref("event.currentTarget")}} lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.

- -

Syntaxe

- -
laCible = event.target
- -

Exemple

- -

La propriété event.target peut être utilisée pour implémenter la délégation d'événements.

- -
// Produit une liste
-var ul = document.createElement('ul');
-document.body.appendChild(ul);
-
-var li1 = document.createElement('li');
-var li2 = document.createElement('li');
-ul.appendChild(li1);
-ul.appendChild(li2);
-
-function hide(e){
-  // e.target se réfère à l'élément <li> cliqué
-  // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte
-  e.target.style.visibility = 'hidden';
-}
-
-// Attache l'écouteur à la liste
-// Il se déclenche pour chaque <li> clické
-ul.addEventListener('click', hide, false);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.target")}}

- -

Notes concernant la compatibilité

- -

Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard {{domxref('EventTarget.attachEvent')}} . Dans ce modèle, l'objet événement a une propriété  {{domxref('Event.srcElement')}}, à la place de la propriété target, avec la même sémantique que event.target.

- -
function hide(e) {
-  // Support IE6-8
-  var target = e.target || e.srcElement;
-  target.style.visibility = 'hidden';
-}
-
- -

Voir aussi

- -

Comparaison des cibles d'évènements

diff --git a/files/fr/web/api/event/target/index.md b/files/fr/web/api/event/target/index.md new file mode 100644 index 0000000000..2ab12c5de0 --- /dev/null +++ b/files/fr/web/api/event/target/index.md @@ -0,0 +1,89 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - API + - Cible + - DOM + - Evènement + - Propriétés +translation_of: Web/API/Event/target +--- +

{{ ApiRef("DOM") }}

+ +

C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de {{domxref("event.currentTarget")}} lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.

+ +

Syntaxe

+ +
laCible = event.target
+ +

Exemple

+ +

La propriété event.target peut être utilisée pour implémenter la délégation d'événements.

+ +
// Produit une liste
+var ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+var li1 = document.createElement('li');
+var li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target se réfère à l'élément <li> cliqué
+  // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte
+  e.target.style.visibility = 'hidden';
+}
+
+// Attache l'écouteur à la liste
+// Il se déclenche pour chaque <li> clické
+ul.addEventListener('click', hide, false);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.target")}}

+ +

Notes concernant la compatibilité

+ +

Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard {{domxref('EventTarget.attachEvent')}} . Dans ce modèle, l'objet événement a une propriété  {{domxref('Event.srcElement')}}, à la place de la propriété target, avec la même sémantique que event.target.

+ +
function hide(e) {
+  // Support IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

Voir aussi

+ +

Comparaison des cibles d'évènements

diff --git a/files/fr/web/api/event/timestamp/index.html b/files/fr/web/api/event/timestamp/index.html deleted file mode 100644 index c4bc3ffe6a..0000000000 --- a/files/fr/web/api/event/timestamp/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Event.timeStamp -slug: Web/API/Event/timeStamp -tags: - - API - - DOM - - Evènement - - Propriétés - - temps -translation_of: Web/API/Event/timeStamp ---- -
{{ApiRef("DOM")}}
- -

Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.

- -
-

Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.

-
- -

Syntaxe

- -
event.timeStamp
-
- -

Valeur

- -

Cette valeur est un nombre de millisecondes écoulées depuis le début du temps de vie du document courant jusqu'à la création de l'évènement.

- -

Dans les nouvelles implémentations, la valeur est un {{domxref("DOMHighResTimeStamp")}} dont la précision est de 5 microsecondes (0,005 ms). Dans les implémentations plus anciennes, la valeur est un {{domxref("DOMTimeStamp")}} de précision d'une milliseconde.

- -

Exemple

- -

HTML

- -
<p>
-  Focus this iframe and press any key to get the
-  current timestamp for the keypress event.
-</p>
-<p>timeStamp: <span id="time">-</span></p>
- -

JavaScript

- -
function getTime(event) {
-  var time = document.getElementById("time");
-  time.firstChild.nodeValue = event.timeStamp;
-}
-document.body.addEventListener("keypress", getTime);
- -

Résultat

- -

{{EmbedLiveSample("Example", "100%", 100)}}

- -

Précision du temps réduite

- -

Pour offrir une protection contre les attaques de synchronisation et les empreintes digitales, la précision de event.timeStamp peut être arrondie en fonction des paramètres du navigateur.
- Dans Firefox, la préférence privacy.reduceTimerPrecision est activée et à 20 us par défaut dans Firefox 59 ; en version 60 ce sera 2 ms.

- -
// Précision du temps réduite (2ms) dans Firefox 60
-event.timeStamp;
-// 1519211809934
-// 1519211810362
-// 1519211811670
-// ...
-
-
-// Précision du temps réduite avec `privacy.resistFingerprinting` activé
-event.timeStamp;
-// 1519129853500
-// 1519129858900
-// 1519129864400
-// ...
- -

Dans Firefox, vous pouvez aussi activer privacy.resistFingerprinting, la précision sera de 100 ms ou la valeur de privacy.resistFingerprinting.reduceTimerPrecision.microseconds, selon la valeur la plus grande.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}}{{ Spec2('DOM4') }} 
{{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}}{{ Spec2('DOM2 Events') }}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.timeStamp")}}

diff --git a/files/fr/web/api/event/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md new file mode 100644 index 0000000000..c4bc3ffe6a --- /dev/null +++ b/files/fr/web/api/event/timestamp/index.md @@ -0,0 +1,108 @@ +--- +title: Event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - API + - DOM + - Evènement + - Propriétés + - temps +translation_of: Web/API/Event/timeStamp +--- +
{{ApiRef("DOM")}}
+ +

Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.

+ +
+

Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.

+
+ +

Syntaxe

+ +
event.timeStamp
+
+ +

Valeur

+ +

Cette valeur est un nombre de millisecondes écoulées depuis le début du temps de vie du document courant jusqu'à la création de l'évènement.

+ +

Dans les nouvelles implémentations, la valeur est un {{domxref("DOMHighResTimeStamp")}} dont la précision est de 5 microsecondes (0,005 ms). Dans les implémentations plus anciennes, la valeur est un {{domxref("DOMTimeStamp")}} de précision d'une milliseconde.

+ +

Exemple

+ +

HTML

+ +
<p>
+  Focus this iframe and press any key to get the
+  current timestamp for the keypress event.
+</p>
+<p>timeStamp: <span id="time">-</span></p>
+ +

JavaScript

+ +
function getTime(event) {
+  var time = document.getElementById("time");
+  time.firstChild.nodeValue = event.timeStamp;
+}
+document.body.addEventListener("keypress", getTime);
+ +

Résultat

+ +

{{EmbedLiveSample("Example", "100%", 100)}}

+ +

Précision du temps réduite

+ +

Pour offrir une protection contre les attaques de synchronisation et les empreintes digitales, la précision de event.timeStamp peut être arrondie en fonction des paramètres du navigateur.
+ Dans Firefox, la préférence privacy.reduceTimerPrecision est activée et à 20 us par défaut dans Firefox 59 ; en version 60 ce sera 2 ms.

+ +
// Précision du temps réduite (2ms) dans Firefox 60
+event.timeStamp;
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// Précision du temps réduite avec `privacy.resistFingerprinting` activé
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+ +

Dans Firefox, vous pouvez aussi activer privacy.resistFingerprinting, la précision sera de 100 ms ou la valeur de privacy.resistFingerprinting.reduceTimerPrecision.microseconds, selon la valeur la plus grande.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}}{{ Spec2('DOM4') }} 
{{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}}{{ Spec2('DOM2 Events') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.timeStamp")}}

diff --git a/files/fr/web/api/event/type/index.html b/files/fr/web/api/event/type/index.html deleted file mode 100644 index 7931a24a5a..0000000000 --- a/files/fr/web/api/event/type/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Event.type -slug: Web/API/Event/type -tags: - - API - - DOM - - Evènement - - Propriétés - - Type -translation_of: Web/API/Event/type ---- -

{{APIRef}}

- -

La propriété en lecture seule Event.type retourne une chaîne de caractères (string) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que  click, load ou error.

- -

L'argument event de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.

- -

Pour une liste des types d'événements disponibles, aller voir la page Référence des évènements.

- -

Syntaxe

- -
event.type
-
- -

Exemples

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-
-    <title>Event.type Example</title>
-
-    <script>
-        var currEvent;
-        function getEvtType(evt) {
-            console.group();
-
-            currEvent = evt.type;
-            console.log(currEvent);
-
-            document.getElementById("Etype").innerHTML = currEvent;
-
-            console.groupEnd();
-        }
-
-        //Évènements du clavier
-        document.addEventListener("keypress", getEvtType, false); //[second]  
-
-        document.addEventListener("keydown", getEvtType, false); //premier
-        document.addEventListener("keyup", getEvtType, false); //troisième
-
-        //Évènements de la souris
-        document.addEventListener("click", getEvtType, false); // troisième
-
-        document.addEventListener("mousedown", getEvtType, false); //premier
-        document.addEventListener("mouseup", getEvtType, false); //second
-
-    </script>
-</head>
-
-<body>
-
-<p>Press any key or click the mouse to get the event type.</p>
-<p>Event type: <span id="Etype" style="color:red">-</span></p>
-
-</body>
-</html>
- -

Résultat

- -

{{EmbedLiveSample('Example')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}{{ Spec2('DOM2 Events') }}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.type")}}

diff --git a/files/fr/web/api/event/type/index.md b/files/fr/web/api/event/type/index.md new file mode 100644 index 0000000000..7931a24a5a --- /dev/null +++ b/files/fr/web/api/event/type/index.md @@ -0,0 +1,102 @@ +--- +title: Event.type +slug: Web/API/Event/type +tags: + - API + - DOM + - Evènement + - Propriétés + - Type +translation_of: Web/API/Event/type +--- +

{{APIRef}}

+ +

La propriété en lecture seule Event.type retourne une chaîne de caractères (string) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que  click, load ou error.

+ +

L'argument event de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.

+ +

Pour une liste des types d'événements disponibles, aller voir la page Référence des évènements.

+ +

Syntaxe

+ +
event.type
+
+ +

Exemples

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+
+    <title>Event.type Example</title>
+
+    <script>
+        var currEvent;
+        function getEvtType(evt) {
+            console.group();
+
+            currEvent = evt.type;
+            console.log(currEvent);
+
+            document.getElementById("Etype").innerHTML = currEvent;
+
+            console.groupEnd();
+        }
+
+        //Évènements du clavier
+        document.addEventListener("keypress", getEvtType, false); //[second]  
+
+        document.addEventListener("keydown", getEvtType, false); //premier
+        document.addEventListener("keyup", getEvtType, false); //troisième
+
+        //Évènements de la souris
+        document.addEventListener("click", getEvtType, false); // troisième
+
+        document.addEventListener("mousedown", getEvtType, false); //premier
+        document.addEventListener("mouseup", getEvtType, false); //second
+
+    </script>
+</head>
+
+<body>
+
+<p>Press any key or click the mouse to get the event type.</p>
+<p>Event type: <span id="Etype" style="color:red">-</span></p>
+
+</body>
+</html>
+ +

Résultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}{{ Spec2('DOM2 Events') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.type")}}

diff --git a/files/fr/web/api/eventlistener/index.html b/files/fr/web/api/eventlistener/index.html deleted file mode 100644 index 8ae1a28d34..0000000000 --- a/files/fr/web/api/eventlistener/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: EventListener -slug: Web/API/EventListener -tags: - - API - - DOM - - Evènement - - Interface - - Écouteurs -translation_of: Web/API/EventListener ---- -

{{APIRef("DOM Events")}}

- -

L'interface EventListener représente un objet qui peut gérer un évènement distribué par un objet {{domxref("EventTarget")}}.

- -
-

Note : En raison du besoin de compatibilité avec le contenu existant, EventListener accepte à la fois une fonction et un objet avec une fonction de propriété handleEvent. Ceci est illustré dans l'exemple ci-dessous.

-
- -

Propriétés

- -

Cette interface n'implémente ni n'hérite d'aucune propriété.

- -

Méthodes

- -

Cette interface n'hérite d'aucune méthode.

- -
-
{{domxref("EventListener.handleEvent()")}}
-
une fonction qui est appelée lorsque se produit un événement du type spécifié.
-
- -

Exemple

- -

HTML

- -
<button id="btn">Click here!</button>
- -

JavaScript

- -

 

- -
const buttonElement = document.getElementById('btn');
-
-// Ajoute un gestionnaire pour l'évènement 'click' qui fournit une fonction de rappel.
-// Chaque fois que l'élément est cliqué, une fenêtre contextuelle avec "Élément clické!"
-// apparaîtra.
-buttonElement.addEventListener('click', function (event) {
-  alert('Element clicked through function!');
-});
-
-// Pour la compatibilité, un objet qui n'est pas une fonction avec une propriété `handleEvent` (gestion d'évènement)
-// sera traitée exactement comme la fonction elle-même.
-buttonElement.addEventListener('click', {
-  handleEvent: function (event) {
-    alert('Element clicked through handleEvent property!');
-  }
-});
- -

Résultat

- -

{{EmbedLiveSample('Example')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#callbackdef-eventlistener', 'EventListener')}}{{Spec2('DOM WHATWG')}}Pas de changement.
{{SpecName('DOM2 Events', '#Events-EventListener', 'EventListener')}}{{Spec2('DOM2 Events')}}Définition initiale.
diff --git a/files/fr/web/api/eventlistener/index.md b/files/fr/web/api/eventlistener/index.md new file mode 100644 index 0000000000..8ae1a28d34 --- /dev/null +++ b/files/fr/web/api/eventlistener/index.md @@ -0,0 +1,86 @@ +--- +title: EventListener +slug: Web/API/EventListener +tags: + - API + - DOM + - Evènement + - Interface + - Écouteurs +translation_of: Web/API/EventListener +--- +

{{APIRef("DOM Events")}}

+ +

L'interface EventListener représente un objet qui peut gérer un évènement distribué par un objet {{domxref("EventTarget")}}.

+ +
+

Note : En raison du besoin de compatibilité avec le contenu existant, EventListener accepte à la fois une fonction et un objet avec une fonction de propriété handleEvent. Ceci est illustré dans l'exemple ci-dessous.

+
+ +

Propriétés

+ +

Cette interface n'implémente ni n'hérite d'aucune propriété.

+ +

Méthodes

+ +

Cette interface n'hérite d'aucune méthode.

+ +
+
{{domxref("EventListener.handleEvent()")}}
+
une fonction qui est appelée lorsque se produit un événement du type spécifié.
+
+ +

Exemple

+ +

HTML

+ +
<button id="btn">Click here!</button>
+ +

JavaScript

+ +

 

+ +
const buttonElement = document.getElementById('btn');
+
+// Ajoute un gestionnaire pour l'évènement 'click' qui fournit une fonction de rappel.
+// Chaque fois que l'élément est cliqué, une fenêtre contextuelle avec "Élément clické!"
+// apparaîtra.
+buttonElement.addEventListener('click', function (event) {
+  alert('Element clicked through function!');
+});
+
+// Pour la compatibilité, un objet qui n'est pas une fonction avec une propriété `handleEvent` (gestion d'évènement)
+// sera traitée exactement comme la fonction elle-même.
+buttonElement.addEventListener('click', {
+  handleEvent: function (event) {
+    alert('Element clicked through handleEvent property!');
+  }
+});
+ +

Résultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#callbackdef-eventlistener', 'EventListener')}}{{Spec2('DOM WHATWG')}}Pas de changement.
{{SpecName('DOM2 Events', '#Events-EventListener', 'EventListener')}}{{Spec2('DOM2 Events')}}Définition initiale.
diff --git a/files/fr/web/api/eventsource/close/index.html b/files/fr/web/api/eventsource/close/index.html deleted file mode 100644 index d7289f87ef..0000000000 --- a/files/fr/web/api/eventsource/close/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: EventSource.close() -slug: Web/API/EventSource/close -tags: - - API - - EventSource - - Evénement serveur - - Fonction - - Méthode - - Reference - - Server-sent events - - close -translation_of: Web/API/EventSource/close ---- -
{{APIRef('WebSockets API')}}
- -

La fonction close() de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur 2 (closed).

- -
-

Note : Si la connexion est déjà fermé, la fonction n'agit pas.

-
- -

Syntaxe

- -
eventSource.close();
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Nulle.

- -

Exemples

- -
var bouton = document.querySelector('button');
-var evtSource = new EventSource('sse.php');
-
-bouton.onclick = function() {
-  console.log('Connection fermée');
-  evtSource.close();
-}
-
- -
-

Note : Vous pouvez trouver un exemple complet sur GitHub — voir Demo simple de SSE utilisant PHP.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "comms.html#dom-eventsource-close", "close()")}}{{Spec2('HTML WHATWG')}}Initial definition
- - - -

Compatibilité des navigateurs

- -

{{Compat("api.EventSource.close")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/eventsource/close/index.md b/files/fr/web/api/eventsource/close/index.md new file mode 100644 index 0000000000..d7289f87ef --- /dev/null +++ b/files/fr/web/api/eventsource/close/index.md @@ -0,0 +1,78 @@ +--- +title: EventSource.close() +slug: Web/API/EventSource/close +tags: + - API + - EventSource + - Evénement serveur + - Fonction + - Méthode + - Reference + - Server-sent events + - close +translation_of: Web/API/EventSource/close +--- +
{{APIRef('WebSockets API')}}
+ +

La fonction close() de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur 2 (closed).

+ +
+

Note : Si la connexion est déjà fermé, la fonction n'agit pas.

+
+ +

Syntaxe

+ +
eventSource.close();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Nulle.

+ +

Exemples

+ +
var bouton = document.querySelector('button');
+var evtSource = new EventSource('sse.php');
+
+bouton.onclick = function() {
+  console.log('Connection fermée');
+  evtSource.close();
+}
+
+ +
+

Note : Vous pouvez trouver un exemple complet sur GitHub — voir Demo simple de SSE utilisant PHP.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "comms.html#dom-eventsource-close", "close()")}}{{Spec2('HTML WHATWG')}}Initial definition
+ + + +

Compatibilité des navigateurs

+ +

{{Compat("api.EventSource.close")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/eventsource/index.html b/files/fr/web/api/eventsource/index.html deleted file mode 100644 index 3ad72e5065..0000000000 --- a/files/fr/web/api/eventsource/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: EventSource -slug: Web/API/EventSource -tags: - - API - - Interface - - Reference -translation_of: Web/API/EventSource ---- -
{{APIRef("Websockets API")}}
- -

L'interface EventSource est utilisée afin de recevoir des évènements envoyés par le serveur. Elle se connecte à un serveur via HTTP et reçoit des évènements au format text/event-stream avant de clôturer la connexion.

- -

Constructeur

- -
-
{{domxref("EventSource.EventSource", "EventSource()")}}
-
Cette méthode crée un nouvel objet EventSource à partir de l'objet {{domxref("USVString")}} fourni.
-
- -

Propriétés

- -

Cette interface hérite également des propriétés fournies par l'objet parent : {{domxref("EventTarget")}}.

- -
-
{{domxref("EventSource.readyState")}} {{readonlyinline}}
-
Un nombre qui représente l'état de la connexion. Les valeurs possibles sont CONNECTING (0) (connexion en cours), OPEN (1) (connexion ouverte), ou CLOSED (2) (connexion fermée).
-
{{domxref("EventSource.url")}} {{readonlyinline}}
-
Un objet {{domxref("DOMString")}} qui représente l'URL de la source.
-
{{domxref("EventSource.withCredentials")}} {{readonlyinline}}
-
Un booléen qui indique si l'objet EventSource a été instancié avec les paramètres d'authentification CORS (true) ou non (false, la valeur par défaut).
-
- -

Gestionnaires d'évènement

- -
-
{{domxref("EventSource.onerror")}}
-
Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'une erreur se produit et que l'évènement {{event("error")}} est envoyé à l'objet EventSource.
-
{{domxref("EventSource.onmessage")}}
-
Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un évènement {{event("message")}} est reçu (ce qui signifie qu'on a reçu un message de la source).
-
{{domxref("EventSource.onopen")}}
-
Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un évènement {{event("open")}} est reçu, ce qui indique que la connexion vient d'être ouverte.
-
- -

Méthodes

- -

Cette interface hérite également de méthodes grâce à son objet parent : {{domxref("EventTarget")}}.

- -
-
{{domxref("EventSource.close()")}}
-
Cette méthode ferme la connexion s'il y en a une en cours et change la valeur de l'attribut readyState en CLOSED. Si la connexion est déjà fermée, la méthode ne fait rien.
-
- -

Exemples

- -
var evtSource = new EventSource('sse.php');
-var eventList = document.querySelector('ul');
-
-evtSource.onmessage = function(e) {
-  var newElement = document.createElement("li");
-
-  newElement.textContent = "message: " + e.data;
-  eventList.appendChild(newElement);
-}
- -
-

Note : Un exemple complet est disponible sur GitHub, voir la démonstration SSE avec PHP.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.EventSource")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/eventsource/index.md b/files/fr/web/api/eventsource/index.md new file mode 100644 index 0000000000..3ad72e5065 --- /dev/null +++ b/files/fr/web/api/eventsource/index.md @@ -0,0 +1,95 @@ +--- +title: EventSource +slug: Web/API/EventSource +tags: + - API + - Interface + - Reference +translation_of: Web/API/EventSource +--- +
{{APIRef("Websockets API")}}
+ +

L'interface EventSource est utilisée afin de recevoir des évènements envoyés par le serveur. Elle se connecte à un serveur via HTTP et reçoit des évènements au format text/event-stream avant de clôturer la connexion.

+ +

Constructeur

+ +
+
{{domxref("EventSource.EventSource", "EventSource()")}}
+
Cette méthode crée un nouvel objet EventSource à partir de l'objet {{domxref("USVString")}} fourni.
+
+ +

Propriétés

+ +

Cette interface hérite également des propriétés fournies par l'objet parent : {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.readyState")}} {{readonlyinline}}
+
Un nombre qui représente l'état de la connexion. Les valeurs possibles sont CONNECTING (0) (connexion en cours), OPEN (1) (connexion ouverte), ou CLOSED (2) (connexion fermée).
+
{{domxref("EventSource.url")}} {{readonlyinline}}
+
Un objet {{domxref("DOMString")}} qui représente l'URL de la source.
+
{{domxref("EventSource.withCredentials")}} {{readonlyinline}}
+
Un booléen qui indique si l'objet EventSource a été instancié avec les paramètres d'authentification CORS (true) ou non (false, la valeur par défaut).
+
+ +

Gestionnaires d'évènement

+ +
+
{{domxref("EventSource.onerror")}}
+
Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'une erreur se produit et que l'évènement {{event("error")}} est envoyé à l'objet EventSource.
+
{{domxref("EventSource.onmessage")}}
+
Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un évènement {{event("message")}} est reçu (ce qui signifie qu'on a reçu un message de la source).
+
{{domxref("EventSource.onopen")}}
+
Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un évènement {{event("open")}} est reçu, ce qui indique que la connexion vient d'être ouverte.
+
+ +

Méthodes

+ +

Cette interface hérite également de méthodes grâce à son objet parent : {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.close()")}}
+
Cette méthode ferme la connexion s'il y en a une en cours et change la valeur de l'attribut readyState en CLOSED. Si la connexion est déjà fermée, la méthode ne fait rien.
+
+ +

Exemples

+ +
var evtSource = new EventSource('sse.php');
+var eventList = document.querySelector('ul');
+
+evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+ +
+

Note : Un exemple complet est disponible sur GitHub, voir la démonstration SSE avec PHP.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.EventSource")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/eventsource/onopen/index.html b/files/fr/web/api/eventsource/onopen/index.html deleted file mode 100644 index 64b0d58fb9..0000000000 --- a/files/fr/web/api/eventsource/onopen/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: EventSource.onopen -slug: Web/API/EventSource/onopen -tags: - - API - - Event Handler - - EventSource - - Propriété - - Reference -translation_of: Web/API/EventSource/onopen ---- -
{{APIRef('Server Sent Events')}}
- -

La propriété onopen de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie.

- -

Syntaxe

- -
eventSource.onopen = function
- -

Exemples

- -
evtSource.onopen = function() {
-  console.log("Connexion au serveur établie.");
-};
- -
-

Note : Vous pouvez trouver un exemple complet sur GitHub — voir Simple SSE demo using PHP.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}{{Spec2('HTML WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.EventSource.onopen")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/eventsource/onopen/index.md b/files/fr/web/api/eventsource/onopen/index.md new file mode 100644 index 0000000000..64b0d58fb9 --- /dev/null +++ b/files/fr/web/api/eventsource/onopen/index.md @@ -0,0 +1,55 @@ +--- +title: EventSource.onopen +slug: Web/API/EventSource/onopen +tags: + - API + - Event Handler + - EventSource + - Propriété + - Reference +translation_of: Web/API/EventSource/onopen +--- +
{{APIRef('Server Sent Events')}}
+ +

La propriété onopen de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie.

+ +

Syntaxe

+ +
eventSource.onopen = function
+ +

Exemples

+ +
evtSource.onopen = function() {
+  console.log("Connexion au serveur établie.");
+};
+ +
+

Note : Vous pouvez trouver un exemple complet sur GitHub — voir Simple SSE demo using PHP.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}{{Spec2('HTML WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.EventSource.onopen")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.html b/files/fr/web/api/eventtarget/addeventlistener/index.html deleted file mode 100644 index 8165dcccdf..0000000000 --- a/files/fr/web/api/eventtarget/addeventlistener/index.html +++ /dev/null @@ -1,886 +0,0 @@ ---- -title: EventTarget.addEventListener() -slug: Web/API/EventTarget/addEventListener -tags: - - API - - Cible - - DOM - - Evènement - - Gestionnaires d'évènements - - JavaScript - - Méthode - - Méthodes - - Reference - - Réception d'Évènements - - attachEvent - - Écouteurs - - Écouteurs d'Évènements - - AccessOuterData - - Detecting Events - - Event Handlers - - Event Listener - - EventTarget - - Method - - PassingData - - Receiving Events - - addEventListener - - events - - mselementresize -translation_of: Web/API/EventTarget/addEventListener ---- -

{{APIRef("DOM Events")}}

- -

>La méthode addEventListener() de {{domxref("EventTarget")}} attache une fonction à appeler chaque fois que l'évènement spécifié est envoyé à la cible.

- -

Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} lui-même et une {{domxref("Window")}}, mais on peut tout à fait cible n'importe quel objet prenant en charge les évènements (comme {{domxref("XMLHttpRequest")}}).

- -

addEventListener() agit en ajoutant une fonction ou un objet qui implémente {{domxref("EventListener")}} à la liste des gestionnaires d'évènement pour le type d'évènement spécifié sur la cible ({{domxref("EventTarget")}}) à partir de laquelle il est appelé.

- -

Syntaxe

- -
target.addEventListener(type, listener [, options]);
-target.addEventListener(type, listener [, useCapture]);
-target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla uniquement
- - -

Paramètres

- -
-
type
-
Une chaîne sensible à la casse représentant le type d'évènement à écouter.
-
listener
-
L'objet qui recevra un évènement (c'est-à-dire un objet qui implémente l'interface {{domxref("Event")}}) lorsqu'un évènement du type spécifié se produit. Cet argument doit être un objet implémentant l'interface {{domxref("EventListener")}} ou une fonction JavaScript. Voir {{anch("The_event_listener_callback", "Fonction de rappel (callback pour le gestionnaire d'évènement)")}} pour plus de détails sur le fonctionnement d'une fonction de rappel.
-
options {{optional_inline}}
-
Un objet options spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont : -
-
capture
-
Un booléen ({{jsxref("Boolean")}}) indiquant que les évènements de ce type seront distribués à l'listener enregistré avant d'être distribués à tout EventTarget située en dessous dans l'arborescence DOM.
-
once
-
Un booléen ({{jsxref("Boolean")}}) indiquant que listener doit être invoqué au plus une fois après avoir été ajouté. Si true (vrai), listener sera automatiquement supprimé après son appel.
-
passive
-
Un booléen ({{jsxref("Boolean")}}) qui, si true, indique que la fonction spécifiée par listener n'appellera jamais {{domxref("Event.preventDefault", "preventDefault()")}}. Si un écouteur passif appelle preventDefault(), l'agent utilisateur ne fera rien d'autre que de générer un avertissement dans la console. Voir {{anch("Improving_scrolling_performance_with_passive_listeners","Améliorer les performances du défilement avec des gestionnaires passifs")}} pour en apprendre davantage.
-
mozSystemGroup {{non-standard_inline}}
-
Un booléen ({{jsxref("Boolean")}}) indiquant que l'écouteur doit être ajouté au groupe système. Disponible uniquement pour le code s'exécutant dans XBL ou dans le {{glossary("chrome")}} du navigateur Firefox.
-
-
-
useCapture {{optional_inline}}
-
Un booléen ({{jsxref("Boolean")}}) indiquant si les évènements de ce type seront distribués au listener enregistré avant d'être distribués à toute EventTarget (« cible d'évènement ») située en dessous dans l'arborescence DOM. Les évènements qui se propagent vers le haut dans l'arborescence ne déclencheront pas un écouteur indiqué comme utilisant la capture. La propagation et la capture d'évènements sont deux manières de propager des évènements qui se produisent dans un élément imbriqué dans un autre, lorsque les deux éléments ont enregistré un gestionnaire pour cet évènement. Le mode de propagation de l'évènement détermine l'ordre dans lequel les éléments reçoivent l'évènement. Voir les DOM Level 3 Events et JavaScript Event order pour une explication détaillée. S'il n'est pas spécifié, useCapture aura false comme valeur par défaut.
-
- -
-

Note : Pour les écouteurs attachés à la cible d'évènement, l'évènement se trouve dans la phase cible, plutôt que dans les phases de propagation et de capture. Les évènements dans la phase cible déclencheront tous les écouteurs d'un élément dans l'ordre où ils ont été enregistrés, indépendamment du paramètre useCapture.

-
- -
-

Note : useCapture n'a pas toujours été facultatif. Idéalement, vous devriez l'inclure pour une compatibilité navigateur la plus large possible.

-
- -
-
wantsUntrusted {{Non-standard_inline}}
-
Un paramètre spécifique à Firefox (Gecko). Si true, l'écouteur reçoit les évènements synthétiques distribués par le contenu web (le défaut est false pour le {{glossary("chrome")}} du navigateur et true pour les pages web ordinaires). Ce paramètre est utile pour le code qui se trouve dans les compléments, ainsi que pour le navigateur lui-même.
-
- -

Valeur de retour

- -

undefined

- -

Notes d'utilisation

- -

Utilisation d'une fonction de rappel (callback)

- -

L'écouteur d'évènement peut être spécifié, soit comme une fonction de rappel (callback), soit comme un objet qui implémente {{domxref("EventListener")}} dont la méthode {{domxref("EventListener.handleEvent", "handleEvent()")}} sert de fonction de rappel.

- -

La fonction de rappel reçoit les mêmes paramètres et fournit la même valeur de retour que la méthode handleEvent() ; c'est-à-dire que le rappel accepte un seul paramètre : un objet basé sur {{domxref("Event")}} décrivant l'évènement qui s'est produit, et il ne retourne rien.

- -

Par exemple, un rappel de gestionnaire d'évènements pouvant être utilisé pour gérer à la fois {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} et {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} peut ressembler à ceci :

- -
-function eventHandler(event) {
-  if (event.type == 'fullscreenchange') {
-    /* gérer un passage en plein écran */
-  } else /* fullscreenerror */ {
-    /* gérer une erreur de passage en plein écran */
-  }
-}
-
- -

Détection la prise en charge d'options

- -

Dans les anciennes versions de la spécification DOM, le troisième paramètre de addEventListener() était une valeur booléenne indiquant s'il fallait ou non utiliser la capture. Au fil du temps, il est devenu clair que davantage d'options étaient nécessaires. Plutôt que d'ajouter davantage de paramètres à la fonction (ce qui complique énormément les choses lors du traitement des valeurs optionnelles), le troisième paramètre a été changé en un objet pouvant contenir diverses propriétés définissant les valeurs des options pour configurer le processus de suppression de l'écouteur d'évènement.

- -

Du fait que les navigateurs anciens supposent toujours que le troisième paramètre est un booléen, vous devez construire votre code de façon à gérer ce scénario intelligemment. Vous pouvez le faire en utilisant la détection de fonctionnalité pour chacune des options qui vous intéresse.

- -

Par exemple, si vous voulez vérifier l'option passive :

- -
-let passiveSupported = false;
-
-try {
-  let options = Object.defineProperty({}, "passive", {
-    get: function() {
-      passiveSupported = true;
-    }
-  });
-
-  window.addEventListener("test", null, options);
-  window.removeEventListener("test", null, options);
-} catch(err) {
-  passiveSupported = false;
-}
-
- -

Cela crée un objet options avec une fonction accesseur pour la propriété passive ; l'accesseur initialise un indicateur, passiveSupported, à true si elle est appelée. Cela signifie que si le navigateur vérifie la valeur de la propriété passive dans l'objet options, passiveSupported sera initialisé à true ; sinon, il restera false. Nous appelons alors addEventListener() pour installer un faux gestionnaire d'évènements, en spécifiant ces options, se sorte qu'elles soient vérifiées si le navigateur reconnaît un objet comme troisième paramètre. Ensuite, nous appelons removeEventListener() pour faire le ménage après notre passage. (Notez que handleEvent() est ignoré dans les écouteurs d'évènements qui ne sont pas appelés).

- -

Vous pouvez vérifier de cette façon si une option quelconque est supportée. Ajoutez simplement un accesseur pour cette option en utilisant un code similaire à celui montré ci-dessus.

- -

Ensuite, lorsque vous voulez créer un écouteur d'évènements réel qui utilise les options en question, vous pouvez faire quelque chose comme ce qui suit :

- -
-someElement.addEventListener(
-  "mouseup",
-  handleMouseUp,
-  passiveSupported ? { passive: true } : false
-);
-
- -

Ici, nous ajoutons un écouteur pour l'évènement {{domxref("Element/mouseup_event", "mouseup")}} dans l'élément someElement. Pour le troisième paramètre, si passiveSupported est true, nous spécifions un objet options avec passive initialisée à true ; sinon, nous savons que nous devons passer un Boolean, et nous passons false comme valeur du paramètre useCapture.

- -

Si vous préférez, vous pouvez utiliser une bibliothèque tierce comme Modernizr ou Detect It pour faire ce test pour vous.

- -

Vous pouvez en apprendre davantage dans l'article à propos des EventListenerOptions du Groupe Web Incubator Community.

- -

Exemples

- -

Ajouter un écouteur simple

- -

Cet exemple montre comment utiliser addEventListener() pour surveiller les clics de souris sur un élément.

- -

HTML

- -
-<table id="outside">
-  <tr><td id="t1">un</td></tr>
-  <tr><td id="t2">deux</td></tr>
-</table>
-
- -

JavaScript

- -
-// Fonction pour changer le contenu de t2
-function modifyText() {
-  const t2 = document.querySelector("#t2");
-  if (t2.firstChild.nodeValue == "trois") {
-    t2.firstChild.nodeValue = "deux";
-  } else {
-    t2.firstChild.nodeValue = "trois";
-  }
-}
-
-// Ajouter un écouteur d'évènements à la table
-const el = document.querySelector("#outside");
-el.addEventListener("click", modifyText, false);
-
- -

Dans ce code, modifyText() est un écouteur pour les évènements click enregistré en utilisant addEventListener(). Un clic n'importe où sur la table se propagera jusqu'au gestionnaire et exécutera modifyText().

- -

Résultat

- -

{{EmbedLiveSample('Add_a_simple_listener')}}

- -

Écouteur d'évènement avec une fonction anonyme

- -

Ici, nous allons voir comment utiliser une fonction anonyme pour passer des paramètres à l'écouteur d'évènements.

- -

HTML

- -
-<table id="outside">
-  <tr><td id="t1">un</td></tr>
-  <tr><td id="t2">deux</td></tr>
-</table>
-
- -

JavaScript

- -
-// Fonction pour changer le contenu de t2
-function modifyText(newText) {
-  const t2 = document.querySelector("#t2");
-  t2.firstChild.nodeValue = newText;
-}
-
-// Fonction pour ajouter un écouteur d'évènement à la table
-const el = document.querySelector("#outside");
-el.addEventListener("click", function(){modifyText("quatre")}, false);
-
- -

Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut à son tour envoyer des paramètres à la fonction modifyText(), qui est responsable de la réponse effective à l'évènement.

- -

Résultat

- -

{{EmbedLiveSample('Event_listener_with_anonymous_function')}}

- -

Écouteur d'évènement avec une fonction fléchée

- -

Cet exemple montre un écouteur d'évènement simple implémenté en utilisant la notation de fonction fléchée.

- -

HTML

- -
-<table id="outside">
-  <tr><td id="t1">un</td></tr>
-  <tr><td id="t2">deux</td></tr>
-</table>
-
- -

JavaScript

- -
-// Fonction pour changer le contenu de t2
-function modifyText(newText) {
-  const t2 = document.querySelector("#t2");
-  t2.firstChild.nodeValue = newText;
-}
-
-// Ajouter un écouteur d'évènements à la table avec une fonction fléchée
-const el = document.querySelector("#outside");
-el.addEventListener("click", () => {
-  modifyText("quatre");
-}, false);
- -

Résultat

- -

{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}

- -

Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons this différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons this, les fonctions fléchées héritent la liaison this de la fonction contenante. Voir la page sur l'opérateur this pour plus d'informations.

- -

Cela signifie que les variables et constantes disponibles pour la fonction contenante sont aussi disponibles pour le gestionnaire d'évènements lors de l'utilisation d'une fonction fléchée.

- -

Exemple d'utilisation des options

- -

HTML

- -
-<div class="outer">
-  extérieur, once & none-once
-  <div class="middle" target="_blank">
-    milieu, capture & none-capture
-    <a class="inner1" href="https://www.mozilla.org" target="_blank">
-      intérieur1, passive & preventDefault (ce qui n'est pas autorisé)
-    </a>
-    <a class="inner2" href="/" target="_blank">
-      intérieur2, none-passive & preventDefault (nouvelle page non ouverte)
-    </a>
-  </div>
-</div>
-
- -

CSS

- -
-.outer,
-.middle,
-.inner1,
-.inner2 {
-  display: block;
-  width: 520px;
-  padding: 15px;
-  margin: 15px;
-  text-decoration: none;
-}
-.outer {
-  border: 1px solid red;
-  color: red;
-}
-.middle {
-  border: 1px solid green;
-  color: green;
-  width: 460px;
-}
-.inner1,
-.inner2 {
-  border: 1px solid purple;
-  color: purple;
-  width: 400px;
-}
-
- -

JavaScript

- -
-const outer = document.querySelector('.outer');
-const middle = document.querySelector('.middle');
-const inner1 = document.querySelector('.inner1');
-const inner2 = document.querySelector('.inner2');
-
-const capture = {
-  capture: true
-};
-const noneCapture = {
-  capture: false
-};
-const once = {
-  once: true
-};
-const noneOnce = {
-  once: false
-};
-const passive = {
-  passive: true
-};
-const nonePassive = {
-  passive: false
-};
-
-outer.addEventListener('click', onceHandler, once);
-outer.addEventListener('click', noneOnceHandler, noneOnce);
-middle.addEventListener('click', captureHandler, capture);
-middle.addEventListener('click', noneCaptureHandler, noneCapture);
-inner1.addEventListener('click', passiveHandler, passive);
-inner2.addEventListener('click', nonePassiveHandler, nonePassive);
-
-function onceHandler(event) {
-  console.log('extérieur, once');
-}
-function noneOnceHandler(event) {
-  console.log('extérieur, none-once, default');
-}
-function captureHandler(event) {
-  // event.stopImmediatePropagation();
-  console.log('milieur, capture');
-}
-function noneCaptureHandler(event) {
-  console.log('milieur, none-capture, default');
-}
-function passiveHandler(event) {
-  // Impossible d'utiliser preventDefault à l'intérieur de l'invocation d'un écouteur d'évènements passif.
-  event.preventDefault();
-  console.log('intérieur1, passive, nouvelle page ouverte');
-}
-function nonePassiveHandler(event) {
-  event.preventDefault();
-  // event.stopPropagation();
-  console.log('intérieur2, none-passive, default, nouvelle page non ouverte');
-}
-
- -

Résultat

- -

Cliquez les conteneurs extérieur, milieu, intérieurs respectivement pour voir comment les options fonctionnent. Vous pouvez ouvrir la console pour observer les différents messages émis.

- -

{{EmbedLiveSample('Example_of_options_usage', '', '320')}}

- -

Avant d'utiliser une valeur particulière dans l'objet options, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely_detecting_option_support", "Détection sûre du support des options")}} pour les détails.

- -

Ajout d'un écouteur annulable

- -

Cet exemple montre comment ajouter un addEventListener() qui peut être interrompu par un {{domxref("AbortSignal")}}.

- -

HTML

- -
-<table id="outside">
-  <tr><td id="t1">un</td></tr>
-  <tr><td id="t2">deux</td></tr>
-</table>
-
- -

JavaScript

- -
-// Ajout d'un écouteur d'évènement annulable à la table
-const controller = new AbortController();
-const el = document.querySelector("#outside");
-el.addEventListener("click", modifyText, { signal: controller.signal });
-
-// Fonction permettant de modifier le contenu de t2
-function modifyText() {
-  const t2 = document.querySelector("#t2");
-  if (t2.firstChild.nodeValue == "trois") {
-    t2.firstChild.nodeValue = "deux";
-  } else {
-    t2.firstChild.nodeValue = "trois";
-    controller.abort(); // supprime l'écouteur lorsque la valeur est "trois".
-  }
-}
-
- -

Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simple_listener', 'Ajouter un écouteur simple')}} de telle sorte qu'après que le contenu de la deuxième ligne soit devenu « trois », nous appelons abort() à partir du {{domxref("AbortController")}} que nous avons passé à l'appel addEventListener(). Cela a pour résultat que la valeur reste à "trois" pour toujours, parce que nous n'avons plus de code écoutant un évènement de clic.

- -

Résultat

- -

{{EmbedLiveSample('Add_a_abortable_listener')}}

- -

Autres notes

- -

Pourquoi utiliser addEventListener() ?

- -

addEventListener est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants :

- - - -

L'ancienne manière alternative d'enregistrer des évènements est décrite ci-dessous.

- -

Ajout d'un écouteur pendant la distribution d'un évènement

- -

Si un {{domxref("EventListener")}} est ajouté à une {{domxref("EventTarget")}} pendant qu'elle traite un évènement, cet évènement ne déclenchera l'écouteur. Cependant, le même écouteur pourra être déclenché à une étape ultérieure du flux d'évènements, telle que la phase de propagation.

- -

Écouteurs d'évènements identiques multiples

- -

Si des EventListener identiques multiples sont enregistrés sur la même EventTarget avec les mêmes paramètres, les instances dupliquées sont supprimées. Elles ne provoqueront pas un appel en double de l'EventListener, et elles n'ont pas besoin d'être enlevées avec la méthode {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}}.

- -

Notez toutefois que lors de l'utilisation d'une fonction anonyme comme gestionnaire, de tels écouteurs ne seront PAS identiques, du fait que les fonctions anonymes ne sont pas identiques, même si définies en utilisant le MÊME code source inchangé, simplement appelé répétitivement, même dans une boucle.

- -

Cependant, le fait de définir répétitivement la même fonction nommée dans de tels cas peut être davantage problématique. (Voir Problèmes de mémoire ci-dessous.)

- -

La valeur de "this" à l'intérieur du gestionnaire

- -

Il est souvent souhaitable de référencer l'élément sur lequel le gestionnaire d'évènements a été déclenché, comme lors de l'utilisation d'un gestionnaire générique pour un ensemble d'éléments similaires.

- -

Lorsqu'une fonction gestionnaire est attachée à un élément en utilisant addEventListener(), la valeur de {{jsxref("Operators/this","this")}} à l'intérieur du gestionnaire est une référence à l'élément. C'est la même valeur que celle de la propriété currentTarget de l'argument évènement qui est passé au gestionnaire.

- -
-my_element.addEventListener('click', function(e) {
-  console.log(this.className)           // journalise le className de my_element
-  console.log(e.currentTarget === this) // journalise `true`
-})
-
- -

Pour mémoire, les fonctions fléchées n'ont pas de this lié.

- -
-my_element.addEventListener('click', (e) => {
-  console.log(this.className)           // ATTENTION : `this` n'est pas `my_element`
-  console.log(e.currentTarget === this) // journalise `false`
-})
-
- -

Si un gestionnaire d'évènements (par exemple, {{domxref("GlobalEventHandlers.onclick", "onclick")}}) est spécifié sur un élément dans la source HTML, le code JavaScript dans la valeur de l'attribut est effectivement encapsulé dans une fonction du gestionnaire qui lie la valeur de this d'une manière cohérente avec le addEventListener() ; une occurrence de this dans le code représente une référence à l'élément.

- -
-<table id="my_table" onclick="console.log(this.id);">
-<!-- `this` fait référence à la table ; journalise 'my_table' -->
-  ...
-</table>
-
- -

Notez que la valeur de this à l'intérieur d'une fonction, appelée par le code dans la valeur de l'attribut, se comporte selon les règles standard. Ceci est illustré dans l'exemple suivant :

- -
-<script>
-  function logID() { console.log(this.id); }
-</script>
-<table id="my_table" onclick="logID();">
-<!-- lorsqu'appelée, `this` fera référence à l'objet global -->
-  ...
-</table>
-
- -

La valeur de this à l'intérieur de logID est une référence à l'objet global {{domxref("Window")}} (ou undefined dans le cas du mode strict).

- -

Spécification de "this" en utilisant bind()

- -

La méthode {{jsxref("Function.prototype.bind()")}} vous permet de spécifier la valeur qui doit être utilisée comme this pour tous les appels à une fonction donnée. Cette méthode vous permet de contourner facilement les problèmes dans lesquels ce que this sera n'est pas clair, en fonction du contexte depuis lequel votre fonction a été appelée. Notez toutefois que vous aurez besoin de conserver quelque part une référence à l'écouteur, de façon à pouvoir le supprimer ultérieurement.

- -

Ceci est un exemple avec et sans bind() :

- -
-const Something = function(element) {
-  // |this| est un objet nouvellement créé
-  this.name = 'Quelque chose de bon';
-  this.onclick1 = function(event) {
-    console.log(this.name); // undefined, car |this| est l'élément
-  };
-  this.onclick2 = function(event) {
-    console.log(this.name); // 'Quelque chose de bon', car |this| est lié à l'objet nouvellement créé
-  };
-  element.addEventListener('click', this.onclick1, false);
-  element.addEventListener('click', this.onclick2.bind(this), false); // Astuce
-}
-const s = new Something(document.body);
-
- -

Une autre solution consiste à utiliser une fonction spéciale appelée handleEvent() to intercepter tous les évènements :

- -
-const Something = function(element) {
-  // |this| est un objet nouvellement créé
-  this.name = 'Quelque chose de bon';
-  this.handleEvent = function(event) {
-    console.log(this.name); // "Quelque chose de bon", car |this| est lié à l'objet nouvellement créé.
-    switch(event.type) {
-      case 'click':
-        // un peu de code ici...
-        break;
-      case 'dblclick':
-        // un peu de code ici...
-        break;
-    }
-  };
-
-  // Notez que les écouteurs dans ce cas sont |this|, et non this.handleEvent
-  element.addEventListener('click', this, false);
-  element.addEventListener('dblclick', this, false);
-
-  // Vous pouvez retirer correctement les écouteurs
-  element.removeEventListener('click', this, false);
-  element.removeEventListener('dblclick', this, false);
-}
-const s = new Something(document.body);
-
- -

Une autre manière de gérer la référence à this est de passer à l'EventListener une fonction qui appelle la méthode de l'objet qui contient les champs auxquels on a besoin d'accéder :

- -
-class SomeClass {
-
-  constructor() {
-    this.name = 'Quelque chose de bon';
-  }
-
-  register() {
-    const that = this;
-    window.addEventListener('keydown', function(e) { that.someMethod(e); });
-  }
-
-  someMethod(e) {
-    console.log(this.name);
-    switch(e.keyCode) {
-      case 5:
-        // un peu de code ici...
-        break;
-      case 6:
-        // un peu de code ici...
-        break;
-    }
-  }
-
-}
-
-const myObject = new SomeClass();
-myObject.register();
-
- -

Passer des données à et depuis un écouteur d'évènements

- -

On peut avoir l'impression que les écouteurs d'évènements sont comme des îles et qu'il est extrêmement difficile de leur passer des données quelconques, encore moins d'en récupérer après qu'ils ont été exécutés. Les écouteurs d'évènements ne prennent qu'un seul argument, l'objet event, qui est passé automatiquement à l'écouteur, et la valeur retournée est ignorée. Aussi, comment pouvons-nous leur passer des données et en récupérer ? Il y a certain nombre de bonnes méthodes pour ce faire.

- -

Passer des données à un écouteur d'évènement en utilisant "this"

- -

Comme mentionné ci-dessus, vous pouvez utiliser Function.prototype.bind() pour passer une valeur à un écouteur d'évènements via la variable de référence this.

- -
-const myButton = document.getElementById('my-button-id');
-const someString = 'Donnée';
-
-myButton.addEventListener('click', function () {
-  console.log(this); // Valeur attendue : "Donnée".
-}.bind(someString));
-
- -

Cette méthode est appropriée quand vous n'avez pas besoin de savoir sur quel élément HTML l'écouteur d'évènement a été déclenché par programme depuis l'intérieur de l'écouteur d'évènements. Le principal avantage de cette façon de faire est que l'écouteur d'évènements reçoit les données sensiblement de la même manière qu'il le ferait si vous les lui passiez au moyen de sa liste d'arguments.

- -

Passer des données à un écouteur d'évènements en utilisant une propriété de portée externe

- -

Quand une portée externe contient une déclaration de variable (avec const, let), toutes les fonctions internes déclarées dans cette portée ont accès à cette variable (voir ici pour des informations sur les fonctions externes/internes, et ici pour des informations sur la portée des variables). Par conséquent, une des façons les plus simples pour accéder à des données depuis l'extérieur d'un écouteur d'évènements est de le rendre accessible dans la portée dans laquelle l'écouteur d'évènement est déclaré.

- -
-const myButton = document.getElementById('my-button-id');
-let someString = 'Donnée';
-
-myButton.addEventListener('click', function() {
-  console.log(someString);  // Valeur attendue : 'Donnée'
-
-  someString = 'Encore des données';
-});
-
-console.log(someString);  // Valeur attendue : 'Donnée' (ne donnera jamais 'Encore des données')
-
- -
-

Note : Bien que les portées internes aient accès aux variables const et let depuis les portées externes, vous ne pouvez pas vous attendre à ce que des changements quelconques de ces variables soient accessibles après la définition de l'écouteur d'évènements, à l'intérieur de la même portée externe. Pourquoi ? Simplement parce qu'au moment où l'écouteur d'évènements s'exécutera, la portée dans laquelle il a été défini pourra avoir déjà fini de s'exécuter.

-
- -

Passer des données à et depuis un écouteur d'évènements en utilisant des objets

- -

A l'inverse de la plupart des fonctions en JavaScript, les objets sont conservés en mémoire aussi longtemps qu'une variable les référençant existe en mémoire. Ceci, et le fait que les objets peuvent avoir des propriétés, et qu'ils peuvent être passés alentour par référence, en font des candidats plausibles pour partager des données entre les portées. Explorons cela.

- -
-

Note : Les fonctions en JavaScript sont en fait des objets. (Par conséquent, elles aussi peuvent avoir des propriétés, et seront conservées en mémoire même après qu'elles ont fini de s'exécuter, si elles ont été affectées à une variable qui persiste en mémoire.)

-
- -

Du fait que les propriétés d'un objet peuvent être utilisées pour stocker des données en mémoire aussi longtemps qu'une variable référençant l'objet existe en mémoire, vous pouvez en fait les utiliser pour passer des données dans un écouteur d'évènements, et retourner tous les changements aux données après que l'écouteur d'évènements s'est exécuté. Considérez cet exemple :

- -
-const myButton = document.getElementById('my-button-id');
-const someObject = {aProperty: 'Donnée'};
-
-myButton.addEventListener('click', function() {
-  console.log(someObject.aProperty);  // Valeur attendue : "Donnée".
-
-  someObject.aProperty = 'Encore des données';  // Modifie la valeur
-});
-
-window.setInterval(function() {
-  if (someObject.aProperty === 'Encore des données') {
-    console.log('Encore des données : Vrai');
-    someObject.aProperty = 'Donnée';  // Rétablit la valeur pour attendre l'exécution du prochain évènement
-  }
-}, 5000);
-
- -

Dans cet exemple, même si la portée dans laquelle à la fois l'écouteur d'évènements et la fonction d'intervalle ont été définis a fini de s'exécuter avant que la valeur originale de unObjet.unePropriete ait changé, du fait que someObject persiste en mémoire (par référence) à la fois dans l'écouteur d'évènements et dans la fonction d'intervalle, tous deux ont accès aux mêmes données (i.e. quand l'un change les données, l'autre peut répondre aux changements).

- -
-

Note : Les objets sont stockés dans les variables par référence, ce qui signifie que seul l'emplacement en mémoire des données elles-mêmes est stocké dans la variable. Entre autres choses, cela signifie que les variables qui "stockent" des objets peuvent en fait affecter d'autres variables qui se voient affecter ("stocker") la même référence d'objet. Quand deux variables référencent le même objet (par ex., let a = b = {aProperty: 'Ouai'};), le fait de changer les données dans l'une ou l'autre des variables affectera l'autre.

-
- -
-

Note : Du fait que les objets sont stockés dans les variables par référence, vous pouvez retourner un objet depuis une fonction pour le maintenir en vie (le conserver en mémoire, de sorte que vous n'en perdiez pas les données) après que cette fonction a fini de s'exécuter.

-
- -

Prise en charge d'Internet Explorer et attachEvent

- -

Dans les versions Internet Explorer versions avant IE 9, vous deviez utiliser attachEvent() plutôt que la méthode standard addEventListener. Pour IE, nous modifions l'exemple précédent en :

- -
-if (el.addEventListener) {
-  el.addEventListener('click', modifierTexte, false);
-} else if (el.attachEvent)  {
-  el.attachEvent('onclick', modifierTexte);
-}
-
- -

Il y a un inconvénient avec attachEvent : la valeur de this sera une référence à l'objet window, au lieu de l'élément sur lequel il a été déclenché.

- -

La méthode attachEvent() peut être couplée avec l'évènement onresize pour détecter que certains éléments dans une page web ont été redimensionnés. L'évènement propriétaire mselementresize, lorsqu'il est couplé avec la méthode addEventListener d'enregistrement des gestionnaires d'évènements, fournit une fonctionnalité similaire à celle de onresize, se déclenchant quand certains éléments HTML sont redimensionnés.

- -

Prothèse d'émulation (polyfill)

- -

Vous pouvez contourner le fait que addEventListener(), removeEventListener(), {{domxref("Event.preventDefault()")}} et {{domxref("Event.stopPropagation()")}} ne sont pas pris en charge par IE 8 en utilisant le code suivant au début de votre script. Le code prend en charge l'utilisation de handleEvent(), et aussi l'évènement {{event("DOMContentLoaded")}}.

- -
-

Note : useCapture n'est pas pris en charge, du fait qu'IE 8 n'a aucune méthode alternative. Le code suivant ajoute seulement la prise en charge d'IE 8. Cette émulation pour IE 8 fonctionne uniquement en mode standard : une déclaration doctype est requise.

-
- -
-(function() {
-  if (!Event.prototype.preventDefault) {
-    Event.prototype.preventDefault=function() {
-      this.returnValue=false;
-    };
-  }
-  if (!Event.prototype.stopPropagation) {
-    Event.prototype.stopPropagation=function() {
-      this.cancelBubble=true;
-    };
-  }
-  if (!Element.prototype.addEventListener) {
-    var eventListeners=[];
-
-    var addEventListener=function(type,listener /*, useCapture (sera ignoré) */) {
-      var self=this;
-      var wrapper=function(e) {
-        e.target=e.srcElement;
-        e.currentTarget=self;
-        if (typeof listener.handleEvent != 'undefined') {
-          listener.handleEvent(e);
-        } else {
-          listener.call(self,e);
-        }
-      };
-      if (type=="DOMContentLoaded") {
-        var wrapper2=function(e) {
-          if (document.readyState=="complete") {
-            wrapper(e);
-          }
-        };
-        document.attachEvent("onreadystatechange",wrapper2);
-        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
-
-        if (document.readyState=="complete") {
-          var e=new Event();
-          e.srcElement=window;
-          wrapper2(e);
-        }
-      } else {
-        this.attachEvent("on"+type,wrapper);
-        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
-      }
-    };
-    var removeEventListener=function(type,listener /*, useCapture (sera ignoré) */) {
-      var counter=0;
-      while (counter<eventListeners.length) {
-        var eventListener=eventListeners[counter];
-        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
-          if (type=="DOMContentLoaded") {
-            this.detachEvent("onreadystatechange",eventListener.wrapper);
-          } else {
-            this.detachEvent("on"+type,eventListener.wrapper);
-          }
-          eventListeners.splice(counter, 1);
-          break;
-        }
-        ++counter;
-      }
-    };
-    Element.prototype.addEventListener=addEventListener;
-    Element.prototype.removeEventListener=removeEventListener;
-    if (HTMLDocument) {
-      HTMLDocument.prototype.addEventListener=addEventListener;
-      HTMLDocument.prototype.removeEventListener=removeEventListener;
-    }
-    if (Window) {
-      Window.prototype.addEventListener=addEventListener;
-      Window.prototype.removeEventListener=removeEventListener;
-    }
-  }
-})();
-
- -

Ancienne manière d'enregistrer les écouteurs d'évènements

- -

La méthode addEventListener() a été ajoutée dans la spécification DOM 2 Events. Avant cela, les écouteurs d'évènements étaient enregistrés de la manière suivante :

- -
-// Passage d'une référence à une fonction
-// Ne pas ajouter de '()' après, cela appelerait la fonction !
-el.onclick = modifyText;
-
-// Utilisation d'une fonction directe
-element.onclick = function() {
-  ...logique de la fonction...
-};
-
- -

Cette méthode remplace l'(les) écouteur(s) d'évènements click existant(s) de l'élément s'il y en a. D'autres évènements et leurs gestionnaires d'évènements associés comme blur (onblur), et keypress ( onkeypress) se comportent de façon similaire.

- -

Comme elle faisait partie de façon fondamentale du DOM 0, cette méthode est très largement prise en charge et ne nécessite aucun code multi-navigateur. C'est pourquoi elle est souvent utilisée pour enregistrer des évènements dynamiquement quand de très anciens navigateurs (comme IE dans les versions antérieures à IE8) doivent être pris en charge ; voir la table plus bas pour les détails de la prise en charge par les navigateurs pour addEventListener.

- -

Problèmes de mémoire

- -
-let i;
-const els = document.getElementsByTagName('*');
-
-// Cas 1
-for (i=0 ; i<els.length ; i++) {
-  els[i].addEventListener("click", function(e){/*faire quelque chose*/}, false);
-}
-
-// Cas 2
-function processEvent(e) {
-  /* faire quelque chose */
-}
-
-for (i=0 ; i<els.length ; i++) {
-  els[i].addEventListener("click", processEvent, false);
-}
-
- -

Dans le premier cas ci-dessus, une nouvelle fonction gestionnaire (anonyme) est créée à chaque itération de la boucle. Dans le second cas, la même fonction déclarée préalablement est utilisée comme gestionnaire d'évènements. Cela entraîne une consommation de mémoire réduite. De plus, dans le premier cas, il n'est pas possible d'appeler {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} du fait qu'aucune référence à la fonction anonyme n'est conservée (ou ici, n'est conservée aucune des multiples fonctions anonymes que la boucle peut créer). Dans le second cas, il est possible de faire myElement.removeEventListener("click", processEvent, false) du fait que processEvent est la référence à la fonction.

- -

En fait, en ce qui concerne la consommation de mémoire, l'absence de conservation d'une référence à la fonction n'est pas le problème réel ; c'est plutôt l'absence de conservation d'une référence STATIQUE à la fonction. Dans les deux cas à problème ci-dessous, une référence à la fonction est conservée, mais du fait qu'elle est redéfinie à chaque itération, elle n'est pas statique. Dans le troisème cas, la référence à la fonction anonyme est réaffectée à chaque itération. Dans le quatrième cas, la définition entière de la fonction est inchangée, mais elle est néanmoins répétitivement définie comme si elle était nouvelle (à moins qu'elle n'ait été [[promue]] par le compilateur), et elle n'est donc pas statique. Par conséquent, bien qu'il ne semble y avoir simplement que des [[Multiple identical event listeners]], dans les deux cas, chaque itération créera à la place un nouvel écouteur avec sa propre unique référence à la fonction gestionnaire. Cependant, du fait que la définition de la fonction elle-même ne change pas, la MÊME fonction peut toujours être appelée pour chaque écouteur dupliqué (spécialement si le code est optimisé.)

- -

Également dans les deux cas, du fait que la référence à la fonction e été conservée mais est répétitivement redéfinie par chaque ajout, l'instruction 'remove' ci-dessus peut toujours supprimer un écouteur, mais seulement le dernier ajouté.

- -
-// Pour illustration seulement : notez la "FAUTE" de [j] au lieu de [i] entrainant ainsi que les évènements voulus sont tous enregistrés pour le MÊME élément
-
-// Cas 3
-for (let i=0, j=0 ; i<els.length ; i++) {
-  /* faire des tas de choses avec j */
-  els[j].addEventListener("click", processEvent = function(e) {/*faire quelque chose*/}, false);
-}
-
-// Cas 4
-for (let i=0, j=0 ; i<els.length ; i++) {
-  /* faire des tas de choses avec  j */
-  function processEvent(e) {/*faire quelque chose*/};
-  els[j].addEventListener("click", processEvent, false);
-}
- -

Amélioration des performances de défilement avec les écouteurs passifs

- -

D'après la spécification, la valeur par défaut pour l'option passive est toujours false. Toutefois, cela introduit la possibilité que des écouteurs d'évènements gérant certains évènements tactiles (parmi d'autres) bloquent le fil d'exécution principal du navigateur pendant qu'il essaye de gérer le défilement, avec pour résultat une possiblement énorme réduction de performance pendant la gestion du défilement.

- -

Pour prévenir ce problème, certains navigateurs (spécifiquement, Chrome et Firefox) ont changé la valeur par défault de l'option passive à true pour les évènements {{event("touchstart")}} et {{event("touchmove")}} dans les nœuds de niveau document {{domxref("Window")}}, {{domxref("Document")}}, et {{domxref("Document.body")}}. Cela empêche que l'écouteur d'évènement ne soit appelé, de sorte qu'il ne peut pas bloquer le rendu de la page pendant que l'utilisateur fait un défilement.

- -
-

Note : Voir la table de compatibilité ci-dessous si vous avez besoin de savoir quels navigateurs (et/ou quelles versions de ces navigateurs) implémentent ce comportement modifié.

-
- -

Vous pouvez passer outre ce comportement en initialisant explicitement la valeur de passive à false, comme montré ci-dessous :

- -
-/* Détection de la fonctionnalité */
-let passiveIfSupported = false;
-
-try {
-  window.addEventListener("test", null,
-    Object.defineProperty(
-      {},
-      "passive",
-      {
-        get: function() { passiveIfSupported = { passive: true }; }
-      }
-    )
-  );
-} catch(err) {}
-
-window.addEventListener('scroll', function(event) {
-  /* faire quelque chose */
-  // ne peut pas utiliser event.preventDefault();
-}, passiveIfSupported );
-
- -

Dans les navigateurs anciens qui ne prennent pas en charge le paramètre options d'addEventListener(), le fait d'essayer de l'utiliser empêche l'utilisation de l'argument useCapture sans utilisation appropriée de la détection de fonctionnalité.

- -

Vous n'avez pas besoin de vous inquiéter de la valeur de passive pour l'évènement {{event("scroll")}} de base. Du fait qu'il ne peut pas être annulé, les écouteurs d'évènements ne peuvant pas bloquer le rendu de la page de toute façon.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}{{Spec2("DOM2 Events")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.EventTarget.addEventListener", 3)}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.md b/files/fr/web/api/eventtarget/addeventlistener/index.md new file mode 100644 index 0000000000..8165dcccdf --- /dev/null +++ b/files/fr/web/api/eventtarget/addeventlistener/index.md @@ -0,0 +1,886 @@ +--- +title: EventTarget.addEventListener() +slug: Web/API/EventTarget/addEventListener +tags: + - API + - Cible + - DOM + - Evènement + - Gestionnaires d'évènements + - JavaScript + - Méthode + - Méthodes + - Reference + - Réception d'Évènements + - attachEvent + - Écouteurs + - Écouteurs d'Évènements + - AccessOuterData + - Detecting Events + - Event Handlers + - Event Listener + - EventTarget + - Method + - PassingData + - Receiving Events + - addEventListener + - events + - mselementresize +translation_of: Web/API/EventTarget/addEventListener +--- +

{{APIRef("DOM Events")}}

+ +

>La méthode addEventListener() de {{domxref("EventTarget")}} attache une fonction à appeler chaque fois que l'évènement spécifié est envoyé à la cible.

+ +

Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} lui-même et une {{domxref("Window")}}, mais on peut tout à fait cible n'importe quel objet prenant en charge les évènements (comme {{domxref("XMLHttpRequest")}}).

+ +

addEventListener() agit en ajoutant une fonction ou un objet qui implémente {{domxref("EventListener")}} à la liste des gestionnaires d'évènement pour le type d'évènement spécifié sur la cible ({{domxref("EventTarget")}}) à partir de laquelle il est appelé.

+ +

Syntaxe

+ +
target.addEventListener(type, listener [, options]);
+target.addEventListener(type, listener [, useCapture]);
+target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla uniquement
+ + +

Paramètres

+ +
+
type
+
Une chaîne sensible à la casse représentant le type d'évènement à écouter.
+
listener
+
L'objet qui recevra un évènement (c'est-à-dire un objet qui implémente l'interface {{domxref("Event")}}) lorsqu'un évènement du type spécifié se produit. Cet argument doit être un objet implémentant l'interface {{domxref("EventListener")}} ou une fonction JavaScript. Voir {{anch("The_event_listener_callback", "Fonction de rappel (callback pour le gestionnaire d'évènement)")}} pour plus de détails sur le fonctionnement d'une fonction de rappel.
+
options {{optional_inline}}
+
Un objet options spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont : +
+
capture
+
Un booléen ({{jsxref("Boolean")}}) indiquant que les évènements de ce type seront distribués à l'listener enregistré avant d'être distribués à tout EventTarget située en dessous dans l'arborescence DOM.
+
once
+
Un booléen ({{jsxref("Boolean")}}) indiquant que listener doit être invoqué au plus une fois après avoir été ajouté. Si true (vrai), listener sera automatiquement supprimé après son appel.
+
passive
+
Un booléen ({{jsxref("Boolean")}}) qui, si true, indique que la fonction spécifiée par listener n'appellera jamais {{domxref("Event.preventDefault", "preventDefault()")}}. Si un écouteur passif appelle preventDefault(), l'agent utilisateur ne fera rien d'autre que de générer un avertissement dans la console. Voir {{anch("Improving_scrolling_performance_with_passive_listeners","Améliorer les performances du défilement avec des gestionnaires passifs")}} pour en apprendre davantage.
+
mozSystemGroup {{non-standard_inline}}
+
Un booléen ({{jsxref("Boolean")}}) indiquant que l'écouteur doit être ajouté au groupe système. Disponible uniquement pour le code s'exécutant dans XBL ou dans le {{glossary("chrome")}} du navigateur Firefox.
+
+
+
useCapture {{optional_inline}}
+
Un booléen ({{jsxref("Boolean")}}) indiquant si les évènements de ce type seront distribués au listener enregistré avant d'être distribués à toute EventTarget (« cible d'évènement ») située en dessous dans l'arborescence DOM. Les évènements qui se propagent vers le haut dans l'arborescence ne déclencheront pas un écouteur indiqué comme utilisant la capture. La propagation et la capture d'évènements sont deux manières de propager des évènements qui se produisent dans un élément imbriqué dans un autre, lorsque les deux éléments ont enregistré un gestionnaire pour cet évènement. Le mode de propagation de l'évènement détermine l'ordre dans lequel les éléments reçoivent l'évènement. Voir les DOM Level 3 Events et JavaScript Event order pour une explication détaillée. S'il n'est pas spécifié, useCapture aura false comme valeur par défaut.
+
+ +
+

Note : Pour les écouteurs attachés à la cible d'évènement, l'évènement se trouve dans la phase cible, plutôt que dans les phases de propagation et de capture. Les évènements dans la phase cible déclencheront tous les écouteurs d'un élément dans l'ordre où ils ont été enregistrés, indépendamment du paramètre useCapture.

+
+ +
+

Note : useCapture n'a pas toujours été facultatif. Idéalement, vous devriez l'inclure pour une compatibilité navigateur la plus large possible.

+
+ +
+
wantsUntrusted {{Non-standard_inline}}
+
Un paramètre spécifique à Firefox (Gecko). Si true, l'écouteur reçoit les évènements synthétiques distribués par le contenu web (le défaut est false pour le {{glossary("chrome")}} du navigateur et true pour les pages web ordinaires). Ce paramètre est utile pour le code qui se trouve dans les compléments, ainsi que pour le navigateur lui-même.
+
+ +

Valeur de retour

+ +

undefined

+ +

Notes d'utilisation

+ +

Utilisation d'une fonction de rappel (callback)

+ +

L'écouteur d'évènement peut être spécifié, soit comme une fonction de rappel (callback), soit comme un objet qui implémente {{domxref("EventListener")}} dont la méthode {{domxref("EventListener.handleEvent", "handleEvent()")}} sert de fonction de rappel.

+ +

La fonction de rappel reçoit les mêmes paramètres et fournit la même valeur de retour que la méthode handleEvent() ; c'est-à-dire que le rappel accepte un seul paramètre : un objet basé sur {{domxref("Event")}} décrivant l'évènement qui s'est produit, et il ne retourne rien.

+ +

Par exemple, un rappel de gestionnaire d'évènements pouvant être utilisé pour gérer à la fois {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} et {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} peut ressembler à ceci :

+ +
+function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* gérer un passage en plein écran */
+  } else /* fullscreenerror */ {
+    /* gérer une erreur de passage en plein écran */
+  }
+}
+
+ +

Détection la prise en charge d'options

+ +

Dans les anciennes versions de la spécification DOM, le troisième paramètre de addEventListener() était une valeur booléenne indiquant s'il fallait ou non utiliser la capture. Au fil du temps, il est devenu clair que davantage d'options étaient nécessaires. Plutôt que d'ajouter davantage de paramètres à la fonction (ce qui complique énormément les choses lors du traitement des valeurs optionnelles), le troisième paramètre a été changé en un objet pouvant contenir diverses propriétés définissant les valeurs des options pour configurer le processus de suppression de l'écouteur d'évènement.

+ +

Du fait que les navigateurs anciens supposent toujours que le troisième paramètre est un booléen, vous devez construire votre code de façon à gérer ce scénario intelligemment. Vous pouvez le faire en utilisant la détection de fonctionnalité pour chacune des options qui vous intéresse.

+ +

Par exemple, si vous voulez vérifier l'option passive :

+ +
+let passiveSupported = false;
+
+try {
+  let options = Object.defineProperty({}, "passive", {
+    get: function() {
+      passiveSupported = true;
+    }
+  });
+
+  window.addEventListener("test", null, options);
+  window.removeEventListener("test", null, options);
+} catch(err) {
+  passiveSupported = false;
+}
+
+ +

Cela crée un objet options avec une fonction accesseur pour la propriété passive ; l'accesseur initialise un indicateur, passiveSupported, à true si elle est appelée. Cela signifie que si le navigateur vérifie la valeur de la propriété passive dans l'objet options, passiveSupported sera initialisé à true ; sinon, il restera false. Nous appelons alors addEventListener() pour installer un faux gestionnaire d'évènements, en spécifiant ces options, se sorte qu'elles soient vérifiées si le navigateur reconnaît un objet comme troisième paramètre. Ensuite, nous appelons removeEventListener() pour faire le ménage après notre passage. (Notez que handleEvent() est ignoré dans les écouteurs d'évènements qui ne sont pas appelés).

+ +

Vous pouvez vérifier de cette façon si une option quelconque est supportée. Ajoutez simplement un accesseur pour cette option en utilisant un code similaire à celui montré ci-dessus.

+ +

Ensuite, lorsque vous voulez créer un écouteur d'évènements réel qui utilise les options en question, vous pouvez faire quelque chose comme ce qui suit :

+ +
+someElement.addEventListener(
+  "mouseup",
+  handleMouseUp,
+  passiveSupported ? { passive: true } : false
+);
+
+ +

Ici, nous ajoutons un écouteur pour l'évènement {{domxref("Element/mouseup_event", "mouseup")}} dans l'élément someElement. Pour le troisième paramètre, si passiveSupported est true, nous spécifions un objet options avec passive initialisée à true ; sinon, nous savons que nous devons passer un Boolean, et nous passons false comme valeur du paramètre useCapture.

+ +

Si vous préférez, vous pouvez utiliser une bibliothèque tierce comme Modernizr ou Detect It pour faire ce test pour vous.

+ +

Vous pouvez en apprendre davantage dans l'article à propos des EventListenerOptions du Groupe Web Incubator Community.

+ +

Exemples

+ +

Ajouter un écouteur simple

+ +

Cet exemple montre comment utiliser addEventListener() pour surveiller les clics de souris sur un élément.

+ +

HTML

+ +
+<table id="outside">
+  <tr><td id="t1">un</td></tr>
+  <tr><td id="t2">deux</td></tr>
+</table>
+
+ +

JavaScript

+ +
+// Fonction pour changer le contenu de t2
+function modifyText() {
+  const t2 = document.querySelector("#t2");
+  if (t2.firstChild.nodeValue == "trois") {
+    t2.firstChild.nodeValue = "deux";
+  } else {
+    t2.firstChild.nodeValue = "trois";
+  }
+}
+
+// Ajouter un écouteur d'évènements à la table
+const el = document.querySelector("#outside");
+el.addEventListener("click", modifyText, false);
+
+ +

Dans ce code, modifyText() est un écouteur pour les évènements click enregistré en utilisant addEventListener(). Un clic n'importe où sur la table se propagera jusqu'au gestionnaire et exécutera modifyText().

+ +

Résultat

+ +

{{EmbedLiveSample('Add_a_simple_listener')}}

+ +

Écouteur d'évènement avec une fonction anonyme

+ +

Ici, nous allons voir comment utiliser une fonction anonyme pour passer des paramètres à l'écouteur d'évènements.

+ +

HTML

+ +
+<table id="outside">
+  <tr><td id="t1">un</td></tr>
+  <tr><td id="t2">deux</td></tr>
+</table>
+
+ +

JavaScript

+ +
+// Fonction pour changer le contenu de t2
+function modifyText(newText) {
+  const t2 = document.querySelector("#t2");
+  t2.firstChild.nodeValue = newText;
+}
+
+// Fonction pour ajouter un écouteur d'évènement à la table
+const el = document.querySelector("#outside");
+el.addEventListener("click", function(){modifyText("quatre")}, false);
+
+ +

Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut à son tour envoyer des paramètres à la fonction modifyText(), qui est responsable de la réponse effective à l'évènement.

+ +

Résultat

+ +

{{EmbedLiveSample('Event_listener_with_anonymous_function')}}

+ +

Écouteur d'évènement avec une fonction fléchée

+ +

Cet exemple montre un écouteur d'évènement simple implémenté en utilisant la notation de fonction fléchée.

+ +

HTML

+ +
+<table id="outside">
+  <tr><td id="t1">un</td></tr>
+  <tr><td id="t2">deux</td></tr>
+</table>
+
+ +

JavaScript

+ +
+// Fonction pour changer le contenu de t2
+function modifyText(newText) {
+  const t2 = document.querySelector("#t2");
+  t2.firstChild.nodeValue = newText;
+}
+
+// Ajouter un écouteur d'évènements à la table avec une fonction fléchée
+const el = document.querySelector("#outside");
+el.addEventListener("click", () => {
+  modifyText("quatre");
+}, false);
+ +

Résultat

+ +

{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}

+ +

Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons this différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons this, les fonctions fléchées héritent la liaison this de la fonction contenante. Voir la page sur l'opérateur this pour plus d'informations.

+ +

Cela signifie que les variables et constantes disponibles pour la fonction contenante sont aussi disponibles pour le gestionnaire d'évènements lors de l'utilisation d'une fonction fléchée.

+ +

Exemple d'utilisation des options

+ +

HTML

+ +
+<div class="outer">
+  extérieur, once & none-once
+  <div class="middle" target="_blank">
+    milieu, capture & none-capture
+    <a class="inner1" href="https://www.mozilla.org" target="_blank">
+      intérieur1, passive & preventDefault (ce qui n'est pas autorisé)
+    </a>
+    <a class="inner2" href="/" target="_blank">
+      intérieur2, none-passive & preventDefault (nouvelle page non ouverte)
+    </a>
+  </div>
+</div>
+
+ +

CSS

+ +
+.outer,
+.middle,
+.inner1,
+.inner2 {
+  display: block;
+  width: 520px;
+  padding: 15px;
+  margin: 15px;
+  text-decoration: none;
+}
+.outer {
+  border: 1px solid red;
+  color: red;
+}
+.middle {
+  border: 1px solid green;
+  color: green;
+  width: 460px;
+}
+.inner1,
+.inner2 {
+  border: 1px solid purple;
+  color: purple;
+  width: 400px;
+}
+
+ +

JavaScript

+ +
+const outer = document.querySelector('.outer');
+const middle = document.querySelector('.middle');
+const inner1 = document.querySelector('.inner1');
+const inner2 = document.querySelector('.inner2');
+
+const capture = {
+  capture: true
+};
+const noneCapture = {
+  capture: false
+};
+const once = {
+  once: true
+};
+const noneOnce = {
+  once: false
+};
+const passive = {
+  passive: true
+};
+const nonePassive = {
+  passive: false
+};
+
+outer.addEventListener('click', onceHandler, once);
+outer.addEventListener('click', noneOnceHandler, noneOnce);
+middle.addEventListener('click', captureHandler, capture);
+middle.addEventListener('click', noneCaptureHandler, noneCapture);
+inner1.addEventListener('click', passiveHandler, passive);
+inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+function onceHandler(event) {
+  console.log('extérieur, once');
+}
+function noneOnceHandler(event) {
+  console.log('extérieur, none-once, default');
+}
+function captureHandler(event) {
+  // event.stopImmediatePropagation();
+  console.log('milieur, capture');
+}
+function noneCaptureHandler(event) {
+  console.log('milieur, none-capture, default');
+}
+function passiveHandler(event) {
+  // Impossible d'utiliser preventDefault à l'intérieur de l'invocation d'un écouteur d'évènements passif.
+  event.preventDefault();
+  console.log('intérieur1, passive, nouvelle page ouverte');
+}
+function nonePassiveHandler(event) {
+  event.preventDefault();
+  // event.stopPropagation();
+  console.log('intérieur2, none-passive, default, nouvelle page non ouverte');
+}
+
+ +

Résultat

+ +

Cliquez les conteneurs extérieur, milieu, intérieurs respectivement pour voir comment les options fonctionnent. Vous pouvez ouvrir la console pour observer les différents messages émis.

+ +

{{EmbedLiveSample('Example_of_options_usage', '', '320')}}

+ +

Avant d'utiliser une valeur particulière dans l'objet options, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely_detecting_option_support", "Détection sûre du support des options")}} pour les détails.

+ +

Ajout d'un écouteur annulable

+ +

Cet exemple montre comment ajouter un addEventListener() qui peut être interrompu par un {{domxref("AbortSignal")}}.

+ +

HTML

+ +
+<table id="outside">
+  <tr><td id="t1">un</td></tr>
+  <tr><td id="t2">deux</td></tr>
+</table>
+
+ +

JavaScript

+ +
+// Ajout d'un écouteur d'évènement annulable à la table
+const controller = new AbortController();
+const el = document.querySelector("#outside");
+el.addEventListener("click", modifyText, { signal: controller.signal });
+
+// Fonction permettant de modifier le contenu de t2
+function modifyText() {
+  const t2 = document.querySelector("#t2");
+  if (t2.firstChild.nodeValue == "trois") {
+    t2.firstChild.nodeValue = "deux";
+  } else {
+    t2.firstChild.nodeValue = "trois";
+    controller.abort(); // supprime l'écouteur lorsque la valeur est "trois".
+  }
+}
+
+ +

Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simple_listener', 'Ajouter un écouteur simple')}} de telle sorte qu'après que le contenu de la deuxième ligne soit devenu « trois », nous appelons abort() à partir du {{domxref("AbortController")}} que nous avons passé à l'appel addEventListener(). Cela a pour résultat que la valeur reste à "trois" pour toujours, parce que nous n'avons plus de code écoutant un évènement de clic.

+ +

Résultat

+ +

{{EmbedLiveSample('Add_a_abortable_listener')}}

+ +

Autres notes

+ +

Pourquoi utiliser addEventListener() ?

+ +

addEventListener est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants :

+ + + +

L'ancienne manière alternative d'enregistrer des évènements est décrite ci-dessous.

+ +

Ajout d'un écouteur pendant la distribution d'un évènement

+ +

Si un {{domxref("EventListener")}} est ajouté à une {{domxref("EventTarget")}} pendant qu'elle traite un évènement, cet évènement ne déclenchera l'écouteur. Cependant, le même écouteur pourra être déclenché à une étape ultérieure du flux d'évènements, telle que la phase de propagation.

+ +

Écouteurs d'évènements identiques multiples

+ +

Si des EventListener identiques multiples sont enregistrés sur la même EventTarget avec les mêmes paramètres, les instances dupliquées sont supprimées. Elles ne provoqueront pas un appel en double de l'EventListener, et elles n'ont pas besoin d'être enlevées avec la méthode {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}}.

+ +

Notez toutefois que lors de l'utilisation d'une fonction anonyme comme gestionnaire, de tels écouteurs ne seront PAS identiques, du fait que les fonctions anonymes ne sont pas identiques, même si définies en utilisant le MÊME code source inchangé, simplement appelé répétitivement, même dans une boucle.

+ +

Cependant, le fait de définir répétitivement la même fonction nommée dans de tels cas peut être davantage problématique. (Voir Problèmes de mémoire ci-dessous.)

+ +

La valeur de "this" à l'intérieur du gestionnaire

+ +

Il est souvent souhaitable de référencer l'élément sur lequel le gestionnaire d'évènements a été déclenché, comme lors de l'utilisation d'un gestionnaire générique pour un ensemble d'éléments similaires.

+ +

Lorsqu'une fonction gestionnaire est attachée à un élément en utilisant addEventListener(), la valeur de {{jsxref("Operators/this","this")}} à l'intérieur du gestionnaire est une référence à l'élément. C'est la même valeur que celle de la propriété currentTarget de l'argument évènement qui est passé au gestionnaire.

+ +
+my_element.addEventListener('click', function(e) {
+  console.log(this.className)           // journalise le className de my_element
+  console.log(e.currentTarget === this) // journalise `true`
+})
+
+ +

Pour mémoire, les fonctions fléchées n'ont pas de this lié.

+ +
+my_element.addEventListener('click', (e) => {
+  console.log(this.className)           // ATTENTION : `this` n'est pas `my_element`
+  console.log(e.currentTarget === this) // journalise `false`
+})
+
+ +

Si un gestionnaire d'évènements (par exemple, {{domxref("GlobalEventHandlers.onclick", "onclick")}}) est spécifié sur un élément dans la source HTML, le code JavaScript dans la valeur de l'attribut est effectivement encapsulé dans une fonction du gestionnaire qui lie la valeur de this d'une manière cohérente avec le addEventListener() ; une occurrence de this dans le code représente une référence à l'élément.

+ +
+<table id="my_table" onclick="console.log(this.id);">
+<!-- `this` fait référence à la table ; journalise 'my_table' -->
+  ...
+</table>
+
+ +

Notez que la valeur de this à l'intérieur d'une fonction, appelée par le code dans la valeur de l'attribut, se comporte selon les règles standard. Ceci est illustré dans l'exemple suivant :

+ +
+<script>
+  function logID() { console.log(this.id); }
+</script>
+<table id="my_table" onclick="logID();">
+<!-- lorsqu'appelée, `this` fera référence à l'objet global -->
+  ...
+</table>
+
+ +

La valeur de this à l'intérieur de logID est une référence à l'objet global {{domxref("Window")}} (ou undefined dans le cas du mode strict).

+ +

Spécification de "this" en utilisant bind()

+ +

La méthode {{jsxref("Function.prototype.bind()")}} vous permet de spécifier la valeur qui doit être utilisée comme this pour tous les appels à une fonction donnée. Cette méthode vous permet de contourner facilement les problèmes dans lesquels ce que this sera n'est pas clair, en fonction du contexte depuis lequel votre fonction a été appelée. Notez toutefois que vous aurez besoin de conserver quelque part une référence à l'écouteur, de façon à pouvoir le supprimer ultérieurement.

+ +

Ceci est un exemple avec et sans bind() :

+ +
+const Something = function(element) {
+  // |this| est un objet nouvellement créé
+  this.name = 'Quelque chose de bon';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, car |this| est l'élément
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Quelque chose de bon', car |this| est lié à l'objet nouvellement créé
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Astuce
+}
+const s = new Something(document.body);
+
+ +

Une autre solution consiste à utiliser une fonction spéciale appelée handleEvent() to intercepter tous les évènements :

+ +
+const Something = function(element) {
+  // |this| est un objet nouvellement créé
+  this.name = 'Quelque chose de bon';
+  this.handleEvent = function(event) {
+    console.log(this.name); // "Quelque chose de bon", car |this| est lié à l'objet nouvellement créé.
+    switch(event.type) {
+      case 'click':
+        // un peu de code ici...
+        break;
+      case 'dblclick':
+        // un peu de code ici...
+        break;
+    }
+  };
+
+  // Notez que les écouteurs dans ce cas sont |this|, et non this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // Vous pouvez retirer correctement les écouteurs
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+const s = new Something(document.body);
+
+ +

Une autre manière de gérer la référence à this est de passer à l'EventListener une fonction qui appelle la méthode de l'objet qui contient les champs auxquels on a besoin d'accéder :

+ +
+class SomeClass {
+
+  constructor() {
+    this.name = 'Quelque chose de bon';
+  }
+
+  register() {
+    const that = this;
+    window.addEventListener('keydown', function(e) { that.someMethod(e); });
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // un peu de code ici...
+        break;
+      case 6:
+        // un peu de code ici...
+        break;
+    }
+  }
+
+}
+
+const myObject = new SomeClass();
+myObject.register();
+
+ +

Passer des données à et depuis un écouteur d'évènements

+ +

On peut avoir l'impression que les écouteurs d'évènements sont comme des îles et qu'il est extrêmement difficile de leur passer des données quelconques, encore moins d'en récupérer après qu'ils ont été exécutés. Les écouteurs d'évènements ne prennent qu'un seul argument, l'objet event, qui est passé automatiquement à l'écouteur, et la valeur retournée est ignorée. Aussi, comment pouvons-nous leur passer des données et en récupérer ? Il y a certain nombre de bonnes méthodes pour ce faire.

+ +

Passer des données à un écouteur d'évènement en utilisant "this"

+ +

Comme mentionné ci-dessus, vous pouvez utiliser Function.prototype.bind() pour passer une valeur à un écouteur d'évènements via la variable de référence this.

+ +
+const myButton = document.getElementById('my-button-id');
+const someString = 'Donnée';
+
+myButton.addEventListener('click', function () {
+  console.log(this); // Valeur attendue : "Donnée".
+}.bind(someString));
+
+ +

Cette méthode est appropriée quand vous n'avez pas besoin de savoir sur quel élément HTML l'écouteur d'évènement a été déclenché par programme depuis l'intérieur de l'écouteur d'évènements. Le principal avantage de cette façon de faire est que l'écouteur d'évènements reçoit les données sensiblement de la même manière qu'il le ferait si vous les lui passiez au moyen de sa liste d'arguments.

+ +

Passer des données à un écouteur d'évènements en utilisant une propriété de portée externe

+ +

Quand une portée externe contient une déclaration de variable (avec const, let), toutes les fonctions internes déclarées dans cette portée ont accès à cette variable (voir ici pour des informations sur les fonctions externes/internes, et ici pour des informations sur la portée des variables). Par conséquent, une des façons les plus simples pour accéder à des données depuis l'extérieur d'un écouteur d'évènements est de le rendre accessible dans la portée dans laquelle l'écouteur d'évènement est déclaré.

+ +
+const myButton = document.getElementById('my-button-id');
+let someString = 'Donnée';
+
+myButton.addEventListener('click', function() {
+  console.log(someString);  // Valeur attendue : 'Donnée'
+
+  someString = 'Encore des données';
+});
+
+console.log(someString);  // Valeur attendue : 'Donnée' (ne donnera jamais 'Encore des données')
+
+ +
+

Note : Bien que les portées internes aient accès aux variables const et let depuis les portées externes, vous ne pouvez pas vous attendre à ce que des changements quelconques de ces variables soient accessibles après la définition de l'écouteur d'évènements, à l'intérieur de la même portée externe. Pourquoi ? Simplement parce qu'au moment où l'écouteur d'évènements s'exécutera, la portée dans laquelle il a été défini pourra avoir déjà fini de s'exécuter.

+
+ +

Passer des données à et depuis un écouteur d'évènements en utilisant des objets

+ +

A l'inverse de la plupart des fonctions en JavaScript, les objets sont conservés en mémoire aussi longtemps qu'une variable les référençant existe en mémoire. Ceci, et le fait que les objets peuvent avoir des propriétés, et qu'ils peuvent être passés alentour par référence, en font des candidats plausibles pour partager des données entre les portées. Explorons cela.

+ +
+

Note : Les fonctions en JavaScript sont en fait des objets. (Par conséquent, elles aussi peuvent avoir des propriétés, et seront conservées en mémoire même après qu'elles ont fini de s'exécuter, si elles ont été affectées à une variable qui persiste en mémoire.)

+
+ +

Du fait que les propriétés d'un objet peuvent être utilisées pour stocker des données en mémoire aussi longtemps qu'une variable référençant l'objet existe en mémoire, vous pouvez en fait les utiliser pour passer des données dans un écouteur d'évènements, et retourner tous les changements aux données après que l'écouteur d'évènements s'est exécuté. Considérez cet exemple :

+ +
+const myButton = document.getElementById('my-button-id');
+const someObject = {aProperty: 'Donnée'};
+
+myButton.addEventListener('click', function() {
+  console.log(someObject.aProperty);  // Valeur attendue : "Donnée".
+
+  someObject.aProperty = 'Encore des données';  // Modifie la valeur
+});
+
+window.setInterval(function() {
+  if (someObject.aProperty === 'Encore des données') {
+    console.log('Encore des données : Vrai');
+    someObject.aProperty = 'Donnée';  // Rétablit la valeur pour attendre l'exécution du prochain évènement
+  }
+}, 5000);
+
+ +

Dans cet exemple, même si la portée dans laquelle à la fois l'écouteur d'évènements et la fonction d'intervalle ont été définis a fini de s'exécuter avant que la valeur originale de unObjet.unePropriete ait changé, du fait que someObject persiste en mémoire (par référence) à la fois dans l'écouteur d'évènements et dans la fonction d'intervalle, tous deux ont accès aux mêmes données (i.e. quand l'un change les données, l'autre peut répondre aux changements).

+ +
+

Note : Les objets sont stockés dans les variables par référence, ce qui signifie que seul l'emplacement en mémoire des données elles-mêmes est stocké dans la variable. Entre autres choses, cela signifie que les variables qui "stockent" des objets peuvent en fait affecter d'autres variables qui se voient affecter ("stocker") la même référence d'objet. Quand deux variables référencent le même objet (par ex., let a = b = {aProperty: 'Ouai'};), le fait de changer les données dans l'une ou l'autre des variables affectera l'autre.

+
+ +
+

Note : Du fait que les objets sont stockés dans les variables par référence, vous pouvez retourner un objet depuis une fonction pour le maintenir en vie (le conserver en mémoire, de sorte que vous n'en perdiez pas les données) après que cette fonction a fini de s'exécuter.

+
+ +

Prise en charge d'Internet Explorer et attachEvent

+ +

Dans les versions Internet Explorer versions avant IE 9, vous deviez utiliser attachEvent() plutôt que la méthode standard addEventListener. Pour IE, nous modifions l'exemple précédent en :

+ +
+if (el.addEventListener) {
+  el.addEventListener('click', modifierTexte, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifierTexte);
+}
+
+ +

Il y a un inconvénient avec attachEvent : la valeur de this sera une référence à l'objet window, au lieu de l'élément sur lequel il a été déclenché.

+ +

La méthode attachEvent() peut être couplée avec l'évènement onresize pour détecter que certains éléments dans une page web ont été redimensionnés. L'évènement propriétaire mselementresize, lorsqu'il est couplé avec la méthode addEventListener d'enregistrement des gestionnaires d'évènements, fournit une fonctionnalité similaire à celle de onresize, se déclenchant quand certains éléments HTML sont redimensionnés.

+ +

Prothèse d'émulation (polyfill)

+ +

Vous pouvez contourner le fait que addEventListener(), removeEventListener(), {{domxref("Event.preventDefault()")}} et {{domxref("Event.stopPropagation()")}} ne sont pas pris en charge par IE 8 en utilisant le code suivant au début de votre script. Le code prend en charge l'utilisation de handleEvent(), et aussi l'évènement {{event("DOMContentLoaded")}}.

+ +
+

Note : useCapture n'est pas pris en charge, du fait qu'IE 8 n'a aucune méthode alternative. Le code suivant ajoute seulement la prise en charge d'IE 8. Cette émulation pour IE 8 fonctionne uniquement en mode standard : une déclaration doctype est requise.

+
+ +
+(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (sera ignoré) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (sera ignoré) */) {
+      var counter=0;
+      while (counter<eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();
+
+ +

Ancienne manière d'enregistrer les écouteurs d'évènements

+ +

La méthode addEventListener() a été ajoutée dans la spécification DOM 2 Events. Avant cela, les écouteurs d'évènements étaient enregistrés de la manière suivante :

+ +
+// Passage d'une référence à une fonction
+// Ne pas ajouter de '()' après, cela appelerait la fonction !
+el.onclick = modifyText;
+
+// Utilisation d'une fonction directe
+element.onclick = function() {
+  ...logique de la fonction...
+};
+
+ +

Cette méthode remplace l'(les) écouteur(s) d'évènements click existant(s) de l'élément s'il y en a. D'autres évènements et leurs gestionnaires d'évènements associés comme blur (onblur), et keypress ( onkeypress) se comportent de façon similaire.

+ +

Comme elle faisait partie de façon fondamentale du DOM 0, cette méthode est très largement prise en charge et ne nécessite aucun code multi-navigateur. C'est pourquoi elle est souvent utilisée pour enregistrer des évènements dynamiquement quand de très anciens navigateurs (comme IE dans les versions antérieures à IE8) doivent être pris en charge ; voir la table plus bas pour les détails de la prise en charge par les navigateurs pour addEventListener.

+ +

Problèmes de mémoire

+ +
+let i;
+const els = document.getElementsByTagName('*');
+
+// Cas 1
+for (i=0 ; i<els.length ; i++) {
+  els[i].addEventListener("click", function(e){/*faire quelque chose*/}, false);
+}
+
+// Cas 2
+function processEvent(e) {
+  /* faire quelque chose */
+}
+
+for (i=0 ; i<els.length ; i++) {
+  els[i].addEventListener("click", processEvent, false);
+}
+
+ +

Dans le premier cas ci-dessus, une nouvelle fonction gestionnaire (anonyme) est créée à chaque itération de la boucle. Dans le second cas, la même fonction déclarée préalablement est utilisée comme gestionnaire d'évènements. Cela entraîne une consommation de mémoire réduite. De plus, dans le premier cas, il n'est pas possible d'appeler {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} du fait qu'aucune référence à la fonction anonyme n'est conservée (ou ici, n'est conservée aucune des multiples fonctions anonymes que la boucle peut créer). Dans le second cas, il est possible de faire myElement.removeEventListener("click", processEvent, false) du fait que processEvent est la référence à la fonction.

+ +

En fait, en ce qui concerne la consommation de mémoire, l'absence de conservation d'une référence à la fonction n'est pas le problème réel ; c'est plutôt l'absence de conservation d'une référence STATIQUE à la fonction. Dans les deux cas à problème ci-dessous, une référence à la fonction est conservée, mais du fait qu'elle est redéfinie à chaque itération, elle n'est pas statique. Dans le troisème cas, la référence à la fonction anonyme est réaffectée à chaque itération. Dans le quatrième cas, la définition entière de la fonction est inchangée, mais elle est néanmoins répétitivement définie comme si elle était nouvelle (à moins qu'elle n'ait été [[promue]] par le compilateur), et elle n'est donc pas statique. Par conséquent, bien qu'il ne semble y avoir simplement que des [[Multiple identical event listeners]], dans les deux cas, chaque itération créera à la place un nouvel écouteur avec sa propre unique référence à la fonction gestionnaire. Cependant, du fait que la définition de la fonction elle-même ne change pas, la MÊME fonction peut toujours être appelée pour chaque écouteur dupliqué (spécialement si le code est optimisé.)

+ +

Également dans les deux cas, du fait que la référence à la fonction e été conservée mais est répétitivement redéfinie par chaque ajout, l'instruction 'remove' ci-dessus peut toujours supprimer un écouteur, mais seulement le dernier ajouté.

+ +
+// Pour illustration seulement : notez la "FAUTE" de [j] au lieu de [i] entrainant ainsi que les évènements voulus sont tous enregistrés pour le MÊME élément
+
+// Cas 3
+for (let i=0, j=0 ; i<els.length ; i++) {
+  /* faire des tas de choses avec j */
+  els[j].addEventListener("click", processEvent = function(e) {/*faire quelque chose*/}, false);
+}
+
+// Cas 4
+for (let i=0, j=0 ; i<els.length ; i++) {
+  /* faire des tas de choses avec  j */
+  function processEvent(e) {/*faire quelque chose*/};
+  els[j].addEventListener("click", processEvent, false);
+}
+ +

Amélioration des performances de défilement avec les écouteurs passifs

+ +

D'après la spécification, la valeur par défaut pour l'option passive est toujours false. Toutefois, cela introduit la possibilité que des écouteurs d'évènements gérant certains évènements tactiles (parmi d'autres) bloquent le fil d'exécution principal du navigateur pendant qu'il essaye de gérer le défilement, avec pour résultat une possiblement énorme réduction de performance pendant la gestion du défilement.

+ +

Pour prévenir ce problème, certains navigateurs (spécifiquement, Chrome et Firefox) ont changé la valeur par défault de l'option passive à true pour les évènements {{event("touchstart")}} et {{event("touchmove")}} dans les nœuds de niveau document {{domxref("Window")}}, {{domxref("Document")}}, et {{domxref("Document.body")}}. Cela empêche que l'écouteur d'évènement ne soit appelé, de sorte qu'il ne peut pas bloquer le rendu de la page pendant que l'utilisateur fait un défilement.

+ +
+

Note : Voir la table de compatibilité ci-dessous si vous avez besoin de savoir quels navigateurs (et/ou quelles versions de ces navigateurs) implémentent ce comportement modifié.

+
+ +

Vous pouvez passer outre ce comportement en initialisant explicitement la valeur de passive à false, comme montré ci-dessous :

+ +
+/* Détection de la fonctionnalité */
+let passiveIfSupported = false;
+
+try {
+  window.addEventListener("test", null,
+    Object.defineProperty(
+      {},
+      "passive",
+      {
+        get: function() { passiveIfSupported = { passive: true }; }
+      }
+    )
+  );
+} catch(err) {}
+
+window.addEventListener('scroll', function(event) {
+  /* faire quelque chose */
+  // ne peut pas utiliser event.preventDefault();
+}, passiveIfSupported );
+
+ +

Dans les navigateurs anciens qui ne prennent pas en charge le paramètre options d'addEventListener(), le fait d'essayer de l'utiliser empêche l'utilisation de l'argument useCapture sans utilisation appropriée de la détection de fonctionnalité.

+ +

Vous n'avez pas besoin de vous inquiéter de la valeur de passive pour l'évènement {{event("scroll")}} de base. Du fait qu'il ne peut pas être annulé, les écouteurs d'évènements ne peuvant pas bloquer le rendu de la page de toute façon.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}{{Spec2("DOM2 Events")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.EventTarget.addEventListener", 3)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/eventtarget/dispatchevent/index.html b/files/fr/web/api/eventtarget/dispatchevent/index.html deleted file mode 100644 index ff64998f51..0000000000 --- a/files/fr/web/api/eventtarget/dispatchevent/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: element.dispatchEvent -slug: Web/API/EventTarget/dispatchEvent -tags: - - API - - DOM - - Méthodes - - Traitement - - évènements -translation_of: Web/API/EventTarget/dispatchEvent ---- -

{{APIRef("DOM Events")}}

- -

Envoie un {{domxref("Event")}} (évènement) à la {{domxref("EventTarget")}} (cible) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (écouteurs)  dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec dispatchEvent().

- -

Syntaxe

- -
cancelled = !target.dispatchEvent(event)
-
- -

Paramètres

- - - -

Valeur retournée

- - - -

La méthode dispatchEvent lance une exception UNSPECIFIED_EVENT_TYPE_ERR si le type de l'évènement n'a pas été spécifié par son initialisation avant l'appel de la méthode ou s'il est null ou une chaîne vide. Les exceptions lancées par les gestionnaires d'évènements sont signalées comme exceptions non interceptées ; les gestionnaires d'événements s'exécutent sur une pile d'appels imbriquée : ils bloquent l'appelant jusqu'à ce qu'ils se terminent, mais les exceptions ne se propagent pas à l'appelant.

- -

Notes

- -

Contrairement aux événements "natifs", qui sont déclenchés par le DOM et invoquent les gestionnaires d'événements de manière asynchrone via la boucle des événements, dispatchEvent appelle les gestionnaires d'événements de manière synchrone. Tous les gestionnaires d'événements applicables s'exécuteront et retourneront avant que le code ne continue après l'appel à dispatchEvent.

- -

Comme montré dans l'exemple qui précède, dispatchEvent est la dernière étape du processus création-initialisation-envoi, qui est utilisé pour envoyer des évènements dans le modèle de l'implémentation des évènements. Ceux-ci peuvent être créés en utilisant le constructeur d'évènements.

- -

Voir aussi Objet Event référence.

- -

Exemple

- -

Voir Création et déclenchement d'évènements.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}{{ Spec2('DOM WHATWG') }}Définition initiale dans la spécification DOM 2 Events (évènements)
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.EventTarget.dispatchEvent")}}

diff --git a/files/fr/web/api/eventtarget/dispatchevent/index.md b/files/fr/web/api/eventtarget/dispatchevent/index.md new file mode 100644 index 0000000000..ff64998f51 --- /dev/null +++ b/files/fr/web/api/eventtarget/dispatchevent/index.md @@ -0,0 +1,71 @@ +--- +title: element.dispatchEvent +slug: Web/API/EventTarget/dispatchEvent +tags: + - API + - DOM + - Méthodes + - Traitement + - évènements +translation_of: Web/API/EventTarget/dispatchEvent +--- +

{{APIRef("DOM Events")}}

+ +

Envoie un {{domxref("Event")}} (évènement) à la {{domxref("EventTarget")}} (cible) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (écouteurs)  dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec dispatchEvent().

+ +

Syntaxe

+ +
cancelled = !target.dispatchEvent(event)
+
+ +

Paramètres

+ + + +

Valeur retournée

+ + + +

La méthode dispatchEvent lance une exception UNSPECIFIED_EVENT_TYPE_ERR si le type de l'évènement n'a pas été spécifié par son initialisation avant l'appel de la méthode ou s'il est null ou une chaîne vide. Les exceptions lancées par les gestionnaires d'évènements sont signalées comme exceptions non interceptées ; les gestionnaires d'événements s'exécutent sur une pile d'appels imbriquée : ils bloquent l'appelant jusqu'à ce qu'ils se terminent, mais les exceptions ne se propagent pas à l'appelant.

+ +

Notes

+ +

Contrairement aux événements "natifs", qui sont déclenchés par le DOM et invoquent les gestionnaires d'événements de manière asynchrone via la boucle des événements, dispatchEvent appelle les gestionnaires d'événements de manière synchrone. Tous les gestionnaires d'événements applicables s'exécuteront et retourneront avant que le code ne continue après l'appel à dispatchEvent.

+ +

Comme montré dans l'exemple qui précède, dispatchEvent est la dernière étape du processus création-initialisation-envoi, qui est utilisé pour envoyer des évènements dans le modèle de l'implémentation des évènements. Ceux-ci peuvent être créés en utilisant le constructeur d'évènements.

+ +

Voir aussi Objet Event référence.

+ +

Exemple

+ +

Voir Création et déclenchement d'évènements.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}{{ Spec2('DOM WHATWG') }}Définition initiale dans la spécification DOM 2 Events (évènements)
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.EventTarget.dispatchEvent")}}

diff --git a/files/fr/web/api/eventtarget/eventtarget/index.html b/files/fr/web/api/eventtarget/eventtarget/index.html deleted file mode 100644 index 419fd32ffe..0000000000 --- a/files/fr/web/api/eventtarget/eventtarget/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: EventTarget() -slug: Web/API/EventTarget/EventTarget -tags: - - API - - Cible - - Constructeur - - DOM - - évènements -translation_of: Web/API/EventTarget/EventTarget ---- -
{{APIRef("DOM Events")}}
- -

Le constructeur EventTarget() crée une nouvelle instance d'objet {{domxref("EventTarget")}}.

- -

Syntaxe

- -
var myEventTarget = new EventTarget();
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

Une instance d'objet {{domxref("EventTarget")}}.

- -

Exemples

- -
class MyEventTarget extends EventTarget {
-  constructor(mySecret) {
-    super();
-    this._secret = mySecret;
-  }
-
-  get secret() { return this._secret; }
-};
-
-let myEventTarget = new MyEventTarget(5);
-let value = myEventTarget.secret;  // == 5
-myEventTarget.addEventListener("foo", function(e) {
-  this._secret = e.detail;
-});
-
-let event = new CustomEvent("foo", { detail: 7 });
-myEventTarget.dispatchEvent(event);
-let newValue = myEventTarget.secret; // == 7
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.EventTarget.EventTarget")}}

-
- -

Voir aussi

- - - -

 

diff --git a/files/fr/web/api/eventtarget/eventtarget/index.md b/files/fr/web/api/eventtarget/eventtarget/index.md new file mode 100644 index 0000000000..419fd32ffe --- /dev/null +++ b/files/fr/web/api/eventtarget/eventtarget/index.md @@ -0,0 +1,80 @@ +--- +title: EventTarget() +slug: Web/API/EventTarget/EventTarget +tags: + - API + - Cible + - Constructeur + - DOM + - évènements +translation_of: Web/API/EventTarget/EventTarget +--- +
{{APIRef("DOM Events")}}
+ +

Le constructeur EventTarget() crée une nouvelle instance d'objet {{domxref("EventTarget")}}.

+ +

Syntaxe

+ +
var myEventTarget = new EventTarget();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur retournée

+ +

Une instance d'objet {{domxref("EventTarget")}}.

+ +

Exemples

+ +
class MyEventTarget extends EventTarget {
+  constructor(mySecret) {
+    super();
+    this._secret = mySecret;
+  }
+
+  get secret() { return this._secret; }
+};
+
+let myEventTarget = new MyEventTarget(5);
+let value = myEventTarget.secret;  // == 5
+myEventTarget.addEventListener("foo", function(e) {
+  this._secret = e.detail;
+});
+
+let event = new CustomEvent("foo", { detail: 7 });
+myEventTarget.dispatchEvent(event);
+let newValue = myEventTarget.secret; // == 7
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.EventTarget.EventTarget")}}

+
+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/api/eventtarget/index.html b/files/fr/web/api/eventtarget/index.html deleted file mode 100644 index b58f686516..0000000000 --- a/files/fr/web/api/eventtarget/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: EventTarget -slug: Web/API/EventTarget -tags: - - API - - Cible de l'événement - - DOM - - DOM Events - - EventTarget - - Interface - - Événements DOM -browser-compat: api.EventTarget -translation_of: Web/API/EventTarget ---- -
{{ApiRef("DOM Events")}}
- -

EventTarget est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.

- -

{{domxref ("Element")}}, {{domxref ("Document")}} et {{domxref ("Window")}} sont les cibles d'événements les plus fréquentes, mais d'autres objets peuvent également être des cibles d'événements. Par exemple {{domxref ("XMLHttpRequest")}}, {{domxref ("AudioNode")}}, {{domxref ("AudioContext")}} et autres.

- -

De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de gestionnaires d'événements via les propriétés et attributs onevent.

- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
{{domxref("EventTarget.EventTarget()", "EventTarget()")}}
-
Crée une nouvelle instance d'objet EventTarget.
-
- -

Méthodes

- -
-
{{domxref("EventTarget.addEventListener()", "EventTarget.addEventListener()")}}
-
Enregistre un gestionnaire d'événements d'un type d'événement spécifique sur EventTarget.
-
{{domxref("EventTarget.removeEventListener()", "EventTarget.removeEventListener()")}}
-
Supprime un écouteur d'événement de EventTarget.
-
{{domxref("EventTarget.dispatchEvent()", "EventTarget.dispatchEvent()")}}
-
Envoie un événement à cet EventTarget.
-
- -

Méthodes supplémentaires dans la base de code Chrome de Mozilla

- -

Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés onevent.

- -

Voir aussi liaisons WebIDL.

- - - -

Exemple

- -

Implémentation simple d'EventTarget

- -
const EventTarget = function () {
-  this.listeners = {}
-}
-
-EventTarget.prototype.listeners = null
-EventTarget.prototype.addEventListener = function (type, callback) {
-  if (!(type in this.listeners)) {
-    this.listeners[type] = []
-  }
-  this.listeners[type].push(callback)
-}
-
-EventTarget.prototype.removeEventListener = function (type, callback) {
-  if (!(type in this.listeners)) {
-    return
-  }
-  const stack = this.listeners[type]
-  for (let i = 0, l = stack.length; i < l; i++) {
-    if (stack[i] === callback) {
-      stack.splice(i, 1)
-      return
-    }
-  }
-}
-
-EventTarget.prototype.dispatchEvent = function (event) {
-  if (!(event.type in this.listeners)) {
-    return true
-  }
-  const stack = this.listeners[event.type].slice()
-
-  for (let i = 0, l = stack.length; i < l; i++) {
-    stack[i].call(this, event)
-  }
-  return !event.defaultPrevented
-}
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatiblité des navigateurs

- -

{{Compat}}

- -

Voir également

- - diff --git a/files/fr/web/api/eventtarget/index.md b/files/fr/web/api/eventtarget/index.md new file mode 100644 index 0000000000..b58f686516 --- /dev/null +++ b/files/fr/web/api/eventtarget/index.md @@ -0,0 +1,110 @@ +--- +title: EventTarget +slug: Web/API/EventTarget +tags: + - API + - Cible de l'événement + - DOM + - DOM Events + - EventTarget + - Interface + - Événements DOM +browser-compat: api.EventTarget +translation_of: Web/API/EventTarget +--- +
{{ApiRef("DOM Events")}}
+ +

EventTarget est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.

+ +

{{domxref ("Element")}}, {{domxref ("Document")}} et {{domxref ("Window")}} sont les cibles d'événements les plus fréquentes, mais d'autres objets peuvent également être des cibles d'événements. Par exemple {{domxref ("XMLHttpRequest")}}, {{domxref ("AudioNode")}}, {{domxref ("AudioContext")}} et autres.

+ +

De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de gestionnaires d'événements via les propriétés et attributs onevent.

+ +

{{InheritanceDiagram}}

+ +

Constructeur

+ +
+
{{domxref("EventTarget.EventTarget()", "EventTarget()")}}
+
Crée une nouvelle instance d'objet EventTarget.
+
+ +

Méthodes

+ +
+
{{domxref("EventTarget.addEventListener()", "EventTarget.addEventListener()")}}
+
Enregistre un gestionnaire d'événements d'un type d'événement spécifique sur EventTarget.
+
{{domxref("EventTarget.removeEventListener()", "EventTarget.removeEventListener()")}}
+
Supprime un écouteur d'événement de EventTarget.
+
{{domxref("EventTarget.dispatchEvent()", "EventTarget.dispatchEvent()")}}
+
Envoie un événement à cet EventTarget.
+
+ +

Méthodes supplémentaires dans la base de code Chrome de Mozilla

+ +

Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés onevent.

+ +

Voir aussi liaisons WebIDL.

+ + + +

Exemple

+ +

Implémentation simple d'EventTarget

+ +
const EventTarget = function () {
+  this.listeners = {}
+}
+
+EventTarget.prototype.listeners = null
+EventTarget.prototype.addEventListener = function (type, callback) {
+  if (!(type in this.listeners)) {
+    this.listeners[type] = []
+  }
+  this.listeners[type].push(callback)
+}
+
+EventTarget.prototype.removeEventListener = function (type, callback) {
+  if (!(type in this.listeners)) {
+    return
+  }
+  const stack = this.listeners[type]
+  for (let i = 0, l = stack.length; i < l; i++) {
+    if (stack[i] === callback) {
+      stack.splice(i, 1)
+      return
+    }
+  }
+}
+
+EventTarget.prototype.dispatchEvent = function (event) {
+  if (!(event.type in this.listeners)) {
+    return true
+  }
+  const stack = this.listeners[event.type].slice()
+
+  for (let i = 0, l = stack.length; i < l; i++) {
+    stack[i].call(this, event)
+  }
+  return !event.defaultPrevented
+}
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatiblité des navigateurs

+ +

{{Compat}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/eventtarget/removeeventlistener/index.html b/files/fr/web/api/eventtarget/removeeventlistener/index.html deleted file mode 100644 index bef6e42e79..0000000000 --- a/files/fr/web/api/eventtarget/removeeventlistener/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: element.removeEventListener -slug: Web/API/EventTarget/removeEventListener -tags: - - API - - Cible - - DOM - - Evènement - - Méthode - - Reference - - Suppression - - Écouteurs -translation_of: Web/API/EventTarget/removeEventListener ---- -
{{APIRef("DOM Events")}}
- -

La méthode EventTarget.removeEventListener() supprime d'une {{domxref("EventTarget")}} (cible) un écouteur d'évènements précédemment enregistré avec {{domxref("EventTarget.addEventListener()")}}. L'écouteur d'évènements à supprimer est identifié en utilisant la combinaison du type d'évènement, la fonction "event listener" elle-même et diverses options factultatives qui peuvent affecter le processus de correspondance ; voir la section Correspondance utilisée pour la suppression d'écouteurs d'événements ci-après.

- -

Syntaxe

- -
target.removeEventListener(type, listener[, options]);
-target.removeEventListener(type, listener[, useCapture]);
-
- -

Paramètres

- -
-
type
-
Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements.
-
listener
-
La fonction  {{domxref("EventListener")}}  du gestionnaire d'évènements à retirer de la cible d'évènements.
-
options {{optional_inline}}
-
-

Un objet d'options qui spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont :

- -
    -
  • capture : un {{jsxref("Boolean")}} indiquant que les évènements de ce type seront envoyés au listener enregistré avant d'être distribués à tout EventTarget en-dessous dans l'arborescence du DOM.
    • -
  • passive : un {{jsxref("Boolean")}} qui indique que le listener n'appellera jamais preventDefault(). S'il doit le faire, l'agent utilisateur l'ignorera et génèrera un avertissement dans la console.
    • -
  • {{non-standard_inline}} mozSystemGroup : Disponible seulement pour le code exécuté dans XBL ou dans le chrome de Firefox, c'est un {{jsxref("Boolean")}} indiquant que l'écouteur a été ajouté au groupe système.
    • -
-
-
useCapture {{optional_inline}}
-
Indique si l'{{domxref("EventListener")}} à retirer a été enregistré comme un écouteur capturant, ou non. Si le paramètre est absent, la valeur par défaut est false (faux).
-
- -

Si un écouteur est enregistré deux fois, un avec capture et un sans, supprimez chacun séparément. La suppression d'un écouteur de capture n'affecte pas une version non capturante du même écouteur, et vice versa.

- -

Valeur de retour

- -

undefined. (indéfini)

- -

Correspondance utilisée pour la suppression d'écouteurs d'événements

- -

Étant donné qu'un écouteur d'événements a déjà été ajouté en appelant {{domxref("EventTarget.addEventListener","addEventListener()")}}, vous pouvez éventuellement arriver à un point auquel vous devez le supprimer. Vous devez alors spécifier le même type et les mêmes paramètres listener pour removeEventListener(), mais qu'en est-il des paramètres options ou useCapture ?

- -

Alors que addEventListener() vous permet d'ajouter le même écouteur plus d'une fois pour le même type si les options sont différentes, la seule option que removeEventListener() vérifie est l'indicateur capture / useCapture. Sa valeur doit correspondre pour que removeEventListener() corresponde, mais pas les autres valeurs.

- -

Par exemple, considérons l'appel de addEventListener() :

- -
element.addEventListener("mousedown", handleMouseDown, true);
- -

Maintenant, voyons chacun des deux appels de removeEventListener() :

- -
element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
-element.removeEventListener("mousedown", handleMouseDown, true);
- -

Le premier appel échoue parce que la valeur de useCapture ne correspond pas. Le second réussit puisqu'il correspond pour useCapture.

- -

Maintenant, observez ceci :

- -
element.addEventListener("mousedown", handleMouseDown, { passive: true });
- -

Ici, nous spécifions un objet options dans lequel passive est défini à true, tandis que les autres options sont laissées à la valeur par défaut de false.

- -

Maintenant, regardez chacun de ces appels successifs à removeEventListener(). N'importe lequel d'entre eux dans lequel capture ou useCapture est true (vrai) échoue ; tous les autres réussissent. Seul le paramètre de capture est important pour removeEventListener().

- -
element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Réussit
-element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Réussit
-element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Échoue
-element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Réussit
-element.removeEventListener("mousedown", handleMouseDown, false);                 // Réussit
-element.removeEventListener("mousedown", handleMouseDown, true);                  // Échoue
-
- -

Il est à noter que certaines versions du navigateur ont été incohérentes à ce sujet, et sauf si vous avez des raisons spécifiques, il est probablement sage d'utiliser les mêmes valeurs que pour l'appel à addEventListener() lors de l'appel de removeEventListener().

- -

Notes

- -

Si un {{domxref("EventListener")}} est retiré d'un {{domxref("EventTarget")}} alors qu'il est en train de traiter un événement, il ne sera pas déclenché par les actions courantes. Les {{domxref("EventListener")}} ne peuvent jamais être invoqués après avoir été retirés.

- -

L'appel de removeEventListener() avec des paramètres n'identifiant aucun {{domxref("EventListener")}} actuellement enregistré sur l'EventTarget n'a aucun effet.

- -

Exemples

- -

Cet exemple montre comment ajouter un écouteur d'évènements basé sur click et supprimer un écouteur d'évènements basé sur mouseover.

- -
var body = document.querySelector('body'),
-    clickTarget = document.getElementById('click-target'),
-    mouseOverTarget = document.getElementById('mouse-over-target'),
-    toggle = false;
-
-function makeBackgroundYellow() {
-    'use strict';
-
-    if (toggle) {
-        body.style.backgroundColor = 'white';
-    } else {
-        body.style.backgroundColor = 'yellow';
-    }
-
-    toggle = !toggle;
-}
-
-clickTarget.addEventListener('click',
-    makeBackgroundYellow,
-    false
-);
-
-mouseOverTarget.addEventListener('mouseover', function () {
-    'use strict';
-
-    clickTarget.removeEventListener('click',
-        makeBackgroundYellow,
-        false
-    );
-});
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}{{Spec2("DOM2 Events")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.EventTarget.removeEventListener", 3)}}

- -

Prothèse (polyfill) pour la prise en charge des navigateurs anciens

- -

addEventListener() et removeEventListener() ne sont pas présents dans les anciens navigateurs. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts, permettant l'utilisation de addEventListener() et removeEventListener() dans les implémentations qui ne le supportent pas nativement. Toutefois, cette méthode ne fonctionnera pas sur Internet Explorer 7 ou version antérieure, car l'extension du fichier Element.prototype n'a pas été prise en charge jusqu'à Internet Explorer 8.

- -
if (!Element.prototype.addEventListener) {
-  var oListeners = {};
-  function runListeners(oEvent) {
-    if (!oEvent) { oEvent = window.event; }
-    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
-      if (oEvtListeners.aEls[iElId] === this) {
-        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
-        break;
-      }
-    }
-  }
-  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
-    if (oListeners.hasOwnProperty(sEventType)) {
-      var oEvtListeners = oListeners[sEventType];
-      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
-        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
-      }
-      if (nElIdx === -1) {
-        oEvtListeners.aEls.push(this);
-        oEvtListeners.aEvts.push([fListener]);
-        this["on" + sEventType] = runListeners;
-      } else {
-        var aElListeners = oEvtListeners.aEvts[nElIdx];
-        if (this["on" + sEventType] !== runListeners) {
-          aElListeners.splice(0);
-          this["on" + sEventType] = runListeners;
-        }
-        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
-          if (aElListeners[iLstId] === fListener) { return; }
-        }
-        aElListeners.push(fListener);
-      }
-    } else {
-      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
-      this["on" + sEventType] = runListeners;
-    }
-  };
-  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
-    if (!oListeners.hasOwnProperty(sEventType)) { return; }
-    var oEvtListeners = oListeners[sEventType];
-    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
-      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
-    }
-    if (nElIdx === -1) { return; }
-    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
-      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
-    }
-  };
-}
- -

Voir aussi

- - diff --git a/files/fr/web/api/eventtarget/removeeventlistener/index.md b/files/fr/web/api/eventtarget/removeeventlistener/index.md new file mode 100644 index 0000000000..bef6e42e79 --- /dev/null +++ b/files/fr/web/api/eventtarget/removeeventlistener/index.md @@ -0,0 +1,220 @@ +--- +title: element.removeEventListener +slug: Web/API/EventTarget/removeEventListener +tags: + - API + - Cible + - DOM + - Evènement + - Méthode + - Reference + - Suppression + - Écouteurs +translation_of: Web/API/EventTarget/removeEventListener +--- +
{{APIRef("DOM Events")}}
+ +

La méthode EventTarget.removeEventListener() supprime d'une {{domxref("EventTarget")}} (cible) un écouteur d'évènements précédemment enregistré avec {{domxref("EventTarget.addEventListener()")}}. L'écouteur d'évènements à supprimer est identifié en utilisant la combinaison du type d'évènement, la fonction "event listener" elle-même et diverses options factultatives qui peuvent affecter le processus de correspondance ; voir la section Correspondance utilisée pour la suppression d'écouteurs d'événements ci-après.

+ +

Syntaxe

+ +
target.removeEventListener(type, listener[, options]);
+target.removeEventListener(type, listener[, useCapture]);
+
+ +

Paramètres

+ +
+
type
+
Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements.
+
listener
+
La fonction  {{domxref("EventListener")}}  du gestionnaire d'évènements à retirer de la cible d'évènements.
+
options {{optional_inline}}
+
+

Un objet d'options qui spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont :

+ +
    +
  • capture : un {{jsxref("Boolean")}} indiquant que les évènements de ce type seront envoyés au listener enregistré avant d'être distribués à tout EventTarget en-dessous dans l'arborescence du DOM.
    • +
  • passive : un {{jsxref("Boolean")}} qui indique que le listener n'appellera jamais preventDefault(). S'il doit le faire, l'agent utilisateur l'ignorera et génèrera un avertissement dans la console.
    • +
  • {{non-standard_inline}} mozSystemGroup : Disponible seulement pour le code exécuté dans XBL ou dans le chrome de Firefox, c'est un {{jsxref("Boolean")}} indiquant que l'écouteur a été ajouté au groupe système.
    • +
+
+
useCapture {{optional_inline}}
+
Indique si l'{{domxref("EventListener")}} à retirer a été enregistré comme un écouteur capturant, ou non. Si le paramètre est absent, la valeur par défaut est false (faux).
+
+ +

Si un écouteur est enregistré deux fois, un avec capture et un sans, supprimez chacun séparément. La suppression d'un écouteur de capture n'affecte pas une version non capturante du même écouteur, et vice versa.

+ +

Valeur de retour

+ +

undefined. (indéfini)

+ +

Correspondance utilisée pour la suppression d'écouteurs d'événements

+ +

Étant donné qu'un écouteur d'événements a déjà été ajouté en appelant {{domxref("EventTarget.addEventListener","addEventListener()")}}, vous pouvez éventuellement arriver à un point auquel vous devez le supprimer. Vous devez alors spécifier le même type et les mêmes paramètres listener pour removeEventListener(), mais qu'en est-il des paramètres options ou useCapture ?

+ +

Alors que addEventListener() vous permet d'ajouter le même écouteur plus d'une fois pour le même type si les options sont différentes, la seule option que removeEventListener() vérifie est l'indicateur capture / useCapture. Sa valeur doit correspondre pour que removeEventListener() corresponde, mais pas les autres valeurs.

+ +

Par exemple, considérons l'appel de addEventListener() :

+ +
element.addEventListener("mousedown", handleMouseDown, true);
+ +

Maintenant, voyons chacun des deux appels de removeEventListener() :

+ +
element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
+element.removeEventListener("mousedown", handleMouseDown, true);
+ +

Le premier appel échoue parce que la valeur de useCapture ne correspond pas. Le second réussit puisqu'il correspond pour useCapture.

+ +

Maintenant, observez ceci :

+ +
element.addEventListener("mousedown", handleMouseDown, { passive: true });
+ +

Ici, nous spécifions un objet options dans lequel passive est défini à true, tandis que les autres options sont laissées à la valeur par défaut de false.

+ +

Maintenant, regardez chacun de ces appels successifs à removeEventListener(). N'importe lequel d'entre eux dans lequel capture ou useCapture est true (vrai) échoue ; tous les autres réussissent. Seul le paramètre de capture est important pour removeEventListener().

+ +
element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Réussit
+element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Réussit
+element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Échoue
+element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Réussit
+element.removeEventListener("mousedown", handleMouseDown, false);                 // Réussit
+element.removeEventListener("mousedown", handleMouseDown, true);                  // Échoue
+
+ +

Il est à noter que certaines versions du navigateur ont été incohérentes à ce sujet, et sauf si vous avez des raisons spécifiques, il est probablement sage d'utiliser les mêmes valeurs que pour l'appel à addEventListener() lors de l'appel de removeEventListener().

+ +

Notes

+ +

Si un {{domxref("EventListener")}} est retiré d'un {{domxref("EventTarget")}} alors qu'il est en train de traiter un événement, il ne sera pas déclenché par les actions courantes. Les {{domxref("EventListener")}} ne peuvent jamais être invoqués après avoir été retirés.

+ +

L'appel de removeEventListener() avec des paramètres n'identifiant aucun {{domxref("EventListener")}} actuellement enregistré sur l'EventTarget n'a aucun effet.

+ +

Exemples

+ +

Cet exemple montre comment ajouter un écouteur d'évènements basé sur click et supprimer un écouteur d'évènements basé sur mouseover.

+ +
var body = document.querySelector('body'),
+    clickTarget = document.getElementById('click-target'),
+    mouseOverTarget = document.getElementById('mouse-over-target'),
+    toggle = false;
+
+function makeBackgroundYellow() {
+    'use strict';
+
+    if (toggle) {
+        body.style.backgroundColor = 'white';
+    } else {
+        body.style.backgroundColor = 'yellow';
+    }
+
+    toggle = !toggle;
+}
+
+clickTarget.addEventListener('click',
+    makeBackgroundYellow,
+    false
+);
+
+mouseOverTarget.addEventListener('mouseover', function () {
+    'use strict';
+
+    clickTarget.removeEventListener('click',
+        makeBackgroundYellow,
+        false
+    );
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}{{Spec2("DOM2 Events")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.EventTarget.removeEventListener", 3)}}

+ +

Prothèse (polyfill) pour la prise en charge des navigateurs anciens

+ +

addEventListener() et removeEventListener() ne sont pas présents dans les anciens navigateurs. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts, permettant l'utilisation de addEventListener() et removeEventListener() dans les implémentations qui ne le supportent pas nativement. Toutefois, cette méthode ne fonctionnera pas sur Internet Explorer 7 ou version antérieure, car l'extension du fichier Element.prototype n'a pas été prise en charge jusqu'à Internet Explorer 8.

+ +
if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/extendableevent/extendableevent/index.html b/files/fr/web/api/extendableevent/extendableevent/index.html deleted file mode 100644 index 52786b501f..0000000000 --- a/files/fr/web/api/extendableevent/extendableevent/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: ExtendableEvent.ExtendableEvent() -slug: Web/API/ExtendableEvent/ExtendableEvent -tags: - - API - - Experimental - - ExtendableEvent - - Reference - - Service Workers - - ServiceWorker -translation_of: Web/API/ExtendableEvent/ExtendableEvent ---- -

{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}

- -

Le contructeur ExtendableEvent() crée un nouvel objet {{domxref("ExtendableEvent")}}.

- -

Syntaxe

- -
var myExtendableEvent = new ExtendableEvent(type, init);
- -

Paramètres

- -
-
type
-
Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}.
-
init {{optional_inline}}
-
Un objet d'options contenant n'importe quelle configuration personnalisée que vous voulez appeler à un objet d'évènement. Pour le moment, il n'existe pas d'option dans la spécification, mais il a été défini pour une compatibilité future pour les différents évènements dérivés.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendable-event', 'ExtendableEvent')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.ExtendableEvent.ExtendableEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/extendableevent/extendableevent/index.md b/files/fr/web/api/extendableevent/extendableevent/index.md new file mode 100644 index 0000000000..52786b501f --- /dev/null +++ b/files/fr/web/api/extendableevent/extendableevent/index.md @@ -0,0 +1,59 @@ +--- +title: ExtendableEvent.ExtendableEvent() +slug: Web/API/ExtendableEvent/ExtendableEvent +tags: + - API + - Experimental + - ExtendableEvent + - Reference + - Service Workers + - ServiceWorker +translation_of: Web/API/ExtendableEvent/ExtendableEvent +--- +

{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}

+ +

Le contructeur ExtendableEvent() crée un nouvel objet {{domxref("ExtendableEvent")}}.

+ +

Syntaxe

+ +
var myExtendableEvent = new ExtendableEvent(type, init);
+ +

Paramètres

+ +
+
type
+
Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}.
+
init {{optional_inline}}
+
Un objet d'options contenant n'importe quelle configuration personnalisée que vous voulez appeler à un objet d'évènement. Pour le moment, il n'existe pas d'option dans la spécification, mais il a été défini pour une compatibilité future pour les différents évènements dérivés.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendable-event', 'ExtendableEvent')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.ExtendableEvent.ExtendableEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/extendableevent/index.html b/files/fr/web/api/extendableevent/index.html deleted file mode 100644 index 2d5ffe78b5..0000000000 --- a/files/fr/web/api/extendableevent/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: ExtendableEvent -slug: Web/API/ExtendableEvent -tags: - - API - - Experimental - - ExtendableEvent - - Interface - - Offline - - Reference - - Service Workers - - ServiceWorker - - Workers -translation_of: Web/API/ExtendableEvent -browser-compat: api.ExtendableEvent ---- -
{{APIRef("Service Workers API")}}
- -

L'interface ExtendableEvent étend la durée de vie des événements install et activate envoyés dans la portée globale dans le cycle de vie du service worker. Elle s'assure que les événements fonctionnels (comme FetchEvent) ne soient pas distribués avant de mettre à jour les schémas de la base de données et de vider l'ancien cache.

- -

Si waitUntil() est appelé en dehors du gestionnaire ExtendableEvent, le navigateur doit lever une exception InvalidStateError ; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des promesses à vie étendue.

- -
-

Note : Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir le bug 1180274).

-
- -

Cette interface hérite de l'interface Event.

- -

{{InheritanceDiagram(700, 60, 20)}}

- -
-

Note : Cette interface est disponible seulement quand la portée globale est ServiceWorkerGlobalScope. Elle n'est pas disponible quand c'est un objet Window ou un autre type de worker.

-
- -

Constructeur

- -
-
ExtendableEvent()
-
Crée un nouvel objet ExtendableEvent.
-
- -

Propriétés

- -

N'implémente pas de propriétés spécifiques, mais hérite de celles de son parent, Event.

- -

Méthodes

- -

Hérite des méthodes de son parent Event.

- -
-
ExtendableEvent.waitUntil()
-
Étend la durée de vie de l'évènement. Cette méthode doit être appelée dans le gestionnaire d'évènement install pour le worker en cours d'installation (voir installing) et dans le gestionnaire d'évènement activate pour le worker actif (voir active).
-
- -

Exemples

- -

Ce fragment de code est tiré de l'exemple du service worker utilisant prefetch (voir l'exemple en live). Ce code appelle ExtendableEvent.waitUntil() dans le gestionnaire d'évènement ServiceWorkerGlobalScope.oninstall, retardant le traitement du worker ServiceWorkerRegistration.installing après l'installation jusqu'à ce que la promesse se résolve. La promesse se résout quand toutes les ressources ont été récupérées et mises en cache, ou quand une exception est levée.

- -

Ce fragment de code montre aussi une bonne pratique pour construire des versions de cache utilisées par le service worker. Même s'il n'y a qu'un cache dans cet exemple, la même approche peut être utilisée pour plusieurs caches. Il lie un identifiant court pour un cache avec un nom de cache spécifique et versionné.

- -
var CACHE_VERSION = 1;
-var CURRENT_CACHES = {
-  prefetch: 'prefetch-cache-v' + CACHE_VERSION
-};
-
-self.addEventListener('install', function(event) {
-  var urlsToPrefetch = [
-    './static/pre_fetched.txt',
-    './static/pre_fetched.html',
-    'https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif'
-  ];
-
-  console.log('Installation en cours. Ressources à pré-charger :', urlsToPrefetch);
-
-  event.waitUntil(
-    caches.open(CURRENT_CACHES['prefetch']).then(function(cache) {
-      cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
-        return new Request(urlToPrefetch, {mode: 'no-cors'});
-      })).then(function() {
-        console.log('Toutes les ressources ont été chargées et mises en cache.');
-      });
-    }).catch(function(error) {
-      console.error('Erreur de pré-chargement :', error);
-    })
-  );
-});
- -
-

Attention : Au moment du chargement des ressources, il est très important d'utiliser {mode: 'no-cors'} s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le CORS. Dans cet exemple, www.chromium.org ne prend pas en charge le CORS.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendable-event', 'ExtendableEvent')}}{{Spec2('Service Workers')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/extendableevent/index.md b/files/fr/web/api/extendableevent/index.md new file mode 100644 index 0000000000..2d5ffe78b5 --- /dev/null +++ b/files/fr/web/api/extendableevent/index.md @@ -0,0 +1,123 @@ +--- +title: ExtendableEvent +slug: Web/API/ExtendableEvent +tags: + - API + - Experimental + - ExtendableEvent + - Interface + - Offline + - Reference + - Service Workers + - ServiceWorker + - Workers +translation_of: Web/API/ExtendableEvent +browser-compat: api.ExtendableEvent +--- +
{{APIRef("Service Workers API")}}
+ +

L'interface ExtendableEvent étend la durée de vie des événements install et activate envoyés dans la portée globale dans le cycle de vie du service worker. Elle s'assure que les événements fonctionnels (comme FetchEvent) ne soient pas distribués avant de mettre à jour les schémas de la base de données et de vider l'ancien cache.

+ +

Si waitUntil() est appelé en dehors du gestionnaire ExtendableEvent, le navigateur doit lever une exception InvalidStateError ; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des promesses à vie étendue.

+ +
+

Note : Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir le bug 1180274).

+
+ +

Cette interface hérite de l'interface Event.

+ +

{{InheritanceDiagram(700, 60, 20)}}

+ +
+

Note : Cette interface est disponible seulement quand la portée globale est ServiceWorkerGlobalScope. Elle n'est pas disponible quand c'est un objet Window ou un autre type de worker.

+
+ +

Constructeur

+ +
+
ExtendableEvent()
+
Crée un nouvel objet ExtendableEvent.
+
+ +

Propriétés

+ +

N'implémente pas de propriétés spécifiques, mais hérite de celles de son parent, Event.

+ +

Méthodes

+ +

Hérite des méthodes de son parent Event.

+ +
+
ExtendableEvent.waitUntil()
+
Étend la durée de vie de l'évènement. Cette méthode doit être appelée dans le gestionnaire d'évènement install pour le worker en cours d'installation (voir installing) et dans le gestionnaire d'évènement activate pour le worker actif (voir active).
+
+ +

Exemples

+ +

Ce fragment de code est tiré de l'exemple du service worker utilisant prefetch (voir l'exemple en live). Ce code appelle ExtendableEvent.waitUntil() dans le gestionnaire d'évènement ServiceWorkerGlobalScope.oninstall, retardant le traitement du worker ServiceWorkerRegistration.installing après l'installation jusqu'à ce que la promesse se résolve. La promesse se résout quand toutes les ressources ont été récupérées et mises en cache, ou quand une exception est levée.

+ +

Ce fragment de code montre aussi une bonne pratique pour construire des versions de cache utilisées par le service worker. Même s'il n'y a qu'un cache dans cet exemple, la même approche peut être utilisée pour plusieurs caches. Il lie un identifiant court pour un cache avec un nom de cache spécifique et versionné.

+ +
var CACHE_VERSION = 1;
+var CURRENT_CACHES = {
+  prefetch: 'prefetch-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('install', function(event) {
+  var urlsToPrefetch = [
+    './static/pre_fetched.txt',
+    './static/pre_fetched.html',
+    'https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif'
+  ];
+
+  console.log('Installation en cours. Ressources à pré-charger :', urlsToPrefetch);
+
+  event.waitUntil(
+    caches.open(CURRENT_CACHES['prefetch']).then(function(cache) {
+      cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
+        return new Request(urlToPrefetch, {mode: 'no-cors'});
+      })).then(function() {
+        console.log('Toutes les ressources ont été chargées et mises en cache.');
+      });
+    }).catch(function(error) {
+      console.error('Erreur de pré-chargement :', error);
+    })
+  );
+});
+ +
+

Attention : Au moment du chargement des ressources, il est très important d'utiliser {mode: 'no-cors'} s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le CORS. Dans cet exemple, www.chromium.org ne prend pas en charge le CORS.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendable-event', 'ExtendableEvent')}}{{Spec2('Service Workers')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/extendablemessageevent/data/index.html b/files/fr/web/api/extendablemessageevent/data/index.html deleted file mode 100644 index fa74ec3d7d..0000000000 --- a/files/fr/web/api/extendablemessageevent/data/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: ExtendableMessageEvent.data -slug: Web/API/ExtendableMessageEvent/data -tags: - - API - - Experimental - - Propriété - - Reference - - Service Workers -translation_of: Web/API/ExtendableMessageEvent/data ---- -
{{APIRef("Service Workers API")}}{{SeeCompatTable}}
- -

La propriété data est une propriété en lecture seule rattachée à l'interface {{domxref("ExtendableMessageEvent")}} et qui permet d'accéder aux données de l'évènement. Il peut s'agir de n'importe quel type de donnée.

- -

Syntaxe

- -
var mesDonnees = ExtendableMessageEventInstance.data;
- -

Valeur

- -

N'importe quel type de donnée.

- -

Exemples

- -

Quand le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un message, l'objet de l'évènement onmessage sera un ExtendableMessageEvent.

- -
var port;
-
-self.addEventListener('push', function(e) {
-  var obj = e.data.json();
-
-  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
-    port.postMessage(obj);
-  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
-    port.postMessage(obj);
-  }
-});
-
-self.onmessage = function(e) {
-  console.log(e.data);
-  port = e.ports[0];
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#extendablemessage-event-data-attribute', 'ExtendableMessageEvent.data')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.ExtendableMessageEvent.data")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/extendablemessageevent/data/index.md b/files/fr/web/api/extendablemessageevent/data/index.md new file mode 100644 index 0000000000..fa74ec3d7d --- /dev/null +++ b/files/fr/web/api/extendablemessageevent/data/index.md @@ -0,0 +1,74 @@ +--- +title: ExtendableMessageEvent.data +slug: Web/API/ExtendableMessageEvent/data +tags: + - API + - Experimental + - Propriété + - Reference + - Service Workers +translation_of: Web/API/ExtendableMessageEvent/data +--- +
{{APIRef("Service Workers API")}}{{SeeCompatTable}}
+ +

La propriété data est une propriété en lecture seule rattachée à l'interface {{domxref("ExtendableMessageEvent")}} et qui permet d'accéder aux données de l'évènement. Il peut s'agir de n'importe quel type de donnée.

+ +

Syntaxe

+ +
var mesDonnees = ExtendableMessageEventInstance.data;
+ +

Valeur

+ +

N'importe quel type de donnée.

+ +

Exemples

+ +

Quand le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un message, l'objet de l'évènement onmessage sera un ExtendableMessageEvent.

+ +
var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e.data);
+  port = e.ports[0];
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#extendablemessage-event-data-attribute', 'ExtendableMessageEvent.data')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ExtendableMessageEvent.data")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html deleted file mode 100644 index a9d04efa8a..0000000000 --- a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: ExtendableMessageEvent.ExtendableMessageEvent() -slug: Web/API/ExtendableMessageEvent/ExtendableMessageEvent -tags: - - API - - Constructor - - Experimental - - Reference - - Service Workers -translation_of: Web/API/ExtendableMessageEvent/ExtendableMessageEvent ---- -

{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}

- -

Le constructeur ExtendableMessageEvent()crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}.

- -

Syntaxe

- -
var myEME = new ExtendableMessageEvent(type, init);
- -

Paramètres

- -
-
type
-
Un {{domxref("DOMString")}} qui définie le type de message créé.
-
init {{optional_inline}}
-
Un objet d'initialisation, qui doit contenir les paramètres suivant: -
    -
  • data: Les données de l'évènement — peut être de n'importe quel type.
    • -
  • origin: Une {{domxref("DOMString")}} qui définie l'origine de l'environnement du service worker correspondant.
    • -
  • lastEventId: Une {{domxref("DOMString")}} qui définie le dernier l'id du dernier évènement de l'évènement source.
    • -
  • source: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message.
    • -
  • ports: Un tableau contenant les objets  {{domxref("MessagePort")}} connectés au canal d'envoie des messages.
    • -
-
-
- -

Exemples

- -
var init = {
-             data : 'Message de bienvenue',
-             source : MessagePortReference,
-             ports : MessagePortListReference
-           }
-
-var myEME = new ExtendableMessageEvent('message', init);
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.ExtendableMessageEvent.ExtendableMessageEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md new file mode 100644 index 0000000000..a9d04efa8a --- /dev/null +++ b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md @@ -0,0 +1,75 @@ +--- +title: ExtendableMessageEvent.ExtendableMessageEvent() +slug: Web/API/ExtendableMessageEvent/ExtendableMessageEvent +tags: + - API + - Constructor + - Experimental + - Reference + - Service Workers +translation_of: Web/API/ExtendableMessageEvent/ExtendableMessageEvent +--- +

{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}

+ +

Le constructeur ExtendableMessageEvent()crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}.

+ +

Syntaxe

+ +
var myEME = new ExtendableMessageEvent(type, init);
+ +

Paramètres

+ +
+
type
+
Un {{domxref("DOMString")}} qui définie le type de message créé.
+
init {{optional_inline}}
+
Un objet d'initialisation, qui doit contenir les paramètres suivant: +
    +
  • data: Les données de l'évènement — peut être de n'importe quel type.
    • +
  • origin: Une {{domxref("DOMString")}} qui définie l'origine de l'environnement du service worker correspondant.
    • +
  • lastEventId: Une {{domxref("DOMString")}} qui définie le dernier l'id du dernier évènement de l'évènement source.
    • +
  • source: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message.
    • +
  • ports: Un tableau contenant les objets  {{domxref("MessagePort")}} connectés au canal d'envoie des messages.
    • +
+
+
+ +

Exemples

+ +
var init = {
+             data : 'Message de bienvenue',
+             source : MessagePortReference,
+             ports : MessagePortListReference
+           }
+
+var myEME = new ExtendableMessageEvent('message', init);
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.ExtendableMessageEvent.ExtendableMessageEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/extendablemessageevent/index.html b/files/fr/web/api/extendablemessageevent/index.html deleted file mode 100644 index adad758848..0000000000 --- a/files/fr/web/api/extendablemessageevent/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: ExtendableMessageEvent -slug: Web/API/ExtendableMessageEvent -tags: - - API - - Experimental - - ExtendableMessageEvent - - Interface - - Reference - - Service Workers -translation_of: Web/API/ExtendableMessageEvent ---- -
{{APIRef("Service Workers API")}}{{SeeCompatTable}}
- -
 
- -

L'interface ExtendableMessageEvent de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements.

- -

Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.

- -

Constructeur

- -
-
{{domxref("ExtendableMessageEvent.ExtendableMessageEvent()")}}
-
Crée une nouvelle instance de l'objet ExtendableMessageEvent.
-
- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("ExtendableEvent")}}.

- -
-
{{domxref("ExtendableMessageEvent.data")}} {{readonlyinline}}
-
Retourne les données de l'évenements. Il peut être de n'importe quel type.
-
{{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}}
-
Retourne l'origine du {{domxref("ServiceWorkerClient")}} qui envoie le message.
-
{{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}}
-
Représente, dans un server-sent events, le dernier ID de l'évenement source.
-
{{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}}
-
Retourne une référence vers le service worker qui envoie le message.
-
{{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}}
-
Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie.
-
- -

Méthodes

- -

Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}.

- -

Exemples

- -

Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via  {{domxref("PushMessageData")}} au contexte principale via un channel message, l'objet d'évènement du onmessage sera un ExtendableMessageEvent.

- -
var port;
-
-self.addEventListener('push', function(e) {
-  var obj = e.data.json();
-
-  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
-    port.postMessage(obj);
-  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
-    port.postMessage(obj);
-  }
-});
-
-self.onmessage = function(e) {
-  console.log(e);
-  port = e.ports[0];
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaireaire
{{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.ExtendableMessageEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/extendablemessageevent/index.md b/files/fr/web/api/extendablemessageevent/index.md new file mode 100644 index 0000000000..adad758848 --- /dev/null +++ b/files/fr/web/api/extendablemessageevent/index.md @@ -0,0 +1,99 @@ +--- +title: ExtendableMessageEvent +slug: Web/API/ExtendableMessageEvent +tags: + - API + - Experimental + - ExtendableMessageEvent + - Interface + - Reference + - Service Workers +translation_of: Web/API/ExtendableMessageEvent +--- +
{{APIRef("Service Workers API")}}{{SeeCompatTable}}
+ +
 
+ +

L'interface ExtendableMessageEvent de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements.

+ +

Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.

+ +

Constructeur

+ +
+
{{domxref("ExtendableMessageEvent.ExtendableMessageEvent()")}}
+
Crée une nouvelle instance de l'objet ExtendableMessageEvent.
+
+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("ExtendableEvent")}}.

+ +
+
{{domxref("ExtendableMessageEvent.data")}} {{readonlyinline}}
+
Retourne les données de l'évenements. Il peut être de n'importe quel type.
+
{{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}}
+
Retourne l'origine du {{domxref("ServiceWorkerClient")}} qui envoie le message.
+
{{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}}
+
Représente, dans un server-sent events, le dernier ID de l'évenement source.
+
{{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}}
+
Retourne une référence vers le service worker qui envoie le message.
+
{{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}}
+
Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie.
+
+ +

Méthodes

+ +

Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}.

+ +

Exemples

+ +

Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via  {{domxref("PushMessageData")}} au contexte principale via un channel message, l'objet d'évènement du onmessage sera un ExtendableMessageEvent.

+ +
var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e);
+  port = e.ports[0];
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaireaire
{{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.ExtendableMessageEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/extendablemessageevent/lasteventid/index.html b/files/fr/web/api/extendablemessageevent/lasteventid/index.html deleted file mode 100644 index 997f1a7bf4..0000000000 --- a/files/fr/web/api/extendablemessageevent/lasteventid/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: ExtendableMessageEvent.lastEventId -slug: Web/API/ExtendableMessageEvent/lastEventId -tags: - - API - - Experimental - - ExtendableMessageEvent - - Property - - Reference - - Service Workers - - lastEventID -translation_of: Web/API/ExtendableMessageEvent/lastEventId ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La propriété en lecture seule lastEventID de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans les évenements envoyés par lle serveur, le dernier ID de l'évenement source.

- -

Syntaxe

- -
var myLastEventId = ExtendableMessageEventInstance.lastEventId;
- -

Value

- -

Une {{domxref("DOMString")}}.

- -

Exemples

- -

Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  {{domxref("PushMessageData")}} au contexte principale, via le canal de messages. L'objet événement de onmessage sera un ExtendableMessageEvent.

- -
var port;
-
-self.addEventListener('push', function(e) {
-  var obj = e.data.json();
-
-  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
-    port.postMessage(obj);
-  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
-    port.postMessage(obj);
-  }
-});
-
-self.onmessage = function(e) {
-  console.log(e.lastEventId);
-  port = e.ports[0];
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendablemessage-event-lasteventid-attribute', 'ExtendableMessageEvent.lastEventId')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.ExtendableMessageEvent.lastEventId")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/extendablemessageevent/lasteventid/index.md b/files/fr/web/api/extendablemessageevent/lasteventid/index.md new file mode 100644 index 0000000000..997f1a7bf4 --- /dev/null +++ b/files/fr/web/api/extendablemessageevent/lasteventid/index.md @@ -0,0 +1,76 @@ +--- +title: ExtendableMessageEvent.lastEventId +slug: Web/API/ExtendableMessageEvent/lastEventId +tags: + - API + - Experimental + - ExtendableMessageEvent + - Property + - Reference + - Service Workers + - lastEventID +translation_of: Web/API/ExtendableMessageEvent/lastEventId +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La propriété en lecture seule lastEventID de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans les évenements envoyés par lle serveur, le dernier ID de l'évenement source.

+ +

Syntaxe

+ +
var myLastEventId = ExtendableMessageEventInstance.lastEventId;
+ +

Value

+ +

Une {{domxref("DOMString")}}.

+ +

Exemples

+ +

Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  {{domxref("PushMessageData")}} au contexte principale, via le canal de messages. L'objet événement de onmessage sera un ExtendableMessageEvent.

+ +
var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e.lastEventId);
+  port = e.ports[0];
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendablemessage-event-lasteventid-attribute', 'ExtendableMessageEvent.lastEventId')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.ExtendableMessageEvent.lastEventId")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/extendablemessageevent/origin/index.html b/files/fr/web/api/extendablemessageevent/origin/index.html deleted file mode 100644 index 1d800b866f..0000000000 --- a/files/fr/web/api/extendablemessageevent/origin/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: ExtendableMessageEvent.origin -slug: Web/API/ExtendableMessageEvent/origin -tags: - - API - - Experimental - - ExtendableMessageEvent - - Property - - Reference - - Service Workers - - origin -translation_of: Web/API/ExtendableMessageEvent/origin ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La propriété en lecture seule origin de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du  {{domxref("ServiceWorkerClient")}} qui a envoyé le message.

- -

Syntaxe

- -
var myOrigin = ExtendableMessageEventInstance.origin;
- -

Value

- -

Une {{domxref("DOMString")}}.

- -

Exemples

- -

Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  PushMessageData au contexte principale, via le canal de messages. L'objet événement de onmessage sera un ExtendableMessageEvent.

- -
var port;
-
-self.addEventListener('push', function(e) {
-  var obj = e.data.json();
-
-  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
-    port.postMessage(obj);
-  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
-    port.postMessage(obj);
-  }
-});
-
-self.onmessage = function(e) {
-  console.log(e.origin);
-  port = e.ports[0];
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendablemessage-event-origin-attribute', 'ExtendableMessageEvent.origin')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.ExtendableMessageEvent.origin")}}

- -

Voir aussi

- - \ No newline at end of file diff --git a/files/fr/web/api/extendablemessageevent/origin/index.md b/files/fr/web/api/extendablemessageevent/origin/index.md new file mode 100644 index 0000000000..1d800b866f --- /dev/null +++ b/files/fr/web/api/extendablemessageevent/origin/index.md @@ -0,0 +1,76 @@ +--- +title: ExtendableMessageEvent.origin +slug: Web/API/ExtendableMessageEvent/origin +tags: + - API + - Experimental + - ExtendableMessageEvent + - Property + - Reference + - Service Workers + - origin +translation_of: Web/API/ExtendableMessageEvent/origin +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La propriété en lecture seule origin de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du  {{domxref("ServiceWorkerClient")}} qui a envoyé le message.

+ +

Syntaxe

+ +
var myOrigin = ExtendableMessageEventInstance.origin;
+ +

Value

+ +

Une {{domxref("DOMString")}}.

+ +

Exemples

+ +

Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  PushMessageData au contexte principale, via le canal de messages. L'objet événement de onmessage sera un ExtendableMessageEvent.

+ +
var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e.origin);
+  port = e.ports[0];
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendablemessage-event-origin-attribute', 'ExtendableMessageEvent.origin')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.ExtendableMessageEvent.origin")}}

+ +

Voir aussi

+ + \ No newline at end of file diff --git a/files/fr/web/api/extendablemessageevent/ports/index.html b/files/fr/web/api/extendablemessageevent/ports/index.html deleted file mode 100644 index e758af8154..0000000000 --- a/files/fr/web/api/extendablemessageevent/ports/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: ExtendableMessageEvent.ports -slug: Web/API/ExtendableMessageEvent/ports -tags: - - API - - Experimental - - ExtendableMessageEvent - - Property - - Reference - - Service Workers - - ports -translation_of: Web/API/ExtendableMessageEvent/ports ---- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

- -

La propriété en lecture seule ports de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé).

- -

Syntaxe

- -
var myPorts = ExtendableMessageEventInstance.ports;
- -

Value

- -

Un tableau de {{domxref("MessagePort")}}.

- -

Exemples

- -

Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  PushMessageData au contexte principale, via le canal de messages. L'objet événement de onmessage sera un ExtendableMessageEvent.

- -
var port;
-
-self.addEventListener('push', function(e) {
-  var obj = e.data.json();
-
-  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
-    port.postMessage(obj);
-  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
-    port.postMessage(obj);
-  }
-});
-
-self.onmessage = function(e) {
-  port = e.ports[0];
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendablemessage-event-ports-attribute', 'ExtendableMessageEvent.ports')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.ExtendableMessageEvent.ports")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/extendablemessageevent/ports/index.md b/files/fr/web/api/extendablemessageevent/ports/index.md new file mode 100644 index 0000000000..e758af8154 --- /dev/null +++ b/files/fr/web/api/extendablemessageevent/ports/index.md @@ -0,0 +1,75 @@ +--- +title: ExtendableMessageEvent.ports +slug: Web/API/ExtendableMessageEvent/ports +tags: + - API + - Experimental + - ExtendableMessageEvent + - Property + - Reference + - Service Workers + - ports +translation_of: Web/API/ExtendableMessageEvent/ports +--- +

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+ +

La propriété en lecture seule ports de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé).

+ +

Syntaxe

+ +
var myPorts = ExtendableMessageEventInstance.ports;
+ +

Value

+ +

Un tableau de {{domxref("MessagePort")}}.

+ +

Exemples

+ +

Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  PushMessageData au contexte principale, via le canal de messages. L'objet événement de onmessage sera un ExtendableMessageEvent.

+ +
var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  port = e.ports[0];
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#extendablemessage-event-ports-attribute', 'ExtendableMessageEvent.ports')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.ExtendableMessageEvent.ports")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/featurepolicy/allowedfeatures/index.html b/files/fr/web/api/featurepolicy/allowedfeatures/index.html deleted file mode 100644 index 1abfbd8c0f..0000000000 --- a/files/fr/web/api/featurepolicy/allowedfeatures/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: FeaturePolicy.allowedFeatures() -slug: Web/API/FeaturePolicy/allowedFeatures -tags: - - API - - Directive - - Feature Policy - - Feature-Policy - - Reference -translation_of: Web/API/FeaturePolicy/allowedFeatures ---- -

{{APIRef("Feature Policy API")}}{{SeeCompatTable}}

- -

La méthode allowedFeatures() de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode allowedFeatures() retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}.

- -

Syntaxe

- -
const permissions = FeaturePolicy.allowedFeatures()
-
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont l'utilisation de la fonctionnalité associée est permise par le Feature Policy sur laquel est appelée cette méthode.

- -

Exemple

- -

L'exemple suivant affiche toutes les directives permises pour le présent document. Notez que ces fonctionnalités pourraient être restreintes par l'API Permissions, si l'utilisateur n'a pas encore accordé les droits correspondants.

- -
// D'abord, récupère l'objet Feature Policy
-const featurePolicy = document.featurePolicy
-
-// Puis demande la liste des foncitonnalités permises
-const permissions = featurePolicy.allowedFeatures()
-
-for (const directive of permissions)
-  console.log(directive)
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Feature Policy","","allowsFeature")}}{{Spec2("Feature Policy")}}Initial definition.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FeaturePolicy.allowedFeatures")}}

diff --git a/files/fr/web/api/featurepolicy/allowedfeatures/index.md b/files/fr/web/api/featurepolicy/allowedfeatures/index.md new file mode 100644 index 0000000000..1abfbd8c0f --- /dev/null +++ b/files/fr/web/api/featurepolicy/allowedfeatures/index.md @@ -0,0 +1,64 @@ +--- +title: FeaturePolicy.allowedFeatures() +slug: Web/API/FeaturePolicy/allowedFeatures +tags: + - API + - Directive + - Feature Policy + - Feature-Policy + - Reference +translation_of: Web/API/FeaturePolicy/allowedFeatures +--- +

{{APIRef("Feature Policy API")}}{{SeeCompatTable}}

+ +

La méthode allowedFeatures() de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode allowedFeatures() retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}.

+ +

Syntaxe

+ +
const permissions = FeaturePolicy.allowedFeatures()
+
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont l'utilisation de la fonctionnalité associée est permise par le Feature Policy sur laquel est appelée cette méthode.

+ +

Exemple

+ +

L'exemple suivant affiche toutes les directives permises pour le présent document. Notez que ces fonctionnalités pourraient être restreintes par l'API Permissions, si l'utilisateur n'a pas encore accordé les droits correspondants.

+ +
// D'abord, récupère l'objet Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Puis demande la liste des foncitonnalités permises
+const permissions = featurePolicy.allowedFeatures()
+
+for (const directive of permissions)
+  console.log(directive)
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Feature Policy","","allowsFeature")}}{{Spec2("Feature Policy")}}Initial definition.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FeaturePolicy.allowedFeatures")}}

diff --git a/files/fr/web/api/featurepolicy/allowsfeature/index.html b/files/fr/web/api/featurepolicy/allowsfeature/index.html deleted file mode 100644 index 52eae7a58d..0000000000 --- a/files/fr/web/api/featurepolicy/allowsfeature/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: FeaturePolicy.allowsFeature() -slug: Web/API/FeaturePolicy/allowsFeature -tags: - - API - - Feature Policy - - Feature-Policy - - Reference -translation_of: Web/API/FeaturePolicy/allowsFeature ---- -
{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
- -

La méthode allowsFeature() de l'interface {{DOMxRef("FeaturePolicy")}} permet l'introspection de directives du Feature Policy sur lequel la méthode est appelée. Elle retourne un {{JSxRef("Boolean")}} valant true si et seulement si la fonctionnalité dont le nom de directive est fourni est permise dans le contexte spécifié (ou le contexte par défaut si aucun contexte n'est spécifié).

- -

Syntaxe

- -
const listePermissions = FeaturePolicy.allowsFeature(<nomDirective>)
-
- -

ou

- -
const listePermissions = FeaturePolicy.allowsFeature(<nomDirective>, <origine>)
- -

Paramètres

- -

Nom de directive

- -

Le nom de la directive associée à une fonctionnalité.

- -

Origine {{Optional_inline}}

- -

Une URL d'origine sur lequel vérifier la disponibilité de la fonctionnalité. Si omise, sa valeur par défaut est utilisée.

- -

Valeur de retour

- -

Un {{JSxRef("Boolean")}} valant true si et seulement si la fonctionnalité est permise.

- -

Exemple

- -

Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.

- -
// D'abord, récupère le Feature Policy
-const featurePolicy = document.featurePolicy
-
-// Demande si la fonctionnalité est disponible
-const estPermise = featurePolicy.allowsFeature("camera")
-
-if (estPermise)
-  console.log("FP autorise l'appareil photo.")
-
-else
-  console.log("FP n'autorise pas l'appareil photo.")
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Feature Policy","","allowsFeature")}}{{Spec2("Feature Policy")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FeaturePolicy.allowsFeature")}}

diff --git a/files/fr/web/api/featurepolicy/allowsfeature/index.md b/files/fr/web/api/featurepolicy/allowsfeature/index.md new file mode 100644 index 0000000000..52eae7a58d --- /dev/null +++ b/files/fr/web/api/featurepolicy/allowsfeature/index.md @@ -0,0 +1,76 @@ +--- +title: FeaturePolicy.allowsFeature() +slug: Web/API/FeaturePolicy/allowsFeature +tags: + - API + - Feature Policy + - Feature-Policy + - Reference +translation_of: Web/API/FeaturePolicy/allowsFeature +--- +
{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
+ +

La méthode allowsFeature() de l'interface {{DOMxRef("FeaturePolicy")}} permet l'introspection de directives du Feature Policy sur lequel la méthode est appelée. Elle retourne un {{JSxRef("Boolean")}} valant true si et seulement si la fonctionnalité dont le nom de directive est fourni est permise dans le contexte spécifié (ou le contexte par défaut si aucun contexte n'est spécifié).

+ +

Syntaxe

+ +
const listePermissions = FeaturePolicy.allowsFeature(<nomDirective>)
+
+ +

ou

+ +
const listePermissions = FeaturePolicy.allowsFeature(<nomDirective>, <origine>)
+ +

Paramètres

+ +

Nom de directive

+ +

Le nom de la directive associée à une fonctionnalité.

+ +

Origine {{Optional_inline}}

+ +

Une URL d'origine sur lequel vérifier la disponibilité de la fonctionnalité. Si omise, sa valeur par défaut est utilisée.

+ +

Valeur de retour

+ +

Un {{JSxRef("Boolean")}} valant true si et seulement si la fonctionnalité est permise.

+ +

Exemple

+ +

Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.

+ +
// D'abord, récupère le Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Demande si la fonctionnalité est disponible
+const estPermise = featurePolicy.allowsFeature("camera")
+
+if (estPermise)
+  console.log("FP autorise l'appareil photo.")
+
+else
+  console.log("FP n'autorise pas l'appareil photo.")
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Feature Policy","","allowsFeature")}}{{Spec2("Feature Policy")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FeaturePolicy.allowsFeature")}}

diff --git a/files/fr/web/api/featurepolicy/features/index.html b/files/fr/web/api/featurepolicy/features/index.html deleted file mode 100644 index 5027fa3465..0000000000 --- a/files/fr/web/api/featurepolicy/features/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: FeaturePolicy.features() -slug: Web/API/FeaturePolicy/features -tags: - - API - - Feature Policy - - Feature-Policy - - Reference -translation_of: Web/API/FeaturePolicy/features ---- -
{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
- -

La méthode features() de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms de directives de fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom apparait dans la liste pourrait n'être pas autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.

- -

Syntaxe

- -
const fonctionnalitésSupportées = FeaturePolicy.features()
-
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont la fonctionnalité associée est supportée par l'agent utilisateur.

- -

Exemple

- -

Cet exemple affiche dans la console toutes les directives supportées par votre agent utilisateur :

- -
// Récupère l'objet Feature Policy
-const featurePolicy = document.featurePolicy
-
-// Récupère la liste des noms de directives de Feature Policy dont les fonctionnalités sont supportées
-const fonctionnalitésSupportées = featurePolicy.features()
-
-// Affiche chaque directive dans la console
-for (const directive of fonctionnalitésSupportées)
-  console.log(directive)
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Feature Policy","","features")}}{{Spec2("Feature Policy")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FeaturePolicy.features")}}

diff --git a/files/fr/web/api/featurepolicy/features/index.md b/files/fr/web/api/featurepolicy/features/index.md new file mode 100644 index 0000000000..5027fa3465 --- /dev/null +++ b/files/fr/web/api/featurepolicy/features/index.md @@ -0,0 +1,64 @@ +--- +title: FeaturePolicy.features() +slug: Web/API/FeaturePolicy/features +tags: + - API + - Feature Policy + - Feature-Policy + - Reference +translation_of: Web/API/FeaturePolicy/features +--- +
{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
+ +

La méthode features() de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms de directives de fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom apparait dans la liste pourrait n'être pas autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.

+ +

Syntaxe

+ +
const fonctionnalitésSupportées = FeaturePolicy.features()
+
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont la fonctionnalité associée est supportée par l'agent utilisateur.

+ +

Exemple

+ +

Cet exemple affiche dans la console toutes les directives supportées par votre agent utilisateur :

+ +
// Récupère l'objet Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Récupère la liste des noms de directives de Feature Policy dont les fonctionnalités sont supportées
+const fonctionnalitésSupportées = featurePolicy.features()
+
+// Affiche chaque directive dans la console
+for (const directive of fonctionnalitésSupportées)
+  console.log(directive)
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Feature Policy","","features")}}{{Spec2("Feature Policy")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FeaturePolicy.features")}}

diff --git a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html deleted file mode 100644 index 9d13d0db4c..0000000000 --- a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: FeaturePolicy.getAllowlistForFeature() -slug: Web/API/FeaturePolicy/getAllowlistForFeature -tags: - - API - - Feature Policy - - Feature-Policy - - Reference -translation_of: Web/API/FeaturePolicy/getAllowlistForFeature ---- -
{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
- -

La méthode getAllowlistForFeature() de {{DOMxRef("FeaturePolicy")}} permet d'obtenir la liste des permissions associée à une fonctionnalité pour ce Feature Policy.

- -

Syntaxe

- -
const listePermissions = FeaturePolicy.getAllowlistForFeature(<fonctionnalité>)
-
- -

Parameter

- -

Nom de fonctionnalité

- -

Un nom de fonctionnalité doit être fourni.

- -

Valeur de retour

- -

Une liste de permissions pour la fonctionnalité demandée est retournée.

- -

Erreurs

- -

La fonction jettera un avertissement si la directive de Feature Policy demandée est inconnue. Toutefois, elle retournera aussi un tableau vide, indiquant que l'utilisation de cette fonctionnalité n'est permise pour aucune origine.

- -

Exemple

- -

Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.

- -
// D'abord, récupère l'objet Feature Policy
-const featurePolicy = document.featurePolicy
-
-// Puis demande la liste pour la fonctionnalité "camera"
-const listePermissions = featurePolicy.getAllowlistForFeature("camera")
-
-for (const origine of listePermissions)
-  console.log(origine)
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Feature Policy","","getAllowlistForFeature")}}{{Spec2("Feature Policy")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FeaturePolicy.getAllowlistForFeature")}}

diff --git a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md new file mode 100644 index 0000000000..9d13d0db4c --- /dev/null +++ b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md @@ -0,0 +1,69 @@ +--- +title: FeaturePolicy.getAllowlistForFeature() +slug: Web/API/FeaturePolicy/getAllowlistForFeature +tags: + - API + - Feature Policy + - Feature-Policy + - Reference +translation_of: Web/API/FeaturePolicy/getAllowlistForFeature +--- +
{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
+ +

La méthode getAllowlistForFeature() de {{DOMxRef("FeaturePolicy")}} permet d'obtenir la liste des permissions associée à une fonctionnalité pour ce Feature Policy.

+ +

Syntaxe

+ +
const listePermissions = FeaturePolicy.getAllowlistForFeature(<fonctionnalité>)
+
+ +

Parameter

+ +

Nom de fonctionnalité

+ +

Un nom de fonctionnalité doit être fourni.

+ +

Valeur de retour

+ +

Une liste de permissions pour la fonctionnalité demandée est retournée.

+ +

Erreurs

+ +

La fonction jettera un avertissement si la directive de Feature Policy demandée est inconnue. Toutefois, elle retournera aussi un tableau vide, indiquant que l'utilisation de cette fonctionnalité n'est permise pour aucune origine.

+ +

Exemple

+ +

Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.

+ +
// D'abord, récupère l'objet Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Puis demande la liste pour la fonctionnalité "camera"
+const listePermissions = featurePolicy.getAllowlistForFeature("camera")
+
+for (const origine of listePermissions)
+  console.log(origine)
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Feature Policy","","getAllowlistForFeature")}}{{Spec2("Feature Policy")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FeaturePolicy.getAllowlistForFeature")}}

diff --git a/files/fr/web/api/featurepolicy/index.html b/files/fr/web/api/featurepolicy/index.html deleted file mode 100644 index e63c2d60af..0000000000 --- a/files/fr/web/api/featurepolicy/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: FeaturePolicy -slug: Web/API/FeaturePolicy -tags: - - API - - Feature Policy - - Feature-Policy - - FeaturePolicy - - Interface - - Permissions - - Privileges - - Reference - - access - - accès - - delegation -translation_of: Web/API/FeaturePolicy ---- -

{{APIRef("Feature Policy")}}

- -

L'interface FeaturePolicy de l'API Feature Policy représente l'ensemble des règles appliquées au contexte d'exécution courant.

- -

Méthodes de FeaturePolicy

- -
-
{{DOMxRef("FeaturePolicy.allowsFeature")}}
-
Retourne un Boolean indiquant si une fonctionnalité particulière est activée ou non dans le contexte spécifié.
-
{{DOMxRef("FeaturePolicy.features")}}
-
Retourne une liste des noms de toutes les fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom est dans la liste pourrait ne pas être autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.
-
{{DOMxRef("FeaturePolicy.allowedFeatures")}}
-
Retourne une liste des noms des fonctionnalités supportées par l'agent utilisateur et autorisées par le Feature Policy. Notee que les fonctionnaltiés dont le nom est dans la liste pourraient toujours être bloquées par l'absence de permission de l'utilisateur.
-
- -
-
{{DOMxRef("FeaturePolicy.getAllowlistForFeature")}}
-
Retourne la liste de permissions pour la fonctionnalité spécifiée.
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Feature Policy")}}{{Spec2("Feature Policy")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FeaturePolicy")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/featurepolicy/index.md b/files/fr/web/api/featurepolicy/index.md new file mode 100644 index 0000000000..e63c2d60af --- /dev/null +++ b/files/fr/web/api/featurepolicy/index.md @@ -0,0 +1,68 @@ +--- +title: FeaturePolicy +slug: Web/API/FeaturePolicy +tags: + - API + - Feature Policy + - Feature-Policy + - FeaturePolicy + - Interface + - Permissions + - Privileges + - Reference + - access + - accès + - delegation +translation_of: Web/API/FeaturePolicy +--- +

{{APIRef("Feature Policy")}}

+ +

L'interface FeaturePolicy de l'API Feature Policy représente l'ensemble des règles appliquées au contexte d'exécution courant.

+ +

Méthodes de FeaturePolicy

+ +
+
{{DOMxRef("FeaturePolicy.allowsFeature")}}
+
Retourne un Boolean indiquant si une fonctionnalité particulière est activée ou non dans le contexte spécifié.
+
{{DOMxRef("FeaturePolicy.features")}}
+
Retourne une liste des noms de toutes les fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom est dans la liste pourrait ne pas être autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.
+
{{DOMxRef("FeaturePolicy.allowedFeatures")}}
+
Retourne une liste des noms des fonctionnalités supportées par l'agent utilisateur et autorisées par le Feature Policy. Notee que les fonctionnaltiés dont le nom est dans la liste pourraient toujours être bloquées par l'absence de permission de l'utilisateur.
+
+ +
+
{{DOMxRef("FeaturePolicy.getAllowlistForFeature")}}
+
Retourne la liste de permissions pour la fonctionnalité spécifiée.
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Feature Policy")}}{{Spec2("Feature Policy")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FeaturePolicy")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/federatedcredential/federatedcredential/index.html b/files/fr/web/api/federatedcredential/federatedcredential/index.html deleted file mode 100644 index ce4da760af..0000000000 --- a/files/fr/web/api/federatedcredential/federatedcredential/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: FederatedCredential -slug: Web/API/FederatedCredential/FederatedCredential -tags: - - API - - Constructeur - - Credential Management API - - FederatedCredential - - Reference -translation_of: Web/API/FederatedCredential/FederatedCredential ---- -

{{APIRef("")}}{{Non-standard_header}}

- -

Le constructeur FederatedCredential permet de créer un nouvel objet {{domxref("FederatedCredential")}}.

- -

Pour les navigateurs qui le prennent en charge, une instance de cette classe pourra être passée comme propriété credential pour l'objet init utilisé comme argument pour {{domxref('fetch')}}.

- -

Syntaxe

- -
var mesCredentials = new FederatedCredential(init)
- -

Paramètres

- -
-
init
-
Les propriétés de cet objet sont : -
    -
  • provider : une chaîne de caractères {{domxref("USVString")}} identifiant le fournisseur d'information d'authentification.
    • -
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.FederatedCredential.FederatedCredential")}}

diff --git a/files/fr/web/api/federatedcredential/federatedcredential/index.md b/files/fr/web/api/federatedcredential/federatedcredential/index.md new file mode 100644 index 0000000000..ce4da760af --- /dev/null +++ b/files/fr/web/api/federatedcredential/federatedcredential/index.md @@ -0,0 +1,54 @@ +--- +title: FederatedCredential +slug: Web/API/FederatedCredential/FederatedCredential +tags: + - API + - Constructeur + - Credential Management API + - FederatedCredential + - Reference +translation_of: Web/API/FederatedCredential/FederatedCredential +--- +

{{APIRef("")}}{{Non-standard_header}}

+ +

Le constructeur FederatedCredential permet de créer un nouvel objet {{domxref("FederatedCredential")}}.

+ +

Pour les navigateurs qui le prennent en charge, une instance de cette classe pourra être passée comme propriété credential pour l'objet init utilisé comme argument pour {{domxref('fetch')}}.

+ +

Syntaxe

+ +
var mesCredentials = new FederatedCredential(init)
+ +

Paramètres

+ +
+
init
+
Les propriétés de cet objet sont : +
    +
  • provider : une chaîne de caractères {{domxref("USVString")}} identifiant le fournisseur d'information d'authentification.
    • +
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.FederatedCredential.FederatedCredential")}}

diff --git a/files/fr/web/api/federatedcredential/index.html b/files/fr/web/api/federatedcredential/index.html deleted file mode 100644 index 63f8e2f25c..0000000000 --- a/files/fr/web/api/federatedcredential/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: FederatedCredential -slug: Web/API/FederatedCredential -tags: - - API - - Credential Management API - - Interface - - Reference -translation_of: Web/API/FederatedCredential ---- -

{{SeeCompatTable}}{{APIRef("Credential Management API")}}

- -

L'interface FederatedCredential, rattachée à l'API Credential Management, donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. OpenID Connect est un exemple de framework pour construire un fournisseur d'identité fédéré.

- -

Pour les navigateurs qui le prennent en charge, une instance de cette interface pourra être passée comme propriété credential de l'objet init pour la méthode globale {{domxref('fetch')}}.

- -

Constructeur

- -
-
{{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}
-
Crée un nouvel objet FederatedCredential.
-
- -

Propriétés

- -

Hérite des propriétés de l'interface parente : {{domxref("Credential")}}.

- -
-
{{domxref("FederatedCredential.provider")}} {{readonlyInline}}
-
Une chaîne de caractères {{domxref("USVString")}} qui contient l'information sur le fournisseur d'authentification fédéré.
-
- -

Gestionnaires d'évènements

- -

Aucun.

- -

Méthodes

- -

Aucun.

- -

Exemples

- -
var cred = new FederatedCredential({
-  id: id,
-  name: name,
-  provider: 'https://account.google.com',
-  iconURL: iconUrl
-});
-
-// Enregistrer les informations d'authentification
-navigator.credentials.store(cred)
-  .then(function() {
-  // Faire quelque chose
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.FederatedCredential")}}

diff --git a/files/fr/web/api/federatedcredential/index.md b/files/fr/web/api/federatedcredential/index.md new file mode 100644 index 0000000000..63f8e2f25c --- /dev/null +++ b/files/fr/web/api/federatedcredential/index.md @@ -0,0 +1,77 @@ +--- +title: FederatedCredential +slug: Web/API/FederatedCredential +tags: + - API + - Credential Management API + - Interface + - Reference +translation_of: Web/API/FederatedCredential +--- +

{{SeeCompatTable}}{{APIRef("Credential Management API")}}

+ +

L'interface FederatedCredential, rattachée à l'API Credential Management, donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. OpenID Connect est un exemple de framework pour construire un fournisseur d'identité fédéré.

+ +

Pour les navigateurs qui le prennent en charge, une instance de cette interface pourra être passée comme propriété credential de l'objet init pour la méthode globale {{domxref('fetch')}}.

+ +

Constructeur

+ +
+
{{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}
+
Crée un nouvel objet FederatedCredential.
+
+ +

Propriétés

+ +

Hérite des propriétés de l'interface parente : {{domxref("Credential")}}.

+ +
+
{{domxref("FederatedCredential.provider")}} {{readonlyInline}}
+
Une chaîne de caractères {{domxref("USVString")}} qui contient l'information sur le fournisseur d'authentification fédéré.
+
+ +

Gestionnaires d'évènements

+ +

Aucun.

+ +

Méthodes

+ +

Aucun.

+ +

Exemples

+ +
var cred = new FederatedCredential({
+  id: id,
+  name: name,
+  provider: 'https://account.google.com',
+  iconURL: iconUrl
+});
+
+// Enregistrer les informations d'authentification
+navigator.credentials.store(cred)
+  .then(function() {
+  // Faire quelque chose
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.FederatedCredential")}}

diff --git a/files/fr/web/api/federatedcredential/provider/index.html b/files/fr/web/api/federatedcredential/provider/index.html deleted file mode 100644 index de45d5fda4..0000000000 --- a/files/fr/web/api/federatedcredential/provider/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: FederatedCredential.provider -slug: Web/API/FederatedCredential/provider -tags: - - API - - Credential Management API - - FederatedCredential - - Propriété - - Reference -translation_of: Web/API/FederatedCredential/provider ---- -

{{SeeCompatTable}}{{APIRef("")}}

- -

La propriété provider, rattachée à l'interface {{domxref("FederatedCredential")}}, fournit une chaîne de caractères {{domxref("USVString")}} qui décrit un fournisseur d'identité fédéré.

- -

Syntaxe

- -
var provider = FederatedCredential.provider
- -

Valeur

- -

Une chaîne de caractères {{domxref("USVString")}} identifiant un fournisseur d'identité fédéré.

- -

Exemples

- -
// TBD
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.FederatedCredential.provider")}}

diff --git a/files/fr/web/api/federatedcredential/provider/index.md b/files/fr/web/api/federatedcredential/provider/index.md new file mode 100644 index 0000000000..de45d5fda4 --- /dev/null +++ b/files/fr/web/api/federatedcredential/provider/index.md @@ -0,0 +1,49 @@ +--- +title: FederatedCredential.provider +slug: Web/API/FederatedCredential/provider +tags: + - API + - Credential Management API + - FederatedCredential + - Propriété + - Reference +translation_of: Web/API/FederatedCredential/provider +--- +

{{SeeCompatTable}}{{APIRef("")}}

+ +

La propriété provider, rattachée à l'interface {{domxref("FederatedCredential")}}, fournit une chaîne de caractères {{domxref("USVString")}} qui décrit un fournisseur d'identité fédéré.

+ +

Syntaxe

+ +
var provider = FederatedCredential.provider
+ +

Valeur

+ +

Une chaîne de caractères {{domxref("USVString")}} identifiant un fournisseur d'identité fédéré.

+ +

Exemples

+ +
// TBD
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.FederatedCredential.provider")}}

diff --git a/files/fr/web/api/fetch/index.html b/files/fr/web/api/fetch/index.html deleted file mode 100644 index 30544929ec..0000000000 --- a/files/fr/web/api/fetch/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: GlobalFetch.fetch() -slug: Web/API/fetch -tags: - - API - - API Fetch - - Experimental - - Fetch - - GlobalFetch - - Méthode - - Reference - - WindowOrWorkerGlobalScope - - requête -translation_of: Web/API/WindowOrWorkerGlobalScope/fetch -original_slug: Web/API/WindowOrWorkerGlobalScope/fetch ---- -

{{APIRef("Fetch")}}

- -

La méthode fetch() du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire then pour identifier les erreurs HTTP.

- -

WindowOrWorkerGlobalScope est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode fetch() est disponible dans la plupart des cas où vous pourriez en avoir besoin.

- -

Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand un problème de réseau est rencontré, même si en réalité cela signifie généralement qu'il y a un problème de permissions ou quelque chose de similaire. La promesse ne sera pas rejetée en cas d'erreur HTTP (404, etc.) Pour cela, un gestionnaire then() doit vérifier que la propriété {{domxref("Response.ok")}} ait bien pour valeur true et/ou la valeur de la propriété {{domxref("Response.status")}}.

- -

La méthode fetch() est contrôlée par la directive connect-src de l'entête Content Security Policy plutôt que par la directive de la ressource qui est récupérée.

- -
-

Note : Les paramètres de la méthode fetch() sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.

-
- -

Syntaxe

- -
const fetchResponsePromise = Promise<Response> fetch(entrée[, init]);
- -

Paramètres

- -
-
entrée
-
Définit la ressource que vous voulez obtenir. Cela peut être : -
    -
  • Un {{domxref("USVString")}} qui contient l'URL de la ressource à obtenir. Certains navigateurs acceptent blob: et data:.
    • -
  • Un objet {{domxref("Request")}}.
    • -
-
-
init {{optional_inline}}
-
-

Un objet qui contient les paramètres de votre requête. Les options possibles sont :

- -
-
method
-
La méthode de la requête, par exemple GET ou POST.
- -
headers
-
Les entêtes à ajouter à votre requête, contenues dans un objet {{domxref("Headers")}} ou dans un objet avec des {{domxref("ByteString")}} pour valeurs.
- -
body
-
Le corps de votre requête. Cela peut être un {{domxref("Blob")}}, un {{domxref("BufferSource")}}, un {{domxref("FormData")}}, un {{domxref("URLSearchParams")}}, ou un {{domxref("USVString")}}. Notez cependant qu'une requête avec GET ou HEAD pour méthode ne peut pas avoir de corps.
- -
mode
-
Le mode à utiliser pour cette requête, par exemple cors, no-cors, ou same-origin.
- -
credentials
-
Les identifiants à utiliser pour cette requête : omit, same-origin, ou include. Pour envoyer automatiquement les cookies pour le domaine actuel, cette option doit être définie. À partir de Chrome 50, cette propriété peut aussi prendre un objet {{domxref("FederatedCredential")}} ou une instance de {{domxref("PasswordCredential")}}.
- -
cache
-
Le comportement du cache pour cette requête : default, no-store, reload, no-cache, force-cache, ou only-if-cached.
- -
redirect
-
Le mode de redirection à adopter pour cette requête : follow (suivre les redirections automatiquement), error (abandonner avec une erreur si une redirection a lieu), ou manual (gérer les redirections manuellement). Dans Chrome, la valeur par défaut était follow avant Chrome 47, mais à partir de cette version, c'est manual.
- -
referrer
-
Un USVString qui vaut no-referrer, client, ou qui contient une URL. La valeur par défaut est client.
- -
referrerPolicy
-
Spécifie la valeur de l'entête HTTP referer. Cela peut être no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin ou unsafe-url.
- -
integrity
-
Contient la valeur de l'intégrité de la sous-ressource de la requête (par exemple, sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
- -
keepalive
-
Peut être utilisée pour autoriser la requête à se poursuivre après la fermeture de la page. Une requête avec ce paramètre est équivalente à l'API {{domxref("Navigator.sendBeacon()")}}.
- -
signal
-
Une instance de {{domxref("AbortSignal")}} vous permettant de communiquer avec une requête et de l'interrompre si vous le souhaitez via un {{domxref("AbortController")}}.
-
-
-
- -

Valeur retournée

- -

Une {{domxref("Promise")}} qui se résoud avec un object {{domxref("Response")}}.

- -

Exceptions

- -
-
AbortError
-
La requête a été interrompue à cause d'un appel à la méthode {{domxref("AbortController.abort", "abort()")}} de {{domxref("AbortController")}}.
-
TypeError
-
L'URL spécifié inclut des identifiants. Ces informations devraient plutôt être fournises via l'en-tête HTTP {{HTTPHeader("Authorization")}}.
-
- -

Exemple

- -

Dans notre exemple de requête avec fetch (voir cet exemple en direct) nous créons une nouvelle {{domxref("Request")}} avec le constructeur correspondant, puis on l'envoie en appellant fetch(). Comme nous récupérons une image, nous utilisons la méthode {{domxref("Body.blob()")}} sur la réponse pour lui donner le bon type MIME pour qu'elle soit gérée correctement, puis l'on crée l'URL correspondant à cet objet et on l'affiche dans un élément {{htmlelement("img")}}.

- -
const monImage = document.querySelector('img');
-
-let maRequete = new Request('fleurs.jpg');
-
-fetch(maRequete)
-.then(function(reponse) {
-  if (!response.ok) {
-    throw new Error(`erreur HTTP! statut: ${reponse.status}`);
-  }
-  return reponse.blob();
-})
-.then(function(reponse) {
-  let URLobjet = URL.createObjectURL(reponse);
-  monImage.src = URLobjet;
-});
- -

Dans notre exemple fetch avec initialisation et requête (voir cet exemple en direct) nous faisons la même chose à la différence que nous passons aussi un objet d'initalisation à la méthode fetch :

- -
const monImage = document.querySelector('img');
-
-let mesEntetes = new Headers();
-mesEntetes.append('Content-Type', 'image/jpeg');
-
-const monInit = { method: 'GET',
-               headers: mesEntetes,
-               mode: 'cors',
-               cache: 'default' };
-
-let maRequete = new Request('fleurs.jpg');
-
-fetch(maRequete, monInit).then(function(reponse) {
-  ...
-});
- -

Notez que vous pouvez aussi passer l'objet d'initialisation au constructeur de la requête pour obtenir le même effet, par exemple :

- -
let maRequete = new Request('fleurs.jpg', monInit);
- -

Vous pouvez aussi utiliser un objet litéral comme en-têtes dans votre objet d'initalisation.

- -
const monInit = { method: 'GET',
-               headers: {
-                   'Content-Type': 'image/jpeg'
-               },
-               mode: 'cors',
-               cache: 'default' };
-
-let maRequete = new Request('fleurs.jpg', monInit);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatutCommentaire
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Définie dans un WindowOrWorkerGlobalScope dans la nouvelle spécification.
{{SpecName('Fetch','#dom-global-fetch','fetch()')}}{{Spec2('Fetch')}}Définition initiale
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Ajoute la possiblité d'utiliser une instance de {{domxref("FederatedCredential")}} ou de {{domxref("PasswordCredential")}} comme valeur de init.credentials.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/fetch/index.md b/files/fr/web/api/fetch/index.md new file mode 100644 index 0000000000..30544929ec --- /dev/null +++ b/files/fr/web/api/fetch/index.md @@ -0,0 +1,194 @@ +--- +title: GlobalFetch.fetch() +slug: Web/API/fetch +tags: + - API + - API Fetch + - Experimental + - Fetch + - GlobalFetch + - Méthode + - Reference + - WindowOrWorkerGlobalScope + - requête +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +original_slug: Web/API/WindowOrWorkerGlobalScope/fetch +--- +

{{APIRef("Fetch")}}

+ +

La méthode fetch() du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire then pour identifier les erreurs HTTP.

+ +

WindowOrWorkerGlobalScope est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode fetch() est disponible dans la plupart des cas où vous pourriez en avoir besoin.

+ +

Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand un problème de réseau est rencontré, même si en réalité cela signifie généralement qu'il y a un problème de permissions ou quelque chose de similaire. La promesse ne sera pas rejetée en cas d'erreur HTTP (404, etc.) Pour cela, un gestionnaire then() doit vérifier que la propriété {{domxref("Response.ok")}} ait bien pour valeur true et/ou la valeur de la propriété {{domxref("Response.status")}}.

+ +

La méthode fetch() est contrôlée par la directive connect-src de l'entête Content Security Policy plutôt que par la directive de la ressource qui est récupérée.

+ +
+

Note : Les paramètres de la méthode fetch() sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.

+
+ +

Syntaxe

+ +
const fetchResponsePromise = Promise<Response> fetch(entrée[, init]);
+ +

Paramètres

+ +
+
entrée
+
Définit la ressource que vous voulez obtenir. Cela peut être : +
    +
  • Un {{domxref("USVString")}} qui contient l'URL de la ressource à obtenir. Certains navigateurs acceptent blob: et data:.
    • +
  • Un objet {{domxref("Request")}}.
    • +
+
+
init {{optional_inline}}
+
+

Un objet qui contient les paramètres de votre requête. Les options possibles sont :

+ +
+
method
+
La méthode de la requête, par exemple GET ou POST.
+ +
headers
+
Les entêtes à ajouter à votre requête, contenues dans un objet {{domxref("Headers")}} ou dans un objet avec des {{domxref("ByteString")}} pour valeurs.
+ +
body
+
Le corps de votre requête. Cela peut être un {{domxref("Blob")}}, un {{domxref("BufferSource")}}, un {{domxref("FormData")}}, un {{domxref("URLSearchParams")}}, ou un {{domxref("USVString")}}. Notez cependant qu'une requête avec GET ou HEAD pour méthode ne peut pas avoir de corps.
+ +
mode
+
Le mode à utiliser pour cette requête, par exemple cors, no-cors, ou same-origin.
+ +
credentials
+
Les identifiants à utiliser pour cette requête : omit, same-origin, ou include. Pour envoyer automatiquement les cookies pour le domaine actuel, cette option doit être définie. À partir de Chrome 50, cette propriété peut aussi prendre un objet {{domxref("FederatedCredential")}} ou une instance de {{domxref("PasswordCredential")}}.
+ +
cache
+
Le comportement du cache pour cette requête : default, no-store, reload, no-cache, force-cache, ou only-if-cached.
+ +
redirect
+
Le mode de redirection à adopter pour cette requête : follow (suivre les redirections automatiquement), error (abandonner avec une erreur si une redirection a lieu), ou manual (gérer les redirections manuellement). Dans Chrome, la valeur par défaut était follow avant Chrome 47, mais à partir de cette version, c'est manual.
+ +
referrer
+
Un USVString qui vaut no-referrer, client, ou qui contient une URL. La valeur par défaut est client.
+ +
referrerPolicy
+
Spécifie la valeur de l'entête HTTP referer. Cela peut être no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin ou unsafe-url.
+ +
integrity
+
Contient la valeur de l'intégrité de la sous-ressource de la requête (par exemple, sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
+ +
keepalive
+
Peut être utilisée pour autoriser la requête à se poursuivre après la fermeture de la page. Une requête avec ce paramètre est équivalente à l'API {{domxref("Navigator.sendBeacon()")}}.
+ +
signal
+
Une instance de {{domxref("AbortSignal")}} vous permettant de communiquer avec une requête et de l'interrompre si vous le souhaitez via un {{domxref("AbortController")}}.
+
+
+
+ +

Valeur retournée

+ +

Une {{domxref("Promise")}} qui se résoud avec un object {{domxref("Response")}}.

+ +

Exceptions

+ +
+
AbortError
+
La requête a été interrompue à cause d'un appel à la méthode {{domxref("AbortController.abort", "abort()")}} de {{domxref("AbortController")}}.
+
TypeError
+
L'URL spécifié inclut des identifiants. Ces informations devraient plutôt être fournises via l'en-tête HTTP {{HTTPHeader("Authorization")}}.
+
+ +

Exemple

+ +

Dans notre exemple de requête avec fetch (voir cet exemple en direct) nous créons une nouvelle {{domxref("Request")}} avec le constructeur correspondant, puis on l'envoie en appellant fetch(). Comme nous récupérons une image, nous utilisons la méthode {{domxref("Body.blob()")}} sur la réponse pour lui donner le bon type MIME pour qu'elle soit gérée correctement, puis l'on crée l'URL correspondant à cet objet et on l'affiche dans un élément {{htmlelement("img")}}.

+ +
const monImage = document.querySelector('img');
+
+let maRequete = new Request('fleurs.jpg');
+
+fetch(maRequete)
+.then(function(reponse) {
+  if (!response.ok) {
+    throw new Error(`erreur HTTP! statut: ${reponse.status}`);
+  }
+  return reponse.blob();
+})
+.then(function(reponse) {
+  let URLobjet = URL.createObjectURL(reponse);
+  monImage.src = URLobjet;
+});
+ +

Dans notre exemple fetch avec initialisation et requête (voir cet exemple en direct) nous faisons la même chose à la différence que nous passons aussi un objet d'initalisation à la méthode fetch :

+ +
const monImage = document.querySelector('img');
+
+let mesEntetes = new Headers();
+mesEntetes.append('Content-Type', 'image/jpeg');
+
+const monInit = { method: 'GET',
+               headers: mesEntetes,
+               mode: 'cors',
+               cache: 'default' };
+
+let maRequete = new Request('fleurs.jpg');
+
+fetch(maRequete, monInit).then(function(reponse) {
+  ...
+});
+ +

Notez que vous pouvez aussi passer l'objet d'initialisation au constructeur de la requête pour obtenir le même effet, par exemple :

+ +
let maRequete = new Request('fleurs.jpg', monInit);
+ +

Vous pouvez aussi utiliser un objet litéral comme en-têtes dans votre objet d'initalisation.

+ +
const monInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+let maRequete = new Request('fleurs.jpg', monInit);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatutCommentaire
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Définie dans un WindowOrWorkerGlobalScope dans la nouvelle spécification.
{{SpecName('Fetch','#dom-global-fetch','fetch()')}}{{Spec2('Fetch')}}Définition initiale
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Ajoute la possiblité d'utiliser une instance de {{domxref("FederatedCredential")}} ou de {{domxref("PasswordCredential")}} comme valeur de init.credentials.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/fetch_api/basic_concepts/index.html b/files/fr/web/api/fetch_api/basic_concepts/index.html deleted file mode 100644 index 93a268d89b..0000000000 --- a/files/fr/web/api/fetch_api/basic_concepts/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'Fetch : concepts de départ' -slug: Web/API/Fetch_API/Basic_concepts -translation_of: Web/API/Fetch_API/Basic_concepts ---- -

{{DefaultAPISidebar("Fetch API")}}{{draft}}

- -

L'API Fetch fournit une interface pour récupérer des ressources (y compris depuis le réseau). Elle paraîtra familière à quiconque aura déjà utilisé {{domxref("XMLHttpRequest")}}, mais elle fournit un jeu de fonctionnalités plus puissantes et plus souples. Cet article explique quelques uns des principes de base de l'API Fetch.

- -
-

Note : This article will be added to over time. If you find a Fetch concept that you feel needs explaining better, let someone know on the MDN discussion forum, or Mozilla IRC (#mdn room.)

-
- -

In a nutshell

- -

At the heart of Fetch are the Interface abstractions of HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, and {{domxref("Body")}} payloads, along with a {{domxref("GlobalFetch.fetch","global fetch")}} method for initiating asynchronous resource requests. Because the main components of HTTP are abstracted as JavaScript objects, it is easy for other APIs to make use of such functionality.

- -

Service Workers is an example of an API that makes heavy use of Fetch.

- -

Fetch takes the asynchronous nature of such requests one step further. The API is completely {{jsxref("Promise")}}-based.

- -

Guard

- -

Guard is a feature of {{domxref("Headers")}} objects, with possible values of immutable, request, request-no-cors, response, or none, depending on where the header is used.

- -

When a new {{domxref("Headers")}} object is created using the {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, its guard is set to none (the default). When a {{domxref("Request")}} or {{domxref("Response")}} object is created, it has an associated {{domxref("Headers")}} object whose guard is set as summarized below:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
new object's typecreating constructorguard setting of associated {{domxref("Headers")}} object
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
{{domxref("Request.Request","Request()")}} with {{domxref("Request.mode","mode")}} of no-corsrequest-no-cors
{{domxref("Response")}}{{domxref("Response.Response","Response()")}}response
{{domxref("Response.error","error()")}} or {{domxref("Response.redirect","redirect()")}} methodsimmutable
- -

A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A TypeError is thrown if you try to modify a {{domxref("Headers")}} object whose guard is immutable. However, the operation will work if

- - diff --git a/files/fr/web/api/fetch_api/basic_concepts/index.md b/files/fr/web/api/fetch_api/basic_concepts/index.md new file mode 100644 index 0000000000..93a268d89b --- /dev/null +++ b/files/fr/web/api/fetch_api/basic_concepts/index.md @@ -0,0 +1,64 @@ +--- +title: 'Fetch : concepts de départ' +slug: Web/API/Fetch_API/Basic_concepts +translation_of: Web/API/Fetch_API/Basic_concepts +--- +

{{DefaultAPISidebar("Fetch API")}}{{draft}}

+ +

L'API Fetch fournit une interface pour récupérer des ressources (y compris depuis le réseau). Elle paraîtra familière à quiconque aura déjà utilisé {{domxref("XMLHttpRequest")}}, mais elle fournit un jeu de fonctionnalités plus puissantes et plus souples. Cet article explique quelques uns des principes de base de l'API Fetch.

+ +
+

Note : This article will be added to over time. If you find a Fetch concept that you feel needs explaining better, let someone know on the MDN discussion forum, or Mozilla IRC (#mdn room.)

+
+ +

In a nutshell

+ +

At the heart of Fetch are the Interface abstractions of HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, and {{domxref("Body")}} payloads, along with a {{domxref("GlobalFetch.fetch","global fetch")}} method for initiating asynchronous resource requests. Because the main components of HTTP are abstracted as JavaScript objects, it is easy for other APIs to make use of such functionality.

+ +

Service Workers is an example of an API that makes heavy use of Fetch.

+ +

Fetch takes the asynchronous nature of such requests one step further. The API is completely {{jsxref("Promise")}}-based.

+ +

Guard

+ +

Guard is a feature of {{domxref("Headers")}} objects, with possible values of immutable, request, request-no-cors, response, or none, depending on where the header is used.

+ +

When a new {{domxref("Headers")}} object is created using the {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, its guard is set to none (the default). When a {{domxref("Request")}} or {{domxref("Response")}} object is created, it has an associated {{domxref("Headers")}} object whose guard is set as summarized below:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
new object's typecreating constructorguard setting of associated {{domxref("Headers")}} object
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
{{domxref("Request.Request","Request()")}} with {{domxref("Request.mode","mode")}} of no-corsrequest-no-cors
{{domxref("Response")}}{{domxref("Response.Response","Response()")}}response
{{domxref("Response.error","error()")}} or {{domxref("Response.redirect","redirect()")}} methodsimmutable
+ +

A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A TypeError is thrown if you try to modify a {{domxref("Headers")}} object whose guard is immutable. However, the operation will work if

+ + diff --git a/files/fr/web/api/fetch_api/index.html b/files/fr/web/api/fetch_api/index.html deleted file mode 100644 index 49ae613fb1..0000000000 --- a/files/fr/web/api/fetch_api/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: API Fetch -slug: Web/API/Fetch_API -translation_of: Web/API/Fetch_API ---- -

{{DefaultAPISidebar("Fetch API")}}

- -

L'API Fetch fournit une interface pour la récupération de ressources (e.g., à travers le réseau.) Elle paraîtra familière à tout utilisateur de {{domxref("XMLHttpRequest")}}, mais cette nouvelle API propose néanmoins un ensemble de fonctionnalités plus souples et plus puissantes.

- -

Concepts et usage

- -

Fetch fournit une définition générique des objets {{domxref("Request")}} et {{domxref("Response")}} (et d'autres choses impliquées par les requêtes réseau). Ainsi il sera possible de les utiliser dès que nécessaire à l'avenir, même si c'est dans le cadre de service workers, de l'API Cache ou d'autres mécanismes similaires qui manipulent ou modifient des requêtes et des réponses, ou n'importe quelle situation qui pourrait requérir que vous génériez vos propres réponses au moyen d'un programme.

- -

Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP origin, supplantant les définitions précédemment proposées ailleurs.

- -

Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources.

- -

La méthode fetch() prend un argument obligatoire, le chemin vers la ressource souhaitée. Elle retourne une promesse qui résout la {{domxref("Response")}} de cette requête, qu'elle soit couronnée de succès ou non. Vous pouvez aussi optionnellement lui passer un objet d'options init comme second argument (voir {{domxref("Request")}}.)

- -

Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble de méthodes disponibles pour déterminer ce que doit être le contenu du corps et comment il doit être manipulé (voir {{domxref("Body")}}.)

- -

Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des service workers).

- -
-

Note : Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement Utiliser Fetch et Fetch, les concepts de base.

-
- -

Interrompre un fetch

- -

Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails.

- -

Les interfaces de Fetch

- -
-
{{domxref("GlobalFetch")}}
-
La méthode fetch() est utilisée pour récuperer une ressource.
-
{{domxref("Headers")}}
-
Représente les en-têtes de requête et de réponse, vous permettant de les consulter et de prendre différentes décisions en fonction du résultat.
-
{{domxref("Request")}}
-
Représente la requête d'une ressource.
-
{{domxref("Response")}}
-
Représente la réponse à une requête.
-
- -

Mixin de Fetch

- -
-
{{domxref("Body")}}
-
Fournit les méthodes relatives au corps de la requête/réponse, vous permettant  de déclarer quel est son type de contenu et comment il doit être manipulé.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Définition initiale
- -

Compatibilité Navigateurs

- -

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/fetch_api/index.md b/files/fr/web/api/fetch_api/index.md new file mode 100644 index 0000000000..49ae613fb1 --- /dev/null +++ b/files/fr/web/api/fetch_api/index.md @@ -0,0 +1,81 @@ +--- +title: API Fetch +slug: Web/API/Fetch_API +translation_of: Web/API/Fetch_API +--- +

{{DefaultAPISidebar("Fetch API")}}

+ +

L'API Fetch fournit une interface pour la récupération de ressources (e.g., à travers le réseau.) Elle paraîtra familière à tout utilisateur de {{domxref("XMLHttpRequest")}}, mais cette nouvelle API propose néanmoins un ensemble de fonctionnalités plus souples et plus puissantes.

+ +

Concepts et usage

+ +

Fetch fournit une définition générique des objets {{domxref("Request")}} et {{domxref("Response")}} (et d'autres choses impliquées par les requêtes réseau). Ainsi il sera possible de les utiliser dès que nécessaire à l'avenir, même si c'est dans le cadre de service workers, de l'API Cache ou d'autres mécanismes similaires qui manipulent ou modifient des requêtes et des réponses, ou n'importe quelle situation qui pourrait requérir que vous génériez vos propres réponses au moyen d'un programme.

+ +

Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP origin, supplantant les définitions précédemment proposées ailleurs.

+ +

Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources.

+ +

La méthode fetch() prend un argument obligatoire, le chemin vers la ressource souhaitée. Elle retourne une promesse qui résout la {{domxref("Response")}} de cette requête, qu'elle soit couronnée de succès ou non. Vous pouvez aussi optionnellement lui passer un objet d'options init comme second argument (voir {{domxref("Request")}}.)

+ +

Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble de méthodes disponibles pour déterminer ce que doit être le contenu du corps et comment il doit être manipulé (voir {{domxref("Body")}}.)

+ +

Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des service workers).

+ +
+

Note : Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement Utiliser Fetch et Fetch, les concepts de base.

+
+ +

Interrompre un fetch

+ +

Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails.

+ +

Les interfaces de Fetch

+ +
+
{{domxref("GlobalFetch")}}
+
La méthode fetch() est utilisée pour récuperer une ressource.
+
{{domxref("Headers")}}
+
Représente les en-têtes de requête et de réponse, vous permettant de les consulter et de prendre différentes décisions en fonction du résultat.
+
{{domxref("Request")}}
+
Représente la requête d'une ressource.
+
{{domxref("Response")}}
+
Représente la réponse à une requête.
+
+ +

Mixin de Fetch

+ +
+
{{domxref("Body")}}
+
Fournit les méthodes relatives au corps de la requête/réponse, vous permettant  de déclarer quel est son type de contenu et comment il doit être manipulé.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Définition initiale
+ +

Compatibilité Navigateurs

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/fetch_api/using_fetch/index.html b/files/fr/web/api/fetch_api/using_fetch/index.html deleted file mode 100644 index 04a5708c1a..0000000000 --- a/files/fr/web/api/fetch_api/using_fetch/index.html +++ /dev/null @@ -1,310 +0,0 @@ ---- -title: Utiliser Fetch -slug: Web/API/Fetch_API/Using_Fetch -tags: - - API - - BODY - - Expérimental(2) - - Fetch - - Guide - - Promesse - - Promise - - Response - - request -translation_of: Web/API/Fetch_API/Using_Fetch ---- -

{{DefaultAPISidebar("Fetch API")}}

- -

L'API Fetch fournit une interface JavaScript pour l'accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale {{domxref("GlobalFetch.fetch","fetch()")}} qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.

- -

Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP.

- -

L'état actuel du support par les navigateurs

- -

Le support de Fetch est à ses débuts, mais les choses progressent. Il a été activé par défaut sur Firefox 39 et supérieur, et sur Chrome 42 et supérieur.

- -

Si vous souhaitez l'utiliser maintenant, il y a un polyfill Fetch disponible qui recrée la fonctionnalité pour les navigateurs qui ne le supportent pas. Gardez à l'esprit qu'il est au stade expérimental et pas encore complètement fonctionnel.

- -
-

Note : Certaines préoccupations ont été soulevées sur le fait que la spécification de Fetch est en contradition avec la spécification de Streams; cependant, les prévisions montrent une intention d'intégrer Streams avec Fetch: pour plus d'informations reportez vous à Fetch API integrated with Streams.

-
- -

Détection de la fonctionnalité

- -

Le support de l'API Fetch peut être détecté en vérifiant l'existence de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} ou {{domxref("GlobalFetch.fetch","fetch()")}} sur la portée de {{domxref("Window")}} ou de {{domxref("Worker")}}. Par exemple, vous pouvez faire cela dans votre script :

- -
if (window.fetch) {
-    // exécuter ma requête fetch ici
-} else {
-    // Faire quelque chose avec XMLHttpRequest?
-}
- -

Créer une requête fetch

- -

Une requête fetch basique est vraiment simple à initier. Jetez un coup d'œil au code suivant :

- -
const myImage = document.querySelector('img');
-
-fetch('flowers.jpg')
-.then(function(response) {
-  return response.blob();
-})
-.then(function(myBlob) {
-  const objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-});
-
-
- -

Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de fetch() prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}).

- -

Bien sûr, il s'agit seulement d'une réponse HTTP, pas exactement de l'image. Pour extraire le contenu de l'image de la réponse, nous utilisons la méthode {{domxref("Body.blob","blob()")}} (définie sur le mixin {{domxref("Body")}}, qui est implémenté autant par les objets {{domxref("Request")}} que par les objets {{domxref("Response")}}).

- -
-

Note : Le mixin Body a aussi des méthodes similaires pour extraire d'autres types contenu ; pour plus d'informations regardez la section {{anch("Corps")}}.

-
- -

Un objet objectURL est ensuite créé à partir du {{domxref("Blob")}} extrait, puis est inseré dans {{domxref("img")}}.

- -

Les requêtes Fetch sont controllées par la directive connect-src du Content Security Policy plutôt que par la directive de la ressource dont il s’agit de la récupération.

- -

Fournir des options à la requête

- -

La méthode fetch() accepte un second paramètre, optionnel ; un objet init qui vous permet de contrôler un certain nombre de réglages :

- -
var myHeaders = new Headers();
-
-var myInit = { method: 'GET',
-               headers: myHeaders,
-               mode: 'cors',
-               cache: 'default' };
-
-fetch('flowers.jpg',myInit)
-.then(function(response) {
-  return response.blob();
-})
-.then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-});
-
-
- -

Reportez-vous à {{domxref("GlobalFetch.fetch","fetch()")}} pour la liste complète des options disponibles, et plus de détails.

- -

Vérifier que la récupération a réussi

- -

Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} va retourner une {{jsxref("TypeError")}} quand un problème réseau s'est produit. Cependant, il peut aussi s'agir d'un problème de permission ou quelque chose de similaire — un code HTTP 404 ne constitue pas une erreur réseau, par exemple. Un bon test de la réussite de fetch() devrait inclure la vérification que la promesse soit résolue, puis vérifier que la propriété {{domxref("Response.ok")}} ait la valeur true. Le code devrait ressembler à ce qui suit:

- -
fetch('flowers.jpg').then(function(response) {
-  if(response.ok) {
-    response.blob().then(function(myBlob) {
-      var objectURL = URL.createObjectURL(myBlob);
-      myImage.src = objectURL;
-    });
-  } else {
-    console.log('Mauvaise réponse du réseau');
-  }
-})
-.catch(function(error) {
-  console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
-});
- -

Fournir votre propre objet requête

- -

Plutôt que de transmettre le chemin de la ressource que vous souhaitez récupérer avec l'appel fetch(), vous pouvez créer un objet de requête en utilisant le constructeur {{domxref("Request.Request","Request()")}}, et le transmettre à la méthode fetch() en tant qu’argument:

- -
var myHeaders = new Headers();
-
-var myInit = { method: 'GET',
-               headers: myHeaders,
-               mode: 'cors',
-               cache: 'default' };
-
-var myRequest = new Request('flowers.jpg',myInit);
-
-fetch(myRequest,myInit)
-.then(function(response) {
-  return response.blob();
-})
-.then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-});
- -

Request() accepte exactement les mêmes paramètres que la méthode fetch(). Vous pouvez même lui transmettre un objet Request existant pour en créer une copie :

- -
var anotherRequest = new Request(myRequest,myInit);
- -

C'est très pratique, si le corps de la requête et de la réponse ne sont utilisés qu'une fois seulement. Cette manière de faire une copie permet de ré-utiliser la requête/réponse, en changeant juste les options du init si nécessaire.

- -
-

Note : Il y a aussi une méthode {{domxref("Request.clone","clone()")}} qui créer une copie. Cela a une sémantique légèrement différente à l'autre méthode de copie— La première va échouer si l'ancien corps de la requête a déjà été lu (même pour copier une réponse), alors qu'avec clone() non.

-
- -

En-têtes (Headers)

- -

L'interface {{domxref("Headers")}} vous permet de créer vos propres objets d'en-têtes via le constructeur {{domxref("Headers.Headers","Headers()")}}. Un objet en-tête est un simple ensemble de plusieurs clé-valeurs:

- -
var content = "Hello World";
-var myHeaders = new Headers();
-myHeaders.append("Content-Type", "text/plain");
-myHeaders.append("Content-Length", content.length.toString());
-myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
- -

On peut atteindre le même résultat en transmettant un tableau de tableaux ou un objet littéral au constructeur:

- -
myHeaders = new Headers({
-  "Content-Type": "text/plain",
-  "Content-Length": content.length.toString(),
-  "X-Custom-Header": "ProcessThisImmediately",
-});
- -

Le contenu peut être interrogé et récupéré:

- -
console.log(myHeaders.has("Content-Type")); // true
-console.log(myHeaders.has("Set-Cookie")); // false
-myHeaders.set("Content-Type", "text/html");
-myHeaders.append("X-Custom-Header", "AnotherValue");
-
-console.log(myHeaders.get("Content-Length")); // 11
-console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
-
-myHeaders.delete("X-Custom-Header");
-console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
- -

Certaines de ces opérations sont seulement utiles dans {{domxref("ServiceWorker_API","ServiceWorkers")}}, mais elles fournissent une bien meilleur API pour la manipulation des en-têtes.

- -

Toutes les méthodes d'en-tête provoquent une erreur TypeError si un nom d’en-tête utilisé n'est pas un nom d’en-tête HTTP valide. Les opérations de mutation vont provoquer une erreur TypeError si il y a une protection immutable (voir ci-dessous). Sinon elles vont échouer en silence. Par exemple :

- -
var myResponse = Response.error();
-try {
-  myResponse.headers.set("Origin", "http://mybank.com");
-} catch(e) {
-  console.log("Ne peut pas prétendre être une banque!");
-}
- -

Un bon cas d'utilisation des en-têtes est de vérifier que le type de contenu récupéré est correct avant de poursuivre le traitement. Par exemple:

- -
fetch(myRequest).then(function(response) {
-  var contentType = response.headers.get("content-type");
-  if(contentType && contentType.indexOf("application/json") !== -1) {
-    return response.json().then(function(json) {
-      // traitement du JSON
-    });
-  } else {
-    console.log("Oops, nous n'avons pas du JSON!");
-  }
-});
- -

Protection (Guard)

- -

Puisque les en-têtes peuvent être envoyés dans les requêtes et reçus dans les réponses, et ont diverses limitations sur quelles informations peuvent et doivent être mutables, les objets en-tête ont une propriété guard. Ce n'est pas exposé au Web, mais cela définit quelle opération de mutation est autorisée sur l'objet en-tête.

- -

Les valeurs possibles de la propriété guard sont:

- - - -
-

Note : Vous ne pouvez pas ajouter ou définir sur une requête protegée une en-tête Content-Length. De manière similaire, ajouter Set-Cookie dans l'en-tête de réponse n'est pas autorisé: les ServiceWorkers ne sont pas autorisés à gérer des cookies via des réponses synthétisées.

-
- -

Réponses

- -

Comme vous l'avez vu ci-dessus, des instances de {{domxref("Response")}} sont retournées quand la promesse de fetch() est résolue.

- -

Elles peuvent aussi être programmées dans le code via JavaScript, mais c'est seulement utile concernant les {{domxref("ServiceWorker_API", "ServiceWorkers")}}, quand vous retournez, pour une requête reçue, une réponse personnalisée en utilisant la méthode {{domxref("FetchEvent.respondWith","respondWith()")}}:

- -
var myBody = new Blob();
-
-addEventListener('fetch', function(event) {
-  event.respondWith(new Response(myBody, {
-    headers: { "Content-Type" : "text/plain" }
-  });
-)});
- -

Le constructeur {{domxref("Response.Response","Response()")}} prend deux arguments optionnels —le corps de la réponse, et un objet d'options (similaire à l'objet que {{domxref("Request.Request","Request()")}} accepte).

- -

Les propriétés de réponse les plus communes que vous allez utiliser sont:

- - - -
-

Note : La méthode statique {{domxref("Response.error","error()")}} retourne simplement une réponse d'erreur. De manière similaire, {{domxref("Response.redirect","redirect()")}} retourne une réponse de redirection vers une URL spécifique. Elles sont aussi pertinentes pour les Service Workers.

-
- -

Corps

- -

Autant une requête qu'une réponse peut contenir un corps avec des données. Un corps est une instance de n'importe lequel des types suivants:

- - - -

Le mixin {{domxref("Body")}} définit les méthodes suivantes pour extraire le corps (implémenté autant par la {{domxref("Request")}} que par la {{domxref("Response")}}). Elles retournent toutes une promesse qui sera éventuellement résolue avec le contenu actuel.

- - - -

Ceci rend l'usage de données non textuelles plus facile qu’avec XHR.

- -

Le corps des requêtes peut être défini en passant les paramètres du corps:

- -
var form = new FormData(document.getElementById('login-form'));
-fetch("/login", {
-  method: "POST",
-  body: form
-})
- -

Les Requêtes et Réponses (et par extension la fonction fetch()), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête Content-Type  si rien n'est défini dans le dictionnaire [NDLT: configuration d'initialisation].

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Définition initiale
- -

Compatibilité navigateur

- -

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/fetch_api/using_fetch/index.md b/files/fr/web/api/fetch_api/using_fetch/index.md new file mode 100644 index 0000000000..04a5708c1a --- /dev/null +++ b/files/fr/web/api/fetch_api/using_fetch/index.md @@ -0,0 +1,310 @@ +--- +title: Utiliser Fetch +slug: Web/API/Fetch_API/Using_Fetch +tags: + - API + - BODY + - Expérimental(2) + - Fetch + - Guide + - Promesse + - Promise + - Response + - request +translation_of: Web/API/Fetch_API/Using_Fetch +--- +

{{DefaultAPISidebar("Fetch API")}}

+ +

L'API Fetch fournit une interface JavaScript pour l'accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale {{domxref("GlobalFetch.fetch","fetch()")}} qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.

+ +

Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP.

+ +

L'état actuel du support par les navigateurs

+ +

Le support de Fetch est à ses débuts, mais les choses progressent. Il a été activé par défaut sur Firefox 39 et supérieur, et sur Chrome 42 et supérieur.

+ +

Si vous souhaitez l'utiliser maintenant, il y a un polyfill Fetch disponible qui recrée la fonctionnalité pour les navigateurs qui ne le supportent pas. Gardez à l'esprit qu'il est au stade expérimental et pas encore complètement fonctionnel.

+ +
+

Note : Certaines préoccupations ont été soulevées sur le fait que la spécification de Fetch est en contradition avec la spécification de Streams; cependant, les prévisions montrent une intention d'intégrer Streams avec Fetch: pour plus d'informations reportez vous à Fetch API integrated with Streams.

+
+ +

Détection de la fonctionnalité

+ +

Le support de l'API Fetch peut être détecté en vérifiant l'existence de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} ou {{domxref("GlobalFetch.fetch","fetch()")}} sur la portée de {{domxref("Window")}} ou de {{domxref("Worker")}}. Par exemple, vous pouvez faire cela dans votre script :

+ +
if (window.fetch) {
+    // exécuter ma requête fetch ici
+} else {
+    // Faire quelque chose avec XMLHttpRequest?
+}
+ +

Créer une requête fetch

+ +

Une requête fetch basique est vraiment simple à initier. Jetez un coup d'œil au code suivant :

+ +
const myImage = document.querySelector('img');
+
+fetch('flowers.jpg')
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  const objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+
+ +

Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de fetch() prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}).

+ +

Bien sûr, il s'agit seulement d'une réponse HTTP, pas exactement de l'image. Pour extraire le contenu de l'image de la réponse, nous utilisons la méthode {{domxref("Body.blob","blob()")}} (définie sur le mixin {{domxref("Body")}}, qui est implémenté autant par les objets {{domxref("Request")}} que par les objets {{domxref("Response")}}).

+ +
+

Note : Le mixin Body a aussi des méthodes similaires pour extraire d'autres types contenu ; pour plus d'informations regardez la section {{anch("Corps")}}.

+
+ +

Un objet objectURL est ensuite créé à partir du {{domxref("Blob")}} extrait, puis est inseré dans {{domxref("img")}}.

+ +

Les requêtes Fetch sont controllées par la directive connect-src du Content Security Policy plutôt que par la directive de la ressource dont il s’agit de la récupération.

+ +

Fournir des options à la requête

+ +

La méthode fetch() accepte un second paramètre, optionnel ; un objet init qui vous permet de contrôler un certain nombre de réglages :

+ +
var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+fetch('flowers.jpg',myInit)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+
+ +

Reportez-vous à {{domxref("GlobalFetch.fetch","fetch()")}} pour la liste complète des options disponibles, et plus de détails.

+ +

Vérifier que la récupération a réussi

+ +

Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} va retourner une {{jsxref("TypeError")}} quand un problème réseau s'est produit. Cependant, il peut aussi s'agir d'un problème de permission ou quelque chose de similaire — un code HTTP 404 ne constitue pas une erreur réseau, par exemple. Un bon test de la réussite de fetch() devrait inclure la vérification que la promesse soit résolue, puis vérifier que la propriété {{domxref("Response.ok")}} ait la valeur true. Le code devrait ressembler à ce qui suit:

+ +
fetch('flowers.jpg').then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(myBlob) {
+      var objectURL = URL.createObjectURL(myBlob);
+      myImage.src = objectURL;
+    });
+  } else {
+    console.log('Mauvaise réponse du réseau');
+  }
+})
+.catch(function(error) {
+  console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
+});
+ +

Fournir votre propre objet requête

+ +

Plutôt que de transmettre le chemin de la ressource que vous souhaitez récupérer avec l'appel fetch(), vous pouvez créer un objet de requête en utilisant le constructeur {{domxref("Request.Request","Request()")}}, et le transmettre à la méthode fetch() en tant qu’argument:

+ +
var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+fetch(myRequest,myInit)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+ +

Request() accepte exactement les mêmes paramètres que la méthode fetch(). Vous pouvez même lui transmettre un objet Request existant pour en créer une copie :

+ +
var anotherRequest = new Request(myRequest,myInit);
+ +

C'est très pratique, si le corps de la requête et de la réponse ne sont utilisés qu'une fois seulement. Cette manière de faire une copie permet de ré-utiliser la requête/réponse, en changeant juste les options du init si nécessaire.

+ +
+

Note : Il y a aussi une méthode {{domxref("Request.clone","clone()")}} qui créer une copie. Cela a une sémantique légèrement différente à l'autre méthode de copie— La première va échouer si l'ancien corps de la requête a déjà été lu (même pour copier une réponse), alors qu'avec clone() non.

+
+ +

En-têtes (Headers)

+ +

L'interface {{domxref("Headers")}} vous permet de créer vos propres objets d'en-têtes via le constructeur {{domxref("Headers.Headers","Headers()")}}. Un objet en-tête est un simple ensemble de plusieurs clé-valeurs:

+ +
var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
+ +

On peut atteindre le même résultat en transmettant un tableau de tableaux ou un objet littéral au constructeur:

+ +
myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});
+ +

Le contenu peut être interrogé et récupéré:

+ +
console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
+ +

Certaines de ces opérations sont seulement utiles dans {{domxref("ServiceWorker_API","ServiceWorkers")}}, mais elles fournissent une bien meilleur API pour la manipulation des en-têtes.

+ +

Toutes les méthodes d'en-tête provoquent une erreur TypeError si un nom d’en-tête utilisé n'est pas un nom d’en-tête HTTP valide. Les opérations de mutation vont provoquer une erreur TypeError si il y a une protection immutable (voir ci-dessous). Sinon elles vont échouer en silence. Par exemple :

+ +
var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Ne peut pas prétendre être une banque!");
+}
+ +

Un bon cas d'utilisation des en-têtes est de vérifier que le type de contenu récupéré est correct avant de poursuivre le traitement. Par exemple:

+ +
fetch(myRequest).then(function(response) {
+  var contentType = response.headers.get("content-type");
+  if(contentType && contentType.indexOf("application/json") !== -1) {
+    return response.json().then(function(json) {
+      // traitement du JSON
+    });
+  } else {
+    console.log("Oops, nous n'avons pas du JSON!");
+  }
+});
+ +

Protection (Guard)

+ +

Puisque les en-têtes peuvent être envoyés dans les requêtes et reçus dans les réponses, et ont diverses limitations sur quelles informations peuvent et doivent être mutables, les objets en-tête ont une propriété guard. Ce n'est pas exposé au Web, mais cela définit quelle opération de mutation est autorisée sur l'objet en-tête.

+ +

Les valeurs possibles de la propriété guard sont:

+ + + +
+

Note : Vous ne pouvez pas ajouter ou définir sur une requête protegée une en-tête Content-Length. De manière similaire, ajouter Set-Cookie dans l'en-tête de réponse n'est pas autorisé: les ServiceWorkers ne sont pas autorisés à gérer des cookies via des réponses synthétisées.

+
+ +

Réponses

+ +

Comme vous l'avez vu ci-dessus, des instances de {{domxref("Response")}} sont retournées quand la promesse de fetch() est résolue.

+ +

Elles peuvent aussi être programmées dans le code via JavaScript, mais c'est seulement utile concernant les {{domxref("ServiceWorker_API", "ServiceWorkers")}}, quand vous retournez, pour une requête reçue, une réponse personnalisée en utilisant la méthode {{domxref("FetchEvent.respondWith","respondWith()")}}:

+ +
var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(new Response(myBody, {
+    headers: { "Content-Type" : "text/plain" }
+  });
+)});
+ +

Le constructeur {{domxref("Response.Response","Response()")}} prend deux arguments optionnels —le corps de la réponse, et un objet d'options (similaire à l'objet que {{domxref("Request.Request","Request()")}} accepte).

+ +

Les propriétés de réponse les plus communes que vous allez utiliser sont:

+ + + +
+

Note : La méthode statique {{domxref("Response.error","error()")}} retourne simplement une réponse d'erreur. De manière similaire, {{domxref("Response.redirect","redirect()")}} retourne une réponse de redirection vers une URL spécifique. Elles sont aussi pertinentes pour les Service Workers.

+
+ +

Corps

+ +

Autant une requête qu'une réponse peut contenir un corps avec des données. Un corps est une instance de n'importe lequel des types suivants:

+ + + +

Le mixin {{domxref("Body")}} définit les méthodes suivantes pour extraire le corps (implémenté autant par la {{domxref("Request")}} que par la {{domxref("Response")}}). Elles retournent toutes une promesse qui sera éventuellement résolue avec le contenu actuel.

+ + + +

Ceci rend l'usage de données non textuelles plus facile qu’avec XHR.

+ +

Le corps des requêtes peut être défini en passant les paramètres du corps:

+ +
var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+})
+ +

Les Requêtes et Réponses (et par extension la fonction fetch()), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête Content-Type  si rien n'est défini dans le dictionnaire [NDLT: configuration d'initialisation].

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Définition initiale
+ +

Compatibilité navigateur

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/fetchevent/index.html b/files/fr/web/api/fetchevent/index.html deleted file mode 100644 index d4f17e749d..0000000000 --- a/files/fr/web/api/fetchevent/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: FetchEvent -slug: Web/API/FetchEvent -translation_of: Web/API/FetchEvent ---- -

{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}

- -

Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, FetchEvent représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée.

- -

Constructeur

- -
-
{{domxref("FetchEvent.FetchEvent()")}}
-
Crée un nouvel objet FetchEvent.
-
- -

Propriétés

- -

Hérite de son ancêtre, {{domxref("Event")}}.

- -
-
{{domxref("FetchEvent.isReload")}} {{readonlyInline}}
-
Retourne un {{jsxref("Boolean")}} qui est à true si l'évènement a été délivré avec l'intention de recharger la page, ou false sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel.
-
{{domxref("FetchEvent.request")}} {{readonlyInline}}
-
Retourne la {{domxref("Request")}} qui a déclenché l'évènement.
-
{{domxref("FetchEvent.clientId")}} {{readonlyInline}}
-
Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours.
-
- -

Propriétés dépréciées

- -
-
{{domxref("FetchEvent.client")}} {{readonlyInline}}
-
Retourne le {{domxref("Client")}} controlé par le service worker en cours.
-
- -

Méthodes

- -

Hérite de son parent, {{domxref("ExtendableEvent")}}.

- -
-
{{domxref("FetchEvent.respondWith()")}}
-
Promesse qui est résolue en retournant une {{domxref("Response")}} ou une erreur réseau  à Fetch.
-
{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}
-
-

Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{event("Event_handlers", "event handler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{event("Event_handlers", "event handler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}.

-
-
- -

Exemples

- -

Ce extrait de code provient de l'exemple Service Worker Fetch (lancer l'exemple dans le navigateur). Dans une partie antérieure du code,  un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau.

- -

Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié.

- -
self.addEventListener('fetch', function(event) {
-  console.log('Gestion de l\'évènement de fetch pour', event.request.url);
-
-  event.respondWith(
-    caches.match(event.request).then(function(response) {
-      if (response) {
-        console.log('Réponse trouvée en cache:', response);
-
-        return response;
-      }
-      console.log('Pas de réponse trouvée en cache. Sur le point de la récupérer via le réseau...');
-
-      return fetch(event.request).then(function(response) {
-        console.log('La réponse du réseau est:', response);
-
-        return response;
-      }).catch(function(error) {
-        console.error('Récupération échouée:', error);
-
-        throw error;
-      });
-    })
-  );
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.FetchEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/fetchevent/index.md b/files/fr/web/api/fetchevent/index.md new file mode 100644 index 0000000000..d4f17e749d --- /dev/null +++ b/files/fr/web/api/fetchevent/index.md @@ -0,0 +1,107 @@ +--- +title: FetchEvent +slug: Web/API/FetchEvent +translation_of: Web/API/FetchEvent +--- +

{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}

+ +

Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, FetchEvent représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée.

+ +

Constructeur

+ +
+
{{domxref("FetchEvent.FetchEvent()")}}
+
Crée un nouvel objet FetchEvent.
+
+ +

Propriétés

+ +

Hérite de son ancêtre, {{domxref("Event")}}.

+ +
+
{{domxref("FetchEvent.isReload")}} {{readonlyInline}}
+
Retourne un {{jsxref("Boolean")}} qui est à true si l'évènement a été délivré avec l'intention de recharger la page, ou false sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel.
+
{{domxref("FetchEvent.request")}} {{readonlyInline}}
+
Retourne la {{domxref("Request")}} qui a déclenché l'évènement.
+
{{domxref("FetchEvent.clientId")}} {{readonlyInline}}
+
Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours.
+
+ +

Propriétés dépréciées

+ +
+
{{domxref("FetchEvent.client")}} {{readonlyInline}}
+
Retourne le {{domxref("Client")}} controlé par le service worker en cours.
+
+ +

Méthodes

+ +

Hérite de son parent, {{domxref("ExtendableEvent")}}.

+ +
+
{{domxref("FetchEvent.respondWith()")}}
+
Promesse qui est résolue en retournant une {{domxref("Response")}} ou une erreur réseau  à Fetch.
+
{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}
+
+

Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{event("Event_handlers", "event handler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{event("Event_handlers", "event handler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}.

+
+
+ +

Exemples

+ +

Ce extrait de code provient de l'exemple Service Worker Fetch (lancer l'exemple dans le navigateur). Dans une partie antérieure du code,  un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau.

+ +

Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié.

+ +
self.addEventListener('fetch', function(event) {
+  console.log('Gestion de l\'évènement de fetch pour', event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        console.log('Réponse trouvée en cache:', response);
+
+        return response;
+      }
+      console.log('Pas de réponse trouvée en cache. Sur le point de la récupérer via le réseau...');
+
+      return fetch(event.request).then(function(response) {
+        console.log('La réponse du réseau est:', response);
+
+        return response;
+      }).catch(function(error) {
+        console.error('Récupération échouée:', error);
+
+        throw error;
+      });
+    })
+  );
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.FetchEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/file/index.html b/files/fr/web/api/file/index.html deleted file mode 100644 index 0f4a7cf796..0000000000 --- a/files/fr/web/api/file/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: File -slug: Web/API/File -tags: - - DOM - - File -translation_of: Web/API/File ---- -
{{APIRef}}
- -

L’interface File fournit des informations sur des fichiers et permet au code JavaScript d’une une page web d’accéder à leurs contenus.

- -

Les objets File sont généralements obtenus à partir de :

- - - -

Dans Gecko, le code privilégié peut créer des objets File représentant tout fichier local sans nécessiter une interaction de l’utilisateur ou de l’utilisatrice (voir {{anch("Notes d’implémentation")}} pour plus d’informations.)

- -

Un objet File est un genre spécifique de {{domxref("Blob")}}, et peut être utilisé dans tout contexte où un blob peut l’être. En particulier, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, et {{domxref("XMLHttpRequest", "", "send()")}} acceptent indifféremment des Blobs et des Files.

- -

Voir Utiliser des fichiers à partir d'applications web pour plus d’informations et des exemples.

- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
{{domxref("File.File", "File()")}}
-
Renvoie un File nouvellement construit.
-
- -

Propriétés

- -
-
{{domxref("File.lastModified")}} {{readonlyinline}}
-
Renvoie le temps de dernière modification du fichier, exprimé en millisecondes écoulées depuis l’ère UNIX (1er janvier 1970 à minuit).
-
{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}
-
Renvoie la {{jsxref("Date")}} de dernière modification du fichier.
-
{{domxref("File.name")}} {{readonlyinline}}
-
Renvoie le nom du fichier.
-
{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}
-
Renvoie le chemin auquel l’URL du {{domxref("File")}} est relative.
-
- -

File implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes :

- -
-
{{domxref("File.size")}} {{readonlyinline}}
-
Renvoie la taille du fichier en octets.
-
{{domxref("File.type")}} {{readonlyinline}}
-
Renvoie le type MIMEdu fichier.
-
- -

Méthodes

- -

L’interface File ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :

- -
-
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
-
Renvoie un nouvel objet Blob contenant les données du blob source comprises dans l’intervalle d’octets spécifié.
-
{{domxref("Blob.stream()", "Blob.stream()")}}
-
Transforme le File en un {{domxref("ReadableStream")}} pouvant être utilisé pour lire le contenu du File.
-
{{domxref("Blob.text()", "Blob.text()")}}
-
Transforme le File en un flux (stream) et le lit en entier. Renvoie une {{jsxref("promise", "promesse")}} qui se résoud en une {{domxref("USVString")}} (texte).
-
{{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}
-
Transforme le File en un flux (stream) et le lit en entier. Retourne une {{jsxref("promise", "promesse")}} qui se résoud en un {{domxref("ArrayBuffer")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('File API')}}{{Spec2('File API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.File")}}

- -

Notes d’implémentation

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/file/index.md b/files/fr/web/api/file/index.md new file mode 100644 index 0000000000..0f4a7cf796 --- /dev/null +++ b/files/fr/web/api/file/index.md @@ -0,0 +1,117 @@ +--- +title: File +slug: Web/API/File +tags: + - DOM + - File +translation_of: Web/API/File +--- +
{{APIRef}}
+ +

L’interface File fournit des informations sur des fichiers et permet au code JavaScript d’une une page web d’accéder à leurs contenus.

+ +

Les objets File sont généralements obtenus à partir de :

+ + + +

Dans Gecko, le code privilégié peut créer des objets File représentant tout fichier local sans nécessiter une interaction de l’utilisateur ou de l’utilisatrice (voir {{anch("Notes d’implémentation")}} pour plus d’informations.)

+ +

Un objet File est un genre spécifique de {{domxref("Blob")}}, et peut être utilisé dans tout contexte où un blob peut l’être. En particulier, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, et {{domxref("XMLHttpRequest", "", "send()")}} acceptent indifféremment des Blobs et des Files.

+ +

Voir Utiliser des fichiers à partir d'applications web pour plus d’informations et des exemples.

+ +

{{InheritanceDiagram}}

+ +

Constructeur

+ +
+
{{domxref("File.File", "File()")}}
+
Renvoie un File nouvellement construit.
+
+ +

Propriétés

+ +
+
{{domxref("File.lastModified")}} {{readonlyinline}}
+
Renvoie le temps de dernière modification du fichier, exprimé en millisecondes écoulées depuis l’ère UNIX (1er janvier 1970 à minuit).
+
{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}
+
Renvoie la {{jsxref("Date")}} de dernière modification du fichier.
+
{{domxref("File.name")}} {{readonlyinline}}
+
Renvoie le nom du fichier.
+
{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}
+
Renvoie le chemin auquel l’URL du {{domxref("File")}} est relative.
+
+ +

File implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes :

+ +
+
{{domxref("File.size")}} {{readonlyinline}}
+
Renvoie la taille du fichier en octets.
+
{{domxref("File.type")}} {{readonlyinline}}
+
Renvoie le type MIMEdu fichier.
+
+ +

Méthodes

+ +

L’interface File ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :

+ +
+
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
Renvoie un nouvel objet Blob contenant les données du blob source comprises dans l’intervalle d’octets spécifié.
+
{{domxref("Blob.stream()", "Blob.stream()")}}
+
Transforme le File en un {{domxref("ReadableStream")}} pouvant être utilisé pour lire le contenu du File.
+
{{domxref("Blob.text()", "Blob.text()")}}
+
Transforme le File en un flux (stream) et le lit en entier. Renvoie une {{jsxref("promise", "promesse")}} qui se résoud en une {{domxref("USVString")}} (texte).
+
{{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}
+
Transforme le File en un flux (stream) et le lit en entier. Retourne une {{jsxref("promise", "promesse")}} qui se résoud en un {{domxref("ArrayBuffer")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('File API')}}{{Spec2('File API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.File")}}

+ +

Notes d’implémentation

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/file/name/index.html b/files/fr/web/api/file/name/index.html deleted file mode 100644 index be29d91b9a..0000000000 --- a/files/fr/web/api/file/name/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: File.fileName -slug: Web/API/File/name -tags: - - API - - DOM - - Fichier - - Nom - - Propriétés -translation_of: Web/API/File/fileName -original_slug: Web/API/File/fileName ---- -

{{APIRef("File API")}}{{non-standard_header}}

- -

{{obsolete_header(7.0)}}

- -

Résumé

- -

Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété.

- -
-

Note : Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.

-
- -

Syntaxe

- -
var name = instanceOfFile.fileName
- -

Valeur

- -

Une chaîne de caractères.

- -

Specification

- -

Ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/api/file/name/index.md b/files/fr/web/api/file/name/index.md new file mode 100644 index 0000000000..be29d91b9a --- /dev/null +++ b/files/fr/web/api/file/name/index.md @@ -0,0 +1,41 @@ +--- +title: File.fileName +slug: Web/API/File/name +tags: + - API + - DOM + - Fichier + - Nom + - Propriétés +translation_of: Web/API/File/fileName +original_slug: Web/API/File/fileName +--- +

{{APIRef("File API")}}{{non-standard_header}}

+ +

{{obsolete_header(7.0)}}

+ +

Résumé

+ +

Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété.

+ +
+

Note : Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.

+
+ +

Syntaxe

+ +
var name = instanceOfFile.fileName
+ +

Valeur

+ +

Une chaîne de caractères.

+ +

Specification

+ +

Ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.html b/files/fr/web/api/file/using_files_from_web_applications/index.html deleted file mode 100644 index 8d9eb1119e..0000000000 --- a/files/fr/web/api/file/using_files_from_web_applications/index.html +++ /dev/null @@ -1,494 +0,0 @@ ---- -title: Utiliser des fichiers à partir d'applications web -slug: Web/API/File/Using_files_from_web_applications -tags: - - Files - - HTML5 - - Téléchargement - - ajax upload -translation_of: Web/API/File/Using_files_from_web_applications ---- -

{{APIRef("File API")}}{{draft}}

- -

Grâce à l'API File ajoutée au DOM avec HTML5, il est maintenant possible depuis une page web de proposer à l'utilisateur de sélectionner des fichiers locaux, puis d'en lire le contenu. Cette sélection est possible en utilisant un élément HTML {{ HTMLElement("input") }} ou par glisser-déposer.

- -

Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à Using the DOM File API in chrome code pour plus de détails.

- -

Accéder au(x) fichier(s) sélectionné(s)

- -

Examinez ce code HTML :

- -
<input type="file" id="input">
- -

L'API File permet d'accèder à la {{ domxref("FileList") }} contenant les objets {{ domxref("File") }} qui correspondent aux fichiers selectionnés par l'utilisateur.

- -

Si l'utilisateur ne sélectionne qu'un seul fichier, on ne prendra en compte que le premier élément de la {{ domxref("FileList") }}.

- -

Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique :

- -
var fichierSelectionne = document.getElementById('input').files[0];
- -

Pour accèder à un fichier sélectionné en utilisant un sélecteur jQuery :

- -
var fichierSelectionne = $('#input').get(0).files[0];
-
-var fichierSelectionne = $('#input')[0].files[0];
- -
-

Note : Si vous rencontrez une erreur "files is undefined" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "files".

-
- -

Accéder au(x) fichier(s) sélectionné(s) sur un événement change

- -

Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement change :

- -
<input type="file" id="input" onchange="handleFiles(this.files)">
- -

La fonction handleFiles() est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur.

- -

Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut multiple de l'élément input :

- -
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
- -

La liste de fichiers passée à la fonction handleFiles() contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur.

- -

Ajouter dynamiquement un gestionnaire d'événement change

- -

Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme jQuery, il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement change, comme cela :

- -
var inputElement = document.getElementById("inputField");
-inputElement.addEventListener("change", handleFiles, false);
-function handleFiles() {
-  var fileList = this.files; /* Vous pouvez maintenant manipuler la liste de fichiers */
-}
- -

Notez que dans ce cas la fonction handleFiles() est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre.

- -

Obtenir des informations sur le(s) fichier(s) sélectionné(s)

- -

L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut length de la liste de fichiers :

- -
var numFiles = files.length;
- -

Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau :

- -
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
-  var file = files[i];
-  ..
-}
-
- -

La boucle parcourt l'ensemble des fichiers de la liste.

- -

L'objet {{ domxref("File") }} expose trois attributs accessibles en lecture seulement et contenant des informations utiles sur le fichier.

- -
-
name
-
Une chaîne de caractères contenant le nom du fichier uniquement, sans aucune information relative au chemin d'accès.
-
size
-
La taille du fichier exprimée en octets, sous la forme d'un entier de 64 bits.
-
type
-
Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide "" si le type ne peut pas être déterminé.
-
- -

Exemple : Afficher la taille d'un ou plusieurs fichiers

- -

L'exemple suivant montre une utilisation possible de la propriété size :

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>File(s) size</title>
-<script>
-function updateSize() {
-  var nBytes = 0,
-      oFiles = document.getElementById("uploadInput").files,
-      nFiles = oFiles.length;
-  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
-    nBytes += oFiles[nFileId].size;
-  }
-  var sOutput = nBytes + " bytes";
-  // partie de code facultative pour l'approximation des multiples
-  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
-    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
-  }
-  // fin de la partie de code facultative
-  document.getElementById("fileNum").innerHTML = nFiles;
-  document.getElementById("fileSize").innerHTML = sOutput;
-}
-</script>
-</head>
-
-<body onload="updateSize();">
-<form name="uploadForm">
-<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
-<p><input type="submit" value="Send file"></p>
-</form>
-</body>
-</html>
-
- -

Utiliser des éléments input masqués de type file avec l'événement click

- -

Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément input un style incluant display:none et gérer l'événement click sur votre élément {{ HTMLElement("input") }}.

- -

Examinez cet extrait de code HTML :

- -
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
-<a href="#" id="fileSelect">Select some files</a>
- -

Le code gérant l'événement click peut être écrit de cette façon :

- -
var fileSelect = document.getElementById("fileSelect"),
-  fileElem = document.getElementById("fileElem");
-
-fileSelect.addEventListener("click", function (e) {
-  if (fileElem) {
-    fileElem.click();
-  }
-  e.preventDefault(); // empêche la navigation vers "#"
-}, false);
-
- -

Vous pouvez bien sûr appliquer le style de votre choix au nouveau bouton d'ouverture du sélecteur de fichiers.

- -

Utiliser un élément label pour activer un élément input masqué de type file

- -

Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode click()).

- -

Examinez ce morceau de code HTML :

- -
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <label for="fileElem">Select some files</label>
- -

Il n'y a pas besoin d'ajouter du code JavaScript pour l'appel à fileElem.click(). Vous pouvez dans ce cas aussi appliquer le style de votre choix à l'élément label.

- -

Sélectionner des fichiers en utilisant drag and drop

- -

Vous pouvez aussi autoriser l'utilisateur à glisser-déposer (drag and drop) des fichiers dans votre application web.

- -

La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements drop :

- -
var dropbox;
-
-dropbox = document.getElementById("dropbox");
-dropbox.addEventListener("dragenter", dragenter, false);
-dropbox.addEventListener("dragover", dragover, false);
-dropbox.addEventListener("drop", drop, false);
-
- -

Dans cet exemple, l'élément portant l'ID dropbox devient notre zone de dépôt en y ajoutant les gestionnaires d'écoute des événements {{event('dragenter')}}, {{event('dragover')}}, et {{event('drop')}}.

- -

Nous n'avons pas vraiment besoin dans notre cas de gérer les événements dragenter et dragover. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut :

- -
function dragenter(e) {
-  e.stopPropagation();
-  e.preventDefault();
-}
-
-function dragover(e) {
-  e.stopPropagation();
-  e.preventDefault();
-}
-
- -

La vraie magie est dans la fonction drop() :

- -
function drop(e) {
-  e.stopPropagation();
-  e.preventDefault();
-
-  var dt = e.dataTransfer;
-  var files = dt.files;
-
-  handleFiles(files);
-}
- -

Nous récupérons ici le champ dataTransfer de l'événement puis nous en extrayons la liste des fichiers que nous passons à handleFiles(). À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément input ou le glisser-déposer.

- -

Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur

- -

Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément input ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction handleFiles() montrée ci-dessous :

- -
function handleFiles(files) {
-  for (var i = 0; i < files.length; i++) {
-    var file = files[i];
-    var imageType = /^image\//;
-
-    if (!imageType.test(file.type)) {
-      continue;
-    }
-
-    var img = document.createElement("img");
-    img.classList.add("obj");
-    img.file = file;
-    preview.appendChild(img); // En admettant que "preview" est l'élément div qui contiendra le contenu affiché.
-
-    var reader = new FileReader();
-    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
-    reader.readAsDataURL(file);
-  }
-}
-
- -

La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "image/*"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image [de l'élément img, NDT], même si cela n'est pas nécessaire ici.

- -

La classe CSS obj est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut file spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document.

- -

Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément img. Après avoir créé le nouvel objet FileReader, nous définissons sa fonction onload pouis nous appelons readAsDataURL() pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en data : c'est l'URL transmise à la fonction de rappel onload. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut src de l'élement img, faisant ainsi apparaître l'image dans la miniature à l'écran.

- -

Utiliser un objet URLs

- -

Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur.

- -

Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML :

- -
var objectURL = window.URL.createObjectURL(fileObj);
- -

L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }}  si votre page les utilise de manière dynamique :

- -
window.URL.revokeObjectURL(objectURL);
- -

Exemple : Utilisation de l'objet URLs pour afficher des images

- -

Cet exemple utilise des objets URLs pour afficher des vignettes d'image. Il affiche en outre d'autres informations, dont leurs noms et leurs tailles.

- -

Le code HTML qui présente l'interface ressemble à ceci:

- -
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
-<a href="#" id="fileSelect">Sélectionnez des fichiers</a>
-<div id="fileList">
-  <p>Aucun fichier sélectionné !</p>
-</div>
- -

Ce code définit notre élément fichier {{ HTMLElement("input") }}, ainsi qu'un lien qui appelle le sélecteur de fichiers (l'élément input étant masqué pour éviter l'affichage de la si peu séduisante interface utilisateur). Vous pouvez vous reporter à la section {{ anch("Using hidden file input elements using the click() method") }} pour des explications détaillées sur cette partie de code ainsi que sur la méthode appelant le sélecteur de fichiers.

- -

Voici la méthode handleFiles() :

- -
window.URL = window.URL || window.webkitURL;
-
-var fileSelect = document.getElementById("fileSelect"),
-    fileElem = document.getElementById("fileElem"),
-    fileList = document.getElementById("fileList");
-
-fileSelect.addEventListener("click", function (e) {
-  if (fileElem) {
-    fileElem.click();
-  }
-  e.preventDefault(); // empêche la navigation vers "#"
-}, false);
-
-function handleFiles(files) {
-  if (!files.length) {
-    fileList.innerHTML = "<p>Aucun fichier sélectionné !</p>";
-  } else {
-    fileList.innerHTML = "";
-    var list = document.createElement("ul");
-    fileList.appendChild(list);
-    for (var i = 0; i < files.length; i++) {
-      var li = document.createElement("li");
-      list.appendChild(li);
-
-      var img = document.createElement("img");
-      img.src = window.URL.createObjectURL(files[i]);
-      img.height = 60;
-      img.onload = function() {
-        window.URL.revokeObjectURL(this.src);
-      }
-      li.appendChild(img);
-      var info = document.createElement("span");
-      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
-      li.appendChild(info);
-    }
-  }
-}
- -

Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est fileList, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures..

- -

Si l'objet {{ domxref("FileList") }} passé à handleFiles() est null, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci :

- -
    -
  1. Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée.
    2. -
  2. L'élement de la liste nouvellement créée est ajoutée dans le bloc {{ HTMLElement("div") }} en appelant sa méthode {{ domxref("Node.appendChild()") }}.
    3. -
  3. Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par files : -
      -
    1. Création et ajout à la liste d'un nouvel élément de liste {{ HTMLElement("li") }}.
      2. -
    2. Création d'un nouvel élément image {{ HTMLElement("img") }}.
      3. -
    3. Définition d'un nouvel objet URL représentant le fichier comme source de l'image, en utilisant {{ domxref("window.URL.createObjectURL()") }} pour la création de l'URL du Blob.
      4. -
    4. Définition de la hauteur de l'image à 60 pixels.
      5. -
    5. Définition du gestionnaire pour l'événement load de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut img.src.
      6. -
    6. Ajout du nouvel élément à la liste.
      7. -
    -
    4. -
- -

Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur

- -

Vous pourriez en outre vouloir autoriser l'utilisateur à télécharger sur un serveur (upload) un ou plusieurs fichiers sélectionnés (tels que les images sélectionnées en suivant l'exemple précedent). Cette opération peut être très facilement effectuée de manière asynchrone.

- -

Créer les tâches de téléchargement

- -

En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS obj, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut file. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela :

- -
function sendFiles() {
-  var imgs = document.querySelectorAll(".obj");
-
-  for (var i = 0; i < imgs.length; i++) {
-    new FileUpload(imgs[i], imgs[i].file);
-  }
-}
-
- -

La ligne 2 crée un tableau, nommé imgs, de tous les éléments de la classe CSS obj dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de FileUpload pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur.

- -

Manipuler le processus de téléchargement pour un fichier

- -

La fonction FileUpload accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues.

- -
function FileUpload(img, file) {
-  var reader = new FileReader();
-  this.ctrl = createThrobber(img);
-  var xhr = new XMLHttpRequest();
-  this.xhr = xhr;
-
-  var self = this;
-  this.xhr.upload.addEventListener("progress", function(e) {
-        if (e.lengthComputable) {
-          var percentage = Math.round((e.loaded * 100) / e.total);
-          self.ctrl.update(percentage);
-        }
-      }, false);
-
-  xhr.upload.addEventListener("load", function(e){
-          self.ctrl.update(100);
-          var canvas = self.ctrl.ctx.canvas;
-          canvas.parentNode.removeChild(canvas);
-      }, false);
-  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
-  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
-  reader.onload = function(evt) {
-    xhr.sendAsBinary(evt.target.result);
-  };
-  reader.readAsBinaryString(file);
-}
-
- -

La fonction FileUpload() montrée ci-dessus crée un indicateur d'activité (throbber) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données.

- -

Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données :

- -
    -
  1. Le processus d'écoute de l'événement progress du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. 
    2. -
  2. Le gestionnaire de l'événement load du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement.
    3. -
  3. La requête de téléchargement de l'image est ouverte par l'appel à la méthode open() du XMLHttpRequest, démarrant la création d'une requête POST.
    4. -
  4. Le type MIME pour le téléchargement est défini en appelant la fonction overrideMimeType() du XMLHttpRequest. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME.
    5. -
  5. L'objet FileReader est utilisé pour la conversion du fichier en chaîne binaire.
    6. -
  6. La fonction send() du  XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé.
    7. -
- -
-

Note : la méthode non standard sendAsBinary utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard send(Blob data). 

-
- -

Gérer le processus de téléchargement d'un fichier de manière asynchrone

- -
<?php
-if (isset($_FILES['myFile'])) {
-    // Exemple:
-    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
-    exit;
-}
-?>
-<!DOCTYPE html>
-<html>
-<head>
-    <title>dnd binary upload</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <script type="text/javascript">
-        function sendFile(file) {
-            var uri = "/index.php";
-            var xhr = new XMLHttpRequest();
-            var fd = new FormData();
-
-            xhr.open("POST", uri, true);
-            xhr.onreadystatechange = function() {
-                if (xhr.readyState == 4 && xhr.status == 200) {
-                    // Handle response.
-                    alert(xhr.responseText); // handle response.
-                }
-            };
-            fd.append('myFile', file);
-            // Initiate a multipart/form-data upload
-            xhr.send(fd);
-        }
-
-        window.onload = function() {
-            var dropzone = document.getElementById("dropzone");
-            dropzone.ondragover = dropzone.ondragenter = function(event) {
-                event.stopPropagation();
-                event.preventDefault();
-            }
-
-            dropzone.ondrop = function(event) {
-                event.stopPropagation();
-                event.preventDefault();
-
-                var filesArray = event.dataTransfer.files;
-                for (var i=0; i<filesArray.length; i++) {
-                    sendFile(filesArray[i]);
-                }
-            }
-         }
-    </script>
-</head>
-<body>
-    <div>
-        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
-    </div>
-</body>
-</html>
-
- -

Exemple : Utiliser un objet URLs pour afficher un PDF

- -

Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur.

- -

Sous Firefox, la constante de configuration pdfjs.disabled doit être définie à false {{non-standard_inline()}} pour afficher les PDF encapsulés dans dans un {{ HTMLElement("iframe") }} plutôt que de s'en voir proposer le téléchargement sur le PC local.

- -
<iframe id="viewer">
- -

Et voici comment modifier la valeur de l'attribut src :

- -
var obj_url = window.URL.createObjectURL(blob);
-var iframe = document.getElementById('viewer');
-iframe.setAttribute('src', obj_url);
-window.URL.revokeObjectURL(obj_url);
- -

Exemple : Utiliser un objet URLs avec d'autres types de fichiers

- -

Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur :

- -
var video = document.getElementById('video');
-var obj_url = window.URL.createObjectURL(blob);
-video.src = obj_url;
-video.play()
-window.URL.revokeObjectURL(obj_url);
- -

Spécifications

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.md b/files/fr/web/api/file/using_files_from_web_applications/index.md new file mode 100644 index 0000000000..8d9eb1119e --- /dev/null +++ b/files/fr/web/api/file/using_files_from_web_applications/index.md @@ -0,0 +1,494 @@ +--- +title: Utiliser des fichiers à partir d'applications web +slug: Web/API/File/Using_files_from_web_applications +tags: + - Files + - HTML5 + - Téléchargement + - ajax upload +translation_of: Web/API/File/Using_files_from_web_applications +--- +

{{APIRef("File API")}}{{draft}}

+ +

Grâce à l'API File ajoutée au DOM avec HTML5, il est maintenant possible depuis une page web de proposer à l'utilisateur de sélectionner des fichiers locaux, puis d'en lire le contenu. Cette sélection est possible en utilisant un élément HTML {{ HTMLElement("input") }} ou par glisser-déposer.

+ +

Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à Using the DOM File API in chrome code pour plus de détails.

+ +

Accéder au(x) fichier(s) sélectionné(s)

+ +

Examinez ce code HTML :

+ +
<input type="file" id="input">
+ +

L'API File permet d'accèder à la {{ domxref("FileList") }} contenant les objets {{ domxref("File") }} qui correspondent aux fichiers selectionnés par l'utilisateur.

+ +

Si l'utilisateur ne sélectionne qu'un seul fichier, on ne prendra en compte que le premier élément de la {{ domxref("FileList") }}.

+ +

Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique :

+ +
var fichierSelectionne = document.getElementById('input').files[0];
+ +

Pour accèder à un fichier sélectionné en utilisant un sélecteur jQuery :

+ +
var fichierSelectionne = $('#input').get(0).files[0];
+
+var fichierSelectionne = $('#input')[0].files[0];
+ +
+

Note : Si vous rencontrez une erreur "files is undefined" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "files".

+
+ +

Accéder au(x) fichier(s) sélectionné(s) sur un événement change

+ +

Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement change :

+ +
<input type="file" id="input" onchange="handleFiles(this.files)">
+ +

La fonction handleFiles() est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur.

+ +

Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut multiple de l'élément input :

+ +
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
+ +

La liste de fichiers passée à la fonction handleFiles() contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur.

+ +

Ajouter dynamiquement un gestionnaire d'événement change

+ +

Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme jQuery, il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement change, comme cela :

+ +
var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  var fileList = this.files; /* Vous pouvez maintenant manipuler la liste de fichiers */
+}
+ +

Notez que dans ce cas la fonction handleFiles() est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre.

+ +

Obtenir des informations sur le(s) fichier(s) sélectionné(s)

+ +

L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut length de la liste de fichiers :

+ +
var numFiles = files.length;
+ +

Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau :

+ +
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
+  var file = files[i];
+  ..
+}
+
+ +

La boucle parcourt l'ensemble des fichiers de la liste.

+ +

L'objet {{ domxref("File") }} expose trois attributs accessibles en lecture seulement et contenant des informations utiles sur le fichier.

+ +
+
name
+
Une chaîne de caractères contenant le nom du fichier uniquement, sans aucune information relative au chemin d'accès.
+
size
+
La taille du fichier exprimée en octets, sous la forme d'un entier de 64 bits.
+
type
+
Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide "" si le type ne peut pas être déterminé.
+
+ +

Exemple : Afficher la taille d'un ou plusieurs fichiers

+ +

L'exemple suivant montre une utilisation possible de la propriété size :

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>File(s) size</title>
+<script>
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // partie de code facultative pour l'approximation des multiples
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // fin de la partie de code facultative
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+</script>
+</head>
+
+<body onload="updateSize();">
+<form name="uploadForm">
+<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
+<p><input type="submit" value="Send file"></p>
+</form>
+</body>
+</html>
+
+ +

Utiliser des éléments input masqués de type file avec l'événement click

+ +

Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément input un style incluant display:none et gérer l'événement click sur votre élément {{ HTMLElement("input") }}.

+ +

Examinez cet extrait de code HTML :

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Select some files</a>
+ +

Le code gérant l'événement click peut être écrit de cette façon :

+ +
var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // empêche la navigation vers "#"
+}, false);
+
+ +

Vous pouvez bien sûr appliquer le style de votre choix au nouveau bouton d'ouverture du sélecteur de fichiers.

+ +

Utiliser un élément label pour activer un élément input masqué de type file

+ +

Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode click()).

+ +

Examinez ce morceau de code HTML :

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <label for="fileElem">Select some files</label>
+ +

Il n'y a pas besoin d'ajouter du code JavaScript pour l'appel à fileElem.click(). Vous pouvez dans ce cas aussi appliquer le style de votre choix à l'élément label.

+ +

Sélectionner des fichiers en utilisant drag and drop

+ +

Vous pouvez aussi autoriser l'utilisateur à glisser-déposer (drag and drop) des fichiers dans votre application web.

+ +

La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements drop :

+ +
var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

Dans cet exemple, l'élément portant l'ID dropbox devient notre zone de dépôt en y ajoutant les gestionnaires d'écoute des événements {{event('dragenter')}}, {{event('dragover')}}, et {{event('drop')}}.

+ +

Nous n'avons pas vraiment besoin dans notre cas de gérer les événements dragenter et dragover. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut :

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

La vraie magie est dans la fonction drop() :

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+ +

Nous récupérons ici le champ dataTransfer de l'événement puis nous en extrayons la liste des fichiers que nous passons à handleFiles(). À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément input ou le glisser-déposer.

+ +

Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur

+ +

Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément input ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction handleFiles() montrée ci-dessous :

+ +
function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+    var imageType = /^image\//;
+
+    if (!imageType.test(file.type)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // En admettant que "preview" est l'élément div qui contiendra le contenu affiché.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "image/*"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image [de l'élément img, NDT], même si cela n'est pas nécessaire ici.

+ +

La classe CSS obj est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut file spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document.

+ +

Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément img. Après avoir créé le nouvel objet FileReader, nous définissons sa fonction onload pouis nous appelons readAsDataURL() pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en data : c'est l'URL transmise à la fonction de rappel onload. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut src de l'élement img, faisant ainsi apparaître l'image dans la miniature à l'écran.

+ +

Utiliser un objet URLs

+ +

Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur.

+ +

Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML :

+ +
var objectURL = window.URL.createObjectURL(fileObj);
+ +

L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }}  si votre page les utilise de manière dynamique :

+ +
window.URL.revokeObjectURL(objectURL);
+ +

Exemple : Utilisation de l'objet URLs pour afficher des images

+ +

Cet exemple utilise des objets URLs pour afficher des vignettes d'image. Il affiche en outre d'autres informations, dont leurs noms et leurs tailles.

+ +

Le code HTML qui présente l'interface ressemble à ceci:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Sélectionnez des fichiers</a>
+<div id="fileList">
+  <p>Aucun fichier sélectionné !</p>
+</div>
+ +

Ce code définit notre élément fichier {{ HTMLElement("input") }}, ainsi qu'un lien qui appelle le sélecteur de fichiers (l'élément input étant masqué pour éviter l'affichage de la si peu séduisante interface utilisateur). Vous pouvez vous reporter à la section {{ anch("Using hidden file input elements using the click() method") }} pour des explications détaillées sur cette partie de code ainsi que sur la méthode appelant le sélecteur de fichiers.

+ +

Voici la méthode handleFiles() :

+ +
window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // empêche la navigation vers "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "<p>Aucun fichier sélectionné !</p>";
+  } else {
+    fileList.innerHTML = "";
+    var list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (var i = 0; i < files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+ +

Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est fileList, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures..

+ +

Si l'objet {{ domxref("FileList") }} passé à handleFiles() est null, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci :

+ +
    +
  1. Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée.
    2. +
  2. L'élement de la liste nouvellement créée est ajoutée dans le bloc {{ HTMLElement("div") }} en appelant sa méthode {{ domxref("Node.appendChild()") }}.
    3. +
  3. Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par files : +
      +
    1. Création et ajout à la liste d'un nouvel élément de liste {{ HTMLElement("li") }}.
      2. +
    2. Création d'un nouvel élément image {{ HTMLElement("img") }}.
      3. +
    3. Définition d'un nouvel objet URL représentant le fichier comme source de l'image, en utilisant {{ domxref("window.URL.createObjectURL()") }} pour la création de l'URL du Blob.
      4. +
    4. Définition de la hauteur de l'image à 60 pixels.
      5. +
    5. Définition du gestionnaire pour l'événement load de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut img.src.
      6. +
    6. Ajout du nouvel élément à la liste.
      7. +
    +
    4. +
+ +

Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur

+ +

Vous pourriez en outre vouloir autoriser l'utilisateur à télécharger sur un serveur (upload) un ou plusieurs fichiers sélectionnés (tels que les images sélectionnées en suivant l'exemple précedent). Cette opération peut être très facilement effectuée de manière asynchrone.

+ +

Créer les tâches de téléchargement

+ +

En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS obj, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut file. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela :

+ +
function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

La ligne 2 crée un tableau, nommé imgs, de tous les éléments de la classe CSS obj dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de FileUpload pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur.

+ +

Manipuler le processus de téléchargement pour un fichier

+ +

La fonction FileUpload accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues.

+ +
function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.sendAsBinary(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+
+ +

La fonction FileUpload() montrée ci-dessus crée un indicateur d'activité (throbber) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données.

+ +

Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données :

+ +
    +
  1. Le processus d'écoute de l'événement progress du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. 
    2. +
  2. Le gestionnaire de l'événement load du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement.
    3. +
  3. La requête de téléchargement de l'image est ouverte par l'appel à la méthode open() du XMLHttpRequest, démarrant la création d'une requête POST.
    4. +
  4. Le type MIME pour le téléchargement est défini en appelant la fonction overrideMimeType() du XMLHttpRequest. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME.
    5. +
  5. L'objet FileReader est utilisé pour la conversion du fichier en chaîne binaire.
    6. +
  6. La fonction send() du  XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé.
    7. +
+ +
+

Note : la méthode non standard sendAsBinary utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard send(Blob data). 

+
+ +

Gérer le processus de téléchargement d'un fichier de manière asynchrone

+ +
<?php
+if (isset($_FILES['myFile'])) {
+    // Exemple:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript">
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i<filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+         }
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+
+ +

Exemple : Utiliser un objet URLs pour afficher un PDF

+ +

Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur.

+ +

Sous Firefox, la constante de configuration pdfjs.disabled doit être définie à false {{non-standard_inline()}} pour afficher les PDF encapsulés dans dans un {{ HTMLElement("iframe") }} plutôt que de s'en voir proposer le téléchargement sur le PC local.

+ +
<iframe id="viewer">
+ +

Et voici comment modifier la valeur de l'attribut src :

+ +
var obj_url = window.URL.createObjectURL(blob);
+var iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);
+ +

Exemple : Utiliser un objet URLs avec d'autres types de fichiers

+ +

Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur :

+ +
var video = document.getElementById('video');
+var obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);
+ +

Spécifications

+ + + +

Voir aussi

+ + 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 deleted file mode 100644 index 8d24b23d1d..0000000000 --- a/files/fr/web/api/file_and_directory_entries_api/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: API fichier système -slug: Web/API/File_and_Directory_Entries_API -translation_of: Web/API/File_and_Directory_Entries_API -original_slug: Web/API/API_fichier_systeme ---- -

{{DefaultAPISidebar("File System API")}}{{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 :

- - - -

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.

- - - -

Compatibilité navigateur

- -

FileSystem

- -

{{Compat("api.FileSystem", 0)}}

- -

Propriété FileSystemSync

- -

{{Compat("api.FileSystemSync", 0)}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/file_and_directory_entries_api/index.md b/files/fr/web/api/file_and_directory_entries_api/index.md new file mode 100644 index 0000000000..8d24b23d1d --- /dev/null +++ b/files/fr/web/api/file_and_directory_entries_api/index.md @@ -0,0 +1,56 @@ +--- +title: API fichier système +slug: Web/API/File_and_Directory_Entries_API +translation_of: Web/API/File_and_Directory_Entries_API +original_slug: Web/API/API_fichier_systeme +--- +

{{DefaultAPISidebar("File System API")}}{{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 :

+ + + +

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.

+ + + +

Compatibilité navigateur

+ +

FileSystem

+ +

{{Compat("api.FileSystem", 0)}}

+ +

Propriété FileSystemSync

+ +

{{Compat("api.FileSystemSync", 0)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filelist/index.html b/files/fr/web/api/filelist/index.html deleted file mode 100644 index 41533953da..0000000000 --- a/files/fr/web/api/filelist/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: FileList -slug: Web/API/FileList -tags: - - API - - File API - - Files -translation_of: Web/API/FileList ---- -
{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}
- -

Un objet FileList est renvoyé par la propriété files d'un élément HTML {{HTMLElement("input")}}. Il permet d'accéder à la liste des fichiers sélectionnés via l'élément <input type="file">. Cet objet peut également être utilisé pour les fichiers glissés-déposés dans du contenu web via l'API Drag & Drop (voir l'objet DataTransfer pour plus de détails).

- -

Utiliser une liste de fichiers

- -

Tous les éléments <input> possèdent un attribut files de type FileList qui permet d'accéder aux éléments de cette liste. Ainsi, si le code HTML utilisé est :

- -
<input id="fileItem" type="file">
-
- -

On pourra utiliser la ligne suivant pour récupérer le premier fichier de la liste sous la forme d'un objet File :

- -
var file = document.getElementById('fileItem').files[0]
- -

Propriétés

- - - - - - - - - - - - - - -
AttributTypeDescription
lengthintegerUne valeur en lecture seule qui indique le nombre de fichier dans la liste.
- -

Méthodes

- -

item()

- -

Cette méthode renvoie un objet File qui représente le fichier à l'indice fourni.

- -
 File item(
-   index
- );
-
- -

Paramètres

- -
-
index
-
Un indice (commençant à partir de zéro) indiquant le fichier qu'on souhaite récupérer de la liste.
-
- -

Valeur de retour

- -

L'objet File qui représente le fichier demandé.

- -

Exemples

- -

Dans cet exemple, on parcourt l'ensemble des fichiers sélectionnés par l'utilisateur via un élément {{HTMLElement("input")}} :

- -
// fileInput est un élément HTML input : <input type="file" id="myfileinput" multiple>
-var fileInput = document.getElementById("myfileinput");
-
-// files est un objet FileList (semblable à NodeList)
-var files = fileInput.files;
-var file;
-
-// on parcourt les fichiers
-for (var i = 0; i < files.length; i++) {
-    // on récupère le i-ème fichier
-    file = files.item(i);
-    // ou encore
-    file = files[i];
-    console.log(file.name);
-}
-
- -

Exemple complet

- -

HTML

- -
<input id="myfiles" multiple type="file">
- -

JavaScript

- -
var recupererFichiers = function() {
-  var fichiersInput = document.querySelector("#myFiles");
-  var fichiers = fichiersInput.files;
-
-  var nbFichiers = fichiers.length;
-  var i = 0;
-  while(i < nbFichiers){
-    var fichier = fichiers[i];
-    console.log(fichier.name);
-    i++;
-  }
-}
-
-// On invoque cette fonction pour chaque modification apportée à l'élément
-// input
-document.querySelector("#myFiles").onchange = recupererFichiers;
- -

Résultat

- -

{{EmbedLiveSample("Exemple_complet")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('File API', '#filelist-section', 'FileList')}}{{Spec2('File API')}}
{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.FileList")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/filelist/index.md b/files/fr/web/api/filelist/index.md new file mode 100644 index 0000000000..41533953da --- /dev/null +++ b/files/fr/web/api/filelist/index.md @@ -0,0 +1,148 @@ +--- +title: FileList +slug: Web/API/FileList +tags: + - API + - File API + - Files +translation_of: Web/API/FileList +--- +
{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}
+ +

Un objet FileList est renvoyé par la propriété files d'un élément HTML {{HTMLElement("input")}}. Il permet d'accéder à la liste des fichiers sélectionnés via l'élément <input type="file">. Cet objet peut également être utilisé pour les fichiers glissés-déposés dans du contenu web via l'API Drag & Drop (voir l'objet DataTransfer pour plus de détails).

+ +

Utiliser une liste de fichiers

+ +

Tous les éléments <input> possèdent un attribut files de type FileList qui permet d'accéder aux éléments de cette liste. Ainsi, si le code HTML utilisé est :

+ +
<input id="fileItem" type="file">
+
+ +

On pourra utiliser la ligne suivant pour récupérer le premier fichier de la liste sous la forme d'un objet File :

+ +
var file = document.getElementById('fileItem').files[0]
+ +

Propriétés

+ + + + + + + + + + + + + + +
AttributTypeDescription
lengthintegerUne valeur en lecture seule qui indique le nombre de fichier dans la liste.
+ +

Méthodes

+ +

item()

+ +

Cette méthode renvoie un objet File qui représente le fichier à l'indice fourni.

+ +
 File item(
+   index
+ );
+
+ +

Paramètres

+ +
+
index
+
Un indice (commençant à partir de zéro) indiquant le fichier qu'on souhaite récupérer de la liste.
+
+ +

Valeur de retour

+ +

L'objet File qui représente le fichier demandé.

+ +

Exemples

+ +

Dans cet exemple, on parcourt l'ensemble des fichiers sélectionnés par l'utilisateur via un élément {{HTMLElement("input")}} :

+ +
// fileInput est un élément HTML input : <input type="file" id="myfileinput" multiple>
+var fileInput = document.getElementById("myfileinput");
+
+// files est un objet FileList (semblable à NodeList)
+var files = fileInput.files;
+var file;
+
+// on parcourt les fichiers
+for (var i = 0; i < files.length; i++) {
+    // on récupère le i-ème fichier
+    file = files.item(i);
+    // ou encore
+    file = files[i];
+    console.log(file.name);
+}
+
+ +

Exemple complet

+ +

HTML

+ +
<input id="myfiles" multiple type="file">
+ +

JavaScript

+ +
var recupererFichiers = function() {
+  var fichiersInput = document.querySelector("#myFiles");
+  var fichiers = fichiersInput.files;
+
+  var nbFichiers = fichiers.length;
+  var i = 0;
+  while(i < nbFichiers){
+    var fichier = fichiers[i];
+    console.log(fichier.name);
+    i++;
+  }
+}
+
+// On invoque cette fonction pour chaque modification apportée à l'élément
+// input
+document.querySelector("#myFiles").onchange = recupererFichiers;
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple_complet")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('File API', '#filelist-section', 'FileList')}}{{Spec2('File API')}}
{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.FileList")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filereader/filereader/index.html b/files/fr/web/api/filereader/filereader/index.html deleted file mode 100644 index 53c3cedb1e..0000000000 --- a/files/fr/web/api/filereader/filereader/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: FileReader() -slug: Web/API/FileReader/FileReader -tags: - - API - - Constructeur - - FileReader - - Reference -translation_of: Web/API/FileReader/FileReader ---- -

FileReader()  est un constructeur qui permet de créer un nouvel objet FileReader.

- -

Pour plus de details à propos de FileReader, visiter Using files from web applications.

- -

Syntaxe

- -
var reader = new FileReader();
- -

Paramèteres

- -

Aucun.

- -

Exemple

- -

L'extrait de code ci-dessous montre la création d'un objet FileReader en utilisant le constructeur FileReader()  ainsi qu'une utilisation subséquente de cet objet:

- -
function printFile(file) {
-  var reader = new FileReader();
-  reader.onload = function(evt) {
-    console.log(evt.target.result);
-  };
-  reader.readAsText(file);
-}
-
- -

Caractéristiques

- - - - - - - - - - - - - - - - -
CaractéristiqueStatusCommentaire
{{SpecName('File API')}}{{Spec2('File API')}}Définition Initiale
- -

Voir aussi

- - diff --git a/files/fr/web/api/filereader/filereader/index.md b/files/fr/web/api/filereader/filereader/index.md new file mode 100644 index 0000000000..53c3cedb1e --- /dev/null +++ b/files/fr/web/api/filereader/filereader/index.md @@ -0,0 +1,59 @@ +--- +title: FileReader() +slug: Web/API/FileReader/FileReader +tags: + - API + - Constructeur + - FileReader + - Reference +translation_of: Web/API/FileReader/FileReader +--- +

FileReader()  est un constructeur qui permet de créer un nouvel objet FileReader.

+ +

Pour plus de details à propos de FileReader, visiter Using files from web applications.

+ +

Syntaxe

+ +
var reader = new FileReader();
+ +

Paramèteres

+ +

Aucun.

+ +

Exemple

+ +

L'extrait de code ci-dessous montre la création d'un objet FileReader en utilisant le constructeur FileReader()  ainsi qu'une utilisation subséquente de cet objet:

+ +
function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+
+ +

Caractéristiques

+ + + + + + + + + + + + + + + + +
CaractéristiqueStatusCommentaire
{{SpecName('File API')}}{{Spec2('File API')}}Définition Initiale
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filereader/index.html b/files/fr/web/api/filereader/index.html deleted file mode 100644 index 913886ed27..0000000000 --- a/files/fr/web/api/filereader/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: FileReader -slug: Web/API/FileReader -tags: - - API - - File - - Interface - - Référence(2) -translation_of: Web/API/FileReader ---- -
{{APIRef("File API")}}
- -

L'objet FileReader permet à des applications web de lire le contenu de fichiers (ou de tampons de mémoire brute) de façon asynchrone. On peut ainsi lire le contenu des objets {{domxref("File")}} ou {{domxref("Blob")}} (qui représentent respectivement un fichier ou des données).

- -

Les objets qui sont des fichiers peuvent être obtenus à partir d'un objet {{domxref("FileList")}}, renvoyé lorsque l'utilisateur sélectionne des fichiers grâce à un élément {{HTMLElement("input")}}, via un glisser-déposer avec un objet DataTransfer ou grâce à l'API mozGetAsFile() API de {{domxref("HTMLCanvasElement")}}.

- -

{{AvailableInWorkers}}

- -

Constructeur

- -
-
{{domxref("FileReader.FileReader", "FileReader()")}}
-
Ce constructeur renvoie un nouvel objet FileReader.
-
- -

Pour plus d'informations et d'exemples, consulter utiliser des fichiers depuis des applications web.

- -

Propriétés

- -
-
{{domxref("FileReader.error")}} {{readonlyinline}}
-
Un objet {{domxref("DOMError")}} qui représente l'erreur qui s'est produite lors de la lecture du fichier.
-
{{domxref("FileReader.readyState")}} {{readonlyinline}}
-
Un nombre qui indique l'état du FileReader. Cette valeur est l'une des suivantes : - - - - - - - - - - - - - - - - - - -
EMPTY0Aucune donnée n'a encore été chargée.
LOADING1Des données sont en cours de chargement.
DONE2La demande de lecture est complètement terminée.
-
-
{{domxref("FileReader.result")}} {{readonlyinline}}
-
Le contenu du fichier. Cette propriété est uniquement valide lorsque l'opération de lecture est terminée et le format des données dépend de la méthode utilisée pour l'opération de lecture.
-
- -

Gestionnaire d'évènements

- -
-
{{domxref("FileReader.onabort")}}
-
Un gestionnaire pour l'évènement {{event("abort")}}. Cet évènement est déclenché à chaque fois que l'opération de lecture est interrompue.
-
{{domxref("FileReader.onerror")}}
-
Un gestionnaire pour l'évènement {{event("error")}}. Cet évènement est déclenché à chaque fois qu'il y a une erreur pendant l'opération de lecture.
-
{{domxref("FileReader.onload")}}
-
Un gestionnaire pour l'évènement {{event("load")}}. Cet évènement est déclenché à chaque fois qu'une opération de lecture est menée à bien.
-
{{domxref("FileReader.onloadstart")}}
-
Un gestionnaire pour l'évènement {{event("loadstart")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture commence.
-
{{domxref("FileReader.onloadend")}}
-
Un gestionnaire pour l'évènement {{event("loadend")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture est terminée (que ce soit un succès ou un échec).
-
{{domxref("FileReader.onprogress")}}
-
Un gestionnaire pour l'évènement {{event("progress")}}. Cet évènement est déclenché lorsque la lecture du {{domxref("Blob")}} est en cours.
-
- -
-

Note : FileReader hérite de l'interface {{domxref("EventTarget")}} et tout ces évènements peuvent donc être « écoutés » grâce à la méthode {{domxref("EventTarget.addEventListener()","addEventListener")}}.

-
- -

Méthodes

- -
-
{{domxref("FileReader.abort()")}}
-
Cette méthode interrompt l'opération de lecture. Après avoir renvoyé une valeur, l'état readyState aura la valeur DONE.
-
{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}
-
Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut result contient un objet {{domxref("ArrayBuffer")}} représentant les données du fichier.
-
{{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}
-
Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut result contient les données binaires brutes sous la forme d'une chaîne de caractères.
-
{{domxref("FileReader.readAsDataURL()")}}
-
Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut result contient une URL de données qui représente les données du fichier.
-
{{domxref("FileReader.readAsText()")}}
-
Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois la lecture terminée, l'attribut result contient les données du fichier sous la forme d'une chaîne de caractères.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("File API", "#dfn-filereader", "FileReader")}}{{Spec2("File API")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.FileReader")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/filereader/index.md b/files/fr/web/api/filereader/index.md new file mode 100644 index 0000000000..913886ed27 --- /dev/null +++ b/files/fr/web/api/filereader/index.md @@ -0,0 +1,122 @@ +--- +title: FileReader +slug: Web/API/FileReader +tags: + - API + - File + - Interface + - Référence(2) +translation_of: Web/API/FileReader +--- +
{{APIRef("File API")}}
+ +

L'objet FileReader permet à des applications web de lire le contenu de fichiers (ou de tampons de mémoire brute) de façon asynchrone. On peut ainsi lire le contenu des objets {{domxref("File")}} ou {{domxref("Blob")}} (qui représentent respectivement un fichier ou des données).

+ +

Les objets qui sont des fichiers peuvent être obtenus à partir d'un objet {{domxref("FileList")}}, renvoyé lorsque l'utilisateur sélectionne des fichiers grâce à un élément {{HTMLElement("input")}}, via un glisser-déposer avec un objet DataTransfer ou grâce à l'API mozGetAsFile() API de {{domxref("HTMLCanvasElement")}}.

+ +

{{AvailableInWorkers}}

+ +

Constructeur

+ +
+
{{domxref("FileReader.FileReader", "FileReader()")}}
+
Ce constructeur renvoie un nouvel objet FileReader.
+
+ +

Pour plus d'informations et d'exemples, consulter utiliser des fichiers depuis des applications web.

+ +

Propriétés

+ +
+
{{domxref("FileReader.error")}} {{readonlyinline}}
+
Un objet {{domxref("DOMError")}} qui représente l'erreur qui s'est produite lors de la lecture du fichier.
+
{{domxref("FileReader.readyState")}} {{readonlyinline}}
+
Un nombre qui indique l'état du FileReader. Cette valeur est l'une des suivantes : + + + + + + + + + + + + + + + + + + +
EMPTY0Aucune donnée n'a encore été chargée.
LOADING1Des données sont en cours de chargement.
DONE2La demande de lecture est complètement terminée.
+
+
{{domxref("FileReader.result")}} {{readonlyinline}}
+
Le contenu du fichier. Cette propriété est uniquement valide lorsque l'opération de lecture est terminée et le format des données dépend de la méthode utilisée pour l'opération de lecture.
+
+ +

Gestionnaire d'évènements

+ +
+
{{domxref("FileReader.onabort")}}
+
Un gestionnaire pour l'évènement {{event("abort")}}. Cet évènement est déclenché à chaque fois que l'opération de lecture est interrompue.
+
{{domxref("FileReader.onerror")}}
+
Un gestionnaire pour l'évènement {{event("error")}}. Cet évènement est déclenché à chaque fois qu'il y a une erreur pendant l'opération de lecture.
+
{{domxref("FileReader.onload")}}
+
Un gestionnaire pour l'évènement {{event("load")}}. Cet évènement est déclenché à chaque fois qu'une opération de lecture est menée à bien.
+
{{domxref("FileReader.onloadstart")}}
+
Un gestionnaire pour l'évènement {{event("loadstart")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture commence.
+
{{domxref("FileReader.onloadend")}}
+
Un gestionnaire pour l'évènement {{event("loadend")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture est terminée (que ce soit un succès ou un échec).
+
{{domxref("FileReader.onprogress")}}
+
Un gestionnaire pour l'évènement {{event("progress")}}. Cet évènement est déclenché lorsque la lecture du {{domxref("Blob")}} est en cours.
+
+ +
+

Note : FileReader hérite de l'interface {{domxref("EventTarget")}} et tout ces évènements peuvent donc être « écoutés » grâce à la méthode {{domxref("EventTarget.addEventListener()","addEventListener")}}.

+
+ +

Méthodes

+ +
+
{{domxref("FileReader.abort()")}}
+
Cette méthode interrompt l'opération de lecture. Après avoir renvoyé une valeur, l'état readyState aura la valeur DONE.
+
{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}
+
Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut result contient un objet {{domxref("ArrayBuffer")}} représentant les données du fichier.
+
{{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}
+
Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut result contient les données binaires brutes sous la forme d'une chaîne de caractères.
+
{{domxref("FileReader.readAsDataURL()")}}
+
Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut result contient une URL de données qui représente les données du fichier.
+
{{domxref("FileReader.readAsText()")}}
+
Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois la lecture terminée, l'attribut result contient les données du fichier sous la forme d'une chaîne de caractères.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("File API", "#dfn-filereader", "FileReader")}}{{Spec2("File API")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.FileReader")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filereader/readasarraybuffer/index.html b/files/fr/web/api/filereader/readasarraybuffer/index.html deleted file mode 100644 index cba515b488..0000000000 --- a/files/fr/web/api/filereader/readasarraybuffer/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: FileReader.readAsArrayBuffer() -slug: Web/API/FileReader/readAsArrayBuffer -tags: - - API - - DOM - - Fichier - - Méthodes -translation_of: Web/API/FileReader/readAsArrayBuffer ---- -

{{APIRef("File API")}}

- -

La méthode readAsArrayBuffer() de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (fichier). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur "DONE" (terminé) à savoir 2, et l'événement {{event("loadend")}} est levé. L'attribut {{domxref("FileReader.result","résultat")}} contient alors les données lues sous la forme d'un objet {{domxref("ArrayBuffer")}}.

- -
-

Note : La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.

-
- -

Syntaxe

- -
instanceOfFileReader.readAsArrayBuffer(blob);
- -

Paramètres

- -
-
blob
-
Le {{domxref("Blob")}} ou le {{domxref("File")}} (fichier) devant être lu.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}{{Spec2("File API")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FileReader.readAsArrayBuffer")}}.

- -

Voir aussi

- - diff --git a/files/fr/web/api/filereader/readasarraybuffer/index.md b/files/fr/web/api/filereader/readasarraybuffer/index.md new file mode 100644 index 0000000000..cba515b488 --- /dev/null +++ b/files/fr/web/api/filereader/readasarraybuffer/index.md @@ -0,0 +1,57 @@ +--- +title: FileReader.readAsArrayBuffer() +slug: Web/API/FileReader/readAsArrayBuffer +tags: + - API + - DOM + - Fichier + - Méthodes +translation_of: Web/API/FileReader/readAsArrayBuffer +--- +

{{APIRef("File API")}}

+ +

La méthode readAsArrayBuffer() de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (fichier). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur "DONE" (terminé) à savoir 2, et l'événement {{event("loadend")}} est levé. L'attribut {{domxref("FileReader.result","résultat")}} contient alors les données lues sous la forme d'un objet {{domxref("ArrayBuffer")}}.

+ +
+

Note : La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.

+
+ +

Syntaxe

+ +
instanceOfFileReader.readAsArrayBuffer(blob);
+ +

Paramètres

+ +
+
blob
+
Le {{domxref("Blob")}} ou le {{domxref("File")}} (fichier) devant être lu.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}{{Spec2("File API")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FileReader.readAsArrayBuffer")}}.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filereader/readasbinarystring/index.html b/files/fr/web/api/filereader/readasbinarystring/index.html deleted file mode 100644 index 2155291f2b..0000000000 --- a/files/fr/web/api/filereader/readasbinarystring/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: FileReader.readAsBinaryString() -slug: Web/API/FileReader/readAsBinaryString -translation_of: Web/API/FileReader/readAsBinaryString ---- -
{{APIRef("File API")}}
- -

La méthode readAsArrayBuffer() de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (fichier). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur "DONE" (terminé), et l'événement {{event("loadend")}} est levé.

- -

L'attribut {{domxref("FileReader.result","result")}} contient alors les données binaires brutes lues.

- -

Notez que cette méthode fût enlevée de l'API, mais réintroduite pour des raison de compatibilité ascendante.

- -

L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée.

- -

Syntaxe

- -
instanceOfFileReader.readAsBinaryString(blob);
- -

Paramètres

- -
-
blob
-
Le {{domxref("Blob")}} or {{domxref("File")}} devant être lu.
-
- -

Exemple

- -
var canvas = document.createElement('canvas');
-var height = 200;
-var width  = 200;
-
-canvas.width  = width;
-canvas.height = height;
-
-var ctx = canvas.getContext('2d');
-
-ctx.strokeStyle = '#090';
-ctx.beginPath();
-ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
-ctx.stroke();
-
-canvas.toBlob(function (blob) {
-  var reader = new FileReader();
-
-  reader.onload = function () {
-    console.log(reader.result);
-  }
-
-  reader.readAsBinaryString(blob);
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('File API','#readAsBinaryString','readAsBinaryString')}}{{Spec2('File API')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FileReader.readAsBinaryString")}}

- -

See also

- - diff --git a/files/fr/web/api/filereader/readasbinarystring/index.md b/files/fr/web/api/filereader/readasbinarystring/index.md new file mode 100644 index 0000000000..2155291f2b --- /dev/null +++ b/files/fr/web/api/filereader/readasbinarystring/index.md @@ -0,0 +1,82 @@ +--- +title: FileReader.readAsBinaryString() +slug: Web/API/FileReader/readAsBinaryString +translation_of: Web/API/FileReader/readAsBinaryString +--- +
{{APIRef("File API")}}
+ +

La méthode readAsArrayBuffer() de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (fichier). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur "DONE" (terminé), et l'événement {{event("loadend")}} est levé.

+ +

L'attribut {{domxref("FileReader.result","result")}} contient alors les données binaires brutes lues.

+ +

Notez que cette méthode fût enlevée de l'API, mais réintroduite pour des raison de compatibilité ascendante.

+ +

L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée.

+ +

Syntaxe

+ +
instanceOfFileReader.readAsBinaryString(blob);
+ +

Paramètres

+ +
+
blob
+
Le {{domxref("Blob")}} or {{domxref("File")}} devant être lu.
+
+ +

Exemple

+ +
var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onload = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API','#readAsBinaryString','readAsBinaryString')}}{{Spec2('File API')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FileReader.readAsBinaryString")}}

+ +

See also

+ + diff --git a/files/fr/web/api/filereader/readasdataurl/index.html b/files/fr/web/api/filereader/readasdataurl/index.html deleted file mode 100644 index 04dbbd93f1..0000000000 --- a/files/fr/web/api/filereader/readasdataurl/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: FileReader.readAsDataURL() -slug: Web/API/FileReader/readAsDataURL -tags: - - API - - API File - - Fichiers - - Méthode - - Reference -translation_of: Web/API/FileReader/readAsDataURL ---- -
{{APIRef("API File")}}
- -

La méthode readAsDataURL permet de lire le contenu de l’objet  {{domxref("Blob")}} ou {{domxref("File")}} spécifié. À la fin de l’opération de lecture, la propriété {{domxref("FileReader.readyState","readyState")}} renvoie l’état DONE, et l’évènement {{event("loadend")}} se déclenche. À ce moment-là, l’attribut {{domxref("FileReader.result","result")}} contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64.

- -

Syntaxe

- -
instanceOfFileReader.readAsDataURL(blob);
- -

Paramètres

- -
-
blob
-
L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture.
-
- -

Exemple

- -

HTML

- -
<input type="file" onchange="previewFile()"><br>
-<img src="" height="200" alt="Aperçu de l’image...">
- -

JavaScript

- -
function previewFile() {
-  var preview = document.querySelector('img');
-  var file    = document.querySelector('input[type=file]').files[0];
-  var reader  = new FileReader();
-
-  reader.addEventListener("load", function () {
-    preview.src = reader.result;
-  }, false);
-
-  if (file) {
-    reader.readAsDataURL(file);
-  }
-}
- -

Résultat en direct

- -

{{EmbedLiveSample("Example", "100%", 240)}}

- -

 

- -

Exemple de lecture de plusieurs fichiers

- -

HTML

- -
<input id="browse" type="file" onchange="previewFiles()" multiple>
-<div id="preview"></div>
- -

JavaScript

- -
function previewFiles() {
-
-  var preview = document.querySelector('#preview');
-  var files   = document.querySelector('input[type=file]').files;
-
-  function readAndPreview(file) {
-
-    // Veillez à ce que `file.name` corresponde à nos critères d’extension
-    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
-      var reader = new FileReader();
-
-      reader.addEventListener("load", function () {
-        var image = new Image();
-        image.height = 100;
-        image.title = file.name;
-        image.src = this.result;
-        preview.appendChild( image );
-      }, false);
-
-      reader.readAsDataURL(file);
-    }
-
-  }
-
-  if (files) {
-    [].forEach.call(files, readAndPreview);
-  }
-
-}
-
- -
-

Note : Le constructeur FileReader() n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre solution d’aperçu d’image multinavigateur. Examinez également cette alternative plus puissante.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName("API File", "#FileReader-interface", "FileReader")}}{{Spec2("API File")}}Définition initiale
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.FileReader.readAsDataURL")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/filereader/readasdataurl/index.md b/files/fr/web/api/filereader/readasdataurl/index.md new file mode 100644 index 0000000000..04dbbd93f1 --- /dev/null +++ b/files/fr/web/api/filereader/readasdataurl/index.md @@ -0,0 +1,125 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +tags: + - API + - API File + - Fichiers + - Méthode + - Reference +translation_of: Web/API/FileReader/readAsDataURL +--- +
{{APIRef("API File")}}
+ +

La méthode readAsDataURL permet de lire le contenu de l’objet  {{domxref("Blob")}} ou {{domxref("File")}} spécifié. À la fin de l’opération de lecture, la propriété {{domxref("FileReader.readyState","readyState")}} renvoie l’état DONE, et l’évènement {{event("loadend")}} se déclenche. À ce moment-là, l’attribut {{domxref("FileReader.result","result")}} contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64.

+ +

Syntaxe

+ +
instanceOfFileReader.readAsDataURL(blob);
+ +

Paramètres

+ +
+
blob
+
L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture.
+
+ +

Exemple

+ +

HTML

+ +
<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="Aperçu de l’image...">
+ +

JavaScript

+ +
function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.addEventListener("load", function () {
+    preview.src = reader.result;
+  }, false);
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}
+ +

Résultat en direct

+ +

{{EmbedLiveSample("Example", "100%", 240)}}

+ +

 

+ +

Exemple de lecture de plusieurs fichiers

+ +

HTML

+ +
<input id="browse" type="file" onchange="previewFiles()" multiple>
+<div id="preview"></div>
+ +

JavaScript

+ +
function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // Veillez à ce que `file.name` corresponde à nos critères d’extension
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}
+
+ +
+

Note : Le constructeur FileReader() n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre solution d’aperçu d’image multinavigateur. Examinez également cette alternative plus puissante.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName("API File", "#FileReader-interface", "FileReader")}}{{Spec2("API File")}}Définition initiale
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.FileReader.readAsDataURL")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filereader/readastext/index.html b/files/fr/web/api/filereader/readastext/index.html deleted file mode 100644 index cceb86eff2..0000000000 --- a/files/fr/web/api/filereader/readastext/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: FileReader.readAsText() -slug: Web/API/FileReader/readAsText -tags: - - API - - File API - - Files - - Method - - Reference -translation_of: Web/API/FileReader/readAsText ---- -
{{APIRef("File API")}}
- -

La méthode readAsText est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à DONE, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères.

- -

Syntaxe

- -
instanceOfFileReader.readAsText(blob[, encoding]);
- -

Parameters

- -
-
blob
-
Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu.
-
encoding {{optional_inline}}
-
Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié.
-
- -

Exemples

- -
var selectedFile = document.getElementById('input').files[0];
-var content = document.getElementById('content');
-var reader = new FileReader();
-reader.onload = function(event) { content.innerHTML = reader.result; };
-reader.readAsText(selectedFile);
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationÉtatCommentaires
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Définition initale
- -

Compatibilité des navigateurs

- -

{{Compat("api.FileReader.readAsText")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/filereader/readastext/index.md b/files/fr/web/api/filereader/readastext/index.md new file mode 100644 index 0000000000..cceb86eff2 --- /dev/null +++ b/files/fr/web/api/filereader/readastext/index.md @@ -0,0 +1,62 @@ +--- +title: FileReader.readAsText() +slug: Web/API/FileReader/readAsText +tags: + - API + - File API + - Files + - Method + - Reference +translation_of: Web/API/FileReader/readAsText +--- +
{{APIRef("File API")}}
+ +

La méthode readAsText est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à DONE, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères.

+ +

Syntaxe

+ +
instanceOfFileReader.readAsText(blob[, encoding]);
+ +

Parameters

+ +
+
blob
+
Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu.
+
encoding {{optional_inline}}
+
Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié.
+
+ +

Exemples

+ +
var selectedFile = document.getElementById('input').files[0];
+var content = document.getElementById('content');
+var reader = new FileReader();
+reader.onload = function(event) { content.innerHTML = reader.result; };
+reader.readAsText(selectedFile);
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationÉtatCommentaires
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Définition initale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.FileReader.readAsText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filerequest/index.html b/files/fr/web/api/filerequest/index.html deleted file mode 100644 index b3a223f334..0000000000 --- a/files/fr/web/api/filerequest/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: FileRequest -slug: Web/API/FileRequest -tags: - - API - - DOM - - Fichier - - Interface -translation_of: Web/API/FileRequest ---- -

{{APIRef("File System API")}} {{non-standard_header}}

- -

Résumé

- -

L'interface FileRequest étend l'interface {{domxref("DOMRequest")}} pour fournir des propriétés supplémentaires nécessaires aux objets {{domxref("LockedFile")}}.

- -

Propriétés

- -
-
{{domxref("FileRequest.lockedFile")}} {{readonlyinline}}
-
L'objet {{domxref("LockedFile")}} à partir duquel la demande a été lancée.
-
{{domxref("FileRequest.onprogress")}}
-
Un gestionnaire de rappel appelé à plusieurs reprises alors que l'opération représentée par la FileRequest est en cours.
-
- -

L'interface FileRequest hérite également de l'interface {{domxref("DOMRequest")}}.

- -

Méthodes

- -

Aucune.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('FileSystem')}}{{Spec2('FileSystem')}}Brouillon proposé.
- -

Voir aussi

- - diff --git a/files/fr/web/api/filerequest/index.md b/files/fr/web/api/filerequest/index.md new file mode 100644 index 0000000000..b3a223f334 --- /dev/null +++ b/files/fr/web/api/filerequest/index.md @@ -0,0 +1,54 @@ +--- +title: FileRequest +slug: Web/API/FileRequest +tags: + - API + - DOM + - Fichier + - Interface +translation_of: Web/API/FileRequest +--- +

{{APIRef("File System API")}} {{non-standard_header}}

+ +

Résumé

+ +

L'interface FileRequest étend l'interface {{domxref("DOMRequest")}} pour fournir des propriétés supplémentaires nécessaires aux objets {{domxref("LockedFile")}}.

+ +

Propriétés

+ +
+
{{domxref("FileRequest.lockedFile")}} {{readonlyinline}}
+
L'objet {{domxref("LockedFile")}} à partir duquel la demande a été lancée.
+
{{domxref("FileRequest.onprogress")}}
+
Un gestionnaire de rappel appelé à plusieurs reprises alors que l'opération représentée par la FileRequest est en cours.
+
+ +

L'interface FileRequest hérite également de l'interface {{domxref("DOMRequest")}}.

+ +

Méthodes

+ +

Aucune.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('FileSystem')}}{{Spec2('FileSystem')}}Brouillon proposé.
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filerequest/lockedfile/index.html b/files/fr/web/api/filerequest/lockedfile/index.html deleted file mode 100644 index 18a3138b9c..0000000000 --- a/files/fr/web/api/filerequest/lockedfile/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: FileRequest.lockedFile -slug: Web/API/FileRequest/lockedFile -tags: - - API - - DOM - - Fichier - - Propriétés -translation_of: Web/API/FileRequest/lockedFile ---- -

{{APIRef("File System API")}} {{non-standard_header}}

- -

Résumé

- -

La propriété lockedFile représente l'objet {{domxref("LockedFile")}} à partir duquel la requête a été lancée.

- -

Syntaxe

- -
var lockedFile = instanceOfFileRequest.lockedFile
-
- -

Valeur

- -

Un objet {{domxref("LockedFile")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('FileSystem')}}{{Spec2('FileSystem')}}Brouillon proposé.
- -

Voir aussi

- - diff --git a/files/fr/web/api/filerequest/lockedfile/index.md b/files/fr/web/api/filerequest/lockedfile/index.md new file mode 100644 index 0000000000..18a3138b9c --- /dev/null +++ b/files/fr/web/api/filerequest/lockedfile/index.md @@ -0,0 +1,48 @@ +--- +title: FileRequest.lockedFile +slug: Web/API/FileRequest/lockedFile +tags: + - API + - DOM + - Fichier + - Propriétés +translation_of: Web/API/FileRequest/lockedFile +--- +

{{APIRef("File System API")}} {{non-standard_header}}

+ +

Résumé

+ +

La propriété lockedFile représente l'objet {{domxref("LockedFile")}} à partir duquel la requête a été lancée.

+ +

Syntaxe

+ +
var lockedFile = instanceOfFileRequest.lockedFile
+
+ +

Valeur

+ +

Un objet {{domxref("LockedFile")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('FileSystem')}}{{Spec2('FileSystem')}}Brouillon proposé.
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/filerequest/onprogress/index.html b/files/fr/web/api/filerequest/onprogress/index.html deleted file mode 100644 index 5567917dc9..0000000000 --- a/files/fr/web/api/filerequest/onprogress/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: FileRequest.onprogress -slug: Web/API/FileRequest/onprogress -tags: - - API - - DOM - - Fichier - - Propriétés -translation_of: Web/API/FileRequest/onprogress ---- -

{{APIRef("File System API")}} {{non-standard_header}}

- -

Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet  {{ domxref("FileRequest") }} est en cours.

- -

Syntaxe

- -
instanceOfFileRequest.onprogress = function;
-
- -

Où instanceOfFileRequest est un objet {{ domxref("FileRequest") }} et function est la fonction JavaScript à exécuter.

- -

Chaque fois que la fonction callback est appelée, elle obtient un objet en tant que premier paramètre. Ces objets contiennent deux propriétés :

- -
-
loaded
-
Un nombre représentant la quantité actuelle d'octets traités par l'opération.
-
total
-
Un nombre représentant le nombre total d'octets qui seront traités par l'opération.
-
- -

Exemple

- -
// Supposons 'request' qui est un objet FileRequest
-
-request.onprogress = function (status) {
-  var progress = document.querySelector('progress');
-
-  progress.value = status.loaded;
-  progress.max   = status.total;
-}
-
- -

Spécification

- -

Ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/api/filerequest/onprogress/index.md b/files/fr/web/api/filerequest/onprogress/index.md new file mode 100644 index 0000000000..5567917dc9 --- /dev/null +++ b/files/fr/web/api/filerequest/onprogress/index.md @@ -0,0 +1,52 @@ +--- +title: FileRequest.onprogress +slug: Web/API/FileRequest/onprogress +tags: + - API + - DOM + - Fichier + - Propriétés +translation_of: Web/API/FileRequest/onprogress +--- +

{{APIRef("File System API")}} {{non-standard_header}}

+ +

Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet  {{ domxref("FileRequest") }} est en cours.

+ +

Syntaxe

+ +
instanceOfFileRequest.onprogress = function;
+
+ +

Où instanceOfFileRequest est un objet {{ domxref("FileRequest") }} et function est la fonction JavaScript à exécuter.

+ +

Chaque fois que la fonction callback est appelée, elle obtient un objet en tant que premier paramètre. Ces objets contiennent deux propriétés :

+ +
+
loaded
+
Un nombre représentant la quantité actuelle d'octets traités par l'opération.
+
total
+
Un nombre représentant le nombre total d'octets qui seront traités par l'opération.
+
+ +

Exemple

+ +
// Supposons 'request' qui est un objet FileRequest
+
+request.onprogress = function (status) {
+  var progress = document.querySelector('progress');
+
+  progress.value = status.loaded;
+  progress.max   = status.total;
+}
+
+ +

Spécification

+ +

Ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/focusevent/index.html b/files/fr/web/api/focusevent/index.html deleted file mode 100644 index b3ca995846..0000000000 --- a/files/fr/web/api/focusevent/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: FocusEvent -slug: Web/API/FocusEvent -tags: - - API - - DOM - - Evènement - - Focus - - Interface -translation_of: Web/API/FocusEvent ---- -

{{APIRef("DOM Events")}}{{SeeCompatTable}}

- -

L'interface FocusEvent représente les événements liés au focus tels que {{event("focus")}}, {{event("blur")}}, {{event("focusin")}} ou {{event("focusout")}}.

- -

Constructeur

- -
-
{{domxref("FocusEvent.FocusEvent", "FocusEvent()")}}
-
crée un événement FocusEvent avec les paramètres donnés.
-
- -

Propriétés

- -

Hértite des propriétés de son parent domxref("UIEvent")}} et indirectement de {{domxref("Event")}}.

- -
-
{{domxref("FocusEvent.relatedTarget")}} {{readonlyInline}}
-
est un {{domxref("EventTarget")}} représentant une cible secondaire pour cet événement. Car dans certain cas (comme quand vous tabulez dans ou hors de la page), cette propriété peut être définie comme étant nulle pour des raisons de sécurité.
-
- -

Méthodes

- -

Aucune méthode spécifique ; Hérite des propriétés de son parent {{domxref("UIEvent")}} et indirectement de {{domxref("Event")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM3 Events', '#interface-FocusEvent', 'FocusEvent')}}{{Spec2('DOM3 Events')}}Première définition.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FocusEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/focusevent/index.md b/files/fr/web/api/focusevent/index.md new file mode 100644 index 0000000000..b3ca995846 --- /dev/null +++ b/files/fr/web/api/focusevent/index.md @@ -0,0 +1,63 @@ +--- +title: FocusEvent +slug: Web/API/FocusEvent +tags: + - API + - DOM + - Evènement + - Focus + - Interface +translation_of: Web/API/FocusEvent +--- +

{{APIRef("DOM Events")}}{{SeeCompatTable}}

+ +

L'interface FocusEvent représente les événements liés au focus tels que {{event("focus")}}, {{event("blur")}}, {{event("focusin")}} ou {{event("focusout")}}.

+ +

Constructeur

+ +
+
{{domxref("FocusEvent.FocusEvent", "FocusEvent()")}}
+
crée un événement FocusEvent avec les paramètres donnés.
+
+ +

Propriétés

+ +

Hértite des propriétés de son parent domxref("UIEvent")}} et indirectement de {{domxref("Event")}}.

+ +
+
{{domxref("FocusEvent.relatedTarget")}} {{readonlyInline}}
+
est un {{domxref("EventTarget")}} représentant une cible secondaire pour cet événement. Car dans certain cas (comme quand vous tabulez dans ou hors de la page), cette propriété peut être définie comme étant nulle pour des raisons de sécurité.
+
+ +

Méthodes

+ +

Aucune méthode spécifique ; Hérite des propriétés de son parent {{domxref("UIEvent")}} et indirectement de {{domxref("Event")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM3 Events', '#interface-FocusEvent', 'FocusEvent')}}{{Spec2('DOM3 Events')}}Première définition.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FocusEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/force_touch_events/index.html b/files/fr/web/api/force_touch_events/index.html deleted file mode 100644 index f20d66888f..0000000000 --- a/files/fr/web/api/force_touch_events/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Force Touch events -slug: Web/API/Force_Touch_events -tags: - - API - - DOM - - Evènement - - Mobile -translation_of: Web/API/Force_Touch_events ---- -

{{DefaultAPISidebar("Force Touch events")}}

- -

{{Non-standard_header()}}

- -

Force Touch events est une fonctionnalité propriétaire propre à Apple et qui rend possibles (si supporté par le matériel d'entrée) de nouvelles interactions basées sur le fait que l'utilisateur clique ou appuie sur l'écran tactile ou sur le trackpad.

- -

Évènements

- -
-
{{event("webkitmouseforcewillbegin")}} {{non-standard_inline}}
-
Cet évènement est lancé avant l'évènement {{event("mousedown")}}. Son utilisation principale est de permettre {{domxref("Event.preventDefault()")}}.
-
{{event("webkitmouseforcedown")}} {{non-standard_inline}}
-
Cet évènement est lancé après l'évènement {{event("mousedown")}} dès qu'une pression suffisante a été appliquée pour qu'il puisse être qualifié de "clic de force".
-
{{event("webkitmouseforceup")}} {{non-standard_inline}}
-
Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force".
-
{{event("webkitmouseforcechanged")}} {{non-standard_inline}}
-
Cet évènement est lancé chaque fois que la quantité de pression change. Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}.
-
- -

Propriété des évènements

- -

La propriété suivante est connue pour être disponible sur les objets évènement {{event("webkitmouseforcewillbegin")}}, {{event("mousedown")}}, {{event("webkitmouseforcechanged")}}, {{event("webkitmouseforcedown")}}, {{event("webkitmouseforceup")}}, {{event("mousemove")}} et {{event("mouseup")}}:

- -
-
{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
-
La quantité de pression actuellement appliquée sur le trackpad / écran tactile.
-
- -

Constantes

- -

Ces constantes sont utiles pour déterminer l'intensité relative de la pression indiquée par {{domxref ("MouseEvent.webkitForce")}} :

- -
-
{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
-
Force minimum nécessaire pour un click normal.
-
{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
-
Force minimum nécessaire pour un click de force.
-
- -

Spécifications

- -

Ne fait partie d'aucune spécification. Apple a une description dans la bibilitothèque Mac Developer.

diff --git a/files/fr/web/api/force_touch_events/index.md b/files/fr/web/api/force_touch_events/index.md new file mode 100644 index 0000000000..f20d66888f --- /dev/null +++ b/files/fr/web/api/force_touch_events/index.md @@ -0,0 +1,52 @@ +--- +title: Force Touch events +slug: Web/API/Force_Touch_events +tags: + - API + - DOM + - Evènement + - Mobile +translation_of: Web/API/Force_Touch_events +--- +

{{DefaultAPISidebar("Force Touch events")}}

+ +

{{Non-standard_header()}}

+ +

Force Touch events est une fonctionnalité propriétaire propre à Apple et qui rend possibles (si supporté par le matériel d'entrée) de nouvelles interactions basées sur le fait que l'utilisateur clique ou appuie sur l'écran tactile ou sur le trackpad.

+ +

Évènements

+ +
+
{{event("webkitmouseforcewillbegin")}} {{non-standard_inline}}
+
Cet évènement est lancé avant l'évènement {{event("mousedown")}}. Son utilisation principale est de permettre {{domxref("Event.preventDefault()")}}.
+
{{event("webkitmouseforcedown")}} {{non-standard_inline}}
+
Cet évènement est lancé après l'évènement {{event("mousedown")}} dès qu'une pression suffisante a été appliquée pour qu'il puisse être qualifié de "clic de force".
+
{{event("webkitmouseforceup")}} {{non-standard_inline}}
+
Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force".
+
{{event("webkitmouseforcechanged")}} {{non-standard_inline}}
+
Cet évènement est lancé chaque fois que la quantité de pression change. Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}.
+
+ +

Propriété des évènements

+ +

La propriété suivante est connue pour être disponible sur les objets évènement {{event("webkitmouseforcewillbegin")}}, {{event("mousedown")}}, {{event("webkitmouseforcechanged")}}, {{event("webkitmouseforcedown")}}, {{event("webkitmouseforceup")}}, {{event("mousemove")}} et {{event("mouseup")}}:

+ +
+
{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
+
La quantité de pression actuellement appliquée sur le trackpad / écran tactile.
+
+ +

Constantes

+ +

Ces constantes sont utiles pour déterminer l'intensité relative de la pression indiquée par {{domxref ("MouseEvent.webkitForce")}} :

+ +
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
Force minimum nécessaire pour un click normal.
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
Force minimum nécessaire pour un click de force.
+
+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. Apple a une description dans la bibilitothèque Mac Developer.

diff --git a/files/fr/web/api/formdata/append/index.html b/files/fr/web/api/formdata/append/index.html deleted file mode 100644 index 80ab87cb3f..0000000000 --- a/files/fr/web/api/formdata/append/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: FormData.append() -slug: Web/API/FormData/append -tags: - - API - - Append - - FormData - - Méthode - - Reference - - XHR - - XMLHttpRequest -translation_of: Web/API/FormData/append ---- -

{{APIRef("XMLHttpRequest")}}

- -

La méthode append() de l'interface {{domxref("FormData")}} ajoute une nouvelle valeur à une clé existante dans un objet FormData, ou rajoute cette clé et cette valeur quand elle n'existe pas.

- -

La différence entre {{domxref("FormData.set")}} et append() est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' append() va rajouter celle-ci à la fin de l'ensemble des valeurs existantes.

- -
-

Note : Cette méthode est disponible dans les Web Workers.

-
- -

Syntaxe

- -

Il y a deux versions de cette méthode : avec deux ou trois paramètres

- -
formData.append(name, value);
-formData.append(name, value, filename);
- -

Paramètres

- -
-
name
-
Le nom de la clé dont les données sont contenues dans value.
-
value
-
La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}).
-
filename {{optional_inline}}
-
Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet.
-
- -
-

Note: Si vous spécifiez un  {{domxref("Blob")}} comme donnée rattachée à un objet de type FormData, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur.

-
- -

Retours

- -

Void.

- -

Exemple

- -

La ligne suivante crée un objet FormData vide :

- -
var formData = new FormData(); // Actuellement vide
- -

Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}:

- -
formData.append('username', 'Chris');
-formData.append('userpic', myFileInput.files[0], 'chris.jpg');
- -

Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute [] au nom de la clé):

- -
formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
-formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');
- -

Cette technique permet de simplement gérer l'envoi de plusieurs fichiers avec l'envoi d'une structure facilement itérable.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}{{Spec2('XMLHttpRequest')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FormData.append")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/append/index.md b/files/fr/web/api/formdata/append/index.md new file mode 100644 index 0000000000..80ab87cb3f --- /dev/null +++ b/files/fr/web/api/formdata/append/index.md @@ -0,0 +1,98 @@ +--- +title: FormData.append() +slug: Web/API/FormData/append +tags: + - API + - Append + - FormData + - Méthode + - Reference + - XHR + - XMLHttpRequest +translation_of: Web/API/FormData/append +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La méthode append() de l'interface {{domxref("FormData")}} ajoute une nouvelle valeur à une clé existante dans un objet FormData, ou rajoute cette clé et cette valeur quand elle n'existe pas.

+ +

La différence entre {{domxref("FormData.set")}} et append() est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' append() va rajouter celle-ci à la fin de l'ensemble des valeurs existantes.

+ +
+

Note : Cette méthode est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +

Il y a deux versions de cette méthode : avec deux ou trois paramètres

+ +
formData.append(name, value);
+formData.append(name, value, filename);
+ +

Paramètres

+ +
+
name
+
Le nom de la clé dont les données sont contenues dans value.
+
value
+
La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}).
+
filename {{optional_inline}}
+
Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet.
+
+ +
+

Note: Si vous spécifiez un  {{domxref("Blob")}} comme donnée rattachée à un objet de type FormData, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur.

+
+ +

Retours

+ +

Void.

+ +

Exemple

+ +

La ligne suivante crée un objet FormData vide :

+ +
var formData = new FormData(); // Actuellement vide
+ +

Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Chris');
+formData.append('userpic', myFileInput.files[0], 'chris.jpg');
+ +

Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute [] au nom de la clé):

+ +
formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
+formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');
+ +

Cette technique permet de simplement gérer l'envoi de plusieurs fichiers avec l'envoi d'une structure facilement itérable.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}{{Spec2('XMLHttpRequest')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FormData.append")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/delete/index.html b/files/fr/web/api/formdata/delete/index.html deleted file mode 100644 index 551431a588..0000000000 --- a/files/fr/web/api/formdata/delete/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: FormData.delete() -slug: Web/API/FormData/delete -tags: - - API - - FormData - - Méthode - - Reference - - XHR - - XMLHttpRequest - - delete -translation_of: Web/API/FormData/delete ---- -

{{APIRef("XMLHttpRequest")}}

- -

La méthode delete() de l'interface {{domxref("FormData")}} supprime une clé et sa (ses) valeur(s) d'un objet FormData.

- -
-

Note : Cette méthode est disponible dans les Web Workers.

-
- -

Syntaxe

- -
formData.delete(name);
- -

Paramètres

- -
-
name
-
Le nom de la clé que vous voulez supprimer.
-
- -

Retours

- -

Void.

- -

Exemple

- -

La ligne suivante crée un objet FormData vide et le pré-remplit avec les paires clé/valeur d'un formulaire :

- -
var formData = new FormData(myForm);
- -

Vous pouvez supprimer les clés et leurs valeurs en utilisant delete():

- -
formData.delete('username');
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}{{Spec2('XMLHttpRequest')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FormData.delete")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/delete/index.md b/files/fr/web/api/formdata/delete/index.md new file mode 100644 index 0000000000..551431a588 --- /dev/null +++ b/files/fr/web/api/formdata/delete/index.md @@ -0,0 +1,78 @@ +--- +title: FormData.delete() +slug: Web/API/FormData/delete +tags: + - API + - FormData + - Méthode + - Reference + - XHR + - XMLHttpRequest + - delete +translation_of: Web/API/FormData/delete +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La méthode delete() de l'interface {{domxref("FormData")}} supprime une clé et sa (ses) valeur(s) d'un objet FormData.

+ +
+

Note : Cette méthode est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +
formData.delete(name);
+ +

Paramètres

+ +
+
name
+
Le nom de la clé que vous voulez supprimer.
+
+ +

Retours

+ +

Void.

+ +

Exemple

+ +

La ligne suivante crée un objet FormData vide et le pré-remplit avec les paires clé/valeur d'un formulaire :

+ +
var formData = new FormData(myForm);
+ +

Vous pouvez supprimer les clés et leurs valeurs en utilisant delete():

+ +
formData.delete('username');
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}{{Spec2('XMLHttpRequest')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FormData.delete")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/entries/index.html b/files/fr/web/api/formdata/entries/index.html deleted file mode 100644 index dc940b71b6..0000000000 --- a/files/fr/web/api/formdata/entries/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: FormData.entries() -slug: Web/API/FormData/entries -tags: - - API - - Entries - - FormData - - Méthode - - Reference - - XHR - - XMLHttpRequest -translation_of: Web/API/FormData/entries ---- -

{{APIRef("XMLHttpRequest")}}

- -

La methode FormData.entries() retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet.
- La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}.

- -
-

Note : Cette methode est disponible dans les Web Workers.

-
- -

Syntaxe

- -
formData.entries();
- -

Valeur retournée

- -

Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}.

- -

Exemple

- -
// Creation d'un objet FormData
-var formData = new FormData();
-formData.append('key1', 'value1');
-formData.append('key2', 'value2');
-
-// Affichage des paires clefs/valeurs
-for(var pair of formData.entries()) {
-   console.log(pair[0]+ ', '+ pair[1]);
-}
-
- -

Le resultat est:

- -
key1, value1
-key2, value2
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Définition initiale
- -

Compatibilité navigateurs

- -
- - -

{{Compat("api.FormData.entries")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/entries/index.md b/files/fr/web/api/formdata/entries/index.md new file mode 100644 index 0000000000..dc940b71b6 --- /dev/null +++ b/files/fr/web/api/formdata/entries/index.md @@ -0,0 +1,81 @@ +--- +title: FormData.entries() +slug: Web/API/FormData/entries +tags: + - API + - Entries + - FormData + - Méthode + - Reference + - XHR + - XMLHttpRequest +translation_of: Web/API/FormData/entries +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La methode FormData.entries() retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet.
+ La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}.

+ +
+

Note : Cette methode est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +
formData.entries();
+ +

Valeur retournée

+ +

Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}.

+ +

Exemple

+ +
// Creation d'un objet FormData
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Affichage des paires clefs/valeurs
+for(var pair of formData.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+
+ +

Le resultat est:

+ +
key1, value1
+key2, value2
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Définition initiale
+ +

Compatibilité navigateurs

+ +
+ + +

{{Compat("api.FormData.entries")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/formdata/index.html b/files/fr/web/api/formdata/formdata/index.html deleted file mode 100644 index 3852b6d2be..0000000000 --- a/files/fr/web/api/formdata/formdata/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: FormData() -slug: Web/API/FormData/FormData -tags: - - API - - Constructeur - - FormData - - Reference - - XHR - - XMLHttpRequest -translation_of: Web/API/FormData/FormData ---- -

{{APIRef("XMLHttpRequest")}}

- -

Le constructeur FormData() crée un nouvel objet {{domxref("FormData")}}.

- -
-

Note : Cette fonctionnalité est disponible dans Web Workers.

-
- -

Syntaxe

- -
var formData = new FormData(form)
- -

Paramètres

- -
-
form {{optional_inline}}
-
Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers.
-
- -

Exemples

- -

La ligne suivante crée un objet FormData vide:

- -
var formData = new FormData(); // Formulaire vide à cet instant
- -

Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} :

- -
formData.append('username', 'Chris');
-
- -

Ou vous pouvez spécifier l'argument optionnel form à la création de l'objet FormData pour le pré-remplir avec les valeurs issues du formulaire spécifié :

- -
<form id="myForm" name="myForm">
-  <div>
-    <label for="username">Enter name:</label>
-    <input type="text" id="username" name="username">
-  </div>
-  <div>
-    <label for="useracc">Enter account number:</label>
-    <input type="text" id="useracc" name="useracc">
-  </div>
-  <div>
-    <label for="userfile">Upload file:</label>
-    <input type="file" id="userfile" name="userfile">
-  </div>
-<input type="submit" value="Submit!">
-</form>
-
- -
-

Note : Seuls les champs de formulaires valides sont inclus dans un objet FormData, c'est-à-dire ceux qui portent un nom (attribut name), qui ne sont pas désactivés et qui sont cochés (boutons radio et cases à cocher) ou sélectionnés (une ou plusieurs options dans une sélection).

-
- -
var myForm = document.getElementById('myForm');
-formData = new FormData(myForm);
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}{{Spec2('XMLHttpRequest')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.FormData.FormData")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/formdata/index.md b/files/fr/web/api/formdata/formdata/index.md new file mode 100644 index 0000000000..3852b6d2be --- /dev/null +++ b/files/fr/web/api/formdata/formdata/index.md @@ -0,0 +1,99 @@ +--- +title: FormData() +slug: Web/API/FormData/FormData +tags: + - API + - Constructeur + - FormData + - Reference + - XHR + - XMLHttpRequest +translation_of: Web/API/FormData/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Le constructeur FormData() crée un nouvel objet {{domxref("FormData")}}.

+ +
+

Note : Cette fonctionnalité est disponible dans Web Workers.

+
+ +

Syntaxe

+ +
var formData = new FormData(form)
+ +

Paramètres

+ +
+
form {{optional_inline}}
+
Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers.
+
+ +

Exemples

+ +

La ligne suivante crée un objet FormData vide:

+ +
var formData = new FormData(); // Formulaire vide à cet instant
+ +

Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} :

+ +
formData.append('username', 'Chris');
+
+ +

Ou vous pouvez spécifier l'argument optionnel form à la création de l'objet FormData pour le pré-remplir avec les valeurs issues du formulaire spécifié :

+ +
<form id="myForm" name="myForm">
+  <div>
+    <label for="username">Enter name:</label>
+    <input type="text" id="username" name="username">
+  </div>
+  <div>
+    <label for="useracc">Enter account number:</label>
+    <input type="text" id="useracc" name="useracc">
+  </div>
+  <div>
+    <label for="userfile">Upload file:</label>
+    <input type="file" id="userfile" name="userfile">
+  </div>
+<input type="submit" value="Submit!">
+</form>
+
+ +
+

Note : Seuls les champs de formulaires valides sont inclus dans un objet FormData, c'est-à-dire ceux qui portent un nom (attribut name), qui ne sont pas désactivés et qui sont cochés (boutons radio et cases à cocher) ou sélectionnés (une ou plusieurs options dans une sélection).

+
+ +
var myForm = document.getElementById('myForm');
+formData = new FormData(myForm);
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}{{Spec2('XMLHttpRequest')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.FormData.FormData")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/get/index.html b/files/fr/web/api/formdata/get/index.html deleted file mode 100644 index 5eec93c7e9..0000000000 --- a/files/fr/web/api/formdata/get/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: FormData.get() -slug: Web/API/FormData/get -translation_of: Web/API/FormData/get -browser-compat: api.FormData.get ---- -

{{APIRef("XMLHttpRequest")}}

- -

La méthode get() de l'interface FormData renvoie la première valeur associée à une clé donnée dans un objet FormData. Si vous souhaitez manipuler plusieurs valeurs et les récupérer intégralement, utilisez plutôt la méthode getAll().

- -
-

Note : Cette méthode est disponible dans les Web Workers.

-
- -

Syntaxe

- -
formData.get(name);
- -

Paramètres

- -
-
name
-
Une chaîne de caractères USVString représentant le nom de la clé que vous souhaitez retrouver.
-
- -

Valeur de retour

- -

Un objet FormDataEntryValue contenant la valeur. Si la clé n'existe pas, la méthode renvoie null.

- -

Exemple

- -

La ligne suivante crée un objet FormData vide :

- -
-var formData = new FormData();
-
- -

Si nous ajoutons deux valeurs username en utilisant FormData.append :

- -
-formData.append('username', 'Chris');
-formData.append('username', 'Bob');
-
- -

L'appel suivant à get() renverra uniquement la première valeur username indexée :

- -
-formData.get('username'); // Renvoie "Chris"
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/get/index.md b/files/fr/web/api/formdata/get/index.md new file mode 100644 index 0000000000..5eec93c7e9 --- /dev/null +++ b/files/fr/web/api/formdata/get/index.md @@ -0,0 +1,66 @@ +--- +title: FormData.get() +slug: Web/API/FormData/get +translation_of: Web/API/FormData/get +browser-compat: api.FormData.get +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La méthode get() de l'interface FormData renvoie la première valeur associée à une clé donnée dans un objet FormData. Si vous souhaitez manipuler plusieurs valeurs et les récupérer intégralement, utilisez plutôt la méthode getAll().

+ +
+

Note : Cette méthode est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +
formData.get(name);
+ +

Paramètres

+ +
+
name
+
Une chaîne de caractères USVString représentant le nom de la clé que vous souhaitez retrouver.
+
+ +

Valeur de retour

+ +

Un objet FormDataEntryValue contenant la valeur. Si la clé n'existe pas, la méthode renvoie null.

+ +

Exemple

+ +

La ligne suivante crée un objet FormData vide :

+ +
+var formData = new FormData();
+
+ +

Si nous ajoutons deux valeurs username en utilisant FormData.append :

+ +
+formData.append('username', 'Chris');
+formData.append('username', 'Bob');
+
+ +

L'appel suivant à get() renverra uniquement la première valeur username indexée :

+ +
+formData.get('username'); // Renvoie "Chris"
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/getall/index.html b/files/fr/web/api/formdata/getall/index.html deleted file mode 100644 index 2b1ced7864..0000000000 --- a/files/fr/web/api/formdata/getall/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: FormData.getAll() -slug: Web/API/FormData/getAll -tags: - - API - - FormData - - Méthode - - Reference - - XHR - - XMLHttpRequest - - getAll -translation_of: Web/API/FormData/getAll ---- -

{{APIRef("XMLHttpRequest")}}

- -

La méthode getAll() de l'interface {{domxref("FormData")}} renvoie toutes les valeurs associées à une clé donnée à partir d'un objet FormData.

- -
-

Note : Cette méthode est disponible dans les Web Workers.

-
- -

Syntaxe

- -
formData.getAll(name);
- -

Paramètres

- -
-
name
-
Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez récupérer.
-
- -

Retours

- -

Un tableau de {{domxref("FormDataEntryValue")}} dont la clé correspond à la valeur passée dans le paramètre name. Si la clé n'existe pas, la méthode renvoie une liste vide.

- -

Exemple

- -

La ligne suivante crée un objet FormData vide :

- -
var formData = new FormData();
- -

Si nous ajoutons deux valeurs username en utilisant {{domxref("FormData.append")}} :

- -
formData.append('username', 'Chris');
-formData.append('username', 'Bob');
- -

La fonction getAll() suivante va retourner chaque valeurs de username dans un tableau :

- -
formData.getAll('username'); // Returns ["Chris", "Bob"]
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}{{Spec2('XMLHttpRequest')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FormData.getAll")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/getall/index.md b/files/fr/web/api/formdata/getall/index.md new file mode 100644 index 0000000000..2b1ced7864 --- /dev/null +++ b/files/fr/web/api/formdata/getall/index.md @@ -0,0 +1,82 @@ +--- +title: FormData.getAll() +slug: Web/API/FormData/getAll +tags: + - API + - FormData + - Méthode + - Reference + - XHR + - XMLHttpRequest + - getAll +translation_of: Web/API/FormData/getAll +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La méthode getAll() de l'interface {{domxref("FormData")}} renvoie toutes les valeurs associées à une clé donnée à partir d'un objet FormData.

+ +
+

Note : Cette méthode est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +
formData.getAll(name);
+ +

Paramètres

+ +
+
name
+
Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez récupérer.
+
+ +

Retours

+ +

Un tableau de {{domxref("FormDataEntryValue")}} dont la clé correspond à la valeur passée dans le paramètre name. Si la clé n'existe pas, la méthode renvoie une liste vide.

+ +

Exemple

+ +

La ligne suivante crée un objet FormData vide :

+ +
var formData = new FormData();
+ +

Si nous ajoutons deux valeurs username en utilisant {{domxref("FormData.append")}} :

+ +
formData.append('username', 'Chris');
+formData.append('username', 'Bob');
+ +

La fonction getAll() suivante va retourner chaque valeurs de username dans un tableau :

+ +
formData.getAll('username'); // Returns ["Chris", "Bob"]
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}{{Spec2('XMLHttpRequest')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FormData.getAll")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/has/index.html b/files/fr/web/api/formdata/has/index.html deleted file mode 100644 index 2915f9d65a..0000000000 --- a/files/fr/web/api/formdata/has/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: FormData.has() -slug: Web/API/FormData/has -tags: - - API - - FormData - - Méthode - - Reference - - XHR - - XMLHttpRequest - - has -translation_of: Web/API/FormData/has ---- -

{{APIRef("XMLHttpRequest")}}

- -

La méthode has() de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet FormData contient une certaine clé.

- -
-

Note : Cette méthode est disponible dans les Web Workers.

-
- -

Syntaxe

- -
formData.has(name);
- -

Paramètres

- -
-
name
-
Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez tester.
-
- -

Retours

- -

Un {{domxref("Boolean")}}.

- -

Exemple

- -

La ligne suivante crée un objet FormData vide :

- -
var formData = new FormData();
- -

L'extrait suivant montre les résultats des tests effectués pour vérifier l'existence d'un username dans l'objet FormData, avant et après avoir ajouté une valeur username avec {{domxref("FormData.append")}} :

- -
formData.has('username'); // Retourne false
-formData.append('username', 'Chris');
-formData.has('username'); // Retourne true
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}{{Spec2('XMLHttpRequest')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FormData.has")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/has/index.md b/files/fr/web/api/formdata/has/index.md new file mode 100644 index 0000000000..2915f9d65a --- /dev/null +++ b/files/fr/web/api/formdata/has/index.md @@ -0,0 +1,80 @@ +--- +title: FormData.has() +slug: Web/API/FormData/has +tags: + - API + - FormData + - Méthode + - Reference + - XHR + - XMLHttpRequest + - has +translation_of: Web/API/FormData/has +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La méthode has() de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet FormData contient une certaine clé.

+ +
+

Note : Cette méthode est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +
formData.has(name);
+ +

Paramètres

+ +
+
name
+
Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez tester.
+
+ +

Retours

+ +

Un {{domxref("Boolean")}}.

+ +

Exemple

+ +

La ligne suivante crée un objet FormData vide :

+ +
var formData = new FormData();
+ +

L'extrait suivant montre les résultats des tests effectués pour vérifier l'existence d'un username dans l'objet FormData, avant et après avoir ajouté une valeur username avec {{domxref("FormData.append")}} :

+ +
formData.has('username'); // Retourne false
+formData.append('username', 'Chris');
+formData.has('username'); // Retourne true
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}{{Spec2('XMLHttpRequest')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FormData.has")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/index.html b/files/fr/web/api/formdata/index.html deleted file mode 100644 index 8fbf318e86..0000000000 --- a/files/fr/web/api/formdata/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: FormData -slug: Web/API/FormData -tags: - - API - - FormData - - Interface - - Reference - - XMLHttpRequest -translation_of: Web/API/FormData ---- -

{{APIRef("XMLHttpRequest")}}

- -

L'interface FormData permet de construire facilement un ensemble de paires clé/valeur représentant les champs du formulaire et leurs valeurs, qui peuvent ensuite être facilement envoyées en utilisant la méthode {{domxref("XMLHttpRequest.send()")}} de l'objet XMLHttpRequest. Il utilise le même format qu'utilise un formulaire si le type d'encodage est mis à "multipart/form-data".

- -

Vous pouvez également le passer directement au constructeur {{domxref("URLSearchParams")}} si vous souhaitez générer des paramètres de requête de la même manière qu'un {{HTMLElement("form")}} le ferait s'il utilisait une simple soumission GET.

- -

Un objet implémentant FormData peut être utilisé directement dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('FormData.entries()', 'entries()')}} : for (var p of myFormData) est équivalent à for (var p of myFormData.entries()).

- -
-

Note : Cette fonctionnalité est disponible dans les Web Workers.

-
- -

Constructeur

- -
-
{{domxref("FormData.FormData","FormData()")}}
-
Crée un nouvel objet FormData.
-
- -

Méthodes

- -
-
{{domxref("FormData.append()")}}
-
Ajoute une nouvelle valeur à une clé existante dans un objet FormData, ou ajoute la clé si elle n'existe pas encore.
-
{{domxref("FormData.delete()")}}
-
Supprime une paire clé/valeur d'un objet FormData.
-
{{domxref("FormData.entries()")}}
-
Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les paires clé/valeur contenues dans cet objet.
-
{{domxref("FormData.get()")}}
-
Renvoie la première valeur associée à une clé donnée à partir d'un objet FormData.
-
{{domxref("FormData.getAll()")}}
-
Retourne un tableau de toutes les valeurs associées à une clé donnée à partir d'un FormData.
-
{{domxref("FormData.has()")}}
-
Renvoie un booléen indiquant si un objet FormData contient une certaine clé.
-
{{domxref("FormData.keys()")}}
-
Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.
-
{{domxref("FormData.set()")}}
-
Définit une nouvelle valeur pour une clé existante dans un objet FormData, ou ajoute la clé/valeur si elle n'existe pas encore.
-
{{domxref("FormData.values()")}}
-
Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData définit dans les specs XHR
- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.FormData")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/index.md b/files/fr/web/api/formdata/index.md new file mode 100644 index 0000000000..8fbf318e86 --- /dev/null +++ b/files/fr/web/api/formdata/index.md @@ -0,0 +1,87 @@ +--- +title: FormData +slug: Web/API/FormData +tags: + - API + - FormData + - Interface + - Reference + - XMLHttpRequest +translation_of: Web/API/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

L'interface FormData permet de construire facilement un ensemble de paires clé/valeur représentant les champs du formulaire et leurs valeurs, qui peuvent ensuite être facilement envoyées en utilisant la méthode {{domxref("XMLHttpRequest.send()")}} de l'objet XMLHttpRequest. Il utilise le même format qu'utilise un formulaire si le type d'encodage est mis à "multipart/form-data".

+ +

Vous pouvez également le passer directement au constructeur {{domxref("URLSearchParams")}} si vous souhaitez générer des paramètres de requête de la même manière qu'un {{HTMLElement("form")}} le ferait s'il utilisait une simple soumission GET.

+ +

Un objet implémentant FormData peut être utilisé directement dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('FormData.entries()', 'entries()')}} : for (var p of myFormData) est équivalent à for (var p of myFormData.entries()).

+ +
+

Note : Cette fonctionnalité est disponible dans les Web Workers.

+
+ +

Constructeur

+ +
+
{{domxref("FormData.FormData","FormData()")}}
+
Crée un nouvel objet FormData.
+
+ +

Méthodes

+ +
+
{{domxref("FormData.append()")}}
+
Ajoute une nouvelle valeur à une clé existante dans un objet FormData, ou ajoute la clé si elle n'existe pas encore.
+
{{domxref("FormData.delete()")}}
+
Supprime une paire clé/valeur d'un objet FormData.
+
{{domxref("FormData.entries()")}}
+
Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les paires clé/valeur contenues dans cet objet.
+
{{domxref("FormData.get()")}}
+
Renvoie la première valeur associée à une clé donnée à partir d'un objet FormData.
+
{{domxref("FormData.getAll()")}}
+
Retourne un tableau de toutes les valeurs associées à une clé donnée à partir d'un FormData.
+
{{domxref("FormData.has()")}}
+
Renvoie un booléen indiquant si un objet FormData contient une certaine clé.
+
{{domxref("FormData.keys()")}}
+
Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.
+
{{domxref("FormData.set()")}}
+
Définit une nouvelle valeur pour une clé existante dans un objet FormData, ou ajoute la clé/valeur si elle n'existe pas encore.
+
{{domxref("FormData.values()")}}
+
Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData définit dans les specs XHR
+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FormData")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/keys/index.html b/files/fr/web/api/formdata/keys/index.html deleted file mode 100644 index 3b3b55c86c..0000000000 --- a/files/fr/web/api/formdata/keys/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: FormData.keys() -slug: Web/API/FormData/keys -tags: - - API - - FormData - - Iteration - - Méthode - - Reference - - XHR - - XMLHttpRequestAPI - - keys -translation_of: Web/API/FormData/keys ---- -

{{APIRef("XMLHttpRequest")}}

- -

La méthode FormData.keys() renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des objets {{domxref("USVString")}}.

- -
-

Note : Cette méthode est disponible dans les Web Workers.

-
- -

Syntaxe

- -
formData.keys();
- -

Valeur de retour

- -

Retourne une {{jsxref("Les_protocoles_iteration", "itération")}}.

- -

Exemple

- -
// Créer un object FormData test
-var formData = new FormData();
-formData.append('cle1', 'valeur1');
-formData.append('cle2', 'valeur2');
-
-// Affiche les clés
-for (var key of formData.keys()) {
-   console.log(key);
-}
-
- -

Le résultat est :

- -
cle1
-cle2
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FormData.keys")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/keys/index.md b/files/fr/web/api/formdata/keys/index.md new file mode 100644 index 0000000000..3b3b55c86c --- /dev/null +++ b/files/fr/web/api/formdata/keys/index.md @@ -0,0 +1,79 @@ +--- +title: FormData.keys() +slug: Web/API/FormData/keys +tags: + - API + - FormData + - Iteration + - Méthode + - Reference + - XHR + - XMLHttpRequestAPI + - keys +translation_of: Web/API/FormData/keys +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La méthode FormData.keys() renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des objets {{domxref("USVString")}}.

+ +
+

Note : Cette méthode est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +
formData.keys();
+ +

Valeur de retour

+ +

Retourne une {{jsxref("Les_protocoles_iteration", "itération")}}.

+ +

Exemple

+ +
// Créer un object FormData test
+var formData = new FormData();
+formData.append('cle1', 'valeur1');
+formData.append('cle2', 'valeur2');
+
+// Affiche les clés
+for (var key of formData.keys()) {
+   console.log(key);
+}
+
+ +

Le résultat est :

+ +
cle1
+cle2
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FormData.keys")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/set/index.html b/files/fr/web/api/formdata/set/index.html deleted file mode 100644 index 2174a28c4d..0000000000 --- a/files/fr/web/api/formdata/set/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: FormData.set() -slug: Web/API/FormData/set -tags: - - API - - FormData - - Méthode - - Reference - - XHR - - XMLHttpRequest - - set -translation_of: Web/API/FormData/set ---- -

{{APIRef("XMLHttpRequest")}}

- -

La méthode set() de l'interface {{domxref("FormData")}} définit une nouvelle valeur pour une clé existante dans un objet FormData, ou ajoute la clé/valeur si elle n'existe pas encore.

- -

La différence entre set() et {{domxref("FormData.append")}} est que si la clé spécifiée existe déjà, set() écrasera toutes les valeurs existantes avec la nouvelle, tandis que {{domxref("FormData.append")}} ajoutera la nouvelle valeur à la fin de l'ensemble de valeurs existant.

- -
-

Note : Cette méthode est disponible dans les Web Workers.

-
- -

Syntaxe

- -

Il existe deux versions de cette méthode : une version à deux et une version à trois paramètres :

- -
formData.set(name, value);
-formData.set(name, value, filename);
- -

Paramètres

- -
-
name
-
Le nom du champ dont les données sont contenues en valeur (value).
-
value
-
La valeur du champ. Il peut s'agir d'un {{domxref("USVString")}} ou d'un {{domxref("Blob")}} (y compris les sous-classes telles que {{domxref("File")}}). Si aucune de ces sous-classes n'est spécifiée, la valeur est convertie en une chaîne de caractères.
-
filename {{optional_inline}}
-
Le nom de fichier communiqué au serveur (un {{domxref("USVString")}}), lorsqu'un {{domxref("Blob")}} ou un {{domxref("File")}} est passée comme deuxième paramètre. Le nom de fichier par défaut pour les objets {{domxref("Blob")}} est "blob". Le nom de fichier par défaut pour les objets {{domxref("File")}} est le nom du fichier.
-
- -
-

Note : Si vous spécifiez un {{domxref("Blob")}} comme donnée à ajouter à l'objet FormData, le nom du fichier qui sera rapporté au serveur dans l'en-tête "Content-Disposition" utilisé pour varier d'un navigateur à l'autre.

-
- -

Exemple

- -

La ligne suivante crée un objet FormData vide:

- -
var formData = new FormData(); // Actuellement vide
- -

Vous pouvez définir des paires clé/valeur à ce sujet en utilisant {{domxref("FormData.set")}} :

- -
formData.set('username', 'Chris');
-formData.set('userpic', myFileInput.files[0], 'chris.jpg');
- -

Si la valeur envoyée est différente de String ou Blob, elle sera automatiquement convertie en String :

- -
formData.set('name', 72);
-formData.get('name'); // "72"
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}{{Spec2('XMLHttpRequest')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FormData.set")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/set/index.md b/files/fr/web/api/formdata/set/index.md new file mode 100644 index 0000000000..2174a28c4d --- /dev/null +++ b/files/fr/web/api/formdata/set/index.md @@ -0,0 +1,92 @@ +--- +title: FormData.set() +slug: Web/API/FormData/set +tags: + - API + - FormData + - Méthode + - Reference + - XHR + - XMLHttpRequest + - set +translation_of: Web/API/FormData/set +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La méthode set() de l'interface {{domxref("FormData")}} définit une nouvelle valeur pour une clé existante dans un objet FormData, ou ajoute la clé/valeur si elle n'existe pas encore.

+ +

La différence entre set() et {{domxref("FormData.append")}} est que si la clé spécifiée existe déjà, set() écrasera toutes les valeurs existantes avec la nouvelle, tandis que {{domxref("FormData.append")}} ajoutera la nouvelle valeur à la fin de l'ensemble de valeurs existant.

+ +
+

Note : Cette méthode est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +

Il existe deux versions de cette méthode : une version à deux et une version à trois paramètres :

+ +
formData.set(name, value);
+formData.set(name, value, filename);
+ +

Paramètres

+ +
+
name
+
Le nom du champ dont les données sont contenues en valeur (value).
+
value
+
La valeur du champ. Il peut s'agir d'un {{domxref("USVString")}} ou d'un {{domxref("Blob")}} (y compris les sous-classes telles que {{domxref("File")}}). Si aucune de ces sous-classes n'est spécifiée, la valeur est convertie en une chaîne de caractères.
+
filename {{optional_inline}}
+
Le nom de fichier communiqué au serveur (un {{domxref("USVString")}}), lorsqu'un {{domxref("Blob")}} ou un {{domxref("File")}} est passée comme deuxième paramètre. Le nom de fichier par défaut pour les objets {{domxref("Blob")}} est "blob". Le nom de fichier par défaut pour les objets {{domxref("File")}} est le nom du fichier.
+
+ +
+

Note : Si vous spécifiez un {{domxref("Blob")}} comme donnée à ajouter à l'objet FormData, le nom du fichier qui sera rapporté au serveur dans l'en-tête "Content-Disposition" utilisé pour varier d'un navigateur à l'autre.

+
+ +

Exemple

+ +

La ligne suivante crée un objet FormData vide:

+ +
var formData = new FormData(); // Actuellement vide
+ +

Vous pouvez définir des paires clé/valeur à ce sujet en utilisant {{domxref("FormData.set")}} :

+ +
formData.set('username', 'Chris');
+formData.set('userpic', myFileInput.files[0], 'chris.jpg');
+ +

Si la valeur envoyée est différente de String ou Blob, elle sera automatiquement convertie en String :

+ +
formData.set('name', 72);
+formData.get('name'); // "72"
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}{{Spec2('XMLHttpRequest')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FormData.set")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/using_formdata_objects/index.html b/files/fr/web/api/formdata/using_formdata_objects/index.html deleted file mode 100644 index 93fc4bc977..0000000000 --- a/files/fr/web/api/formdata/using_formdata_objects/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Utilisation des objets FormData -slug: Web/API/FormData/Using_FormData_Objects -tags: - - AJAX - - Blob - - File - - FormData - - Formulaires - - XHR - - XMLHttpRequest -translation_of: Web/API/FormData/Using_FormData_Objects -original_slug: Web/API/FormData/Utilisation_objets_FormData ---- -

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

Note : 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);
-
- -
-

Note : 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/using_formdata_objects/index.md b/files/fr/web/api/formdata/using_formdata_objects/index.md new file mode 100644 index 0000000000..93fc4bc977 --- /dev/null +++ b/files/fr/web/api/formdata/using_formdata_objects/index.md @@ -0,0 +1,148 @@ +--- +title: Utilisation des objets FormData +slug: Web/API/FormData/Using_FormData_Objects +tags: + - AJAX + - Blob + - File + - FormData + - Formulaires + - XHR + - XMLHttpRequest +translation_of: Web/API/FormData/Using_FormData_Objects +original_slug: Web/API/FormData/Utilisation_objets_FormData +--- +

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

Note : 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);
+
+ +
+

Note : 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/values/index.html b/files/fr/web/api/formdata/values/index.html deleted file mode 100644 index 7a5ddadcec..0000000000 --- a/files/fr/web/api/formdata/values/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: FormData.values() -slug: Web/API/FormData/values -tags: - - API - - FormData - - Iteration - - Méthode - - Reference - - XHR - - XMLHttpRequestAPI - - values -translation_of: Web/API/FormData/values ---- -

{{APIRef("XMLHttpRequest")}}

- -

La méthode FormData.values() renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("USVString")}} ou {{domxref("Blob")}}.

- -
-

Note : Cette méthode est disponible dans les Web Workers.

-
- -

Syntaxe

- -
formData.values();
- -

Valeur de retour

- -

Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} .

- -

Exemple

- -
// Créer un objet FormData test
-var formData = new FormData();
-formData.append('cle1', 'valeur1');
-formData.append('cle2', 'valeur2');
-
-// Affiche les valeurs
-for (var value of formData.values()) {
-   console.log(value);
-}
-
- -

Le résultat est :

- -
valeur1
-valeur2
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.FormData.values")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/formdata/values/index.md b/files/fr/web/api/formdata/values/index.md new file mode 100644 index 0000000000..7a5ddadcec --- /dev/null +++ b/files/fr/web/api/formdata/values/index.md @@ -0,0 +1,79 @@ +--- +title: FormData.values() +slug: Web/API/FormData/values +tags: + - API + - FormData + - Iteration + - Méthode + - Reference + - XHR + - XMLHttpRequestAPI + - values +translation_of: Web/API/FormData/values +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La méthode FormData.values() renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("USVString")}} ou {{domxref("Blob")}}.

+ +
+

Note : Cette méthode est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +
formData.values();
+ +

Valeur de retour

+ +

Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} .

+ +

Exemple

+ +
// Créer un objet FormData test
+var formData = new FormData();
+formData.append('cle1', 'valeur1');
+formData.append('cle2', 'valeur2');
+
+// Affiche les valeurs
+for (var value of formData.values()) {
+   console.log(value);
+}
+
+ +

Le résultat est :

+ +
valeur1
+valeur2
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator<>)')}}{{Spec2('XMLHttpRequest')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.FormData.values")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/fullscreen_api/index.html b/files/fr/web/api/fullscreen_api/index.html deleted file mode 100644 index 8b0a59233a..0000000000 --- a/files/fr/web/api/fullscreen_api/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Utiliser le mode plein écran -slug: Web/API/Fullscreen_API -tags: - - API - - DOM - - Plein écran - - Tutoriel -translation_of: Web/API/Fullscreen_API -original_slug: Web/Guide/DOM/Using_full_screen_mode ---- -

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

- -

Document.fullscreen

- -

{{Compat("api.Document.fullscreen")}}

- -

Document.fullscreenElement

- -

{{Compat("api.Document.fullscreenElement")}}

- -

Document.fullscreenEnabled

- -

{{Compat("api.Document.fullscreenEnabled")}}

- -

Document.exitFullscreen

- -

{{Compat("api.Document.exitFullscreen")}}

- -

Element.requestFullscreen

- -

{{Compat("api.Element.requestFullscreen")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/fullscreen_api/index.md b/files/fr/web/api/fullscreen_api/index.md new file mode 100644 index 0000000000..8b0a59233a --- /dev/null +++ b/files/fr/web/api/fullscreen_api/index.md @@ -0,0 +1,243 @@ +--- +title: Utiliser le mode plein écran +slug: Web/API/Fullscreen_API +tags: + - API + - DOM + - Plein écran + - Tutoriel +translation_of: Web/API/Fullscreen_API +original_slug: Web/Guide/DOM/Using_full_screen_mode +--- +

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

+ +

Document.fullscreen

+ +

{{Compat("api.Document.fullscreen")}}

+ +

Document.fullscreenElement

+ +

{{Compat("api.Document.fullscreenElement")}}

+ +

Document.fullscreenEnabled

+ +

{{Compat("api.Document.fullscreenEnabled")}}

+ +

Document.exitFullscreen

+ +

{{Compat("api.Document.exitFullscreen")}}

+ +

Element.requestFullscreen

+ +

{{Compat("api.Element.requestFullscreen")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/gainnode/index.html b/files/fr/web/api/gainnode/index.html deleted file mode 100644 index 93d8c9bf19..0000000000 --- a/files/fr/web/api/gainnode/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: GainNode -slug: Web/API/GainNode -tags: - - API - - Experimental - - Reference - - Web Audio API -translation_of: Web/API/GainNode ---- -

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

- -

L'interface GainNode représente une variation de volume. Il s'agit d'un {{domxref("AudioNode")}}, c'est un module de traitement audio, qui provoque un gain donné à appliquer à des données d'entrée avant sa propagation à la sortie. Un GainNode a toujours exactement une entrée et une sortie, avec la même quantité de canaux.

- -

Le gain est une valeur sans unité, qui change éventuellement avec le temps, qui est multiplié à chaque échantillon correspondant de tous les canaux entrées. En cas de modification, le nouveau gain est appliqué à l'aide d'un algorithme d'effilochage afin d'éviter aux «clics» inesthétiques d'apparaître dans l'audio résultant.

- -

Un objet GainNode augmente le gain de la sortie.

- - - - - - - - - - - - - - - - - - - - - - - - -
Nombre d'entrées1
Nombre de sorties1
Mode de comptage des canaux"max"
Nombre de canaux2 (inutilisés dans le mode de comptage par défaut)
Interprétation des canaux"speakers"
- -

Constructeur

- -
-
{{domxref("GainNode.GainNode", "GainNode()")}}
-
Crée une nouvelle instance d'un objet GainNode. Il ne faut pas créer un noeud de gain manuellement, mais plutôt utiliser la méthode {{domxref("AudioContext.createGain()")}}.
-
- -

Propriétés

- -

Hérite des propritétés de son parent, {{domxref("AudioNode")}}.

- -
-
{{domxref("GainNode.gain")}}
-
Est un a-rate {{domxref ("AudioParam")}} représentant le montant du gain à appliquer. (Bien que le AudioParam retournée est en lecture seule, la valeur qu'il représente ne l'est pas).
-
- -

Méthodes

- -

Aucune méthode spécifique; hérite des méthodes de son parent, {{domxref("AudioNode")}}.

- -

Exemple

- -

{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutsCommentaire
{{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.GainNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/gainnode/index.md b/files/fr/web/api/gainnode/index.md new file mode 100644 index 0000000000..93d8c9bf19 --- /dev/null +++ b/files/fr/web/api/gainnode/index.md @@ -0,0 +1,93 @@ +--- +title: GainNode +slug: Web/API/GainNode +tags: + - API + - Experimental + - Reference + - Web Audio API +translation_of: Web/API/GainNode +--- +

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

+ +

L'interface GainNode représente une variation de volume. Il s'agit d'un {{domxref("AudioNode")}}, c'est un module de traitement audio, qui provoque un gain donné à appliquer à des données d'entrée avant sa propagation à la sortie. Un GainNode a toujours exactement une entrée et une sortie, avec la même quantité de canaux.

+ +

Le gain est une valeur sans unité, qui change éventuellement avec le temps, qui est multiplié à chaque échantillon correspondant de tous les canaux entrées. En cas de modification, le nouveau gain est appliqué à l'aide d'un algorithme d'effilochage afin d'éviter aux «clics» inesthétiques d'apparaître dans l'audio résultant.

+ +

Un objet GainNode augmente le gain de la sortie.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Nombre d'entrées1
Nombre de sorties1
Mode de comptage des canaux"max"
Nombre de canaux2 (inutilisés dans le mode de comptage par défaut)
Interprétation des canaux"speakers"
+ +

Constructeur

+ +
+
{{domxref("GainNode.GainNode", "GainNode()")}}
+
Crée une nouvelle instance d'un objet GainNode. Il ne faut pas créer un noeud de gain manuellement, mais plutôt utiliser la méthode {{domxref("AudioContext.createGain()")}}.
+
+ +

Propriétés

+ +

Hérite des propritétés de son parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("GainNode.gain")}}
+
Est un a-rate {{domxref ("AudioParam")}} représentant le montant du gain à appliquer. (Bien que le AudioParam retournée est en lecture seule, la valeur qu'il représente ne l'est pas).
+
+ +

Méthodes

+ +

Aucune méthode spécifique; hérite des méthodes de son parent, {{domxref("AudioNode")}}.

+ +

Exemple

+ +

{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutsCommentaire
{{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateurs

+ +

{{Compat("api.GainNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/gamepad/index.html b/files/fr/web/api/gamepad/index.html deleted file mode 100644 index 8def16d3c7..0000000000 --- a/files/fr/web/api/gamepad/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Gamepad -slug: Web/API/Gamepad -translation_of: Web/API/Gamepad ---- -

{{APIRef("Gamepad API")}}

- -

L'interface Gamepad de l'API Gamepad définit une manette individuelle ou un autre contrôleur, autorisant l'accès à des informations telles que les boutons pressés, la position des axes et l'identifiant.

- -

Un objet Gamepad peut être retourné de deux manières :

- - - -

Propriétés

- -
-
{{domxref("Gamepad.axes")}} {{readonlyInline}}
-
Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques).
-
{{domxref("Gamepad.buttons")}} {{readonlyInline}}
-
Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif.
-
{{domxref("Gamepad.connected")}} {{readonlyInline}}
-
Un booléen indiquant si la manette est toujours connectée au système.
-
{{domxref("Gamepad.displayId")}} {{readonlyInline}}
-
Retourne {{domxref("VRDisplay.displayId")}} associé à {{domxref("VRDisplay")}} — Le VRDisplay dont la manette contrôle la scène affichée.
-
{{domxref("Gamepad.id")}} {{readonlyInline}}
-
Un {{domxref("DOMString")}} contenant l'information d'identification de la manette.
-
{{domxref("Gamepad.index")}} {{readonlyInline}}
-
Un entier qui s'auto-incrémente pour être unique à chaque dispositif actuellement connecté au système.
-
{{domxref("Gamepad.mapping")}} {{readonlyInline}}
-
Une chaîne de caractères indiquant si le navigateur a remappé les contrôles du dispositif à un layout connu.
-
{{domxref("Gamepad.timestamp")}} {{readonlyInline}}
-
Un {{domxref("DOMHighResTimeStamp")}} représentant la dernière fois que les données pour cette manette a été mise à jour. Noter que cette propriété n'est pas supportée partout.
-
- -

Extensions expérimentales apportées à Gamepad

- -

Les interfaces suivantes sont définies dans la spécification {{SpecName("GamepadExtensions")}} et fournissent un accès à des fonctionnalités expérimentales tels que les retours haptiques et informations de position des contrôleurs WebVR.

- -
-
{{domxref("Gamepad.hand")}} {{readonlyinline}}
-
Une énumération qui définit dans quelle main le contrôleur est tenue (ou dans laquelle il est probablement tenue).
-
{{domxref("Gamepad.hapticActuators")}} {{readonlyinline}}
-
Un tableau contenant des objets {{domxref("GamepadHapticActuator")}} dont chacun représente un matériel disponible pour le contrôleur pour les retours haptiques.
-
{{domxref("Gamepad.pose")}} {{readonlyinline}}
-
Un objet {{domxref("GamepadPose")}} qui représente la position et l'orientation d'un contrôleur WebVR dans l'espace en trois dimensions.
-
- -

Exemples

- -
window.addEventListener("gamepadconnected", function(event) {
-  console.log("Contrôleur connecté à %d: %s. %d boutons, %d axes.",
-  event.gamepad.index, event.gamepad.id,
-  event.gamepad.buttons.length, event.gamepad.axes.length);
-});
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}{{Spec2("Gamepad")}}Première définition
{{SpecName('WebVR', '#gamepad-getvrdisplays-attribute', 'displayId')}}{{Spec2("WebVR")}} -

Définit la propriété {{domxref("Gamepad.displayId")}}.

-
{{SpecName("GamepadExtensions", "#partial-gamepad-interface", "Gamepad extensions")}}{{Spec2("GamepadExtensions")}}Définit les extensions expérimentales
- -

Compatibilités des navigateurs

- -

{{Compat("api.Gamepad")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/gamepad/index.md b/files/fr/web/api/gamepad/index.md new file mode 100644 index 0000000000..8def16d3c7 --- /dev/null +++ b/files/fr/web/api/gamepad/index.md @@ -0,0 +1,97 @@ +--- +title: Gamepad +slug: Web/API/Gamepad +translation_of: Web/API/Gamepad +--- +

{{APIRef("Gamepad API")}}

+ +

L'interface Gamepad de l'API Gamepad définit une manette individuelle ou un autre contrôleur, autorisant l'accès à des informations telles que les boutons pressés, la position des axes et l'identifiant.

+ +

Un objet Gamepad peut être retourné de deux manières :

+ + + +

Propriétés

+ +
+
{{domxref("Gamepad.axes")}} {{readonlyInline}}
+
Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques).
+
{{domxref("Gamepad.buttons")}} {{readonlyInline}}
+
Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif.
+
{{domxref("Gamepad.connected")}} {{readonlyInline}}
+
Un booléen indiquant si la manette est toujours connectée au système.
+
{{domxref("Gamepad.displayId")}} {{readonlyInline}}
+
Retourne {{domxref("VRDisplay.displayId")}} associé à {{domxref("VRDisplay")}} — Le VRDisplay dont la manette contrôle la scène affichée.
+
{{domxref("Gamepad.id")}} {{readonlyInline}}
+
Un {{domxref("DOMString")}} contenant l'information d'identification de la manette.
+
{{domxref("Gamepad.index")}} {{readonlyInline}}
+
Un entier qui s'auto-incrémente pour être unique à chaque dispositif actuellement connecté au système.
+
{{domxref("Gamepad.mapping")}} {{readonlyInline}}
+
Une chaîne de caractères indiquant si le navigateur a remappé les contrôles du dispositif à un layout connu.
+
{{domxref("Gamepad.timestamp")}} {{readonlyInline}}
+
Un {{domxref("DOMHighResTimeStamp")}} représentant la dernière fois que les données pour cette manette a été mise à jour. Noter que cette propriété n'est pas supportée partout.
+
+ +

Extensions expérimentales apportées à Gamepad

+ +

Les interfaces suivantes sont définies dans la spécification {{SpecName("GamepadExtensions")}} et fournissent un accès à des fonctionnalités expérimentales tels que les retours haptiques et informations de position des contrôleurs WebVR.

+ +
+
{{domxref("Gamepad.hand")}} {{readonlyinline}}
+
Une énumération qui définit dans quelle main le contrôleur est tenue (ou dans laquelle il est probablement tenue).
+
{{domxref("Gamepad.hapticActuators")}} {{readonlyinline}}
+
Un tableau contenant des objets {{domxref("GamepadHapticActuator")}} dont chacun représente un matériel disponible pour le contrôleur pour les retours haptiques.
+
{{domxref("Gamepad.pose")}} {{readonlyinline}}
+
Un objet {{domxref("GamepadPose")}} qui représente la position et l'orientation d'un contrôleur WebVR dans l'espace en trois dimensions.
+
+ +

Exemples

+ +
window.addEventListener("gamepadconnected", function(event) {
+  console.log("Contrôleur connecté à %d: %s. %d boutons, %d axes.",
+  event.gamepad.index, event.gamepad.id,
+  event.gamepad.buttons.length, event.gamepad.axes.length);
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}{{Spec2("Gamepad")}}Première définition
{{SpecName('WebVR', '#gamepad-getvrdisplays-attribute', 'displayId')}}{{Spec2("WebVR")}} +

Définit la propriété {{domxref("Gamepad.displayId")}}.

+
{{SpecName("GamepadExtensions", "#partial-gamepad-interface", "Gamepad extensions")}}{{Spec2("GamepadExtensions")}}Définit les extensions expérimentales
+ +

Compatibilités des navigateurs

+ +

{{Compat("api.Gamepad")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/gamepad_api/index.html b/files/fr/web/api/gamepad_api/index.html deleted file mode 100644 index 7e81e21b27..0000000000 --- a/files/fr/web/api/gamepad_api/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Gamepad API -slug: Web/API/Gamepad_API -translation_of: Web/API/Gamepad_API ---- -
{{DefaultAPISidebar("Gamepad API")}}
- -

L'API Gamepad est un moyen pour les développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités de commande du jeu d'y répondre de manière simple et systématiq. Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement.

- -

Interfaces

- -
-
Gamepad
-
Représente une manette de jeu / unités de commande du jeu connecté à l'ordinateur.
-
GamepadButton
-
Représente un bouton sur un gamepad connecté.
-
GamepadEvent
-
L'objet d'événement qui déclenche des événements sur la manette de jeu contiguë de manière représentative.
-
- -

Extensions de manette du jeu expérimentales

- -
-
GamepadHapticActuator
-
Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.
-
GamepadPose
-
Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a WebVRcontroller.
-
- -

See also the extensions to the Gamepad interface, for features that allow you to access the above information.

- -

Extensions à d'autres interfaces

- - - -
-
{{domxref("Navigator.getGamepads()")}}
-
An extension to the {{domxref("Navigator")}} object that returns an array of {{domxref("Gamepad")}} objects, one for each connected gamepad.
-
- -

Window events

- -
-
{{domxref("Window.ongamepadconnected")}}
-
Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).
-
{{domxref("Window.ongamepaddisconnected")}}
-
Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).
-
- -

Tutoriels et guides

- - - -

Caractéristiques

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("GamepadExtensions")}}{{Spec2("GamepadExtensions")}}Defines the {{anch("Experimental Gamepad extensions")}}.
{{SpecName("Gamepad", "", "The Gamepad API specification")}}{{Spec2("Gamepad")}}Initial definition
- -

Compatibilité du navigateur

- - - -

{{Compat("api.Gamepad")}}

- -

Voir également

- - diff --git a/files/fr/web/api/gamepad_api/index.md b/files/fr/web/api/gamepad_api/index.md new file mode 100644 index 0000000000..7e81e21b27 --- /dev/null +++ b/files/fr/web/api/gamepad_api/index.md @@ -0,0 +1,90 @@ +--- +title: Gamepad API +slug: Web/API/Gamepad_API +translation_of: Web/API/Gamepad_API +--- +
{{DefaultAPISidebar("Gamepad API")}}
+ +

L'API Gamepad est un moyen pour les développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités de commande du jeu d'y répondre de manière simple et systématiq. Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement.

+ +

Interfaces

+ +
+
Gamepad
+
Représente une manette de jeu / unités de commande du jeu connecté à l'ordinateur.
+
GamepadButton
+
Représente un bouton sur un gamepad connecté.
+
GamepadEvent
+
L'objet d'événement qui déclenche des événements sur la manette de jeu contiguë de manière représentative.
+
+ +

Extensions de manette du jeu expérimentales

+ +
+
GamepadHapticActuator
+
Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.
+
GamepadPose
+
Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a WebVRcontroller.
+
+ +

See also the extensions to the Gamepad interface, for features that allow you to access the above information.

+ +

Extensions à d'autres interfaces

+ + + +
+
{{domxref("Navigator.getGamepads()")}}
+
An extension to the {{domxref("Navigator")}} object that returns an array of {{domxref("Gamepad")}} objects, one for each connected gamepad.
+
+ +

Window events

+ +
+
{{domxref("Window.ongamepadconnected")}}
+
Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).
+
+ +

Tutoriels et guides

+ + + +

Caractéristiques

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("GamepadExtensions")}}{{Spec2("GamepadExtensions")}}Defines the {{anch("Experimental Gamepad extensions")}}.
{{SpecName("Gamepad", "", "The Gamepad API specification")}}{{Spec2("Gamepad")}}Initial definition
+ +

Compatibilité du navigateur

+ + + +

{{Compat("api.Gamepad")}}

+ +

Voir également

+ + 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 deleted file mode 100644 index d30dc4dce8..0000000000 --- a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: Utiliser l'API Gamepad -slug: Web/API/Gamepad_API/Using_the_Gamepad_API -translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API -original_slug: Web/Guide/API/Gamepad ---- -

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

- -
-

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/gamepad_api/using_the_gamepad_api/index.md b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md new file mode 100644 index 0000000000..d30dc4dce8 --- /dev/null +++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md @@ -0,0 +1,282 @@ +--- +title: Utiliser l'API Gamepad +slug: Web/API/Gamepad_API/Using_the_Gamepad_API +translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API +original_slug: Web/Guide/API/Gamepad +--- +

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

+ +
+

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/geolocation/clearwatch/index.html b/files/fr/web/api/geolocation/clearwatch/index.html deleted file mode 100644 index c4952eb7cf..0000000000 --- a/files/fr/web/api/geolocation/clearwatch/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Geolocation.clearWatch() -slug: Web/API/Geolocation/clearWatch -tags: - - API - - Besoin d'exemple - - Géolocalisation - - Géolocalisation API - - Méthode - - Reference -translation_of: Web/API/Geolocation/clearWatch ---- -

{{ APIref("Geolocation API") }}

- -

La méthode Geolocation.clearWatch() est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}.

- -

Syntaxe

- -
navigator.geolocation.clearWatch(id);
- -

Paramètres

- -
-
id
-
Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer.
-
- -

Exemple

- -
var id, target, option;
-
-function success(pos) {
-  var crd = pos.coords;
-
-  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
-    console.log('Congratulation, you reach the target');
-    navigator.geolocation.clearWatch(id);
-  }
-};
-
-function error(err) {
-  console.warn('ERROR(' + err.code + '): ' + err.message);
-};
-
-target = {
-  latitude : 0,
-  longitude: 0,
-}
-
-options = {
-  enableHighAccuracy: false,
-  timeout: 5000,
-  maximumAge: 0
-};
-
-id = navigator.geolocation.watchPosition(success, error, options);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Geolocation.clearWatch")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/geolocation/clearwatch/index.md b/files/fr/web/api/geolocation/clearwatch/index.md new file mode 100644 index 0000000000..c4952eb7cf --- /dev/null +++ b/files/fr/web/api/geolocation/clearwatch/index.md @@ -0,0 +1,89 @@ +--- +title: Geolocation.clearWatch() +slug: Web/API/Geolocation/clearWatch +tags: + - API + - Besoin d'exemple + - Géolocalisation + - Géolocalisation API + - Méthode + - Reference +translation_of: Web/API/Geolocation/clearWatch +--- +

{{ APIref("Geolocation API") }}

+ +

La méthode Geolocation.clearWatch() est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}.

+ +

Syntaxe

+ +
navigator.geolocation.clearWatch(id);
+ +

Paramètres

+ +
+
id
+
Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer.
+
+ +

Exemple

+ +
var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the target');
+    navigator.geolocation.clearWatch(id);
+  }
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+target = {
+  latitude : 0,
+  longitude: 0,
+}
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Geolocation.clearWatch")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/geolocation/getcurrentposition/index.html b/files/fr/web/api/geolocation/getcurrentposition/index.html deleted file mode 100644 index 8168640a6c..0000000000 --- a/files/fr/web/api/geolocation/getcurrentposition/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Geolocation.getCurrentPosition() -slug: Web/API/Geolocation/getCurrentPosition -tags: - - API - - Geolocation - - Méthode - - Reference -translation_of: Web/API/Geolocation/getCurrentPosition ---- -
{{securecontext_header}}{{APIRef("Geolocation API")}}
- -

La méthode Geolocation.getCurrentPosition() fournit la position actuelle de l'appareil.

- -

Syntaxe

- -
navigator.geolocation.getCurrentPosition(success[, error[, [options]])
- -

Paramètres

- -
-
success
-
Une fonction de rappel qui prend un objet {{domxref("Position")}} comme argument.
-
error {{optional_inline}}
-
Une fonction de rappel qui prend un objet {{domxref("PositionError")}} comme argument.
-
options {{optional_inline}}
-
Un objet {{domxref("PositionOptions")}} optionnel. Les options décrites par cet objet sont : -
    -
  • maximumAge : un entier qui exprime une durée en millisecondes ou l'infini pour indiquer la durée maximale pendant laquelle mettre en cache la position.
    • -
  • timeout : un entier qui exprime la durée, en millisecondes, avant que la fonction de rappel error soit appelé. Si cette propriété vaut 0, la fonction d'erreur ne sera jamais appelée.
    • -
  • enableHighAccuracy : un booléen qui indique si une précision élevée est requise.
    • -
-
-
- -

Exemples

- -
var options = {
-  enableHighAccuracy: true,
-  timeout: 5000,
-  maximumAge: 0
-};
-
-function success(pos) {
-  var crd = pos.coords;
-
-  console.log('Votre position actuelle est :');
-  console.log(`Latitude : ${crd.latitude}`);
-  console.log(`Longitude : ${crd.longitude}`);
-  console.log(`La précision est de ${crd.accuracy} mètres.`);
-}
-
-function error(err) {
-  console.warn(`ERREUR (${err.code}): ${err.message}`);
-}
-
-navigator.geolocation.getCurrentPosition(success, error, options);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Geolocation.getCurrentPosition")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/geolocation/getcurrentposition/index.md b/files/fr/web/api/geolocation/getcurrentposition/index.md new file mode 100644 index 0000000000..8168640a6c --- /dev/null +++ b/files/fr/web/api/geolocation/getcurrentposition/index.md @@ -0,0 +1,88 @@ +--- +title: Geolocation.getCurrentPosition() +slug: Web/API/Geolocation/getCurrentPosition +tags: + - API + - Geolocation + - Méthode + - Reference +translation_of: Web/API/Geolocation/getCurrentPosition +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

La méthode Geolocation.getCurrentPosition() fournit la position actuelle de l'appareil.

+ +

Syntaxe

+ +
navigator.geolocation.getCurrentPosition(success[, error[, [options]])
+ +

Paramètres

+ +
+
success
+
Une fonction de rappel qui prend un objet {{domxref("Position")}} comme argument.
+
error {{optional_inline}}
+
Une fonction de rappel qui prend un objet {{domxref("PositionError")}} comme argument.
+
options {{optional_inline}}
+
Un objet {{domxref("PositionOptions")}} optionnel. Les options décrites par cet objet sont : +
    +
  • maximumAge : un entier qui exprime une durée en millisecondes ou l'infini pour indiquer la durée maximale pendant laquelle mettre en cache la position.
    • +
  • timeout : un entier qui exprime la durée, en millisecondes, avant que la fonction de rappel error soit appelé. Si cette propriété vaut 0, la fonction d'erreur ne sera jamais appelée.
    • +
  • enableHighAccuracy : un booléen qui indique si une précision élevée est requise.
    • +
+
+
+ +

Exemples

+ +
var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Votre position actuelle est :');
+  console.log(`Latitude : ${crd.latitude}`);
+  console.log(`Longitude : ${crd.longitude}`);
+  console.log(`La précision est de ${crd.accuracy} mètres.`);
+}
+
+function error(err) {
+  console.warn(`ERREUR (${err.code}): ${err.message}`);
+}
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Geolocation.getCurrentPosition")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/geolocation/index.html b/files/fr/web/api/geolocation/index.html deleted file mode 100644 index e492a2a532..0000000000 --- a/files/fr/web/api/geolocation/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Geolocation -slug: Web/API/Geolocation -tags: - - API - - Avancé - - Géolocalisation API - - Interface - - Reference -translation_of: Web/API/Geolocation ---- -
{{APIRef("Geolocation API")}}
- -

En intégrant l'interface Geolocation, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur.

- -

On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} .

- -
-

Note: Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations.

-
- -

Propriétés

- -

L'interface de géolocalisation n'utilise ou n'hérite d'aucune propriété.

- -

Méthodes

- -

L'interface de géolocalisation n'hérite d'aucune méthode.

- -
-
{{domxref("Geolocation.getCurrentPosition()")}}
-
Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur.
-
{{domxref("Geolocation.watchPosition()")}}
-
Retourne une valeur long représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change.
-
{{domxref("Geolocation.clearWatch()")}}
-
Supprime le lien créé par la précédente utilisation de watchPosition().
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Geolocation")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/geolocation/index.md b/files/fr/web/api/geolocation/index.md new file mode 100644 index 0000000000..e492a2a532 --- /dev/null +++ b/files/fr/web/api/geolocation/index.md @@ -0,0 +1,66 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Avancé + - Géolocalisation API + - Interface + - Reference +translation_of: Web/API/Geolocation +--- +
{{APIRef("Geolocation API")}}
+ +

En intégrant l'interface Geolocation, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur.

+ +

On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} .

+ +
+

Note: Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations.

+
+ +

Propriétés

+ +

L'interface de géolocalisation n'utilise ou n'hérite d'aucune propriété.

+ +

Méthodes

+ +

L'interface de géolocalisation n'hérite d'aucune méthode.

+ +
+
{{domxref("Geolocation.getCurrentPosition()")}}
+
Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur.
+
{{domxref("Geolocation.watchPosition()")}}
+
Retourne une valeur long représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change.
+
{{domxref("Geolocation.clearWatch()")}}
+
Supprime le lien créé par la précédente utilisation de watchPosition().
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Geolocation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/geolocation/watchposition/index.html b/files/fr/web/api/geolocation/watchposition/index.html deleted file mode 100644 index c2424f4774..0000000000 --- a/files/fr/web/api/geolocation/watchposition/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Geolocation.watchPosition() -slug: Web/API/Geolocation/watchPosition -tags: - - API - - Exemple - - Géolocalisation - - Géolocalisation API - - Méthode - - Reference -translation_of: Web/API/Geolocation/watchPosition ---- -

{{ APIref("Geolocation API") }}

- -

La méthode Geolocation.watchPosition() permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs.

- -

Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}.

- -

Syntaxe

- -
id = navigator.geolocation.watchPosition(success[, error[, options]])
- -

Paramètres

- -
-
success
-
Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}.
-
error {{optional_inline}}
-
Nom d'une fonction optionnelle qui a pour paramètre l'objet {{domxref("PositionError")}}.
-
options {{optional_inline}}
-
Un objet optionnel {{domxref("PositionOptions")}}.
-
- -

Exemple

- -
var id, target, options;
-
-function success(pos) {
-  var crd = pos.coords;
-
-  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
-    console.log('Bravo, vous avez atteint la cible');
-    navigator.geolocation.clearWatch(id);
-  }
-}
-
-function error(err) {
-  console.warn('ERROR(' + err.code + '): ' + err.message);
-}
-
-target = {
-  latitude : 0,
-  longitude: 0
-};
-
-options = {
-  enableHighAccuracy: false,
-  timeout: 5000,
-  maximumAge: 0
-};
-
-id = navigator.geolocation.watchPosition(success, error, options);
-
- -
-

Note : Si votre application fonctionne sous Firefox OS, veillez à la geolocation wake lock pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}{{Spec2('Geolocation')}}Specification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Geolocation.watchPosition")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/geolocation/watchposition/index.md b/files/fr/web/api/geolocation/watchposition/index.md new file mode 100644 index 0000000000..c2424f4774 --- /dev/null +++ b/files/fr/web/api/geolocation/watchposition/index.md @@ -0,0 +1,100 @@ +--- +title: Geolocation.watchPosition() +slug: Web/API/Geolocation/watchPosition +tags: + - API + - Exemple + - Géolocalisation + - Géolocalisation API + - Méthode + - Reference +translation_of: Web/API/Geolocation/watchPosition +--- +

{{ APIref("Geolocation API") }}

+ +

La méthode Geolocation.watchPosition() permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs.

+ +

Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}.

+ +

Syntaxe

+ +
id = navigator.geolocation.watchPosition(success[, error[, options]])
+ +

Paramètres

+ +
+
success
+
Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}.
+
error {{optional_inline}}
+
Nom d'une fonction optionnelle qui a pour paramètre l'objet {{domxref("PositionError")}}.
+
options {{optional_inline}}
+
Un objet optionnel {{domxref("PositionOptions")}}.
+
+ +

Exemple

+ +
var id, target, options;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    console.log('Bravo, vous avez atteint la cible');
+    navigator.geolocation.clearWatch(id);
+  }
+}
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+}
+
+target = {
+  latitude : 0,
+  longitude: 0
+};
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+
+ +
+

Note : Si votre application fonctionne sous Firefox OS, veillez à la geolocation wake lock pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}{{Spec2('Geolocation')}}Specification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Geolocation.watchPosition")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/geolocation_api/index.html b/files/fr/web/api/geolocation_api/index.html deleted file mode 100644 index 153bce57b2..0000000000 --- a/files/fr/web/api/geolocation_api/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: Geolocation API (API de géolocalisation) -slug: Web/API/Geolocation_API -tags: - - API - - GPS - - Geolocation - - Géolocalisation -translation_of: Web/API/Geolocation_API ---- -
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
- -

L'API Geolocation (pour géolocalisation) permet à un utilisateur d'indiquer sa localisation à une application web s'il le souhaite. Pour des raisons de vie privée, l'application doit demander la permission à l'utilisateur de manipuler ces informations.

- -

L'objet geolocation

- -

L'API Geolocation est publiée via l'objet {{domxref("navigator.geolocation")}}.

- -

Si l'objet existe, les services de géolocalisation sont disponibles. On peut donc tester la présence de ces fonctionnalités de cette façon :

- -
if ("geolocation" in navigator) {
-  /* la géolocalisation est disponible */
-} else {
-  /* la géolocalisation n'est pas disponible */
-}
-
- -
-

Note : Pour Firefox 24 et les versions antérieures, "geolocation" in navigator renvoyait toujours true même si l'API était désactivée. Cela a été corrigé à partir de Firefox 25 afin de respecter la spécification ({{bug(884921)}}).

-
- -

Obtenir la position actuelle

- -

Afin d'obtenir la position actuelle de l'utilisateur, on peut appeler la méthode {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Cela initie une requête asynchrone pour détecter la position de l'utilisateur en demandant au composant matériel une position à jour. Lorsque la position est déterminée, la fonction de callback est appelée. Il est possible de fournir un deuxième callback afin de gérer les erreurs. Le troisième paramètre de la fonction, optionnel, est un objet d'options qui indique l'âge maximal pour la position, le temps à attendre l'exécution de la requête et si on souhaite obtenir une précision élevée pour la position.

- -
-

Note : Par défaut {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tente de répondre aussi rapidement que possible quitte à ce que le résultat soit peu précis. Cela permet de répondre rapidement (potentiellement avec des données peu précises comme l'IP ou le WiFi) plutôt que d'attendre une ou plusieurs minutes le calibrage du GPS.

-
- -
navigator.geolocation.getCurrentPosition(function(position) {
-  faireQqc(position.coords.latitude, position.coords.longitude);
-});
- -

Dans l'exemple ci-avant, la fonction faireQqc() sera exécutée quand la localisation sera obtenue.

- -

Suivre l'évolution de la position

- -

Si les données de position changent (que l'appareil ait bougé ou que des informations de géolocalisation plus précises soient disponibles), on peut définir une fonction de callback qui sera appelée avec les informations mises à jour

- -

Pour cela, on utilise la fonction {{domxref("Geolocation.watchPosition()","watchPosition()")}} qui utilise les mêmes paramètres d'entrée que {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Ce callback est appelé plusieurs fois, permettant au navigateur de mettre à jour la position lorsqu'on se déplace ou lorsque des données plus précises sont fournies. La fonction de rappel pour la gestion des erreurs (optionnelle) peut aussi être appelée de façon répétée.

- -
-

Note : On peut utiliser {{domxref("Geolocation.watchPosition()","watchPosition()")}} sans avoir d'abord appelé {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

-
- -
var watchID = navigator.geolocation.watchPosition(function(position) {
-  faireQqc(position.coords.latitude, position.coords.longitude);
-});
- -

La méthode {{domxref("Geolocation.watchPosition()","watchPosition()")}} renvoie un identifiant qui peut être utilisé afin de redemander la position. Cet identifiant peut également être passé à la méthode {{domxref("Geolocation.clearWatch()","clearWatch()")}} afin d'arrêter le suivi de la position.

- -
navigator.geolocation.clearWatch(watchID);
-
- -

Paramétrer la réponse

- -

{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()","watchPosition()")}} prennent en argument un callback appelé en cas de succès, un deuxième callback (optionnel) appelé en cas d'erreur et un troisième argument (optionnel) qui est un objet PositionOptions.

- -

Un appel à {{domxref("Geolocation.watchPosition()","watchPosition")}} peut donc ressembler à :

- -
function geo_success(position) {
-  do_something(position.coords.latitude, position.coords.longitude);
-}
-
-function geo_error() {
-  alert("Sorry, no position available.");
-}
-
-var geo_options = {
-  enableHighAccuracy: true,
-  maximumAge        : 30000,
-  timeout           : 27000
-};
-
-var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
- -

Décrire une position

- -

La position de l'utilisateur est décrite par un objet {{domxref("Position")}} qui fait référence à un objet {{domxref("Coordinates")}} via la propriété coords.

- -

{{page("/fr/docs/Web/API/Position")}}

- -

{{page("/fr/docs/Web/API/Position/coords","Coordinates")}}

- -

Gérer les erreurs

- -

Le callback de gestion des erreurs (s'il est passé à getCurrentPosition() ou watchPosition()) s'attend à recevoir un objet PositionError comme premier paramètre.

- -
function errorCallback(error) {
-  alert('ERROR(' + error.code + '): ' + error.message);
-};
-
- -

Exemple interactif

- - - -

HTML

- -
<button id = "find-me">Montrer ma localisation</button><br/>
-<p id = "status"></p>
-<a id = "map-link" target="_blank"></a>
-
- -

JavaScript

- -
function geoFindMe() {
-
-  const status = document.querySelector('#status');
-  const mapLink = document.querySelector('#map-link');
-
-  mapLink.href = '';
-  mapLink.textContent = '';
-
-  function success(position) {
-    const latitude  = position.coords.latitude;
-    const longitude = position.coords.longitude;
-
-    status.textContent = '';
-    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
-    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
-  }
-
-  function error() {
-    status.textContent = 'Unable to retrieve your location';
-  }
-
-  if (!navigator.geolocation) {
-    status.textContent = 'Geolocation is not supported by your browser';
-  } else {
-    status.textContent = 'Locating…';
-    navigator.geolocation.getCurrentPosition(success, error);
-  }
-
-}
-
-document.querySelector('#find-me').addEventListener('click', geoFindMe);
-
- -

Résultat

- -

{{EmbedLiveSample('Exemple_interactif', 350, 150, "", "", "", "geolocation")}}

- -

Demander la permission

- -

Pour une extension, toute utilisation des données de géolocalisation ne peut se faire qu'après avoir obtenu la permission. La fonction qui suit permet de demander la permission de façon semblable au rendu des pages web. La réponse de l'utilisateur est enregistrée dans la préférence indiquée par le paramètre pref. La fonction fournie dans le paramètre de callback sera appelée avec une valeur booléenne qui indique la réponse de l'utilisateur. Lorsque cette dernière vaut true, le module complémentaire pourra accéder aux données de géolocalisation.

- -
function prompt(window, pref, message, callback) {
-    let branch = Components.classes["@mozilla.org/preferences-service;1"]
-                           .getService(Components.interfaces.nsIPrefBranch);
-
-    if (branch.getPrefType(pref) === branch.PREF_STRING) {
-        switch (branch.getCharPref(pref)) {
-        case "always":
-            return callback(true);
-        case "never":
-            return callback(false);
-        }
-    }
-
-    let done = false;
-
-    function remember(value, result) {
-        return function() {
-            done = true;
-            branch.setCharPref(pref, value);
-            callback(result);
-        }
-    }
-
-    let self = window.PopupNotifications.show(
-        window.gBrowser.selectedBrowser,
-        "geolocation",
-        message,
-        "geo-notification-icon",
-        {
-            label: "Share Location",
-            accessKey: "S",
-            callback: function(notification) {
-                done = true;
-                callback(true);
-            }
-        }, [
-            {
-                label: "Always Share",
-                accessKey: "A",
-                callback: remember("always", true)
-            },
-            {
-                label: "Never Share",
-                accessKey: "N",
-                callback: remember("never", false)
-            }
-        ], {
-            eventCallback: function(event) {
-                if (event === "dismissed") {
-                    if (!done) callback(false);
-                    done = true;
-                    window.PopupNotifications.remove(self);
-                }
-            },
-            persistWhileVisible: true
-        });
-}
-
-prompt(window,
-       "extensions.foo-addon.allowGeolocation",
-       "Foo Add-on wants to know your location.",
-       function callback(allowed) { alert(allowed); });
-
- -

Compatibilité des navigateurs

- -

{{Compat("api.Geolocation")}}

- -

Disponibilité

- -

La localisation basée sur le WiFi étant généralement obtenue via un service Google, l'API de géolocalisation peut être indisponible en Chine. Vous pouvez utiliser des fournisseurs tiers tels que Baidu, Autonavi ou Tencent. Ces services se basent sur l'adresse IP de l'utilisateur ou sur une application locale afin de fournir un positionnement amélioré.

- -

Voir aussi

- - diff --git a/files/fr/web/api/geolocation_api/index.md b/files/fr/web/api/geolocation_api/index.md new file mode 100644 index 0000000000..153bce57b2 --- /dev/null +++ b/files/fr/web/api/geolocation_api/index.md @@ -0,0 +1,244 @@ +--- +title: Geolocation API (API de géolocalisation) +slug: Web/API/Geolocation_API +tags: + - API + - GPS + - Geolocation + - Géolocalisation +translation_of: Web/API/Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

L'API Geolocation (pour géolocalisation) permet à un utilisateur d'indiquer sa localisation à une application web s'il le souhaite. Pour des raisons de vie privée, l'application doit demander la permission à l'utilisateur de manipuler ces informations.

+ +

L'objet geolocation

+ +

L'API Geolocation est publiée via l'objet {{domxref("navigator.geolocation")}}.

+ +

Si l'objet existe, les services de géolocalisation sont disponibles. On peut donc tester la présence de ces fonctionnalités de cette façon :

+ +
if ("geolocation" in navigator) {
+  /* la géolocalisation est disponible */
+} else {
+  /* la géolocalisation n'est pas disponible */
+}
+
+ +
+

Note : Pour Firefox 24 et les versions antérieures, "geolocation" in navigator renvoyait toujours true même si l'API était désactivée. Cela a été corrigé à partir de Firefox 25 afin de respecter la spécification ({{bug(884921)}}).

+
+ +

Obtenir la position actuelle

+ +

Afin d'obtenir la position actuelle de l'utilisateur, on peut appeler la méthode {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Cela initie une requête asynchrone pour détecter la position de l'utilisateur en demandant au composant matériel une position à jour. Lorsque la position est déterminée, la fonction de callback est appelée. Il est possible de fournir un deuxième callback afin de gérer les erreurs. Le troisième paramètre de la fonction, optionnel, est un objet d'options qui indique l'âge maximal pour la position, le temps à attendre l'exécution de la requête et si on souhaite obtenir une précision élevée pour la position.

+ +
+

Note : Par défaut {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tente de répondre aussi rapidement que possible quitte à ce que le résultat soit peu précis. Cela permet de répondre rapidement (potentiellement avec des données peu précises comme l'IP ou le WiFi) plutôt que d'attendre une ou plusieurs minutes le calibrage du GPS.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  faireQqc(position.coords.latitude, position.coords.longitude);
+});
+ +

Dans l'exemple ci-avant, la fonction faireQqc() sera exécutée quand la localisation sera obtenue.

+ +

Suivre l'évolution de la position

+ +

Si les données de position changent (que l'appareil ait bougé ou que des informations de géolocalisation plus précises soient disponibles), on peut définir une fonction de callback qui sera appelée avec les informations mises à jour

+ +

Pour cela, on utilise la fonction {{domxref("Geolocation.watchPosition()","watchPosition()")}} qui utilise les mêmes paramètres d'entrée que {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Ce callback est appelé plusieurs fois, permettant au navigateur de mettre à jour la position lorsqu'on se déplace ou lorsque des données plus précises sont fournies. La fonction de rappel pour la gestion des erreurs (optionnelle) peut aussi être appelée de façon répétée.

+ +
+

Note : On peut utiliser {{domxref("Geolocation.watchPosition()","watchPosition()")}} sans avoir d'abord appelé {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  faireQqc(position.coords.latitude, position.coords.longitude);
+});
+ +

La méthode {{domxref("Geolocation.watchPosition()","watchPosition()")}} renvoie un identifiant qui peut être utilisé afin de redemander la position. Cet identifiant peut également être passé à la méthode {{domxref("Geolocation.clearWatch()","clearWatch()")}} afin d'arrêter le suivi de la position.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Paramétrer la réponse

+ +

{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()","watchPosition()")}} prennent en argument un callback appelé en cas de succès, un deuxième callback (optionnel) appelé en cas d'erreur et un troisième argument (optionnel) qui est un objet PositionOptions.

+ +

Un appel à {{domxref("Geolocation.watchPosition()","watchPosition")}} peut donc ressembler à :

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

Décrire une position

+ +

La position de l'utilisateur est décrite par un objet {{domxref("Position")}} qui fait référence à un objet {{domxref("Coordinates")}} via la propriété coords.

+ +

{{page("/fr/docs/Web/API/Position")}}

+ +

{{page("/fr/docs/Web/API/Position/coords","Coordinates")}}

+ +

Gérer les erreurs

+ +

Le callback de gestion des erreurs (s'il est passé à getCurrentPosition() ou watchPosition()) s'attend à recevoir un objet PositionError comme premier paramètre.

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

Exemple interactif

+ + + +

HTML

+ +
<button id = "find-me">Montrer ma localisation</button><br/>
+<p id = "status"></p>
+<a id = "map-link" target="_blank"></a>
+
+ +

JavaScript

+ +
function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if (!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_interactif', 350, 150, "", "", "", "geolocation")}}

+ +

Demander la permission

+ +

Pour une extension, toute utilisation des données de géolocalisation ne peut se faire qu'après avoir obtenu la permission. La fonction qui suit permet de demander la permission de façon semblable au rendu des pages web. La réponse de l'utilisateur est enregistrée dans la préférence indiquée par le paramètre pref. La fonction fournie dans le paramètre de callback sera appelée avec une valeur booléenne qui indique la réponse de l'utilisateur. Lorsque cette dernière vaut true, le module complémentaire pourra accéder aux données de géolocalisation.

+ +
function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Geolocation")}}

+ +

Disponibilité

+ +

La localisation basée sur le WiFi étant généralement obtenue via un service Google, l'API de géolocalisation peut être indisponible en Chine. Vous pouvez utiliser des fournisseurs tiers tels que Baidu, Autonavi ou Tencent. Ces services se basent sur l'adresse IP de l'utilisateur ou sur une application locale afin de fournir un positionnement amélioré.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/geolocationcoordinates/index.html b/files/fr/web/api/geolocationcoordinates/index.html deleted file mode 100644 index f7897746b3..0000000000 --- a/files/fr/web/api/geolocationcoordinates/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Coordinates -slug: Web/API/GeolocationCoordinates -translation_of: Web/API/GeolocationCoordinates ---- -
{{securecontext_header}}{{APIRef("Geolocation API")}}
- -
L'interface Coordinates représente la position et l'altitude du périphérique sur Terre, ainsi que la précision avec lesquels ces propriétés sont calculées.
- -

Propriétés

- -

L'interface Coordinates n'hérite d'aucune propriété.

- -
-
{{domxref("Coordinates.latitude")}} {{readonlyInline}} {{securecontext_inline}}
-
Renvoie un double représentant la latitude en degrés décimaux.
-
{{domxref("Coordinates.longitude")}} {{readonlyInline}} {{securecontext_inline}}
-
Renvoie un double représentant la longitude en degrés décimaux.
-
{{domxref("Coordinates.altitude")}} {{readonlyInline}} {{securecontext_inline}}
-
Renvoie un double représentant l'altitude en mètres, relatif au niveau de la mer. Cette valeur peut être null si l'implémentation ne peut pas fournir de données.
-
{{domxref("Coordinates.accuracy")}} {{readonlyInline}} {{securecontext_inline}}
-
Renvoie un double représentant la précision des propriétés latitude et longitude , exprimé en mètres.
-
{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}
-
Renvoie un double représentant la précision de l'altitude . Cette valeur peut être null.
-
{{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}
-
Renvoie un double représentant la direction dans laquelle le périphérique se déplace. Cette valeur, spécifiée en degrés, indique la distance à laquelle le périphérique se trouve par rapport au Vrai Nord. 0 degrés représente le Vrai Nord, la direction est déterminé suivant le sens horaire des aiguilles d'une montre (ce qui veut dire que l'Est se trouve à 90 degrés et l'Ouest à 270 degrés). Si speed est à 0, heading est alors NaN. Si le périphérique est incapable de fournir des informations relatives à l'endroit où il se déplace (heading), cette valeur est alors null.
-
{{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}
-
Renvoie un double représentant la vélocité du périphérique en mètres par seconde. Cette valeur peut être null.
-
- -

Méthodes

- -

L'interface Coordinates n'implémente et n'hérite d'aucune méthode.

- -

 

- -

Spécifications

- -

 

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#coordinates', 'Coordinates')}}{{Spec2('Geolocation')}}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.GeolocationCoordinates")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/geolocationcoordinates/index.md b/files/fr/web/api/geolocationcoordinates/index.md new file mode 100644 index 0000000000..f7897746b3 --- /dev/null +++ b/files/fr/web/api/geolocationcoordinates/index.md @@ -0,0 +1,67 @@ +--- +title: Coordinates +slug: Web/API/GeolocationCoordinates +translation_of: Web/API/GeolocationCoordinates +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +
L'interface Coordinates représente la position et l'altitude du périphérique sur Terre, ainsi que la précision avec lesquels ces propriétés sont calculées.
+ +

Propriétés

+ +

L'interface Coordinates n'hérite d'aucune propriété.

+ +
+
{{domxref("Coordinates.latitude")}} {{readonlyInline}} {{securecontext_inline}}
+
Renvoie un double représentant la latitude en degrés décimaux.
+
{{domxref("Coordinates.longitude")}} {{readonlyInline}} {{securecontext_inline}}
+
Renvoie un double représentant la longitude en degrés décimaux.
+
{{domxref("Coordinates.altitude")}} {{readonlyInline}} {{securecontext_inline}}
+
Renvoie un double représentant l'altitude en mètres, relatif au niveau de la mer. Cette valeur peut être null si l'implémentation ne peut pas fournir de données.
+
{{domxref("Coordinates.accuracy")}} {{readonlyInline}} {{securecontext_inline}}
+
Renvoie un double représentant la précision des propriétés latitude et longitude , exprimé en mètres.
+
{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}
+
Renvoie un double représentant la précision de l'altitude . Cette valeur peut être null.
+
{{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}
+
Renvoie un double représentant la direction dans laquelle le périphérique se déplace. Cette valeur, spécifiée en degrés, indique la distance à laquelle le périphérique se trouve par rapport au Vrai Nord. 0 degrés représente le Vrai Nord, la direction est déterminé suivant le sens horaire des aiguilles d'une montre (ce qui veut dire que l'Est se trouve à 90 degrés et l'Ouest à 270 degrés). Si speed est à 0, heading est alors NaN. Si le périphérique est incapable de fournir des informations relatives à l'endroit où il se déplace (heading), cette valeur est alors null.
+
{{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}
+
Renvoie un double représentant la vélocité du périphérique en mètres par seconde. Cette valeur peut être null.
+
+ +

Méthodes

+ +

L'interface Coordinates n'implémente et n'hérite d'aucune méthode.

+ +

 

+ +

Spécifications

+ +

 

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#coordinates', 'Coordinates')}}{{Spec2('Geolocation')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.GeolocationCoordinates")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/geolocationposition/index.html b/files/fr/web/api/geolocationposition/index.html deleted file mode 100644 index d52abf198c..0000000000 --- a/files/fr/web/api/geolocationposition/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: GeolocationPosition -slug: Web/API/GeolocationPosition -tags: - - API - - Geolocation API - - GeolocationPosition - - Interface - - Secure context - - TopicStub -translation_of: Web/API/GeolocationPosition ---- -
{{securecontext_header}}{{APIRef("Geolocation API")}}
- -

L'interface GeolocationPosition représente la position de l'appareil concerné à un instant donné. La position, représentée par un objet {{domxref("GeolocationCoordinates")}}, comprend la position 2D de l'appareil, sur un sphéroïde représentant la Terre, mais aussi son altitude et sa vitesse.

- -

Propriétés

- -

L'interface GeolocationPosition n'hérite d'aucune propriété.

- -
-
{{domxref("GeolocationPosition.coords")}} {{readonlyInline}} {{securecontext_inline}}
-
Renvoie un objet {{domxref("GeolocationCoordinates")}} définissant l'emplacement actuel.
-
{{domxref("GeolocationPosition.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
-
Renvoie un {{domxref("DOMTimeStamp")}} représentant l'heure à laquelle l'emplacement a été récupéré.
-
- -

Méthodes

- -

L'interface GeolocationPosition n'implémente ni n'hérite d'aucune méthode.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#position_interface', 'GeolocationPosition')}}{{Spec2('Geolocation')}}Spécification initale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.GeolocationPosition")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/geolocationposition/index.md b/files/fr/web/api/geolocationposition/index.md new file mode 100644 index 0000000000..d52abf198c --- /dev/null +++ b/files/fr/web/api/geolocationposition/index.md @@ -0,0 +1,60 @@ +--- +title: GeolocationPosition +slug: Web/API/GeolocationPosition +tags: + - API + - Geolocation API + - GeolocationPosition + - Interface + - Secure context + - TopicStub +translation_of: Web/API/GeolocationPosition +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

L'interface GeolocationPosition représente la position de l'appareil concerné à un instant donné. La position, représentée par un objet {{domxref("GeolocationCoordinates")}}, comprend la position 2D de l'appareil, sur un sphéroïde représentant la Terre, mais aussi son altitude et sa vitesse.

+ +

Propriétés

+ +

L'interface GeolocationPosition n'hérite d'aucune propriété.

+ +
+
{{domxref("GeolocationPosition.coords")}} {{readonlyInline}} {{securecontext_inline}}
+
Renvoie un objet {{domxref("GeolocationCoordinates")}} définissant l'emplacement actuel.
+
{{domxref("GeolocationPosition.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
+
Renvoie un {{domxref("DOMTimeStamp")}} représentant l'heure à laquelle l'emplacement a été récupéré.
+
+ +

Méthodes

+ +

L'interface GeolocationPosition n'implémente ni n'hérite d'aucune méthode.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#position_interface', 'GeolocationPosition')}}{{Spec2('Geolocation')}}Spécification initale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.GeolocationPosition")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/geolocationposition/timestamp/index.html b/files/fr/web/api/geolocationposition/timestamp/index.html deleted file mode 100644 index 460fb29213..0000000000 --- a/files/fr/web/api/geolocationposition/timestamp/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: GeolocationPosition.timestamp -slug: Web/API/GeolocationPosition/timestamp -translation_of: Web/API/GeolocationPosition/timestamp ---- -
{{securecontext_header}}{{APIRef("Geolocation API")}}
- -

La propriété en lecture seule GeolocationPosition.timestamp retourne un objet {{domxref("DOMTimeStamp")}} représentant la date et l'heure de la création de l'objet {{domxref("GeolocationPosition")}} auquel il appartient. La précision est de l'ordre de la milliseconde.

- -

Syntaxe

- -
var timestamp = geolocationPositionInstance.timestamp
-
- -

Valeur

- -

Un objet {{domxref("DOMTimeStamp")}}.

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#dom-geolocationposition-timestamp', 'GeolocationPosition.timestamp')}}{{Spec2('Geolocation')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.GeolocationPosition.timestamp")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/geolocationposition/timestamp/index.md b/files/fr/web/api/geolocationposition/timestamp/index.md new file mode 100644 index 0000000000..460fb29213 --- /dev/null +++ b/files/fr/web/api/geolocationposition/timestamp/index.md @@ -0,0 +1,49 @@ +--- +title: GeolocationPosition.timestamp +slug: Web/API/GeolocationPosition/timestamp +translation_of: Web/API/GeolocationPosition/timestamp +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

La propriété en lecture seule GeolocationPosition.timestamp retourne un objet {{domxref("DOMTimeStamp")}} représentant la date et l'heure de la création de l'objet {{domxref("GeolocationPosition")}} auquel il appartient. La précision est de l'ordre de la milliseconde.

+ +

Syntaxe

+ +
var timestamp = geolocationPositionInstance.timestamp
+
+ +

Valeur

+ +

Un objet {{domxref("DOMTimeStamp")}}.

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#dom-geolocationposition-timestamp', 'GeolocationPosition.timestamp')}}{{Spec2('Geolocation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.GeolocationPosition.timestamp")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/geolocationpositionerror/index.html b/files/fr/web/api/geolocationpositionerror/index.html deleted file mode 100644 index 9a7f5a0af1..0000000000 --- a/files/fr/web/api/geolocationpositionerror/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: GeolocationPositionError -slug: Web/API/GeolocationPositionError -translation_of: Web/API/GeolocationPositionError ---- -
{{securecontext_header}}{{APIRef("Geolocation API")}}
- -

L'interface GeolocationPositionError représente la raison de l'erreur apparue lorsque l'on utilise la géolocalisation de l'appareil.

- -

Propriétés

- -

L'interface GeolocationPositionError n'hérite d'aucune propriété.

- -
-
{{domxref("GeolocationPositionError.code")}} {{readonlyInline}} {{securecontext_inline}}
-
Retourne un unsigned short représentant un code d'erreur. Les valeurs possibles sont: - - - - - - - - - - - - - - - - - - - - - - - -
ValeurConstante associéeDescription
1PERMISSION_DENIEDL’acquisition de la position échoue car la page n'a pas l'autorisation de le faire.
2POSITION_UNAVAILABLEL’acquisition de la localisation échoue car au moins une source donnant la position a retourné une erreur interne.
3TIMEOUTLe temps alloué pour obtenir la position défini par {{domxref("PositionOptions.timeout")}} est écoulé avant que l'information soit obtenu.
-
-
{{domxref("GeolocationPositionError.message")}} {{readonlyInline}} {{securecontext_inline}}
-
Retourne une {{domxref("DOMString")}} compréhensible par un humain décrivant les détails de l'erreur. Les spécifications indiquent que cela sert au débogage et ne doit pas être directement affiché à l'utilisateur.
-
- -

Méthodes

- -

L'interface GeolocationPositionError n'implémente et n'hérite d'aucune méthode.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Geolocation', '#position_error_interface', 'GeolocationPositionError')}}{{Spec2('Geolocation')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.GeolocationPositionError")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/geolocationpositionerror/index.md b/files/fr/web/api/geolocationpositionerror/index.md new file mode 100644 index 0000000000..9a7f5a0af1 --- /dev/null +++ b/files/fr/web/api/geolocationpositionerror/index.md @@ -0,0 +1,80 @@ +--- +title: GeolocationPositionError +slug: Web/API/GeolocationPositionError +translation_of: Web/API/GeolocationPositionError +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

L'interface GeolocationPositionError représente la raison de l'erreur apparue lorsque l'on utilise la géolocalisation de l'appareil.

+ +

Propriétés

+ +

L'interface GeolocationPositionError n'hérite d'aucune propriété.

+ +
+
{{domxref("GeolocationPositionError.code")}} {{readonlyInline}} {{securecontext_inline}}
+
Retourne un unsigned short représentant un code d'erreur. Les valeurs possibles sont: + + + + + + + + + + + + + + + + + + + + + + + +
ValeurConstante associéeDescription
1PERMISSION_DENIEDL’acquisition de la position échoue car la page n'a pas l'autorisation de le faire.
2POSITION_UNAVAILABLEL’acquisition de la localisation échoue car au moins une source donnant la position a retourné une erreur interne.
3TIMEOUTLe temps alloué pour obtenir la position défini par {{domxref("PositionOptions.timeout")}} est écoulé avant que l'information soit obtenu.
+
+
{{domxref("GeolocationPositionError.message")}} {{readonlyInline}} {{securecontext_inline}}
+
Retourne une {{domxref("DOMString")}} compréhensible par un humain décrivant les détails de l'erreur. Les spécifications indiquent que cela sert au débogage et ne doit pas être directement affiché à l'utilisateur.
+
+ +

Méthodes

+ +

L'interface GeolocationPositionError n'implémente et n'hérite d'aucune méthode.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Geolocation', '#position_error_interface', 'GeolocationPositionError')}}{{Spec2('Geolocation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.GeolocationPositionError")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/gestureevent/index.html b/files/fr/web/api/gestureevent/index.html deleted file mode 100644 index e69a862368..0000000000 --- a/files/fr/web/api/gestureevent/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: GestureEvent -slug: Web/API/GestureEvent -tags: - - API - - DOM - - Evènement - - Interface -translation_of: Web/API/GestureEvent ---- -

{{APIRef("DOM Events")}}

- -

{{Non-standard_header()}}

- -

L'interface propriétaire GestureEvent propre à WebKitdonne des informations sur les gestes multi-touches. Les événements utilisant cette interface incluent {{event("gesturestart")}}, {{event("gesturechange")}} et {{event("gestureend")}}.

- -

GestureEvent dérive de {{domxref("UIEvent")}} qui elle-même dérive de {{domxref("Event")}}.

- -

Constructeur

- -
-
{{domxref("GestureEvent.GestureEvent", "GestureEvent()")}}
-
Crée un nouvel objet GestureEvent.
-
- -

Propriétés

- -

Cette interface hérite aussi des propriétés de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.

- -
-
{{domxref("GestureEvent.rotation")}} {{readonlyinline}}
-
Changement de rotation (en degrés) depuis le début de l'événement. Les valeurs positives indiquent une rotation dans le sens des aiguilles d'une montre ; les valeurs négatives indiquent une rotation dans le sens inverse des aiguilles d'une montre. Valeur initiale : 0.0
-
{{domxref("GestureEvent.scale")}} {{readonlyinline}}
-
Distance entre deux chiffres depuis le début de l'événement. Exprimé en tant que multiple à virgule flottante de la distance initiale entre les chiffres au début du geste. Les valeurs inférieures à 1,0 indiquent une poussée vers l'intérieur (zoom arrière). Les valeurs supérieures à 1.0 indiquent un relachement vers l'extérieur (zoom avant). Valeur initiale: 1.0
-
- -

Méthodes

- -

Cette interface hérite aussi des méthodes de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.

- -
-
{{domxref("GestureEvent.initGestureEvent()")}}
-
Initialise la valeur d'un GestureEvent. Si l'évènement a déjà été distribué, cette méthode ne fait rien.
-
- -

Types d'événement gestuel

- - - -

Spécifications

- -

Ne fait partie d'aucune spécification. Apple a une description dans la bibliothèque Safari Developer.

- -

Compatibilité des navigateurs

- -

{{Compat("api.GestureEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/gestureevent/index.md b/files/fr/web/api/gestureevent/index.md new file mode 100644 index 0000000000..e69a862368 --- /dev/null +++ b/files/fr/web/api/gestureevent/index.md @@ -0,0 +1,72 @@ +--- +title: GestureEvent +slug: Web/API/GestureEvent +tags: + - API + - DOM + - Evènement + - Interface +translation_of: Web/API/GestureEvent +--- +

{{APIRef("DOM Events")}}

+ +

{{Non-standard_header()}}

+ +

L'interface propriétaire GestureEvent propre à WebKitdonne des informations sur les gestes multi-touches. Les événements utilisant cette interface incluent {{event("gesturestart")}}, {{event("gesturechange")}} et {{event("gestureend")}}.

+ +

GestureEvent dérive de {{domxref("UIEvent")}} qui elle-même dérive de {{domxref("Event")}}.

+ +

Constructeur

+ +
+
{{domxref("GestureEvent.GestureEvent", "GestureEvent()")}}
+
Crée un nouvel objet GestureEvent.
+
+ +

Propriétés

+ +

Cette interface hérite aussi des propriétés de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.

+ +
+
{{domxref("GestureEvent.rotation")}} {{readonlyinline}}
+
Changement de rotation (en degrés) depuis le début de l'événement. Les valeurs positives indiquent une rotation dans le sens des aiguilles d'une montre ; les valeurs négatives indiquent une rotation dans le sens inverse des aiguilles d'une montre. Valeur initiale : 0.0
+
{{domxref("GestureEvent.scale")}} {{readonlyinline}}
+
Distance entre deux chiffres depuis le début de l'événement. Exprimé en tant que multiple à virgule flottante de la distance initiale entre les chiffres au début du geste. Les valeurs inférieures à 1,0 indiquent une poussée vers l'intérieur (zoom arrière). Les valeurs supérieures à 1.0 indiquent un relachement vers l'extérieur (zoom avant). Valeur initiale: 1.0
+
+ +

Méthodes

+ +

Cette interface hérite aussi des méthodes de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.

+ +
+
{{domxref("GestureEvent.initGestureEvent()")}}
+
Initialise la valeur d'un GestureEvent. Si l'évènement a déjà été distribué, cette méthode ne fait rien.
+
+ +

Types d'événement gestuel

+ + + +

Spécifications

+ +

Ne fait partie d'aucune spécification. Apple a une description dans la bibliothèque Safari Developer.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.GestureEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/globaleventhandlers/index.html b/files/fr/web/api/globaleventhandlers/index.html deleted file mode 100644 index 7c24f31bb7..0000000000 --- a/files/fr/web/api/globaleventhandlers/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: GlobalEventHandlers -slug: Web/API/GlobalEventHandlers -tags: - - API - - DOM - - Gestionnaires d'évènements - - évènements -translation_of: Web/API/GlobalEventHandlers ---- -
-
{{ ApiRef("HTML DOM") }}
-
- -

L'interface GlobalEventHandlers décrit les gestionnaires d'évènements usuels de nombreuses interfaces comme {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers. Chacune de ces interfaces peut implémenter plus de gestionnaires d'évènements.

- -

GlobalEventHandlers est une interface brute et aucun objet de ce type ne peut être créé.

- -

Propriétés

- -

Les propriétés des évènements, de la forme onXYZ, sont définies sur {{domxref("GlobalEventHandlers")}} et implémentées par {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}} pour les Web Workers.

- -
-
{{domxref("GlobalEventHandlers.onabort")}}
-
Est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event ("abort")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
-
un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("animationcancel")}} est envoyé, indiquant que l'exécution de l'animation CSS a été abandonnée.
-
{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
-
un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("animationend")}} est envoyé, indiquant que l'exécution de l'animation CSS a été abandonnée.
-
{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
-
un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("animationiteration")}} est envoyé , indiquant qu'une animation CSS a commencé à jouer une nouvelle itération de la séquence d'animation.
-
{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
-
un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("animationstart")}} est envoyé , indiquant qu'une animation CSS a commencé.
-
{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
-
un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("auxclick")}} est envoyé , indiquant qu'un bouton non primaire a été enfoncé sur le périphérique d'entrée (par exemple, un bouton du milieu de la souris).
-
{{domxref("GlobalEventHandlers.onblur")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("blur")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onerror")}}
-
est un {{domxref("OnErrorEventHandler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("error")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onfocus")}}
-
est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'évènement {{event("focus")}} est déclenché.
-
{{domxref("GlobalEventHandlers.oncancel")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("cancel")}} est déclenché.
-
{{domxref("GlobalEventHandlers.oncanplay")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("canplay")}} est déclenché.
-
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("canplaythrough")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onchange")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("change")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onclick")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("click")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onclose")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("close")}} est déclenché.
-
{{domxref("GlobalEventHandlers.oncontextmenu")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("contextmenu")}} est déclenché.
-
{{domxref("GlobalEventHandlers.oncuechange")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("cuechange")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ondblclick")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dblclick")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ondrag")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("drag")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ondragend")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragend")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ondragenter")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragenter")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ondragexit")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragexit")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ondragleave")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragleave")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ondragover")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragover")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ondragstart")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragstart")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ondrop")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("drop")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ondurationchange")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("durationchange")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onemptied")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("emptied")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onended")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("ended")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ongotpointercapture")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque le type d'événement {{event("gotpointercapture")}} est déclenché.
-
{{domxref("GlobalEventHandlers.oninput")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("input")}} est déclenché.
-
{{domxref("GlobalEventHandlers.oninvalid")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("invalid")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onkeydown")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("keydown")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onkeypress")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("keypress")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onkeyup")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("keyup")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onload")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("load")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onloadeddata")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("loadeddata")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("loadedmetadata")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onloadend")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("loadend")}} est déclenché (lorsque la progression s'est arrêtée sur le chargement d'une ressource).
-
{{domxref("GlobalEventHandlers.onloadstart")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("loadstart")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onlostpointercapture")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque le type d'événement {{event("lostpointercapture")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onmousedown")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mousedown")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onmouseenter")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mouseenter")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onmouseleave")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mouseleave")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onmousemove")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mousemove")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onmouseout")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mouseout")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onmouseover")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mouseover")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onmouseup")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mouseup")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser  onwheel à la place.
-
{{ domxref("GlobalEventHandlers.onwheel") }}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("wheel")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpause")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pause")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onplay")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("play")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onplaying")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("playing")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpointerdown")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerdown")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpointermove")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointermove")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpointerup")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerup")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpointercancel")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointercancel")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpointerover")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerover")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpointerout")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerout")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpointerenter")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerevent")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpointerleave")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerleave")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerlockchange")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerlockerror")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onprogress")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("progress")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onratechange")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("ratechange")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onreset")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("reset")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onscroll")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("scroll")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onseeked")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("seeked")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onseeking")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("seeking")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onselect")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("select")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onselectstart")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand l'utilisateur commence une nouvelle sélection de texte sur une page web.
-
{{domxref("GlobalEventHandlers.onselectionchange")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand le texte sélectionné sur une page web change.
-
{{domxref("GlobalEventHandlers.onshow")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("show")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("sort")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onstalled")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("stalled")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onsubmit")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("submit")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onsuspend")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("suspend")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ontimeupdate")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("timeupdate")}} est déclenché.
-
{{domxref("GlobalEventHandlers.onvolumechange")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("volumechange")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("touchcancel")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("touchend")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("touchmove")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("touchstart")}} est déclenché.
-
{{domxref("GlobalEventHandlers.ontransitioncancel")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("transitioncancel")}} est envoyé, indiquant qu'une transition CSS a été abandonnée.
-
{{domxref("GlobalEventHandlers.ontransitionend")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("transitionend")}} est envoyé, indiquant qu'une transition CSS est terminée.
-
{{domxref("GlobalEventHandlers.onwaiting")}}
-
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("waiting")}} est déclenché.
-
- -

Méthodes

- -

Cette interface ne définit aucune méthode.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}Ajoute onselectionchange.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Ajouteonpointerlockchange et onpointerlockerror sur{{domxref("Document")}}. Est implémenté expérimentalement GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le précédent {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Instantané de {{SpecName("HTML WHATWG")}}. onsort ajouté depuis {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName("HTML WHATWG")}}. Création de GlobalEventHandlers.
- -

Compatibilité des navigateurs

- -

{{Compat("api.GlobalEventHandlers")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/globaleventhandlers/index.md b/files/fr/web/api/globaleventhandlers/index.md new file mode 100644 index 0000000000..7c24f31bb7 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/index.md @@ -0,0 +1,251 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - Gestionnaires d'évènements + - évènements +translation_of: Web/API/GlobalEventHandlers +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +

L'interface GlobalEventHandlers décrit les gestionnaires d'évènements usuels de nombreuses interfaces comme {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers. Chacune de ces interfaces peut implémenter plus de gestionnaires d'évènements.

+ +

GlobalEventHandlers est une interface brute et aucun objet de ce type ne peut être créé.

+ +

Propriétés

+ +

Les propriétés des évènements, de la forme onXYZ, sont définies sur {{domxref("GlobalEventHandlers")}} et implémentées par {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}} pour les Web Workers.

+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event ("abort")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+
un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("animationcancel")}} est envoyé, indiquant que l'exécution de l'animation CSS a été abandonnée.
+
{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+
un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("animationend")}} est envoyé, indiquant que l'exécution de l'animation CSS a été abandonnée.
+
{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
+
un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("animationiteration")}} est envoyé , indiquant qu'une animation CSS a commencé à jouer une nouvelle itération de la séquence d'animation.
+
{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
+
un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("animationstart")}} est envoyé , indiquant qu'une animation CSS a commencé.
+
{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
+
un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("auxclick")}} est envoyé , indiquant qu'un bouton non primaire a été enfoncé sur le périphérique d'entrée (par exemple, un bouton du milieu de la souris).
+
{{domxref("GlobalEventHandlers.onblur")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("blur")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onerror")}}
+
est un {{domxref("OnErrorEventHandler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("error")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'évènement {{event("focus")}} est déclenché.
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("cancel")}} est déclenché.
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("canplay")}} est déclenché.
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("canplaythrough")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("change")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("click")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("close")}} est déclenché.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("contextmenu")}} est déclenché.
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("cuechange")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dblclick")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("drag")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragend")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragenter")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragexit")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragleave")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragover")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("dragstart")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("drop")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("durationchange")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("emptied")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onended")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsqu'un événement {{event("ended")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ongotpointercapture")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque le type d'événement {{event("gotpointercapture")}} est déclenché.
+
{{domxref("GlobalEventHandlers.oninput")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("input")}} est déclenché.
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("invalid")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("keydown")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("keypress")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("keyup")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onload")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("load")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("loadeddata")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("loadedmetadata")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onloadend")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("loadend")}} est déclenché (lorsque la progression s'est arrêtée sur le chargement d'une ressource).
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("loadstart")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onlostpointercapture")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque le type d'événement {{event("lostpointercapture")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mousedown")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mouseenter")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mouseleave")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mousemove")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mouseout")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mouseover")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mouseup")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser  onwheel à la place.
+
{{ domxref("GlobalEventHandlers.onwheel") }}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("wheel")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpause")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pause")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onplay")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("play")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("playing")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerdown")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointermove")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerup")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointercancel")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerover")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerout")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerevent")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerleave")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerlockchange")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("pointerlockerror")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("progress")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("ratechange")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("reset")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("scroll")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("seeked")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("seeking")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("select")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onselectstart")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand l'utilisateur commence une nouvelle sélection de texte sur une page web.
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand le texte sélectionné sur une page web change.
+
{{domxref("GlobalEventHandlers.onshow")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("show")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("sort")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("stalled")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("submit")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("suspend")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("timeupdate")}} est déclenché.
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("volumechange")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("touchcancel")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("touchend")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("touchmove")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("touchstart")}} est déclenché.
+
{{domxref("GlobalEventHandlers.ontransitioncancel")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("transitioncancel")}} est envoyé, indiquant qu'une transition CSS a été abandonnée.
+
{{domxref("GlobalEventHandlers.ontransitionend")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsqu'un évènement {{event("transitionend")}} est envoyé, indiquant qu'une transition CSS est terminée.
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'événement {{event("waiting")}} est déclenché.
+
+ +

Méthodes

+ +

Cette interface ne définit aucune méthode.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}Ajoute onselectionchange.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Ajouteonpointerlockchange et onpointerlockerror sur{{domxref("Document")}}. Est implémenté expérimentalement GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le précédent {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Instantané de {{SpecName("HTML WHATWG")}}. onsort ajouté depuis {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName("HTML WHATWG")}}. Création de GlobalEventHandlers.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.GlobalEventHandlers")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/globaleventhandlers/onabort/index.html b/files/fr/web/api/globaleventhandlers/onabort/index.html deleted file mode 100644 index 746e9fa76e..0000000000 --- a/files/fr/web/api/globaleventhandlers/onabort/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: GlobalEventHandlers.onabort -slug: Web/API/GlobalEventHandlers/onabort -tags: - - API - - NeedContent - - Property - - Reference - - Window -translation_of: Web/API/GlobalEventHandlers/onabort ---- -
{{ ApiRef("HTML DOM") }}
- -

Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari).

- -

Bien que le standard pour l'abandon d'un chargement de document soit défini, le problème HTML N° 3525 suggère que les navigateurs ne déclenchent pas pour l'instant l'événement "abort" sur une window qui déclencherait un appel à onabort.

- -

À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises img.

- -

Syntaxe

- -
window.onabort = refFonc
-
- - - -

Exemple

- -
window.onabort = function() {
-  alert("Chargement interrompu.");
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.GlobalEventHandlers.onabort")}}

diff --git a/files/fr/web/api/globaleventhandlers/onabort/index.md b/files/fr/web/api/globaleventhandlers/onabort/index.md new file mode 100644 index 0000000000..746e9fa76e --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onabort/index.md @@ -0,0 +1,54 @@ +--- +title: GlobalEventHandlers.onabort +slug: Web/API/GlobalEventHandlers/onabort +tags: + - API + - NeedContent + - Property + - Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onabort +--- +
{{ ApiRef("HTML DOM") }}
+ +

Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari).

+ +

Bien que le standard pour l'abandon d'un chargement de document soit défini, le problème HTML N° 3525 suggère que les navigateurs ne déclenchent pas pour l'instant l'événement "abort" sur une window qui déclencherait un appel à onabort.

+ +

À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises img.

+ +

Syntaxe

+ +
window.onabort = refFonc
+
+ + + +

Exemple

+ +
window.onabort = function() {
+  alert("Chargement interrompu.");
+}
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.GlobalEventHandlers.onabort")}}

diff --git a/files/fr/web/api/globaleventhandlers/onauxclick/index.html b/files/fr/web/api/globaleventhandlers/onauxclick/index.html deleted file mode 100644 index edf6be44f6..0000000000 --- a/files/fr/web/api/globaleventhandlers/onauxclick/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: GlobalEventHandlers.onauxclick -slug: Web/API/GlobalEventHandlers/onauxclick -tags: - - API - - Expérimentale - - Propriété - - Reference -translation_of: Web/API/GlobalEventHandlers/onauxclick ---- -
{{ApiRef("HTML DOM")}} {{SeeCompatTable}}
- -

La propriété onauxclick du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} pour le traitement des événements {{event("auxclick")}}.

- -

L'événement auxclick est déclenché lorsqu'un bouton non principal a été enfoncé sur un périphérique d'entrée (par exemple, la molette de la souris). Il se déclenche après les événements {{event("mousedown")}} et {{event("mouseup")}}, dans cet ordre.

- -
-

Note : Les fournisseurs de navigateurs implémentent cette propriété dans le cadre d'un plan visant à améliorer la compatibilité en ce qui concerne le comportement des boutons. Plus précisément, le comportement des événements est mis à jour afin que {{Event ("click")}} ne se déclenche que pour les clics sur le bouton principal (par exemple, le bouton gauche de la souris), tandis que {{Event ("auxclick")}} se déclenche pour le bouton non principal. Historiquement, {{Event("click")}} s'est généralement déclenché pour le clic de n'importe quel bouton d'entrée de périphérique, bien que le comportement du navigateur soit quelque peu incohérent.

-
- -

Syntaxe

- -
target.onauxclick = functionRef;
-
- -

Valeur

- -

functionRef est un nom de fonction ou une function expression. La fonction reçoit un objet {{domxref("MouseEvent")}} comme seul argument. Dans la fonction, this sera l'élément sur lequel l'événement a été déclenché.

- -

Un seul gestionnaire onauxclick peut être affecté à un objet à la fois. Vous pouvez préférer utiliser la méthode {{domxref("EventTarget.addEventListener()")}} à la place, car elle est plus flexible.

- -

Exemple

- -

Dans cet exemple, nous définissons des fonctions pour deux gestionnaires d'événements — {{domxref("GlobalEventHandlers.onclick", "onclick")}} et onauxclick. Le premier modifie la couleur de l'arrière-plan du bouton, tandis que le second modifie la couleur de premier plan (texte) du bouton. Vous pouvez voir les deux fonctions en action en essayant la démo avec une souris à plusieurs boutons (voir en direct sur GitHub; également voir le code source).

- -
var button = document.querySelector('button');
-var html = document.querySelector('html');
-
-function random(number) {
-  return Math.floor(Math.random() * number);
-}
-
-button.onclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  button.style.backgroundColor = rndCol;
-};
-
-button.onauxclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  button.style.color = rndCol;
-}
- -
-

Note : Si vous utilisez une souris à trois boutons, vous remarquerez que le gestionnaire onauxclick est exécuté lorsque l'un des boutons non gauche de la souris est cliqué.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('UI Events','#event-type-auxclick','onauxclick')}}{{Spec2('UI Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.GlobalEventHandlers.onauxclick")}}

- -

Voir également

- - diff --git a/files/fr/web/api/globaleventhandlers/onauxclick/index.md b/files/fr/web/api/globaleventhandlers/onauxclick/index.md new file mode 100644 index 0000000000..edf6be44f6 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onauxclick/index.md @@ -0,0 +1,88 @@ +--- +title: GlobalEventHandlers.onauxclick +slug: Web/API/GlobalEventHandlers/onauxclick +tags: + - API + - Expérimentale + - Propriété + - Reference +translation_of: Web/API/GlobalEventHandlers/onauxclick +--- +
{{ApiRef("HTML DOM")}} {{SeeCompatTable}}
+ +

La propriété onauxclick du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} pour le traitement des événements {{event("auxclick")}}.

+ +

L'événement auxclick est déclenché lorsqu'un bouton non principal a été enfoncé sur un périphérique d'entrée (par exemple, la molette de la souris). Il se déclenche après les événements {{event("mousedown")}} et {{event("mouseup")}}, dans cet ordre.

+ +
+

Note : Les fournisseurs de navigateurs implémentent cette propriété dans le cadre d'un plan visant à améliorer la compatibilité en ce qui concerne le comportement des boutons. Plus précisément, le comportement des événements est mis à jour afin que {{Event ("click")}} ne se déclenche que pour les clics sur le bouton principal (par exemple, le bouton gauche de la souris), tandis que {{Event ("auxclick")}} se déclenche pour le bouton non principal. Historiquement, {{Event("click")}} s'est généralement déclenché pour le clic de n'importe quel bouton d'entrée de périphérique, bien que le comportement du navigateur soit quelque peu incohérent.

+
+ +

Syntaxe

+ +
target.onauxclick = functionRef;
+
+ +

Valeur

+ +

functionRef est un nom de fonction ou une function expression. La fonction reçoit un objet {{domxref("MouseEvent")}} comme seul argument. Dans la fonction, this sera l'élément sur lequel l'événement a été déclenché.

+ +

Un seul gestionnaire onauxclick peut être affecté à un objet à la fois. Vous pouvez préférer utiliser la méthode {{domxref("EventTarget.addEventListener()")}} à la place, car elle est plus flexible.

+ +

Exemple

+ +

Dans cet exemple, nous définissons des fonctions pour deux gestionnaires d'événements — {{domxref("GlobalEventHandlers.onclick", "onclick")}} et onauxclick. Le premier modifie la couleur de l'arrière-plan du bouton, tandis que le second modifie la couleur de premier plan (texte) du bouton. Vous pouvez voir les deux fonctions en action en essayant la démo avec une souris à plusieurs boutons (voir en direct sur GitHub; également voir le code source).

+ +
var button = document.querySelector('button');
+var html = document.querySelector('html');
+
+function random(number) {
+  return Math.floor(Math.random() * number);
+}
+
+button.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  button.style.backgroundColor = rndCol;
+};
+
+button.onauxclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  button.style.color = rndCol;
+}
+ +
+

Note : Si vous utilisez une souris à trois boutons, vous remarquerez que le gestionnaire onauxclick est exécuté lorsque l'un des boutons non gauche de la souris est cliqué.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('UI Events','#event-type-auxclick','onauxclick')}}{{Spec2('UI Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.GlobalEventHandlers.onauxclick")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/globaleventhandlers/onblur/index.html b/files/fr/web/api/globaleventhandlers/onblur/index.html deleted file mode 100644 index ea3ed43e43..0000000000 --- a/files/fr/web/api/globaleventhandlers/onblur/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: element.onblur -slug: Web/API/GlobalEventHandlers/onblur -tags: - - DOM - - DOM_0 -translation_of: Web/API/GlobalEventHandlers/onblur ---- -

{{ ApiRef() }}

- -

Résumé

- -

La propriété onblur renvoie le gestionnaire de l'évènement blur (perte de focus) pour l'élément courant.

- -

Syntaxe

- -
element.onblur = nomFonctionUtilisateur;
-
- - - -
element.onblur = function() {
-    alert("Évènement onblur détecté");
-};
-
- -

Exemple

- -

Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée.

- -
<form>
-	<input type="text" id="foo" value="Allo!" />
-</form>
-
-<script type="text/javascript">
-
-var elem = document.getElementById("foo");
-
-// Attention : afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici,
-// il doit s'agir d'une référence au nom d'une fonction et non d'un appel de cette fonction
-
-elem.onblur = afficherMessage;
-
-function afficherMessage() {
-	alert("Évènement onblur detecté!");
-}
-</script>
-
- -

Notes

- -

L'évènement blur se déclenche lors de la perte de focus d'un élément.

- -

Microsoft Internet Explorer déclenche l'évènement blur sur presque tous les éléments, contrairement aux navigateurs Gecko (dont Firefox) qui ne le déclencheront que sur un nombre limité d'éléments.

- -

Spécification

- -

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onblur/index.md b/files/fr/web/api/globaleventhandlers/onblur/index.md new file mode 100644 index 0000000000..ea3ed43e43 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onblur/index.md @@ -0,0 +1,60 @@ +--- +title: element.onblur +slug: Web/API/GlobalEventHandlers/onblur +tags: + - DOM + - DOM_0 +translation_of: Web/API/GlobalEventHandlers/onblur +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

La propriété onblur renvoie le gestionnaire de l'évènement blur (perte de focus) pour l'élément courant.

+ +

Syntaxe

+ +
element.onblur = nomFonctionUtilisateur;
+
+ + + +
element.onblur = function() {
+    alert("Évènement onblur détecté");
+};
+
+ +

Exemple

+ +

Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée.

+ +
<form>
+	<input type="text" id="foo" value="Allo!" />
+</form>
+
+<script type="text/javascript">
+
+var elem = document.getElementById("foo");
+
+// Attention : afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici,
+// il doit s'agir d'une référence au nom d'une fonction et non d'un appel de cette fonction
+
+elem.onblur = afficherMessage;
+
+function afficherMessage() {
+	alert("Évènement onblur detecté!");
+}
+</script>
+
+ +

Notes

+ +

L'évènement blur se déclenche lors de la perte de focus d'un élément.

+ +

Microsoft Internet Explorer déclenche l'évènement blur sur presque tous les éléments, contrairement aux navigateurs Gecko (dont Firefox) qui ne le déclencheront que sur un nombre limité d'éléments.

+ +

Spécification

+ +

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onchange/index.html b/files/fr/web/api/globaleventhandlers/onchange/index.html deleted file mode 100644 index 577350c6a0..0000000000 --- a/files/fr/web/api/globaleventhandlers/onchange/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: element.onchange -slug: Web/API/GlobalEventHandlers/onchange -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onchange ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété onchange définit et renvoie le gestionnaire d'évènement onChange (modification) pour l'élément courant.

-

Syntaxe

-
element.onchange = code de gestion de l'évènement
-
-

Notes

-

Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement change est implémenté dans Mozilla :

-
  control.onfocus = focus;
-  control.onblur = blur;
-  function focus () {
-      original_value = control.value;
-  }
-
-  function blur () {
-      if (control.value != original_value)
-        control.onchange();
-  }
-
-

Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'évènement change si vous modifiez la valeur du contrôle dans vos propres gestionnaires d'évènements focus ou blur. De plus, l'évènement change se déclenche avant l'évènement blur. Ce comportement n'est pas le même que celui d'Internet Explorer.

-

Specification

-

{{ DOM0() }}

-

Voir aussi

- \ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onchange/index.md b/files/fr/web/api/globaleventhandlers/onchange/index.md new file mode 100644 index 0000000000..577350c6a0 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onchange/index.md @@ -0,0 +1,35 @@ +--- +title: element.onchange +slug: Web/API/GlobalEventHandlers/onchange +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onchange +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété onchange définit et renvoie le gestionnaire d'évènement onChange (modification) pour l'élément courant.

+

Syntaxe

+
element.onchange = code de gestion de l'évènement
+
+

Notes

+

Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement change est implémenté dans Mozilla :

+
  control.onfocus = focus;
+  control.onblur = blur;
+  function focus () {
+      original_value = control.value;
+  }
+
+  function blur () {
+      if (control.value != original_value)
+        control.onchange();
+  }
+
+

Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'évènement change si vous modifiez la valeur du contrôle dans vos propres gestionnaires d'évènements focus ou blur. De plus, l'évènement change se déclenche avant l'évènement blur. Ce comportement n'est pas le même que celui d'Internet Explorer.

+

Specification

+

{{ DOM0() }}

+

Voir aussi

+ \ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onclick/index.html b/files/fr/web/api/globaleventhandlers/onclick/index.html deleted file mode 100644 index 73354e541b..0000000000 --- a/files/fr/web/api/globaleventhandlers/onclick/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: element.onclick -slug: Web/API/GlobalEventHandlers/onclick -translation_of: Web/API/GlobalEventHandlers/onclick ---- -

{{ ApiRef() }}

- -

Résumé

- -

La propriété onclick représente le gestionnaire d'évènement onClick de l'élément courant.

- -

Syntaxe

- -

element.onclick = functionRef

- -

où functionRef est une fonction ou une expression de type function. Consulter la référence des fonctions pour plus de détails.

- -

Le paramètre fourni au gestionnaire d'évènement functionRef lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}.

- -

Exemple

- -
<!doctype html>
-<html>
-<head>
-<title>onclick event example</title>
-<script type="text/javascript">
-function initElement()
-{
-  var p = document.getElementById("foo");
-  // NOTE: showAlert(); ou showAlert(param); NE fonctionne PAS ici.
-  // Il faut fournir une valeur de type function (nom de fonction déclaré ailleurs ou declaration en ligne de fonction).
-  p.onclick = showAlert;
-};
-
-function showAlert()
-{
-  alert("Evènement de click détecté");
-}
-</script>
-<style type="text/css">
-#foo {
-border: solid blue 2px;
-}
-</style>
-</head>
-<body onload="initElement();">
-<span id="foo">Mon Span à cliquer</span>
-<p>Cliquez sur l'élément ci-dessus.</p>
-</body>
-</html>
- -

Vous pouvez aussi utiliser la syntaxe des fonctions déclarées en ligne, anonymes ou non.

- -
// affectation de fonction anonyme declarée en ligne
-p.onclick = function() { alert("moot!"); };
-
- -

Notes

- -

L'évènement click est déclenché lorsque l'utilisateur clique sur un élément.

- -

Avec cette syntaxe un seul gestionnaire d'évènement click peut être assigné à un élement . Pour gérer plusieurs fonctions gestionnaires d'évènements click sur un même élément, utilisez {{ domxref("EventTarget.addEventListener()") }} qui fait partie de la spécification DOM Events.

- -

Spécification

- -

Defini en HTML.

diff --git a/files/fr/web/api/globaleventhandlers/onclick/index.md b/files/fr/web/api/globaleventhandlers/onclick/index.md new file mode 100644 index 0000000000..73354e541b --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onclick/index.md @@ -0,0 +1,66 @@ +--- +title: element.onclick +slug: Web/API/GlobalEventHandlers/onclick +translation_of: Web/API/GlobalEventHandlers/onclick +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

La propriété onclick représente le gestionnaire d'évènement onClick de l'élément courant.

+ +

Syntaxe

+ +

element.onclick = functionRef

+ +

où functionRef est une fonction ou une expression de type function. Consulter la référence des fonctions pour plus de détails.

+ +

Le paramètre fourni au gestionnaire d'évènement functionRef lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}.

+ +

Exemple

+ +
<!doctype html>
+<html>
+<head>
+<title>onclick event example</title>
+<script type="text/javascript">
+function initElement()
+{
+  var p = document.getElementById("foo");
+  // NOTE: showAlert(); ou showAlert(param); NE fonctionne PAS ici.
+  // Il faut fournir une valeur de type function (nom de fonction déclaré ailleurs ou declaration en ligne de fonction).
+  p.onclick = showAlert;
+};
+
+function showAlert()
+{
+  alert("Evènement de click détecté");
+}
+</script>
+<style type="text/css">
+#foo {
+border: solid blue 2px;
+}
+</style>
+</head>
+<body onload="initElement();">
+<span id="foo">Mon Span à cliquer</span>
+<p>Cliquez sur l'élément ci-dessus.</p>
+</body>
+</html>
+ +

Vous pouvez aussi utiliser la syntaxe des fonctions déclarées en ligne, anonymes ou non.

+ +
// affectation de fonction anonyme declarée en ligne
+p.onclick = function() { alert("moot!"); };
+
+ +

Notes

+ +

L'évènement click est déclenché lorsque l'utilisateur clique sur un élément.

+ +

Avec cette syntaxe un seul gestionnaire d'évènement click peut être assigné à un élement . Pour gérer plusieurs fonctions gestionnaires d'évènements click sur un même élément, utilisez {{ domxref("EventTarget.addEventListener()") }} qui fait partie de la spécification DOM Events.

+ +

Spécification

+ +

Defini en HTML.

diff --git a/files/fr/web/api/globaleventhandlers/onclose/index.html b/files/fr/web/api/globaleventhandlers/onclose/index.html deleted file mode 100644 index 757077c904..0000000000 --- a/files/fr/web/api/globaleventhandlers/onclose/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: GlobalEventHandlers.onclose -slug: Web/API/GlobalEventHandlers/onclose -tags: - - API - - DOM - - HTML - - Property - - Reference -translation_of: Web/API/GlobalEventHandlers/onclose ---- -
{{ApiRef("HTML DOM")}}
- -

Un gestionnaire d'évènement utilisé lorsque des évènements de fermeture sont envoyés à la fenêtre (non disponible dans Firefox 2 ou Safari).

- -

Syntaxe

- -
window.onclose = funcRef;
-
- -

Paramètres

- - - -

Exemple

- -
window.onclose = resetThatServerThing;
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/fr/web/api/globaleventhandlers/onclose/index.md b/files/fr/web/api/globaleventhandlers/onclose/index.md new file mode 100644 index 0000000000..757077c904 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onclose/index.md @@ -0,0 +1,47 @@ +--- +title: GlobalEventHandlers.onclose +slug: Web/API/GlobalEventHandlers/onclose +tags: + - API + - DOM + - HTML + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onclose +--- +
{{ApiRef("HTML DOM")}}
+ +

Un gestionnaire d'évènement utilisé lorsque des évènements de fermeture sont envoyés à la fenêtre (non disponible dans Firefox 2 ou Safari).

+ +

Syntaxe

+ +
window.onclose = funcRef;
+
+ +

Paramètres

+ + + +

Exemple

+ +
window.onclose = resetThatServerThing;
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/fr/web/api/globaleventhandlers/ondblclick/index.html b/files/fr/web/api/globaleventhandlers/ondblclick/index.html deleted file mode 100644 index 81e25a91e3..0000000000 --- a/files/fr/web/api/globaleventhandlers/ondblclick/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: element.ondblclick -slug: Web/API/GlobalEventHandlers/ondblclick -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/ondblclick ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété ondblclick renvoie le gestionnaire d'évènement dblclick de l'élément courant.

-

Syntaxe

-
element.ondblclick = nomDeFonction;
-
- -
element.ondblclick = function() { alert("Évènement dblclick détecté"); };
-
-

Exemple

-
<html>
-
-<head>
-<title>ondblclick event example</title>
-
-<script type="text/javascript">
-
-function initElement() {
- var p = document.getElementById("foo");
- // Attention : showAlert(); ou showAlert(param); ne fonctionneront pas ici,
- // il doit s'agir d'une référence à un nom de fonction, pas un appel de fonction.
- p.ondblclick = showAlert;
-};
-
-function showAlert() {
- alert("Évènement dblclick détecté")
-}
-</script>
-
-<style type="text/css">
-<!--
-#foo {
-border: solid blue 2px;
-}
--->
-</style>
-</head>
-
-<body onload="initElement()";>
-<span id="foo">Mon élément</span>
-<p>Double-cliquez sur l'élément ci-dessus.</p>
-</body>
-</html>
-
-

Notes

-

L'évènement dblclick est déclenché lorsque l'utilisateur double-clique sur un élément.

-

Spécification

-

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/ondblclick/index.md b/files/fr/web/api/globaleventhandlers/ondblclick/index.md new file mode 100644 index 0000000000..81e25a91e3 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/ondblclick/index.md @@ -0,0 +1,59 @@ +--- +title: element.ondblclick +slug: Web/API/GlobalEventHandlers/ondblclick +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/ondblclick +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété ondblclick renvoie le gestionnaire d'évènement dblclick de l'élément courant.

+

Syntaxe

+
element.ondblclick = nomDeFonction;
+
+ +
element.ondblclick = function() { alert("Évènement dblclick détecté"); };
+
+

Exemple

+
<html>
+
+<head>
+<title>ondblclick event example</title>
+
+<script type="text/javascript">
+
+function initElement() {
+ var p = document.getElementById("foo");
+ // Attention : showAlert(); ou showAlert(param); ne fonctionneront pas ici,
+ // il doit s'agir d'une référence à un nom de fonction, pas un appel de fonction.
+ p.ondblclick = showAlert;
+};
+
+function showAlert() {
+ alert("Évènement dblclick détecté")
+}
+</script>
+
+<style type="text/css">
+<!--
+#foo {
+border: solid blue 2px;
+}
+-->
+</style>
+</head>
+
+<body onload="initElement()";>
+<span id="foo">Mon élément</span>
+<p>Double-cliquez sur l'élément ci-dessus.</p>
+</body>
+</html>
+
+

Notes

+

L'évènement dblclick est déclenché lorsque l'utilisateur double-clique sur un élément.

+

Spécification

+

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onerror/index.html b/files/fr/web/api/globaleventhandlers/onerror/index.html deleted file mode 100644 index 1f44c2033c..0000000000 --- a/files/fr/web/api/globaleventhandlers/onerror/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: GlobalEventHandlers.onerror -slug: Web/API/GlobalEventHandlers/onerror -tags: - - API - - HTML DOM - - Propriété - - Reference -translation_of: Web/API/GlobalEventHandlers/onerror ---- -
{{ApiRef("HTML DOM")}}
- -

Un gestionnaire d'événement pour l'événement error. Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs:

- - - -

Syntaxe

- -

Pour des raisons historiques, des arguments différents sont passés aux gestionnaires window.onerror et element.onerror.

- -

window.onerror

- -
window.onerror = function(messageOrEvent, source, noligne, nocolonne, erreur) { ... }
- -

Paramètres de la fonction :

- - - -

element.onerror (et window.addEventListener('error'))

- -
element.onerror = function(event) { ... }
- -

element.onerror accepte une fonction avec un argument unique de type {{domxref("Event")}}.

- -

Notes

- -

Quand une erreur de syntaxe(?) se produit dans un script chargé à partir d'une origine différente, les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que "Script error". Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut {{htmlattrxref("crossorigin","script")}} de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse CORS HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript.

- -
window.onerror = function (msg, url, noLigne, noColonne, erreur) {
-    var chaine = msg.toLowerCase();
-    var souschaine = "script error";
-    if (chaine.indexOf(souschaine) > -1){
-        alert('Script Error : voir la Console du Navigateur pour les Détails');
-    } else {
-        var message = [
-            'Message : ' + msg,
-            'URL : ' + url,
-            'Ligne : ' + noLigne,
-            'Colonne : ' + noColonne,
-            'Objet Error : ' + JSON.stringify(erreur)
-        ].join(' - ');
-
-        alert(message);
-    }
-
-    return false;
-};
- -

Lors de l'utilisation du balisage html intégré (<body onerror="alert('une erreur est survenue')>...), la spécification HTML requiert que les arguments passés à onerror soient nommés event, source, lineno, colno, error. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via arguments[0] à arguments[2].

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.GlobalEventHandlers.onerror")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/globaleventhandlers/onerror/index.md b/files/fr/web/api/globaleventhandlers/onerror/index.md new file mode 100644 index 0000000000..1f44c2033c --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onerror/index.md @@ -0,0 +1,96 @@ +--- +title: GlobalEventHandlers.onerror +slug: Web/API/GlobalEventHandlers/onerror +tags: + - API + - HTML DOM + - Propriété + - Reference +translation_of: Web/API/GlobalEventHandlers/onerror +--- +
{{ApiRef("HTML DOM")}}
+ +

Un gestionnaire d'événement pour l'événement error. Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs:

+ + + +

Syntaxe

+ +

Pour des raisons historiques, des arguments différents sont passés aux gestionnaires window.onerror et element.onerror.

+ +

window.onerror

+ +
window.onerror = function(messageOrEvent, source, noligne, nocolonne, erreur) { ... }
+ +

Paramètres de la fonction :

+ + + +

element.onerror (et window.addEventListener('error'))

+ +
element.onerror = function(event) { ... }
+ +

element.onerror accepte une fonction avec un argument unique de type {{domxref("Event")}}.

+ +

Notes

+ +

Quand une erreur de syntaxe(?) se produit dans un script chargé à partir d'une origine différente, les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que "Script error". Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut {{htmlattrxref("crossorigin","script")}} de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse CORS HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript.

+ +
window.onerror = function (msg, url, noLigne, noColonne, erreur) {
+    var chaine = msg.toLowerCase();
+    var souschaine = "script error";
+    if (chaine.indexOf(souschaine) > -1){
+        alert('Script Error : voir la Console du Navigateur pour les Détails');
+    } else {
+        var message = [
+            'Message : ' + msg,
+            'URL : ' + url,
+            'Ligne : ' + noLigne,
+            'Colonne : ' + noColonne,
+            'Objet Error : ' + JSON.stringify(erreur)
+        ].join(' - ');
+
+        alert(message);
+    }
+
+    return false;
+};
+ +

Lors de l'utilisation du balisage html intégré (<body onerror="alert('une erreur est survenue')>...), la spécification HTML requiert que les arguments passés à onerror soient nommés event, source, lineno, colno, error. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via arguments[0] à arguments[2].

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.GlobalEventHandlers.onerror")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/globaleventhandlers/onfocus/index.html b/files/fr/web/api/globaleventhandlers/onfocus/index.html deleted file mode 100644 index e7f9702f3f..0000000000 --- a/files/fr/web/api/globaleventhandlers/onfocus/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: element.onfocus -slug: Web/API/GlobalEventHandlers/onfocus -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onfocus ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété onfocus renvoie le gestionnaire de l'évènement focus pour l'élément courant.

-

Syntaxe

-
code de gestion de l'évènement = element.onfocus
-
-

Notes

-

L'évènement focus se déclenche lorsque l'utilisateur donne le focus clavier à l'élément donné.

-

Contrairement à Microsoft Internet Explorer, dans lequel presque toutes les sortes d'éléments peuvent recevoir l'évènement focus, presqu'aucune sorte d'élément ne reçoit cet évènement dans les navigateurs utilisant Gecko.

-

Spécification

-

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onfocus/index.md b/files/fr/web/api/globaleventhandlers/onfocus/index.md new file mode 100644 index 0000000000..e7f9702f3f --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onfocus/index.md @@ -0,0 +1,20 @@ +--- +title: element.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété onfocus renvoie le gestionnaire de l'évènement focus pour l'élément courant.

+

Syntaxe

+
code de gestion de l'évènement = element.onfocus
+
+

Notes

+

L'évènement focus se déclenche lorsque l'utilisateur donne le focus clavier à l'élément donné.

+

Contrairement à Microsoft Internet Explorer, dans lequel presque toutes les sortes d'éléments peuvent recevoir l'évènement focus, presqu'aucune sorte d'élément ne reçoit cet évènement dans les navigateurs utilisant Gecko.

+

Spécification

+

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.html deleted file mode 100644 index 02508798b1..0000000000 --- a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: GlobalEventHandlers.ongotpointercapture -slug: Web/API/GlobalEventHandlers/ongotpointercapture -translation_of: Web/API/GlobalEventHandlers/ongotpointercapture ---- -
{{ApiRef("HTML DOM")}}
- -
La propriété ongotpointercapture du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} qui traite les évènements de type {{event("gotpointercapture")}}.
- -

Syntaxe

- -
target.ongotpointercapture = functionRef;
- -

Valeur

- -

functionRef est un nom de fonction ou une expression fonction. La fonction accepte un objet {{domxref("FocusEvent")}} en tant qu'unique argument.

- -

Example

- -
function overHandler(event) {
-  // Obtient le gestionnaire de type "gotpointercapture" de la cible de l'événement
-  let gotCaptureHandler = event.target.ongotpointercapture;
-}
-
-function init() {
-  let el = document.getElementById('target');
-  el.ongotpointercapture = overHandler;
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.GlobalEventHandlers.ongotpointercapture")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md new file mode 100644 index 0000000000..02508798b1 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md @@ -0,0 +1,59 @@ +--- +title: GlobalEventHandlers.ongotpointercapture +slug: Web/API/GlobalEventHandlers/ongotpointercapture +translation_of: Web/API/GlobalEventHandlers/ongotpointercapture +--- +
{{ApiRef("HTML DOM")}}
+ +
La propriété ongotpointercapture du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} qui traite les évènements de type {{event("gotpointercapture")}}.
+ +

Syntaxe

+ +
target.ongotpointercapture = functionRef;
+ +

Valeur

+ +

functionRef est un nom de fonction ou une expression fonction. La fonction accepte un objet {{domxref("FocusEvent")}} en tant qu'unique argument.

+ +

Example

+ +
function overHandler(event) {
+  // Obtient le gestionnaire de type "gotpointercapture" de la cible de l'événement
+  let gotCaptureHandler = event.target.ongotpointercapture;
+}
+
+function init() {
+  let el = document.getElementById('target');
+  el.ongotpointercapture = overHandler;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.GlobalEventHandlers.ongotpointercapture")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/globaleventhandlers/onkeydown/index.html b/files/fr/web/api/globaleventhandlers/onkeydown/index.html deleted file mode 100644 index 0b2e1762b3..0000000000 --- a/files/fr/web/api/globaleventhandlers/onkeydown/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: element.onkeydown -slug: Web/API/GlobalEventHandlers/onkeydown -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onkeydown ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété onkeydown définit et renvoie le gestionnaire d'évènement keydown de l'élément courant.

-

Syntaxe

-
code de gestion de l'évènement = element.onkeydown
-
-

Notes

-

L'évènement keydown se déclenche lorsque qu'une touche du clavier est enfoncée.

-

À différencier de onkeypress qui se déclenche lorsque qu'une touche du clavier est pressée. (La nuance se situe dans le fait que onkeydown se produit avant onkeypress même s'ils se produisent quasiment au même instant)

-

Voir aussi

-

onkeypress onkeyup

-

Spécification

-

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onkeydown/index.md b/files/fr/web/api/globaleventhandlers/onkeydown/index.md new file mode 100644 index 0000000000..0b2e1762b3 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onkeydown/index.md @@ -0,0 +1,22 @@ +--- +title: element.onkeydown +slug: Web/API/GlobalEventHandlers/onkeydown +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onkeydown +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété onkeydown définit et renvoie le gestionnaire d'évènement keydown de l'élément courant.

+

Syntaxe

+
code de gestion de l'évènement = element.onkeydown
+
+

Notes

+

L'évènement keydown se déclenche lorsque qu'une touche du clavier est enfoncée.

+

À différencier de onkeypress qui se déclenche lorsque qu'une touche du clavier est pressée. (La nuance se situe dans le fait que onkeydown se produit avant onkeypress même s'ils se produisent quasiment au même instant)

+

Voir aussi

+

onkeypress onkeyup

+

Spécification

+

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onkeypress/index.html b/files/fr/web/api/globaleventhandlers/onkeypress/index.html deleted file mode 100644 index e22a9435d9..0000000000 --- a/files/fr/web/api/globaleventhandlers/onkeypress/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: element.onkeypress -slug: Web/API/GlobalEventHandlers/onkeypress -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onkeypress ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété onkeypress définit et renvoie le gestionnaire d'évènement keypress de l'élément courant.

-

Syntaxe

-
element.onkeypress = code de gestion de l'évènement
-
-

Notes

-

L'évènement keypress se déclenche lorsque qu'une touche du clavier est pressée.

-

À différencier de onkeydown qui se déclenche lorsque qu'une touche du clavier est enfoncée. (La nuance se situe dans le fait que onkeydown se produit avant onkeypress, même s'il se produisent quasiment au même instant)

-

Voir aussi

-

onkeydown onkeyup

-

Spécification

-

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onkeypress/index.md b/files/fr/web/api/globaleventhandlers/onkeypress/index.md new file mode 100644 index 0000000000..e22a9435d9 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onkeypress/index.md @@ -0,0 +1,22 @@ +--- +title: element.onkeypress +slug: Web/API/GlobalEventHandlers/onkeypress +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onkeypress +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété onkeypress définit et renvoie le gestionnaire d'évènement keypress de l'élément courant.

+

Syntaxe

+
element.onkeypress = code de gestion de l'évènement
+
+

Notes

+

L'évènement keypress se déclenche lorsque qu'une touche du clavier est pressée.

+

À différencier de onkeydown qui se déclenche lorsque qu'une touche du clavier est enfoncée. (La nuance se situe dans le fait que onkeydown se produit avant onkeypress, même s'il se produisent quasiment au même instant)

+

Voir aussi

+

onkeydown onkeyup

+

Spécification

+

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onkeyup/index.html b/files/fr/web/api/globaleventhandlers/onkeyup/index.html deleted file mode 100644 index 22c189fd6c..0000000000 --- a/files/fr/web/api/globaleventhandlers/onkeyup/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: element.onkeyup -slug: Web/API/GlobalEventHandlers/onkeyup -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onkeyup ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété onkeyup renvoi le gestionnaire d'évènements onKeyUp de l'élément courant.

-

Syntaxe

-

code de gestion de l'évènement = element.onkeyup

-

Exemple

-
 <input type="text" onKeyUp="cleRelachee(event)">
- <script>function cleRelachee(evt){ alert(evt.keyCode) }</script>
-
-

Notes

-

L'évènement keyup se déclenche lorsque qu'une touche du clavier qui a été pressée est relâchée.

-

Voir aussi

-

onkeypress onkeydown

-

Spécification

-

Ne fait partie d'aucune spécification.

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onkeyup/index.md b/files/fr/web/api/globaleventhandlers/onkeyup/index.md new file mode 100644 index 0000000000..22c189fd6c --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onkeyup/index.md @@ -0,0 +1,22 @@ +--- +title: element.onkeyup +slug: Web/API/GlobalEventHandlers/onkeyup +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété onkeyup renvoi le gestionnaire d'évènements onKeyUp de l'élément courant.

+

Syntaxe

+

code de gestion de l'évènement = element.onkeyup

+

Exemple

+
 <input type="text" onKeyUp="cleRelachee(event)">
+ <script>function cleRelachee(evt){ alert(evt.keyCode) }</script>
+
+

Notes

+

L'évènement keyup se déclenche lorsque qu'une touche du clavier qui a été pressée est relâchée.

+

Voir aussi

+

onkeypress onkeydown

+

Spécification

+

Ne fait partie d'aucune spécification.

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onload/index.html b/files/fr/web/api/globaleventhandlers/onload/index.html deleted file mode 100644 index e1c9c1d4c7..0000000000 --- a/files/fr/web/api/globaleventhandlers/onload/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: window.onload -slug: Web/API/GlobalEventHandlers/onload -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onload ---- -

{{ ApiRef() }}

-

Résumé

-

Un gestionnaire d'évènement pour l'évènement load (chargement) de la fenêtre.

-

Syntaxe

-
window.onload = refFct;
-
-

Paramètres

- -

Exemple

-
window.onload = init;
-
-

Notes

-

L'évènement load se déclenche à la fin du processus de chargement du document. À ce moment, tous les objets du document sont dans le DOM.

-

Spécification

-

Ne fait partie d'aucune spécification.

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onload/index.md b/files/fr/web/api/globaleventhandlers/onload/index.md new file mode 100644 index 0000000000..e1c9c1d4c7 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onload/index.md @@ -0,0 +1,24 @@ +--- +title: window.onload +slug: Web/API/GlobalEventHandlers/onload +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onload +--- +

{{ ApiRef() }}

+

Résumé

+

Un gestionnaire d'évènement pour l'évènement load (chargement) de la fenêtre.

+

Syntaxe

+
window.onload = refFct;
+
+

Paramètres

+ +

Exemple

+
window.onload = init;
+
+

Notes

+

L'évènement load se déclenche à la fin du processus de chargement du document. À ce moment, tous les objets du document sont dans le DOM.

+

Spécification

+

Ne fait partie d'aucune spécification.

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onloadend/index.html b/files/fr/web/api/globaleventhandlers/onloadend/index.html deleted file mode 100644 index dfa1f3a113..0000000000 --- a/files/fr/web/api/globaleventhandlers/onloadend/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: GlobalEventHandlers.onloadend -slug: Web/API/GlobalEventHandlers/onloadend -tags: - - API - - DOM - - Gestionnaires d'évènements - - Propriétés - - évènements -translation_of: Web/API/GlobalEventHandlers/onloadend ---- -
{{ApiRef}}
- -

La propriété onloadend du "mixin" {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'évènement {{event("loadend")}} est déclenché (quand la progression est arrêtée sur le chargement d'une ressource).

- -

Syntaxe

- -
img.onloadend = funcRef;
-
- -

Valeur

- -

funcRef est la fonction du gestionnaire à appeler quand l'évènement loadend de la ressource est déclenché.

- -

Exemples

- -

Contenu HTML

- -
<img src="myImage.jpg">
- -

Contenu JavaScript

- -
// 'loadstart' est le premier lancé, puis 'load', puis 'loadend'
-
-image.addEventListener('load', function(e) {
-  console.log('Image loaded');
-});
-
-image.addEventListener('loadstart', function(e) {
-  console.log('Image load started');
-});
-
-image.addEventListener('loadend', function(e) {
-  console.log('Image load finished');
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "webappapis.html#handler-onloadend", "onloadend")}}{{Spec2("HTML WHATWG")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.GlobalEventHandlers.onloadend")}}

diff --git a/files/fr/web/api/globaleventhandlers/onloadend/index.md b/files/fr/web/api/globaleventhandlers/onloadend/index.md new file mode 100644 index 0000000000..dfa1f3a113 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onloadend/index.md @@ -0,0 +1,68 @@ +--- +title: GlobalEventHandlers.onloadend +slug: Web/API/GlobalEventHandlers/onloadend +tags: + - API + - DOM + - Gestionnaires d'évènements + - Propriétés + - évènements +translation_of: Web/API/GlobalEventHandlers/onloadend +--- +
{{ApiRef}}
+ +

La propriété onloadend du "mixin" {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'évènement {{event("loadend")}} est déclenché (quand la progression est arrêtée sur le chargement d'une ressource).

+ +

Syntaxe

+ +
img.onloadend = funcRef;
+
+ +

Valeur

+ +

funcRef est la fonction du gestionnaire à appeler quand l'évènement loadend de la ressource est déclenché.

+ +

Exemples

+ +

Contenu HTML

+ +
<img src="myImage.jpg">
+ +

Contenu JavaScript

+ +
// 'loadstart' est le premier lancé, puis 'load', puis 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "webappapis.html#handler-onloadend", "onloadend")}}{{Spec2("HTML WHATWG")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.GlobalEventHandlers.onloadend")}}

diff --git a/files/fr/web/api/globaleventhandlers/onloadstart/index.html b/files/fr/web/api/globaleventhandlers/onloadstart/index.html deleted file mode 100644 index 8dd07ad991..0000000000 --- a/files/fr/web/api/globaleventhandlers/onloadstart/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: GlobalEventHandlers.onloadstart -slug: Web/API/GlobalEventHandlers/onloadstart -tags: - - API - - DOM - - Gestionnaires d'évènements - - Propriétés - - évènements -translation_of: Web/API/GlobalEventHandlers/onloadstart ---- -
{{ApiRef}}
- -

La propriété onloadstart du "mixin" {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'évènement {{event("loadstart")}} est déclenché (quand la progression est commencée sur le chargement d'une ressource).

- -

Syntaxe

- -
img.onloadstart = funcRef;
-
- -

Valeur

- -

funcRef est la fonction du gestionnaire à appeler lorsque l'évènement loadstart de la ressource est déclenché.

- -

Exemples

- -

Contenu HTML

- -
<img src="myImage.jpg">
- -

Contenu JavaScript

- -
// 'loadstart' est lancé le premier, puis 'load', puis 'loadend'
-
-image.addEventListener('load', function(e) {
-  console.log('Image loaded');
-});
-
-image.addEventListener('loadstart', function(e) {
-  console.log('Image load started');
-});
-
-image.addEventListener('loadend', function(e) {
-  console.log('Image load finished');
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "webappapis.html#handler-onloadstart", "onloadstart")}}{{Spec2("HTML WHATWG")}}Définition initiale.
- -

Compatibilité des navigateurs

- -
-
- - -

{{Compat("api.GlobalEventHandlers.onloadstart")}}

-
-
diff --git a/files/fr/web/api/globaleventhandlers/onloadstart/index.md b/files/fr/web/api/globaleventhandlers/onloadstart/index.md new file mode 100644 index 0000000000..8dd07ad991 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onloadstart/index.md @@ -0,0 +1,74 @@ +--- +title: GlobalEventHandlers.onloadstart +slug: Web/API/GlobalEventHandlers/onloadstart +tags: + - API + - DOM + - Gestionnaires d'évènements + - Propriétés + - évènements +translation_of: Web/API/GlobalEventHandlers/onloadstart +--- +
{{ApiRef}}
+ +

La propriété onloadstart du "mixin" {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) représentant le code à appeler lorsque l'évènement {{event("loadstart")}} est déclenché (quand la progression est commencée sur le chargement d'une ressource).

+ +

Syntaxe

+ +
img.onloadstart = funcRef;
+
+ +

Valeur

+ +

funcRef est la fonction du gestionnaire à appeler lorsque l'évènement loadstart de la ressource est déclenché.

+ +

Exemples

+ +

Contenu HTML

+ +
<img src="myImage.jpg">
+ +

Contenu JavaScript

+ +
// 'loadstart' est lancé le premier, puis 'load', puis 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "webappapis.html#handler-onloadstart", "onloadstart")}}{{Spec2("HTML WHATWG")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+
+ + +

{{Compat("api.GlobalEventHandlers.onloadstart")}}

+
+
diff --git a/files/fr/web/api/globaleventhandlers/onmousedown/index.html b/files/fr/web/api/globaleventhandlers/onmousedown/index.html deleted file mode 100644 index ddc16d114f..0000000000 --- a/files/fr/web/api/globaleventhandlers/onmousedown/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: element.onmousedown -slug: Web/API/GlobalEventHandlers/onmousedown -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onmousedown ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété onmousedown renvoie le gestionnaire de l'évènement mousedown (bouton de la souris enfoncé) pour l'élément courant.

-

Syntaxe

-
code de gestion de l'évènement = element.onMouseDown
-
-

Notes

-

L'évènement mousedown se déclenche lorsque l'utilisateur appuie sur le bouton gauche de la souris.

-

Spécification

-

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onmousedown/index.md b/files/fr/web/api/globaleventhandlers/onmousedown/index.md new file mode 100644 index 0000000000..ddc16d114f --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onmousedown/index.md @@ -0,0 +1,19 @@ +--- +title: element.onmousedown +slug: Web/API/GlobalEventHandlers/onmousedown +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété onmousedown renvoie le gestionnaire de l'évènement mousedown (bouton de la souris enfoncé) pour l'élément courant.

+

Syntaxe

+
code de gestion de l'évènement = element.onMouseDown
+
+

Notes

+

L'évènement mousedown se déclenche lorsque l'utilisateur appuie sur le bouton gauche de la souris.

+

Spécification

+

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onmousemove/index.html b/files/fr/web/api/globaleventhandlers/onmousemove/index.html deleted file mode 100644 index 0521bff2f8..0000000000 --- a/files/fr/web/api/globaleventhandlers/onmousemove/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: element.onmousemove -slug: Web/API/GlobalEventHandlers/onmousemove -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onmousemove ---- -

{{ ApiRef() }}

- -

Résumé

- -

La propriété onmousemove renvoie le code de gestion de l'évènement mousemove pour l'élément courant.

- -

Syntax

- -

element.onmousemove = functionRef

- -

où functionRef est une fonction ou une expression de type function. Consulter la référence des fonctions pour plus de détails.

- -

Le paramètre fournit au gestionnaire d'évènement functionRef lors du déclenchement de l'évènement est objet qui représente l'évènement de déplacment de souris, de type {{ domxref("MouseEvent") }}.

- -

Exemple

- -
document.body.onmousemove = event => {
-  // Suivi de la position de la souris dans la console
-  console.log(`Position de la souris : X = ${event.clientX} | Y = ${event.clientY}`);
-}
- -

Notes

- -

L'évènement mousemove se déclenche lorsque l'utilisateur déplace la souris.

- -

Spécification

- -

{{ DOM0() }}

diff --git a/files/fr/web/api/globaleventhandlers/onmousemove/index.md b/files/fr/web/api/globaleventhandlers/onmousemove/index.md new file mode 100644 index 0000000000..0521bff2f8 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onmousemove/index.md @@ -0,0 +1,37 @@ +--- +title: element.onmousemove +slug: Web/API/GlobalEventHandlers/onmousemove +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onmousemove +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

La propriété onmousemove renvoie le code de gestion de l'évènement mousemove pour l'élément courant.

+ +

Syntax

+ +

element.onmousemove = functionRef

+ +

où functionRef est une fonction ou une expression de type function. Consulter la référence des fonctions pour plus de détails.

+ +

Le paramètre fournit au gestionnaire d'évènement functionRef lors du déclenchement de l'évènement est objet qui représente l'évènement de déplacment de souris, de type {{ domxref("MouseEvent") }}.

+ +

Exemple

+ +
document.body.onmousemove = event => {
+  // Suivi de la position de la souris dans la console
+  console.log(`Position de la souris : X = ${event.clientX} | Y = ${event.clientY}`);
+}
+ +

Notes

+ +

L'évènement mousemove se déclenche lorsque l'utilisateur déplace la souris.

+ +

Spécification

+ +

{{ DOM0() }}

diff --git a/files/fr/web/api/globaleventhandlers/onmouseout/index.html b/files/fr/web/api/globaleventhandlers/onmouseout/index.html deleted file mode 100644 index 89d6a49b93..0000000000 --- a/files/fr/web/api/globaleventhandlers/onmouseout/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: element.onmouseout -slug: Web/API/GlobalEventHandlers/onmouseout -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onmouseout ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété onmouseout renvoie le code de gestion de l'évènement mouseout (sortie du pointeur de la souris) pour l'élément courant.

-

Syntaxe

-
code de gestion de l'évènement = element.onmouseout
-
-

Notes

-

L'évènement mouseout se déclenche lorsque le pointeur de la souris quitte un élément (par exemple lorsque le pointeur sort d'une image sur une page web, cet évènement se déclenche pour l'élément image correspondant).

-

Spécification

-

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onmouseout/index.md b/files/fr/web/api/globaleventhandlers/onmouseout/index.md new file mode 100644 index 0000000000..89d6a49b93 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onmouseout/index.md @@ -0,0 +1,19 @@ +--- +title: element.onmouseout +slug: Web/API/GlobalEventHandlers/onmouseout +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onmouseout +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété onmouseout renvoie le code de gestion de l'évènement mouseout (sortie du pointeur de la souris) pour l'élément courant.

+

Syntaxe

+
code de gestion de l'évènement = element.onmouseout
+
+

Notes

+

L'évènement mouseout se déclenche lorsque le pointeur de la souris quitte un élément (par exemple lorsque le pointeur sort d'une image sur une page web, cet évènement se déclenche pour l'élément image correspondant).

+

Spécification

+

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onmouseover/index.html b/files/fr/web/api/globaleventhandlers/onmouseover/index.html deleted file mode 100644 index cd357f569f..0000000000 --- a/files/fr/web/api/globaleventhandlers/onmouseover/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: element.onmouseover -slug: Web/API/GlobalEventHandlers/onmouseover -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onmouseover ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété onmouseover renvoie le code de gestion de l'évènement onMouseOver pour l'élément courant.

-

Syntaxe

-
code de gestion de l'évènement = element.onmouseover
-
-

Notes

-

L'évènement mouseover se déclenche lorsque l'utilisateur déplace la souris au dessus d'un élément particulier.

-

Spécification

-

Ne fait partie d'aucune spécification.

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onmouseover/index.md b/files/fr/web/api/globaleventhandlers/onmouseover/index.md new file mode 100644 index 0000000000..cd357f569f --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onmouseover/index.md @@ -0,0 +1,17 @@ +--- +title: element.onmouseover +slug: Web/API/GlobalEventHandlers/onmouseover +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onmouseover +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété onmouseover renvoie le code de gestion de l'évènement onMouseOver pour l'élément courant.

+

Syntaxe

+
code de gestion de l'évènement = element.onmouseover
+
+

Notes

+

L'évènement mouseover se déclenche lorsque l'utilisateur déplace la souris au dessus d'un élément particulier.

+

Spécification

+

Ne fait partie d'aucune spécification.

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onmouseup/index.html b/files/fr/web/api/globaleventhandlers/onmouseup/index.html deleted file mode 100644 index 554d073793..0000000000 --- a/files/fr/web/api/globaleventhandlers/onmouseup/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: element.onmouseup -slug: Web/API/GlobalEventHandlers/onmouseup -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onmouseup ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété onmouseup renvoie le gestionnaire de l'évènement mouseup (bouton de la souris relaché) pour l'élément courant.

-

Syntaxe

-
code de gestion de l'évènement = element.onMouseUp
-
-

Notes

-

L'évènement mouseup se déclenche lorsque l'utilisateur relâche le bouton gauche de la souris.

-

Spécification

-

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onmouseup/index.md b/files/fr/web/api/globaleventhandlers/onmouseup/index.md new file mode 100644 index 0000000000..554d073793 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onmouseup/index.md @@ -0,0 +1,19 @@ +--- +title: element.onmouseup +slug: Web/API/GlobalEventHandlers/onmouseup +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onmouseup +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété onmouseup renvoie le gestionnaire de l'évènement mouseup (bouton de la souris relaché) pour l'élément courant.

+

Syntaxe

+
code de gestion de l'évènement = element.onMouseUp
+
+

Notes

+

L'évènement mouseup se déclenche lorsque l'utilisateur relâche le bouton gauche de la souris.

+

Spécification

+

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onreset/index.html b/files/fr/web/api/globaleventhandlers/onreset/index.html deleted file mode 100644 index 40d2325e6f..0000000000 --- a/files/fr/web/api/globaleventhandlers/onreset/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: GlobalEventHandlers.onreset -slug: Web/API/GlobalEventHandlers/onreset -tags: - - API - - DOM - - Gestionnaires d'évènements - - Propriété - - évènements -translation_of: Web/API/GlobalEventHandlers/onreset ---- -

{{ ApiRef() }}

- -

La propriété GlobalEventHandlers.onreset contient un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) déclenché quand un évènement {{event("reset")}} est reçu.

- -

Syntaxe

- -
window.onreset = funcRef;
-
- -

Paramètres

- - - -

Exemple

- -
<html>
-<script>
-function reg() {
-  window.captureEvents(Event.RESET);
-  window.onreset = hit;
-}
-
-function hit() {
- alert('hit');
-}
-</script>
-
-<body onload="reg();">
- <form>
-   <input type="reset" value="reset" />
- </form>
- <div id="d"> </div>
-</body>
-</html>
-
- -

Notes

- -

L'évènement reset est déclenché quand l'utilisateur clique sur le bouton de réinitialisation dans un formulaire (<input type="reset"/>).

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.GlobalEventHandlers.onreset")}}

diff --git a/files/fr/web/api/globaleventhandlers/onreset/index.md b/files/fr/web/api/globaleventhandlers/onreset/index.md new file mode 100644 index 0000000000..40d2325e6f --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onreset/index.md @@ -0,0 +1,73 @@ +--- +title: GlobalEventHandlers.onreset +slug: Web/API/GlobalEventHandlers/onreset +tags: + - API + - DOM + - Gestionnaires d'évènements + - Propriété + - évènements +translation_of: Web/API/GlobalEventHandlers/onreset +--- +

{{ ApiRef() }}

+ +

La propriété GlobalEventHandlers.onreset contient un {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) déclenché quand un évènement {{event("reset")}} est reçu.

+ +

Syntaxe

+ +
window.onreset = funcRef;
+
+ +

Paramètres

+ + + +

Exemple

+ +
<html>
+<script>
+function reg() {
+  window.captureEvents(Event.RESET);
+  window.onreset = hit;
+}
+
+function hit() {
+ alert('hit');
+}
+</script>
+
+<body onload="reg();">
+ <form>
+   <input type="reset" value="reset" />
+ </form>
+ <div id="d"> </div>
+</body>
+</html>
+
+ +

Notes

+ +

L'évènement reset est déclenché quand l'utilisateur clique sur le bouton de réinitialisation dans un formulaire (<input type="reset"/>).

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.GlobalEventHandlers.onreset")}}

diff --git a/files/fr/web/api/globaleventhandlers/onresize/index.html b/files/fr/web/api/globaleventhandlers/onresize/index.html deleted file mode 100644 index 02ef0ffba5..0000000000 --- a/files/fr/web/api/globaleventhandlers/onresize/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: element.onresize -slug: Web/API/GlobalEventHandlers/onresize -tags: - - DOM - - DOM_0 -translation_of: Web/API/window.onresize -translation_of_original: Web/API/Element.onresize ---- -

{{ ApiRef() }}

- -

Résumé

- -

La propriété onresize renvoie le code de gestion onresize de l'élément. Il sert également à définir le code devant s'exécuter lorsqu'un évènement de redimensionnement survient.

- -

Seul l'objet window possède un évènement onresize.

- -

Syntaxe

- -
// attribue une fonction anonyme à onresize
-window.onresize = function(){alert('Redimensionnement de la fenêtre')}
-
-// Attribue la référence d'une fonction à onresize
-function sayHi(){alert('Hi')}
-
-window.onresize = sayHi;
-
-// Montre la valeur de window.onresize
-alert(window.onresize);
-
- -

Un évènement onresize employé avec des cadres sera lancé à chaque fois que le cadre sera redimensionné soit directement, soit comme résultant du redimensionnement de la fenêtre.

- -

Exemple

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-<head>
-<title>exemple avec onresize</title>
-<script type="text/javascript">
-
-function sayHi(){
-  alert('Hi');
-}
-
-window.onresize = sayHi;
-
-</script>
-</head>
-<body>
-<input type="button"
- value="Cliquez ici pour voir window.onresize"
- onclick="alert(window.onresize);"
->
-</body>
-</html>
- -

Notes

- -

Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet window possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement.

- -

Spécification

- -

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onresize/index.md b/files/fr/web/api/globaleventhandlers/onresize/index.md new file mode 100644 index 0000000000..02ef0ffba5 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onresize/index.md @@ -0,0 +1,65 @@ +--- +title: element.onresize +slug: Web/API/GlobalEventHandlers/onresize +tags: + - DOM + - DOM_0 +translation_of: Web/API/window.onresize +translation_of_original: Web/API/Element.onresize +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

La propriété onresize renvoie le code de gestion onresize de l'élément. Il sert également à définir le code devant s'exécuter lorsqu'un évènement de redimensionnement survient.

+ +

Seul l'objet window possède un évènement onresize.

+ +

Syntaxe

+ +
// attribue une fonction anonyme à onresize
+window.onresize = function(){alert('Redimensionnement de la fenêtre')}
+
+// Attribue la référence d'une fonction à onresize
+function sayHi(){alert('Hi')}
+
+window.onresize = sayHi;
+
+// Montre la valeur de window.onresize
+alert(window.onresize);
+
+ +

Un évènement onresize employé avec des cadres sera lancé à chaque fois que le cadre sera redimensionné soit directement, soit comme résultant du redimensionnement de la fenêtre.

+ +

Exemple

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>exemple avec onresize</title>
+<script type="text/javascript">
+
+function sayHi(){
+  alert('Hi');
+}
+
+window.onresize = sayHi;
+
+</script>
+</head>
+<body>
+<input type="button"
+ value="Cliquez ici pour voir window.onresize"
+ onclick="alert(window.onresize);"
+>
+</body>
+</html>
+ +

Notes

+ +

Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet window possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement.

+ +

Spécification

+ +

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onscroll/index.html b/files/fr/web/api/globaleventhandlers/onscroll/index.html deleted file mode 100644 index 7ae7447408..0000000000 --- a/files/fr/web/api/globaleventhandlers/onscroll/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: element.onscroll -slug: Web/API/GlobalEventHandlers/onscroll -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/GlobalEventHandlers/onscroll ---- -

{{ ApiRef() }}

-

Résumé

-

La propriété onscroll renvoie le gestionnaire d'évènement scroll pour l'élément courant.

-

Syntaxe

-
code de gestion d'évènement = element.onscroll;
-
-

Notes

-

L'évènement scroll se déclenche lorsque l'utilisateur fait défiler le contenu d'un élément.

-

Spécification

-

DOM Level 0. Ne fait partie d'aucune spécification.

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onscroll/index.md b/files/fr/web/api/globaleventhandlers/onscroll/index.md new file mode 100644 index 0000000000..7ae7447408 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onscroll/index.md @@ -0,0 +1,17 @@ +--- +title: element.onscroll +slug: Web/API/GlobalEventHandlers/onscroll +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/GlobalEventHandlers/onscroll +--- +

{{ ApiRef() }}

+

Résumé

+

La propriété onscroll renvoie le gestionnaire d'évènement scroll pour l'élément courant.

+

Syntaxe

+
code de gestion d'évènement = element.onscroll;
+
+

Notes

+

L'évènement scroll se déclenche lorsque l'utilisateur fait défiler le contenu d'un élément.

+

Spécification

+

DOM Level 0. Ne fait partie d'aucune spécification.

\ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onselect/index.html b/files/fr/web/api/globaleventhandlers/onselect/index.html deleted file mode 100644 index fea6ba3dde..0000000000 --- a/files/fr/web/api/globaleventhandlers/onselect/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: GlobalEventHandlers.onselect -slug: Web/API/GlobalEventHandlers/onselect -tags: - - API - - Gestionnaire d'événement - - HTML DOM - - Propriété - - Reference -translation_of: Web/API/GlobalEventHandlers/onselect ---- -
{{ ApiRef("HTML DOM") }}
- -

La propriété onselect du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} qui traite les événements select.

- -

L'événement select n'est déclenché qu'après que du texte à l'intérieur d'un {{HtmlElement('input/text', '<input type="text">')}} ou d'un {{HtmlElement("textarea")}} a été sélectionné.

- -

Syntaxe

- -
target.onselect = functionRef;
-
- -

Valeur

- -

réfFonction est un nom de fonction ou une expression retournant une fonction. La fonction reçoit un objet {{domxref("UIEvent")}} comme unique argument.

- -

Exemples

- -

Cet exemple enregistre le texte que vous sélectionnez à l'intérieur d'un élément {{HtmlElement("textarea")}}.

- -

HTML

- -
<textarea>Essayez de sélectionner du texte dans cet élément.</textarea>
-<p id="log"></p>
- -

JavaScript

- -
function enregistrerSelection(event) {
-  const log = document.getElementById('log');
-  const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
-  log.textContent = `Vous avez sélectionné : ${selection}`;
-}
-
-const textarea = document.querySelector('textarea');
-textarea.onselect = enregistrerSelection;
- -

Résultat

- -

{{EmbedLiveSample("Examples")}}

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.GlobalEventHandlers.onselect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/globaleventhandlers/onselect/index.md b/files/fr/web/api/globaleventhandlers/onselect/index.md new file mode 100644 index 0000000000..fea6ba3dde --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onselect/index.md @@ -0,0 +1,76 @@ +--- +title: GlobalEventHandlers.onselect +slug: Web/API/GlobalEventHandlers/onselect +tags: + - API + - Gestionnaire d'événement + - HTML DOM + - Propriété + - Reference +translation_of: Web/API/GlobalEventHandlers/onselect +--- +
{{ ApiRef("HTML DOM") }}
+ +

La propriété onselect du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} qui traite les événements select.

+ +

L'événement select n'est déclenché qu'après que du texte à l'intérieur d'un {{HtmlElement('input/text', '<input type="text">')}} ou d'un {{HtmlElement("textarea")}} a été sélectionné.

+ +

Syntaxe

+ +
target.onselect = functionRef;
+
+ +

Valeur

+ +

réfFonction est un nom de fonction ou une expression retournant une fonction. La fonction reçoit un objet {{domxref("UIEvent")}} comme unique argument.

+ +

Exemples

+ +

Cet exemple enregistre le texte que vous sélectionnez à l'intérieur d'un élément {{HtmlElement("textarea")}}.

+ +

HTML

+ +
<textarea>Essayez de sélectionner du texte dans cet élément.</textarea>
+<p id="log"></p>
+ +

JavaScript

+ +
function enregistrerSelection(event) {
+  const log = document.getElementById('log');
+  const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
+  log.textContent = `Vous avez sélectionné : ${selection}`;
+}
+
+const textarea = document.querySelector('textarea');
+textarea.onselect = enregistrerSelection;
+ +

Résultat

+ +

{{EmbedLiveSample("Examples")}}

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.GlobalEventHandlers.onselect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/globaleventhandlers/onwheel/index.html b/files/fr/web/api/globaleventhandlers/onwheel/index.html deleted file mode 100644 index 00be813af4..0000000000 --- a/files/fr/web/api/globaleventhandlers/onwheel/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Element.onwheel -slug: Web/API/GlobalEventHandlers/onwheel -tags: - - API - - DOM - - Gestionnaires d'évènements - - Propriété - - évènements -translation_of: Web/API/GlobalEventHandlers/onwheel -original_slug: Web/API/Element/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

- -

{{Compat("api.GlobalEventHandlers.onwheel")}}

- -

Voir aussi

- - \ No newline at end of file diff --git a/files/fr/web/api/globaleventhandlers/onwheel/index.md b/files/fr/web/api/globaleventhandlers/onwheel/index.md new file mode 100644 index 0000000000..00be813af4 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onwheel/index.md @@ -0,0 +1,47 @@ +--- +title: Element.onwheel +slug: Web/API/GlobalEventHandlers/onwheel +tags: + - API + - DOM + - Gestionnaires d'évènements + - Propriété + - évènements +translation_of: Web/API/GlobalEventHandlers/onwheel +original_slug: Web/API/Element/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

+ +

{{Compat("api.GlobalEventHandlers.onwheel")}}

+ +

Voir aussi

+ + \ No newline at end of file diff --git a/files/fr/web/api/headers/index.html b/files/fr/web/api/headers/index.html deleted file mode 100644 index bd5d8fd41b..0000000000 --- a/files/fr/web/api/headers/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Headers -slug: Web/API/Headers -tags: - - API - - Experimental - - Fetch - - Fetch API - - Headers - - Headers API - - Interface - - Reference -translation_of: Web/API/Headers ---- -
{{APIRef("Fetch API")}}
- -

L'interface Headers de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet Headers a une liste Headers associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.)  Dans toutes les méthodes de cette interface, les noms des Headers sont reliés à une séquence d'octets sensible à la case.

- -

Pour des raisons de sécurité, les Headers ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

- -

Un objet Headers a aussi une garde associée, qui prend la valeur immutable, request, request-no-cors, reponse, or none. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}}  vont modifier le Header. Pour plus d'informations voir {{Glossary("Guard")}}.

- -

Vous pouvez récuperer un objet Header via les propriétés {{domxref("Request.headers")}} et {{domxref("Response.headers")}} et créer un nouvel objet Header en utilisant le constructeur {{domxref("Headers.Headers()")}}.

- -

Un objet implémentant Headers peut directement être utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de{{domxref('Headers.entries()', 'entries()')}}: for (var p of myHeaders) est équivalent à for (var p of myHeaders.entries()).

- -
-

Note : Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : HTTP headers.

-
- -

Constructeur

- -
-
{{domxref("Headers.Headers()", "Headers()")}}
-
Crée un nouvel objet Headers.
-
- -

Méthodes

- -
-
{{domxref("Headers.append()")}}
-
Ajoute une nouvelle valeur à un Header existant dans un objet Headers, ou ajoute le header s'il n'existe pas déjà.
-
{{domxref("Headers.delete()")}}
-
Supprime un header dans un objet Headers.
-
{{domxref("Headers.entries()")}}
-
Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant d'acceder à toutes les paires clef/valeur contenue dans cet objet.
-
{{domxref("Headers.forEach()")}}
-
Exécute une fonction fournie une fois pour chaque élément du tableau.
-
{{domxref("Headers.get()")}}
-
Retourne une séquence {{domxref("ByteString")}} de toutes les valeurs d'un Header dans un objet Headers avec un nom donné.
-
{{domxref("Headers.has()")}}
-
Retourne un booléen indiquant si un objet Headers contient un certain header.
-
{{domxref("Headers.keys()")}}
-
Retourne un  {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet.
-
{{domxref("Headers.set()")}}
-
Définti une nouvelle valeur pour un header existant dans un objet Headers, ou ajoute le header s'il n'existe pas déjà.
-
{{domxref("Headers.values()")}}
-
Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet.
-
- -
-

Note : Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs,  {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.

-
- -
-

Note : Toutes les méthodes Headers vont retourner TypeError si vous essayez de passer dans une réfférenceun nom qui n'est pas un nom de Header HTTP valide. Les opérations de mutation vont retourner TypeError si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.

-
- -
-

Note : Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.

-
- -

Méthodes obsolètes

- -
-
{{domxref("Headers.getAll()")}}
-
Utilisée pour retourner un array de toutes les valeurs d'un header dans un objet Headers avec un nom donné. Cette méthode est maintenant supprimée des standards, et {{domxref("Headers.get()")}} retourne maintenant toutes les valeurs d'un nom donné au lieu du premier seulement.
-
- -

Exemples

- -

Dans le fragment de code suivant, nous créons un nouvel Header en utilisant le contructeur Headers(), ajoutons un nouvel header à ce dernier en utilisant append(), puis retournons la valeur du header en utilisant get() :

- -
var monHeader = new Headers();
-
-monHeader.append('Content-Type', 'text/xml');
-monHeader.get('Content-Type') // doit retourner 'text/xml'
-
- -

La même chose peut être accomplie en passant par un array d'array  un littéral d'objet au constructeur.

- -
var mesHeaders = new Headers({
-    'Content-Type': 'text/xml'
-});
-
-// ou, en utilisant un array d'array
-mesHeaders = new Headers([
-    ['Content-Type', 'text/xml']
-]);
-
-mesHeaders.get('Content-Type') // doit retourner 'text/xml'
-
- -

Caractéristiques

- - - - - - - - - - - - - - -
CaractéristiquesStatutCommentaires
{{SpecName('Fetch','#headers-class','Headers')}}{{Spec2('Fetch')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Headers")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/headers/index.md b/files/fr/web/api/headers/index.md new file mode 100644 index 0000000000..bd5d8fd41b --- /dev/null +++ b/files/fr/web/api/headers/index.md @@ -0,0 +1,133 @@ +--- +title: Headers +slug: Web/API/Headers +tags: + - API + - Experimental + - Fetch + - Fetch API + - Headers + - Headers API + - Interface + - Reference +translation_of: Web/API/Headers +--- +
{{APIRef("Fetch API")}}
+ +

L'interface Headers de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet Headers a une liste Headers associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.)  Dans toutes les méthodes de cette interface, les noms des Headers sont reliés à une séquence d'octets sensible à la case.

+ +

Pour des raisons de sécurité, les Headers ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

+ +

Un objet Headers a aussi une garde associée, qui prend la valeur immutable, request, request-no-cors, reponse, or none. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}}  vont modifier le Header. Pour plus d'informations voir {{Glossary("Guard")}}.

+ +

Vous pouvez récuperer un objet Header via les propriétés {{domxref("Request.headers")}} et {{domxref("Response.headers")}} et créer un nouvel objet Header en utilisant le constructeur {{domxref("Headers.Headers()")}}.

+ +

Un objet implémentant Headers peut directement être utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de{{domxref('Headers.entries()', 'entries()')}}: for (var p of myHeaders) est équivalent à for (var p of myHeaders.entries()).

+ +
+

Note : Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : HTTP headers.

+
+ +

Constructeur

+ +
+
{{domxref("Headers.Headers()", "Headers()")}}
+
Crée un nouvel objet Headers.
+
+ +

Méthodes

+ +
+
{{domxref("Headers.append()")}}
+
Ajoute une nouvelle valeur à un Header existant dans un objet Headers, ou ajoute le header s'il n'existe pas déjà.
+
{{domxref("Headers.delete()")}}
+
Supprime un header dans un objet Headers.
+
{{domxref("Headers.entries()")}}
+
Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant d'acceder à toutes les paires clef/valeur contenue dans cet objet.
+
{{domxref("Headers.forEach()")}}
+
Exécute une fonction fournie une fois pour chaque élément du tableau.
+
{{domxref("Headers.get()")}}
+
Retourne une séquence {{domxref("ByteString")}} de toutes les valeurs d'un Header dans un objet Headers avec un nom donné.
+
{{domxref("Headers.has()")}}
+
Retourne un booléen indiquant si un objet Headers contient un certain header.
+
{{domxref("Headers.keys()")}}
+
Retourne un  {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet.
+
{{domxref("Headers.set()")}}
+
Définti une nouvelle valeur pour un header existant dans un objet Headers, ou ajoute le header s'il n'existe pas déjà.
+
{{domxref("Headers.values()")}}
+
Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet.
+
+ +
+

Note : Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs,  {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.

+
+ +
+

Note : Toutes les méthodes Headers vont retourner TypeError si vous essayez de passer dans une réfférenceun nom qui n'est pas un nom de Header HTTP valide. Les opérations de mutation vont retourner TypeError si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.

+
+ +
+

Note : Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.

+
+ +

Méthodes obsolètes

+ +
+
{{domxref("Headers.getAll()")}}
+
Utilisée pour retourner un array de toutes les valeurs d'un header dans un objet Headers avec un nom donné. Cette méthode est maintenant supprimée des standards, et {{domxref("Headers.get()")}} retourne maintenant toutes les valeurs d'un nom donné au lieu du premier seulement.
+
+ +

Exemples

+ +

Dans le fragment de code suivant, nous créons un nouvel Header en utilisant le contructeur Headers(), ajoutons un nouvel header à ce dernier en utilisant append(), puis retournons la valeur du header en utilisant get() :

+ +
var monHeader = new Headers();
+
+monHeader.append('Content-Type', 'text/xml');
+monHeader.get('Content-Type') // doit retourner 'text/xml'
+
+ +

La même chose peut être accomplie en passant par un array d'array  un littéral d'objet au constructeur.

+ +
var mesHeaders = new Headers({
+    'Content-Type': 'text/xml'
+});
+
+// ou, en utilisant un array d'array
+mesHeaders = new Headers([
+    ['Content-Type', 'text/xml']
+]);
+
+mesHeaders.get('Content-Type') // doit retourner 'text/xml'
+
+ +

Caractéristiques

+ + + + + + + + + + + + + + +
CaractéristiquesStatutCommentaires
{{SpecName('Fetch','#headers-class','Headers')}}{{Spec2('Fetch')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Headers")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/history/index.html b/files/fr/web/api/history/index.html deleted file mode 100644 index dcc99caefd..0000000000 --- a/files/fr/web/api/history/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: History -slug: Web/API/History -tags: - - DOM - - HTML-DOM -translation_of: Web/API/History ---- -

{{APIRef}}

- -

L'interface History permet de manipuler l'historique de navigation du navigateur, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte.

- -

Propriétés

- -

L'interface History n'hérite d'aucune propriété.

- -
-
{{domxref("History.length")}} {{readOnlyInline}}
-
Retourne un Integer représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne 1.
-
{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
-
Retourne un {{domxref("DOMString")}} de l‘URL active dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur. Utilisez plutôt {{domxref("Location.href")}}.
-
{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
-
Retourne un {{domxref("DOMString")}} de l‘URL suivante dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur.
-
{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
-
Retourne un {{domxref("DOMString")}} de l‘URL précédente dans l'historique de navigation.
-
{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}
-
Retourne une value any représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}.
-
- -

Méthodes

- -

L‘interface History n‘hérite d‘aucune méthode.

- -
-
{{domxref("History.back()")}}
-
Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de history.go(-1). -
-

Note: Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.

-
-
-
{{domxref("History.forward()")}}
-
Avance vers la page suivante dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Suivant du navigateur. Equivalent de history.go(1). -

Note: Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.

-
-
{{domxref("History.go()")}}
-
Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple -1 pour la page précédente ou 1 pour la page suivante. Lorsque integerDelta sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler go() sans paramètres ou un paramètre autre qu'un Integer n‘a aucun effet (sauf par Internet Explorer, qui supporte les URLs en String comme paramètre).
-
{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}
-
Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir Manipuler l'historique du navigateur. -

Note: De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via the structured clone algorithm. Cela permet une plus large variété d‘objets pouvant être passé.

-
-
{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}
-
Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir Manipuler l'historique du navigateur. -

Note: De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via the structured clone algorithm. Cela permet une plus large variété d‘objets pouvant être passé.

-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationEtatCommentaire
{{SpecName('HTML WHATWG', "history.html#history-0", "History")}}{{Spec2('HTML WHATWG')}}Conforme à {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.History")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/history/index.md b/files/fr/web/api/history/index.md new file mode 100644 index 0000000000..dcc99caefd --- /dev/null +++ b/files/fr/web/api/history/index.md @@ -0,0 +1,87 @@ +--- +title: History +slug: Web/API/History +tags: + - DOM + - HTML-DOM +translation_of: Web/API/History +--- +

{{APIRef}}

+ +

L'interface History permet de manipuler l'historique de navigation du navigateur, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte.

+ +

Propriétés

+ +

L'interface History n'hérite d'aucune propriété.

+ +
+
{{domxref("History.length")}} {{readOnlyInline}}
+
Retourne un Integer représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne 1.
+
{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
+
Retourne un {{domxref("DOMString")}} de l‘URL active dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur. Utilisez plutôt {{domxref("Location.href")}}.
+
{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
+
Retourne un {{domxref("DOMString")}} de l‘URL suivante dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur.
+
{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
+
Retourne un {{domxref("DOMString")}} de l‘URL précédente dans l'historique de navigation.
+
{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}
+
Retourne une value any représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}.
+
+ +

Méthodes

+ +

L‘interface History n‘hérite d‘aucune méthode.

+ +
+
{{domxref("History.back()")}}
+
Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de history.go(-1). +
+

Note: Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.

+
+
+
{{domxref("History.forward()")}}
+
Avance vers la page suivante dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Suivant du navigateur. Equivalent de history.go(1). +

Note: Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.

+
+
{{domxref("History.go()")}}
+
Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple -1 pour la page précédente ou 1 pour la page suivante. Lorsque integerDelta sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler go() sans paramètres ou un paramètre autre qu'un Integer n‘a aucun effet (sauf par Internet Explorer, qui supporte les URLs en String comme paramètre).
+
{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}
+
Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir Manipuler l'historique du navigateur. +

Note: De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via the structured clone algorithm. Cela permet une plus large variété d‘objets pouvant être passé.

+
+
{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}
+
Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir Manipuler l'historique du navigateur. +

Note: De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via the structured clone algorithm. Cela permet une plus large variété d‘objets pouvant être passé.

+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationEtatCommentaire
{{SpecName('HTML WHATWG', "history.html#history-0", "History")}}{{Spec2('HTML WHATWG')}}Conforme à {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.History")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/history/length/index.html b/files/fr/web/api/history/length/index.html deleted file mode 100644 index bbed2b4976..0000000000 --- a/files/fr/web/api/history/length/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: History.length -slug: Web/API/History/length -translation_of: Web/API/History/length ---- -
{{APIRef("History API")}}
- -

La propriété en lecture seule History.length retourne un entier indiquant le nombre d'élément dans l'historique de session, incluant la page courante. Par exemple, pour une page dans un nouvel onglet, la propriété retournera 1.

- -

Syntaxe

- -
const length = history.length
-
- -

Spécification

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutsCommentaire
{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.History.length")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/history/length/index.md b/files/fr/web/api/history/length/index.md new file mode 100644 index 0000000000..bbed2b4976 --- /dev/null +++ b/files/fr/web/api/history/length/index.md @@ -0,0 +1,47 @@ +--- +title: History.length +slug: Web/API/History/length +translation_of: Web/API/History/length +--- +
{{APIRef("History API")}}
+ +

La propriété en lecture seule History.length retourne un entier indiquant le nombre d'élément dans l'historique de session, incluant la page courante. Par exemple, pour une page dans un nouvel onglet, la propriété retournera 1.

+ +

Syntaxe

+ +
const length = history.length
+
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutsCommentaire
{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.History.length")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/history_api/example/index.html b/files/fr/web/api/history_api/example/index.html deleted file mode 100644 index 82c3fa5b38..0000000000 --- a/files/fr/web/api/history_api/example/index.html +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: Exemple de navigation en Ajax -slug: Web/API/History_API/Example -translation_of: Web/API/History_API/Example -original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/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

- diff --git a/files/fr/web/api/history_api/example/index.md b/files/fr/web/api/history_api/example/index.md new file mode 100644 index 0000000000..82c3fa5b38 --- /dev/null +++ b/files/fr/web/api/history_api/example/index.md @@ -0,0 +1,397 @@ +--- +title: Exemple de navigation en Ajax +slug: Web/API/History_API/Example +translation_of: Web/API/History_API/Example +original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/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

+ diff --git a/files/fr/web/api/history_api/index.html b/files/fr/web/api/history_api/index.html deleted file mode 100644 index b7d1b6a1e5..0000000000 --- a/files/fr/web/api/history_api/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Manipuler l'historique du navigateur -slug: Web/API/History_API -tags: - - API - - DOM - - Historique -translation_of: Web/API/History_API -original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur ---- -

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 :

- - - -
-

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 :

- - - -

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

- -

{{Compat("api.History")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/history_api/index.md b/files/fr/web/api/history_api/index.md new file mode 100644 index 0000000000..b7d1b6a1e5 --- /dev/null +++ b/files/fr/web/api/history_api/index.md @@ -0,0 +1,188 @@ +--- +title: Manipuler l'historique du navigateur +slug: Web/API/History_API +tags: + - API + - DOM + - Historique +translation_of: Web/API/History_API +original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur +--- +

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 :

+ + + +
+

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 :

+ + + +

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

+ +

{{Compat("api.History")}}

+ +

Voir aussi

+ + 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 deleted file mode 100644 index d6349a6d4b..0000000000 --- a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: Opérations de glissement -slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations -translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations -original_slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement ---- -

Ce qui suit décrit les étapes qui se déroulent lors d'un Glisser Déposer.

- -
-

Note : 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 :

- - - -

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/drag_operations/index.md b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md new file mode 100644 index 0000000000..d6349a6d4b --- /dev/null +++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md @@ -0,0 +1,297 @@ +--- +title: Opérations de glissement +slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations +translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations +original_slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement +--- +

Ce qui suit décrit les étapes qui se déroulent lors d'un Glisser Déposer.

+ +
+

Note : 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 :

+ + + +

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 deleted file mode 100644 index f9856ebd08..0000000000 --- a/files/fr/web/api/html_drag_and_drop_api/index.html +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: Glisser et déposer -slug: Web/API/HTML_Drag_and_Drop_API -tags: - - Avancé - - Glisser-deposer - - Guide - - HTML - - drag and drop -translation_of: Web/API/HTML_Drag_and_Drop_API -original_slug: Web/API/API_HTML_Drag_and_Drop ---- -

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

- - - -

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 :

- - - -

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/html_drag_and_drop_api/index.md b/files/fr/web/api/html_drag_and_drop_api/index.md new file mode 100644 index 0000000000..f9856ebd08 --- /dev/null +++ b/files/fr/web/api/html_drag_and_drop_api/index.md @@ -0,0 +1,275 @@ +--- +title: Glisser et déposer +slug: Web/API/HTML_Drag_and_Drop_API +tags: + - Avancé + - Glisser-deposer + - Guide + - HTML + - drag and drop +translation_of: Web/API/HTML_Drag_and_Drop_API +original_slug: Web/API/API_HTML_Drag_and_Drop +--- +

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

+ + + +

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 :

+ + + +

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/htmlbaseelement/index.html b/files/fr/web/api/htmlbaseelement/index.html deleted file mode 100644 index 955bbf4122..0000000000 --- a/files/fr/web/api/htmlbaseelement/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: HTMLBaseElement -slug: Web/API/HTMLBaseElement -translation_of: Web/API/HTMLBaseElement ---- -
-
{{APIRef("HTML DOM")}}
-
- -
- -
L'interface HTMLBaseElement contient l'URI de base pour un document. Cet objet hérite de toutes les propriétés et des méthodes telles quelles sont décrites dans l'interface {{domxref("HTMLElement")}}.
- -
- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLBaseElement.href")}}
-
est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("href", "base")}}, contenant l'URL de base pour les URLs relatives dans le document.
-
{{domxref("HTMLBaseElement.target")}}
-
est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("target", "base")}}, contenant un contexte de navigation cible par défaut ou une frame pour les éléments qui n'ont pas de cibe spécifiée.
-
- -

Methodes

- -

Pas de méthodes spécifiques; Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "semantics.html#the-base-element", "HTMLBaseElement")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis le dernier snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', "document-metadata.html#the-base-element", "HTMLBaseElement")}}{{Spec2('HTML5.1')}}Aucun changement depuis {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "document-metadata.html#the-base-element", "HTMLBaseElement")}}{{Spec2('HTML5 W3C')}}Aucun changement depuis {{SpecName("DOM2 HTML")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-73629039', 'HTMLBaseElement')}}{{Spec2('DOM2 HTML')}}Aucun changement depuis {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-73629039', 'HTMLBaseElement')}}{{Spec2('DOM1')}}Première définition.
- -

Compatibilités navigateur

- -

{{Compat("api.HTMLBaseElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlbaseelement/index.md b/files/fr/web/api/htmlbaseelement/index.md new file mode 100644 index 0000000000..955bbf4122 --- /dev/null +++ b/files/fr/web/api/htmlbaseelement/index.md @@ -0,0 +1,76 @@ +--- +title: HTMLBaseElement +slug: Web/API/HTMLBaseElement +translation_of: Web/API/HTMLBaseElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +
+ +
L'interface HTMLBaseElement contient l'URI de base pour un document. Cet objet hérite de toutes les propriétés et des méthodes telles quelles sont décrites dans l'interface {{domxref("HTMLElement")}}.
+ +
+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLBaseElement.href")}}
+
est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("href", "base")}}, contenant l'URL de base pour les URLs relatives dans le document.
+
{{domxref("HTMLBaseElement.target")}}
+
est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("target", "base")}}, contenant un contexte de navigation cible par défaut ou une frame pour les éléments qui n'ont pas de cibe spécifiée.
+
+ +

Methodes

+ +

Pas de méthodes spécifiques; Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "semantics.html#the-base-element", "HTMLBaseElement")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis le dernier snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', "document-metadata.html#the-base-element", "HTMLBaseElement")}}{{Spec2('HTML5.1')}}Aucun changement depuis {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "document-metadata.html#the-base-element", "HTMLBaseElement")}}{{Spec2('HTML5 W3C')}}Aucun changement depuis {{SpecName("DOM2 HTML")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-73629039', 'HTMLBaseElement')}}{{Spec2('DOM2 HTML')}}Aucun changement depuis {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-73629039', 'HTMLBaseElement')}}{{Spec2('DOM1')}}Première définition.
+ +

Compatibilités navigateur

+ +

{{Compat("api.HTMLBaseElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlbasefontelement/index.html b/files/fr/web/api/htmlbasefontelement/index.html deleted file mode 100644 index eda1725bb9..0000000000 --- a/files/fr/web/api/htmlbasefontelement/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: HTMLBaseFontElement -slug: Web/API/HTMLBaseFontElement -tags: - - API - - HTML DOM - - Interface - - Obsolete - - Reference -translation_of: Web/API/HTMLBaseFontElement ---- -
{{APIRef("HTML DOM")}}{{obsolete_header}}
- -

L'interface HTMLBaseFontElement fournit des propriétés spéciales (au-delà de l'interface classique {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler les éléments {{HTMLElement("basefont")}}.

- -

L'élément <basefont> est obsolète en HTML4 et supprimé en HTML5. Cette dernière spécification exige que cet élément implémente {{domxref("HTMLUnknownElement")}} plutôt que HTMLBaseFontElement.

- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLBaseFontElement.color")}}
-
Est un {{domxref("DOMString")}} représentant la couleur du texte en utilisant soit une couleur nommée soit une couleur spécifiée au format hexadécimal #RRGGBB.
-
{{domxref("HTMLBaseFontElement.face")}}
-
Est un {{domxref("DOMString")}} représentant une liste d'un ou plusieurs noms de polices. Le texte du document dans le style par défaut est rendu dans la première face de police prise en charge par le navigateur du client. Si aucune police répertoriée n'est installée sur le système local, le navigateur utilise généralement par défaut la police proportionnelle ou à largeur fixe pour ce système.
-
{{domxref("HTMLBaseFontElement.size")}}
-
Est un {{domxref("DOMString")}} représentant la taille de la police sous forme de valeur numérique ou relative. Les valeurs numériques vont de 1 à 7, 1 étant le plus petit et 3 la valeur par défaut. La valeur relative comme par un '+' ou un '-'.
-
- -

Méthodes

- -

Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM2 HTML", "html.html#ID-32774408", "HTMLBaseFontElement")}}{{Spec2('DOM2 HTML')}}Pas de changement.
{{SpecName("DOM1", "level-one-html.html#ID-32774408", "HTMLBaseFontElement")}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLBaseFontElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlbasefontelement/index.md b/files/fr/web/api/htmlbasefontelement/index.md new file mode 100644 index 0000000000..eda1725bb9 --- /dev/null +++ b/files/fr/web/api/htmlbasefontelement/index.md @@ -0,0 +1,65 @@ +--- +title: HTMLBaseFontElement +slug: Web/API/HTMLBaseFontElement +tags: + - API + - HTML DOM + - Interface + - Obsolete + - Reference +translation_of: Web/API/HTMLBaseFontElement +--- +
{{APIRef("HTML DOM")}}{{obsolete_header}}
+ +

L'interface HTMLBaseFontElement fournit des propriétés spéciales (au-delà de l'interface classique {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler les éléments {{HTMLElement("basefont")}}.

+ +

L'élément <basefont> est obsolète en HTML4 et supprimé en HTML5. Cette dernière spécification exige que cet élément implémente {{domxref("HTMLUnknownElement")}} plutôt que HTMLBaseFontElement.

+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLBaseFontElement.color")}}
+
Est un {{domxref("DOMString")}} représentant la couleur du texte en utilisant soit une couleur nommée soit une couleur spécifiée au format hexadécimal #RRGGBB.
+
{{domxref("HTMLBaseFontElement.face")}}
+
Est un {{domxref("DOMString")}} représentant une liste d'un ou plusieurs noms de polices. Le texte du document dans le style par défaut est rendu dans la première face de police prise en charge par le navigateur du client. Si aucune police répertoriée n'est installée sur le système local, le navigateur utilise généralement par défaut la police proportionnelle ou à largeur fixe pour ce système.
+
{{domxref("HTMLBaseFontElement.size")}}
+
Est un {{domxref("DOMString")}} représentant la taille de la police sous forme de valeur numérique ou relative. Les valeurs numériques vont de 1 à 7, 1 étant le plus petit et 3 la valeur par défaut. La valeur relative comme par un '+' ou un '-'.
+
+ +

Méthodes

+ +

Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM2 HTML", "html.html#ID-32774408", "HTMLBaseFontElement")}}{{Spec2('DOM2 HTML')}}Pas de changement.
{{SpecName("DOM1", "level-one-html.html#ID-32774408", "HTMLBaseFontElement")}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLBaseFontElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlbodyelement/index.html b/files/fr/web/api/htmlbodyelement/index.html deleted file mode 100644 index 1e66d99e04..0000000000 --- a/files/fr/web/api/htmlbodyelement/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: HTMLBodyElement -slug: Web/API/HTMLBodyElement -tags: - - API - - HTML DOM - - Interface - - Reference -translation_of: Web/API/HTMLBodyElement ---- -
{{APIRef("HTML DOM")}}
- -

L'interface HTMLBodyElement des propriétés particulières (au-delà de celles de l'interface {{ domxref("HTMLElement") }} dont-elle hérite également) pour manipuler les éléments.

- -

propriétés

- -

Propriétés hérite de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

- -
-
{{domxref("HTMLBodyElement.aLink")}} {{obsolete_inline}}
-
Est un {{ domxref("DOMString") }} qui représente la couleur des liens hypertextes actifs.
-
{{domxref("HTMLBodyElement.background")}} {{obsolete_inline}}
-
Est un {{ domxref("DOMString") }} qui représente la description de l'emplacement de la ressource d'image d'arrière-plan. Notez que ce n'est pas un URI, même si certaines anciennes versions de certains navigateurs s'y attendent.
-
{{domxref("HTMLBodyElement.bgColor")}} {{obsolete_inline}}
-
Est un {{ domxref("DOMString") }} qui représente la couleur de fond du document.
-
{{domxref("HTMLBodyElement.link")}} {{obsolete_inline}}
-
Est un {{ domxref("DOMString") }} qui représente la couleur des liens non visités.
-
{{domxref("HTMLBodyElement.text")}} {{obsolete_inline}}
-
Est un {{ domxref("DOMString") }} qui représente la couleur de premier plan du texte.
-
{{domxref("HTMLBodyElement.vLink")}} {{obsolete_inline}}
-
Est un {{ domxref("DOMString") }} qui représente la couleur des liens visités.
-
- -

méthodes

- -

Aucune méthode spécifique; méthodes hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

- -

Les gestionnaires d'événements

- -

Pas de gestionnaire d'événement spécifique; gestionnaires d'événements hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

- -
-
{{domxref("WindowEventHandlers.onafterprint")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("afterprint")}} est déclenché.
-
{{domxref("WindowEventHandlers.onbeforeprint")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("beforeprint")}} est déclenché.
-
{{domxref("WindowEventHandlers.onbeforeunload")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("beforeunload")}} est déclenché.
-
{{domxref("WindowEventHandlers.onhashchange")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("hashchange")}} est déclenché.
-
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("languagechange")}} est déclenché.
-
{{domxref("WindowEventHandlers.onmessage")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("message")}} est déclenché.
-
{{domxref("WindowEventHandlers.onoffline")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("offline")}} est déclenché.
-
{{domxref("WindowEventHandlers.ononline")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("online")}} est déclenché.
-
{{domxref("WindowEventHandlers.onpagehide")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("pagehide")}} est déclenché.
-
{{domxref("WindowEventHandlers.onpageshow")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("pageshow")}} est déclenché.
-
{{domxref("WindowEventHandlers.onpopstate")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("popstate")}} est déclenché.
-
{{domxref("WindowEventHandlers.onresize")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("resize")}} est déclenché.
-
{{domxref("WindowEventHandlers.onstorage")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("storage")}} est déclenché.
-
{{domxref("WindowEventHandlers.onunload")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("unload")}} est déclenché.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}}{{Spec2('HTML WHATWG')}}Techniquement, les propriétés liées à l'événement, onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage et onunload, ont été passées à {{domxref("WindowEventHandlers")}}, et HTMLBodyElement implémentant cette interface.
{{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}}{{Spec2('HTML5 W3C')}}Les propriétés suivantes sont désormais obsolètes: aLink, bgColor, background, link, text Les propriétés suivantes ont été ajoutées:. vLink, onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onload, onmessage, onoffline, ononline, onpopstate, onresize, et onstorage.
{{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}}{{Spec2('DOM2 HTML')}}Ne change pas de {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}}{{Spec2('DOM1')}}Définition initiale.
- -

Browser compatibility

- -

{{Compat("api.HTMLBodyElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlbodyelement/index.md b/files/fr/web/api/htmlbodyelement/index.md new file mode 100644 index 0000000000..1e66d99e04 --- /dev/null +++ b/files/fr/web/api/htmlbodyelement/index.md @@ -0,0 +1,118 @@ +--- +title: HTMLBodyElement +slug: Web/API/HTMLBodyElement +tags: + - API + - HTML DOM + - Interface + - Reference +translation_of: Web/API/HTMLBodyElement +--- +
{{APIRef("HTML DOM")}}
+ +

L'interface HTMLBodyElement des propriétés particulières (au-delà de celles de l'interface {{ domxref("HTMLElement") }} dont-elle hérite également) pour manipuler les éléments.

+ +

propriétés

+ +

Propriétés hérite de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("HTMLBodyElement.aLink")}} {{obsolete_inline}}
+
Est un {{ domxref("DOMString") }} qui représente la couleur des liens hypertextes actifs.
+
{{domxref("HTMLBodyElement.background")}} {{obsolete_inline}}
+
Est un {{ domxref("DOMString") }} qui représente la description de l'emplacement de la ressource d'image d'arrière-plan. Notez que ce n'est pas un URI, même si certaines anciennes versions de certains navigateurs s'y attendent.
+
{{domxref("HTMLBodyElement.bgColor")}} {{obsolete_inline}}
+
Est un {{ domxref("DOMString") }} qui représente la couleur de fond du document.
+
{{domxref("HTMLBodyElement.link")}} {{obsolete_inline}}
+
Est un {{ domxref("DOMString") }} qui représente la couleur des liens non visités.
+
{{domxref("HTMLBodyElement.text")}} {{obsolete_inline}}
+
Est un {{ domxref("DOMString") }} qui représente la couleur de premier plan du texte.
+
{{domxref("HTMLBodyElement.vLink")}} {{obsolete_inline}}
+
Est un {{ domxref("DOMString") }} qui représente la couleur des liens visités.
+
+ +

méthodes

+ +

Aucune méthode spécifique; méthodes hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

+ +

Les gestionnaires d'événements

+ +

Pas de gestionnaire d'événement spécifique; gestionnaires d'événements hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("afterprint")}} est déclenché.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("beforeprint")}} est déclenché.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("beforeunload")}} est déclenché.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("hashchange")}} est déclenché.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("languagechange")}} est déclenché.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("message")}} est déclenché.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("offline")}} est déclenché.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("online")}} est déclenché.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("pagehide")}} est déclenché.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("pageshow")}} est déclenché.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("popstate")}} est déclenché.
+
{{domxref("WindowEventHandlers.onresize")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("resize")}} est déclenché.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("storage")}} est déclenché.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("unload")}} est déclenché.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}}{{Spec2('HTML WHATWG')}}Techniquement, les propriétés liées à l'événement, onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onlanguagechange, onload, onmessage, onoffline, ononline, onpopstate, onresize, onstorage et onunload, ont été passées à {{domxref("WindowEventHandlers")}}, et HTMLBodyElement implémentant cette interface.
{{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}}{{Spec2('HTML5 W3C')}}Les propriétés suivantes sont désormais obsolètes: aLink, bgColor, background, link, text Les propriétés suivantes ont été ajoutées:. vLink, onafterprint, onbeforeprint, onbeforeunload, onblur, onerror, onfocus, onhashchange, onload, onmessage, onoffline, ononline, onpopstate, onresize, et onstorage.
{{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}}{{Spec2('DOM2 HTML')}}Ne change pas de {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Browser compatibility

+ +

{{Compat("api.HTMLBodyElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlbrelement/index.html b/files/fr/web/api/htmlbrelement/index.html deleted file mode 100644 index 98cbcbaa55..0000000000 --- a/files/fr/web/api/htmlbrelement/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: HTMLBRElement -slug: Web/API/HTMLBRElement -tags: - - DOM - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLBRElement ---- -
- {{ApiRef}}
-

L'interface HTMLBRElement représente un retour à la ligne. Il hérite de {{domxref("HTMLElement")}}.

-

Propriétés

-

Hérite les propriétés de son parent : {{domxref("HTMLElement")}}.

- - - - - - - - - - - - - - - -
NomTypeDescription
clear {{obsolete_inline}}{{domxref("DOMString")}}Indique le flux du texte autours des objets flottants.
-

Méthodes

-

Aucune méthode spécifique ; hérite les méthodes de son parent, {{domxref("HTMLElement")}}.

-

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}{{Spec2('HTML WHATWG')}}Aucun changement par rapport à {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}{{Spec2('HTML5 W3C')}}Aucun changement par rapport à {{SpecName("DOM2 HTML")}}
{{SpecName('DOM2 HTML', 'html.html#ID-ID-56836063', 'HTMLBodyElement')}}{{Spec2('DOM2 HTML')}}Aucun changement par rapport à {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-56836063', 'HTMLBodyElement')}}{{Spec2('DOM1')}}Première définition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLBRElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlbrelement/index.md b/files/fr/web/api/htmlbrelement/index.md new file mode 100644 index 0000000000..98cbcbaa55 --- /dev/null +++ b/files/fr/web/api/htmlbrelement/index.md @@ -0,0 +1,71 @@ +--- +title: HTMLBRElement +slug: Web/API/HTMLBRElement +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLBRElement +--- +
+ {{ApiRef}}
+

L'interface HTMLBRElement représente un retour à la ligne. Il hérite de {{domxref("HTMLElement")}}.

+

Propriétés

+

Hérite les propriétés de son parent : {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + +
NomTypeDescription
clear {{obsolete_inline}}{{domxref("DOMString")}}Indique le flux du texte autours des objets flottants.
+

Méthodes

+

Aucune méthode spécifique ; hérite les méthodes de son parent, {{domxref("HTMLElement")}}.

+

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}{{Spec2('HTML WHATWG')}}Aucun changement par rapport à {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}{{Spec2('HTML5 W3C')}}Aucun changement par rapport à {{SpecName("DOM2 HTML")}}
{{SpecName('DOM2 HTML', 'html.html#ID-ID-56836063', 'HTMLBodyElement')}}{{Spec2('DOM2 HTML')}}Aucun changement par rapport à {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-56836063', 'HTMLBodyElement')}}{{Spec2('DOM1')}}Première définition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLBRElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlbuttonelement/index.html b/files/fr/web/api/htmlbuttonelement/index.html deleted file mode 100644 index 267f98b17b..0000000000 --- a/files/fr/web/api/htmlbuttonelement/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: HTMLButtonElement -slug: Web/API/HTMLButtonElement -tags: - - API - - HTML DOM - - Interface - - Reference - - TopicStub -translation_of: Web/API/HTMLButtonElement ---- -
{{APIRef("HTML DOM")}}
- -

  L'interface   HTMLButtonElement  fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton.

- -

{{InheritanceDiagram(600, 120)}}

- -

Propriétés

- -

Hérite des propriétés de son parent,  {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLButtonElement.accessKey")}}
-
Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton.
-
{{domxref("HTMLButtonElement.autofocus")}}
-
Est un {{domxref ("Boolean")}} indiquant si le contrôle doit avoir ou non le focus d'entrée lors du chargement de la page, sauf si l'utilisateur le remplace, par exemple en tapant un contrôle différent. Cet attribut est spécifié pour un seul élément associé à un formulaire dans un document.
-
{{domxref("HTMLButtonElement.disabled")}}
-
Est un {{domxref ("Boolean")}} indiquant si le contrôle est désactivé ou non, ce qui signifie qu'il n'accepte aucun clic .
-
{{domxref("HTMLButtonElement.form")}} {{readonlyInline}}
-
Est un {{domxref ("HTMLFormElement")}} reflétant le formulaire auquel ce bouton est associé. Si le bouton est un descendant d'un élément de formulaire, cet attribut est l'ID de cet élément de formulaire.
- Si le bouton n'est pas un descendant d'un élément de formulaire, l'attribut peut être l'identifiant de n'importe quel élément de formulaire dans le même document auquel il est lié, ou la valeur null si aucun élément ne correspond .
-
{{domxref("HTMLButtonElement.formAction")}}
-
Est un {{domxref ("DOMString")}} reflétant l'URI d'une ressource qui traite les informations soumises par le bouton. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("action", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
-
{{domxref("HTMLButtonElement.formEnctype")}}
-
Est un {{domxref ("DOMString")}} reflétant le type de contenu utilisé pour soumettre le formulaire au serveur. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("enctype", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
-
{{domxref("HTMLButtonElement.formMethod")}}
-
Est un {{domxref ("DOMChaine")}} reflétant la méthode HTTP que le navigateur utilise pour soumettre le formulaire. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("méthode", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
-
{{domxref("HTMLButtonElement.formNoValidate")}}
-
Est un {{domxref ("Boolean")}} indiquant que le formulaire ne doit pas être validé lors de sa soumission. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("novalidate", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
-
{{domxref("HTMLButtonElement.formTarget")}}
-
Est un {{domxref ("DOMChaîne")}} reflétant un nom ou un mot clé indiquant où afficher la réponse reçue après la soumission du formulaire. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("target", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
-
{{domxref("HTMLButtonElement.labels")}} {{readonlyInline}}
-
Est un {{domxref ("NodeList")}} qui représente une liste d'éléments {{HTMLElement ("label")}} qui sont des étiquettes pour ce bouton.
-
{{domxref("HTMLButtonElement.menu")}} {{experimental_inline}}
-
Est-ce un {{domxref ("HTMLMenuElement")}} représentant l'élément de menu à afficher si le bouton est cliqué et de type = "menu".
-
{{domxref("HTMLButtonElement.name")}}
-
Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire. {{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide.
-
{{domxref("HTMLButtonElement.tabIndex")}}
-
Est un  long qui représente la position de cet élément dans l'ordre de tabulation .
-
{{domxref("HTMLButtonElement.type")}}
-
: Est un {{domxref ("DOMString")}} indiquant le comportement du bouton. C'est un attribut énuméré avec les valeurs possibles suivantes: -
    -
  • "submit": Le bouton soumet le formulaire. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié, {{HTMLVersionInline (5)}} ou s'il est modifié dynamiquement en une valeur vide ou non valide.
    • -
  • "reset": Le bouton réinitialise le formulaire.
    • -
  • "button": Le bouton ne fait rien.
    • -
  • "menu": Le bouton affiche un menu. {{experimental_inline}}
    • -
-
-
{{domxref("HTMLButtonElement.validationMessage")}} {{readonlyInline}}
-
Est un {{domxref ("DOMString")}} représentant le message localisé décrivant les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas candidat à la validation de contrainte (willValidate est false) ou s'il respecte ses contraintes.
-
{{domxref("HTMLButtonElement.validity")}} {{readonlyInline}}
-
Est un {{domxref ("ValidityState")}} représentant les états de validité dans lesquels se trouve ce bouton.
-
{{domxref("HTMLButtonElement.value")}}
-
Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton.
-
{{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}}
-
Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est  false si des conditions l'empêchent de valider la contrainte .
-
- -

Les méthodes

- -

Hérite des méthodes de son parent, {{domxref ("HTMLElement")}}.

- - - - - - - - - - - - - - - - - - - - - -
NomType de retourDescription
checkValidity(){{domxref("Boolean")}} -

Non pris en charge pour les éléments de bouton.

-
-

setCustomValidity(in DOMString error)

- 		voidNon pris en charge pour les éléments de bouton.
- -

Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - moz-submit-invalid")}} pour styler les boutons de soumission en fonction de la validation d'un formulaire.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}}{{Spec2('HTML WHATWG')}}L'attribut suivant a été ajouté : menu.
- L'attribut  type peut prendre une valeur supplémentaire , "menu".
{{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}}{{Spec2('HTML5 W3C')}}Les attributs  tabindex et accesskey,  sont maintenant définis sur {{domxref("HTMLElement")}}.
- Les attributs suivants ont été ajoutés : autofocus, formAction, formEnctype, formMethod, formNoValidate, formTarget, labels, validity, validationMessage, and willValidate.
- Les méthodes suivantes ont été ajoutées : checkValidity(), setCustomValidity().
- The type attribute is no more read-only.
{{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}}{{Spec2('DOM2 HTML')}}Aucun changement de  {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}}{{Spec2('DOM1')}}. Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLButtonElement")}}

- -

Voir également

- - diff --git a/files/fr/web/api/htmlbuttonelement/index.md b/files/fr/web/api/htmlbuttonelement/index.md new file mode 100644 index 0000000000..267f98b17b --- /dev/null +++ b/files/fr/web/api/htmlbuttonelement/index.md @@ -0,0 +1,145 @@ +--- +title: HTMLButtonElement +slug: Web/API/HTMLButtonElement +tags: + - API + - HTML DOM + - Interface + - Reference + - TopicStub +translation_of: Web/API/HTMLButtonElement +--- +
{{APIRef("HTML DOM")}}
+ +

  L'interface   HTMLButtonElement  fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Propriétés

+ +

Hérite des propriétés de son parent,  {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLButtonElement.accessKey")}}
+
Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton.
+
{{domxref("HTMLButtonElement.autofocus")}}
+
Est un {{domxref ("Boolean")}} indiquant si le contrôle doit avoir ou non le focus d'entrée lors du chargement de la page, sauf si l'utilisateur le remplace, par exemple en tapant un contrôle différent. Cet attribut est spécifié pour un seul élément associé à un formulaire dans un document.
+
{{domxref("HTMLButtonElement.disabled")}}
+
Est un {{domxref ("Boolean")}} indiquant si le contrôle est désactivé ou non, ce qui signifie qu'il n'accepte aucun clic .
+
{{domxref("HTMLButtonElement.form")}} {{readonlyInline}}
+
Est un {{domxref ("HTMLFormElement")}} reflétant le formulaire auquel ce bouton est associé. Si le bouton est un descendant d'un élément de formulaire, cet attribut est l'ID de cet élément de formulaire.
+ Si le bouton n'est pas un descendant d'un élément de formulaire, l'attribut peut être l'identifiant de n'importe quel élément de formulaire dans le même document auquel il est lié, ou la valeur null si aucun élément ne correspond .
+
{{domxref("HTMLButtonElement.formAction")}}
+
Est un {{domxref ("DOMString")}} reflétant l'URI d'une ressource qui traite les informations soumises par le bouton. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("action", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
+
{{domxref("HTMLButtonElement.formEnctype")}}
+
Est un {{domxref ("DOMString")}} reflétant le type de contenu utilisé pour soumettre le formulaire au serveur. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("enctype", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
+
{{domxref("HTMLButtonElement.formMethod")}}
+
Est un {{domxref ("DOMChaine")}} reflétant la méthode HTTP que le navigateur utilise pour soumettre le formulaire. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("méthode", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
+
{{domxref("HTMLButtonElement.formNoValidate")}}
+
Est un {{domxref ("Boolean")}} indiquant que le formulaire ne doit pas être validé lors de sa soumission. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("novalidate", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
+
{{domxref("HTMLButtonElement.formTarget")}}
+
Est un {{domxref ("DOMChaîne")}} reflétant un nom ou un mot clé indiquant où afficher la réponse reçue après la soumission du formulaire. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("target", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
+
{{domxref("HTMLButtonElement.labels")}} {{readonlyInline}}
+
Est un {{domxref ("NodeList")}} qui représente une liste d'éléments {{HTMLElement ("label")}} qui sont des étiquettes pour ce bouton.
+
{{domxref("HTMLButtonElement.menu")}} {{experimental_inline}}
+
Est-ce un {{domxref ("HTMLMenuElement")}} représentant l'élément de menu à afficher si le bouton est cliqué et de type = "menu".
+
{{domxref("HTMLButtonElement.name")}}
+
Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire. {{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide.
+
{{domxref("HTMLButtonElement.tabIndex")}}
+
Est un  long qui représente la position de cet élément dans l'ordre de tabulation .
+
{{domxref("HTMLButtonElement.type")}}
+
: Est un {{domxref ("DOMString")}} indiquant le comportement du bouton. C'est un attribut énuméré avec les valeurs possibles suivantes: +
    +
  • "submit": Le bouton soumet le formulaire. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié, {{HTMLVersionInline (5)}} ou s'il est modifié dynamiquement en une valeur vide ou non valide.
    • +
  • "reset": Le bouton réinitialise le formulaire.
    • +
  • "button": Le bouton ne fait rien.
    • +
  • "menu": Le bouton affiche un menu. {{experimental_inline}}
    • +
+
+
{{domxref("HTMLButtonElement.validationMessage")}} {{readonlyInline}}
+
Est un {{domxref ("DOMString")}} représentant le message localisé décrivant les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas candidat à la validation de contrainte (willValidate est false) ou s'il respecte ses contraintes.
+
{{domxref("HTMLButtonElement.validity")}} {{readonlyInline}}
+
Est un {{domxref ("ValidityState")}} représentant les états de validité dans lesquels se trouve ce bouton.
+
{{domxref("HTMLButtonElement.value")}}
+
Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton.
+
{{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}}
+
Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est  false si des conditions l'empêchent de valider la contrainte .
+
+ +

Les méthodes

+ +

Hérite des méthodes de son parent, {{domxref ("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + +
NomType de retourDescription
checkValidity(){{domxref("Boolean")}} +

Non pris en charge pour les éléments de bouton.

+
+

setCustomValidity(in DOMString error)

+ 		voidNon pris en charge pour les éléments de bouton.
+ +

Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - moz-submit-invalid")}} pour styler les boutons de soumission en fonction de la validation d'un formulaire.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}}{{Spec2('HTML WHATWG')}}L'attribut suivant a été ajouté : menu.
+ L'attribut  type peut prendre une valeur supplémentaire , "menu".
{{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}}{{Spec2('HTML5 W3C')}}Les attributs  tabindex et accesskey,  sont maintenant définis sur {{domxref("HTMLElement")}}.
+ Les attributs suivants ont été ajoutés : autofocus, formAction, formEnctype, formMethod, formNoValidate, formTarget, labels, validity, validationMessage, and willValidate.
+ Les méthodes suivantes ont été ajoutées : checkValidity(), setCustomValidity().
+ The type attribute is no more read-only.
{{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}}{{Spec2('DOM2 HTML')}}Aucun changement de  {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}}{{Spec2('DOM1')}}. Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLButtonElement")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/htmlbuttonelement/labels/index.html b/files/fr/web/api/htmlbuttonelement/labels/index.html deleted file mode 100644 index 463b72f021..0000000000 --- a/files/fr/web/api/htmlbuttonelement/labels/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: HTMLButtonElement.labels -slug: Web/API/HTMLButtonElement/labels -tags: - - API - - DOM - - Propriété -translation_of: Web/API/HTMLButtonElement/labels ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule HTMLButtonElement.labels renvoie une {{domxref("NodeList")}} (liste de noeuds) des éléments {{HTMLElement("label")}} (étiquette) associés avec l'élément {{HTMLElement("button")}} (bouton).

- -

Syntaxe

- -
var labelElements = button.labels;
-
- -

Valeur de retour

- -

Une {{domxref("NodeList")}} contenant les éléments <label> associés avec l'élément <button>.

- -

Exemple

- -

HTML

- -
<label id="label1" for="test">Label 1</label>
-<button id="test">Button</button>
-<label id="label2" for="test">Label 2</label>
-
- -

JavaScript

- -
window.addEventListener("DOMContentLoaded", function() {
-  const button = document.getElementById("test");
-  for(var i = 0; i < button.labels.length; i++) {
-    console.log(button.labels[i].textContent); // "Label 1" et "Label 2"
-  }
-});
- -

{{EmbedLiveSample("Example", "100%", 30)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}{{Spec2("HTML WHATWG")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLButtonElement.labels")}}

diff --git a/files/fr/web/api/htmlbuttonelement/labels/index.md b/files/fr/web/api/htmlbuttonelement/labels/index.md new file mode 100644 index 0000000000..463b72f021 --- /dev/null +++ b/files/fr/web/api/htmlbuttonelement/labels/index.md @@ -0,0 +1,66 @@ +--- +title: HTMLButtonElement.labels +slug: Web/API/HTMLButtonElement/labels +tags: + - API + - DOM + - Propriété +translation_of: Web/API/HTMLButtonElement/labels +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule HTMLButtonElement.labels renvoie une {{domxref("NodeList")}} (liste de noeuds) des éléments {{HTMLElement("label")}} (étiquette) associés avec l'élément {{HTMLElement("button")}} (bouton).

+ +

Syntaxe

+ +
var labelElements = button.labels;
+
+ +

Valeur de retour

+ +

Une {{domxref("NodeList")}} contenant les éléments <label> associés avec l'élément <button>.

+ +

Exemple

+ +

HTML

+ +
<label id="label1" for="test">Label 1</label>
+<button id="test">Button</button>
+<label id="label2" for="test">Label 2</label>
+
+ +

JavaScript

+ +
window.addEventListener("DOMContentLoaded", function() {
+  const button = document.getElementById("test");
+  for(var i = 0; i < button.labels.length; i++) {
+    console.log(button.labels[i].textContent); // "Label 1" et "Label 2"
+  }
+});
+ +

{{EmbedLiveSample("Example", "100%", 30)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}{{Spec2("HTML WHATWG")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.HTMLButtonElement.labels")}}

diff --git a/files/fr/web/api/htmlcanvaselement/getcontext/index.html b/files/fr/web/api/htmlcanvaselement/getcontext/index.html deleted file mode 100644 index db299b5342..0000000000 --- a/files/fr/web/api/htmlcanvaselement/getcontext/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: HTMLCanvasElement.getContext() -slug: Web/API/HTMLCanvasElement/getContext -tags: - - API - - Canevas - - HTMLCanvasElement - - Méthode - - Reference -translation_of: Web/API/HTMLCanvasElement/getContext ---- -
{{APIRef("Canvas API")}}
- -

La méthode HTMLCanvasElement.getContext() retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté.

- -

Syntaxe

- -
canvas.getContext(typeDeContexte, attributsDeContexte);
-
- -

Paramètres

- -
-
typeDeContexte
-
Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont : -
    -
  • "2d", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel.
    • -
  • "webgl" (ou "experimental-webgl") pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de WebGL (OpenGL ES 2.0).
    • -
  • "webgl2" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de WebGL (OpenGL ES 3.0). {{experimental_inline}}.
    • -
  • "bitmaprenderer" pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée.
    • -
- -

Note : l'identificateur "experimental-webgl" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le Khronos Group certifie les implémentations WebGL sous certaines règles de conformité.

-
-
attributsDeContexte
-
-

Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple :

- - 
canvas.getContext('webgl',
-                 { antialias: false,
-                   depth: false });
- attributs de contexte 2d : - -
    -
  • alpha : booléen indiquant que le canevas contient un canal alpha. Si positionné à false, le navigateur saura ainsi que l'arrière-plan est toujours opaque, ce qui peut alors accélérer le dessin de contenus et d'images transparents.
    • -
  • {{non-standard_inline}} (Gecko seulement) willReadFrequently : booléen indiquant si de nombreuses opérations de relecture sont prévues ou non. Cela forcera l'utilisation d'un canevas 2D logiciel (au lieu d'un canevas accéléré matériellement) et peut faire économiser de la mémoire lors d'appels fréquents à {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Cette option est seulement disponible si l'indicateur gfx.canvas.willReadFrequently.enable est positionné à true (ce qui, par défaut, est seulement le cas pour B2G/Firefox OS).
    • -
  • {{non-standard_inline}} (Blink seulement) storage : chaîne indiquant quel stockage est utilisé ("persistent" par défaut).
    • -
- attributs de contexte WebGL : - -
    -
  • alpha : booléen indiquant que le canevas contient un tampon alpha.
    • -
  • depth : booléen indiquant que le tampon de dessin a un tampon de profondeur d'au moins 16 bits.
    • -
  • stencil : booléen indiquant que le tampon de dessin a un tampon stencil d'au moins 8 bits.
    • -
  • antialias : booléen indiquant si un anti-aliasing doit être effectué ou non.
    • -
  • premultipliedAlpha : booléen indiquant que le composeur de page supposera que le tampon de dessin contient des couleurs avec alpha pré-multiplié.
    • -
  • preserveDrawingBuffer : si la valeur est is true, les tampons ne seront pas effacés et conserveront leurs valeurs jusqu'à ce qu'elles soient effacées ou réécrites par l'auteur.
    • -
  • -

    failIfMajorPerformanceCaveat : booléen indiquant qu'un contexte sera créé si la performance du système est faible.

    -
    • -
-
-
- -

Valeur retournée :

- -

Un {{domxref("RenderingContext")}}, qui est soit un

- - - -

Si le typeDeContexte ne correspond pas à un contexte de dessin possible, null est retourné.

- -

Exemples

- -

Étant donné l'élément {{HTMLElement("canvas")}} :

- -
<canvas id="canvas" width="300" height="300"></canvas>
-
- -

vous pouvez obtenir un contexte 2d du canevas grâce au code suivant :

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-console.log(ctx); // CanvasRenderingContext2D { ... }
-
- -

Vous avez alors le contexte 2D de représentation pour un canevas, et vous pouvez dessiner à l'intérieur.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5 W3C')}}Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.
- -

Compatibilité navigateurs

- -

{{Compat("api.HTMLCanvasElement.getContext")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlcanvaselement/getcontext/index.md b/files/fr/web/api/htmlcanvaselement/getcontext/index.md new file mode 100644 index 0000000000..db299b5342 --- /dev/null +++ b/files/fr/web/api/htmlcanvaselement/getcontext/index.md @@ -0,0 +1,131 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +tags: + - API + - Canevas + - HTMLCanvasElement + - Méthode + - Reference +translation_of: Web/API/HTMLCanvasElement/getContext +--- +
{{APIRef("Canvas API")}}
+ +

La méthode HTMLCanvasElement.getContext() retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté.

+ +

Syntaxe

+ +
canvas.getContext(typeDeContexte, attributsDeContexte);
+
+ +

Paramètres

+ +
+
typeDeContexte
+
Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont : +
    +
  • "2d", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel.
    • +
  • "webgl" (ou "experimental-webgl") pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de WebGL (OpenGL ES 2.0).
    • +
  • "webgl2" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de WebGL (OpenGL ES 3.0). {{experimental_inline}}.
    • +
  • "bitmaprenderer" pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée.
    • +
+ +

Note : l'identificateur "experimental-webgl" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le Khronos Group certifie les implémentations WebGL sous certaines règles de conformité.

+
+
attributsDeContexte
+
+

Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple :

+ + 
canvas.getContext('webgl',
+                 { antialias: false,
+                   depth: false });
+ attributs de contexte 2d : + +
    +
  • alpha : booléen indiquant que le canevas contient un canal alpha. Si positionné à false, le navigateur saura ainsi que l'arrière-plan est toujours opaque, ce qui peut alors accélérer le dessin de contenus et d'images transparents.
    • +
  • {{non-standard_inline}} (Gecko seulement) willReadFrequently : booléen indiquant si de nombreuses opérations de relecture sont prévues ou non. Cela forcera l'utilisation d'un canevas 2D logiciel (au lieu d'un canevas accéléré matériellement) et peut faire économiser de la mémoire lors d'appels fréquents à {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Cette option est seulement disponible si l'indicateur gfx.canvas.willReadFrequently.enable est positionné à true (ce qui, par défaut, est seulement le cas pour B2G/Firefox OS).
    • +
  • {{non-standard_inline}} (Blink seulement) storage : chaîne indiquant quel stockage est utilisé ("persistent" par défaut).
    • +
+ attributs de contexte WebGL : + +
    +
  • alpha : booléen indiquant que le canevas contient un tampon alpha.
    • +
  • depth : booléen indiquant que le tampon de dessin a un tampon de profondeur d'au moins 16 bits.
    • +
  • stencil : booléen indiquant que le tampon de dessin a un tampon stencil d'au moins 8 bits.
    • +
  • antialias : booléen indiquant si un anti-aliasing doit être effectué ou non.
    • +
  • premultipliedAlpha : booléen indiquant que le composeur de page supposera que le tampon de dessin contient des couleurs avec alpha pré-multiplié.
    • +
  • preserveDrawingBuffer : si la valeur est is true, les tampons ne seront pas effacés et conserveront leurs valeurs jusqu'à ce qu'elles soient effacées ou réécrites par l'auteur.
    • +
  • +

    failIfMajorPerformanceCaveat : booléen indiquant qu'un contexte sera créé si la performance du système est faible.

    +
    • +
+
+
+ +

Valeur retournée :

+ +

Un {{domxref("RenderingContext")}}, qui est soit un

+ + + +

Si le typeDeContexte ne correspond pas à un contexte de dessin possible, null est retourné.

+ +

Exemples

+ +

Étant donné l'élément {{HTMLElement("canvas")}} :

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

vous pouvez obtenir un contexte 2d du canevas grâce au code suivant :

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+
+ +

Vous avez alors le contexte 2D de représentation pour un canevas, et vous pouvez dessiner à l'intérieur.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5 W3C')}}Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.
+ +

Compatibilité navigateurs

+ +

{{Compat("api.HTMLCanvasElement.getContext")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlcanvaselement/height/index.html b/files/fr/web/api/htmlcanvaselement/height/index.html deleted file mode 100644 index c56de245f4..0000000000 --- a/files/fr/web/api/htmlcanvaselement/height/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: HTMLCanvasElement.height -slug: Web/API/HTMLCanvasElement/height -tags: - - API - - Canvas - - HTMLCanvasElement - - Propriété -translation_of: Web/API/HTMLCanvasElement/height ---- -
-
-
{{APIRef("Canvas API")}}
-
-
- -

La propriété HTMLCanvasElement.height est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de 150 is utilisée.

- -

C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas.

- -

Syntaxe

- -
var pxl = canvas.height;
-canvas.height = pxl;
-
- -

Exemples

- -

Étant donné cet élément {{HTMLElement("canvas")}} :

- -
<canvas id="canvas" width="300" height="300"></canvas>
-
- -

vous pouvez obtenir la hauteur du canevas avec le code suivant :

- -
var canvas = document.getElementById('canvas');
-console.log(canvas.height); // 300
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5 W3C')}}Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLCanvasElement.height")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlcanvaselement/height/index.md b/files/fr/web/api/htmlcanvaselement/height/index.md new file mode 100644 index 0000000000..c56de245f4 --- /dev/null +++ b/files/fr/web/api/htmlcanvaselement/height/index.md @@ -0,0 +1,76 @@ +--- +title: HTMLCanvasElement.height +slug: Web/API/HTMLCanvasElement/height +tags: + - API + - Canvas + - HTMLCanvasElement + - Propriété +translation_of: Web/API/HTMLCanvasElement/height +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

La propriété HTMLCanvasElement.height est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de 150 is utilisée.

+ +

C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas.

+ +

Syntaxe

+ +
var pxl = canvas.height;
+canvas.height = pxl;
+
+ +

Exemples

+ +

Étant donné cet élément {{HTMLElement("canvas")}} :

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

vous pouvez obtenir la hauteur du canevas avec le code suivant :

+ +
var canvas = document.getElementById('canvas');
+console.log(canvas.height); // 300
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5 W3C')}}Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLCanvasElement.height")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlcanvaselement/index.html b/files/fr/web/api/htmlcanvaselement/index.html deleted file mode 100644 index bdfdfd8945..0000000000 --- a/files/fr/web/api/htmlcanvaselement/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: HTMLCanvasElement -slug: Web/API/HTMLCanvasElement -tags: - - Canvas -translation_of: Web/API/HTMLCanvasElement ---- -
{{ApiRef}}
- -

L'interface HTMLCanvasElement fournit un ensemble de propriétés et de méthodes pour manipuler la disposition et la représentation des éléments canvas. L'interface HTMLCanvasElement hérite également des propriétés et des méthodes de l'interface {{domxref("HTMLElement")}}.

- -

Propriétés

- -

Propriétés hérités de son parent, {{domxref("HTMLElement")}}.

- - - - - - - - - - - - - - - - - - - - - -
NomTypeDescription
heightunsigned longReprésente l'attribut HTML {{htmlattrxref("height", "canvas")}}, qui spécifie la hauteur de l'espace des coordonnées en pixels CSS.
widthunsigned longReprésente l'attribut HTML {{htmlattrxref("width", "canvas")}}, qui spécifie la largeur de l'espace des coordonnées en pixels CSS.
- -

Méthodes

- -

Méthodes héritées de son parent, {{domxref("HTMLElement")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom & argumentsRésultatDescription
getContext(in {{domxref("DOMString")}} contextId){{domxref("RenderingContext")}}Renvoie un contexte de dessin sur le canvas, ou null si l'ID de contexte n'est pas supporté. Un contexte de dessin vous permet de dessiner sur le canvas. Appeler getContext avec "2d" renvoie un object {{domxref("CanvasRenderingContext2D")}}, alors que l'appeler avec "experimental-webgl" (ou "webgl") renvoie un objet {{domxref("WebGLRenderingContext")}} . Ce dernier contexte n'est disponible que dans les navigateur qui implémentent WebGL.
supportsContext() {{experimental_inline}}{{domxref("Boolean")}}Renvoie une valeur {{domxref("Boolean")}} indiquant si le contexte donné est supporté par ce canvas.
setContext() {{experimental_inline}}voidChnage de contexte de l'élément en rapport avec celui fourni.
transferControlToProxy() {{experimental_inline}}{{domxref("CanvasProxy")}}Retourne un mandataire pour autoriser le canvas à être utilisé dans un autre {{domxref("Worker")}}.
toDataURL(in optional {{domxref("DOMString")}} type, in any ...args){{domxref("DOMString")}}Renvoie une data: URL contenant une représentation de l'image au format spécifié par l'argument type (PNG par défaut). L'image renvoyée est en 96dpi. -
    -
  • Si la hauteur ou la largeur du canvas est 0, "data:," représentant une chaîne vide, est renvoyée.
    • -
  • Si le format demandé n'est pas image/png, mais que la valeur renvoyée commence par data:image/png, alors le format demandé n'est pas supporté.
    • -
  • Chrome supporte le format image/webp.
    • -
  • Si le format demandé est image/jpeg ou image/webp, alors le second argument, s'il est compris entre 0.0 et 1.0, est considéré comme une indication de la qualité d'image ; si le second argument est n'importe quoi d'autre, la valeur par défaut pour la qualité est utilisé. Les autres arguments sont ignorés.
    • -
-
toDataURLHD(){{experimental_inline}}{{domxref("DOMString")}}Renvoie une data: URL contenant une représentation de l'image au format spécifié par type (PNG par défaut). L'image renvoyée est à la résolution native du canvas. -
    -
  • Si la hauteur ou la largeur du canvas est 0, "data:," représentant une chaîne vide, est renvoyée.
    • -
  • Si le format demandé n'est pas image/png, mais que la valeur renvoyée commence par data:image/png, alors le format demandé n'est pas supporté.
    • -
  • Chrome supporte le format image/webp.
    • -
  • Si le format demandé est image/jpeg ou image/webp, alors le second argument, s'il est compris entre 0.0 et 1.0, est considéré comme une indication de la qualité d'image ; si le second argument est n'importe quoi d'autre, la valeur par défaut pour la qualité est utilisé. Les autres arguments sont ignorés.
    • -
-
toBlob(in FileCallback callback, in optional {{domxref("DOMString")}} type, in any ...args)voidRenvoie un objet {{domxref("Blob")}} représentant l'image contenue dans le canvas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire au choix du navigateur. Si type n'est pas précisé, le format de l'image est image/png. L'image renvoyée est en 96dpi.
toBlobHD(in FileCallback callback, in optional {{domxref("DOMString")}} type, in any ...args) {{experimental_inline}}voidRenvoie un objet {{domxref("Blob")}} représentant l'image contenue dans le canvas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire au choix du navigateur. Si type n'est pas précisé, le format de l'image est image/png. L'image renvoyée est à la résolution native du canvas.
mozGetAsFile(in {{domxref("DOMString")}} name, in optional {{domxref("DOMString")}} type) {{non-standard_inline}}{{domxref("File")}}Renvoie un objet {{domxref("File")}} représentant l'image contenue dans le canvas ; ce fichier est en mémoire avec le nom précisé. Si type n'est pas précisé, le fotmat de l'image est image/png.
void mozFetchAsStream(in {{interface("nsIInputStreamCallback")}} callback, [optional] in DOMString type) {{non-standard_inline}}voidCrée un nouveau flux d'entrée qui, quand il est prêt, fournit le contenu du canvas en tant que données d'image. Quand le nouveau flux est prêt, la fonction de rappel spécifiée {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}} est appelée. Si type n'est pas précisée, Le format de l'image est image/png. -
-

Note : Cette méthode ne peut être utilisée que depuis le code chrome.

-
-
- -

Examples

- -

Example: Obtenir la data-url du canvas

- -

D'abord, dessinez dans le canvas, ensuite appelez canvas.toDataURL() pour obtenir la data: URL du canvas.

- -
function test() {
- var canvas = document.getElementById("canvas");
- var url = canvas.toDataURL();
-
- var nouvelleImg = document.createElement("img");
- nouvelleImg.src = url;
- document.body.appendChild(nouvelleImg);
-}
-
- -

Example: Obtenir un fichier représentant le canvas

- -

Une fois que vous avez dessiné du contenu dans un canvas, vous pouvez le convertir dans un fichier avec l'un des formats supportés. Par exemple, l'extrait de code ci-dessous récupère l'image contenue dans l'élément canvas avec l'ID "canvas", en effectue une copie au format PNG, puis ajoute un nouvel élément {{HTMLElement("img")}} au document, dont l'image source est celle créée en utilisant le canvas.

- -
function test() {
-  var canvas = document.getElementById("canvas");
-  canvas.toBlob(function(blob) {
-    var nouvelleImg = document.createElement("img"),
-        url = URL.createObjectURL(blob);
-    nouvelleImg.onload = function() {
-      // Il n'est plus nécessaire de lire le blob, il est donc révoqué
-      URL.revokeObjectURL(url);
-    };
-    nouvelleImg.src = url;
-    document.body.appendChild(nouvelleImg);
-  });
-}
- -

Vous pouvez utiliser cette technique en association avec les événemments de souris pour effectuer un changement d'images dynamique (niveau de gris et couleur dans cet exemple) :

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>MDC Example</title>
-<script type="text/javascript">
-function afficherImageCouleur() {
-  this.style.display = "none";
-  this.nextSibling.style.display = "inline";
-}
-
-function afficherImageGrise() {
-  this.previousSibling.style.display = "inline";
-  this.style.display = "none";
-}
-
-function supprimerCouleurs() {
-  var aImages = document.getElementsByClassName("grayscale"),
-      nImgsLong = aImages.length,
-      oCanvas = document.createElement("canvas"),
-      oCtx = oCanvas.getContext("2d");
-  for (var nLargeur, nHauteur, oImgData, oImgGrise, nPixel, aPix, nPixLong, nImgId = 0; nImgId < nImgsLong; nImgId++) {
-    oImgCouleur = aImages[nImgId];
-    nLargeur = oImgCouleur .offsetWidth;
-    nHauteur = oImgCouleur .offsetHeight;
-    oCanvas.width = nWidth;
-    oCanvas.height = nHeight;
-    oCtx.drawImage(oImgCouleur , 0, 0);
-    oImgData = oCtx.getImageData(0, 0, nLargeur, nHauteur);
-    aPix = oImgData.data;
-    nPixLong = aPix.length;
-    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
-      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
-    }
-    oCtx.putImageData(oImgData, 0, 0);
-    oImgGrise = new Image();
-    oImg.src = oCanvas.toDataURL();
-    oImgGrise.onmouseover = afficherImageCouleur;
-    oImgCouleur.onmouseout = afficherImageGrise;
-    oCtx.clearRect(0, 0, nLargeur, nHauteur);
-    oImgCouleur.style.display = "none";
-    oImgCouleur.parentNode.insertBefore(oImgGrise , oImgCouleur);
-  }
-}
-</script>
-</head>
-
-<body onload="supprimerCouleurs();">
-<p><img class="grayscale" src="chagall.jpg" alt="" /></p>
-</body>
-</html>
- -

Remarquez qu'ici nous créons une image PNG ; si vous ajoutez un second paramètre à l'appel de toBlob(), vous pouvez spécifier le type d'image. Par exemple, pour obtenir l'image au format JPEG :

- -
 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG avec une qualité de 95%
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "embedded-content-0.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}La méthode getContext() retourne un {{domxref("RenderingContext")}} au lieu d'un object opaque.
- Les méthodes supportsContext(), setContext(), transferControlToProxy(), toDataURLHD(), toBlobURLHD() ont été ajoutées.
{{SpecName('HTML5 W3C', "the-canvas-element.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLCanvasElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlcanvaselement/index.md b/files/fr/web/api/htmlcanvaselement/index.md new file mode 100644 index 0000000000..bdfdfd8945 --- /dev/null +++ b/files/fr/web/api/htmlcanvaselement/index.md @@ -0,0 +1,245 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - Canvas +translation_of: Web/API/HTMLCanvasElement +--- +
{{ApiRef}}
+ +

L'interface HTMLCanvasElement fournit un ensemble de propriétés et de méthodes pour manipuler la disposition et la représentation des éléments canvas. L'interface HTMLCanvasElement hérite également des propriétés et des méthodes de l'interface {{domxref("HTMLElement")}}.

+ +

Propriétés

+ +

Propriétés hérités de son parent, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + +
NomTypeDescription
heightunsigned longReprésente l'attribut HTML {{htmlattrxref("height", "canvas")}}, qui spécifie la hauteur de l'espace des coordonnées en pixels CSS.
widthunsigned longReprésente l'attribut HTML {{htmlattrxref("width", "canvas")}}, qui spécifie la largeur de l'espace des coordonnées en pixels CSS.
+ +

Méthodes

+ +

Méthodes héritées de son parent, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom & argumentsRésultatDescription
getContext(in {{domxref("DOMString")}} contextId){{domxref("RenderingContext")}}Renvoie un contexte de dessin sur le canvas, ou null si l'ID de contexte n'est pas supporté. Un contexte de dessin vous permet de dessiner sur le canvas. Appeler getContext avec "2d" renvoie un object {{domxref("CanvasRenderingContext2D")}}, alors que l'appeler avec "experimental-webgl" (ou "webgl") renvoie un objet {{domxref("WebGLRenderingContext")}} . Ce dernier contexte n'est disponible que dans les navigateur qui implémentent WebGL.
supportsContext() {{experimental_inline}}{{domxref("Boolean")}}Renvoie une valeur {{domxref("Boolean")}} indiquant si le contexte donné est supporté par ce canvas.
setContext() {{experimental_inline}}voidChnage de contexte de l'élément en rapport avec celui fourni.
transferControlToProxy() {{experimental_inline}}{{domxref("CanvasProxy")}}Retourne un mandataire pour autoriser le canvas à être utilisé dans un autre {{domxref("Worker")}}.
toDataURL(in optional {{domxref("DOMString")}} type, in any ...args){{domxref("DOMString")}}Renvoie une data: URL contenant une représentation de l'image au format spécifié par l'argument type (PNG par défaut). L'image renvoyée est en 96dpi. +
    +
  • Si la hauteur ou la largeur du canvas est 0, "data:," représentant une chaîne vide, est renvoyée.
    • +
  • Si le format demandé n'est pas image/png, mais que la valeur renvoyée commence par data:image/png, alors le format demandé n'est pas supporté.
    • +
  • Chrome supporte le format image/webp.
    • +
  • Si le format demandé est image/jpeg ou image/webp, alors le second argument, s'il est compris entre 0.0 et 1.0, est considéré comme une indication de la qualité d'image ; si le second argument est n'importe quoi d'autre, la valeur par défaut pour la qualité est utilisé. Les autres arguments sont ignorés.
    • +
+
toDataURLHD(){{experimental_inline}}{{domxref("DOMString")}}Renvoie une data: URL contenant une représentation de l'image au format spécifié par type (PNG par défaut). L'image renvoyée est à la résolution native du canvas. +
    +
  • Si la hauteur ou la largeur du canvas est 0, "data:," représentant une chaîne vide, est renvoyée.
    • +
  • Si le format demandé n'est pas image/png, mais que la valeur renvoyée commence par data:image/png, alors le format demandé n'est pas supporté.
    • +
  • Chrome supporte le format image/webp.
    • +
  • Si le format demandé est image/jpeg ou image/webp, alors le second argument, s'il est compris entre 0.0 et 1.0, est considéré comme une indication de la qualité d'image ; si le second argument est n'importe quoi d'autre, la valeur par défaut pour la qualité est utilisé. Les autres arguments sont ignorés.
    • +
+
toBlob(in FileCallback callback, in optional {{domxref("DOMString")}} type, in any ...args)voidRenvoie un objet {{domxref("Blob")}} représentant l'image contenue dans le canvas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire au choix du navigateur. Si type n'est pas précisé, le format de l'image est image/png. L'image renvoyée est en 96dpi.
toBlobHD(in FileCallback callback, in optional {{domxref("DOMString")}} type, in any ...args) {{experimental_inline}}voidRenvoie un objet {{domxref("Blob")}} représentant l'image contenue dans le canvas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire au choix du navigateur. Si type n'est pas précisé, le format de l'image est image/png. L'image renvoyée est à la résolution native du canvas.
mozGetAsFile(in {{domxref("DOMString")}} name, in optional {{domxref("DOMString")}} type) {{non-standard_inline}}{{domxref("File")}}Renvoie un objet {{domxref("File")}} représentant l'image contenue dans le canvas ; ce fichier est en mémoire avec le nom précisé. Si type n'est pas précisé, le fotmat de l'image est image/png.
void mozFetchAsStream(in {{interface("nsIInputStreamCallback")}} callback, [optional] in DOMString type) {{non-standard_inline}}voidCrée un nouveau flux d'entrée qui, quand il est prêt, fournit le contenu du canvas en tant que données d'image. Quand le nouveau flux est prêt, la fonction de rappel spécifiée {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}} est appelée. Si type n'est pas précisée, Le format de l'image est image/png. +
+

Note : Cette méthode ne peut être utilisée que depuis le code chrome.

+
+
+ +

Examples

+ +

Example: Obtenir la data-url du canvas

+ +

D'abord, dessinez dans le canvas, ensuite appelez canvas.toDataURL() pour obtenir la data: URL du canvas.

+ +
function test() {
+ var canvas = document.getElementById("canvas");
+ var url = canvas.toDataURL();
+
+ var nouvelleImg = document.createElement("img");
+ nouvelleImg.src = url;
+ document.body.appendChild(nouvelleImg);
+}
+
+ +

Example: Obtenir un fichier représentant le canvas

+ +

Une fois que vous avez dessiné du contenu dans un canvas, vous pouvez le convertir dans un fichier avec l'un des formats supportés. Par exemple, l'extrait de code ci-dessous récupère l'image contenue dans l'élément canvas avec l'ID "canvas", en effectue une copie au format PNG, puis ajoute un nouvel élément {{HTMLElement("img")}} au document, dont l'image source est celle créée en utilisant le canvas.

+ +
function test() {
+  var canvas = document.getElementById("canvas");
+  canvas.toBlob(function(blob) {
+    var nouvelleImg = document.createElement("img"),
+        url = URL.createObjectURL(blob);
+    nouvelleImg.onload = function() {
+      // Il n'est plus nécessaire de lire le blob, il est donc révoqué
+      URL.revokeObjectURL(url);
+    };
+    nouvelleImg.src = url;
+    document.body.appendChild(nouvelleImg);
+  });
+}
+ +

Vous pouvez utiliser cette technique en association avec les événemments de souris pour effectuer un changement d'images dynamique (niveau de gris et couleur dans cet exemple) :

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDC Example</title>
+<script type="text/javascript">
+function afficherImageCouleur() {
+  this.style.display = "none";
+  this.nextSibling.style.display = "inline";
+}
+
+function afficherImageGrise() {
+  this.previousSibling.style.display = "inline";
+  this.style.display = "none";
+}
+
+function supprimerCouleurs() {
+  var aImages = document.getElementsByClassName("grayscale"),
+      nImgsLong = aImages.length,
+      oCanvas = document.createElement("canvas"),
+      oCtx = oCanvas.getContext("2d");
+  for (var nLargeur, nHauteur, oImgData, oImgGrise, nPixel, aPix, nPixLong, nImgId = 0; nImgId < nImgsLong; nImgId++) {
+    oImgCouleur = aImages[nImgId];
+    nLargeur = oImgCouleur .offsetWidth;
+    nHauteur = oImgCouleur .offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oImgCouleur , 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nLargeur, nHauteur);
+    aPix = oImgData.data;
+    nPixLong = aPix.length;
+    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oImgGrise = new Image();
+    oImg.src = oCanvas.toDataURL();
+    oImgGrise.onmouseover = afficherImageCouleur;
+    oImgCouleur.onmouseout = afficherImageGrise;
+    oCtx.clearRect(0, 0, nLargeur, nHauteur);
+    oImgCouleur.style.display = "none";
+    oImgCouleur.parentNode.insertBefore(oImgGrise , oImgCouleur);
+  }
+}
+</script>
+</head>
+
+<body onload="supprimerCouleurs();">
+<p><img class="grayscale" src="chagall.jpg" alt="" /></p>
+</body>
+</html>
+ +

Remarquez qu'ici nous créons une image PNG ; si vous ajoutez un second paramètre à l'appel de toBlob(), vous pouvez spécifier le type d'image. Par exemple, pour obtenir l'image au format JPEG :

+ +
 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG avec une qualité de 95%
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "embedded-content-0.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}La méthode getContext() retourne un {{domxref("RenderingContext")}} au lieu d'un object opaque.
+ Les méthodes supportsContext(), setContext(), transferControlToProxy(), toDataURLHD(), toBlobURLHD() ont été ajoutées.
{{SpecName('HTML5 W3C', "the-canvas-element.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLCanvasElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlcollection/index.html b/files/fr/web/api/htmlcollection/index.html deleted file mode 100644 index 4776f87c85..0000000000 --- a/files/fr/web/api/htmlcollection/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: HTMLCollection -slug: Web/API/HTMLCollection -tags: - - API - - DOM - - Reference -translation_of: Web/API/HTMLCollection ---- -

{{APIRef("HTML DOM")}}

- -

L'interface HTMLCollection est constituée d'une collection générique (à la manière d'un tableau similaire à arguments) d'éléments (dans l'ordre du document) et offre des méthodes et des propriétés pour sélectionner ces éléments dans la liste.

- -

Note: Cette interface est appelée HTMLCollection pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML).

- -

Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le document concerné change.

- -

Propriétés

- -
-
{{domxref("HTMLCollection.length")}} {{readonlyInline}}
-
Retourne le nombre d'éléments de la collection.
-
- -

Méthodes

- -
-
{{domxref("HTMLCollection.item()")}}
-
Retourne le nœud spécifique à l'index basé sur zéro donné dans la liste. Retourne null si l'index est hors de portée.
-
{{domxref("HTMLCollection.namedItem()")}}
-
Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par name. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut name. Retourne null si aucun nœud n'existe pour le nom donné.
-
- -

Utilisation en JavaScript

- -

HTMLCollection expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas  purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette.

- -

Par exemple, en supposant qu'il y ait un élément <form> (formulaire) dans le document et que son id soit "myForm" :

- -
var elem1, elem2;
-
-// document.forms est une HTMLCollection
-
-elem1 = document.forms[0];
-elem2 = document.forms.item(0);
-
-alert(elem1 === elem2); // affiche : "true" (vrai)
-
-elem1 = document.forms.myForm;
-elem2 = document.forms.namedItem("myForm");
-
-alert(elem1 === elem2); // affiche : "true"
-
-elem1 = document.forms["named.item.with.periods"];
- -

Compatibilité des navigateurs

- -

Certains navigateurs se comportent différemment quand il y a plus d'un élément correspondant à la chaîne utilisée comme index (ou l'argument namedItem). Firefox 8 se comporte comme spécifié dans DOM 2 et DOM4, en retournant le premier élément correspondant. Les navigateurs WebKit et Internet Explorer, dans ce cas, retournent une autre HTMLCollection et Opera retourne un {{domxref("NodeList")}} de tous les éléments correspondants.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatutCommentaire
{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM2 HTML') }} 
{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM1') }}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlcollection/index.md b/files/fr/web/api/htmlcollection/index.md new file mode 100644 index 0000000000..4776f87c85 --- /dev/null +++ b/files/fr/web/api/htmlcollection/index.md @@ -0,0 +1,94 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +tags: + - API + - DOM + - Reference +translation_of: Web/API/HTMLCollection +--- +

{{APIRef("HTML DOM")}}

+ +

L'interface HTMLCollection est constituée d'une collection générique (à la manière d'un tableau similaire à arguments) d'éléments (dans l'ordre du document) et offre des méthodes et des propriétés pour sélectionner ces éléments dans la liste.

+ +

Note: Cette interface est appelée HTMLCollection pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML).

+ +

Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le document concerné change.

+ +

Propriétés

+ +
+
{{domxref("HTMLCollection.length")}} {{readonlyInline}}
+
Retourne le nombre d'éléments de la collection.
+
+ +

Méthodes

+ +
+
{{domxref("HTMLCollection.item()")}}
+
Retourne le nœud spécifique à l'index basé sur zéro donné dans la liste. Retourne null si l'index est hors de portée.
+
{{domxref("HTMLCollection.namedItem()")}}
+
Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par name. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut name. Retourne null si aucun nœud n'existe pour le nom donné.
+
+ +

Utilisation en JavaScript

+ +

HTMLCollection expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas  purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette.

+ +

Par exemple, en supposant qu'il y ait un élément <form> (formulaire) dans le document et que son id soit "myForm" :

+ +
var elem1, elem2;
+
+// document.forms est une HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // affiche : "true" (vrai)
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // affiche : "true"
+
+elem1 = document.forms["named.item.with.periods"];
+ +

Compatibilité des navigateurs

+ +

Certains navigateurs se comportent différemment quand il y a plus d'un élément correspondant à la chaîne utilisée comme index (ou l'argument namedItem). Firefox 8 se comporte comme spécifié dans DOM 2 et DOM4, en retournant le premier élément correspondant. Les navigateurs WebKit et Internet Explorer, dans ce cas, retournent une autre HTMLCollection et Opera retourne un {{domxref("NodeList")}} de tous les éléments correspondants.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatutCommentaire
{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM2 HTML') }} 
{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM1') }}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlcollection/item/index.html b/files/fr/web/api/htmlcollection/item/index.html deleted file mode 100644 index d3e10f88c0..0000000000 --- a/files/fr/web/api/htmlcollection/item/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: HTMLCollection.item -slug: Web/API/HTMLCollection/item -translation_of: Web/API/HTMLCollection/item ---- -

{{APIRef("HTML DOM")}}

- -

HTMLCollection.item() récupère un élément par sa position.

- -

Paramètres

- -
-
index
-
La position de l'élement à retourner. Les éléments apparaissent dans une HTMLCollection dans le même ordre que celui du document source.
-
- -

Valeur de retour

- -

L'élement à la position spécifiée, ou null si la position est inférieure à zéro ou supérieure ou égale à la valeur de la propriété length.

- -

Description

- -

La méthode item() retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux.

- -

Exemple

- -
var c = document.images;  // Ceci est une HTMLCollection.
-var img0 = c.item(0);     // Vous pouvez utiliser la méthode item comme ceci,
-var img1 = c[1];          // Mais cette notation est plus simple et plus commune
-
- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlcollection/item/index.md b/files/fr/web/api/htmlcollection/item/index.md new file mode 100644 index 0000000000..d3e10f88c0 --- /dev/null +++ b/files/fr/web/api/htmlcollection/item/index.md @@ -0,0 +1,36 @@ +--- +title: HTMLCollection.item +slug: Web/API/HTMLCollection/item +translation_of: Web/API/HTMLCollection/item +--- +

{{APIRef("HTML DOM")}}

+ +

HTMLCollection.item() récupère un élément par sa position.

+ +

Paramètres

+ +
+
index
+
La position de l'élement à retourner. Les éléments apparaissent dans une HTMLCollection dans le même ordre que celui du document source.
+
+ +

Valeur de retour

+ +

L'élement à la position spécifiée, ou null si la position est inférieure à zéro ou supérieure ou égale à la valeur de la propriété length.

+ +

Description

+ +

La méthode item() retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux.

+ +

Exemple

+ +
var c = document.images;  // Ceci est une HTMLCollection.
+var img0 = c.item(0);     // Vous pouvez utiliser la méthode item comme ceci,
+var img1 = c[1];          // Mais cette notation est plus simple et plus commune
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html deleted file mode 100644 index 282b4a2933..0000000000 --- a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: HTMLContentElement.getDistributedNodes() -slug: Web/API/HTMLContentElement/getDistributedNodes -tags: - - API - - HTML DOM - - Référence(2) - - Web Components -translation_of: Web/API/HTMLContentElement/getDistributedNodes ---- -

{{ APIRef("Web Components") }}

- -

La méthode HTMLContentElement.getDistributedNodes() retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <content>.

- -

Syntaxe

- -
var nodeList = object.getDistributedNodes()
-
- -

Exemple

- -
// Récupère les éléments
-var nodes = myContentObject.getDistributedNodes();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLContentElement.getDistributedNodes")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md new file mode 100644 index 0000000000..282b4a2933 --- /dev/null +++ b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md @@ -0,0 +1,50 @@ +--- +title: HTMLContentElement.getDistributedNodes() +slug: Web/API/HTMLContentElement/getDistributedNodes +tags: + - API + - HTML DOM + - Référence(2) + - Web Components +translation_of: Web/API/HTMLContentElement/getDistributedNodes +--- +

{{ APIRef("Web Components") }}

+ +

La méthode HTMLContentElement.getDistributedNodes() retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <content>.

+ +

Syntaxe

+ +
var nodeList = object.getDistributedNodes()
+
+ +

Exemple

+ +
// Récupère les éléments
+var nodes = myContentObject.getDistributedNodes();
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLContentElement.getDistributedNodes")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlcontentelement/index.html b/files/fr/web/api/htmlcontentelement/index.html deleted file mode 100644 index 9746995c4a..0000000000 --- a/files/fr/web/api/htmlcontentelement/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: HTMLContentElement -slug: Web/API/HTMLContentElement -tags: - - API - - HTML DOM - - Interface - - Reference - - Web Components -translation_of: Web/API/HTMLContentElement ---- -

{{ APIRef("Web Components") }}

- -

L'interface HTMLContentElement represente un élément HTML {{HTMLElement("content")}}, utilisé dans le Shadow DOM. 

- -

Propriétés

- -

Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLContentElement.select")}}
-
Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément <content>.
-
- -

Méthodes

- -

Cette interface hérite des methodes de {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLContentElement.getDistributedNodes()")}}
-
Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <content>. 
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLContentElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlcontentelement/index.md b/files/fr/web/api/htmlcontentelement/index.md new file mode 100644 index 0000000000..9746995c4a --- /dev/null +++ b/files/fr/web/api/htmlcontentelement/index.md @@ -0,0 +1,60 @@ +--- +title: HTMLContentElement +slug: Web/API/HTMLContentElement +tags: + - API + - HTML DOM + - Interface + - Reference + - Web Components +translation_of: Web/API/HTMLContentElement +--- +

{{ APIRef("Web Components") }}

+ +

L'interface HTMLContentElement represente un élément HTML {{HTMLElement("content")}}, utilisé dans le Shadow DOM. 

+ +

Propriétés

+ +

Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLContentElement.select")}}
+
Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément <content>.
+
+ +

Méthodes

+ +

Cette interface hérite des methodes de {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLContentElement.getDistributedNodes()")}}
+
Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <content>. 
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLContentElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlcontentelement/select/index.html b/files/fr/web/api/htmlcontentelement/select/index.html deleted file mode 100644 index f5b8eda778..0000000000 --- a/files/fr/web/api/htmlcontentelement/select/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: HTMLContentElement.select -slug: Web/API/HTMLContentElement/select -tags: - - API - - HTML DOM - - Property - - Référence(2) - - Web Components -translation_of: Web/API/HTMLContentElement/select ---- -

{{ APIRef("Web Components") }}

- -

La propriété HTMLContentElement.select represente l'attribut select. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément <content>.

- -

Syntaxe

- -
object.select = "CSSselector CSSselector ...";
-
- -

Exemple

- -
// Choisi les éléments <h1> et les elements avec la class "error"
-myContentObject.select = "h1 .error";
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLContentElement.getDistributedNodes")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlcontentelement/select/index.md b/files/fr/web/api/htmlcontentelement/select/index.md new file mode 100644 index 0000000000..f5b8eda778 --- /dev/null +++ b/files/fr/web/api/htmlcontentelement/select/index.md @@ -0,0 +1,51 @@ +--- +title: HTMLContentElement.select +slug: Web/API/HTMLContentElement/select +tags: + - API + - HTML DOM + - Property + - Référence(2) + - Web Components +translation_of: Web/API/HTMLContentElement/select +--- +

{{ APIRef("Web Components") }}

+ +

La propriété HTMLContentElement.select represente l'attribut select. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément <content>.

+ +

Syntaxe

+ +
object.select = "CSSselector CSSselector ...";
+
+ +

Exemple

+ +
// Choisi les éléments <h1> et les elements avec la class "error"
+myContentObject.select = "h1 .error";
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLContentElement.getDistributedNodes")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmldialogelement/close_event/index.html b/files/fr/web/api/htmldialogelement/close_event/index.html deleted file mode 100644 index e2a81f2a09..0000000000 --- a/files/fr/web/api/htmldialogelement/close_event/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: 'HTMLDialogElement: close event' -slug: Web/API/HTMLDialogElement/close_event -tags: - - API - - DOM HTML - - Evènement - - HTMLDialogElement - - Reference - - close - - fermeture -translation_of: Web/API/HTMLDialogElement/close_event ---- -

{{ APIRef() }}

- -

L'événement close est déclenché sur un objet {{domxref ("HTMLDialogElement")}} lorsque la boîte de dialogue qu'il représente a été fermée.

- - - - - - - - - - - - - - - - - - - - -
BouillonnantNon
AnnulableNon
Interface{{domxref("Event")}}
Propriété du gestionnaire d'événements{{domxref ("GlobalEventHandlers/onclose", "onclose")}}
- -

Exemples

- -

Exemple concret

- -

HTML

- -
<dialog class="example-dialog">
-  <button class="close" type="reset">Close</button>
-</dialog>
-
-<button class="open-dialog">Open dialog</button>
-
-<div class="result"></div>
- - - -

JS

- -
const result = document.querySelector('.result')
-
-const dialog = document.querySelector('.example-dialog')
-dialog.addEventListener('close', (event) => {
-  result.textContent = 'dialog was closed'
-})
-
-const openDialog = document.querySelector('.open-dialog')
-openDialog.addEventListener('click', () => {
-  if (typeof dialog.showModal === 'function') {
-    dialog.showModal()
-    result.textContent = ''
-  } else {
-    result.textContent = 'The dialog API is not supported by this browser'
-  }
-})
-
-const closeButton = document.querySelector('.close')
-closeButton.addEventListener('click', () => {
-  dialog.close()
-})
-
- -

Résultat

- -

{{ EmbedLiveSample('Exemple_concret', '100%', '100px') }}

- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
{{ SpecName('HTML WHATWG', 'indices.html#event-close', 'close') }}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLDialogElement.close_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/htmldialogelement/close_event/index.md b/files/fr/web/api/htmldialogelement/close_event/index.md new file mode 100644 index 0000000000..e2a81f2a09 --- /dev/null +++ b/files/fr/web/api/htmldialogelement/close_event/index.md @@ -0,0 +1,110 @@ +--- +title: 'HTMLDialogElement: close event' +slug: Web/API/HTMLDialogElement/close_event +tags: + - API + - DOM HTML + - Evènement + - HTMLDialogElement + - Reference + - close + - fermeture +translation_of: Web/API/HTMLDialogElement/close_event +--- +

{{ APIRef() }}

+ +

L'événement close est déclenché sur un objet {{domxref ("HTMLDialogElement")}} lorsque la boîte de dialogue qu'il représente a été fermée.

+ + + + + + + + + + + + + + + + + + + + +
BouillonnantNon
AnnulableNon
Interface{{domxref("Event")}}
Propriété du gestionnaire d'événements{{domxref ("GlobalEventHandlers/onclose", "onclose")}}
+ +

Exemples

+ +

Exemple concret

+ +

HTML

+ +
<dialog class="example-dialog">
+  <button class="close" type="reset">Close</button>
+</dialog>
+
+<button class="open-dialog">Open dialog</button>
+
+<div class="result"></div>
+ + + +

JS

+ +
const result = document.querySelector('.result')
+
+const dialog = document.querySelector('.example-dialog')
+dialog.addEventListener('close', (event) => {
+  result.textContent = 'dialog was closed'
+})
+
+const openDialog = document.querySelector('.open-dialog')
+openDialog.addEventListener('click', () => {
+  if (typeof dialog.showModal === 'function') {
+    dialog.showModal()
+    result.textContent = ''
+  } else {
+    result.textContent = 'The dialog API is not supported by this browser'
+  }
+})
+
+const closeButton = document.querySelector('.close')
+closeButton.addEventListener('click', () => {
+  dialog.close()
+})
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Exemple_concret', '100%', '100px') }}

+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
{{ SpecName('HTML WHATWG', 'indices.html#event-close', 'close') }}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLDialogElement.close_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/htmldialogelement/index.html b/files/fr/web/api/htmldialogelement/index.html deleted file mode 100644 index 15d1449571..0000000000 --- a/files/fr/web/api/htmldialogelement/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: HTMLDialogElement -slug: Web/API/HTMLDialogElement -tags: - - API - - Experimental - - HTML DOM - - HTMLDialogElement - - Interface - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLDialogElement ---- -
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
- -

The HTMLDialogElement interface provides methods to manipulate {{HTMLElement("dialog")}} elements. It inherits properties and methods from the {{domxref("HTMLElement")}} interface.

- -

{{InheritanceDiagram(600, 120)}}

- -

Properties

- -

Inherits properties from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLDialogElement.open")}}
-
A {{domxref("Boolean")}} reflecting the {{htmlattrxref("open", "dialog")}} HTML attribute, indicating whether the dialog is available for interaction.
-
{{domxref("HTMLDialogElement.returnValue")}}
-
A {{domxref("DOMString")}} that sets or returns the return value for the dialog.
-
- -

Methods

- -

Inherits methods from its parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLDialogElement.close()")}}
-
Closes the dialog. An optional {{domxref("DOMString")}} may be passed as an argument, updating the returnValue of the the dialog.
-
{{domxref("HTMLDialogElement.show()")}}
-
Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog.
-
{{domxref("HTMLDialogElement.showModal()")}}
-
Displays the dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.
-
- -

Events

- -
-
{{domxref("HTMLDialogElement/close_event", "close")}}
-
Fired when the dialog is closed.
- Also available via the {{domxref("GlobalEventHandlers/onclose", "onclose")}} property.
-
- -

Examples

- -

The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. From there you can click the Cancel button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button.

- -
  <!-- Simple pop-up dialog box, containing a form -->
-  <dialog id="favDialog">
-    <form method="dialog">
-      <section>
-        <p><label for="favAnimal">Favorite animal:</label>
-        <select id="favAnimal" name="favAnimal">
-          <option></option>
-          <option>Brine shrimp</option>
-          <option>Red panda</option>
-          <option>Spider monkey</option>
-        </select></p>
-      </section>
-      <menu>
-        <button id="cancel" type="reset">Cancel</button>
-        <button type="submit">Confirm</button>
-      </menu>
-    </form>
-  </dialog>
-
-  <menu>
-    <button id="updateDetails">Update details</button>
-  </menu>
-
-  <script>
-    (function() {
-      var updateButton = document.getElementById('updateDetails');
-      var cancelButton = document.getElementById('cancel');
-      var dialog = document.getElementById('favDialog');
-      dialog.returnValue = 'favAnimal';
-
-      function openCheck(dialog) {
-        if(dialog.open) {
-          console.log('Dialog open');
-        } else {
-          console.log('Dialog closed');
-        }
-      }
-
-      // Update button opens a modal dialog
-      updateButton.addEventListener('click', function() {
-        dialog.showModal();
-        openCheck(dialog);
-      });
-
-      // Form cancel button closes the dialog box
-      cancelButton.addEventListener('click', function() {
-        dialog.close('animalNotChosen');
-        openCheck(dialog);
-      });
-
-    })();
-  </script>
- -
-

Note : You can find this example on GitHub as htmldialogelement-basic (see it live also).

-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmldialogelement', 'HTMLDialogElement')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.2')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.HTMLDialogElement")}}

- -

See also

- - diff --git a/files/fr/web/api/htmldialogelement/index.md b/files/fr/web/api/htmldialogelement/index.md new file mode 100644 index 0000000000..15d1449571 --- /dev/null +++ b/files/fr/web/api/htmldialogelement/index.md @@ -0,0 +1,148 @@ +--- +title: HTMLDialogElement +slug: Web/API/HTMLDialogElement +tags: + - API + - Experimental + - HTML DOM + - HTMLDialogElement + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLDialogElement +--- +
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+ +

The HTMLDialogElement interface provides methods to manipulate {{HTMLElement("dialog")}} elements. It inherits properties and methods from the {{domxref("HTMLElement")}} interface.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLDialogElement.open")}}
+
A {{domxref("Boolean")}} reflecting the {{htmlattrxref("open", "dialog")}} HTML attribute, indicating whether the dialog is available for interaction.
+
{{domxref("HTMLDialogElement.returnValue")}}
+
A {{domxref("DOMString")}} that sets or returns the return value for the dialog.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLDialogElement.close()")}}
+
Closes the dialog. An optional {{domxref("DOMString")}} may be passed as an argument, updating the returnValue of the the dialog.
+
{{domxref("HTMLDialogElement.show()")}}
+
Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog.
+
{{domxref("HTMLDialogElement.showModal()")}}
+
Displays the dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.
+
+ +

Events

+ +
+
{{domxref("HTMLDialogElement/close_event", "close")}}
+
Fired when the dialog is closed.
+ Also available via the {{domxref("GlobalEventHandlers/onclose", "onclose")}} property.
+
+ +

Examples

+ +

The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. From there you can click the Cancel button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button.

+ +
  <!-- Simple pop-up dialog box, containing a form -->
+  <dialog id="favDialog">
+    <form method="dialog">
+      <section>
+        <p><label for="favAnimal">Favorite animal:</label>
+        <select id="favAnimal" name="favAnimal">
+          <option></option>
+          <option>Brine shrimp</option>
+          <option>Red panda</option>
+          <option>Spider monkey</option>
+        </select></p>
+      </section>
+      <menu>
+        <button id="cancel" type="reset">Cancel</button>
+        <button type="submit">Confirm</button>
+      </menu>
+    </form>
+  </dialog>
+
+  <menu>
+    <button id="updateDetails">Update details</button>
+  </menu>
+
+  <script>
+    (function() {
+      var updateButton = document.getElementById('updateDetails');
+      var cancelButton = document.getElementById('cancel');
+      var dialog = document.getElementById('favDialog');
+      dialog.returnValue = 'favAnimal';
+
+      function openCheck(dialog) {
+        if(dialog.open) {
+          console.log('Dialog open');
+        } else {
+          console.log('Dialog closed');
+        }
+      }
+
+      // Update button opens a modal dialog
+      updateButton.addEventListener('click', function() {
+        dialog.showModal();
+        openCheck(dialog);
+      });
+
+      // Form cancel button closes the dialog box
+      cancelButton.addEventListener('click', function() {
+        dialog.close('animalNotChosen');
+        openCheck(dialog);
+      });
+
+    })();
+  </script>
+ +
+

Note : You can find this example on GitHub as htmldialogelement-basic (see it live also).

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmldialogelement', 'HTMLDialogElement')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.2')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLDialogElement")}}

+ +

See also

+ + diff --git a/files/fr/web/api/htmldivelement/index.html b/files/fr/web/api/htmldivelement/index.html deleted file mode 100644 index 7bacdb5605..0000000000 --- a/files/fr/web/api/htmldivelement/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: HTMLDivElement -slug: Web/API/HTMLDivElement -tags: - - API - - HTML DOM - - Interface - - Reference -translation_of: Web/API/HTMLDivElement ---- -
{{APIRef("HTML DOM")}}
- -

L'interface HTMLDivElement fournit certaines propriétés spécifiques (en plus de celles qui proviennent de l'interface {{domxref("HTMLElement")}} via l'héritage) afin de manipuler les éléments {{HtmlElement("div")}}.

- -

{{InheritanceDiagram(600,120)}}

- -

Propriétés

- -

Cette interface hérite des propriétés de son parent {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}
-
Une chaîne de caractères {{domxref("DOMString")}} qui représente une propriété à valeur contrainte indiquant l'alignement du contenu de l'élément par rapport à son contexte. Les valeurs possibles pour cette propriété sont "left", "right", "justify" et "center".
-
- -

Méthodes

- -

Aucune méthode spécifique. Toutes les méthodes sont héritées depuis le parent {{domxref("HTMLElement")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "#htmldivelement", "HTMLDivElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}{{Spec2('HTML5 W3C')}}Aucune modification depuis {{SpecName("DOM2 HTML")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}{{Spec2('DOM2 HTML')}}Aucune modification depuis {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLDivElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmldivelement/index.md b/files/fr/web/api/htmldivelement/index.md new file mode 100644 index 0000000000..7bacdb5605 --- /dev/null +++ b/files/fr/web/api/htmldivelement/index.md @@ -0,0 +1,72 @@ +--- +title: HTMLDivElement +slug: Web/API/HTMLDivElement +tags: + - API + - HTML DOM + - Interface + - Reference +translation_of: Web/API/HTMLDivElement +--- +
{{APIRef("HTML DOM")}}
+ +

L'interface HTMLDivElement fournit certaines propriétés spécifiques (en plus de celles qui proviennent de l'interface {{domxref("HTMLElement")}} via l'héritage) afin de manipuler les éléments {{HtmlElement("div")}}.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Propriétés

+ +

Cette interface hérite des propriétés de son parent {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}
+
Une chaîne de caractères {{domxref("DOMString")}} qui représente une propriété à valeur contrainte indiquant l'alignement du contenu de l'élément par rapport à son contexte. Les valeurs possibles pour cette propriété sont "left", "right", "justify" et "center".
+
+ +

Méthodes

+ +

Aucune méthode spécifique. Toutes les méthodes sont héritées depuis le parent {{domxref("HTMLElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "#htmldivelement", "HTMLDivElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}{{Spec2('HTML5 W3C')}}Aucune modification depuis {{SpecName("DOM2 HTML")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}{{Spec2('DOM2 HTML')}}Aucune modification depuis {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLDivElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmldocument/index.html b/files/fr/web/api/htmldocument/index.html deleted file mode 100644 index 649b922b25..0000000000 --- a/files/fr/web/api/htmldocument/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: HTMLDocument -slug: Web/API/HTMLDocument -translation_of: Web/API/HTMLDocument ---- -

{{ APIRef("HTML DOM") }}

- -

HTMLDocument est une interface abstraite de DOM qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML).

- -

Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus.

- -

Spécification

- - diff --git a/files/fr/web/api/htmldocument/index.md b/files/fr/web/api/htmldocument/index.md new file mode 100644 index 0000000000..649b922b25 --- /dev/null +++ b/files/fr/web/api/htmldocument/index.md @@ -0,0 +1,16 @@ +--- +title: HTMLDocument +slug: Web/API/HTMLDocument +translation_of: Web/API/HTMLDocument +--- +

{{ APIRef("HTML DOM") }}

+ +

HTMLDocument est une interface abstraite de DOM qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML).

+ +

Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus.

+ +

Spécification

+ + diff --git a/files/fr/web/api/htmlelement/accesskey/index.html b/files/fr/web/api/htmlelement/accesskey/index.html deleted file mode 100644 index e89e767a56..0000000000 --- a/files/fr/web/api/htmlelement/accesskey/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Element.accessKey -slug: Web/API/HTMLElement/accessKey -tags: - - API - - DOM - - Element - - Propriété - - Raccourcis clavier - - Reference -translation_of: Web/API/HTMLElement/accessKey -translation_of_original: Web/API/Element/accessKey -original_slug: 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/accesskey/index.md b/files/fr/web/api/htmlelement/accesskey/index.md new file mode 100644 index 0000000000..e89e767a56 --- /dev/null +++ b/files/fr/web/api/htmlelement/accesskey/index.md @@ -0,0 +1,23 @@ +--- +title: Element.accessKey +slug: Web/API/HTMLElement/accessKey +tags: + - API + - DOM + - Element + - Propriété + - Raccourcis clavier + - Reference +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +original_slug: 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 deleted file mode 100644 index 836a817daf..0000000000 --- a/files/fr/web/api/htmlelement/animationend_event/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: animationend -slug: Web/API/HTMLElement/animationend_event -translation_of: Web/API/HTMLElement/animationend_event -original_slug: Web/Events/animationend ---- -

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

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/animationend_event/index.md b/files/fr/web/api/htmlelement/animationend_event/index.md new file mode 100644 index 0000000000..836a817daf --- /dev/null +++ b/files/fr/web/api/htmlelement/animationend_event/index.md @@ -0,0 +1,82 @@ +--- +title: animationend +slug: Web/API/HTMLElement/animationend_event +translation_of: Web/API/HTMLElement/animationend_event +original_slug: Web/Events/animationend +--- +

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

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/animationiteration_event/index.html b/files/fr/web/api/htmlelement/animationiteration_event/index.html deleted file mode 100644 index f0e8c058b7..0000000000 --- a/files/fr/web/api/htmlelement/animationiteration_event/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: animationiteration -slug: Web/API/HTMLElement/animationiteration_event -translation_of: Web/API/HTMLElement/animationiteration_event -original_slug: Web/Events/animationiteration ---- -

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

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/animationiteration_event/index.md b/files/fr/web/api/htmlelement/animationiteration_event/index.md new file mode 100644 index 0000000000..f0e8c058b7 --- /dev/null +++ b/files/fr/web/api/htmlelement/animationiteration_event/index.md @@ -0,0 +1,84 @@ +--- +title: animationiteration +slug: Web/API/HTMLElement/animationiteration_event +translation_of: Web/API/HTMLElement/animationiteration_event +original_slug: Web/Events/animationiteration +--- +

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

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/animationstart_event/index.html b/files/fr/web/api/htmlelement/animationstart_event/index.html deleted file mode 100644 index f4dfb8d3cb..0000000000 --- a/files/fr/web/api/htmlelement/animationstart_event/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: animationstart -slug: Web/API/HTMLElement/animationstart_event -translation_of: Web/API/HTMLElement/animationstart_event -original_slug: Web/Events/animationstart ---- -

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

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/animationstart_event/index.md b/files/fr/web/api/htmlelement/animationstart_event/index.md new file mode 100644 index 0000000000..f4dfb8d3cb --- /dev/null +++ b/files/fr/web/api/htmlelement/animationstart_event/index.md @@ -0,0 +1,82 @@ +--- +title: animationstart +slug: Web/API/HTMLElement/animationstart_event +translation_of: Web/API/HTMLElement/animationstart_event +original_slug: Web/Events/animationstart +--- +

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

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.html b/files/fr/web/api/htmlelement/beforeinput_event/index.html deleted file mode 100644 index 8d34743cfd..0000000000 --- a/files/fr/web/api/htmlelement/beforeinput_event/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: 'HTMLElement: beforeinput event' -slug: Web/API/HTMLElement/beforeinput_event -translation_of: Web/API/HTMLElement/beforeinput_event ---- -
{{APIRef}} {{SeeCompatTable}}
- -

L’évènement DOM beforeinput est émis quand la valeur d’un élément {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} est sur le point d’être modifié. L’évènement s’applique également aux éléments ayant l’attribut {{domxref("HTMLElement.contentEditable", "contenteditable")}} actif, et à tout élément quand le {{domxref("Document.designMode", "designMode")}} est activé.

- -

Dans le cas de contenteditable et designMode, la cible de l’évènement est l’hôte d’édition. Si ces propriétés s’appliquent à plusieurs éléments, l’hôte d’édition est le plus proche ancêtre dont le parent n’est pas éditable.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BouillonneOui
AnnulableOui
Interface{{DOMxRef("InputEvent")}}
Propriété gestionnaire d’évènementAucune
Sync / AsyncSync
ComposéOui
Action par défautMettre à jour l’élément DOM
- -

Exemples

- -

Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée.

- -

HTML

- -
<input placeholder="Saisissez du texte" name="name"/>
-<p id="values"></p>
- -

JavaScript

- -
const input = document.querySelector('input');
-const log = document.getElementById('values');
-
-input.addEventListener('beforeinput', updateValue);
-
-function updateValue(e) {
-  log.textContent = e.target.value;
-}
- -

Résultat

- -

{{EmbedLiveSample("Examples")}}

- -

Spécifications

- - - - - - - - - - - - -
SpécificationStatut
{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}{{Spec2('UI Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLElement.beforeinput_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.md b/files/fr/web/api/htmlelement/beforeinput_event/index.md new file mode 100644 index 0000000000..8d34743cfd --- /dev/null +++ b/files/fr/web/api/htmlelement/beforeinput_event/index.md @@ -0,0 +1,92 @@ +--- +title: 'HTMLElement: beforeinput event' +slug: Web/API/HTMLElement/beforeinput_event +translation_of: Web/API/HTMLElement/beforeinput_event +--- +
{{APIRef}} {{SeeCompatTable}}
+ +

L’évènement DOM beforeinput est émis quand la valeur d’un élément {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} est sur le point d’être modifié. L’évènement s’applique également aux éléments ayant l’attribut {{domxref("HTMLElement.contentEditable", "contenteditable")}} actif, et à tout élément quand le {{domxref("Document.designMode", "designMode")}} est activé.

+ +

Dans le cas de contenteditable et designMode, la cible de l’évènement est l’hôte d’édition. Si ces propriétés s’appliquent à plusieurs éléments, l’hôte d’édition est le plus proche ancêtre dont le parent n’est pas éditable.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BouillonneOui
AnnulableOui
Interface{{DOMxRef("InputEvent")}}
Propriété gestionnaire d’évènementAucune
Sync / AsyncSync
ComposéOui
Action par défautMettre à jour l’élément DOM
+ +

Exemples

+ +

Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée.

+ +

HTML

+ +
<input placeholder="Saisissez du texte" name="name"/>
+<p id="values"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('beforeinput', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Examples")}}

+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationStatut
{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}{{Spec2('UI Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLElement.beforeinput_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/change_event/index.html b/files/fr/web/api/htmlelement/change_event/index.html deleted file mode 100644 index ba007c779b..0000000000 --- a/files/fr/web/api/htmlelement/change_event/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: change -slug: Web/API/HTMLElement/change_event -tags: - - Change - - DOM - - Event - - HTML - - Reference - - Web - - Élément HTML -translation_of: Web/API/HTMLElement/change_event ---- -

{{APIRef}}

- -

L'événement change est déclenché pour les éléments {{HTMLElement("input")}} (entrée), {{HTMLElement("select")}} (sélection) et {{HTMLElement("textarea")}} (zone de texte) lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement {{event("input")}}, change n'est pas nécessairement déclenché pour chaque changement de valeur.

- - - - - - - - - - - - - - - - - - - - -
PropagationOui
AnnulableNon
Interface{{domxref("Event")}}
Gestionnaire d'événements{{domxref("GlobalEventHandlers/onchange", "onchange")}}
- -

En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement change se déclenche à un moment différent :

- - - -

Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement change doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du <select> (voir {{bug("126379")}}).

- -

La spécification HTML répertorie les types <input> qui doivent déclencher l'événement change.

- -

Exemples

- -

L'élément <select>

- -

Le code suivant gère l'événement change sur {{HTMLElement("select")}} en appellant la fonction changeEventHandler() dans l'attribut onchange. Il lit la valeur de la cible de l'événement et la montre dans une alerte.

- -

HTML

- -
<label>Choose an ice cream flavor:
-  <select class="ice-cream" name="ice-cream">
-    <option value="">Select One …</option>
-    <option value="chocolate">Chocolate</option>
-    <option value="sardine">Sardine</option>
-    <option value="vanilla">Vanilla</option>
-  </select>
-</label>
-
-<div class="result"></div>
- - - -

Javascript

- -
const selectElement = document.querySelector('.ice-cream');
-
-selectElement.addEventListener('change', (event) => {
-  const result = document.querySelector('.result');
-  result.textContent = `You like ${event.target.value}`;
-});
- -

Résultat

- -

{{ EmbedLiveSample('Lélément_<select>', '100%', '75px') }}

- -

L'élément d'entrée de texte

- -

Pour certains éléments, notamment <input type="text">, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement.

- -

HTML

- -
<input placeholder="Enter some text" name="name"/>
-<p id="log"></p>
- -

JavaScript

- -
const input = document.querySelector('input');
-const log = document.getElementById('log');
-
-input.addEventListener('change', updateValue);
-
-function updateValue(e) {
-  log.textContent = e.target.value;
-}
- -

Résultat

- -

{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }}

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "indices.html#event-change", "change")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}}{{Spec2("HTML5 W3C")}}
{{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}}{{Spec2("DOM2 Events")}}Définition initiale
- -

Compatibilités navigateurs

- - - -

{{Compat("api.GlobalEventHandlers.onchange")}}

- -

Voir aussi

- -

Cet événement est aussi déclenché dans plusieurs API non-standard:

- - diff --git a/files/fr/web/api/htmlelement/change_event/index.md b/files/fr/web/api/htmlelement/change_event/index.md new file mode 100644 index 0000000000..ba007c779b --- /dev/null +++ b/files/fr/web/api/htmlelement/change_event/index.md @@ -0,0 +1,165 @@ +--- +title: change +slug: Web/API/HTMLElement/change_event +tags: + - Change + - DOM + - Event + - HTML + - Reference + - Web + - Élément HTML +translation_of: Web/API/HTMLElement/change_event +--- +

{{APIRef}}

+ +

L'événement change est déclenché pour les éléments {{HTMLElement("input")}} (entrée), {{HTMLElement("select")}} (sélection) et {{HTMLElement("textarea")}} (zone de texte) lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement {{event("input")}}, change n'est pas nécessairement déclenché pour chaque changement de valeur.

+ + + + + + + + + + + + + + + + + + + + +
PropagationOui
AnnulableNon
Interface{{domxref("Event")}}
Gestionnaire d'événements{{domxref("GlobalEventHandlers/onchange", "onchange")}}
+ +

En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement change se déclenche à un moment différent :

+ + + +

Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement change doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du <select> (voir {{bug("126379")}}).

+ +

La spécification HTML répertorie les types <input> qui doivent déclencher l'événement change.

+ +

Exemples

+ +

L'élément <select>

+ +

Le code suivant gère l'événement change sur {{HTMLElement("select")}} en appellant la fonction changeEventHandler() dans l'attribut onchange. Il lit la valeur de la cible de l'événement et la montre dans une alerte.

+ +

HTML

+ +
<label>Choose an ice cream flavor:
+  <select class="ice-cream" name="ice-cream">
+    <option value="">Select One …</option>
+    <option value="chocolate">Chocolate</option>
+    <option value="sardine">Sardine</option>
+    <option value="vanilla">Vanilla</option>
+  </select>
+</label>
+
+<div class="result"></div>
+ + + +

Javascript

+ +
const selectElement = document.querySelector('.ice-cream');
+
+selectElement.addEventListener('change', (event) => {
+  const result = document.querySelector('.result');
+  result.textContent = `You like ${event.target.value}`;
+});
+ +

Résultat

+ +

{{ EmbedLiveSample('Lélément_<select>', '100%', '75px') }}

+ +

L'élément d'entrée de texte

+ +

Pour certains éléments, notamment <input type="text">, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement.

+ +

HTML

+ +
<input placeholder="Enter some text" name="name"/>
+<p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('change', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}
+ +

Résultat

+ +

{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }}

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "indices.html#event-change", "change")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}}{{Spec2("HTML5 W3C")}}
{{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}}{{Spec2("DOM2 Events")}}Définition initiale
+ +

Compatibilités navigateurs

+ + + +

{{Compat("api.GlobalEventHandlers.onchange")}}

+ +

Voir aussi

+ +

Cet événement est aussi déclenché dans plusieurs API non-standard:

+ + diff --git a/files/fr/web/api/htmlelement/click/index.html b/files/fr/web/api/htmlelement/click/index.html deleted file mode 100644 index 4fcce54685..0000000000 --- a/files/fr/web/api/htmlelement/click/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: element.click -slug: Web/API/HTMLElement/click -tags: - - DOM - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLElement/click ---- -

{{ ApiRef() }}

-

Résumé

-

La méthode click simule un clic sur un élément.

-

Syntaxe

-
element.click()
-

Notes

-

Lorsque la méthode click est utilisée sur des éléments où elle est gérée (par exemple un {{HTMLElement("input")}}), elle déclenche également l'évènement click de l'élément qui se propagera aux éléments situés plus haut dans l'arbre du document (ou la chaîne évènementielle) et déclenchera aussi leurs évènements click. Cependant, la propagation d'un évènement click ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu.

-

Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode click d'Opera sera ignorée silencieusement, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété CSS {{cssxref('display')}} à "none".

-
-

{{gecko_callout_heading("5.0")}}

-

Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode click qu'avec des éléments {{HTMLElement("input")}} de type - - button - , - - checkbox - , - - radio - , - - reset - ou - - submit - . Gecko n'implémentait pas la méthode click sur d'autres éléments qui auraient pu répondre à des clics de souris comme les liens (éléments {{HTMLElement("a")}}), et ne déclenchait pas nécessairement l'évènement click d'autres éléments.

-

Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par HTML5.

-

D'autres implémentations du DOM peuvent se comporter différemment.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — traduction en français (non normative){{Spec2('DOM2 HTML')}} 
- -

Compatibilité des navigateurs

- -p>{{Compat("api.HTMLElement.click")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/click/index.md b/files/fr/web/api/htmlelement/click/index.md new file mode 100644 index 0000000000..4fcce54685 --- /dev/null +++ b/files/fr/web/api/htmlelement/click/index.md @@ -0,0 +1,72 @@ +--- +title: element.click +slug: Web/API/HTMLElement/click +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/click +--- +

{{ ApiRef() }}

+

Résumé

+

La méthode click simule un clic sur un élément.

+

Syntaxe

+
element.click()
+

Notes

+

Lorsque la méthode click est utilisée sur des éléments où elle est gérée (par exemple un {{HTMLElement("input")}}), elle déclenche également l'évènement click de l'élément qui se propagera aux éléments situés plus haut dans l'arbre du document (ou la chaîne évènementielle) et déclenchera aussi leurs évènements click. Cependant, la propagation d'un évènement click ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu.

+

Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode click d'Opera sera ignorée silencieusement, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété CSS {{cssxref('display')}} à "none".

+
+

{{gecko_callout_heading("5.0")}}

+

Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode click qu'avec des éléments {{HTMLElement("input")}} de type + + button + , + + checkbox + , + + radio + , + + reset + ou + + submit + . Gecko n'implémentait pas la méthode click sur d'autres éléments qui auraient pu répondre à des clics de souris comme les liens (éléments {{HTMLElement("a")}}), et ne déclenchait pas nécessairement l'évènement click d'autres éléments.

+

Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par HTML5.

+

D'autres implémentations du DOM peuvent se comporter différemment.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — traduction en français (non normative){{Spec2('DOM2 HTML')}} 
+ +

Compatibilité des navigateurs

+ +p>{{Compat("api.HTMLElement.click")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/contenteditable/index.html b/files/fr/web/api/htmlelement/contenteditable/index.html deleted file mode 100644 index ceb68bb2f8..0000000000 --- a/files/fr/web/api/htmlelement/contenteditable/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: HTMLElement.contentEditable -slug: Web/API/HTMLElement/contentEditable -tags: - - API - - HTML DOM - - HTMLElement - - Référence(2) - - contenteditable -translation_of: Web/API/HTMLElement/contentEditable ---- -
-
{{APIRef("HTML DOM")}}
-
- -

La propriété HTMLElement.contentEditable est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs :

- - - -

Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}.

- -

Syntaxe

- -
editable = element.contentEditable
-element.contentEditable = "true"
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatutCommentaire
{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}{{Spec2('HTML WHATWG')}}Definition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLElement.contentEditable")}}

- -

Dans Internet Explorer, le contentable ne peut pas être appliqué aux {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}} et {{htmlelement("tr")}} directement. Un élément {{htmlelement("span")}} ou {{htmlelement("div")}} modifiable au niveau du contenu peut être placé à l'intérieur de chaque cellule du tableau.

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/contenteditable/index.md b/files/fr/web/api/htmlelement/contenteditable/index.md new file mode 100644 index 0000000000..ceb68bb2f8 --- /dev/null +++ b/files/fr/web/api/htmlelement/contenteditable/index.md @@ -0,0 +1,63 @@ +--- +title: HTMLElement.contentEditable +slug: Web/API/HTMLElement/contentEditable +tags: + - API + - HTML DOM + - HTMLElement + - Référence(2) + - contenteditable +translation_of: Web/API/HTMLElement/contentEditable +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

La propriété HTMLElement.contentEditable est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs :

+ + + +

Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}.

+ +

Syntaxe

+ +
editable = element.contentEditable
+element.contentEditable = "true"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatutCommentaire
{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}{{Spec2('HTML WHATWG')}}Definition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLElement.contentEditable")}}

+ +

Dans Internet Explorer, le contentable ne peut pas être appliqué aux {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}} et {{htmlelement("tr")}} directement. Un élément {{htmlelement("span")}} ou {{htmlelement("div")}} modifiable au niveau du contenu peut être placé à l'intérieur de chaque cellule du tableau.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/dir/index.html b/files/fr/web/api/htmlelement/dir/index.html deleted file mode 100644 index 96848e9935..0000000000 --- a/files/fr/web/api/htmlelement/dir/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: element.dir -slug: Web/API/HTMLElement/dir -tags: - - DOM - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLElement/dir ---- -

{{ ApiRef() }}

-

Résumé

-

L'attribut dir obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.

-

Syntaxe et valeurs

-
var DirectionActuelle = referenceElement.dir;
-referenceElement.dir = NouvelleDirection;
-
-

DirectionActuelle est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. NouvelleDirection est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.

-

Les valeurs possibles pour dir sont ltr, pour de gauche à droite (left-to-right), et rtl, pour de droite à gauche (right-to-left).

-

Exemple

-
var para = document.getElementById("para1");
-para.dir = "rtl";
-// change la direction du texte sur un paragraphe identifié par "para1"
-
-

Notes

-

La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche).

-

Une image peut avoir sont attribut dir positionné à « rtl », auquel cas les attributs title et alt seront formatés et définis comme allant de droite à gauche.

-

Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.

-
-

{{ gecko_callout_heading("7.0") }}

-

Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification.

-
-

Spécification

- - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — traduction (non normative){{Spec2('DOM2 HTML')}} 
-

 

diff --git a/files/fr/web/api/htmlelement/dir/index.md b/files/fr/web/api/htmlelement/dir/index.md new file mode 100644 index 0000000000..96848e9935 --- /dev/null +++ b/files/fr/web/api/htmlelement/dir/index.md @@ -0,0 +1,48 @@ +--- +title: element.dir +slug: Web/API/HTMLElement/dir +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/dir +--- +

{{ ApiRef() }}

+

Résumé

+

L'attribut dir obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.

+

Syntaxe et valeurs

+
var DirectionActuelle = referenceElement.dir;
+referenceElement.dir = NouvelleDirection;
+
+

DirectionActuelle est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. NouvelleDirection est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.

+

Les valeurs possibles pour dir sont ltr, pour de gauche à droite (left-to-right), et rtl, pour de droite à gauche (right-to-left).

+

Exemple

+
var para = document.getElementById("para1");
+para.dir = "rtl";
+// change la direction du texte sur un paragraphe identifié par "para1"
+
+

Notes

+

La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche).

+

Une image peut avoir sont attribut dir positionné à « rtl », auquel cas les attributs title et alt seront formatés et définis comme allant de droite à gauche.

+

Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.

+
+

{{ gecko_callout_heading("7.0") }}

+

Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification.

+
+

Spécification

+ + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — traduction (non normative){{Spec2('DOM2 HTML')}} 
+

 

diff --git a/files/fr/web/api/htmlelement/hidden/index.html b/files/fr/web/api/htmlelement/hidden/index.html deleted file mode 100644 index f54affe844..0000000000 --- a/files/fr/web/api/htmlelement/hidden/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: HTMLElement.hidden -slug: Web/API/HTMLElement/hidden -translation_of: Web/API/HTMLElement/hidden ---- -
{{ APIRef("HTML DOM") }}
- -

La propriété hidden de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut true si l'élément est caché, sinon sa valeur est false. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.

- -

La propriété hidden s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.

- -

Des cas d'utilisation appropriés de hidden comprennent :

- - - -

Des cas inappropriés d'utilisation comprennent :

- - - -
-

Note : Des éléments qui ne sont pas hidden ne doivent pas faire référence à des éléments qui le sont.

-
- -

Syntaxe

- -
estCaché = HTMLElement.hidden;
-
-HTMLElement.hidden = true | false;
- -

Valeur

- -

Un Boolean qui est true si l'élément est caché à la vue ; sinon, la valeur est false.

- -

Exemple

- -

Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.

- -

JavaScript

- -
document.getElementById("boutonOk")
-        .addEventListener("click", function() {
-  document.getElementById("bienvenue").hidden = true;
-  document.getElementById("impressionnant").hidden = false;
-}, false);
- -

Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place.

- -

HTML

- -

Le code HTML pour les deux boîtes est montré ci-dessous.

- -

Le panneau bienvenue

- -
<div id="bienvenue" class="panneau">
-  <h1>Bienvenue à Machin.com !</h1>
-  <p>En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !</p>
-  <button class="bouton" id="boutonOk">OK</button>
-</div>
- -

Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.

- -

Le panneau de suite

- -

Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour hidden. Le panneau de suite ressemble à ce qui suit en HTML:

- -
<div id="impressionnant" class="panneau" hidden>
-  <h1>Merci !</h1>
-  <p>Merci <strong>vraiment</strong> beaucoup d'avoir accepté d'être
-  impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes
-  d'une façon impressionnante pour rendre le monde plus impressionnant !</p>
-</div>
- -

CSS

- -

Le contenu est mis en forme en utilisant le CSS ci-dessous.

- -
.panneau {
-  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
-  border: 1px solid #22d;
-  padding: 12px;
-  width: 500px;
-  text-align: center;
-}
-
-.bouton {
-  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
-  padding: 5px 36px;
-}
-
-h1 {
-  margin-top: 0;
-  font-size: 175%;
-}
- -

Résultat

- -

{{ EmbedLiveSample('Example', 560, 200) }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLElement.hidden")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/hidden/index.md b/files/fr/web/api/htmlelement/hidden/index.md new file mode 100644 index 0000000000..f54affe844 --- /dev/null +++ b/files/fr/web/api/htmlelement/hidden/index.md @@ -0,0 +1,143 @@ +--- +title: HTMLElement.hidden +slug: Web/API/HTMLElement/hidden +translation_of: Web/API/HTMLElement/hidden +--- +
{{ APIRef("HTML DOM") }}
+ +

La propriété hidden de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut true si l'élément est caché, sinon sa valeur est false. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.

+ +

La propriété hidden s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.

+ +

Des cas d'utilisation appropriés de hidden comprennent :

+ + + +

Des cas inappropriés d'utilisation comprennent :

+ + + +
+

Note : Des éléments qui ne sont pas hidden ne doivent pas faire référence à des éléments qui le sont.

+
+ +

Syntaxe

+ +
estCaché = HTMLElement.hidden;
+
+HTMLElement.hidden = true | false;
+ +

Valeur

+ +

Un Boolean qui est true si l'élément est caché à la vue ; sinon, la valeur est false.

+ +

Exemple

+ +

Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.

+ +

JavaScript

+ +
document.getElementById("boutonOk")
+        .addEventListener("click", function() {
+  document.getElementById("bienvenue").hidden = true;
+  document.getElementById("impressionnant").hidden = false;
+}, false);
+ +

Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place.

+ +

HTML

+ +

Le code HTML pour les deux boîtes est montré ci-dessous.

+ +

Le panneau bienvenue

+ +
<div id="bienvenue" class="panneau">
+  <h1>Bienvenue à Machin.com !</h1>
+  <p>En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !</p>
+  <button class="bouton" id="boutonOk">OK</button>
+</div>
+ +

Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.

+ +

Le panneau de suite

+ +

Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour hidden. Le panneau de suite ressemble à ce qui suit en HTML:

+ +
<div id="impressionnant" class="panneau" hidden>
+  <h1>Merci !</h1>
+  <p>Merci <strong>vraiment</strong> beaucoup d'avoir accepté d'être
+  impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes
+  d'une façon impressionnante pour rendre le monde plus impressionnant !</p>
+</div>
+ +

CSS

+ +

Le contenu est mis en forme en utilisant le CSS ci-dessous.

+ +
.panneau {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.bouton {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}
+ +

Résultat

+ +

{{ EmbedLiveSample('Example', 560, 200) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLElement.hidden")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/index.html b/files/fr/web/api/htmlelement/index.html deleted file mode 100644 index 5b5276f04e..0000000000 --- a/files/fr/web/api/htmlelement/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: HTMLElement -slug: Web/API/HTMLElement -tags: - - DOM - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLElement ---- -
- {{ApiRef}}
-

Interface des éléments HTML

-

HTMLElement est une interface abstraite pour le DOM, héritée par tous les éléments HTML.

-

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomTypeDescription
{{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}}{{domxref("DOMString")}}La touche de navigation clavier assignée à l'élément.
{{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}}{{domxref("DOMString")}}Une chaîne de caractères définissant la touche de navigation clavier assignée.
{{domxref("element.className", "className")}}{{domxref("DOMString")}}Le nom de la classe CSS définie pour l'élément.
{{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}{{domxref("DOMStringMap")}}Un tableau associatif des attributs  data-* de l'élément.
{{domxref("element.dir", "dir")}}{{domxref("DOMString")}}L'attribut dir de l'élément.
{{domxref("element.id", "id")}}{{domxref("DOMString")}}L'ID de l'élément.
{{domxref("element.lang", "lang")}}{{domxref("DOMString")}}L'attribut  lang de l'élément.
{{domxref("element.title", "title")}}{{domxref("DOMString")}}L'attribut title de l'élément.
-

Méthodes

- - - - - - - - - - - - - - - - - - - - - - - - - -
Nom et paramètresRenvoieDescription
{{domxref("element.blur()", "blur()")}} {{HTMLVersionInline(5)}}voidRetire le focus clavier de l'élément actuellement sélectionné.
{{domxref("element.click()", "click()")}} {{HTMLVersionInline(5)}}voidEnvoie un évènement click à l'élément.
{{domxref("element.focus()", "focus()")}} {{HTMLVersionInline(5)}}voidPlace le focus clavier sur l'élément.
-

Spécification

- - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/index.md b/files/fr/web/api/htmlelement/index.md new file mode 100644 index 0000000000..5b5276f04e --- /dev/null +++ b/files/fr/web/api/htmlelement/index.md @@ -0,0 +1,118 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement +--- +
+ {{ApiRef}}
+

Interface des éléments HTML

+

HTMLElement est une interface abstraite pour le DOM, héritée par tous les éléments HTML.

+

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomTypeDescription
{{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}}{{domxref("DOMString")}}La touche de navigation clavier assignée à l'élément.
{{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}}{{domxref("DOMString")}}Une chaîne de caractères définissant la touche de navigation clavier assignée.
{{domxref("element.className", "className")}}{{domxref("DOMString")}}Le nom de la classe CSS définie pour l'élément.
{{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}{{domxref("DOMStringMap")}}Un tableau associatif des attributs  data-* de l'élément.
{{domxref("element.dir", "dir")}}{{domxref("DOMString")}}L'attribut dir de l'élément.
{{domxref("element.id", "id")}}{{domxref("DOMString")}}L'ID de l'élément.
{{domxref("element.lang", "lang")}}{{domxref("DOMString")}}L'attribut  lang de l'élément.
{{domxref("element.title", "title")}}{{domxref("DOMString")}}L'attribut title de l'élément.
+

Méthodes

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Nom et paramètresRenvoieDescription
{{domxref("element.blur()", "blur()")}} {{HTMLVersionInline(5)}}voidRetire le focus clavier de l'élément actuellement sélectionné.
{{domxref("element.click()", "click()")}} {{HTMLVersionInline(5)}}voidEnvoie un évènement click à l'élément.
{{domxref("element.focus()", "focus()")}} {{HTMLVersionInline(5)}}voidPlace le focus clavier sur l'élément.
+

Spécification

+ + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/innertext/index.html b/files/fr/web/api/htmlelement/innertext/index.html deleted file mode 100644 index e49115801b..0000000000 --- a/files/fr/web/api/htmlelement/innertext/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Node.innerText -slug: Web/API/HTMLElement/innerText -translation_of: Web/API/HTMLElement/innerText -original_slug: Web/API/Node/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

- - diff --git a/files/fr/web/api/htmlelement/innertext/index.md b/files/fr/web/api/htmlelement/innertext/index.md new file mode 100644 index 0000000000..e49115801b --- /dev/null +++ b/files/fr/web/api/htmlelement/innertext/index.md @@ -0,0 +1,43 @@ +--- +title: Node.innerText +slug: Web/API/HTMLElement/innerText +translation_of: Web/API/HTMLElement/innerText +original_slug: Web/API/Node/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

+ + diff --git a/files/fr/web/api/htmlelement/input_event/index.html b/files/fr/web/api/htmlelement/input_event/index.html deleted file mode 100644 index 1e5ed92105..0000000000 --- a/files/fr/web/api/htmlelement/input_event/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: input -slug: Web/API/HTMLElement/input_event -tags: - - DOM - - Element - - Entrée - - HTML5 -translation_of: Web/API/HTMLElement/input_event ---- -

L'évènement DOM input (entrée) est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} (entrée), {{HTMLElement("select")}} (sélection) ou {{ HTMLElement("textarea") }} (zone de texte) est modifiée. (Pour les éléments input avec type=checkbox (case à cocher) ou type=radio , l'évènement input  n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).

- -

De plus, l'évènement  input se déclenche sur les éditeurs contenteditable quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" (hôte de l'édition) . S'il y a deux éléments ou plus qui ont contenteditable à true (vrai), "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs designMode .

- -

Information générale

- -
-
Spécification
-
HTML5, DOM Level 3 Events
-
Interface
-
{{domxref("Event")}}, {{domxref("InputEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
Élement
-
Action par défaut
-
La valeur ou le contenu est modifié
-
- -

 

- -

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

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLElement.input_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/input_event/index.md b/files/fr/web/api/htmlelement/input_event/index.md new file mode 100644 index 0000000000..1e5ed92105 --- /dev/null +++ b/files/fr/web/api/htmlelement/input_event/index.md @@ -0,0 +1,100 @@ +--- +title: input +slug: Web/API/HTMLElement/input_event +tags: + - DOM + - Element + - Entrée + - HTML5 +translation_of: Web/API/HTMLElement/input_event +--- +

L'évènement DOM input (entrée) est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} (entrée), {{HTMLElement("select")}} (sélection) ou {{ HTMLElement("textarea") }} (zone de texte) est modifiée. (Pour les éléments input avec type=checkbox (case à cocher) ou type=radio , l'évènement input  n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).

+ +

De plus, l'évènement  input se déclenche sur les éditeurs contenteditable quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" (hôte de l'édition) . S'il y a deux éléments ou plus qui ont contenteditable à true (vrai), "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs designMode .

+ +

Information générale

+ +
+
Spécification
+
HTML5, DOM Level 3 Events
+
Interface
+
{{domxref("Event")}}, {{domxref("InputEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
Élement
+
Action par défaut
+
La valeur ou le contenu est modifié
+
+ +

 

+ +

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

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLElement.input_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.html b/files/fr/web/api/htmlelement/iscontenteditable/index.html deleted file mode 100644 index dd7c704998..0000000000 --- a/files/fr/web/api/htmlelement/iscontenteditable/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: HTMLElement.isContentEditable -slug: Web/API/HTMLElement/isContentEditable -tags: - - HTML DOM - - Propriété - - Reference - - lecture seule - - Édition - - Élément HTML -translation_of: Web/API/HTMLElement/isContentEditable ---- -
-
{{ APIRef("HTML DOM") }}
-
- -

La propriété en lecture seule HTMLElement.isContentEditable renvoie un  {{jsxref("Boolean")}} qui est true (vrai) si le contenu de l'élément est éditable ; sinon elle renvoie false(faux).

- -

Syntaxe

- -
editable = element.isContentEditable
-
- -

Exemple

- -

JavaScript

- -
document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable;
-document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable;
- -

HTML

- -
<p id="myText1">Uneditable Paragraph</p>
-<p id="myText2" contentEditable="true">Editable Paragraph</p>
-
-<p id="infoText1">Can edit the first paragraph? </p>
-<p id="infoText2">Can edit the second paragraph? </p>
- -

Résultat

- -

{{ EmbedLiveSample('Example') }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML WHATWG')}}Pas de changement de la dernière image, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML5.1')}}L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML5 W3C')}}Image de  {{SpecName('HTML WHATWG')}},  definition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLElement.isContentEditable")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.md b/files/fr/web/api/htmlelement/iscontenteditable/index.md new file mode 100644 index 0000000000..dd7c704998 --- /dev/null +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.md @@ -0,0 +1,79 @@ +--- +title: HTMLElement.isContentEditable +slug: Web/API/HTMLElement/isContentEditable +tags: + - HTML DOM + - Propriété + - Reference + - lecture seule + - Édition + - Élément HTML +translation_of: Web/API/HTMLElement/isContentEditable +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

La propriété en lecture seule HTMLElement.isContentEditable renvoie un  {{jsxref("Boolean")}} qui est true (vrai) si le contenu de l'élément est éditable ; sinon elle renvoie false(faux).

+ +

Syntaxe

+ +
editable = element.isContentEditable
+
+ +

Exemple

+ +

JavaScript

+ +
document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable;
+document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable;
+ +

HTML

+ +
<p id="myText1">Uneditable Paragraph</p>
+<p id="myText2" contentEditable="true">Editable Paragraph</p>
+
+<p id="infoText1">Can edit the first paragraph? </p>
+<p id="infoText2">Can edit the second paragraph? </p>
+ +

Résultat

+ +

{{ EmbedLiveSample('Example') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML WHATWG')}}Pas de changement de la dernière image, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML5.1')}}L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}{{Spec2('HTML5 W3C')}}Image de  {{SpecName('HTML WHATWG')}},  definition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLElement.isContentEditable")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/lang/index.html b/files/fr/web/api/htmlelement/lang/index.html deleted file mode 100644 index 15d2f5536f..0000000000 --- a/files/fr/web/api/htmlelement/lang/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: element.lang -slug: Web/API/HTMLElement/lang -tags: - - DOM - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLElement/lang ---- -

{{ ApiRef() }}

-

Résumé

-

Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.

-

Syntaxe et valeurs

-
var langueUtilisee = référenceElement.lang; // Récupérer la valeur de lang
-référenceElement.lang = NouvelleLangue; // Définir la valeur de lang
-
-

langueUtilisee est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. NouvelleLangue est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.

-

Exemple

-
// ce bout de code compare la langue de base et
-// redirige vers une autre URL suivant la langue
-if (document.documentElement.lang === "en") {
-    window.location.href = "un_document.html.en";
-} else if(document.documentElement.lang === "ru") {
-    window.location.href = "un_document.html.ru";
-}
-
-

Notes

-

Les codes de langues renvoyés par cette propriété sont définis dans la RFC 1766. Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est unknown (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.

-

Ne marche qu'avec l'attribut lang, et non avec xml:lang.

-

Spécification

- - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}}{{Spec2('DOM2 HTML')}} 
-

 

diff --git a/files/fr/web/api/htmlelement/lang/index.md b/files/fr/web/api/htmlelement/lang/index.md new file mode 100644 index 0000000000..15d2f5536f --- /dev/null +++ b/files/fr/web/api/htmlelement/lang/index.md @@ -0,0 +1,46 @@ +--- +title: element.lang +slug: Web/API/HTMLElement/lang +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/lang +--- +

{{ ApiRef() }}

+

Résumé

+

Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.

+

Syntaxe et valeurs

+
var langueUtilisee = référenceElement.lang; // Récupérer la valeur de lang
+référenceElement.lang = NouvelleLangue; // Définir la valeur de lang
+
+

langueUtilisee est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. NouvelleLangue est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.

+

Exemple

+
// ce bout de code compare la langue de base et
+// redirige vers une autre URL suivant la langue
+if (document.documentElement.lang === "en") {
+    window.location.href = "un_document.html.en";
+} else if(document.documentElement.lang === "ru") {
+    window.location.href = "un_document.html.ru";
+}
+
+

Notes

+

Les codes de langues renvoyés par cette propriété sont définis dans la RFC 1766. Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est unknown (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.

+

Ne marche qu'avec l'attribut lang, et non avec xml:lang.

+

Spécification

+ + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}}{{Spec2('DOM2 HTML')}} 
+

 

diff --git a/files/fr/web/api/htmlelement/offsetheight/index.html b/files/fr/web/api/htmlelement/offsetheight/index.html deleted file mode 100644 index 5ceee19bcc..0000000000 --- a/files/fr/web/api/htmlelement/offsetheight/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: element.offsetHeight -slug: Web/API/HTMLElement/offsetHeight -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLElement/offsetHeight ---- -

{{ ApiRef() }}

- -

Résumé

- -

Propriété DHTML permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.

- -

Syntaxe

- -
var hauteurTotaleElem = document.getElementById(id).offsetHeight;
-
- -

hauteurTotalElem est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par id. offsetHeight est une propriété en lecture seule.

- -

Description

- -

Typiquement, la propriété offsetHeight d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément.

- -

Exemple

- -

Example

- -

- -

L'exemple d'image ci-avant montre une barre de défilement et un décalage offsetHeight qui rentre dans la fenêtre. Toutefois, les éléments non-défilables peuvent avoir des valeurs offsetHeight élevées, voire plus élevéesque le contenu visible. Ces éléments sont généralement contenu au sein d'éléments défilables et, de fait, les éléments non-défilables peuvent être partiellement ou complètement invisible, selon la valeur de scrollTop pour le conteneur.

- -

Spécification

- -

offsetHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.

- -

Notes

- -

offsetHeight est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte).

- -

Références

- - - -

Voir aussi

- - \ No newline at end of file diff --git a/files/fr/web/api/htmlelement/offsetheight/index.md b/files/fr/web/api/htmlelement/offsetheight/index.md new file mode 100644 index 0000000000..5ceee19bcc --- /dev/null +++ b/files/fr/web/api/htmlelement/offsetheight/index.md @@ -0,0 +1,54 @@ +--- +title: element.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/offsetHeight +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

Propriété DHTML permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.

+ +

Syntaxe

+ +
var hauteurTotaleElem = document.getElementById(id).offsetHeight;
+
+ +

hauteurTotalElem est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par id. offsetHeight est une propriété en lecture seule.

+ +

Description

+ +

Typiquement, la propriété offsetHeight d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément.

+ +

Exemple

+ +

Example

+ +

+ +

L'exemple d'image ci-avant montre une barre de défilement et un décalage offsetHeight qui rentre dans la fenêtre. Toutefois, les éléments non-défilables peuvent avoir des valeurs offsetHeight élevées, voire plus élevéesque le contenu visible. Ces éléments sont généralement contenu au sein d'éléments défilables et, de fait, les éléments non-défilables peuvent être partiellement ou complètement invisible, selon la valeur de scrollTop pour le conteneur.

+ +

Spécification

+ +

offsetHeight fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.

+ +

Notes

+ +

offsetHeight est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte).

+ +

Références

+ + + +

Voir aussi

+ + \ No newline at end of file diff --git a/files/fr/web/api/htmlelement/offsetleft/index.html b/files/fr/web/api/htmlelement/offsetleft/index.html deleted file mode 100644 index f4bf76cb37..0000000000 --- a/files/fr/web/api/htmlelement/offsetleft/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: element.offsetLeft -slug: Web/API/HTMLElement/offsetLeft -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLElement/offsetLeft ---- -

{{ ApiRef() }}

-

Résumé

-

Renvoie le nombre de pixels dont le - - coin supérieur gauche - de l'élément courant est décalé vers là gauche au sein du nœud offsetParent.

-

Syntaxe

-
left =element.offsetLeft;
-
-

left est un entier représentant le décalage vers la gauche en pixels.

-

Note

-

offsetLeft renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments span dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété offsetLeft fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à offsetLeft, offsetTop, offsetWidth et offsetHeight ne contiendra pas forcément un span avec débordement de texte.

-

Exemple

-
var colorTable = document.getElementById("t1");
-var tOLeft = colorTable.offsetLeft;
-
-if (tOLeft > 5) {
-  // grand décalage à gauche : faire quelque chose ici
-}
-
-

Exemple

-

Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.

- -

- -

Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.

-
<div style="width: 300px; border-color:blue;
-  border-style:solid; border-width:1;">
-  <span>Short span. </span>
-  <span id="long">Long span that wraps withing this div.</span>
-</div>
-
-<div id="box" style="position: absolute; border-color: red;
-  border-width: 1; border-style: solid; z-index: 10">
-</div>
-
-<script>
-  var box = document.getElementById("box");
-  var long = document.getElementById("long");
-  box.style.left = long.offsetLeft + document.body.scrollLeft;
-  box.style.top = long.offsetTop + document.body.scrollTop;
-  box.style.width = long.offsetWidth;
-  box.style.height = long.offsetHeight;
-</script>
-
-

Voir aussi

-

offsetParent, offsetTop, offsetWidth, offsetHeight

-

Spécification

-

Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.

-

MSDN: offsetLeft

\ No newline at end of file diff --git a/files/fr/web/api/htmlelement/offsetleft/index.md b/files/fr/web/api/htmlelement/offsetleft/index.md new file mode 100644 index 0000000000..f4bf76cb37 --- /dev/null +++ b/files/fr/web/api/htmlelement/offsetleft/index.md @@ -0,0 +1,57 @@ +--- +title: element.offsetLeft +slug: Web/API/HTMLElement/offsetLeft +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/offsetLeft +--- +

{{ ApiRef() }}

+

Résumé

+

Renvoie le nombre de pixels dont le + + coin supérieur gauche + de l'élément courant est décalé vers là gauche au sein du nœud offsetParent.

+

Syntaxe

+
left =element.offsetLeft;
+
+

left est un entier représentant le décalage vers la gauche en pixels.

+

Note

+

offsetLeft renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments span dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété offsetLeft fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à offsetLeft, offsetTop, offsetWidth et offsetHeight ne contiendra pas forcément un span avec débordement de texte.

+

Exemple

+
var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft > 5) {
+  // grand décalage à gauche : faire quelque chose ici
+}
+
+

Exemple

+

Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.

+ +

+ +

Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.

+
<div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;">
+  <span>Short span. </span>
+  <span id="long">Long span that wraps withing this div.</span>
+</div>
+
+<div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10">
+</div>
+
+<script>
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft;
+  box.style.top = long.offsetTop + document.body.scrollTop;
+  box.style.width = long.offsetWidth;
+  box.style.height = long.offsetHeight;
+</script>
+
+

Voir aussi

+

offsetParent, offsetTop, offsetWidth, offsetHeight

+

Spécification

+

Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.

+

MSDN: offsetLeft

\ No newline at end of file diff --git a/files/fr/web/api/htmlelement/offsetparent/index.html b/files/fr/web/api/htmlelement/offsetparent/index.html deleted file mode 100644 index 4f3775191e..0000000000 --- a/files/fr/web/api/htmlelement/offsetparent/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: element.offsetParent -slug: Web/API/HTMLElement/offsetParent -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLElement/offsetParent ---- -

{{ ApiRef() }}

-

Résumé

-

Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'offsetParent.

-

Syntaxe

-
objetParent = element.offsetParent
-
-

Paramètres

- -

Spécification

-

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/htmlelement/offsetparent/index.md b/files/fr/web/api/htmlelement/offsetparent/index.md new file mode 100644 index 0000000000..4f3775191e --- /dev/null +++ b/files/fr/web/api/htmlelement/offsetparent/index.md @@ -0,0 +1,21 @@ +--- +title: element.offsetParent +slug: Web/API/HTMLElement/offsetParent +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLElement/offsetParent +--- +

{{ ApiRef() }}

+

Résumé

+

Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'offsetParent.

+

Syntaxe

+
objetParent = element.offsetParent
+
+

Paramètres

+ +

Spécification

+

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/htmlelement/offsettop/index.html b/files/fr/web/api/htmlelement/offsettop/index.html deleted file mode 100644 index 44e3b80d2c..0000000000 --- a/files/fr/web/api/htmlelement/offsettop/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: element.offsetTop -slug: Web/API/HTMLElement/offsetTop -tags: - - DOM - - DOM_0 -translation_of: Web/API/HTMLElement/offsetTop ---- -

{{ ApiRef() }}

- -

Résumé

- -

offsetTop renvoie la distance entre l'élément courant et le haut du nœud offsetParent.

- -

Syntaxe

- -
topPos = element.offsetTop;
-
- -

Paramètres

- - - -

Exemple

- -
d = document.getElementById("div1");
-
-topPos = d.offsetTop;
-
-if (topPos > 10 ) {
-
-    // l'objet est décalé de plus de
-    // 10 pixels par rapport à son parent
-
-}
-
- -

Spécification

- -

{{ DOM0() }}

- -

Références

- -

offsetTop definition sur MSDN

\ No newline at end of file diff --git a/files/fr/web/api/htmlelement/offsettop/index.md b/files/fr/web/api/htmlelement/offsettop/index.md new file mode 100644 index 0000000000..44e3b80d2c --- /dev/null +++ b/files/fr/web/api/htmlelement/offsettop/index.md @@ -0,0 +1,46 @@ +--- +title: element.offsetTop +slug: Web/API/HTMLElement/offsetTop +tags: + - DOM + - DOM_0 +translation_of: Web/API/HTMLElement/offsetTop +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

offsetTop renvoie la distance entre l'élément courant et le haut du nœud offsetParent.

+ +

Syntaxe

+ +
topPos = element.offsetTop;
+
+ +

Paramètres

+ + + +

Exemple

+ +
d = document.getElementById("div1");
+
+topPos = d.offsetTop;
+
+if (topPos > 10 ) {
+
+    // l'objet est décalé de plus de
+    // 10 pixels par rapport à son parent
+
+}
+
+ +

Spécification

+ +

{{ DOM0() }}

+ +

Références

+ +

offsetTop definition sur MSDN

\ No newline at end of file diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.html b/files/fr/web/api/htmlelement/offsetwidth/index.html deleted file mode 100644 index a957ef38e9..0000000000 --- a/files/fr/web/api/htmlelement/offsetwidth/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: element.offsetWidth -slug: Web/API/HTMLElement/offsetWidth -translation_of: Web/API/HTMLElement/offsetWidth ---- -

{{ ApiRef() }}

- -

Résumé

- -

Renvoie la largeur totale d'un élément.

- -

Syntaxe

- -
var offsetWidth = element.offsetWidth;
-
- -

offsetWidth est une propriété en lecture seule.

- -

Description

- -

Typiquement, l'attribut offsetWidth est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.

- -

Exemple

- -

- -

Spécification

- -

offsetWidth fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.

- -

Notes

- -

offsetWidth est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).

- -

Références

- - \ No newline at end of file diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.md b/files/fr/web/api/htmlelement/offsetwidth/index.md new file mode 100644 index 0000000000..a957ef38e9 --- /dev/null +++ b/files/fr/web/api/htmlelement/offsetwidth/index.md @@ -0,0 +1,40 @@ +--- +title: element.offsetWidth +slug: Web/API/HTMLElement/offsetWidth +translation_of: Web/API/HTMLElement/offsetWidth +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

Renvoie la largeur totale d'un élément.

+ +

Syntaxe

+ +
var offsetWidth = element.offsetWidth;
+
+ +

offsetWidth est une propriété en lecture seule.

+ +

Description

+ +

Typiquement, l'attribut offsetWidth est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.

+ +

Exemple

+ +

+ +

Spécification

+ +

offsetWidth fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.

+ +

Notes

+ +

offsetWidth est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).

+ +

Références

+ + \ No newline at end of file diff --git a/files/fr/web/api/htmlelement/outertext/index.html b/files/fr/web/api/htmlelement/outertext/index.html deleted file mode 100644 index fb0464c439..0000000000 --- a/files/fr/web/api/htmlelement/outertext/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: HTMLElement.outerText -slug: Web/API/HTMLElement/outerText -tags: - - API - - DOM - - Propriété -translation_of: Web/API/HTMLElement/outerText ---- -
{{APIRef("DOM")}}
- -

{{ Non-standard_header() }}

- -

Résumé

- -

HTMLElement.outerText n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni.

- -

Exemple

- -

Voir cette réponse proposée sur StackOverflow.

- -

Spécification

- -

Ne fait partie d'aucune spécification. Discussion de la norme : whatwg/html#668.

- -

Microsoft en a publié une description sur MSDN.

- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLElement.outerText")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/outertext/index.md b/files/fr/web/api/htmlelement/outertext/index.md new file mode 100644 index 0000000000..fb0464c439 --- /dev/null +++ b/files/fr/web/api/htmlelement/outertext/index.md @@ -0,0 +1,37 @@ +--- +title: HTMLElement.outerText +slug: Web/API/HTMLElement/outerText +tags: + - API + - DOM + - Propriété +translation_of: Web/API/HTMLElement/outerText +--- +
{{APIRef("DOM")}}
+ +

{{ Non-standard_header() }}

+ +

Résumé

+ +

HTMLElement.outerText n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni.

+ +

Exemple

+ +

Voir cette réponse proposée sur StackOverflow.

+ +

Spécification

+ +

Ne fait partie d'aucune spécification. Discussion de la norme : whatwg/html#668.

+ +

Microsoft en a publié une description sur MSDN.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLElement.outerText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/title/index.html b/files/fr/web/api/htmlelement/title/index.html deleted file mode 100644 index 6c545982d7..0000000000 --- a/files/fr/web/api/htmlelement/title/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: HTMLElement.title -slug: Web/API/HTMLElement/title -tags: - - API - - HTML DOM - - HTMLElement - - Propriété - - Reference -translation_of: Web/API/HTMLElement/title ---- -
{{ APIRef("HTML DOM") }}
- -

La propriété HTMLElement.title représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.

- -
-

Note : Si un nœud n'a pas d'attribut title, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..

- -
 <div title="InfoCool">
-   <div title="">le survol de la souris ici fera apparaître "InfoCool"</div>
-   <div title=" ">le survol de la souris ici ne fera rien apparaître</div>
- </div>
-
-
- -

Syntaxe

- -
var chn = element.title;
-element.title = chn;
-
- -

Exemple

- -
 bouton1.title = "cliquer pour rafraîchir";
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-title', 'title')}}{{Spec2('HTML WHATWG')}}Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}{{Spec2('DOM2 HTML')}}Pas de changement par rapport à la {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLElement.title")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/title/index.md b/files/fr/web/api/htmlelement/title/index.md new file mode 100644 index 0000000000..6c545982d7 --- /dev/null +++ b/files/fr/web/api/htmlelement/title/index.md @@ -0,0 +1,74 @@ +--- +title: HTMLElement.title +slug: Web/API/HTMLElement/title +tags: + - API + - HTML DOM + - HTMLElement + - Propriété + - Reference +translation_of: Web/API/HTMLElement/title +--- +
{{ APIRef("HTML DOM") }}
+ +

La propriété HTMLElement.title représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.

+ +
+

Note : Si un nœud n'a pas d'attribut title, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..

+ +
 <div title="InfoCool">
+   <div title="">le survol de la souris ici fera apparaître "InfoCool"</div>
+   <div title=" ">le survol de la souris ici ne fera rien apparaître</div>
+ </div>
+
+
+ +

Syntaxe

+ +
var chn = element.title;
+element.title = chn;
+
+ +

Exemple

+ +
 bouton1.title = "cliquer pour rafraîchir";
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-title', 'title')}}{{Spec2('HTML WHATWG')}}Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}{{Spec2('DOM2 HTML')}}Pas de changement par rapport à la {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLElement.title")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.html b/files/fr/web/api/htmlelement/transitionend_event/index.html deleted file mode 100644 index a780a3023b..0000000000 --- a/files/fr/web/api/htmlelement/transitionend_event/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: transitionend -slug: Web/API/HTMLElement/transitionend_event -tags: - - DOM - - Event - - TransitionEvent - - Transitions CSS - - Transitions CSS3 - - transitionend -translation_of: Web/API/HTMLElement/transitionend_event -original_slug: Web/Events/transitionend ---- -
{{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

- - diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.md b/files/fr/web/api/htmlelement/transitionend_event/index.md new file mode 100644 index 0000000000..a780a3023b --- /dev/null +++ b/files/fr/web/api/htmlelement/transitionend_event/index.md @@ -0,0 +1,191 @@ +--- +title: transitionend +slug: Web/API/HTMLElement/transitionend_event +tags: + - DOM + - Event + - TransitionEvent + - Transitions CSS + - Transitions CSS3 + - transitionend +translation_of: Web/API/HTMLElement/transitionend_event +original_slug: Web/Events/transitionend +--- +
{{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

+ + diff --git a/files/fr/web/api/htmlformcontrolscollection/index.html b/files/fr/web/api/htmlformcontrolscollection/index.html deleted file mode 100644 index 7924983b8c..0000000000 --- a/files/fr/web/api/htmlformcontrolscollection/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: HTMLFormControlsCollection -slug: Web/API/HTMLFormControlsCollection -tags: - - API - - Collection - - DOM - - Interface -translation_of: Web/API/HTMLFormControlsCollection ---- -
{{APIRef("HTML DOM")}}
- -

L'interface HTMLFormControlsCollection représente une collection d'éléments de contrôle de formulaires. Il représente les listes retournées par le {{domxref("HTMLFormElement")}} et le {{domxref("HTMLFieldSetElement")}} de la propriété d'interface {{domxref("HTMLFieldSetElement.elements", "elements")}}.

- -

Cette interface remplace une méthode de {{domxref("HTMLCollection")}}, sur laquelle elle est basée.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Cette interface hérite des propriétés de son parent {{domxref("HTMLCollection")}}.

- -

Méthodes

- -

Cette interface hérite des méthodes de son parent {{domxref("HTMLCollection")}}.

- -
-
{{domxref("HTMLFormControlsCollection.namedItem()")}}
-
Renvoie la {{domxref("RadioNodeList")}} (liste de noeuds radio) ou l'{{domxref("Element")}} dans la collection dont le name (nom) ou l'id (identifiant) correspond au nom spécifié, ou null si aucun noeud ne correspond. Noter que cette version de namedItem() cache celui hérité de {{domxref("HTMLCollection")}}. Comme pour le premier, en JavaScript, en utilisant le crochet de la syntaxe de tableau (array) avec une {{jsxref("String")}} (chaîne de caractères), collection["value"] est équivalent à collection.namedItem("value").
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le dernier instantané {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}{{Spec2('HTML5 W3C')}}Dans cet instantané de {{SpecName("HTML WHATWG")}}, HTMLFormControlsCollections est défini pour la première fois.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLFormControlsCollection")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlformcontrolscollection/index.md b/files/fr/web/api/htmlformcontrolscollection/index.md new file mode 100644 index 0000000000..7924983b8c --- /dev/null +++ b/files/fr/web/api/htmlformcontrolscollection/index.md @@ -0,0 +1,64 @@ +--- +title: HTMLFormControlsCollection +slug: Web/API/HTMLFormControlsCollection +tags: + - API + - Collection + - DOM + - Interface +translation_of: Web/API/HTMLFormControlsCollection +--- +
{{APIRef("HTML DOM")}}
+ +

L'interface HTMLFormControlsCollection représente une collection d'éléments de contrôle de formulaires. Il représente les listes retournées par le {{domxref("HTMLFormElement")}} et le {{domxref("HTMLFieldSetElement")}} de la propriété d'interface {{domxref("HTMLFieldSetElement.elements", "elements")}}.

+ +

Cette interface remplace une méthode de {{domxref("HTMLCollection")}}, sur laquelle elle est basée.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Cette interface hérite des propriétés de son parent {{domxref("HTMLCollection")}}.

+ +

Méthodes

+ +

Cette interface hérite des méthodes de son parent {{domxref("HTMLCollection")}}.

+ +
+
{{domxref("HTMLFormControlsCollection.namedItem()")}}
+
Renvoie la {{domxref("RadioNodeList")}} (liste de noeuds radio) ou l'{{domxref("Element")}} dans la collection dont le name (nom) ou l'id (identifiant) correspond au nom spécifié, ou null si aucun noeud ne correspond. Noter que cette version de namedItem() cache celui hérité de {{domxref("HTMLCollection")}}. Comme pour le premier, en JavaScript, en utilisant le crochet de la syntaxe de tableau (array) avec une {{jsxref("String")}} (chaîne de caractères), collection["value"] est équivalent à collection.namedItem("value").
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le dernier instantané {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}{{Spec2('HTML5 W3C')}}Dans cet instantané de {{SpecName("HTML WHATWG")}}, HTMLFormControlsCollections est défini pour la première fois.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.HTMLFormControlsCollection")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlformelement/acceptcharset/index.html b/files/fr/web/api/htmlformelement/acceptcharset/index.html deleted file mode 100644 index 59cf90bc64..0000000000 --- a/files/fr/web/api/htmlformelement/acceptcharset/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: HTMLFormElement.acceptCharset -slug: Web/API/HTMLFormElement/acceptCharset -tags: - - HTMLFormElement -translation_of: Web/API/HTMLFormElement/acceptCharset ---- -
{{APIRef("HTML DOM")}}
- -

La propriété HTMLFormElement.acceptCharset représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces.

- -

Syntaxe

- -
string = form.acceptCharset;
-form.acceptCharset = string;
-
- -

Exemple

- -
inputs = document.forms["myform"].acceptCharset
-
- -

Spécification

- -

HTML 5, Section 4.10.3: The Form Element

- -

DOM Level 2 HTML: acceptCharset

diff --git a/files/fr/web/api/htmlformelement/acceptcharset/index.md b/files/fr/web/api/htmlformelement/acceptcharset/index.md new file mode 100644 index 0000000000..59cf90bc64 --- /dev/null +++ b/files/fr/web/api/htmlformelement/acceptcharset/index.md @@ -0,0 +1,27 @@ +--- +title: HTMLFormElement.acceptCharset +slug: Web/API/HTMLFormElement/acceptCharset +tags: + - HTMLFormElement +translation_of: Web/API/HTMLFormElement/acceptCharset +--- +
{{APIRef("HTML DOM")}}
+ +

La propriété HTMLFormElement.acceptCharset représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces.

+ +

Syntaxe

+ +
string = form.acceptCharset;
+form.acceptCharset = string;
+
+ +

Exemple

+ +
inputs = document.forms["myform"].acceptCharset
+
+ +

Spécification

+ +

HTML 5, Section 4.10.3: The Form Element

+ +

DOM Level 2 HTML: acceptCharset

diff --git a/files/fr/web/api/htmlformelement/action/index.html b/files/fr/web/api/htmlformelement/action/index.html deleted file mode 100644 index 7faeadc67a..0000000000 --- a/files/fr/web/api/htmlformelement/action/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: HTMLFormElement.action -slug: Web/API/HTMLFormElement/action -translation_of: Web/API/HTMLFormElement/action ---- -
{{APIRef("HTML DOM")}}
- -

La propriété HTMLFormElement.action représente l'action associée à l'élément {{HTMLElement("form")}}.

- -

L'action d'un formulaire est le programme exécuté sur le serveur lorsque le formulaire est soumis. Cette propriété peut être récupérée ou définie.

- -

Syntaxe

- -
string = form.action
-form.action = string
-
- -

Exemple

- -

form.action = "/cgi-bin/publish";

- -

Spécification

- -

HTML 5, Section 4.10.19.6, Form submission

- -

DOM Level 2 HTML: action

diff --git a/files/fr/web/api/htmlformelement/action/index.md b/files/fr/web/api/htmlformelement/action/index.md new file mode 100644 index 0000000000..7faeadc67a --- /dev/null +++ b/files/fr/web/api/htmlformelement/action/index.md @@ -0,0 +1,26 @@ +--- +title: HTMLFormElement.action +slug: Web/API/HTMLFormElement/action +translation_of: Web/API/HTMLFormElement/action +--- +
{{APIRef("HTML DOM")}}
+ +

La propriété HTMLFormElement.action représente l'action associée à l'élément {{HTMLElement("form")}}.

+ +

L'action d'un formulaire est le programme exécuté sur le serveur lorsque le formulaire est soumis. Cette propriété peut être récupérée ou définie.

+ +

Syntaxe

+ +
string = form.action
+form.action = string
+
+ +

Exemple

+ +

form.action = "/cgi-bin/publish";

+ +

Spécification

+ +

HTML 5, Section 4.10.19.6, Form submission

+ +

DOM Level 2 HTML: action

diff --git a/files/fr/web/api/htmlformelement/elements/index.html b/files/fr/web/api/htmlformelement/elements/index.html deleted file mode 100644 index fbe30d563e..0000000000 --- a/files/fr/web/api/htmlformelement/elements/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: HTMLFormElement.elements -slug: Web/API/HTMLFormElement/elements -translation_of: Web/API/HTMLFormElement/elements ---- -
-
{{APIRef("HTML DOM")}}
-
- -

La propriété HTMLFormElement.elements retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} HTMLCollection) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type input dont l'attribut type est égal à image.

- -

Vous pouvez accéder à un élément particulier en utilisant soit un index soit le name ou l'id de l'élément.

- -

Syntaxe

- -
nodeList = HTMLFormElement.elements
-
- -

Exemple

- -
var inputs = document.getElementById("form1").elements;
-var inputByIndex = inputs[2];
-var inputByName = inputs["login"];
-
- -

Spécification

- - diff --git a/files/fr/web/api/htmlformelement/elements/index.md b/files/fr/web/api/htmlformelement/elements/index.md new file mode 100644 index 0000000000..fbe30d563e --- /dev/null +++ b/files/fr/web/api/htmlformelement/elements/index.md @@ -0,0 +1,31 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +translation_of: Web/API/HTMLFormElement/elements +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

La propriété HTMLFormElement.elements retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} HTMLCollection) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type input dont l'attribut type est égal à image.

+ +

Vous pouvez accéder à un élément particulier en utilisant soit un index soit le name ou l'id de l'élément.

+ +

Syntaxe

+ +
nodeList = HTMLFormElement.elements
+
+ +

Exemple

+ +
var inputs = document.getElementById("form1").elements;
+var inputByIndex = inputs[2];
+var inputByName = inputs["login"];
+
+ +

Spécification

+ + diff --git a/files/fr/web/api/htmlformelement/encoding/index.html b/files/fr/web/api/htmlformelement/encoding/index.html deleted file mode 100644 index 43c942335d..0000000000 --- a/files/fr/web/api/htmlformelement/encoding/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: HTMLFormElement.encoding -slug: Web/API/HTMLFormElement/encoding -translation_of: Web/API/HTMLFormElement/encoding ---- -
-
{{APIRef("HTML DOM")}}
-
- -

La propriété HTMLFormElement.encoding est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM.

diff --git a/files/fr/web/api/htmlformelement/encoding/index.md b/files/fr/web/api/htmlformelement/encoding/index.md new file mode 100644 index 0000000000..43c942335d --- /dev/null +++ b/files/fr/web/api/htmlformelement/encoding/index.md @@ -0,0 +1,10 @@ +--- +title: HTMLFormElement.encoding +slug: Web/API/HTMLFormElement/encoding +translation_of: Web/API/HTMLFormElement/encoding +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

La propriété HTMLFormElement.encoding est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM.

diff --git a/files/fr/web/api/htmlformelement/enctype/index.html b/files/fr/web/api/htmlformelement/enctype/index.html deleted file mode 100644 index d706eec625..0000000000 --- a/files/fr/web/api/htmlformelement/enctype/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: HTMLFormElement.enctype -slug: Web/API/HTMLFormElement/enctype -translation_of: Web/API/HTMLFormElement/enctype ---- -
{{APIRef("HTML DOM")}}
- -

La propriété HTMLFormElement.enctype représente le type de contenu de l'élément  {{HTMLElement("form")}}.

- -

Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded".

- -

Syntaxe

- -
string = form.enctype
-form.enctype = string
-
- -

Exemple

- -
form.enctype = "application/x-www-form-urlencoded";
- -

Spécification

- -

HTML 5, Section 4.10.19.6, Form submission

- -

DOM Level 2 HTML: enctype

diff --git a/files/fr/web/api/htmlformelement/enctype/index.md b/files/fr/web/api/htmlformelement/enctype/index.md new file mode 100644 index 0000000000..d706eec625 --- /dev/null +++ b/files/fr/web/api/htmlformelement/enctype/index.md @@ -0,0 +1,26 @@ +--- +title: HTMLFormElement.enctype +slug: Web/API/HTMLFormElement/enctype +translation_of: Web/API/HTMLFormElement/enctype +--- +
{{APIRef("HTML DOM")}}
+ +

La propriété HTMLFormElement.enctype représente le type de contenu de l'élément  {{HTMLElement("form")}}.

+ +

Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded".

+ +

Syntaxe

+ +
string = form.enctype
+form.enctype = string
+
+ +

Exemple

+ +
form.enctype = "application/x-www-form-urlencoded";
+ +

Spécification

+ +

HTML 5, Section 4.10.19.6, Form submission

+ +

DOM Level 2 HTML: enctype

diff --git a/files/fr/web/api/htmlformelement/index.html b/files/fr/web/api/htmlformelement/index.html deleted file mode 100644 index 747286a784..0000000000 --- a/files/fr/web/api/htmlformelement/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: form -slug: Web/API/HTMLFormElement -tags: - - API - - Contrôles - - DOM - - Formulaire - - HTML - - Interface -translation_of: Web/API/HTMLFormElement ---- -
{{APIRef("HTML DOM")}}
- -

L'interface HTMLFormElement représente un élément  {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants.

- -

{{InheritanceDiagram(600,120)}}

- -

Propriétés

- -

Cette interface hérite aussi des propriétés de son parent {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}
-
Un élément {{domxref("HTMLFormControlsCollection")}} regroupant les différents contrôles associés à ce formulaire.
-
{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}
-
Une valeur de type long indiquant le nombre de contrôles dans le formulaire.
-
{{domxref("HTMLFormElement.name")}}
-
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("name", "form")}} pour ce formulaire et qui correspond au nom du formulaire.
-
{{domxref("HTMLFormElement.method")}}
-
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("method", "form")}} pour ce formulaire et qui correspond à la méthode HTTP utilisée pour envoyer le formulaires. Seules certaines valeurs peuvent être utilisées avec cette propriété.
-
{{domxref("HTMLFormElement.target")}}
-
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("target", "form")}} pour ce formulaire et qui indique l'emplacement où seront affichées les résultats après envoi du formulaire.
-
{{domxref("HTMLFormElement.action")}}
-
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("action", "form")}} pour ce formulaire et qui contient l'URI d'un programme traitant les informations transmises via le formulaire.
-
{{domxref("HTMLFormElement.encoding")}} ou {{domxref("HTMLFormElement.enctype")}}
-
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("enctype", "form")}} pour ce formulaire et qui correspond au type de contenu utilisé pour transmettre les données du formulaire vers le serveur. Seules certaines valeurs peuvent être utilisées pour cette propriété. Les deux noms indiqués pour la méthode sont synonymes.
-
{{domxref("HTMLFormElement.acceptCharset")}}
-
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("accept-charset", "form")}} pour ce formulaire et qui correspond au jeu de caractères / à l'encodage pris en charge par le serveur.
-
{{domxref("HTMLFormElement.autocomplete")}}
-
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("autocomplete", "form")}} pour ce formulaire et qui indique si les contrôles du formulaire sont automatiquement renseignés par le navigateur.
-
{{domxref("HTMLFormElement.noValidate")}}
-
Un booléen indiquant la valeur de l'attribut HTML {{htmlattrxref("novalidate", "form")}} pour ce formulaire et qui indique si le formulaire ne devrait pas être validé.
-
- -

Les champs de saisie nommés sont ajoutés comme propriétés sur leurs formulaires associés. Ces propriétés peuvent surcharger les propriétés natives si elles utilisent le même nom ! Par exemple, un formulaire disposant d'un {{HTMLElement("<input>")}} nommé action surchargera la propriété native action et tout appel renverra le champ input plutôt que la valeur de l'attribut HTML {{htmlattrxref("action", "form")}}.

- -

Méthodes

- -

Cette interface hérite aussi des méthodes de son parent {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLFormElement.submit()")}}
-
soumet le formulaire au serveur.
-
{{domxref("HTMLFormElement.reset()")}}
-
redéfinit le formulaire à son état initial.
-
{{domxref("HTMLFormElement.checkValidity()")}}
-
renvoie true si les contrôles du formulaire sont soumis à des contraintes de validation et les respectent. Elle renvoie false si certains contrôles ne respectent pas leurs contraintes. Elle déclenche un évènement {{event("invalid")}} pour chaque contrôle qui ne respecte pas ses contraintes. De tels contrôles sont considérés invalides si l'évènement n'est pas annulé. C'est au développeur de choisir comment réagir face à la valeur false produite par cette méthode.
-
{{domxref("HTMLFormElement.reportValidity()")}}
-
renvoie true si les contrôles du formulaire respectent leurs contraintes de validation. Lorsque false est renvoyé, des évènements annulables {{Event("invalid")}} sont déclenchés pour chaque contrôle invalide et les problèmes de validation sont rapportés à l'utilisateur.
-
{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}
-
déclenche une interface native du navigateur afin d'aider les utilisateurs à remplir les champs pour lesquels la valeur nommée du champ à remplissage automatique ne vaut pas off ou on. Le formulaire reçoit un évènement lorsque l'utilisateur a fini d'intéragir avec l'interface, l'événement sera {{event("autocomplete")}} si les champs ont bien été remplis ou {{event("autocompleteerror")}} s'il y a eu un problème. Cette méthode a été retirée de Chrome et Firefox — cf. {{bug(1270740)}} pour plus d'informations et les raisons associées.
-
- -

Notes d'utilisation

- -

Obtention d'un objet élément de formulaire

- -

Pour obtenir un objet HTMLFormElement, vous pouvez utiliser un sélecteur CSS avec {{domxref("ParentNode.querySelector", "querySelector()")}}  ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.

- -

{{domxref("Document.forms")}} renvoie un tableau des objets HTMLFormElement listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel :

- -
-
document.forms[index]
-
renvoie le formulaire à l'index spécifié dans le tableau du formulaire.
-
document.forms[id]
-
renvoie le formulaire dont l'ID (identifiant) est id .
-
document.forms[name]
-
renvoie le formulaire dont la valeur d'attribut de {{domxref("Element.name", "name")}} est name.
-
- -

Accès aux éléments du formulaire

- -

Vous pouvez accéder à la liste des éléments contenant des données dans le formulaire en examinant la propriété {{domxref ("HTMLFormElement.elements", "elements")}}. Ceci retourne une {{domxref ("HTMLFormControlsCollection")}} listant tous les éléments d'entrée de données utilisateur du formulaire, aussi bien ceux qui sont des descendants du <form> que ceux déclarés membres du formulaire par leurs attributs.

- -

Éléments considérés comme des contrôles de formulaire

- -

Les éléments qui sont inclus par HTMLFormElement.elements et  HTMLFormElement.length sont :

- - - -

Exemples

- -

Crée un nouvel élément de formulaire, modifie ses attributs et l'envoie :

- -
var f = document.createElement("form"); // On crée un formulaire
-document.body.appendChild(f);           // On l'ajoute au corps du document
-f.action = "/cgi-bin/some.cgi";         // On y ajoute des attributs action et method
-f.method = "POST"
-f.submit();                             // On appelle la méhtode submit pour l'envoyer
-
- -

Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :

- -
<form name="formA" action="/cgi-bin/test" method="post">
- <p>Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails.</p>
- <p>
-  <button type="button" onclick="getFormInfo();">Info</button>
-  <button type="button" onclick="setFormInfo(this.form);">Set</button>
-  <button type="reset">Reset</button>
- </p>
-
- <textarea id="form-info" rows="15" cols="20"></textarea>
-</form>
-
-<script>
-  function getFormInfo(){
-    // Obtenir une référence au formulaire par son nom
-    var f = document.forms["formA"];
-    // Les propriétés du formulaire qui nous intéressent
-    var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];
-    // Itérer sur les propriétés en les transformant en une chaîne que nous pouvons afficher à l'utilisateur
-    var info = properties.reduce(function(property) { return property + ": " + f[property] }, "").join("\n");
-
-    // Définir les <textarea> du formulaire pour en afficher les propriétés
-    document.forms["formA"].elements['form-info'].value = info;
-  }
-
-  function setFormInfo(f){ //L'argument doit être une référence d'élément de formulaire.
-    f.action = "a-different-url.cgi";
-    f.name   = "a-different-name";
-  }
-</script>
- -

Envoi d'un formulaire dans une nouvelle fenêtre :

- -
<!doctype html>
-<html>
-<head>
-<meta charset="utf-8">
-<title>Example new-window form submission</title>
-</head>
-<body>
-
-<form action="test.php" target="_blank">
-  <p><label>First name: <input type="text" name="firstname"></label></p>
-  <p><label>Last name: <input type="text" name="lastname"></label></p>
-  <p><label><input type="password" name="pwd"></label></p>
-
-  <fieldset>
-   <legend>Pet preference</legend>
-    <p><label><input type="radio" name="pet" value="cat"> Cat</label></p>
-    <p><label><input type="radio" name="pet" value="dog"> Dog</label></p>
-  </fieldset>
-
-  <fieldset>
-    <legend>Owned vehicles</legend>
-
-    <p><label><input type="checkbox" name="vehicle" value="Bike">I have a bike</label></p>
-    <p><label><input type="checkbox" name="vehicle" value="Car">I have a car</label></p>
-  </fieldset>
-
-  <p><button>Submit</button></p>
-</form>
-
-</body>
-</html>
- -

Envoi de formulaires et téléchargement de fichiers en utilisant XMLHttpRequest

- -

Vous pouvez consulter ce paragraphe si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML WHATWG')}}Ajout de la méthode requestAutocomplete().
{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML5 W3C')}}Les propriétés de l'élément renvoient un élément {{domxref("HTMLFormControlsCollection")}} plutôt qu'un {{domxref("HTMLCollection")}} (changement principalement technique). Ajout de la méthode checkValidity(). Ajout des propriétés autocomplete, noValidate et encoding.
{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM2 HTML')}}Aucune modification.
{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLFormElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlformelement/index.md b/files/fr/web/api/htmlformelement/index.md new file mode 100644 index 0000000000..747286a784 --- /dev/null +++ b/files/fr/web/api/htmlformelement/index.md @@ -0,0 +1,223 @@ +--- +title: form +slug: Web/API/HTMLFormElement +tags: + - API + - Contrôles + - DOM + - Formulaire + - HTML + - Interface +translation_of: Web/API/HTMLFormElement +--- +
{{APIRef("HTML DOM")}}
+ +

L'interface HTMLFormElement représente un élément  {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Propriétés

+ +

Cette interface hérite aussi des propriétés de son parent {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}
+
Un élément {{domxref("HTMLFormControlsCollection")}} regroupant les différents contrôles associés à ce formulaire.
+
{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}
+
Une valeur de type long indiquant le nombre de contrôles dans le formulaire.
+
{{domxref("HTMLFormElement.name")}}
+
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("name", "form")}} pour ce formulaire et qui correspond au nom du formulaire.
+
{{domxref("HTMLFormElement.method")}}
+
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("method", "form")}} pour ce formulaire et qui correspond à la méthode HTTP utilisée pour envoyer le formulaires. Seules certaines valeurs peuvent être utilisées avec cette propriété.
+
{{domxref("HTMLFormElement.target")}}
+
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("target", "form")}} pour ce formulaire et qui indique l'emplacement où seront affichées les résultats après envoi du formulaire.
+
{{domxref("HTMLFormElement.action")}}
+
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("action", "form")}} pour ce formulaire et qui contient l'URI d'un programme traitant les informations transmises via le formulaire.
+
{{domxref("HTMLFormElement.encoding")}} ou {{domxref("HTMLFormElement.enctype")}}
+
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("enctype", "form")}} pour ce formulaire et qui correspond au type de contenu utilisé pour transmettre les données du formulaire vers le serveur. Seules certaines valeurs peuvent être utilisées pour cette propriété. Les deux noms indiqués pour la méthode sont synonymes.
+
{{domxref("HTMLFormElement.acceptCharset")}}
+
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("accept-charset", "form")}} pour ce formulaire et qui correspond au jeu de caractères / à l'encodage pris en charge par le serveur.
+
{{domxref("HTMLFormElement.autocomplete")}}
+
Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("autocomplete", "form")}} pour ce formulaire et qui indique si les contrôles du formulaire sont automatiquement renseignés par le navigateur.
+
{{domxref("HTMLFormElement.noValidate")}}
+
Un booléen indiquant la valeur de l'attribut HTML {{htmlattrxref("novalidate", "form")}} pour ce formulaire et qui indique si le formulaire ne devrait pas être validé.
+
+ +

Les champs de saisie nommés sont ajoutés comme propriétés sur leurs formulaires associés. Ces propriétés peuvent surcharger les propriétés natives si elles utilisent le même nom ! Par exemple, un formulaire disposant d'un {{HTMLElement("<input>")}} nommé action surchargera la propriété native action et tout appel renverra le champ input plutôt que la valeur de l'attribut HTML {{htmlattrxref("action", "form")}}.

+ +

Méthodes

+ +

Cette interface hérite aussi des méthodes de son parent {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.submit()")}}
+
soumet le formulaire au serveur.
+
{{domxref("HTMLFormElement.reset()")}}
+
redéfinit le formulaire à son état initial.
+
{{domxref("HTMLFormElement.checkValidity()")}}
+
renvoie true si les contrôles du formulaire sont soumis à des contraintes de validation et les respectent. Elle renvoie false si certains contrôles ne respectent pas leurs contraintes. Elle déclenche un évènement {{event("invalid")}} pour chaque contrôle qui ne respecte pas ses contraintes. De tels contrôles sont considérés invalides si l'évènement n'est pas annulé. C'est au développeur de choisir comment réagir face à la valeur false produite par cette méthode.
+
{{domxref("HTMLFormElement.reportValidity()")}}
+
renvoie true si les contrôles du formulaire respectent leurs contraintes de validation. Lorsque false est renvoyé, des évènements annulables {{Event("invalid")}} sont déclenchés pour chaque contrôle invalide et les problèmes de validation sont rapportés à l'utilisateur.
+
{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}
+
déclenche une interface native du navigateur afin d'aider les utilisateurs à remplir les champs pour lesquels la valeur nommée du champ à remplissage automatique ne vaut pas off ou on. Le formulaire reçoit un évènement lorsque l'utilisateur a fini d'intéragir avec l'interface, l'événement sera {{event("autocomplete")}} si les champs ont bien été remplis ou {{event("autocompleteerror")}} s'il y a eu un problème. Cette méthode a été retirée de Chrome et Firefox — cf. {{bug(1270740)}} pour plus d'informations et les raisons associées.
+
+ +

Notes d'utilisation

+ +

Obtention d'un objet élément de formulaire

+ +

Pour obtenir un objet HTMLFormElement, vous pouvez utiliser un sélecteur CSS avec {{domxref("ParentNode.querySelector", "querySelector()")}}  ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.

+ +

{{domxref("Document.forms")}} renvoie un tableau des objets HTMLFormElement listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel :

+ +
+
document.forms[index]
+
renvoie le formulaire à l'index spécifié dans le tableau du formulaire.
+
document.forms[id]
+
renvoie le formulaire dont l'ID (identifiant) est id .
+
document.forms[name]
+
renvoie le formulaire dont la valeur d'attribut de {{domxref("Element.name", "name")}} est name.
+
+ +

Accès aux éléments du formulaire

+ +

Vous pouvez accéder à la liste des éléments contenant des données dans le formulaire en examinant la propriété {{domxref ("HTMLFormElement.elements", "elements")}}. Ceci retourne une {{domxref ("HTMLFormControlsCollection")}} listant tous les éléments d'entrée de données utilisateur du formulaire, aussi bien ceux qui sont des descendants du <form> que ceux déclarés membres du formulaire par leurs attributs.

+ +

Éléments considérés comme des contrôles de formulaire

+ +

Les éléments qui sont inclus par HTMLFormElement.elements et  HTMLFormElement.length sont :

+ + + +

Exemples

+ +

Crée un nouvel élément de formulaire, modifie ses attributs et l'envoie :

+ +
var f = document.createElement("form"); // On crée un formulaire
+document.body.appendChild(f);           // On l'ajoute au corps du document
+f.action = "/cgi-bin/some.cgi";         // On y ajoute des attributs action et method
+f.method = "POST"
+f.submit();                             // On appelle la méhtode submit pour l'envoyer
+
+ +

Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :

+ +
<form name="formA" action="/cgi-bin/test" method="post">
+ <p>Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails.</p>
+ <p>
+  <button type="button" onclick="getFormInfo();">Info</button>
+  <button type="button" onclick="setFormInfo(this.form);">Set</button>
+  <button type="reset">Reset</button>
+ </p>
+
+ <textarea id="form-info" rows="15" cols="20"></textarea>
+</form>
+
+<script>
+  function getFormInfo(){
+    // Obtenir une référence au formulaire par son nom
+    var f = document.forms["formA"];
+    // Les propriétés du formulaire qui nous intéressent
+    var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];
+    // Itérer sur les propriétés en les transformant en une chaîne que nous pouvons afficher à l'utilisateur
+    var info = properties.reduce(function(property) { return property + ": " + f[property] }, "").join("\n");
+
+    // Définir les <textarea> du formulaire pour en afficher les propriétés
+    document.forms["formA"].elements['form-info'].value = info;
+  }
+
+  function setFormInfo(f){ //L'argument doit être une référence d'élément de formulaire.
+    f.action = "a-different-url.cgi";
+    f.name   = "a-different-name";
+  }
+</script>
+ +

Envoi d'un formulaire dans une nouvelle fenêtre :

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Example new-window form submission</title>
+</head>
+<body>
+
+<form action="test.php" target="_blank">
+  <p><label>First name: <input type="text" name="firstname"></label></p>
+  <p><label>Last name: <input type="text" name="lastname"></label></p>
+  <p><label><input type="password" name="pwd"></label></p>
+
+  <fieldset>
+   <legend>Pet preference</legend>
+    <p><label><input type="radio" name="pet" value="cat"> Cat</label></p>
+    <p><label><input type="radio" name="pet" value="dog"> Dog</label></p>
+  </fieldset>
+
+  <fieldset>
+    <legend>Owned vehicles</legend>
+
+    <p><label><input type="checkbox" name="vehicle" value="Bike">I have a bike</label></p>
+    <p><label><input type="checkbox" name="vehicle" value="Car">I have a car</label></p>
+  </fieldset>
+
+  <p><button>Submit</button></p>
+</form>
+
+</body>
+</html>
+ +

Envoi de formulaires et téléchargement de fichiers en utilisant XMLHttpRequest

+ +

Vous pouvez consulter ce paragraphe si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML WHATWG')}}Ajout de la méthode requestAutocomplete().
{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML5 W3C')}}Les propriétés de l'élément renvoient un élément {{domxref("HTMLFormControlsCollection")}} plutôt qu'un {{domxref("HTMLCollection")}} (changement principalement technique). Ajout de la méthode checkValidity(). Ajout des propriétés autocomplete, noValidate et encoding.
{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM2 HTML')}}Aucune modification.
{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.HTMLFormElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlformelement/length/index.html b/files/fr/web/api/htmlformelement/length/index.html deleted file mode 100644 index 93fb19ff7c..0000000000 --- a/files/fr/web/api/htmlformelement/length/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: HTMLFormElement.length -slug: Web/API/HTMLFormElement/length -translation_of: Web/API/HTMLFormElement/length ---- -
-
{{APIRef("HTML DOM")}}
-
- -

La propriété en lecture seule HTMLFormElement.length retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}.

- -

Syntaxe

- -
integer = form.length
-
- -

Exemple

- -
if (document.getElementById("form1").length > 1) {
-  // more than one form control here
-}
-
- -

Spécifications

- - diff --git a/files/fr/web/api/htmlformelement/length/index.md b/files/fr/web/api/htmlformelement/length/index.md new file mode 100644 index 0000000000..93fb19ff7c --- /dev/null +++ b/files/fr/web/api/htmlformelement/length/index.md @@ -0,0 +1,29 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +translation_of: Web/API/HTMLFormElement/length +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

La propriété en lecture seule HTMLFormElement.length retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}.

+ +

Syntaxe

+ +
integer = form.length
+
+ +

Exemple

+ +
if (document.getElementById("form1").length > 1) {
+  // more than one form control here
+}
+
+ +

Spécifications

+ + diff --git a/files/fr/web/api/htmlformelement/method/index.html b/files/fr/web/api/htmlformelement/method/index.html deleted file mode 100644 index 2b6d2ab603..0000000000 --- a/files/fr/web/api/htmlformelement/method/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: HTMLFormElement.method -slug: Web/API/HTMLFormElement/method -translation_of: Web/API/HTMLFormElement/method ---- -
{{APIRef("HTML DOM")}}
- -

La propriété HTMLFormElement.method représente la méthode HTTP utilisée pour soumettre un formulaire.

- -

Syntaxe

- -
string = form.method
-form.method = string
-
- -

Exemple

- -
document.forms["myform"].method = "post";
-
- -

Spécification

- -

HTML 5, Section 4.10.19.6, Form submission

- -

DOM Level 2 HTML: method

diff --git a/files/fr/web/api/htmlformelement/method/index.md b/files/fr/web/api/htmlformelement/method/index.md new file mode 100644 index 0000000000..2b6d2ab603 --- /dev/null +++ b/files/fr/web/api/htmlformelement/method/index.md @@ -0,0 +1,25 @@ +--- +title: HTMLFormElement.method +slug: Web/API/HTMLFormElement/method +translation_of: Web/API/HTMLFormElement/method +--- +
{{APIRef("HTML DOM")}}
+ +

La propriété HTMLFormElement.method représente la méthode HTTP utilisée pour soumettre un formulaire.

+ +

Syntaxe

+ +
string = form.method
+form.method = string
+
+ +

Exemple

+ +
document.forms["myform"].method = "post";
+
+ +

Spécification

+ +

HTML 5, Section 4.10.19.6, Form submission

+ +

DOM Level 2 HTML: method

diff --git a/files/fr/web/api/htmlformelement/name/index.html b/files/fr/web/api/htmlformelement/name/index.html deleted file mode 100644 index 50fa4fe6b1..0000000000 --- a/files/fr/web/api/htmlformelement/name/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: HTMLFormElement.name -slug: Web/API/HTMLFormElement/name -translation_of: Web/API/HTMLFormElement/name ---- -
-
{{APIRef("HTML DOM")}}
-
- -

La propriété HTMLFormElement.name représente le nom de l'élément form sous la forme d'une chaîne de caratères.

- -

Si votre {{HTMLElement("Form")}} contient un élément appelé name, alors ce dernier redéfinit la propriété form.name, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec createElement() à partir de la propriété name.

- -

Syntaxe

- -
string = form.name
-form.name = string
- -

Exemple

- -
var form1name = document.getElementById("form1").name;
-
-if (form1name != document.form.form1) {
-   // browser doesn't support this form of reference
-}
- -

Spécification

- - diff --git a/files/fr/web/api/htmlformelement/name/index.md b/files/fr/web/api/htmlformelement/name/index.md new file mode 100644 index 0000000000..50fa4fe6b1 --- /dev/null +++ b/files/fr/web/api/htmlformelement/name/index.md @@ -0,0 +1,32 @@ +--- +title: HTMLFormElement.name +slug: Web/API/HTMLFormElement/name +translation_of: Web/API/HTMLFormElement/name +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

La propriété HTMLFormElement.name représente le nom de l'élément form sous la forme d'une chaîne de caratères.

+ +

Si votre {{HTMLElement("Form")}} contient un élément appelé name, alors ce dernier redéfinit la propriété form.name, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec createElement() à partir de la propriété name.

+ +

Syntaxe

+ +
string = form.name
+form.name = string
+ +

Exemple

+ +
var form1name = document.getElementById("form1").name;
+
+if (form1name != document.form.form1) {
+   // browser doesn't support this form of reference
+}
+ +

Spécification

+ + diff --git a/files/fr/web/api/htmlformelement/reportvalidity/index.html b/files/fr/web/api/htmlformelement/reportvalidity/index.html deleted file mode 100644 index c41fd7c61d..0000000000 --- a/files/fr/web/api/htmlformelement/reportvalidity/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: HTMLFormElement.reportValidity() -slug: Web/API/HTMLFormElement/reportValidity -tags: - - HTML - - Méthode -translation_of: Web/API/HTMLFormElement/reportValidity ---- -
{{APIRef("HTML DOM")}}
- -

La méthode  HTMLFormElement.reportValidity() renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur false est renvoyée, ,  les événements invalid annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. .

- -

Syntax

- -
HTMLFormElement.reportValidity()
-
- -

Valeur de retour

- -

{{domxref("Boolean")}}

- -

Exemple

- -
document.forms['myform'].addEventListener('invalid', function() {
-  // Optional response here
-}, false);
-
-document.forms['myform'].addEventListener('submit', function() {
-  document.forms['myform'].reportValidity();
-}, false);
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusCommentaire
{{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}}{{Spec2("HTML5.1")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLFormElement.reportValidity")}}

diff --git a/files/fr/web/api/htmlformelement/reportvalidity/index.md b/files/fr/web/api/htmlformelement/reportvalidity/index.md new file mode 100644 index 0000000000..c41fd7c61d --- /dev/null +++ b/files/fr/web/api/htmlformelement/reportvalidity/index.md @@ -0,0 +1,58 @@ +--- +title: HTMLFormElement.reportValidity() +slug: Web/API/HTMLFormElement/reportValidity +tags: + - HTML + - Méthode +translation_of: Web/API/HTMLFormElement/reportValidity +--- +
{{APIRef("HTML DOM")}}
+ +

La méthode  HTMLFormElement.reportValidity() renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur false est renvoyée, ,  les événements invalid annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. .

+ +

Syntax

+ +
HTMLFormElement.reportValidity()
+
+ +

Valeur de retour

+ +

{{domxref("Boolean")}}

+ +

Exemple

+ +
document.forms['myform'].addEventListener('invalid', function() {
+  // Optional response here
+}, false);
+
+document.forms['myform'].addEventListener('submit', function() {
+  document.forms['myform'].reportValidity();
+}, false);
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusCommentaire
{{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}}{{Spec2("HTML5.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLFormElement.reportValidity")}}

diff --git a/files/fr/web/api/htmlformelement/reset/index.html b/files/fr/web/api/htmlformelement/reset/index.html deleted file mode 100644 index 6d43514959..0000000000 --- a/files/fr/web/api/htmlformelement/reset/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: HTMLFormElement.reset() -slug: Web/API/HTMLFormElement/reset -tags: - - API - - HTML DOM - - HTMLFormElement - - Méthode - - Reference -translation_of: Web/API/HTMLFormElement/reset ---- -
{{APIRef("HTML DOM")}}
- -

La méthode HTMLFormElement.reset() restaure les valeurs par défaut des éléments du formulaire. Cette méthode fait la même chose que lorsqu'on clique sur un bouton de type reset.

- -

Si un élément du formulaire (comme un bouton reset par exemple) a un name ou id valant reset, celui-ci remplacera la méthode reset du formulaire. Les attributs des éléments, comme disabled, ne sont pas réinitialisés.

- -

Syntaxe

- -
HTMLFormElement.reset()
-
- -

Exemple

- -
document.getElementById("myform").reset();
-
- -

Spécification

diff --git a/files/fr/web/api/htmlformelement/reset/index.md b/files/fr/web/api/htmlformelement/reset/index.md new file mode 100644 index 0000000000..6d43514959 --- /dev/null +++ b/files/fr/web/api/htmlformelement/reset/index.md @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.reset() +slug: Web/API/HTMLFormElement/reset +tags: + - API + - HTML DOM + - HTMLFormElement + - Méthode + - Reference +translation_of: Web/API/HTMLFormElement/reset +--- +
{{APIRef("HTML DOM")}}
+ +

La méthode HTMLFormElement.reset() restaure les valeurs par défaut des éléments du formulaire. Cette méthode fait la même chose que lorsqu'on clique sur un bouton de type reset.

+ +

Si un élément du formulaire (comme un bouton reset par exemple) a un name ou id valant reset, celui-ci remplacera la méthode reset du formulaire. Les attributs des éléments, comme disabled, ne sont pas réinitialisés.

+ +

Syntaxe

+ +
HTMLFormElement.reset()
+
+ +

Exemple

+ +
document.getElementById("myform").reset();
+
+ +

Spécification

diff --git a/files/fr/web/api/htmlformelement/submit/index.html b/files/fr/web/api/htmlformelement/submit/index.html deleted file mode 100644 index 19479867d2..0000000000 --- a/files/fr/web/api/htmlformelement/submit/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: HTMLFormElement.submit() -slug: Web/API/HTMLFormElement/submit -tags: - - HTML DOM - - HTMLFormElement - - Méthode -translation_of: Web/API/HTMLFormElement/submit ---- -
{{APIRef("HTML DOM")}}
- -

La méthode  HTMLFormElement.submit()  soumet un {{HtmlElement("form")}} donné

- -

Cette méthode est similaire, mais pas identique, à l’activation du script submit {{HtmlElement ("button")}}. Lors de l'appel direct de cette méthode, cependant:

- - - -

Si un contrôle de formulaire (tel qu'un  submit bouton ) a unname ou un id de submit, cette méthode masquera la méthode d'envoi du formulaire.

- -

Syntax

- -
HTMLFormElement.submit()
-
- -

Exemple

- -
document.forms["myform"].submit();
-
- -

Specification

- -

HTML Living standard: The form element

- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLFormElement.submit")}}

diff --git a/files/fr/web/api/htmlformelement/submit/index.md b/files/fr/web/api/htmlformelement/submit/index.md new file mode 100644 index 0000000000..19479867d2 --- /dev/null +++ b/files/fr/web/api/htmlformelement/submit/index.md @@ -0,0 +1,40 @@ +--- +title: HTMLFormElement.submit() +slug: Web/API/HTMLFormElement/submit +tags: + - HTML DOM + - HTMLFormElement + - Méthode +translation_of: Web/API/HTMLFormElement/submit +--- +
{{APIRef("HTML DOM")}}
+ +

La méthode  HTMLFormElement.submit()  soumet un {{HtmlElement("form")}} donné

+ +

Cette méthode est similaire, mais pas identique, à l’activation du script submit {{HtmlElement ("button")}}. Lors de l'appel direct de cette méthode, cependant:

+ + + +

Si un contrôle de formulaire (tel qu'un  submit bouton ) a unname ou un id de submit, cette méthode masquera la méthode d'envoi du formulaire.

+ +

Syntax

+ +
HTMLFormElement.submit()
+
+ +

Exemple

+ +
document.forms["myform"].submit();
+
+ +

Specification

+ +

HTML Living standard: The form element

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLFormElement.submit")}}

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 2e6139eced..0000000000 --- a/files/fr/web/api/htmlformelement/submit_event/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: submit -slug: Web/API/HTMLFormElement/submit_event -translation_of: Web/API/HTMLFormElement/submit_event -original_slug: 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.md b/files/fr/web/api/htmlformelement/submit_event/index.md new file mode 100644 index 0000000000..2e6139eced --- /dev/null +++ b/files/fr/web/api/htmlformelement/submit_event/index.md @@ -0,0 +1,60 @@ +--- +title: submit +slug: Web/API/HTMLFormElement/submit_event +translation_of: Web/API/HTMLFormElement/submit_event +original_slug: 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/target/index.html b/files/fr/web/api/htmlformelement/target/index.html deleted file mode 100644 index 3d7a6002d0..0000000000 --- a/files/fr/web/api/htmlformelement/target/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: HTMLFormElement.target -slug: Web/API/HTMLFormElement/target -translation_of: Web/API/HTMLFormElement/target ---- -
{{APIRef("HTML DOM")}}
- -

La propriété HTMLFormElement.target représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat).

- -

Syntaxe

- -
string = form.target
-form.target = string
-
- -

Exemple

- -
myForm.target = document.frames[1].name;
-
- -

Spécification

- -

HTML 5, Section 4.10.19.6, Form submission

- -

DOM Level 2 HTML: target

diff --git a/files/fr/web/api/htmlformelement/target/index.md b/files/fr/web/api/htmlformelement/target/index.md new file mode 100644 index 0000000000..3d7a6002d0 --- /dev/null +++ b/files/fr/web/api/htmlformelement/target/index.md @@ -0,0 +1,25 @@ +--- +title: HTMLFormElement.target +slug: Web/API/HTMLFormElement/target +translation_of: Web/API/HTMLFormElement/target +--- +
{{APIRef("HTML DOM")}}
+ +

La propriété HTMLFormElement.target représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat).

+ +

Syntaxe

+ +
string = form.target
+form.target = string
+
+ +

Exemple

+ +
myForm.target = document.frames[1].name;
+
+ +

Spécification

+ +

HTML 5, Section 4.10.19.6, Form submission

+ +

DOM Level 2 HTML: target

diff --git a/files/fr/web/api/htmlframesetelement/index.html b/files/fr/web/api/htmlframesetelement/index.html deleted file mode 100644 index 6186ebcbf2..0000000000 --- a/files/fr/web/api/htmlframesetelement/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: HTMLFrameSetElement -slug: Web/API/HTMLFrameSetElement -tags: - - API - - HTML-DOM - - HTMLFrameSetElement - - Interface - - Obsolete - - Reference -translation_of: Web/API/HTMLFrameSetElement ---- -
{{APIRef("HTML DOM")}}{{Obsolete_header}}
- -

L'interface HTMLFrameSetElement fournit des propriétés spéciales (au-delà de celles de l'interface standard {{domxref("HTMLElement")}} dont elles héritent aussi) pour manipuler les éléments {{HTMLELEment("frameset")}}.

- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

- -
-
{{domxref("HTMLFrameSetElement.cols")}} {{obsolete_inline}}
-
Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la largeur de chaque colonne à l'intérieur d'un jeu de cadres.
-
{{domxref("HTMLFrameSetElement.rows")}} {{obsolete_inline}}
-
Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la hauteur de chaque colonne à l'intérieur d'un jeu de cadres.
-
- -

Méthodes

- -

Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

- -

Gestionnaires d'événements

- -

Aucun gestionnaire d'événements spécifique; hérite des gestionnairs d'événements de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

- -
-
{{domxref("WindowEventHandlers.onafterprint")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.
-
{{domxref("WindowEventHandlers.onbeforeprint")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.
-
{{domxref("WindowEventHandlers.onbeforeunload")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.
-
{{domxref("WindowEventHandlers.onhashchange")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.
-
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.
-
{{domxref("WindowEventHandlers.onmessage")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.
-
{{domxref("WindowEventHandlers.onoffline")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.
-
{{domxref("WindowEventHandlers.ononline")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.
-
{{domxref("WindowEventHandlers.onpagehide")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.
-
{{domxref("WindowEventHandlers.onpageshow")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.
-
{{domxref("WindowEventHandlers.onpopstate")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.
-
{{domxref("WindowEventHandlers.onresize")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.
-
{{domxref("WindowEventHandlers.onstorage")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.
-
{{domxref("WindowEventHandlers.onunload")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#htmlframesetelement", "HTMLFrameSetElement")}}{{Spec2('HTML WHATWG')}}À partir de l'instantané {{SpecName('HTML5 W3C')}}, l'interface {{domxref("WindowEventHandlers")}} a maintenant une propriété onlanguagechange.
{{SpecName('HTML5 W3C', "obsolete.html#htmlframesetelement", "HTMLFrameSetElement")}}{{Spec2('HTML5 W3C')}}Instantané d'un précédent {{SpecName('HTML WHATWG')}}
- Les cadres sont désormais obsolètes. Implémente {{domxref("WindowEventHandlers")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-ID-43829095', 'HTMLBodyElement')}}{{Spec2('DOM2 HTML')}}Aucun changement par rapport à {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-43829095', 'HTMLBodyElement')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLFrameSetElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlframesetelement/index.md b/files/fr/web/api/htmlframesetelement/index.md new file mode 100644 index 0000000000..6186ebcbf2 --- /dev/null +++ b/files/fr/web/api/htmlframesetelement/index.md @@ -0,0 +1,109 @@ +--- +title: HTMLFrameSetElement +slug: Web/API/HTMLFrameSetElement +tags: + - API + - HTML-DOM + - HTMLFrameSetElement + - Interface + - Obsolete + - Reference +translation_of: Web/API/HTMLFrameSetElement +--- +
{{APIRef("HTML DOM")}}{{Obsolete_header}}
+ +

L'interface HTMLFrameSetElement fournit des propriétés spéciales (au-delà de celles de l'interface standard {{domxref("HTMLElement")}} dont elles héritent aussi) pour manipuler les éléments {{HTMLELEment("frameset")}}.

+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("HTMLFrameSetElement.cols")}} {{obsolete_inline}}
+
Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la largeur de chaque colonne à l'intérieur d'un jeu de cadres.
+
{{domxref("HTMLFrameSetElement.rows")}} {{obsolete_inline}}
+
Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la hauteur de chaque colonne à l'intérieur d'un jeu de cadres.
+
+ +

Méthodes

+ +

Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

+ +

Gestionnaires d'événements

+ +

Aucun gestionnaire d'événements spécifique; hérite des gestionnairs d'événements de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.
+
{{domxref("WindowEventHandlers.onresize")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#htmlframesetelement", "HTMLFrameSetElement")}}{{Spec2('HTML WHATWG')}}À partir de l'instantané {{SpecName('HTML5 W3C')}}, l'interface {{domxref("WindowEventHandlers")}} a maintenant une propriété onlanguagechange.
{{SpecName('HTML5 W3C', "obsolete.html#htmlframesetelement", "HTMLFrameSetElement")}}{{Spec2('HTML5 W3C')}}Instantané d'un précédent {{SpecName('HTML WHATWG')}}
+ Les cadres sont désormais obsolètes. Implémente {{domxref("WindowEventHandlers")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-ID-43829095', 'HTMLBodyElement')}}{{Spec2('DOM2 HTML')}}Aucun changement par rapport à {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-43829095', 'HTMLBodyElement')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLFrameSetElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmliframeelement/allowpaymentrequest/index.html b/files/fr/web/api/htmliframeelement/allowpaymentrequest/index.html deleted file mode 100644 index 996b69b362..0000000000 --- a/files/fr/web/api/htmliframeelement/allowpaymentrequest/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: HTMLIFrameElement.allowPaymentRequest -slug: Web/API/HTMLIFrameElement/allowPaymentRequest -browser-compat: api.HTMLIFrameElement.allowPaymentRequest -translation_of: 'HTMLIFrameElement.allowPaymentRequest' ---- -

{{APIRef("HTML DOM")}}{{deprecated_header}}{{non-standard_header}}

- -

La propriété allowPaymentRequest de l'interface {{domxref("HTMLIFrameElement")}} retourne une valeur booléenne indiquant si la Payment Request API peut être invoquée sur une iframe utilisant une origine tierce.

- -

Syntaxe

- -
var allow = htmlIFrameElement.allowPaymentRequest
- -

Valeur

- -

Une valeur booléenne.

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmliframeelement/allowpaymentrequest/index.md b/files/fr/web/api/htmliframeelement/allowpaymentrequest/index.md new file mode 100644 index 0000000000..996b69b362 --- /dev/null +++ b/files/fr/web/api/htmliframeelement/allowpaymentrequest/index.md @@ -0,0 +1,27 @@ +--- +title: HTMLIFrameElement.allowPaymentRequest +slug: Web/API/HTMLIFrameElement/allowPaymentRequest +browser-compat: api.HTMLIFrameElement.allowPaymentRequest +translation_of: 'HTMLIFrameElement.allowPaymentRequest' +--- +

{{APIRef("HTML DOM")}}{{deprecated_header}}{{non-standard_header}}

+ +

La propriété allowPaymentRequest de l'interface {{domxref("HTMLIFrameElement")}} retourne une valeur booléenne indiquant si la Payment Request API peut être invoquée sur une iframe utilisant une origine tierce.

+ +

Syntaxe

+ +
var allow = htmlIFrameElement.allowPaymentRequest
+ +

Valeur

+ +

Une valeur booléenne.

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmliframeelement/contentdocument/index.html b/files/fr/web/api/htmliframeelement/contentdocument/index.html deleted file mode 100644 index 5580e0abc8..0000000000 --- a/files/fr/web/api/htmliframeelement/contentdocument/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: HTMLIFrameElement.contentDocument -slug: Web/API/HTMLIFrameElement/contentDocument -browser-compat: api.HTMLIFrameElement.contentDocument -translation_of: 'HTMLIFrameElement.contentDocument' ---- -

Si l'iframe et le document parent de l'iframe sont de la même origine, HTMLIFrameElement.contentDocument retourne un Document (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne null.

- -

Exemples

- -
var iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;
-
-iframeDocument.body.style.backgroundColor = "blue";
-// Cela passe la couleur d'arrière-plan de l'iframe en bleu.
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/htmliframeelement/contentdocument/index.md b/files/fr/web/api/htmliframeelement/contentdocument/index.md new file mode 100644 index 0000000000..5580e0abc8 --- /dev/null +++ b/files/fr/web/api/htmliframeelement/contentdocument/index.md @@ -0,0 +1,22 @@ +--- +title: HTMLIFrameElement.contentDocument +slug: Web/API/HTMLIFrameElement/contentDocument +browser-compat: api.HTMLIFrameElement.contentDocument +translation_of: 'HTMLIFrameElement.contentDocument' +--- +

Si l'iframe et le document parent de l'iframe sont de la même origine, HTMLIFrameElement.contentDocument retourne un Document (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne null.

+ +

Exemples

+ +
var iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;
+
+iframeDocument.body.style.backgroundColor = "blue";
+// Cela passe la couleur d'arrière-plan de l'iframe en bleu.
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/htmliframeelement/contentwindow/index.html b/files/fr/web/api/htmliframeelement/contentwindow/index.html deleted file mode 100644 index 2dd8193ca3..0000000000 --- a/files/fr/web/api/htmliframeelement/contentwindow/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: HTMLIFrameElement.contentWindow -slug: Web/API/HTMLIFrameElement/contentWindow -tags: - - API - - DOM - - Propriété - - Web -translation_of: Web/API/HTMLIFrameElement/contentWindow ---- -
{{APIRef("HTML DOM")}}
- -

La propriété contentWindow renvoie l'objet Window d'un élément {{HTMLElement("iframe")}}. Cet objet Window peut être utilisé pour accéder au document de l'iframe et à son DOM. Cet attribut est en lecture seule mais ses propriétés peuvent être manipulées comme pour l'objet global Window.

- -

Exemples

- -
var x = document.getElementsByTagName("iframe")[0].contentWindow;
-//x = window.frames[0];
-
-x.document.getElementsByTagName("body")[0].style.backgroundColor = "blue";
-// ceci devrait changer le 1er iframe dans le document bleu.
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#dom-iframe-contentwindow', 'HTMLIFrameElement: contentWindow')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLIFrameElement.contentWindow")}}

diff --git a/files/fr/web/api/htmliframeelement/contentwindow/index.md b/files/fr/web/api/htmliframeelement/contentwindow/index.md new file mode 100644 index 0000000000..2dd8193ca3 --- /dev/null +++ b/files/fr/web/api/htmliframeelement/contentwindow/index.md @@ -0,0 +1,46 @@ +--- +title: HTMLIFrameElement.contentWindow +slug: Web/API/HTMLIFrameElement/contentWindow +tags: + - API + - DOM + - Propriété + - Web +translation_of: Web/API/HTMLIFrameElement/contentWindow +--- +
{{APIRef("HTML DOM")}}
+ +

La propriété contentWindow renvoie l'objet Window d'un élément {{HTMLElement("iframe")}}. Cet objet Window peut être utilisé pour accéder au document de l'iframe et à son DOM. Cet attribut est en lecture seule mais ses propriétés peuvent être manipulées comme pour l'objet global Window.

+ +

Exemples

+ +
var x = document.getElementsByTagName("iframe")[0].contentWindow;
+//x = window.frames[0];
+
+x.document.getElementsByTagName("body")[0].style.backgroundColor = "blue";
+// ceci devrait changer le 1er iframe dans le document bleu.
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#dom-iframe-contentwindow', 'HTMLIFrameElement: contentWindow')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.HTMLIFrameElement.contentWindow")}}

diff --git a/files/fr/web/api/htmliframeelement/csp/index.html b/files/fr/web/api/htmliframeelement/csp/index.html deleted file mode 100644 index b07bf82f45..0000000000 --- a/files/fr/web/api/htmliframeelement/csp/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: HTMLIFrameElement.csp -slug: Web/API/HTMLIFrameElement/csp -browser-compat: api.HTMLIFrameElement.csp -translation_of: 'HTMLIFrameElement.csp' ---- -

{{SeeCompatTable}}{{APIRef("HTML DOM")}}

- -

La propriété csp de l'interface {{domxref("HTMLIFrameElement")}} spécifie la stratégie de sécurité du contenu (en anglais Content Security Policy (CSP)) qu'un document embarqué doit accepter de respecter.

- -

Syntaxe

- -
var csp = HTMLIFrameElement.csp
-HTMLIFrameElement.csp = csp
- -

Valeur

- -

Une stratégie de sécurité du contenu.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/htmliframeelement/csp/index.md b/files/fr/web/api/htmliframeelement/csp/index.md new file mode 100644 index 0000000000..b07bf82f45 --- /dev/null +++ b/files/fr/web/api/htmliframeelement/csp/index.md @@ -0,0 +1,26 @@ +--- +title: HTMLIFrameElement.csp +slug: Web/API/HTMLIFrameElement/csp +browser-compat: api.HTMLIFrameElement.csp +translation_of: 'HTMLIFrameElement.csp' +--- +

{{SeeCompatTable}}{{APIRef("HTML DOM")}}

+ +

La propriété csp de l'interface {{domxref("HTMLIFrameElement")}} spécifie la stratégie de sécurité du contenu (en anglais Content Security Policy (CSP)) qu'un document embarqué doit accepter de respecter.

+ +

Syntaxe

+ +
var csp = HTMLIFrameElement.csp
+HTMLIFrameElement.csp = csp
+ +

Valeur

+ +

Une stratégie de sécurité du contenu.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/htmliframeelement/featurepolicy/index.html b/files/fr/web/api/htmliframeelement/featurepolicy/index.html deleted file mode 100644 index 54bcd1037e..0000000000 --- a/files/fr/web/api/htmliframeelement/featurepolicy/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: HTMLIFrameElement.featurePolicy -slug: Web/API/HTMLIFrameElement/featurePolicy -tags: - - API - - Feature Policy - - Feature-Policy - - HTMLIFrameElement - - Policy - - Property -translation_of: Web/API/HTMLIFrameElement/featurePolicy ---- -
{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
- -

La propriété en lecture seule featurePolicy de l'interface {{DOMxRef("HTMLIFrameElement")}} retourne l'interface {{DOMxRef("FeaturePolicy")}}, qui fournit une API simple pour consulter facilement les règles de fonctionnalités appliquées à un élément <iframe> spécifique.

- -

Syntaxe

- -
var policy = HTMLIFrameElement.featurePolicy
- -

Valeur

- -

Un objet FeaturePolicy pouvant être utilisé pour consulter les paramètres Feature Policy appliqués au cadre.

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName("Feature Policy")}}{{Spec2("Feature Policy")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLIFrameElement.featurePolicy")}}

diff --git a/files/fr/web/api/htmliframeelement/featurepolicy/index.md b/files/fr/web/api/htmliframeelement/featurepolicy/index.md new file mode 100644 index 0000000000..54bcd1037e --- /dev/null +++ b/files/fr/web/api/htmliframeelement/featurepolicy/index.md @@ -0,0 +1,46 @@ +--- +title: HTMLIFrameElement.featurePolicy +slug: Web/API/HTMLIFrameElement/featurePolicy +tags: + - API + - Feature Policy + - Feature-Policy + - HTMLIFrameElement + - Policy + - Property +translation_of: Web/API/HTMLIFrameElement/featurePolicy +--- +
{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule featurePolicy de l'interface {{DOMxRef("HTMLIFrameElement")}} retourne l'interface {{DOMxRef("FeaturePolicy")}}, qui fournit une API simple pour consulter facilement les règles de fonctionnalités appliquées à un élément <iframe> spécifique.

+ +

Syntaxe

+ +
var policy = HTMLIFrameElement.featurePolicy
+ +

Valeur

+ +

Un objet FeaturePolicy pouvant être utilisé pour consulter les paramètres Feature Policy appliqués au cadre.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName("Feature Policy")}}{{Spec2("Feature Policy")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.HTMLIFrameElement.featurePolicy")}}

diff --git a/files/fr/web/api/htmliframeelement/index.html b/files/fr/web/api/htmliframeelement/index.html deleted file mode 100644 index c1e182c024..0000000000 --- a/files/fr/web/api/htmliframeelement/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: HTMLIFrameElement -slug: Web/API/HTMLIFrameElement -tags: - - API - - HTML DOM - - Interface - - Reference -translation_of: Web/API/HTMLIFrameElement ---- -
{{APIRef("HTML DOM")}}
- -

L'interface HTMLIFrameElement fournit des propriétés et des méthodes spéciales (en plus de celles de l'interface {{domxref("HTMLElement")}} auxquelles elle peut accéder par héritage) pour manipuler la disposition et la présentation des éléments "en-ligne" d'un cadre.

- -

{{InheritanceDiagram(600,120)}}

- -

Propriétés

- -

Propriétés héritées de son parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}
-
Est une caîne de caractères {{domxref("DOMString")}} qui spécifie l'alignement du cadre par rapport au contexte environnant.
-
{{domxref("HTMLIFrameElement.allow")}} {{experimental_inline}}
-
Est une liste d'origines à partir desquelles le cadre est autorisé à afficher du contenu. Cet attribut accepte également les valeurs self et src qui représentent l'origine dans l'attribut src de l'iframe. La valeur par défaut est src.
-
{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}
-
Est un {{domxref("Boolean")}} indiquant si le cadre en ligne est prêt à être placé en mode plein écran. Voir Utiliser le mode plein écran pour plus de détails.
-
{{domxref("HTMLIFrameElement.allowPaymentRequest")}}
-
Est un {{domxref("Boolean")}} indiquant si l'API' Payment Request API peut être appelée à l'intérieur d'une iframe cross-origin.
-
{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}
-
Retourne un {{domxref("Document")}}, le document actif dans le contexte de navigation imbriqué du cadre en ligne.
-
{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}
-
Renvoie un {{domxref("WindowProxy")}}, la fenêtre proxy pour le contexte de navigation imbriqué.
-
{{domxref("HTMLIFrameElement.csp")}}
-
Spécifie la politique de sécurité du contenu qu'un document incorporé doit accepter d'appliquer à lui-même.
-
{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}
-
Est une chaîne de caractères {{domxref("DOMString")}} qui indique s'il faut créer des bordures entre les cadres.
-
{{domxref("HTMLIFrameElement.height")}}
-
Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("height", "iframe")}} indiquant la hauteur du cadre.
-
{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}
-
Est une chaîne de caractères {{domxref("DOMString")}} qui contient l'URI d'une description longue du cadre.
-
{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}
-
Est une chaîne de caractères {{domxref("DOMString")}} représentant la hauteur de la marge du cadre.
-
{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}
-
Est une chaîne de caractères {{domxref("DOMString")}} représentant la largeur de la marge du cadre.
-
{{domxref("HTMLIFrameElement.name")}}
-
Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("name", "iframe")}} contenant un nom permettant de faire référence au cadre.
-
{{domxref("HTMLIFrameElement.featurePolicy")}} {{readonlyinline}}{{experimental_inline}}
-
Retourne l'interface {{domxref("FeaturePolicy")}} qui fournit une API simple pour l'introspection des politiques de fonctionnalité appliquées à un document spécifique.
-
{{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}
-
Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("referrerPolicy", "iframe")}} attribut HTML indiquant le référent à utiliser lors de l'extraction de la ressource liée.
-
{{domxref("HTMLIFrameElement.sandbox")}}
-
Est un {{domxref("DOMSettableTokenList")}} qui reflète l'attribut {{htmlattrxref("sandbox", "iframe")}} indiquant des restrictions supplémentaires sur le comportement du contenu imbriqué.
-
{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}
-
Est une chaîne de caractères {{domxref("DOMString")}} qui indique si le navigateur doit fournir des barres de défilement pour le cadre.
-
{{domxref("HTMLIFrameElement.src")}}
-
Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src", "iframe")}} contenant l'adresse du contenu à intégrer. Notez que la suppression programmatique de l'attribut src d'un <iframe> (par exemple via {{domxref("Element.removeAttribute()")}}) entraîne le chargement de about:blank dans le cadre dans Firefox (à partir de la version 65), les navigateurs basés sur Chromium et Safari/iOS.
-
{{domxref("HTMLIFrameElement.srcdoc")}}
-
Est une chaîne de caractères {{domxref("DOMString")}} qui représente le contenu à afficher dans le cadre.
-
{{domxref("HTMLIFrameElement.width")}}
-
Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("width", "iframe")}} indiquant la largeur du cadre.
-
- -

Méthodes

- -

Aucune méthode spécifique ; hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#htmliframeelement", "HTMLIFrameElement")}}{{Spec2('HTML WHATWG')}}La propriété suivante a été ajoutée : allowFullscreen.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML5 W3C')}}Les propriétés suivantes sont désormais obsolètes : scrolling, marginWidth, marginHeight, longDesc, frameBorder et align.
Les propriétés suivantes ont été ajoutées : srcdoc, sandbox, et contentWindow.
{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM2 HTML')}}La propriété contentDocument a été ajoutée.
{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLIFrameElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmliframeelement/index.md b/files/fr/web/api/htmliframeelement/index.md new file mode 100644 index 0000000000..c1e182c024 --- /dev/null +++ b/files/fr/web/api/htmliframeelement/index.md @@ -0,0 +1,110 @@ +--- +title: HTMLIFrameElement +slug: Web/API/HTMLIFrameElement +tags: + - API + - HTML DOM + - Interface + - Reference +translation_of: Web/API/HTMLIFrameElement +--- +
{{APIRef("HTML DOM")}}
+ +

L'interface HTMLIFrameElement fournit des propriétés et des méthodes spéciales (en plus de celles de l'interface {{domxref("HTMLElement")}} auxquelles elle peut accéder par héritage) pour manipuler la disposition et la présentation des éléments "en-ligne" d'un cadre.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Propriétés

+ +

Propriétés héritées de son parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}
+
Est une caîne de caractères {{domxref("DOMString")}} qui spécifie l'alignement du cadre par rapport au contexte environnant.
+
{{domxref("HTMLIFrameElement.allow")}} {{experimental_inline}}
+
Est une liste d'origines à partir desquelles le cadre est autorisé à afficher du contenu. Cet attribut accepte également les valeurs self et src qui représentent l'origine dans l'attribut src de l'iframe. La valeur par défaut est src.
+
{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}
+
Est un {{domxref("Boolean")}} indiquant si le cadre en ligne est prêt à être placé en mode plein écran. Voir Utiliser le mode plein écran pour plus de détails.
+
{{domxref("HTMLIFrameElement.allowPaymentRequest")}}
+
Est un {{domxref("Boolean")}} indiquant si l'API' Payment Request API peut être appelée à l'intérieur d'une iframe cross-origin.
+
{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}
+
Retourne un {{domxref("Document")}}, le document actif dans le contexte de navigation imbriqué du cadre en ligne.
+
{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}
+
Renvoie un {{domxref("WindowProxy")}}, la fenêtre proxy pour le contexte de navigation imbriqué.
+
{{domxref("HTMLIFrameElement.csp")}}
+
Spécifie la politique de sécurité du contenu qu'un document incorporé doit accepter d'appliquer à lui-même.
+
{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}
+
Est une chaîne de caractères {{domxref("DOMString")}} qui indique s'il faut créer des bordures entre les cadres.
+
{{domxref("HTMLIFrameElement.height")}}
+
Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("height", "iframe")}} indiquant la hauteur du cadre.
+
{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}
+
Est une chaîne de caractères {{domxref("DOMString")}} qui contient l'URI d'une description longue du cadre.
+
{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}
+
Est une chaîne de caractères {{domxref("DOMString")}} représentant la hauteur de la marge du cadre.
+
{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}
+
Est une chaîne de caractères {{domxref("DOMString")}} représentant la largeur de la marge du cadre.
+
{{domxref("HTMLIFrameElement.name")}}
+
Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("name", "iframe")}} contenant un nom permettant de faire référence au cadre.
+
{{domxref("HTMLIFrameElement.featurePolicy")}} {{readonlyinline}}{{experimental_inline}}
+
Retourne l'interface {{domxref("FeaturePolicy")}} qui fournit une API simple pour l'introspection des politiques de fonctionnalité appliquées à un document spécifique.
+
{{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}
+
Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("referrerPolicy", "iframe")}} attribut HTML indiquant le référent à utiliser lors de l'extraction de la ressource liée.
+
{{domxref("HTMLIFrameElement.sandbox")}}
+
Est un {{domxref("DOMSettableTokenList")}} qui reflète l'attribut {{htmlattrxref("sandbox", "iframe")}} indiquant des restrictions supplémentaires sur le comportement du contenu imbriqué.
+
{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}
+
Est une chaîne de caractères {{domxref("DOMString")}} qui indique si le navigateur doit fournir des barres de défilement pour le cadre.
+
{{domxref("HTMLIFrameElement.src")}}
+
Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src", "iframe")}} contenant l'adresse du contenu à intégrer. Notez que la suppression programmatique de l'attribut src d'un <iframe> (par exemple via {{domxref("Element.removeAttribute()")}}) entraîne le chargement de about:blank dans le cadre dans Firefox (à partir de la version 65), les navigateurs basés sur Chromium et Safari/iOS.
+
{{domxref("HTMLIFrameElement.srcdoc")}}
+
Est une chaîne de caractères {{domxref("DOMString")}} qui représente le contenu à afficher dans le cadre.
+
{{domxref("HTMLIFrameElement.width")}}
+
Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("width", "iframe")}} indiquant la largeur du cadre.
+
+ +

Méthodes

+ +

Aucune méthode spécifique ; hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#htmliframeelement", "HTMLIFrameElement")}}{{Spec2('HTML WHATWG')}}La propriété suivante a été ajoutée : allowFullscreen.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML5 W3C')}}Les propriétés suivantes sont désormais obsolètes : scrolling, marginWidth, marginHeight, longDesc, frameBorder et align.
Les propriétés suivantes ont été ajoutées : srcdoc, sandbox, et contentWindow.
{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM2 HTML')}}La propriété contentDocument a été ajoutée.
{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLIFrameElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlimageelement/image/index.html b/files/fr/web/api/htmlimageelement/image/index.html deleted file mode 100644 index 669d6095b2..0000000000 --- a/files/fr/web/api/htmlimageelement/image/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Image() -slug: Web/API/HTMLImageElement/Image -tags: - - API - - Constructeur - - DOM -translation_of: Web/API/HTMLImageElement/Image ---- -
{{ APIRef("HTML DOM") }}
- -

Le constructeur Image() crée une nouvelle instance {{domxref("HTMLImageElement")}} .

- -

C'est fonctionnellement équivalent à {{domxref("Document.createElement()", "document.createElement('img')")}}.

- -

Syntaxe

- -
Image(width, height)
- -

Paramètres

- -
-
width
-
La largeur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("width", "img")}})
-
height
-
La hauteur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("height", "img")}}).
-
- -

Exemples

- -
var myImage = new Image(100, 200);
-myImage.src = 'picture.jpg';
-console.log(myImage);
- -
Cela équivaudrait à définir la balise HTML suivante dans le {{htmlelement("body")}} (corps) :
- -
<img width="100" height="200" src="picture.jpg">
-
- -
-

Note : Le "bitmap" entier est chargé quelle que soit la taille spécifiée dans le constructeur. Si une taille est spécifiée dans le constructeur, elle sera reflétée dans les propriétés {{domxref("HTMLImageElement.width")}} et {{domxref("HTMLImageElement.height")}} de l'instance résultante. La largeur intrinsèque et la hauteur de l'image en pixels CSS sont reflétées à travers les propriétés {{domxref("HTMLImageElement.naturalWidth")}} et {{domxref("HTMLImageElement.naturalHeight")}}. Si aucune taille n'est spécifiée dans le constructeur, les deux paires de ces propriétés auront les mêmes valeurs.

-
- -

Spécifications

- - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}{{spec2("HTML WHATWG")}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLImageElement.Image")}}

diff --git a/files/fr/web/api/htmlimageelement/image/index.md b/files/fr/web/api/htmlimageelement/image/index.md new file mode 100644 index 0000000000..669d6095b2 --- /dev/null +++ b/files/fr/web/api/htmlimageelement/image/index.md @@ -0,0 +1,62 @@ +--- +title: Image() +slug: Web/API/HTMLImageElement/Image +tags: + - API + - Constructeur + - DOM +translation_of: Web/API/HTMLImageElement/Image +--- +
{{ APIRef("HTML DOM") }}
+ +

Le constructeur Image() crée une nouvelle instance {{domxref("HTMLImageElement")}} .

+ +

C'est fonctionnellement équivalent à {{domxref("Document.createElement()", "document.createElement('img')")}}.

+ +

Syntaxe

+ +
Image(width, height)
+ +

Paramètres

+ +
+
width
+
La largeur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("width", "img")}})
+
height
+
La hauteur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("height", "img")}}).
+
+ +

Exemples

+ +
var myImage = new Image(100, 200);
+myImage.src = 'picture.jpg';
+console.log(myImage);
+ +
Cela équivaudrait à définir la balise HTML suivante dans le {{htmlelement("body")}} (corps) :
+ +
<img width="100" height="200" src="picture.jpg">
+
+ +
+

Note : Le "bitmap" entier est chargé quelle que soit la taille spécifiée dans le constructeur. Si une taille est spécifiée dans le constructeur, elle sera reflétée dans les propriétés {{domxref("HTMLImageElement.width")}} et {{domxref("HTMLImageElement.height")}} de l'instance résultante. La largeur intrinsèque et la hauteur de l'image en pixels CSS sont reflétées à travers les propriétés {{domxref("HTMLImageElement.naturalWidth")}} et {{domxref("HTMLImageElement.naturalHeight")}}. Si aucune taille n'est spécifiée dans le constructeur, les deux paires de ces propriétés auront les mêmes valeurs.

+
+ +

Spécifications

+ + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}{{spec2("HTML WHATWG")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLImageElement.Image")}}

diff --git a/files/fr/web/api/htmlimageelement/index.html b/files/fr/web/api/htmlimageelement/index.html deleted file mode 100644 index cc2ab84054..0000000000 --- a/files/fr/web/api/htmlimageelement/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: HTMLImageElement -slug: Web/API/HTMLImageElement -translation_of: Web/API/HTMLImageElement ---- -

{{APIRef("HTML DOM")}}

- -

L'interface  HTMLImageElement fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} .

- -

Propriétés

- -

Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}

- -
-
{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont "left"(gauche), "right"(droite), "justify"(justifié), et "center"(centré) .
-
{{domxref("HTMLImageElement.alt")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image.
-
{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) qui est responsable de la largeur de la bordure entourant l'image. Il est maintenant déprécié et la propriété CSS {{cssxref("border")}} est utilisée à la place.
-
{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}
-
Retourne un {{domxref("Boolean")}} (booléen) qui est true (vrai) si le navigateur a fini de chercher l'image, que ce soit avec succès ou non. Il affiche aussi "true" si l'image n'a pas de valeur {{domxref("HTMLImageElement.src", "src")}} .
-
{{domxref("HTMLImageElement.crossOrigin")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) représentant le paramètre CORS défini pour cet élément image. Voir Attributs de règlage du CORS pour plus de détails.
-
{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}
-
Retourne une {{domxref("DOMString")}} (chaîne de caractères) représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia).
-
{{domxref("HTMLImageElement.height")}}
-
Est un unsigned long (non signé long) qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS.
-
{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}
-
Est un long représentant l'espace de chaque côté de l'image.
-
{{domxref("HTMLImageElement.isMap")}}
-
Est un {{domxref("Boolean")}} (booléen) qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur.
-
{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) représentant l'URL d'une longue description de l'image.
-
{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}
-
Est une {{domxref("DOMString")}}  (chaîne de caractères) qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.
-
{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) représentant le nom de l'élément.
-
{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}
-
Retourne un unsigned long  représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché.
-
{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}}  indiquant la référence à utiliser pour récupérer l'image.
-
{{domxref("HTMLImageElement.src")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) qui reflète l'attribut HTML  {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base.
-
{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} (taille).
-
{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un 'w'  avec la largeur de l'image ou d'un 'x'  avec la densité en pixels.
-
{{domxref("HTMLImageElement.useMap")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" (carte).
-
{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}
-
Est un long représentant l'espace au-dessus et en-dessous de l'image.
-
{{domxref("HTMLImageElement.width")}}
-
Est un unsigned long qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS.
-
{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}
-
Retourne un long  représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.
-
{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}
-
Retourne un long représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.
-
- -

Méthodes

- -

Hérite les propriétés de son parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLImageElement.Image()", "Image()")}}
-
Le constructeur d'image, comprend deux propriétés unsigned  et long , qui sont la largeur et la hauteur de la ressource, et crée une instance de HTMLImageElement , non insérée dans une arborescence DOM.
-
- -

Erreurs

- -

Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris :

- - - -

Exemple

- -
var img1 = new Image(); //  Constructeur HTML5
-img1.src = 'image1.png';
-img1.alt = 'alt';
-document.body.appendChild(img1);
-
-var img2 = document.createElement('img'); // utilise DOM HTMLImageElement
-img2.src = 'image2.jpg';
-img2.alt = 'alt text';
-document.body.appendChild(img2);
-
-// en utilisant la première image dans le document
-alert(document.images[0].src);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Ajoute la propriété referrerPolicy .
{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}{{Spec2('CSSOM View')}}Ajoute les propriétés x ety .
{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML WHATWG')}}Les propriétés suivantes sont ajoutées : srcset, currentSrc et sizes.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML5 W3C')}}Un constructeur (avec 2 paramètres facultatifs) est ajouté.
- Les propriétés suivantes sont maintenant obsolètes : name, border, align, hspace, vspace, et longdesc.
- Les propriétés suivantes sont maintenant unsigned et long, iau lieu de long: height et width.
- Les propriétés suivantes ont été ajoutées : crossorigin, naturalWidth, naturalHeight et complete.
{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM2 HTML')}}La propriété lowSrc a été supprimée.
- La propriété est maintenant long, au lieu des DOMString: height, width, hspace et vspace.
{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM1')}}définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLImageElement")}}

- -

Voir aussi

- -

L'élément HTML implémentant cette interface : {{HTMLElement("img")}}

diff --git a/files/fr/web/api/htmlimageelement/index.md b/files/fr/web/api/htmlimageelement/index.md new file mode 100644 index 0000000000..cc2ab84054 --- /dev/null +++ b/files/fr/web/api/htmlimageelement/index.md @@ -0,0 +1,149 @@ +--- +title: HTMLImageElement +slug: Web/API/HTMLImageElement +translation_of: Web/API/HTMLImageElement +--- +

{{APIRef("HTML DOM")}}

+ +

L'interface  HTMLImageElement fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} .

+ +

Propriétés

+ +

Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}

+ +
+
{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont "left"(gauche), "right"(droite), "justify"(justifié), et "center"(centré) .
+
{{domxref("HTMLImageElement.alt")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image.
+
{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) qui est responsable de la largeur de la bordure entourant l'image. Il est maintenant déprécié et la propriété CSS {{cssxref("border")}} est utilisée à la place.
+
{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}
+
Retourne un {{domxref("Boolean")}} (booléen) qui est true (vrai) si le navigateur a fini de chercher l'image, que ce soit avec succès ou non. Il affiche aussi "true" si l'image n'a pas de valeur {{domxref("HTMLImageElement.src", "src")}} .
+
{{domxref("HTMLImageElement.crossOrigin")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) représentant le paramètre CORS défini pour cet élément image. Voir Attributs de règlage du CORS pour plus de détails.
+
{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}
+
Retourne une {{domxref("DOMString")}} (chaîne de caractères) représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia).
+
{{domxref("HTMLImageElement.height")}}
+
Est un unsigned long (non signé long) qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS.
+
{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}
+
Est un long représentant l'espace de chaque côté de l'image.
+
{{domxref("HTMLImageElement.isMap")}}
+
Est un {{domxref("Boolean")}} (booléen) qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur.
+
{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) représentant l'URL d'une longue description de l'image.
+
{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}
+
Est une {{domxref("DOMString")}}  (chaîne de caractères) qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.
+
{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) représentant le nom de l'élément.
+
{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}
+
Retourne un unsigned long  représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché.
+
{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}}  indiquant la référence à utiliser pour récupérer l'image.
+
{{domxref("HTMLImageElement.src")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) qui reflète l'attribut HTML  {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base.
+
{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} (taille).
+
{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un 'w'  avec la largeur de l'image ou d'un 'x'  avec la densité en pixels.
+
{{domxref("HTMLImageElement.useMap")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" (carte).
+
{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}
+
Est un long représentant l'espace au-dessus et en-dessous de l'image.
+
{{domxref("HTMLImageElement.width")}}
+
Est un unsigned long qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS.
+
{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}
+
Retourne un long  représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.
+
{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}
+
Retourne un long représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.
+
+ +

Méthodes

+ +

Hérite les propriétés de son parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLImageElement.Image()", "Image()")}}
+
Le constructeur d'image, comprend deux propriétés unsigned  et long , qui sont la largeur et la hauteur de la ressource, et crée une instance de HTMLImageElement , non insérée dans une arborescence DOM.
+
+ +

Erreurs

+ +

Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris :

+ + + +

Exemple

+ +
var img1 = new Image(); //  Constructeur HTML5
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // utilise DOM HTMLImageElement
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// en utilisant la première image dans le document
+alert(document.images[0].src);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Ajoute la propriété referrerPolicy .
{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}{{Spec2('CSSOM View')}}Ajoute les propriétés x ety .
{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML WHATWG')}}Les propriétés suivantes sont ajoutées : srcset, currentSrc et sizes.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML5 W3C')}}Un constructeur (avec 2 paramètres facultatifs) est ajouté.
+ Les propriétés suivantes sont maintenant obsolètes : name, border, align, hspace, vspace, et longdesc.
+ Les propriétés suivantes sont maintenant unsigned et long, iau lieu de long: height et width.
+ Les propriétés suivantes ont été ajoutées : crossorigin, naturalWidth, naturalHeight et complete.
{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM2 HTML')}}La propriété lowSrc a été supprimée.
+ La propriété est maintenant long, au lieu des DOMString: height, width, hspace et vspace.
{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM1')}}définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLImageElement")}}

+ +

Voir aussi

+ +

L'élément HTML implémentant cette interface : {{HTMLElement("img")}}

diff --git a/files/fr/web/api/htmlinputelement/index.html b/files/fr/web/api/htmlinputelement/index.html deleted file mode 100644 index 05a9d8bdd6..0000000000 --- a/files/fr/web/api/htmlinputelement/index.html +++ /dev/null @@ -1,426 +0,0 @@ ---- -title: HTMLInputElement -slug: Web/API/HTMLInputElement -tags: - - API - - HTML DOM - - Interface - - NeedsNewLayout - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLInputElement ---- -
{{ APIRef("HTML DOM") }}
- -

The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.

- -

{{InheritanceDiagram(600, 120)}}

- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties related to the parent form
form {{readonlyInline}}{{domxref("HTMLFormElement")}} object: Returns a reference to the parent {{HtmlElement("form")}} element.
formActionstring: Returns / Sets the element's {{ htmlattrxref("formaction", "input") }} attribute, containing the URI of a program that processes information submitted by the element. This overrides the {{ htmlattrxref("action", "form") }} attribute of the parent form.
formEncTypestring: Returns / Sets the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.
formMethodstring: Returns / Sets the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.
formNoValidate{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.
formTargetstring: Returns / Sets the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties that apply to any type of input element that is not hidden
namestring: Returns / Sets the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.
typestring: Returns / Sets the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.
disabled{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }}
autofocus{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
required{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.
valuestring: Returns / Sets the current value of the control. -

Note : If the user enters a value different from the value expected, this may return an empty string.

-
validity {{readonlyInline}}{{domxref("ValidityState")}} object: Returns the element's current validity state.
validationMessage {{readonlyInline}}string: Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. This value can be set by the setCustomValidity method.
willValidate {{readonlyInline}}{{jsxref("Boolean")}}: Returns whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a datalist ancestor; its disabled property is true.
- - - - - - - - - - - - - - - - - -
Properties that apply only to elements of type "checkbox" or "radio"
checked{{jsxref("Boolean")}}: Returns / Sets the current state of the element when {{htmlattrxref("type","input")}} is checkbox or radio.
defaultChecked{{jsxref("Boolean")}}: Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.
indeterminate{{jsxref("Boolean")}}: Returns whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the checked attribute, and clicking the checkbox will set the value to false.
- - - - - - - - - - - - - - - - - - - - - -
Properties that apply only to elements of type "image"
altstring: Returns / Sets the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is image.
heightstring: Returns / Sets the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
srcstring: Returns / Sets the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is image; otherwise it is ignored.
widthstring: Returns / Sets the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
- - - - - - - - - - - - - - - - - - - - - - - - - -
Properties that apply only to elements of type "file"
acceptstring: Returns / Sets the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is file.
allowdirs {{non-standard_inline}}{{jsxref("Boolean")}}: Part of the non-standard Directory Upload API; indicates whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.
filesReturns/accepts a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.
{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}{{jsxref("Boolean")}}: Returns the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.
{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}Array of {{domxref("FileSystemEntry")}} objects: Describes the currently selected files or directories.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties that apply only to text/number-containing or elements
autocompletestring: Returns / Sets the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). Possible values are:
- "on": the browser can autocomplete the value using previously stored value
- "off": the user must explicity enter a value
maxstring: Returns / Sets the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ({{htmlattrxref("min","input")}} attribute) value.
maxLengthlong: Returns / Sets the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the maximum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
minstring: Returns / Sets the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.
minLengthlong: Returns / Sets the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the minimum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
patternstring: Returns / Sets the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a regular expression that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
placeholderstring: Returns / Sets the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
readOnlyboolean: Returns / Sets the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.
- {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, range, color, checkbox, radio, file, or a button type.
selectionStartunsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.
selectionEndunsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
selectionDirectionstring: Returns / Sets the direction in which selection occurred. Possible values are:
- forward if selection was performed in the start-to-end direction of the current locale
- backward for the opposite direction
- none if the direction is unknown
sizeunsigned long: Returns / Sets the element's {{ htmlattrxref("size", "input") }} attribute, containing visual size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is text or password, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to text, search, tel, url, email, or password; otherwise it is ignored.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Properties not yet categorized
defaultValuestring: Returns / Sets the default value as originally specified in the HTML that created this object.
dirNamestring: Returns / Sets the directionality of the element.
accessKeystring: Returns a string containing a single character that switches input focus to the control when pressed.
list {{readonlyInline}}{{domxref("HTMLElement")}} object: Returns the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be null if no HTML element found in the same tree.
multiple{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).
files{{domxref("FileList")}} array: Returns the list of selected files.
{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}{{domxref("NodeList")}} array: Returns a list of {{ HTMLElement("label") }} elements that are labels for this element.
stepstring: Returns / Sets the element's {{ htmlattrxref("step", "input") }} attribute, which works with {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
valueAsDate{{jsxref("Date")}} object: Returns / Sets the value of the element, interpreted as a date, or null if conversion is not possible.
valueAsNumberdouble: Returns the value of the element, interpreted as one of the following, in order: -
    -
  • A time value
    • -
  • A number
    • -
  • NaN if conversion is impossible
    • -
-
autocapitalize {{experimental_inline}}string: Defines the capitalization behavior for user input. Valid values are none, off, characters, words, or sentences.
inputmodeProvides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
- -
-
{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}
-
string: Represents the alignment of the element. Use CSS instead.
-
{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}
-
string: Represents a client-side image map.
-
- -

Methods

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{domxref("HTMLElement.blur()", "blur()")}}Removes focus from the input element; keystrokes will subsequently go nowhere.
{{domxref("HTMLElement.click()", "click()")}}Simulates a click on the input element.
{{domxref("HTMLElement.focus()", "focus()")}}Focuses on the input element; keystrokes will subsequently go to this element.
{{domxref("HTMLInputElement.select()", "select()")}}Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}Selects a range of text in the input element (but does not focus it).
{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}Replaces a range of text in the input element with new text.
setCustomValidity()Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
checkValidity()Returns a {{jsxref("Boolean")}} that is false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.
reportValidity()Runs the checkValidity() method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.
- -
-
{{domxref("HTMLInputElement.stepDown()")}}
-
Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: -
    -
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,
    • -
  • if the element has no {{htmlattrxref("step","input")}} value,
    • -
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • -
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • -
-
-
{{domxref("HTMLInputElement.stepUp()")}}
-
Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: -
    -
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,
    • -
  • if the element has no {{htmlattrxref("step","input")}} value,
    • -
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • -
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • -
-
-
{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}
-
Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to mozSetFileNameArray() which can be used in frame scripts: a chrome script can open files as File objects and send them via message manager.
-
{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}
-
Returns an array of all the file names from the input.
-
{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}
-
Sets the filenames for the files selected on the input. Not for use in frame scripts, because it accesses the file system.
-
- -

Events

- -

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface:

- -
-
input
-
Fires when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to contenteditable elements, but we've listed it here because it is most commonly used with form input elements.
- Also available via the oninput event handler property.
-
invalid
-
Fired when an element does not satisfy its constraints during constraint validation.
- Also available via the oninvalid event handler property.
-
search
-
Fired when a search is initiated on an {{HTMLElement("input")}} of type="search".
- Also available via the onsearch event handler property.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML5 W3C')}}Technically, the tabindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on {{domxref("HTMLElement")}}.
- The following properties are now obsolete: align and useMap.
- The following properties have been added: autocomplete, autofocus, dirName, files, formAction, formEncType, formMethod, formNoValidate, formTarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectionDirection, selectionEnd, selectionStart, step, validationMessage, validity, valueAsDate, valueAsNumber, width, and willValidate.
- The following methods have been added: checkValidity(), setCustomValidity(), setSelectionRange(), stepUp(), and stepDown().
{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM2 HTML')}}The size property is now an unsigned long. The type property must be entirely given in lowercase characters.
{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM1')}}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("api.HTMLInputElement")}}

-
- -

See also

- - diff --git a/files/fr/web/api/htmlinputelement/index.md b/files/fr/web/api/htmlinputelement/index.md new file mode 100644 index 0000000000..05a9d8bdd6 --- /dev/null +++ b/files/fr/web/api/htmlinputelement/index.md @@ -0,0 +1,426 @@ +--- +title: HTMLInputElement +slug: Web/API/HTMLInputElement +tags: + - API + - HTML DOM + - Interface + - NeedsNewLayout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLInputElement +--- +
{{ APIRef("HTML DOM") }}
+ +

The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties related to the parent form
form {{readonlyInline}}{{domxref("HTMLFormElement")}} object: Returns a reference to the parent {{HtmlElement("form")}} element.
formActionstring: Returns / Sets the element's {{ htmlattrxref("formaction", "input") }} attribute, containing the URI of a program that processes information submitted by the element. This overrides the {{ htmlattrxref("action", "form") }} attribute of the parent form.
formEncTypestring: Returns / Sets the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.
formMethodstring: Returns / Sets the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.
formNoValidate{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.
formTargetstring: Returns / Sets the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply to any type of input element that is not hidden
namestring: Returns / Sets the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.
typestring: Returns / Sets the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.
disabled{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }}
autofocus{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
required{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.
valuestring: Returns / Sets the current value of the control. +

Note : If the user enters a value different from the value expected, this may return an empty string.

+
validity {{readonlyInline}}{{domxref("ValidityState")}} object: Returns the element's current validity state.
validationMessage {{readonlyInline}}string: Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. This value can be set by the setCustomValidity method.
willValidate {{readonlyInline}}{{jsxref("Boolean")}}: Returns whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a datalist ancestor; its disabled property is true.
+ + + + + + + + + + + + + + + + + +
Properties that apply only to elements of type "checkbox" or "radio"
checked{{jsxref("Boolean")}}: Returns / Sets the current state of the element when {{htmlattrxref("type","input")}} is checkbox or radio.
defaultChecked{{jsxref("Boolean")}}: Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.
indeterminate{{jsxref("Boolean")}}: Returns whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the checked attribute, and clicking the checkbox will set the value to false.
+ + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to elements of type "image"
altstring: Returns / Sets the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is image.
heightstring: Returns / Sets the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
srcstring: Returns / Sets the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is image; otherwise it is ignored.
widthstring: Returns / Sets the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to elements of type "file"
acceptstring: Returns / Sets the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is file.
allowdirs {{non-standard_inline}}{{jsxref("Boolean")}}: Part of the non-standard Directory Upload API; indicates whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.
filesReturns/accepts a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.
{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}{{jsxref("Boolean")}}: Returns the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.
{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}Array of {{domxref("FileSystemEntry")}} objects: Describes the currently selected files or directories.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to text/number-containing or elements
autocompletestring: Returns / Sets the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). Possible values are:
+ "on": the browser can autocomplete the value using previously stored value
+ "off": the user must explicity enter a value
maxstring: Returns / Sets the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ({{htmlattrxref("min","input")}} attribute) value.
maxLengthlong: Returns / Sets the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the maximum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
minstring: Returns / Sets the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.
minLengthlong: Returns / Sets the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the minimum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
patternstring: Returns / Sets the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a regular expression that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
placeholderstring: Returns / Sets the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
readOnlyboolean: Returns / Sets the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.
+ {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, range, color, checkbox, radio, file, or a button type.
selectionStartunsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.
selectionEndunsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
selectionDirectionstring: Returns / Sets the direction in which selection occurred. Possible values are:
+ forward if selection was performed in the start-to-end direction of the current locale
+ backward for the opposite direction
+ none if the direction is unknown
sizeunsigned long: Returns / Sets the element's {{ htmlattrxref("size", "input") }} attribute, containing visual size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is text or password, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to text, search, tel, url, email, or password; otherwise it is ignored.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties not yet categorized
defaultValuestring: Returns / Sets the default value as originally specified in the HTML that created this object.
dirNamestring: Returns / Sets the directionality of the element.
accessKeystring: Returns a string containing a single character that switches input focus to the control when pressed.
list {{readonlyInline}}{{domxref("HTMLElement")}} object: Returns the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be null if no HTML element found in the same tree.
multiple{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).
files{{domxref("FileList")}} array: Returns the list of selected files.
{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}{{domxref("NodeList")}} array: Returns a list of {{ HTMLElement("label") }} elements that are labels for this element.
stepstring: Returns / Sets the element's {{ htmlattrxref("step", "input") }} attribute, which works with {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
valueAsDate{{jsxref("Date")}} object: Returns / Sets the value of the element, interpreted as a date, or null if conversion is not possible.
valueAsNumberdouble: Returns the value of the element, interpreted as one of the following, in order: +
    +
  • A time value
    • +
  • A number
    • +
  • NaN if conversion is impossible
    • +
+
autocapitalize {{experimental_inline}}string: Defines the capitalization behavior for user input. Valid values are none, off, characters, words, or sentences.
inputmodeProvides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
+ +
+
{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}
+
string: Represents the alignment of the element. Use CSS instead.
+
{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}
+
string: Represents a client-side image map.
+
+ +

Methods

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{domxref("HTMLElement.blur()", "blur()")}}Removes focus from the input element; keystrokes will subsequently go nowhere.
{{domxref("HTMLElement.click()", "click()")}}Simulates a click on the input element.
{{domxref("HTMLElement.focus()", "focus()")}}Focuses on the input element; keystrokes will subsequently go to this element.
{{domxref("HTMLInputElement.select()", "select()")}}Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}Selects a range of text in the input element (but does not focus it).
{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}Replaces a range of text in the input element with new text.
setCustomValidity()Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
checkValidity()Returns a {{jsxref("Boolean")}} that is false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.
reportValidity()Runs the checkValidity() method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.
+ +
+
{{domxref("HTMLInputElement.stepDown()")}}
+
Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,
    • +
  • if the element has no {{htmlattrxref("step","input")}} value,
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • +
+
+
{{domxref("HTMLInputElement.stepUp()")}}
+
Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,
    • +
  • if the element has no {{htmlattrxref("step","input")}} value,
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • +
+
+
{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}
+
Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to mozSetFileNameArray() which can be used in frame scripts: a chrome script can open files as File objects and send them via message manager.
+
{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}
+
Returns an array of all the file names from the input.
+
{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}
+
Sets the filenames for the files selected on the input. Not for use in frame scripts, because it accesses the file system.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface:

+ +
+
input
+
Fires when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to contenteditable elements, but we've listed it here because it is most commonly used with form input elements.
+ Also available via the oninput event handler property.
+
invalid
+
Fired when an element does not satisfy its constraints during constraint validation.
+ Also available via the oninvalid event handler property.
+
search
+
Fired when a search is initiated on an {{HTMLElement("input")}} of type="search".
+ Also available via the onsearch event handler property.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML5 W3C')}}Technically, the tabindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on {{domxref("HTMLElement")}}.
+ The following properties are now obsolete: align and useMap.
+ The following properties have been added: autocomplete, autofocus, dirName, files, formAction, formEncType, formMethod, formNoValidate, formTarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectionDirection, selectionEnd, selectionStart, step, validationMessage, validity, valueAsDate, valueAsNumber, width, and willValidate.
+ The following methods have been added: checkValidity(), setCustomValidity(), setSelectionRange(), stepUp(), and stepDown().
{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM2 HTML')}}The size property is now an unsigned long. The type property must be entirely given in lowercase characters.
{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.HTMLInputElement")}}

+
+ +

See also

+ + diff --git a/files/fr/web/api/htmlinputelement/labels/index.html b/files/fr/web/api/htmlinputelement/labels/index.html deleted file mode 100644 index f6efa64dce..0000000000 --- a/files/fr/web/api/htmlinputelement/labels/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: HTMLInputElement.labels -slug: Web/API/HTMLInputElement/labels -tags: - - API - - DOM - - Propriété - - Étiquettes -translation_of: Web/API/HTMLInputElement/labels ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule HTMLInputElement.labels renvoie une {{domxref("NodeList")}} (liste de noeuds) des éléments {{HTMLElement("label")}} (étiquette) associés avec l'élément {{HTMLElement("input")}} (entrée).

- -

Syntaxe

- -
var labelElements = input.labels;
-
- -

Valeur retournée

- -

Une {{domxref("NodeList")}} contenant les éléments <label> associés avec l'élément <input>.

- -

Exemple

- -

HTML

- -
<label id="label1" for="test">Label 1</label>
-<input id="test"/>
-<label id="label2" for="test">Label 2</label>
-
- -

JavaScript

- -
window.addEventListener("DOMContentLoaded", function() {
-  const input = document.getElementById("test");
-  for(var i = 0; i < input.labels.length; i++) {
-    console.log(input.labels[i].textContent); // "Label 1" et "Label 2"
-  }
-});
- -

{{EmbedLiveSample("Exemple", "100%", 30)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}{{Spec2("HTML WHATWG")}}Pas de changement.
{{SpecName("HTML5 W3C", "forms.html#dom-lfe-labels", "labels")}}{{Spec2("HTML5 W3C")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLInputElement.labels")}}

diff --git a/files/fr/web/api/htmlinputelement/labels/index.md b/files/fr/web/api/htmlinputelement/labels/index.md new file mode 100644 index 0000000000..f6efa64dce --- /dev/null +++ b/files/fr/web/api/htmlinputelement/labels/index.md @@ -0,0 +1,70 @@ +--- +title: HTMLInputElement.labels +slug: Web/API/HTMLInputElement/labels +tags: + - API + - DOM + - Propriété + - Étiquettes +translation_of: Web/API/HTMLInputElement/labels +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule HTMLInputElement.labels renvoie une {{domxref("NodeList")}} (liste de noeuds) des éléments {{HTMLElement("label")}} (étiquette) associés avec l'élément {{HTMLElement("input")}} (entrée).

+ +

Syntaxe

+ +
var labelElements = input.labels;
+
+ +

Valeur retournée

+ +

Une {{domxref("NodeList")}} contenant les éléments <label> associés avec l'élément <input>.

+ +

Exemple

+ +

HTML

+ +
<label id="label1" for="test">Label 1</label>
+<input id="test"/>
+<label id="label2" for="test">Label 2</label>
+
+ +

JavaScript

+ +
window.addEventListener("DOMContentLoaded", function() {
+  const input = document.getElementById("test");
+  for(var i = 0; i < input.labels.length; i++) {
+    console.log(input.labels[i].textContent); // "Label 1" et "Label 2"
+  }
+});
+ +

{{EmbedLiveSample("Exemple", "100%", 30)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}{{Spec2("HTML WHATWG")}}Pas de changement.
{{SpecName("HTML5 W3C", "forms.html#dom-lfe-labels", "labels")}}{{Spec2("HTML5 W3C")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLInputElement.labels")}}

diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.html b/files/fr/web/api/htmlmediaelement/abort_event/index.html deleted file mode 100644 index 2708b7193f..0000000000 --- a/files/fr/web/api/htmlmediaelement/abort_event/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: 'HTMLMediaElement: abort event' -slug: Web/API/HTMLMediaElement/abort_event -tags: - - API - - Event - - HTMLMediaElement - - Reference - - Web - - abort -translation_of: Web/API/HTMLMediaElement/abort_event ---- -
{{APIRef}}
- -

L'événement abort se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur.

- - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("Event")}}
Event handler property{{domxref("GlobalEventHandlers/onabort", "onabort")}}
- -

Exemples

- -
const video = document.querySelector('video');
-const videoSrc = 'https://path/to/video.webm';
-
-video.addEventListener('abort', () => {
-  console.log(`Abort loading: ${videoSrc}`);
-});
-
-const source = document.createElement('source');
-source.setAttribute('src', videoSrc);
-source.setAttribute('type', 'video/webm');
-
-video.appendChild(source);
- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpecificationStatus
{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité navigateurs

- - - -

{{Compat("api.HTMLMediaElement.abort_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.md b/files/fr/web/api/htmlmediaelement/abort_event/index.md new file mode 100644 index 0000000000..2708b7193f --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/abort_event/index.md @@ -0,0 +1,87 @@ +--- +title: 'HTMLMediaElement: abort event' +slug: Web/API/HTMLMediaElement/abort_event +tags: + - API + - Event + - HTMLMediaElement + - Reference + - Web + - abort +translation_of: Web/API/HTMLMediaElement/abort_event +--- +
{{APIRef}}
+ +

L'événement abort se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur.

+ + + + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{domxref("Event")}}
Event handler property{{domxref("GlobalEventHandlers/onabort", "onabort")}}
+ +

Exemples

+ +
const video = document.querySelector('video');
+const videoSrc = 'https://path/to/video.webm';
+
+video.addEventListener('abort', () => {
+  console.log(`Abort loading: ${videoSrc}`);
+});
+
+const source = document.createElement('source');
+source.setAttribute('src', videoSrc);
+source.setAttribute('type', 'video/webm');
+
+video.appendChild(source);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité navigateurs

+ + + +

{{Compat("api.HTMLMediaElement.abort_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.html b/files/fr/web/api/htmlmediaelement/canplay_event/index.html deleted file mode 100644 index 8c55a0b0ef..0000000000 --- a/files/fr/web/api/htmlmediaelement/canplay_event/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 'HTMLMediaElement: canplay' -slug: Web/API/HTMLMediaElement/canplay_event -translation_of: Web/API/HTMLMediaElement/canplay_event ---- -

L'événement canplay est déclenché lorsque l'agent utilisateur peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer).

- -

Informations Générales

- -
-
Spécification
-
HTML5 media
-
Interface
-
Event
-
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.
- -

Evénements liés

- - diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.md b/files/fr/web/api/htmlmediaelement/canplay_event/index.md new file mode 100644 index 0000000000..8c55a0b0ef --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/canplay_event/index.md @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: canplay' +slug: Web/API/HTMLMediaElement/canplay_event +translation_of: Web/API/HTMLMediaElement/canplay_event +--- +

L'événement canplay est déclenché lorsque l'agent utilisateur peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer).

+ +

Informations Générales

+ +
+
Spécification
+
HTML5 media
+
Interface
+
Event
+
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.
+ +

Evénements liés

+ + diff --git a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html deleted file mode 100644 index 4d19f00190..0000000000 --- a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 'HTMLMediaElement: canplaythrough' -slug: Web/API/HTMLMediaElement/canplaythrough_event -translation_of: Web/API/HTMLMediaElement/canplaythrough_event ---- -

L'événement canplaythrough est déclenché lorsque le user agent peut jouer le média et estime que suffisament de données ont été chargées pour le lire jusqu'au bout. (Sans s'arrêter afin de charger plus contenu en mémoire)

- -

Informations générales

- -
-
Spécification
-
HTML5 media
-
Interface
-
Event
-
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.
- -

Evénements liés

- - diff --git a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.md b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.md new file mode 100644 index 0000000000..4d19f00190 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.md @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: canplaythrough' +slug: Web/API/HTMLMediaElement/canplaythrough_event +translation_of: Web/API/HTMLMediaElement/canplaythrough_event +--- +

L'événement canplaythrough est déclenché lorsque le user agent peut jouer le média et estime que suffisament de données ont été chargées pour le lire jusqu'au bout. (Sans s'arrêter afin de charger plus contenu en mémoire)

+ +

Informations générales

+ +
+
Spécification
+
HTML5 media
+
Interface
+
Event
+
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.
+ +

Evénements liés

+ + diff --git a/files/fr/web/api/htmlmediaelement/capturestream/index.html b/files/fr/web/api/htmlmediaelement/capturestream/index.html deleted file mode 100644 index 75a73c45f9..0000000000 --- a/files/fr/web/api/htmlmediaelement/capturestream/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: HTMLMediaElement.captureStream() -slug: Web/API/HTMLMediaElement/captureStream -tags: - - API - - Audio - - HTML DOM - - HTMLMediaElement - - Media - - Media Capture DOM Elements - - Method - - Reference - - Video - - captureStream -translation_of: Web/API/HTMLMediaElement/captureStream ---- -
{{APIRef("HTML Media Capture")}}
- -

captureStream() est une méthode de l'interface {{domxref("HTMLMediaElement")}} retournant un objet {{domxref('MediaStream')}} qui diffuse en temps réel l'enregistrement d'un contenu obtenu dans un élément média.

- -

Syntax

- -
var mediaStream = mediaElement.captureStream()
- -

Paramètres

- -

Aucun.

- -

Retours

- -

Un objet {{domxref('MediaStream')}} pouvant être utilisé en tant que source pour des données audio et/ou vidéo par d'autres média traitant du code, ou comme source pour WebRTC.

- -

Exemple

- -

Dans cet exemple, un écouteur d'événement est mise en place, permettant la capture du contenu d'un élément média avec l'ID "playback" dans un {{domxref("MediaStream")}} lors d'un clic sur un bouton de lancement. La flux peut être utilisée dans d'autres buts—comme une source de diffusion via WebRTC, vous permettant de partager des vidéos pré-enregistrées avec une autre personne lors d'un appel video.

- -
document.querySelector('.playAndRecord').addEventListener('click', function() {
-  var playbackElement = document.getElementById("playback");
-  var captureStream = playbackElement.captureStream();
-  playbackElement.play();
-});
-
- -

Voir Recording a media element pour des exemples et explications plus détaillées et complexes.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Media Capture DOM Elements','#widl-HTMLMediaElement-captureStream-MediaStream','captureStream()')}}{{Spec2('Media Capture DOM Elements')}}Déclaration initiale.
- -

Compatibilités

- -
- - -

{{Compat("api.HTMLMediaElement.captureStream")}}

- -

Firefox-notes spécifiques

-
- -

Avant Firefox 51, vous ne pouviez pas utiliser captureStream() sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de  51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails.

- -

Cependant, captureStream() reste préfixé mozCaptureStream() sur Firefox pour une bonne raison: il y a quelques etrangetés dans l'implémentation actuelle qui mérite d'être soulignées :

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/htmlmediaelement/capturestream/index.md b/files/fr/web/api/htmlmediaelement/capturestream/index.md new file mode 100644 index 0000000000..75a73c45f9 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/capturestream/index.md @@ -0,0 +1,94 @@ +--- +title: HTMLMediaElement.captureStream() +slug: Web/API/HTMLMediaElement/captureStream +tags: + - API + - Audio + - HTML DOM + - HTMLMediaElement + - Media + - Media Capture DOM Elements + - Method + - Reference + - Video + - captureStream +translation_of: Web/API/HTMLMediaElement/captureStream +--- +
{{APIRef("HTML Media Capture")}}
+ +

captureStream() est une méthode de l'interface {{domxref("HTMLMediaElement")}} retournant un objet {{domxref('MediaStream')}} qui diffuse en temps réel l'enregistrement d'un contenu obtenu dans un élément média.

+ +

Syntax

+ +
var mediaStream = mediaElement.captureStream()
+ +

Paramètres

+ +

Aucun.

+ +

Retours

+ +

Un objet {{domxref('MediaStream')}} pouvant être utilisé en tant que source pour des données audio et/ou vidéo par d'autres média traitant du code, ou comme source pour WebRTC.

+ +

Exemple

+ +

Dans cet exemple, un écouteur d'événement est mise en place, permettant la capture du contenu d'un élément média avec l'ID "playback" dans un {{domxref("MediaStream")}} lors d'un clic sur un bouton de lancement. La flux peut être utilisée dans d'autres buts—comme une source de diffusion via WebRTC, vous permettant de partager des vidéos pré-enregistrées avec une autre personne lors d'un appel video.

+ +
document.querySelector('.playAndRecord').addEventListener('click', function() {
+  var playbackElement = document.getElementById("playback");
+  var captureStream = playbackElement.captureStream();
+  playbackElement.play();
+});
+
+ +

Voir Recording a media element pour des exemples et explications plus détaillées et complexes.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('Media Capture DOM Elements','#widl-HTMLMediaElement-captureStream-MediaStream','captureStream()')}}{{Spec2('Media Capture DOM Elements')}}Déclaration initiale.
+ +

Compatibilités

+ +
+ + +

{{Compat("api.HTMLMediaElement.captureStream")}}

+ +

Firefox-notes spécifiques

+
+ +

Avant Firefox 51, vous ne pouviez pas utiliser captureStream() sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de  51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails.

+ +

Cependant, captureStream() reste préfixé mozCaptureStream() sur Firefox pour une bonne raison: il y a quelques etrangetés dans l'implémentation actuelle qui mérite d'être soulignées :

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlmediaelement/durationchange_event/index.html b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html deleted file mode 100644 index b49118ca25..0000000000 --- a/files/fr/web/api/htmlmediaelement/durationchange_event/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 'HTMLMediaElement: durationchange' -slug: Web/API/HTMLMediaElement/durationchange_event -translation_of: Web/API/HTMLMediaElement/durationchange_event ---- -

L'évènement durationchange est déclenché quand l'attribut de durée est mis à jour.

- -

Informations générales

- -
-
Spécification
-
HTML5 media
-
Interface
-
{{domxref("Event")}}
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
Default Action
-
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/htmlmediaelement/durationchange_event/index.md b/files/fr/web/api/htmlmediaelement/durationchange_event/index.md new file mode 100644 index 0000000000..b49118ca25 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/durationchange_event/index.md @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: durationchange' +slug: Web/API/HTMLMediaElement/durationchange_event +translation_of: Web/API/HTMLMediaElement/durationchange_event +--- +

L'évènement durationchange est déclenché quand l'attribut de durée est mis à jour.

+ +

Informations générales

+ +
+
Spécification
+
HTML5 media
+
Interface
+
{{domxref("Event")}}
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
{{domxref("Element")}}
+
Default Action
+
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/htmlmediaelement/emptied_event/index.html b/files/fr/web/api/htmlmediaelement/emptied_event/index.html deleted file mode 100644 index 34243d5fcd..0000000000 --- a/files/fr/web/api/htmlmediaelement/emptied_event/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 'HTMLMediaElement: emptied' -slug: Web/API/HTMLMediaElement/emptied_event -translation_of: Web/API/HTMLMediaElement/emptied_event ---- -

L'événement emptied est déclenché lorsqu'un média est devenu vide. Par exemple, cet événement est envoyé si le média a déjà été chargé (complètement ou partiellement), et que la méthode load() est appelé pour le recharger.

- -

Informations générales

- -
-
Spécification
-
HTML5 media
-
Interface
-
{{domxref("Event")}}
-
propagation
-
Non
-
Annulable
-
Non
-
Cible
-
{{domxref("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.
- -

Evénements liés

- - diff --git a/files/fr/web/api/htmlmediaelement/emptied_event/index.md b/files/fr/web/api/htmlmediaelement/emptied_event/index.md new file mode 100644 index 0000000000..34243d5fcd --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/emptied_event/index.md @@ -0,0 +1,80 @@ +--- +title: 'HTMLMediaElement: emptied' +slug: Web/API/HTMLMediaElement/emptied_event +translation_of: Web/API/HTMLMediaElement/emptied_event +--- +

L'événement emptied est déclenché lorsqu'un média est devenu vide. Par exemple, cet événement est envoyé si le média a déjà été chargé (complètement ou partiellement), et que la méthode load() est appelé pour le recharger.

+ +

Informations générales

+ +
+
Spécification
+
HTML5 media
+
Interface
+
{{domxref("Event")}}
+
propagation
+
Non
+
Annulable
+
Non
+
Cible
+
{{domxref("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.
+ +

Evénements liés

+ + diff --git a/files/fr/web/api/htmlmediaelement/ended_event/index.html b/files/fr/web/api/htmlmediaelement/ended_event/index.html deleted file mode 100644 index db59f0187f..0000000000 --- a/files/fr/web/api/htmlmediaelement/ended_event/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 'HTMLMediaElement: ended' -slug: Web/API/HTMLMediaElement/ended_event -translation_of: Web/API/HTMLMediaElement/ended_event ---- -

L'événement ended est déclenché lorsque la lecture ou le streaming s'est arrêté parce que la fin du média a été atteinte ou qu'aucune donnée n'est disponible.

- -

L'événement se produit dans deux contextes liés mais unique:

- - - -

Informations générales

- -
-
Spécification
-
HTML5 media et Media Capture and Streams
-
Interface
-
{{domxref("Event")}}
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
Action par défaut
-
Aucune
-
- -
-

Note : Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une. Si à un moment donné, cela change, la documentation sera révisée.

-
- -

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/htmlmediaelement/ended_event/index.md b/files/fr/web/api/htmlmediaelement/ended_event/index.md new file mode 100644 index 0000000000..db59f0187f --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/ended_event/index.md @@ -0,0 +1,98 @@ +--- +title: 'HTMLMediaElement: ended' +slug: Web/API/HTMLMediaElement/ended_event +translation_of: Web/API/HTMLMediaElement/ended_event +--- +

L'événement ended est déclenché lorsque la lecture ou le streaming s'est arrêté parce que la fin du média a été atteinte ou qu'aucune donnée n'est disponible.

+ +

L'événement se produit dans deux contextes liés mais unique:

+ + + +

Informations générales

+ +
+
Spécification
+
HTML5 media et Media Capture and Streams
+
Interface
+
{{domxref("Event")}}
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
{{domxref("Element")}}
+
Action par défaut
+
Aucune
+
+ +
+

Note : Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une. Si à un moment donné, cela change, la documentation sera révisée.

+
+ +

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/htmlmediaelement/index.html b/files/fr/web/api/htmlmediaelement/index.html deleted file mode 100644 index 86941892db..0000000000 --- a/files/fr/web/api/htmlmediaelement/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: HTMLMediaElement -slug: Web/API/HTMLMediaElement -tags: - - API - - Audio - - DOM - - Interface - - Media - - Video -translation_of: Web/API/HTMLMediaElement ---- -

{{APIRef("HTML DOM")}}

- -

L'interface HTMLMediaElement ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface.

- -

Propriétés

- -

Cette interface hérite aussi des propriétés de ses ancêtres {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}} et {{domxref("EventTarget")}}.

- -
-
{{domxref("HTMLMediaElement.audioTracks")}}
-
est une {{domxref("AudioTrackList")}} qui liste les objets {{domxref("AudioTrack")}} (pistes audio) contenus dans l'élément.
-
{{domxref("HTMLMediaElement.autoplay")}}
-

est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{htmlattrxref("autoplay","video")}}, indiquant si la lecture doit commencer automatiquement dès que suffisamment de médias sont disponibles pour le faire sans interruption.

-
-

Note : Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.

-
-
-
{{domxref("HTMLMediaElement.buffered")}}{{readonlyinline}}
-
Renvoie un objet {{domxref("TimeRanges")}} qui indique les plages de la source du média que le navigateur a en mémoire tampon (le cas échéant) au moment de l'accès à la propriété buffered.
-
{{domxref("HTMLMediaElement.controller")}}
-
est un objet {{domxref("MediaController")}} qui représente le contrôleur du média assigné à l'élément, ou null si aucun n'est défini.
-
{{domxref("HTMLMediaElement.controls")}}
-
est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("controls","video")}}, indiquant quels éléments de contrôle de ressource de l'interface utilisateur doivent être affichés.
-
{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}
-
renvoie une {{domxref("DOMTokenList")}} qui aide l'agent utilisateur à sélectionner les contrôles à afficher sur l'élément du média chaque fois que l'agent utilisateur affiche son propre jeu de contrôles. La DOMTokenList prend une ou plusieurs des trois valeurs possibles : nodownload, nofullscreen et noremoteplayback.
-
{{domxref("HTMLMediaElement.crossOrigin")}}
-
est une {{domxref("DOMString")}} (chaîne de caractères) indiquant les règlages CORS pour cet élément de média.
-
{{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}
-
Renvoie une {{domxref("DOMString")}} (chaîne de caractères) avec l'URL absolue de la ressource de média choisie.
-
{{domxref("HTMLMediaElement.currentTime")}}
-
est un double indiquant le temps de lecture actuel en secondes. La définition de cette valeur recherche le média à la nouvelle heure.
-
{{domxref("HTMLMediaElement.defaultMuted")}}
-
est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("muted","video")}}, qui indique si la sortie audio de l'élément média doit être désactivée par défaut.
-
{{domxref("HTMLMediaElement.defaultPlaybackRate")}}
-
est un double indiquant le taux de lecture par défaut pour le média.
-
{{domxref("HTMLMediaElement.disableRemotePlayback")}}
-
est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance.
-
{{domxref("HTMLMediaElement.duration")}}{{readonlyinline}}
-
renvoie un double indiquant la longueur du média en secondes, ou 0 si aucune donnée multimédia n'est disponible.
-
{{domxref("HTMLMediaElement.ended")}}{{readonlyinline}}
-
renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est terminé.
-
{{domxref("HTMLMediaElement.error")}}{{readonlyinline}}
-
renvoie un objet {{domxref("MediaError")}} pour l'erreur la plus récente, ou null s'il n'y a pas eu d'erreur.
-
{{domxref("HTMLMediaElement.loop")}}
-
est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("loop","video")}} (boucle), lequel indique si l'élément média doit recommencer quand il arrive à la fin.
-
{{domxref("HTMLMediaElement.mediaGroup")}}
-
est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un  {{domxref('MediaController')}} commun.
-
{{domxref("HTMLMediaElement.mediaKeys")}}{{readonlyinline}} {{experimental_inline}}
-
Renvoie un objet {{domxref("MediaKeys")}} ou null. MediaKeys est un ensemble de clés qu'un élément HTMLMediaElement associé peut utiliser pour déchiffrer les données du média pendant la lecture.
-
{{domxref("HTMLMediaElement.mozAudioCaptured")}}{{readonlyinline}} {{non-standard_inline}}
-
renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio.
-
{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}
-
est un double qui donne accès à l'heure de fin du fragment si l'élément média a un fragment URI pour currentSrc, sinon il est égal à la durée du média.
-
{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}
-
-

est un unsigned long qui indique le nombre d'échantillons qui seront renvoyés dans le "framebuffer" de chaque évènement MozAudioAvailable. Ce nombre est un total pour tous les canaux, et par défaut est défini par le nombre de canaux * 1024 (c'est-à-dire, 2 canaux * 1024 échantillons = total 2048).

- -

La propriété mozFrameBufferLength peut être définie à une nouvelle valeur pour une latence plus faible, de plus grandes quantités de données, etc. La taille donnée doit être un nombre compris entre 512 et 16384. L'utilisation d'autres tailles entraîne la levée d'une exception. Le meilleur moment pour définir une nouvelle longueur est après le lancement de l'évènement loadedmetadata, lorsque l'information audio est connue, mais avant que l'audio ait commencé ou que les événements MozAudioAvailable aient commencé à se déclencher.

-
-
{{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
-
renvoie un double représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio.
-
{{domxref("HTMLMediaElement.muted")}}
-
est un {{jsxref('Boolean')}} qui détermine si l'audio est coupé. true (vrai) si l'audio est coupé et false (faux) sinon.
-
{{domxref("HTMLMediaElement.networkState")}}{{readonlyinline}}
-
renvoie un unsigned short (énumération) indiquant l'état actuel de récupération du média sur le réseau.
-
{{domxref("HTMLMediaElement.paused")}}{{readonlyinline}}
-
renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est en pause.
-
{{domxref("HTMLMediaElement.playbackRate")}}
-
est un double qui indique la vitesse à laquelle le média est lu.
-
{{domxref("HTMLMediaElement.played")}}{{readonlyinline}}
-
renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de la source média que le navigateur a lu, le cas échéant.
-
{{domxref("HTMLMediaElement.preload")}}
-
est une {{domxref("DOMString")}} (chaîne) qui reflète l'attribut HTML {{htmlattrxref("preload","video")}}, indiquant quelles données doivent être préchargées, le cas échéant. Les valeurs possibles sont : none, metadata, auto.
-
{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}
-
est un {{jsxref('Boolean')}} qui détermine si la hauteur du son sera préservée. S'il est défini à false (faux), la hauteur du son s'ajustera à la vitesse de l'audio. C'est implémenté avec préfixe dans Firefox (mozPreservesPitch) et WebKit (webkitPreservesPitch).
-
{{domxref("HTMLMediaElement.readyState")}}{{readonlyinline}}
-
Renvoie un unsigned short (énumération) indiquant l'état de préparation des médias.
-
{{domxref("HTMLMediaElement.seekable")}}{{readonlyinline}}
-
Renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de temps que l'utilisateur peut rechercher, le cas échéant.
-
{{domxref("HTMLMediaElement.seeking")}}{{readonlyinline}}
-
Renvoie un {{jsxref('Boolean')}} qui indique si les médias sont en train de chercher une nouvelle position.
-
{{domxref("HTMLMediaElement.sinkId")}}{{readonlyinline}} {{experimental_inline}}
-
Renvoie une {{domxref("DOMString")}} (chaîne) qui est l'identifiant unique du périphérique audio de sortie, ou une chaîne vide s'il utilise l'agent utilisateur par défaut. Cet identifiant doit être l'une des valeurs MediaDeviceInfo.deviceid retournées par {{domxref("MediaDevices.enumeratedDevices()")}}, id-multimedia ou id-communications.
-
{{domxref("HTMLMediaElement.src")}}
-
est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src","video")}}, lequel contient l'URL d'une ressource média à utiliser.
-
{{domxref("HTMLMediaElement.srcObject")}}
-
est un {{domxref('MediaStream')}} représentant le média à lire ou qui a joué dans le HTMLMediaElement courant, ou null s'il n'est pas assigné.
-
{{domxref("HTMLMediaElement.textTracks")}}{{readonlyinline}}
-
Renvoie la liste d'objets {{domxref("TextTrack")}} (piste de texte) contenus dans l'élément.
-
{{domxref("HTMLMediaElement.videoTracks")}}{{readonlyinline}}
-

Renvoie la liste d'objets {{domxref("VideoTrack")}} (pistes vidéo) contenus dans l'élément.

-
-

Note : Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.

-
-
-
{{domxref("HTMLMediaElement.volume")}}
-
est un double indiquant le volume audio, de 0.0 (silence) à 1.0 (le plus fort).
-
- -

Gestionnaires d'évènements

- -
-
{{domxref("HTMLMediaElement.onencrypted")}}
-
définit le {{domxref('EventHandler')}} (gestionnaire d'évènements) appelé quand le média est encrypté.
-
{{domxref("HTMLMediaElement.onwaitingforkey")}}
-
définit le {{domxref('EventHandler')}} (gestionnaire d'évènements) appelé quand la lecture est bloquée en attente d'une clé de chiffrement.
-
- -

Attributs obsolètes

- -

Ces attributs sont obsolètes et ne doivent plus être utilisés, même si un navigateur les prend encore en charge.

- -
-
{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}
-
renvoie un double qui indique la position de lecture initiale en secondes.
-
{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
-
renvoie un double représentant le nombre de canaux dans la ressource audio (c'est-à-dire 2 pour stéréo).
-
- -

Gestionnaires d'évènements obsolètes

- -
-
{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}
-
définit le {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsque l'élément média est interrompu du fait du gestionnaire de canaux audio. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.
-
{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}
-
définit le {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsque l'interruption est terminée. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.
-
- -

Méthodes

- -

Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}} et {{domxref('EventTarget')}}.

- -
-
{{domxref("HTMLMediaElement.addTextTrack()")}}
-
Ajoute une piste de texte (telle qu'une piste pour les sous-titres) à un élément de média.
-
{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}
-
Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média.
-
{{domxref("HTMLMediaElement.canPlayType()")}}
-
Détermine si le type de média spécifié peut être lu.
-
{{domxref("HTMLMediaElement.fastSeek()")}}
-
cherche directement à l'heure donnée.
-
{{domxref("HTMLMediaElement.load()")}}
-
Réinitialise l'élément média et redémarre la ressource. Tous les événements en attente sont ignorés. La quantité de données média récupérées est toujours affectée par l'attribut preload. Cette méthode peut être utile pour libérer des ressources après la suppression de tout attribut src et des descendants d'éléments source. Sinon, il est généralement inutile d'utiliser cette méthode, à moins que cela ne soit nécessaire pour réanalyser les enfants de l'élément source après des modifications dynamiques.
-
{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}
-
[enter description]
-
{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}
-
[enter description]
-
{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}
-
Renvoie un {{jsxref('Object')}}, qui contient des propriétés représentant les métadonnées de la ressource média en cours de lecture, comme paires {key: value}. Une copie distincte des données est renvoyée chaque fois que la méthode est appelée. Cette méthode doit être appelée après le déclenchement de l'évènement loadedmetadata.
-
{{domxref("HTMLMediaElement.pause()")}}
-
met en pause la lecture du média.
-
{{domxref("HTMLMediaElement.play()")}}
-
commence la lecture du média.
-
{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}
-
cherche l'image suivante dans les médias. Cette méthode expérimentale non standard permet de conduire manuellement la lecture et le rendu des médias à une vitesse personnalisée, ou de se déplacer dans le média image par image pour effectuer un filtrage ou d'autres opérations.
-
{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}
-
Renvoie {{jsxref("Promise")}}. Définit les {{domxref("MediaKeys")}}, clés à utiliser quand le média doit être décrypté pendant la lecture.
-
{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}
-
définit l'identifiant du périphérique audio à utiliser en sortie et renvoie un {{jsxref("Promise")}}. Cela fonctionne uniquement quand l'application est autorisée à utiliser l'appareil spécifié.
-
- -

Méthodes obsolètes

- -

Ces méthodes sont obsolètes et ne doivent plus être utilisées, même si un navigateur les prend encore en charge.

- -
-
{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à load() excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur  currentSrc de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML WHATWG')}}Pas de changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML5 W3C')}}Définition initiale.
{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}{{Spec2('EME')}}Ajout de {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, et setMediaKeys.
{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}{{Spec2('Media Capture')}}Ajout de sinkId, setSinkId() et captureStream().
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLMediaElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlmediaelement/index.md b/files/fr/web/api/htmlmediaelement/index.md new file mode 100644 index 0000000000..86941892db --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/index.md @@ -0,0 +1,237 @@ +--- +title: HTMLMediaElement +slug: Web/API/HTMLMediaElement +tags: + - API + - Audio + - DOM + - Interface + - Media + - Video +translation_of: Web/API/HTMLMediaElement +--- +

{{APIRef("HTML DOM")}}

+ +

L'interface HTMLMediaElement ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface.

+ +

Propriétés

+ +

Cette interface hérite aussi des propriétés de ses ancêtres {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}} et {{domxref("EventTarget")}}.

+ +
+
{{domxref("HTMLMediaElement.audioTracks")}}
+
est une {{domxref("AudioTrackList")}} qui liste les objets {{domxref("AudioTrack")}} (pistes audio) contenus dans l'élément.
+
{{domxref("HTMLMediaElement.autoplay")}}
+

est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{htmlattrxref("autoplay","video")}}, indiquant si la lecture doit commencer automatiquement dès que suffisamment de médias sont disponibles pour le faire sans interruption.

+
+

Note : Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.

+
+
+
{{domxref("HTMLMediaElement.buffered")}}{{readonlyinline}}
+
Renvoie un objet {{domxref("TimeRanges")}} qui indique les plages de la source du média que le navigateur a en mémoire tampon (le cas échéant) au moment de l'accès à la propriété buffered.
+
{{domxref("HTMLMediaElement.controller")}}
+
est un objet {{domxref("MediaController")}} qui représente le contrôleur du média assigné à l'élément, ou null si aucun n'est défini.
+
{{domxref("HTMLMediaElement.controls")}}
+
est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("controls","video")}}, indiquant quels éléments de contrôle de ressource de l'interface utilisateur doivent être affichés.
+
{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}
+
renvoie une {{domxref("DOMTokenList")}} qui aide l'agent utilisateur à sélectionner les contrôles à afficher sur l'élément du média chaque fois que l'agent utilisateur affiche son propre jeu de contrôles. La DOMTokenList prend une ou plusieurs des trois valeurs possibles : nodownload, nofullscreen et noremoteplayback.
+
{{domxref("HTMLMediaElement.crossOrigin")}}
+
est une {{domxref("DOMString")}} (chaîne de caractères) indiquant les règlages CORS pour cet élément de média.
+
{{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}
+
Renvoie une {{domxref("DOMString")}} (chaîne de caractères) avec l'URL absolue de la ressource de média choisie.
+
{{domxref("HTMLMediaElement.currentTime")}}
+
est un double indiquant le temps de lecture actuel en secondes. La définition de cette valeur recherche le média à la nouvelle heure.
+
{{domxref("HTMLMediaElement.defaultMuted")}}
+
est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("muted","video")}}, qui indique si la sortie audio de l'élément média doit être désactivée par défaut.
+
{{domxref("HTMLMediaElement.defaultPlaybackRate")}}
+
est un double indiquant le taux de lecture par défaut pour le média.
+
{{domxref("HTMLMediaElement.disableRemotePlayback")}}
+
est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance.
+
{{domxref("HTMLMediaElement.duration")}}{{readonlyinline}}
+
renvoie un double indiquant la longueur du média en secondes, ou 0 si aucune donnée multimédia n'est disponible.
+
{{domxref("HTMLMediaElement.ended")}}{{readonlyinline}}
+
renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est terminé.
+
{{domxref("HTMLMediaElement.error")}}{{readonlyinline}}
+
renvoie un objet {{domxref("MediaError")}} pour l'erreur la plus récente, ou null s'il n'y a pas eu d'erreur.
+
{{domxref("HTMLMediaElement.loop")}}
+
est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("loop","video")}} (boucle), lequel indique si l'élément média doit recommencer quand il arrive à la fin.
+
{{domxref("HTMLMediaElement.mediaGroup")}}
+
est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un  {{domxref('MediaController')}} commun.
+
{{domxref("HTMLMediaElement.mediaKeys")}}{{readonlyinline}} {{experimental_inline}}
+
Renvoie un objet {{domxref("MediaKeys")}} ou null. MediaKeys est un ensemble de clés qu'un élément HTMLMediaElement associé peut utiliser pour déchiffrer les données du média pendant la lecture.
+
{{domxref("HTMLMediaElement.mozAudioCaptured")}}{{readonlyinline}} {{non-standard_inline}}
+
renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio.
+
{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}
+
est un double qui donne accès à l'heure de fin du fragment si l'élément média a un fragment URI pour currentSrc, sinon il est égal à la durée du média.
+
{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}
+
+

est un unsigned long qui indique le nombre d'échantillons qui seront renvoyés dans le "framebuffer" de chaque évènement MozAudioAvailable. Ce nombre est un total pour tous les canaux, et par défaut est défini par le nombre de canaux * 1024 (c'est-à-dire, 2 canaux * 1024 échantillons = total 2048).

+ +

La propriété mozFrameBufferLength peut être définie à une nouvelle valeur pour une latence plus faible, de plus grandes quantités de données, etc. La taille donnée doit être un nombre compris entre 512 et 16384. L'utilisation d'autres tailles entraîne la levée d'une exception. Le meilleur moment pour définir une nouvelle longueur est après le lancement de l'évènement loadedmetadata, lorsque l'information audio est connue, mais avant que l'audio ait commencé ou que les événements MozAudioAvailable aient commencé à se déclencher.

+
+
{{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+
renvoie un double représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio.
+
{{domxref("HTMLMediaElement.muted")}}
+
est un {{jsxref('Boolean')}} qui détermine si l'audio est coupé. true (vrai) si l'audio est coupé et false (faux) sinon.
+
{{domxref("HTMLMediaElement.networkState")}}{{readonlyinline}}
+
renvoie un unsigned short (énumération) indiquant l'état actuel de récupération du média sur le réseau.
+
{{domxref("HTMLMediaElement.paused")}}{{readonlyinline}}
+
renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est en pause.
+
{{domxref("HTMLMediaElement.playbackRate")}}
+
est un double qui indique la vitesse à laquelle le média est lu.
+
{{domxref("HTMLMediaElement.played")}}{{readonlyinline}}
+
renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de la source média que le navigateur a lu, le cas échéant.
+
{{domxref("HTMLMediaElement.preload")}}
+
est une {{domxref("DOMString")}} (chaîne) qui reflète l'attribut HTML {{htmlattrxref("preload","video")}}, indiquant quelles données doivent être préchargées, le cas échéant. Les valeurs possibles sont : none, metadata, auto.
+
{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}
+
est un {{jsxref('Boolean')}} qui détermine si la hauteur du son sera préservée. S'il est défini à false (faux), la hauteur du son s'ajustera à la vitesse de l'audio. C'est implémenté avec préfixe dans Firefox (mozPreservesPitch) et WebKit (webkitPreservesPitch).
+
{{domxref("HTMLMediaElement.readyState")}}{{readonlyinline}}
+
Renvoie un unsigned short (énumération) indiquant l'état de préparation des médias.
+
{{domxref("HTMLMediaElement.seekable")}}{{readonlyinline}}
+
Renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de temps que l'utilisateur peut rechercher, le cas échéant.
+
{{domxref("HTMLMediaElement.seeking")}}{{readonlyinline}}
+
Renvoie un {{jsxref('Boolean')}} qui indique si les médias sont en train de chercher une nouvelle position.
+
{{domxref("HTMLMediaElement.sinkId")}}{{readonlyinline}} {{experimental_inline}}
+
Renvoie une {{domxref("DOMString")}} (chaîne) qui est l'identifiant unique du périphérique audio de sortie, ou une chaîne vide s'il utilise l'agent utilisateur par défaut. Cet identifiant doit être l'une des valeurs MediaDeviceInfo.deviceid retournées par {{domxref("MediaDevices.enumeratedDevices()")}}, id-multimedia ou id-communications.
+
{{domxref("HTMLMediaElement.src")}}
+
est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src","video")}}, lequel contient l'URL d'une ressource média à utiliser.
+
{{domxref("HTMLMediaElement.srcObject")}}
+
est un {{domxref('MediaStream')}} représentant le média à lire ou qui a joué dans le HTMLMediaElement courant, ou null s'il n'est pas assigné.
+
{{domxref("HTMLMediaElement.textTracks")}}{{readonlyinline}}
+
Renvoie la liste d'objets {{domxref("TextTrack")}} (piste de texte) contenus dans l'élément.
+
{{domxref("HTMLMediaElement.videoTracks")}}{{readonlyinline}}
+

Renvoie la liste d'objets {{domxref("VideoTrack")}} (pistes vidéo) contenus dans l'élément.

+
+

Note : Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.

+
+
+
{{domxref("HTMLMediaElement.volume")}}
+
est un double indiquant le volume audio, de 0.0 (silence) à 1.0 (le plus fort).
+
+ +

Gestionnaires d'évènements

+ +
+
{{domxref("HTMLMediaElement.onencrypted")}}
+
définit le {{domxref('EventHandler')}} (gestionnaire d'évènements) appelé quand le média est encrypté.
+
{{domxref("HTMLMediaElement.onwaitingforkey")}}
+
définit le {{domxref('EventHandler')}} (gestionnaire d'évènements) appelé quand la lecture est bloquée en attente d'une clé de chiffrement.
+
+ +

Attributs obsolètes

+ +

Ces attributs sont obsolètes et ne doivent plus être utilisés, même si un navigateur les prend encore en charge.

+ +
+
{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}
+
renvoie un double qui indique la position de lecture initiale en secondes.
+
{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+
renvoie un double représentant le nombre de canaux dans la ressource audio (c'est-à-dire 2 pour stéréo).
+
+ +

Gestionnaires d'évènements obsolètes

+ +
+
{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}
+
définit le {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsque l'élément média est interrompu du fait du gestionnaire de canaux audio. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.
+
{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}
+
définit le {{event("Event_handlers", "event handler")}} (gestionnaire d'évènements) appelé lorsque l'interruption est terminée. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.
+
+ +

Méthodes

+ +

Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}} et {{domxref('EventTarget')}}.

+ +
+
{{domxref("HTMLMediaElement.addTextTrack()")}}
+
Ajoute une piste de texte (telle qu'une piste pour les sous-titres) à un élément de média.
+
{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}
+
Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média.
+
{{domxref("HTMLMediaElement.canPlayType()")}}
+
Détermine si le type de média spécifié peut être lu.
+
{{domxref("HTMLMediaElement.fastSeek()")}}
+
cherche directement à l'heure donnée.
+
{{domxref("HTMLMediaElement.load()")}}
+
Réinitialise l'élément média et redémarre la ressource. Tous les événements en attente sont ignorés. La quantité de données média récupérées est toujours affectée par l'attribut preload. Cette méthode peut être utile pour libérer des ressources après la suppression de tout attribut src et des descendants d'éléments source. Sinon, il est généralement inutile d'utiliser cette méthode, à moins que cela ne soit nécessaire pour réanalyser les enfants de l'élément source après des modifications dynamiques.
+
{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}
+
[enter description]
+
{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}
+
[enter description]
+
{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}
+
Renvoie un {{jsxref('Object')}}, qui contient des propriétés représentant les métadonnées de la ressource média en cours de lecture, comme paires {key: value}. Une copie distincte des données est renvoyée chaque fois que la méthode est appelée. Cette méthode doit être appelée après le déclenchement de l'évènement loadedmetadata.
+
{{domxref("HTMLMediaElement.pause()")}}
+
met en pause la lecture du média.
+
{{domxref("HTMLMediaElement.play()")}}
+
commence la lecture du média.
+
{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}
+
cherche l'image suivante dans les médias. Cette méthode expérimentale non standard permet de conduire manuellement la lecture et le rendu des médias à une vitesse personnalisée, ou de se déplacer dans le média image par image pour effectuer un filtrage ou d'autres opérations.
+
{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}
+
Renvoie {{jsxref("Promise")}}. Définit les {{domxref("MediaKeys")}}, clés à utiliser quand le média doit être décrypté pendant la lecture.
+
{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}
+
définit l'identifiant du périphérique audio à utiliser en sortie et renvoie un {{jsxref("Promise")}}. Cela fonctionne uniquement quand l'application est autorisée à utiliser l'appareil spécifié.
+
+ +

Méthodes obsolètes

+ +

Ces méthodes sont obsolètes et ne doivent plus être utilisées, même si un navigateur les prend encore en charge.

+ +
+
{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à load() excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur  currentSrc de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML WHATWG')}}Pas de changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML5 W3C')}}Définition initiale.
{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}{{Spec2('EME')}}Ajout de {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, et setMediaKeys.
{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}{{Spec2('Media Capture')}}Ajout de sinkId, setSinkId() et captureStream().
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.HTMLMediaElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlmediaelement/play/index.html b/files/fr/web/api/htmlmediaelement/play/index.html deleted file mode 100644 index 67d72a2cc2..0000000000 --- a/files/fr/web/api/htmlmediaelement/play/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: HTMLMediaElement.play() -slug: Web/API/HTMLMediaElement/play -tags: - - API - - Audio - - HTMLMediaElement - - Interface - - Media - - Méthode - - Reference - - Video - - play -translation_of: Web/API/HTMLMediaElement/play ---- -

{{APIRef("HTML DOM")}} {{SeeCompatTable}}

- -

La méthode HTMLMediaElement.play() essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission).

- -

Syntaxe

- -
var Promise = HTMLMediaElement.play();
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé, ou rejetée si la lecture ne peut commencer.

- -

Exceptions

- -

Le gestionnaire de rejet de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent :

- -
-
NotAllowedError
-
Le client (navigateur) ou système d'exploitation ne permet pas la lecture du média dans le contexte ou la situation actuelle. Ceci peut arriver, par exemple, si le navigateur oblige l'utilisateur à lancer manuellement le média en cliquant sur le bouton "play".
-
NotSupportedError
-
La source du média (qui peut être spécifié comme un {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, ou {{domxref("File")}}, par example) ne représente pas un format supporté.
-
- -

D'autres types d'exceptions peuvent survenir selon l'implémentation du navigateur, du lecteur de média, etc.

- -

Exemple

- -

Cet exemple commence la lecture d'un élément video et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient.

- -
let myVideo = document.getElementById("myVideoElement");
-
-myVideo.play().then(() => {
-  document.getElementById("statusText").innerHTML = "Yay ! La vidéo est lancée !";
-}).catch((error) => {
- document.getElementById("statusText").innerHTML = "Erreur: " + error;
-});
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}{{Spec2('HTML WHATWG')}}Définition initiale; living specification.
{{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -
-

Note : Les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout.

-
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLMediaElement.play")}}

diff --git a/files/fr/web/api/htmlmediaelement/play/index.md b/files/fr/web/api/htmlmediaelement/play/index.md new file mode 100644 index 0000000000..67d72a2cc2 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/play/index.md @@ -0,0 +1,86 @@ +--- +title: HTMLMediaElement.play() +slug: Web/API/HTMLMediaElement/play +tags: + - API + - Audio + - HTMLMediaElement + - Interface + - Media + - Méthode + - Reference + - Video + - play +translation_of: Web/API/HTMLMediaElement/play +--- +

{{APIRef("HTML DOM")}} {{SeeCompatTable}}

+ +

La méthode HTMLMediaElement.play() essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission).

+ +

Syntaxe

+ +
var Promise = HTMLMediaElement.play();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé, ou rejetée si la lecture ne peut commencer.

+ +

Exceptions

+ +

Le gestionnaire de rejet de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent :

+ +
+
NotAllowedError
+
Le client (navigateur) ou système d'exploitation ne permet pas la lecture du média dans le contexte ou la situation actuelle. Ceci peut arriver, par exemple, si le navigateur oblige l'utilisateur à lancer manuellement le média en cliquant sur le bouton "play".
+
NotSupportedError
+
La source du média (qui peut être spécifié comme un {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, ou {{domxref("File")}}, par example) ne représente pas un format supporté.
+
+ +

D'autres types d'exceptions peuvent survenir selon l'implémentation du navigateur, du lecteur de média, etc.

+ +

Exemple

+ +

Cet exemple commence la lecture d'un élément video et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient.

+ +
let myVideo = document.getElementById("myVideoElement");
+
+myVideo.play().then(() => {
+  document.getElementById("statusText").innerHTML = "Yay ! La vidéo est lancée !";
+}).catch((error) => {
+ document.getElementById("statusText").innerHTML = "Erreur: " + error;
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}{{Spec2('HTML WHATWG')}}Définition initiale; living specification.
{{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +
+

Note : Les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout.

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLMediaElement.play")}}

diff --git a/files/fr/web/api/htmlmediaelement/volume/index.html b/files/fr/web/api/htmlmediaelement/volume/index.html deleted file mode 100644 index 718b08a924..0000000000 --- a/files/fr/web/api/htmlmediaelement/volume/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: HTMLMediaElement.volume -slug: Web/API/HTMLMediaElement/volume -tags: - - API - - Audio - - HTML DOM - - Property - - Propriété - - Reference - - Volume - - sound -translation_of: Web/API/HTMLMediaElement/volume ---- -

{{APIRef("HTML DOM")}}

- -

La propriété HTMLMediaElement.volume définit le volume auquel le média doit être lu. 

- -

Syntaxe

- -
var volume ​= video.volume; //1
- -

Valeur

- -

Une valeur de type double (nombre à virgule) inclut entre 0 et 1, si elle vaut 0 le son est coupé et elle vaut 1 le son est le plus élevé possible.

- -

Exemple

- -
var obj = document.createElement('audio');
-console.log(obj.volume); // 1
-obj.volume = 0.75;
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatutCommentaire
{{SpecName('HTML WHATWG', "#dom-media-volume", "HTMLMediaElement.volume")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.volume")}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité navigateur

- - - -

{{Compat("api.HTMLMediaElement.volume")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlmediaelement/volume/index.md b/files/fr/web/api/htmlmediaelement/volume/index.md new file mode 100644 index 0000000000..718b08a924 --- /dev/null +++ b/files/fr/web/api/htmlmediaelement/volume/index.md @@ -0,0 +1,66 @@ +--- +title: HTMLMediaElement.volume +slug: Web/API/HTMLMediaElement/volume +tags: + - API + - Audio + - HTML DOM + - Property + - Propriété + - Reference + - Volume + - sound +translation_of: Web/API/HTMLMediaElement/volume +--- +

{{APIRef("HTML DOM")}}

+ +

La propriété HTMLMediaElement.volume définit le volume auquel le média doit être lu. 

+ +

Syntaxe

+ +
var volume ​= video.volume; //1
+ +

Valeur

+ +

Une valeur de type double (nombre à virgule) inclut entre 0 et 1, si elle vaut 0 le son est coupé et elle vaut 1 le son est le plus élevé possible.

+ +

Exemple

+ +
var obj = document.createElement('audio');
+console.log(obj.volume); // 1
+obj.volume = 0.75;
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatutCommentaire
{{SpecName('HTML WHATWG', "#dom-media-volume", "HTMLMediaElement.volume")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.volume")}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité navigateur

+ + + +

{{Compat("api.HTMLMediaElement.volume")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmloptionelement/index.html b/files/fr/web/api/htmloptionelement/index.html deleted file mode 100644 index b1294570c6..0000000000 --- a/files/fr/web/api/htmloptionelement/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: HTMLOptionElement -slug: Web/API/HTMLOptionElement -tags: - - API - - HTML DOM - - Interface - - NeedsNewLayout - - Reference -translation_of: Web/API/HTMLOptionElement ---- -
{{APIRef("HTML DOM")}}
- -

L'interface HTMLOptionElement représente l'élément {{HTMLElement("option")}} et hérite de toutes les classes et méthodes de l'intreface {{domxref("HTMLElement")}} .

- -

Propriétés

- -

hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomTypeDescription
defaultSelected{{domxref("Boolean")}} -

Contient la valeur initiale de l'attribut HTML {{htmlattrxref("selected", "option")}} ,indiquant si l'option est sélectionnée par défaut ou non.

-
disabled{{domxref("Boolean")}} -

Retourne la valeur de l'attribut HTML {{htmlattrxref("disabled", "option")}} , cet attribut indique que l'option ne peut pas être sélectionnée. Une option peut aussi être désactivée lorsqu'elle est fille d'un élément {{HTMLElement("optgroup")}} désactivé.

-
form{{readonlyInline}}{{domxref("HTMLFormElement")}} -

Si l'option est une fille d'un élément {{HTMLElement("select")}}, cette propriété à la même valeur que l'attribut form de l'objet {{DomXref("HTMLSelectElement")}}

-

correspondant, sinon , sa valeur est null.

-
index{{readonlyInline}}long -

La position de l'option dans la liste d'options à laquelle elle appartient, dans un ordre arborescent. Si l'option ne fait pas partie d'une liste d'options , comme dans le cas où elle appartient à l'élément {{HTMLElement("datalist")}} sa valeur est 0.

-
label{{domxref("DOMString")}} -

Reflète la valeur de l'attribut {{htmlattrxref("label", "option")}}, qui fourni un libellé à l'option. si cet attribut n'est pas spécifié, sa lecture retourne le text de l'élément en question.

-
selected{{domxref("Boolean")}} -

Indique si l'option est sélectionnée ou non .

-
text{{domxref("DOMString")}} -

Contient le contenu texte de l'élément.

-
value{{domxref("DOMString")}} -

Retourne la valeur de l'attribut HTML {{htmlattrxref("value", "option")}}, s'il existe, sinon la valeur de la propriété {{domxref("Node.textContent")}} est retournée.

-
- -

Méthodes

- -

Hérite des méthodes de son parent , {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLOptionElement.Option()")}}
-

C'est le constructeur créant l'objet HTMLOptionElement object. il accepte quatre valeurs : le texte à afficher , text, la valeur associée au texte , value, la valeur du defaultSelected, et la valeur du selected. les trois dernières sont optionnelles.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-button-element.html#the-option-element", "HTMLOptionElement")}}{{Spec2('HTML WHATWG')}} -

pas de changement depuis la {{SpecName("HTML5 W3C")}}.

-
{{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}{{Spec2('HTML5 W3C')}} -

Le constructeur, Option(), a été ajouté. la propriété form peut avoir la valeur null.

-
{{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}{{Spec2('DOM2 HTML')}} -

Le sens de la propriété selected a changé: elle indique désormais si l'option est sélectionnée à l'instant , au lieu d'indiquer si elle a été initialement sélectionnée.

-

La propriété defaultSelected n'est plus en lecture seule

-
{{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}{{Spec2('DOM1')}}La définition initiale .
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLOptionElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmloptionelement/index.md b/files/fr/web/api/htmloptionelement/index.md new file mode 100644 index 0000000000..b1294570c6 --- /dev/null +++ b/files/fr/web/api/htmloptionelement/index.md @@ -0,0 +1,146 @@ +--- +title: HTMLOptionElement +slug: Web/API/HTMLOptionElement +tags: + - API + - HTML DOM + - Interface + - NeedsNewLayout + - Reference +translation_of: Web/API/HTMLOptionElement +--- +
{{APIRef("HTML DOM")}}
+ +

L'interface HTMLOptionElement représente l'élément {{HTMLElement("option")}} et hérite de toutes les classes et méthodes de l'intreface {{domxref("HTMLElement")}} .

+ +

Propriétés

+ +

hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomTypeDescription
defaultSelected{{domxref("Boolean")}} +

Contient la valeur initiale de l'attribut HTML {{htmlattrxref("selected", "option")}} ,indiquant si l'option est sélectionnée par défaut ou non.

+
disabled{{domxref("Boolean")}} +

Retourne la valeur de l'attribut HTML {{htmlattrxref("disabled", "option")}} , cet attribut indique que l'option ne peut pas être sélectionnée. Une option peut aussi être désactivée lorsqu'elle est fille d'un élément {{HTMLElement("optgroup")}} désactivé.

+
form{{readonlyInline}}{{domxref("HTMLFormElement")}} +

Si l'option est une fille d'un élément {{HTMLElement("select")}}, cette propriété à la même valeur que l'attribut form de l'objet {{DomXref("HTMLSelectElement")}}

+

correspondant, sinon , sa valeur est null.

+
index{{readonlyInline}}long +

La position de l'option dans la liste d'options à laquelle elle appartient, dans un ordre arborescent. Si l'option ne fait pas partie d'une liste d'options , comme dans le cas où elle appartient à l'élément {{HTMLElement("datalist")}} sa valeur est 0.

+
label{{domxref("DOMString")}} +

Reflète la valeur de l'attribut {{htmlattrxref("label", "option")}}, qui fourni un libellé à l'option. si cet attribut n'est pas spécifié, sa lecture retourne le text de l'élément en question.

+
selected{{domxref("Boolean")}} +

Indique si l'option est sélectionnée ou non .

+
text{{domxref("DOMString")}} +

Contient le contenu texte de l'élément.

+
value{{domxref("DOMString")}} +

Retourne la valeur de l'attribut HTML {{htmlattrxref("value", "option")}}, s'il existe, sinon la valeur de la propriété {{domxref("Node.textContent")}} est retournée.

+
+ +

Méthodes

+ +

Hérite des méthodes de son parent , {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLOptionElement.Option()")}}
+

C'est le constructeur créant l'objet HTMLOptionElement object. il accepte quatre valeurs : le texte à afficher , text, la valeur associée au texte , value, la valeur du defaultSelected, et la valeur du selected. les trois dernières sont optionnelles.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-button-element.html#the-option-element", "HTMLOptionElement")}}{{Spec2('HTML WHATWG')}} +

pas de changement depuis la {{SpecName("HTML5 W3C")}}.

+
{{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}{{Spec2('HTML5 W3C')}} +

Le constructeur, Option(), a été ajouté. la propriété form peut avoir la valeur null.

+
{{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}{{Spec2('DOM2 HTML')}} +

Le sens de la propriété selected a changé: elle indique désormais si l'option est sélectionnée à l'instant , au lieu d'indiquer si elle a été initialement sélectionnée.

+

La propriété defaultSelected n'est plus en lecture seule

+
{{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}{{Spec2('DOM1')}}La définition initiale .
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLOptionElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmloptionelement/option/index.html b/files/fr/web/api/htmloptionelement/option/index.html deleted file mode 100644 index 975d2cc634..0000000000 --- a/files/fr/web/api/htmloptionelement/option/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Option() -slug: Web/API/HTMLOptionElement/Option -tags: - - API - - Constructeur - - HTML DOM - - HTMLOptionElement -translation_of: Web/API/HTMLOptionElement/Option ---- -
{{APIRef("HTML DOM")}}
- -

Le constructeur Option() permet de créer un nouvel objet {{domxref("HTMLOptionElement")}}.

- -

Syntaxe

- -
var optionElementReference = new Option(text, value, defaultSelected, selected);
- -

Parameters

- -
-
text {{optional_inline}}
-
Une chaîne de caractères {{domxref("DOMString")}} représentant le contenu de l'élément, c'est-à-dire le texte affiché. Si cet argument n'est pas spécifié, c'est la chaîne vide qui sera utilisée.
-
value {{optional_inline}}
-
Une chaîne de caractères {{domxref("DOMString")}} représentant la valeur de {{domxref("HTMLOptionElement")}}, c’est-à-dire l’attribut HTML value de l'élément {{htmlelement("option")}}. Si cet argument n'est pas fourni, ce sera la valeur de text qui sera reprise comme valeur (par exemple pour l'élément {{htmlelement("select")}} associé lorsque le formulaire est envoyé au serveur).
-
defaultSelected {{optional_inline}}
-
Un {{domxref("Boolean")}} qui définit la valeur de l'attribut {{htmlattrxref("selected", "option")}}, c'est-à-dire que cette {{htmlelement("option")}} sera la valeur par défaut sélectionné dans l'élément {{htmlelement("select")}} lors du premier chargement de la page. S'il n'est pas spécifié, la valeur false sera utilisée par défaut.
-
selected {{optional_inline}}
-
Un {{domxref("Boolean")}} qui définit l'état sélectionné de l'option, la valeur par défaut est false (non sélectionné). Si cet argument est absent et même si l'argument defaultSelected vaut true, l'option ne sera pas pas sélectionnée.
-
- -

Exemples

- -

Ajouter de nouvelles options

- -
/* Imaginons qu'on ait le code HTML suivant dans le document
-<select id='s'>
-
-</select>
-*/
-
-var s = document.getElementById('s');
-var options = [Quatre, Cinq, Six];
-
-options.forEach(function(element,key) {
-    s[key] = new Option(element,key);
-});
-
- -

Ajouter des options avec différents paramètres

- -
/* Imaginons qu'ont ait le code HTML suivant dans le document
-<select id="s">
-  <option>Premier</option>
-  <option>Deuxième</option>
-  <option>Troisième</option>
-</select>
-*/
-
-var s = document.getElementById('s');
-var options = [ 'zéro', 'un', 'deux' ];
-
-options.forEach(function(element, key) {
-  if (element == 'zéro') {
-    s[s.options.length] = new Option(element, s.options.length, false, false);
-  }
-  if (element == 'un') {
-    s[s.options.length] = new Option(element, s.options.length, true, false); // Ajouter l'attribut "selected"
-  }
-  if (element == 'deux') {
-    s[s.options.length] = new Option(element, s.options.length, false, true); // Sélectionnera l'option
-  }
-});
-
-/* Résultat dans le DOM / HTML modifié :
-<select id="s">
-  <option value="0">zéro</option>
-  <option value="1" selected="">un</option>
-  <option value="2">deux</option> // L'utilisateur verra cette option sélectionnée
-</select>
-*/
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
HTML5 La définition de Option dans cette spécification.Recommendation
diff --git a/files/fr/web/api/htmloptionelement/option/index.md b/files/fr/web/api/htmloptionelement/option/index.md new file mode 100644 index 0000000000..975d2cc634 --- /dev/null +++ b/files/fr/web/api/htmloptionelement/option/index.md @@ -0,0 +1,100 @@ +--- +title: Option() +slug: Web/API/HTMLOptionElement/Option +tags: + - API + - Constructeur + - HTML DOM + - HTMLOptionElement +translation_of: Web/API/HTMLOptionElement/Option +--- +
{{APIRef("HTML DOM")}}
+ +

Le constructeur Option() permet de créer un nouvel objet {{domxref("HTMLOptionElement")}}.

+ +

Syntaxe

+ +
var optionElementReference = new Option(text, value, defaultSelected, selected);
+ +

Parameters

+ +
+
text {{optional_inline}}
+
Une chaîne de caractères {{domxref("DOMString")}} représentant le contenu de l'élément, c'est-à-dire le texte affiché. Si cet argument n'est pas spécifié, c'est la chaîne vide qui sera utilisée.
+
value {{optional_inline}}
+
Une chaîne de caractères {{domxref("DOMString")}} représentant la valeur de {{domxref("HTMLOptionElement")}}, c’est-à-dire l’attribut HTML value de l'élément {{htmlelement("option")}}. Si cet argument n'est pas fourni, ce sera la valeur de text qui sera reprise comme valeur (par exemple pour l'élément {{htmlelement("select")}} associé lorsque le formulaire est envoyé au serveur).
+
defaultSelected {{optional_inline}}
+
Un {{domxref("Boolean")}} qui définit la valeur de l'attribut {{htmlattrxref("selected", "option")}}, c'est-à-dire que cette {{htmlelement("option")}} sera la valeur par défaut sélectionné dans l'élément {{htmlelement("select")}} lors du premier chargement de la page. S'il n'est pas spécifié, la valeur false sera utilisée par défaut.
+
selected {{optional_inline}}
+
Un {{domxref("Boolean")}} qui définit l'état sélectionné de l'option, la valeur par défaut est false (non sélectionné). Si cet argument est absent et même si l'argument defaultSelected vaut true, l'option ne sera pas pas sélectionnée.
+
+ +

Exemples

+ +

Ajouter de nouvelles options

+ +
/* Imaginons qu'on ait le code HTML suivant dans le document
+<select id='s'>
+
+</select>
+*/
+
+var s = document.getElementById('s');
+var options = [Quatre, Cinq, Six];
+
+options.forEach(function(element,key) {
+    s[key] = new Option(element,key);
+});
+
+ +

Ajouter des options avec différents paramètres

+ +
/* Imaginons qu'ont ait le code HTML suivant dans le document
+<select id="s">
+  <option>Premier</option>
+  <option>Deuxième</option>
+  <option>Troisième</option>
+</select>
+*/
+
+var s = document.getElementById('s');
+var options = [ 'zéro', 'un', 'deux' ];
+
+options.forEach(function(element, key) {
+  if (element == 'zéro') {
+    s[s.options.length] = new Option(element, s.options.length, false, false);
+  }
+  if (element == 'un') {
+    s[s.options.length] = new Option(element, s.options.length, true, false); // Ajouter l'attribut "selected"
+  }
+  if (element == 'deux') {
+    s[s.options.length] = new Option(element, s.options.length, false, true); // Sélectionnera l'option
+  }
+});
+
+/* Résultat dans le DOM / HTML modifié :
+<select id="s">
+  <option value="0">zéro</option>
+  <option value="1" selected="">un</option>
+  <option value="2">deux</option> // L'utilisateur verra cette option sélectionnée
+</select>
+*/
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
HTML5 La définition de Option dans cette spécification.Recommendation
diff --git a/files/fr/web/api/htmlquoteelement/index.html b/files/fr/web/api/htmlquoteelement/index.html deleted file mode 100644 index e76d04bb47..0000000000 --- a/files/fr/web/api/htmlquoteelement/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: HTMLQuoteElement -slug: Web/API/HTMLQuoteElement -tags: - - DOM - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLQuoteElement ---- -

{{ ApiRef() }}

-

Interface des éléments HTML de citation

-

Les objets DOM quote expose l'interface HTMLQuoteElement (ou {{ HTMLVersionInline(4) }} HTMLQuoteElement), qui fournissent plusieurs propriétés pour manipuler les éléments de citation (et viennent s'ajouter aux propriétés habituelles pour un objet de l'interface {{domxref("element")}}, disponibles par héritage).

-

Propriétés

- - - - - - - - - - - - - - - -
NomTypeDescription
cite{{domxref("DOMString")}}Reflète l'attribut HTML {{ htmlattrxref("cite", "blockquote") }} contenant l'URL de la source de la citation.
-

Voir également

-

Cette interface est supportée par les deux éléments HTML {{ HTMLElement("blockquote") }} et {{ HTMLElement("q") }}.

diff --git a/files/fr/web/api/htmlquoteelement/index.md b/files/fr/web/api/htmlquoteelement/index.md new file mode 100644 index 0000000000..e76d04bb47 --- /dev/null +++ b/files/fr/web/api/htmlquoteelement/index.md @@ -0,0 +1,30 @@ +--- +title: HTMLQuoteElement +slug: Web/API/HTMLQuoteElement +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLQuoteElement +--- +

{{ ApiRef() }}

+

Interface des éléments HTML de citation

+

Les objets DOM quote expose l'interface HTMLQuoteElement (ou {{ HTMLVersionInline(4) }} HTMLQuoteElement), qui fournissent plusieurs propriétés pour manipuler les éléments de citation (et viennent s'ajouter aux propriétés habituelles pour un objet de l'interface {{domxref("element")}}, disponibles par héritage).

+

Propriétés

+ + + + + + + + + + + + + + + +
NomTypeDescription
cite{{domxref("DOMString")}}Reflète l'attribut HTML {{ htmlattrxref("cite", "blockquote") }} contenant l'URL de la source de la citation.
+

Voir également

+

Cette interface est supportée par les deux éléments HTML {{ HTMLElement("blockquote") }} et {{ HTMLElement("q") }}.

diff --git a/files/fr/web/api/htmlselectelement/index.html b/files/fr/web/api/htmlselectelement/index.html deleted file mode 100644 index 9fae5fc68b..0000000000 --- a/files/fr/web/api/htmlselectelement/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: HTMLSelectElement -slug: Web/API/HTMLSelectElement -translation_of: Web/API/HTMLSelectElement ---- -
{{ APIRef("HTML DOM") }}
- -

L'interface HTMLSelectElement représente un élément HTML {{HTMLElement("select")}}. Cet élément partage aussi toute les propriétés et méthodes des autres elements HTML via l'interface {{ domxref("HTMLElement") }}.

- -

{{InheritanceDiagram(600, 120)}}

- -

Propriétés

- -

Cette interface hérite des propriétés de {{domxref("HTMLElement")}}, de {{domxref("Element")}} et de {{domxref("Node")}}.

- -
-
{{domxref("HTMLSelectElement.autofocus")}}
-
Un {{jsxref("Boolean")}} reflétant l'attribut HTML {{htmlattrxref("autofocus", "select")}} qui indique si le contrôle doit bénéficier d'une priorité d'entrée au chargement de la page, à moins que l'utilisateur ne passe outre, par exemple en saisissant un autre contrôle. Cet attribut ne peut être spécifié que pour un seul élément associé à un formulaire dans un document.
-
{{domxref("HTMLSelectElement.disabled")}}
-
Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("disabled", "select")}} qui indique si le contrôle est désactivé. S'il est désactivé, il n'accepte pas les clics.
-
{{domxref("HTMLSelectElement.form")}} {{ReadOnlyInline}}
-
Un {{domxref("HTMLFormElement")}} référençant le formulaire auquel cet élément est associé. Si l'élément n'est pas associé à un élément {{HTMLElement("form")}}, il retourne null.
-
{{domxref("HTMLSelectElement.labels")}} {{ReadOnlyInline}}
-
Une {{domxref("NodeList")}} d'éléments {{HTMLElement("label")}} associés à l'élément.
-
{{domxref("HTMLSelectElement.length")}}
-
Un unsigned long, le nombre d'éléments {{HTMLElement("option")}} dans cet élément select.
-
{{domxref("HTMLSelectElement.multiple")}}
-
Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("multiple", "select")}} qui indique si plusieurs éléments peuvent être sélectionnés.
-
{{domxref("HTMLSelectElement.name")}}
-
Une chaîne de caratères {{domxref("DOMString")}} reflétant l'attribut HTML {{htmlattrxref("name", "select")}} contenant le nom de ce contrôle utilisé par les serveurs et les fonctions de recherche DOM.
-
{{domxref("HTMLSelectElement.options")}} {{ReadOnlyInline}}
-
Une {{domxref("HTMLOptionsCollection")}} représentant l'ensemble des {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) contenus par cet élément.
-
{{domxref("HTMLSelectElement.required")}}
-
Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("required", "select")}} qui indique si l'utilisateur doit sélectionner une valeur avant de soumettre le formulaire.
-
{{domxref("HTMLSelectElement.selectedIndex")}}
-
Un long reflétant l'indice du premier élément {{HTMLElement("option")}} sélectionné. La valeur -1 indique qu'aucun élément n'est sélectionné.
-
{{domxref("HTMLSelectElement.selectedOptions")}} {{ReadOnlyInline}}
-
Une {{domxref("HTMLCollection")}} représentant l'ensemble des éléments {{HTMLElement("option")}} qui sont sélectionnés.
-
{{domxref("HTMLSelectElement.size")}}
-
Un long reflétant l'attribut {{htmlattrxref("size", "select")}} attribut HTML, qui contient le nombre d'éléments visibles dans le contrôle. La valeur par défaut est 1, sauf si multiple est true, auquel cas elle est de 4.
-
{{domxref("HTMLSelectElement.type")}} {{ReadOnlyInline}}
-
Une chaîne de caractères {{domxref("DOMString")}} représentant le type du contrôle de formulaire. Lorsque multiple est true, il renvoie "select-multiple" ; sinon, il renvoie "select-one".
-
{{domxref("HTMLSelectElement.validationMessage")}} {{ReadOnlyInline}}
-
Une chaîne de caractères {{domxref("DOMString")}} représentant un message localisé qui décrit les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas un candidat à la validation des contraintes (willValidate est faux), ou s'il satisfait à ses contraintes.
-
{{domxref("HTMLSelectElement.validity")}} {{ReadOnlyInline}}
-
Un {{domxref("ValidityState")}} reflétant l'état de validité dans lequel se trouve ce contrôle.
-
{{domxref("HTMLSelectElement.value")}}
-
Une chapine de caractères {{domxref("DOMString")}} reflétant la valeur du contrôle de formulaire. Renvoie la propriété value du premier élément d'option sélectionné s'il y en a un, sinon la chaîne vide.
-
{{domxref("HTMLSelectElement.willValidate")}} {{ReadOnlyInline}}
-
Un {{jsxref("Boolean")}} qui indique si le bouton est un candidat à la validation des contraintes. Il vaut false si des conditions l'empêchent de bénéficier de la validation par contrainte.
-
- -

Méthodes

- -

Cette interface hérite des méthodes de {{domxref("HTMLElement")}}, et de {{domxref("Element")}} et {{domxref("Node")}}.

- -
-
{{domxref("HTMLSelectElement.add()")}}
-
Ajoute un élément à la collection d'éléments option pour cet élément select.
-
{{domxref("HTMLSelectElement.blur()")}} {{obsolete_inline}}
-
Supprime le focus d'entrée de cet élément. Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}..
-
{{domxref("HTMLSelectElement.checkValidity()")}}
-
Vérifie si l'élément a des contraintes et s'il les satisfait. Si l'élément ne respecte pas ses contraintes, le navigateur déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément (et retourne false).
-
{{domxref("HTMLSelectElement.focus()")}} {{obsolete_inline}}
-
Donne le focus d'entrée à cet élément. Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}.
-
{{domxref("HTMLSelectElement.item()")}}
-
Obtient un élément de la collection d'options de l'élément {{HTMLElement("select")}}. Vous pouvez également accéder à un élément en spécifiant l'index entre des parenthèses ou des crochets de style tableau, sans appeler cette méthode explicitement.
-
{{domxref("HTMLSelectElement.namedItem()")}}
-
Obtient l'élément dans la collection d'options avec le nom spécifié. La chaîne de nom peut correspondre soit au id, soit à l'attribut name d'un nœud d'option. Vous pouvez également accéder à un élément en spécifiant le nom entre des crochets de style tableau ou des parenthèses, sans appeler cette méthode explicitement.
-
{{domxref("HTMLSelectElement.remove()")}}
-
Supprime l'élément à l'indice spécifié de la collection d'options pour cet élément select.
-
{{domxref("HTMLSelectElement.reportValidity()")}}
-
Cette méthode signale à l'utilisateur les problèmes liés aux contraintes sur l'élément, le cas échéant. S'il y a des problèmes, elle déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément, et retourne false ; s'il n'y a pas de problèmes, elle retourne true.
-
{{domxref("HTMLSelectElement.setCustomValidity()")}}
-
Définit le message de validation personnalisé pour l'élément de sélection au message spécifié. Utilisez la chaîne vide pour indiquer que l'élément n'a pas d'erreur de validité personnalisée.
-
- -

Événements

- -

Écoutez ces événements en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} ou en affectant un écouteur d'événements à la propriété oneventname de cette interface :

- -
-
Événement {{domxref("HTMLElement/input_event", "input")}}
-
S'active lorsque la valeur d'un élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} a été modifiée.
-
- -

Exemple

- -

Obtenir des informations sur l'option sélectionnée

- -
/* en supposant que nous ayons le HTML suivant
-<select id='s'>
-    <option>Premier</option>
-    <option selected>Deuxième</option>
-    <option>Troisième</option>
-</select>
-*/
-
-const select = document.getElementById('s');
-
-// renvoie l'index de l'option sélectionnée
-console.log(select.selectedIndex); // 1
-
-// retourne la valeur de l'option sélectionnée
-console.log(select.options[select.selectedIndex].value) // Deuxième
-
- -

Une meilleure façon de suivre les modifications apportées à la sélection de l'utilisateur consiste à surveiller l'événement {{domxref("HTMLElement/change_event", "change")}} qui se produit sur le <select>. Cela vous indiquera quand la valeur change, et vous pourrez alors mettre à jour ce dont vous avez besoin. Voir l'exemple fourni dans la documentation de l'événement change pour plus de détails.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}Ajoute la propriété autocomplete et la méthode reportValidity().
{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}Ajoute les propriétés autofocus, form, required, labels, selectedOptions, willValidate, validity et validationMessage.
La propriété tabindex et les méthodes blur() et focus() ont été déplacées vers {{domxref("HTMLElement")}}.
Les méthodes item(), namedItem(), checkValidity() et setCustomValidity().
{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM2 HTML')}}options retourne désormais un {{domxref("HTMLOptionsCollection")}}.
length retourne désormais un unsigned long.
{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLSelectElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlselectelement/index.md b/files/fr/web/api/htmlselectelement/index.md new file mode 100644 index 0000000000..9fae5fc68b --- /dev/null +++ b/files/fr/web/api/htmlselectelement/index.md @@ -0,0 +1,152 @@ +--- +title: HTMLSelectElement +slug: Web/API/HTMLSelectElement +translation_of: Web/API/HTMLSelectElement +--- +
{{ APIRef("HTML DOM") }}
+ +

L'interface HTMLSelectElement représente un élément HTML {{HTMLElement("select")}}. Cet élément partage aussi toute les propriétés et méthodes des autres elements HTML via l'interface {{ domxref("HTMLElement") }}.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Propriétés

+ +

Cette interface hérite des propriétés de {{domxref("HTMLElement")}}, de {{domxref("Element")}} et de {{domxref("Node")}}.

+ +
+
{{domxref("HTMLSelectElement.autofocus")}}
+
Un {{jsxref("Boolean")}} reflétant l'attribut HTML {{htmlattrxref("autofocus", "select")}} qui indique si le contrôle doit bénéficier d'une priorité d'entrée au chargement de la page, à moins que l'utilisateur ne passe outre, par exemple en saisissant un autre contrôle. Cet attribut ne peut être spécifié que pour un seul élément associé à un formulaire dans un document.
+
{{domxref("HTMLSelectElement.disabled")}}
+
Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("disabled", "select")}} qui indique si le contrôle est désactivé. S'il est désactivé, il n'accepte pas les clics.
+
{{domxref("HTMLSelectElement.form")}} {{ReadOnlyInline}}
+
Un {{domxref("HTMLFormElement")}} référençant le formulaire auquel cet élément est associé. Si l'élément n'est pas associé à un élément {{HTMLElement("form")}}, il retourne null.
+
{{domxref("HTMLSelectElement.labels")}} {{ReadOnlyInline}}
+
Une {{domxref("NodeList")}} d'éléments {{HTMLElement("label")}} associés à l'élément.
+
{{domxref("HTMLSelectElement.length")}}
+
Un unsigned long, le nombre d'éléments {{HTMLElement("option")}} dans cet élément select.
+
{{domxref("HTMLSelectElement.multiple")}}
+
Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("multiple", "select")}} qui indique si plusieurs éléments peuvent être sélectionnés.
+
{{domxref("HTMLSelectElement.name")}}
+
Une chaîne de caratères {{domxref("DOMString")}} reflétant l'attribut HTML {{htmlattrxref("name", "select")}} contenant le nom de ce contrôle utilisé par les serveurs et les fonctions de recherche DOM.
+
{{domxref("HTMLSelectElement.options")}} {{ReadOnlyInline}}
+
Une {{domxref("HTMLOptionsCollection")}} représentant l'ensemble des {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) contenus par cet élément.
+
{{domxref("HTMLSelectElement.required")}}
+
Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("required", "select")}} qui indique si l'utilisateur doit sélectionner une valeur avant de soumettre le formulaire.
+
{{domxref("HTMLSelectElement.selectedIndex")}}
+
Un long reflétant l'indice du premier élément {{HTMLElement("option")}} sélectionné. La valeur -1 indique qu'aucun élément n'est sélectionné.
+
{{domxref("HTMLSelectElement.selectedOptions")}} {{ReadOnlyInline}}
+
Une {{domxref("HTMLCollection")}} représentant l'ensemble des éléments {{HTMLElement("option")}} qui sont sélectionnés.
+
{{domxref("HTMLSelectElement.size")}}
+
Un long reflétant l'attribut {{htmlattrxref("size", "select")}} attribut HTML, qui contient le nombre d'éléments visibles dans le contrôle. La valeur par défaut est 1, sauf si multiple est true, auquel cas elle est de 4.
+
{{domxref("HTMLSelectElement.type")}} {{ReadOnlyInline}}
+
Une chaîne de caractères {{domxref("DOMString")}} représentant le type du contrôle de formulaire. Lorsque multiple est true, il renvoie "select-multiple" ; sinon, il renvoie "select-one".
+
{{domxref("HTMLSelectElement.validationMessage")}} {{ReadOnlyInline}}
+
Une chaîne de caractères {{domxref("DOMString")}} représentant un message localisé qui décrit les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas un candidat à la validation des contraintes (willValidate est faux), ou s'il satisfait à ses contraintes.
+
{{domxref("HTMLSelectElement.validity")}} {{ReadOnlyInline}}
+
Un {{domxref("ValidityState")}} reflétant l'état de validité dans lequel se trouve ce contrôle.
+
{{domxref("HTMLSelectElement.value")}}
+
Une chapine de caractères {{domxref("DOMString")}} reflétant la valeur du contrôle de formulaire. Renvoie la propriété value du premier élément d'option sélectionné s'il y en a un, sinon la chaîne vide.
+
{{domxref("HTMLSelectElement.willValidate")}} {{ReadOnlyInline}}
+
Un {{jsxref("Boolean")}} qui indique si le bouton est un candidat à la validation des contraintes. Il vaut false si des conditions l'empêchent de bénéficier de la validation par contrainte.
+
+ +

Méthodes

+ +

Cette interface hérite des méthodes de {{domxref("HTMLElement")}}, et de {{domxref("Element")}} et {{domxref("Node")}}.

+ +
+
{{domxref("HTMLSelectElement.add()")}}
+
Ajoute un élément à la collection d'éléments option pour cet élément select.
+
{{domxref("HTMLSelectElement.blur()")}} {{obsolete_inline}}
+
Supprime le focus d'entrée de cet élément. Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}..
+
{{domxref("HTMLSelectElement.checkValidity()")}}
+
Vérifie si l'élément a des contraintes et s'il les satisfait. Si l'élément ne respecte pas ses contraintes, le navigateur déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément (et retourne false).
+
{{domxref("HTMLSelectElement.focus()")}} {{obsolete_inline}}
+
Donne le focus d'entrée à cet élément. Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}.
+
{{domxref("HTMLSelectElement.item()")}}
+
Obtient un élément de la collection d'options de l'élément {{HTMLElement("select")}}. Vous pouvez également accéder à un élément en spécifiant l'index entre des parenthèses ou des crochets de style tableau, sans appeler cette méthode explicitement.
+
{{domxref("HTMLSelectElement.namedItem()")}}
+
Obtient l'élément dans la collection d'options avec le nom spécifié. La chaîne de nom peut correspondre soit au id, soit à l'attribut name d'un nœud d'option. Vous pouvez également accéder à un élément en spécifiant le nom entre des crochets de style tableau ou des parenthèses, sans appeler cette méthode explicitement.
+
{{domxref("HTMLSelectElement.remove()")}}
+
Supprime l'élément à l'indice spécifié de la collection d'options pour cet élément select.
+
{{domxref("HTMLSelectElement.reportValidity()")}}
+
Cette méthode signale à l'utilisateur les problèmes liés aux contraintes sur l'élément, le cas échéant. S'il y a des problèmes, elle déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément, et retourne false ; s'il n'y a pas de problèmes, elle retourne true.
+
{{domxref("HTMLSelectElement.setCustomValidity()")}}
+
Définit le message de validation personnalisé pour l'élément de sélection au message spécifié. Utilisez la chaîne vide pour indiquer que l'élément n'a pas d'erreur de validité personnalisée.
+
+ +

Événements

+ +

Écoutez ces événements en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} ou en affectant un écouteur d'événements à la propriété oneventname de cette interface :

+ +
+
Événement {{domxref("HTMLElement/input_event", "input")}}
+
S'active lorsque la valeur d'un élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} a été modifiée.
+
+ +

Exemple

+ +

Obtenir des informations sur l'option sélectionnée

+ +
/* en supposant que nous ayons le HTML suivant
+<select id='s'>
+    <option>Premier</option>
+    <option selected>Deuxième</option>
+    <option>Troisième</option>
+</select>
+*/
+
+const select = document.getElementById('s');
+
+// renvoie l'index de l'option sélectionnée
+console.log(select.selectedIndex); // 1
+
+// retourne la valeur de l'option sélectionnée
+console.log(select.options[select.selectedIndex].value) // Deuxième
+
+ +

Une meilleure façon de suivre les modifications apportées à la sélection de l'utilisateur consiste à surveiller l'événement {{domxref("HTMLElement/change_event", "change")}} qui se produit sur le <select>. Cela vous indiquera quand la valeur change, et vous pourrez alors mettre à jour ce dont vous avez besoin. Voir l'exemple fourni dans la documentation de l'événement change pour plus de détails.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}Ajoute la propriété autocomplete et la méthode reportValidity().
{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}Ajoute les propriétés autofocus, form, required, labels, selectedOptions, willValidate, validity et validationMessage.
La propriété tabindex et les méthodes blur() et focus() ont été déplacées vers {{domxref("HTMLElement")}}.
Les méthodes item(), namedItem(), checkValidity() et setCustomValidity().
{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM2 HTML')}}options retourne désormais un {{domxref("HTMLOptionsCollection")}}.
length retourne désormais un unsigned long.
{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLSelectElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlselectelement/remove/index.html b/files/fr/web/api/htmlselectelement/remove/index.html deleted file mode 100644 index 71b6fd591e..0000000000 --- a/files/fr/web/api/htmlselectelement/remove/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: HTMLSelectElement.remove() -slug: Web/API/HTMLSelectElement/remove -translation_of: Web/API/HTMLSelectElement/remove ---- -

{{ APIRef("HTML DOM") }}

- -

La méthode HTMLSelectElement.remove() enlève l'option à l'index choisi dans la liste des options de cet objet select.

- -

Syntaxe

- -
collection.remove(index);
-
- -

Paramètre

- - - -
-
- -

Exemple

- -
var sel = document.getElementById("maListe");
-sel.remove(1);
-
-/*
-  Prend l'objet select existant suivant :
-
-  <select id="maListe" name="maListe">
-    <option value="1">Option: Value 1</option>
-    <option value="2">Option: Value 2</option>
-    <option value="3">Option: Value 3</option>
-  </select>
-
-  Et le transforme en:
-
-  <select id="maListe" name="maListe">
-    <option value="1">Option: Value 1</option>
-    <option value="3">Option: Value 3</option>
-  </select>
-*/
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}}{{Spec2('HTML5 W3C')}}Is a snapshot of {{SpecName("HTML WHATWG")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}}{{Spec2('DOM1')}}Initial definition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLSelectElement.remove")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlselectelement/remove/index.md b/files/fr/web/api/htmlselectelement/remove/index.md new file mode 100644 index 0000000000..71b6fd591e --- /dev/null +++ b/files/fr/web/api/htmlselectelement/remove/index.md @@ -0,0 +1,88 @@ +--- +title: HTMLSelectElement.remove() +slug: Web/API/HTMLSelectElement/remove +translation_of: Web/API/HTMLSelectElement/remove +--- +

{{ APIRef("HTML DOM") }}

+ +

La méthode HTMLSelectElement.remove() enlève l'option à l'index choisi dans la liste des options de cet objet select.

+ +

Syntaxe

+ +
collection.remove(index);
+
+ +

Paramètre

+ + + +
+
+ +

Exemple

+ +
var sel = document.getElementById("maListe");
+sel.remove(1);
+
+/*
+  Prend l'objet select existant suivant :
+
+  <select id="maListe" name="maListe">
+    <option value="1">Option: Value 1</option>
+    <option value="2">Option: Value 2</option>
+    <option value="3">Option: Value 3</option>
+  </select>
+
+  Et le transforme en:
+
+  <select id="maListe" name="maListe">
+    <option value="1">Option: Value 1</option>
+    <option value="3">Option: Value 3</option>
+  </select>
+*/
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}}{{Spec2('HTML5 W3C')}}Is a snapshot of {{SpecName("HTML WHATWG")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}}{{Spec2('DOM1')}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLSelectElement.remove")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlselectelement/selectedindex/index.html b/files/fr/web/api/htmlselectelement/selectedindex/index.html deleted file mode 100644 index 4000816569..0000000000 --- a/files/fr/web/api/htmlselectelement/selectedindex/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: HTMLSelectElement.selectedIndex -slug: Web/API/HTMLSelectElement/selectedIndex -translation_of: Web/API/HTMLSelectElement/selectedIndex ---- -
{{APIRef("HTML DOM")}}
- -

HTMLSelectElement.selectedIndex est un long qui représente l'index du premier élément sélectionné {{HTMLElement("option")}}. La valeur -1 indique qu'aucun élément est sélectionné.

- -

Syntaxe

- -
var index = selectElem.selectedIndex;
-selectElem.selectedIndex = index;
-
- -

Exemple

- -

HTML

- -
<p id="p">selectedIndex: 0</p>
-
-<select id="select">
-  <option selected>Option A</option>
-  <option>Option B</option>
-  <option>Option C</option>
-  <option>Option D</option>
-  <option>Option E</option>
-</select>
-
- -

JavaScript

- -
var selectElem = document.getElementById('select');
-var pElem = document.getElementById('p');
-
-// Quand une nouvelle <option> est selectionnée
-selectElem.addEventListener('change', function() {
-  var index = selectElem.selectedIndex;
-  // Rapporter cette donnée au <p>
-  pElem.innerHTML = 'selectedIndex: ' + index;
-})
- -

{{EmbedLiveSample("Exemple", "200px", "80px")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le snapshot précédent, {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}Définition initiale, snapshot de {{SpecName("HTML WHATWG")}}.
- -

Compatibilité entre les navigateurs

- -

{{Compat("api.HTMLSelectElement.selectedIndex")}}

diff --git a/files/fr/web/api/htmlselectelement/selectedindex/index.md b/files/fr/web/api/htmlselectelement/selectedindex/index.md new file mode 100644 index 0000000000..4000816569 --- /dev/null +++ b/files/fr/web/api/htmlselectelement/selectedindex/index.md @@ -0,0 +1,69 @@ +--- +title: HTMLSelectElement.selectedIndex +slug: Web/API/HTMLSelectElement/selectedIndex +translation_of: Web/API/HTMLSelectElement/selectedIndex +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLSelectElement.selectedIndex est un long qui représente l'index du premier élément sélectionné {{HTMLElement("option")}}. La valeur -1 indique qu'aucun élément est sélectionné.

+ +

Syntaxe

+ +
var index = selectElem.selectedIndex;
+selectElem.selectedIndex = index;
+
+ +

Exemple

+ +

HTML

+ +
<p id="p">selectedIndex: 0</p>
+
+<select id="select">
+  <option selected>Option A</option>
+  <option>Option B</option>
+  <option>Option C</option>
+  <option>Option D</option>
+  <option>Option E</option>
+</select>
+
+ +

JavaScript

+ +
var selectElem = document.getElementById('select');
+var pElem = document.getElementById('p');
+
+// Quand une nouvelle <option> est selectionnée
+selectElem.addEventListener('change', function() {
+  var index = selectElem.selectedIndex;
+  // Rapporter cette donnée au <p>
+  pElem.innerHTML = 'selectedIndex: ' + index;
+})
+ +

{{EmbedLiveSample("Exemple", "200px", "80px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le snapshot précédent, {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}Définition initiale, snapshot de {{SpecName("HTML WHATWG")}}.
+ +

Compatibilité entre les navigateurs

+ +

{{Compat("api.HTMLSelectElement.selectedIndex")}}

diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html deleted file mode 100644 index aa5cad6adc..0000000000 --- a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: HTMLSelectElement.setCustomValidity() -slug: Web/API/HTMLSelectElement/setCustomValidity -translation_of: Web/API/HTMLSelectElement/setCustomValidity ---- -
{{ APIRef("HTML DOM") }}
- -

La méthode HTMLSelectElement.setCustomValidity() définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément n'a pas de message d'erreur de validation personnalisé.

- -

Syntaxe

- -
ElmSelectionne.setCustomValidity(message);
- -

Paramètres

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis la dernière snapshot, {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}{{Spec2('HTML5 W3C')}}Définition initiale, snapshot de {{SpecName('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLSelectElement.setCustomValidity")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md new file mode 100644 index 0000000000..aa5cad6adc --- /dev/null +++ b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md @@ -0,0 +1,50 @@ +--- +title: HTMLSelectElement.setCustomValidity() +slug: Web/API/HTMLSelectElement/setCustomValidity +translation_of: Web/API/HTMLSelectElement/setCustomValidity +--- +
{{ APIRef("HTML DOM") }}
+ +

La méthode HTMLSelectElement.setCustomValidity() définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément n'a pas de message d'erreur de validation personnalisé.

+ +

Syntaxe

+ +
ElmSelectionne.setCustomValidity(message);
+ +

Paramètres

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis la dernière snapshot, {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}{{Spec2('HTML5 W3C')}}Définition initiale, snapshot de {{SpecName('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLSelectElement.setCustomValidity")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlshadowelement/index.html b/files/fr/web/api/htmlshadowelement/index.html deleted file mode 100644 index baaff80c85..0000000000 --- a/files/fr/web/api/htmlshadowelement/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: HTMLShadowElement -slug: Web/API/HTMLShadowElement -tags: - - API - - HTML DOM - - Interface - - Obsolete - - Reference -translation_of: Web/API/HTMLShadowElement ---- -
{{APIRef("Web Components")}}{{Deprecated_header}}
- -

L'interface HTMLShadowElement représente un élement HTML {{HTMLElement("shadow")}}, utililisé dans le Shadow DOM.

- -

{{InheritanceDiagram(600, 120)}}

- -

Propriétés

- -

Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.

- -

Méthodes

- -

Cette interface hérite des methodes de {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLContentElement.getDistributedNodes()")}}
-
Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <content>.
-
- -

Spécifications

- -

Cette fonctionnalité n'est plus définie par aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLShadowElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlshadowelement/index.md b/files/fr/web/api/htmlshadowelement/index.md new file mode 100644 index 0000000000..baaff80c85 --- /dev/null +++ b/files/fr/web/api/htmlshadowelement/index.md @@ -0,0 +1,44 @@ +--- +title: HTMLShadowElement +slug: Web/API/HTMLShadowElement +tags: + - API + - HTML DOM + - Interface + - Obsolete + - Reference +translation_of: Web/API/HTMLShadowElement +--- +
{{APIRef("Web Components")}}{{Deprecated_header}}
+ +

L'interface HTMLShadowElement représente un élement HTML {{HTMLElement("shadow")}}, utililisé dans le Shadow DOM.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Propriétés

+ +

Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.

+ +

Méthodes

+ +

Cette interface hérite des methodes de {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLContentElement.getDistributedNodes()")}}
+
Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <content>.
+
+ +

Spécifications

+ +

Cette fonctionnalité n'est plus définie par aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLShadowElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlspanelement/index.html b/files/fr/web/api/htmlspanelement/index.html deleted file mode 100644 index 1746f9c197..0000000000 --- a/files/fr/web/api/htmlspanelement/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: HTMLSpanElement -slug: Web/API/HTMLSpanElement -tags: - - DOM - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLSpanElement ---- -
- {{ ApiRef() }}
-

L'élément DOM span supporte l'interface HTMLSpanElement, qui est dérivé de l'interface {{ domxref("HTMLElement") }}. Il ne supporte aucune propriété ou méthode additionnelle par rapport à HTMLElement.

-

Voir également

- -
-  
diff --git a/files/fr/web/api/htmlspanelement/index.md b/files/fr/web/api/htmlspanelement/index.md new file mode 100644 index 0000000000..1746f9c197 --- /dev/null +++ b/files/fr/web/api/htmlspanelement/index.md @@ -0,0 +1,19 @@ +--- +title: HTMLSpanElement +slug: Web/API/HTMLSpanElement +tags: + - DOM + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLSpanElement +--- +
+ {{ ApiRef() }}
+

L'élément DOM span supporte l'interface HTMLSpanElement, qui est dérivé de l'interface {{ domxref("HTMLElement") }}. Il ne supporte aucune propriété ou méthode additionnelle par rapport à HTMLElement.

+

Voir également

+ +
+  
diff --git a/files/fr/web/api/htmlstyleelement/index.html b/files/fr/web/api/htmlstyleelement/index.html deleted file mode 100644 index bd85fccb5e..0000000000 --- a/files/fr/web/api/htmlstyleelement/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: style -slug: Web/API/HTMLStyleElement -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLStyleElement ---- -

{{ ApiRef() }}

-

Notes

-

Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM :

- -

Informations à déplacer vers d'autres pages

-

L'objet basique style explose les interfaces StyleSheet et CSSStyleSheet de la spécification - - DOM Level 2 Style - . Ces interfaces contiennent des membres comme insertRule, selectorText, et parentStyleSheet permettant d'accéder et de manipuler les règles de style individuelles qui constituent une feuille de style CSS.

-

Pour obtenir les objets style depuis un objet document, il est possible d'utiliser la propriété document.styleSheets et d'accéder aux objets individuels par un index (par exemple, document.styleSheets{{ mediawiki.external(0) }} est la première feuille de style définie pour le document, et ainsi de suite). Bien qu'il existe plusieurs syntaxes pour exprimer les feuilles de style d'un document, les navigateurs basés sur Mozilla gèrent uniquement CSS. Par conséquent, l'objet style récupéré depuis ce tableau implémente à la fois les interfaces StyleSheet et CSSStyleSheet.

-
var ss = document.styleSheets[1];
-ss.cssRules[0].style.backgroundColor="blue";
-
-

La liste des propriétés disponibles dans le DOM pour la propriété de style est donnée dans la liste des propriétés DOM CSS.

-

La propriété style de l'élément peut également être utilisée pour obtenir et définir les styles d'un élément. Cependant, cette propriété renvoie uniquement les attributs de style qui ont été définis - - in-line - ou directement sur cet élément à l'aide de element.style.propertyName (par exemple <td style="background-color: lightblue"> renvoie la chaîne "background-color:lightblue", même si d'autres styles peuvent s'appliquer à l'élément depuis une feuille de style).

-

De plus, lorsque cette propriété est définie sur un élément, elle écrase et efface tout style qui peut avoir été défini ailleurs pour cette propriété particulière de l'élément. Par exemple, définir la propriété border écrasera les réglages définis ailleurs pour la propriété border de cet élément dans la section head du document ou dans des feuilles de style externes. Cependant, cela n'affectera pas les autres déclarations de propriétés pour les styles de cet élément, comme padding, margin ou font par exemple.

-

Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté :

-
<html>
-<head>
-<title>exemple de style simple</title>
-
-<script type="text/javascript">
-
-function alterStyle(elem) {
-  elem.style.background = 'green';
-}
-
-function resetStyle(elemId) {
-  elem = document.getElementById(elemId);
-  elem.style.background = 'white';
-}
-</script>
-
-<style type="text/css">
-#p1 {
- border: solid blue 2px;
-}
-</style>
-</head>
-
-<body>
-
-<!-- passe une référence à l'objet de l'élément comme paramètre 'this'. -->
-<p id="p1" onclick="alterStyle(this)";>
- Cliquez ici pour changer la couleur de fond. </p>
-
-<!-- passe l'id 'p1' d'un autre style de l'élément à modifier. -->
-<button onclick="resetStyle('p1');">Réinitialiser la couleur de fond</button>
-
-</body>
-</html>
-
-

La méthode getComputedStyle() de l'objet document.defaultView renvoie tous les styles qui ont finalement été calculés pour un élément. Consultez l'exemple 6 : getComputedStyle dans le chapitre des exemples pour plus d'informations sur l'utilisation de cette méthode.

-

L'objet DOM style

-

L'objet style représente une règle de style individuelle. Contrairement aux règles individuelles disponibles depuis la collection document.styleSheets, on accède à l'objet depuis l'objet document ou depuis les éléments auxquels ce style est appliqué. Il représente les styles - - in-line - d'un élément particulier.

-

Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet style pour définir des propriétés de style individuelles sur un élément :

-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-  "http://www.w3.org/TR/html4/loose.dtd">
-<html>
- <head>
-  <title>style Property Example</title>
-  <link rel="StyleSheet" href="example.css" type="text/css">
-  <script type="text/javascript">
-    function stilo()
-    {
-      document.getElementById("d").style.color = "orange";
-    }
-  </script>
- </head>
-
- <body>
-  <div id="d" class="thunder">Thunder</div>
-  <button onclick="stilo()">ss</button>
- </body>
-</html>
-
-

Les attributs media et type du style peuvent être donnés ou non. Notez qu'il est également possible de changer les styles d'un élément en obtenant une référence vers cet élément et en utilisant ensuite sa méthode DOM setAttribute() pour spécifier à la fois la propriété CSS et sa valeur.

-
var el = document.getElementById("un-element");
-el.setAttribute("style", "background-color:darkblue;");
-
-


- Soyez cependant conscient que setAttribute écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple style="font-size: 18px", cette valeur serait supprimée par l'utilisation de setAttribute.

-
Propriétés
-
-
- style.media
-
- spécifie le média de destination pour lequel l'information de style est prévue.
-
- style.type
-
- renvoie le type de style appliqué par cette règle.
-
\ No newline at end of file diff --git a/files/fr/web/api/htmlstyleelement/index.md b/files/fr/web/api/htmlstyleelement/index.md new file mode 100644 index 0000000000..bd85fccb5e --- /dev/null +++ b/files/fr/web/api/htmlstyleelement/index.md @@ -0,0 +1,111 @@ +--- +title: style +slug: Web/API/HTMLStyleElement +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLStyleElement +--- +

{{ ApiRef() }}

+

Notes

+

Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM :

+ +

Informations à déplacer vers d'autres pages

+

L'objet basique style explose les interfaces StyleSheet et CSSStyleSheet de la spécification + + DOM Level 2 Style + . Ces interfaces contiennent des membres comme insertRule, selectorText, et parentStyleSheet permettant d'accéder et de manipuler les règles de style individuelles qui constituent une feuille de style CSS.

+

Pour obtenir les objets style depuis un objet document, il est possible d'utiliser la propriété document.styleSheets et d'accéder aux objets individuels par un index (par exemple, document.styleSheets{{ mediawiki.external(0) }} est la première feuille de style définie pour le document, et ainsi de suite). Bien qu'il existe plusieurs syntaxes pour exprimer les feuilles de style d'un document, les navigateurs basés sur Mozilla gèrent uniquement CSS. Par conséquent, l'objet style récupéré depuis ce tableau implémente à la fois les interfaces StyleSheet et CSSStyleSheet.

+
var ss = document.styleSheets[1];
+ss.cssRules[0].style.backgroundColor="blue";
+
+

La liste des propriétés disponibles dans le DOM pour la propriété de style est donnée dans la liste des propriétés DOM CSS.

+

La propriété style de l'élément peut également être utilisée pour obtenir et définir les styles d'un élément. Cependant, cette propriété renvoie uniquement les attributs de style qui ont été définis + + in-line + ou directement sur cet élément à l'aide de element.style.propertyName (par exemple <td style="background-color: lightblue"> renvoie la chaîne "background-color:lightblue", même si d'autres styles peuvent s'appliquer à l'élément depuis une feuille de style).

+

De plus, lorsque cette propriété est définie sur un élément, elle écrase et efface tout style qui peut avoir été défini ailleurs pour cette propriété particulière de l'élément. Par exemple, définir la propriété border écrasera les réglages définis ailleurs pour la propriété border de cet élément dans la section head du document ou dans des feuilles de style externes. Cependant, cela n'affectera pas les autres déclarations de propriétés pour les styles de cet élément, comme padding, margin ou font par exemple.

+

Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté :

+
<html>
+<head>
+<title>exemple de style simple</title>
+
+<script type="text/javascript">
+
+function alterStyle(elem) {
+  elem.style.background = 'green';
+}
+
+function resetStyle(elemId) {
+  elem = document.getElementById(elemId);
+  elem.style.background = 'white';
+}
+</script>
+
+<style type="text/css">
+#p1 {
+ border: solid blue 2px;
+}
+</style>
+</head>
+
+<body>
+
+<!-- passe une référence à l'objet de l'élément comme paramètre 'this'. -->
+<p id="p1" onclick="alterStyle(this)";>
+ Cliquez ici pour changer la couleur de fond. </p>
+
+<!-- passe l'id 'p1' d'un autre style de l'élément à modifier. -->
+<button onclick="resetStyle('p1');">Réinitialiser la couleur de fond</button>
+
+</body>
+</html>
+
+

La méthode getComputedStyle() de l'objet document.defaultView renvoie tous les styles qui ont finalement été calculés pour un élément. Consultez l'exemple 6 : getComputedStyle dans le chapitre des exemples pour plus d'informations sur l'utilisation de cette méthode.

+

L'objet DOM style

+

L'objet style représente une règle de style individuelle. Contrairement aux règles individuelles disponibles depuis la collection document.styleSheets, on accède à l'objet depuis l'objet document ou depuis les éléments auxquels ce style est appliqué. Il représente les styles + + in-line + d'un élément particulier.

+

Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet style pour définir des propriétés de style individuelles sur un élément :

+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+  "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+  <title>style Property Example</title>
+  <link rel="StyleSheet" href="example.css" type="text/css">
+  <script type="text/javascript">
+    function stilo()
+    {
+      document.getElementById("d").style.color = "orange";
+    }
+  </script>
+ </head>
+
+ <body>
+  <div id="d" class="thunder">Thunder</div>
+  <button onclick="stilo()">ss</button>
+ </body>
+</html>
+
+

Les attributs media et type du style peuvent être donnés ou non. Notez qu'il est également possible de changer les styles d'un élément en obtenant une référence vers cet élément et en utilisant ensuite sa méthode DOM setAttribute() pour spécifier à la fois la propriété CSS et sa valeur.

+
var el = document.getElementById("un-element");
+el.setAttribute("style", "background-color:darkblue;");
+
+


+ Soyez cependant conscient que setAttribute écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple style="font-size: 18px", cette valeur serait supprimée par l'utilisation de setAttribute.

+
Propriétés
+
+
+ style.media
+
+ spécifie le média de destination pour lequel l'information de style est prévue.
+
+ style.type
+
+ renvoie le type de style appliqué par cette règle.
+
\ No newline at end of file diff --git a/files/fr/web/api/htmltablecellelement/index.html b/files/fr/web/api/htmltablecellelement/index.html deleted file mode 100644 index f3f3fdf60e..0000000000 --- a/files/fr/web/api/htmltablecellelement/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: HTMLTableCellElement -slug: Web/API/HTMLTableCellElement -tags: - - API - - HTML DOM - - Interface - - Reference -translation_of: Web/API/HTMLTableCellElement ---- -
-
{{ APIRef("HTML DOM") }}
-
- -

L'interface HTMLTableCellElement expose des méthodes et des propriétés spécifiques (s'ajoutant à celles fournies par l'interface générique {{domxref("HTMLElement")}}, également disponibles par héritage) pour l'agencement et la gestion de l'apparence des cellules de tableau dans un document HTML, qu'il s'agisse de cellules d'entête ou de données.

- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLTableCellElement.colSpan")}}
-
Renvoie un entier long positif (unsigned long) représentant le nombre de colonnes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("colspan", "td")}}.
-
{{domxref("HTMLTableCellElement.rowSpan")}}
-
Renvoie un entier long positif (unsigned long) représentant le nombre de lignes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("rowspan", "td")}}.
-
{{domxref("HTMLTableCellElement.headers")}} {{readonlyInline}}
-
Renvoie un objet {{domxref("DOMSettableTokenList")}} décrivant la liste des id des éléments {{HTMLElement("th")}} représentant les entêtes associés à la cellule. C'est une représentation de l'attribut {{htmlattrxref("headers", "td")}}.
-
{{domxref("HTMLTableCellElement.cellIndex")}} {{readonlyInline}}
-
Renvoie un entier long (long) représentant la position de la cellule dans la collection de cellules de l'élement {{HTMLElement("tr")}} auquel elle appartient. Cette propriété renvoie-1 si la cellule n'appartient à aucun élément <tr>.
-
{{domxref("HTMLTableCellElement.align")}} {{obsolete_inline}}
-
Renvoie un chaîne {{domxref("DOMString")}} contenant la valeur énumérée de l'attribut {{htmlattrxref("align", "td")}}. Cette propriété décrit l'alignement du contenu de la cellule compte tenu du contexte ; ses valeurs possibles sont "left", "right", et "center".
-
{{domxref("HTMLTableCellElement.bgColor")}} {{obsolete_inline}}
-
Renvoie une chaîne {{domxref("DOMString")}} contenant la couleur de fond des cellules. C'est une représentation de l'attribut obsolète {{htmlattrxref("bgColor", "td")}}.
-
{{domxref("HTMLTableCellElement.axis")}} {{obsolete_inline}}
-
Renvoie une chaîne {{domxref("DOMString")}} contenant un nom regroupant des cellules de manière virtuelle. C'est une représentation de l'attribut obsolète {{htmlattrxref("axis", "td")}}.
-
{{domxref("HTMLTableCellElement.height")}} {{obsolete_inline}}
-
Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la hauteur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("height", "td")}}.
-
{{domxref("HTMLTableCellElement.width")}} {{obsolete_inline}}
-
Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la largeur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("width", "td")}}.
-
{{domxref("HTMLTableCellElement.ch")}} {{obsolete_inline}}
-
Renvoie une chaîne {{domxref("DOMString")}} contenant un unique caractère. Ce caractère est celui utilisé pour l'alignement de toutes les cellules d'une même colonne. Il représente l'attribut {{htmlattrxref("char", "td")}} et prend par défaut la valeur du séparateur décimal associé à la langue, par exemple '.' pour l'anglais, ou ',' pour le français. Cette propriété était optionnelle et peu supportée.
-
{{domxref("HTMLTableCellElement.chOff")}} {{obsolete_inline}}
-
Renvoie une chaîne {{domxref("DOMString")}} contenant un entier indiquant le nombre de caractères devant être laissés à droite (pour les écritures de gauche à droite ; sinon à gauche pour les écritures de droite à gauche) du caractère défini par HTMLTableCellElement.ch. Cette propriété était optionnelle et peu supportée.
-
{{domxref("HTMLTableCellElement.noWrap")}} {{obsolete_inline}}
-
Renvoie un valeur booléenne {{domxref("Boolean")}} représentant l'attribut {{htmlattrxref("nowrap", "td")}} et indiquant si le contenu de la cellule peut être scindé en plusieurs lignes.
-
{{domxref("HTMLTableCellElement.vAlign")}} {{obsolete_inline}}
-
Renvoie une chaîne {{domxref("DOMString")}} contenant une valeur énumérée indiquant le type d'alignement vertical attendu du contenu de la cellule. Cette propriété représente l'attribut {{htmlattrxref("valign", "td")}} et peut prendre l'une des valeurs suivantes : "top", "middle", "bottom", ou "baseline".
-
- -

Méthodes

- -

Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("HTMLElement")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}{{Spec2('HTML5 W3C')}}Les propriétés suivantes sont devenues obsolètes : align, axis, bgColor, height, width, ch, chOff, noWrap, et vAlign.
- La propriété headers est maintenant en lecture seule et renvoie un objet {{domxref("DOMSettableTokenList")}} au lieu d'une simple chaîne {{domxref("DOMString")}}.
- Les propriétés colspan et rowspan renvoient maintenant des entiers long positifs (unsigned long).
{{SpecName('DOM2 HTML', 'html.html#ID-82915075', 'HTMLTableCellElement')}}{{Spec2('DOM2 HTML')}}La propriété cellIndex est maintenant accessible en lecture seule.
{{SpecName('DOM1', 'level-one-html.html#ID-82915075', 'HTMLTableCellElement')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLTableCellElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmltablecellelement/index.md b/files/fr/web/api/htmltablecellelement/index.md new file mode 100644 index 0000000000..f3f3fdf60e --- /dev/null +++ b/files/fr/web/api/htmltablecellelement/index.md @@ -0,0 +1,96 @@ +--- +title: HTMLTableCellElement +slug: Web/API/HTMLTableCellElement +tags: + - API + - HTML DOM + - Interface + - Reference +translation_of: Web/API/HTMLTableCellElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

L'interface HTMLTableCellElement expose des méthodes et des propriétés spécifiques (s'ajoutant à celles fournies par l'interface générique {{domxref("HTMLElement")}}, également disponibles par héritage) pour l'agencement et la gestion de l'apparence des cellules de tableau dans un document HTML, qu'il s'agisse de cellules d'entête ou de données.

+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLTableCellElement.colSpan")}}
+
Renvoie un entier long positif (unsigned long) représentant le nombre de colonnes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("colspan", "td")}}.
+
{{domxref("HTMLTableCellElement.rowSpan")}}
+
Renvoie un entier long positif (unsigned long) représentant le nombre de lignes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("rowspan", "td")}}.
+
{{domxref("HTMLTableCellElement.headers")}} {{readonlyInline}}
+
Renvoie un objet {{domxref("DOMSettableTokenList")}} décrivant la liste des id des éléments {{HTMLElement("th")}} représentant les entêtes associés à la cellule. C'est une représentation de l'attribut {{htmlattrxref("headers", "td")}}.
+
{{domxref("HTMLTableCellElement.cellIndex")}} {{readonlyInline}}
+
Renvoie un entier long (long) représentant la position de la cellule dans la collection de cellules de l'élement {{HTMLElement("tr")}} auquel elle appartient. Cette propriété renvoie-1 si la cellule n'appartient à aucun élément <tr>.
+
{{domxref("HTMLTableCellElement.align")}} {{obsolete_inline}}
+
Renvoie un chaîne {{domxref("DOMString")}} contenant la valeur énumérée de l'attribut {{htmlattrxref("align", "td")}}. Cette propriété décrit l'alignement du contenu de la cellule compte tenu du contexte ; ses valeurs possibles sont "left", "right", et "center".
+
{{domxref("HTMLTableCellElement.bgColor")}} {{obsolete_inline}}
+
Renvoie une chaîne {{domxref("DOMString")}} contenant la couleur de fond des cellules. C'est une représentation de l'attribut obsolète {{htmlattrxref("bgColor", "td")}}.
+
{{domxref("HTMLTableCellElement.axis")}} {{obsolete_inline}}
+
Renvoie une chaîne {{domxref("DOMString")}} contenant un nom regroupant des cellules de manière virtuelle. C'est une représentation de l'attribut obsolète {{htmlattrxref("axis", "td")}}.
+
{{domxref("HTMLTableCellElement.height")}} {{obsolete_inline}}
+
Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la hauteur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("height", "td")}}.
+
{{domxref("HTMLTableCellElement.width")}} {{obsolete_inline}}
+
Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la largeur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("width", "td")}}.
+
{{domxref("HTMLTableCellElement.ch")}} {{obsolete_inline}}
+
Renvoie une chaîne {{domxref("DOMString")}} contenant un unique caractère. Ce caractère est celui utilisé pour l'alignement de toutes les cellules d'une même colonne. Il représente l'attribut {{htmlattrxref("char", "td")}} et prend par défaut la valeur du séparateur décimal associé à la langue, par exemple '.' pour l'anglais, ou ',' pour le français. Cette propriété était optionnelle et peu supportée.
+
{{domxref("HTMLTableCellElement.chOff")}} {{obsolete_inline}}
+
Renvoie une chaîne {{domxref("DOMString")}} contenant un entier indiquant le nombre de caractères devant être laissés à droite (pour les écritures de gauche à droite ; sinon à gauche pour les écritures de droite à gauche) du caractère défini par HTMLTableCellElement.ch. Cette propriété était optionnelle et peu supportée.
+
{{domxref("HTMLTableCellElement.noWrap")}} {{obsolete_inline}}
+
Renvoie un valeur booléenne {{domxref("Boolean")}} représentant l'attribut {{htmlattrxref("nowrap", "td")}} et indiquant si le contenu de la cellule peut être scindé en plusieurs lignes.
+
{{domxref("HTMLTableCellElement.vAlign")}} {{obsolete_inline}}
+
Renvoie une chaîne {{domxref("DOMString")}} contenant une valeur énumérée indiquant le type d'alignement vertical attendu du contenu de la cellule. Cette propriété représente l'attribut {{htmlattrxref("valign", "td")}} et peut prendre l'une des valeurs suivantes : "top", "middle", "bottom", ou "baseline".
+
+ +

Méthodes

+ +

Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("HTMLElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}{{Spec2('HTML5 W3C')}}Les propriétés suivantes sont devenues obsolètes : align, axis, bgColor, height, width, ch, chOff, noWrap, et vAlign.
+ La propriété headers est maintenant en lecture seule et renvoie un objet {{domxref("DOMSettableTokenList")}} au lieu d'une simple chaîne {{domxref("DOMString")}}.
+ Les propriétés colspan et rowspan renvoient maintenant des entiers long positifs (unsigned long).
{{SpecName('DOM2 HTML', 'html.html#ID-82915075', 'HTMLTableCellElement')}}{{Spec2('DOM2 HTML')}}La propriété cellIndex est maintenant accessible en lecture seule.
{{SpecName('DOM1', 'level-one-html.html#ID-82915075', 'HTMLTableCellElement')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLTableCellElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmltableelement/caption/index.html b/files/fr/web/api/htmltableelement/caption/index.html deleted file mode 100644 index b7c559b5a8..0000000000 --- a/files/fr/web/api/htmltableelement/caption/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: table.caption -slug: Web/API/HTMLTableElement/caption -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLTableElement/caption ---- -

{{ ApiRef() }}

-

Résumé

-

caption renvoie la légende du tableau.

-

Syntaxe

-
string = table.caption
-
-

Exemple

-
if (table.caption) {
-  // On peut alors faire quelque chose avec la légende du tableau
-}
-
-

Notes

-

Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau.

-

Spécification

- \ No newline at end of file diff --git a/files/fr/web/api/htmltableelement/caption/index.md b/files/fr/web/api/htmltableelement/caption/index.md new file mode 100644 index 0000000000..b7c559b5a8 --- /dev/null +++ b/files/fr/web/api/htmltableelement/caption/index.md @@ -0,0 +1,25 @@ +--- +title: table.caption +slug: Web/API/HTMLTableElement/caption +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLTableElement/caption +--- +

{{ ApiRef() }}

+

Résumé

+

caption renvoie la légende du tableau.

+

Syntaxe

+
string = table.caption
+
+

Exemple

+
if (table.caption) {
+  // On peut alors faire quelque chose avec la légende du tableau
+}
+
+

Notes

+

Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau.

+

Spécification

+ \ No newline at end of file diff --git a/files/fr/web/api/htmltableelement/index.html b/files/fr/web/api/htmltableelement/index.html deleted file mode 100644 index e14d2f1f47..0000000000 --- a/files/fr/web/api/htmltableelement/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: table -slug: Web/API/HTMLTableElement -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLTableElement ---- -
- {{ ApiRef() }}
-

Interface de l'élément HTML Table

-

Les objets table exposent l'interface HTMLTableElement (traduction), qui fournit des propriétés et méthodes spécialisées (outre l'interface des objets element qu'ils acquièrent également par héritage) pour manipuler la disposition et la présentation des tableaux en HTML.

-

Propriétés

-
-
- table.caption
-
- caption renvoie la légende du tableau.
-
- table.tHead
-
- tHead renvoie l'en-tête du tableau.
-
- table.tFoot
-
- tFoot renvoie le pied du tableau.
-
- table.rows
-
- rows renvoie les lignes du tableau.
-
- table.tBodies
-
- tBodies renvoie les corps du tableau.
-
-
-
- table.align {{ Deprecated_inline() }}
-
- align obtient ou définit l'alignement du tableau.
-
- table.bgColor {{ Deprecated_inline() }}
-
- bgColor obtient ou définit la couleur de fond du tableau.
-
- table.border {{ Deprecated_inline() }}
-
- border obtient ou défini la bordure du tableau.
-
- table.cellPadding
-
- cellPadding obtient ou définit les marges internes ( - - padding - ) des cellules.
-
- table.cellSpacing
-
- cellSpacing obtient ou définit l'espace entre les cellules.
-
- table.frame
-
- frame spécifie les côtés du tableau ayant une bordure.
-
- table.rules
-
- rules spécifie les bordures intérieures visibles.
-
- table.summary
-
- summary obtient ou définit le résumé du tableau.
-
- table.width
-
- width obtient ou définit la largeur du tableau.
-
-

Méthodes

-
-
- table.createTHead
-
- createTHead crée un en-tête de tableau.
-
- table.deleteTHead
-
- deleteTHead retire l'en-tête du tableau.
-
- table.createTFoot
-
- createTFoot crée un pied de tableau.
-
- table.deleteTFoot
-
- deleteTFoot retire un pied de tableau.
-
- table.createCaption
-
- createCaption crée une nouvelle légende pour le tableau.
-
- table.deleteCaption
-
- deleteCaption retire la légende d'un tableau.
-
- table.insertRow
-
- insertRow insère une nouvelle ligne.
-
- table.deleteRow
-
- deleteRow retire une ligne.
-
diff --git a/files/fr/web/api/htmltableelement/index.md b/files/fr/web/api/htmltableelement/index.md new file mode 100644 index 0000000000..e14d2f1f47 --- /dev/null +++ b/files/fr/web/api/htmltableelement/index.md @@ -0,0 +1,110 @@ +--- +title: table +slug: Web/API/HTMLTableElement +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLTableElement +--- +
+ {{ ApiRef() }}
+

Interface de l'élément HTML Table

+

Les objets table exposent l'interface HTMLTableElement (traduction), qui fournit des propriétés et méthodes spécialisées (outre l'interface des objets element qu'ils acquièrent également par héritage) pour manipuler la disposition et la présentation des tableaux en HTML.

+

Propriétés

+
+
+ table.caption
+
+ caption renvoie la légende du tableau.
+
+ table.tHead
+
+ tHead renvoie l'en-tête du tableau.
+
+ table.tFoot
+
+ tFoot renvoie le pied du tableau.
+
+ table.rows
+
+ rows renvoie les lignes du tableau.
+
+ table.tBodies
+
+ tBodies renvoie les corps du tableau.
+
+
+
+ table.align {{ Deprecated_inline() }}
+
+ align obtient ou définit l'alignement du tableau.
+
+ table.bgColor {{ Deprecated_inline() }}
+
+ bgColor obtient ou définit la couleur de fond du tableau.
+
+ table.border {{ Deprecated_inline() }}
+
+ border obtient ou défini la bordure du tableau.
+
+ table.cellPadding
+
+ cellPadding obtient ou définit les marges internes ( + + padding + ) des cellules.
+
+ table.cellSpacing
+
+ cellSpacing obtient ou définit l'espace entre les cellules.
+
+ table.frame
+
+ frame spécifie les côtés du tableau ayant une bordure.
+
+ table.rules
+
+ rules spécifie les bordures intérieures visibles.
+
+ table.summary
+
+ summary obtient ou définit le résumé du tableau.
+
+ table.width
+
+ width obtient ou définit la largeur du tableau.
+
+

Méthodes

+
+
+ table.createTHead
+
+ createTHead crée un en-tête de tableau.
+
+ table.deleteTHead
+
+ deleteTHead retire l'en-tête du tableau.
+
+ table.createTFoot
+
+ createTFoot crée un pied de tableau.
+
+ table.deleteTFoot
+
+ deleteTFoot retire un pied de tableau.
+
+ table.createCaption
+
+ createCaption crée une nouvelle légende pour le tableau.
+
+ table.deleteCaption
+
+ deleteCaption retire la légende d'un tableau.
+
+ table.insertRow
+
+ insertRow insère une nouvelle ligne.
+
+ table.deleteRow
+
+ deleteRow retire une ligne.
+
diff --git a/files/fr/web/api/htmltableelement/insertrow/index.html b/files/fr/web/api/htmltableelement/insertrow/index.html deleted file mode 100644 index f07140adda..0000000000 --- a/files/fr/web/api/htmltableelement/insertrow/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: table.insertRow -slug: Web/API/HTMLTableElement/insertRow -tags: - - API - - DOM HTML - - HTMLTableElement - - Méthode - - NeedsMobileBrowserCompatibility - - Reference -translation_of: Web/API/HTMLTableElement/insertRow ---- -
-

{{APIRef("HTML DOM")}}

- -

La méthode HTMLTableElement.insertRow() insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne.

-
- -

Syntaxe

- -
var ligne = HTMLTableElement.insertRow(optionnel indice = -1);
- - - -

Exemple

- -
<table id="TableA">
-<tr>
-<td>Ancienne ligne supérieure</td>
-</tr>
-</table>
-<script type="text/javascript">
-
-function ajouteLigne(tableID) {
-  // Récupération d'une référence à la table
-  var refTable = document.getElementById(tableID);
-
-  // Insère une ligne dans la table à l'indice de ligne 0
-  var nouvelleLigne = refTable.insertRow(0);
-
-  // Insère une cellule dans la ligne à l'indice 0
-  var nouvelleCellule = nouvelleLigne.insertCell(0);
-
-  // Ajoute un nœud texte à la cellule
-  var nouveauTexte = document.createTextNode('Nouvelle ligne supérieure')
-  nouvelleCellule.appendChild(nouveauTexte);
-}
-
-// Appelle ajouteLigne() avec l'ID d'une table
-ajouteLigne('TableA');
-
-</script>
- -

Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD.

- -

Remarquez que insertRow insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si document.createElement() avait été utilisé pour créer un nouvel élement TR.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}{{Spec2("DOM2 HTML")}}Spécifie plus en détail où la ligne est insérée.
{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}{{Spec2("DOM1")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLTableElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmltableelement/insertrow/index.md b/files/fr/web/api/htmltableelement/insertrow/index.md new file mode 100644 index 0000000000..f07140adda --- /dev/null +++ b/files/fr/web/api/htmltableelement/insertrow/index.md @@ -0,0 +1,100 @@ +--- +title: table.insertRow +slug: Web/API/HTMLTableElement/insertRow +tags: + - API + - DOM HTML + - HTMLTableElement + - Méthode + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/API/HTMLTableElement/insertRow +--- +
+

{{APIRef("HTML DOM")}}

+ +

La méthode HTMLTableElement.insertRow() insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne.

+
+ +

Syntaxe

+ +
var ligne = HTMLTableElement.insertRow(optionnel indice = -1);
+ + + +

Exemple

+ +
<table id="TableA">
+<tr>
+<td>Ancienne ligne supérieure</td>
+</tr>
+</table>
+<script type="text/javascript">
+
+function ajouteLigne(tableID) {
+  // Récupération d'une référence à la table
+  var refTable = document.getElementById(tableID);
+
+  // Insère une ligne dans la table à l'indice de ligne 0
+  var nouvelleLigne = refTable.insertRow(0);
+
+  // Insère une cellule dans la ligne à l'indice 0
+  var nouvelleCellule = nouvelleLigne.insertCell(0);
+
+  // Ajoute un nœud texte à la cellule
+  var nouveauTexte = document.createTextNode('Nouvelle ligne supérieure')
+  nouvelleCellule.appendChild(nouveauTexte);
+}
+
+// Appelle ajouteLigne() avec l'ID d'une table
+ajouteLigne('TableA');
+
+</script>
+ +

Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD.

+ +

Remarquez que insertRow insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si document.createElement() avait été utilisé pour créer un nouvel élement TR.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}{{Spec2("DOM2 HTML")}}Spécifie plus en détail où la ligne est insérée.
{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}{{Spec2("DOM1")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLTableElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmltablerowelement/index.html b/files/fr/web/api/htmltablerowelement/index.html deleted file mode 100644 index a382d43e45..0000000000 --- a/files/fr/web/api/htmltablerowelement/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: HTMLTableRowElement -slug: Web/API/HTMLTableRowElement -tags: - - API - - HTML DOM - - Interface - - Reference - - TopicStub -translation_of: Web/API/HTMLTableRowElement ---- -
{{ APIRef("HTML DOM") }}
- -

L'interface HTMLTableRowElement fournit des propriétés et des méthodes spéciales (au-delà de l'interface {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler la mise en page et la présentation des lignes dans un tableau HTML.

- -

{{InheritanceDiagram(600, 120)}}

- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLTableRowElement.align")}} {{obsolete_inline}}
-
Est un {{domxref("DOMString")}} contenant une valeur énumérée reflétant l'attribut {{htmlattrxref("align", "tr")}}. Il indique l'alignement du contenu de l'élément par rapport au contexte environnant. Les valeurs possibles sont "left", "right", et "center".
-
{{domxref("HTMLTableRowElement.bgColor")}} {{obsolete_inline}}
-
Est un {{domxref("DOMString")}} contenant la couleur de fond des cellules. Il reflète l'attribut obsolète {{htmlattrxref("bgColor", "tr")}} attribute.
-
{{domxref("HTMLTableRowElement.cells")}} {{readonlyInline}}
-
Renvoie une {{domxref("HTMLCollection")}} en direct contenant les cellules de la ligne. La HTMLCollection est active et est automatiquement mise à jour lorsque des cellules sont ajoutées ou supprimées.
-
{{domxref("HTMLTableRowElement.ch")}} {{obsolete_inline}}
-
Est un {{domxref("DOMString")}} contenant un seul caractère. Ce caractère est celui sur lequel aligner toutes les cellules d'une colonne. Il reflète {{htmlattrxref("char", "tr")}} et par défaut les points décimaux associés à la langue, par exemple '.' pour l'anglais, ou ',' pour le français. Cette propriété était facultative et n'était pas très bien prise en charge.
-
{{domxref("HTMLTableRowElement.chOff")}} {{obsolete_inline}}
-
Est un {{domxref("DOMString")}} contenant un entier indiquant combien de caractère doivent être laissés à droite (pour les scripts de gauche à droite; ou à gauche pour les scripts de droite à gauche) du caractère défini par HTMLTableRowElement.ch. Cette propriété était facultative et n'était pas très bien prise en charge.
-
{{domxref("HTMLTableRowElement.rowIndex")}} {{readonlyInline}}
-
Renvoie une valeur long qui donne la position logique de la ligne dans la table entière. Si la ligne ne fait pas partie d'une table, renvoie -1.
-
{{domxref("HTMLTableRowElement.sectionRowIndex")}} {{readonlyInline}}
-
Renvoie une valeur long qui donne la position logique de la ligne dans la section de table à laquelle elle appartient. Si la ligne ne fait pas partie d'une section, renvoie -1.
-
{{domxref("HTMLTableRowElement.vAlign")}} {{obsolete_inline}}
-
Est un {{domxref("DOMString")}} représentant une valeur énumérée indiquant comment le contenu de la cellule doit être aligné verticalement. Il reflète l'attribut {{htmlattrxref("valign", "tr")}} et peut avoir l'une des valeurs suivantes : "top", "middle", "bottom", ou "baseline".
-
- -

Méthodes

- -

Hérite des méthodes de son parent, {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLTableRowElement.deleteCell()")}}
-
Supprime la cellule à la position donnée dans la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à 0, elle déclenche une {{domxref("DOMException")}} avec la valeur IndexSizeError.
-
{{domxref("HTMLTableRowElement.insertCell()")}}
-
Insère une nouvelle cellule juste avant la position donnée dans la ligne. Si la position donnée n'est pas donnée ou est -1, elle ajoute la cellule à la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à -1, elle déclenche une {{domxref("DOMException")}} avec la valeur IndexSizeError. Renvoie une référence à un HTMLTableCellElement [en-US].
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommantaire
{{SpecName('HTML WHATWG', "#htmltablerowelement", "HTMLTableRowElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "tabular-data.html#the-tr-element", "HTMLTableRowElement")}}{{Spec2('HTML5 W3C')}}Le paramètre de insertCell est désormais facultatif et vaut par défaut -1.
{{SpecName('DOM2 HTML', 'html.html#ID-6986576', 'HTMLTableRowElement')}}{{Spec2('DOM2 HTML')}}Les propriétés cells, rowIndex, et selectionRowIndex sont désormais en lecture seule.
- Les méthodes insertCell et deleteCell peuvent déclencher des exceptions.
{{SpecName('DOM1', 'level-one-html.html#ID-6986576', 'HTMLTableRowElement')}}{{Spec2('DOM1')}}Défintion initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLTableRowElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmltablerowelement/index.md b/files/fr/web/api/htmltablerowelement/index.md new file mode 100644 index 0000000000..a382d43e45 --- /dev/null +++ b/files/fr/web/api/htmltablerowelement/index.md @@ -0,0 +1,93 @@ +--- +title: HTMLTableRowElement +slug: Web/API/HTMLTableRowElement +tags: + - API + - HTML DOM + - Interface + - Reference + - TopicStub +translation_of: Web/API/HTMLTableRowElement +--- +
{{ APIRef("HTML DOM") }}
+ +

L'interface HTMLTableRowElement fournit des propriétés et des méthodes spéciales (au-delà de l'interface {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler la mise en page et la présentation des lignes dans un tableau HTML.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLTableRowElement.align")}} {{obsolete_inline}}
+
Est un {{domxref("DOMString")}} contenant une valeur énumérée reflétant l'attribut {{htmlattrxref("align", "tr")}}. Il indique l'alignement du contenu de l'élément par rapport au contexte environnant. Les valeurs possibles sont "left", "right", et "center".
+
{{domxref("HTMLTableRowElement.bgColor")}} {{obsolete_inline}}
+
Est un {{domxref("DOMString")}} contenant la couleur de fond des cellules. Il reflète l'attribut obsolète {{htmlattrxref("bgColor", "tr")}} attribute.
+
{{domxref("HTMLTableRowElement.cells")}} {{readonlyInline}}
+
Renvoie une {{domxref("HTMLCollection")}} en direct contenant les cellules de la ligne. La HTMLCollection est active et est automatiquement mise à jour lorsque des cellules sont ajoutées ou supprimées.
+
{{domxref("HTMLTableRowElement.ch")}} {{obsolete_inline}}
+
Est un {{domxref("DOMString")}} contenant un seul caractère. Ce caractère est celui sur lequel aligner toutes les cellules d'une colonne. Il reflète {{htmlattrxref("char", "tr")}} et par défaut les points décimaux associés à la langue, par exemple '.' pour l'anglais, ou ',' pour le français. Cette propriété était facultative et n'était pas très bien prise en charge.
+
{{domxref("HTMLTableRowElement.chOff")}} {{obsolete_inline}}
+
Est un {{domxref("DOMString")}} contenant un entier indiquant combien de caractère doivent être laissés à droite (pour les scripts de gauche à droite; ou à gauche pour les scripts de droite à gauche) du caractère défini par HTMLTableRowElement.ch. Cette propriété était facultative et n'était pas très bien prise en charge.
+
{{domxref("HTMLTableRowElement.rowIndex")}} {{readonlyInline}}
+
Renvoie une valeur long qui donne la position logique de la ligne dans la table entière. Si la ligne ne fait pas partie d'une table, renvoie -1.
+
{{domxref("HTMLTableRowElement.sectionRowIndex")}} {{readonlyInline}}
+
Renvoie une valeur long qui donne la position logique de la ligne dans la section de table à laquelle elle appartient. Si la ligne ne fait pas partie d'une section, renvoie -1.
+
{{domxref("HTMLTableRowElement.vAlign")}} {{obsolete_inline}}
+
Est un {{domxref("DOMString")}} représentant une valeur énumérée indiquant comment le contenu de la cellule doit être aligné verticalement. Il reflète l'attribut {{htmlattrxref("valign", "tr")}} et peut avoir l'une des valeurs suivantes : "top", "middle", "bottom", ou "baseline".
+
+ +

Méthodes

+ +

Hérite des méthodes de son parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLTableRowElement.deleteCell()")}}
+
Supprime la cellule à la position donnée dans la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à 0, elle déclenche une {{domxref("DOMException")}} avec la valeur IndexSizeError.
+
{{domxref("HTMLTableRowElement.insertCell()")}}
+
Insère une nouvelle cellule juste avant la position donnée dans la ligne. Si la position donnée n'est pas donnée ou est -1, elle ajoute la cellule à la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à -1, elle déclenche une {{domxref("DOMException")}} avec la valeur IndexSizeError. Renvoie une référence à un HTMLTableCellElement [en-US].
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommantaire
{{SpecName('HTML WHATWG', "#htmltablerowelement", "HTMLTableRowElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "tabular-data.html#the-tr-element", "HTMLTableRowElement")}}{{Spec2('HTML5 W3C')}}Le paramètre de insertCell est désormais facultatif et vaut par défaut -1.
{{SpecName('DOM2 HTML', 'html.html#ID-6986576', 'HTMLTableRowElement')}}{{Spec2('DOM2 HTML')}}Les propriétés cells, rowIndex, et selectionRowIndex sont désormais en lecture seule.
+ Les méthodes insertCell et deleteCell peuvent déclencher des exceptions.
{{SpecName('DOM1', 'level-one-html.html#ID-6986576', 'HTMLTableRowElement')}}{{Spec2('DOM1')}}Défintion initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLTableRowElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.html b/files/fr/web/api/htmltablerowelement/insertcell/index.html deleted file mode 100644 index 7b4ebb53b1..0000000000 --- a/files/fr/web/api/htmltablerowelement/insertcell/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: HTMLTableRowElement.insertCell() -slug: Web/API/HTMLTableRowElement/insertCell -translation_of: Web/API/HTMLTableRowElement/insertCell ---- -
{{APIRef("HTML DOM")}}
- -

La méthode HTMLTableRowElement.insertCell() insère une nouvelle cellule ({{HtmlElement("td")}}) dans une ligne de tableau ({{HtmlElement("tr")}}) et renvoie une référence sur cette cellule.

- -
-

Note : insertCell() insère la cellule directement dans la ligne. La cellule n’a pas besoin d’être ajoutée séparément comme cela serait le cas si {{domxref("Document.createElement()")}} avait été utilisé pour créer le nouvel élément <td>.

-
- -

Syntaxe

- -
var newCell = HTMLTableRowElement.insertCell(index);
-
- -

{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}.

- -

Paramètres

- -
-
index {{optional_inline}}
-
index est l’index de cellule de la nouvelle cellule. Si index est -1 ou égal au nombre actuel de cellules, la nouvelle cellule est ajoutée à la fin la ligne. Si index est supérieur au nombre de cellules, une exception IndexSizeError sera levée. Si index est omis, la valeur sera -1 par défaut.
-
- -

Valeur de retour

- -

newCell est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule.

- -

Exemple

- -

Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table.

- -

Nous utilisons ensuite insertCell(0) pour insérer une nouvelle cellule dans la nouvelle ligne (pour être du HTML valide, un <tr> doit avoir au moins un élément <td>). Enfin, nous ajoutons du texte à la cellule en utilisant {{domxref("Document.createTextNode()")}} et {{domxref("Node.appendChild()")}}.

- -

HTML

- -
<table id="my-table">
-  <tr><td>Row 1</td></tr>
-  <tr><td>Row 2</td></tr>
-  <tr><td>Row 3</td></tr>
-</table>
- -

JavaScript

- -
function addRow(tableID) {
-  // Obtient une référence sur la table
-  let tableRef = document.getElementById(tableID);
-
-  // Insère une ligne à la fin de la table
-  let newRow = tableRef.insertRow(-1);
-
-  // Insère une cellule dans la ligne à l’index 0
-  let newCell = newRow.insertCell(0);
-
-  // Ajoute un nœud texte à la cellule
-  let newText = document.createTextNode('New bottom row');
-  newCell.appendChild(newText);
-}
-
-// Appelle addRow() avec l’ID de la table
-addRow('my-table');
- -

Résultat

- -

{{EmbedLiveSample("Example")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}}{{Spec2("DOM2 HTML")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLTableRowElement.insertCell")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.md b/files/fr/web/api/htmltablerowelement/insertcell/index.md new file mode 100644 index 0000000000..7b4ebb53b1 --- /dev/null +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.md @@ -0,0 +1,103 @@ +--- +title: HTMLTableRowElement.insertCell() +slug: Web/API/HTMLTableRowElement/insertCell +translation_of: Web/API/HTMLTableRowElement/insertCell +--- +
{{APIRef("HTML DOM")}}
+ +

La méthode HTMLTableRowElement.insertCell() insère une nouvelle cellule ({{HtmlElement("td")}}) dans une ligne de tableau ({{HtmlElement("tr")}}) et renvoie une référence sur cette cellule.

+ +
+

Note : insertCell() insère la cellule directement dans la ligne. La cellule n’a pas besoin d’être ajoutée séparément comme cela serait le cas si {{domxref("Document.createElement()")}} avait été utilisé pour créer le nouvel élément <td>.

+
+ +

Syntaxe

+ +
var newCell = HTMLTableRowElement.insertCell(index);
+
+ +

{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}.

+ +

Paramètres

+ +
+
index {{optional_inline}}
+
index est l’index de cellule de la nouvelle cellule. Si index est -1 ou égal au nombre actuel de cellules, la nouvelle cellule est ajoutée à la fin la ligne. Si index est supérieur au nombre de cellules, une exception IndexSizeError sera levée. Si index est omis, la valeur sera -1 par défaut.
+
+ +

Valeur de retour

+ +

newCell est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule.

+ +

Exemple

+ +

Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table.

+ +

Nous utilisons ensuite insertCell(0) pour insérer une nouvelle cellule dans la nouvelle ligne (pour être du HTML valide, un <tr> doit avoir au moins un élément <td>). Enfin, nous ajoutons du texte à la cellule en utilisant {{domxref("Document.createTextNode()")}} et {{domxref("Node.appendChild()")}}.

+ +

HTML

+ +
<table id="my-table">
+  <tr><td>Row 1</td></tr>
+  <tr><td>Row 2</td></tr>
+  <tr><td>Row 3</td></tr>
+</table>
+ +

JavaScript

+ +
function addRow(tableID) {
+  // Obtient une référence sur la table
+  let tableRef = document.getElementById(tableID);
+
+  // Insère une ligne à la fin de la table
+  let newRow = tableRef.insertRow(-1);
+
+  // Insère une cellule dans la ligne à l’index 0
+  let newCell = newRow.insertCell(0);
+
+  // Ajoute un nœud texte à la cellule
+  let newText = document.createTextNode('New bottom row');
+  newCell.appendChild(newText);
+}
+
+// Appelle addRow() avec l’ID de la table
+addRow('my-table');
+ +

Résultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}}{{Spec2("DOM2 HTML")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLTableRowElement.insertCell")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmltimeelement/datetime/index.html b/files/fr/web/api/htmltimeelement/datetime/index.html deleted file mode 100644 index 48df191248..0000000000 --- a/files/fr/web/api/htmltimeelement/datetime/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: HTMLTimeElement.dateTime -slug: Web/API/HTMLTimeElement/dateTime -translation_of: Web/API/HTMLTimeElement/dateTime ---- -
{{ APIRef("HTML DOM") }}
- -
La propriété HTMLTimeElement.dateTime est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{ htmlattrxref("datetime", "time") }}, contenant une date et une heure interprétable par un ordinateur.
- -

Le format de la chaîne de caractères doit correspondre à l'une des micro-syntaxes HTML suivantes:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MicrosyntaxeDescriptionExemples
MoisAAAA-MM2011-11, 2013-05
-

Date

- 		AAAA-MM-DD1887-12-01
Date sans l'annéeMM-DD11-12
HeureHH:MM
- HH:MM:SS
- HH:MM:SS.mmm		23:59
- 12:15:47
- 12:15:52.998
Date et heure localeAAAA-MM-DD HH:MM
- AAAA-MM-DD HH:MM:SS
- AAAA-MM-DD HH:MM:SS.mmm
- AAAA-MM-DDTHH:MM
- AAAA-MM-DDTHH:MM:SS
- AAAA-MM-DDTHH:MM:SS.mmm		2013-12-25 11:12
- 1972-07-25 13:43:07
- 1941-03-15 07:06:23.678
- 2013-12-25T11:12
- 1972-07-25T13:43:07
- 1941-03-15T07:06:23.678
Décalage horaireZ
- +HHMM
- +HH:MM
- -HHMM
- -HH:MM		Z
- +0200
- +04:30
- -0300
- -08:00
date et heure globale -

N'importe quelle combinaison de date et d'heure locale suivie d'un décalage horaire

- 		2013-12-25 11:12+0200
- 1972-07-25 13:43:07+04:30
- 1941-03-15 07:06:23.678Z
- 2013-12-25T11:12-08:00
SemaineAAAA-WWW2013-W46
-

Quatre ou plus chiffres ASCII

- 		AAAA2013, 0001
DuréePdDThHmMsS
- PdDThHmMs.XS
- PdDThHmMs.XXS
- PdDThHmMs.XXXS
- PThHmMsS
- PThHmMs.XS
- PThHmMs.XXS
- PThHmMs.XXXS
- ww dd hh mm ss		P12DT7H12M13S
- P12DT7H12M13.3S
- P12DT7H12M13.45S
- P12DT7H12M13.455S
- PT7H12M13S
- PT7H12M13.2S
- PT7H12M13.56S
- PT7H12M13.999S
- 7d 5h 24m 13s
- -

Syntaxe

- -
dateTimeString = timeElt.dateTime;
-timeElt.dateTime = dateTimeString
-
- -

Exemple

- -
// Supposons qu'il y ai un élément <time id="t"> dans le HTML
-
-var t = document.getElementById("t");
-t.dateTime = "6w 5h 34m 5s";
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}{{Spec2('HTML5.1')}}Pas de changement depuis {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}{{Spec2('HTML5 W3C')}}Définition initiale
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.HTMLTimeElement.dateTime")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/htmltimeelement/datetime/index.md b/files/fr/web/api/htmltimeelement/datetime/index.md new file mode 100644 index 0000000000..48df191248 --- /dev/null +++ b/files/fr/web/api/htmltimeelement/datetime/index.md @@ -0,0 +1,174 @@ +--- +title: HTMLTimeElement.dateTime +slug: Web/API/HTMLTimeElement/dateTime +translation_of: Web/API/HTMLTimeElement/dateTime +--- +
{{ APIRef("HTML DOM") }}
+ +
La propriété HTMLTimeElement.dateTime est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{ htmlattrxref("datetime", "time") }}, contenant une date et une heure interprétable par un ordinateur.
+ +

Le format de la chaîne de caractères doit correspondre à l'une des micro-syntaxes HTML suivantes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MicrosyntaxeDescriptionExemples
MoisAAAA-MM2011-11, 2013-05
+

Date

+ 		AAAA-MM-DD1887-12-01
Date sans l'annéeMM-DD11-12
HeureHH:MM
+ HH:MM:SS
+ HH:MM:SS.mmm		23:59
+ 12:15:47
+ 12:15:52.998
Date et heure localeAAAA-MM-DD HH:MM
+ AAAA-MM-DD HH:MM:SS
+ AAAA-MM-DD HH:MM:SS.mmm
+ AAAA-MM-DDTHH:MM
+ AAAA-MM-DDTHH:MM:SS
+ AAAA-MM-DDTHH:MM:SS.mmm		2013-12-25 11:12
+ 1972-07-25 13:43:07
+ 1941-03-15 07:06:23.678
+ 2013-12-25T11:12
+ 1972-07-25T13:43:07
+ 1941-03-15T07:06:23.678
Décalage horaireZ
+ +HHMM
+ +HH:MM
+ -HHMM
+ -HH:MM		Z
+ +0200
+ +04:30
+ -0300
+ -08:00
date et heure globale +

N'importe quelle combinaison de date et d'heure locale suivie d'un décalage horaire

+ 		2013-12-25 11:12+0200
+ 1972-07-25 13:43:07+04:30
+ 1941-03-15 07:06:23.678Z
+ 2013-12-25T11:12-08:00
SemaineAAAA-WWW2013-W46
+

Quatre ou plus chiffres ASCII

+ 		AAAA2013, 0001
DuréePdDThHmMsS
+ PdDThHmMs.XS
+ PdDThHmMs.XXS
+ PdDThHmMs.XXXS
+ PThHmMsS
+ PThHmMs.XS
+ PThHmMs.XXS
+ PThHmMs.XXXS
+ ww dd hh mm ss		P12DT7H12M13S
+ P12DT7H12M13.3S
+ P12DT7H12M13.45S
+ P12DT7H12M13.455S
+ PT7H12M13S
+ PT7H12M13.2S
+ PT7H12M13.56S
+ PT7H12M13.999S
+ 7d 5h 24m 13s
+ +

Syntaxe

+ +
dateTimeString = timeElt.dateTime;
+timeElt.dateTime = dateTimeString
+
+ +

Exemple

+ +
// Supposons qu'il y ai un élément <time id="t"> dans le HTML
+
+var t = document.getElementById("t");
+t.dateTime = "6w 5h 34m 5s";
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}{{Spec2('HTML5.1')}}Pas de changement depuis {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}{{Spec2('HTML5 W3C')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.HTMLTimeElement.dateTime")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmltimeelement/index.html b/files/fr/web/api/htmltimeelement/index.html deleted file mode 100644 index aa3bf1b0c7..0000000000 --- a/files/fr/web/api/htmltimeelement/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: HTMLTimeElement -slug: Web/API/HTMLTimeElement -translation_of: Web/API/HTMLTimeElement ---- -
{{ APIRef("HTML DOM") }}
- -

L'interface HTMLTimeElement fournit des propriétés spéciales (en plus de celles fournies en héritage par l'interface {{domxref("HTMLElement")}}) pour manipuler les éléments {{HTMLElement("time")}}.

- -

{{InheritanceDiagram(600, 120)}}

- -

Propriétés

- -

Hérite des propriétés de {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLTimeElement.dateTime")}}
-
C'est une {{domxref("DOMString")}} qui reflète l'attribut {{htmlattrxref("datetime", "time")}} de l'élément HTML correspondant, dans une forme interprétable par un ordinateur de la date et de l'heure.
-
- -

Méthodes

- -

Pas de méthode spécifique, mais cette interface hérite des méthodes de {{domxref("HTMLElement")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatusCommentaires
{{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}{{Spec2('HTML5.1')}}Pas de changement depuis {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.HTMLTimeElement")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/htmltimeelement/index.md b/files/fr/web/api/htmltimeelement/index.md new file mode 100644 index 0000000000..aa3bf1b0c7 --- /dev/null +++ b/files/fr/web/api/htmltimeelement/index.md @@ -0,0 +1,64 @@ +--- +title: HTMLTimeElement +slug: Web/API/HTMLTimeElement +translation_of: Web/API/HTMLTimeElement +--- +
{{ APIRef("HTML DOM") }}
+ +

L'interface HTMLTimeElement fournit des propriétés spéciales (en plus de celles fournies en héritage par l'interface {{domxref("HTMLElement")}}) pour manipuler les éléments {{HTMLElement("time")}}.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Propriétés

+ +

Hérite des propriétés de {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLTimeElement.dateTime")}}
+
C'est une {{domxref("DOMString")}} qui reflète l'attribut {{htmlattrxref("datetime", "time")}} de l'élément HTML correspondant, dans une forme interprétable par un ordinateur de la date et de l'heure.
+
+ +

Méthodes

+ +

Pas de méthode spécifique, mais cette interface hérite des méthodes de {{domxref("HTMLElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaires
{{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}{{Spec2('HTML5.1')}}Pas de changement depuis {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.HTMLTimeElement")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlunknownelement/index.html b/files/fr/web/api/htmlunknownelement/index.html deleted file mode 100644 index ce75a88677..0000000000 --- a/files/fr/web/api/htmlunknownelement/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: HTMLUnknownElement -slug: Web/API/HTMLUnknownElement -translation_of: Web/API/HTMLUnknownElement ---- -
{{APIRef("HTML DOM")}}
- -

L’interface HTMLUnknownElement représente un élément HTML invalide et dérive de l’interface {{DOMxRef("HTMLElement")}}, mais sans implémenter aucune propriété ou méthode additionnelle.

- -

{{InheritanceDiagram(600, 120)}}

- -

Propriétés

- -

Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}.

- -

Méthodes

- -

Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML WHATWG")}}Pas de changement depuis {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML5 W3C")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLUnknownElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlunknownelement/index.md b/files/fr/web/api/htmlunknownelement/index.md new file mode 100644 index 0000000000..ce75a88677 --- /dev/null +++ b/files/fr/web/api/htmlunknownelement/index.md @@ -0,0 +1,51 @@ +--- +title: HTMLUnknownElement +slug: Web/API/HTMLUnknownElement +translation_of: Web/API/HTMLUnknownElement +--- +
{{APIRef("HTML DOM")}}
+ +

L’interface HTMLUnknownElement représente un élément HTML invalide et dérive de l’interface {{DOMxRef("HTMLElement")}}, mais sans implémenter aucune propriété ou méthode additionnelle.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Propriétés

+ +

Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}.

+ +

Méthodes

+ +

Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML WHATWG")}}Pas de changement depuis {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML5 W3C")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLUnknownElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlvideoelement/index.html b/files/fr/web/api/htmlvideoelement/index.html deleted file mode 100644 index e146b86d4e..0000000000 --- a/files/fr/web/api/htmlvideoelement/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: HTMLVideoElement -slug: Web/API/HTMLVideoElement -tags: - - API - - HTML DOM - - HTMLVideoElement - - Interface - - Reference - - Video -translation_of: Web/API/HTMLVideoElement ---- -
{{APIRef("HTML DOM")}}
- -

L’interface HTMLVideoElement fournit des propriétés et des méthodes spéciales pour manipuler des objets vidéo. Il hérite également des propriétés et des méthodes de {{domxref("HTMLMediaElement")}} et de {{domxref("HTMLElement")}}.

- -

La liste des formats multimédias pris en charge varie d’un navigateur à l’autre. Vous pouvez fournir votre vidéo dans un format unique que tous les navigateurs pertinents prennent en charge, ou fournir plusieurs sources vidéo dans des formats suffisamment différents couverts par les différents navigateurs que vous ciblez.

- -

{{InheritanceDiagram(600, 140)}}

- -

Propriétés

- -

Cette interface hérite des propriétés de ses interfaces ancêtres : {{domxref("HTMLMediaElement")}} et {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLVideoElement.height")}}
-
Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("height", "video")}} indiquant la hauteur de la zone d'affichage, en pixels.
-
{{domxref("HTMLVideoElement.poster")}}
-
Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut {{htmlattrxref("poster", "video")}} qui indique une image à afficher tant qu'aucune donnée vidéo n'est disponible.
-
{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}
-
Un entier non signé qui indique la hauteur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.
-
{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}
-
Un entier non signé qui indique la largeur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.
-
{{domxref("HTMLVideoElement.width")}}
-
Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("width", "video")}} indiquant la largeur de la zone d'affichage, en pixels.
-
- -

Propriétés spécifiques à Gecko

- -
-
{{domxref("HTMLVideoElement.mozParsedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
-
Un entier non signé indiquant le nombre de frames qui ont été analysées (parsed) depuis la ressource média.
-
{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
-
Un entier non signé indiquant le nombre de frames qui ont été décodées en images.
-
{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
-
Un entier non signé indiquant le nombre de frames décodées qui ont été présentées au canal de rendu pour l'affichage.
-
{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
-
Un entier non signé indiquant le nombre de frames présentées et qui ont été affichées à l'écran.
-
{{domxref("HTMLVideoElement.mozFrameDelay")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
-
Un double indiquant le retard, exprimé en secondes, pour l'affichage de la dernière frame affichée.
-
{{domxref("HTMLVideoElement.mozHasAudio")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
-
Un booléen indiquant s'il y a de l'audio associé à cette vidéo.
-
- -

Propriétés spécifiques à Microsoft

- -
-
{{DOMxRef("HTMLVideoElement.msFrameStep()")}} {{Non-standard_Inline}}
-
Permet d'avancer ou de reculer la vidéo d'une frame.
-
{{DOMxRef("HTMLVideoElement.msHorizontalMirror")}} {{Non-standard_Inline}}
-
Permet d'indiquer ou de définir si la vidéo est inversée horizontalement dans l'affichage.
-
{{DOMxRef("HTMLVideoElement.msInsertVideoEffect()")}} {{Non-standard_Inline}}
-
Ajoute l'effet vidéo indiqué dans le canal de rendu.
-
{{DOMxRef("HTMLVideoElement.msIsLayoutOptimalForPlayback")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
-
Indique si la vidéo peut être affichée plus efficacement.
-
{{DOMxRef("HTMLVideoElement.msIsStereo3D")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
-
Un booléen qui détermine si le système considère que la vidéo chargée est en stéréo 3D. La valeur true indique que la source est en stéro 3D.
-
{{DOMxRef("HTMLVideoElement.msZoom")}} {{Non-standard_Inline}}
-
Contrôle si le cadre de la vidéo est réduit pour s'inscrire dans la zone d'affichage de la vidéo (autrement dit : si la vidéo est zoomée/tronquée pour s'inscrire dans la zone correspondante).
-
- -

Méthodes

- -

Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}
-
Cette méthode renvoie un objet {{domxref("VideoPlaybackQuality")}} contenant les métriques/statistiques sur la lecture actuelle avec des informations comme le nombre d'images sautées ou corrompues ainsi que le nombre total d'images.
-
- -

Évènements

- -

Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}. Pour écouter ces évènements, on utilisera addEventListener() ou on affectera un gestionnaire d'évènement avec la propriété on<NomEvenement> (ex. onclick) de l'interface.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "#htmlvideoelement", "HTMLVideoElement")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.HTMLVideoElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlvideoelement/index.md b/files/fr/web/api/htmlvideoelement/index.md new file mode 100644 index 0000000000..e146b86d4e --- /dev/null +++ b/files/fr/web/api/htmlvideoelement/index.md @@ -0,0 +1,111 @@ +--- +title: HTMLVideoElement +slug: Web/API/HTMLVideoElement +tags: + - API + - HTML DOM + - HTMLVideoElement + - Interface + - Reference + - Video +translation_of: Web/API/HTMLVideoElement +--- +
{{APIRef("HTML DOM")}}
+ +

L’interface HTMLVideoElement fournit des propriétés et des méthodes spéciales pour manipuler des objets vidéo. Il hérite également des propriétés et des méthodes de {{domxref("HTMLMediaElement")}} et de {{domxref("HTMLElement")}}.

+ +

La liste des formats multimédias pris en charge varie d’un navigateur à l’autre. Vous pouvez fournir votre vidéo dans un format unique que tous les navigateurs pertinents prennent en charge, ou fournir plusieurs sources vidéo dans des formats suffisamment différents couverts par les différents navigateurs que vous ciblez.

+ +

{{InheritanceDiagram(600, 140)}}

+ +

Propriétés

+ +

Cette interface hérite des propriétés de ses interfaces ancêtres : {{domxref("HTMLMediaElement")}} et {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.height")}}
+
Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("height", "video")}} indiquant la hauteur de la zone d'affichage, en pixels.
+
{{domxref("HTMLVideoElement.poster")}}
+
Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut {{htmlattrxref("poster", "video")}} qui indique une image à afficher tant qu'aucune donnée vidéo n'est disponible.
+
{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}
+
Un entier non signé qui indique la hauteur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.
+
{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}
+
Un entier non signé qui indique la largeur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.
+
{{domxref("HTMLVideoElement.width")}}
+
Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("width", "video")}} indiquant la largeur de la zone d'affichage, en pixels.
+
+ +

Propriétés spécifiques à Gecko

+ +
+
{{domxref("HTMLVideoElement.mozParsedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+
Un entier non signé indiquant le nombre de frames qui ont été analysées (parsed) depuis la ressource média.
+
{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+
Un entier non signé indiquant le nombre de frames qui ont été décodées en images.
+
{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+
Un entier non signé indiquant le nombre de frames décodées qui ont été présentées au canal de rendu pour l'affichage.
+
{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+
Un entier non signé indiquant le nombre de frames présentées et qui ont été affichées à l'écran.
+
{{domxref("HTMLVideoElement.mozFrameDelay")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+
Un double indiquant le retard, exprimé en secondes, pour l'affichage de la dernière frame affichée.
+
{{domxref("HTMLVideoElement.mozHasAudio")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+
Un booléen indiquant s'il y a de l'audio associé à cette vidéo.
+
+ +

Propriétés spécifiques à Microsoft

+ +
+
{{DOMxRef("HTMLVideoElement.msFrameStep()")}} {{Non-standard_Inline}}
+
Permet d'avancer ou de reculer la vidéo d'une frame.
+
{{DOMxRef("HTMLVideoElement.msHorizontalMirror")}} {{Non-standard_Inline}}
+
Permet d'indiquer ou de définir si la vidéo est inversée horizontalement dans l'affichage.
+
{{DOMxRef("HTMLVideoElement.msInsertVideoEffect()")}} {{Non-standard_Inline}}
+
Ajoute l'effet vidéo indiqué dans le canal de rendu.
+
{{DOMxRef("HTMLVideoElement.msIsLayoutOptimalForPlayback")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+
Indique si la vidéo peut être affichée plus efficacement.
+
{{DOMxRef("HTMLVideoElement.msIsStereo3D")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+
Un booléen qui détermine si le système considère que la vidéo chargée est en stéréo 3D. La valeur true indique que la source est en stéro 3D.
+
{{DOMxRef("HTMLVideoElement.msZoom")}} {{Non-standard_Inline}}
+
Contrôle si le cadre de la vidéo est réduit pour s'inscrire dans la zone d'affichage de la vidéo (autrement dit : si la vidéo est zoomée/tronquée pour s'inscrire dans la zone correspondante).
+
+ +

Méthodes

+ +

Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}
+
Cette méthode renvoie un objet {{domxref("VideoPlaybackQuality")}} contenant les métriques/statistiques sur la lecture actuelle avec des informations comme le nombre d'images sautées ou corrompues ainsi que le nombre total d'images.
+
+ +

Évènements

+ +

Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}. Pour écouter ces évènements, on utilisera addEventListener() ou on affectera un gestionnaire d'évènement avec la propriété on<NomEvenement> (ex. onclick) de l'interface.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "#htmlvideoelement", "HTMLVideoElement")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.HTMLVideoElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbcursor/advance/index.html b/files/fr/web/api/idbcursor/advance/index.html deleted file mode 100644 index d7740ad049..0000000000 --- a/files/fr/web/api/idbcursor/advance/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: IDBCursor.advance() -slug: Web/API/IDBCursor/advance -tags: - - API - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBCursor/advance ---- -
{{APIRef("IndexedDB")}}
- -

La méthode advance() de l'interface {{domxref("IDBCursor")}} définit le nombre d'itérations du curseur avec lequel celui-ci doit se déplacer vers l'avant.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
cursor.advance(count);
- -

Paramètres

- -
-
count
-
Le nombre d'itérations du curseur.
-
- -

Valeur de retour

- -

Aucune.

- -

Exceptions

- -

Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
TransactionInactiveErrorCette transaction IDBCursor est inactive.
TypeErrorLa valeur passée au paramètre count vaut zéro ou est négative.
InvalidStateErrorLe curseur est en itération ou a itéré au-delà de la plage.
- -

Exemple

- -

Dans ce petit morceau de code on fait une transaction, récupère un magasin d'objet, puis utilise un curseur pour itérer sur les enregistrements du magasin. Ici, on utilise cursor.advance(2) pour avancer de 2 cases à chaque fois, ce qui signifie que seule la moitié des résultats sera affichée. advance()fonctionne de façon similaire à {{domxref ("IDBCursor.continue")}} mais permet de sauter plusieurs enregistrements à la fois et pas uniquement d'accéder à l'enregistrement suivant.

- -

On notera également que, dans chaque itération de la boucle, on peut  récupérer les données de l'enregistrement en cours grâce à l'objet curseur via curseur.value.foo. Pour un exemple fonctionnel complet, voir notre exemple IDBCursor (l'exemple en live).

- -
function advanceResult() {
-  list.innerHTML = '';
-  var transaction = db.transaction(['granListAlbum'], "readonly");
-  var objectStore = transaction.objectStore('granListAlbum');
-
-  objectStore.openCursor().onsuccess = function(event) {
-    var curseur = event.target.result;
-    if(curseur) {
-      var listItem = document.createElement('li');
-      listItem.innerHTML = '' + curseur.value.titreAlbum + ', ' + curseur.value.annee;
-      list.appendChild(listItem);
-      curseur.advance(2);
-    } else {
-      console.log('moitié des resultats affichée');
-    }
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBCursor.advance")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbcursor/advance/index.md b/files/fr/web/api/idbcursor/advance/index.md new file mode 100644 index 0000000000..d7740ad049 --- /dev/null +++ b/files/fr/web/api/idbcursor/advance/index.md @@ -0,0 +1,114 @@ +--- +title: IDBCursor.advance() +slug: Web/API/IDBCursor/advance +tags: + - API + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBCursor/advance +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode advance() de l'interface {{domxref("IDBCursor")}} définit le nombre d'itérations du curseur avec lequel celui-ci doit se déplacer vers l'avant.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
cursor.advance(count);
+ +

Paramètres

+ +
+
count
+
Le nombre d'itérations du curseur.
+
+ +

Valeur de retour

+ +

Aucune.

+ +

Exceptions

+ +

Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
TransactionInactiveErrorCette transaction IDBCursor est inactive.
TypeErrorLa valeur passée au paramètre count vaut zéro ou est négative.
InvalidStateErrorLe curseur est en itération ou a itéré au-delà de la plage.
+ +

Exemple

+ +

Dans ce petit morceau de code on fait une transaction, récupère un magasin d'objet, puis utilise un curseur pour itérer sur les enregistrements du magasin. Ici, on utilise cursor.advance(2) pour avancer de 2 cases à chaque fois, ce qui signifie que seule la moitié des résultats sera affichée. advance()fonctionne de façon similaire à {{domxref ("IDBCursor.continue")}} mais permet de sauter plusieurs enregistrements à la fois et pas uniquement d'accéder à l'enregistrement suivant.

+ +

On notera également que, dans chaque itération de la boucle, on peut  récupérer les données de l'enregistrement en cours grâce à l'objet curseur via curseur.value.foo. Pour un exemple fonctionnel complet, voir notre exemple IDBCursor (l'exemple en live).

+ +
function advanceResult() {
+  list.innerHTML = '';
+  var transaction = db.transaction(['granListAlbum'], "readonly");
+  var objectStore = transaction.objectStore('granListAlbum');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var curseur = event.target.result;
+    if(curseur) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '' + curseur.value.titreAlbum + ', ' + curseur.value.annee;
+      list.appendChild(listItem);
+      curseur.advance(2);
+    } else {
+      console.log('moitié des resultats affichée');
+    }
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBCursor.advance")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbcursor/continue/index.html b/files/fr/web/api/idbcursor/continue/index.html deleted file mode 100644 index 843049a0e0..0000000000 --- a/files/fr/web/api/idbcursor/continue/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: IDBCursor.continue() -slug: Web/API/IDBCursor/continue -tags: - - API - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBCursor/continue ---- -
{{APIRef("IndexedDB")}}
- -

La méthode continue() de l'interface {{domxref("IDBCursor")}} fait avancer le curseur jusqu'à la prochaine position qui corrrespond à une clé donnée si celle-ci est passée en paramètre, si aucune clé n'est indiquée, le curseur avancera à la position qui suit immédiatement la position actuelle (dans la direction de progression du curseur).

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
curseur.continue(cléOptionnelle);
- -

Paramètres

- -
-
cléOptionnelle
-
La clé sur laquelle se positionne le curseur.
-
- -

Exceptions

- -

Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} de type :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
TransactionInactiveErrorLa transaction de l'IDBCursor est inactive.
DataError -

Le paramètre cléOptionnelle peut:

- -
    -
  • Être invalide.
    • -
  • Être inférieur ou égal à la position de ce curseur et la direction du curseur next ou nextunique.
    • -
  • Être supérieur ou égal à la position de ce curseur et la direction de ce curseur prev ou prevunique.
    • -
-
InvalidStateErrorLe curseur est en itération ou il a itéré au-delà de la plage.
- -

Exemple

- -

Dans ce petit morceau de code, on fait une transaction, on récupère un magasin d'objet, puis on utilise un curseur afin d'itérer sur les enregistrements contenus dans le magasin. Il n'est pas nécessaire de sélectionner les données selon une clé, on peut simplement toutes les récupérer. On notera qu'à chaque itération de la boucle, on récupère les données correspondantes à l'enregistrement grâce au curseur sous la forme curseur.value.toto. Pour étudier un exemple de travail complet, voir notre exemple IDBCursor (voir l'exemple live).

- -
function afficheDonnee() {
-  var transaction = db.transaction(['granListAlbum'], "readonly");
-  var objectStore = transaction.objectStore('granListAlbum');
-
-  objectStore.openCursor().onsuccess = function(event) {
-    var curseur = event.target.result;
-    if(curseur) {
-      var listItem = document.createElement('li');
-      listItem.innerHTML = curseur.value.titreAlbum + ', ' + curseur.value.annee;
-      list.appendChild(listItem);
-
-      curseur.continue();
-    } else {
-      console.log('Entrées toutes affichés.');
-    }
-  };
-};
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBCursor.continue")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbcursor/continue/index.md b/files/fr/web/api/idbcursor/continue/index.md new file mode 100644 index 0000000000..843049a0e0 --- /dev/null +++ b/files/fr/web/api/idbcursor/continue/index.md @@ -0,0 +1,117 @@ +--- +title: IDBCursor.continue() +slug: Web/API/IDBCursor/continue +tags: + - API + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBCursor/continue +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode continue() de l'interface {{domxref("IDBCursor")}} fait avancer le curseur jusqu'à la prochaine position qui corrrespond à une clé donnée si celle-ci est passée en paramètre, si aucune clé n'est indiquée, le curseur avancera à la position qui suit immédiatement la position actuelle (dans la direction de progression du curseur).

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
curseur.continue(cléOptionnelle);
+ +

Paramètres

+ +
+
cléOptionnelle
+
La clé sur laquelle se positionne le curseur.
+
+ +

Exceptions

+ +

Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} de type :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
TransactionInactiveErrorLa transaction de l'IDBCursor est inactive.
DataError +

Le paramètre cléOptionnelle peut:

+ +
    +
  • Être invalide.
    • +
  • Être inférieur ou égal à la position de ce curseur et la direction du curseur next ou nextunique.
    • +
  • Être supérieur ou égal à la position de ce curseur et la direction de ce curseur prev ou prevunique.
    • +
+
InvalidStateErrorLe curseur est en itération ou il a itéré au-delà de la plage.
+ +

Exemple

+ +

Dans ce petit morceau de code, on fait une transaction, on récupère un magasin d'objet, puis on utilise un curseur afin d'itérer sur les enregistrements contenus dans le magasin. Il n'est pas nécessaire de sélectionner les données selon une clé, on peut simplement toutes les récupérer. On notera qu'à chaque itération de la boucle, on récupère les données correspondantes à l'enregistrement grâce au curseur sous la forme curseur.value.toto. Pour étudier un exemple de travail complet, voir notre exemple IDBCursor (voir l'exemple live).

+ +
function afficheDonnee() {
+  var transaction = db.transaction(['granListAlbum'], "readonly");
+  var objectStore = transaction.objectStore('granListAlbum');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var curseur = event.target.result;
+    if(curseur) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = curseur.value.titreAlbum + ', ' + curseur.value.annee;
+      list.appendChild(listItem);
+
+      curseur.continue();
+    } else {
+      console.log('Entrées toutes affichés.');
+    }
+  };
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBCursor.continue")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbcursor/index.html b/files/fr/web/api/idbcursor/index.html deleted file mode 100644 index a60210cbee..0000000000 --- a/files/fr/web/api/idbcursor/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: IDBCursor -slug: Web/API/IDBCursor -tags: - - API - - IndexedDB - - Interface - - Référence(2) -translation_of: Web/API/IDBCursor ---- -
{{APIRef("IndexedDB")}}
- -

L'interface IDBCursor de l' API IndexedDB représente un curseur pour traverser ou itérer sur plusieurs enregistrements dans une base de données.

- -

Le curseur possède une source qui indique l'index ou le magasin d'objets sur lequel il itère. Il est décrit par une position dans cet intervalle et par une direction dans laquelle il se déplace : dans l'ordre des clés d'enregistrement suivant le sens donné au curseur (montant ou descendant). Le curseur permet à une application de traiter de façon asynchrone tous les enregistrements de sa plage.

- -

On peut avoir autant de curseurs qu'on souhaite en même temps. Ce sera toujours le même objet IDBCursor qui représentera un curseur donné. Les opérations sont effectuées à l’intérieur de l'index ou du magasin d'objet.

- -

{{AvailableInWorkers}}

- -

Méthodes

- -
-
{{domxref("IDBCursor.advance()")}}
-
Définit le nombre d’itérations vers l'avant.
-
{{domxref("IDBCursor.continue()")}}
-
Avance le curseur sur la position suivante le long de sa direction, jusqu'à l'élément dont la clé correspond au paramètre (optionnel) passé à la fonction.
-
{{domxref("IDBCursor.delete()")}}
-
Retourne un objet {{domxref ("IDBRequest")}}, et, dans un thread séparé, supprime l'enregistrement à la position du curseur, sans changer la position du curseur. Ceci peut être utilisé pour supprimer des enregistrements spécifiques.
-
{{domxref("IDBCursor.update()")}}
-
Retourne un objet {{domxref("IDBRequest")}}, et, dans un thread séparé, met à jour la valeur à la position actuelle du curseur dans le magasin d'objets. Ceci peut être utilisé pour mettre à jour des enregistrements spécifiques.
-
- -

Propriétés

- -
-
{{domxref("IDBCursor.source")}} {{readonlyInline}}
-
Renvoie le {{domxref("IDBObjectStore")}} ou {{domxref("IDBIndex")}} sur lequel le curseur itère. Cette fonction ne retourne jamais null et ne déclenche pas d’exception, même dans les cas ou le curseur est en train d'itérer, s'il a itéré en dehors la plage ou si la transaction n'est pas active.
-
{{domxref("IDBCursor.direction")}} {{readonlyInline}}
-
Renvoie la direction de parcours du curseur. Voir le paragraphe suivant, Constantes, pour les valeurs possibles.
-
{{domxref("IDBCursor.key")}} {{readonlyInline}}
-
Renvoie la clé de l'enregistrement à la position du curseur ou undefined si le curseur est en dehors de la plage. La clé peut être de n'importe quel type de données.
-
{{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}
-
Renvoie la clé primaire effective actuelle du curseur ou undefined si le curseur est actuellement itéré ou a itéré en dehors de sa plage. La clé primaire du curseur peut être de tout type de données.
-
- -

Constantes

- -

{{deprecated_header(13)}}

- -
-

Attention : Ces constantes ne sont plus disponibles - elles ont été retirées depuis Gecko 25. Les valeurs équivalentes en chaînes de caractères devraient être utilisées à la place (cf. {{bug(891944)}}).

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValeurDescription
NEXT -

"next"

- 		Le curseur indique tous les enregistrements, y compris les doublons. Il commence à la limite inférieure de la plage de clé et se déplace vers le haut (en itérant dans l'ordre des clés).
NEXTUNIQUE -

"nextunique"

- 		Le curseur indique tous les enregistrements, à l'exclusion des doublons. Si plusieurs enregistrements existent avec la même clé, seule la première itération est récupérée. Il commence à la limite inférieure de la plage de clé et se déplace vers le haut.
PREV -

"prev"

- 		Le curseur indique tous les enregistrements, y compris les doublons. Il commence à la limite supérieure de la plage de clé et se déplace vers le bas (en itérant dans l'ordre inverse des clés).
PREVUNIQUE -

"prevunique"

- 		Le curseur indique tous les enregistrements, à l'exclusion des doublons. Si plusieurs enregistrements existent avec la même clé, seule la première itération est récupéré. Il commence à la limite supérieure de la plage de clé et se déplace vers le bas.
- -

Exemple

- -

Dans ce fragment simple, nous créons une transaction, récupérons un magasin d'objets, puis utilisons un curseur pour parcourir tous les enregistrements du magasin d'objets. Le curseur ne nous oblige pas à sélectionner les données basées sur une clé, nous pouvons simplement travailler sur tout les enregistrements. Notez également que dans chaque itération de la boucle, vous pouvez récupérer les données de l'enregistrement en cours sous l'objet curseur à l'aide curseur.value.toto. Pour un exemple de travail complet, voir notre exemple IDBCursor (l'exemple en live).

- -
function afficheDonnee() {
-  var transaction = db.transaction(['grandListAlbum'], "readonly");
-  var objectStore = transaction.objectStore('grandListAlbum');
-
-  objectStore.openCursor().onsuccess = function(event) {
-    var curseur = event.target.result;
-    if(curseur) {
-      var listItem = document.createElement('li');
-      listItem.innerHTML = curseur.value.titreAlbum + ', ' + curseur.value.annee;
-      list.appendChild(listItem);
-
-      curseur.continue();
-    } else {
-      console.log('Entrées tous affichés.');
-    }
-  };
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBCursor")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbcursor/index.md b/files/fr/web/api/idbcursor/index.md new file mode 100644 index 0000000000..a60210cbee --- /dev/null +++ b/files/fr/web/api/idbcursor/index.md @@ -0,0 +1,148 @@ +--- +title: IDBCursor +slug: Web/API/IDBCursor +tags: + - API + - IndexedDB + - Interface + - Référence(2) +translation_of: Web/API/IDBCursor +--- +
{{APIRef("IndexedDB")}}
+ +

L'interface IDBCursor de l' API IndexedDB représente un curseur pour traverser ou itérer sur plusieurs enregistrements dans une base de données.

+ +

Le curseur possède une source qui indique l'index ou le magasin d'objets sur lequel il itère. Il est décrit par une position dans cet intervalle et par une direction dans laquelle il se déplace : dans l'ordre des clés d'enregistrement suivant le sens donné au curseur (montant ou descendant). Le curseur permet à une application de traiter de façon asynchrone tous les enregistrements de sa plage.

+ +

On peut avoir autant de curseurs qu'on souhaite en même temps. Ce sera toujours le même objet IDBCursor qui représentera un curseur donné. Les opérations sont effectuées à l’intérieur de l'index ou du magasin d'objet.

+ +

{{AvailableInWorkers}}

+ +

Méthodes

+ +
+
{{domxref("IDBCursor.advance()")}}
+
Définit le nombre d’itérations vers l'avant.
+
{{domxref("IDBCursor.continue()")}}
+
Avance le curseur sur la position suivante le long de sa direction, jusqu'à l'élément dont la clé correspond au paramètre (optionnel) passé à la fonction.
+
{{domxref("IDBCursor.delete()")}}
+
Retourne un objet {{domxref ("IDBRequest")}}, et, dans un thread séparé, supprime l'enregistrement à la position du curseur, sans changer la position du curseur. Ceci peut être utilisé pour supprimer des enregistrements spécifiques.
+
{{domxref("IDBCursor.update()")}}
+
Retourne un objet {{domxref("IDBRequest")}}, et, dans un thread séparé, met à jour la valeur à la position actuelle du curseur dans le magasin d'objets. Ceci peut être utilisé pour mettre à jour des enregistrements spécifiques.
+
+ +

Propriétés

+ +
+
{{domxref("IDBCursor.source")}} {{readonlyInline}}
+
Renvoie le {{domxref("IDBObjectStore")}} ou {{domxref("IDBIndex")}} sur lequel le curseur itère. Cette fonction ne retourne jamais null et ne déclenche pas d’exception, même dans les cas ou le curseur est en train d'itérer, s'il a itéré en dehors la plage ou si la transaction n'est pas active.
+
{{domxref("IDBCursor.direction")}} {{readonlyInline}}
+
Renvoie la direction de parcours du curseur. Voir le paragraphe suivant, Constantes, pour les valeurs possibles.
+
{{domxref("IDBCursor.key")}} {{readonlyInline}}
+
Renvoie la clé de l'enregistrement à la position du curseur ou undefined si le curseur est en dehors de la plage. La clé peut être de n'importe quel type de données.
+
{{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}
+
Renvoie la clé primaire effective actuelle du curseur ou undefined si le curseur est actuellement itéré ou a itéré en dehors de sa plage. La clé primaire du curseur peut être de tout type de données.
+
+ +

Constantes

+ +

{{deprecated_header(13)}}

+ +
+

Attention : Ces constantes ne sont plus disponibles - elles ont été retirées depuis Gecko 25. Les valeurs équivalentes en chaînes de caractères devraient être utilisées à la place (cf. {{bug(891944)}}).

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeurDescription
NEXT +

"next"

+ 		Le curseur indique tous les enregistrements, y compris les doublons. Il commence à la limite inférieure de la plage de clé et se déplace vers le haut (en itérant dans l'ordre des clés).
NEXTUNIQUE +

"nextunique"

+ 		Le curseur indique tous les enregistrements, à l'exclusion des doublons. Si plusieurs enregistrements existent avec la même clé, seule la première itération est récupérée. Il commence à la limite inférieure de la plage de clé et se déplace vers le haut.
PREV +

"prev"

+ 		Le curseur indique tous les enregistrements, y compris les doublons. Il commence à la limite supérieure de la plage de clé et se déplace vers le bas (en itérant dans l'ordre inverse des clés).
PREVUNIQUE +

"prevunique"

+ 		Le curseur indique tous les enregistrements, à l'exclusion des doublons. Si plusieurs enregistrements existent avec la même clé, seule la première itération est récupéré. Il commence à la limite supérieure de la plage de clé et se déplace vers le bas.
+ +

Exemple

+ +

Dans ce fragment simple, nous créons une transaction, récupérons un magasin d'objets, puis utilisons un curseur pour parcourir tous les enregistrements du magasin d'objets. Le curseur ne nous oblige pas à sélectionner les données basées sur une clé, nous pouvons simplement travailler sur tout les enregistrements. Notez également que dans chaque itération de la boucle, vous pouvez récupérer les données de l'enregistrement en cours sous l'objet curseur à l'aide curseur.value.toto. Pour un exemple de travail complet, voir notre exemple IDBCursor (l'exemple en live).

+ +
function afficheDonnee() {
+  var transaction = db.transaction(['grandListAlbum'], "readonly");
+  var objectStore = transaction.objectStore('grandListAlbum');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var curseur = event.target.result;
+    if(curseur) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = curseur.value.titreAlbum + ', ' + curseur.value.annee;
+      list.appendChild(listItem);
+
+      curseur.continue();
+    } else {
+      console.log('Entrées tous affichés.');
+    }
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBCursor")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/close/index.html b/files/fr/web/api/idbdatabase/close/index.html deleted file mode 100644 index 63f025584d..0000000000 --- a/files/fr/web/api/idbdatabase/close/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: IDBDatabase.close() -slug: Web/API/IDBDatabase/close -tags: - - API - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBDatabase/close ---- -
{{APIRef("IndexedDB")}}
- -

La méthode close() de l'interface {{domxref("IDBDatabase")}} ferme de façon asynchrone la connexion à la base de donnée.

- -

La connexion sera fermée lorsque toutes les transactions liées à cette connexion seront terminées. En revanche, on ne pourra pas démarrer de nouvelles transactions sur la connexion une fois que cette méthode a été appelée. Les méthodes qui initialisent des transactions déclencheront une exception lorsque la fermeture est en cours.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
db.close();
- -

Valeur de retour

- -

Aucune.

- -

Exemple

- -
// ouverture de la connexion à la base de données toDoList
-  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-  // deux gestionnaires d’événements effectuant les
-  // opérations après que l'ouverture se soit bien
-  // passée ou non.
-  DBOpenRequest.onerror = function(event) {
-    note.innerHTML += '<li>Erreur lors du chargement de la base.</li>';
-  };
-
-  DBOpenRequest.onsuccess = function(event) {
-    note.innerHTML += '<li>Base chargée.</li>';
-
-    // affecte la connexion à la variable db
-    db = DBOpenRequest.result;
-
-    // fermeture de la base de donnée.
-    db.close();
-  }
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBDatabase.close")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/close/index.md b/files/fr/web/api/idbdatabase/close/index.md new file mode 100644 index 0000000000..63f025584d --- /dev/null +++ b/files/fr/web/api/idbdatabase/close/index.md @@ -0,0 +1,80 @@ +--- +title: IDBDatabase.close() +slug: Web/API/IDBDatabase/close +tags: + - API + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBDatabase/close +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode close() de l'interface {{domxref("IDBDatabase")}} ferme de façon asynchrone la connexion à la base de donnée.

+ +

La connexion sera fermée lorsque toutes les transactions liées à cette connexion seront terminées. En revanche, on ne pourra pas démarrer de nouvelles transactions sur la connexion une fois que cette méthode a été appelée. Les méthodes qui initialisent des transactions déclencheront une exception lorsque la fermeture est en cours.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
db.close();
+ +

Valeur de retour

+ +

Aucune.

+ +

Exemple

+ +
// ouverture de la connexion à la base de données toDoList
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  // deux gestionnaires d’événements effectuant les
+  // opérations après que l'ouverture se soit bien
+  // passée ou non.
+  DBOpenRequest.onerror = function(event) {
+    note.innerHTML += '<li>Erreur lors du chargement de la base.</li>';
+  };
+
+  DBOpenRequest.onsuccess = function(event) {
+    note.innerHTML += '<li>Base chargée.</li>';
+
+    // affecte la connexion à la variable db
+    db = DBOpenRequest.result;
+
+    // fermeture de la base de donnée.
+    db.close();
+  }
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBDatabase.close")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/createobjectstore/index.html b/files/fr/web/api/idbdatabase/createobjectstore/index.html deleted file mode 100644 index 89948ee860..0000000000 --- a/files/fr/web/api/idbdatabase/createobjectstore/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: IDBDatabase.createObjectStore() -slug: Web/API/IDBDatabase/createObjectStore -tags: - - API - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBDatabase/createObjectStore ---- -
{{APIRef("IndexedDB")}}
- -

La méthode createObjectStore(), rattachée à l'interface {{domxref("IDBDatabase")}}, permet d'ajouter un magasin d’objet ou un index à la base de donnée et renvoie un accès vers celui-ci.

- -

Cette méthode utilise deux paramètres : le nom du magasin d'objets et un objet qui permettra de définir des propriétés optionnelles supplémentaires.

- -

Cette méthode ne peut être appelée que lors d'une transaction en mode versionchange.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var objectStore = db.createObjectStore(name, optionalParameters);
-
- -

Paramètres

- -
-
name
-
Le nom du magasin d'objet à ajouter. Il est possible d'ajouter un magasin d’objet dont le nom est la chaîne vide (!).
-
optionalParameters {{optional_inline}}
-
-

Un objet qui permet de décrire plus finement le magasin d'objets avec ces propriétés :

- - - - - - - - - - - - - - - - - - -
PropriétéDescription
keyPathLe chemin de la clé utilisé par le magasin d'objet. Si ce paramètre est vide ou non spécifié, le magasin d'objets utilisera une clé externe. Le keyPath peut aussi être un tableau.
autoIncrementSi true, le magasin d’objet implémentera un générateur de clé. La valeur par défaut est false.
- -

Les autres propriétés seront ignorés.

-
-
- -

Valeur de retour

- -
-
{{domxref("IDBObjectStore")}}
-
Le magasin d'objets qui vient d'être créé.
-
- -

Exceptions

- -
-
InvalidStateError
-
Cette exception {{domxref("DOMException")}} est levée si la méthode n'est pas appelée lors d'une transaction en mode versionchange. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler {{domxref("IDBVersionChangeRequest.setVersion")}}.
-
TransactionInactiveError
-
Cette exception {{domxref("DOMException")}} est levée si la méthode est appelée sur une base de données qui n'existe pas (elle a par exemple été effacée). Dans les versions antérieures à Firefox 41, ce dernier levait une erreur InvalidStateError, cela est désormais corrigé (cf. {{bug("1176165")}}).
-
ConstraintError
-
Un magasin d'objet portant le même nom (la casse est importante) existe déjà dans cette base de donnée.
-
InvalidAccessError
-
Si la valeur autoIncrement est à true et que le chemin de clé n'est pas renseigné ou est un tableau vide.
-
- -

Exemple

- -
 // Ouverture de la base de données
-  var request = window.indexedDB.open("toDoList", 4);
-
-  /* Gestionnaire d'événement qui intervient lors de la
-     mise en place d'une nouvelle version de la base de
-     données, que la base n'existe pas et soit ajoutée
-     ou qu'un nouveau numéro de version soit passé à
-     window.indexedDB.open
-     Il est seulement mis en œuvre dans les
-     navigateurs récents */
-  request.onupgradeneeded = function(event) {
-    var db = event.target.result;
-
-    db.onerror = function(event) {
-      note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
-    };
-
-    // On ajoute un magasin d'objet à la base de données
-
-    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
-
-    // définition des index de ce magasin d'objets
-
-    objectStore.createIndex("hours", "hours", { unique: false });
-    objectStore.createIndex("minutes", "minutes", { unique: false });
-    objectStore.createIndex("day", "day", { unique: false });
-    objectStore.createIndex("month", "month", { unique: false });
-    objectStore.createIndex("year", "year", { unique: false });
-
-    objectStore.createIndex("notified", "notified", { unique: false });
-
-    note.innerHTML += '<li>Magasin d\'objet ajouté.</li>';
-  };
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBDatabase.createObjectStore")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/createobjectstore/index.md b/files/fr/web/api/idbdatabase/createobjectstore/index.md new file mode 100644 index 0000000000..89948ee860 --- /dev/null +++ b/files/fr/web/api/idbdatabase/createobjectstore/index.md @@ -0,0 +1,146 @@ +--- +title: IDBDatabase.createObjectStore() +slug: Web/API/IDBDatabase/createObjectStore +tags: + - API + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBDatabase/createObjectStore +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode createObjectStore(), rattachée à l'interface {{domxref("IDBDatabase")}}, permet d'ajouter un magasin d’objet ou un index à la base de donnée et renvoie un accès vers celui-ci.

+ +

Cette méthode utilise deux paramètres : le nom du magasin d'objets et un objet qui permettra de définir des propriétés optionnelles supplémentaires.

+ +

Cette méthode ne peut être appelée que lors d'une transaction en mode versionchange.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var objectStore = db.createObjectStore(name, optionalParameters);
+
+ +

Paramètres

+ +
+
name
+
Le nom du magasin d'objet à ajouter. Il est possible d'ajouter un magasin d’objet dont le nom est la chaîne vide (!).
+
optionalParameters {{optional_inline}}
+
+

Un objet qui permet de décrire plus finement le magasin d'objets avec ces propriétés :

+ + + + + + + + + + + + + + + + + + +
PropriétéDescription
keyPathLe chemin de la clé utilisé par le magasin d'objet. Si ce paramètre est vide ou non spécifié, le magasin d'objets utilisera une clé externe. Le keyPath peut aussi être un tableau.
autoIncrementSi true, le magasin d’objet implémentera un générateur de clé. La valeur par défaut est false.
+ +

Les autres propriétés seront ignorés.

+
+
+ +

Valeur de retour

+ +
+
{{domxref("IDBObjectStore")}}
+
Le magasin d'objets qui vient d'être créé.
+
+ +

Exceptions

+ +
+
InvalidStateError
+
Cette exception {{domxref("DOMException")}} est levée si la méthode n'est pas appelée lors d'une transaction en mode versionchange. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler {{domxref("IDBVersionChangeRequest.setVersion")}}.
+
TransactionInactiveError
+
Cette exception {{domxref("DOMException")}} est levée si la méthode est appelée sur une base de données qui n'existe pas (elle a par exemple été effacée). Dans les versions antérieures à Firefox 41, ce dernier levait une erreur InvalidStateError, cela est désormais corrigé (cf. {{bug("1176165")}}).
+
ConstraintError
+
Un magasin d'objet portant le même nom (la casse est importante) existe déjà dans cette base de donnée.
+
InvalidAccessError
+
Si la valeur autoIncrement est à true et que le chemin de clé n'est pas renseigné ou est un tableau vide.
+
+ +

Exemple

+ +
 // Ouverture de la base de données
+  var request = window.indexedDB.open("toDoList", 4);
+
+  /* Gestionnaire d'événement qui intervient lors de la
+     mise en place d'une nouvelle version de la base de
+     données, que la base n'existe pas et soit ajoutée
+     ou qu'un nouveau numéro de version soit passé à
+     window.indexedDB.open
+     Il est seulement mis en œuvre dans les
+     navigateurs récents */
+  request.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
+    };
+
+    // On ajoute un magasin d'objet à la base de données
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // définition des index de ce magasin d'objets
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += '<li>Magasin d\'objet ajouté.</li>';
+  };
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBDatabase.createObjectStore")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/deleteobjectstore/index.html b/files/fr/web/api/idbdatabase/deleteobjectstore/index.html deleted file mode 100644 index 4b9907c1de..0000000000 --- a/files/fr/web/api/idbdatabase/deleteobjectstore/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: IDBDatabase.deleteObjectStore() -slug: Web/API/IDBDatabase/deleteObjectStore -tags: - - API - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBDatabase/deleteObjectStore ---- -
{{APIRef("IndexedDB")}}
- -

La méthode deleteObjectStore() de l'interface {{domxref("IDBDatabase")}} supprime un magasin d'objet et ses index de la base de données.

- -

Comme la méthode {{domxref("IDBDatabase.createObjectStore")}}, cette méthode doit être appelée uniquement lors d'une transaction en mode versionchange.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
dbInstance.deleteObjectStore(name);
- -

Paramètres

- -
-
name
-
Le nom du magasin d'objet à supprimer.
-
- -

Valeur de retour

- -

Aucune.

- -

Exceptions

- -

Cette méthode peut lever une {{domxref("DOMException")}} d'un de ces types suivants:

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
InvalidStateErrorLevée si la méthode n'est pas appelée lors d'une transaction en mode versionchange. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode  {{domxref("IDBVersionChangeRequest.setVersion")}}.
TransactionInactiveErrorLevée si la méthode est appelée sur une base de données qui n'existe pas (ex. elle a été effacée). Pour les versions antérieures à Firefox 41, ce dernier déclenchait une erreur InvalidStateError, cela est désormais corrigé (cf. {{bug("1176165")}}).
NotFoundErrorLevée lors de la suppression d'un magasin d'objets qui n'existe pas. Les noms sont sensibles à la casse.
- -

Exemples

- -

Dans cet exemple, on ouvre une connexion à la base de données et dans le gestionnaire d'événements onupdateneeded, on ajoute un magasin d'objets en utilisant la méthode {{domxref("IDBDatabase.createObjectStore")}}. Enfin, on supprime ce magasin d'objets grâce à deleteObjectStore().

- -
  // Connexion à la base de données
-  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-  /* Gestionnaire d'événements qui intervient lors de
-     la mise en place d'une nouvelle version de la
-     base de données, que la base n'existe pas, qu'elle
-     soit ajoutée ou qu'un nouveau numéro de version
-     soit utilisé avec à window.indexedDB.open
-     Seulement utilisé avec les navigateurs récents */
-  DBOpenRequest.onupgradeneeded = function(event) {
-    var db = event.target.result;
-
-    db.onerror = function(event) {
-      note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
-    };
-
-    // Ajoute un magasin d'objets à la base de données
-
-    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
-
-    // Définition des index de ce magasin d'objets
-
-    objectStore.createIndex("hours", "hours", { unique: false });
-    objectStore.createIndex("minutes", "minutes", { unique: false });
-    objectStore.createIndex("day", "day", { unique: false });
-    objectStore.createIndex("month", "month", { unique: false });
-    objectStore.createIndex("year", "year", { unique: false });
-
-    objectStore.createIndex("notified", "notified", { unique: false });
-
-    note.innerHTML += '<li>Magasin d\'objets ajouté.</li>';
-
-    // Supprime le magasin d'objets
-
-    db.deleteObjectStore("toDoList");
-  };
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}}{{Spec2("IndexedDB 2")}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBDatabase.deleteObjectStore")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/deleteobjectstore/index.md b/files/fr/web/api/idbdatabase/deleteobjectstore/index.md new file mode 100644 index 0000000000..4b9907c1de --- /dev/null +++ b/files/fr/web/api/idbdatabase/deleteobjectstore/index.md @@ -0,0 +1,139 @@ +--- +title: IDBDatabase.deleteObjectStore() +slug: Web/API/IDBDatabase/deleteObjectStore +tags: + - API + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBDatabase/deleteObjectStore +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode deleteObjectStore() de l'interface {{domxref("IDBDatabase")}} supprime un magasin d'objet et ses index de la base de données.

+ +

Comme la méthode {{domxref("IDBDatabase.createObjectStore")}}, cette méthode doit être appelée uniquement lors d'une transaction en mode versionchange.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
dbInstance.deleteObjectStore(name);
+ +

Paramètres

+ +
+
name
+
Le nom du magasin d'objet à supprimer.
+
+ +

Valeur de retour

+ +

Aucune.

+ +

Exceptions

+ +

Cette méthode peut lever une {{domxref("DOMException")}} d'un de ces types suivants:

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
InvalidStateErrorLevée si la méthode n'est pas appelée lors d'une transaction en mode versionchange. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode  {{domxref("IDBVersionChangeRequest.setVersion")}}.
TransactionInactiveErrorLevée si la méthode est appelée sur une base de données qui n'existe pas (ex. elle a été effacée). Pour les versions antérieures à Firefox 41, ce dernier déclenchait une erreur InvalidStateError, cela est désormais corrigé (cf. {{bug("1176165")}}).
NotFoundErrorLevée lors de la suppression d'un magasin d'objets qui n'existe pas. Les noms sont sensibles à la casse.
+ +

Exemples

+ +

Dans cet exemple, on ouvre une connexion à la base de données et dans le gestionnaire d'événements onupdateneeded, on ajoute un magasin d'objets en utilisant la méthode {{domxref("IDBDatabase.createObjectStore")}}. Enfin, on supprime ce magasin d'objets grâce à deleteObjectStore().

+ +
  // Connexion à la base de données
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  /* Gestionnaire d'événements qui intervient lors de
+     la mise en place d'une nouvelle version de la
+     base de données, que la base n'existe pas, qu'elle
+     soit ajoutée ou qu'un nouveau numéro de version
+     soit utilisé avec à window.indexedDB.open
+     Seulement utilisé avec les navigateurs récents */
+  DBOpenRequest.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
+    };
+
+    // Ajoute un magasin d'objets à la base de données
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // Définition des index de ce magasin d'objets
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += '<li>Magasin d\'objets ajouté.</li>';
+
+    // Supprime le magasin d'objets
+
+    db.deleteObjectStore("toDoList");
+  };
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}}{{Spec2("IndexedDB 2")}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBDatabase.deleteObjectStore")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/index.html b/files/fr/web/api/idbdatabase/index.html deleted file mode 100644 index 9be924fb0b..0000000000 --- a/files/fr/web/api/idbdatabase/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: IDBDatabase -slug: Web/API/IDBDatabase -tags: - - API - - IndexedDB - - Interface - - Reference -translation_of: Web/API/IDBDatabase ---- -
{{APIRef("IndexedDB")}}
- -

L'interface IDBDatabase de l'API IndexedDB fournit une connexion à la base de données. On peut utiliser un objet IDBDatabase pour ouvrir une {{domxref("IDBTransaction","transaction")}} sur la base de données puis ajouter, éditer ou supprimer des enregistrements de cette base de données. Cette interface constitue le seul moyen d'accéder et de gérer les versions de la base de données.

- -

{{AvailableInWorkers}}

- -
-

Note : Tout ce qui est fait dans une base de données indexée s'inscrit dans le contexte d'une transaction qui représente un interaction avec les données dans la base. Tout les objets de l'interface IndexedDB (incluant les accès aux magasins d'objets, indexes et curseurs) sont liés à une transaction en particulier. Aussi, on ne peut pas exécuter une commande, accéder aux données ou ouvrir quoi que ce soit, en dehors d'une transaction.

-
- -

Méthodes

- -

Cet objet hérite de EventTarget.

- -
-
{{domxref("IDBDatabase.close()")}}
-
Ferme de façon asynchrone la connexion à la base de données.
-
{{domxref("IDBDatabase.createObjectStore()")}}
-
Ajoute un magasin d’objet ou un index à la base de donnéeset le renvoie.
-
{{domxref("IDBDatabase.deleteObjectStore()")}}
-
À partir d'un nom donné, supprime un magasin d'objet et les index associés.
-
{{domxref("IDBDatabase.transaction()")}}
-
Renvoie une transaction sous la forme d'un objet {{domxref("IDBTransaction")}} sur lequel on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} afin d'accéder aux magasins d'objet de la base de données.
-
- -

Propriétés

- -
-
{{domxref("IDBDatabase.name")}} {{readonlyInline}}
-
Une chaîne de caractères ({{domxref("DOMString")}}) qui contient le nom de la base de données connectée.
-
{{domxref("IDBDatabase.version")}} {{readonlyInline}}
-
Un entier de 64 bits qui indique la version de la base de données connectée. Quand une base de données est créée, cette propriété est une chaîne de caractère vide.
-
{{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}
-
Une liste de noms (sous la forme d'un objet {{domxref("DOMStringList")}} des magasins d'objets correspondants à la base de données connectée.
-
- -

Gestionnaires d'événements

- -
-
{{domxref("IDBDatabase.onabort")}}
-
S'exécute au déclenchement de l'événement abort quand la tentative d’accès à la base de donnée est interrompue.
-
{{domxref("IDBDatabase.onerror")}}
-
S’exécute au déclenchement de l'événement error quand la connexion à la base de donnée échoue.
-
{{domxref("IDBDatabase.onversionchange")}}
-
S’exécute au déclenchement de l'événement versionchange quand la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} à été demandé ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur). Cela est différent de la transaction correspondant à un changement de version (cf. {{domxref("IDBVersionChangeEvent")}}) mais les concepts sont liés.
-
- -

Exemples

- -

Dans le fragment de code suivant, on ouvre une base de données de façon asynchrone avec {{domxref("IDBFactory")}} puis on gère les cas de succès et d'erreur avant de créer un nouveau magasin d'objet au cas où une mise à jour est nécessaire ({{domxref("IDBdatabase")}}). Pour étudier un exemple complet et fonctionnel, voir notre application To-do Notifications (voir l'exemple live).

- -
// On ouvre la base de données
-  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-  // On ajoute les deux gestionnaires d'événements
-  // qui agissent sur l'objet IDBDatabase object,
-  // dans le cas où tout se passe bien ou non
-  DBOpenRequest.onerror = function(event) {
-    note.innerHTML += '<li>Erreur lors du chargement de la base de données.</li>';
-  };
-
-  DBOpenRequest.onsuccess = function(event) {
-    note.innerHTML += '<li>Base de données initialisée.</li>';
-
-    // On enregistre le résultat de l'ouverture
-    // dans la variable db (on l'utilisera plusieurs
-    // fois par la suite).
-    db = DBOpenRequest.result;
-
-    // On lance la fonction displayData()
-    // afin de remplir la liste de tâches
-    // avec les données contenues dans la base
-    displayData();
-  };
-
-  // Ce gestionnaire permet de parer au cas où une
-  // nouvelle version de la base de données doit
-  // être créée.
-  // Soit la base de données n'existait pas, soit
-  // il faut utiliser une nouvelle version
-
-  DBOpenRequest.onupgradeneeded = function(event) {
-    var db = event.target.result;
-
-    db.onerror = function(event) {
-      note.innerHTML += '<li>Erreur lors du chargement de la base de données.</li>';
-    };
-
-    // On crée un magasin d'objet objectStore pour
-    // cette base de données via IDBDatabase.createObjectStore
-
-    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
-
-    // Enfin, on définit les données qui seront contenues
-    // dans ce modèle de données
-
-    objectStore.createIndex("hours", "hours", { unique: false });
-    objectStore.createIndex("minutes", "minutes", { unique: false });
-    objectStore.createIndex("day", "day", { unique: false });
-    objectStore.createIndex("month", "month", { unique: false });
-    objectStore.createIndex("year", "year", { unique: false });
-
-    objectStore.createIndex("notified", "notified", { unique: false });
-
-    note.innerHTML += "<li>Magasin d'objets créé.</li>";
-  };
- -

La ligne qui suit permet d'ouvrir une transaction avec cette base de données afin de consulter le magasin d'objets et de manipuler les données qu'il contient..

- -
var objectStore = db.transaction('toDoList').objectStore('toDoList');
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBDatabase")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/index.md b/files/fr/web/api/idbdatabase/index.md new file mode 100644 index 0000000000..9be924fb0b --- /dev/null +++ b/files/fr/web/api/idbdatabase/index.md @@ -0,0 +1,153 @@ +--- +title: IDBDatabase +slug: Web/API/IDBDatabase +tags: + - API + - IndexedDB + - Interface + - Reference +translation_of: Web/API/IDBDatabase +--- +
{{APIRef("IndexedDB")}}
+ +

L'interface IDBDatabase de l'API IndexedDB fournit une connexion à la base de données. On peut utiliser un objet IDBDatabase pour ouvrir une {{domxref("IDBTransaction","transaction")}} sur la base de données puis ajouter, éditer ou supprimer des enregistrements de cette base de données. Cette interface constitue le seul moyen d'accéder et de gérer les versions de la base de données.

+ +

{{AvailableInWorkers}}

+ +
+

Note : Tout ce qui est fait dans une base de données indexée s'inscrit dans le contexte d'une transaction qui représente un interaction avec les données dans la base. Tout les objets de l'interface IndexedDB (incluant les accès aux magasins d'objets, indexes et curseurs) sont liés à une transaction en particulier. Aussi, on ne peut pas exécuter une commande, accéder aux données ou ouvrir quoi que ce soit, en dehors d'une transaction.

+
+ +

Méthodes

+ +

Cet objet hérite de EventTarget.

+ +
+
{{domxref("IDBDatabase.close()")}}
+
Ferme de façon asynchrone la connexion à la base de données.
+
{{domxref("IDBDatabase.createObjectStore()")}}
+
Ajoute un magasin d’objet ou un index à la base de donnéeset le renvoie.
+
{{domxref("IDBDatabase.deleteObjectStore()")}}
+
À partir d'un nom donné, supprime un magasin d'objet et les index associés.
+
{{domxref("IDBDatabase.transaction()")}}
+
Renvoie une transaction sous la forme d'un objet {{domxref("IDBTransaction")}} sur lequel on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} afin d'accéder aux magasins d'objet de la base de données.
+
+ +

Propriétés

+ +
+
{{domxref("IDBDatabase.name")}} {{readonlyInline}}
+
Une chaîne de caractères ({{domxref("DOMString")}}) qui contient le nom de la base de données connectée.
+
{{domxref("IDBDatabase.version")}} {{readonlyInline}}
+
Un entier de 64 bits qui indique la version de la base de données connectée. Quand une base de données est créée, cette propriété est une chaîne de caractère vide.
+
{{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}
+
Une liste de noms (sous la forme d'un objet {{domxref("DOMStringList")}} des magasins d'objets correspondants à la base de données connectée.
+
+ +

Gestionnaires d'événements

+ +
+
{{domxref("IDBDatabase.onabort")}}
+
S'exécute au déclenchement de l'événement abort quand la tentative d’accès à la base de donnée est interrompue.
+
{{domxref("IDBDatabase.onerror")}}
+
S’exécute au déclenchement de l'événement error quand la connexion à la base de donnée échoue.
+
{{domxref("IDBDatabase.onversionchange")}}
+
S’exécute au déclenchement de l'événement versionchange quand la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} à été demandé ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur). Cela est différent de la transaction correspondant à un changement de version (cf. {{domxref("IDBVersionChangeEvent")}}) mais les concepts sont liés.
+
+ +

Exemples

+ +

Dans le fragment de code suivant, on ouvre une base de données de façon asynchrone avec {{domxref("IDBFactory")}} puis on gère les cas de succès et d'erreur avant de créer un nouveau magasin d'objet au cas où une mise à jour est nécessaire ({{domxref("IDBdatabase")}}). Pour étudier un exemple complet et fonctionnel, voir notre application To-do Notifications (voir l'exemple live).

+ +
// On ouvre la base de données
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  // On ajoute les deux gestionnaires d'événements
+  // qui agissent sur l'objet IDBDatabase object,
+  // dans le cas où tout se passe bien ou non
+  DBOpenRequest.onerror = function(event) {
+    note.innerHTML += '<li>Erreur lors du chargement de la base de données.</li>';
+  };
+
+  DBOpenRequest.onsuccess = function(event) {
+    note.innerHTML += '<li>Base de données initialisée.</li>';
+
+    // On enregistre le résultat de l'ouverture
+    // dans la variable db (on l'utilisera plusieurs
+    // fois par la suite).
+    db = DBOpenRequest.result;
+
+    // On lance la fonction displayData()
+    // afin de remplir la liste de tâches
+    // avec les données contenues dans la base
+    displayData();
+  };
+
+  // Ce gestionnaire permet de parer au cas où une
+  // nouvelle version de la base de données doit
+  // être créée.
+  // Soit la base de données n'existait pas, soit
+  // il faut utiliser une nouvelle version
+
+  DBOpenRequest.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '<li>Erreur lors du chargement de la base de données.</li>';
+    };
+
+    // On crée un magasin d'objet objectStore pour
+    // cette base de données via IDBDatabase.createObjectStore
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // Enfin, on définit les données qui seront contenues
+    // dans ce modèle de données
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += "<li>Magasin d'objets créé.</li>";
+  };
+ +

La ligne qui suit permet d'ouvrir une transaction avec cette base de données afin de consulter le magasin d'objets et de manipuler les données qu'il contient..

+ +
var objectStore = db.transaction('toDoList').objectStore('toDoList');
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBDatabase")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/name/index.html b/files/fr/web/api/idbdatabase/name/index.html deleted file mode 100644 index 635a6ae383..0000000000 --- a/files/fr/web/api/idbdatabase/name/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: IDBDatabase.name -slug: Web/API/IDBDatabase/name -tags: - - API - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBDatabase/name ---- -
{{APIRef("IndexedDB")}}
- -

La propriété name de l'interface IDBDatabase est une chaîne de caractères, sous la forme d'un objet {{domxref("DOMString")}}, contenant le nom de la base de données connectée.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
db.name
- -

Valeur

- -

Une chaîne de caractères {{domxref("DOMString")}} contenant le nom de la base de données connectée.

- -

Exemple

- -

Cet exemple affiche le nom de la base de données qui est ouverte. La connexion (l'objet {{domxref("IDBDatabase")}}) est affectée à la variable db, puis sa propriété name est affichée dans la console.

- -
// Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-// Les deux gestionnaires d'événement activés pour
-// détecter si l'ouverture de la base se déroule
-// correctement ou non.
-
-DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '<li>Erreur au chargement de la base de données.</li>';
-};
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Base de données initialisée.</li>';
-
-  // Affecte la connexion à la variable db.
-  db = DBOpenRequest.result;
-
-  // Affiche le nom de la base de donnée (ici "toDoList")
-  // dans la console.
-  console.log(db.name);
-};
- -
-

Note : Pour un exemple fonctionnel complet, voir notre To-do Notifications (voir l'exemple live).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-name', 'name')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBDatabase.name")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/name/index.md b/files/fr/web/api/idbdatabase/name/index.md new file mode 100644 index 0000000000..635a6ae383 --- /dev/null +++ b/files/fr/web/api/idbdatabase/name/index.md @@ -0,0 +1,86 @@ +--- +title: IDBDatabase.name +slug: Web/API/IDBDatabase/name +tags: + - API + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBDatabase/name +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété name de l'interface IDBDatabase est une chaîne de caractères, sous la forme d'un objet {{domxref("DOMString")}}, contenant le nom de la base de données connectée.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
db.name
+ +

Valeur

+ +

Une chaîne de caractères {{domxref("DOMString")}} contenant le nom de la base de données connectée.

+ +

Exemple

+ +

Cet exemple affiche le nom de la base de données qui est ouverte. La connexion (l'objet {{domxref("IDBDatabase")}}) est affectée à la variable db, puis sa propriété name est affichée dans la console.

+ +
// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Les deux gestionnaires d'événement activés pour
+// détecter si l'ouverture de la base se déroule
+// correctement ou non.
+
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '<li>Erreur au chargement de la base de données.</li>';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Base de données initialisée.</li>';
+
+  // Affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Affiche le nom de la base de donnée (ici "toDoList")
+  // dans la console.
+  console.log(db.name);
+};
+ +
+

Note : Pour un exemple fonctionnel complet, voir notre To-do Notifications (voir l'exemple live).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-name', 'name')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBDatabase.name")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.html b/files/fr/web/api/idbdatabase/objectstorenames/index.html deleted file mode 100644 index f9263bdf33..0000000000 --- a/files/fr/web/api/idbdatabase/objectstorenames/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: IDBDatabase.objectStoreNames -slug: Web/API/IDBDatabase/objectStoreNames -tags: - - API - - Database - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBDatabase/objectStoreNames ---- -
{{APIRef("IndexedDB")}}
- -

La propriété objectStoreNames, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères  ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
db.objectStoreNames
- -

Valeur

- -

Une liste {{domxref("DOMStringList")}} des noms de magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.

- -

Exemple

- -
// Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-// Les deux gestionnaires d’événements activés pour
-// gérer la réussite ou l'échec de le connexion.
-DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '<li>Erreur de chargement de la base de données.</li>';
-};
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Base de données initialisée.</li>';
-
-  // Affecte la connexion à la variable db.
-  db = DBOpenRequest.result;
-
-  // Cette ligne affiche sur la console la liste des magasins
-  // d'objets de la base de données
-  console.log(db.objectStoreNames);
-};
- -
-

Note :Pour un exemple fonctionnel complet, voir notre application de démo To-do Notifications (l'exemple live).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBDatabase.objectStoreNames")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.md b/files/fr/web/api/idbdatabase/objectstorenames/index.md new file mode 100644 index 0000000000..f9263bdf33 --- /dev/null +++ b/files/fr/web/api/idbdatabase/objectstorenames/index.md @@ -0,0 +1,83 @@ +--- +title: IDBDatabase.objectStoreNames +slug: Web/API/IDBDatabase/objectStoreNames +tags: + - API + - Database + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBDatabase/objectStoreNames +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété objectStoreNames, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères  ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
db.objectStoreNames
+ +

Valeur

+ +

Une liste {{domxref("DOMStringList")}} des noms de magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.

+ +

Exemple

+ +
// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Les deux gestionnaires d’événements activés pour
+// gérer la réussite ou l'échec de le connexion.
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '<li>Erreur de chargement de la base de données.</li>';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Base de données initialisée.</li>';
+
+  // Affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Cette ligne affiche sur la console la liste des magasins
+  // d'objets de la base de données
+  console.log(db.objectStoreNames);
+};
+ +
+

Note :Pour un exemple fonctionnel complet, voir notre application de démo To-do Notifications (l'exemple live).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBDatabase.objectStoreNames")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/onabort/index.html b/files/fr/web/api/idbdatabase/onabort/index.html deleted file mode 100644 index f47e7695e2..0000000000 --- a/files/fr/web/api/idbdatabase/onabort/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: IDBDatabase.onabort -slug: Web/API/IDBDatabase/onabort -tags: - - API - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBDatabase/onabort ---- -
{{APIRef("IndexedDB")}}
- -

Le gestionnaire d'événement onabort, rattaché à l'interface {{domxref("IDBDatabase")}}, s'exécute au déclenchement de l'événement abort, lorsque la tentative d’accès à la base de données est interrompue.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
db.onabort = function() { ... }
- -

Exemple

- -

Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événement onerror et onabort pour gérer les cas d'échec.

- -
DBOpenRequest.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  db.onerror = function() {
-    note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
-  };
-
-  db.onabort = function() {
-    note.innerHTML += '<li>L\'ouverture de la connexion à été annulée !</li>';
-  };
-
-  // On ajoute un magasin d'objet à la base de données
-
-  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
-
-  // On définit les index du magasin
-
-  objectStore.createIndex("hours", "hours", { unique: false });
-  objectStore.createIndex("minutes", "minutes", { unique: false });
-  objectStore.createIndex("day", "day", { unique: false });
-  objectStore.createIndex("month", "month", { unique: false });
-  objectStore.createIndex("year", "year", { unique: false });
-
-  objectStore.createIndex("notified", "notified", { unique: false });
-
-  note.innerHTML += '<li>Le magasin d\'objets à été ajouté.</li>';
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-onabort', 'onabort')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.IDBDatabase.onabort")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/onabort/index.md b/files/fr/web/api/idbdatabase/onabort/index.md new file mode 100644 index 0000000000..f47e7695e2 --- /dev/null +++ b/files/fr/web/api/idbdatabase/onabort/index.md @@ -0,0 +1,84 @@ +--- +title: IDBDatabase.onabort +slug: Web/API/IDBDatabase/onabort +tags: + - API + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBDatabase/onabort +--- +
{{APIRef("IndexedDB")}}
+ +

Le gestionnaire d'événement onabort, rattaché à l'interface {{domxref("IDBDatabase")}}, s'exécute au déclenchement de l'événement abort, lorsque la tentative d’accès à la base de données est interrompue.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
db.onabort = function() { ... }
+ +

Exemple

+ +

Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événement onerror et onabort pour gérer les cas d'échec.

+ +
DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function() {
+    note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
+  };
+
+  db.onabort = function() {
+    note.innerHTML += '<li>L\'ouverture de la connexion à été annulée !</li>';
+  };
+
+  // On ajoute un magasin d'objet à la base de données
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // On définit les index du magasin
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '<li>Le magasin d\'objets à été ajouté.</li>';
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-onabort', 'onabort')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.IDBDatabase.onabort")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/onerror/index.html b/files/fr/web/api/idbdatabase/onerror/index.html deleted file mode 100644 index b8357dce06..0000000000 --- a/files/fr/web/api/idbdatabase/onerror/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: IDBDatabase.onerror -slug: Web/API/IDBDatabase/onerror -tags: - - API - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBDatabase/onerror ---- -
{{APIRef("IndexedDB")}}
- -

Le gestionnaire d'événement onerror, rattaché à  l'interface IDBDatabase, s’exécute au déclenchement de l'événement error qui se produit lorsque la connexion à la base de donnée échoue.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
db.onerror = function() { ... }
- -

Exemple

- -

Dans cet exemple, on illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événements onerror et onabort afin de gérer les cas d'échec de la connexion.

- -
DBOpenRequest.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  db.onerror = function() {
-    note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
-  };
-
-  db.onabort = function() {
-    note.innerHTML += '<li>L\'ouverture de la connexion à été annulé!</li>';
-  };
-
-  // Ajoute un magasin d'objet à la base de données
-
-  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
-
-  // Définition des index
-
-  objectStore.createIndex("hours", "hours", { unique: false });
-  objectStore.createIndex("minutes", "minutes", { unique: false });
-  objectStore.createIndex("day", "day", { unique: false });
-  objectStore.createIndex("month", "month", { unique: false });
-  objectStore.createIndex("year", "year", { unique: false });
-
-  objectStore.createIndex("notified", "notified", { unique: false });
-
-  note.innerHTML += '<li>Le magasin d\'objets à été ajouté.</li>';
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBDatabase.onerror")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/onerror/index.md b/files/fr/web/api/idbdatabase/onerror/index.md new file mode 100644 index 0000000000..b8357dce06 --- /dev/null +++ b/files/fr/web/api/idbdatabase/onerror/index.md @@ -0,0 +1,84 @@ +--- +title: IDBDatabase.onerror +slug: Web/API/IDBDatabase/onerror +tags: + - API + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBDatabase/onerror +--- +
{{APIRef("IndexedDB")}}
+ +

Le gestionnaire d'événement onerror, rattaché à  l'interface IDBDatabase, s’exécute au déclenchement de l'événement error qui se produit lorsque la connexion à la base de donnée échoue.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
db.onerror = function() { ... }
+ +

Exemple

+ +

Dans cet exemple, on illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événements onerror et onabort afin de gérer les cas d'échec de la connexion.

+ +
DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function() {
+    note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
+  };
+
+  db.onabort = function() {
+    note.innerHTML += '<li>L\'ouverture de la connexion à été annulé!</li>';
+  };
+
+  // Ajoute un magasin d'objet à la base de données
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Définition des index
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '<li>Le magasin d\'objets à été ajouté.</li>';
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBDatabase.onerror")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/onversionchange/index.html b/files/fr/web/api/idbdatabase/onversionchange/index.html deleted file mode 100644 index 51741c0f7d..0000000000 --- a/files/fr/web/api/idbdatabase/onversionchange/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: IDBDatabase.onversionchange -slug: Web/API/IDBDatabase/onversionchange -tags: - - API - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBDatabase/onversionchange ---- -
{{APIRef("IndexedDB")}}
- -

Le gestionnaire d'événement onversionchange, rattaché à l'interface {{domxref("IDBDatabase")}}, s’exécute au déclenchement de l'événement versionchange qui se produit lorsque la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} a été demandé par ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur)).

- -

Cela n'est pas la même chose qu'une transaction versionchange (bien que les concepts soient apparentés).

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
db.onversionchange = function() { ... }
- -

Exemple

- -

Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objets. Les deux gestionnaires d'événements onerror et onabort sont utilisés pour les cas d'échec. Le gestionnaire d'événement onversionchange est utilisé afin d'indiquer que la structure de la base de données a été modifiée.

- -
DBOpenRequest.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  db.onerror = function() {
-    note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
-  };
-
-  db.onabort = function() {
-    note.innerHTML += '<li>L\'ouverture de la connexion à été annulée !</li>';
-  };
-
-  // Ajoute un magasin d'objets à la base de données
-
-  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
-
-  // Définition des index
-
-  objectStore.createIndex("hours", "hours", { unique: false });
-  objectStore.createIndex("minutes", "minutes", { unique: false });
-  objectStore.createIndex("day", "day", { unique: false });
-  objectStore.createIndex("month", "month", { unique: false });
-  objectStore.createIndex("year", "year", { unique: false });
-
-  objectStore.createIndex("notified", "notified", { unique: false });
-
-  note.innerHTML += '<li>Le magasin d\'objet à été ajouté.</li>';
-
-  db.onversionchange = function(event) {
-    note.innerHTML += '<li>Des changements ont été appliqués sur la base de données. Vous devez réactualiser cette page ou la fermer et utiliser l\'autre version de cette application qui est ouverte.</li>';
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBDatabase.onversionchange")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/onversionchange/index.md b/files/fr/web/api/idbdatabase/onversionchange/index.md new file mode 100644 index 0000000000..51741c0f7d --- /dev/null +++ b/files/fr/web/api/idbdatabase/onversionchange/index.md @@ -0,0 +1,90 @@ +--- +title: IDBDatabase.onversionchange +slug: Web/API/IDBDatabase/onversionchange +tags: + - API + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBDatabase/onversionchange +--- +
{{APIRef("IndexedDB")}}
+ +

Le gestionnaire d'événement onversionchange, rattaché à l'interface {{domxref("IDBDatabase")}}, s’exécute au déclenchement de l'événement versionchange qui se produit lorsque la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} a été demandé par ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur)).

+ +

Cela n'est pas la même chose qu'une transaction versionchange (bien que les concepts soient apparentés).

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
db.onversionchange = function() { ... }
+ +

Exemple

+ +

Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objets. Les deux gestionnaires d'événements onerror et onabort sont utilisés pour les cas d'échec. Le gestionnaire d'événement onversionchange est utilisé afin d'indiquer que la structure de la base de données a été modifiée.

+ +
DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function() {
+    note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
+  };
+
+  db.onabort = function() {
+    note.innerHTML += '<li>L\'ouverture de la connexion à été annulée !</li>';
+  };
+
+  // Ajoute un magasin d'objets à la base de données
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Définition des index
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '<li>Le magasin d\'objet à été ajouté.</li>';
+
+  db.onversionchange = function(event) {
+    note.innerHTML += '<li>Des changements ont été appliqués sur la base de données. Vous devez réactualiser cette page ou la fermer et utiliser l\'autre version de cette application qui est ouverte.</li>';
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBDatabase.onversionchange")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/transaction/index.html b/files/fr/web/api/idbdatabase/transaction/index.html deleted file mode 100644 index 531edfbdb2..0000000000 --- a/files/fr/web/api/idbdatabase/transaction/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: IDBDatabase.transaction() -slug: Web/API/IDBDatabase/transaction -translation_of: Web/API/IDBDatabase/transaction ---- -

{{ APIRef("IndexedDB") }}

- -
-

La méthode transaction de l'interface {{domxref("IDBDatabase")}} renvoie une {{domxref("IDBTransaction","transaction")}} sur laquelle on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} pour accéder aux magasins d'objets de la base de donnée.

-
- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var transaction = db.transaction(storeNames, mode);
- -

Paramètres

- -
-
storeNames
-

un tableau de noms de magasins d'objets entrant dans le cadre de cette transaction. Indique seulement les magasins d'objets dont on a besoin. Si l’on n’a besoin que d’un seul magasin d'objet, on peut simplement passer son nom. Les lignes suivantes sont équivalentes :

- 
var transaction = db.transaction(['my-store-name']);
-var transaction = db.transaction('my-store-name');
-

Pour utiliser tous les magasins d'objets de la base de donnée, on peut appeler la methode {{domxref("IDBDatabase.objectStoreNames")}}:

- 
var transaction = db.transaction(db.objectStoreNames);
-

Passer un tableau vide lèvera une exception.

-
mode {{optional_inline}}
-

Le {{domxref("IDBTransactionMode","mode")}} d’{{domxref("IDBObjectStore","accès aux magasins d'objets")}} à la base de données (par default readonly):

- - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurExplication
readonlypermet de prendre des objets dans les magasins d'objets, de lire les index et de faire des curseurs.
readwritePermet en plus de que l'on peut faire en readonly, d’ajouter et mettre à jour des objets dans les magasins d'objets.
versionchangePermet toute les opérations, y compris celles qui suppriment ou ajoutent des {{domxref("IDBOjectStore","magasins d'objets")}} ou des {{domxref("IDBIndex","index")}}. Ce mode met à jour le numéro de version de la base de données, il se sert au début de {{domxref ("IDBDatabase.setVersion")}}. Les {{domxref("IDBTransaction","transactions")}} dans ce mode ne peuvent pas fonctionner en même temps que d'autres.
readwriteflush -

Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard), vous pouvez forcer l’enregistrement complet sur disque avant de déclencher l’événement complete en utilisant le mode readwriteflush (non standard) expérimental ( voir {{domxref("IDBDatabase.transaction")}} ). C'est expérimental, et ne peut être utilisé que si le dom.indexedDB.experimental pref est réglé sur true dans about:config.

- -

Note : Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}.) Auparavant, dans une transaction en readwrite l'événement complete était déclanché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant l'événement complete est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement complete peut ainsi se déclancher plus rapidement qu'auparavant, cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écites sur le disque. Étant donné que ces événements catastrophiques sont rares la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.

-
-

Pour éviter des pertes de performance, n’utilisez le mode readwrite que si vous avez effectivement besoin d’écrire ou de mettre à jour des données sur la base.")}} Si on a besoin d’accéder à un magasin d'objets pour écrire ou mettre à jour des enregistrement, on utilise la sytaxe:

- 
var transaction = db.transaction('monMagasin','readwrite');
-
-
- -

Renvoie

- -

Une {{domxref("IDBTransaction","transaction")}}.

- -

Exceptions

- -
-
InvalidStateError
-
Cette {{domxref("DOMException","exception")}} est levée si la méthode close() a été appelée sur cette connexion à la base de donnée.
-
NotFoundError
-
Cette {{domxref("DOMException","exception")}} est levée si un magasin d'objets indiqué dans le paramètre storeNames n'existe pas ou plus.
-
TypeError
-
Cette {{domxref("DOMException","exception")}} est levée si la valeur du paramètre mode n'est pas valide.
-
InvalidAccessError
-
Cette {{domxref("DOMException","exception")}} est levée si la liste passée à storeNames est vide
-
- -

Exemple

- -

Dans cet exemple, on ouvre simplement une connexion à la base de donnée puis une transaction sur cette connexion.

- -
var db;
-
-// Connexion à la base de donnée
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Base de donnée initialisée.</li>';
-
-  // affecte la connexion à la variable db
-  db = DBOpenRequest.result;
-
-  // exécute la fonction displayData() qui affiche la liste des taches présentes dans la base de donnée
-  displayData();
-
-};
-
-// ouvre une transaction en lecture/écriture prête pour l'ajout d'enregistrement.
-var transaction = db.transaction(["toDoList"], "readwrite");
-
-// affiche le succès de l'ouverture de la transaction
-transaction.oncomplete = function(event) {
-  note.innerHTML += '<li>Fin de transaction: les modifications sur la base de donnée sont terminées.</li>';
-};
-
-transaction.onerror = function(event) {
-  note.innerHTML += '<li>La transaction n'a pas pu être initiée.</li>';
-};
-
-// On peut maintenant accéder au magasin d'objet
-var objectStore = transaction.objectStore("toDoList");
-// etc.
- -

Note :Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBDatabase.transaction")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/transaction/index.md b/files/fr/web/api/idbdatabase/transaction/index.md new file mode 100644 index 0000000000..531edfbdb2 --- /dev/null +++ b/files/fr/web/api/idbdatabase/transaction/index.md @@ -0,0 +1,152 @@ +--- +title: IDBDatabase.transaction() +slug: Web/API/IDBDatabase/transaction +translation_of: Web/API/IDBDatabase/transaction +--- +

{{ APIRef("IndexedDB") }}

+ +
+

La méthode transaction de l'interface {{domxref("IDBDatabase")}} renvoie une {{domxref("IDBTransaction","transaction")}} sur laquelle on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} pour accéder aux magasins d'objets de la base de donnée.

+
+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var transaction = db.transaction(storeNames, mode);
+ +

Paramètres

+ +
+
storeNames
+

un tableau de noms de magasins d'objets entrant dans le cadre de cette transaction. Indique seulement les magasins d'objets dont on a besoin. Si l’on n’a besoin que d’un seul magasin d'objet, on peut simplement passer son nom. Les lignes suivantes sont équivalentes :

+ 
var transaction = db.transaction(['my-store-name']);
+var transaction = db.transaction('my-store-name');
+

Pour utiliser tous les magasins d'objets de la base de donnée, on peut appeler la methode {{domxref("IDBDatabase.objectStoreNames")}}:

+ 
var transaction = db.transaction(db.objectStoreNames);
+

Passer un tableau vide lèvera une exception.

+
mode {{optional_inline}}
+

Le {{domxref("IDBTransactionMode","mode")}} d’{{domxref("IDBObjectStore","accès aux magasins d'objets")}} à la base de données (par default readonly):

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurExplication
readonlypermet de prendre des objets dans les magasins d'objets, de lire les index et de faire des curseurs.
readwritePermet en plus de que l'on peut faire en readonly, d’ajouter et mettre à jour des objets dans les magasins d'objets.
versionchangePermet toute les opérations, y compris celles qui suppriment ou ajoutent des {{domxref("IDBOjectStore","magasins d'objets")}} ou des {{domxref("IDBIndex","index")}}. Ce mode met à jour le numéro de version de la base de données, il se sert au début de {{domxref ("IDBDatabase.setVersion")}}. Les {{domxref("IDBTransaction","transactions")}} dans ce mode ne peuvent pas fonctionner en même temps que d'autres.
readwriteflush +

Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard), vous pouvez forcer l’enregistrement complet sur disque avant de déclencher l’événement complete en utilisant le mode readwriteflush (non standard) expérimental ( voir {{domxref("IDBDatabase.transaction")}} ). C'est expérimental, et ne peut être utilisé que si le dom.indexedDB.experimental pref est réglé sur true dans about:config.

+ +

Note : Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}.) Auparavant, dans une transaction en readwrite l'événement complete était déclanché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant l'événement complete est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement complete peut ainsi se déclancher plus rapidement qu'auparavant, cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écites sur le disque. Étant donné que ces événements catastrophiques sont rares la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.

+
+

Pour éviter des pertes de performance, n’utilisez le mode readwrite que si vous avez effectivement besoin d’écrire ou de mettre à jour des données sur la base.")}} Si on a besoin d’accéder à un magasin d'objets pour écrire ou mettre à jour des enregistrement, on utilise la sytaxe:

+ 
var transaction = db.transaction('monMagasin','readwrite');
+
+
+ +

Renvoie

+ +

Une {{domxref("IDBTransaction","transaction")}}.

+ +

Exceptions

+ +
+
InvalidStateError
+
Cette {{domxref("DOMException","exception")}} est levée si la méthode close() a été appelée sur cette connexion à la base de donnée.
+
NotFoundError
+
Cette {{domxref("DOMException","exception")}} est levée si un magasin d'objets indiqué dans le paramètre storeNames n'existe pas ou plus.
+
TypeError
+
Cette {{domxref("DOMException","exception")}} est levée si la valeur du paramètre mode n'est pas valide.
+
InvalidAccessError
+
Cette {{domxref("DOMException","exception")}} est levée si la liste passée à storeNames est vide
+
+ +

Exemple

+ +

Dans cet exemple, on ouvre simplement une connexion à la base de donnée puis une transaction sur cette connexion.

+ +
var db;
+
+// Connexion à la base de donnée
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Base de donnée initialisée.</li>';
+
+  // affecte la connexion à la variable db
+  db = DBOpenRequest.result;
+
+  // exécute la fonction displayData() qui affiche la liste des taches présentes dans la base de donnée
+  displayData();
+
+};
+
+// ouvre une transaction en lecture/écriture prête pour l'ajout d'enregistrement.
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// affiche le succès de l'ouverture de la transaction
+transaction.oncomplete = function(event) {
+  note.innerHTML += '<li>Fin de transaction: les modifications sur la base de donnée sont terminées.</li>';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '<li>La transaction n'a pas pu être initiée.</li>';
+};
+
+// On peut maintenant accéder au magasin d'objet
+var objectStore = transaction.objectStore("toDoList");
+// etc.
+ +

Note :Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBDatabase.transaction")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbdatabase/version/index.html b/files/fr/web/api/idbdatabase/version/index.html deleted file mode 100644 index 81289060e2..0000000000 --- a/files/fr/web/api/idbdatabase/version/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: IDBDatabase.version -slug: Web/API/IDBDatabase/version -tags: - - API - - IDBDatabase - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBDatabase/version ---- -
{{APIRef("IndexedDB")}}
- -

La propriété version, rattachée à l'interface {{domxref("IDBDatabase")}}, est un entier sur 64 bits qui contient la version de la base de données à laquelle on est connecté. Lors de la création initiale d'une base de données, cet attribut a la chaîne vide.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
db.version
- -

Valeur

- -

Un entier qui contient la version de la base de données à laquelle on est connecté.

- -

Exemples

- -
// On ouvre la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-//  On déclare des gestionnaires d'évènements pour l'ouverture
-DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '<li>Erreur lors du chargement de la base de données.</li>';
-};
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Base de données initialisée.</li>';
-
-  // on stocke le résultat de l'ouverture si besoin de l'utiliser ensuite
-  db = DBOpenRequest.result;
-
-  // Cette ligne inscrira la version de la base dans la console : "4"
-  console.log(db.version);
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-version', 'version')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBDatabase.version")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbdatabase/version/index.md b/files/fr/web/api/idbdatabase/version/index.md new file mode 100644 index 0000000000..81289060e2 --- /dev/null +++ b/files/fr/web/api/idbdatabase/version/index.md @@ -0,0 +1,77 @@ +--- +title: IDBDatabase.version +slug: Web/API/IDBDatabase/version +tags: + - API + - IDBDatabase + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBDatabase/version +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété version, rattachée à l'interface {{domxref("IDBDatabase")}}, est un entier sur 64 bits qui contient la version de la base de données à laquelle on est connecté. Lors de la création initiale d'une base de données, cet attribut a la chaîne vide.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
db.version
+ +

Valeur

+ +

Un entier qui contient la version de la base de données à laquelle on est connecté.

+ +

Exemples

+ +
// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+//  On déclare des gestionnaires d'évènements pour l'ouverture
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '<li>Erreur lors du chargement de la base de données.</li>';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Base de données initialisée.</li>';
+
+  // on stocke le résultat de l'ouverture si besoin de l'utiliser ensuite
+  db = DBOpenRequest.result;
+
+  // Cette ligne inscrira la version de la base dans la console : "4"
+  console.log(db.version);
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBDatabase-version', 'version')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBDatabase.version")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbenvironment/index.html b/files/fr/web/api/idbenvironment/index.html deleted file mode 100644 index ffe93f3b02..0000000000 --- a/files/fr/web/api/idbenvironment/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: IDBEnvironment -slug: Web/API/IDBEnvironment -tags: - - API - - IDBEnvironment - - IndexedDB - - Référence(2) -translation_of: Web/API/IDBEnvironment ---- -
{{APIRef}}
- -
-

Attention : À partir de Firefox 52, la propriété définie dans ce mixin a été déplacée vers {{domxref("WindowOrWorkerGlobalScope")}} et d'autres navigateurs implémenteront également cette décision. Voir {{domxref("WindowOrWorkerGlobalScope")}} pour des informations à jour.

-
- -

L'utilitaire IDBEnvironment, lié à l'interface IndexedDB API, contient la propriété indexedDB qui permet d'accéder aux fonctionnalités de l'API IndexedDB. C'est l'interface de haut niveau implémentée par les objets {{domxref("window")}} et {{domxref("Worker")}}.

- -

{{AvailableInWorkers}}

- -

Propriétés

- -
-
{{domxref("IDBEnvironment.indexedDB")}} {{readonlyInline}}
-
Cette propriété fournit un mécanisme qui permet aux applications d'accéder à des bases de données de façon asynchrone. Elle contient un objet {{domxref("IDBFactory")}}.
-
- -

Exemple

- -

Dans le fragment de code suivant, on crée une requête asynchrone sur une base de données et on utilise le gestionnaire d'évènements onsuccess de la requête :

- -
var db;
-function openDB() {
- var DBOpenRequest = window.indexedDB.open("toDoList");
- DBOpenRequest.onsuccess = function(e) {
-   db = DBOpenRequest.result;
- };
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -
-
- - -

{{Compat("api.IDBEnvironment")}}

-
- -

Voir aussi

-
- - diff --git a/files/fr/web/api/idbenvironment/index.md b/files/fr/web/api/idbenvironment/index.md new file mode 100644 index 0000000000..ffe93f3b02 --- /dev/null +++ b/files/fr/web/api/idbenvironment/index.md @@ -0,0 +1,78 @@ +--- +title: IDBEnvironment +slug: Web/API/IDBEnvironment +tags: + - API + - IDBEnvironment + - IndexedDB + - Référence(2) +translation_of: Web/API/IDBEnvironment +--- +
{{APIRef}}
+ +
+

Attention : À partir de Firefox 52, la propriété définie dans ce mixin a été déplacée vers {{domxref("WindowOrWorkerGlobalScope")}} et d'autres navigateurs implémenteront également cette décision. Voir {{domxref("WindowOrWorkerGlobalScope")}} pour des informations à jour.

+
+ +

L'utilitaire IDBEnvironment, lié à l'interface IndexedDB API, contient la propriété indexedDB qui permet d'accéder aux fonctionnalités de l'API IndexedDB. C'est l'interface de haut niveau implémentée par les objets {{domxref("window")}} et {{domxref("Worker")}}.

+ +

{{AvailableInWorkers}}

+ +

Propriétés

+ +
+
{{domxref("IDBEnvironment.indexedDB")}} {{readonlyInline}}
+
Cette propriété fournit un mécanisme qui permet aux applications d'accéder à des bases de données de façon asynchrone. Elle contient un objet {{domxref("IDBFactory")}}.
+
+ +

Exemple

+ +

Dans le fragment de code suivant, on crée une requête asynchrone sur une base de données et on utilise le gestionnaire d'évènements onsuccess de la requête :

+ +
var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open("toDoList");
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ };
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +
+
+ + +

{{Compat("api.IDBEnvironment")}}

+
+ +

Voir aussi

+
+ + diff --git a/files/fr/web/api/idbfactory/cmp/index.html b/files/fr/web/api/idbfactory/cmp/index.html deleted file mode 100644 index 0abf09e9d2..0000000000 --- a/files/fr/web/api/idbfactory/cmp/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: IDBFactory.cmp() -slug: Web/API/IDBFactory/cmp -tags: - - API - - IDBFactory - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBFactory/cmp ---- -
{{APIRef("IndexedDB")}}
- -

La méthode cmp() de l'interface {{domxref("IDBFactory")}} compare deux valeurs de clé et détermine si celles-ci sont égales et sinon, laquelle est la plus grande. Cette opération est utilisée pour l'enregistrement et le parcours des données.

- -

{{AvailableInWorkers}}

- -

Note : Cette méthode ne doit pas être utilisée pour comparer des valeurs JavaScript. En effet, de nombreuses valeurs JavaScript ne sont pas des valeurs valides pour représenter des clés IndexedDB (les booléens et les objets par exemple), dans ces cas, elles peuvent être traitées comme des clés égales (ainsi IndexedDB ignore les tableaux ayant des propriétés non numériques et les considère comme des tableaux vides, de sorte que les éventuels tableaux non numériques seront considérés comme égaux). Une exception est levée si l'une des valeurs n'est pas une clé valide.

- -

Syntaxe

- -
var resultat = window.indexedDB.cmp(a, b);
- -

Paramètres

- -
-
a
-
La première clé pour la comparaison.
-
b
-
La deuxième clé pour la comparaison.
-
- -

Valeur de retour

- -

Un entier qui indique le résultat de la comparaison. Le tableau ci-dessous indique les valeurs possibles et leur signification :

- - - - - - - - - - - - - - - - - - - - -
Valeur renvoyéeDescription
-1La clé 1 est plus petite que la clé 2.
0Les deux clé sont égales.
1La clé 1 est plus grande que la clé 2.
- -

Exceptions levées

- -

Cette méthode peut lever une exception {{domxref("DOMException")}} de type :

- - - - - - - - - - - - -
ExceptionDescription
DataErrorL'une des clés fournies n'est pas valide.
- -

Exemples

- -
var a = 1;
-var b = 2;
-var result = window.indexedDB.cmp(a, b);
-console.log( "Résultat de la comparaison : " + result );
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBFactory.cmp")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbfactory/cmp/index.md b/files/fr/web/api/idbfactory/cmp/index.md new file mode 100644 index 0000000000..0abf09e9d2 --- /dev/null +++ b/files/fr/web/api/idbfactory/cmp/index.md @@ -0,0 +1,113 @@ +--- +title: IDBFactory.cmp() +slug: Web/API/IDBFactory/cmp +tags: + - API + - IDBFactory + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBFactory/cmp +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode cmp() de l'interface {{domxref("IDBFactory")}} compare deux valeurs de clé et détermine si celles-ci sont égales et sinon, laquelle est la plus grande. Cette opération est utilisée pour l'enregistrement et le parcours des données.

+ +

{{AvailableInWorkers}}

+ +

Note : Cette méthode ne doit pas être utilisée pour comparer des valeurs JavaScript. En effet, de nombreuses valeurs JavaScript ne sont pas des valeurs valides pour représenter des clés IndexedDB (les booléens et les objets par exemple), dans ces cas, elles peuvent être traitées comme des clés égales (ainsi IndexedDB ignore les tableaux ayant des propriétés non numériques et les considère comme des tableaux vides, de sorte que les éventuels tableaux non numériques seront considérés comme égaux). Une exception est levée si l'une des valeurs n'est pas une clé valide.

+ +

Syntaxe

+ +
var resultat = window.indexedDB.cmp(a, b);
+ +

Paramètres

+ +
+
a
+
La première clé pour la comparaison.
+
b
+
La deuxième clé pour la comparaison.
+
+ +

Valeur de retour

+ +

Un entier qui indique le résultat de la comparaison. Le tableau ci-dessous indique les valeurs possibles et leur signification :

+ + + + + + + + + + + + + + + + + + + + +
Valeur renvoyéeDescription
-1La clé 1 est plus petite que la clé 2.
0Les deux clé sont égales.
1La clé 1 est plus grande que la clé 2.
+ +

Exceptions levées

+ +

Cette méthode peut lever une exception {{domxref("DOMException")}} de type :

+ + + + + + + + + + + + +
ExceptionDescription
DataErrorL'une des clés fournies n'est pas valide.
+ +

Exemples

+ +
var a = 1;
+var b = 2;
+var result = window.indexedDB.cmp(a, b);
+console.log( "Résultat de la comparaison : " + result );
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBFactory.cmp")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbfactory/deletedatabase/index.html b/files/fr/web/api/idbfactory/deletedatabase/index.html deleted file mode 100644 index a890a63166..0000000000 --- a/files/fr/web/api/idbfactory/deletedatabase/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: IDBFactory.deleteDatabase() -slug: Web/API/IDBFactory/deleteDatabase -tags: - - IDBFactory - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBFactory/deleteDatabase ---- -
{{APIRef("IndexedDB")}}
- -

La méthode deleteDatabase(), rattachée à l'interface {{domxref("IDBFactory")}}, permet de demander la suppression d'une base de données. La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération de suppression de façon asynchrone.

- -

Si la base de données est bien supprimée, un évènement success est déclenché sur l'objet IDBOpenDBRequest renvoyé et la propriété result vaut alors undefined. Si une erreur se produit lors de la suppression, ce sera un évènement error qui sera déclenché sur l'objet renvoyé par la méthode.

- -
-

Lorsque la méthode deleteDatabase() est invoquée, toutes les autres connexions qui sont ouvertes sur cette base de données recevront un évènement versionchange.

-
- -

{{AvailableInWorkers}}

- -

Syntaxe

- -

La syntaxe actuellement standard est :

- -
var request = indexedDB.deleteDatabase(nom);
- -

Une version expérimentale permet de gérer des options (cf. ci-après) :

- -
var request = indexedDB.deleteDatabase(nom, options);
- -

Paramètres

- -
-
nom
-
Le nom de la base de données qu'on souhaite supprimer. Tenter de supprimer une base de données qui n'existe pas ne déclenchera pas d'exception (contrairement à la tentative de suppression d'un magasin d'objets inexistant avec {{domxref("IDBDatabase.deleteObjectStore()")}} qui déclenchera bien une exception).
-
options {{NonStandardBadge}}
-
Dans Gecko, à partir de la version 26, il est possible d'inclure un paramètre pour indiquer le stockage de la base. La valeur peut être permanent (la valeur par défaut) ou temporary si on souhaite supprimer une base de données qui fait partie d'une mémoire partagée.
-
- -

Valeur de retour

- -

Cette méthode renvoie un objet {{domxref("IDBOpenDBRequest")}} sur lequel seront déclenchés les évènements relatifs à la requête.

- -

Exemples

- -
var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");
-
-DBDeleteRequest.onerror = function(event) {
-  console.log("Erreur lors de la suppression de la base");
-};
-
-DBDeleteRequest.onsuccess = function(event) {
-  console.log("Suppression de la base réussie");
-
-  console.log(event.result); // undefined
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}}{{Spec2("IndexedDB 2")}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBFactory.deleteDatabase")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbfactory/deletedatabase/index.md b/files/fr/web/api/idbfactory/deletedatabase/index.md new file mode 100644 index 0000000000..a890a63166 --- /dev/null +++ b/files/fr/web/api/idbfactory/deletedatabase/index.md @@ -0,0 +1,97 @@ +--- +title: IDBFactory.deleteDatabase() +slug: Web/API/IDBFactory/deleteDatabase +tags: + - IDBFactory + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBFactory/deleteDatabase +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode deleteDatabase(), rattachée à l'interface {{domxref("IDBFactory")}}, permet de demander la suppression d'une base de données. La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération de suppression de façon asynchrone.

+ +

Si la base de données est bien supprimée, un évènement success est déclenché sur l'objet IDBOpenDBRequest renvoyé et la propriété result vaut alors undefined. Si une erreur se produit lors de la suppression, ce sera un évènement error qui sera déclenché sur l'objet renvoyé par la méthode.

+ +
+

Lorsque la méthode deleteDatabase() est invoquée, toutes les autres connexions qui sont ouvertes sur cette base de données recevront un évènement versionchange.

+
+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +

La syntaxe actuellement standard est :

+ +
var request = indexedDB.deleteDatabase(nom);
+ +

Une version expérimentale permet de gérer des options (cf. ci-après) :

+ +
var request = indexedDB.deleteDatabase(nom, options);
+ +

Paramètres

+ +
+
nom
+
Le nom de la base de données qu'on souhaite supprimer. Tenter de supprimer une base de données qui n'existe pas ne déclenchera pas d'exception (contrairement à la tentative de suppression d'un magasin d'objets inexistant avec {{domxref("IDBDatabase.deleteObjectStore()")}} qui déclenchera bien une exception).
+
options {{NonStandardBadge}}
+
Dans Gecko, à partir de la version 26, il est possible d'inclure un paramètre pour indiquer le stockage de la base. La valeur peut être permanent (la valeur par défaut) ou temporary si on souhaite supprimer une base de données qui fait partie d'une mémoire partagée.
+
+ +

Valeur de retour

+ +

Cette méthode renvoie un objet {{domxref("IDBOpenDBRequest")}} sur lequel seront déclenchés les évènements relatifs à la requête.

+ +

Exemples

+ +
var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");
+
+DBDeleteRequest.onerror = function(event) {
+  console.log("Erreur lors de la suppression de la base");
+};
+
+DBDeleteRequest.onsuccess = function(event) {
+  console.log("Suppression de la base réussie");
+
+  console.log(event.result); // undefined
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}}{{Spec2("IndexedDB 2")}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBFactory.deleteDatabase")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbfactory/index.html b/files/fr/web/api/idbfactory/index.html deleted file mode 100644 index b424b0af20..0000000000 --- a/files/fr/web/api/idbfactory/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: IDBFactory -slug: Web/API/IDBFactory -translation_of: Web/API/IDBFactory ---- -
{{APIRef("IndexedDB")}}
- -

L'interface IDBFactory fait partie de l'API IndexedDB et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface  est window.indexedDB. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet IDBFactory.

- -

{{AvailableInWorkers}}

- -

Méthodes

- -
-
{{domxref("IDBFactory.open")}}
-
Une méthode qui permet d'ouvrir une connexion à une base de données.
-
{{domxref("IDBFactory.deleteDatabase")}}
-
Une méthode qui permet de demander la suppression d'une base de données.
-
{{domxref("IDBFactory.cmp")}}
-
Une méthode qui compare deux clés et renvoie un résultat qui indique laquelle est la plus grande.
-
{{domxref("IDBFactory.databases")}}
-
Une méthode qui répertorie toutes les bases de données disponibles, y compris leurs noms et leurs versions.
-
- -

Exemples

- -

Dans l'exemple qui suit, on effectue une requête sur une base de données et on gère les cas de succès et d'erreur. Vous pouvez consulter un exemple complet sur notre application To-do Notifications (voir l'exemple en live).

- -
var note = document.querySelector("ul");
-
-// Dans la ligne suivante, inclure les préfixes des
-// implémentations à tester
-window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
-// attention à ne pas utiliser "var indexedDB = ..."
-// si on n'est pas dans une fonction
-
-// On pourra éventuellement avoir besoin de références
-// envers les 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,
-// il n'est pas nécessaire d'écrire window.mozIDB*)
-
-// On ouvre la version 4 de notre base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-// On ajoute ensuite les gestionnaires d'évènements
-// pour gérer le succès ou l'échec de l'ouverture
-// de la base de données
-DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '<li>Erreur lors du chargement de la base.</li>';
-};
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Base de données initialisée.</li>';
-
-  // store the result of opening the database in the db
-  // variable. This is used a lot later on, for opening
-  // transactions and suchlike.
-  db = DBOpenRequest.result;
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("IndexedDB", "#idl-def-IDBFactory", "IDBFactory")}}{{Spec2("IndexedDB")}}
{{SpecName("IndexedDB 2", "#factory-interface", "IDBFactory")}}{{Spec2("IndexedDB 2")}}
{{SpecName("IndexedDB 3", "#factory-interface", "IDBFactory")}}{{Spec2("IndexedDB 3")}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBFactory")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbfactory/index.md b/files/fr/web/api/idbfactory/index.md new file mode 100644 index 0000000000..b424b0af20 --- /dev/null +++ b/files/fr/web/api/idbfactory/index.md @@ -0,0 +1,105 @@ +--- +title: IDBFactory +slug: Web/API/IDBFactory +translation_of: Web/API/IDBFactory +--- +
{{APIRef("IndexedDB")}}
+ +

L'interface IDBFactory fait partie de l'API IndexedDB et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface  est window.indexedDB. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet IDBFactory.

+ +

{{AvailableInWorkers}}

+ +

Méthodes

+ +
+
{{domxref("IDBFactory.open")}}
+
Une méthode qui permet d'ouvrir une connexion à une base de données.
+
{{domxref("IDBFactory.deleteDatabase")}}
+
Une méthode qui permet de demander la suppression d'une base de données.
+
{{domxref("IDBFactory.cmp")}}
+
Une méthode qui compare deux clés et renvoie un résultat qui indique laquelle est la plus grande.
+
{{domxref("IDBFactory.databases")}}
+
Une méthode qui répertorie toutes les bases de données disponibles, y compris leurs noms et leurs versions.
+
+ +

Exemples

+ +

Dans l'exemple qui suit, on effectue une requête sur une base de données et on gère les cas de succès et d'erreur. Vous pouvez consulter un exemple complet sur notre application To-do Notifications (voir l'exemple en live).

+ +
var note = document.querySelector("ul");
+
+// Dans la ligne suivante, inclure les préfixes des
+// implémentations à tester
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// attention à ne pas utiliser "var indexedDB = ..."
+// si on n'est pas dans une fonction
+
+// On pourra éventuellement avoir besoin de références
+// envers les 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,
+// il n'est pas nécessaire d'écrire window.mozIDB*)
+
+// On ouvre la version 4 de notre base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// On ajoute ensuite les gestionnaires d'évènements
+// pour gérer le succès ou l'échec de l'ouverture
+// de la base de données
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '<li>Erreur lors du chargement de la base.</li>';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Base de données initialisée.</li>';
+
+  // store the result of opening the database in the db
+  // variable. This is used a lot later on, for opening
+  // transactions and suchlike.
+  db = DBOpenRequest.result;
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("IndexedDB", "#idl-def-IDBFactory", "IDBFactory")}}{{Spec2("IndexedDB")}}
{{SpecName("IndexedDB 2", "#factory-interface", "IDBFactory")}}{{Spec2("IndexedDB 2")}}
{{SpecName("IndexedDB 3", "#factory-interface", "IDBFactory")}}{{Spec2("IndexedDB 3")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBFactory")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbfactory/open/index.html b/files/fr/web/api/idbfactory/open/index.html deleted file mode 100644 index 1bc014016e..0000000000 --- a/files/fr/web/api/idbfactory/open/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: IDBFactory.open() -slug: Web/API/IDBFactory/open -tags: - - API - - IDBFactory - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBFactory/open ---- -
{{APIRef("IndexedDB")}}
- -

La méthode open() de l'interface {{domxref("IDBFactory")}} lance une requête pour ouvrir une connexion à une base de données.

- -

La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération d'ouverture de façon asynchrone. Si l'opération réussit, un évènement success sera éms sur l'objet IDBOpenDBRequest renvoyé par la méthode, et la propriété result de l'évènement aura la valeur de l'objet {{domxref("IDBDatabase")}} associé à la connexion.

- -

Si une erreur se produit lors de la connexion, un évènement error sera émis sur l'objet IDBOpenDBRequest renvoyé par la méthode.

- -

Cette méthode peut également émettre les évènements upgradeneeded, blocked ou versionchange.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -

La syntaxe standard est la suivante :

- -
var IDBOpenDBRequest = indexedDB.open(nom);
-var IDBOpenDBRequest = indexedDB.open(nom, version);
-
- -

Paramètres

- -
-
nom
-
Le nom de la base de données qu'on souhaite ouvrir.
-
version {{optional_inline}}
-
Paramètre optionnel qui représente la version de la base de données qu'on veut ouvrir. Si ce paramètre n'est pas fourni et que la base de données existe, une connexion sera ouverte sans changer la version de la base de données. Si ce paramètre n'est pas fourni est que la base de données n'existe pas, elle sera créée avec une version 1.
-
- -

Objet options expérimental de Gecko

- -
-
options (version et storage) {{optional_inline}} {{deprecated_inline}}
-
Dans Gecko, à partir de la version 26, il est possible de passer en paramètre un objet options non standard, qui contienne le numéro de version de la base de données (équivalent donc au paramètre version définit ci-avant), et également une valeur storage qui décrit si on souhaite utiliser un stockage permanent (avec la valeur persistent) ou un stockage temporaire (avec la valeur temporary). -
-

Attention : l’attribut storage est déprécié et sera prochainement retiré de Gecko. Vous devriez utiliser {{domxref("StorageManager.persist()")}} à la place pour obtenir un stockage persistant.

-
-
-
- -
-

Note : Vous pouvez consulter l'article les limites de stockage du navigateur et les critères d'éviction pour en savoir plus sur les différents types de stockage disponibles et la façon dont Firefox gère les données côté client.

-
- -

Valeur de retour

- -

Un objet {{domxref("IDBOpenDBRequest")}} sur lequel sont déclenchés les différents évènements liés à cette requête.

- -

Exceptions

- -

Cette méthode peut lever une {{domxref("DOMException")}} de type suivant :

- - - - - - - - - - - - - - -
ExceptionDescription
TypeErrorLa valeur de version est zéro ou un nombre négatif ou n’est pas un nombre.
- -

Exemples

- -

Voici un exemple d'ouverture de la base de données toDoList en utilisant la syntaxe standard et le paramètre version :

- -
var request = window.indexedDB.open("toDoList", 4);
- -

Dans le fragment de code qui suit, on effectue une requête pour ouvrir une base de données et on inclut des gestionnaires d'évènements pour gérer la réussite ou l'échec de l'ouverture. Pour consulter un exemple fonctionnel complet, vous pouvez étudier notre application To-do Notifications (cf. l'exemple live).

- -
var note = document.querySelector("ul");
-
-window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
-// NE PAS utiliser "var indexedDB = ..." si on n’est pas dans une fonction.
-// On pourrait avoir besoin de références vers quelques 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 on n’a pas besoin de window.mozIDB*
-
-// On ouvre la version 4 de la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-// On ajoute deux gestionnaires d'évènements
-// Le premier utilisé en cas d'échec
-DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '<li>Erreur lors du chargement de la base.</li>';
-};
-
-// Et le second en cas de réussite
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Base de données initialisée.</li>';
-
-  // On stocke le résultat de l'ouverture dans la
-  // variable db qui sera utilisée par la suite
-  // pour d'autres opérations
-  db = DBOpenRequest.result;
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}}{{Spec2("IndexedDB 2")}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBFactory.open")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbfactory/open/index.md b/files/fr/web/api/idbfactory/open/index.md new file mode 100644 index 0000000000..1bc014016e --- /dev/null +++ b/files/fr/web/api/idbfactory/open/index.md @@ -0,0 +1,152 @@ +--- +title: IDBFactory.open() +slug: Web/API/IDBFactory/open +tags: + - API + - IDBFactory + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBFactory/open +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode open() de l'interface {{domxref("IDBFactory")}} lance une requête pour ouvrir une connexion à une base de données.

+ +

La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération d'ouverture de façon asynchrone. Si l'opération réussit, un évènement success sera éms sur l'objet IDBOpenDBRequest renvoyé par la méthode, et la propriété result de l'évènement aura la valeur de l'objet {{domxref("IDBDatabase")}} associé à la connexion.

+ +

Si une erreur se produit lors de la connexion, un évènement error sera émis sur l'objet IDBOpenDBRequest renvoyé par la méthode.

+ +

Cette méthode peut également émettre les évènements upgradeneeded, blocked ou versionchange.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +

La syntaxe standard est la suivante :

+ +
var IDBOpenDBRequest = indexedDB.open(nom);
+var IDBOpenDBRequest = indexedDB.open(nom, version);
+
+ +

Paramètres

+ +
+
nom
+
Le nom de la base de données qu'on souhaite ouvrir.
+
version {{optional_inline}}
+
Paramètre optionnel qui représente la version de la base de données qu'on veut ouvrir. Si ce paramètre n'est pas fourni et que la base de données existe, une connexion sera ouverte sans changer la version de la base de données. Si ce paramètre n'est pas fourni est que la base de données n'existe pas, elle sera créée avec une version 1.
+
+ +

Objet options expérimental de Gecko

+ +
+
options (version et storage) {{optional_inline}} {{deprecated_inline}}
+
Dans Gecko, à partir de la version 26, il est possible de passer en paramètre un objet options non standard, qui contienne le numéro de version de la base de données (équivalent donc au paramètre version définit ci-avant), et également une valeur storage qui décrit si on souhaite utiliser un stockage permanent (avec la valeur persistent) ou un stockage temporaire (avec la valeur temporary). +
+

Attention : l’attribut storage est déprécié et sera prochainement retiré de Gecko. Vous devriez utiliser {{domxref("StorageManager.persist()")}} à la place pour obtenir un stockage persistant.

+
+
+
+ +
+

Note : Vous pouvez consulter l'article les limites de stockage du navigateur et les critères d'éviction pour en savoir plus sur les différents types de stockage disponibles et la façon dont Firefox gère les données côté client.

+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBOpenDBRequest")}} sur lequel sont déclenchés les différents évènements liés à cette requête.

+ +

Exceptions

+ +

Cette méthode peut lever une {{domxref("DOMException")}} de type suivant :

+ + + + + + + + + + + + + + +
ExceptionDescription
TypeErrorLa valeur de version est zéro ou un nombre négatif ou n’est pas un nombre.
+ +

Exemples

+ +

Voici un exemple d'ouverture de la base de données toDoList en utilisant la syntaxe standard et le paramètre version :

+ +
var request = window.indexedDB.open("toDoList", 4);
+ +

Dans le fragment de code qui suit, on effectue une requête pour ouvrir une base de données et on inclut des gestionnaires d'évènements pour gérer la réussite ou l'échec de l'ouverture. Pour consulter un exemple fonctionnel complet, vous pouvez étudier notre application To-do Notifications (cf. l'exemple live).

+ +
var note = document.querySelector("ul");
+
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// NE PAS utiliser "var indexedDB = ..." si on n’est pas dans une fonction.
+// On pourrait avoir besoin de références vers quelques 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 on n’a pas besoin de window.mozIDB*
+
+// On ouvre la version 4 de la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// On ajoute deux gestionnaires d'évènements
+// Le premier utilisé en cas d'échec
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '<li>Erreur lors du chargement de la base.</li>';
+};
+
+// Et le second en cas de réussite
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Base de données initialisée.</li>';
+
+  // On stocke le résultat de l'ouverture dans la
+  // variable db qui sera utilisée par la suite
+  // pour d'autres opérations
+  db = DBOpenRequest.result;
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}}{{Spec2("IndexedDB 2")}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBFactory.open")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/count/index.html b/files/fr/web/api/idbindex/count/index.html deleted file mode 100644 index 82d71e4b0c..0000000000 --- a/files/fr/web/api/idbindex/count/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: IDBIndex.count() -slug: Web/API/IDBIndex/count -tags: - - API - - IDBIndex - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBIndex/count ---- -
{{APIRef("IndexedDB")}}
- -

La méthode count(), rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, renvoie le nombre d'enregistrements contenu dans un intervalle de clé.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var request = monIndex.count();
-var request = monIndex.count(cle);
- -

Paramètres

- -
-
cle {{optional_inline}}
-
La clé ou l'intervalle de clé qui définit les enregistrements qu'on souhaite compter.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.

- -

Exceptions

- -

Cette méthode peut déclencher différents types d'exceptions :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
TransactionInactiveErrorLa transaction associée à cet index est inactive.
DataError -

La clé ou l'intervalle de clé fourni possède une clé invalide.

-
InvalidStateErrorL'index a été supprimé ou retiré.
- -

Exemples

- -

Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets puis on récupère l'index lName depuis une base de données de contacts. Ensuite, on ouvre un curseur simple sur cet index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (ce qui fonctionne comme si on ouvrait un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont ici triés selon l'index plutôt que selon la clé primaire).

- -

myIndex.count() est alors utilisé afin de compter le nombre d'enregistrements dans l'index et le résultat de la requête est affiché dans la console au travers du gestionnaire d'évènements pour la réussite (onsuccess).

- -

Efin, on parcourt chaque enregistrement pour l'insérer dans un tableau HTML. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre dépôt IDBIndex-example (cf. la démonstration live).

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  var objectStore = transaction.objectStore('contactsList');
-
-  var myIndex = objectStore.index('lName');
-  var countRequest = myIndex.count();
-  countRequest.onsuccess = function() {
-    console.log(countRequest.result);
-  }
-
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Éléments affichés.');
-    }
-  };
-};
- -

Spécifications

- -
-
- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}}{{Spec2("IndexedDB 2")}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.count")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/count/index.md b/files/fr/web/api/idbindex/count/index.md new file mode 100644 index 0000000000..82d71e4b0c --- /dev/null +++ b/files/fr/web/api/idbindex/count/index.md @@ -0,0 +1,142 @@ +--- +title: IDBIndex.count() +slug: Web/API/IDBIndex/count +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBIndex/count +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode count(), rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, renvoie le nombre d'enregistrements contenu dans un intervalle de clé.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var request = monIndex.count();
+var request = monIndex.count(cle);
+ +

Paramètres

+ +
+
cle {{optional_inline}}
+
La clé ou l'intervalle de clé qui définit les enregistrements qu'on souhaite compter.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.

+ +

Exceptions

+ +

Cette méthode peut déclencher différents types d'exceptions :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
TransactionInactiveErrorLa transaction associée à cet index est inactive.
DataError +

La clé ou l'intervalle de clé fourni possède une clé invalide.

+
InvalidStateErrorL'index a été supprimé ou retiré.
+ +

Exemples

+ +

Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets puis on récupère l'index lName depuis une base de données de contacts. Ensuite, on ouvre un curseur simple sur cet index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (ce qui fonctionne comme si on ouvrait un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont ici triés selon l'index plutôt que selon la clé primaire).

+ +

myIndex.count() est alors utilisé afin de compter le nombre d'enregistrements dans l'index et le résultat de la requête est affiché dans la console au travers du gestionnaire d'évènements pour la réussite (onsuccess).

+ +

Efin, on parcourt chaque enregistrement pour l'insérer dans un tableau HTML. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre dépôt IDBIndex-example (cf. la démonstration live).

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  var countRequest = myIndex.count();
+  countRequest.onsuccess = function() {
+    console.log(countRequest.result);
+  }
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Éléments affichés.');
+    }
+  };
+};
+ +

Spécifications

+ +
+
+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}}{{Spec2("IndexedDB 2")}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.count")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/get/index.html b/files/fr/web/api/idbindex/get/index.html deleted file mode 100644 index f5cbe56570..0000000000 --- a/files/fr/web/api/idbindex/get/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: IDBIndex.get() -slug: Web/API/IDBIndex/get -translation_of: Web/API/IDBIndex/get ---- -

{{ APIRef("IndexedDB") }}

- -
-

La méthode get() de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) pour renvoyer le premier enregistrement correspondant à la clé ou l'intervalle de clé {{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.

-
- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var request = myIndex.get(key);
- -

Paramètre

- -
-
key
-
la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) de l'enregistrement dont on cherche la valeur.
-
- -

Valeur de retour

- -
-
Une requête ({{domxref("IDBRequest")}})
-
La propriété "result" ({{domxref("IDBRequest.result")}}) de cette requête renvoie en cas de succès le premier enregistrement correspondant à la clé ou à l'intervalle de clé. Le résultat contient l'enregistrement { key: la clé, value: un_clone_structuré_de_la_valeur }.
-
- -

Exceptions

- -
-
TransactionInactiveError
-
Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive.
-
DataError
-
Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.
-
InvalidStateError
-
Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.
-
- -

Exemple

- -

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

- -

Le code myIndex.get('Bungle') renvoie une requête qui cherche sur l'index un enregistrement dont la clé lName est Bungle. En cas de sucés le résultat de la requête qui contient l'enregistrement est affiché sur la console.

- -

Finalement, on itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-
-  //ouvre un transaction
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  //accés au magasin d'objet
-  var objectStore = transaction.objectStore('contactsList');
-
-  //on récupère l'index
-  var myIndex = objectStore.index('lName');
-  //requête de recherche
-  var getRequest = myIndex.get('Bungle');
-  //en cas de succès
-  getRequest.onsuccess = function() {
-    console.log(getRequest.result);
-  }
-
-  //un curseur qui itère sur l'index
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Tous les enregistrements ont été affichés.');
-    }
-  };
-};
- -

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationÈtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.IDBIndex.get")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/get/index.md b/files/fr/web/api/idbindex/get/index.md new file mode 100644 index 0000000000..f5cbe56570 --- /dev/null +++ b/files/fr/web/api/idbindex/get/index.md @@ -0,0 +1,123 @@ +--- +title: IDBIndex.get() +slug: Web/API/IDBIndex/get +translation_of: Web/API/IDBIndex/get +--- +

{{ APIRef("IndexedDB") }}

+ +
+

La méthode get() de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) pour renvoyer le premier enregistrement correspondant à la clé ou l'intervalle de clé {{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.

+
+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var request = myIndex.get(key);
+ +

Paramètre

+ +
+
key
+
la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) de l'enregistrement dont on cherche la valeur.
+
+ +

Valeur de retour

+ +
+
Une requête ({{domxref("IDBRequest")}})
+
La propriété "result" ({{domxref("IDBRequest.result")}}) de cette requête renvoie en cas de succès le premier enregistrement correspondant à la clé ou à l'intervalle de clé. Le résultat contient l'enregistrement { key: la clé, value: un_clone_structuré_de_la_valeur }.
+
+ +

Exceptions

+ +
+
TransactionInactiveError
+
Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive.
+
DataError
+
Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.
+
InvalidStateError
+
Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.
+
+ +

Exemple

+ +

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

+ +

Le code myIndex.get('Bungle') renvoie une requête qui cherche sur l'index un enregistrement dont la clé lName est Bungle. En cas de sucés le résultat de la requête qui contient l'enregistrement est affiché sur la console.

+ +

Finalement, on itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //requête de recherche
+  var getRequest = myIndex.get('Bungle');
+  //en cas de succès
+  getRequest.onsuccess = function() {
+    console.log(getRequest.result);
+  }
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};
+ +

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationÈtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.IDBIndex.get")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/getall/index.html b/files/fr/web/api/idbindex/getall/index.html deleted file mode 100644 index f9ed6d0d8f..0000000000 --- a/files/fr/web/api/idbindex/getall/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: IDBIndex.getAll() -slug: Web/API/IDBIndex/getAll -tags: - - API - - IDBIndex - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBIndex/getAll ---- -

{{ APIRef("IndexedDB") }}

- -
-

La méthode getAll() de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'index relié ({{domxref("IDBIndex")}}). On peut limiter le nombre d'enregistrements en les filtrant suivant leurs clés ou en paramétrant le compteur.

-
- -

On peut comparer cette méthode avec une recherche par curseur. Effectivement, il est plus intéressant si l'on veut accéder aux enregistrements un par un d'utiliser un {{domxref("IDBCursor","curseur")}}, les clones structurés des valeurs seront faits un par un. Mais si l'on veut un tableau des clones structurés des valeurs il vaut mieux utiliser getAll(), le moteur Gecko fera les clones structurés en une seule fois.

- -

Syntaxe

- -
var getAllKeysRequest = IDBIndex.getAll();
-var getAllKeysRequest = IDBIndex.getAll(query);
-var getAllKeysRequest = IDBIndex.getAll(query, count);
- -

Paramètres

- -
-
query {{optional_inline}}
-
Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) pour filtrer, seules les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les clones structurés des enregistrements de l'index relié sont renvoyés.
-
count {{optional_inline}}
-
Le nombre d'enregistrement maximum renvoyés. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.
-
- -

Valeur de retour

- -
-
{{domxref("IDBRequest")}}
-
La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des clones structurés des enregistrements en cas de succès.
-
- -

Exceptions

- -
-
TransactionInactiveError
-
Cette {{domxref("DOMException","exception")}} est levée si la transaction ({{domxref("IDBTransaction")}}) est inactive.
-
DataError
-
Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.
-
InvalidStateError
-
Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.
-
TypeError
-
Cette exception ({{domxref("DOMException")}}) est levée si le compteur n'est pas un nombre positif.
-
- -

Exemples

- -
//on récupère l’accès à l'index
-var myIndex = objectStore.index('index');
-//on fait une requête de recherche sur l'index
-var getAllKeyRequest = myIndex.getAllKeys();
-//si la requête réussi
-getAllKeysRequest.onsuccess = function() {
-  //on affiche le résultat sur la console
-  //~= [{key:'a',value:un_clone_structuré},{key:'2',value:un_clone_structuré},...]
-  console.log(getAllKeysRequest.result);
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB2', '#dom-idbindex-getall', 'getAll()')}}{{Spec2('IndexedDB')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.IDBIndex.getAll")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/getall/index.md b/files/fr/web/api/idbindex/getall/index.md new file mode 100644 index 0000000000..f9ed6d0d8f --- /dev/null +++ b/files/fr/web/api/idbindex/getall/index.md @@ -0,0 +1,101 @@ +--- +title: IDBIndex.getAll() +slug: Web/API/IDBIndex/getAll +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBIndex/getAll +--- +

{{ APIRef("IndexedDB") }}

+ +
+

La méthode getAll() de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'index relié ({{domxref("IDBIndex")}}). On peut limiter le nombre d'enregistrements en les filtrant suivant leurs clés ou en paramétrant le compteur.

+
+ +

On peut comparer cette méthode avec une recherche par curseur. Effectivement, il est plus intéressant si l'on veut accéder aux enregistrements un par un d'utiliser un {{domxref("IDBCursor","curseur")}}, les clones structurés des valeurs seront faits un par un. Mais si l'on veut un tableau des clones structurés des valeurs il vaut mieux utiliser getAll(), le moteur Gecko fera les clones structurés en une seule fois.

+ +

Syntaxe

+ +
var getAllKeysRequest = IDBIndex.getAll();
+var getAllKeysRequest = IDBIndex.getAll(query);
+var getAllKeysRequest = IDBIndex.getAll(query, count);
+ +

Paramètres

+ +
+
query {{optional_inline}}
+
Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) pour filtrer, seules les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les clones structurés des enregistrements de l'index relié sont renvoyés.
+
count {{optional_inline}}
+
Le nombre d'enregistrement maximum renvoyés. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.
+
+ +

Valeur de retour

+ +
+
{{domxref("IDBRequest")}}
+
La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des clones structurés des enregistrements en cas de succès.
+
+ +

Exceptions

+ +
+
TransactionInactiveError
+
Cette {{domxref("DOMException","exception")}} est levée si la transaction ({{domxref("IDBTransaction")}}) est inactive.
+
DataError
+
Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.
+
InvalidStateError
+
Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.
+
TypeError
+
Cette exception ({{domxref("DOMException")}}) est levée si le compteur n'est pas un nombre positif.
+
+ +

Exemples

+ +
//on récupère l’accès à l'index
+var myIndex = objectStore.index('index');
+//on fait une requête de recherche sur l'index
+var getAllKeyRequest = myIndex.getAllKeys();
+//si la requête réussi
+getAllKeysRequest.onsuccess = function() {
+  //on affiche le résultat sur la console
+  //~= [{key:'a',value:un_clone_structuré},{key:'2',value:un_clone_structuré},...]
+  console.log(getAllKeysRequest.result);
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB2', '#dom-idbindex-getall', 'getAll()')}}{{Spec2('IndexedDB')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.IDBIndex.getAll")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/getallkeys/index.html b/files/fr/web/api/idbindex/getallkeys/index.html deleted file mode 100644 index fd13fd5758..0000000000 --- a/files/fr/web/api/idbindex/getallkeys/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: IDBIndex.getAllKeys() -slug: Web/API/IDBIndex/getAllKeys -tags: - - API - - IDBIndex - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBIndex/getAllKeys ---- -
{{APIRef("IndexedDB")}}
- -

La méthode getAllKeys(), rattachée à l'interface {{domxref("IDBIndex")}}, permet de récupérer les clés de tous les objets contenus dans l'index et de les enregistrer dans la propriété result de l'objet renvoyé par la méthode.

- -

Syntaxe

- -
var getAllKeysRequest = IDBIndex.getAllKeys();
-var getAllKeysRequest = IDBIndex.getAllKeys(requete);
-var getAllKeysRequest = IDBIndex.getAllKeys(requete, quantite);
- -

Paramètres

- -
-
requete {{optional_inline}}
-
Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui identifie les clés qu'on souhaite récupérer. Si cette valeur vaut {{jsxref("null")}} ou est absente, le navigateur utilisera un intervalle de clé sans limite.
-
quantite {{optional_inline}}
-
Le nombre d'enregistrements qu'on souhaite obtenir. Si cette quantité est supérieure au nombre d'enregistrements récupérés par la requête, le navigateur ne récupèrera que le premier élément. Si elle est négative ou supérieure à 2^32-1, une exception {{jsxref("TypeError")}} sera levée.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} sur lequel seront reçus les différents évènements rattachés à cette opération.

- -

Exceptions

- -

Cette méthode peut déclencher une des exceptions suivantes :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
TransactionInactiveErrorLa transaction pour cet index {{domxref("IDBIndex")}} est inactive.
InvalidStateErrorL'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.
{{jsxref("TypeError")}}Le paramètre quantite n'est pas compris entre 0 et 2^32-1
- -

Exemples

- -
var myIndex = objectStore.index('index');
-var getAllKeyRequest = myIndex.getAllKeys();
-getAllKeysRequest.onsuccess = function() {
-  console.log(getAllKeysRequest.result);
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB 2', '#dom-idbindex-getallkeys', 'getAll()')}}{{Spec2('IndexedDB 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.getAllKeys")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/getallkeys/index.md b/files/fr/web/api/idbindex/getallkeys/index.md new file mode 100644 index 0000000000..fd13fd5758 --- /dev/null +++ b/files/fr/web/api/idbindex/getallkeys/index.md @@ -0,0 +1,102 @@ +--- +title: IDBIndex.getAllKeys() +slug: Web/API/IDBIndex/getAllKeys +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBIndex/getAllKeys +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode getAllKeys(), rattachée à l'interface {{domxref("IDBIndex")}}, permet de récupérer les clés de tous les objets contenus dans l'index et de les enregistrer dans la propriété result de l'objet renvoyé par la méthode.

+ +

Syntaxe

+ +
var getAllKeysRequest = IDBIndex.getAllKeys();
+var getAllKeysRequest = IDBIndex.getAllKeys(requete);
+var getAllKeysRequest = IDBIndex.getAllKeys(requete, quantite);
+ +

Paramètres

+ +
+
requete {{optional_inline}}
+
Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui identifie les clés qu'on souhaite récupérer. Si cette valeur vaut {{jsxref("null")}} ou est absente, le navigateur utilisera un intervalle de clé sans limite.
+
quantite {{optional_inline}}
+
Le nombre d'enregistrements qu'on souhaite obtenir. Si cette quantité est supérieure au nombre d'enregistrements récupérés par la requête, le navigateur ne récupèrera que le premier élément. Si elle est négative ou supérieure à 2^32-1, une exception {{jsxref("TypeError")}} sera levée.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} sur lequel seront reçus les différents évènements rattachés à cette opération.

+ +

Exceptions

+ +

Cette méthode peut déclencher une des exceptions suivantes :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
TransactionInactiveErrorLa transaction pour cet index {{domxref("IDBIndex")}} est inactive.
InvalidStateErrorL'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.
{{jsxref("TypeError")}}Le paramètre quantite n'est pas compris entre 0 et 2^32-1
+ +

Exemples

+ +
var myIndex = objectStore.index('index');
+var getAllKeyRequest = myIndex.getAllKeys();
+getAllKeysRequest.onsuccess = function() {
+  console.log(getAllKeysRequest.result);
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB 2', '#dom-idbindex-getallkeys', 'getAll()')}}{{Spec2('IndexedDB 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.getAllKeys")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/getkey/index.html b/files/fr/web/api/idbindex/getkey/index.html deleted file mode 100644 index 828f700fb9..0000000000 --- a/files/fr/web/api/idbindex/getkey/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: IDBIndex.getKey() -slug: Web/API/IDBIndex/getKey -tags: - - API - - IDBIndex - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBIndex/getKey ---- -
{{APIRef("IndexedDB")}}
- -

La méthode getKey(), rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, récupère la clé associée ou la clé primaire si l'argument passé à la fonction est un intervalle {{domxref("IDBKeyRange")}}.

- -

Si la méthode trouve une clé, ce sera alors la propriété result de la requête renvoyée. Seule la clé primaire de l'enregistrement est renvoyée (pour obtenir l'ensemble de l'enregistrement, on utilisera {{domxref("IDBIndex.get")}}).

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var myIndex = objectStore.index('index');
-var request = myIndex.getKey(key);
- -

Paramètres

- -
-
key {{optional_inline}}
-
Une clé ou un intervalle {{domxref("IDBKeyRange")}} qui identifie l'enregistrement dont on souhaite obtenir la clé. Si la valeur vaut {{jsxref("null")}} ou si elle est absente, le navigateur utilisera un intervalle de clé sans limite.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} qui recevra les différents évènements relatifs à l'opération qui est déclenchée.

- -

Exceptions

- -

Cette méthode peut déclencher une exception. Celle-ci peut avoir l'un des types suivants :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
TransactionInactiveErrorLa transaction rattachée à cet IDBIndex est inactive.
DataError -

La clé ou l'intervalle de clés qui est fourni contient une clé invalide.

-
InvalidStateErrorL'index a été supprimé ou déplacé.
- -

Exemples

- -

Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets. Ensuite on récupère l'index lName sur cette base de donnée. On ouvre alors un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne de la même façon que {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont triés selon l'index et pas selon la clé primaire).

- -

myIndex.getKey('Bungle') est ensuite utilisé afin d'obtenir la clé primaire de l'enregistrement pour lequel lName vaut Bungle. Le résultat de cette requête est imprimé dans la console lorsque la fonction de rappel (callback) de succès est déclenché.

- -

Enfin, on parcourt les enregistrements pour remplir un tableau HTML. Le dépôt IDBIndex-example contient un exemple complet (ainsi qu'une démonstration).

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  var objectStore = transaction.objectStore('contactsList');
-  var myIndex = objectStore.index('lName');
-  var getKeyRequest = myIndex.getKey('Bungle');
-  getKeyRequest.onsuccess = function() {
-    console.log(getKeyRequest.result);
-  }
-
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Les éléments sont affichés.');
-    }
-  };
-};
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.getKey")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/getkey/index.md b/files/fr/web/api/idbindex/getkey/index.md new file mode 100644 index 0000000000..828f700fb9 --- /dev/null +++ b/files/fr/web/api/idbindex/getkey/index.md @@ -0,0 +1,135 @@ +--- +title: IDBIndex.getKey() +slug: Web/API/IDBIndex/getKey +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBIndex/getKey +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode getKey(), rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, récupère la clé associée ou la clé primaire si l'argument passé à la fonction est un intervalle {{domxref("IDBKeyRange")}}.

+ +

Si la méthode trouve une clé, ce sera alors la propriété result de la requête renvoyée. Seule la clé primaire de l'enregistrement est renvoyée (pour obtenir l'ensemble de l'enregistrement, on utilisera {{domxref("IDBIndex.get")}}).

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var myIndex = objectStore.index('index');
+var request = myIndex.getKey(key);
+ +

Paramètres

+ +
+
key {{optional_inline}}
+
Une clé ou un intervalle {{domxref("IDBKeyRange")}} qui identifie l'enregistrement dont on souhaite obtenir la clé. Si la valeur vaut {{jsxref("null")}} ou si elle est absente, le navigateur utilisera un intervalle de clé sans limite.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} qui recevra les différents évènements relatifs à l'opération qui est déclenchée.

+ +

Exceptions

+ +

Cette méthode peut déclencher une exception. Celle-ci peut avoir l'un des types suivants :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
TransactionInactiveErrorLa transaction rattachée à cet IDBIndex est inactive.
DataError +

La clé ou l'intervalle de clés qui est fourni contient une clé invalide.

+
InvalidStateErrorL'index a été supprimé ou déplacé.
+ +

Exemples

+ +

Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets. Ensuite on récupère l'index lName sur cette base de donnée. On ouvre alors un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne de la même façon que {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont triés selon l'index et pas selon la clé primaire).

+ +

myIndex.getKey('Bungle') est ensuite utilisé afin d'obtenir la clé primaire de l'enregistrement pour lequel lName vaut Bungle. Le résultat de cette requête est imprimé dans la console lorsque la fonction de rappel (callback) de succès est déclenché.

+ +

Enfin, on parcourt les enregistrements pour remplir un tableau HTML. Le dépôt IDBIndex-example contient un exemple complet (ainsi qu'une démonstration).

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+  var myIndex = objectStore.index('lName');
+  var getKeyRequest = myIndex.getKey('Bungle');
+  getKeyRequest.onsuccess = function() {
+    console.log(getKeyRequest.result);
+  }
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments sont affichés.');
+    }
+  };
+};
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.getKey")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/index.html b/files/fr/web/api/idbindex/index.html deleted file mode 100644 index 57e72be398..0000000000 --- a/files/fr/web/api/idbindex/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: IDBIndex -slug: Web/API/IDBIndex -tags: - - API - - Database - - IDBIndex - - IndexedDB - - Interface - - Reference - - Storage - - TopicStub -translation_of: Web/API/IDBIndex ---- -

{{APIRef("IndexedDB")}}

- -
-

L'interface IDBIndexde l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès à un index d'un magasins d'objet. Un index permet de trier les enregistrements d'un magasin d'objet sur une autre clé que la clé primaire.

- -

Un index contient des enregistrements persistent. Chaque enregistrement est composé d'une clé ( la valeur du chemin de clé) et d'une valeur (la clé primaire de l'enregistrement dans le magasin d'objet). Les enregistrements de l'index se mettent automatiquement à jour lorsque un enregistrement du magasin d'objet est ajouté , mise à jour ou supprimé. Chaque enregistrement de l'index ne peut référer qu'a un enregistrement du magasin d'objet. Un magasin d'objet peut avoir plusieurs index et lorsque le magasin d'objet change tout les index sont mis à jour automatiquement.

- -

On peut retrouver les enregistrement sur une partie des clés, voir {{domxref("IDBKeyRange","intervalle de clé")}}.

- -

{{AvailableInWorkers}}

- -

Méthodes

- -

Hérite de: EventTarget

- -
-
{{domxref("IDBIndex.count()")}}
-
Fait un {{domxref("IDBRequest","requête")}} sur l'index. La requête compte le nombre d'enregistrements dans cet index ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.
-
{{domxref("IDBIndex.get()")}}
-
Fait une {{domxref("IDBRequest","requête")}} pour renvoyer le premier enregistrement correspondant à la clé ou l'{{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.
-
{{domxref("IDBIndex.getKey()")}}
-
Fait une {{domxref("IDBRequest","requête")}} pour renvoyer la clé primaire correspondant à la clé ou à l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'index. Si une clé est trouvé le résultat de la requête contiendra seulement la clé primaire de l'enregistrement et non l'enregistrement comme le fait {{domxref("IDBIndex.get")}}.
-
{{domxref("IDBIndex.getAll()")}}
-
Fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'{{domxref("IDBIndex","index relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
-
{{domxref("IDBIndex.getAllKeys()")}}
-
Ferrais une {{domxref("IDBRequest","requête")}} qui renverrait la liste de toutes les clés des enregistrements de l'index. On pourrait limiter le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
-
{{domxref("IDBIndex.openCursor()")}}
-
Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.
-
{{domxref("IDBIndex.openKeyCursor()")}}
-
Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.
-
- -

Propriétés

- -
-
{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
-
Renvoie un {{domxref("Boolean","booléen")}} indiquant si la valeur de locale à été paramétré sur auto lors de la mise en place de l'index (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).
-
{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
-
Renvoie la localisation de l'index (par exemple fr, ou en-US) si la localisation à été spécifie lors de la mise en place de l'index (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).
-
{{domxref("IDBIndex.name")}} {{readonlyInline}}
-
Renvoie le nom de l'index.
-
{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}
-
Renvoie un {{domxref("IDBObjectStore","accès au magasin d'objet")}} que référence l'index.
-
{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}
-
Renvoie le chemin de clé de l'index. Si l'index n'est pas automatiquement mise à jour la propriété vaux null.
-
{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}
-
Renvoie un {{domxref("Boolean","booléen")}} qui indique comment l'index gère le chemin de clé si c'est un tableau.
-
{{domxref("IDBIndex.unique")}} {{readonlyInline}}
-
Renvoie un {{domxref("Boolean","booléen")}} qui indique l'index interdit la duplication d'enregistrement sur sa clé.
-
- -

Exemple

- -

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

- -

Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-
-  //ouvre un transaction
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  //accés au magasin d'objet
-  var objectStore = transaction.objectStore('contactsList');
-
-  //on récupère l'index
-  var myIndex = objectStore.index('lName');
-
-  //un curseur qui itère sur l'index
-  var request = myIndex.openCursor();
-  request.onsuccess = function(event) {
-    var cursor = request.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Tous les enregistrements ont été affichés.');
-    }
-  };
-};
- -

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}{{Spec2('IndexedDB')}}
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.IDBIndex")}}

- -

Voir aussi

- - -
diff --git a/files/fr/web/api/idbindex/index.md b/files/fr/web/api/idbindex/index.md new file mode 100644 index 0000000000..57e72be398 --- /dev/null +++ b/files/fr/web/api/idbindex/index.md @@ -0,0 +1,140 @@ +--- +title: IDBIndex +slug: Web/API/IDBIndex +tags: + - API + - Database + - IDBIndex + - IndexedDB + - Interface + - Reference + - Storage + - TopicStub +translation_of: Web/API/IDBIndex +--- +

{{APIRef("IndexedDB")}}

+ +
+

L'interface IDBIndexde l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès à un index d'un magasins d'objet. Un index permet de trier les enregistrements d'un magasin d'objet sur une autre clé que la clé primaire.

+ +

Un index contient des enregistrements persistent. Chaque enregistrement est composé d'une clé ( la valeur du chemin de clé) et d'une valeur (la clé primaire de l'enregistrement dans le magasin d'objet). Les enregistrements de l'index se mettent automatiquement à jour lorsque un enregistrement du magasin d'objet est ajouté , mise à jour ou supprimé. Chaque enregistrement de l'index ne peut référer qu'a un enregistrement du magasin d'objet. Un magasin d'objet peut avoir plusieurs index et lorsque le magasin d'objet change tout les index sont mis à jour automatiquement.

+ +

On peut retrouver les enregistrement sur une partie des clés, voir {{domxref("IDBKeyRange","intervalle de clé")}}.

+ +

{{AvailableInWorkers}}

+ +

Méthodes

+ +

Hérite de: EventTarget

+ +
+
{{domxref("IDBIndex.count()")}}
+
Fait un {{domxref("IDBRequest","requête")}} sur l'index. La requête compte le nombre d'enregistrements dans cet index ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.
+
{{domxref("IDBIndex.get()")}}
+
Fait une {{domxref("IDBRequest","requête")}} pour renvoyer le premier enregistrement correspondant à la clé ou l'{{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.
+
{{domxref("IDBIndex.getKey()")}}
+
Fait une {{domxref("IDBRequest","requête")}} pour renvoyer la clé primaire correspondant à la clé ou à l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'index. Si une clé est trouvé le résultat de la requête contiendra seulement la clé primaire de l'enregistrement et non l'enregistrement comme le fait {{domxref("IDBIndex.get")}}.
+
{{domxref("IDBIndex.getAll()")}}
+
Fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'{{domxref("IDBIndex","index relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
+
{{domxref("IDBIndex.getAllKeys()")}}
+
Ferrais une {{domxref("IDBRequest","requête")}} qui renverrait la liste de toutes les clés des enregistrements de l'index. On pourrait limiter le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
+
{{domxref("IDBIndex.openCursor()")}}
+
Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.
+
{{domxref("IDBIndex.openKeyCursor()")}}
+
Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.
+
+ +

Propriétés

+ +
+
{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
+
Renvoie un {{domxref("Boolean","booléen")}} indiquant si la valeur de locale à été paramétré sur auto lors de la mise en place de l'index (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).
+
{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
+
Renvoie la localisation de l'index (par exemple fr, ou en-US) si la localisation à été spécifie lors de la mise en place de l'index (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).
+
{{domxref("IDBIndex.name")}} {{readonlyInline}}
+
Renvoie le nom de l'index.
+
{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}
+
Renvoie un {{domxref("IDBObjectStore","accès au magasin d'objet")}} que référence l'index.
+
{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}
+
Renvoie le chemin de clé de l'index. Si l'index n'est pas automatiquement mise à jour la propriété vaux null.
+
{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}
+
Renvoie un {{domxref("Boolean","booléen")}} qui indique comment l'index gère le chemin de clé si c'est un tableau.
+
{{domxref("IDBIndex.unique")}} {{readonlyInline}}
+
Renvoie un {{domxref("Boolean","booléen")}} qui indique l'index interdit la duplication d'enregistrement sur sa clé.
+
+ +

Exemple

+ +

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

+ +

Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+
+  //un curseur qui itère sur l'index
+  var request = myIndex.openCursor();
+  request.onsuccess = function(event) {
+    var cursor = request.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};
+ +

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}{{Spec2('IndexedDB')}}
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.IDBIndex")}}

+ +

Voir aussi

+ + +
diff --git a/files/fr/web/api/idbindex/isautolocale/index.html b/files/fr/web/api/idbindex/isautolocale/index.html deleted file mode 100644 index 70a7c7ea4a..0000000000 --- a/files/fr/web/api/idbindex/isautolocale/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: IDBIndex.isAutoLocale -slug: Web/API/IDBIndex/isAutoLocale -tags: - - API - - Experimental - - IDBIndex - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBIndex/isAutoLocale ---- -
{{APIRef("IndexedDB")}}{{SeeCompatTable}}
- -

La propriété en lecture seule isAutoLocale, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique si la valeur locale de l'index vaut auto (cf. les paramètres optionnels de createIndex()).

- -

Syntaxe

- -
var monIndex = objectStore.index('index');
-console.log(monIndex.isAutoLocale);
- -

Valeur

- -

Un booléen.

- -

Exemples

- -

Dans l'exemple suivant, on ouvre une transaction et un magasin d'objet puis on récupère l'index lName depuis une base de données de contact. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne comme si on avait directement ouvert un curseur sur un magasin d'objet avec {{domxref("IDBObjectStore.openCursor")}} mais ici les enregistrements sont triés selon l'index et pas selon la clé primaire.

- -

La valeur isAutoLocale est affichée dans la console.

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  var objectStore = transaction.objectStore('contactsList');
-
-  var myIndex = objectStore.index('lName');
-  console.log(myIndex.isAutoLocale);
-
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Les éléments ont été affichés.');
-    }
-  };
-};
- -

Spécifications

- -

Actuellement, cette propriété ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.isAutoLocale")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/isautolocale/index.md b/files/fr/web/api/idbindex/isautolocale/index.md new file mode 100644 index 0000000000..70a7c7ea4a --- /dev/null +++ b/files/fr/web/api/idbindex/isautolocale/index.md @@ -0,0 +1,79 @@ +--- +title: IDBIndex.isAutoLocale +slug: Web/API/IDBIndex/isAutoLocale +tags: + - API + - Experimental + - IDBIndex + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBIndex/isAutoLocale +--- +
{{APIRef("IndexedDB")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule isAutoLocale, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique si la valeur locale de l'index vaut auto (cf. les paramètres optionnels de createIndex()).

+ +

Syntaxe

+ +
var monIndex = objectStore.index('index');
+console.log(monIndex.isAutoLocale);
+ +

Valeur

+ +

Un booléen.

+ +

Exemples

+ +

Dans l'exemple suivant, on ouvre une transaction et un magasin d'objet puis on récupère l'index lName depuis une base de données de contact. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne comme si on avait directement ouvert un curseur sur un magasin d'objet avec {{domxref("IDBObjectStore.openCursor")}} mais ici les enregistrements sont triés selon l'index et pas selon la clé primaire.

+ +

La valeur isAutoLocale est affichée dans la console.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.isAutoLocale);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments ont été affichés.');
+    }
+  };
+};
+ +

Spécifications

+ +

Actuellement, cette propriété ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.isAutoLocale")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/keypath/index.html b/files/fr/web/api/idbindex/keypath/index.html deleted file mode 100644 index 551f9f0b73..0000000000 --- a/files/fr/web/api/idbindex/keypath/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: IDBIndex.keyPath -slug: Web/API/IDBIndex/keyPath -translation_of: Web/API/IDBIndex/keyPath ---- -

{{ APIRef("IndexedDB") }}

- -
-

La propriété keyPath de l'interface {{domxref("IDBIndex")}} renvoie le chemin de clé de l'index. Si l'index n'est pas automatiquement mise à jour la propriété vaux null.

- -

{{AvailableInWorkers}}

-
- -

Syntaxe

- -
var keyPath = myIndex.keyPath
- -

Valeur

- -

Tous types de valeur pouvant être utilisés comme chemin de clé.

- -

Exemple

- -

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

- -

Le chemin de clé de l'index est affiché sur la console (ici: lName).

- -

Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-
-  //ouvre un transaction
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  //accés au magasin d'objet
-  var objectStore = transaction.objectStore('contactsList');
-
-  //on récupère l'index
-  var myIndex = objectStore.index('lName');
-  //on affiche le chemin de clé de l'index sur la console
-  console.log(myIndex.keyPath);
-
-  //un curseur qui itère sur l'index
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Tous les enregistrements ont été affichés.');
-    }
-  };
-};
- -

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.keyPath")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/keypath/index.md b/files/fr/web/api/idbindex/keypath/index.md new file mode 100644 index 0000000000..551f9f0b73 --- /dev/null +++ b/files/fr/web/api/idbindex/keypath/index.md @@ -0,0 +1,98 @@ +--- +title: IDBIndex.keyPath +slug: Web/API/IDBIndex/keyPath +translation_of: Web/API/IDBIndex/keyPath +--- +

{{ APIRef("IndexedDB") }}

+ +
+

La propriété keyPath de l'interface {{domxref("IDBIndex")}} renvoie le chemin de clé de l'index. Si l'index n'est pas automatiquement mise à jour la propriété vaux null.

+ +

{{AvailableInWorkers}}

+
+ +

Syntaxe

+ +
var keyPath = myIndex.keyPath
+ +

Valeur

+ +

Tous types de valeur pouvant être utilisés comme chemin de clé.

+ +

Exemple

+ +

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

+ +

Le chemin de clé de l'index est affiché sur la console (ici: lName).

+ +

Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //on affiche le chemin de clé de l'index sur la console
+  console.log(myIndex.keyPath);
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};
+ +

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.keyPath")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/locale/index.html b/files/fr/web/api/idbindex/locale/index.html deleted file mode 100644 index 6f91a28888..0000000000 --- a/files/fr/web/api/idbindex/locale/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: IDBIndex.locale -slug: Web/API/IDBIndex/locale -translation_of: Web/API/IDBIndex/locale ---- -
{{APIRef("IndexedDB")}}{{SeeCompatTable}}
- -

La propriété locale de l'interface {{domxref("IDBIndex")}} renvoie la localisation de l'index (par exemple fr, ou en-US) si la localisation à été spécifie lors de la mise en place de l'index (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).

- -

{{note("Cette propriété renvoie la localisation utilisé par l'index. En d'autres termes, elle ne renverras jamais 'auto'.")}}

- -

Syntaxe

- -
var indexLocalisation = myIndex.locale;
- -

Valeur

- -

Une {{domxref("DOMString","chaîne de caractère")}} représentant la localisation courante de l'index.

- -

Exemple

- -

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

- -

La valeur de la propriété Locale est affichée sur la console.

- -

Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-
-  //ouvre un transaction
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  //accés au magasin d'objet
-  var objectStore = transaction.objectStore('contactsList');
-
-  //on récupère l'index
-  var myIndex = objectStore.index('lName');
-  //on affiche la propriété locale sur la console
-  console.log(myIndex.locale);
-
-  //un curseur qui itère sur l'index
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Tous les enregistrements ont été affichés.');
-    }
-  };
-};
- -

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

- -

Spécification

- -

Ne fait actuellement partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.locale")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/locale/index.md b/files/fr/web/api/idbindex/locale/index.md new file mode 100644 index 0000000000..6f91a28888 --- /dev/null +++ b/files/fr/web/api/idbindex/locale/index.md @@ -0,0 +1,83 @@ +--- +title: IDBIndex.locale +slug: Web/API/IDBIndex/locale +translation_of: Web/API/IDBIndex/locale +--- +
{{APIRef("IndexedDB")}}{{SeeCompatTable}}
+ +

La propriété locale de l'interface {{domxref("IDBIndex")}} renvoie la localisation de l'index (par exemple fr, ou en-US) si la localisation à été spécifie lors de la mise en place de l'index (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).

+ +

{{note("Cette propriété renvoie la localisation utilisé par l'index. En d'autres termes, elle ne renverras jamais 'auto'.")}}

+ +

Syntaxe

+ +
var indexLocalisation = myIndex.locale;
+ +

Valeur

+ +

Une {{domxref("DOMString","chaîne de caractère")}} représentant la localisation courante de l'index.

+ +

Exemple

+ +

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

+ +

La valeur de la propriété Locale est affichée sur la console.

+ +

Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //on affiche la propriété locale sur la console
+  console.log(myIndex.locale);
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};
+ +

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+ +

Spécification

+ +

Ne fait actuellement partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.locale")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/multientry/index.html b/files/fr/web/api/idbindex/multientry/index.html deleted file mode 100644 index 730a9f074a..0000000000 --- a/files/fr/web/api/idbindex/multientry/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: IDBIndex.multiEntry -slug: Web/API/IDBIndex/multiEntry -tags: - - API - - IDBIndex - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBIndex/multiEntry ---- -
{{APIRef("IndexedDB")}}
- -

La propriété multiEntry, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique le comportement de l'index lorsque le résultat de l'évaluation d'un chemin de clé renvoie un tableau.

- -

Ce comportement est paramétré au moment où l'index est créé avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode permet d'utiliser un paramètre facultatif options pour définir la propriété multiEntry avec true/false.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var monIndex = objectStore.index('index');
-console.log(monIndex.multiEntry);
- -

Valeur

- -

Un booléen. S'il vaut true, cela signifie qu'il y a autant d'enregistrement que de valeurs dans le tableau renvoyé lors de l'évaluation du chemin (les clés des enregistrements sont les valeurs du tableau). S'il vaut false, cela signifie qu'il n'y aura qu'un seul enregistrement ajouté et que la clé sera le tableau.

- -

Exemples

- -

Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets et on récupère l'index lName depuis la base de données des contacts. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne comme si on avait directement ouvert un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} mais les enregistrements sont ici renvoyés en étant triés selon l'index et non selon la clé primaire.

- -

La propriété multiEntry est affichée dans la console. Dans cet exemple, elle a la valeur false.

- -

Enfin, on parcourt chacun des enregistrements pour insérer les données dans un tableau HTML. Pour consulter un exemple complet, vous pouvez vous référer à notre dépôt IDBIndex-example (voir également la démo live).

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  var objectStore = transaction.objectStore('contactsList');
-
-  var myIndex = objectStore.index('lName');
-  console.log(myIndex.multiEntry);
-
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Les éléments ont été affichés.');
-    }
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.multiEntry")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/multientry/index.md b/files/fr/web/api/idbindex/multientry/index.md new file mode 100644 index 0000000000..730a9f074a --- /dev/null +++ b/files/fr/web/api/idbindex/multientry/index.md @@ -0,0 +1,97 @@ +--- +title: IDBIndex.multiEntry +slug: Web/API/IDBIndex/multiEntry +tags: + - API + - IDBIndex + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBIndex/multiEntry +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété multiEntry, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique le comportement de l'index lorsque le résultat de l'évaluation d'un chemin de clé renvoie un tableau.

+ +

Ce comportement est paramétré au moment où l'index est créé avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode permet d'utiliser un paramètre facultatif options pour définir la propriété multiEntry avec true/false.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var monIndex = objectStore.index('index');
+console.log(monIndex.multiEntry);
+ +

Valeur

+ +

Un booléen. S'il vaut true, cela signifie qu'il y a autant d'enregistrement que de valeurs dans le tableau renvoyé lors de l'évaluation du chemin (les clés des enregistrements sont les valeurs du tableau). S'il vaut false, cela signifie qu'il n'y aura qu'un seul enregistrement ajouté et que la clé sera le tableau.

+ +

Exemples

+ +

Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets et on récupère l'index lName depuis la base de données des contacts. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne comme si on avait directement ouvert un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} mais les enregistrements sont ici renvoyés en étant triés selon l'index et non selon la clé primaire.

+ +

La propriété multiEntry est affichée dans la console. Dans cet exemple, elle a la valeur false.

+ +

Enfin, on parcourt chacun des enregistrements pour insérer les données dans un tableau HTML. Pour consulter un exemple complet, vous pouvez vous référer à notre dépôt IDBIndex-example (voir également la démo live).

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.multiEntry);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments ont été affichés.');
+    }
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.multiEntry")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/name/index.html b/files/fr/web/api/idbindex/name/index.html deleted file mode 100644 index 1211cc937e..0000000000 --- a/files/fr/web/api/idbindex/name/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: IDBIndex.name -slug: Web/API/IDBIndex/name -tags: - - API - - IDBIndex - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBIndex/name ---- -
{{APIRef("IndexedDB")}}
- -

La propriété name, rattachée à l'interface {{domxref("IDBIndex")}}, contient une chaîne de caractères qui permet de désigner l'index courant.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var indexName = IDBIndex.name;
-IDBIndex.name = indexName;
- -

Valeur

- -

Une chaîne de caractères qui fournit le nom à l'index.

- -

Exceptions

- -

Différentes exceptions peuvent être déclenchées lorsqu'on souhaite modifier le nom d'un index.

- -
-
InvalidStateError
-
L'index ou le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de montée de niveau. Le renommage des index est uniquement possible lors des transactions de montée de niveau (c'est-à-dire quand le mode de la transaction est "versionchange").
-
TransactionInactiveError
-
La transaction courante n'est pas active.
-
ConstraintError
-
Il existe déjà un index avec ce nom.
-
- -

Exemples

- -

Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets pour lequel on récupère l'index lName. Ensuite, on ouvre un curseur sur cet index avec la méthode {{domxref("IDBIndex.openCursor()")}} (celle-ci fonctionne comme la méthode {{domxref("IDBObjectStore.openCursor", "openCursor()")}} qui s'utilise sur les magasins d'objets mais ici, les enregistrements sont triés selon l'index et pas selon la clé primaire).

- -

Le nom de l'index est affiché dans la console grâce à la propriété (ici, le nom sera "lName").

- -

Enfin, on parcourt chacun des enregistrements et on ajoute les données dans un tableau HTML.

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  var objectStore = transaction.objectStore('contactsList');
-
-  var myIndex = objectStore.index('lName');
-  console.log(myIndex.name);
-
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Les éléments sont affichés.');
-    }
-  };
-};
- -
-

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.name")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/name/index.md b/files/fr/web/api/idbindex/name/index.md new file mode 100644 index 0000000000..1211cc937e --- /dev/null +++ b/files/fr/web/api/idbindex/name/index.md @@ -0,0 +1,112 @@ +--- +title: IDBIndex.name +slug: Web/API/IDBIndex/name +tags: + - API + - IDBIndex + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBIndex/name +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété name, rattachée à l'interface {{domxref("IDBIndex")}}, contient une chaîne de caractères qui permet de désigner l'index courant.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var indexName = IDBIndex.name;
+IDBIndex.name = indexName;
+ +

Valeur

+ +

Une chaîne de caractères qui fournit le nom à l'index.

+ +

Exceptions

+ +

Différentes exceptions peuvent être déclenchées lorsqu'on souhaite modifier le nom d'un index.

+ +
+
InvalidStateError
+
L'index ou le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de montée de niveau. Le renommage des index est uniquement possible lors des transactions de montée de niveau (c'est-à-dire quand le mode de la transaction est "versionchange").
+
TransactionInactiveError
+
La transaction courante n'est pas active.
+
ConstraintError
+
Il existe déjà un index avec ce nom.
+
+ +

Exemples

+ +

Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets pour lequel on récupère l'index lName. Ensuite, on ouvre un curseur sur cet index avec la méthode {{domxref("IDBIndex.openCursor()")}} (celle-ci fonctionne comme la méthode {{domxref("IDBObjectStore.openCursor", "openCursor()")}} qui s'utilise sur les magasins d'objets mais ici, les enregistrements sont triés selon l'index et pas selon la clé primaire).

+ +

Le nom de l'index est affiché dans la console grâce à la propriété (ici, le nom sera "lName").

+ +

Enfin, on parcourt chacun des enregistrements et on ajoute les données dans un tableau HTML.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.name);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments sont affichés.');
+    }
+  };
+};
+ +
+

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.name")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/objectstore/index.html b/files/fr/web/api/idbindex/objectstore/index.html deleted file mode 100644 index 72f83bc88e..0000000000 --- a/files/fr/web/api/idbindex/objectstore/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: IDBIndex.objectStore -slug: Web/API/IDBIndex/objectStore -translation_of: Web/API/IDBIndex/objectStore ---- -

{{ APIRef("IndexedDB") }}

- -
-

La propriètè objectStore de l'interface {{domxref("IDBIndex")}} renvoie un accès au magasin d'objet que référence l'index.

- -

{{AvailableInWorkers}}

-
- -

Syntaxe

- -
var indexObjectStore = myIndex.objectStore;
- -

Valeur

- -

Un {{ domxref("IDBObjectStore","accès au magasin d'objet") }}.

- -

Example

- -

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

- -

Le magasin d'objet référencé par l'index est afficher sur la console, quelque chose ressemblant à:

- -
IDBObjectStore { name: "contactsList", keyPath: "id", indexNames: DOMStringList[7], transaction: IDBTransaction, autoIncrement: false }
- -

Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-
-  //ouvre un transaction
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  //accés au magasin d'objet
-  var objectStore = transaction.objectStore('contactsList');
-
-  //on récupère l'index
-  var myIndex = objectStore.index('lName');
-  //on affiche le magasin d'objet référencé locale sur la console
-  console.log(myIndex.objectStore);
-
-  //un curseur qui itère sur l'index
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Tous les enregistrements ont été affichés.');
-    }
-  };
-};
- -

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.objectStore")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/objectstore/index.md b/files/fr/web/api/idbindex/objectstore/index.md new file mode 100644 index 0000000000..72f83bc88e --- /dev/null +++ b/files/fr/web/api/idbindex/objectstore/index.md @@ -0,0 +1,100 @@ +--- +title: IDBIndex.objectStore +slug: Web/API/IDBIndex/objectStore +translation_of: Web/API/IDBIndex/objectStore +--- +

{{ APIRef("IndexedDB") }}

+ +
+

La propriètè objectStore de l'interface {{domxref("IDBIndex")}} renvoie un accès au magasin d'objet que référence l'index.

+ +

{{AvailableInWorkers}}

+
+ +

Syntaxe

+ +
var indexObjectStore = myIndex.objectStore;
+ +

Valeur

+ +

Un {{ domxref("IDBObjectStore","accès au magasin d'objet") }}.

+ +

Example

+ +

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

+ +

Le magasin d'objet référencé par l'index est afficher sur la console, quelque chose ressemblant à:

+ +
IDBObjectStore { name: "contactsList", keyPath: "id", indexNames: DOMStringList[7], transaction: IDBTransaction, autoIncrement: false }
+ +

Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //on affiche le magasin d'objet référencé locale sur la console
+  console.log(myIndex.objectStore);
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};
+ +

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.objectStore")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/opencursor/index.html b/files/fr/web/api/idbindex/opencursor/index.html deleted file mode 100644 index 8e0dff9573..0000000000 --- a/files/fr/web/api/idbindex/opencursor/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: IDBIndex.openCursor() -slug: Web/API/IDBIndex/openCursor -tags: - - API - - IDBIndex - - IndexedDB - - Méthode - - Reference - - openCursor -translation_of: Web/API/IDBIndex/openCursor ---- -
{{APIRef("IndexedDB")}}
- -

La méthode openCursor() de l'interface {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, crée un curseur sur l'intervalle de clé fourni en argument.

- -

La méthode la positionne le curseur de façon approprié, selon la direction indiquée :

- - - -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var request = myIndex.openCursor(keyRange,direction);
- -

Paramètres

- -
-
keyRange {{optional_inline}}
-
L'intervalle de clé ({{domxref("IDBKeyRange")}}) sur lequel se déplace le curseur. Si aucun argument n'est passé, la valeur par défaut sera un intervalle qui englobe tous les enregistrements du magasin d'objets.
-
direction {{optional_inline}}
-
La direction dans laquelle se déplace le curseur (la propriété direction de l'objet {{domxref("IDBCursor.direction")}}). La valeur par défaut est "next".
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} sur lequel les évènements associés à l'opération seront déclenchés.

- -

Exceptions

- -

Cette méthode peut déclencher une {{domxref("DOMException")}} dont le type peut être l'un des suivant :

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Type d'exceptionDescription
TransactionInactiveErrorLa transaction pour cet index est inactive.
TypeErrorLa valeur du paramètre pour la direction est invalide.
DataError -

La clé ou l'intervalle de clé fourni contient une clé invalide.

-
InvalidStateErrorL'index a été supprimé ou déplacé.
- -

Exemple

- -

Dans l'exemple suivant, on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

- -

Ensuite, on parcourt les enregistrements pour insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-
-  //ouvre un transaction
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  //accés au magasin d'objet
-  var objectStore = transaction.objectStore('contactsList');
-
-  //on récupère l'index
-  var myIndex = objectStore.index('lName');
-
-  //un curseur qui itère sur l'index
-  var request = myIndex.openCursor();
-  request.onsuccess = function(event) {
-    var cursor = request.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Tous les enregistrements ont été affichés.');
-    }
-  };
-};
- -
-

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.openCursor")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/opencursor/index.md b/files/fr/web/api/idbindex/opencursor/index.md new file mode 100644 index 0000000000..8e0dff9573 --- /dev/null +++ b/files/fr/web/api/idbindex/opencursor/index.md @@ -0,0 +1,156 @@ +--- +title: IDBIndex.openCursor() +slug: Web/API/IDBIndex/openCursor +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference + - openCursor +translation_of: Web/API/IDBIndex/openCursor +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode openCursor() de l'interface {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, crée un curseur sur l'intervalle de clé fourni en argument.

+ +

La méthode la positionne le curseur de façon approprié, selon la direction indiquée :

+ + + +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var request = myIndex.openCursor(keyRange,direction);
+ +

Paramètres

+ +
+
keyRange {{optional_inline}}
+
L'intervalle de clé ({{domxref("IDBKeyRange")}}) sur lequel se déplace le curseur. Si aucun argument n'est passé, la valeur par défaut sera un intervalle qui englobe tous les enregistrements du magasin d'objets.
+
direction {{optional_inline}}
+
La direction dans laquelle se déplace le curseur (la propriété direction de l'objet {{domxref("IDBCursor.direction")}}). La valeur par défaut est "next".
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} sur lequel les évènements associés à l'opération seront déclenchés.

+ +

Exceptions

+ +

Cette méthode peut déclencher une {{domxref("DOMException")}} dont le type peut être l'un des suivant :

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Type d'exceptionDescription
TransactionInactiveErrorLa transaction pour cet index est inactive.
TypeErrorLa valeur du paramètre pour la direction est invalide.
DataError +

La clé ou l'intervalle de clé fourni contient une clé invalide.

+
InvalidStateErrorL'index a été supprimé ou déplacé.
+ +

Exemple

+ +

Dans l'exemple suivant, on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

+ +

Ensuite, on parcourt les enregistrements pour insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+
+  //un curseur qui itère sur l'index
+  var request = myIndex.openCursor();
+  request.onsuccess = function(event) {
+    var cursor = request.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};
+ +
+

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.openCursor")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/openkeycursor/index.html b/files/fr/web/api/idbindex/openkeycursor/index.html deleted file mode 100644 index a52f7c4e8e..0000000000 --- a/files/fr/web/api/idbindex/openkeycursor/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: IDBIndex.openKeyCursor() -slug: Web/API/IDBIndex/openKeyCursor -tags: - - API - - IDBIndex - - IndexedDB - - Méthode - - Reference - - openKeyCursor -translation_of: Web/API/IDBIndex/openKeyCursor ---- -
{{APIRef("IndexedDB")}}
- -

La méthode openKeyCursor() de {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, crée un curseur sur l'intervalle de clé passé en argument pour l'index courant.

- -

Cette méthode positionne le curseur sur la clé appropriée, dans la direction indiquée :

- - - -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var monIndex = objectStore.index("index");
-var request = monIndex.openKeyCursor(keyRange,direction);
- -

Paramètres

- -
-
keyRange {{optional_inline}}
-
L'{{domxref("IDBKeyRange","intervalle de clé")}} sur lequel se déplace le curseur. On peut passer un clé seule qui sera alors considéré comme une {{domxref("IDBKeyRange.only","intervalle seule")}}. Par défaut le curseur se déplace sur l'ensemble des clés de l'index.
-
direction {{optional_inline}}
-
La {{domxref("IDBCursor.direction","direction")}} du {{domxref("IDBCursor","curseur")}} qui défini le sens d'itération. par défaut "next".
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} sur lequel on peut écouter les évènements associés à l'opération lancée par la méthode.

- -

Exceptions

- -

Cette méthode peut lever une exception :

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Type d'exceptionDescription
TransactionInactiveErrorLa transaction pour cet index {{domxref("IDBIndex")}} est inactive.
TypeErrorLa valeur du paramètre pour la direction est invalide.
DataError -

La clé ou l'intervalle de clé fourni contient une clé invalide.

-
InvalidStateErrorL'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.
- -

Exemple

- -

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

- -

Ensuite, on itère sur l'ensemble des enregistrements pour en insérer leur clé dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openKeyCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openKeyCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-
-  //ouvre un transaction
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  //accés au magasin d'objet
-  var objectStore = transaction.objectStore('contactsList');
-
-  //on récupère l'index
-  var myIndex = objectStore.index('lName');
-
-  //un curseur qui itère sur l'index
-  var request = myIndex.openCursor();
-  request.onsuccess = function(event) {
-    var cursor = request.result;
-    if(cursor) {
-
-
-      // cursor.key la clé de l'enregistrement à la position du curseur
-      // il n'y as pas de cursor.value contrairement à openCursor()
-
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.key + '</td>'
-      tableEntry.appendChild(tableRow);
-
-      //on relance la requête pour la position suivante du curseur
-      cursor.continue();
-    } else {
-      console.log('Toutes les clé ont été affichés.');
-    }
-  };
-};
- -
-

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}}{{Spec2('IndexedDB')}} 
- -

Browser compatibility

- -

{{Compat("api.IDBIndex.openKeyCursor")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/openkeycursor/index.md b/files/fr/web/api/idbindex/openkeycursor/index.md new file mode 100644 index 0000000000..a52f7c4e8e --- /dev/null +++ b/files/fr/web/api/idbindex/openkeycursor/index.md @@ -0,0 +1,151 @@ +--- +title: IDBIndex.openKeyCursor() +slug: Web/API/IDBIndex/openKeyCursor +tags: + - API + - IDBIndex + - IndexedDB + - Méthode + - Reference + - openKeyCursor +translation_of: Web/API/IDBIndex/openKeyCursor +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode openKeyCursor() de {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, crée un curseur sur l'intervalle de clé passé en argument pour l'index courant.

+ +

Cette méthode positionne le curseur sur la clé appropriée, dans la direction indiquée :

+ + + +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var monIndex = objectStore.index("index");
+var request = monIndex.openKeyCursor(keyRange,direction);
+ +

Paramètres

+ +
+
keyRange {{optional_inline}}
+
L'{{domxref("IDBKeyRange","intervalle de clé")}} sur lequel se déplace le curseur. On peut passer un clé seule qui sera alors considéré comme une {{domxref("IDBKeyRange.only","intervalle seule")}}. Par défaut le curseur se déplace sur l'ensemble des clés de l'index.
+
direction {{optional_inline}}
+
La {{domxref("IDBCursor.direction","direction")}} du {{domxref("IDBCursor","curseur")}} qui défini le sens d'itération. par défaut "next".
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} sur lequel on peut écouter les évènements associés à l'opération lancée par la méthode.

+ +

Exceptions

+ +

Cette méthode peut lever une exception :

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Type d'exceptionDescription
TransactionInactiveErrorLa transaction pour cet index {{domxref("IDBIndex")}} est inactive.
TypeErrorLa valeur du paramètre pour la direction est invalide.
DataError +

La clé ou l'intervalle de clé fourni contient une clé invalide.

+
InvalidStateErrorL'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.
+ +

Exemple

+ +

Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index lName.

+ +

Ensuite, on itère sur l'ensemble des enregistrements pour en insérer leur clé dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openKeyCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openKeyCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+
+  //un curseur qui itère sur l'index
+  var request = myIndex.openCursor();
+  request.onsuccess = function(event) {
+    var cursor = request.result;
+    if(cursor) {
+
+
+      // cursor.key la clé de l'enregistrement à la position du curseur
+      // il n'y as pas de cursor.value contrairement à openCursor()
+
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.key + '</td>'
+      tableEntry.appendChild(tableRow);
+
+      //on relance la requête pour la position suivante du curseur
+      cursor.continue();
+    } else {
+      console.log('Toutes les clé ont été affichés.');
+    }
+  };
+};
+ +
+

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}}{{Spec2('IndexedDB')}} 
+ +

Browser compatibility

+ +

{{Compat("api.IDBIndex.openKeyCursor")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbindex/unique/index.html b/files/fr/web/api/idbindex/unique/index.html deleted file mode 100644 index 4e199912a4..0000000000 --- a/files/fr/web/api/idbindex/unique/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: IDBIndex.unique -slug: Web/API/IDBIndex/unique -tags: - - API - - IDBIndex - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBIndex/unique ---- -
{{APIRef("IndexedDB")}}
- -

La propriété unique, rattachée à l'interface IDBIndex, est un booléen qui indique si l'index utilisé permet d'avoir des clés dupliquées.

- -

Cette caractéristique est décidée lors de la création de l'index, avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode prend un paramètre optionnel, unique, qui, s'il vaut true, indique que l'index ne permettra pas d'avoir de clés dupliquées.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var myIndex = objectStore.index('index');
- -

Valeur

- -

Un booléen qui vaut true si l'index permet d'avoir des valeurs dupliquées pour une même clé ou false s'il n'est pas possible d'avoir de clés dupliquées.

- -

Exemples

- -

Dans l'exemple suivant, on ouvre une transaction en lecture sur un magasin d'objets puis on récupère l'index lName. On ouvre alors un curseur sur l'index grâce à {{domxref("IDBIndex.openCursor")}} (cela fonctionne de façon analogue à l'ouverture d'un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf qu'ici, les enregistrements sont triés selon l'index et pas selon la clé primaire.

- -

On affiche le caractère unique des clé dans la console (ici, on voit que la propriété vaut false).

- -

Enfin, on parcourt chaque enregistrement et on insère les données dans le tableau HTML (pour voir un exemple complet, consulter notre dépôt IDBIndex-example (voir la démonstration live).

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  var objectStore = transaction.objectStore('contactsList');
-
-  var myIndex = objectStore.index('lName');
-  console.log(myIndex.unique);
-
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Les éléments sont affichés.');
-    }
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex.unique")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbindex/unique/index.md b/files/fr/web/api/idbindex/unique/index.md new file mode 100644 index 0000000000..4e199912a4 --- /dev/null +++ b/files/fr/web/api/idbindex/unique/index.md @@ -0,0 +1,96 @@ +--- +title: IDBIndex.unique +slug: Web/API/IDBIndex/unique +tags: + - API + - IDBIndex + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBIndex/unique +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété unique, rattachée à l'interface IDBIndex, est un booléen qui indique si l'index utilisé permet d'avoir des clés dupliquées.

+ +

Cette caractéristique est décidée lors de la création de l'index, avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode prend un paramètre optionnel, unique, qui, s'il vaut true, indique que l'index ne permettra pas d'avoir de clés dupliquées.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var myIndex = objectStore.index('index');
+ +

Valeur

+ +

Un booléen qui vaut true si l'index permet d'avoir des valeurs dupliquées pour une même clé ou false s'il n'est pas possible d'avoir de clés dupliquées.

+ +

Exemples

+ +

Dans l'exemple suivant, on ouvre une transaction en lecture sur un magasin d'objets puis on récupère l'index lName. On ouvre alors un curseur sur l'index grâce à {{domxref("IDBIndex.openCursor")}} (cela fonctionne de façon analogue à l'ouverture d'un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf qu'ici, les enregistrements sont triés selon l'index et pas selon la clé primaire.

+ +

On affiche le caractère unique des clé dans la console (ici, on voit que la propriété vaut false).

+ +

Enfin, on parcourt chaque enregistrement et on insère les données dans le tableau HTML (pour voir un exemple complet, consulter notre dépôt IDBIndex-example (voir la démonstration live).

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.unique);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments sont affichés.');
+    }
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex.unique")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbkeyrange/bound/index.html b/files/fr/web/api/idbkeyrange/bound/index.html deleted file mode 100644 index e235d21a8c..0000000000 --- a/files/fr/web/api/idbkeyrange/bound/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: IDBKeyRange.bound() -slug: Web/API/IDBKeyRange/bound -tags: - - API - - IDBKeyRange - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBKeyRange/bound ---- -
{{APIRef("IndexedDB")}}
- -

La méthode bound(), rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un intervalle de clé délimité par une borne inférieure et une borne supérieure.

- -

L'intervalle peut être ouvert (les limites sont exclues) ou fermé (les limites sont incluses). Par défaut, l'intervalle est fermé.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
myKeyRange = IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen);
- -

Paramètres

- -
-
lower
-
La limite inférieure de l'intervalle.
-
upper
-
La limite supérieure de l'intervalle.
-
lowerOpen {{optional_inline}}
-
Si cette valeur vaut false (la valeur par defaut), l'intervalle contient la limite inférieure.
-
upperOpen {{optional_inline}}
-
Si cette valeur vaut false (la valeur par défaut), l'intervalle contient la limite supérieure.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBKeyRange")}} qui représente l'intervalle de clé.

- -

Exceptions

- -
-
DataError
-
Cette exception {{domxref("DOMException")}} est levée si : -
    -
  • Une des limites passé n'est pas valide.
    • -
  • La limite inférieur est supèrieur à la limite supérieur.
    • -
  • Les limites correspondent et l'intervalle est ouvert.
    • -
-
-
- -

Exemples

- -

Dans l'exemple qui suit, on illustre comment créer un intervalle de clé. On déclare keyRangeValue = IDBKeyRange.bound("A", "F"); ce qui représente un intervalle entre "A" et "F". Ensuite, on ouvre une transaction grâce à un objet {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objets et on ouvre un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique keyRangeValue comme intervalle de clé correspondant. Cela signifie que le curseur ne parcourera que les enregistrements dont les clés sont contenues dans cet intervalle. L'intervalle contient bien les valeurs "A" et "F" car les bornes sont incluses. Si on avait utilisé IDBKeyRange.bound("A", "F", true, true);, l'intervalle n'aurait pas inclus "A" et "F" mais uniquement les valeurs intermédiaires.

- -
function displayData() {
-  var keyRangeValue = IDBKeyRange.bound("A", "F");
-
-  var transaction = db.transaction(['fThings'], 'readonly');
-  var objectStore = transaction.objectStore('fThings');
-
-  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
-    var cursor = event.target.result;
-      if(cursor) {
-        var listItem = document.createElement('li');
-        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
-        list.appendChild(listItem);
-
-        cursor.continue();
-      } else {
-        console.log('Les éléments ont été affichés.');
-      }
-    };
-  };
- -
-

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

-
- -

Spécification

- -
- - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}}{{Spec2('IndexedDB')}} 
-
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBKeyRange.bound")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbkeyrange/bound/index.md b/files/fr/web/api/idbkeyrange/bound/index.md new file mode 100644 index 0000000000..e235d21a8c --- /dev/null +++ b/files/fr/web/api/idbkeyrange/bound/index.md @@ -0,0 +1,115 @@ +--- +title: IDBKeyRange.bound() +slug: Web/API/IDBKeyRange/bound +tags: + - API + - IDBKeyRange + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBKeyRange/bound +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode bound(), rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un intervalle de clé délimité par une borne inférieure et une borne supérieure.

+ +

L'intervalle peut être ouvert (les limites sont exclues) ou fermé (les limites sont incluses). Par défaut, l'intervalle est fermé.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
myKeyRange = IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen);
+ +

Paramètres

+ +
+
lower
+
La limite inférieure de l'intervalle.
+
upper
+
La limite supérieure de l'intervalle.
+
lowerOpen {{optional_inline}}
+
Si cette valeur vaut false (la valeur par defaut), l'intervalle contient la limite inférieure.
+
upperOpen {{optional_inline}}
+
Si cette valeur vaut false (la valeur par défaut), l'intervalle contient la limite supérieure.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBKeyRange")}} qui représente l'intervalle de clé.

+ +

Exceptions

+ +
+
DataError
+
Cette exception {{domxref("DOMException")}} est levée si : +
    +
  • Une des limites passé n'est pas valide.
    • +
  • La limite inférieur est supèrieur à la limite supérieur.
    • +
  • Les limites correspondent et l'intervalle est ouvert.
    • +
+
+
+ +

Exemples

+ +

Dans l'exemple qui suit, on illustre comment créer un intervalle de clé. On déclare keyRangeValue = IDBKeyRange.bound("A", "F"); ce qui représente un intervalle entre "A" et "F". Ensuite, on ouvre une transaction grâce à un objet {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objets et on ouvre un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique keyRangeValue comme intervalle de clé correspondant. Cela signifie que le curseur ne parcourera que les enregistrements dont les clés sont contenues dans cet intervalle. L'intervalle contient bien les valeurs "A" et "F" car les bornes sont incluses. Si on avait utilisé IDBKeyRange.bound("A", "F", true, true);, l'intervalle n'aurait pas inclus "A" et "F" mais uniquement les valeurs intermédiaires.

+ +
function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("A", "F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };
+ +
+

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

+
+ +

Spécification

+ +
+ + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}}{{Spec2('IndexedDB')}} 
+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBKeyRange.bound")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbkeyrange/includes/index.html b/files/fr/web/api/idbkeyrange/includes/index.html deleted file mode 100644 index 911a8c044b..0000000000 --- a/files/fr/web/api/idbkeyrange/includes/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: IDBKeyRange.includes() -slug: Web/API/IDBKeyRange/includes -tags: - - API - - IDBKeyRange - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBKeyRange/includes ---- -
{{APIRef("IndexedDB")}}
- -

La méthode includes(), rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen si la clé est contenue dans un intervalle de clé.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
myIncludesResult = myKeyRange.includes('A');
- -

Paramètres

- -
-
key
-
La clé dont on souhaite savoir si elle est dans l'intervalle.
-
- -

Valeur de retour

- -

Un booléen.

- -

Exceptions

- -

Cette méthode peut lever une exception {{domxref("DOMException")}} de type {{domxref("DataError")}} lorsque la clé fournie n'est pas une clé valide.

- -

Exemples

- -
var keyRangeValue = IDBKeyRange.bound('A', 'K', false, false);
-
-var monResultat = keyRangeValue.includes('F');
-// Renvoie true
-
-var monResultat = keyRangeValue.includes('W');
-// Renvoie false
-
- -

Prothèse d'émulation (polyfill)

- -

La méhode includes() a été ajoutée à partir de la deuxième édition de la spécification d'Indexed DB. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, on peut utiliser la prothèse suivante.

- -
IDBKeyRange.prototype.includes = IDBKeyRange.prototype.includes || function(key) {
-  var r = this, c;
-  if (r.lower !== undefined) {
-    c = indexedDB.cmp(key, r.lower);
-    if (r.lowerOpen && c <= 0) return false;
-    if (!r.lowerOpen && c < 0) return false;
-  }
-  if (r.upper !== undefined) {
-    c = indexedDB.cmp(key, r.upper);
-    if (r.upperOpen && c >= 0) return false;
-    if (!r.upperOpen && c > 0) return false;
-  }
-  return true;
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBKeyRange.includes")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbkeyrange/includes/index.md b/files/fr/web/api/idbkeyrange/includes/index.md new file mode 100644 index 0000000000..911a8c044b --- /dev/null +++ b/files/fr/web/api/idbkeyrange/includes/index.md @@ -0,0 +1,101 @@ +--- +title: IDBKeyRange.includes() +slug: Web/API/IDBKeyRange/includes +tags: + - API + - IDBKeyRange + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBKeyRange/includes +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode includes(), rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen si la clé est contenue dans un intervalle de clé.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
myIncludesResult = myKeyRange.includes('A');
+ +

Paramètres

+ +
+
key
+
La clé dont on souhaite savoir si elle est dans l'intervalle.
+
+ +

Valeur de retour

+ +

Un booléen.

+ +

Exceptions

+ +

Cette méthode peut lever une exception {{domxref("DOMException")}} de type {{domxref("DataError")}} lorsque la clé fournie n'est pas une clé valide.

+ +

Exemples

+ +
var keyRangeValue = IDBKeyRange.bound('A', 'K', false, false);
+
+var monResultat = keyRangeValue.includes('F');
+// Renvoie true
+
+var monResultat = keyRangeValue.includes('W');
+// Renvoie false
+
+ +

Prothèse d'émulation (polyfill)

+ +

La méhode includes() a été ajoutée à partir de la deuxième édition de la spécification d'Indexed DB. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, on peut utiliser la prothèse suivante.

+ +
IDBKeyRange.prototype.includes = IDBKeyRange.prototype.includes || function(key) {
+  var r = this, c;
+  if (r.lower !== undefined) {
+    c = indexedDB.cmp(key, r.lower);
+    if (r.lowerOpen && c <= 0) return false;
+    if (!r.lowerOpen && c < 0) return false;
+  }
+  if (r.upper !== undefined) {
+    c = indexedDB.cmp(key, r.upper);
+    if (r.upperOpen && c >= 0) return false;
+    if (!r.upperOpen && c > 0) return false;
+  }
+  return true;
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBKeyRange.includes")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbkeyrange/index.html b/files/fr/web/api/idbkeyrange/index.html deleted file mode 100644 index 9962a1488a..0000000000 --- a/files/fr/web/api/idbkeyrange/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: IDBKeyRange -slug: Web/API/IDBKeyRange -tags: - - API - - Database - - IDBKeyRange - - IndexedDB - - Interface - - Reference - - Storage - - TopicStub -translation_of: Web/API/IDBKeyRange ---- -
{{APIRef("IndexedDB")}}
- -

L'interface IDBKeyRange de l'API IndexedDB représente un intervalle continue sur un type de donnée utilisé pour représenter des clés. Les enregistrements peuvent être récupérés depuis des objets {{domxref("IDBObjectStore")}} et {{domxref("IDBIndex")}} grâce à des clés ou à des intervalles de clé. Il est possible de préciser les bornes inférieure et supérieure de l'intervalle. Si les clés sont des chaînes de caractères, on pourrait ainsi parcourir l'ensemble des valeurs pour l'intervalle A–Z.

- -

Un intervalle de clé peut être une seule valeur ou un intervalle avec des bornes inférieure et supérieure. Si l'intervalle possède ces deux bornes, il est dit borné. S'il n'a aucune borne, il est non-borné. Un intervalle de clé borné peut être ouvert (les bornes sont exclues) ou fermé (les bornes sont inclues). Pour récupérer les différentes clés d'un intervalle donné, on peut utiliser les fragments de code suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IntervalleCode
Toutes les clés ≤ x{{domxref("IDBKeyRange.upperBound")}}(x)
Toutes les clés < x{{domxref("IDBKeyRange.upperBound")}}(x, true)
Toutes les clés ≥ y{{domxref("IDBKeyRange.lowerBound")}}(y)
Toutes les clés > y{{domxref("IDBKeyRange.lowerBound")}}(y, true)
Toutes les clés ≥ x && ≤ y{{domxref("IDBKeyRange.bound")}}(x, y)
Toutes les clés > x &&< y{{domxref("IDBKeyRange.bound")}}(x, y, true, true)
Toutes les clés > x && ≤ y{{domxref("IDBKeyRange.bound")}}(x, y, true, false)
Toutes les clés ≥ x &&< y{{domxref("IDBKeyRange.bound")}}(x, y, false, true)
La clé = z{{domxref("IDBKeyRange.only")}}(z)
- -

Une clé est contenue dans un intervalle de clé lorsque les conditions suivantes sont réunies :

- - - -

{{AvailableInWorkers}}

- -

Propriétés

- -
-
{{domxref("IDBKeyRange.lower")}} {{readonlyInline}}
-
Cette propriété fournit la borne inférieure de l'intervalle de clé.
-
{{domxref("IDBKeyRange.upper")}} {{readonlyInline}}
-
Cette propriété fournit la borne supérieure de l'intervalle de clé.
-
{{domxref("IDBKeyRange.lowerOpen")}} {{readonlyInline}}
-
Cette méthode renvoie false si la borne inférieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à gauche).
-
{{domxref("IDBKeyRange.upperOpen")}} {{readonlyInline}}
-
Cette méthode renvoie false si la borne supérieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à droite).
-
- -

Méthodes

- -

Méthodes statiques

- -
-
{{domxref("IDBKeyRange.bound()")}}
-
Cette méthode permet de créer un nouvel intervalle de clé avec une borne inférieure et une borne supérieure.
-
{{domxref("IDBKeyRange.only()")}}
-
Cette méthode crée un nouvel intervalle de clé qui ne contient qu'une valeur.
-
{{domxref("IDBKeyRange.lowerBound()")}}
-
Cette méthode crée un nouvel intervalle de clé avec une borne inférieure.
-
{{domxref("IDBKeyRange.upperBound()")}}
-
Cette méthode crée un nouvel intervalle de clé avec une borne supérieure.
-
- -

Méthodes des instances

- - - -
-
{{domxref("IDBKeyRange.includes()")}}
-
Cette méthode renvoie un booléen qui indique si la clé passée en argument est contenue dans l'intervalle de clé.
-
- - - -
-
- -

Exemples

- -

Dans l'exemple qui suit, on montre comment utiliser un intervalle de clé. Ici, on déclare un objet keyRangeValue qui représente un intervalle pour les valeurs entre "A" et "F". On ouvre une transaction grâce à {{domxref("IDBTransaction")}}, on ouvre également un magasin d'objets puis un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique que keyRangeValue est l'intervalle de clé à considérer. Cela signifie que le curseur récupèrera uniquement les enregistrements pour lesquels les clés sont contenues dans cet intervalle. Cet intervalle est fermé, il inclut les valeur "A" and "F" (on n'a pas indiqué que ces bornes étaient ouvertes). Si on avait utilisé IDBKeyRange.bound("A", "F", true, true);, l'intervalle serait ouvert et ne contiendrait pas "A" ou "F" mais uniquement les valeurs intermédiaires.

- -
function displayData() {
-  var keyRangeValue = IDBKeyRange.bound("A", "F");
-
-  var transaction = db.transaction(['fThings'], 'readonly');
-  var objectStore = transaction.objectStore('fThings');
-
-  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
-    var cursor = event.target.result;
-      if(cursor) {
-        var listItem = document.createElement('li');
-        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
-        list.appendChild(listItem);
-
-        cursor.continue();
-      } else {
-        console.log('Les éléments ont été affichés.');
-      }
-    };
-  };
- -
-

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#idl-def-IDBKeyRange', 'IDBKeyRange')}}{{Spec2('IndexedDB')}}Définition initiale.
{{SpecName('IndexedDB 2', '#keyrange', 'IDBKeyRange')}}{{Spec2('IndexedDB')}}Ajout de includes().
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBKeyRange")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbkeyrange/index.md b/files/fr/web/api/idbkeyrange/index.md new file mode 100644 index 0000000000..9962a1488a --- /dev/null +++ b/files/fr/web/api/idbkeyrange/index.md @@ -0,0 +1,195 @@ +--- +title: IDBKeyRange +slug: Web/API/IDBKeyRange +tags: + - API + - Database + - IDBKeyRange + - IndexedDB + - Interface + - Reference + - Storage + - TopicStub +translation_of: Web/API/IDBKeyRange +--- +
{{APIRef("IndexedDB")}}
+ +

L'interface IDBKeyRange de l'API IndexedDB représente un intervalle continue sur un type de donnée utilisé pour représenter des clés. Les enregistrements peuvent être récupérés depuis des objets {{domxref("IDBObjectStore")}} et {{domxref("IDBIndex")}} grâce à des clés ou à des intervalles de clé. Il est possible de préciser les bornes inférieure et supérieure de l'intervalle. Si les clés sont des chaînes de caractères, on pourrait ainsi parcourir l'ensemble des valeurs pour l'intervalle A–Z.

+ +

Un intervalle de clé peut être une seule valeur ou un intervalle avec des bornes inférieure et supérieure. Si l'intervalle possède ces deux bornes, il est dit borné. S'il n'a aucune borne, il est non-borné. Un intervalle de clé borné peut être ouvert (les bornes sont exclues) ou fermé (les bornes sont inclues). Pour récupérer les différentes clés d'un intervalle donné, on peut utiliser les fragments de code suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IntervalleCode
Toutes les clés ≤ x{{domxref("IDBKeyRange.upperBound")}}(x)
Toutes les clés < x{{domxref("IDBKeyRange.upperBound")}}(x, true)
Toutes les clés ≥ y{{domxref("IDBKeyRange.lowerBound")}}(y)
Toutes les clés > y{{domxref("IDBKeyRange.lowerBound")}}(y, true)
Toutes les clés ≥ x && ≤ y{{domxref("IDBKeyRange.bound")}}(x, y)
Toutes les clés > x &&< y{{domxref("IDBKeyRange.bound")}}(x, y, true, true)
Toutes les clés > x && ≤ y{{domxref("IDBKeyRange.bound")}}(x, y, true, false)
Toutes les clés ≥ x &&< y{{domxref("IDBKeyRange.bound")}}(x, y, false, true)
La clé = z{{domxref("IDBKeyRange.only")}}(z)
+ +

Une clé est contenue dans un intervalle de clé lorsque les conditions suivantes sont réunies :

+ + + +

{{AvailableInWorkers}}

+ +

Propriétés

+ +
+
{{domxref("IDBKeyRange.lower")}} {{readonlyInline}}
+
Cette propriété fournit la borne inférieure de l'intervalle de clé.
+
{{domxref("IDBKeyRange.upper")}} {{readonlyInline}}
+
Cette propriété fournit la borne supérieure de l'intervalle de clé.
+
{{domxref("IDBKeyRange.lowerOpen")}} {{readonlyInline}}
+
Cette méthode renvoie false si la borne inférieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à gauche).
+
{{domxref("IDBKeyRange.upperOpen")}} {{readonlyInline}}
+
Cette méthode renvoie false si la borne supérieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à droite).
+
+ +

Méthodes

+ +

Méthodes statiques

+ +
+
{{domxref("IDBKeyRange.bound()")}}
+
Cette méthode permet de créer un nouvel intervalle de clé avec une borne inférieure et une borne supérieure.
+
{{domxref("IDBKeyRange.only()")}}
+
Cette méthode crée un nouvel intervalle de clé qui ne contient qu'une valeur.
+
{{domxref("IDBKeyRange.lowerBound()")}}
+
Cette méthode crée un nouvel intervalle de clé avec une borne inférieure.
+
{{domxref("IDBKeyRange.upperBound()")}}
+
Cette méthode crée un nouvel intervalle de clé avec une borne supérieure.
+
+ +

Méthodes des instances

+ + + +
+
{{domxref("IDBKeyRange.includes()")}}
+
Cette méthode renvoie un booléen qui indique si la clé passée en argument est contenue dans l'intervalle de clé.
+
+ + + +
+
+ +

Exemples

+ +

Dans l'exemple qui suit, on montre comment utiliser un intervalle de clé. Ici, on déclare un objet keyRangeValue qui représente un intervalle pour les valeurs entre "A" et "F". On ouvre une transaction grâce à {{domxref("IDBTransaction")}}, on ouvre également un magasin d'objets puis un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique que keyRangeValue est l'intervalle de clé à considérer. Cela signifie que le curseur récupèrera uniquement les enregistrements pour lesquels les clés sont contenues dans cet intervalle. Cet intervalle est fermé, il inclut les valeur "A" and "F" (on n'a pas indiqué que ces bornes étaient ouvertes). Si on avait utilisé IDBKeyRange.bound("A", "F", true, true);, l'intervalle serait ouvert et ne contiendrait pas "A" ou "F" mais uniquement les valeurs intermédiaires.

+ +
function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("A", "F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };
+ +
+

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#idl-def-IDBKeyRange', 'IDBKeyRange')}}{{Spec2('IndexedDB')}}Définition initiale.
{{SpecName('IndexedDB 2', '#keyrange', 'IDBKeyRange')}}{{Spec2('IndexedDB')}}Ajout de includes().
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBKeyRange")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbkeyrange/lower/index.html b/files/fr/web/api/idbkeyrange/lower/index.html deleted file mode 100644 index 228da25525..0000000000 --- a/files/fr/web/api/idbkeyrange/lower/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: IDBKeyRange.lower -slug: Web/API/IDBKeyRange/lower -tags: - - API - - IDBKeyRange - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBKeyRange/lower ---- -
{{APIRef("IndexedDB")}}
- -

La propriété lower, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne inférieure de l'intervalle de clé.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
monIntervalle.lower;
- -

Valeur

- -

La borne inférieure de l'intervalle de clé (qui peut être d'un type quelconque).

- -

Exemples

- -

Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true); — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que keyRangeValue est l'intervalle de clé optionnel.

- -

Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété lower dans la console (ce qui doit donner "F").

- -
function displayData() {
-  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
-  console.log(keyRangeValue.lower);
-
-  var transaction = db.transaction(['fThings'], 'readonly');
-  var objectStore = transaction.objectStore('fThings');
-
-  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
-    var cursor = event.target.result;
-      if(cursor) {
-        var listItem = document.createElement('li');
-        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
-        list.appendChild(listItem);
-
-        cursor.continue();
-      } else {
-        console.log('Les éléments ont été affichés.');
-      }
-    };
-  };
- -
-

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBKeyRange.lower")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbkeyrange/lower/index.md b/files/fr/web/api/idbkeyrange/lower/index.md new file mode 100644 index 0000000000..228da25525 --- /dev/null +++ b/files/fr/web/api/idbkeyrange/lower/index.md @@ -0,0 +1,88 @@ +--- +title: IDBKeyRange.lower +slug: Web/API/IDBKeyRange/lower +tags: + - API + - IDBKeyRange + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBKeyRange/lower +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété lower, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne inférieure de l'intervalle de clé.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
monIntervalle.lower;
+ +

Valeur

+ +

La borne inférieure de l'intervalle de clé (qui peut être d'un type quelconque).

+ +

Exemples

+ +

Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true); — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que keyRangeValue est l'intervalle de clé optionnel.

+ +

Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété lower dans la console (ce qui doit donner "F").

+ +
function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.lower);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };
+ +
+

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBKeyRange.lower")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbkeyrange/lowerbound/index.html b/files/fr/web/api/idbkeyrange/lowerbound/index.html deleted file mode 100644 index 3175f20150..0000000000 --- a/files/fr/web/api/idbkeyrange/lowerbound/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: IDBKeyRange.lowerBound() -slug: Web/API/IDBKeyRange/lowerBound -tags: - - IDBKeyRange - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBKeyRange/lowerBound ---- -
{{APIRef("IndexedDB")}}
- -

La méthode lowerBound(), rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure.

- -

Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à gauche).

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
IDBKeyRange.lowerBound(borne);
-IDBKeyRange.lowerBound(borne, ouvert);
- -

Paramètres

- -
-
borne
-
La valeur de la borne inférieure pour l'intervalle.
-
ouvert {{optional_inline}}
-
Ce booléen indique si l'intervalle est ouvert à gauche (autrement dit, s'il vaut false la borne est inclue et s'il vaut true la borne n'est pas inclue dans l'intervalle).
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.

- -

Exceptions

- -

Cette méthode peut lever une exception {{domxref("DOMException")}} de type DataError lorsque la valeur passée en paramètre n'est pas une clé valide.

- -

Exemples

- -

Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne inférieure, on utilise keyRangeValue = IDBKeyRange.lowerBound("F", false); — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé keyRangeValue.

- -

Si on a avait utilisé IDBKeyRange.lowerBound("F", true);, "F" n'aurait pas fait partie de l'intervalle.

- -
function displayData() {
-  var keyRangeValue = IDBKeyRange.lowerBound("F");
-
-  var transaction = db.transaction(['fThings'], 'readonly');
-  var objectStore = transaction.objectStore('fThings');
-
-  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
-    var cursor = event.target.result;
-      if(cursor) {
-        var listItem = document.createElement('li');
-        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
-        list.appendChild(listItem);
-
-        cursor.continue();
-      } else {
-        console.log('Les éléments sont affichés.');
-      }
-    };
-  };
- -
-

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBKeyRange.lowerBound")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbkeyrange/lowerbound/index.md b/files/fr/web/api/idbkeyrange/lowerbound/index.md new file mode 100644 index 0000000000..3175f20150 --- /dev/null +++ b/files/fr/web/api/idbkeyrange/lowerbound/index.md @@ -0,0 +1,102 @@ +--- +title: IDBKeyRange.lowerBound() +slug: Web/API/IDBKeyRange/lowerBound +tags: + - IDBKeyRange + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBKeyRange/lowerBound +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode lowerBound(), rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure.

+ +

Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à gauche).

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
IDBKeyRange.lowerBound(borne);
+IDBKeyRange.lowerBound(borne, ouvert);
+ +

Paramètres

+ +
+
borne
+
La valeur de la borne inférieure pour l'intervalle.
+
ouvert {{optional_inline}}
+
Ce booléen indique si l'intervalle est ouvert à gauche (autrement dit, s'il vaut false la borne est inclue et s'il vaut true la borne n'est pas inclue dans l'intervalle).
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.

+ +

Exceptions

+ +

Cette méthode peut lever une exception {{domxref("DOMException")}} de type DataError lorsque la valeur passée en paramètre n'est pas une clé valide.

+ +

Exemples

+ +

Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne inférieure, on utilise keyRangeValue = IDBKeyRange.lowerBound("F", false); — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé keyRangeValue.

+ +

Si on a avait utilisé IDBKeyRange.lowerBound("F", true);, "F" n'aurait pas fait partie de l'intervalle.

+ +
function displayData() {
+  var keyRangeValue = IDBKeyRange.lowerBound("F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments sont affichés.');
+      }
+    };
+  };
+ +
+

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBKeyRange.lowerBound")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbkeyrange/loweropen/index.html b/files/fr/web/api/idbkeyrange/loweropen/index.html deleted file mode 100644 index e81e42a0d3..0000000000 --- a/files/fr/web/api/idbkeyrange/loweropen/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: IDBKeyRange.lowerOpen -slug: Web/API/IDBKeyRange/lowerOpen -tags: - - API - - IDBKeyRange - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBKeyRange/lowerOpen ---- -
{{APIRef("IndexedDB")}}
- -

La propriété lowerOpen, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen qui inidque si l'intervalle est ouvert pour la borne inférieure (autrement dit, le booléen est vrai lorsque la borne n'est pas incluse et est faux sinon).

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
myKeyRange.lowerOpen;
- -

Valeur

- -

Un booléen qui indique si l'intervalle est ouvert pour la borne inférieure (true si c'est le cas (la borne n'est pas incluse), false sinon).

- -

Exemples

- -

Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true); — c'est-à-dire un intervalle qui inclue tout ce qui se trouve entre "F" et "W" mais qui n'inclue pas ces bornes (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}}. La valeur keyRangeValue est utilisée comme intervalle de clé pour ce curseur.

- -

Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété lowerOpen dans la console. Ici, la valeur de la propriété est true car l'intervalle est ouvert pour la borne supérieure et la borne inférieure qui ne sont donc pas comprises dans l'intervalle.

- -
function displayData() {
-  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
-  console.log(keyRangeValue.lowerOpen);
-
-  var transaction = db.transaction(['fThings'], 'readonly');
-  var objectStore = transaction.objectStore('fThings');
-
-  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
-    var cursor = event.target.result;
-      if(cursor) {
-        var listItem = document.createElement('li');
-        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
-        list.appendChild(listItem);
-
-        cursor.continue();
-      } else {
-        console.log('Les éléments ont été affichés.');
-      }
-    };
-  };
- -
-

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBKeyRange.lowerOpen")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbkeyrange/loweropen/index.md b/files/fr/web/api/idbkeyrange/loweropen/index.md new file mode 100644 index 0000000000..e81e42a0d3 --- /dev/null +++ b/files/fr/web/api/idbkeyrange/loweropen/index.md @@ -0,0 +1,88 @@ +--- +title: IDBKeyRange.lowerOpen +slug: Web/API/IDBKeyRange/lowerOpen +tags: + - API + - IDBKeyRange + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBKeyRange/lowerOpen +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété lowerOpen, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen qui inidque si l'intervalle est ouvert pour la borne inférieure (autrement dit, le booléen est vrai lorsque la borne n'est pas incluse et est faux sinon).

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
myKeyRange.lowerOpen;
+ +

Valeur

+ +

Un booléen qui indique si l'intervalle est ouvert pour la borne inférieure (true si c'est le cas (la borne n'est pas incluse), false sinon).

+ +

Exemples

+ +

Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true); — c'est-à-dire un intervalle qui inclue tout ce qui se trouve entre "F" et "W" mais qui n'inclue pas ces bornes (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}}. La valeur keyRangeValue est utilisée comme intervalle de clé pour ce curseur.

+ +

Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété lowerOpen dans la console. Ici, la valeur de la propriété est true car l'intervalle est ouvert pour la borne supérieure et la borne inférieure qui ne sont donc pas comprises dans l'intervalle.

+ +
function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.lowerOpen);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };
+ +
+

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBKeyRange.lowerOpen")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbkeyrange/only/index.html b/files/fr/web/api/idbkeyrange/only/index.html deleted file mode 100644 index dc2ed37fac..0000000000 --- a/files/fr/web/api/idbkeyrange/only/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: IDBKeyRange.only() -slug: Web/API/IDBKeyRange/only -tags: - - API - - IDBKeyRange - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBKeyRange/only ---- -
{{APIRef("IndexedDB")}}
- -

La méthode only(), rattachée à l'interface {{domxref("IDBKeyRange")}}, permet de créer un nouvel intervalle de clé qui ne contient qu'une valeur.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
myKeyRange = IDBKeyRange.only(valeur);
- -

Paramètres

- -
-
valeur
-
La valeur dans l'intervalle de clé.
-
- -

Valeur de retour

- -

L'objet {{domxref("IDBKeyRange")}} correspondant à l'intervalle de clé qui vient d'être créé.

- -

Exceptions

- -

Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type DataError lorsque la valeur passée en argument n'est pas une clé valide.

- -

Exemples

- -

Dans l'exemple qui suit, on illustre comment utiliser un intervalle de clé qui ne contient qu'une seule clé. On déclare un intervalle qui ne contient que la valeur "A" avec keyRangeValue = IDBKeyRange.only("A"); Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis un magasin d'objets et un curseur grâce à la méthode {{domxref("IDBObjectStore.openCursor")}} pour laquelle on passe keyRangeValue en argument. Cela signifie que le curseur permettra uniquement de récupérer les enregistrements dont la clé vaut "A".

- -
function displayData() {
-  var keyRangeValue = IDBKeyRange.only("A");
-
-  var transaction = db.transaction(['fThings'], 'readonly');
-  var objectStore = transaction.objectStore('fThings');
-
-  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
-    var cursor = event.target.result;
-      if(cursor) {
-        var listItem = document.createElement('li');
-        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
-        list.appendChild(listItem);
-
-        cursor.continue();
-      } else {
-        console.log('Les éléments sont affichés.');
-      }
-    };
-  };
- -
-

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBKeyRange.only")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbkeyrange/only/index.md b/files/fr/web/api/idbkeyrange/only/index.md new file mode 100644 index 0000000000..dc2ed37fac --- /dev/null +++ b/files/fr/web/api/idbkeyrange/only/index.md @@ -0,0 +1,96 @@ +--- +title: IDBKeyRange.only() +slug: Web/API/IDBKeyRange/only +tags: + - API + - IDBKeyRange + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBKeyRange/only +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode only(), rattachée à l'interface {{domxref("IDBKeyRange")}}, permet de créer un nouvel intervalle de clé qui ne contient qu'une valeur.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
myKeyRange = IDBKeyRange.only(valeur);
+ +

Paramètres

+ +
+
valeur
+
La valeur dans l'intervalle de clé.
+
+ +

Valeur de retour

+ +

L'objet {{domxref("IDBKeyRange")}} correspondant à l'intervalle de clé qui vient d'être créé.

+ +

Exceptions

+ +

Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type DataError lorsque la valeur passée en argument n'est pas une clé valide.

+ +

Exemples

+ +

Dans l'exemple qui suit, on illustre comment utiliser un intervalle de clé qui ne contient qu'une seule clé. On déclare un intervalle qui ne contient que la valeur "A" avec keyRangeValue = IDBKeyRange.only("A"); Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis un magasin d'objets et un curseur grâce à la méthode {{domxref("IDBObjectStore.openCursor")}} pour laquelle on passe keyRangeValue en argument. Cela signifie que le curseur permettra uniquement de récupérer les enregistrements dont la clé vaut "A".

+ +
function displayData() {
+  var keyRangeValue = IDBKeyRange.only("A");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments sont affichés.');
+      }
+    };
+  };
+ +
+

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBKeyRange.only")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbkeyrange/upper/index.html b/files/fr/web/api/idbkeyrange/upper/index.html deleted file mode 100644 index 74b9545f8e..0000000000 --- a/files/fr/web/api/idbkeyrange/upper/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: IDBKeyRange.upper -slug: Web/API/IDBKeyRange/upper -tags: - - API - - IDBKeyRange - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBKeyRange/upper ---- -
{{APIRef("IndexedDB")}}
- -

La propriété upper, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne supérieure de l'intervalle de clé.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
monIntervalle.upper;
- -

Valeur

- -

La borne supérieure de l'intervalle de clé (qui peut être d'un type quelconque).

- -

Exemples

- -

Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true); — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que keyRangeValue est l'intervalle de clé optionnel.

- -

Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété upper dans la console (ce qui doit donner "W").

- -
function displayData() {
-  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
-  console.log(keyRangeValue.upper);
-
-  var transaction = db.transaction(['fThings'], 'readonly');
-  var objectStore = transaction.objectStore('fThings');
-
-  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
-    var cursor = event.target.result;
-      if(cursor) {
-        var listItem = document.createElement('li');
-        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
-        list.appendChild(listItem);
-
-        cursor.continue();
-      } else {
-        console.log('Les éléments ont été affichés.');
-      }
-    };
-  };
- -
-

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBKeyRange.upper")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbkeyrange/upper/index.md b/files/fr/web/api/idbkeyrange/upper/index.md new file mode 100644 index 0000000000..74b9545f8e --- /dev/null +++ b/files/fr/web/api/idbkeyrange/upper/index.md @@ -0,0 +1,88 @@ +--- +title: IDBKeyRange.upper +slug: Web/API/IDBKeyRange/upper +tags: + - API + - IDBKeyRange + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBKeyRange/upper +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété upper, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne supérieure de l'intervalle de clé.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
monIntervalle.upper;
+ +

Valeur

+ +

La borne supérieure de l'intervalle de clé (qui peut être d'un type quelconque).

+ +

Exemples

+ +

Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true); — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que keyRangeValue est l'intervalle de clé optionnel.

+ +

Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété upper dans la console (ce qui doit donner "W").

+ +
function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.upper);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };
+ +
+

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBKeyRange.upper")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbkeyrange/upperbound/index.html b/files/fr/web/api/idbkeyrange/upperbound/index.html deleted file mode 100644 index 6adcc4fe8b..0000000000 --- a/files/fr/web/api/idbkeyrange/upperbound/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: IDBKeyRange.upperBound() -slug: Web/API/IDBKeyRange/upperBound -tags: - - API - - IDBKeyRange - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBKeyRange/upperBound ---- -
{{APIRef("IndexedDB")}}
- -

La méthode upperBound(), rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure.

- -

Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à droite).

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
IDBKeyRange.upperBound(borne);
-IDBKeyRange.upperBound(borne, ouvert);
- -

Paramètres

- -
-
borne
-
La valeur de la borne supérieure pour l'intervalle.
-
ouvert {{optional_inline}}
-
Ce booléen indique si l'intervalle est ouvert à droite (autrement dit, s'il vaut false la borne est inclue et s'il vaut true la borne n'est pas inclue dans l'intervalle).
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.

- -

Exceptions

- -

Cette méthode peut lever une exception {{domxref("DOMException")}} de type DataError lorsque la valeur passée en paramètre n'est pas une clé valide.

- -

Exemples

- -

Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne supérieure, on utilise keyRangeValue = IDBKeyRange.upperBound("F"); — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé keyRangeValue.

- -

Si on a avait utilisé IDBKeyRange.upperBound("F", true);, "F" n'aurait pas fait partie de l'intervalle.

- -
function displayData() {
-  var keyRangeValue = IDBKeyRange.upperBound("F");
-
-  var transaction = db.transaction(['fThings'], 'readonly');
-  var objectStore = transaction.objectStore('fThings');
-
-  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
-    var cursor = event.target.result;
-      if(cursor) {
-        var listItem = document.createElement('li');
-        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
-        list.appendChild(listItem);
-
-        cursor.continue();
-      } else {
-        console.log('Les éléments sont affichés.');
-      }
-    };
-  };
- -
-

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBKeyRange.upperBound")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbkeyrange/upperbound/index.md b/files/fr/web/api/idbkeyrange/upperbound/index.md new file mode 100644 index 0000000000..6adcc4fe8b --- /dev/null +++ b/files/fr/web/api/idbkeyrange/upperbound/index.md @@ -0,0 +1,103 @@ +--- +title: IDBKeyRange.upperBound() +slug: Web/API/IDBKeyRange/upperBound +tags: + - API + - IDBKeyRange + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBKeyRange/upperBound +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode upperBound(), rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure.

+ +

Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à droite).

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
IDBKeyRange.upperBound(borne);
+IDBKeyRange.upperBound(borne, ouvert);
+ +

Paramètres

+ +
+
borne
+
La valeur de la borne supérieure pour l'intervalle.
+
ouvert {{optional_inline}}
+
Ce booléen indique si l'intervalle est ouvert à droite (autrement dit, s'il vaut false la borne est inclue et s'il vaut true la borne n'est pas inclue dans l'intervalle).
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.

+ +

Exceptions

+ +

Cette méthode peut lever une exception {{domxref("DOMException")}} de type DataError lorsque la valeur passée en paramètre n'est pas une clé valide.

+ +

Exemples

+ +

Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne supérieure, on utilise keyRangeValue = IDBKeyRange.upperBound("F"); — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé keyRangeValue.

+ +

Si on a avait utilisé IDBKeyRange.upperBound("F", true);, "F" n'aurait pas fait partie de l'intervalle.

+ +
function displayData() {
+  var keyRangeValue = IDBKeyRange.upperBound("F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments sont affichés.');
+      }
+    };
+  };
+ +
+

Note : Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter le dépôt GitHub IDBKeyRange-example (ainsi que la démonstration associée).

+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBKeyRange.upperBound")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbkeyrange/upperopen/index.html b/files/fr/web/api/idbkeyrange/upperopen/index.html deleted file mode 100644 index be0068210d..0000000000 --- a/files/fr/web/api/idbkeyrange/upperopen/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: IDBKeyRange.upperOpen -slug: Web/API/IDBKeyRange/upperOpen -translation_of: Web/API/IDBKeyRange/upperOpen ---- -

{{ APIRef("IndexedDB") }}

- -

La propriété upperOpen de l'interface {{domxref("IDBKeyRange")}} renvoie un booléen indiquant si la valeur de la limite supérieure est incluse dans l'{{domxref("IDBKeyRange","intervalle de clé")}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
myKeyRange.upperOpen;
- -

Value

- -
-
true
-
La valeur de la limite supérieure n'est pas incluse dans l'intervalle.
-
false
-
La valeur de la limite supérieure est incluse dans l'intervalle.
-
- -

Exemple

- -

Dans l'exemple suivant, on récupère l'{{domxref("IDBKeyRange","intervalle de clé")}} entre "F" et "W". Puis on ouvre une {{domxref("IDBTransaction","transaction")}} sur la connexion pour avoir l’{{domxref("IDBObjectStore","accès")}} au magasin d'objets 'fThings'. On met en place un {{domxref("IDBCursor","curseur")}} sur l'intervalle pour afficher dans une liste les valeurs des propriétés fThing et fRating des objets trouvés.

- -

La propriété upperOpen sert ici à afficher sur la console le booléen indiquant si la valeur de la limite supérieure est comprise dans l'intervalle.

- -
function displayData() {
-  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
-  console.log(keyRangeValue.upperOpen);
-
-  var transaction = db.transaction(['fThings'], 'readonly');
-  var objectStore = transaction.objectStore('fThings');
-
-  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
-    var cursor = event.target.result;
-      if(cursor) {
-        var listItem = document.createElement('li');
-        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
-        list.appendChild(listItem);
-
-        cursor.continue();
-      } else {
-        console.log('Entries all displayed.');
-      }
-    };
-  };
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.IDBKeyRange.upperOpen")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbkeyrange/upperopen/index.md b/files/fr/web/api/idbkeyrange/upperopen/index.md new file mode 100644 index 0000000000..be0068210d --- /dev/null +++ b/files/fr/web/api/idbkeyrange/upperopen/index.md @@ -0,0 +1,83 @@ +--- +title: IDBKeyRange.upperOpen +slug: Web/API/IDBKeyRange/upperOpen +translation_of: Web/API/IDBKeyRange/upperOpen +--- +

{{ APIRef("IndexedDB") }}

+ +

La propriété upperOpen de l'interface {{domxref("IDBKeyRange")}} renvoie un booléen indiquant si la valeur de la limite supérieure est incluse dans l'{{domxref("IDBKeyRange","intervalle de clé")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
myKeyRange.upperOpen;
+ +

Value

+ +
+
true
+
La valeur de la limite supérieure n'est pas incluse dans l'intervalle.
+
false
+
La valeur de la limite supérieure est incluse dans l'intervalle.
+
+ +

Exemple

+ +

Dans l'exemple suivant, on récupère l'{{domxref("IDBKeyRange","intervalle de clé")}} entre "F" et "W". Puis on ouvre une {{domxref("IDBTransaction","transaction")}} sur la connexion pour avoir l’{{domxref("IDBObjectStore","accès")}} au magasin d'objets 'fThings'. On met en place un {{domxref("IDBCursor","curseur")}} sur l'intervalle pour afficher dans une liste les valeurs des propriétés fThing et fRating des objets trouvés.

+ +

La propriété upperOpen sert ici à afficher sur la console le booléen indiquant si la valeur de la limite supérieure est comprise dans l'intervalle.

+ +
function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.upperOpen);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Entries all displayed.');
+      }
+    };
+  };
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.IDBKeyRange.upperOpen")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/add/index.html b/files/fr/web/api/idbobjectstore/add/index.html deleted file mode 100644 index 8aadd297b3..0000000000 --- a/files/fr/web/api/idbobjectstore/add/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: IDBObjectStore.add() -slug: Web/API/IDBObjectStore/add -translation_of: Web/API/IDBObjectStore/add ---- -
{{APIRef("IndexedDB")}}
- -

La méthode add(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, crée un clone structurel de la valeur et stocke la valeur clonée dans le magasin d'objet. Cette méthode permet d'ajouter de nouveaux enregistrements dans un magasin d'objet.

- -

Afin de déterminer si l'opération add s'est effectuée correctement, on pourra écouter l'évènement complete de la transaction et l'évènement success de la requête IDBObjectStore.add car la transaction peut échouer après le déclenchement de l'évènement success. Autremnt dit, l'évènement success est uniquement déclenché au moment où la transaction a été mise dans la file.

- -

La méthode add ne permet que d'insérer des objets. Si un enregistrement existe déjà dans le magasin d'objet pour la clé fournie en argument, un évènement ConstrainError sera déclenché via l'objet {{domxref("IDBRequest")}}. Si on souhaite mettre à jour des enregistrements existants, on utilisera plutôt la méthode {{domxref("IDBObjectStore.put")}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var request = objectStore.add(valeur, clé);
- -

Paramètres

- -
-
valeur
-
La valeur à ajouter au magasin.
-
clé
-
La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si elle n'est pas indiquée, la valeur par défaut sera null.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} qui émettra les différents évènements relatifs à l'opération.

- -

Exceptions

- -

Cette méthode peut lever une exception {{domxref("DOMException")}} ayant l'un des types suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
ReadOnlyErrorLa transaction associée à cette opération est en lecture seule.
TransactionInactiveErrorLa transaction pour cet objet  {{domxref("IDBObjectStore")}} est inactive.
DataError -

Un des conditions suivantes est vérifiée :

- -
    -
  • Le magasin d'objet utilise des clés en ligne ou possède un générateur de clés et une clé a été fournie dans la fonction.
    • -
  • Le magasin d'objet utilise des clés hors lignes et et n'a pas de générateur de clés et aucune clé n'a été fournie dans la fonction.
    • -
  • Le magasin d'objet utilise des clés en ligne mais ne possède pas de générateur de clés et le chemin de clé utilisé par le magasin ne pointe pas vers une clé valide.
    • -
  • La clé a été fournie à la fonction mais ce paramètre n'est pas une clé valide.
    • -
-
InvalidStateErrorL'objet {{domxref("IDBObjectStore")}} a été supprimé ou déplacé.
DataCloneErrorLa donnée qui devait être enregistrée n'a pas pu être clonée par l'algorithme de clonage interne.
- -

Exemples

- -

Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture vers la base de données et on ajoute des données au magasin d'objet grâce à la méthode add(). On notera également les fonctions rattachées à la transaction qui sont utilisées comme gestionnaires d'évènement et qui permettent de savoir si la transaction a réussi ou échoué.

- -
// On ouvre la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Database initialisée.</li>';
-
-  // On enregistre le résultat dans la variable db
-  // afin de l'utiliser par la suite
-  var db = DBOpenRequest.result;
-
-  // On utilise la fonction addData() afin d'ajouter
-  // des données dans la base de données
-  addData();
-};
-
-function addData() {
-  // On crée un nouvel objet qu'on insèrera ensuite
-  // dans la base de données
-  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture
-  // afin d'ajouter les données
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // On indique si la transaction s'est déroulées
-  // sans problème
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modification effectuée.</li>';
-  };
-
-
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>Ouverture de la transaction impossible : les objets dupliqués ne sont pas autorisés.</li>';
-  };
-
-  // On crée un magasin d'objets pour la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // On ajoute l'objet newItem dans le magasin d'objets
-  var objectStoreRequest = objectStore.add(newItem[0]);
-
-  objectStoreRequest.onsuccess = function(event) {
-    // On indique la réussite de l'insertion
-    note.innerHTML += '<li>Nouvel objet ajouté dans la base de données.</li>';
-  };
-};
- -
-

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.add")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/add/index.md b/files/fr/web/api/idbobjectstore/add/index.md new file mode 100644 index 0000000000..8aadd297b3 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/add/index.md @@ -0,0 +1,163 @@ +--- +title: IDBObjectStore.add() +slug: Web/API/IDBObjectStore/add +translation_of: Web/API/IDBObjectStore/add +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode add(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, crée un clone structurel de la valeur et stocke la valeur clonée dans le magasin d'objet. Cette méthode permet d'ajouter de nouveaux enregistrements dans un magasin d'objet.

+ +

Afin de déterminer si l'opération add s'est effectuée correctement, on pourra écouter l'évènement complete de la transaction et l'évènement success de la requête IDBObjectStore.add car la transaction peut échouer après le déclenchement de l'évènement success. Autremnt dit, l'évènement success est uniquement déclenché au moment où la transaction a été mise dans la file.

+ +

La méthode add ne permet que d'insérer des objets. Si un enregistrement existe déjà dans le magasin d'objet pour la clé fournie en argument, un évènement ConstrainError sera déclenché via l'objet {{domxref("IDBRequest")}}. Si on souhaite mettre à jour des enregistrements existants, on utilisera plutôt la méthode {{domxref("IDBObjectStore.put")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var request = objectStore.add(valeur, clé);
+ +

Paramètres

+ +
+
valeur
+
La valeur à ajouter au magasin.
+
clé
+
La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si elle n'est pas indiquée, la valeur par défaut sera null.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} qui émettra les différents évènements relatifs à l'opération.

+ +

Exceptions

+ +

Cette méthode peut lever une exception {{domxref("DOMException")}} ayant l'un des types suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
ReadOnlyErrorLa transaction associée à cette opération est en lecture seule.
TransactionInactiveErrorLa transaction pour cet objet  {{domxref("IDBObjectStore")}} est inactive.
DataError +

Un des conditions suivantes est vérifiée :

+ +
    +
  • Le magasin d'objet utilise des clés en ligne ou possède un générateur de clés et une clé a été fournie dans la fonction.
    • +
  • Le magasin d'objet utilise des clés hors lignes et et n'a pas de générateur de clés et aucune clé n'a été fournie dans la fonction.
    • +
  • Le magasin d'objet utilise des clés en ligne mais ne possède pas de générateur de clés et le chemin de clé utilisé par le magasin ne pointe pas vers une clé valide.
    • +
  • La clé a été fournie à la fonction mais ce paramètre n'est pas une clé valide.
    • +
+
InvalidStateErrorL'objet {{domxref("IDBObjectStore")}} a été supprimé ou déplacé.
DataCloneErrorLa donnée qui devait être enregistrée n'a pas pu être clonée par l'algorithme de clonage interne.
+ +

Exemples

+ +

Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture vers la base de données et on ajoute des données au magasin d'objet grâce à la méthode add(). On notera également les fonctions rattachées à la transaction qui sont utilisées comme gestionnaires d'évènement et qui permettent de savoir si la transaction a réussi ou échoué.

+ +
// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Database initialisée.</li>';
+
+  // On enregistre le résultat dans la variable db
+  // afin de l'utiliser par la suite
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter
+  // des données dans la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet qu'on insèrera ensuite
+  // dans la base de données
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // afin d'ajouter les données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique si la transaction s'est déroulées
+  // sans problème
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modification effectuée.</li>';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>Ouverture de la transaction impossible : les objets dupliqués ne sont pas autorisés.</li>';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute l'objet newItem dans le magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique la réussite de l'insertion
+    note.innerHTML += '<li>Nouvel objet ajouté dans la base de données.</li>';
+  };
+};
+ +
+

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.add")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/autoincrement/index.html b/files/fr/web/api/idbobjectstore/autoincrement/index.html deleted file mode 100644 index 58aebe2096..0000000000 --- a/files/fr/web/api/idbobjectstore/autoincrement/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: IDBObjectStore.autoIncrement -slug: Web/API/IDBObjectStore/autoIncrement -translation_of: Web/API/IDBObjectStore/autoIncrement ---- -

{{ APIRef("IndexedDB") }}

- -

La propriété autoIncrement de l'interface {{domxref("IDBObjectStore")}} renvoie la position du drapeau d’incrémentation automatique du magasin d'objet {{domxref("IDBObjectStore","relié")}}.

- -
-

Note : Chaque magasin d'objets à son conteur d’incrémentation automatique.

-
- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var myAutoIncrement = objectStore.autoIncrement;
- -

Valeur

- -

Un {{domxref("Boolean","booléen")}} .

- -
-
true
-
Le magasin d'objet relié s’incrémente automatiquement.
-
false
-
Le magasin d'objet relié ne s’incrémente pas automatiquement.
-
- -

Exemple

- -

Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet "toDoList" dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.

- -

La propriété autoIncrement de l'accès au magasin d'objet sert à affiché la position du drapeau d’incrémentation automatique de ce magasin d'objet sur la console.

- -
//Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-	note.innerHTML += 'Connexion établie.';
-
-	//Affecte la connexion à la variable db.
-	db = DBOpenRequest.result;
-
-	// Exécutez la fonction addData () pour ajouter l'enregistrement dans le magasin d'objet
-	addData();
-};
-function addData() {
-	// un nouvel objet prêt à être emmagasiné
-	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-	// ouvre une transaction de lecture / écriture  prête au traitement des données sur la connexion
-	var transaction = db.transaction(["toDoList"], "readwrite");
-
-	// en cas de succès de l'ouverture de la transaction
-	transaction.oncomplete = function(event) {
-		note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
-	};
-	// en  cas d'échec de l'ouverture de la transaction
-	transaction.onerror = function(event) {
-		note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>';
-	};
-
-	// ouvre l'accès au un magasin "toDoList" de la transaction
-	var objectStore = transaction.objectStore("toDoList");
-
-//->Affiche la position du drapeau d’incrémentation automatique
-    console.log(objectStore.autoIncrement);
-
-	// Ajoute un enregistrement
-	var objectStoreRequest = objectStore.add(newItem[0]);
-	objectStoreRequest.onsuccess = function(event) {
-		// signale l'ajout de l'enregistrement
-		note.innerHTML += '<li>Enregistrement ajouté.</li>';
-	};
- };
-
- -
-

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.IDBObjectStore.autoIncrement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/autoincrement/index.md b/files/fr/web/api/idbobjectstore/autoincrement/index.md new file mode 100644 index 0000000000..58aebe2096 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/autoincrement/index.md @@ -0,0 +1,115 @@ +--- +title: IDBObjectStore.autoIncrement +slug: Web/API/IDBObjectStore/autoIncrement +translation_of: Web/API/IDBObjectStore/autoIncrement +--- +

{{ APIRef("IndexedDB") }}

+ +

La propriété autoIncrement de l'interface {{domxref("IDBObjectStore")}} renvoie la position du drapeau d’incrémentation automatique du magasin d'objet {{domxref("IDBObjectStore","relié")}}.

+ +
+

Note : Chaque magasin d'objets à son conteur d’incrémentation automatique.

+
+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var myAutoIncrement = objectStore.autoIncrement;
+ +

Valeur

+ +

Un {{domxref("Boolean","booléen")}} .

+ +
+
true
+
Le magasin d'objet relié s’incrémente automatiquement.
+
false
+
Le magasin d'objet relié ne s’incrémente pas automatiquement.
+
+ +

Exemple

+ +

Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet "toDoList" dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.

+ +

La propriété autoIncrement de l'accès au magasin d'objet sert à affiché la position du drapeau d’incrémentation automatique de ce magasin d'objet sur la console.

+ +
//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += 'Connexion établie.';
+
+	//Affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+	// Exécutez la fonction addData () pour ajouter l'enregistrement dans le magasin d'objet
+	addData();
+};
+function addData() {
+	// un nouvel objet prêt à être emmagasiné
+	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+	// ouvre une transaction de lecture / écriture  prête au traitement des données sur la connexion
+	var transaction = db.transaction(["toDoList"], "readwrite");
+
+	// en cas de succès de l'ouverture de la transaction
+	transaction.oncomplete = function(event) {
+		note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
+	};
+	// en  cas d'échec de l'ouverture de la transaction
+	transaction.onerror = function(event) {
+		note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>';
+	};
+
+	// ouvre l'accès au un magasin "toDoList" de la transaction
+	var objectStore = transaction.objectStore("toDoList");
+
+//->Affiche la position du drapeau d’incrémentation automatique
+    console.log(objectStore.autoIncrement);
+
+	// Ajoute un enregistrement
+	var objectStoreRequest = objectStore.add(newItem[0]);
+	objectStoreRequest.onsuccess = function(event) {
+		// signale l'ajout de l'enregistrement
+		note.innerHTML += '<li>Enregistrement ajouté.</li>';
+	};
+ };
+
+ +
+

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.IDBObjectStore.autoIncrement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/clear/index.html b/files/fr/web/api/idbobjectstore/clear/index.html deleted file mode 100644 index 7a46763b74..0000000000 --- a/files/fr/web/api/idbobjectstore/clear/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: IDBObjectStore.clear() -slug: Web/API/IDBObjectStore/clear -translation_of: Web/API/IDBObjectStore/clear ---- -

{{ APIRef("IndexedDB") }}

- -

La méthode clear() de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet {{domxref("IDBObjectStore","relié")}}.

- -

Vider un magasin d'objet consiste à supprimer tous les enregistrements et les entrées des index de ce magasin d'objet.

- -
-

Note : La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.

-
- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var request = objectStore.clear();
- -

Renvoie

- -

Une {{domxref("IDBRequest","requête")}}.

- -

Exceptions

- -
-
ReadOnlyError
-
Cette {{domxref("DOMException","exception")}} est levé si la transaction associé à cette requête est en {{domxref("IDBTransaction.mode","mode")}} lecture seule.
-
TransactionInactiveError
-
Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive.
-
- -

Exemple

- -

Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet "toDoList" et le {{domxref("IDBObjectStore.clear","vider")}}

- -

La méthode clear() de l'accès au magasin d'objet fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet toDoList.

- -
//Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-	note.innerHTML += '<li>Connexion établie.</li>';
-
-	//Affecte la connexion à la variable db.
-	db = DBOpenRequest.result;
-
-  // Exécutez la fonction clearData () pour vider les données dans le magasin d'objet
-  clearData();
-};
-
-function clearData() {
-  // ouvre une transaction de lecture / écriture  prête pour le nettoyage
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // en cas de succès de l'ouverture de la transaction
-  transaction.oncomplete = function(event) {
-	note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
-  };
-
-  // en cas d'échec de l'ouverture de la transaction
-  transaction.onerror = function(event) {
-     note.innerHTML += '<li>Transaction en échec à cause de l\'erreur : ' + transaction.error + '</li>';
-  };
-
-  // ouvre l'accès au un magasin "toDoList" de la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // Vide le magasin d'objet
-  var objectStoreRequest = objectStore.clear();
-
-  objectStoreRequest.onsuccess = function(event) {
-  // rapporte le succès du nettoyage
-  note.innerHTML += '<li>Enregistrements effacées.</li>';
-  };
-};
-
- -
-

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.IDBObjectStore.clear")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/clear/index.md b/files/fr/web/api/idbobjectstore/clear/index.md new file mode 100644 index 0000000000..7a46763b74 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/clear/index.md @@ -0,0 +1,116 @@ +--- +title: IDBObjectStore.clear() +slug: Web/API/IDBObjectStore/clear +translation_of: Web/API/IDBObjectStore/clear +--- +

{{ APIRef("IndexedDB") }}

+ +

La méthode clear() de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet {{domxref("IDBObjectStore","relié")}}.

+ +

Vider un magasin d'objet consiste à supprimer tous les enregistrements et les entrées des index de ce magasin d'objet.

+ +
+

Note : La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.

+
+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var request = objectStore.clear();
+ +

Renvoie

+ +

Une {{domxref("IDBRequest","requête")}}.

+ +

Exceptions

+ +
+
ReadOnlyError
+
Cette {{domxref("DOMException","exception")}} est levé si la transaction associé à cette requête est en {{domxref("IDBTransaction.mode","mode")}} lecture seule.
+
TransactionInactiveError
+
Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive.
+
+ +

Exemple

+ +

Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet "toDoList" et le {{domxref("IDBObjectStore.clear","vider")}}

+ +

La méthode clear() de l'accès au magasin d'objet fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet toDoList.

+ +
//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += '<li>Connexion établie.</li>';
+
+	//Affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+  // Exécutez la fonction clearData () pour vider les données dans le magasin d'objet
+  clearData();
+};
+
+function clearData() {
+  // ouvre une transaction de lecture / écriture  prête pour le nettoyage
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // en cas de succès de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+	note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
+  };
+
+  // en cas d'échec de l'ouverture de la transaction
+  transaction.onerror = function(event) {
+     note.innerHTML += '<li>Transaction en échec à cause de l\'erreur : ' + transaction.error + '</li>';
+  };
+
+  // ouvre l'accès au un magasin "toDoList" de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Vide le magasin d'objet
+  var objectStoreRequest = objectStore.clear();
+
+  objectStoreRequest.onsuccess = function(event) {
+  // rapporte le succès du nettoyage
+  note.innerHTML += '<li>Enregistrements effacées.</li>';
+  };
+};
+
+ +
+

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.IDBObjectStore.clear")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/count/index.html b/files/fr/web/api/idbobjectstore/count/index.html deleted file mode 100644 index 929daad96b..0000000000 --- a/files/fr/web/api/idbobjectstore/count/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: IDBObjectStore.count() -slug: Web/API/IDBObjectStore/count -tags: - - API - - IDBObjectStore - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBObjectStore/count ---- -
{{APIRef("IndexedDB")}}
- -

La méthode count(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, renvoie le nombre d'enregistrements qui correspondent à la clé ou à l'intervalle de clé ({{domxref("IDBKeyRange")}}) passé en argument. Si aucun argument n'est fourni, la méthode renvoie le nombre total d'enregistrements contenus dans le magasin d'objets.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var requete = ObjectStore.count(optionalKeyRange);
- -

Paramètres

- -
-
optionalKeyRange
-
Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui indique le critère de comptage des enregistrements.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.

- -

Exceptions

- -

Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant un des types suivants :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
InvalidStateErrorL'objet {{domxref("IDBObjectStore")}} a été supprimé.
TransactionInactiveErrorLa transaction associée à l'objet {{domxref("IDBObjectStore")}} est inactive.
DataErrorLa clé ou l'intervalle de clé passé en argument est invalide.
- -

Exemples

- -

Dans ce fragment de code, on crée une transaction, on récupère un magasin d'objets puis on compte le nombre d'enregistrements contenus dans ce magasin grâce à la méthode count(). Lorsque l'évènement associé au succès de l'opération est déclenché, on inscrit le résultat dans la console.

- -
var transaction = db.transaction(['fThings'], 'readonly');
-var objectStore = transaction.objectStore('fThings');
-
-var countRequest = objectStore.count();
-countRequest.onsuccess = function() {
-  console.log(countRequest.result);
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.count")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/count/index.md b/files/fr/web/api/idbobjectstore/count/index.md new file mode 100644 index 0000000000..929daad96b --- /dev/null +++ b/files/fr/web/api/idbobjectstore/count/index.md @@ -0,0 +1,104 @@ +--- +title: IDBObjectStore.count() +slug: Web/API/IDBObjectStore/count +tags: + - API + - IDBObjectStore + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBObjectStore/count +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode count(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, renvoie le nombre d'enregistrements qui correspondent à la clé ou à l'intervalle de clé ({{domxref("IDBKeyRange")}}) passé en argument. Si aucun argument n'est fourni, la méthode renvoie le nombre total d'enregistrements contenus dans le magasin d'objets.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var requete = ObjectStore.count(optionalKeyRange);
+ +

Paramètres

+ +
+
optionalKeyRange
+
Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui indique le critère de comptage des enregistrements.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.

+ +

Exceptions

+ +

Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant un des types suivants :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
InvalidStateErrorL'objet {{domxref("IDBObjectStore")}} a été supprimé.
TransactionInactiveErrorLa transaction associée à l'objet {{domxref("IDBObjectStore")}} est inactive.
DataErrorLa clé ou l'intervalle de clé passé en argument est invalide.
+ +

Exemples

+ +

Dans ce fragment de code, on crée une transaction, on récupère un magasin d'objets puis on compte le nombre d'enregistrements contenus dans ce magasin grâce à la méthode count(). Lorsque l'évènement associé au succès de l'opération est déclenché, on inscrit le résultat dans la console.

+ +
var transaction = db.transaction(['fThings'], 'readonly');
+var objectStore = transaction.objectStore('fThings');
+
+var countRequest = objectStore.count();
+countRequest.onsuccess = function() {
+  console.log(countRequest.result);
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.count")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/createindex/index.html b/files/fr/web/api/idbobjectstore/createindex/index.html deleted file mode 100644 index 64b80ef538..0000000000 --- a/files/fr/web/api/idbobjectstore/createindex/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: IDBObjectStore.createIndex() -slug: Web/API/IDBObjectStore/createIndex -translation_of: Web/API/IDBObjectStore/createIndex ---- -

{{ APIRef("IndexedDB") }}

- -

La méthode createIndex() de l'interface {{domxref("IDBObjectStore")}} met en place sur le magasin d'objet {{domxref("IDBObjectStore","relié")}} un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.

- -
-

Note : Cette méthode ne peut être appelé que si la transaction de l'accès au magasin d'objet est en mode VersionChange.

-
- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
objectStore.createIndex(nomIndex, nomCle, parametresIndexOptionnel);
- -

Paramètres

- -
-
nomIndex
-
Le nom de l'index que l'on veut ajouter. Il est possible d'ajouter un index avec un nom vide.
-
nomCle
-
Le nom de clé qu'utilise l'index. Il est possible d'ajouter un index sans nom de clé.
-
parametresIndexOptionnel {{optional_inline}}
-
-

Un objet optionnel pouvant inclure une ou plusieurs des propriétés suivantes:

- - - - - - - - - - - - - - - - - - - - - - -
PropriétéDescription
uniqueSi true, l'index empêcheras la duplication d'une clé.
multiEntrySi true, l'index ajoutera une entrée pour chaque élément de tableau quand le nom de clé de clé est résolue. Si false, il ajoutera un seule entrée contenant le tableau.
locale -

Actuellement uniquement dans Firefox 43+ , cela vous permet de spécifier des paramètres de localisation pour l'index. Toutes les opérations de tri effectuées sur les données via des intervalle de clé obéirons aux règles locales de tri (voir trie dans localisation courante, en). Vous pouvez spécifier sa valeur de trois façons différentes:

- -
    -
  • string: une chaîne de caractère contenant le code de la localisation , par exemple 'fr' ou 'en-US'.
    • -
  • auto: La localisation par défaut est utilisé (peut être régler par l'utilisateur).
    • -
  • null or undefined: Les règles de tri par défaut de javaScript seront utilisées.
    • -
-
-
-
- -

Renvoie

- -

L'{{domxref("IDBIndex","accès")}} au nouvel index.

- -

Exceptions

- -
-
InvalidStateError
-
Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet n'est pas en {{domxref("IDBTransaction.mode","mode")}} versionchange.
-
TransactionInactiveError
-
Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive. - bug 1176165 ). -
-
ConstraintError
-
Cette {{domxref("DOMException","exeption")}} si un index avec le même nom (case sensible) existe déjà sur le magasin d'objet.
-
- -

Exemple

- -

Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","onupgradeneeded")}} être utilisé pour mètre à jour la structure de la base de donnée quand un numéro de version supérieur est chargé.

- -

Des méthode createIndex() sont utilisées pour mètre en place différents index sur le magasin d'objet toDoList.

- -
var db;
-
-// Requête d'ouverture de la base de données "toDoList"
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-// Gère  l'échec de l'ouverture de la base
-DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>';
-};
-
-// Gère le succès de l'ouverture de la base
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>La base de données est ouverte.</li>';
-
-  //La connexion est affcté à la variable db.
-  db = request.result;
-
-  // Exécute une fonction d'affichage displayData()
-  displayData();
-};
-
-// Ce gestionnaire d'événement nécessite  un nouveau numéro de version de la basse de données.
-// Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open .
-
-DBOpenRequest.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  db.onerror = function(event) {
-    note.innerHTML += '<li>Erreur de chargement de la base de données.</li>';
-  };
-
-  // L'Accès au magasin d'objet "toDoList" de la base de donnée
-  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
-
-  // Met en place les index du magasin d'objet
-  objectStore.createIndex("heures", "hours", { unique: false });
-  objectStore.createIndex("minutes", "minutes", { unique: false });
-  objectStore.createIndex("jour", "day", { unique: false });
-  objectStore.createIndex("mois", "month", { unique: false });
-  objectStore.createIndex("annee", "year", { unique: false });
-  objectStore.createIndex("notifiee", "notified", { unique: false });
-};
-
- -
-

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.IDBObjectStore.createIndex")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/createindex/index.md b/files/fr/web/api/idbobjectstore/createindex/index.md new file mode 100644 index 0000000000..64b80ef538 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/createindex/index.md @@ -0,0 +1,166 @@ +--- +title: IDBObjectStore.createIndex() +slug: Web/API/IDBObjectStore/createIndex +translation_of: Web/API/IDBObjectStore/createIndex +--- +

{{ APIRef("IndexedDB") }}

+ +

La méthode createIndex() de l'interface {{domxref("IDBObjectStore")}} met en place sur le magasin d'objet {{domxref("IDBObjectStore","relié")}} un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.

+ +
+

Note : Cette méthode ne peut être appelé que si la transaction de l'accès au magasin d'objet est en mode VersionChange.

+
+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
objectStore.createIndex(nomIndex, nomCle, parametresIndexOptionnel);
+ +

Paramètres

+ +
+
nomIndex
+
Le nom de l'index que l'on veut ajouter. Il est possible d'ajouter un index avec un nom vide.
+
nomCle
+
Le nom de clé qu'utilise l'index. Il est possible d'ajouter un index sans nom de clé.
+
parametresIndexOptionnel {{optional_inline}}
+
+

Un objet optionnel pouvant inclure une ou plusieurs des propriétés suivantes:

+ + + + + + + + + + + + + + + + + + + + + + +
PropriétéDescription
uniqueSi true, l'index empêcheras la duplication d'une clé.
multiEntrySi true, l'index ajoutera une entrée pour chaque élément de tableau quand le nom de clé de clé est résolue. Si false, il ajoutera un seule entrée contenant le tableau.
locale +

Actuellement uniquement dans Firefox 43+ , cela vous permet de spécifier des paramètres de localisation pour l'index. Toutes les opérations de tri effectuées sur les données via des intervalle de clé obéirons aux règles locales de tri (voir trie dans localisation courante, en). Vous pouvez spécifier sa valeur de trois façons différentes:

+ +
    +
  • string: une chaîne de caractère contenant le code de la localisation , par exemple 'fr' ou 'en-US'.
    • +
  • auto: La localisation par défaut est utilisé (peut être régler par l'utilisateur).
    • +
  • null or undefined: Les règles de tri par défaut de javaScript seront utilisées.
    • +
+
+
+
+ +

Renvoie

+ +

L'{{domxref("IDBIndex","accès")}} au nouvel index.

+ +

Exceptions

+ +
+
InvalidStateError
+
Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet n'est pas en {{domxref("IDBTransaction.mode","mode")}} versionchange.
+
TransactionInactiveError
+
Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive. + bug 1176165 ). +
+
ConstraintError
+
Cette {{domxref("DOMException","exeption")}} si un index avec le même nom (case sensible) existe déjà sur le magasin d'objet.
+
+ +

Exemple

+ +

Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","onupgradeneeded")}} être utilisé pour mètre à jour la structure de la base de donnée quand un numéro de version supérieur est chargé.

+ +

Des méthode createIndex() sont utilisées pour mètre en place différents index sur le magasin d'objet toDoList.

+ +
var db;
+
+// Requête d'ouverture de la base de données "toDoList"
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Gère  l'échec de l'ouverture de la base
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>';
+};
+
+// Gère le succès de l'ouverture de la base
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>La base de données est ouverte.</li>';
+
+  //La connexion est affcté à la variable db.
+  db = request.result;
+
+  // Exécute une fonction d'affichage displayData()
+  displayData();
+};
+
+// Ce gestionnaire d'événement nécessite  un nouveau numéro de version de la basse de données.
+// Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open .
+
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '<li>Erreur de chargement de la base de données.</li>';
+  };
+
+  // L'Accès au magasin d'objet "toDoList" de la base de donnée
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Met en place les index du magasin d'objet
+  objectStore.createIndex("heures", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("jour", "day", { unique: false });
+  objectStore.createIndex("mois", "month", { unique: false });
+  objectStore.createIndex("annee", "year", { unique: false });
+  objectStore.createIndex("notifiee", "notified", { unique: false });
+};
+
+ +
+

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.IDBObjectStore.createIndex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/delete/index.html b/files/fr/web/api/idbobjectstore/delete/index.html deleted file mode 100644 index 66ebf75c18..0000000000 --- a/files/fr/web/api/idbobjectstore/delete/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: IDBObjectStore.delete() -slug: Web/API/IDBObjectStore/delete -tags: - - API - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBObjectStore/delete ---- -
{{APIRef("IndexedDB")}}
- -

La méthode delete(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, supprime le ou les enregistrements concernés.

- -

Cette méthode prend une clé ou un objet {{domxref("IDBKeyRange")}} en argument ce qui permet de supprimer un ou plusieurs enregistrements. Si on souhaite supprimer l'ensemble des enregistrements d'un magasin de données, on utilisera plutôt la méthode {{domxref("IDBObjectStore.clear")}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var request = objectStore.delete(keyOrKeyRange);
- -

Paramètres

- -
-
keyOrKeyRange
-
La clé de l'enregistrement qu'on souhaite supprimer ou un objet {{domxref("IDBKeyRange")}} qui indique l'intervalle de clés à supprimer.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} qui recevra les évènements relatifs à cette opération. request.result vaut {{jsxref("undefined")}}.

- -

Exceptions

- -

Cette méthode peut lever une des exceptions suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
TransactionInactiveErrorLa transaction associée au curseur IDBCursor est inactive.
ReadOnlyErrorLa transaction est uniquement en lecture seule.
InvalidStateErrorLe curseur créé avec {{domxref("IDBindex.openKeyCursor")}}, est en train d'être parcouru ou a été parcouru après sa fin.
DataErrorLa clé ou l'intervalle de clés n'est pas valide.
- -

Exemples

- -

Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture et on supprime un enregistrement donné grâce à delete(). Pour un exemple complet, voir l'application Notifications To-do (démonstration).

- -
// On ouvre l'accès à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Initialisation de la base</li>';
-
-  // On enregistre le résultat de l'ouverture
-  // dans la variable db.
-  var db = DBOpenRequest.result;
-
-  // On utilise deleteData() pour supprimer
-  // un enregistrement
-  deleteData();
-};
-
-function deleteData() {
-  // On ouvre une transaction en lecture/écriture
-  // afin de supprimer la donnée
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // On indique le succès de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modification de la base terminée.</li>';
-  };
-
-
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>Transaction interrompue suite à l\'erreur : ' + transaction.error + '</li>';
-  };
-
-  // On crée un magasin d'objets pour la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // On supprime l'enregistrement du magasin
-  var objectStoreRequest = objectStore.delete("Walk dog");
-
-  objectStoreRequest.onsuccess = function(event) {
-    // On indique le succès de l'opération
-    note.innerHTML += '<li>Enregistremnt supprimé.</li>';
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.delete")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/delete/index.md b/files/fr/web/api/idbobjectstore/delete/index.md new file mode 100644 index 0000000000..66ebf75c18 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/delete/index.md @@ -0,0 +1,142 @@ +--- +title: IDBObjectStore.delete() +slug: Web/API/IDBObjectStore/delete +tags: + - API + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBObjectStore/delete +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode delete(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, supprime le ou les enregistrements concernés.

+ +

Cette méthode prend une clé ou un objet {{domxref("IDBKeyRange")}} en argument ce qui permet de supprimer un ou plusieurs enregistrements. Si on souhaite supprimer l'ensemble des enregistrements d'un magasin de données, on utilisera plutôt la méthode {{domxref("IDBObjectStore.clear")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var request = objectStore.delete(keyOrKeyRange);
+ +

Paramètres

+ +
+
keyOrKeyRange
+
La clé de l'enregistrement qu'on souhaite supprimer ou un objet {{domxref("IDBKeyRange")}} qui indique l'intervalle de clés à supprimer.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} qui recevra les évènements relatifs à cette opération. request.result vaut {{jsxref("undefined")}}.

+ +

Exceptions

+ +

Cette méthode peut lever une des exceptions suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
TransactionInactiveErrorLa transaction associée au curseur IDBCursor est inactive.
ReadOnlyErrorLa transaction est uniquement en lecture seule.
InvalidStateErrorLe curseur créé avec {{domxref("IDBindex.openKeyCursor")}}, est en train d'être parcouru ou a été parcouru après sa fin.
DataErrorLa clé ou l'intervalle de clés n'est pas valide.
+ +

Exemples

+ +

Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture et on supprime un enregistrement donné grâce à delete(). Pour un exemple complet, voir l'application Notifications To-do (démonstration).

+ +
// On ouvre l'accès à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Initialisation de la base</li>';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db.
+  var db = DBOpenRequest.result;
+
+  // On utilise deleteData() pour supprimer
+  // un enregistrement
+  deleteData();
+};
+
+function deleteData() {
+  // On ouvre une transaction en lecture/écriture
+  // afin de supprimer la donnée
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modification de la base terminée.</li>';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>Transaction interrompue suite à l\'erreur : ' + transaction.error + '</li>';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On supprime l'enregistrement du magasin
+  var objectStoreRequest = objectStore.delete("Walk dog");
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'opération
+    note.innerHTML += '<li>Enregistremnt supprimé.</li>';
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.delete")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/deleteindex/index.html b/files/fr/web/api/idbobjectstore/deleteindex/index.html deleted file mode 100644 index 6c01a8ab42..0000000000 --- a/files/fr/web/api/idbobjectstore/deleteindex/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: IDBObjectStore.deleteIndex() -slug: Web/API/IDBObjectStore/deleteIndex -translation_of: Web/API/IDBObjectStore/deleteIndex ---- -

{{ APIRef("IndexedDB") }}

- -

La méthode deleteIndex() de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}).

- -
-

Note : Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) versionchange. Les propriétés indexNames ({{domxref("IDBObjectStore.indexNames")}}) des accès au magasin d'object seront aussi mises à jour.

-
- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
objectStore.deleteIndex(nomIndex);
- -

Paramètre

- -
-
nomIndex
-
Le nom de l'index à supprimer.
-
- -

Valeur de retour

- -

Void.

- -

Exceptions

- -
-
InvalidStateError
-
Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend cet accès ({{domxref("IDBObjectStore")}}) au magasin d'objet n'est pas en mode ({{domxref("IDBTransaction.mode")}}) versionchange.
-
TransactionInactiveError
-

Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive. - bug 1176165).

-
-
NotFoundError
-
Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet.
-
- -

Exemple

- -

Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","onupgradeneeded")}} être utilisé pour mettre à jour la structure de la base de données quand un numéro de version supérieure est chargé.

- -

Des méthode deleteIndex() sont utilisées pour supprimer d'anciens index du magasin d'objet toDoList.

- -
var db;
-
-// Requête d'ouverture de la base de données "toDoList"
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-// Gère  l'échec de l'ouverture de la base
-DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>';
-};
-
-// Gère le succès de l'ouverture de la base
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>La base de données est ouverte.</li>';
-
-  //
-  db = request.result;
-
-  // Exécute une fonction d'affichage displayData()
-  displayData();
-};
-
-// Ce gestionnaire d'événement nécessite  un nouveau numéro de version de la base de données.
-// Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open .
-
-DBOpenRequest.onupgradeneeded = function(event) {
-
-  db.onerror = function(event) {
-    note.innerHTML += '<li>Erreur de chargement de la base de données.</li>';
-  };
-
-  // L'Accès au magasin d'objet "toDoList" de la base de données
-  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
-
-  // Met en place les index du magasin d'objet
-  objectStore.createIndex("heures", "hours", { unique: false });
-  objectStore.createIndex("minutes", "minutes", { unique: false });
-  objectStore.createIndex("jour", "day", { unique: false });
-  objectStore.createIndex("mois", "month", { unique: false });
-  objectStore.createIndex("annee", "year", { unique: false });
-  objectStore.createIndex("notifiee", "notified", { unique: false });
-
-  //supprime des index du magasin d'objet
-  objectStore.deleteIndex("secondes");
-  objectStore.deleteIndex("contact");
-};
-
- -
-

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.IDBObjectStore.deleteIndex")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/deleteindex/index.md b/files/fr/web/api/idbobjectstore/deleteindex/index.md new file mode 100644 index 0000000000..6c01a8ab42 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/deleteindex/index.md @@ -0,0 +1,132 @@ +--- +title: IDBObjectStore.deleteIndex() +slug: Web/API/IDBObjectStore/deleteIndex +translation_of: Web/API/IDBObjectStore/deleteIndex +--- +

{{ APIRef("IndexedDB") }}

+ +

La méthode deleteIndex() de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}).

+ +
+

Note : Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) versionchange. Les propriétés indexNames ({{domxref("IDBObjectStore.indexNames")}}) des accès au magasin d'object seront aussi mises à jour.

+
+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
objectStore.deleteIndex(nomIndex);
+ +

Paramètre

+ +
+
nomIndex
+
Le nom de l'index à supprimer.
+
+ +

Valeur de retour

+ +

Void.

+ +

Exceptions

+ +
+
InvalidStateError
+
Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend cet accès ({{domxref("IDBObjectStore")}}) au magasin d'objet n'est pas en mode ({{domxref("IDBTransaction.mode")}}) versionchange.
+
TransactionInactiveError
+

Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive. + bug 1176165).

+
+
NotFoundError
+
Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet.
+
+ +

Exemple

+ +

Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","onupgradeneeded")}} être utilisé pour mettre à jour la structure de la base de données quand un numéro de version supérieure est chargé.

+ +

Des méthode deleteIndex() sont utilisées pour supprimer d'anciens index du magasin d'objet toDoList.

+ +
var db;
+
+// Requête d'ouverture de la base de données "toDoList"
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Gère  l'échec de l'ouverture de la base
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>';
+};
+
+// Gère le succès de l'ouverture de la base
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>La base de données est ouverte.</li>';
+
+  //
+  db = request.result;
+
+  // Exécute une fonction d'affichage displayData()
+  displayData();
+};
+
+// Ce gestionnaire d'événement nécessite  un nouveau numéro de version de la base de données.
+// Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open .
+
+DBOpenRequest.onupgradeneeded = function(event) {
+
+  db.onerror = function(event) {
+    note.innerHTML += '<li>Erreur de chargement de la base de données.</li>';
+  };
+
+  // L'Accès au magasin d'objet "toDoList" de la base de données
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Met en place les index du magasin d'objet
+  objectStore.createIndex("heures", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("jour", "day", { unique: false });
+  objectStore.createIndex("mois", "month", { unique: false });
+  objectStore.createIndex("annee", "year", { unique: false });
+  objectStore.createIndex("notifiee", "notified", { unique: false });
+
+  //supprime des index du magasin d'objet
+  objectStore.deleteIndex("secondes");
+  objectStore.deleteIndex("contact");
+};
+
+ +
+

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.IDBObjectStore.deleteIndex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/get/index.html b/files/fr/web/api/idbobjectstore/get/index.html deleted file mode 100644 index 28850ce536..0000000000 --- a/files/fr/web/api/idbobjectstore/get/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: IDBObjectStore.get() -slug: Web/API/IDBObjectStore/get -translation_of: Web/API/IDBObjectStore/get ---- -

{{ APIRef("IndexedDB") }}

- -
-

La méthode get() de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet {{domxref("IDBObjectStore","relié")}}.

-
- -

{{Note("Si plusieurs enregistrements peuvent être sélectionnés la valeur du premier enregistrement rencontré (dont la valeur n'est pas undefined) sera renvoyée.")}} {{Note("On ne peut pas savoir s'il y a correspondance mais que l(es) enregistrement(s) a/ont des valeurs non définie (undefined) ou s'ils n'y as pas de correspondance par cette méthode. On peut utulisé la methode getAllKeys pour retrouvé la ou les clés du ou des enregistrements qui n'ont pas de valeur défini (valeur = undefined).")}}

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var request = objectStore.get(cle);
- -

Paramètre

- -
-
cle
-
la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'enregistrement dont on cherche la valeur.
-
- -

Renvoie

- -
-
Une {{domxref("IDBRequest","requête")}}
-
La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès,  un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé.
-
- -

Exceptions

- -
-
TransactionInactiveError
-
Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet est inactive.
-
DataError
-
Cette {{domxref("DOMException","exception")}} est levé si la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.
-
InvalidStateError
-
Cette {{domxref("DOMException","exception")}} est levé si le magasin d'objet à été supprimé.
-
- -

Exemple

- -

Dans le code suivant , on ouvre une {{domxref("IDBTransaction","transaction")}} sur la {{domxref("IDBDatabase","connexion")}} à la base de données, pour avoir l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet dans lequel on veut retrouver la valeur d'un enregistrement.

- -

La méthode get() sert à retrouver la valeur de l'enregistrement dont la clé est Walk dog dans magasin d'objets toDoList

- -
// ouvre la connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-// Gère l'ouverture de la connexion
-DBOpenRequest.onsuccess = function() {
-  note.innerHTML += '<li>Database initialised.</li>';
-
-  // enregistre la connexion dans la variable db
-  db = DBOpenRequest.result;
-
-  // exécute la fonction deleteData()
-  deleteData();
-};
-
-function deleteData() {
-  // ouvre un transaction en mode lecture/écriture pour effectuer la suppression
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // affiche le succès de la transaction.
-  transaction.oncomplete = function() {
-    note.innerHTML += '<li>Transaction effectuée: fin de la modification de la base de données.</li>';
-  };
-
-  // affiche la cause de l’échec de la transaction.
-  transaction.onerror = function() {
-    note.innerHTML += '<li>Échec de la transaction: ' + transaction.error + ' la base de données n\'a pas été modifié</li>';
-  };
-
-  // ouvre un accès au magasin d'objet toDoList
-  var objectStore = transaction.objectStore("toDoList");
-
-  // Retrouve l'enregistrement dont la clé est Walk dog
-   var objectStoreRequest = objectStore.get("Walk dog");
-
-  objectStoreRequest.onsuccess = function() {
-    //Affiche le succès de la requête
-    note.innerHTML += '<li>Enregistrement retrouvé.</li>';
-
-    //affecte la valeur de l'enregistrement à la variable
-    var myRecord = objectStoreRequest.result;
-  };
-};
-
- -
-

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.get")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/get/index.md b/files/fr/web/api/idbobjectstore/get/index.md new file mode 100644 index 0000000000..28850ce536 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/get/index.md @@ -0,0 +1,130 @@ +--- +title: IDBObjectStore.get() +slug: Web/API/IDBObjectStore/get +translation_of: Web/API/IDBObjectStore/get +--- +

{{ APIRef("IndexedDB") }}

+ +
+

La méthode get() de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet {{domxref("IDBObjectStore","relié")}}.

+
+ +

{{Note("Si plusieurs enregistrements peuvent être sélectionnés la valeur du premier enregistrement rencontré (dont la valeur n'est pas undefined) sera renvoyée.")}} {{Note("On ne peut pas savoir s'il y a correspondance mais que l(es) enregistrement(s) a/ont des valeurs non définie (undefined) ou s'ils n'y as pas de correspondance par cette méthode. On peut utulisé la methode getAllKeys pour retrouvé la ou les clés du ou des enregistrements qui n'ont pas de valeur défini (valeur = undefined).")}}

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var request = objectStore.get(cle);
+ +

Paramètre

+ +
+
cle
+
la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'enregistrement dont on cherche la valeur.
+
+ +

Renvoie

+ +
+
Une {{domxref("IDBRequest","requête")}}
+
La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès,  un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé.
+
+ +

Exceptions

+ +
+
TransactionInactiveError
+
Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet est inactive.
+
DataError
+
Cette {{domxref("DOMException","exception")}} est levé si la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.
+
InvalidStateError
+
Cette {{domxref("DOMException","exception")}} est levé si le magasin d'objet à été supprimé.
+
+ +

Exemple

+ +

Dans le code suivant , on ouvre une {{domxref("IDBTransaction","transaction")}} sur la {{domxref("IDBDatabase","connexion")}} à la base de données, pour avoir l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet dans lequel on veut retrouver la valeur d'un enregistrement.

+ +

La méthode get() sert à retrouver la valeur de l'enregistrement dont la clé est Walk dog dans magasin d'objets toDoList

+ +
// ouvre la connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Gère l'ouverture de la connexion
+DBOpenRequest.onsuccess = function() {
+  note.innerHTML += '<li>Database initialised.</li>';
+
+  // enregistre la connexion dans la variable db
+  db = DBOpenRequest.result;
+
+  // exécute la fonction deleteData()
+  deleteData();
+};
+
+function deleteData() {
+  // ouvre un transaction en mode lecture/écriture pour effectuer la suppression
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // affiche le succès de la transaction.
+  transaction.oncomplete = function() {
+    note.innerHTML += '<li>Transaction effectuée: fin de la modification de la base de données.</li>';
+  };
+
+  // affiche la cause de l’échec de la transaction.
+  transaction.onerror = function() {
+    note.innerHTML += '<li>Échec de la transaction: ' + transaction.error + ' la base de données n\'a pas été modifié</li>';
+  };
+
+  // ouvre un accès au magasin d'objet toDoList
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Retrouve l'enregistrement dont la clé est Walk dog
+   var objectStoreRequest = objectStore.get("Walk dog");
+
+  objectStoreRequest.onsuccess = function() {
+    //Affiche le succès de la requête
+    note.innerHTML += '<li>Enregistrement retrouvé.</li>';
+
+    //affecte la valeur de l'enregistrement à la variable
+    var myRecord = objectStoreRequest.result;
+  };
+};
+
+ +
+

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.get")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/getall/index.html b/files/fr/web/api/idbobjectstore/getall/index.html deleted file mode 100644 index 5906c43e57..0000000000 --- a/files/fr/web/api/idbobjectstore/getall/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: IDBObjectStore.getAll() -slug: Web/API/IDBObjectStore/getAll -translation_of: Web/API/IDBObjectStore/getAll ---- -

{{ APIRef("IndexedDB") }}

- -

La méthode getAll() de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet {{domxref("IDBObjectStore","relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.

- -

{{ Note("Cette méthode renverras un tableau vide si aucun enregistrement ne correspond. Si la valeur est undefined elle prendra une case du tableau.") }}

- -

Syntaxe

- -
var request = objectStore.getAll(query, count);
- -

Paramètres

- -
-
query {{optional_inline}}
-
Une clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} pour filtrer, seule les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les valeurs des enregistrements du magasin d'objet sont renvoyées.
-
count {{optional_inline}}
-
Le nombre de valeurs d'enregistrement maximum renvoyées. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.
-
- -

Renvoie

- -
-
Une {{domxref("IDBRequest","requête")}}
-
La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des valeurs des enregistrements en cas de succès.
-
- -

Exceptions

- -
-
TransactionInactiveError
-
Cette {{domxref("DOMException","exception")}} est levée si la {{domxref("IDBTransaction","transaction")}} est inactive.
-
DataError
-
Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.
-
InvalidStateError
-
Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé.
-
TypeError
-
Cette {{domxref("DOMException","exception")}} est levée si le compteur n'est pas un nombre positif.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.getAll")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/getall/index.md b/files/fr/web/api/idbobjectstore/getall/index.md new file mode 100644 index 0000000000..5906c43e57 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/getall/index.md @@ -0,0 +1,76 @@ +--- +title: IDBObjectStore.getAll() +slug: Web/API/IDBObjectStore/getAll +translation_of: Web/API/IDBObjectStore/getAll +--- +

{{ APIRef("IndexedDB") }}

+ +

La méthode getAll() de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet {{domxref("IDBObjectStore","relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.

+ +

{{ Note("Cette méthode renverras un tableau vide si aucun enregistrement ne correspond. Si la valeur est undefined elle prendra une case du tableau.") }}

+ +

Syntaxe

+ +
var request = objectStore.getAll(query, count);
+ +

Paramètres

+ +
+
query {{optional_inline}}
+
Une clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} pour filtrer, seule les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les valeurs des enregistrements du magasin d'objet sont renvoyées.
+
count {{optional_inline}}
+
Le nombre de valeurs d'enregistrement maximum renvoyées. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.
+
+ +

Renvoie

+ +
+
Une {{domxref("IDBRequest","requête")}}
+
La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des valeurs des enregistrements en cas de succès.
+
+ +

Exceptions

+ +
+
TransactionInactiveError
+
Cette {{domxref("DOMException","exception")}} est levée si la {{domxref("IDBTransaction","transaction")}} est inactive.
+
DataError
+
Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.
+
InvalidStateError
+
Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé.
+
TypeError
+
Cette {{domxref("DOMException","exception")}} est levée si le compteur n'est pas un nombre positif.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.getAll")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/getallkeys/index.html b/files/fr/web/api/idbobjectstore/getallkeys/index.html deleted file mode 100644 index 88032f4682..0000000000 --- a/files/fr/web/api/idbobjectstore/getallkeys/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: IDBObjectStore.getAllKeys() -slug: Web/API/IDBObjectStore/getAllKeys -tags: - - API - - IDBObjectStore - - IndexedDB - - Méthode - - Référence(2) -translation_of: Web/API/IDBObjectStore/getAllKeys ---- -
{{APIRef("IndexedDB")}}
- -

La méthode getAllKeys(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet  {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni).

- -

Si une valeur est trouvée, un clone structurelle sera créé et fourni comme résultat pour la requête.

- -

Cette méthode produira le même résultat pour :

- - - -

Pour différencier ces deux situations, on peut appeler la méthode {{domxref("IDBObjectStore.openCursor","openCursor()")}} avec la même clé. Cette méthode fournit un curseur si l'enregistrement existe et ne fournit aucun curseur s'il n'y a pas d'enregistrement.

- -

Syntaxe

- -
var request = objectStore.getAllKeys();
-var request = objectStore.getAllKeys(query);
-var request = objectStore.getAllKeys(query, count);
- -

Parameters

- -
-
query {{optional_inline}}
-
Une valeur qui est (ou se résoud) en un intervalle de clés ({{domxref("IDBKeyRange")}}).
-
count {{optional_inline}}
-
Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à  0 ou inférieure à 2^32-1, sinon une exception {{jsxref("TypeError")}} sera levée.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} pour lequel seront déclenchés les différents évènements relatifs à l'opération.

- -

Exceptions

- -

Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant le type suivant :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
TransactionInactiveErrorLe magasin d'objets ({{domxref("IDBObjectStore")}}) associé à la transaction est inactif.
DataError -

La clé ou l'intervalle de clé fourni contient une clé invalide ou est nul.

-
InvalidStateErrorLe magasin d'objets ({{domxref("IDBObjectStore")}}) a été supprimé ou retiré.
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB 2', '#dom-idbobjectstore-getallkeys', 'getAll()')}}{{Spec2('IndexedDB w')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.getAllKeys")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/getallkeys/index.md b/files/fr/web/api/idbobjectstore/getallkeys/index.md new file mode 100644 index 0000000000..88032f4682 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/getallkeys/index.md @@ -0,0 +1,106 @@ +--- +title: IDBObjectStore.getAllKeys() +slug: Web/API/IDBObjectStore/getAllKeys +tags: + - API + - IDBObjectStore + - IndexedDB + - Méthode + - Référence(2) +translation_of: Web/API/IDBObjectStore/getAllKeys +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode getAllKeys(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet  {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni).

+ +

Si une valeur est trouvée, un clone structurelle sera créé et fourni comme résultat pour la requête.

+ +

Cette méthode produira le même résultat pour :

+ + + +

Pour différencier ces deux situations, on peut appeler la méthode {{domxref("IDBObjectStore.openCursor","openCursor()")}} avec la même clé. Cette méthode fournit un curseur si l'enregistrement existe et ne fournit aucun curseur s'il n'y a pas d'enregistrement.

+ +

Syntaxe

+ +
var request = objectStore.getAllKeys();
+var request = objectStore.getAllKeys(query);
+var request = objectStore.getAllKeys(query, count);
+ +

Parameters

+ +
+
query {{optional_inline}}
+
Une valeur qui est (ou se résoud) en un intervalle de clés ({{domxref("IDBKeyRange")}}).
+
count {{optional_inline}}
+
Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à  0 ou inférieure à 2^32-1, sinon une exception {{jsxref("TypeError")}} sera levée.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} pour lequel seront déclenchés les différents évènements relatifs à l'opération.

+ +

Exceptions

+ +

Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant le type suivant :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
TransactionInactiveErrorLe magasin d'objets ({{domxref("IDBObjectStore")}}) associé à la transaction est inactif.
DataError +

La clé ou l'intervalle de clé fourni contient une clé invalide ou est nul.

+
InvalidStateErrorLe magasin d'objets ({{domxref("IDBObjectStore")}}) a été supprimé ou retiré.
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB 2', '#dom-idbobjectstore-getallkeys', 'getAll()')}}{{Spec2('IndexedDB w')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.getAllKeys")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/getkey/index.html b/files/fr/web/api/idbobjectstore/getkey/index.html deleted file mode 100644 index 84581d2293..0000000000 --- a/files/fr/web/api/idbobjectstore/getkey/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: IDBObjectStore.getKey() -slug: Web/API/IDBObjectStore/getKey -tags: - - IBDObjectStore - - IndexedDB - - Method - - Méthode - - Reference - - Storage - - Web API -translation_of: Web/API/IDBObjectStore/getKey ---- -

{{APIRef("IndexedDB")}}

- -

La méthode getKey() de l'interface {{domxref("IDBObjectStore")}} retourne un objet {{domxref("IDBRequest")}}, et, dans un thread séparé, retourne la clé sélectionnée par la requête spécifiée. Cela permet de retrouver un enregistrement spécifique depuis un espace de stockage déterminé.

- -

Si la clé a bien été retrouvée, alors un clone structuré (une copie conforme) sera créée et servira comme résultat à l'objet de requête.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
let request = objectStore.getKey(key);
- -

Paramètres

- -
-
key
-
La clé ou l'intervale de clé qui identifie l'enregistrement à retrouver.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} sur lequel les événements ultérieurs liés à cette opération sont déclenchés.

- -

Exceptions

- -

Cette méthode peut provoquer une {{domxref("DOMException")}} de l'un des types suivants :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
TransactionInactiveErrorLa transaction de ce {{domxref("IDBObjectStore")}} est inactive.
DataErrorLa clé ou la plage de clés fournie contient une clé invalide.
InvalidStateErrorLe {{domxref("IDBObjectStore")}} a été supprimé ou retiré.
- -

Exemple

- -
let openRequest = indexedDB.open("telemetry");
-openRequest.onsuccess = (event) => {
-  let db = event.target.result;
-  let store = db.transaction("netlogs").objectStore("netlogs");
-
-  let today = new Date();
-  let yesterday = new Date(today);
-  yesterday.setDate(today.getDate() - 1);
-  let request = store.getKey(IDBKeyRange(yesterday, today));
-  request.onsuccess = (event) => {
-    let when = event.target.result;
-    alert("La 1ère activité des dernières 24 heures s'est produite à " + when);
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB 2', '#dom-idbobjectstore-getkey', 'getKey()')}}{{Spec2('IndexedDB 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.getKey")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/getkey/index.md b/files/fr/web/api/idbobjectstore/getkey/index.md new file mode 100644 index 0000000000..84581d2293 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/getkey/index.md @@ -0,0 +1,114 @@ +--- +title: IDBObjectStore.getKey() +slug: Web/API/IDBObjectStore/getKey +tags: + - IBDObjectStore + - IndexedDB + - Method + - Méthode + - Reference + - Storage + - Web API +translation_of: Web/API/IDBObjectStore/getKey +--- +

{{APIRef("IndexedDB")}}

+ +

La méthode getKey() de l'interface {{domxref("IDBObjectStore")}} retourne un objet {{domxref("IDBRequest")}}, et, dans un thread séparé, retourne la clé sélectionnée par la requête spécifiée. Cela permet de retrouver un enregistrement spécifique depuis un espace de stockage déterminé.

+ +

Si la clé a bien été retrouvée, alors un clone structuré (une copie conforme) sera créée et servira comme résultat à l'objet de requête.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
let request = objectStore.getKey(key);
+ +

Paramètres

+ +
+
key
+
La clé ou l'intervale de clé qui identifie l'enregistrement à retrouver.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} sur lequel les événements ultérieurs liés à cette opération sont déclenchés.

+ +

Exceptions

+ +

Cette méthode peut provoquer une {{domxref("DOMException")}} de l'un des types suivants :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
TransactionInactiveErrorLa transaction de ce {{domxref("IDBObjectStore")}} est inactive.
DataErrorLa clé ou la plage de clés fournie contient une clé invalide.
InvalidStateErrorLe {{domxref("IDBObjectStore")}} a été supprimé ou retiré.
+ +

Exemple

+ +
let openRequest = indexedDB.open("telemetry");
+openRequest.onsuccess = (event) => {
+  let db = event.target.result;
+  let store = db.transaction("netlogs").objectStore("netlogs");
+
+  let today = new Date();
+  let yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+  let request = store.getKey(IDBKeyRange(yesterday, today));
+  request.onsuccess = (event) => {
+    let when = event.target.result;
+    alert("La 1ère activité des dernières 24 heures s'est produite à " + when);
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB 2', '#dom-idbobjectstore-getkey', 'getKey()')}}{{Spec2('IndexedDB 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.getKey")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/index.html b/files/fr/web/api/idbobjectstore/index.html deleted file mode 100644 index 2f048f7b9e..0000000000 --- a/files/fr/web/api/idbobjectstore/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: IDBObjectStore -slug: Web/API/IDBObjectStore -translation_of: Web/API/IDBObjectStore ---- -

{{APIRef("IndexedDB")}}

- -

L'interface IDBObjectStore de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès aux magasins d'objet de la base de données.

- -

Le magasin d'objet emmagasine des enregistrements. Chaque enregistrement est constitué d'un couple clé/valeur. Chaque valeurs est indexée sur sa clé. Les clés sont triées pour former l'index primaire du magasin. Ce qui permet un accès rapide et ordonnée aux valeurs.

- -

Le magasin d'objet peut en plus de l'index primaire avoir des index qui ordonnent les enregistrements sur d'autres clés. Ces index se mettent automatiquement à jour dans la plupart des cas et permettent de mettre des contraintes d’unicités pour d'autres clés que la clé primaire du magasin d'objet.

- -

{{AvailableInWorkers}}

- -

Méthodes

- -
-
{{domxref("IDBObjectStore.add()")}}
-
Une {{domxref("IDBRequest","requête")}} pour ajouter un enregistrement au magasin d'objet relié, un clone structuré de la valeur passé en paramètre et sa clé .
-
{{domxref("IDBObjectStore.clear()")}}
-
Une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet relié.
-
{{domxref("IDBObjectStore.delete()")}}
-
Une {{domxref("IDBRequest","requête")}} de suppression d'enregistrement(s) du magasin d'objet relié.
-
{{domxref("IDBObjectStore.get()")}}
-
Une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet relié.
-
{{domxref("IDBObjectStore.getAll()")}}
-
Une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet relié. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
-
{{domxref("IDBObjectStore.getAllKeys()")}}
-
Une {{domxref("IDBRequest","requête")}} qui renvoie la liste de toutes les clés des enregistrements du magasin d'objet. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
-
{{domxref("IDBObjectStore.createIndex()")}}
-
Met en place sur le magasin d'objet relié, un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.
-
{{domxref("IDBObjectStore.deleteIndex()")}}
-
Supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié.
-
{{domxref("IDBObjectStore.index()")}}
-
L'{{domxref("IDBIndex","accès")}} à l'index dont le nom est passé en paramètre du magasin d'objet relié.
-
{{domxref("IDBObjectStore.put()")}}
-
Une {{domxref("IDBRequest","requête")}} pour ajouter ou mettre à jour un enregistrement du magasin d'objet relié, un clone structuré de la valeur passée en paramètre et sa clé.
-
{{domxref("IDBObjectStore.openCursor()")}}
-
Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère le magasin d'objet relié.
-
{{domxref("IDBObjectStore.openKeyCursor()")}}
-
Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère le magasin d'objet relié.
-
{{domxref("IDBObjectStore.count()")}}
-
Une {{domxref("IDBRequest","requête")}} au magasin d'objet relié. La requête compte le nombre d'enregistrements dans ce magasin d'objet ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.
-
- -

Propriétés

- -
-
{{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}
-
La liste des noms d'index du magasin d'objet relié.
-
{{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}
-
Le nom de la clé du magasin d'objets relié.
-
{{domxref("IDBObjectStore.name")}} {{readonlyInline}}
-
Le nom du magasin d'objet relié.
-
{{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}
-
La {{domxref("IDBTransaction","transaction")}} à laquelle l'accès du magasin d'objet appartient.
-
{{domxref("IDBObjectStore.autoIncrement")}} {{readonlyInline}}
-
La position du drapeau d’incrémentation automatique du magasin d'objet relié.
-
- -
-
- -

Exemple

- -

Cet exemple montre différents usages de l'accès au magasin d'objet. On met à jour la structure de donnée avec {{domxref("IDBObjectStore.createIndex")}} dans un gestionnaire d'événement onupgradeneeded. On ajoute un nouvel enregistrement avec {{domxref("IDBObjectStore.add")}}.

- -
// connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-// gère le succès de la connexion
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Connexion ouverte.</li>';
-
-  //affect la connexion à la variable db.
-  db = DBOpenRequest.result;
-};
-
-// Ce gestionnaire d'événement s'active quand on à besoin d'une nouvelle version de la base de donnée.
-// Si la base n'existais pas avant ou
-// si on ouvre une nouvelle version avec window.indexedDB.open.
-DBOpenRequest.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  db.onerror = function(event) {
-    note.innerHTML += '<li>Erreur de chargement de la base.</li>';
-  };
-
-  // Ajoute un magasin d'objets à la base de données
-  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
-
-  // défini des index sur ce magasin
-
-  objectStore.createIndex("hours", "hours", { unique: false });
-  objectStore.createIndex("minutes", "minutes", { unique: false });
-  objectStore.createIndex("day", "day", { unique: false });
-  objectStore.createIndex("month", "month", { unique: false });
-  objectStore.createIndex("year", "year", { unique: false });
-
-  objectStore.createIndex("notified", "notified", { unique: false });
-
-  note.innerHTML += '<li>Le magasin d\'objet est ajouté.</li>';
-};
-
-// Un nouvel enregistrement à ajouter
-var newItem = [
- { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: 'December', year: 2013, notified: "no" }
-];
-
-// ouvre une transaction en lecture/écriture sur la connexion, prête à ajouter l'enregistrement.
-var transaction = db.transaction(["toDoList"], "readwrite");
-
-// affiche le succès de la transaction
-transaction.oncomplete = function(event) {
-  note.innerHTML += '<li>La transaction à été effectuée.</li>';
-};
-
-transaction.onerror = function(event) {
-  note.innerHTML += '<li>La transaction n\'as pue aboutir.</li>';
-};
-
-// Un accès à toDoList pour la transaction
-var objectStore = transaction.objectStore("toDoList");
-// Ajoute l'enregistrement au magasin d'objet
-var objectStoreRequest = objectStore.add(newItem[0]);
-
-//l'enregistrement c'est bien passé.
-objectStoreRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>L\'enregistrement à été ajouté au magasin d\'objet.</li>';
-}
- -
-

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/index.md b/files/fr/web/api/idbobjectstore/index.md new file mode 100644 index 0000000000..2f048f7b9e --- /dev/null +++ b/files/fr/web/api/idbobjectstore/index.md @@ -0,0 +1,167 @@ +--- +title: IDBObjectStore +slug: Web/API/IDBObjectStore +translation_of: Web/API/IDBObjectStore +--- +

{{APIRef("IndexedDB")}}

+ +

L'interface IDBObjectStore de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès aux magasins d'objet de la base de données.

+ +

Le magasin d'objet emmagasine des enregistrements. Chaque enregistrement est constitué d'un couple clé/valeur. Chaque valeurs est indexée sur sa clé. Les clés sont triées pour former l'index primaire du magasin. Ce qui permet un accès rapide et ordonnée aux valeurs.

+ +

Le magasin d'objet peut en plus de l'index primaire avoir des index qui ordonnent les enregistrements sur d'autres clés. Ces index se mettent automatiquement à jour dans la plupart des cas et permettent de mettre des contraintes d’unicités pour d'autres clés que la clé primaire du magasin d'objet.

+ +

{{AvailableInWorkers}}

+ +

Méthodes

+ +
+
{{domxref("IDBObjectStore.add()")}}
+
Une {{domxref("IDBRequest","requête")}} pour ajouter un enregistrement au magasin d'objet relié, un clone structuré de la valeur passé en paramètre et sa clé .
+
{{domxref("IDBObjectStore.clear()")}}
+
Une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet relié.
+
{{domxref("IDBObjectStore.delete()")}}
+
Une {{domxref("IDBRequest","requête")}} de suppression d'enregistrement(s) du magasin d'objet relié.
+
{{domxref("IDBObjectStore.get()")}}
+
Une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet relié.
+
{{domxref("IDBObjectStore.getAll()")}}
+
Une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet relié. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
+
{{domxref("IDBObjectStore.getAllKeys()")}}
+
Une {{domxref("IDBRequest","requête")}} qui renvoie la liste de toutes les clés des enregistrements du magasin d'objet. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
+
{{domxref("IDBObjectStore.createIndex()")}}
+
Met en place sur le magasin d'objet relié, un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.
+
{{domxref("IDBObjectStore.deleteIndex()")}}
+
Supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié.
+
{{domxref("IDBObjectStore.index()")}}
+
L'{{domxref("IDBIndex","accès")}} à l'index dont le nom est passé en paramètre du magasin d'objet relié.
+
{{domxref("IDBObjectStore.put()")}}
+
Une {{domxref("IDBRequest","requête")}} pour ajouter ou mettre à jour un enregistrement du magasin d'objet relié, un clone structuré de la valeur passée en paramètre et sa clé.
+
{{domxref("IDBObjectStore.openCursor()")}}
+
Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère le magasin d'objet relié.
+
{{domxref("IDBObjectStore.openKeyCursor()")}}
+
Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère le magasin d'objet relié.
+
{{domxref("IDBObjectStore.count()")}}
+
Une {{domxref("IDBRequest","requête")}} au magasin d'objet relié. La requête compte le nombre d'enregistrements dans ce magasin d'objet ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.
+
+ +

Propriétés

+ +
+
{{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}
+
La liste des noms d'index du magasin d'objet relié.
+
{{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}
+
Le nom de la clé du magasin d'objets relié.
+
{{domxref("IDBObjectStore.name")}} {{readonlyInline}}
+
Le nom du magasin d'objet relié.
+
{{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}
+
La {{domxref("IDBTransaction","transaction")}} à laquelle l'accès du magasin d'objet appartient.
+
{{domxref("IDBObjectStore.autoIncrement")}} {{readonlyInline}}
+
La position du drapeau d’incrémentation automatique du magasin d'objet relié.
+
+ +
+
+ +

Exemple

+ +

Cet exemple montre différents usages de l'accès au magasin d'objet. On met à jour la structure de donnée avec {{domxref("IDBObjectStore.createIndex")}} dans un gestionnaire d'événement onupgradeneeded. On ajoute un nouvel enregistrement avec {{domxref("IDBObjectStore.add")}}.

+ +
// connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// gère le succès de la connexion
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Connexion ouverte.</li>';
+
+  //affect la connexion à la variable db.
+  db = DBOpenRequest.result;
+};
+
+// Ce gestionnaire d'événement s'active quand on à besoin d'une nouvelle version de la base de donnée.
+// Si la base n'existais pas avant ou
+// si on ouvre une nouvelle version avec window.indexedDB.open.
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '<li>Erreur de chargement de la base.</li>';
+  };
+
+  // Ajoute un magasin d'objets à la base de données
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // défini des index sur ce magasin
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '<li>Le magasin d\'objet est ajouté.</li>';
+};
+
+// Un nouvel enregistrement à ajouter
+var newItem = [
+ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: 'December', year: 2013, notified: "no" }
+];
+
+// ouvre une transaction en lecture/écriture sur la connexion, prête à ajouter l'enregistrement.
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// affiche le succès de la transaction
+transaction.oncomplete = function(event) {
+  note.innerHTML += '<li>La transaction à été effectuée.</li>';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '<li>La transaction n\'as pue aboutir.</li>';
+};
+
+// Un accès à toDoList pour la transaction
+var objectStore = transaction.objectStore("toDoList");
+// Ajoute l'enregistrement au magasin d'objet
+var objectStoreRequest = objectStore.add(newItem[0]);
+
+//l'enregistrement c'est bien passé.
+objectStoreRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>L\'enregistrement à été ajouté au magasin d\'objet.</li>';
+}
+ +
+

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/index/index.html b/files/fr/web/api/idbobjectstore/index/index.html deleted file mode 100644 index f0cef79029..0000000000 --- a/files/fr/web/api/idbobjectstore/index/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: IDBObjectStore.index() -slug: Web/API/IDBObjectStore/index -tags: - - API - - IDBObjectStore - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBObjectStore/index ---- -
{{APIRef("IndexedDB")}}
- -

La méthode index(), rattachée à l'interface {{domxref("IDBObjectStore")}}, permet d'ouvrir un index sur le magasin d'objet courant pour, par exemple, renvoyer une liste d'enregistrements triés par cet index grâce à un curseur.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
objectStore.index(nomIndex);
- -

Paramètres

- -
-
nomIndex
-
Le nom de l'index qu'on souhaite ouvrir.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBIndex")}} qui permet d'accéder à l'index.

- -

Exceptions

- -

Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :

- - - - - - - - - - - - - - - - - - -
ExceptionDescription
InvalidStateErrorL'objet correspondant au magasin d'objet a été supprimé ou la transaction a été clôturée.
NotFoundErrorIl n'existe pas d'index pour ce nom dans la base de données (la recherche est sensible à la casse).
- -

Exemples

- -

Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objet et on accède à l'index lName de la base de données. Ensuite, on ouvre un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne de la même façon que d'ouvrir un curseur à même le magasin d'objet grâce à {{domxref("IDBObjectStore.openCursor")}} sauf que, cette fois, les enregistrements sont renvoyés triés selon l'index et non selon la clé primaire.

- -

Enfin, on parcourt chaque enregistrement pour l'ajouter dans un tableau HTML.

- -
function displayDataByIndex() {
-  tableEntry.innerHTML = '';
-  var transaction = db.transaction(['contactsList'], 'readonly');
-  var objectStore = transaction.objectStore('contactsList');
-
-  var myIndex = objectStore.index('lName');
-  myIndex.openCursor().onsuccess = function(event) {
-    var cursor = event.target.result;
-    if(cursor) {
-      var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
-                           + '<td>' + cursor.value.lName + '</td>'
-                           + '<td>' + cursor.value.fName + '</td>'
-                           + '<td>' + cursor.value.jTitle + '</td>'
-                           + '<td>' + cursor.value.company + '</td>'
-                           + '<td>' + cursor.value.eMail + '</td>'
-                           + '<td>' + cursor.value.phone + '</td>'
-                           + '<td>' + cursor.value.age + '</td>';
-      tableEntry.appendChild(tableRow);
-
-      cursor.continue();
-    } else {
-      console.log('Éléments affichés.');
-    }
-  };
-};
- -
-

Note : pour un exemple fonctionnel complet, voir notre exemple sur GitHub (la démonstration associée).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.index")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/index/index.md b/files/fr/web/api/idbobjectstore/index/index.md new file mode 100644 index 0000000000..f0cef79029 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/index/index.md @@ -0,0 +1,124 @@ +--- +title: IDBObjectStore.index() +slug: Web/API/IDBObjectStore/index +tags: + - API + - IDBObjectStore + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBObjectStore/index +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode index(), rattachée à l'interface {{domxref("IDBObjectStore")}}, permet d'ouvrir un index sur le magasin d'objet courant pour, par exemple, renvoyer une liste d'enregistrements triés par cet index grâce à un curseur.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
objectStore.index(nomIndex);
+ +

Paramètres

+ +
+
nomIndex
+
Le nom de l'index qu'on souhaite ouvrir.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBIndex")}} qui permet d'accéder à l'index.

+ +

Exceptions

+ +

Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :

+ + + + + + + + + + + + + + + + + + +
ExceptionDescription
InvalidStateErrorL'objet correspondant au magasin d'objet a été supprimé ou la transaction a été clôturée.
NotFoundErrorIl n'existe pas d'index pour ce nom dans la base de données (la recherche est sensible à la casse).
+ +

Exemples

+ +

Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objet et on accède à l'index lName de la base de données. Ensuite, on ouvre un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne de la même façon que d'ouvrir un curseur à même le magasin d'objet grâce à {{domxref("IDBObjectStore.openCursor")}} sauf que, cette fois, les enregistrements sont renvoyés triés selon l'index et non selon la clé primaire.

+ +

Enfin, on parcourt chaque enregistrement pour l'ajouter dans un tableau HTML.

+ +
function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Éléments affichés.');
+    }
+  };
+};
+ +
+

Note : pour un exemple fonctionnel complet, voir notre exemple sur GitHub (la démonstration associée).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.index")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/indexnames/index.html b/files/fr/web/api/idbobjectstore/indexnames/index.html deleted file mode 100644 index 96cfe6186a..0000000000 --- a/files/fr/web/api/idbobjectstore/indexnames/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: IDBObjectStore.indexNames -slug: Web/API/IDBObjectStore/indexNames -tags: - - API - - IDBObjectStore - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBObjectStore/indexNames ---- -
{{APIRef("IndexedDB")}}
- -

La propriété indexNames, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie la liste des noms des index pour les objets du magasin d'objets courant.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var myindexNames = objectStore.indexNames;
- -

Valeur

- -

Une liste {{domxref("DOMStringList")}}.

- -

Exemples

- -

Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode add(). Une fois l'objet créé, on affiche objectStore.indexNames en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application To-do Notifications (tester la démo).

- -
// On commence par ouvrir la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Base de données initialisée.</li>';
-
-  // On enregistre le résultat de l'ouverture
-  // dans la variable db afin de l'utiliser
-  // ensuite
-  db = this.result;
-
-  // On exécute la fonction addData() afin
-  // d'ajouter des données à la base de données
-  addData();
-};
-
-function addData() {
-  // On crée un nouvel objet prêt à être inséré
-  // dans la base de données
-  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture
-  // vers la base de données afin d'ajouter des
-  // données
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // On indique le succès de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modification finie.</li>';
-  };
-
-
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.</li>';
-  };
-
-  // On crée un magasin d'objet pour la transaction
-  // et on affiche indexNames dans la console
-  var objectStore = transaction.objectStore("toDoList");
-  console.log(objectStore.indexNames);
-
-  // On ajoute l'objet newItem au magasin d'objets
-  var objectStoreRequest = objectStore.add(newItem[0]);
-
-  objectStoreRequest.onsuccess = function(event) {
-    // On indique le succès de l'ajout de l'objet
-    // dans la base de données
-    note.innerHTML += '<li>Un nouvel élément a été ajouté dans la base de données.</li>';
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.indexNames")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/indexnames/index.md b/files/fr/web/api/idbobjectstore/indexnames/index.md new file mode 100644 index 0000000000..96cfe6186a --- /dev/null +++ b/files/fr/web/api/idbobjectstore/indexnames/index.md @@ -0,0 +1,112 @@ +--- +title: IDBObjectStore.indexNames +slug: Web/API/IDBObjectStore/indexNames +tags: + - API + - IDBObjectStore + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBObjectStore/indexNames +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété indexNames, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie la liste des noms des index pour les objets du magasin d'objets courant.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var myindexNames = objectStore.indexNames;
+ +

Valeur

+ +

Une liste {{domxref("DOMStringList")}}.

+ +

Exemples

+ +

Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode add(). Une fois l'objet créé, on affiche objectStore.indexNames en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application To-do Notifications (tester la démo).

+ +
// On commence par ouvrir la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Base de données initialisée.</li>';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db afin de l'utiliser
+  // ensuite
+  db = this.result;
+
+  // On exécute la fonction addData() afin
+  // d'ajouter des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré
+  // dans la base de données
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // vers la base de données afin d'ajouter des
+  // données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modification finie.</li>';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.</li>';
+  };
+
+  // On crée un magasin d'objet pour la transaction
+  // et on affiche indexNames dans la console
+  var objectStore = transaction.objectStore("toDoList");
+  console.log(objectStore.indexNames);
+
+  // On ajoute l'objet newItem au magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'ajout de l'objet
+    // dans la base de données
+    note.innerHTML += '<li>Un nouvel élément a été ajouté dans la base de données.</li>';
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.indexNames")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/keypath/index.html b/files/fr/web/api/idbobjectstore/keypath/index.html deleted file mode 100644 index cca4866bd8..0000000000 --- a/files/fr/web/api/idbobjectstore/keypath/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: IDBObjectStore.keyPath -slug: Web/API/IDBObjectStore/keyPath -tags: - - API - - IDBObjectStore - - IndexedDB - - Propriété - - Reference - - keyPath -translation_of: Web/API/IDBObjectStore/keyPath ---- -
{{APIRef("IndexedDB")}}
- -

La propriété keyPath de l'interface {{domxref("IDBObjectStore")}} renvoie le chemin de la clé de ce magasin d'objet.

- -

Si cette propriété vaut null l'application doit fournir une clé pour chaque opération de modification.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var mykeyPath = objectStore.keyPath;
- -

Valeur

- -

N'importe quel type de valeur.

- -

Exemple

- -

Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode add(). Une fois l'objet créé, on affiche objectStore.keyPath en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application To-do Notifications (tester la démo).

- -
// On commence par ouvrir la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Initialisation de la base.</li>';
-
-  // On enregistre le résultat de l'ouverture
-  // dans la variable db afin de l'utiliser
-  // ensuite
-  var db = DBOpenRequest.result;
-
-  // On utilise la fonction addData() afin d'ajouter
-  // des données à la base de données
-  addData();
-};
-
-function addData() {
-  // On crée un nouvel objet prêt à être inséré
-  // dans la base de données
-  var newItem = [ { taskTitle: "Promener le chien", hours: 19, minutes: 30, day: 24, month: "Décembre", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture
-  // vers la base de données afin d'ajouter des
-  // données
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // On indique le succès de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modification finie.</li>';
-  };
-
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.</li>';
-  };
-
-  // On crée un magasin d'objet pour la transaction
-  // et on affiche KeyPath dans la console
-  var objectStore = transaction.objectStore("toDoList");
-  console.log(objectStore.keyPath);
-
-  // On ajoute l'objet newItem au magasin d'objets
-  var objectStoreRequest = objectStore.add(newItem[0]);
-
-  objectStoreRequest.onsuccess = function(event) {
-    // On indique le succès de l'ajout de l'objet
-    // dans la base de données
-    note.innerHTML += '<li>Un nouvel élément a été ajouté dans la base de données.</li>';
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.keyPath")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/keypath/index.md b/files/fr/web/api/idbobjectstore/keypath/index.md new file mode 100644 index 0000000000..cca4866bd8 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/keypath/index.md @@ -0,0 +1,114 @@ +--- +title: IDBObjectStore.keyPath +slug: Web/API/IDBObjectStore/keyPath +tags: + - API + - IDBObjectStore + - IndexedDB + - Propriété + - Reference + - keyPath +translation_of: Web/API/IDBObjectStore/keyPath +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété keyPath de l'interface {{domxref("IDBObjectStore")}} renvoie le chemin de la clé de ce magasin d'objet.

+ +

Si cette propriété vaut null l'application doit fournir une clé pour chaque opération de modification.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var mykeyPath = objectStore.keyPath;
+ +

Valeur

+ +

N'importe quel type de valeur.

+ +

Exemple

+ +

Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode add(). Une fois l'objet créé, on affiche objectStore.keyPath en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application To-do Notifications (tester la démo).

+ +
// On commence par ouvrir la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Initialisation de la base.</li>';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db afin de l'utiliser
+  // ensuite
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter
+  // des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré
+  // dans la base de données
+  var newItem = [ { taskTitle: "Promener le chien", hours: 19, minutes: 30, day: 24, month: "Décembre", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // vers la base de données afin d'ajouter des
+  // données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modification finie.</li>';
+  };
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.</li>';
+  };
+
+  // On crée un magasin d'objet pour la transaction
+  // et on affiche KeyPath dans la console
+  var objectStore = transaction.objectStore("toDoList");
+  console.log(objectStore.keyPath);
+
+  // On ajoute l'objet newItem au magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'ajout de l'objet
+    // dans la base de données
+    note.innerHTML += '<li>Un nouvel élément a été ajouté dans la base de données.</li>';
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.keyPath")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/name/index.html b/files/fr/web/api/idbobjectstore/name/index.html deleted file mode 100644 index 214f9ce32a..0000000000 --- a/files/fr/web/api/idbobjectstore/name/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: IDBObjectStore.name -slug: Web/API/IDBObjectStore/name -tags: - - API - - IDBObjectStore - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBObjectStore/name ---- -
{{APIRef("IndexedDB")}}
- -

La propriété name, rattachée à l'interface {{domxref("IDBObjectStore")}}, indique le nom du magasin d'objets courant.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var nomDuMagasin = IDBObjectStore.name;
-IDBObjectStore.name = nouveauNom;
- -

Valeur

- -

Une chaîne de caractères qui contient le nom du magasin d'objet.

- -

Exceptions

- -

Plusieurs exceptions peuvent être levées lorsqu'on tente de modifier le nom d'un magasin d'objets.

- -
-
InvalidStateError
-
Le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de mise à jour : il est uniquemnet possible d'opérer un renommage lorsque le mode de la transaction est "versionchange".
-
TransactionInactiveError
-
La transaction actuelle est inactive.
-
ConstraintError
-
Un magasin d'objets utilise déjà le nom qu'on souhaite employer.
-
- -

Exemples

- -

Dans le fragment de code qui suit, on ouvre une transaction en lecture/écriture pour la base de données et on ajoute des données au magasin d'objets grâce à la méthode add(). Une fois que le magasin d'objets a été créé, on inscrit la valeur de objectStore.name dans la console. Pour un exemple complet, voir notre application To-do Notifications (cf. également la démonstration live).

- -
// On ouvre la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Initialisation de la base de données</li>';
-
-  // On enregistre le résultat de l'ouverture dans la variable
-  // db afin de l'utiliser ensuite.
-  db = DBOpenRequest.result;
-
-  // On exécute la fonction addData() afin d'ajouter des
-  // données à la base de données
-  addData();
-};
-
-function addData() {
-  // On crée un nouvel objet pour l'insérer dans la base
-  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture
-  // afin d'ajouter les données
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // On gère le cas où la transaction est effectuée correctement
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modification appliquée.</li>';
-  };
-
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>Transaction non ouverte. Les doublons sont interdits.</li>';
-  };
-
-  // On crée un magasin d'objets pour la transaction
-  var objectStore = transaction.objectStore("toDoList");
-  console.log(objectStore.name);
-
-  // On ajoute l'objet newItem dans le magasin d'objet
-  var objectStoreRequest = objectStore.add(newItem[0]);
-
-  objectStoreRequest.onsuccess = function(event) {
-    // On rapporte la réussite de l'ajout de l'objet en base
-    note.innerHTML += '<li>Nouvel élément ajouté dans la base de données.</li>';
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-name', 'name')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.name")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/name/index.md b/files/fr/web/api/idbobjectstore/name/index.md new file mode 100644 index 0000000000..214f9ce32a --- /dev/null +++ b/files/fr/web/api/idbobjectstore/name/index.md @@ -0,0 +1,120 @@ +--- +title: IDBObjectStore.name +slug: Web/API/IDBObjectStore/name +tags: + - API + - IDBObjectStore + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBObjectStore/name +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété name, rattachée à l'interface {{domxref("IDBObjectStore")}}, indique le nom du magasin d'objets courant.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var nomDuMagasin = IDBObjectStore.name;
+IDBObjectStore.name = nouveauNom;
+ +

Valeur

+ +

Une chaîne de caractères qui contient le nom du magasin d'objet.

+ +

Exceptions

+ +

Plusieurs exceptions peuvent être levées lorsqu'on tente de modifier le nom d'un magasin d'objets.

+ +
+
InvalidStateError
+
Le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de mise à jour : il est uniquemnet possible d'opérer un renommage lorsque le mode de la transaction est "versionchange".
+
TransactionInactiveError
+
La transaction actuelle est inactive.
+
ConstraintError
+
Un magasin d'objets utilise déjà le nom qu'on souhaite employer.
+
+ +

Exemples

+ +

Dans le fragment de code qui suit, on ouvre une transaction en lecture/écriture pour la base de données et on ajoute des données au magasin d'objets grâce à la méthode add(). Une fois que le magasin d'objets a été créé, on inscrit la valeur de objectStore.name dans la console. Pour un exemple complet, voir notre application To-do Notifications (cf. également la démonstration live).

+ +
// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Initialisation de la base de données</li>';
+
+  // On enregistre le résultat de l'ouverture dans la variable
+  // db afin de l'utiliser ensuite.
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData() afin d'ajouter des
+  // données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet pour l'insérer dans la base
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // afin d'ajouter les données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On gère le cas où la transaction est effectuée correctement
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modification appliquée.</li>';
+  };
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>Transaction non ouverte. Les doublons sont interdits.</li>';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+  console.log(objectStore.name);
+
+  // On ajoute l'objet newItem dans le magasin d'objet
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On rapporte la réussite de l'ajout de l'objet en base
+    note.innerHTML += '<li>Nouvel élément ajouté dans la base de données.</li>';
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-name', 'name')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.name")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/opencursor/index.html b/files/fr/web/api/idbobjectstore/opencursor/index.html deleted file mode 100644 index 6e19a926d8..0000000000 --- a/files/fr/web/api/idbobjectstore/opencursor/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: IDBObjectStore.openCursor() -slug: Web/API/IDBObjectStore/openCursor -tags: - - API - - IDBObjectStore - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBObjectStore/openCursor ---- -
{{APIRef("IndexedDB")}}
- -

La méthode openCursor(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, renvoie un nouvel objet {{domxref("IDBCursorWithValue")}} qu'on peut utiliser pour parcourir un magasin d'objets avec un curseur.

- -

Afin de déterminer si l'opération s'est déroulée correctement, on pourra surveiller l'évènement success.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var requete = ObjectStore.openCursor(optionalKeyRange, optionalDirection);
- -

Paramètres

- -
-
range {{optional_inline}}
-
Une clé ou un intervalle de clés ({{domxref("IDBKeyRange")}}) qu'on souhaite parcourir. Si une seule clé est passée en argument, l'intervalle utilisé pour le curseur sera restreint à cette seule clé. Si aucune valeur n'est passée pour cet argument, l'intervalle utilisé pour le curseur englobera tous les enregistrements du magasin d'objets.
-
direction {{optional_inline}}
-
Un objet {{domxref("IDBCursorDirection")}} qui indique la direction de parcours du curseur. La valeur par défaut est "next".
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les évènements relatifs à l'opération.

- -

Exceptions

- -

Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
InvalidStateErrorL'objet {{domxref("IDBObjectStore")}} ou l'objet {{domxref("IDBIndex")}} a été supprimé.
TransactionInactiveErrorLa transaction rattachée au magasin d'objets ({{domxref("IDBObjectStore")}}) est inactive.
DataErrorLa clé ou l'intervalle de clés indiqué est invalide.
- -

Exemples

- -

Dans ce fragment de code, on crée une transaction, on ouvre le magasin d'objets souhaité puis on place un curseur pour parcourir tous les enregistrements du magasin d'objets :

- -
var transaction = db.transaction("name", "readonly");
-var objectStore = transaction.objectStore("name");
-var request = objectStore.openCursor();
-request.onsuccess = function(event) {
-  var cursor = event.target.result;
-  if(cursor) {
-    // cursor.value contient l'enregistrement courant
-    // pendant le parcours, on peut éventuellement le manipuler ici
-    cursor.continue();
-  } else {
-    // il n'y a plus de résultats
-  }
-};
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.openCursor")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/opencursor/index.md b/files/fr/web/api/idbobjectstore/opencursor/index.md new file mode 100644 index 0000000000..6e19a926d8 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/opencursor/index.md @@ -0,0 +1,114 @@ +--- +title: IDBObjectStore.openCursor() +slug: Web/API/IDBObjectStore/openCursor +tags: + - API + - IDBObjectStore + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBObjectStore/openCursor +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode openCursor(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un thread séparé, renvoie un nouvel objet {{domxref("IDBCursorWithValue")}} qu'on peut utiliser pour parcourir un magasin d'objets avec un curseur.

+ +

Afin de déterminer si l'opération s'est déroulée correctement, on pourra surveiller l'évènement success.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var requete = ObjectStore.openCursor(optionalKeyRange, optionalDirection);
+ +

Paramètres

+ +
+
range {{optional_inline}}
+
Une clé ou un intervalle de clés ({{domxref("IDBKeyRange")}}) qu'on souhaite parcourir. Si une seule clé est passée en argument, l'intervalle utilisé pour le curseur sera restreint à cette seule clé. Si aucune valeur n'est passée pour cet argument, l'intervalle utilisé pour le curseur englobera tous les enregistrements du magasin d'objets.
+
direction {{optional_inline}}
+
Un objet {{domxref("IDBCursorDirection")}} qui indique la direction de parcours du curseur. La valeur par défaut est "next".
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les évènements relatifs à l'opération.

+ +

Exceptions

+ +

Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
InvalidStateErrorL'objet {{domxref("IDBObjectStore")}} ou l'objet {{domxref("IDBIndex")}} a été supprimé.
TransactionInactiveErrorLa transaction rattachée au magasin d'objets ({{domxref("IDBObjectStore")}}) est inactive.
DataErrorLa clé ou l'intervalle de clés indiqué est invalide.
+ +

Exemples

+ +

Dans ce fragment de code, on crée une transaction, on ouvre le magasin d'objets souhaité puis on place un curseur pour parcourir tous les enregistrements du magasin d'objets :

+ +
var transaction = db.transaction("name", "readonly");
+var objectStore = transaction.objectStore("name");
+var request = objectStore.openCursor();
+request.onsuccess = function(event) {
+  var cursor = event.target.result;
+  if(cursor) {
+    // cursor.value contient l'enregistrement courant
+    // pendant le parcours, on peut éventuellement le manipuler ici
+    cursor.continue();
+  } else {
+    // il n'y a plus de résultats
+  }
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.openCursor")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/openkeycursor/index.html b/files/fr/web/api/idbobjectstore/openkeycursor/index.html deleted file mode 100644 index a7270562d0..0000000000 --- a/files/fr/web/api/idbobjectstore/openkeycursor/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: IDBObjectStore.openKeyCursor() -slug: Web/API/IDBObjectStore/openKeyCursor -tags: - - API - - IDBObjectStore - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBObjectStore/openKeyCursor ---- -
{{APIRef("IndexedDB")}}
- -

La méthode openKeyCursor(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} dont le résultat sera un curseur ({{domxref("IDBCursor")}}) qui pourra être utilisé afin de parcourir les enregistrements correspondants. Cette méthode est utilisée afin de parcourir les clés d'un magasin d'objets grâce à un curseur.

- -

Afin de déterminer si le curseur a bien été ajouté, on pourra écouter l'évènement success sur le résultat de la méthode.

- -

Syntaxe

- -
var requete = objectStore.openKeyCursor(optionalKeyRange, optionalDirection);
- -

Paramètres

- -
-
optionalKeyRange
-
L'intervalle de clés qu'on souhaite parcourir. Si une seule clé est fournie, l'intervalle constitué ne contiendra que cette clé. Si aucune valeur n'est passée en argument, le curseur produit parcourera tous les enregistrements du magasin d'objets.
-
optionalDirection
-
Un objet {{domxref("IDBCursorDirection")}} qui indique la direction dans laquelle le curseur doit parcourir les évènements. La valeur par défaut est "next".
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à cette opération.

- -

Exceptions

- -

Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
InvalidStateErrorLe magasin d'objets ({{domxref("IDBObjectStore")}} ou l'index ({{domxref("IDBIndex")}}) a été supprimé.
TransactionInactiveErrorLa transaction associée au magasin d'objet ({{domxref("IDBObjectStore")}}) est inactive.
DataErrorLa clé ou l'intervalle de clés indiqué est invalide.
- -

Exemples

- -

Dans le fragment de code suivant, on crée une transaction, on l'utilise sur un magasin d'objets donné puis on utilise le curseur pour parcourir tous les enregistrements du magasin d'objets :

- -
var transaction = db.transaction("name", "readonly");
-var objectStore = transaction.objectStore("name");
-var request = objectStore.openKeyCursor();
-request.onsuccess = function(event) {
-  var cursor = event.target.result;
-  if(cursor) {
-    // cursor.key contient la clé de l'enregistrement courant
-    // à la différence de openCursor, il n'y a pas de cursor.value
-    cursor.continue();
-  } else {
-    // Il n'y a plus d'autres résultats
-  }
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.openKeyCursor")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/openkeycursor/index.md b/files/fr/web/api/idbobjectstore/openkeycursor/index.md new file mode 100644 index 0000000000..a7270562d0 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/openkeycursor/index.md @@ -0,0 +1,111 @@ +--- +title: IDBObjectStore.openKeyCursor() +slug: Web/API/IDBObjectStore/openKeyCursor +tags: + - API + - IDBObjectStore + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBObjectStore/openKeyCursor +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode openKeyCursor(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} dont le résultat sera un curseur ({{domxref("IDBCursor")}}) qui pourra être utilisé afin de parcourir les enregistrements correspondants. Cette méthode est utilisée afin de parcourir les clés d'un magasin d'objets grâce à un curseur.

+ +

Afin de déterminer si le curseur a bien été ajouté, on pourra écouter l'évènement success sur le résultat de la méthode.

+ +

Syntaxe

+ +
var requete = objectStore.openKeyCursor(optionalKeyRange, optionalDirection);
+ +

Paramètres

+ +
+
optionalKeyRange
+
L'intervalle de clés qu'on souhaite parcourir. Si une seule clé est fournie, l'intervalle constitué ne contiendra que cette clé. Si aucune valeur n'est passée en argument, le curseur produit parcourera tous les enregistrements du magasin d'objets.
+
optionalDirection
+
Un objet {{domxref("IDBCursorDirection")}} qui indique la direction dans laquelle le curseur doit parcourir les évènements. La valeur par défaut est "next".
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à cette opération.

+ +

Exceptions

+ +

Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
InvalidStateErrorLe magasin d'objets ({{domxref("IDBObjectStore")}} ou l'index ({{domxref("IDBIndex")}}) a été supprimé.
TransactionInactiveErrorLa transaction associée au magasin d'objet ({{domxref("IDBObjectStore")}}) est inactive.
DataErrorLa clé ou l'intervalle de clés indiqué est invalide.
+ +

Exemples

+ +

Dans le fragment de code suivant, on crée une transaction, on l'utilise sur un magasin d'objets donné puis on utilise le curseur pour parcourir tous les enregistrements du magasin d'objets :

+ +
var transaction = db.transaction("name", "readonly");
+var objectStore = transaction.objectStore("name");
+var request = objectStore.openKeyCursor();
+request.onsuccess = function(event) {
+  var cursor = event.target.result;
+  if(cursor) {
+    // cursor.key contient la clé de l'enregistrement courant
+    // à la différence de openCursor, il n'y a pas de cursor.value
+    cursor.continue();
+  } else {
+    // Il n'y a plus d'autres résultats
+  }
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.openKeyCursor")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/put/index.html b/files/fr/web/api/idbobjectstore/put/index.html deleted file mode 100644 index f4c51928b1..0000000000 --- a/files/fr/web/api/idbobjectstore/put/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: IDBObjectStore.put() -slug: Web/API/IDBObjectStore/put -tags: - - API - - IDBObjectStore - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBObjectStore/put ---- -
{{APIRef("IndexedDB")}}
- -

La méthode put(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un autre thread, crée un clone structuré de la valeur puis enregistre ce clone dans le magasin d'objet. Cette méthode permet ainsi d'ajouter de nouveaux enregistrements ou de mettre à jour des enregistrements existants dans un magasin d'objet lorsque la transaction est en mode readwrite (lecture-écriture)

- -

Si l'enregistrement est stocké avec succès, un évènement de succès sera déclenché sur la requête renvoyée par la méthode. La propriété result de cette requête contiendra la clé de l'enregistrement créé ou mis à jour. La propriété transaction de cette requête sera la transaction dans laquelle le magasin d'objet est ouvert.

- -

La méthode put() permet d'ajouter ou de mettre à jour. Si on souhaite uniquement insérer, on utilisera plutôt {{domxref("IDBObjectStore.add")}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var request = objectStore.put(monElement);
-var request = objectStore.put(monElement, cleOptionnelle);
- -

Paramètres

- -
-
monElement
-
La valeur qu'on souhaite enregistrer.
-
cleOptionnelle {{optional_inline}}
-
La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si cet argument est absent, la valeur par défaut sera {{jsxref("null")}}.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBRequest")}} qui recevra les évènements qui seront déclenchés suite à cette opération.

- -

Exceptions

- -

Cette méthode peut lever une de ces exceptions {{domxref("DOMException")}} :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
ReadOnlyErrorLa transaction associée à l'opération est uniquement dans un mode de lecture seule.
TransactionInactiveErrorLa transaction rattachée à l'objet {{domxref("IDBObjectStore")}} est inactive.
DataError -

L'une de ces conditions est vérifiée :

- -
    -
  • Le magasin d'objet utilise des clés en ligne (in-line keys) ou dispose d'un générateur de clés et le paramètre pour la clé a été utilisé.
    • -
  • Le magasin d'objet utilise des clés en ligne (in-line keys), ne  dispose pas d'un générateur de clés et le paramètre pour la clé n'a pas été utilisé.
    • -
  • Le magasin d'objet utilise des clés en ligne (in-line keys), ne  dispose pas d'un générateur de clés et le chemin de clé du magasin d'objet ne déclenche pas une clé valide.
    • -
  • Le paramètre pour la clé a été fourni mais la valeur n'est pas une clé valide.
    • -
-
InvalidStateErrorL'objet {{domxref("IDBObjectStore")}} a été supprimé ou déplacé.
DataCloneErrorLes données à enregistrer n'ont pas pu être clonées par l'algorithme interne.
- -

Exemples

- -

Dans l'exemple suivant, on effectue une requête pour obtenir l'enregistrement correspondant à un titre donné. Lorsque cette requête est réussie, on récupère l'enregistrement via la fonction onsuccess. Ensuite, on met à jour une des propriétés de l'enregistrement et on enregistre la valeur mise à jour dans le magasin d'objet avec une autre requête et put().

- -
var title = "Walk dog";
-
-// On ouvre une transaction
-var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
-
-// On obtient la liste to-do dont le titre correspond
-var objectStoreTitleRequest = objectStore.get(title);
-
-objectStoreTitleRequest.onsuccess = function() {
-  // On récupère les données de l'objet associé
-  // à l'enregistrement
-  var data = objectStoreTitleRequest.result;
-
-  // On met à jour la valeur de notified avec "yes"
-  data.notified = "yes";
-
-  // On crée une autre requête pour appliquer cette
-  // mise à jour en base de données
-  var updateTitleRequest = objectStore.put(data);
-
-  // On imprime la transaction à l'origine
-  // de la requête
-  console.log("La transaction originelle est " + updateTitleRequest.transaction);
-
-  // Lorsque cette nouvelle requête a réussi. On affiche
-  // les données grâce à la fonction displayData()
-  updateTitleRequest.onsuccess = function() {
-    displayData();
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.put")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/put/index.md b/files/fr/web/api/idbobjectstore/put/index.md new file mode 100644 index 0000000000..f4c51928b1 --- /dev/null +++ b/files/fr/web/api/idbobjectstore/put/index.md @@ -0,0 +1,150 @@ +--- +title: IDBObjectStore.put() +slug: Web/API/IDBObjectStore/put +tags: + - API + - IDBObjectStore + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBObjectStore/put +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode put(), rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un autre thread, crée un clone structuré de la valeur puis enregistre ce clone dans le magasin d'objet. Cette méthode permet ainsi d'ajouter de nouveaux enregistrements ou de mettre à jour des enregistrements existants dans un magasin d'objet lorsque la transaction est en mode readwrite (lecture-écriture)

+ +

Si l'enregistrement est stocké avec succès, un évènement de succès sera déclenché sur la requête renvoyée par la méthode. La propriété result de cette requête contiendra la clé de l'enregistrement créé ou mis à jour. La propriété transaction de cette requête sera la transaction dans laquelle le magasin d'objet est ouvert.

+ +

La méthode put() permet d'ajouter ou de mettre à jour. Si on souhaite uniquement insérer, on utilisera plutôt {{domxref("IDBObjectStore.add")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var request = objectStore.put(monElement);
+var request = objectStore.put(monElement, cleOptionnelle);
+ +

Paramètres

+ +
+
monElement
+
La valeur qu'on souhaite enregistrer.
+
cleOptionnelle {{optional_inline}}
+
La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si cet argument est absent, la valeur par défaut sera {{jsxref("null")}}.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBRequest")}} qui recevra les évènements qui seront déclenchés suite à cette opération.

+ +

Exceptions

+ +

Cette méthode peut lever une de ces exceptions {{domxref("DOMException")}} :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
ReadOnlyErrorLa transaction associée à l'opération est uniquement dans un mode de lecture seule.
TransactionInactiveErrorLa transaction rattachée à l'objet {{domxref("IDBObjectStore")}} est inactive.
DataError +

L'une de ces conditions est vérifiée :

+ +
    +
  • Le magasin d'objet utilise des clés en ligne (in-line keys) ou dispose d'un générateur de clés et le paramètre pour la clé a été utilisé.
    • +
  • Le magasin d'objet utilise des clés en ligne (in-line keys), ne  dispose pas d'un générateur de clés et le paramètre pour la clé n'a pas été utilisé.
    • +
  • Le magasin d'objet utilise des clés en ligne (in-line keys), ne  dispose pas d'un générateur de clés et le chemin de clé du magasin d'objet ne déclenche pas une clé valide.
    • +
  • Le paramètre pour la clé a été fourni mais la valeur n'est pas une clé valide.
    • +
+
InvalidStateErrorL'objet {{domxref("IDBObjectStore")}} a été supprimé ou déplacé.
DataCloneErrorLes données à enregistrer n'ont pas pu être clonées par l'algorithme interne.
+ +

Exemples

+ +

Dans l'exemple suivant, on effectue une requête pour obtenir l'enregistrement correspondant à un titre donné. Lorsque cette requête est réussie, on récupère l'enregistrement via la fonction onsuccess. Ensuite, on met à jour une des propriétés de l'enregistrement et on enregistre la valeur mise à jour dans le magasin d'objet avec une autre requête et put().

+ +
var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On obtient la liste to-do dont le titre correspond
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère les données de l'objet associé
+  // à l'enregistrement
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la valeur de notified avec "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour appliquer cette
+  // mise à jour en base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // On imprime la transaction à l'origine
+  // de la requête
+  console.log("La transaction originelle est " + updateTitleRequest.transaction);
+
+  // Lorsque cette nouvelle requête a réussi. On affiche
+  // les données grâce à la fonction displayData()
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.put")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbobjectstore/transaction/index.html b/files/fr/web/api/idbobjectstore/transaction/index.html deleted file mode 100644 index 92c8a187db..0000000000 --- a/files/fr/web/api/idbobjectstore/transaction/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: IDBObjectStore.transaction -slug: Web/API/IDBObjectStore/transaction -translation_of: Web/API/IDBObjectStore/transaction ---- -

{{ APIRef("IndexedDB") }}

- -
-

La propriété transaction de l'interface {{domxref("IDBObjectStore")}} renvoie la {{domxref("IDBTransaction","transaction")}} à laquelle l'{{domxref("IDBObjectStore","accès")}} du magasin d'objet appartient.

- -

{{AvailableInWorkers}}

-
- -

Syntaxe

- -
var myTransaction = objectStore.transaction;
- -

Valeur

- -

Une {{domxref("IDBTransaction","transaction")}}.

- -

Exemple

- -

Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet "toDoList" dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.

- -

La propriété transaction affiche la transaction à laquelle l'accès du magasin d'objet appartient.

- -
//Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-	note.innerHTML += '<li>Connexion établie.</li>';
-
-	//Affecte la connexion à la variable db.
-	db = DBOpenRequest.result;
-
-	// Exécutez la fonction addData () pour ajouter un enregistrement au magasin d'objet
-	addData();
-};
-function addData() {
-	// un nouvel objet prêt à être emmagasiné
-	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-	// ouvre une transaction de lecture / écriture  prête au traitement des données sur la connexion
-	var transaction = db.transaction(["toDoList"], "readwrite");
-
-	// en cas de succès de l'ouverture de la transaction
-	transaction.oncomplete = function(event) {
-		note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
-	};
-	// en  cas d'échec de l'ouverture de la transaction
-	transaction.onerror = function(event) {
-		note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>';
-	};
-
-	// ouvre l'accès au un magasin "toDoList" de la transaction
-	var objectStore = transaction.objectStore("toDoList");
-
-//->Affiche la transaction de l'accès du magasin d'objet
-    console.log(objectStore.transaction);
-
-	// Ajoute un enregistrement
-	var objectStoreRequest = objectStore.add(newItem[0]);
-	objectStoreRequest.onsuccess = function(event) {
-		// signale l'ajout de l'enregistrement
-		note.innerHTML += '<li>Enregistrement ajouté.</li>';
-	};
- };
-
- -
-

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBObjectStore.transaction")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbobjectstore/transaction/index.md b/files/fr/web/api/idbobjectstore/transaction/index.md new file mode 100644 index 0000000000..92c8a187db --- /dev/null +++ b/files/fr/web/api/idbobjectstore/transaction/index.md @@ -0,0 +1,106 @@ +--- +title: IDBObjectStore.transaction +slug: Web/API/IDBObjectStore/transaction +translation_of: Web/API/IDBObjectStore/transaction +--- +

{{ APIRef("IndexedDB") }}

+ +
+

La propriété transaction de l'interface {{domxref("IDBObjectStore")}} renvoie la {{domxref("IDBTransaction","transaction")}} à laquelle l'{{domxref("IDBObjectStore","accès")}} du magasin d'objet appartient.

+ +

{{AvailableInWorkers}}

+
+ +

Syntaxe

+ +
var myTransaction = objectStore.transaction;
+ +

Valeur

+ +

Une {{domxref("IDBTransaction","transaction")}}.

+ +

Exemple

+ +

Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet "toDoList" dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.

+ +

La propriété transaction affiche la transaction à laquelle l'accès du magasin d'objet appartient.

+ +
//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += '<li>Connexion établie.</li>';
+
+	//Affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+	// Exécutez la fonction addData () pour ajouter un enregistrement au magasin d'objet
+	addData();
+};
+function addData() {
+	// un nouvel objet prêt à être emmagasiné
+	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+	// ouvre une transaction de lecture / écriture  prête au traitement des données sur la connexion
+	var transaction = db.transaction(["toDoList"], "readwrite");
+
+	// en cas de succès de l'ouverture de la transaction
+	transaction.oncomplete = function(event) {
+		note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
+	};
+	// en  cas d'échec de l'ouverture de la transaction
+	transaction.onerror = function(event) {
+		note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>';
+	};
+
+	// ouvre l'accès au un magasin "toDoList" de la transaction
+	var objectStore = transaction.objectStore("toDoList");
+
+//->Affiche la transaction de l'accès du magasin d'objet
+    console.log(objectStore.transaction);
+
+	// Ajoute un enregistrement
+	var objectStoreRequest = objectStore.add(newItem[0]);
+	objectStoreRequest.onsuccess = function(event) {
+		// signale l'ajout de l'enregistrement
+		note.innerHTML += '<li>Enregistrement ajouté.</li>';
+	};
+ };
+
+ +
+

Note : Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBObjectStore.transaction")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbopendbrequest/blocked_event/index.html b/files/fr/web/api/idbopendbrequest/blocked_event/index.html deleted file mode 100644 index 6789721695..0000000000 --- a/files/fr/web/api/idbopendbrequest/blocked_event/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: blocked -slug: Web/API/IDBOpenDBRequest/blocked_event -translation_of: Web/API/IDBOpenDBRequest/blocked_event -original_slug: Web/API/IDBRequest/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

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/idbopendbrequest/blocked_event/index.md b/files/fr/web/api/idbopendbrequest/blocked_event/index.md new file mode 100644 index 0000000000..6789721695 --- /dev/null +++ b/files/fr/web/api/idbopendbrequest/blocked_event/index.md @@ -0,0 +1,103 @@ +--- +title: blocked +slug: Web/API/IDBOpenDBRequest/blocked_event +translation_of: Web/API/IDBOpenDBRequest/blocked_event +original_slug: Web/API/IDBRequest/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

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/idbopendbrequest/index.html b/files/fr/web/api/idbopendbrequest/index.html deleted file mode 100644 index 2cbb5b3c7e..0000000000 --- a/files/fr/web/api/idbopendbrequest/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: IDBOpenDBRequest -slug: Web/API/IDBOpenDBRequest -tags: - - API - - Base de données - - IndexedDB - - Interface - - Reference - - Référence DOM - - Stockage -translation_of: Web/API/IDBOpenDBRequest ---- -

{{APIRef("IndexedDB")}}

- -
-

L'interface IDBOpenDBRequest de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou  de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}).

-
- -

{{AvailableInWorkers}}

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Hérite  des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}.

- -

Évènements

- -
-
{{domxref("IDBOpenDBRequest.onblocked")}}
-
Le gestionnaire d'événements pour événement bloqué . Cet événement est lancé lorsqu' un événement  upgradeneeded doit être déclenché en raison d'un changement de version, mais que la base de données est toujours en cours d'utilisation (c'est-à-dire, non fermée) quelque part, même après l'envoi de l'évènement versionchange .
-
{{domxref("IDBOpenDBRequest.onupgradeneeded")}}
-
Le gestionnaire d'évènement pour évènement upgradeneeded (mise-à-jour nécessaire), lancé quand une base de données d'une version supérieure à celle de la base de données existante est chargé.
-
- -

Méthodes

- -

Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}.

- -

Exemple

- -

Dans l'exemple ci-dessous,  le gestionnaire onupgradeneeded est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application To-do Notifications (voir cet exemple réel)

- -
var db;
-
-// Ouvre la base de données.
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-// Ces gestionnaires d'évènements agissent sur la base de données en cours d'ouverture.
-  note.innerHTML += '<li>Error loading database.</li>';
-};
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Database initialised.</li>';
-
-  // stocke le résultat de l'ouverture de la base de données dans la variable db .
-  // Ceci est beaucoup moins utilisé.
-  db = DBOpenRequest.result;
-
-  // Exécute la fonction displayData() pour remplir la liste de tâches
-  // avec toutes les données de la lste de tâches déjà dans la base.
-  displayData();
-};
-
-// Cet évènement gère l'évènement par lequel une nouvelle version
-// de la base de données doit être créée. Soit elle n'a pas
-// été créée avant, soit un nouveau numéro de version a été
-// soumis via la ligne "window.indexedDB.open" ci-dessous.
-// Il n'est implémenté que dans les navigateurs récents.
-DBOpenRequest.onupgradeneeded = function(event) {
-  var db = this.result;
-
-  db.onerror = function(event) {
-    note.innerHTML += '<li>Error loading database.</li>';
-  };
-
-  // Crée un objet de stockage pour cette base de données.
-  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
-
-  // définit quels éléments de données l'objet de stockage contiendra.
-
-  objectStore.createIndex("hours", "hours", { unique: false });
-  objectStore.createIndex("minutes", "minutes", { unique: false });
-  objectStore.createIndex("day", "day", { unique: false });
-  objectStore.createIndex("month", "month", { unique: false });
-  objectStore.createIndex("year", "year", { unique: false });
-  objectStore.createIndex("notified", "notified", { unique: false });
-};
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#idl-def-IDBOpenDBRequest', 'IDBOpenDBRequest')}}{{Spec2('IndexedDB')}}Définition initiale
{{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}}{{Spec2("IndexedDB 2")}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBOpenDBRequest")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbopendbrequest/index.md b/files/fr/web/api/idbopendbrequest/index.md new file mode 100644 index 0000000000..2cbb5b3c7e --- /dev/null +++ b/files/fr/web/api/idbopendbrequest/index.md @@ -0,0 +1,127 @@ +--- +title: IDBOpenDBRequest +slug: Web/API/IDBOpenDBRequest +tags: + - API + - Base de données + - IndexedDB + - Interface + - Reference + - Référence DOM + - Stockage +translation_of: Web/API/IDBOpenDBRequest +--- +

{{APIRef("IndexedDB")}}

+ +
+

L'interface IDBOpenDBRequest de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou  de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}).

+
+ +

{{AvailableInWorkers}}

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Hérite  des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}.

+ +

Évènements

+ +
+
{{domxref("IDBOpenDBRequest.onblocked")}}
+
Le gestionnaire d'événements pour événement bloqué . Cet événement est lancé lorsqu' un événement  upgradeneeded doit être déclenché en raison d'un changement de version, mais que la base de données est toujours en cours d'utilisation (c'est-à-dire, non fermée) quelque part, même après l'envoi de l'évènement versionchange .
+
{{domxref("IDBOpenDBRequest.onupgradeneeded")}}
+
Le gestionnaire d'évènement pour évènement upgradeneeded (mise-à-jour nécessaire), lancé quand une base de données d'une version supérieure à celle de la base de données existante est chargé.
+
+ +

Méthodes

+ +

Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}.

+ +

Exemple

+ +

Dans l'exemple ci-dessous,  le gestionnaire onupgradeneeded est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application To-do Notifications (voir cet exemple réel)

+ +
var db;
+
+// Ouvre la base de données.
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Ces gestionnaires d'évènements agissent sur la base de données en cours d'ouverture.
+  note.innerHTML += '<li>Error loading database.</li>';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Database initialised.</li>';
+
+  // stocke le résultat de l'ouverture de la base de données dans la variable db .
+  // Ceci est beaucoup moins utilisé.
+  db = DBOpenRequest.result;
+
+  // Exécute la fonction displayData() pour remplir la liste de tâches
+  // avec toutes les données de la lste de tâches déjà dans la base.
+  displayData();
+};
+
+// Cet évènement gère l'évènement par lequel une nouvelle version
+// de la base de données doit être créée. Soit elle n'a pas
+// été créée avant, soit un nouveau numéro de version a été
+// soumis via la ligne "window.indexedDB.open" ci-dessous.
+// Il n'est implémenté que dans les navigateurs récents.
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = this.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '<li>Error loading database.</li>';
+  };
+
+  // Crée un objet de stockage pour cette base de données.
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // définit quels éléments de données l'objet de stockage contiendra.
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+  objectStore.createIndex("notified", "notified", { unique: false });
+};
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#idl-def-IDBOpenDBRequest', 'IDBOpenDBRequest')}}{{Spec2('IndexedDB')}}Définition initiale
{{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}}{{Spec2("IndexedDB 2")}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBOpenDBRequest")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbrequest/error/index.html b/files/fr/web/api/idbrequest/error/index.html deleted file mode 100644 index 1604f594ad..0000000000 --- a/files/fr/web/api/idbrequest/error/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: IDBRequest.error -slug: Web/API/IDBRequest/error -tags: - - API - - Error - - IDBRequest - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBRequest/error ---- -
{{APIRef("IndexedDB")}}
- -

La propriété error de l'interface {{domxref("IDBRequest")}} renvoie l'erreur associée lorsque la requête est un échec.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var myError = request.error;
- -

Valeur

- -

Une erreur {{domxref("DOMError")}} qui contient l'erreur pertinente. Pour Chrome 48 et les versions ultérieures, cette propriété est une {{domxref("DOMException")}} car DOMError a été retiré du standard pour le DOM. Les codes d'erreurs suivants sont utilisés selon les conditions d'erreur :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ErreurExplication
AbortErrorSi on annule la transaction en cours, toutes les requêtes en cours reçoivent cette erreur.
ConstraintErrorErreur obtenue lorsqu'on tente d'insérer des données qui ne respectent pas une contrainte. C'est un type d'exception utilisé lorsqu'on crée des magasins d'objet et des index. On aura cette erreur lorsqu'on essaiera par exemple d'ajouter une clé qui existe déjà dans l'enregistrement.
QuotaExceededErrorErreur obtenue lorsque atteint le quota d'espace disque et que l'utilisateur refuse de céder plus d'espace mémoire.
UnknownErrorErreur obtenue lorsque l'opération a échoué pour des raisons qui ne sont pas propres à la base de données (par exemple une erreur d'écriture sur le disque).
NoErrorValeur utilisée lorsque la requête est réussie.
VersionErrorErreur obtenue lorsqu'on essaye d'ouvrir une base de données avec une version inférieure à celle dont elle dispose déjà.
- -

En plus des codes d'erreur envoyés à l'objet {{domxref("IDBRequest")}}, les opérations asynchrones peuvent également déclencher des exceptions. La liste décrit les problèmes qui peuvent se produire lorsque la requête est en cours d'exécution mais d'autres problèmes peuvent apparaître lors de la construction de la requête. Ainsi, si la requête a échoué et que le résultat n'est pas disponible, l'exception InvalidStateError sera levée.

- -

Exemples

- -

Dans l'exemple qui suit, on effectue une requête sur le titre de l'enregistrement. Le gestionnaire d'évèvenement onsuccess traite l'enregistrement obtenu depuis le magasin d'objet ({{domxref("IDBObjectStore")}}) et qui est disponible via objectStoreTitleRequest.result. Le gestionnaire met ensuite à jour une propriété de l'enregistrement puis replace l'enregistrement mis à jour dans le magasin d'objet.

- -

On dispose également d'une fonction onerror qui permet d'indiquer l'erreur qui s'est produite si la requêté échoue. Pour consulter un exemple complet, voir l'application de notifications To-do (cf. la démonstration live).

- -
var title = "Walk dog";
-
-// On ouvre une transaction
-var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
-
-// On récupère la liste de tâches avec ce titre
-var objectStoreTitleRequest = objectStore.get(title);
-
-objectStoreTitleRequest.onsuccess = function() {
-  // On récupère l'objet du résultat
-  var data = objectStoreTitleRequest.result;
-
-  // On met à jour la valeur de la propriété notified avec "yes"
-  data.notified = "yes";
-
-  // On crée une autre requête pour replacer l'élément
-  // into the database
-  var updateTitleRequest = objectStore.put(data);
-
-  // Lorsque la requête est réussie, on utilise à nouveau
-  // la fonction the displayData() pour mettre à jour
-  // l'affichage
-  updateTitleRequest.onsuccess = function() {
-    displayData();
-  };
-};
-
-objectStoreTitleRequest.onerror = function() {
-  // S'il se produit une erreur pendant la requête
-  // on l'enregistre
-  console.log("Il y a eu une erreur pour la récupération des données : " + objectStoreTitleRequest.error);
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBRequest-error', 'error')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBRequest.error")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbrequest/error/index.md b/files/fr/web/api/idbrequest/error/index.md new file mode 100644 index 0000000000..1604f594ad --- /dev/null +++ b/files/fr/web/api/idbrequest/error/index.md @@ -0,0 +1,134 @@ +--- +title: IDBRequest.error +slug: Web/API/IDBRequest/error +tags: + - API + - Error + - IDBRequest + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBRequest/error +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété error de l'interface {{domxref("IDBRequest")}} renvoie l'erreur associée lorsque la requête est un échec.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var myError = request.error;
+ +

Valeur

+ +

Une erreur {{domxref("DOMError")}} qui contient l'erreur pertinente. Pour Chrome 48 et les versions ultérieures, cette propriété est une {{domxref("DOMException")}} car DOMError a été retiré du standard pour le DOM. Les codes d'erreurs suivants sont utilisés selon les conditions d'erreur :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ErreurExplication
AbortErrorSi on annule la transaction en cours, toutes les requêtes en cours reçoivent cette erreur.
ConstraintErrorErreur obtenue lorsqu'on tente d'insérer des données qui ne respectent pas une contrainte. C'est un type d'exception utilisé lorsqu'on crée des magasins d'objet et des index. On aura cette erreur lorsqu'on essaiera par exemple d'ajouter une clé qui existe déjà dans l'enregistrement.
QuotaExceededErrorErreur obtenue lorsque atteint le quota d'espace disque et que l'utilisateur refuse de céder plus d'espace mémoire.
UnknownErrorErreur obtenue lorsque l'opération a échoué pour des raisons qui ne sont pas propres à la base de données (par exemple une erreur d'écriture sur le disque).
NoErrorValeur utilisée lorsque la requête est réussie.
VersionErrorErreur obtenue lorsqu'on essaye d'ouvrir une base de données avec une version inférieure à celle dont elle dispose déjà.
+ +

En plus des codes d'erreur envoyés à l'objet {{domxref("IDBRequest")}}, les opérations asynchrones peuvent également déclencher des exceptions. La liste décrit les problèmes qui peuvent se produire lorsque la requête est en cours d'exécution mais d'autres problèmes peuvent apparaître lors de la construction de la requête. Ainsi, si la requête a échoué et que le résultat n'est pas disponible, l'exception InvalidStateError sera levée.

+ +

Exemples

+ +

Dans l'exemple qui suit, on effectue une requête sur le titre de l'enregistrement. Le gestionnaire d'évèvenement onsuccess traite l'enregistrement obtenu depuis le magasin d'objet ({{domxref("IDBObjectStore")}}) et qui est disponible via objectStoreTitleRequest.result. Le gestionnaire met ensuite à jour une propriété de l'enregistrement puis replace l'enregistrement mis à jour dans le magasin d'objet.

+ +

On dispose également d'une fonction onerror qui permet d'indiquer l'erreur qui s'est produite si la requêté échoue. Pour consulter un exemple complet, voir l'application de notifications To-do (cf. la démonstration live).

+ +
var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On récupère la liste de tâches avec ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère l'objet du résultat
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la valeur de la propriété notified avec "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour replacer l'élément
+  // into the database
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque la requête est réussie, on utilise à nouveau
+  // la fonction the displayData() pour mettre à jour
+  // l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+
+objectStoreTitleRequest.onerror = function() {
+  // S'il se produit une erreur pendant la requête
+  // on l'enregistre
+  console.log("Il y a eu une erreur pour la récupération des données : " + objectStoreTitleRequest.error);
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBRequest-error', 'error')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBRequest.error")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbrequest/index.html b/files/fr/web/api/idbrequest/index.html deleted file mode 100644 index dac0d4018c..0000000000 --- a/files/fr/web/api/idbrequest/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: IDBRequest -slug: Web/API/IDBRequest -tags: - - API - - Database - - IDBRequest - - IndexedDB - - Interface - - Reference - - Storage - - TopicStub -translation_of: Web/API/IDBRequest ---- -

{{APIRef("IndexedDB")}}

- -

L'interface IDBRequest de l'API IndexedDB donne accès par ses gestionnaires d'événements aux résultats des requêtes asynchrones sur la base de données, les magasins d'objets ou les index. Chaque opération d'écriture ou lecture sur la base de données utilise une requête.

- -

Cet objet IDBRequest ne contient aucune information sur le résultat de l'opération, mais dès qu'une information est disponible un événement est déclenché. L'objet IDBRequest utilise ses gestionnaires d'événements pour le capter et mettre l'information à disposition.

- -

Toute les opération asynchrone retourne immédiatement une instance IDBRequest avec une propriété readyState défini à 'pending' qui passe à  'done' lorsque la requête réussie ou échoue. Quand l'état passe à done, chaque requête retourne result et error, et un évènement est envoyé sur la requête. Quand l'état est sur pending, chaque accès à result ou error lève une exception InvalidStateError.

- -

Pour faire simple, chaque méthode asynchrome retourne un objet de requête. Si l'opération réussi, le résultat est disponible dans la propriété result et un évènement success est lancé ({{domxref("IDBRequest.onsuccess")}}). Si une erreur est rencontrée, une exeption est disponible dans la propriété error et un évènement error est lancé ({{domxref("IDBRequest.onerror")}}).

- -

L'interface {{domxref("IDBOpenDBRequest")}} est dérivé de IDBRequest.

- -

{{AvailableInWorkers}}

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Hérite des propriétés de {{domxref("EventTarget")}}.

- -
-
{{domxref("IDBRequest.result","result")}} {{readonlyInline}}
-
La propriété result de l'interface IDBRequest renvoie le résultat de la requête. Si la requête est en cours, échoue ou que le résultat n'est pas disponible, l'exception InvalidStateError est levée.
-
{{domxref("IDBRequest.error","error")}} {{readonlyInline}}
-
La propriété error de l'interface IDBRequest indique le code de l'erreur survenue durant le traitement de la requête. Si la requête est en cours l'exception InvalidStateError est levée.
-
{{domxref("IDBRequest.source","source")}} {{readonlyInline}}
-
La propriété source de l'interface IDBRequest renvoie la source de la requête, tel qu'un {{domxref("IDBIndex","index")}}, un {{domxref("IDBObjectStore","magasin d'ojets")}} ou null s'il n'y a pas de source (lors de l'appel {{domxref("indexedDB.open")}} par exemple).
-
{{domxref("IDBRequest.transaction","transaction")}} {{readonlyInline}}
-
La propriété transaction de l'interface IDBRequest renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête. La propriété peut renvoyer null si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.
-
{{domxref("IDBRequest.readyState","readyState")}} {{readonlyInline}}
-
La propriété readyState de l'interface IDBRequest renvoie l'état de la requête. Chaque requête débute avec un statut pending et passe au statut done quand la requête réussie ou échoue.
-
- -

Méthodes

- -

Pas de méthodes spécifiques, mais hérite des méthodes de {{domxref("EventTarget")}}.

- -

Gestionnaire d'événement

- -

On peut écouter les évènement avec addEventListener() ou bien en assignant un gestionnaire d'évènement à la propriété oneventname de cette interface.

- -
-
{{domxref("IDBRequest.onerror","onerror")}}
-
Le gestionnaire d'événement onerror de l'interface IDBRequest capte l'événement error, déclenché quand une requête renvoie une erreur.
-
{{domxref("IDBRequest.onsuccess","onsuccess")}}
-
Le gestionnaire d'événement onsuccess de l'interface IDBRequest capte l'événement success, déclenché quand la requête réussie.
-
- -

Exemple

- -

Dans l'exemple suivant, on ouvre une base de données et on fait une requête. Les gestionnaires d'événement {{domxref("IDBRequest.onsuccess","onsuccess")}} et {{domxref("IDBRequest","onerror")}} sont inclus. Pour un exemple de travail complet, voir notre application To-do Notifications (voir l'exemple en direct).

- -
var db;
-
-// Ouvre une base de données.
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-// Ces deux gestionnaires d'événement interviennent quand la dase de
-// de données s'ouvre ou non.
-DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '<li>Error loading database.</li>';
-};
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Database initialised.</li>';
-
-  // Affecte le resutat de l'ouverture à la variable.
-  db = DBOpenRequest.result;
-};
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#idbrequest', 'IDBRequest')}}{{Spec2('IndexedDB')}}Définition initiale.
{{SpecName("IndexedDB 2", "#request-api", "IDBRequest")}}{{Spec2("IndexedDB 2")}}
- -

Compatibilité avec les navigateurs

- -
-
-
- - -

{{Compat("api.IDBRequest")}}

-
-
-
- -

Voir aussi

- - diff --git a/files/fr/web/api/idbrequest/index.md b/files/fr/web/api/idbrequest/index.md new file mode 100644 index 0000000000..dac0d4018c --- /dev/null +++ b/files/fr/web/api/idbrequest/index.md @@ -0,0 +1,129 @@ +--- +title: IDBRequest +slug: Web/API/IDBRequest +tags: + - API + - Database + - IDBRequest + - IndexedDB + - Interface + - Reference + - Storage + - TopicStub +translation_of: Web/API/IDBRequest +--- +

{{APIRef("IndexedDB")}}

+ +

L'interface IDBRequest de l'API IndexedDB donne accès par ses gestionnaires d'événements aux résultats des requêtes asynchrones sur la base de données, les magasins d'objets ou les index. Chaque opération d'écriture ou lecture sur la base de données utilise une requête.

+ +

Cet objet IDBRequest ne contient aucune information sur le résultat de l'opération, mais dès qu'une information est disponible un événement est déclenché. L'objet IDBRequest utilise ses gestionnaires d'événements pour le capter et mettre l'information à disposition.

+ +

Toute les opération asynchrone retourne immédiatement une instance IDBRequest avec une propriété readyState défini à 'pending' qui passe à  'done' lorsque la requête réussie ou échoue. Quand l'état passe à done, chaque requête retourne result et error, et un évènement est envoyé sur la requête. Quand l'état est sur pending, chaque accès à result ou error lève une exception InvalidStateError.

+ +

Pour faire simple, chaque méthode asynchrome retourne un objet de requête. Si l'opération réussi, le résultat est disponible dans la propriété result et un évènement success est lancé ({{domxref("IDBRequest.onsuccess")}}). Si une erreur est rencontrée, une exeption est disponible dans la propriété error et un évènement error est lancé ({{domxref("IDBRequest.onerror")}}).

+ +

L'interface {{domxref("IDBOpenDBRequest")}} est dérivé de IDBRequest.

+ +

{{AvailableInWorkers}}

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Hérite des propriétés de {{domxref("EventTarget")}}.

+ +
+
{{domxref("IDBRequest.result","result")}} {{readonlyInline}}
+
La propriété result de l'interface IDBRequest renvoie le résultat de la requête. Si la requête est en cours, échoue ou que le résultat n'est pas disponible, l'exception InvalidStateError est levée.
+
{{domxref("IDBRequest.error","error")}} {{readonlyInline}}
+
La propriété error de l'interface IDBRequest indique le code de l'erreur survenue durant le traitement de la requête. Si la requête est en cours l'exception InvalidStateError est levée.
+
{{domxref("IDBRequest.source","source")}} {{readonlyInline}}
+
La propriété source de l'interface IDBRequest renvoie la source de la requête, tel qu'un {{domxref("IDBIndex","index")}}, un {{domxref("IDBObjectStore","magasin d'ojets")}} ou null s'il n'y a pas de source (lors de l'appel {{domxref("indexedDB.open")}} par exemple).
+
{{domxref("IDBRequest.transaction","transaction")}} {{readonlyInline}}
+
La propriété transaction de l'interface IDBRequest renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête. La propriété peut renvoyer null si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.
+
{{domxref("IDBRequest.readyState","readyState")}} {{readonlyInline}}
+
La propriété readyState de l'interface IDBRequest renvoie l'état de la requête. Chaque requête débute avec un statut pending et passe au statut done quand la requête réussie ou échoue.
+
+ +

Méthodes

+ +

Pas de méthodes spécifiques, mais hérite des méthodes de {{domxref("EventTarget")}}.

+ +

Gestionnaire d'événement

+ +

On peut écouter les évènement avec addEventListener() ou bien en assignant un gestionnaire d'évènement à la propriété oneventname de cette interface.

+ +
+
{{domxref("IDBRequest.onerror","onerror")}}
+
Le gestionnaire d'événement onerror de l'interface IDBRequest capte l'événement error, déclenché quand une requête renvoie une erreur.
+
{{domxref("IDBRequest.onsuccess","onsuccess")}}
+
Le gestionnaire d'événement onsuccess de l'interface IDBRequest capte l'événement success, déclenché quand la requête réussie.
+
+ +

Exemple

+ +

Dans l'exemple suivant, on ouvre une base de données et on fait une requête. Les gestionnaires d'événement {{domxref("IDBRequest.onsuccess","onsuccess")}} et {{domxref("IDBRequest","onerror")}} sont inclus. Pour un exemple de travail complet, voir notre application To-do Notifications (voir l'exemple en direct).

+ +
var db;
+
+// Ouvre une base de données.
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Ces deux gestionnaires d'événement interviennent quand la dase de
+// de données s'ouvre ou non.
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '<li>Error loading database.</li>';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Database initialised.</li>';
+
+  // Affecte le resutat de l'ouverture à la variable.
+  db = DBOpenRequest.result;
+};
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#idbrequest', 'IDBRequest')}}{{Spec2('IndexedDB')}}Définition initiale.
{{SpecName("IndexedDB 2", "#request-api", "IDBRequest")}}{{Spec2("IndexedDB 2")}}
+ +

Compatibilité avec les navigateurs

+ +
+
+
+ + +

{{Compat("api.IDBRequest")}}

+
+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbrequest/onerror/index.html b/files/fr/web/api/idbrequest/onerror/index.html deleted file mode 100644 index dc57020d05..0000000000 --- a/files/fr/web/api/idbrequest/onerror/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: IDBRequest.onerror -slug: Web/API/IDBRequest/onerror -translation_of: Web/API/IDBRequest/onerror ---- -

{{ APIRef("IndexedDB") }}

- -

le gestionnaire d'événement onerror de l'interface {{domxref("IDBRequest")}} capte l'événement error, déclenché quand une requête renvoie une erreur.

- -

Le gestionnaire d'événement reçoit l'événement error avec le type="error" en paramètre.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
request.onerror = function( event ) { ... };
- -

Exemple

- -

L'exemple suivant demande un titre d'enregistrement donné, onsuccess obtient l'enregistrement associé au {{domxref("IDBObjectStore","magasin d'objets")}} (mis à disposition en tant que objectStoreTitleRequest.result), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement onerror affiche le code d'erreur si la {{domxref("IDBRequest","requête")}} échoue. Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

- -
var title = "Walk dog";
-
-// Ouvrez une transaction comme d'habitude
-var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
-
-// Obtenez l'objet toDoList qui a ce titre
-var objectStoreTitleRequest = objectStore.get(title);
-
-objectStoreTitleRequest.onsuccess = function() {
-  // Prenez l'objet de données renvoyé comme résultat
-  var data = objectStoreTitleRequest.result;
-
-  // Mettre à jour la valeur notified de l'objet à "yes"
-  data.notified = "yes";
-
-  // Créer une autre requête qui insère le nouvelle élément dans la base de données
-  var updateTitleRequest = objectStore.put(data);
-
-  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
-  updateTitleRequest.onsuccess = function() {
-    displayData();
-  };
-};
-
-objectStoreTitleRequest.onerror = function() {
-  // Si une erreur se produit à la demande, on l'affiche
-  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
-};
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBRequest.onerror")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbrequest/onerror/index.md b/files/fr/web/api/idbrequest/onerror/index.md new file mode 100644 index 0000000000..dc57020d05 --- /dev/null +++ b/files/fr/web/api/idbrequest/onerror/index.md @@ -0,0 +1,84 @@ +--- +title: IDBRequest.onerror +slug: Web/API/IDBRequest/onerror +translation_of: Web/API/IDBRequest/onerror +--- +

{{ APIRef("IndexedDB") }}

+ +

le gestionnaire d'événement onerror de l'interface {{domxref("IDBRequest")}} capte l'événement error, déclenché quand une requête renvoie une erreur.

+ +

Le gestionnaire d'événement reçoit l'événement error avec le type="error" en paramètre.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
request.onerror = function( event ) { ... };
+ +

Exemple

+ +

L'exemple suivant demande un titre d'enregistrement donné, onsuccess obtient l'enregistrement associé au {{domxref("IDBObjectStore","magasin d'objets")}} (mis à disposition en tant que objectStoreTitleRequest.result), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement onerror affiche le code d'erreur si la {{domxref("IDBRequest","requête")}} échoue. Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+ +
var title = "Walk dog";
+
+// Ouvrez une transaction comme d'habitude
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// Obtenez l'objet toDoList qui a ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // Prenez l'objet de données renvoyé comme résultat
+  var data = objectStoreTitleRequest.result;
+
+  // Mettre à jour la valeur notified de l'objet à "yes"
+  data.notified = "yes";
+
+  // Créer une autre requête qui insère le nouvelle élément dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+
+objectStoreTitleRequest.onerror = function() {
+  // Si une erreur se produit à la demande, on l'affiche
+  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBRequest.onerror")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbrequest/onsuccess/index.html b/files/fr/web/api/idbrequest/onsuccess/index.html deleted file mode 100644 index a13ed4c5e7..0000000000 --- a/files/fr/web/api/idbrequest/onsuccess/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: IDBRequest.onsuccess -slug: Web/API/IDBRequest/onsuccess -translation_of: Web/API/IDBRequest/onsuccess ---- -

{{ APIRef("IndexedDB") }}

- - -

Le gestionnaire d'événement onsuccess de l'interface {{domxref("IDBRequest")}} capte l'événement success, déclenché quand la requête réussie.

- -

Le gestionnaire d'événement un événement success avec le type="success" en paramètre.

- -

{{AvailableInWorkers}}

- - -

Syntaxe

- -
request.onsuccess = function( event ) { ... };
- -

Exemple

- -

L'exemple suivant demande un titre d'enregistrement donné, onsuccess obtient l'enregistrement associé de {{domxref("IDBObjectStore")}} (mis à disposition en tant que objectStoreTitleRequest.result), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement onerror affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

- -
var title = "Walk dog";
-
-// Ouvrez une transaction comme d'habitude
-var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
-
-// Obtenez l'objet toDoList qui a ce titre
-var objectStoreTitleRequest = objectStore.get(title);
-
-objectStoreTitleRequest.onsuccess = function() {
-  // Prenez l'objet de données renvoyé comme résultat
-  var data = objectStoreTitleRequest.result;
-
-  // Mettre à jour la valeur notified de l'objet à "yes"
-  data.notified = "yes";
-
-  // Créer une autre requête qui insère le nouvelle élément dans la base de données
-  var updateTitleRequest = objectStore.put(data);
-
-  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
-  updateTitleRequest.onsuccess = function() {
-    displayData();
-  };
-};
-
-objectStoreTitleRequest.onerror = function() {
-  // Si une erreur se produit à la demande, on l'affiche
-  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
-};
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBRequest.onsuccess")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbrequest/onsuccess/index.md b/files/fr/web/api/idbrequest/onsuccess/index.md new file mode 100644 index 0000000000..a13ed4c5e7 --- /dev/null +++ b/files/fr/web/api/idbrequest/onsuccess/index.md @@ -0,0 +1,86 @@ +--- +title: IDBRequest.onsuccess +slug: Web/API/IDBRequest/onsuccess +translation_of: Web/API/IDBRequest/onsuccess +--- +

{{ APIRef("IndexedDB") }}

+ + +

Le gestionnaire d'événement onsuccess de l'interface {{domxref("IDBRequest")}} capte l'événement success, déclenché quand la requête réussie.

+ +

Le gestionnaire d'événement un événement success avec le type="success" en paramètre.

+ +

{{AvailableInWorkers}}

+ + +

Syntaxe

+ +
request.onsuccess = function( event ) { ... };
+ +

Exemple

+ +

L'exemple suivant demande un titre d'enregistrement donné, onsuccess obtient l'enregistrement associé de {{domxref("IDBObjectStore")}} (mis à disposition en tant que objectStoreTitleRequest.result), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement onerror affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+ +
var title = "Walk dog";
+
+// Ouvrez une transaction comme d'habitude
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// Obtenez l'objet toDoList qui a ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // Prenez l'objet de données renvoyé comme résultat
+  var data = objectStoreTitleRequest.result;
+
+  // Mettre à jour la valeur notified de l'objet à "yes"
+  data.notified = "yes";
+
+  // Créer une autre requête qui insère le nouvelle élément dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+
+objectStoreTitleRequest.onerror = function() {
+  // Si une erreur se produit à la demande, on l'affiche
+  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBRequest.onsuccess")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbrequest/readystate/index.html b/files/fr/web/api/idbrequest/readystate/index.html deleted file mode 100644 index 2a91b7552e..0000000000 --- a/files/fr/web/api/idbrequest/readystate/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: IDBRequest.readyState -slug: Web/API/IDBRequest/readyState -tags: - - API - - IDBRequest - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBRequest/readyState ---- -
{{APIRef("IndexedDB")}}
- -

La propriété readyState, rattachée à l'interface {{domxref("IDBRequest")}}, est une propriété en lecture seule qui indique l'état de la requête.

- -

Chaque requête démarre avec l'état pending (c'est-à-dire en attente). Cet état vaut ensuite done (fini) lorsque la requête est terminée (en cas de réussite de l'opération comme en cas d'échec).

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var currentReadyState = request.readyState;
- -

Valeur

- -

La valeur {{domxref("IDBRequestReadyState")}} de la requête, qui peut être l'un de deux valeurs. pending lorsque la requête est en attente, done lorsque celle-ci est finie.

- -

Exemples

- -

Dans l'exemple qui suit, on effectue une requête sur un enregistrement avec un titre donné et on recupère l'enregistrement associé grâce au gestionnaire d'évènement onsuccess à partir du magasin d'objets {{domxref("IDBObjectStore")}}. Ensuite, on met à jour une des propriétés de cet enregistrement et on replace cet objet mis à jour dans le magasin d'objets via une autre requête. La valeur de la propriété readyState pour la deuxième requête est affichée dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre appliction To-do Notifications (cf. également l'exemple live).

- -
var title = "Walk dog";
-
-// On ouvre une transaction
-var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
-
-// On récupère l'enregistrement avec le titre souhaité
-var objectStoreTitleRequest = objectStore.get(title);
-
-objectStoreTitleRequest.onsuccess = function() {
-  // On récupère les données du résultat de la requête
-  var data = objectStoreTitleRequest.result;
-
-  // On met à jour la propriété notified de l'objet
-  // avec la valeur "yes"
-  data.notified = "yes";
-
-  // Ensuite, on crée une autre requête pour insérer
-  // l'enregistrement dans la base de données
-  var updateTitleRequest = objectStore.put(data);
-
-  // On affiche l'état de la requête dans la console
-  console.log("La valeur de readyState est " + updateTitlerequest.readyState);
-
-  // Lorsque cette deuxième requête est appliquée,
-  // on exécute la fonction displayData() afin d'afficher
-  // les données à jour
-  updateTitleRequest.onsuccess = function() {
-    displayData();
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}}{{Spec2("IndexedDB 2")}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBRequest.readyState")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbrequest/readystate/index.md b/files/fr/web/api/idbrequest/readystate/index.md new file mode 100644 index 0000000000..2a91b7552e --- /dev/null +++ b/files/fr/web/api/idbrequest/readystate/index.md @@ -0,0 +1,99 @@ +--- +title: IDBRequest.readyState +slug: Web/API/IDBRequest/readyState +tags: + - API + - IDBRequest + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBRequest/readyState +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété readyState, rattachée à l'interface {{domxref("IDBRequest")}}, est une propriété en lecture seule qui indique l'état de la requête.

+ +

Chaque requête démarre avec l'état pending (c'est-à-dire en attente). Cet état vaut ensuite done (fini) lorsque la requête est terminée (en cas de réussite de l'opération comme en cas d'échec).

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var currentReadyState = request.readyState;
+ +

Valeur

+ +

La valeur {{domxref("IDBRequestReadyState")}} de la requête, qui peut être l'un de deux valeurs. pending lorsque la requête est en attente, done lorsque celle-ci est finie.

+ +

Exemples

+ +

Dans l'exemple qui suit, on effectue une requête sur un enregistrement avec un titre donné et on recupère l'enregistrement associé grâce au gestionnaire d'évènement onsuccess à partir du magasin d'objets {{domxref("IDBObjectStore")}}. Ensuite, on met à jour une des propriétés de cet enregistrement et on replace cet objet mis à jour dans le magasin d'objets via une autre requête. La valeur de la propriété readyState pour la deuxième requête est affichée dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre appliction To-do Notifications (cf. également l'exemple live).

+ +
var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On récupère l'enregistrement avec le titre souhaité
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère les données du résultat de la requête
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la propriété notified de l'objet
+  // avec la valeur "yes"
+  data.notified = "yes";
+
+  // Ensuite, on crée une autre requête pour insérer
+  // l'enregistrement dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // On affiche l'état de la requête dans la console
+  console.log("La valeur de readyState est " + updateTitlerequest.readyState);
+
+  // Lorsque cette deuxième requête est appliquée,
+  // on exécute la fonction displayData() afin d'afficher
+  // les données à jour
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}}{{Spec2("IndexedDB 2")}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBRequest.readyState")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbrequest/result/index.html b/files/fr/web/api/idbrequest/result/index.html deleted file mode 100644 index 066ba37fa7..0000000000 --- a/files/fr/web/api/idbrequest/result/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: IDBRequest.result -slug: Web/API/IDBRequest/result -translation_of: Web/API/IDBRequest/result -browser-compat: api.IDBRequest.result ---- -
{{APIRef("IndexedDB")}}
- -

La propriété result, rattachée à l'interface IDBRequest, renvoie le résultat de la requête. Si la requête échoue et que le résultat n'est pas disponible, une exception InvalidStateError sera levée.

- -
-

Note : Cette fonctionnalité est disponible via les Web Workers.

-
- -

Syntaxe

- -
-let resultat = request.result;
-
- -

Valeur

- -

La valeur du résultat de la requête (le type dépend des objets du magasin d'objets).

- -

Exemple

- -

Dans l'exemple qui suit, on souhaite récupérer l'enregistrement qui correspond à un titre donné. Le gestionnaire d'évènements onsuccess permet de récupérer l'enregistrement contenu dans le magasin d'objet (IDBObjectStore) (via objectStoreTitleRequest.result). Ensuite, on met à jour une propriété de cet enregistrement et on replace cet enregistrement dans le magasin d'objet. Pour un exemple fonctionnel complet, voir l'application To-do Notifications (voir l'exemple live).

- -
-let title = "Promener le chien";
-
-// On ouvre une transaction en lecture/écriture
-let objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
-
-// On récupère l'objet qui possède le titre souhaité
-let objectStoreTitleRequest = objectStore.get(title);
-
-objectStoreTitleRequest.onsuccess = function() {
-  // On agit sur les données de l'objet de la requête
-  let data = objectStoreTitleRequest.result;
-
-  // On met à jour la propriété notified avec "yes"
-  data.notified = "yes";
-
-  // On crée une autre requête pour réinsérer l'objet dans la base
-  let updateTitleRequest = objectStore.put(data);
-
-  // Lorsque cette seconde requête est terminée, on lance displayData() pour rafraîchir l'écran
-  updateTitleRequest.onsuccess = function() {
-    displayData();
-  };
-};
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbrequest/result/index.md b/files/fr/web/api/idbrequest/result/index.md new file mode 100644 index 0000000000..066ba37fa7 --- /dev/null +++ b/files/fr/web/api/idbrequest/result/index.md @@ -0,0 +1,72 @@ +--- +title: IDBRequest.result +slug: Web/API/IDBRequest/result +translation_of: Web/API/IDBRequest/result +browser-compat: api.IDBRequest.result +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété result, rattachée à l'interface IDBRequest, renvoie le résultat de la requête. Si la requête échoue et que le résultat n'est pas disponible, une exception InvalidStateError sera levée.

+ +
+

Note : Cette fonctionnalité est disponible via les Web Workers.

+
+ +

Syntaxe

+ +
+let resultat = request.result;
+
+ +

Valeur

+ +

La valeur du résultat de la requête (le type dépend des objets du magasin d'objets).

+ +

Exemple

+ +

Dans l'exemple qui suit, on souhaite récupérer l'enregistrement qui correspond à un titre donné. Le gestionnaire d'évènements onsuccess permet de récupérer l'enregistrement contenu dans le magasin d'objet (IDBObjectStore) (via objectStoreTitleRequest.result). Ensuite, on met à jour une propriété de cet enregistrement et on replace cet enregistrement dans le magasin d'objet. Pour un exemple fonctionnel complet, voir l'application To-do Notifications (voir l'exemple live).

+ +
+let title = "Promener le chien";
+
+// On ouvre une transaction en lecture/écriture
+let objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On récupère l'objet qui possède le titre souhaité
+let objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On agit sur les données de l'objet de la requête
+  let data = objectStoreTitleRequest.result;
+
+  // On met à jour la propriété notified avec "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour réinsérer l'objet dans la base
+  let updateTitleRequest = objectStore.put(data);
+
+  // Lorsque cette seconde requête est terminée, on lance displayData() pour rafraîchir l'écran
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbrequest/source/index.html b/files/fr/web/api/idbrequest/source/index.html deleted file mode 100644 index 8a03050021..0000000000 --- a/files/fr/web/api/idbrequest/source/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: IDBRequest.source -slug: Web/API/IDBRequest/source -tags: - - API - - IDBRequest - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBRequest/source ---- -
{{APIRef("IndexedDB")}}
- -

La propriété source est une propriété en lecture seule, rattachée à l'interface {{domxref("IDBRequest")}}, et qui indique la source de la requête (c'est-à-dire l'index ou le magasin d'objets utilisé). Si aucune source n'existe (par exemple car on a appelé {{domxref("indexedDB.open")}}), la propriété vaut null.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var IDBIndex = request.source;
-var IDBCursor = request.source;
-var IDBObjectStore = request.source;
-
- -

Valeur

- -

Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet  {{domxref("IDBCursor")}}.

- -

Exemples

- -

Dans l'exemple qui suit, on récupère un enregistrement avec un titre donné depuis un magasin d'objets. Ensuite, on met à jour une des propriétés de cet enregistrement et on met à jour le magasin d'objets en insérant cet objet modifié. Lors de cette deuxième requête, on affiche la source dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre application To-do Notifications (cf. l'exemple live).

- -
var title = "Walk dog";
-
-// On ouvre une transaction
-var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
-
-// On fait une requête pour récupérer
-// l'enregistrement qui possède le titre
-// souhaité
-var objectStoreTitleRequest = objectStore.get(title);
-
-objectStoreTitleRequest.onsuccess = function() {
-  // On récupère l'objet afin de le modifier
-  var data = objectStoreTitleRequest.result;
-
-  // On met à jour la propriété notified
-  // avec la valeur "yes"
-  data.notified = "yes";
-
-  // On crée une autre requête pour replacer
-  // l'enregistrement modifié dans la base de d
-  // données
-  var updateTitleRequest = objectStore.put(data);
-
-  // Ici, on affiche la source de la requête dans
-  // la console
-  console.log("La source de cette requête est " + updateTitlerequest.source);
-  // Quand cette deuxième requête sera appliquée,
-  // on lancera displayData() pour mettre à jour
-  // l'affichage
-  updateTitleRequest.onsuccess = function() { displayData(); };
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBRequest-source', 'source')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}}{{Spec2("IndexedDB 2")}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBRequest.source")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbrequest/source/index.md b/files/fr/web/api/idbrequest/source/index.md new file mode 100644 index 0000000000..8a03050021 --- /dev/null +++ b/files/fr/web/api/idbrequest/source/index.md @@ -0,0 +1,102 @@ +--- +title: IDBRequest.source +slug: Web/API/IDBRequest/source +tags: + - API + - IDBRequest + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBRequest/source +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété source est une propriété en lecture seule, rattachée à l'interface {{domxref("IDBRequest")}}, et qui indique la source de la requête (c'est-à-dire l'index ou le magasin d'objets utilisé). Si aucune source n'existe (par exemple car on a appelé {{domxref("indexedDB.open")}}), la propriété vaut null.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var IDBIndex = request.source;
+var IDBCursor = request.source;
+var IDBObjectStore = request.source;
+
+ +

Valeur

+ +

Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet  {{domxref("IDBCursor")}}.

+ +

Exemples

+ +

Dans l'exemple qui suit, on récupère un enregistrement avec un titre donné depuis un magasin d'objets. Ensuite, on met à jour une des propriétés de cet enregistrement et on met à jour le magasin d'objets en insérant cet objet modifié. Lors de cette deuxième requête, on affiche la source dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre application To-do Notifications (cf. l'exemple live).

+ +
var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On fait une requête pour récupérer
+// l'enregistrement qui possède le titre
+// souhaité
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère l'objet afin de le modifier
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la propriété notified
+  // avec la valeur "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour replacer
+  // l'enregistrement modifié dans la base de d
+  // données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Ici, on affiche la source de la requête dans
+  // la console
+  console.log("La source de cette requête est " + updateTitlerequest.source);
+  // Quand cette deuxième requête sera appliquée,
+  // on lancera displayData() pour mettre à jour
+  // l'affichage
+  updateTitleRequest.onsuccess = function() { displayData(); };
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBRequest-source', 'source')}}{{Spec2('IndexedDB')}} 
{{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}}{{Spec2("IndexedDB 2")}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBRequest.source")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbrequest/transaction/index.html b/files/fr/web/api/idbrequest/transaction/index.html deleted file mode 100644 index a81f6d0774..0000000000 --- a/files/fr/web/api/idbrequest/transaction/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: IDBRequest.transaction -slug: Web/API/IDBRequest/transaction -translation_of: Web/API/IDBRequest/transaction ---- -

{{ APIRef("IndexedDB") }}

- -

La propriété transaction de l'interface IDBRequest renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête.La propriètè peut renvoiyer null si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.

- -
-

Note : Durant la gestion d'un événement {{domxref("IDBOpenDBRequest.onupgradeneeded", "upgradeneeded")}} qui met à jour la version de la base de données, la propriété transaction doit être une {{domxref("IDBTransaction","transaction")}} ouverte en {{domxref("IDBTransaction.mode", "mode")}} "versionchange", on peut alors accéder aux {{domxref("IDBObjectStore","magasins d'objets")}} et {{domxref("IDBIndex","index")}} ou annulé la mise à niveau. Après quoi, la propriété transaction renverra encore null.

-
- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var myTransaction = request.transaction;
- -

Valeur

- -

Une {{domxref("IDBTransaction","transaction")}}.

- -

Exemple

- -

L'exemple suivant demande un titre d'enregistrement donné, onsuccess obtient l'enregistrement associé du {{domxref("IDBObjectStore","magasin d'objects")}} (mis à disposition en tant que objectStoreTitleRequest.result), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objects. La {{domxref("IDBTransaction","transaction")}} à l'origine de la deuxième {{domxref("IBBRequest","requête")}} est affichée sur la console du développeur (Ps, les deux requêtes proviennent de la même transaction). En bas est une fonction onerror qui affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

- -
var title = "Walk dog";
-
-// Ouvrez une transaction comme d'habitude
-var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
-
-// Obtenez l'objet toDoList qui a ce titre
-var objectStoreTitleRequest = objectStore.get(title);
-
-objectStoreTitleRequest.onsuccess = function() {
-  // Prenez l'objet de données renvoyé comme résultat
-  var data = objectStoreTitleRequest.result;
-
-  // Mettre à jour la valeur notified de l'objet à "yes"
-  data.notified = "yes";
-
-  // Créer une autre requête qui insère le nouvelle élément dans la base de données
-  var updateTitleRequest = objectStore.put(data);
-
-  // Affiche la transaction à l'origine de la deuxième requête
-  console.log(" la transaction à l'origine de ces requêtes est " + updateTitleRequest.transaction);
-
-  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
-  updateTitleRequest.onsuccess = function() {
-    displayData();
-  };
-
-objectStoreTitleRequest.onerror = function() {
-  // Si une erreur pendant la requête, on l'affiche
-  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
-};
-
- -

Cet exemple montre comment la propriété transaction peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: ​

- -
var openRequest = indexedDB.open('db', 2);
-console.log(openRequest.transaction); // Affiche "null".
-
-openRequest.onupgradeneeded = function(event) {
-  console.log(openRequest.transaction.mode); // Affiche "versionchange".
-  var db = openRequest.result;
-  if (event.oldVersion < 1) {
-    // Nouvelle base de données, créer un magasin d'objets "livres".
-    db.createObjectStore('books');
-  }
-  if (event.oldVersion < 2) {
-    // Mise à niveau de la base de données v1: ajoute un index sur "title" pour stocker les livres.
-    var bookStore = openRequest.transaction.objectStore('books');
-    bookStore.createIndex('by_title', 'title');
-  }
-};
-
-openRequest.onsuccess = function() {
-  console.log(openRequest.transaction); // Affiche "null".
-};
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBRequest.transaction")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbrequest/transaction/index.md b/files/fr/web/api/idbrequest/transaction/index.md new file mode 100644 index 0000000000..a81f6d0774 --- /dev/null +++ b/files/fr/web/api/idbrequest/transaction/index.md @@ -0,0 +1,115 @@ +--- +title: IDBRequest.transaction +slug: Web/API/IDBRequest/transaction +translation_of: Web/API/IDBRequest/transaction +--- +

{{ APIRef("IndexedDB") }}

+ +

La propriété transaction de l'interface IDBRequest renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête.La propriètè peut renvoiyer null si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.

+ +
+

Note : Durant la gestion d'un événement {{domxref("IDBOpenDBRequest.onupgradeneeded", "upgradeneeded")}} qui met à jour la version de la base de données, la propriété transaction doit être une {{domxref("IDBTransaction","transaction")}} ouverte en {{domxref("IDBTransaction.mode", "mode")}} "versionchange", on peut alors accéder aux {{domxref("IDBObjectStore","magasins d'objets")}} et {{domxref("IDBIndex","index")}} ou annulé la mise à niveau. Après quoi, la propriété transaction renverra encore null.

+
+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var myTransaction = request.transaction;
+ +

Valeur

+ +

Une {{domxref("IDBTransaction","transaction")}}.

+ +

Exemple

+ +

L'exemple suivant demande un titre d'enregistrement donné, onsuccess obtient l'enregistrement associé du {{domxref("IDBObjectStore","magasin d'objects")}} (mis à disposition en tant que objectStoreTitleRequest.result), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objects. La {{domxref("IDBTransaction","transaction")}} à l'origine de la deuxième {{domxref("IBBRequest","requête")}} est affichée sur la console du développeur (Ps, les deux requêtes proviennent de la même transaction). En bas est une fonction onerror qui affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre To-do Notifications app (view example live).

+ +
var title = "Walk dog";
+
+// Ouvrez une transaction comme d'habitude
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// Obtenez l'objet toDoList qui a ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // Prenez l'objet de données renvoyé comme résultat
+  var data = objectStoreTitleRequest.result;
+
+  // Mettre à jour la valeur notified de l'objet à "yes"
+  data.notified = "yes";
+
+  // Créer une autre requête qui insère le nouvelle élément dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Affiche la transaction à l'origine de la deuxième requête
+  console.log(" la transaction à l'origine de ces requêtes est " + updateTitleRequest.transaction);
+
+  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+
+objectStoreTitleRequest.onerror = function() {
+  // Si une erreur pendant la requête, on l'affiche
+  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+};
+
+ +

Cet exemple montre comment la propriété transaction peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: ​

+ +
var openRequest = indexedDB.open('db', 2);
+console.log(openRequest.transaction); // Affiche "null".
+
+openRequest.onupgradeneeded = function(event) {
+  console.log(openRequest.transaction.mode); // Affiche "versionchange".
+  var db = openRequest.result;
+  if (event.oldVersion < 1) {
+    // Nouvelle base de données, créer un magasin d'objets "livres".
+    db.createObjectStore('books');
+  }
+  if (event.oldVersion < 2) {
+    // Mise à niveau de la base de données v1: ajoute un index sur "title" pour stocker les livres.
+    var bookStore = openRequest.transaction.objectStore('books');
+    bookStore.createIndex('by_title', 'title');
+  }
+};
+
+openRequest.onsuccess = function() {
+  console.log(openRequest.transaction); // Affiche "null".
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBRequest.transaction")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/abort/index.html b/files/fr/web/api/idbtransaction/abort/index.html deleted file mode 100644 index a7baf8d966..0000000000 --- a/files/fr/web/api/idbtransaction/abort/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: IDBTransaction.abort() -slug: Web/API/IDBTransaction/abort -tags: - - API - - IDBTransaction - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBTransaction/abort ---- -
{{APIRef("IndexedDB")}}
- -

La méthode abort(), rattachée à l'interface {{domxref("IDBTransaction")}}, permet d'annuler les modifications apportées aux objets de la base de données pendant la transaction courante.

- -

Tous les objets {{domxref("IDBRequest")}} créés pendant cette transaction verront leur attribut {{domxref("IDBRequest.error")}} prendre la valeur AbortError.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
transaction.abort();
- -

Valeur de retour

- -

Aucune.

- -

Exceptions

- -

Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type InvalidStateError lorsque la transaction a été validée ou qu'elle a déjà été annulée.

- -

Exemples

- -

Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On dispose également de fonctions attachées aux gestionnaires d'évènements de la transaction pour gérer la réussite ou l'échec des opérations. Ensuite, on annule les opérations de la transaction grâce à abort(). Pour un exemple complet, vous pouvez consulter notre application de notifications To-do (cf. la démonstration live).

- -
// On ouvre la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Initialisation de la base.</li>';
-
-  // On enregistre le résultat de l'ouverture dans la
-  // variable db afin de l'utiliser ensuite
-  db = DBOpenRequest.result;
-
-  // On exécute la fonction addData() afin d'ajouter
-  // des données à la base de données
-  addData();
-};
-
-function addData() {
-  // On crée un nouvel objet pour l'insérer dans la reate a new object ready for being
-  // inserted into the IDB
-  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture
-  // afin d'ajouter des données
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // On gère la réussite de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modifications appliquées.</li>';
-  };
-
-
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>Transaction non ouverte à cause d'une erreur.</li>';
-  };
-
-  // On crée le magasin d'objet pour la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // On ajoute un nouvel objet newItem au magasin d'objet
-  var objectStoreRequest = objectStore.add(newItem[0]);
-
-  objectStoreRequest.onsuccess = function(event) {
-    // On gère la réussite de l'ajout de l'élément dans
-    // la base de données
-    note.innerHTML += '<li>Nouvel objet ajouté dans la base de données.</li>';
-  };
-
-  // On annule la transaction en cours
-  transaction.abort();
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBTransaction.abort")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/abort/index.md b/files/fr/web/api/idbtransaction/abort/index.md new file mode 100644 index 0000000000..a7baf8d966 --- /dev/null +++ b/files/fr/web/api/idbtransaction/abort/index.md @@ -0,0 +1,117 @@ +--- +title: IDBTransaction.abort() +slug: Web/API/IDBTransaction/abort +tags: + - API + - IDBTransaction + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBTransaction/abort +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode abort(), rattachée à l'interface {{domxref("IDBTransaction")}}, permet d'annuler les modifications apportées aux objets de la base de données pendant la transaction courante.

+ +

Tous les objets {{domxref("IDBRequest")}} créés pendant cette transaction verront leur attribut {{domxref("IDBRequest.error")}} prendre la valeur AbortError.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
transaction.abort();
+ +

Valeur de retour

+ +

Aucune.

+ +

Exceptions

+ +

Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type InvalidStateError lorsque la transaction a été validée ou qu'elle a déjà été annulée.

+ +

Exemples

+ +

Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On dispose également de fonctions attachées aux gestionnaires d'évènements de la transaction pour gérer la réussite ou l'échec des opérations. Ensuite, on annule les opérations de la transaction grâce à abort(). Pour un exemple complet, vous pouvez consulter notre application de notifications To-do (cf. la démonstration live).

+ +
// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Initialisation de la base.</li>';
+
+  // On enregistre le résultat de l'ouverture dans la
+  // variable db afin de l'utiliser ensuite
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData() afin d'ajouter
+  // des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet pour l'insérer dans la reate a new object ready for being
+  // inserted into the IDB
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // afin d'ajouter des données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On gère la réussite de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modifications appliquées.</li>';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>Transaction non ouverte à cause d'une erreur.</li>';
+  };
+
+  // On crée le magasin d'objet pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute un nouvel objet newItem au magasin d'objet
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On gère la réussite de l'ajout de l'élément dans
+    // la base de données
+    note.innerHTML += '<li>Nouvel objet ajouté dans la base de données.</li>';
+  };
+
+  // On annule la transaction en cours
+  transaction.abort();
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBTransaction.abort")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/abort_event/index.html b/files/fr/web/api/idbtransaction/abort_event/index.html deleted file mode 100644 index 86a1413564..0000000000 --- a/files/fr/web/api/idbtransaction/abort_event/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: abort -slug: Web/API/IDBTransaction/abort_event -translation_of: Web/API/IDBTransaction/abort_event ---- -

Le gestionnaire d'arrêt est exécuté lorsqu'une transaction a été interrompue.

- -

Informations générales

- -
-
Spécification
-
IndexedDB
-
Interface
-
Event
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
IDBTransaction
-
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

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/abort_event/index.md b/files/fr/web/api/idbtransaction/abort_event/index.md new file mode 100644 index 0000000000..86a1413564 --- /dev/null +++ b/files/fr/web/api/idbtransaction/abort_event/index.md @@ -0,0 +1,75 @@ +--- +title: abort +slug: Web/API/IDBTransaction/abort_event +translation_of: Web/API/IDBTransaction/abort_event +--- +

Le gestionnaire d'arrêt est exécuté lorsqu'une transaction a été interrompue.

+ +

Informations générales

+ +
+
Spécification
+
IndexedDB
+
Interface
+
Event
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
IDBTransaction
+
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

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/complete_event/index.html b/files/fr/web/api/idbtransaction/complete_event/index.html deleted file mode 100644 index ed134208b2..0000000000 --- a/files/fr/web/api/idbtransaction/complete_event/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: complete -slug: Web/API/IDBTransaction/complete_event -translation_of: Web/API/IDBTransaction/complete_event ---- -

Le gestionnaire complete est exécuté lorsqu'une transaction est complétée avec succès.

- -

Informations générales

- -
-
Spécification
-
IndexedDB
-
Interface
-
Event
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
IDBTransaction
-
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.
- -

Exemple

- -
var transaction = db.transaction(["customers"], IDBTransaction.versionchange);
-
-transaction.oncomplete = function( event ) {
-  ...
-}
-
-// qui est équivalent à
-transaction.addEventListener("complete", function( event ) {
-  ...
-});
-
- -

Evénements liés

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/complete_event/index.md b/files/fr/web/api/idbtransaction/complete_event/index.md new file mode 100644 index 0000000000..ed134208b2 --- /dev/null +++ b/files/fr/web/api/idbtransaction/complete_event/index.md @@ -0,0 +1,89 @@ +--- +title: complete +slug: Web/API/IDBTransaction/complete_event +translation_of: Web/API/IDBTransaction/complete_event +--- +

Le gestionnaire complete est exécuté lorsqu'une transaction est complétée avec succès.

+ +

Informations générales

+ +
+
Spécification
+
IndexedDB
+
Interface
+
Event
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
IDBTransaction
+
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.
+ +

Exemple

+ +
var transaction = db.transaction(["customers"], IDBTransaction.versionchange);
+
+transaction.oncomplete = function( event ) {
+  ...
+}
+
+// qui est équivalent à
+transaction.addEventListener("complete", function( event ) {
+  ...
+});
+
+ +

Evénements liés

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/db/index.html b/files/fr/web/api/idbtransaction/db/index.html deleted file mode 100644 index a193d733ca..0000000000 --- a/files/fr/web/api/idbtransaction/db/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: IDBTransaction.db -slug: Web/API/IDBTransaction/db -tags: - - API - - IDBTransaction - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBTransaction/db ---- -
{{APIRef("IndexedDB")}}
- -

La propriété db de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée associée à la {{domxref("IDBTransaction","transaction","",1)}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var myDatabase = transaction.db;
- -

Valeur

- -

Une {{domxref("IDBDatabase","connexion","",1)}} à la base de données sous la forme d'un objet IDBDatabase.

- -

Exemples

- -

Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  "toDoList" et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.

- -

À la fin, la méthode db sert à renvoyer la connexion à la base de données associée à la transaction.

- -
//Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += 'Connexion établie.';
-
-  //Affecter la connexion à la variable db.
-  db = DBOpenRequest.result;
-
-  // Exécuter la fonction addData () pour emmagasiner
-  // les données dans la base
-  addData();
-};
-function addData() {
-    //Un nouvel objet prêt à être emmagasiné
-  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // Ouvrir une transaction de lecture / écriture
-  // pour permettre le traitement des données sur la connexion
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // En cas de succès de l'ouverture de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
-  };
-  // En  cas d'échec de l'ouverture de la transaction
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>Erreur transaction non ouverte, doublons interdits.</li>';
-  };
-
-  // Ouvrir l'accès au un magasin "toDoList" de la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // Ajouter un enregistrement
-  var objectStoreRequest = objectStore.add(newItem[0]);
-  objectStoreRequest.onsuccess = function(event) {
-    // Signaler l'ajout de l'enregistrement
-    note.innerHTML += '<li>Enregistrement ajouté.</li>';
-  };
-  // Renvoyer la connexion à la base de donnée
-  //associée à cette transaction.
-  transaction.db;
-};
-
- -
-

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-db', 'db')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBTransaction.db")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/db/index.md b/files/fr/web/api/idbtransaction/db/index.md new file mode 100644 index 0000000000..a193d733ca --- /dev/null +++ b/files/fr/web/api/idbtransaction/db/index.md @@ -0,0 +1,112 @@ +--- +title: IDBTransaction.db +slug: Web/API/IDBTransaction/db +tags: + - API + - IDBTransaction + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBTransaction/db +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété db de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée associée à la {{domxref("IDBTransaction","transaction","",1)}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var myDatabase = transaction.db;
+ +

Valeur

+ +

Une {{domxref("IDBDatabase","connexion","",1)}} à la base de données sous la forme d'un objet IDBDatabase.

+ +

Exemples

+ +

Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  "toDoList" et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.

+ +

À la fin, la méthode db sert à renvoyer la connexion à la base de données associée à la transaction.

+ +
//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += 'Connexion établie.';
+
+  //Affecter la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Exécuter la fonction addData () pour emmagasiner
+  // les données dans la base
+  addData();
+};
+function addData() {
+    //Un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // Ouvrir une transaction de lecture / écriture
+  // pour permettre le traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // En cas de succès de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
+  };
+  // En  cas d'échec de l'ouverture de la transaction
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>Erreur transaction non ouverte, doublons interdits.</li>';
+  };
+
+  // Ouvrir l'accès au un magasin "toDoList" de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Ajouter un enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // Signaler l'ajout de l'enregistrement
+    note.innerHTML += '<li>Enregistrement ajouté.</li>';
+  };
+  // Renvoyer la connexion à la base de donnée
+  //associée à cette transaction.
+  transaction.db;
+};
+
+ +
+

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-db', 'db')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBTransaction.db")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/error/index.html b/files/fr/web/api/idbtransaction/error/index.html deleted file mode 100644 index ccbd3c3252..0000000000 --- a/files/fr/web/api/idbtransaction/error/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: IDBTransaction.error -slug: Web/API/IDBTransaction/error -tags: - - API - - Erreur - - IDBTransaction - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBTransaction/error ---- -
{{APIRef("IndexedDB")}}
- -

La propriété IDBTransaction.error de l'interface {{domxref("IDBTransaction")}} renvoie un type d'erreur lorsque la {{domxref("IDBTransaction","transaction","",1)}} échoue.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var myError = transaction.error;
- -

Valeur

- -

L'{{domxref("DOMError","erreur","",1)}} correspondante qui est un objet DOMError. Il y a différents types d'erreurs possibles : l'erreur obtenue peut ainsi faire référence à l'objet de la requête qui l'a déclenchée ou à un échec de la transaction (par exemple QuotaExceededError ou UnknownError).

- -

Cette propriété vaut null si la transaction n'est pas terminée ou qu'elle est terminée avec succès ou qu'elle a été annulée avec la méthode {{domxref("IDBTransaction.abort","abort")}}.

- -
-

Note : Dans Chrome 48+ cette propriété renvoie une exception {{domxref ("DOMException")}} parce que le type {{domxref("DOMError")}} a été retiré de la norme DOM.

-
- -

Exemples

- -

Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  "toDoList" et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.

- -

La propriété error sert dans le bloc transaction.onerror = function(event) {...} afin d'afficher le type d'erreur qui est survenue.

- -
//Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Connexion établie.</li>';
-
-  //Affecter la connexion à la variable db.
-  db = DBOpenRequest.result;
-
-  // Exécuter la fonction addData () pour emmagasiner
-  // les données dans la base
-  addData();
-};
-
-function addData() {
-  // Créer un nouvel objet prêt à être emmagasiné
-  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // Ouvrir une transaction de lecture / écriture
-  // pour permettre le traitement des données sur la connexion
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // En cas de succès de l'ouverture de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modification de la base de données terminée.</li>';
-  };
-  // En  cas d'échec de l'ouverture de la transaction
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
-  };
-
-  // Ouvrir l'accès au un magasin "toDoList" de la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // Ajouter un enregistrement
-  var objectStoreRequest = objectStore.add(newItem[0]);
-  objectStoreRequest.onsuccess = function(event) {
-    // Signaler l'ajout de l'enregistrement
-    note.innerHTML += '<li>Enregistrement ajouté.</li>';
-  };
- };
-
- -
-

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBTransaction.error")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/error/index.md b/files/fr/web/api/idbtransaction/error/index.md new file mode 100644 index 0000000000..ccbd3c3252 --- /dev/null +++ b/files/fr/web/api/idbtransaction/error/index.md @@ -0,0 +1,117 @@ +--- +title: IDBTransaction.error +slug: Web/API/IDBTransaction/error +tags: + - API + - Erreur + - IDBTransaction + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBTransaction/error +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété IDBTransaction.error de l'interface {{domxref("IDBTransaction")}} renvoie un type d'erreur lorsque la {{domxref("IDBTransaction","transaction","",1)}} échoue.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var myError = transaction.error;
+ +

Valeur

+ +

L'{{domxref("DOMError","erreur","",1)}} correspondante qui est un objet DOMError. Il y a différents types d'erreurs possibles : l'erreur obtenue peut ainsi faire référence à l'objet de la requête qui l'a déclenchée ou à un échec de la transaction (par exemple QuotaExceededError ou UnknownError).

+ +

Cette propriété vaut null si la transaction n'est pas terminée ou qu'elle est terminée avec succès ou qu'elle a été annulée avec la méthode {{domxref("IDBTransaction.abort","abort")}}.

+ +
+

Note : Dans Chrome 48+ cette propriété renvoie une exception {{domxref ("DOMException")}} parce que le type {{domxref("DOMError")}} a été retiré de la norme DOM.

+
+ +

Exemples

+ +

Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  "toDoList" et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.

+ +

La propriété error sert dans le bloc transaction.onerror = function(event) {...} afin d'afficher le type d'erreur qui est survenue.

+ +
//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Connexion établie.</li>';
+
+  //Affecter la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Exécuter la fonction addData () pour emmagasiner
+  // les données dans la base
+  addData();
+};
+
+function addData() {
+  // Créer un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // Ouvrir une transaction de lecture / écriture
+  // pour permettre le traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // En cas de succès de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modification de la base de données terminée.</li>';
+  };
+  // En  cas d'échec de l'ouverture de la transaction
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
+  };
+
+  // Ouvrir l'accès au un magasin "toDoList" de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Ajouter un enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // Signaler l'ajout de l'enregistrement
+    note.innerHTML += '<li>Enregistrement ajouté.</li>';
+  };
+ };
+
+ +
+

Note : pour un exemple fonctionnel complet, voir notre application To-do (exemple).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBTransaction.error")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/index.html b/files/fr/web/api/idbtransaction/index.html deleted file mode 100644 index b856029dee..0000000000 --- a/files/fr/web/api/idbtransaction/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: IDBTransaction -slug: Web/API/IDBTransaction -tags: - - API - - IDBTransaction - - IndexedDB - - Interface - - Reference -translation_of: Web/API/IDBTransaction ---- -
{{APIRef("IndexedDB")}}
- -

L'interface IDBTransaction de l'API IndexedDB fournit une transaction statique asynchrone vers une base de données grâce à des attributs de gestion d'évènementns. Toutes les opérations de lecture et d'écriture de données sont effectuées au sein de transaction. Il est possible d'utiliser {{domxref("IDBDatabase")}} afin d'initier des transactions puis {{domxref("IDBTransaction")}} afin de paramétrer le mode de la transaction (c'est-à-dire s'il est en lecture seule ou en lecture/écriture) et d'accéder à un objet {{domxref("IDBObjectStore")}} pour réaliser une requête. On peut également utiliser IDBTransaction pour interrompre une requête.

- -

S'il vous garantir une certaine longévité (par exemple si on utilise des données critiques qui ne peuvent pas être recalculées par la suite), il est possible d'écrire le contenu de la transaction sur le disque avant la diffusion de l'évènement complete grâce au mode expérimental non-standard readwriteflush (cf. {{domxref("IDBDatabase.transaction")}}).

- -

On notera qu'une transaction commence dès sa création et pas lorsque la première requête est lancée. Par exemple :

- -
var trans1 = db.transaction("toto", "readwrite");
-var trans2 = db.transaction("toto", "readwrite");
-trans2.put("2", "clé");
-trans1.put("1", "clé");
-
- -

Une fois que le code est exécuté, le magasin d'objet contiendra la valeur "2" car la transaction est lancée après la transaction trans1.

- -

{{AvailableInWorkers}}

- -

Méthodes

- -

Cette interface hérite de {{domxref("EventTarget")}}.

- -
-
{{domxref("IDBTransaction.abort")}}
-
Cette méthode annule les modifications apportées aux objets associés à cette transaction. Si la transaction a déjà été interrompue ou est terminée, cette méthode déclenchera un évènement d'erreur.
-
{{domxref("IDBTransaction.objectStore")}}
-
Cette méthode renvoie un objet {{domxref("IDBObjectStore")}} qui représente le magasin d'objet associé à cette transaction.
-
- -

Propriétés

- -
-
{{domxref("IDBTransaction.db")}} {{readonlyInline}}
-
La connexion à la base de données associée à cette transaction.
-
{{domxref("IDBTransaction.mode")}} {{readonlyInline}}
-
Le mode de la transaction qui définit la façon dont on accède/modifie les données. Les différentes valeurs sont définies ci-après dans la section Constante. Par défaut, la valeur est readonly.
-
{{domxref("IDBTransaction.objectStoreNames")}} {{readonlyinline}}
-
Cette propriété est une liste ({{domxref("DOMStringList")}}) des noms des objets {{domxref("IDBObjectStore")}}.
-
{{domxref("IDBTransaction.error")}} {{readonlyInline}}
-
Cette propriété renvoie le type de l'erreur qui se produit lorsque la transaction infructueuse. Cette propriété vaut null si la transaction n'est pas finie, est finie et validée correctement ou a été cloturée avec la fonction{{domxref("IDBTransaction.abort")}}.
-
- -

Gestionnaires d'évènements

- -
-
{{domxref("IDBTransaction.onabort")}} {{readonlyInline}}
-
Ce gestionnaire permet de gérer l'évènement abort qui est déclenché lorsque la transaction a été interrompue.
-
{{domxref("IDBTransaction.oncomplete")}} {{readonlyInline}}
-
Ce gestionnaire permet de gérer l'évènement complete qui est  déclenché lorsque la transaction se finit correctement.
-
{{domxref("IDBTransaction.onerror")}} {{readonlyInline}}
-
Ce gestionnaire permet de gérer l'évènement error qui est déclenché lorsqu'une erreur empêche la transaction de se finir correctement.
-
- -

Les différents modes

- -

Une transaction peut s'effectuer dans l'un de ces modes :

- - - - - - - - - - - - - - - - - - - - - - -
ValeurDescription
-

"readonly"

- -

(0 dans Chrome)

- 		Ce mode permet de lire les données mais pas de les modifier.
-

"readwrite"

- -

(1 dans Chrome)

- 		Ce mode permet de lire, d'écrire et de modifier les données du magasin d'objets.
-

"versionchange"

- -

(2 dans Chrome)

- 		Ce mode permet d'effectuer toutes les opérations, y compris l'ajout ou la suppression de magasins d'objets et d'index. Ce mode doit être utilisé pour mettre à jour le numéro de version utilisé par les transactions démarées avec la méthode setVersion() de IDBDatabase. Les transactions lancées dans ce mode ne peuvent pas être lancées en même temps que d'autres transactions. Ces transactions sont parfois qualifiées comme « transactions de mise à jour ».
- -

Exemples

- -

Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données dans le magasin d'objet. On notera également l'utilisation des gestionnaires d'évènements attachés à la transaction qui permettent d'indiquer la réussite ou l'échec de l'ouverture de la transaction. Pour un exemple complet, voir l'application de notifications To-do (voir également la démonstration live)

- -
// On commence par ouvrir la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Initialisation de la base.</li>';
-
-  // On enregistre le résultat de l'ouverture
-  // dans la variable db afin de l'utiliser
-  // ensuite
-  var db = DBOpenRequest.result;
-
-  // On utilise la fonction addData() afin d'ajouter
-  // des données à la base de données
-  addData();
-};
-
-function addData() {
-  // On crée un nouvel objet prêt à être inséré
-  // dans la base de données
-  var newItem = [ { taskTitle: "Promener le chien", hours: 19, minutes: 30, day: 24, month: "Décembre", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture
-  // vers la base de données afin d'ajouter des
-  // données
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // On indique le succès de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modification finie.</li>';
-  };
-
-
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.</li>';
-  };
-
-  // On crée un magasin d'objet pour la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // On ajoute l'objet newItem au magasin d'objets
-  var objectStoreRequest = objectStore.add(newItem[0]);
-
-  objectStoreRequest.onsuccess = function(event) {
-    // On indique le succès de l'ajout de l'objet
-    // dans la base de données
-    note.innerHTML += '<li>Un nouvel élément a été ajouté dans la base de données.</li>';
-  };
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}}{{Spec2('IndexedDB')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBTransaction")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/index.md b/files/fr/web/api/idbtransaction/index.md new file mode 100644 index 0000000000..b856029dee --- /dev/null +++ b/files/fr/web/api/idbtransaction/index.md @@ -0,0 +1,188 @@ +--- +title: IDBTransaction +slug: Web/API/IDBTransaction +tags: + - API + - IDBTransaction + - IndexedDB + - Interface + - Reference +translation_of: Web/API/IDBTransaction +--- +
{{APIRef("IndexedDB")}}
+ +

L'interface IDBTransaction de l'API IndexedDB fournit une transaction statique asynchrone vers une base de données grâce à des attributs de gestion d'évènementns. Toutes les opérations de lecture et d'écriture de données sont effectuées au sein de transaction. Il est possible d'utiliser {{domxref("IDBDatabase")}} afin d'initier des transactions puis {{domxref("IDBTransaction")}} afin de paramétrer le mode de la transaction (c'est-à-dire s'il est en lecture seule ou en lecture/écriture) et d'accéder à un objet {{domxref("IDBObjectStore")}} pour réaliser une requête. On peut également utiliser IDBTransaction pour interrompre une requête.

+ +

S'il vous garantir une certaine longévité (par exemple si on utilise des données critiques qui ne peuvent pas être recalculées par la suite), il est possible d'écrire le contenu de la transaction sur le disque avant la diffusion de l'évènement complete grâce au mode expérimental non-standard readwriteflush (cf. {{domxref("IDBDatabase.transaction")}}).

+ +

On notera qu'une transaction commence dès sa création et pas lorsque la première requête est lancée. Par exemple :

+ +
var trans1 = db.transaction("toto", "readwrite");
+var trans2 = db.transaction("toto", "readwrite");
+trans2.put("2", "clé");
+trans1.put("1", "clé");
+
+ +

Une fois que le code est exécuté, le magasin d'objet contiendra la valeur "2" car la transaction est lancée après la transaction trans1.

+ +

{{AvailableInWorkers}}

+ +

Méthodes

+ +

Cette interface hérite de {{domxref("EventTarget")}}.

+ +
+
{{domxref("IDBTransaction.abort")}}
+
Cette méthode annule les modifications apportées aux objets associés à cette transaction. Si la transaction a déjà été interrompue ou est terminée, cette méthode déclenchera un évènement d'erreur.
+
{{domxref("IDBTransaction.objectStore")}}
+
Cette méthode renvoie un objet {{domxref("IDBObjectStore")}} qui représente le magasin d'objet associé à cette transaction.
+
+ +

Propriétés

+ +
+
{{domxref("IDBTransaction.db")}} {{readonlyInline}}
+
La connexion à la base de données associée à cette transaction.
+
{{domxref("IDBTransaction.mode")}} {{readonlyInline}}
+
Le mode de la transaction qui définit la façon dont on accède/modifie les données. Les différentes valeurs sont définies ci-après dans la section Constante. Par défaut, la valeur est readonly.
+
{{domxref("IDBTransaction.objectStoreNames")}} {{readonlyinline}}
+
Cette propriété est une liste ({{domxref("DOMStringList")}}) des noms des objets {{domxref("IDBObjectStore")}}.
+
{{domxref("IDBTransaction.error")}} {{readonlyInline}}
+
Cette propriété renvoie le type de l'erreur qui se produit lorsque la transaction infructueuse. Cette propriété vaut null si la transaction n'est pas finie, est finie et validée correctement ou a été cloturée avec la fonction{{domxref("IDBTransaction.abort")}}.
+
+ +

Gestionnaires d'évènements

+ +
+
{{domxref("IDBTransaction.onabort")}} {{readonlyInline}}
+
Ce gestionnaire permet de gérer l'évènement abort qui est déclenché lorsque la transaction a été interrompue.
+
{{domxref("IDBTransaction.oncomplete")}} {{readonlyInline}}
+
Ce gestionnaire permet de gérer l'évènement complete qui est  déclenché lorsque la transaction se finit correctement.
+
{{domxref("IDBTransaction.onerror")}} {{readonlyInline}}
+
Ce gestionnaire permet de gérer l'évènement error qui est déclenché lorsqu'une erreur empêche la transaction de se finir correctement.
+
+ +

Les différents modes

+ +

Une transaction peut s'effectuer dans l'un de ces modes :

+ + + + + + + + + + + + + + + + + + + + + + +
ValeurDescription
+

"readonly"

+ +

(0 dans Chrome)

+ 		Ce mode permet de lire les données mais pas de les modifier.
+

"readwrite"

+ +

(1 dans Chrome)

+ 		Ce mode permet de lire, d'écrire et de modifier les données du magasin d'objets.
+

"versionchange"

+ +

(2 dans Chrome)

+ 		Ce mode permet d'effectuer toutes les opérations, y compris l'ajout ou la suppression de magasins d'objets et d'index. Ce mode doit être utilisé pour mettre à jour le numéro de version utilisé par les transactions démarées avec la méthode setVersion() de IDBDatabase. Les transactions lancées dans ce mode ne peuvent pas être lancées en même temps que d'autres transactions. Ces transactions sont parfois qualifiées comme « transactions de mise à jour ».
+ +

Exemples

+ +

Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données dans le magasin d'objet. On notera également l'utilisation des gestionnaires d'évènements attachés à la transaction qui permettent d'indiquer la réussite ou l'échec de l'ouverture de la transaction. Pour un exemple complet, voir l'application de notifications To-do (voir également la démonstration live)

+ +
// On commence par ouvrir la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Initialisation de la base.</li>';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db afin de l'utiliser
+  // ensuite
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter
+  // des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré
+  // dans la base de données
+  var newItem = [ { taskTitle: "Promener le chien", hours: 19, minutes: 30, day: 24, month: "Décembre", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // vers la base de données afin d'ajouter des
+  // données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modification finie.</li>';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.</li>';
+  };
+
+  // On crée un magasin d'objet pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute l'objet newItem au magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'ajout de l'objet
+    // dans la base de données
+    note.innerHTML += '<li>Un nouvel élément a été ajouté dans la base de données.</li>';
+  };
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}}{{Spec2('IndexedDB')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBTransaction")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/mode/index.html b/files/fr/web/api/idbtransaction/mode/index.html deleted file mode 100644 index 2cc9c693bc..0000000000 --- a/files/fr/web/api/idbtransaction/mode/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: IDBTransaction.mode -slug: Web/API/IDBTransaction/mode -tags: - - API - - IDBTransaction - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBTransaction/mode ---- -
{{APIRef("IndexedDB")}}
- -

La propriété mode de l'interface {{domxref("IDBTransaction")}} renvoie le mode d'accès aux données des magasins d'objet pendant la transaction (autrement dit, s'agit-il d'une transaction en lecture seule ou d'un accès en écriture ?). La valeur par défaut est readonly.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var modeCourant = IDBTransaction.mode;
- -

Valeur

- -

Un objet {{domxref("IDBTransactionMode")}} qui définit le mode d'accès aux données des magasins d'objet :

- - - - - - - - - - - - - - - - - - - - - - -
ValeurSignification
readonlyLecture seule : on peut lire (consulter) les données mais on ne peut pas les modifier.
readwriteLecture et écriture : on peut lire et écrire (modifier) des données dans les magasins d'objet.
versionchangeToutes les opérations peuvent être effectuées, y compris celles qui suppriment ou créent des magasins d'objets et des index. Ce mode doit être utilisé lorsqu'on souhaite mettre à jour le numéro de version pour les transactions qui démarrent avec {{domxref("IDBDatabase.setVersion()")}}. Les transactions effectuées dans ce mode ne peuvent pas être exécutées de façon concurrente avec les autres transactions. Les transactions effectuées dans ce mode sont parfois appelées transactions de mise à jour (upgrade transactions).
- -

Exemples

- -

Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On notera que les fonctions attachées aux gestionnaires d'évènement de la transaction permettent de rapporter des informations en cas de succès ou d'échec de la transaction. Enfin, on affiche le mode de la transaction dans la console grâce à la propriété mode. Pour un exemple complet, se référer à l'exemple d'application To-do (cf. la démonstration).

- -
// On ouvre la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Initialisation de la base de données.</li>';
-
-  // On enregistre le résultat de l'ouverture dans la variable
-  // db utilisée ensuite.
-  var db = DBOpenRequest.result;
-
-  // On utilise la fonction addData() afin d'ajouter des données
-  // dans la base de données
-  addData();
-};
-
-function addData() {
-  // On crée un nouvel objet prêt à être inséré dans la base
-  // de données
-  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture afin d'ajouter
-  // des données
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // On gère le succès ou l'échec de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modifications appliquées.</li>';
-  };
-
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur (duplication d'objet interdite).</li>';
-  };
-
-  // On crée un magasin d'objets pour la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // On ajoute l'objet newItem dans le magasin d'objets
-  var objectStoreRequest = objectStore.add(newItem[0]);
-
-  objectStoreRequest.onsuccess = function(event) {
-    // On indique le succès de l'opération pour ajouter
-    // l'objet dans la base de données
-    note.innerHTML += '<li>Nouvel objet ajouté à la base de données.</li>';
-  };
-
-  // On renvoie le mode de la transaction qui était ouverte
-  // (ce devrait être "readwrite")
-  transaction.mode;
-};
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBTransaction.mode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/mode/index.md b/files/fr/web/api/idbtransaction/mode/index.md new file mode 100644 index 0000000000..2cc9c693bc --- /dev/null +++ b/files/fr/web/api/idbtransaction/mode/index.md @@ -0,0 +1,134 @@ +--- +title: IDBTransaction.mode +slug: Web/API/IDBTransaction/mode +tags: + - API + - IDBTransaction + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBTransaction/mode +--- +
{{APIRef("IndexedDB")}}
+ +

La propriété mode de l'interface {{domxref("IDBTransaction")}} renvoie le mode d'accès aux données des magasins d'objet pendant la transaction (autrement dit, s'agit-il d'une transaction en lecture seule ou d'un accès en écriture ?). La valeur par défaut est readonly.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var modeCourant = IDBTransaction.mode;
+ +

Valeur

+ +

Un objet {{domxref("IDBTransactionMode")}} qui définit le mode d'accès aux données des magasins d'objet :

+ + + + + + + + + + + + + + + + + + + + + + +
ValeurSignification
readonlyLecture seule : on peut lire (consulter) les données mais on ne peut pas les modifier.
readwriteLecture et écriture : on peut lire et écrire (modifier) des données dans les magasins d'objet.
versionchangeToutes les opérations peuvent être effectuées, y compris celles qui suppriment ou créent des magasins d'objets et des index. Ce mode doit être utilisé lorsqu'on souhaite mettre à jour le numéro de version pour les transactions qui démarrent avec {{domxref("IDBDatabase.setVersion()")}}. Les transactions effectuées dans ce mode ne peuvent pas être exécutées de façon concurrente avec les autres transactions. Les transactions effectuées dans ce mode sont parfois appelées transactions de mise à jour (upgrade transactions).
+ +

Exemples

+ +

Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On notera que les fonctions attachées aux gestionnaires d'évènement de la transaction permettent de rapporter des informations en cas de succès ou d'échec de la transaction. Enfin, on affiche le mode de la transaction dans la console grâce à la propriété mode. Pour un exemple complet, se référer à l'exemple d'application To-do (cf. la démonstration).

+ +
// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Initialisation de la base de données.</li>';
+
+  // On enregistre le résultat de l'ouverture dans la variable
+  // db utilisée ensuite.
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter des données
+  // dans la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré dans la base
+  // de données
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture afin d'ajouter
+  // des données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On gère le succès ou l'échec de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modifications appliquées.</li>';
+  };
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur (duplication d'objet interdite).</li>';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute l'objet newItem dans le magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'opération pour ajouter
+    // l'objet dans la base de données
+    note.innerHTML += '<li>Nouvel objet ajouté à la base de données.</li>';
+  };
+
+  // On renvoie le mode de la transaction qui était ouverte
+  // (ce devrait être "readwrite")
+  transaction.mode;
+};
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBTransaction.mode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/objectstore/index.html b/files/fr/web/api/idbtransaction/objectstore/index.html deleted file mode 100644 index 61fa2e0d56..0000000000 --- a/files/fr/web/api/idbtransaction/objectstore/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: IDBTransaction.objectStore() -slug: Web/API/IDBTransaction/objectStore -tags: - - API - - IndexedDB - - Méthode - - Reference -translation_of: Web/API/IDBTransaction/objectStore ---- -
{{APIRef("IndexedDB")}}
- -

La méthode objectStore(), rattachée à l'interface {{domxref("IDBTransaction")}}, renvoie l'accès à un des magasins d'objets liés à la transation sous la forme d'un objet {{domxref("IDBObjectStore")}}.

- -

Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de  {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var objectStore = transaction.objectStore(nom);
- -

Paramètres

- -
-
nom
-
Le nom du magasin d'objets auquel on veut accéder.
-
- -

Valeur de retour

- -

Un objet {{domxref("IDBObjectStore")}} qui permet d'accéder au magasin d'objets.

- -

Exceptions

- -
-
NotFoundError
-
Cette exception {{domxref("DOMException")}} est levée si le magasin d'objets demandé n'a pas été trouvé sur la transaction.
-
InvalidStateError
-
Cette exception {{domxref("DOMException")}} est levée si la transaction est terminée ou si la demande a été faite sur un objet source qui a été supprimé ou retiré.
-
- -

Exemple

- -

Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf.  {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets "toDoList" pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page.

- -

La méthode objectStore() permet d'accéder au magasin d'objets "toDoList".

- -
// Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Connexion établie.</li>';
-
-  // On affecte la connexion à la variable db.
-  db = DBOpenRequest.result;
-
-  // On exécute la fonction addData() pour
-  // ajouter des données dans la base
-  addData();
-};
-
-function addData() {
-  // Un nouvel objet prêt à être emmagasiné
-  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture
-  // pour le traitement des données sur la connexion
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // On utilise oncomplete en cas de succès de
-  // l'ouverture de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
-  };
-
-  // En cas d'échec de l'ouverture, on utilisera
-  // le gestionnaire onerror
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
-  };
-
-  // On ouvre un magasin d'objets sur la transaction
-  // grâce à la méthode objectStore
-  var objectStore = transaction.objectStore("toDoList");
-
-  // Enfin, on ajoute un enregistrement
-  var objectStoreRequest = objectStore.add(newItem[0]);
-  objectStoreRequest.onsuccess = function(event) {
-    // et on signale l'ajout de l'enregistrement
-    note.innerHTML += '<li>Enregistrement ajouté.</li>';
-  };
-};
-
- -
-

Note : Pour un exemple fonctionnel complet, voir notre application To-do Notifications (l'exemple live est disponible ici).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBTransaction.objectStore")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/objectstore/index.md b/files/fr/web/api/idbtransaction/objectstore/index.md new file mode 100644 index 0000000000..61fa2e0d56 --- /dev/null +++ b/files/fr/web/api/idbtransaction/objectstore/index.md @@ -0,0 +1,131 @@ +--- +title: IDBTransaction.objectStore() +slug: Web/API/IDBTransaction/objectStore +tags: + - API + - IndexedDB + - Méthode + - Reference +translation_of: Web/API/IDBTransaction/objectStore +--- +
{{APIRef("IndexedDB")}}
+ +

La méthode objectStore(), rattachée à l'interface {{domxref("IDBTransaction")}}, renvoie l'accès à un des magasins d'objets liés à la transation sous la forme d'un objet {{domxref("IDBObjectStore")}}.

+ +

Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de  {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var objectStore = transaction.objectStore(nom);
+ +

Paramètres

+ +
+
nom
+
Le nom du magasin d'objets auquel on veut accéder.
+
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBObjectStore")}} qui permet d'accéder au magasin d'objets.

+ +

Exceptions

+ +
+
NotFoundError
+
Cette exception {{domxref("DOMException")}} est levée si le magasin d'objets demandé n'a pas été trouvé sur la transaction.
+
InvalidStateError
+
Cette exception {{domxref("DOMException")}} est levée si la transaction est terminée ou si la demande a été faite sur un objet source qui a été supprimé ou retiré.
+
+ +

Exemple

+ +

Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf.  {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets "toDoList" pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page.

+ +

La méthode objectStore() permet d'accéder au magasin d'objets "toDoList".

+ +
// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Connexion établie.</li>';
+
+  // On affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData() pour
+  // ajouter des données dans la base
+  addData();
+};
+
+function addData() {
+  // Un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // pour le traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On utilise oncomplete en cas de succès de
+  // l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
+  };
+
+  // En cas d'échec de l'ouverture, on utilisera
+  // le gestionnaire onerror
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
+  };
+
+  // On ouvre un magasin d'objets sur la transaction
+  // grâce à la méthode objectStore
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Enfin, on ajoute un enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // et on signale l'ajout de l'enregistrement
+    note.innerHTML += '<li>Enregistrement ajouté.</li>';
+  };
+};
+
+ +
+

Note : Pour un exemple fonctionnel complet, voir notre application To-do Notifications (l'exemple live est disponible ici).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBTransaction.objectStore")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/objectstorenames/index.html b/files/fr/web/api/idbtransaction/objectstorenames/index.html deleted file mode 100644 index 9c707e100a..0000000000 --- a/files/fr/web/api/idbtransaction/objectstorenames/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: IDBTransaction.objectStoreNames -slug: Web/API/IDBTransaction/ObjectStoreNames -tags: - - API - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBTransaction/ObjectStoreNames ---- -
{{APIRef("IndexedDB")}}{{SeeCompatTable}}
- -

La propriété objectStoreNames de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("DOMStringList","liste")}} des noms des magasins d'objets de la {{domxref("IDBTransaction","transaction")}} .

- -

Syntaxe

- -
var maBaseDeDonnees = transactionObj.objectStoreNames;
- -

Valeur de retour

- -

Une liste {{domxref("DOMStringList")}} contenant les noms des magasins d'objets liés à la transaction ({{domxref("IDBTransaction")}}).

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBTransaction.objectStoreNames")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/objectstorenames/index.md b/files/fr/web/api/idbtransaction/objectstorenames/index.md new file mode 100644 index 0000000000..9c707e100a --- /dev/null +++ b/files/fr/web/api/idbtransaction/objectstorenames/index.md @@ -0,0 +1,54 @@ +--- +title: IDBTransaction.objectStoreNames +slug: Web/API/IDBTransaction/ObjectStoreNames +tags: + - API + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBTransaction/ObjectStoreNames +--- +
{{APIRef("IndexedDB")}}{{SeeCompatTable}}
+ +

La propriété objectStoreNames de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("DOMStringList","liste")}} des noms des magasins d'objets de la {{domxref("IDBTransaction","transaction")}} .

+ +

Syntaxe

+ +
var maBaseDeDonnees = transactionObj.objectStoreNames;
+ +

Valeur de retour

+ +

Une liste {{domxref("DOMStringList")}} contenant les noms des magasins d'objets liés à la transaction ({{domxref("IDBTransaction")}}).

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBTransaction.objectStoreNames")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/onabort/index.html b/files/fr/web/api/idbtransaction/onabort/index.html deleted file mode 100644 index 22ae924a6f..0000000000 --- a/files/fr/web/api/idbtransaction/onabort/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: IDBTransaction.onabort -slug: Web/API/IDBTransaction/onabort -tags: - - API - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBTransaction/onabort ---- -
{{APIRef("IndexedDB")}}
- -

Le gestionnaire d'événement onabort, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement abort, lorsque la transaction a été annulée avec la méthode {{domxref("IDBTransaction.abort")}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
transaction.onabort = function() { ... };
- -

Exemple

- -

Dans le code suivant, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction avec {{domxref("IDBTransaction")}} en lecture/écriture pour accéder au magasin d'objets intitulé "toDoList" et y ajouter un enregistrement (grâce à la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} qui affichent le résultat de la transaction sur la page.

- -

On voit ici le gestionnaire d'événement onabort qui est utilisé pour afficher un message sur la console du développeur.

- -
// Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Connexion établie.</li>';
-
-  // On affecte la connexion à la variable db.
-  db = DBOpenRequest.result;
-
-  // On exécute la fonction addData () afin de
-  // stocker des données dans la base
-  addData();
-};
-
-function addData() {
-  // Voici un nouvel objet prêt à être emmagasiné
-  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture, prête
-  // à traiter des données sur la connexion
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // On utilise oncomplete en cas de succès de
-  // l'ouverture de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
-  };
-
-  // En cas d'échec de l'ouverture, ce sera
-  // le gestionnaire onerror qui interviendra
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
-  };
-
-  // On ouvre l'accès au un magasin "toDoList"
-  // dans la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // Ici, l'enregistrement est ajouté
-  var objectStoreRequest = objectStore.add(newItem[0]);
-  objectStoreRequest.onsuccess = function(event) {
-    // On signale l'ajout de l'enregistrement
-    note.innerHTML += '<li>Enregistrement ajouté.</li>';
-  };
-
-  transaction.onabort = function() {
-    // Ce gestionnaire permet de signaler
-    // qu'une transaction a été annulée avec succès
-    console.log("Transaction annulée !");
-  };
-
-  // On abandonne la transaction qu'on vient de faire
-  transaction.abort();
-};
- -
-

Note : Pour un exemple fonctionnel complet, voir notre application To-do Notifications (exemple live disponible).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-onabort', 'onabort')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBTransaction.onabort")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/onabort/index.md b/files/fr/web/api/idbtransaction/onabort/index.md new file mode 100644 index 0000000000..22ae924a6f --- /dev/null +++ b/files/fr/web/api/idbtransaction/onabort/index.md @@ -0,0 +1,117 @@ +--- +title: IDBTransaction.onabort +slug: Web/API/IDBTransaction/onabort +tags: + - API + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBTransaction/onabort +--- +
{{APIRef("IndexedDB")}}
+ +

Le gestionnaire d'événement onabort, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement abort, lorsque la transaction a été annulée avec la méthode {{domxref("IDBTransaction.abort")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
transaction.onabort = function() { ... };
+ +

Exemple

+ +

Dans le code suivant, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction avec {{domxref("IDBTransaction")}} en lecture/écriture pour accéder au magasin d'objets intitulé "toDoList" et y ajouter un enregistrement (grâce à la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} qui affichent le résultat de la transaction sur la page.

+ +

On voit ici le gestionnaire d'événement onabort qui est utilisé pour afficher un message sur la console du développeur.

+ +
// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Connexion établie.</li>';
+
+  // On affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData () afin de
+  // stocker des données dans la base
+  addData();
+};
+
+function addData() {
+  // Voici un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture, prête
+  // à traiter des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On utilise oncomplete en cas de succès de
+  // l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
+  };
+
+  // En cas d'échec de l'ouverture, ce sera
+  // le gestionnaire onerror qui interviendra
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
+  };
+
+  // On ouvre l'accès au un magasin "toDoList"
+  // dans la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Ici, l'enregistrement est ajouté
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // On signale l'ajout de l'enregistrement
+    note.innerHTML += '<li>Enregistrement ajouté.</li>';
+  };
+
+  transaction.onabort = function() {
+    // Ce gestionnaire permet de signaler
+    // qu'une transaction a été annulée avec succès
+    console.log("Transaction annulée !");
+  };
+
+  // On abandonne la transaction qu'on vient de faire
+  transaction.abort();
+};
+ +
+

Note : Pour un exemple fonctionnel complet, voir notre application To-do Notifications (exemple live disponible).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-onabort', 'onabort')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBTransaction.onabort")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbtransaction/oncomplete/index.html b/files/fr/web/api/idbtransaction/oncomplete/index.html deleted file mode 100644 index 2c92b816b8..0000000000 --- a/files/fr/web/api/idbtransaction/oncomplete/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: IDBTransaction.oncomplete -slug: Web/API/IDBTransaction/oncomplete -tags: - - API - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBTransaction/oncomplete ---- -
{{ APIRef("IndexedDB") }}
- -

Le gestionnaire d'événement oncomplete, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement complete lorsque la transaction se termine avec succès.

- -
-

Note : Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}). Auparavant, dans une transaction en readwrite, l'événement complete était déclenché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant, l'événement complete est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement complete peut ainsi être déclenché plus rapidement qu'auparavant. Cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écrites sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.

- -
-

Attention : Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculé plus tard), vous pouvez forcer l'enregistrement complet sur disque avant de déclencher l'événement complete en utilisant le mode readwriteflush (non-standard) expérimental (cf. {{domxref("IDBDatabase.transaction")}} ). Ce mode expérimentale ne peut être utilisé que si la préférence dom.indexedDB.experimental pref est réglée sur true dans about: config.

-
- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
transaction.oncomplete = function() { ... };
- -

Exemple

- -

Dans le code suivant, on ouvre une connexion à la base de donnée. Ensuite, sur cette connexion, on démarre une transaction (avec  {{domxref("IDBTransaction")}}) en lecture/écriture pour accéder au magasin d'objet "toDoList" et y ajouter un enregistrement grâce à la méthode {{domxref("IDBObjectStore.add")}}. On notera également la façon dont le gestionnaire d'événement {{domxref("IDBTransaction.onerror")}} est utilisé dans la transaction.

- -

Le gestionnaires d'événement oncomplete de la transaction permet d'afficher un message de succès sur la page.

- -
// Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Connexion établie.</li>';
-
-  // Affectation de la connexion à la variable db.
-  db = DBOpenRequest.result;
-
-  // Exécution de la fonction addData () pour
-  // stocker des données dans la base
-  addData();
-};
-
-function addData() {
-  // Voici un nouvel objet prêt à être emmagasiné
-  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture
-  // prête au traitement des données sur la connexion
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // Voici le gestionnaire utilisé en cas de succès
-  // de l'ouverture de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
-  };
-
-  // Et celui utilisé en cas d'échec de
-  // l'ouverture de la transaction
-  transaction.onerror = function(event) {
-    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
-  };
-
-  // Puis, on ouvre l'accès au un magasin "toDoList"
-  // de la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // Enfin on ajoute l'enregistrement
-  var objectStoreRequest = objectStore.add(newItem[0]);
-  objectStoreRequest.onsuccess = function(event) {
-    // Et on signale l'ajout de l'enregistrement
-    note.innerHTML += '<li>Enregistrement ajouté.</li>';
-  };
- };
-
- -
-

Note :Pour un exemple de travail complet, voir notre application To-do Notifications (exemple live disponible).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-oncomplete', 'oncomplete')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des  navigateurs

- -

{{Compat("api.IDBTransaction.oncomplete")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/idbtransaction/oncomplete/index.md b/files/fr/web/api/idbtransaction/oncomplete/index.md new file mode 100644 index 0000000000..2c92b816b8 --- /dev/null +++ b/files/fr/web/api/idbtransaction/oncomplete/index.md @@ -0,0 +1,116 @@ +--- +title: IDBTransaction.oncomplete +slug: Web/API/IDBTransaction/oncomplete +tags: + - API + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBTransaction/oncomplete +--- +
{{ APIRef("IndexedDB") }}
+ +

Le gestionnaire d'événement oncomplete, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement complete lorsque la transaction se termine avec succès.

+ +
+

Note : Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}). Auparavant, dans une transaction en readwrite, l'événement complete était déclenché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant, l'événement complete est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement complete peut ainsi être déclenché plus rapidement qu'auparavant. Cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écrites sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.

+ +
+

Attention : Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculé plus tard), vous pouvez forcer l'enregistrement complet sur disque avant de déclencher l'événement complete en utilisant le mode readwriteflush (non-standard) expérimental (cf. {{domxref("IDBDatabase.transaction")}} ). Ce mode expérimentale ne peut être utilisé que si la préférence dom.indexedDB.experimental pref est réglée sur true dans about: config.

+
+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
transaction.oncomplete = function() { ... };
+ +

Exemple

+ +

Dans le code suivant, on ouvre une connexion à la base de donnée. Ensuite, sur cette connexion, on démarre une transaction (avec  {{domxref("IDBTransaction")}}) en lecture/écriture pour accéder au magasin d'objet "toDoList" et y ajouter un enregistrement grâce à la méthode {{domxref("IDBObjectStore.add")}}. On notera également la façon dont le gestionnaire d'événement {{domxref("IDBTransaction.onerror")}} est utilisé dans la transaction.

+ +

Le gestionnaires d'événement oncomplete de la transaction permet d'afficher un message de succès sur la page.

+ +
// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Connexion établie.</li>';
+
+  // Affectation de la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Exécution de la fonction addData () pour
+  // stocker des données dans la base
+  addData();
+};
+
+function addData() {
+  // Voici un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // prête au traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // Voici le gestionnaire utilisé en cas de succès
+  // de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
+  };
+
+  // Et celui utilisé en cas d'échec de
+  // l'ouverture de la transaction
+  transaction.onerror = function(event) {
+    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
+  };
+
+  // Puis, on ouvre l'accès au un magasin "toDoList"
+  // de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Enfin on ajoute l'enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // Et on signale l'ajout de l'enregistrement
+    note.innerHTML += '<li>Enregistrement ajouté.</li>';
+  };
+ };
+
+ +
+

Note :Pour un exemple de travail complet, voir notre application To-do Notifications (exemple live disponible).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-oncomplete', 'oncomplete')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des  navigateurs

+ +

{{Compat("api.IDBTransaction.oncomplete")}}

+ +

Voir aussi

+ +
    +
  • Manipuler IndexedDB
    • +
  • Démarrer des transactions : {{domxref("IDBDatabase")}}
    • +
  • Manipuler des transactions : {{domxref("IDBTransaction")}}
    • +
  • Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
    • +
  • Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
    • +
  • Manipuler des curseurs : {{domxref("IDBCursor")}}
    • +
  • Exemple de référence pour IndexedDB : To-do Notifications
    • +
diff --git a/files/fr/web/api/idbtransaction/onerror/index.html b/files/fr/web/api/idbtransaction/onerror/index.html deleted file mode 100644 index d37965f979..0000000000 --- a/files/fr/web/api/idbtransaction/onerror/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: IDBTransaction.onerror -slug: Web/API/IDBTransaction/onerror -tags: - - API - - IndexedDB - - Propriété - - Reference -translation_of: Web/API/IDBTransaction/onerror ---- -
{{APIRef("IndexedDB")}}
- -

Le gestionnaire d'événement onerror, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement error lorsque la transaction échoue.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
transaction.onerror = function() { ... };
- -

Exemple

- -

Dans le code suivant, on commence par ouvrir une connexion à la base de donnée. Grâce à cette connexion, on initialise une transaction en lecture/écriture grâce à IDBTransaction pour accéder au magasin d'objets intitulé toDoList et y ajouter un enregistrement via la méthode  {{domxref("IDBObjectStore.add")}}. On notera également l'utilisation du gestionnaire d'événements {{domxref("IDBTransaction.oncomplete")}}.

- -

Le gestionnaire d'événement onerror de la transaction affiche le code d'erreur de la propriété propriété {{domxref("IDBTransaction.error","error")}} sur la page.

- -
// Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-	note.innerHTML += '<li>Connexion établie.</li>';
-
-	// On affecte la connexion à la variable db.
-	db = DBOpenRequest.result;
-
-	// On exécute la fonction addData () pour ajouter
-    // des données dans la base
-	addData();
-};
-function addData() {
-	// On crée un nouvel objet prêt à être emmagasiné
-	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-	// On ouvre une transaction de lecture / écriture
-    // pour traiter les données via la connexion
-	var transaction = db.transaction(["toDoList"], "readwrite");
-
-	// En cas de succès de l'ouverture de la transaction
-    // on utilise ce gestionnaire
-	transaction.oncomplete = function(event) {
-		note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
-	};
-	// En  cas d'échec de l'ouverture de la transaction
-    // on utilisera ce gestionnaire
-	transaction.onerror = function(event) {
-		note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
-	};
-
-	// On ouvre l'accès au magasin "toDoList" de la transaction
-	var objectStore = transaction.objectStore("toDoList");
-
-	// Enfin on ajoute un enregistrement
-	var objectStoreRequest = objectStore.add(newItem[0]);
-	objectStoreRequest.onsuccess = function(event) {
-		// On signale l'ajout de l'enregistrement
-		note.innerHTML += '<li>Enregistrement ajouté.</li>';
-	};
- };
-
- -
-

Note : Pour un exemple de travail complet, voir l'application To-do Notifications (exemple live disponible ici).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-ononerror', 'onerror')}}{{Spec2('IndexedDB')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBTransaction.onerror")}}

- -

Voir aussi

- -
    -
  • Manipuler IndexedDB
    • -
  • Démarrer des transactions : {{domxref("IDBDatabase")}}
    • -
  • Manipuler des transactions : {{domxref("IDBTransaction")}}
    • -
  • Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
    • -
  • Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
    • -
  • Manipuler des curseurs : {{domxref("IDBCursor")}}
    • -
  • Exemple de référence pour IndexedDB : To-do Notifications
    • -
diff --git a/files/fr/web/api/idbtransaction/onerror/index.md b/files/fr/web/api/idbtransaction/onerror/index.md new file mode 100644 index 0000000000..d37965f979 --- /dev/null +++ b/files/fr/web/api/idbtransaction/onerror/index.md @@ -0,0 +1,106 @@ +--- +title: IDBTransaction.onerror +slug: Web/API/IDBTransaction/onerror +tags: + - API + - IndexedDB + - Propriété + - Reference +translation_of: Web/API/IDBTransaction/onerror +--- +
{{APIRef("IndexedDB")}}
+ +

Le gestionnaire d'événement onerror, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement error lorsque la transaction échoue.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
transaction.onerror = function() { ... };
+ +

Exemple

+ +

Dans le code suivant, on commence par ouvrir une connexion à la base de donnée. Grâce à cette connexion, on initialise une transaction en lecture/écriture grâce à IDBTransaction pour accéder au magasin d'objets intitulé toDoList et y ajouter un enregistrement via la méthode  {{domxref("IDBObjectStore.add")}}. On notera également l'utilisation du gestionnaire d'événements {{domxref("IDBTransaction.oncomplete")}}.

+ +

Le gestionnaire d'événement onerror de la transaction affiche le code d'erreur de la propriété propriété {{domxref("IDBTransaction.error","error")}} sur la page.

+ +
// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += '<li>Connexion établie.</li>';
+
+	// On affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+	// On exécute la fonction addData () pour ajouter
+    // des données dans la base
+	addData();
+};
+function addData() {
+	// On crée un nouvel objet prêt à être emmagasiné
+	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+	// On ouvre une transaction de lecture / écriture
+    // pour traiter les données via la connexion
+	var transaction = db.transaction(["toDoList"], "readwrite");
+
+	// En cas de succès de l'ouverture de la transaction
+    // on utilise ce gestionnaire
+	transaction.oncomplete = function(event) {
+		note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
+	};
+	// En  cas d'échec de l'ouverture de la transaction
+    // on utilisera ce gestionnaire
+	transaction.onerror = function(event) {
+		note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
+	};
+
+	// On ouvre l'accès au magasin "toDoList" de la transaction
+	var objectStore = transaction.objectStore("toDoList");
+
+	// Enfin on ajoute un enregistrement
+	var objectStoreRequest = objectStore.add(newItem[0]);
+	objectStoreRequest.onsuccess = function(event) {
+		// On signale l'ajout de l'enregistrement
+		note.innerHTML += '<li>Enregistrement ajouté.</li>';
+	};
+ };
+
+ +
+

Note : Pour un exemple de travail complet, voir l'application To-do Notifications (exemple live disponible ici).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB', '#widl-IDBTransaction-ononerror', 'onerror')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBTransaction.onerror")}}

+ +

Voir aussi

+ +
    +
  • Manipuler IndexedDB
    • +
  • Démarrer des transactions : {{domxref("IDBDatabase")}}
    • +
  • Manipuler des transactions : {{domxref("IDBTransaction")}}
    • +
  • Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
    • +
  • Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
    • +
  • Manipuler des curseurs : {{domxref("IDBCursor")}}
    • +
  • Exemple de référence pour IndexedDB : To-do Notifications
    • +
diff --git a/files/fr/web/api/imagedata/data/index.html b/files/fr/web/api/imagedata/data/index.html deleted file mode 100644 index 93967d5b3a..0000000000 --- a/files/fr/web/api/imagedata/data/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: ImageData.data -slug: Web/API/ImageData/data -translation_of: Web/API/ImageData/data ---- -

{{APIRef("Canvas API")}}

- -

La propriété en lecteur seul ImageData.data retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : [r1,g1,b1,a1,…,rn;gn;bn;an].

- -

Syntax

- -
imagedata.data
-
- -

Exemple

- -
var imagedata = new ImageData(100, 100);
-imagedata.data; // Uint8ClampedArray[40000]
-
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- - - -

{{Compat("api.ImageData.data")}}

- -

See also

- -
    -
  • {{domxref("ImageData.height")}}
    • -
  • {{domxref("ImageData.width")}}
    • -
diff --git a/files/fr/web/api/imagedata/data/index.md b/files/fr/web/api/imagedata/data/index.md new file mode 100644 index 0000000000..93967d5b3a --- /dev/null +++ b/files/fr/web/api/imagedata/data/index.md @@ -0,0 +1,49 @@ +--- +title: ImageData.data +slug: Web/API/ImageData/data +translation_of: Web/API/ImageData/data +--- +

{{APIRef("Canvas API")}}

+ +

La propriété en lecteur seul ImageData.data retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : [r1,g1,b1,a1,…,rn;gn;bn;an].

+ +

Syntax

+ +
imagedata.data
+
+ +

Exemple

+ +
var imagedata = new ImageData(100, 100);
+imagedata.data; // Uint8ClampedArray[40000]
+
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.ImageData.data")}}

+ +

See also

+ +
    +
  • {{domxref("ImageData.height")}}
    • +
  • {{domxref("ImageData.width")}}
    • +
diff --git a/files/fr/web/api/imagedata/index.html b/files/fr/web/api/imagedata/index.html deleted file mode 100644 index 3ca90fa8b0..0000000000 --- a/files/fr/web/api/imagedata/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: ImageData -slug: Web/API/ImageData -tags: - - API - - Canvas - - DOM - - Images - - JavaScript -translation_of: Web/API/ImageData ---- -

{{APIRef("Canvas API")}}

- -

L'interface ImageData représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}}  sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas,  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et  {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}.

- -

Constructeurs

- -
-
{{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}
-
Crée un objet ImageData à partir d'un {{jsxref ("Uint8ClampedArray")}} donné et la taille de l'image qu'il contient. Si aucun tableau n'est donné, il crée une image d'un rectangle noir. Notez que c'est la façon la plus courante de créer un tel objet dans les "Workers" car {{domxref ("CanvasRenderingContext2D.createImageData", "createImageData ()")}} n'y est pas disponible.
-
- -

Propriétés

- -
-
{{domxref("ImageData.data")}}
-
Un {{domxref("Uint8ClampedArray")}} représentant un tableau à une seule dimension contenant les données des pixels sous format RVBA, chaque valeur comprise entre 0 et 255 (inclus).
-
{{domxref("ImageData.height")}} {{readonlyInline}}
-
Un unsigned long représentant la hauteur effective, en pixels, de l'objet ImageData.
-
{{domxref("ImageData.width")}} {{readonlyInline}}
-
Un unsigned long représentant la largeur effective, en pixels, de l'objet ImageData.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.ImageData")}}

- -

Voir aussi

- -
    -
  • {{domxref("CanvasRenderingContext2D")}}.
    • -
  • L'élément {{HTMLElement("canvas")}} et l'interface associée, {{domxref("HTMLCanvasElement")}}.
    • -
diff --git a/files/fr/web/api/imagedata/index.md b/files/fr/web/api/imagedata/index.md new file mode 100644 index 0000000000..3ca90fa8b0 --- /dev/null +++ b/files/fr/web/api/imagedata/index.md @@ -0,0 +1,62 @@ +--- +title: ImageData +slug: Web/API/ImageData +tags: + - API + - Canvas + - DOM + - Images + - JavaScript +translation_of: Web/API/ImageData +--- +

{{APIRef("Canvas API")}}

+ +

L'interface ImageData représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}}  sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas,  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et  {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}.

+ +

Constructeurs

+ +
+
{{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}
+
Crée un objet ImageData à partir d'un {{jsxref ("Uint8ClampedArray")}} donné et la taille de l'image qu'il contient. Si aucun tableau n'est donné, il crée une image d'un rectangle noir. Notez que c'est la façon la plus courante de créer un tel objet dans les "Workers" car {{domxref ("CanvasRenderingContext2D.createImageData", "createImageData ()")}} n'y est pas disponible.
+
+ +

Propriétés

+ +
+
{{domxref("ImageData.data")}}
+
Un {{domxref("Uint8ClampedArray")}} représentant un tableau à une seule dimension contenant les données des pixels sous format RVBA, chaque valeur comprise entre 0 et 255 (inclus).
+
{{domxref("ImageData.height")}} {{readonlyInline}}
+
Un unsigned long représentant la hauteur effective, en pixels, de l'objet ImageData.
+
{{domxref("ImageData.width")}} {{readonlyInline}}
+
Un unsigned long représentant la largeur effective, en pixels, de l'objet ImageData.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ImageData")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("CanvasRenderingContext2D")}}.
    • +
  • L'élément {{HTMLElement("canvas")}} et l'interface associée, {{domxref("HTMLCanvasElement")}}.
    • +
diff --git a/files/fr/web/api/index.html b/files/fr/web/api/index.html deleted file mode 100644 index a66d8b6b9f..0000000000 --- a/files/fr/web/api/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Référence Web API -slug: Web/API -tags: - - API - - Applications - - DOM - - JavaScript - - Reference - - Web -translation_of: Web/API ---- -

Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles. La liste ci-dessous énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site.

- -

Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas.

- -

Spécifications

- -

Voici une liste de toutes les APIs disponibles.

- -
{{ListGroups}}
- -

Interfaces

- -

Voici une liste de toutes les interfaces (c'est à dire, les types d'objets) disponibles.

- -
{{APIListAlpha}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/index.md b/files/fr/web/api/index.md new file mode 100644 index 0000000000..a66d8b6b9f --- /dev/null +++ b/files/fr/web/api/index.md @@ -0,0 +1,33 @@ +--- +title: Référence Web API +slug: Web/API +tags: + - API + - Applications + - DOM + - JavaScript + - Reference + - Web +translation_of: Web/API +--- +

Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles. La liste ci-dessous énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site.

+ +

Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas.

+ +

Spécifications

+ +

Voici une liste de toutes les APIs disponibles.

+ +
{{ListGroups}}
+ +

Interfaces

+ +

Voici une liste de toutes les interfaces (c'est à dire, les types d'objets) disponibles.

+ +
{{APIListAlpha}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/indexeddb/index.html b/files/fr/web/api/indexeddb/index.html deleted file mode 100644 index 78d82dae7a..0000000000 --- a/files/fr/web/api/indexeddb/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: IDBEnvironment.indexedDB -slug: Web/API/indexedDB -tags: - - API - - IndexedDB - - Propriété - - Reference - - WindowOrWorkerGlobalScope -translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB -original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB ---- -
{{APIRef}}
- -

La propriété indexedDB en lecture seule, rattachée au mixin {{domxref("WindowOrWorkerGlobalScope")}} fournit un mécanisme qui permet aux applications d'accéder aux bases de données indexées de façon asynchrone.

- -

Syntaxe

- -
var IDBFactory = self.indexedDB;
- -

Valeur de retour

- -

Un objet {{domxref("IDBFactory")}}.

- -

Exemples

- -
var db;
-function openDB() {
- var DBOpenRequest = window.indexedDB.open('toDoList');
- DBOpenRequest.onsuccess = function(e) {
-   db = DBOpenRequest.result;
- }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Rattachement partiel à WindowOrWorkerGlobalScope.
{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}{{Spec2('IndexedDB')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
-
- - -

{{Compat("api.WindowOrWorkerGlobalScope.indexedDB")}}

-
-
- -

Voir aussi

- -
    -
  • Utiliser IndexedDB
    • -
  • Initier une connexion : {{domxref("IDBDatabase")}}
    • -
  • Utiliser les transactions : {{domxref("IDBTransaction")}}
    • -
  • Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
    • -
  • Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
    • -
  • Utiliser les curseurs {{domxref("IDBCursor")}}
    • -
  • Exemple de référence : To-do Notifications (exemple live).
    • -
diff --git a/files/fr/web/api/indexeddb/index.md b/files/fr/web/api/indexeddb/index.md new file mode 100644 index 0000000000..78d82dae7a --- /dev/null +++ b/files/fr/web/api/indexeddb/index.md @@ -0,0 +1,77 @@ +--- +title: IDBEnvironment.indexedDB +slug: Web/API/indexedDB +tags: + - API + - IndexedDB + - Propriété + - Reference + - WindowOrWorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB +original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB +--- +
{{APIRef}}
+ +

La propriété indexedDB en lecture seule, rattachée au mixin {{domxref("WindowOrWorkerGlobalScope")}} fournit un mécanisme qui permet aux applications d'accéder aux bases de données indexées de façon asynchrone.

+ +

Syntaxe

+ +
var IDBFactory = self.indexedDB;
+ +

Valeur de retour

+ +

Un objet {{domxref("IDBFactory")}}.

+ +

Exemples

+ +
var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open('toDoList');
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Rattachement partiel à WindowOrWorkerGlobalScope.
{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}{{Spec2('IndexedDB')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+
+ + +

{{Compat("api.WindowOrWorkerGlobalScope.indexedDB")}}

+
+
+ +

Voir aussi

+ +
    +
  • Utiliser IndexedDB
    • +
  • Initier une connexion : {{domxref("IDBDatabase")}}
    • +
  • Utiliser les transactions : {{domxref("IDBTransaction")}}
    • +
  • Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
    • +
  • Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
    • +
  • Utiliser les curseurs {{domxref("IDBCursor")}}
    • +
  • Exemple de référence : To-do Notifications (exemple live).
    • +
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 deleted file mode 100644 index ced83206f0..0000000000 --- a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Limites de stockage du navigateur et critères d'éviction -slug: Web/API/IndexedDB_API/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 -original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria ---- -
{{DefaultAPISidebar("IndexedDB")}}
- -
-

Note : 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/browser_storage_limits_and_eviction_criteria/index.md b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md new file mode 100644 index 0000000000..ced83206f0 --- /dev/null +++ b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md @@ -0,0 +1,140 @@ +--- +title: Limites de stockage du navigateur et critères d'éviction +slug: Web/API/IndexedDB_API/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 +original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria +--- +
{{DefaultAPISidebar("IndexedDB")}}
+ +
+

Note : 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 deleted file mode 100644 index 01e9cdf503..0000000000 --- a/files/fr/web/api/indexeddb_api/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: IndexedDB -slug: Web/API/IndexedDB_API -tags: - - API - - Avancé - - Bases de données - - IndexedDB - - Stockage -translation_of: Web/API/IndexedDB_API -original_slug: Web/API/API_IndexedDB ---- -

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

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/index.md b/files/fr/web/api/indexeddb_api/index.md new file mode 100644 index 0000000000..01e9cdf503 --- /dev/null +++ b/files/fr/web/api/indexeddb_api/index.md @@ -0,0 +1,156 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +tags: + - API + - Avancé + - Bases de données + - IndexedDB + - Stockage +translation_of: Web/API/IndexedDB_API +original_slug: Web/API/API_IndexedDB +--- +

{{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")}}
+ +

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 deleted file mode 100644 index 39097580d4..0000000000 --- a/files/fr/web/api/indexeddb_api/using_indexeddb/index.html +++ /dev/null @@ -1,1338 +0,0 @@ ---- -title: Utiliser IndexedDB -slug: Web/API/IndexedDB_API/Using_IndexedDB -tags: - - Avancé - - Base de données - - Guide - - IndexedDB - - Stockage - - Tutoriel -translation_of: Web/API/IndexedDB_API/Using_IndexedDB -original_slug: Web/API/API_IndexedDB/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") }}.

- -
-

Attention : 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/indexeddb_api/using_indexeddb/index.md b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md new file mode 100644 index 0000000000..39097580d4 --- /dev/null +++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md @@ -0,0 +1,1338 @@ +--- +title: Utiliser IndexedDB +slug: Web/API/IndexedDB_API/Using_IndexedDB +tags: + - Avancé + - Base de données + - Guide + - IndexedDB + - Stockage + - Tutoriel +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +original_slug: Web/API/API_IndexedDB/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") }}.

+ +
+

Attention : 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/inputevent/index.html b/files/fr/web/api/inputevent/index.html deleted file mode 100644 index 1f33085e17..0000000000 --- a/files/fr/web/api/inputevent/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: InputEvent -slug: Web/API/InputEvent -translation_of: Web/API/InputEvent ---- -
{{APIRef("DOM Events")}} {{SeeCompatTable}}
- -

L’interface InputEvent représente un évènement notifiant la modification d’un contenu éditable.

- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
{{domxref("InputEvent.InputEvent", "InputEvent()")}}
-
Crée un objet InputEvent.
-
- -

Propriétés

- -

Cette interface hérite des propriétés de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.

- -
-
{{domxref("InputEvent.data")}}{{readOnlyInline}}
-
Retourne une {{domxref("DOMString")}} avec les caractères insérést. Cela peut être une chaîne vide si la modification n’insère pas de texte (comme la suppression de caractères, par exemple).
-
{{domxref("InputEvent.dataTransfer")}}{{readonlyinline}}
-
Retourne un objet {{domxref("DataTransfer")}} contenant des informations sur des données de texte riche (richtext) ou brut (plaintext) étant ajoutées ou supprimées du contenu éditable.
-
{{domxref("InputEvent.inputType")}}{{readonlyinline}}
-
Retourne le type de modification du le contenu éditable tel que, par exemple, l’insertion, la suppression ou le formatage de texte. Voir la page de la propriété pour une liste complète des types de modification.
-
{{domxref("InputEvent.isComposing")}}{{readOnlyInline}}
-
Retourne une valeur {{jsxref("Boolean", "booléenne")}} indiquant si l’évènement est émis après {{event("compositionstart")}} et avant {{event("compositionend")}}.
-
- -

Méthodes

- -

Cette interface hérite des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.

- -
-
{{domxref('InputEvent.getTargetRanges()')}}
-
Retourne un tableau de {{domxref("Range", "ranges")}} statiques qui seront affectés par une modification du DOM si l’évènement input n’est pas annulé.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('InputEvents2','#interface-InputEvent','InputEvent')}}{{Spec2('InputEvents2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.InputEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/inputevent/index.md b/files/fr/web/api/inputevent/index.md new file mode 100644 index 0000000000..1f33085e17 --- /dev/null +++ b/files/fr/web/api/inputevent/index.md @@ -0,0 +1,71 @@ +--- +title: InputEvent +slug: Web/API/InputEvent +translation_of: Web/API/InputEvent +--- +
{{APIRef("DOM Events")}} {{SeeCompatTable}}
+ +

L’interface InputEvent représente un évènement notifiant la modification d’un contenu éditable.

+ +

{{InheritanceDiagram}}

+ +

Constructeur

+ +
+
{{domxref("InputEvent.InputEvent", "InputEvent()")}}
+
Crée un objet InputEvent.
+
+ +

Propriétés

+ +

Cette interface hérite des propriétés de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.

+ +
+
{{domxref("InputEvent.data")}}{{readOnlyInline}}
+
Retourne une {{domxref("DOMString")}} avec les caractères insérést. Cela peut être une chaîne vide si la modification n’insère pas de texte (comme la suppression de caractères, par exemple).
+
{{domxref("InputEvent.dataTransfer")}}{{readonlyinline}}
+
Retourne un objet {{domxref("DataTransfer")}} contenant des informations sur des données de texte riche (richtext) ou brut (plaintext) étant ajoutées ou supprimées du contenu éditable.
+
{{domxref("InputEvent.inputType")}}{{readonlyinline}}
+
Retourne le type de modification du le contenu éditable tel que, par exemple, l’insertion, la suppression ou le formatage de texte. Voir la page de la propriété pour une liste complète des types de modification.
+
{{domxref("InputEvent.isComposing")}}{{readOnlyInline}}
+
Retourne une valeur {{jsxref("Boolean", "booléenne")}} indiquant si l’évènement est émis après {{event("compositionstart")}} et avant {{event("compositionend")}}.
+
+ +

Méthodes

+ +

Cette interface hérite des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.

+ +
+
{{domxref('InputEvent.getTargetRanges()')}}
+
Retourne un tableau de {{domxref("Range", "ranges")}} statiques qui seront affectés par une modification du DOM si l’évènement input n’est pas annulé.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('InputEvents2','#interface-InputEvent','InputEvent')}}{{Spec2('InputEvents2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.InputEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/intersection_observer_api/index.html b/files/fr/web/api/intersection_observer_api/index.html deleted file mode 100644 index 3343785331..0000000000 --- a/files/fr/web/api/intersection_observer_api/index.html +++ /dev/null @@ -1,543 +0,0 @@ ---- -title: Intersection Observer API -slug: Web/API/Intersection_Observer_API -tags: - - API - - IntersectionObserver - - Reference - - Web -translation_of: Web/API/Intersection_Observer_API ---- -
{{SeeCompatTable}}{{DefaultAPISidebar("Intersection Observer API")}}
- -

L'API Intersection Observer permet d'observer de manière asynchrone l'évolution de l'intersection d'un élément cible avec un élément ancêtre ou avec la zone d'affichage d'un document de niveau supérieur.

- -

Historiquement, détecter la visibilité d'un élément, ou la visibilité relative de deux éléments l'un par rapport à l'autre, a été une tache difficile, résolue de manière peu rigoureuse et pouvant nuire à la fluidité de la page consultée. Malheureusement, avec la maturation de la toile, ce genre d'information se révèle de plus en plus nécessaire. La donnée de l'intersection est requise pour de nombreuses raisons, telles que:

- -
    -
  • Le chargement paresseux d'images ou d'autres types de contenus au fur et à mesure que la page défile.
    • -
  • L'implantation de « défilement infini », où de plus en plus de contenu est chargé tandis que l'utilisateur défile, afin qu'il n'ait pas à changer de page.
    • -
  • Le signalement de la visibilité pour les publicités afin de calculer les revenus publicitaires.
    • -
  • La décision d'exécuter ou non une tâche ou une animation selon que l'utilisateur va en voir le résultat ou non.
    • -
- -

De par le passé, l'implantation de la détection d'intersection impliquait des gestionnaires d'évènements et des boucles appelant des méthodes telles que {{domxref("Element.getBoundingClientRect()")}} afin de générer les informations nécessaires pour chaque élément concerné. Comme la totalité du code est exécuté dans le thread principal, même une seule de ces boucles peut causer des problèmes de performance. Si un site est rempli de ces tests, les choses peuvent vite devenir très moches.

- -

Prenons une page qui utilise un défilement infini. Mettons qu'elle utilise une bibliothèque fournie par un éditeur afin de gérer les publicités placées périodiquement le long de la page, qu'elle a des graphiques animés ici et là, et qu'elle utilise une bibliothèque personnalisée pour dessiner des cases de notifications et ce genre de choses. Chacune de ces choses a ses propres procédures de détection d'intersection, toutes exécutées dans le thread principal. L'auteur du site ne le réalise peut-être même pas, puisqu'il utilise deux bibliothèques dont il ne connaît pas forcément les détails de fonctionnement. Quand l'utilisateur navigue sur la page, ces procédures de détection d'intersection réagissent constamment pendant l'exécution du code de défilement, rendant l'expérience frustrante pour l'utilisateur vis-à-vis de son navigateur, du site Internet et de son ordinateur.

- -

L'API Intersection Observer permet d'intégrer une fonction callback qui est exécutée quand un élément qu'on souhaite surveiller entre ou sort d'un autre élément (ou du viewport (zone d'affichage)), ou quand la taille de leur intersection varie d'une quantité prédéterminée. Ainsi, les sites n'ont plus besoin de faire quoi que ce soit sur le thread principal pour surveiller ce genre d'intersection d'éléments, et le navigateur est libre de gérer la détection d'intersection comme bon lui semble.

- -

Il y a une chose sur laquelle l'API Intersection Observer ne peut pas vous renseigner : le nombre de pixels qui intersectent, ou bien desquels il s'agit précisément; par contre elle permet d'ordonner des actions souvent utiles telles que « si ils s'intersectent de plus de N%, alors faire ceci ».

- -

Concepts et utilisation de l'observateur d'intersections

- -

L'API Intersection Observer permet de mettre en place une fonction callback qui est appelée quand un élément, appelé la cible, intersecte ou bien le viewport (la zone d'affichage) ou bien un élément prédéfini ; dans le cadre de cette API, nous l’appellerons l'élément racine ou la racine. Typiquement, on voudra observer les variations de l'intersection par rapport à la zone d'affichage du document (ce qui est fait en passant l'argument null au moment de désigner l'élément racine). Que vous utilisiez la zone d'affichage ou un autre élément comme racine, l'API fonctionne de la même façon, en exécutant une fonction callback, fournie au préalable, lorsque la visibilité de l'élément cible change de telle sorte qu'il atteint la quantité voulue d'intersection avec l'élément racine.

- -

Le degré d'intersection entre l'élément cible et sa racine est le ratio d'intersection. C'est une représentation du pourcentage de l'élément cible qui est visible, exprimée sous la forme d'un nombre compris entre 0.0 et 1.0.

- -

Création d'un observateur d'intersection

- -

Créez l'observateur d'intersection en appelant son constructeur et en lui passant la référence d'une fonction callback. Cette fonction sera exécutée quand un palier est franchi dans un sens ou dans un autre :

- -
var options = {
-  root: document.querySelector('#scrollArea'),
-  rootMargin: '0px',
-  threshold: 1.0
-}
-
-var observer = new IntersectionObserver(callback, options);
- -

Un palier de 1.0 signifie que lorsque 100% de la cible est visible dans l'élément désigné par l'option root (l'élément racine), la fonction callback est invoquée.

- -

Options de l'observateur d'intersection

- -

L'objet options qui est passé dans le constructeur  {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction callback de l'observateur est invoquée. Il possède les champs suivants :

- -
-
root
-
L'élément qui est utilisé comme zone d'affichage au moment d'évaluer la visibilité de la cible. Il doit être un ancêtre de la cible. S'il n'est pas spécifié ou s'il prend la valeur null, sa valeur par défaut est la zone d'affichage (le viewport) du navigateur.
-
rootMargin
-
La marge autour de la racine. Peut prendre des valeurs similaires à la propriété CSS {{cssxref("margin")}} par exemple "10px 20px 30px 40px" (top, right, bottom, left). Si l'élément root a été spécifié, les valeurs peuvent être exprimées en pourcentages. Cet ensemble de valeur sert à agrandir ou à réduire chaque coté du cadre délimitant l'élément racine avant d'évaluer les intersections. Par défaut, toutes les valeurs prennent la valeur zéro.
-
threshold
-
Soit un nombre, soit un tableau de nombre qui indique à quel pourcentage de la visibilité de la cible la fonction callback de la cible doit être exécuté. Si vous souhaitez seulement détecter quand la visibilité franchit la barre des 50%, vous pouvez entrer la valeur 0.5. Si vous voulez que le callback soit exécuté chaque fois que la visibilité varie de 25% de plus, il faudra spécifier le tableau [0, 0.25, 0.5, 0.75, 1]. La valeur par défaut est 0 (ce qui signifie que dés qu'un seul pixel sera visible, la fonction callback sera exécutée). Une valeur de 1.0 signifie que le palier n'est considéré comme franchi qu'une fois que tous les pixels sont visibles.
-
- -

Choisir un élément à observer

- -

Une fois l'observateur créé, il faut lui donner un élément cible à observer :

- -
var target = document.querySelector('#listItem');
-observer.observe(target);
-
- -

Lorsque la cible franchit un palier spécifié indiqué dans l'objet IntersectionObserver, la fonction callback est appelée. Le callback reçoit une liste d'objets {{domxref("IntersectionObserverEntry")}} ainsi que l'observateur :

- -
var callback = function(entries, observer) {
-  entries.forEach(entry => {
-    // chaque élément de entries correspond à une variation
-    // d'intersection pour un des éléments cible:
-    //   entry.boundingClientRect
-    //   entry.intersectionRatio
-    //   entry.intersectionRect
-    //   entry.isIntersecting
-    //   entry.rootBounds
-    //   entry.target
-    //   entry.time
-  });
-};
-
- -

Soyez attentif au fait que la fonction callback est exécutée dans le thread principal. Elle devrait être exécutée aussi rapidement que possible ; si une opération prenant du temps a besoin d'être effectuée, utilisez {{domxref("Window.requestIdleCallback()")}}.

- -

De plus, remarquez que si vous avez spécifié l'option root, la cible doit être un descendant de l'élément root.

- -

Comment est calculée l'intersection

- -

Toutes les régions envisagées par l'API Intersection Observer sont des rectangles; les éléments de forme irrégulière sont assimilées au plus petit rectangle qui contient l'élément en question tout entier. De même, si la partie visible d'un élément n'est pas rectangulaire, le rectangle d'intersection de l'élément sera le plus petit rectangle qui contient toute la partie visible de l'élément.

- -

Il est utile de comprendre comment les différentes propriétés fournies par {{domxref("IntersectionObserverEntry")}} décrivent une intersection.

- -

La racine de l'intersection et la marge de la racine

- -

Avant de pouvoir étudier l'intersection d'un élément avec un conteneur, nous devons savoir quel est ce conteneur. Ce conteneur est la racine de l'intersection, ou élément racine. Ce peut être soit un élément du document qui est un ancêtre de l'élément à observer, ou null si l'on souhaite utiliser la zone d'affichage (viewport) du document comme conteneur.

- -

Le rectangle utilisé pour délimiter la racine de l'intersection peut être ajusté en ajustant la marge de la racine, c'est-à-dire le champ rootMargin, lors de la création de {{domxref("IntersectionObserver")}}. La valeur de rootMargin définit le décalage ajouté à chaque coté du cadre délimitant la racine de l'intersection pour créer le cadre final de la racine de l'intersection (accessible via {{domxref("IntersectionObserverEntry.rootBounds")}} quand la fonction callback est exécutée).

- -

Paliers

- -

Plutôt que de rapporter le moindre changement de variation de la visibilité d'un élément, l'API Intersection Observer utilise des paliers. Lors de la création d'un observateur, vous pouvez fournir une ou plusieurs valeurs numériques qui représentent des pourcentages de visibilité de l'élément cible. Dans ce cas, l'API ne rapportent que les changements de visibilité qui franchissent ces paliers.

- -

Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau [0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du  {{domxref("IntersectionObserverEntry")}} passé dans la fonction callback lors du changement de visibilité. Si isIntersecting est true, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut false, la cible n'est plus aussi visible que le palier spécifié.

- -

Pour mieux comprendre comment fonctionnent les paliers, faites défiler la boîte ci-dessous. A l'intérieur, chacune des boîtes colorées affiche son pourcentage de visibilité sur chacun de ses quatre coins, de telle sorte que l'on peut voir ces ratios changer tandis que le conteneur défile. Chaque boîte a un ensemble différent de paliers :

- -
    -
  • La première boîte a un palier pour chaque point de pourcentage de visibilité; c'est à dire que le tableau {{domxref("IntersectionObserver.thresholds")}} est [0.00, 0.01, 0.02, ..., 0.99, 1.00].
    • -
  • La deuxième boîte a un unique palier, à 50%.
    • -
  • La troisième boîte a des paliers tous les 10% de visibilité (0%, 10%, 20%, etc.).
    • -
  • La dernière boîte a des paliers tous les 25%.
    • -
- -
Exemple de seuil
- - - - - - - -

{{EmbedLiveSample("exemple_de_seuil", 500, 500)}}

- -

Interfaces

- -
-
{{domxref("IntersectionObserver")}}
-
L'interface principale pour l'API Intersection Observer. Elle fournit des méthodes pour créer et manipuler un observateur qui peut observer n'importe quel nombre d'éléments cibles pour une même configuration d'intersection. Chaque observateur peut observer de manière asynchrone les évolutions de l'intersection entre un ou plusieurs éléments cibles et un élément ancêtre partagé, ou avec le {{Glossary('viewport')}} de leur {{domxref("Document")}} de niveau supérieur. L'ancêtre ou le viewport est désigné par le terme racine.
-
{{domxref("IntersectionObserverEntry")}}
-
Cette interface décrit l'intersection d'un élément cible spécifique avec la racine de l'observateur à un moment donné. Les objets de ce type ne peuvent être obtenus que de deux façons : comme entrée du callback de votre IntersectionObserver, ou en appelant {{domxref("IntersectionObserver.takeRecords()")}}.
-
- -

Un exemple simple

- -

Cet exemple simple va faire changer la couleur et la transparence d'un élément cible à mesure qu'il devient plus ou moins visible. Sur la page Timing element visibility with the Intersection Observer API, vous pourrez trouver un exemple plus développé montrant comment chronométrer le temps durant lequel un élément (par exemple, une publicité) a été visible à l'écran, et comment réagir à cette information en enregistrant des statistiques ou en mettant à jour des éléments.

- -

HTML

- -

Le code HTML de cet exemple est très court. L'élément principal est la boîte que nous allons cibler (avec l'ingénieuse dénomination "box") et certains contenus dans la boîte.

- -
<div id="box">
-  <div class="vertical">
-    Bienvenue dans <strong>La Boîte !</strong>
-  </div>
-</div>
- -

CSS

- -

Le CSS n'est pas extrêmement important dans le cadre de cet exemple ; il met en place l'élément et établit que les attributs {{cssxref("background-color")}} et {{cssxref("border")}} peuvent participer à des transitions CSS. Nous utiliserons ces transitions pour faire évoluer l'élément de telle sorte qu'il devienne plus ou moins obscur.

- -
#box {
-  background-color: rgba(40, 40, 190, 255);
-  border: 4px solid rgb(20, 20, 120);
-  transition: background-color 1s, border 1s;
-  width: 350px;
-  height: 350px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-}
-
-.vertical {
-  color: white;
-  font: 32px "Arial";
-}
-
-.extra {
-  width: 350px;
-  height: 350px;
-  margin-top: 10px;
-  border: 4px solid rgb(20, 20, 120);
-  text-align: center;
-  padding: 20px;
-}
- -

JavaScript

- -

Enfin, jetons un œil au code JavaScript qui utilise l'API Intersection Observer.

- -

Préparation

- -

Premièrement, nous devons préparer des variables et installer l'observateur.

- -
var numSteps = 20.0;
-
-var boxElement;
-var prevRatio = 0.0;
-var increasingColor = "rgba(40, 40, 190, ratio)";
-var decreasingColor = "rgba(190, 40, 40, ratio)";
-
-// On met l'ensemble en place.
-
-window.addEventListener("load", function(event) {
-  boxElement = document.querySelector("#box");
-
-  createObserver();
-}, false);
- -

Les constantes et variables que nous préparons sont :

- -
-
numSteps
-
Une constante qui indique combien de paliers nous voulons avoir entre les ratios de visibilité de 0.0 et de 1.0.
-
prevRatio
-
Cette variable sera utilisée pour mémoriser quel était le ratio de visibilité la dernière fois qu'un palier a été franchi ; ce qui nous permettra de savoir si l'élément est en train de devenir plus ou moins visible.
-
increasingColor
-
Une chaîne de caractères définissant une couleur que nous appliquerons à l'élément cible quand le ratio de visibilité augmente. Le mot "ratio" dans cette chaîne de caractères sera remplacé par la ratio de visibilité de la cible actuelle, de telle sorte que l'élément, en plus de changer de couleur, deviendra de plus en plus opaque à mesure qu'il deviendra obscur.
-
decreasingColor
-
De même, il s'agit d'une chaîne de caractères qui définit une couleur que nous appliquerons lorsque le ratio de visibilité diminue.
-
- -

On appelle {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} pour commencer à écouter l'évènement {{event("load")}} ; une fois que la page a finit de charger, on obtient une référence de l'élément avec l'identifiant "box" grâce à {{domxref("Document.querySelector", "querySelector()")}}, puis on appelle la méthode createObserver() que l'on va définir un peu plus tard pour gérer la création et l'installation de l'observateur d'intersection.

- -

Création de l'observateur d'intersection

- -

La méthode createObserver() est appelée une fois que le chargement de la page est terminé afin de gérer la création du nouveau {{domxref("IntersectionObserver")}} et de commencer le processus d'observation de l'élément cible.

- -
function createObserver() {
-  var observer;
-
-  var options = {
-    root: null,
-    rootMargin: "0px",
-    threshold: buildThresholdList()
-  };
-
-  observer = new IntersectionObserver(handleIntersect, options);
-  observer.observe(boxElement);
-}
- -

On commence par définir un objet options contenant les paramètres pour l'observateur. On voudra observer les évolutions de la visibilité de l'élément cible relativement au viewport, on initialise donc root avec null. Nous n'avons pas besoin de marge, donc l'espace de marge, rootMargin, est initialisé à "0px". Ainsi, l'observateur surveillera les variations de l'intersection entre les frontières de l'élément cible et ceux du viewport, sans aucun espace ajouté ou ôté.

- -

La liste de paliers de ratio de visibilité, threshold, est construite par la fonction buildThresholdList(). La liste de paliers est construite mécaniquement dans cet exemple car il y en a un certain nombre, et que ce nombre a vocation à être ajustable.

- -

Une fois que options est prêt, nous pouvons créer le nouvel observateur, en appelant le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} , en précisant une fonction callback à appeler quand l'intersection franchit l'un de nos paliers, handleIntersect(), et notre ensemble d'options. On appelle alors {{domxref("IntersectionObserver.observe", "observe()")}} sur l'observateur retourné, afin de le passer à l'élément qui sera notre cible

- -

On pourrait également choisir de surveiller l'évolution de la visibilité de l'intersection de plusieurs éléments par rapport au viewport en appelant observer.observe()pour chacun de ces éléments.

- -

Construction du tableau de paliers de ratios

- -

La fonctionbuildThresholdList(), qui construit la liste de paliers, ressemble à ceci :

- -
function buildThresholdList() {
-  var thresholds = [];
-
-  for (var i=1.0; i<=numSteps; i++) {
-    var ratio = i/numSteps;
-    thresholds.push(ratio);
-  }
-
-  thresholds.push(0);
-  return thresholds;
-}
- -

Cela construit la tableau de paliers (chacun de ces paliers étant un ratio compris entre 0.0 et 1.0, ajouté en poussant la valeuri/numStepsdans le tableau thresholds pour chaque entier i entre 1 et numSteps). On pousse également 0 pour inclure cette valeur. Le résultat, dans le cas oùnumStepsa sa valeur par défaut, est la liste de paliers suivante :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#Ratio#Ratio
10.05110.55
20.1120.6
30.15130.65
40.2140.7
50.25150.75
60.3160.8
70.35170.85
80.4180.9
90.45190.95
100.5201.0
- -

Bien sur, on pourrait coder en dur le tableau de paliers dans notre code, et c'est souvent ce que vous ferez. Cependant, cet exemple laisse un peu de place pour plus de configuration afin d'ajuster la granularité, par exemple.

- -

Gérer les évolutions de l'intersection

- -

Quand le navigateur détecte que l'élément cible (dans notre cas, celui avec l'identifiant "box") a été révélé ou caché de tel sorte que son ratio de visibilité franchit l'un des paliers de notre liste, il appelle la fonction handleIntersect():

- -
function handleIntersect(entries, observer) {
-  entries.forEach(function(entry) {
-    if (entry.intersectionRatio > prevRatio) {
-      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
-    } else {
-      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
-    }
-
-    prevRatio = entry.intersectionRatio;
-  });
-}
- -

Pour chaque {{domxref("IntersectionObserverEntry")}} dans la liste entries, on cherche si le {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} de l'entrée augmente; si c'est le cas, on donne à la propriété CSS {{cssxref("background-color")}} de la cible la valeur increasingColor (pour rappel, c'est la chaîne de caractères "rgba(40, 40, 190, ratio)"), et on remplace le mot "ratio" avec le intersectionRatio de l'entrée. Le résultat : non seulement la couleur change, mais la transparence de l'élément change aussi. Quand le ratio d'intersection diminue, l'alpha de la couleur de fond diminue de même, et l'élément devient plus transparent.

- -

De même, si le intersectionRatio augmente, on utilise la chaîne de caractères decreasingColor et on y remplace le mot "ratio" avec intersectionRatio avant d'assigner le background-color de l'élément cible.

- -

Enfin, afin de surveiller si le ratio d'intersection augmente ou diminue, on garde en mémoire le ratio actuel dans la variable prevRatio.

- -

Résultat

- -

Vous pouvez retrouver le résultat ci-dessous. Déroulez cette page vers le haut ou vers le bas et observez comment l'apparence de la boîte change au fur et à mesure.

- -

{{EmbedLiveSample('Un_exemple_simple', 400, 400)}}

- -

Vous pouvez consulter un exemple encore plus détaillé sur l'article Timing element visibility with the Intersection Observer API.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserver")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/intersection_observer_api/index.md b/files/fr/web/api/intersection_observer_api/index.md new file mode 100644 index 0000000000..3343785331 --- /dev/null +++ b/files/fr/web/api/intersection_observer_api/index.md @@ -0,0 +1,543 @@ +--- +title: Intersection Observer API +slug: Web/API/Intersection_Observer_API +tags: + - API + - IntersectionObserver + - Reference + - Web +translation_of: Web/API/Intersection_Observer_API +--- +
{{SeeCompatTable}}{{DefaultAPISidebar("Intersection Observer API")}}
+ +

L'API Intersection Observer permet d'observer de manière asynchrone l'évolution de l'intersection d'un élément cible avec un élément ancêtre ou avec la zone d'affichage d'un document de niveau supérieur.

+ +

Historiquement, détecter la visibilité d'un élément, ou la visibilité relative de deux éléments l'un par rapport à l'autre, a été une tache difficile, résolue de manière peu rigoureuse et pouvant nuire à la fluidité de la page consultée. Malheureusement, avec la maturation de la toile, ce genre d'information se révèle de plus en plus nécessaire. La donnée de l'intersection est requise pour de nombreuses raisons, telles que:

+ +
    +
  • Le chargement paresseux d'images ou d'autres types de contenus au fur et à mesure que la page défile.
    • +
  • L'implantation de « défilement infini », où de plus en plus de contenu est chargé tandis que l'utilisateur défile, afin qu'il n'ait pas à changer de page.
    • +
  • Le signalement de la visibilité pour les publicités afin de calculer les revenus publicitaires.
    • +
  • La décision d'exécuter ou non une tâche ou une animation selon que l'utilisateur va en voir le résultat ou non.
    • +
+ +

De par le passé, l'implantation de la détection d'intersection impliquait des gestionnaires d'évènements et des boucles appelant des méthodes telles que {{domxref("Element.getBoundingClientRect()")}} afin de générer les informations nécessaires pour chaque élément concerné. Comme la totalité du code est exécuté dans le thread principal, même une seule de ces boucles peut causer des problèmes de performance. Si un site est rempli de ces tests, les choses peuvent vite devenir très moches.

+ +

Prenons une page qui utilise un défilement infini. Mettons qu'elle utilise une bibliothèque fournie par un éditeur afin de gérer les publicités placées périodiquement le long de la page, qu'elle a des graphiques animés ici et là, et qu'elle utilise une bibliothèque personnalisée pour dessiner des cases de notifications et ce genre de choses. Chacune de ces choses a ses propres procédures de détection d'intersection, toutes exécutées dans le thread principal. L'auteur du site ne le réalise peut-être même pas, puisqu'il utilise deux bibliothèques dont il ne connaît pas forcément les détails de fonctionnement. Quand l'utilisateur navigue sur la page, ces procédures de détection d'intersection réagissent constamment pendant l'exécution du code de défilement, rendant l'expérience frustrante pour l'utilisateur vis-à-vis de son navigateur, du site Internet et de son ordinateur.

+ +

L'API Intersection Observer permet d'intégrer une fonction callback qui est exécutée quand un élément qu'on souhaite surveiller entre ou sort d'un autre élément (ou du viewport (zone d'affichage)), ou quand la taille de leur intersection varie d'une quantité prédéterminée. Ainsi, les sites n'ont plus besoin de faire quoi que ce soit sur le thread principal pour surveiller ce genre d'intersection d'éléments, et le navigateur est libre de gérer la détection d'intersection comme bon lui semble.

+ +

Il y a une chose sur laquelle l'API Intersection Observer ne peut pas vous renseigner : le nombre de pixels qui intersectent, ou bien desquels il s'agit précisément; par contre elle permet d'ordonner des actions souvent utiles telles que « si ils s'intersectent de plus de N%, alors faire ceci ».

+ +

Concepts et utilisation de l'observateur d'intersections

+ +

L'API Intersection Observer permet de mettre en place une fonction callback qui est appelée quand un élément, appelé la cible, intersecte ou bien le viewport (la zone d'affichage) ou bien un élément prédéfini ; dans le cadre de cette API, nous l’appellerons l'élément racine ou la racine. Typiquement, on voudra observer les variations de l'intersection par rapport à la zone d'affichage du document (ce qui est fait en passant l'argument null au moment de désigner l'élément racine). Que vous utilisiez la zone d'affichage ou un autre élément comme racine, l'API fonctionne de la même façon, en exécutant une fonction callback, fournie au préalable, lorsque la visibilité de l'élément cible change de telle sorte qu'il atteint la quantité voulue d'intersection avec l'élément racine.

+ +

Le degré d'intersection entre l'élément cible et sa racine est le ratio d'intersection. C'est une représentation du pourcentage de l'élément cible qui est visible, exprimée sous la forme d'un nombre compris entre 0.0 et 1.0.

+ +

Création d'un observateur d'intersection

+ +

Créez l'observateur d'intersection en appelant son constructeur et en lui passant la référence d'une fonction callback. Cette fonction sera exécutée quand un palier est franchi dans un sens ou dans un autre :

+ +
var options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+var observer = new IntersectionObserver(callback, options);
+ +

Un palier de 1.0 signifie que lorsque 100% de la cible est visible dans l'élément désigné par l'option root (l'élément racine), la fonction callback est invoquée.

+ +

Options de l'observateur d'intersection

+ +

L'objet options qui est passé dans le constructeur  {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction callback de l'observateur est invoquée. Il possède les champs suivants :

+ +
+
root
+
L'élément qui est utilisé comme zone d'affichage au moment d'évaluer la visibilité de la cible. Il doit être un ancêtre de la cible. S'il n'est pas spécifié ou s'il prend la valeur null, sa valeur par défaut est la zone d'affichage (le viewport) du navigateur.
+
rootMargin
+
La marge autour de la racine. Peut prendre des valeurs similaires à la propriété CSS {{cssxref("margin")}} par exemple "10px 20px 30px 40px" (top, right, bottom, left). Si l'élément root a été spécifié, les valeurs peuvent être exprimées en pourcentages. Cet ensemble de valeur sert à agrandir ou à réduire chaque coté du cadre délimitant l'élément racine avant d'évaluer les intersections. Par défaut, toutes les valeurs prennent la valeur zéro.
+
threshold
+
Soit un nombre, soit un tableau de nombre qui indique à quel pourcentage de la visibilité de la cible la fonction callback de la cible doit être exécuté. Si vous souhaitez seulement détecter quand la visibilité franchit la barre des 50%, vous pouvez entrer la valeur 0.5. Si vous voulez que le callback soit exécuté chaque fois que la visibilité varie de 25% de plus, il faudra spécifier le tableau [0, 0.25, 0.5, 0.75, 1]. La valeur par défaut est 0 (ce qui signifie que dés qu'un seul pixel sera visible, la fonction callback sera exécutée). Une valeur de 1.0 signifie que le palier n'est considéré comme franchi qu'une fois que tous les pixels sont visibles.
+
+ +

Choisir un élément à observer

+ +

Une fois l'observateur créé, il faut lui donner un élément cible à observer :

+ +
var target = document.querySelector('#listItem');
+observer.observe(target);
+
+ +

Lorsque la cible franchit un palier spécifié indiqué dans l'objet IntersectionObserver, la fonction callback est appelée. Le callback reçoit une liste d'objets {{domxref("IntersectionObserverEntry")}} ainsi que l'observateur :

+ +
var callback = function(entries, observer) {
+  entries.forEach(entry => {
+    // chaque élément de entries correspond à une variation
+    // d'intersection pour un des éléments cible:
+    //   entry.boundingClientRect
+    //   entry.intersectionRatio
+    //   entry.intersectionRect
+    //   entry.isIntersecting
+    //   entry.rootBounds
+    //   entry.target
+    //   entry.time
+  });
+};
+
+ +

Soyez attentif au fait que la fonction callback est exécutée dans le thread principal. Elle devrait être exécutée aussi rapidement que possible ; si une opération prenant du temps a besoin d'être effectuée, utilisez {{domxref("Window.requestIdleCallback()")}}.

+ +

De plus, remarquez que si vous avez spécifié l'option root, la cible doit être un descendant de l'élément root.

+ +

Comment est calculée l'intersection

+ +

Toutes les régions envisagées par l'API Intersection Observer sont des rectangles; les éléments de forme irrégulière sont assimilées au plus petit rectangle qui contient l'élément en question tout entier. De même, si la partie visible d'un élément n'est pas rectangulaire, le rectangle d'intersection de l'élément sera le plus petit rectangle qui contient toute la partie visible de l'élément.

+ +

Il est utile de comprendre comment les différentes propriétés fournies par {{domxref("IntersectionObserverEntry")}} décrivent une intersection.

+ +

La racine de l'intersection et la marge de la racine

+ +

Avant de pouvoir étudier l'intersection d'un élément avec un conteneur, nous devons savoir quel est ce conteneur. Ce conteneur est la racine de l'intersection, ou élément racine. Ce peut être soit un élément du document qui est un ancêtre de l'élément à observer, ou null si l'on souhaite utiliser la zone d'affichage (viewport) du document comme conteneur.

+ +

Le rectangle utilisé pour délimiter la racine de l'intersection peut être ajusté en ajustant la marge de la racine, c'est-à-dire le champ rootMargin, lors de la création de {{domxref("IntersectionObserver")}}. La valeur de rootMargin définit le décalage ajouté à chaque coté du cadre délimitant la racine de l'intersection pour créer le cadre final de la racine de l'intersection (accessible via {{domxref("IntersectionObserverEntry.rootBounds")}} quand la fonction callback est exécutée).

+ +

Paliers

+ +

Plutôt que de rapporter le moindre changement de variation de la visibilité d'un élément, l'API Intersection Observer utilise des paliers. Lors de la création d'un observateur, vous pouvez fournir une ou plusieurs valeurs numériques qui représentent des pourcentages de visibilité de l'élément cible. Dans ce cas, l'API ne rapportent que les changements de visibilité qui franchissent ces paliers.

+ +

Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau [0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du  {{domxref("IntersectionObserverEntry")}} passé dans la fonction callback lors du changement de visibilité. Si isIntersecting est true, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut false, la cible n'est plus aussi visible que le palier spécifié.

+ +

Pour mieux comprendre comment fonctionnent les paliers, faites défiler la boîte ci-dessous. A l'intérieur, chacune des boîtes colorées affiche son pourcentage de visibilité sur chacun de ses quatre coins, de telle sorte que l'on peut voir ces ratios changer tandis que le conteneur défile. Chaque boîte a un ensemble différent de paliers :

+ +
    +
  • La première boîte a un palier pour chaque point de pourcentage de visibilité; c'est à dire que le tableau {{domxref("IntersectionObserver.thresholds")}} est [0.00, 0.01, 0.02, ..., 0.99, 1.00].
    • +
  • La deuxième boîte a un unique palier, à 50%.
    • +
  • La troisième boîte a des paliers tous les 10% de visibilité (0%, 10%, 20%, etc.).
    • +
  • La dernière boîte a des paliers tous les 25%.
    • +
+ +
Exemple de seuil
+ + + + + + + +

{{EmbedLiveSample("exemple_de_seuil", 500, 500)}}

+ +

Interfaces

+ +
+
{{domxref("IntersectionObserver")}}
+
L'interface principale pour l'API Intersection Observer. Elle fournit des méthodes pour créer et manipuler un observateur qui peut observer n'importe quel nombre d'éléments cibles pour une même configuration d'intersection. Chaque observateur peut observer de manière asynchrone les évolutions de l'intersection entre un ou plusieurs éléments cibles et un élément ancêtre partagé, ou avec le {{Glossary('viewport')}} de leur {{domxref("Document")}} de niveau supérieur. L'ancêtre ou le viewport est désigné par le terme racine.
+
{{domxref("IntersectionObserverEntry")}}
+
Cette interface décrit l'intersection d'un élément cible spécifique avec la racine de l'observateur à un moment donné. Les objets de ce type ne peuvent être obtenus que de deux façons : comme entrée du callback de votre IntersectionObserver, ou en appelant {{domxref("IntersectionObserver.takeRecords()")}}.
+
+ +

Un exemple simple

+ +

Cet exemple simple va faire changer la couleur et la transparence d'un élément cible à mesure qu'il devient plus ou moins visible. Sur la page Timing element visibility with the Intersection Observer API, vous pourrez trouver un exemple plus développé montrant comment chronométrer le temps durant lequel un élément (par exemple, une publicité) a été visible à l'écran, et comment réagir à cette information en enregistrant des statistiques ou en mettant à jour des éléments.

+ +

HTML

+ +

Le code HTML de cet exemple est très court. L'élément principal est la boîte que nous allons cibler (avec l'ingénieuse dénomination "box") et certains contenus dans la boîte.

+ +
<div id="box">
+  <div class="vertical">
+    Bienvenue dans <strong>La Boîte !</strong>
+  </div>
+</div>
+ +

CSS

+ +

Le CSS n'est pas extrêmement important dans le cadre de cet exemple ; il met en place l'élément et établit que les attributs {{cssxref("background-color")}} et {{cssxref("border")}} peuvent participer à des transitions CSS. Nous utiliserons ces transitions pour faire évoluer l'élément de telle sorte qu'il devienne plus ou moins obscur.

+ +
#box {
+  background-color: rgba(40, 40, 190, 255);
+  border: 4px solid rgb(20, 20, 120);
+  transition: background-color 1s, border 1s;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.vertical {
+  color: white;
+  font: 32px "Arial";
+}
+
+.extra {
+  width: 350px;
+  height: 350px;
+  margin-top: 10px;
+  border: 4px solid rgb(20, 20, 120);
+  text-align: center;
+  padding: 20px;
+}
+ +

JavaScript

+ +

Enfin, jetons un œil au code JavaScript qui utilise l'API Intersection Observer.

+ +

Préparation

+ +

Premièrement, nous devons préparer des variables et installer l'observateur.

+ +
var numSteps = 20.0;
+
+var boxElement;
+var prevRatio = 0.0;
+var increasingColor = "rgba(40, 40, 190, ratio)";
+var decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// On met l'ensemble en place.
+
+window.addEventListener("load", function(event) {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);
+ +

Les constantes et variables que nous préparons sont :

+ +
+
numSteps
+
Une constante qui indique combien de paliers nous voulons avoir entre les ratios de visibilité de 0.0 et de 1.0.
+
prevRatio
+
Cette variable sera utilisée pour mémoriser quel était le ratio de visibilité la dernière fois qu'un palier a été franchi ; ce qui nous permettra de savoir si l'élément est en train de devenir plus ou moins visible.
+
increasingColor
+
Une chaîne de caractères définissant une couleur que nous appliquerons à l'élément cible quand le ratio de visibilité augmente. Le mot "ratio" dans cette chaîne de caractères sera remplacé par la ratio de visibilité de la cible actuelle, de telle sorte que l'élément, en plus de changer de couleur, deviendra de plus en plus opaque à mesure qu'il deviendra obscur.
+
decreasingColor
+
De même, il s'agit d'une chaîne de caractères qui définit une couleur que nous appliquerons lorsque le ratio de visibilité diminue.
+
+ +

On appelle {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} pour commencer à écouter l'évènement {{event("load")}} ; une fois que la page a finit de charger, on obtient une référence de l'élément avec l'identifiant "box" grâce à {{domxref("Document.querySelector", "querySelector()")}}, puis on appelle la méthode createObserver() que l'on va définir un peu plus tard pour gérer la création et l'installation de l'observateur d'intersection.

+ +

Création de l'observateur d'intersection

+ +

La méthode createObserver() est appelée une fois que le chargement de la page est terminé afin de gérer la création du nouveau {{domxref("IntersectionObserver")}} et de commencer le processus d'observation de l'élément cible.

+ +
function createObserver() {
+  var observer;
+
+  var options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}
+ +

On commence par définir un objet options contenant les paramètres pour l'observateur. On voudra observer les évolutions de la visibilité de l'élément cible relativement au viewport, on initialise donc root avec null. Nous n'avons pas besoin de marge, donc l'espace de marge, rootMargin, est initialisé à "0px". Ainsi, l'observateur surveillera les variations de l'intersection entre les frontières de l'élément cible et ceux du viewport, sans aucun espace ajouté ou ôté.

+ +

La liste de paliers de ratio de visibilité, threshold, est construite par la fonction buildThresholdList(). La liste de paliers est construite mécaniquement dans cet exemple car il y en a un certain nombre, et que ce nombre a vocation à être ajustable.

+ +

Une fois que options est prêt, nous pouvons créer le nouvel observateur, en appelant le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} , en précisant une fonction callback à appeler quand l'intersection franchit l'un de nos paliers, handleIntersect(), et notre ensemble d'options. On appelle alors {{domxref("IntersectionObserver.observe", "observe()")}} sur l'observateur retourné, afin de le passer à l'élément qui sera notre cible

+ +

On pourrait également choisir de surveiller l'évolution de la visibilité de l'intersection de plusieurs éléments par rapport au viewport en appelant observer.observe()pour chacun de ces éléments.

+ +

Construction du tableau de paliers de ratios

+ +

La fonctionbuildThresholdList(), qui construit la liste de paliers, ressemble à ceci :

+ +
function buildThresholdList() {
+  var thresholds = [];
+
+  for (var i=1.0; i<=numSteps; i++) {
+    var ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}
+ +

Cela construit la tableau de paliers (chacun de ces paliers étant un ratio compris entre 0.0 et 1.0, ajouté en poussant la valeuri/numStepsdans le tableau thresholds pour chaque entier i entre 1 et numSteps). On pousse également 0 pour inclure cette valeur. Le résultat, dans le cas oùnumStepsa sa valeur par défaut, est la liste de paliers suivante :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Ratio#Ratio
10.05110.55
20.1120.6
30.15130.65
40.2140.7
50.25150.75
60.3160.8
70.35170.85
80.4180.9
90.45190.95
100.5201.0
+ +

Bien sur, on pourrait coder en dur le tableau de paliers dans notre code, et c'est souvent ce que vous ferez. Cependant, cet exemple laisse un peu de place pour plus de configuration afin d'ajuster la granularité, par exemple.

+ +

Gérer les évolutions de l'intersection

+ +

Quand le navigateur détecte que l'élément cible (dans notre cas, celui avec l'identifiant "box") a été révélé ou caché de tel sorte que son ratio de visibilité franchit l'un des paliers de notre liste, il appelle la fonction handleIntersect():

+ +
function handleIntersect(entries, observer) {
+  entries.forEach(function(entry) {
+    if (entry.intersectionRatio > prevRatio) {
+      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+    } else {
+      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+    }
+
+    prevRatio = entry.intersectionRatio;
+  });
+}
+ +

Pour chaque {{domxref("IntersectionObserverEntry")}} dans la liste entries, on cherche si le {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} de l'entrée augmente; si c'est le cas, on donne à la propriété CSS {{cssxref("background-color")}} de la cible la valeur increasingColor (pour rappel, c'est la chaîne de caractères "rgba(40, 40, 190, ratio)"), et on remplace le mot "ratio" avec le intersectionRatio de l'entrée. Le résultat : non seulement la couleur change, mais la transparence de l'élément change aussi. Quand le ratio d'intersection diminue, l'alpha de la couleur de fond diminue de même, et l'élément devient plus transparent.

+ +

De même, si le intersectionRatio augmente, on utilise la chaîne de caractères decreasingColor et on y remplace le mot "ratio" avec intersectionRatio avant d'assigner le background-color de l'élément cible.

+ +

Enfin, afin de surveiller si le ratio d'intersection augmente ou diminue, on garde en mémoire le ratio actuel dans la variable prevRatio.

+ +

Résultat

+ +

Vous pouvez retrouver le résultat ci-dessous. Déroulez cette page vers le haut ou vers le bas et observez comment l'apparence de la boîte change au fur et à mesure.

+ +

{{EmbedLiveSample('Un_exemple_simple', 400, 400)}}

+ +

Vous pouvez consulter un exemple encore plus détaillé sur l'article Timing element visibility with the Intersection Observer API.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserver")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/intersectionobserver/disconnect/index.html b/files/fr/web/api/intersectionobserver/disconnect/index.html deleted file mode 100644 index b2d7220fc3..0000000000 --- a/files/fr/web/api/intersectionobserver/disconnect/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: IntersectionObserver.disconnect() -slug: Web/API/IntersectionObserver/disconnect -tags: - - API - - Disconnect - - Intersection Observer - - Intersection Observer API - - IntersectionObserver - - Method - - Reference -translation_of: Web/API/IntersectionObserver/disconnect ---- -
{{APIRef("Intersection Observer API")}}
- -

La méthode disconnect(), rattachée à l'interface IntersectionObserver, arrête l'observation des changements de visibilité de l'ensemble des éléments cibles.

- -

Syntaxe

- -
intersectionObserver.disconnect();
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

undefined.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
- {{SpecName('IntersectionObserver','#dom-intersectionobserver-disconnect','IntersectionObserver.disconnect()')}} - {{Spec2('IntersectionObserver')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserver.disconnect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/intersectionobserver/disconnect/index.md b/files/fr/web/api/intersectionobserver/disconnect/index.md new file mode 100644 index 0000000000..b2d7220fc3 --- /dev/null +++ b/files/fr/web/api/intersectionobserver/disconnect/index.md @@ -0,0 +1,60 @@ +--- +title: IntersectionObserver.disconnect() +slug: Web/API/IntersectionObserver/disconnect +tags: + - API + - Disconnect + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Method + - Reference +translation_of: Web/API/IntersectionObserver/disconnect +--- +
{{APIRef("Intersection Observer API")}}
+ +

La méthode disconnect(), rattachée à l'interface IntersectionObserver, arrête l'observation des changements de visibilité de l'ensemble des éléments cibles.

+ +

Syntaxe

+ +
intersectionObserver.disconnect();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

undefined.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
+ {{SpecName('IntersectionObserver','#dom-intersectionobserver-disconnect','IntersectionObserver.disconnect()')}} + {{Spec2('IntersectionObserver')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserver.disconnect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/index.html deleted file mode 100644 index cd9eb647cd..0000000000 --- a/files/fr/web/api/intersectionobserver/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: IntersectionObserver -slug: Web/API/IntersectionObserver -tags: - - API - - Interface - - Intersection Observer API - - IntersectionObserver - - Reference - - observers -translation_of: Web/API/IntersectionObserver ---- -
{{APIRef("Intersection Observer API")}}
- -

L'interface IntersectionObserver de l'API Intersection Observer fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document (viewport). L'ancêtre ou la fenêtre du document est alors appelé racine dans ce contexte.

- -

Lorsqu'un objet implémentant IntersectionObserver est créé, il est configuré pour surveiller des ratios donnés de visibilité au sein de la racine. La configuration ne peut être changée après initialisation de l'IntersectionObserver. Ainsi un certain observateur ne sera utile que pour surveiller certains changements spécifiques de visibilité ; toutefois, on peut observer de multiples éléments avec un unique observateur.

- -

Constructeur

- -
-
IntersectionObserver.IntersectionObserver() {{Experimental_inline}}
-
Crée un nouvel objet IntersectionObserver qui exécutera une fonction de rappel lorsqu'il détectera que la visibilité de l'élément cible a franchi un ou plusieurs seuils.
-
- -

Propriétés

- -
-
IntersectionObserver.root {{readonlyinline}} {{Experimental_inline}}
-
L'élément ou le document dont les limites sont utilisées comme boîte englobante pour le test de l'intersection. Si aucune racine n'est passée au constructeur ou que sa valeur est null, c'est la zone d'affichage (viewport) de plus haut niveau qui est utilisée.
-
IntersectionObserver.rootMargin {{readonlyinline}} {{Experimental_inline}}
-
Un rectangle de décalage appliqué à la boîte englobante de la racine lors du calcul des intersections. La zone de la racine est ainsi réduite ou étendue pour les calculs. La valeur renvoyée par cette propriété peut différer de celle spécifiée lors de l'appel du constructeur, car elle peut être modifiée pour répondre aux exigences internes. Chaque décalage peut être exprimé en pixels (px) ou en pourcentage (%). La valeur par défaut est "0px 0px 0px 0px".
-
IntersectionObserver.thresholds {{readonlyinline}} {{Experimental_inline}}
-
Une liste de seuils, triée par ordre numérique croissant, où chaque seuil est un rapport de la surface d'intersection à la surface de la zone de délimitation de l'élément observé. Les notifications pour une cible sont émises dès lors qu'un seuil au moins est franchi pour cette cible. Si aucune valeur n'est donnée, 0 est utilisé comme seuil par défaut.
-
- -

Méthodes

- -
-
IntersectionObserver.disconnect() {{Experimental_inline}}
-
Indique à l'objet IntersectionObserver de ne plus observer aucune cible.
-
IntersectionObserver.observe() {{Experimental_inline}}
-
Indique à l'objet IntersectionObserver un nouvel élément à observer.
-
IntersectionObserver.takeRecords() {{Experimental_inline}}
-
Retourne un tableau d'objets IntersectionObserverEntry pour toutes les cibles observées et cesse de surveiller chacune d'elles.
-
IntersectionObserver.unobserve() {{Experimental_inline}}
-
Indique à l'objet IntersectionObserver de cesser d'observer un élément cible particuler.
-
- -

Exemple

- -
var intersectionObserver = new IntersectionObserver(function(entries) {
-  // Si intersectionRatio vaut 0 ou moins, la cible
-  // est hors de vue et rien n'est alors fait
-  if (entries[0].intersectionRatio <= 0) return;
-
-  loadItems(10);
-  console.log('Nouveaux éléments chargés');
-});
-// début de l'observation
-intersectionObserver.observe(document.querySelector('.scrollerFooter'));
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserver")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/intersectionobserver/index.md b/files/fr/web/api/intersectionobserver/index.md new file mode 100644 index 0000000000..cd9eb647cd --- /dev/null +++ b/files/fr/web/api/intersectionobserver/index.md @@ -0,0 +1,92 @@ +--- +title: IntersectionObserver +slug: Web/API/IntersectionObserver +tags: + - API + - Interface + - Intersection Observer API + - IntersectionObserver + - Reference + - observers +translation_of: Web/API/IntersectionObserver +--- +
{{APIRef("Intersection Observer API")}}
+ +

L'interface IntersectionObserver de l'API Intersection Observer fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document (viewport). L'ancêtre ou la fenêtre du document est alors appelé racine dans ce contexte.

+ +

Lorsqu'un objet implémentant IntersectionObserver est créé, il est configuré pour surveiller des ratios donnés de visibilité au sein de la racine. La configuration ne peut être changée après initialisation de l'IntersectionObserver. Ainsi un certain observateur ne sera utile que pour surveiller certains changements spécifiques de visibilité ; toutefois, on peut observer de multiples éléments avec un unique observateur.

+ +

Constructeur

+ +
+
IntersectionObserver.IntersectionObserver() {{Experimental_inline}}
+
Crée un nouvel objet IntersectionObserver qui exécutera une fonction de rappel lorsqu'il détectera que la visibilité de l'élément cible a franchi un ou plusieurs seuils.
+
+ +

Propriétés

+ +
+
IntersectionObserver.root {{readonlyinline}} {{Experimental_inline}}
+
L'élément ou le document dont les limites sont utilisées comme boîte englobante pour le test de l'intersection. Si aucune racine n'est passée au constructeur ou que sa valeur est null, c'est la zone d'affichage (viewport) de plus haut niveau qui est utilisée.
+
IntersectionObserver.rootMargin {{readonlyinline}} {{Experimental_inline}}
+
Un rectangle de décalage appliqué à la boîte englobante de la racine lors du calcul des intersections. La zone de la racine est ainsi réduite ou étendue pour les calculs. La valeur renvoyée par cette propriété peut différer de celle spécifiée lors de l'appel du constructeur, car elle peut être modifiée pour répondre aux exigences internes. Chaque décalage peut être exprimé en pixels (px) ou en pourcentage (%). La valeur par défaut est "0px 0px 0px 0px".
+
IntersectionObserver.thresholds {{readonlyinline}} {{Experimental_inline}}
+
Une liste de seuils, triée par ordre numérique croissant, où chaque seuil est un rapport de la surface d'intersection à la surface de la zone de délimitation de l'élément observé. Les notifications pour une cible sont émises dès lors qu'un seuil au moins est franchi pour cette cible. Si aucune valeur n'est donnée, 0 est utilisé comme seuil par défaut.
+
+ +

Méthodes

+ +
+
IntersectionObserver.disconnect() {{Experimental_inline}}
+
Indique à l'objet IntersectionObserver de ne plus observer aucune cible.
+
IntersectionObserver.observe() {{Experimental_inline}}
+
Indique à l'objet IntersectionObserver un nouvel élément à observer.
+
IntersectionObserver.takeRecords() {{Experimental_inline}}
+
Retourne un tableau d'objets IntersectionObserverEntry pour toutes les cibles observées et cesse de surveiller chacune d'elles.
+
IntersectionObserver.unobserve() {{Experimental_inline}}
+
Indique à l'objet IntersectionObserver de cesser d'observer un élément cible particuler.
+
+ +

Exemple

+ +
var intersectionObserver = new IntersectionObserver(function(entries) {
+  // Si intersectionRatio vaut 0 ou moins, la cible
+  // est hors de vue et rien n'est alors fait
+  if (entries[0].intersectionRatio <= 0) return;
+
+  loadItems(10);
+  console.log('Nouveaux éléments chargés');
+});
+// début de l'observation
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserver")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html deleted file mode 100644 index 4d90eff28d..0000000000 --- a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: IntersectionObserver.IntersectionObserver() -slug: Web/API/IntersectionObserver/IntersectionObserver -tags: - - API - - Constructor - - Intersection Observer API - - IntersectionObserver - - Reference - - Visibility - - Visible -translation_of: Web/API/IntersectionObserver/IntersectionObserver ---- -
{{APIRef("Intersection Observer API")}}
- -

Le constructeur IntersectionObserver() crée et retourne un nouvel objet IntersectionObserver. Les marges appliquées à la zone racine (indiquée dans l'objet options via la propriété rootMargin, voir ci-après) sont vérifiées pour s'assurer de la validité de leur syntaxe. Il en va de même pour les seuils (propriété thresholds d'options) dont l'intervalle de validité (entre 0.0 et 1.0 inclus) et l'ordre (qui doit être croissant) sont vérifiés. Si la liste des seuils est vide, sa valeur par défaut est [0.0].

- -

Syntaxe

- -
let observer = new IntersectionObserver(callback[, options]);
- -

Paramètres

- -
-
callback
-
Une fonction appelée lorsque la proportion de l'élément qui est visible franchit un seuil. La fonction de rappel reçoit en entrée deux paramètres : -
-
entries
-
Une liste d'objets IntersectionObserverEntry, chacun représentant un seuil franchi, que ce soit en passant au-dessus ou en dessous du pourcentage spécifié par le seuil.
-
observateur
-
L'objet IntersectionObserver pour lequel la fonction de rappel est invoquée.
-
-
-
options {{optional_inline}}
-
Un objet optionnel qui paramètre l'observateur. Si options n'est pas spécifié, l'observateur utilise la fenêtre du document comme racine, sans appliquer de marge, et avec un seuil de 0% (signifiant que le moindre changement d'un pixel suffira à déclencher la fonction de rappel). Les propriétés suivantes peuvent être utilisées pour la configuration : -
-
root
-
Un objet Element ou Document qui est un ancêtre de l'élément observé et dont la boîte englobante sera considérée comme la zone d'affichage (viewport). Toute portion de l'élément cible qui n'est pas visible dans la zone couverte par cette zone englobant n'est pas considérée visible.
-
rootMargin
-
Une chaîne de caractères spécifiant un ensemble de décalages à ajouter à la zone englobante pour le calcul des intersections. La zone effective utilisées pour les calculs peut ainsi être réduite ou étendue. La syntaxe est proche de celle utilisée pour la propriété CSS margin. Voir L'élément racine et sa marge externe pour plus d'informations sur le fonctionnement des marges et la syntaxe. Sa valeur par défaut est "0px 0px 0px 0px".
-
threshold
-
Un nombre ou un tableau de nombres entre 0.0 et 1.0 (inclus), spécifiant des seuils définis comme ratios de la part visible d'un élément cible observé par rapport à sa surface totale. Une valeur de 0.0 signifie que tout pixel visible de l'élément le rend visible et 1.0 que l'entièreté de l'élément doit être visible. Voir cette section sur les seuils pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.
-
-
-
- -

Valeur de retour

- -

Un nouvel objet IntersectionObserver pouvant être utilisé pour observer la visibilité d'un élément cible au sein de la racine indiquée, pour le franchissement des seuils de visibilité spécifiés. Il faudra appeler la méthode observe() de l'objet pour commencer à observer effectivement les changements de visibilité d'un élément cible.

- -

Exceptions

- -
-
SyntaxError
-
La propriété rootMargin de l'argument options est invalide.
-
RangeError
-
Une ou plusieurs des valeurs de threshold (portée par l'argument options) est en dehors de l'intervalle allant de 0.0 à 1.0.
-
- -

Exemple

- -

Cet exemple crée un nouvel observateur d'intersection qui appelle la fonction myObserverCallback chaque fois que la zone visible de l'élément observé change d'au moins 10%.

- -
let observer = new IntersectionObserver(myObserverCallback, {
-  threshold: 0.1
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}{{Spec2('IntersectionObserver')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserver.IntersectionObserver")}}

diff --git a/files/fr/web/api/intersectionobserver/intersectionobserver/index.md b/files/fr/web/api/intersectionobserver/intersectionobserver/index.md new file mode 100644 index 0000000000..4d90eff28d --- /dev/null +++ b/files/fr/web/api/intersectionobserver/intersectionobserver/index.md @@ -0,0 +1,89 @@ +--- +title: IntersectionObserver.IntersectionObserver() +slug: Web/API/IntersectionObserver/IntersectionObserver +tags: + - API + - Constructor + - Intersection Observer API + - IntersectionObserver + - Reference + - Visibility + - Visible +translation_of: Web/API/IntersectionObserver/IntersectionObserver +--- +
{{APIRef("Intersection Observer API")}}
+ +

Le constructeur IntersectionObserver() crée et retourne un nouvel objet IntersectionObserver. Les marges appliquées à la zone racine (indiquée dans l'objet options via la propriété rootMargin, voir ci-après) sont vérifiées pour s'assurer de la validité de leur syntaxe. Il en va de même pour les seuils (propriété thresholds d'options) dont l'intervalle de validité (entre 0.0 et 1.0 inclus) et l'ordre (qui doit être croissant) sont vérifiés. Si la liste des seuils est vide, sa valeur par défaut est [0.0].

+ +

Syntaxe

+ +
let observer = new IntersectionObserver(callback[, options]);
+ +

Paramètres

+ +
+
callback
+
Une fonction appelée lorsque la proportion de l'élément qui est visible franchit un seuil. La fonction de rappel reçoit en entrée deux paramètres : +
+
entries
+
Une liste d'objets IntersectionObserverEntry, chacun représentant un seuil franchi, que ce soit en passant au-dessus ou en dessous du pourcentage spécifié par le seuil.
+
observateur
+
L'objet IntersectionObserver pour lequel la fonction de rappel est invoquée.
+
+
+
options {{optional_inline}}
+
Un objet optionnel qui paramètre l'observateur. Si options n'est pas spécifié, l'observateur utilise la fenêtre du document comme racine, sans appliquer de marge, et avec un seuil de 0% (signifiant que le moindre changement d'un pixel suffira à déclencher la fonction de rappel). Les propriétés suivantes peuvent être utilisées pour la configuration : +
+
root
+
Un objet Element ou Document qui est un ancêtre de l'élément observé et dont la boîte englobante sera considérée comme la zone d'affichage (viewport). Toute portion de l'élément cible qui n'est pas visible dans la zone couverte par cette zone englobant n'est pas considérée visible.
+
rootMargin
+
Une chaîne de caractères spécifiant un ensemble de décalages à ajouter à la zone englobante pour le calcul des intersections. La zone effective utilisées pour les calculs peut ainsi être réduite ou étendue. La syntaxe est proche de celle utilisée pour la propriété CSS margin. Voir L'élément racine et sa marge externe pour plus d'informations sur le fonctionnement des marges et la syntaxe. Sa valeur par défaut est "0px 0px 0px 0px".
+
threshold
+
Un nombre ou un tableau de nombres entre 0.0 et 1.0 (inclus), spécifiant des seuils définis comme ratios de la part visible d'un élément cible observé par rapport à sa surface totale. Une valeur de 0.0 signifie que tout pixel visible de l'élément le rend visible et 1.0 que l'entièreté de l'élément doit être visible. Voir cette section sur les seuils pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.
+
+
+
+ +

Valeur de retour

+ +

Un nouvel objet IntersectionObserver pouvant être utilisé pour observer la visibilité d'un élément cible au sein de la racine indiquée, pour le franchissement des seuils de visibilité spécifiés. Il faudra appeler la méthode observe() de l'objet pour commencer à observer effectivement les changements de visibilité d'un élément cible.

+ +

Exceptions

+ +
+
SyntaxError
+
La propriété rootMargin de l'argument options est invalide.
+
RangeError
+
Une ou plusieurs des valeurs de threshold (portée par l'argument options) est en dehors de l'intervalle allant de 0.0 à 1.0.
+
+ +

Exemple

+ +

Cet exemple crée un nouvel observateur d'intersection qui appelle la fonction myObserverCallback chaque fois que la zone visible de l'élément observé change d'au moins 10%.

+ +
let observer = new IntersectionObserver(myObserverCallback, {
+  threshold: 0.1
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}{{Spec2('IntersectionObserver')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserver.IntersectionObserver")}}

diff --git a/files/fr/web/api/intersectionobserver/observe/index.html b/files/fr/web/api/intersectionobserver/observe/index.html deleted file mode 100644 index 7fc8411cbb..0000000000 --- a/files/fr/web/api/intersectionobserver/observe/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: IntersectionObserver.observe() -slug: Web/API/IntersectionObserver/observe -tags: - - API - - Intersection Observer - - Intersection Observer API - - IntersectionObserver - - Method - - Reference - - observe -translation_of: Web/API/IntersectionObserver/observe ---- -
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
- -

La méthode observe() de l'interface IntersectionObserver ajoute un élément à l'ensemble des éléments cibles étant observés par l'IntersectionObserver. Un observateur possède un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode IntersectionObserver.unobserve().

- -

Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans IntersectionObserver.thresholds, la fonction de rappel de l'observateur est executée avec comme argument un objet IntersectionObserverEntry représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets IntersectionObserverEntry.

- -

Syntaxe

- -
IntersectionObserver.observe(targetElement);
- -

Paramètres

- -
-
targetElement
-
Un élément dont on souhaite observer les changements de visibilité dans la racine. Cet élément doit nécessairement être un descendant de l'élément racine (ou contenu dans le document courant si la racine est la fenêtre du document).
-
- -

Valeur de retour

- -

undefined.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}{{Spec2('IntersectionObserver')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserver.observe")}}

- - -

Voir aussi

- - diff --git a/files/fr/web/api/intersectionobserver/observe/index.md b/files/fr/web/api/intersectionobserver/observe/index.md new file mode 100644 index 0000000000..7fc8411cbb --- /dev/null +++ b/files/fr/web/api/intersectionobserver/observe/index.md @@ -0,0 +1,63 @@ +--- +title: IntersectionObserver.observe() +slug: Web/API/IntersectionObserver/observe +tags: + - API + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Method + - Reference + - observe +translation_of: Web/API/IntersectionObserver/observe +--- +
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
+ +

La méthode observe() de l'interface IntersectionObserver ajoute un élément à l'ensemble des éléments cibles étant observés par l'IntersectionObserver. Un observateur possède un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode IntersectionObserver.unobserve().

+ +

Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans IntersectionObserver.thresholds, la fonction de rappel de l'observateur est executée avec comme argument un objet IntersectionObserverEntry représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets IntersectionObserverEntry.

+ +

Syntaxe

+ +
IntersectionObserver.observe(targetElement);
+ +

Paramètres

+ +
+
targetElement
+
Un élément dont on souhaite observer les changements de visibilité dans la racine. Cet élément doit nécessairement être un descendant de l'élément racine (ou contenu dans le document courant si la racine est la fenêtre du document).
+
+ +

Valeur de retour

+ +

undefined.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}{{Spec2('IntersectionObserver')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserver.observe")}}

+ + +

Voir aussi

+ + diff --git a/files/fr/web/api/intersectionobserver/root/index.html b/files/fr/web/api/intersectionobserver/root/index.html deleted file mode 100644 index 3778b82c7f..0000000000 --- a/files/fr/web/api/intersectionobserver/root/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: IntersectionObserver.root -slug: Web/API/IntersectionObserver/root -tags: - - API - - Intersection Observer - - Intersection Observer API - - IntersectionObserver - - Property - - Reference - - root -translation_of: Web/API/IntersectionObserver/root ---- -
{{APIRef("Intersection Observer API")}}
- -

La propriété en lecture seule root de l'interface IntersectionObserver identifie l'Element ou le Document dont les bornes sont considérées comme la zone englobante (bounding box) de la zone d'affichage (viewport) au sein de laquelle les intersections avec la cible sont observées. Si root vaut null, ce sont les limites de la zone d'affichage (viewport) courantes qui sont utilisées.

- -

Syntaxe

- -
root = IntersectionObserver.root;
- -

Valeur

- -

Un objet Element ou Document dont la boîte englobante est utilisée pour définir les limites de la zone de visibilité utilisée pour déterminer la proportion de l'élément cible qui est visible. L'intersection de ce rectangle délimiteur, décalé par toute marge spécifiée au moyen des options passées au constructeur de l'IntersectionObserver() (voir options.rootMargin), les limites de la zone recouverte par l'élément cible, moins les limites de la zone recouverte par chaque élément ou autre objet chevauchant l'élément cible, est considéré comme la partie visible de l'élément.

- -

Si root vaut null, ce sera le document parent qui sera considéré comme racine et la zone d'intersection sera la zone d'affichage (viewport).

- -

Exemple

- -

Cet exemple définit la propriété border de l'élément racine de l'observateur d'intersection comme une ligne verte moyenne de 2 pixels grâce aux propriétés exposées par CSSOM.

- -
observer.root.style.border = "2px solid #44aa44";
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}{{Spec2('IntersectionObserver')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserver.root")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/intersectionobserver/root/index.md b/files/fr/web/api/intersectionobserver/root/index.md new file mode 100644 index 0000000000..3778b82c7f --- /dev/null +++ b/files/fr/web/api/intersectionobserver/root/index.md @@ -0,0 +1,61 @@ +--- +title: IntersectionObserver.root +slug: Web/API/IntersectionObserver/root +tags: + - API + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Property + - Reference + - root +translation_of: Web/API/IntersectionObserver/root +--- +
{{APIRef("Intersection Observer API")}}
+ +

La propriété en lecture seule root de l'interface IntersectionObserver identifie l'Element ou le Document dont les bornes sont considérées comme la zone englobante (bounding box) de la zone d'affichage (viewport) au sein de laquelle les intersections avec la cible sont observées. Si root vaut null, ce sont les limites de la zone d'affichage (viewport) courantes qui sont utilisées.

+ +

Syntaxe

+ +
root = IntersectionObserver.root;
+ +

Valeur

+ +

Un objet Element ou Document dont la boîte englobante est utilisée pour définir les limites de la zone de visibilité utilisée pour déterminer la proportion de l'élément cible qui est visible. L'intersection de ce rectangle délimiteur, décalé par toute marge spécifiée au moyen des options passées au constructeur de l'IntersectionObserver() (voir options.rootMargin), les limites de la zone recouverte par l'élément cible, moins les limites de la zone recouverte par chaque élément ou autre objet chevauchant l'élément cible, est considéré comme la partie visible de l'élément.

+ +

Si root vaut null, ce sera le document parent qui sera considéré comme racine et la zone d'intersection sera la zone d'affichage (viewport).

+ +

Exemple

+ +

Cet exemple définit la propriété border de l'élément racine de l'observateur d'intersection comme une ligne verte moyenne de 2 pixels grâce aux propriétés exposées par CSSOM.

+ +
observer.root.style.border = "2px solid #44aa44";
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}{{Spec2('IntersectionObserver')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserver.root")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/intersectionobserver/rootmargin/index.html b/files/fr/web/api/intersectionobserver/rootmargin/index.html deleted file mode 100644 index 87e13a1306..0000000000 --- a/files/fr/web/api/intersectionobserver/rootmargin/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: IntersectionObserver.rootMargin -slug: Web/API/IntersectionObserver/rootMargin -tags: - - API - - Intersection Observer - - Intersection Observer API - - IntersectionObserver - - Property - - Reference - - rootMargin -translation_of: Web/API/IntersectionObserver/rootMargin ---- -
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
- -

La propriété rootMargin est une propriété en lecture seule de l'interface IntersectionObserver. C'est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS margin. Chaque côté de la zone rectangulaire représentée par rootMargin est ajouté au côté correspondant de la boîte englobante de la racine de l'élément avant que le test d'intersection soit effectué. Cela permet, par exemple, d'ajuster les limites vers l'extérieur afin que l'élément cible soit considéré comme entièrement visible même si un certain nombre de pixels en largeur ou en hauteur sont rognés, ou encore pour traiter la cible comme partiellement masquée si une bordure est trop proche de celle de la boîte englobante de l'élément racine.

- -

Voir la section sur l'élément racine et sa marge externe pour une explication plus approfondie à propos de la marge externe de l'élément racine et son fonctionnement.

- -

Syntaxe

- -
marginString = IntersectionObserver.rootMargin;
- -

Valeur

- -

Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS margin, contenant les décalages pour un ou plusieurs côtés de la boîte englobante de l'élément racine. Ces décalages sont ajoutés aux valeurs correspondantes de la boîte englobante de l'élément racine avant le calcul de l'intersection entre la zone rectangulaire résultante et celle couverte par l'élément cible.

- -

La chaîne de caractères renvoyée par cette propriété peut ne pas correspondre à celle spécifiée lors de l'initialisation de l'IntersectionObserver. Le navigateur a la possibilité de modifier la valeur.

- -

Si rootMargin n'est pas spécifiée à l'initialisation de l'objet, sa valeur par défaut vaudra "0px 0px 0px 0px", signifiant que l'intersection sera calculée entre les limites non modifiées de l'élément racine et celles de l'élément cible. La section sur l'élément racine et sa marge externe décrit avec plus de détails comment rootMargin est utilisée.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}{{Spec2('IntersectionObserver')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserver.rootMargin")}}

diff --git a/files/fr/web/api/intersectionobserver/rootmargin/index.md b/files/fr/web/api/intersectionobserver/rootmargin/index.md new file mode 100644 index 0000000000..87e13a1306 --- /dev/null +++ b/files/fr/web/api/intersectionobserver/rootmargin/index.md @@ -0,0 +1,53 @@ +--- +title: IntersectionObserver.rootMargin +slug: Web/API/IntersectionObserver/rootMargin +tags: + - API + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Property + - Reference + - rootMargin +translation_of: Web/API/IntersectionObserver/rootMargin +--- +
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
+ +

La propriété rootMargin est une propriété en lecture seule de l'interface IntersectionObserver. C'est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS margin. Chaque côté de la zone rectangulaire représentée par rootMargin est ajouté au côté correspondant de la boîte englobante de la racine de l'élément avant que le test d'intersection soit effectué. Cela permet, par exemple, d'ajuster les limites vers l'extérieur afin que l'élément cible soit considéré comme entièrement visible même si un certain nombre de pixels en largeur ou en hauteur sont rognés, ou encore pour traiter la cible comme partiellement masquée si une bordure est trop proche de celle de la boîte englobante de l'élément racine.

+ +

Voir la section sur l'élément racine et sa marge externe pour une explication plus approfondie à propos de la marge externe de l'élément racine et son fonctionnement.

+ +

Syntaxe

+ +
marginString = IntersectionObserver.rootMargin;
+ +

Valeur

+ +

Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS margin, contenant les décalages pour un ou plusieurs côtés de la boîte englobante de l'élément racine. Ces décalages sont ajoutés aux valeurs correspondantes de la boîte englobante de l'élément racine avant le calcul de l'intersection entre la zone rectangulaire résultante et celle couverte par l'élément cible.

+ +

La chaîne de caractères renvoyée par cette propriété peut ne pas correspondre à celle spécifiée lors de l'initialisation de l'IntersectionObserver. Le navigateur a la possibilité de modifier la valeur.

+ +

Si rootMargin n'est pas spécifiée à l'initialisation de l'objet, sa valeur par défaut vaudra "0px 0px 0px 0px", signifiant que l'intersection sera calculée entre les limites non modifiées de l'élément racine et celles de l'élément cible. La section sur l'élément racine et sa marge externe décrit avec plus de détails comment rootMargin est utilisée.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}{{Spec2('IntersectionObserver')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserver.rootMargin")}}

diff --git a/files/fr/web/api/intersectionobserver/takerecords/index.html b/files/fr/web/api/intersectionobserver/takerecords/index.html deleted file mode 100644 index ceb2a5db1e..0000000000 --- a/files/fr/web/api/intersectionobserver/takerecords/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: IntersectionObserver.takeRecords() -slug: Web/API/IntersectionObserver/takeRecords -tags: - - API - - Intersection Observer - - Intersection Observer API - - IntersectionObserver - - Method - - NeedsExample - - Reference - - takeRecords -translation_of: Web/API/IntersectionObserver/takeRecords ---- -
{{APIRef("Intersection Observer API")}}
- -

La méthode takeRecords() de l'interface IntersectionObserver renvoie un tableau d'objets IntersectionObserverEntry, un pour chaque élément ciblé qui a subi un changement d'intersection depuis la dernière vérification des intersections, soit explicitement par un appel à cette méthode, soit implicitement par un appel automatique à la fonction de rappel de l'observateur.

- -
-

Note : Si vous utilisez la fonction de rappel pour surveiller ces changements, vous n'avez pas besoin d'appeler cette méthode. L'appel de cette méthode efface la liste des intersections en attente, de sorte que la fonction de rappel ne sera pas exécutée.

-
- -

Syntaxe

- -
intersectionObserverEntries = intersectionObserver.takeRecords();
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Un tableau d'objets IntersectionObserverEntry, un pour chaque élément cible dont l'intersection avec la racine a changé depuis la dernière vérification des intersections.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
- {{SpecName('IntersectionObserver','#dom-intersectionobserver-takerecords','IntersectionObserver.takeRecords()')}} - {{Spec2('IntersectionObserver')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserver.takeRecords")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/intersectionobserver/takerecords/index.md b/files/fr/web/api/intersectionobserver/takerecords/index.md new file mode 100644 index 0000000000..ceb2a5db1e --- /dev/null +++ b/files/fr/web/api/intersectionobserver/takerecords/index.md @@ -0,0 +1,64 @@ +--- +title: IntersectionObserver.takeRecords() +slug: Web/API/IntersectionObserver/takeRecords +tags: + - API + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Method + - NeedsExample + - Reference + - takeRecords +translation_of: Web/API/IntersectionObserver/takeRecords +--- +
{{APIRef("Intersection Observer API")}}
+ +

La méthode takeRecords() de l'interface IntersectionObserver renvoie un tableau d'objets IntersectionObserverEntry, un pour chaque élément ciblé qui a subi un changement d'intersection depuis la dernière vérification des intersections, soit explicitement par un appel à cette méthode, soit implicitement par un appel automatique à la fonction de rappel de l'observateur.

+ +
+

Note : Si vous utilisez la fonction de rappel pour surveiller ces changements, vous n'avez pas besoin d'appeler cette méthode. L'appel de cette méthode efface la liste des intersections en attente, de sorte que la fonction de rappel ne sera pas exécutée.

+
+ +

Syntaxe

+ +
intersectionObserverEntries = intersectionObserver.takeRecords();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Un tableau d'objets IntersectionObserverEntry, un pour chaque élément cible dont l'intersection avec la racine a changé depuis la dernière vérification des intersections.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
+ {{SpecName('IntersectionObserver','#dom-intersectionobserver-takerecords','IntersectionObserver.takeRecords()')}} + {{Spec2('IntersectionObserver')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserver.takeRecords")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/intersectionobserver/thresholds/index.html b/files/fr/web/api/intersectionobserver/thresholds/index.html deleted file mode 100644 index 1ecebadf18..0000000000 --- a/files/fr/web/api/intersectionobserver/thresholds/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: IntersectionObserver.thresholds -slug: Web/API/IntersectionObserver/thresholds -tags: - - API - - Draft - - Intersection Observer - - Intersection Observer API - - IntersectionObserver - - NeedsExample - - Property - - Reference -translation_of: Web/API/IntersectionObserver/thresholds ---- -
{{APIRef("Intersection Observer API")}}
- -

La propriété en lecture seule thresholds de l'interface IntersectionObserver retourne la liste des seuils d'intersection spécifiés lors de l'instanciation avec IntersectionObserver(). Si un seul seuil a été fourni lors de l'instanciation de l'objet, cette propriété sera un tableau contenant cette unique valeur numérique.

- -

Voir la section sur les seuils pour apprendre comment fonctionnent les seuils d'intersection.

- -

Syntaxe

- -
thresholds = IntersectionObserver.thresholds;
- -

Valeur

- -

Un tableau de seuils d'intersection, spécifiés lors de l'instanciation via options.threshold. Si un seul seuil a été fourni, sans être donné dans un tableau (avec une valeur numérique « brute » donc), la valeur de la propriété sera un tableau contenant cette unique valeur. Quel qu'ait été l'ordre du tableau fourni à l'origine, celui fournit par thresholds sera trié par ordre croissant.

- -

Si aucune option threshold n'est fournie lors de l'instanciation avec IntersectionObserver(), la valeur par défaut de thresholds est définie à [0].

- -
-

Attention : Bien que l'objet d'options qu'on peut spécifier à la création d'un IntersectionObserver possède une propriété champ nommée threshold, cette propriété-ci s'appelle thresholds (avec un « s » supplémentaire donc). Cela peut porter à confusion. Si vous utilisez thresholds par erreur comme nom pour la propriété de l'objet options, le tableau porté par thresholds va se retrouver égal à [0.0], ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}{{Spec2('IntersectionObserver')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserver.thresholds")}}

diff --git a/files/fr/web/api/intersectionobserver/thresholds/index.md b/files/fr/web/api/intersectionobserver/thresholds/index.md new file mode 100644 index 0000000000..1ecebadf18 --- /dev/null +++ b/files/fr/web/api/intersectionobserver/thresholds/index.md @@ -0,0 +1,56 @@ +--- +title: IntersectionObserver.thresholds +slug: Web/API/IntersectionObserver/thresholds +tags: + - API + - Draft + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - NeedsExample + - Property + - Reference +translation_of: Web/API/IntersectionObserver/thresholds +--- +
{{APIRef("Intersection Observer API")}}
+ +

La propriété en lecture seule thresholds de l'interface IntersectionObserver retourne la liste des seuils d'intersection spécifiés lors de l'instanciation avec IntersectionObserver(). Si un seul seuil a été fourni lors de l'instanciation de l'objet, cette propriété sera un tableau contenant cette unique valeur numérique.

+ +

Voir la section sur les seuils pour apprendre comment fonctionnent les seuils d'intersection.

+ +

Syntaxe

+ +
thresholds = IntersectionObserver.thresholds;
+ +

Valeur

+ +

Un tableau de seuils d'intersection, spécifiés lors de l'instanciation via options.threshold. Si un seul seuil a été fourni, sans être donné dans un tableau (avec une valeur numérique « brute » donc), la valeur de la propriété sera un tableau contenant cette unique valeur. Quel qu'ait été l'ordre du tableau fourni à l'origine, celui fournit par thresholds sera trié par ordre croissant.

+ +

Si aucune option threshold n'est fournie lors de l'instanciation avec IntersectionObserver(), la valeur par défaut de thresholds est définie à [0].

+ +
+

Attention : Bien que l'objet d'options qu'on peut spécifier à la création d'un IntersectionObserver possède une propriété champ nommée threshold, cette propriété-ci s'appelle thresholds (avec un « s » supplémentaire donc). Cela peut porter à confusion. Si vous utilisez thresholds par erreur comme nom pour la propriété de l'objet options, le tableau porté par thresholds va se retrouver égal à [0.0], ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}{{Spec2('IntersectionObserver')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserver.thresholds")}}

diff --git a/files/fr/web/api/intersectionobserver/unobserve/index.html b/files/fr/web/api/intersectionobserver/unobserve/index.html deleted file mode 100644 index c307d129e3..0000000000 --- a/files/fr/web/api/intersectionobserver/unobserve/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: IntersectionObserver.unobserve() -slug: Web/API/IntersectionObserver/unobserve -tags: - - API - - Intersection Observer - - Intersection Observer API - - IntersectionObserver - - Method - - Reference - - unobserve -translation_of: Web/API/IntersectionObserver/unobserve ---- -
{{APIRef("Intersection Observer API")}}
- -

La méthode unobserve() de l'interface IntersectionObserver indique à l'objet IntersectionObserver courant de cesser d'observer l'élément cible spécifié.

- -

Syntaxe

- -
IntersectionObserver.unobserve(target);
- -

Paramètres

- -
-
target
-
L'élément à cesser d'observer. Si l'élément spécifié n'est pas en cours d'observation, cette méthode ne fait rien et ne lève pas d'exception.
-
- -

Valeur de retour

- -

undefined.

- -

Exemple

- -

Ce fragment de code illustre la création d'un observateur, l'ajout d'un élément sous observation puis l'arrêt de cette d'observation.

- -
let observer = new IntersectionObserver(callback);
-observer.observe(document.getElementById("elementAObserver"));
-
-/* ... */
-
-observer.unobserve(document.getElementById("elementAObserver"));
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}{{Spec2('IntersectionObserver')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserver.unobserve")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/intersectionobserver/unobserve/index.md b/files/fr/web/api/intersectionobserver/unobserve/index.md new file mode 100644 index 0000000000..c307d129e3 --- /dev/null +++ b/files/fr/web/api/intersectionobserver/unobserve/index.md @@ -0,0 +1,72 @@ +--- +title: IntersectionObserver.unobserve() +slug: Web/API/IntersectionObserver/unobserve +tags: + - API + - Intersection Observer + - Intersection Observer API + - IntersectionObserver + - Method + - Reference + - unobserve +translation_of: Web/API/IntersectionObserver/unobserve +--- +
{{APIRef("Intersection Observer API")}}
+ +

La méthode unobserve() de l'interface IntersectionObserver indique à l'objet IntersectionObserver courant de cesser d'observer l'élément cible spécifié.

+ +

Syntaxe

+ +
IntersectionObserver.unobserve(target);
+ +

Paramètres

+ +
+
target
+
L'élément à cesser d'observer. Si l'élément spécifié n'est pas en cours d'observation, cette méthode ne fait rien et ne lève pas d'exception.
+
+ +

Valeur de retour

+ +

undefined.

+ +

Exemple

+ +

Ce fragment de code illustre la création d'un observateur, l'ajout d'un élément sous observation puis l'arrêt de cette d'observation.

+ +
let observer = new IntersectionObserver(callback);
+observer.observe(document.getElementById("elementAObserver"));
+
+/* ... */
+
+observer.unobserve(document.getElementById("elementAObserver"));
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}{{Spec2('IntersectionObserver')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserver.unobserve")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/intersectionobserverentry/index.html b/files/fr/web/api/intersectionobserverentry/index.html deleted file mode 100644 index 9b5b7a250e..0000000000 --- a/files/fr/web/api/intersectionobserverentry/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: IntersectionObserverEntry -slug: Web/API/IntersectionObserverEntry -tags: - - API - - Interface - - Intersection Observer - - IntersectionObserver - - IntersectionObserverEntry -translation_of: Web/API/IntersectionObserverEntry ---- -
{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}
- -

L'interface IntersectionObserverEntry de l'API Intersection Observer décrit l'intersection entre l'élément cible et son conteneur (appelé racine) à un moment spécifique de transition.

- -

Les instances de IntersectionObserverEntry sont délivrées à une fonction de rappel de l'{{domxref("IntersectionObserver")}} en tant que paramètres entries ; autrement, ces objets ne peuvent être obtenus qu'en appelant {{domxref("IntersectionObserver.takeRecords()")}}.

- -

Propriétés

- -
-
{{domxref("IntersectionObserverEntry.boundingClientRect")}} {{readonlyinline}}
-
Retourne les limites de la zone couverte par l'élément cible comme {{domxref("DOMRectReadOnly")}}. Ces limites sont calculées comme décrit dans la documentation pour {{domxref("Element.getBoundingClientRect()")}}.
-
{{domxref("IntersectionObserverEntry.intersectionRatio")}} {{readonlyinline}}
-
Retourne le ratio de l'intersectionRect au boundingClientRect.
-
{{domxref("IntersectionObserverEntry.intersectionRect")}} {{readonlyinline}}
-
Retourne un {{domxref("DOMRectReadOnly")}} représentant la partie visible de l'élément cible.
-
{{domxref("IntersectionObserverEntry.isIntersecting")}} {{ReadOnlyInline}}
-
Retourne une valeur booléenne valant true si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut true, alors IntersectionObserverEntry décrit une transition vers un état d'intersection ;  S'il vaut false, alors la transition se fait d'un état d'intersection à un état de non-intersection.
-
{{domxref("IntersectionObserverEntry.rootBounds")}} {{readonlyinline}}
-
Retourne un {{domxref("DOMRectReadOnly")}} pour la zone d'intersection de l'élément racine.
-
{{domxref("IntersectionObserverEntry.target")}} {{ReadOnlyInline}}
-
L'{{domxref("Element")}} dont l'intersection avec la racine a changé d'état.
-
{{domxref("IntersectionObserverEntry.time")}} {{readonlyinline}}
-
Un {{domxref("DOMHighResTimeStamp")}} indiquant l'instant auquel l'intersection a été enregistrée, relative au temps originel de l'IntersectionObserver.
-
- -

Méthodes

- -

Cette interface n'a pas de méthode.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#intersection-observer-entry','IntersectionObserverEntry')}}{{Spec2('IntersectionObserver')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserverEntry")}}

diff --git a/files/fr/web/api/intersectionobserverentry/index.md b/files/fr/web/api/intersectionobserverentry/index.md new file mode 100644 index 0000000000..9b5b7a250e --- /dev/null +++ b/files/fr/web/api/intersectionobserverentry/index.md @@ -0,0 +1,60 @@ +--- +title: IntersectionObserverEntry +slug: Web/API/IntersectionObserverEntry +tags: + - API + - Interface + - Intersection Observer + - IntersectionObserver + - IntersectionObserverEntry +translation_of: Web/API/IntersectionObserverEntry +--- +
{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}
+ +

L'interface IntersectionObserverEntry de l'API Intersection Observer décrit l'intersection entre l'élément cible et son conteneur (appelé racine) à un moment spécifique de transition.

+ +

Les instances de IntersectionObserverEntry sont délivrées à une fonction de rappel de l'{{domxref("IntersectionObserver")}} en tant que paramètres entries ; autrement, ces objets ne peuvent être obtenus qu'en appelant {{domxref("IntersectionObserver.takeRecords()")}}.

+ +

Propriétés

+ +
+
{{domxref("IntersectionObserverEntry.boundingClientRect")}} {{readonlyinline}}
+
Retourne les limites de la zone couverte par l'élément cible comme {{domxref("DOMRectReadOnly")}}. Ces limites sont calculées comme décrit dans la documentation pour {{domxref("Element.getBoundingClientRect()")}}.
+
{{domxref("IntersectionObserverEntry.intersectionRatio")}} {{readonlyinline}}
+
Retourne le ratio de l'intersectionRect au boundingClientRect.
+
{{domxref("IntersectionObserverEntry.intersectionRect")}} {{readonlyinline}}
+
Retourne un {{domxref("DOMRectReadOnly")}} représentant la partie visible de l'élément cible.
+
{{domxref("IntersectionObserverEntry.isIntersecting")}} {{ReadOnlyInline}}
+
Retourne une valeur booléenne valant true si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut true, alors IntersectionObserverEntry décrit une transition vers un état d'intersection ;  S'il vaut false, alors la transition se fait d'un état d'intersection à un état de non-intersection.
+
{{domxref("IntersectionObserverEntry.rootBounds")}} {{readonlyinline}}
+
Retourne un {{domxref("DOMRectReadOnly")}} pour la zone d'intersection de l'élément racine.
+
{{domxref("IntersectionObserverEntry.target")}} {{ReadOnlyInline}}
+
L'{{domxref("Element")}} dont l'intersection avec la racine a changé d'état.
+
{{domxref("IntersectionObserverEntry.time")}} {{readonlyinline}}
+
Un {{domxref("DOMHighResTimeStamp")}} indiquant l'instant auquel l'intersection a été enregistrée, relative au temps originel de l'IntersectionObserver.
+
+ +

Méthodes

+ +

Cette interface n'a pas de méthode.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver','#intersection-observer-entry','IntersectionObserverEntry')}}{{Spec2('IntersectionObserver')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserverEntry")}}

diff --git a/files/fr/web/api/intersectionobserverentry/target/index.html b/files/fr/web/api/intersectionobserverentry/target/index.html deleted file mode 100644 index 7ac31d8a3c..0000000000 --- a/files/fr/web/api/intersectionobserverentry/target/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: IntersectionObserverEntry.target -slug: Web/API/IntersectionObserverEntry/target -tags: - - API - - Intersection Observer - - IntersectionObserver - - Propriété - - target -translation_of: Web/API/IntersectionObserverEntry/target ---- -
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
- -

La propriété en lecture seule target de l'interface {{domxref("IntersectionObserverEntry")}} indique quel {{domxref("Element")}} ciblé a changé sa proportion d'intersection avec l'élément racine.

- -

Syntaxe

- -
var target = IntersectionObserverEntry.target;
-
- -

Valeur

- -

La propriété target de l'IntersectionObserverEntry spécifie quel {{domxref("Element")}} précédemment ciblé par l'appel à {{domxref("IntersectionObserver.observe()")}} dont l'intersection avec la racine a changé.

- -

Exemple

- -

Dans cet exemple, la valeur de la propriété CSS {{cssxref("opacity")}} de chaque élément cible vaut son {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}}.

- -
function intersectionCallback(entries) {
-  entries.forEach(function(entry) {
-    entry.target.opacity = entry.intersectionRatio;
-  });
-}
- -

Ainsi, l'élément devient visible seulement lorsqu'il est entièrement visible, c'est-à-dire que la zone qu'il couvre est contenue dans celle de la racine. Autrement, son opacité diminue graduellement avec sa proportion d'intersection avec son élément racine.

- -

Pour voir un exemple plus concret, vous pouvez vous renseigner sur l'{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility", "Handling intersection changes")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserverentry-target', 'IntersectionObserverEntry.target')}}{{Spec2('IntersectionObserver')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.IntersectionObserverEntry.target")}}

diff --git a/files/fr/web/api/intersectionobserverentry/target/index.md b/files/fr/web/api/intersectionobserverentry/target/index.md new file mode 100644 index 0000000000..7ac31d8a3c --- /dev/null +++ b/files/fr/web/api/intersectionobserverentry/target/index.md @@ -0,0 +1,58 @@ +--- +title: IntersectionObserverEntry.target +slug: Web/API/IntersectionObserverEntry/target +tags: + - API + - Intersection Observer + - IntersectionObserver + - Propriété + - target +translation_of: Web/API/IntersectionObserverEntry/target +--- +
{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule target de l'interface {{domxref("IntersectionObserverEntry")}} indique quel {{domxref("Element")}} ciblé a changé sa proportion d'intersection avec l'élément racine.

+ +

Syntaxe

+ +
var target = IntersectionObserverEntry.target;
+
+ +

Valeur

+ +

La propriété target de l'IntersectionObserverEntry spécifie quel {{domxref("Element")}} précédemment ciblé par l'appel à {{domxref("IntersectionObserver.observe()")}} dont l'intersection avec la racine a changé.

+ +

Exemple

+ +

Dans cet exemple, la valeur de la propriété CSS {{cssxref("opacity")}} de chaque élément cible vaut son {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}}.

+ +
function intersectionCallback(entries) {
+  entries.forEach(function(entry) {
+    entry.target.opacity = entry.intersectionRatio;
+  });
+}
+ +

Ainsi, l'élément devient visible seulement lorsqu'il est entièrement visible, c'est-à-dire que la zone qu'il couvre est contenue dans celle de la racine. Autrement, son opacité diminue graduellement avec sa proportion d'intersection avec son élément racine.

+ +

Pour voir un exemple plus concret, vous pouvez vous renseigner sur l'{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility", "Handling intersection changes")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IntersectionObserver', '#dom-intersectionobserverentry-target', 'IntersectionObserverEntry.target')}}{{Spec2('IntersectionObserver')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IntersectionObserverEntry.target")}}

diff --git a/files/fr/web/api/issecurecontext/index.html b/files/fr/web/api/issecurecontext/index.html deleted file mode 100644 index be1a06cc17..0000000000 --- a/files/fr/web/api/issecurecontext/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.isSecureContext -slug: Web/API/isSecureContext -translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext -original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext ---- -

{{APIRef()}}{{SeeCompatTable}}

- -

La propriété isSecureContext de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (true) ou pas (false).

- -

Syntaxe

- -
var isItSecure = self.isSecureContext; // ou simplement isSecureContext
-
- -

Valeur

- -

Un {{domxref("Boolean")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationsStatutCommentaires
{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'WindowOrWorkerGlobalScope.isSecureContext')}}{{Spec2('Secure Contexts')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WindowOrWorkerGlobalScope.isSecureContext")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/issecurecontext/index.md b/files/fr/web/api/issecurecontext/index.md new file mode 100644 index 0000000000..be1a06cc17 --- /dev/null +++ b/files/fr/web/api/issecurecontext/index.md @@ -0,0 +1,47 @@ +--- +title: WindowOrWorkerGlobalScope.isSecureContext +slug: Web/API/isSecureContext +translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext +original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext +--- +

{{APIRef()}}{{SeeCompatTable}}

+ +

La propriété isSecureContext de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (true) ou pas (false).

+ +

Syntaxe

+ +
var isItSecure = self.isSecureContext; // ou simplement isSecureContext
+
+ +

Valeur

+ +

Un {{domxref("Boolean")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationsStatutCommentaires
{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'WindowOrWorkerGlobalScope.isSecureContext')}}{{Spec2('Secure Contexts')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.isSecureContext")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/keyboardevent/charcode/index.html b/files/fr/web/api/keyboardevent/charcode/index.html deleted file mode 100644 index b9a1ef84b0..0000000000 --- a/files/fr/web/api/keyboardevent/charcode/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: KeyboardEvent.charCode -slug: Web/API/KeyboardEvent/charCode -tags: - - API - - Clavier - - DOM - - Déprécié - - Propriété - - Référence(2) - - évènements -translation_of: Web/API/KeyboardEvent/charCode ---- -

{{ ApiRef("DOM Events") }}{{non-standard_header}}{{deprecated_header}}

- -

La propriété en lecture seule {{domxref("KeyboardEvent.charCode")}} retourne la valeur Unicode d'une touche caractère pressée pendant un évènement {{ domxref("element.onkeypress", "keypress") }}.

- -

Pour des constantes équivalant ces codes numériques, voir {{ domxref("KeyboardEvent", "KeyEvent") }}.

- -
-

Note : N'utilisez plus cette propriété, elle est dépréciée. Utilisez plutôt {{domxref("KeyboardEvent.key")}}.

-
- -

Syntaxe

- -
var value = event.charCode;
-
- -
    -
  • value est la valeur Unicode du caractère associé à la touche pressée.
    • -
- -

Exemple

- -
<html>
-  <head>
-    <title>Exemple charCode</title>
-
-    <script type="text/javascript">
-
-      function AfficherCaractere(e)
-      {
-        alert(
-                "Touche tapée : " +
-                String.fromCharCode(e.charCode) + "\n" +
-                "charCode: " + e.charCode
-        );
-      }
-
-    </script>
-  </head>
-
-  <body onkeypress="AfficherCaractere(event);">
-    <p>Tapez une touche caractère de votre clavier (a,b,c...)</p>
-  </body>
-</html>
-
- -

Notes

- -

Après un évènement {{ domxref("element.onkeypress", "keypress") }}, la valeur Unicode de la touche pressée est stockée dans l'une ou l'autre des propriétés {{ domxref("event.keyCode", "keyCode") }} et charCode, jamais les deux à la fois. Si la touche pressée génère un caractère (ex. 'a'), charCode prend la valeur du code de ce caractère, en respectant la casse. (i.e. charCode tient compte d'une touche Maj. enfoncée). Sinon, le code est stocké dans keyCode.

- -

Quand une ou plusieurs touche modificatrices sont pressées, il y a quelques règles complexes pour charCode, jetez un oeil à Gecko Keypress Event (en anglais) pour le détail.

- -

charCode n'est jamais défini lors d'évènements {{ domxref("element.onkeydown", "keydown") }} et {{ domxref("element.onkeyup", "keyup") }}. Dans ces cas, keyCode is set instead.

- -

Pour obtenir le code de la touche qu'il soit stocké dans keyCode ou charCode, requêtez la propriété {{ domxref("event.which", "which") }}.

- -

Les caractères entrés via IME ne s'enregistrent pas sous keyCode ou charCode. Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.

- -

Pour une liste de valeurs de charCode associées à leurs touches, lancez l'exemple dans Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants (en anglais) et regardez le tableau HTML résultant.

- -

Spécifications

- - - - - - - - - - - - - - - - -
Spécification (en anglais)StatutCommentaire
{{SpecName('DOM3 Events','#widl-KeyboardEvent-charCode','KeyboardEvent.charCode')}}{{Spec2('DOM3 Events')}}Définition initiale; Déprécié
- -

Compatibilité des navigateurs

- -

{{Compat("api.KeyboardEvent.charCode")}}

\ No newline at end of file diff --git a/files/fr/web/api/keyboardevent/charcode/index.md b/files/fr/web/api/keyboardevent/charcode/index.md new file mode 100644 index 0000000000..b9a1ef84b0 --- /dev/null +++ b/files/fr/web/api/keyboardevent/charcode/index.md @@ -0,0 +1,94 @@ +--- +title: KeyboardEvent.charCode +slug: Web/API/KeyboardEvent/charCode +tags: + - API + - Clavier + - DOM + - Déprécié + - Propriété + - Référence(2) + - évènements +translation_of: Web/API/KeyboardEvent/charCode +--- +

{{ ApiRef("DOM Events") }}{{non-standard_header}}{{deprecated_header}}

+ +

La propriété en lecture seule {{domxref("KeyboardEvent.charCode")}} retourne la valeur Unicode d'une touche caractère pressée pendant un évènement {{ domxref("element.onkeypress", "keypress") }}.

+ +

Pour des constantes équivalant ces codes numériques, voir {{ domxref("KeyboardEvent", "KeyEvent") }}.

+ +
+

Note : N'utilisez plus cette propriété, elle est dépréciée. Utilisez plutôt {{domxref("KeyboardEvent.key")}}.

+
+ +

Syntaxe

+ +
var value = event.charCode;
+
+ +
    +
  • value est la valeur Unicode du caractère associé à la touche pressée.
    • +
+ +

Exemple

+ +
<html>
+  <head>
+    <title>Exemple charCode</title>
+
+    <script type="text/javascript">
+
+      function AfficherCaractere(e)
+      {
+        alert(
+                "Touche tapée : " +
+                String.fromCharCode(e.charCode) + "\n" +
+                "charCode: " + e.charCode
+        );
+      }
+
+    </script>
+  </head>
+
+  <body onkeypress="AfficherCaractere(event);">
+    <p>Tapez une touche caractère de votre clavier (a,b,c...)</p>
+  </body>
+</html>
+
+ +

Notes

+ +

Après un évènement {{ domxref("element.onkeypress", "keypress") }}, la valeur Unicode de la touche pressée est stockée dans l'une ou l'autre des propriétés {{ domxref("event.keyCode", "keyCode") }} et charCode, jamais les deux à la fois. Si la touche pressée génère un caractère (ex. 'a'), charCode prend la valeur du code de ce caractère, en respectant la casse. (i.e. charCode tient compte d'une touche Maj. enfoncée). Sinon, le code est stocké dans keyCode.

+ +

Quand une ou plusieurs touche modificatrices sont pressées, il y a quelques règles complexes pour charCode, jetez un oeil à Gecko Keypress Event (en anglais) pour le détail.

+ +

charCode n'est jamais défini lors d'évènements {{ domxref("element.onkeydown", "keydown") }} et {{ domxref("element.onkeyup", "keyup") }}. Dans ces cas, keyCode is set instead.

+ +

Pour obtenir le code de la touche qu'il soit stocké dans keyCode ou charCode, requêtez la propriété {{ domxref("event.which", "which") }}.

+ +

Les caractères entrés via IME ne s'enregistrent pas sous keyCode ou charCode. Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.

+ +

Pour une liste de valeurs de charCode associées à leurs touches, lancez l'exemple dans Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants (en anglais) et regardez le tableau HTML résultant.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
Spécification (en anglais)StatutCommentaire
{{SpecName('DOM3 Events','#widl-KeyboardEvent-charCode','KeyboardEvent.charCode')}}{{Spec2('DOM3 Events')}}Définition initiale; Déprécié
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.KeyboardEvent.charCode")}}

\ No newline at end of file diff --git a/files/fr/web/api/keyboardevent/code/index.html b/files/fr/web/api/keyboardevent/code/index.html deleted file mode 100644 index d9d70d3e19..0000000000 --- a/files/fr/web/api/keyboardevent/code/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: KeyboardEvent.code -slug: Web/API/KeyboardEvent/code -tags: - - API - - Code - - DOM Events - - KeyboardEvent - - Propriété - - Reference -translation_of: Web/API/KeyboardEvent/code ---- -
{{APIRef("DOM Events")}}
- -

La propriété KeyboardEvent.code représente une touche physique du clavier (contrairement au caractère généré par celle-ci). En d'autres termes, cette propriété retourne une valeur qui n'est pas modifiée par la disposition du clavier ou l'état des touches de modification.

- -

Si le clavier n'est pas physique, la valeur retournée sera définie par le navigateur pour être le plus proche possible des valeurs retournées par un clavier physique afin de maximiser la compatibilité entre un clavier physique et virtuel.

- -

Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par KeyboardEvent.code afin de déterminer le caractère utilisé sur le clavier.

- -

Par exemple, le code retourné est "KeyQ" pour le caractère "q" sur un clavier QWERTY, mais le même code représente le caractère "'"  sur un clavier Dvorak, et le caractère "a" sur un clavier AZERTY. Cela rend impossible l'utilisation du code pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé.

- -

Pour déterminer quel caractère correspond à un key event, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}.

- -

Valeurs des codes

- -

Les valeurs de code pour Windows, Linux et macOS figurent dans la liste de la KeyboardEvent: code values.

- -

Exemples

- -

Pratiquer KeyboardEvent

- -

HTML

- -
<p>
-   Appuyez sur une touche du clavier pour voir quelle valeur clé de
-   KeyboardEvent correspond à chaque événement
-</p>
-<div id="output">
-</div>
-
- -

CSS

- -
#output {
-  font-family: Arial, Helvetica, sans-serif;
-  border: 1px solid black;
-}
- -

JavaScript

- -
window.addEventListener("keydown", function(event) {
-  let str = "KeyboardEvent: key='" + event.key + "' | code='" +
-            event.code + "'";
-  let el = document.createElement("span");
-  el.innerHTML = str + "<br/>";
-
-  document.getElementById("output").appendChild(el);
-}, true);
- -

Résultat

- -

Pour essayer ce code, cliquez sur le lien ci-dessous:

- -

{{EmbedLiveSample('Pratiquer_KeyboardEvent', 600, 300) }}

- -

Gérer les événements de clavier dans un jeu

- -

Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}}  qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY.

- -

HTML

- -
<p>Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger</p>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world">
-  <polygon id="spaceship" points="15,0 0,30 30,30"/>
-</svg>
-<script>refresh();</script>
-
- -

CSS

- -
.world {
-  margin: 0px;
-  padding: 0px;
-  background-color: black;
-  width: 400px;
-  height: 400px;
-}
-
-#spaceship {
-  fill: orange;
-  stroke: red;
-  stroke-width: 2px;
-}
- -

JavaScript

- -

La première section du code JavaScript établit certaines variables que nous allons utiliser. shipSize contient la taille du vaisseau dans lequel le joueur se déplace, pour plus de commodité. position est utilisé pour suivre la position du vaisseau sur le terrain de jeu. moveRate et turnRate sont le nombre de pixels en avant et en arrière chaque fois que vous appuyez sur une touche pour déplacer le vaisseau et le nombre de degrés de rotation que les commandes de direction gauche et droite appliquent à chaque frappe. angle est la quantité actuelle de rotation appliquée au vaisseau, en degrés; il commence à 0 ° (pointant tout droit). Enfin, spaceship est défini pour faire référence à l'élément portant l'ID "spaceship", qui est le polygone SVG représentant le vaisseau que le joueur contrôle.

- -
let shipSize = {
-  width: 30,
-  height: 30
-};
-
-let position = {
-  x: 200,
-  y: 200
-};
-
-let moveRate = 9;
-let turnRate = 5;
-
-let angle = 0;
-
-let spaceship = document.getElementById("spaceship");
-
- -

Vient ensuite la fonction updatePosition(). Cette fonction prend en entrée la distance à laquelle le vaisseau doit être déplacé, où positif est un mouvement en avant et négatif est un mouvement en arrière. Cette fonction calcule la nouvelle position du vaisseau en fonction de la distance parcourue et de la direction actuelle du vaisseau. Il veille également à ce que le vaisseau franchisse les limites du terrain de jeu au lieu de disparaître.

- -
function updatePosition(offset) {
-  let rad = angle * (Math.PI/180);
-  position.x += (Math.sin(rad) * offset);
-  position.y -= (Math.cos(rad) * offset);
-
-  if (position.x < 0) {
-    position.x = 399;
-  } else if (position.x > 399) {
-    position.x = 0;
-  }
-
-  if (position.y < 0) {
-    position.y = 399;
-  } else if (position.y > 399) {
-    position.y = 0;
-  }
-}
-
- -

La fonction refresh() gère l'application de la rotation et de la position à l'aide d'un SVG transform.

- -
function refresh() {
-  let x = position.x - (shipSize.width/2);
-  let y = position.y - (shipSize.height/2);
-  let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) ";
-
-  spaceship.setAttribute("transform", transform);
-}
-
- -

Enfin, la méthode addEventListener() est utilisée pour commencer à écouter les événements {{event ("keydown")}}, en mettant à jour chaque touche en mettant à jour la position et l’angle de rotation du vaisseau, puis en appelant la méthode refresh() pour tracer le navire dans sa nouvelle position et son nouvel angle.

- -
window.addEventListener("keydown", function(event) {
-  if (event.preventDefaulted) {
-    return; // Do nothing if event already handled
-  }
-
-  switch(event.code) {
-    case "KeyS":
-    case "ArrowDown":
-      // Handle "back"
-      updatePosition(-moveRate);
-      break;
-    case "KeyW":
-    case "ArrowUp":
-      // Handle "forward"
-      updatePosition(moveRate);
-      break;
-    case "KeyA":
-    case "ArrowLeft":
-      // Handle "turn left"
-      angle -= turnRate;
-      break;
-    case "KeyD":
-    case "ArrowRight":
-      // Handle "turn right"
-      angle += turnRate;
-      break;
-  }
-
-  refresh();
-
-  // Consume the event so it doesn't get handled twice
-  event.preventDefault();
-}, true);
- -

Résultat

- -

Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous:

- -

{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}}

- -

Ce code peut être amélioré de plusieurs manières. La plupart des jeux réels surveillent les événements {{event("keydown")}}, démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps. Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide. Pour permettre cela, il ne faudrait pas utiliser de switch, ni de else if.ff

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('UI Events', '#dom-keyboardevent-code', 'KeyboardEvent.code')}}{{Spec2('UI Events')}}Définition initiale, inclut les valeurs de code.
- -

Compatibilité des navigateurs

- -

{{Compat("api.KeyboardEvent.code")}}

diff --git a/files/fr/web/api/keyboardevent/code/index.md b/files/fr/web/api/keyboardevent/code/index.md new file mode 100644 index 0000000000..d9d70d3e19 --- /dev/null +++ b/files/fr/web/api/keyboardevent/code/index.md @@ -0,0 +1,213 @@ +--- +title: KeyboardEvent.code +slug: Web/API/KeyboardEvent/code +tags: + - API + - Code + - DOM Events + - KeyboardEvent + - Propriété + - Reference +translation_of: Web/API/KeyboardEvent/code +--- +
{{APIRef("DOM Events")}}
+ +

La propriété KeyboardEvent.code représente une touche physique du clavier (contrairement au caractère généré par celle-ci). En d'autres termes, cette propriété retourne une valeur qui n'est pas modifiée par la disposition du clavier ou l'état des touches de modification.

+ +

Si le clavier n'est pas physique, la valeur retournée sera définie par le navigateur pour être le plus proche possible des valeurs retournées par un clavier physique afin de maximiser la compatibilité entre un clavier physique et virtuel.

+ +

Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par KeyboardEvent.code afin de déterminer le caractère utilisé sur le clavier.

+ +

Par exemple, le code retourné est "KeyQ" pour le caractère "q" sur un clavier QWERTY, mais le même code représente le caractère "'"  sur un clavier Dvorak, et le caractère "a" sur un clavier AZERTY. Cela rend impossible l'utilisation du code pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé.

+ +

Pour déterminer quel caractère correspond à un key event, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}.

+ +

Valeurs des codes

+ +

Les valeurs de code pour Windows, Linux et macOS figurent dans la liste de la KeyboardEvent: code values.

+ +

Exemples

+ +

Pratiquer KeyboardEvent

+ +

HTML

+ +
<p>
+   Appuyez sur une touche du clavier pour voir quelle valeur clé de
+   KeyboardEvent correspond à chaque événement
+</p>
+<div id="output">
+</div>
+
+ +

CSS

+ +
#output {
+  font-family: Arial, Helvetica, sans-serif;
+  border: 1px solid black;
+}
+ +

JavaScript

+ +
window.addEventListener("keydown", function(event) {
+  let str = "KeyboardEvent: key='" + event.key + "' | code='" +
+            event.code + "'";
+  let el = document.createElement("span");
+  el.innerHTML = str + "<br/>";
+
+  document.getElementById("output").appendChild(el);
+}, true);
+ +

Résultat

+ +

Pour essayer ce code, cliquez sur le lien ci-dessous:

+ +

{{EmbedLiveSample('Pratiquer_KeyboardEvent', 600, 300) }}

+ +

Gérer les événements de clavier dans un jeu

+ +

Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}}  qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY.

+ +

HTML

+ +
<p>Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger</p>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world">
+  <polygon id="spaceship" points="15,0 0,30 30,30"/>
+</svg>
+<script>refresh();</script>
+
+ +

CSS

+ +
.world {
+  margin: 0px;
+  padding: 0px;
+  background-color: black;
+  width: 400px;
+  height: 400px;
+}
+
+#spaceship {
+  fill: orange;
+  stroke: red;
+  stroke-width: 2px;
+}
+ +

JavaScript

+ +

La première section du code JavaScript établit certaines variables que nous allons utiliser. shipSize contient la taille du vaisseau dans lequel le joueur se déplace, pour plus de commodité. position est utilisé pour suivre la position du vaisseau sur le terrain de jeu. moveRate et turnRate sont le nombre de pixels en avant et en arrière chaque fois que vous appuyez sur une touche pour déplacer le vaisseau et le nombre de degrés de rotation que les commandes de direction gauche et droite appliquent à chaque frappe. angle est la quantité actuelle de rotation appliquée au vaisseau, en degrés; il commence à 0 ° (pointant tout droit). Enfin, spaceship est défini pour faire référence à l'élément portant l'ID "spaceship", qui est le polygone SVG représentant le vaisseau que le joueur contrôle.

+ +
let shipSize = {
+  width: 30,
+  height: 30
+};
+
+let position = {
+  x: 200,
+  y: 200
+};
+
+let moveRate = 9;
+let turnRate = 5;
+
+let angle = 0;
+
+let spaceship = document.getElementById("spaceship");
+
+ +

Vient ensuite la fonction updatePosition(). Cette fonction prend en entrée la distance à laquelle le vaisseau doit être déplacé, où positif est un mouvement en avant et négatif est un mouvement en arrière. Cette fonction calcule la nouvelle position du vaisseau en fonction de la distance parcourue et de la direction actuelle du vaisseau. Il veille également à ce que le vaisseau franchisse les limites du terrain de jeu au lieu de disparaître.

+ +
function updatePosition(offset) {
+  let rad = angle * (Math.PI/180);
+  position.x += (Math.sin(rad) * offset);
+  position.y -= (Math.cos(rad) * offset);
+
+  if (position.x < 0) {
+    position.x = 399;
+  } else if (position.x > 399) {
+    position.x = 0;
+  }
+
+  if (position.y < 0) {
+    position.y = 399;
+  } else if (position.y > 399) {
+    position.y = 0;
+  }
+}
+
+ +

La fonction refresh() gère l'application de la rotation et de la position à l'aide d'un SVG transform.

+ +
function refresh() {
+  let x = position.x - (shipSize.width/2);
+  let y = position.y - (shipSize.height/2);
+  let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) ";
+
+  spaceship.setAttribute("transform", transform);
+}
+
+ +

Enfin, la méthode addEventListener() est utilisée pour commencer à écouter les événements {{event ("keydown")}}, en mettant à jour chaque touche en mettant à jour la position et l’angle de rotation du vaisseau, puis en appelant la méthode refresh() pour tracer le navire dans sa nouvelle position et son nouvel angle.

+ +
window.addEventListener("keydown", function(event) {
+  if (event.preventDefaulted) {
+    return; // Do nothing if event already handled
+  }
+
+  switch(event.code) {
+    case "KeyS":
+    case "ArrowDown":
+      // Handle "back"
+      updatePosition(-moveRate);
+      break;
+    case "KeyW":
+    case "ArrowUp":
+      // Handle "forward"
+      updatePosition(moveRate);
+      break;
+    case "KeyA":
+    case "ArrowLeft":
+      // Handle "turn left"
+      angle -= turnRate;
+      break;
+    case "KeyD":
+    case "ArrowRight":
+      // Handle "turn right"
+      angle += turnRate;
+      break;
+  }
+
+  refresh();
+
+  // Consume the event so it doesn't get handled twice
+  event.preventDefault();
+}, true);
+ +

Résultat

+ +

Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous:

+ +

{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}}

+ +

Ce code peut être amélioré de plusieurs manières. La plupart des jeux réels surveillent les événements {{event("keydown")}}, démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps. Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide. Pour permettre cela, il ne faudrait pas utiliser de switch, ni de else if.ff

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('UI Events', '#dom-keyboardevent-code', 'KeyboardEvent.code')}}{{Spec2('UI Events')}}Définition initiale, inclut les valeurs de code.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.KeyboardEvent.code")}}

diff --git a/files/fr/web/api/keyboardevent/index.html b/files/fr/web/api/keyboardevent/index.html deleted file mode 100644 index 24967d7f68..0000000000 --- a/files/fr/web/api/keyboardevent/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: KeyboardEvent -slug: Web/API/KeyboardEvent -tags: - - API - - DOM - - Evènements IU - - Interface - - Reference - - évènements -translation_of: Web/API/KeyboardEvent ---- -
{{APIRef("DOM Events")}}
- -

Les objets KeyboardEvent décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (keydown, keypress, ou keyup) identifie quel type d'activité a été effectué.

- -
-

Note : KeyboardEvent indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement input HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés.

-
- -

Constructeur

- -
-
{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}
-
Crée un objet KeyboardEvent.
-
- -

Méthodes

- -

Cette interface hérite également des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.

- -
-
{{domxref("KeyboardEvent.getModifierState()")}}
-
Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que Alt, Shift, Ctrl, ou Meta, était pressée quand l'évènement a été créé.
-
{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}
-
Initialise un objet KeyboardEvent. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
-
{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}
-
Initialise un objet KeyboardEvent. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
-
- -

Propriétés

- -

Cette interface hérite également des propriétés de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.

- -
-
{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
-
Returne un {{jsxref("Boolean")}} qui est true si la touche Alt (Option ou ⌥ sous OS X) était active quand l'évènement touche a été généré.
-
{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}
-

Renvoie une {{domxref("DOMString")}} représentant la valeur de caractère de la touche. Si la touche correspond à un caractère imprimable, cette valeur est une chaîne Unicode non vide contenant ce caractère. Si la touche n'a pas de représentation imprimable, il s'agit d'une chaîne vide.

-
-

Note : si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère.

-
-
-

Attention : cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge.

-
-
-
{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
-

Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement keypress. Pour les touches dont l'attribut char contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables.

-
-

Attention : cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.

-
-
-
{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
-
Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement.
-
{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
-
Retourne un {{jsxref ("Boolean")}} qui est true si la touche Ctrl était active lorsque l'événement touche a été généré.
-
{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
-
Renvoie un {{jsxref ("Boolean")}} qui est true si l'événement est déclenché après compositionstart et avant compositionend.
-
{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
-
Retourne une {{domxref ("DOMString")}} représentant la valeur de touche de la touche représentée par l'événement.
-
{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}
-

Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée.

-

Attention : cet attribut est obsolète. vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.

-
-
{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
-
Cette propriété n'est pas standard et a été abandonnée en faveur de {{domxref("KeyboardEvent.key")}}. Elle faisait partie d'une ancienne version de DOM Level 3 Events.
-
{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
-
C'est un alias obsolète non standard pour {{domxref("KeyboardEvent.location")}}. Il faisait partie d'une ancienne version de DOM Level 3 Events.
-
{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
-

Retourne une {{domxref("DOMString")}} représentant une chaîne de paramètres régionaux indiquant les paramètres régionaux pour lesquels le clavier est configuré. Cela peut être une chaîne vide si le navigateur ou l'appareil ne connaît pas les paramètres régionaux du clavier.

-

Note : cela ne décrit pas les paramètres régionaux des données entrées. Un utilisateur peut utiliser une disposition du clavier donnée, tout en saisissant du texte dans une autre langue.

-
-
{{domxref("KeyboardEvent.location")}}{{Readonlyinline}}
-
Retourne un {{jsxref ("Number")}} représentant l'emplacement de la touche du clavier ou tout autre dispositif d'entrée.
-
{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
-
Retourne un {{jsxref("Boolean")}} qui est true si la touche Meta (sur les claviers Mac, la touche ⌘ Command ; sur les claviers Windows, la touche Windows (⊞)) était active quand l'évènement touche a été généré.
-
{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
-
Retourne un {{jsxref("Booléen")}} qui est true si la touche est maintenue enfoncée de telle sorte qu'elle se répète automatiquement.
-
{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
-
Retourne un {{jsxref("Boolean")}} qui est true si la touche Shift était active quand l'évènement touche a été généré.
-
{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}
-

Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que keyCode.

-

Attention : cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.

-
-
- -

Notes

- -

Les événements existants sont keydown, keypress et keyup. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit :

- -
    -
  1. lorsque la touche est d'abord enfoncée, l'événement keydown est envoyé ;
    2. -
  2. si la touche n'est pas une touche de modification, l'événement keypress est envoyé ;
    3. -
  3. lorsque l'utilisateur relâche la touche, l'événement keyup est envoyé.
    4. -
- -

Cas particuliers

- -

Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements keydown et keyup.

- -
-

Note : Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement keypress pour ces touches.

-
- -

Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement keydown. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement keypress ; ce comportement incohérent était le {{bug(602812)}}.

- -

Gestion de l'auto-répétition

- -

Lorsqu'une touche est maintenue enfoncée, elle commence à se répéter automatiquement. Cela a pour résultat qu'une suite d'événements similaire à ce qui suit est générée :

- -
    -
  1. keydown
    2. -
  2. keypress
    3. -
  3. keydown
    4. -
  4. keypress
    5. -
  5. << répétition jusqu'à ce que l'utilisateur relâche la touche >>
    6. -
  6. keyup
    7. -
- -

C'est ce que la spécification DOM Niveau 3 dit qu'il devrait se produire. Cependant, il y a quelques mises en garde, comme décrit ci-dessous.

- -

 

- -

Auto-répétition sur certains environnements GTK tels que Ubuntu 9.4

- -

Dans certains environnements basés sur GTK, l'auto-répétition génère automatiquement un événement natif lors de la répétition automatique, et Gecko n'a aucun moyen de connaître la différence entre une suite répétée de touches et une répétition automatique. Sur ces plateformes, une touche auto-répétée génère donc la suite d'événements suivante :

- -
    -
  1. keydown
    2. -
  2. keypress
    3. -
  3. keyup
    4. -
  4. keydown
    5. -
  5. keypress
    6. -
  6. keyup
    7. -
  7. << répétition jusqu'à ce que l'utilisateur relâche la touche >>
    8. -
  8. keyup
    9. -
- -

Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises.

- -

Gestion de l'auto-répétition avant Gecko 5.0

- -

Avant Gecko 5.0 {{geckoRelease('5.0')}}, la gestion du clavier était moins cohérente entre les plates-formes.

- -
-
Windows
-
Le comportement de la répétition automatique est le même que dans Gecko 4.0 et ultérieur.
-
Mac
-
Après l'événement keydown initial, seuls les événements keypress sont envoyés jusqu'à ce que l'événement keyup se produise ; les événements de clavier intermédiaires ne sont pas envoyés.
-
Linux
-
Le comportement de l'événement dépend de la plate-forme particulière. Il se comportera comme Windows ou Mac suivant ce que fait le modèle d'événement natif.
-
- -
-

Note : le déclenchement manuel d'un événement ne génère pas l'action par défaut associée à cet événement. Par exemple, le déclenchement manuel d'un événement touche n'entraîne pas l'apparition de cette lettre dans une zone de saisie de texte ayant la focalisation. Dans le cas des événements de l'interface utilisateur, cela est important pour des raisons de sécurité, car cela empêche les scripts de simuler les actions de l'utilisateur interagissant avec le navigateur lui-même.

-
- -

Exemple

- -
<!DOCTYPE html>
-<html>
-<head>
-<script>
-'use strict';
-
-document.addEventListener('keydown', (event) => {
-  const nomTouche = event.key;
-
-  if (nomTouche === 'Control') {
-    // Pas d'alerte si seule la touche Control est pressée.
-    return;
-  }
-
-  if (event.ctrlKey) {
-    // Même si event.key n'est pas 'Control' (par ex., 'a' is pressed),
-    // event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps.
-    alert(`Combinaison de ctrlKey + ${nomTouche}`);
-  } else {
-    alert(`Touche pressée ${nomTouche}`);
-  }
-}, false);
-
-document.addEventListener('keyup', (event) => {
-  const nomTouche = event.key;
-
-  // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active.
-  // Aussi event.ctrlKey est false.
-  if (nomTouche === 'Control') {
-    alert('La touche Control a été relâchée');
-  }
-}, false);
-
-</script>
-</head>
-
-<body>
-</body>
-</html>
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}}{{Spec2('UI Events')}} 
- -

La spécification d'interface KeyboardEvent est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.KeyboardEvent")}}

- -

Voir aussi

- -
    -
  • {{domxref("KeyboardEvent.code")}}.
    • -
  • {{domxref("KeyboardEvent.key")}}.
    • -
  • {{domxref("KeyboardEvent.getModifierState")}}
    • -
diff --git a/files/fr/web/api/keyboardevent/index.md b/files/fr/web/api/keyboardevent/index.md new file mode 100644 index 0000000000..24967d7f68 --- /dev/null +++ b/files/fr/web/api/keyboardevent/index.md @@ -0,0 +1,242 @@ +--- +title: KeyboardEvent +slug: Web/API/KeyboardEvent +tags: + - API + - DOM + - Evènements IU + - Interface + - Reference + - évènements +translation_of: Web/API/KeyboardEvent +--- +
{{APIRef("DOM Events")}}
+ +

Les objets KeyboardEvent décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (keydown, keypress, ou keyup) identifie quel type d'activité a été effectué.

+ +
+

Note : KeyboardEvent indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement input HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés.

+
+ +

Constructeur

+ +
+
{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}
+
Crée un objet KeyboardEvent.
+
+ +

Méthodes

+ +

Cette interface hérite également des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.getModifierState()")}}
+
Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que Alt, Shift, Ctrl, ou Meta, était pressée quand l'évènement a été créé.
+
{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}
+
Initialise un objet KeyboardEvent. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
+
{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}
+
Initialise un objet KeyboardEvent. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
+
+ +

Propriétés

+ +

Cette interface hérite également des propriétés de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
+
Returne un {{jsxref("Boolean")}} qui est true si la touche Alt (Option ou ⌥ sous OS X) était active quand l'évènement touche a été généré.
+
{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}
+

Renvoie une {{domxref("DOMString")}} représentant la valeur de caractère de la touche. Si la touche correspond à un caractère imprimable, cette valeur est une chaîne Unicode non vide contenant ce caractère. Si la touche n'a pas de représentation imprimable, il s'agit d'une chaîne vide.

+
+

Note : si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère.

+
+
+

Attention : cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge.

+
+
+
{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
+

Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement keypress. Pour les touches dont l'attribut char contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables.

+
+

Attention : cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.

+
+
+
{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
+
Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement.
+
{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
+
Retourne un {{jsxref ("Boolean")}} qui est true si la touche Ctrl était active lorsque l'événement touche a été généré.
+
{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
+
Renvoie un {{jsxref ("Boolean")}} qui est true si l'événement est déclenché après compositionstart et avant compositionend.
+
{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+
Retourne une {{domxref ("DOMString")}} représentant la valeur de touche de la touche représentée par l'événement.
+
{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}
+

Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée.

+

Attention : cet attribut est obsolète. vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.

+
+
{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
+
Cette propriété n'est pas standard et a été abandonnée en faveur de {{domxref("KeyboardEvent.key")}}. Elle faisait partie d'une ancienne version de DOM Level 3 Events.
+
{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
+
C'est un alias obsolète non standard pour {{domxref("KeyboardEvent.location")}}. Il faisait partie d'une ancienne version de DOM Level 3 Events.
+
{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
+

Retourne une {{domxref("DOMString")}} représentant une chaîne de paramètres régionaux indiquant les paramètres régionaux pour lesquels le clavier est configuré. Cela peut être une chaîne vide si le navigateur ou l'appareil ne connaît pas les paramètres régionaux du clavier.

+

Note : cela ne décrit pas les paramètres régionaux des données entrées. Un utilisateur peut utiliser une disposition du clavier donnée, tout en saisissant du texte dans une autre langue.

+
+
{{domxref("KeyboardEvent.location")}}{{Readonlyinline}}
+
Retourne un {{jsxref ("Number")}} représentant l'emplacement de la touche du clavier ou tout autre dispositif d'entrée.
+
{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
+
Retourne un {{jsxref("Boolean")}} qui est true si la touche Meta (sur les claviers Mac, la touche ⌘ Command ; sur les claviers Windows, la touche Windows (⊞)) était active quand l'évènement touche a été généré.
+
{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
+
Retourne un {{jsxref("Booléen")}} qui est true si la touche est maintenue enfoncée de telle sorte qu'elle se répète automatiquement.
+
{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
+
Retourne un {{jsxref("Boolean")}} qui est true si la touche Shift était active quand l'évènement touche a été généré.
+
{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}
+

Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que keyCode.

+

Attention : cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.

+
+
+ +

Notes

+ +

Les événements existants sont keydown, keypress et keyup. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit :

+ +
    +
  1. lorsque la touche est d'abord enfoncée, l'événement keydown est envoyé ;
    2. +
  2. si la touche n'est pas une touche de modification, l'événement keypress est envoyé ;
    3. +
  3. lorsque l'utilisateur relâche la touche, l'événement keyup est envoyé.
    4. +
+ +

Cas particuliers

+ +

Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements keydown et keyup.

+ +
+

Note : Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement keypress pour ces touches.

+
+ +

Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement keydown. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement keypress ; ce comportement incohérent était le {{bug(602812)}}.

+ +

Gestion de l'auto-répétition

+ +

Lorsqu'une touche est maintenue enfoncée, elle commence à se répéter automatiquement. Cela a pour résultat qu'une suite d'événements similaire à ce qui suit est générée :

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keydown
    4. +
  4. keypress
    5. +
  5. << répétition jusqu'à ce que l'utilisateur relâche la touche >>
    6. +
  6. keyup
    7. +
+ +

C'est ce que la spécification DOM Niveau 3 dit qu'il devrait se produire. Cependant, il y a quelques mises en garde, comme décrit ci-dessous.

+ +

 

+ +

Auto-répétition sur certains environnements GTK tels que Ubuntu 9.4

+ +

Dans certains environnements basés sur GTK, l'auto-répétition génère automatiquement un événement natif lors de la répétition automatique, et Gecko n'a aucun moyen de connaître la différence entre une suite répétée de touches et une répétition automatique. Sur ces plateformes, une touche auto-répétée génère donc la suite d'événements suivante :

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keyup
    4. +
  4. keydown
    5. +
  5. keypress
    6. +
  6. keyup
    7. +
  7. << répétition jusqu'à ce que l'utilisateur relâche la touche >>
    8. +
  8. keyup
    9. +
+ +

Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises.

+ +

Gestion de l'auto-répétition avant Gecko 5.0

+ +

Avant Gecko 5.0 {{geckoRelease('5.0')}}, la gestion du clavier était moins cohérente entre les plates-formes.

+ +
+
Windows
+
Le comportement de la répétition automatique est le même que dans Gecko 4.0 et ultérieur.
+
Mac
+
Après l'événement keydown initial, seuls les événements keypress sont envoyés jusqu'à ce que l'événement keyup se produise ; les événements de clavier intermédiaires ne sont pas envoyés.
+
Linux
+
Le comportement de l'événement dépend de la plate-forme particulière. Il se comportera comme Windows ou Mac suivant ce que fait le modèle d'événement natif.
+
+ +
+

Note : le déclenchement manuel d'un événement ne génère pas l'action par défaut associée à cet événement. Par exemple, le déclenchement manuel d'un événement touche n'entraîne pas l'apparition de cette lettre dans une zone de saisie de texte ayant la focalisation. Dans le cas des événements de l'interface utilisateur, cela est important pour des raisons de sécurité, car cela empêche les scripts de simuler les actions de l'utilisateur interagissant avec le navigateur lui-même.

+
+ +

Exemple

+ +
<!DOCTYPE html>
+<html>
+<head>
+<script>
+'use strict';
+
+document.addEventListener('keydown', (event) => {
+  const nomTouche = event.key;
+
+  if (nomTouche === 'Control') {
+    // Pas d'alerte si seule la touche Control est pressée.
+    return;
+  }
+
+  if (event.ctrlKey) {
+    // Même si event.key n'est pas 'Control' (par ex., 'a' is pressed),
+    // event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps.
+    alert(`Combinaison de ctrlKey + ${nomTouche}`);
+  } else {
+    alert(`Touche pressée ${nomTouche}`);
+  }
+}, false);
+
+document.addEventListener('keyup', (event) => {
+  const nomTouche = event.key;
+
+  // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active.
+  // Aussi event.ctrlKey est false.
+  if (nomTouche === 'Control') {
+    alert('La touche Control a été relâchée');
+  }
+}, false);
+
+</script>
+</head>
+
+<body>
+</body>
+</html>
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}}{{Spec2('UI Events')}} 
+ +

La spécification d'interface KeyboardEvent est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.KeyboardEvent")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("KeyboardEvent.code")}}.
    • +
  • {{domxref("KeyboardEvent.key")}}.
    • +
  • {{domxref("KeyboardEvent.getModifierState")}}
    • +
diff --git a/files/fr/web/api/keyboardevent/key/index.html b/files/fr/web/api/keyboardevent/key/index.html deleted file mode 100644 index bfd9846960..0000000000 --- a/files/fr/web/api/keyboardevent/key/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: KeyboardEvent.key -slug: Web/API/KeyboardEvent/key -tags: - - API - - DOM - - KeyboardEvent - - Lecture-seule - - Propriété - - Reference - - UI Events -translation_of: Web/API/KeyboardEvent/key ---- -

{{APIRef("DOM Events")}}

- -

La propriété en lecture seule de key de l'interface {{domxref("KeyboardEvent")}} retourne la valeur d’une ou plusieurs touches pressées par l’utilisateur, tout en tenant compte de l'état des touches de modification telles que la touche Shift (majuscules) ainsi que les paramètres régionaux des clavier et mise en page. Ce peut être l’une des valeurs suivantes :

- -

Valeurs des touches

- -

Voir une liste complète des valeurs de touches

- -
    -
  • -

    Si la valeur a une représentation d’impression, ce sera une chaîne de caractères Unicode non vide

    -
    • -
  • Si la valeur est une touche de contrôle, une des valeurs de touches pré-définies.
    • -
  • Si l’KeyboardEvent est causé par l’appui sur une touche morte, la valeur de la touche sera "Dead".
    • -
  • Certaines touches de clavier spécialisées (telles que les touches étendues de contrôle des médias sur les claviers multimédias) ne génèrent pas de codes de touches sous Windows ; à la place, ils déclenchent les événements WM_APPCOMMAND. Ces événements sont connectés aux événements de clavier DOM et sont répertoriés parmi les «codes de touche virtuelle» pour Windows, même s'ils ne sont pas réellement des codes de touche.
    • -
  • Si la valeur ne peut être identifiée, 'Unidentified' sera retourné.
    • -
- -

Séquence KeyboardEvent

- -

Les événements KeyboardEvents sont déclenchés selon une séquence prédéterminée, et la compréhension de ces éléments contribuera à comprendre la valeur de la propriété key pour un événement KeyboardEvent particulier. Pour une touche donnée, la séquence de KeyboardEvents est la suivante, en supposant que {{domxref ("Event.preventDefault")}} n'est pas appelée :

- -
    -
  1. Un événement {{domxref("Element/keydown_event", "keydown")}} (touche abaissée) est d'abord déclenché. Si la touche est maintenue enfoncée et que la touche est une touche de caractère, l'événement continue d'être émis dans un intervalle dépendant de l'implémentation de la plateforme, et la propriété en lecture seule {{domxref ("KeyboardEvent.repeat")}} est définie sur true (vrai).
    2. -
  2. Si la touche est une touche de caractère qui entraînerait l'insertion d'un caractère dans {{HTMLElement ("entrée")}}, {{HTMLElement ("textarea")}} ou un élément dont {{domxref ("HTMLElement. contentEditable ")}} a la valeur true, les types d'événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés dans cet ordre. Notez que d'autres implémentations peuvent déclencher l'événement {{event ("keypress")}} si elles sont prises en charge. Les événements seront déclenchés à plusieurs reprises tant que la touche est maintenue enfoncée.
    3. -
  3. Un évènement {{domxref("Element/keyup_event", "keyup")}} est déclenché une fois la touche relachée. Ceci complète le processus.
    4. -
- -

Dans les étapes 1 et 3, l'attribut KeyboardEent.key est défini et est déclaré à une valeur appropriée en fonction des règles définies.

- -

Exemple de séquence KeyboardEvent

- -

Considérez la séquence d'événements générée lorsque nous interagissons avec la touche Shift et la touche 2 en utilisant un clavier américain et un clavier britannique.

- -

Essayez d'expérimenter en utilisant les deux cas de test suivants :

- -
    -
  1. Maintenez la touche shift enfoncée, puis appuyez sur 2 et relâchez-la. Ensuite, relâchez la touche shift.
    2. -
  2. Maintenez la touche shift enfoncée, puis appuyez sur 2. Relâchez la touche shift. Finalement, relâchez la touche 2.
    3. -
- -

HTML

- -
<div class="fx">
-  <div>
-    <textarea rows="5" name="test-target" id="test-target"></textarea>
-    <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
-  </div>
-  <div class="flex">
-    <div id="console-log"></div>
-  </div>
-</div>
- -

CSS

- -
.fx {
-  -webkit-display: flex;
-  display: flex;
-  margin-left: -20px;
-  margin-right: -20px;
-}
-
-.fx > div {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
-.fx > div:first-child {
-   width: 30%;
-}
-
-.flex {
-  -webkit-flex: 1;
-  flex: 1;
-}
-
-#test-target {
-  display: block;
-  width: 100%;
-  margin-bottom: 10px;
-}
- -

JavaScript

- -
let textarea = document.getElementById('test-target'),
-consoleLog = document.getElementById('console-log'),
-btnClearConsole = document.getElementById('btn-clear-console');
-
-function logMessage(message) {
-  let p = document.createElement('p');
-  p.appendChild(document.createTextNode(message));
-  consoleLog.appendChild(p);
-}
-
-textarea.addEventListener('keydown', (e) => {
-  if (!e.repeat)
-    logMessage(`first keydown event. key property value is "${e.key}"`);
-  else
-    logMessage(`keydown event repeats. key property value is "${e.key}"`);
-});
-
-textarea.addEventListener('beforeinput', (e) => {
-  logMessage(`beforeinput event. you are about inputing "${e.data}"`);
-});
-
-textarea.addEventListener('input', (e) => {
-  logMessage(`input event. you have just inputed "${e.data}"`);
-});
-
-textarea.addEventListener('keyup', (e) => {
-  logMessage(`keyup event. key property value is "${e.key}"`);
-});
-
-btnClearConsole.addEventListener('click', (e) => {
-  let child = consoleLog.firstChild;
-  while (child) {
-   consoleLog.removeChild(child);
-   child = consoleLog.firstChild;
-  }
-});
- -

Résultat

- -

{{EmbedLiveSample('Exemple_de_séquence_KeyboardEvent')}}

- -
-

Note : Sur les navigateurs qui n'implémentent pas complètement l'interface {{domxref("InputEvent")}} qui est utilisée pour les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}}, vous pouvez obtenir une réponse incorrecte sur ces lignes du journal de sortie.

-
- -

Cas 1

- -

Lorsque la touche Maj (shift) est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété key est définie sur la chaîne "Shift". Comme nous gardons cette touche enfoncée, l'événement {{event ("keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.

- -

Lorsque la key 2 est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété key pour l'événement est définie sur la chaîne "@" pour le clavier de type américain et """ pour le clavier de type britannique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée.

- -

Lorsque nous relâchons la key 2, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la propriété key conserve les valeurs de chaîne "@" et """ pour les différents claviers respectivement.

- -

Lorsque nous relâchons enfin la touche shift, un autre événement {{domxref("Element/keyup_event", "keyup")}} est déclenché pour elle, et la valeur de l'attribut de la touche reste "Shift".

- -

Cas 2

- -

Lorsque la touche Maj est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété key est définie sur la chaîne "Shift". Comme nous maintenons cette touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.

- -

Lorsque la key 2 est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété key pour l'événement est définie sur la chaîne "@" pour le clavier de type américain et """ pour le clavier de type britanique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée. Comme nous maintenons la touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} continue à se déclencher à plusieurs reprises et la propriété {{domxref ("KeyboardEvent.repeat")}} est définie sur true. Les évènements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont également déclenchés.

- -

Lorsque nous relâchons la touche shift, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la valeur de l'attribut clé reste "Shift". À ce stade, notez que la valeur de la propriété key pour l'événement de répétition du clavier de la touche key 2 est désormais "2" car la touche de modification du sélecteur n'est plus active. Il en va de même pour la propriété {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} des événements {{domxref("HTMLElement/input_event", "input")}} et {{event ("input")}}.

- -

Lorsque nous relâchons enfin la touche key 2, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché mais la propriété key est définie sur la valeur de chaîne "2" pour les deux configurations de clavier car la touche de modification shift n'est plus active.

- -

Exemple

- -

Cet exemple utilise {{domxref("EventTarget.addEventListener()")}} pour écouter les événements {{domxref("Element/keydown_event", "keydown")}} . Quand ils se produisent, la valeur de la touche est vérifiée pour voir si c'est l'une des touches qui intéressent le code, et si c'est le cas, elle est traitée (éventuellement en pilotant un vaisseau spatial, peut-être en changeant la cellule sélectionnée dans une feuille de calcul).

- -
window.addEventListener("keydown", function (event) {
-  if (event.defaultPrevented) {
-    return; // Ne devrait rien faire si l'événement de la touche était déjà consommé.
-  }
-
-  switch (event.key) {
-    case "ArrowDown":
-      // Faire quelque chose pour la touche "flèche vers le bas" pressée.
-      break;
-    case "ArrowUp":
-      // Faire quelque chose pour la touche "up arrow" pressée.
-      break;
-    case "ArrowLeft":
-      // Faire quelque chose pour la touche "left arrow" pressée.
-      break;
-    case "ArrowRight":
-      // Faire quelque chose pour la touche "right arrow" pressée.
-      break;
-    case "Enter":
-      // Faire quelque chose pour les touches "enter" ou "return" pressées.
-      break;
-    case "Escape":
-      // Faire quelque chose pour la touche "esc" pressée.
-      break;
-    default:
-      return; // Quitter lorsque cela ne gère pas l'événement touche.
-  }
-
-  // Annuler l'action par défaut pour éviter qu'elle ne soit traitée deux fois.
-  event.preventDefault();
-}, true);
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}{{Spec2('DOM3 Events')}}Définition initiale, incluant les valeurs de touches.
- -

Compatibilité des navigateurs

- -

{{Compat("api.KeyboardEvent.key")}}

\ No newline at end of file diff --git a/files/fr/web/api/keyboardevent/key/index.md b/files/fr/web/api/keyboardevent/key/index.md new file mode 100644 index 0000000000..bfd9846960 --- /dev/null +++ b/files/fr/web/api/keyboardevent/key/index.md @@ -0,0 +1,219 @@ +--- +title: KeyboardEvent.key +slug: Web/API/KeyboardEvent/key +tags: + - API + - DOM + - KeyboardEvent + - Lecture-seule + - Propriété + - Reference + - UI Events +translation_of: Web/API/KeyboardEvent/key +--- +

{{APIRef("DOM Events")}}

+ +

La propriété en lecture seule de key de l'interface {{domxref("KeyboardEvent")}} retourne la valeur d’une ou plusieurs touches pressées par l’utilisateur, tout en tenant compte de l'état des touches de modification telles que la touche Shift (majuscules) ainsi que les paramètres régionaux des clavier et mise en page. Ce peut être l’une des valeurs suivantes :

+ +

Valeurs des touches

+ +

Voir une liste complète des valeurs de touches

+ +
    +
  • +

    Si la valeur a une représentation d’impression, ce sera une chaîne de caractères Unicode non vide

    +
    • +
  • Si la valeur est une touche de contrôle, une des valeurs de touches pré-définies.
    • +
  • Si l’KeyboardEvent est causé par l’appui sur une touche morte, la valeur de la touche sera "Dead".
    • +
  • Certaines touches de clavier spécialisées (telles que les touches étendues de contrôle des médias sur les claviers multimédias) ne génèrent pas de codes de touches sous Windows ; à la place, ils déclenchent les événements WM_APPCOMMAND. Ces événements sont connectés aux événements de clavier DOM et sont répertoriés parmi les «codes de touche virtuelle» pour Windows, même s'ils ne sont pas réellement des codes de touche.
    • +
  • Si la valeur ne peut être identifiée, 'Unidentified' sera retourné.
    • +
+ +

Séquence KeyboardEvent

+ +

Les événements KeyboardEvents sont déclenchés selon une séquence prédéterminée, et la compréhension de ces éléments contribuera à comprendre la valeur de la propriété key pour un événement KeyboardEvent particulier. Pour une touche donnée, la séquence de KeyboardEvents est la suivante, en supposant que {{domxref ("Event.preventDefault")}} n'est pas appelée :

+ +
    +
  1. Un événement {{domxref("Element/keydown_event", "keydown")}} (touche abaissée) est d'abord déclenché. Si la touche est maintenue enfoncée et que la touche est une touche de caractère, l'événement continue d'être émis dans un intervalle dépendant de l'implémentation de la plateforme, et la propriété en lecture seule {{domxref ("KeyboardEvent.repeat")}} est définie sur true (vrai).
    2. +
  2. Si la touche est une touche de caractère qui entraînerait l'insertion d'un caractère dans {{HTMLElement ("entrée")}}, {{HTMLElement ("textarea")}} ou un élément dont {{domxref ("HTMLElement. contentEditable ")}} a la valeur true, les types d'événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés dans cet ordre. Notez que d'autres implémentations peuvent déclencher l'événement {{event ("keypress")}} si elles sont prises en charge. Les événements seront déclenchés à plusieurs reprises tant que la touche est maintenue enfoncée.
    3. +
  3. Un évènement {{domxref("Element/keyup_event", "keyup")}} est déclenché une fois la touche relachée. Ceci complète le processus.
    4. +
+ +

Dans les étapes 1 et 3, l'attribut KeyboardEent.key est défini et est déclaré à une valeur appropriée en fonction des règles définies.

+ +

Exemple de séquence KeyboardEvent

+ +

Considérez la séquence d'événements générée lorsque nous interagissons avec la touche Shift et la touche 2 en utilisant un clavier américain et un clavier britannique.

+ +

Essayez d'expérimenter en utilisant les deux cas de test suivants :

+ +
    +
  1. Maintenez la touche shift enfoncée, puis appuyez sur 2 et relâchez-la. Ensuite, relâchez la touche shift.
    2. +
  2. Maintenez la touche shift enfoncée, puis appuyez sur 2. Relâchez la touche shift. Finalement, relâchez la touche 2.
    3. +
+ +

HTML

+ +
<div class="fx">
+  <div>
+    <textarea rows="5" name="test-target" id="test-target"></textarea>
+    <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
+  </div>
+  <div class="flex">
+    <div id="console-log"></div>
+  </div>
+</div>
+ +

CSS

+ +
.fx {
+  -webkit-display: flex;
+  display: flex;
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+.fx > div {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.fx > div:first-child {
+   width: 30%;
+}
+
+.flex {
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+#test-target {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+ +

JavaScript

+ +
let textarea = document.getElementById('test-target'),
+consoleLog = document.getElementById('console-log'),
+btnClearConsole = document.getElementById('btn-clear-console');
+
+function logMessage(message) {
+  let p = document.createElement('p');
+  p.appendChild(document.createTextNode(message));
+  consoleLog.appendChild(p);
+}
+
+textarea.addEventListener('keydown', (e) => {
+  if (!e.repeat)
+    logMessage(`first keydown event. key property value is "${e.key}"`);
+  else
+    logMessage(`keydown event repeats. key property value is "${e.key}"`);
+});
+
+textarea.addEventListener('beforeinput', (e) => {
+  logMessage(`beforeinput event. you are about inputing "${e.data}"`);
+});
+
+textarea.addEventListener('input', (e) => {
+  logMessage(`input event. you have just inputed "${e.data}"`);
+});
+
+textarea.addEventListener('keyup', (e) => {
+  logMessage(`keyup event. key property value is "${e.key}"`);
+});
+
+btnClearConsole.addEventListener('click', (e) => {
+  let child = consoleLog.firstChild;
+  while (child) {
+   consoleLog.removeChild(child);
+   child = consoleLog.firstChild;
+  }
+});
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_de_séquence_KeyboardEvent')}}

+ +
+

Note : Sur les navigateurs qui n'implémentent pas complètement l'interface {{domxref("InputEvent")}} qui est utilisée pour les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}}, vous pouvez obtenir une réponse incorrecte sur ces lignes du journal de sortie.

+
+ +

Cas 1

+ +

Lorsque la touche Maj (shift) est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété key est définie sur la chaîne "Shift". Comme nous gardons cette touche enfoncée, l'événement {{event ("keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.

+ +

Lorsque la key 2 est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété key pour l'événement est définie sur la chaîne "@" pour le clavier de type américain et """ pour le clavier de type britannique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée.

+ +

Lorsque nous relâchons la key 2, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la propriété key conserve les valeurs de chaîne "@" et """ pour les différents claviers respectivement.

+ +

Lorsque nous relâchons enfin la touche shift, un autre événement {{domxref("Element/keyup_event", "keyup")}} est déclenché pour elle, et la valeur de l'attribut de la touche reste "Shift".

+ +

Cas 2

+ +

Lorsque la touche Maj est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété key est définie sur la chaîne "Shift". Comme nous maintenons cette touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.

+ +

Lorsque la key 2 est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété key pour l'événement est définie sur la chaîne "@" pour le clavier de type américain et """ pour le clavier de type britanique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée. Comme nous maintenons la touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} continue à se déclencher à plusieurs reprises et la propriété {{domxref ("KeyboardEvent.repeat")}} est définie sur true. Les évènements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont également déclenchés.

+ +

Lorsque nous relâchons la touche shift, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la valeur de l'attribut clé reste "Shift". À ce stade, notez que la valeur de la propriété key pour l'événement de répétition du clavier de la touche key 2 est désormais "2" car la touche de modification du sélecteur n'est plus active. Il en va de même pour la propriété {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} des événements {{domxref("HTMLElement/input_event", "input")}} et {{event ("input")}}.

+ +

Lorsque nous relâchons enfin la touche key 2, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché mais la propriété key est définie sur la valeur de chaîne "2" pour les deux configurations de clavier car la touche de modification shift n'est plus active.

+ +

Exemple

+ +

Cet exemple utilise {{domxref("EventTarget.addEventListener()")}} pour écouter les événements {{domxref("Element/keydown_event", "keydown")}} . Quand ils se produisent, la valeur de la touche est vérifiée pour voir si c'est l'une des touches qui intéressent le code, et si c'est le cas, elle est traitée (éventuellement en pilotant un vaisseau spatial, peut-être en changeant la cellule sélectionnée dans une feuille de calcul).

+ +
window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Ne devrait rien faire si l'événement de la touche était déjà consommé.
+  }
+
+  switch (event.key) {
+    case "ArrowDown":
+      // Faire quelque chose pour la touche "flèche vers le bas" pressée.
+      break;
+    case "ArrowUp":
+      // Faire quelque chose pour la touche "up arrow" pressée.
+      break;
+    case "ArrowLeft":
+      // Faire quelque chose pour la touche "left arrow" pressée.
+      break;
+    case "ArrowRight":
+      // Faire quelque chose pour la touche "right arrow" pressée.
+      break;
+    case "Enter":
+      // Faire quelque chose pour les touches "enter" ou "return" pressées.
+      break;
+    case "Escape":
+      // Faire quelque chose pour la touche "esc" pressée.
+      break;
+    default:
+      return; // Quitter lorsque cela ne gère pas l'événement touche.
+  }
+
+  // Annuler l'action par défaut pour éviter qu'elle ne soit traitée deux fois.
+  event.preventDefault();
+}, true);
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}{{Spec2('DOM3 Events')}}Définition initiale, incluant les valeurs de touches.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.KeyboardEvent.key")}}

\ No newline at end of file diff --git a/files/fr/web/api/keyboardevent/key/key_values/index.html b/files/fr/web/api/keyboardevent/key/key_values/index.html deleted file mode 100644 index 07c8ba499c..0000000000 --- a/files/fr/web/api/keyboardevent/key/key_values/index.html +++ /dev/null @@ -1,3637 +0,0 @@ ---- -title: Key Values -slug: Web/API/KeyboardEvent/key/Key_Values -translation_of: Web/API/KeyboardEvent/key/Key_Values ---- -

Les tableaux ci-dessous énumèrent les valeurs clés standard dans différentes catégories de clés, avec une explication de l'utilisation habituelle de la clé. Les codes de clés virtuels correspondants pour les plateformes communes sont inclus lorsqu'ils sont disponibles.

- -

Apprenez à utiliser ces valeurs clés en JavaScript en utilisant KeyboardEvent.key

- -

Special Values | Modifier Keys | Whitespace Keys | Navigation Keys | Editing Keys | UI Keys | Device Keys | IME and Composition Keys | Function Keys | Phone Keys | Multimedia Keys | Audio Control Keys | TV Control Keys | Media Controller Keys | Speech Recognition Keys | Document Keys | Application Selector Keys | Browser Control Keys | Numeric Keypad Keys

- -

Valeurs spéciales

- -

Les valeurs de key qui ont une signification particulière autre que l'identification d'une clé ou d'un caractère spécifique.

- - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValeurDescriptionCode clé virtuel
WindowsMacLinuxAndroid
"Unidentified"L'agent utilisateur n'a pas été en mesure de faire correspondre le code virtuel de l'événement à une valeur clé spécifique. Cela peut être dû à des contraintes matérielles ou logicielles, ou à des contraintes liées à la plate-forme sur laquelle l'agent utilisateur fonctionne.varievarievarievarie
- -

Modifier keys

- -

Modifiers are special keys which are used to generate special characters or cause special actions when used in combination with other keys. Examples include the Shift and Control keys, and lock keys such as Caps Lock and NumLock.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Alt" [5]The Alt (Alternative) key.VK_MENU (0x12)
- VK_LMENU (0xA4)
- VK_RMENU (0xA5)		kVK_Option (0x3A)
- kVK_RightOption (0x3D)		GDK_KEY_Alt_L (0xFFE9)
- GDK_KEY_Alt_R (0xFFEA)
- Qt::Key_Alt (0x01000023)		KEYCODE_ALT_LEFT (57)
- KEYCODE_ALT_RIGHT (58)
"AltGraph" [5]The AltGr or AltGraph (Alternate Graphics) key. Enables the ISO Level 3 shift modifier (where Shift is the level 2 modifier).GDK_KEY_Mode_switch (0xFF7E)
- GDK_KEY_ISO_Level3_Shift (0xFE03)
- GDK_KEY_ISO_Level3_Latch (0xFE04)
- GDK_KEY_ISO_Level3_Lock (0xFE05)
- GDK_KEY_ISO_Level5_Shift (0xFE11)
- GDK_KEY_ISO_Level5_Latch (0xFE12)
- GDK_KEY_ISO_Level5_Lock (0xFE13)
- Qt::Key_AltGr (0x01001103
- Qt::Key_Mode_switch (0x0100117E)
"CapsLock"The Caps Lock key. Toggles the capital character lock on and off for subsequent input.VK_CAPITAL (0x14)kVK_CapsLock (0x39)GDK_KEY_Caps_Lock (0xFFE5)
- Qt::Key_CapsLock (0x01000024)		KEYCODE_CAPS_LOCK (115)
"Control"The Control, Ctrl, or Ctl key. Allows typing control characters.VK_CONTROL (0x11)
- VK_LCONTROL (0xA2)
- VK_RCONTROL (0xA3)		kVK_Control (0x3B)
- kVK_RightControl (0x3E)		GDK_KEY_Control_L (0xFFE3)
- GDK_KEY_Control_R (0xFFE4)
- Qt::Key_Control (0x01000021)		KEYCODE_CTRL_LEFT (113)
- KEYCODE_CTRL_RIGHT (114)
"Fn"The Fn (Function modifier) key. Used to allow generating function key (F1-F15, for instance) characters on keyboards without a dedicated function key area. Often handled in hardware so that events aren't generated for this key.kVK_Function (0x3F)KEYCODE_FUNCTION (119)
"FnLock"The FnLock or F-Lock (Function Lock) key.Toggles the function key mode described by "Fn" on and off. Often handled in hardware so that events aren't generated for this key.
"Hyper" [4]The Hyper key.GDK_KEY_Hyper_L (0xFFED)
- GDK_KEY_Hyper_R (0xFFEE)
- Qt::Key_Hyper_L (0x01000056)
- Qt::Key_Hyper_R (0x01000057)
"Meta" [1]The Meta key. Allows issuing special command inputs. This is the Windows logo key, or the Command or ⌘ key on Mac keyboards.VK_LWIN (0x5B)
- VK_RWIN (0x5C)		kVK_Command (0x37)
- kVK_RightCommand (0x36)		GDK_KEY_Meta_L (0xFFE7)
- GDK_KEY_Meta_R (0xFFE8)
- Qt::Key_Meta (0x01000022)		KEYCODE_META_LEFT (117)
- KEYCODE_META_RIGHT (118)
"NumLock"The NumLock (Number Lock) key. Toggles the numeric keypad between number entry some other mode (often directional arrows).VK_NUMLOCK (0x90)GDK_KEY_Num_Lock (0xFF7F)
- Qt::Key_NumLock (0x01000025)		KEYCODE_NUM_LOCK (143)
"ScrollLock" [2]The Scroll Lock key. Toggles beteen scrolling and cursor movement modes.VK_SCROLL (0x91)GDK_KEY_Scroll_Lock (0xFF14)
- Qt::Key_ScrollLock (0x01000026)		KEYCODE_SCROLL_LOCK (116)
"Shift"The Shift key. Modifies keystrokes to allow typing upper (or other) case letters, and to support typing punctuation and other special characters.VK_SHIFT (0x10)
- VK_LSHIFT (0xA0)
- VK_RSHIFT (0xA1)		kVK_Shift (0x38)
- kVK_RightShift (0x3C)		GDK_KEY_Shift_L (0xFFE1)
- GDK_KEY_Shift_R (0xFFE2)
- Qt::Key_Shift (0x01000020)		KEYCODE_SHIFT_LEFT (59)
- KEYCODE_SHIFT_RIGHT (60)
"Super" [4]The Super key.GDK_KEY_Super_L (0xFFEB)
- GDK_KEY_Super_R (0xFFEC)
- Qt::Key_Super_L (0x01000053)
- Qt::Key_Super_R (0x01000054)
"Symbol"The Symbol modifier key (found on certain virtual keyboards).KEYCODE_SYM (63) [3]
"SymbolLock"The Symbol Lock key.
- -

[1] In Internet Explorer (tested on release 9 and 11), as well as in all versions of Firefox, the Windows key is reported as "OS" instead of as "Meta". This will be changed in Firefox per {{bug(1232918)}}. Until that's fixed, these keys are returned as "OS" by Firefox: VK_LWIN (0x5B) and VK_RWIN (0x5C) on Windows, and GDK_KEY_Super_L (0xFFEB), GDK_KEY_Super_R (0xFFEC), GDK_KEY_Hyper_L (0xFFED), and GDK_KEY_Hyper_R (0xFFEE) on Linux.

- -

[2] Internet Explorer (tested on release 9 and 11) reports "Scroll" instead of "ScrollLock" for the Scroll Lock key.

- -

[3] Firefox did not add support for the Symbol key until Firefox 37.

- -

[4] Firefox generates the key value "OS" for the Super and Hyper keys, instead of "Super" and "Hyper".

- -

[5] Chrome 67 and Firefox 63 now correctly interpret the right Alt key for keyboard layouts which map that key to AltGr. See Firefox bug {{bug(900750)}} and Chrome bug 25503 for further details.

- -

Whitespace keys

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Enter"The Enter or ↵ key (sometimes labeled Return).VK_RETURN (0x0D)kVK_Return (0x24)
- kVK_ANSI_KeypadEnter (0x4C)
- kVK_Powerbook_KeypadEnter (0x34)		GDK_KEY_Return (0xFF0D)
- GDK_KEY_KP_Enter (0xFF8D)
- GDK_KEY_ISO_Enter (0xFE34)
- GDK_KEY_3270_Enter (0xFD1E)
- Qt::Key_Return (0x01000004)
- Qt::Key_Enter (0x01000005)		KEYCODE_ENTER (66)
- KEYCODE_NUMPAD_ENTER (160)
- KEYCODE_DPAD_CENTER (23)
"Tab"The Horizontal Tab key, Tab.VK_TAB (0x09)kVK_Tab (0x30)GDK_KEY_Tab (0xFF09)
- GDK_KEY_KP_Tab (0xFF89)
- GDK_KEY_ISO_Left_Tab (0xFE20)
- Qt::Key_Tab (0x01000001)		KEYCODE_TAB (61)
" " [1]The space key, Space Bar.VK_SPACE (0x20)kVK_Space (0x31) -

GDK_KEY_space (0x20)
- GDK_KEY_KP_Space (0xFF80)
- Qt::Key_Space (0x20)

- 		KEYCODE_SPACE (62)
- -

[1] Older browsers may return "Spacebar" instead of " " for the Space Bar key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"ArrowDown" [1]The down arrow key.VK_DOWN (0x28)kVK_DownArrow (0x7D)GDK_KEY_Down (0xFF54)
- GDK_KEY_KP_Down (0xFF99)
- Qt::Key_Down (0x01000015)		KEYCODE_DPAD_DOWN (20)
"ArrowLeft" [1]The left arrow key.VK_LEFT (0x25)kVK_LeftArrow (0x7B)GDK_KEY_Left (0xFF51)
- GDK_KEY_KP_Left (0xFF96)
- Qt::Key_Left (0x01000012)		KEYCODE_DPAD_LEFT (21)
"ArrowRight" [1]The right arrow key.VK_RIGHT (0x27)kVK_RightArrow (0x7C)GDK_KEY_Right (0xFF53)
- GDK_KEY_KP_Right (0xFF98)
- Qt::Key_Right (0x01000014)		KEYCODE_DPAD_RIGHT (22)
"ArrowUp" [1]The up arrow key.VK_UP (0x26)kVK_UpArrow (0x7E)GDK_KEY_Up (0xFF52)
- GDK_KEY_KP_Up (0xFF97)
- Qt::Key_Up (0x01000013)		KEYCODE_DPAD_UP (19)
"End"The End key. Moves to the end of content.VK_END (0x23)kVK_End (0x77)GDK_KEY_End (0xFF57)
- GDK_KEY_KP_End (0xFF9C)
- Qt::Key_End (0x01000011)		KEYCODE_MOVE_END (123)
"Home"The Home key. Moves to the start of content.VK_HOME (0x24)kVK_Home (0x73)GDK_KEY_Home (0xFF50)
- GDK_KEY_KP_Home (0xFF95)
- Qt::Key_Home (0x01000010)		KEYCODE_MOVE_HOME (122)
"PageDown"The Page Down (or PgDn) key. Scrolls down or displays the next page of content.VK_NEXT (0x22)kVK_PageDown (0x79)GDK_KEY_Page_Down (0xFF56)
- GDK_KEY_KP_Page_Down (0xFF9B)
- Qt::Key_PageDown (0x01000017)		KEYCODE_PAGE_DOWN (93)
"PageUp"The Page Up (or PgUp) key. Scrolls up or displays the previous page of content.VK_PRIOR (0x21)kVK_PageUp (0x74)GDK_KEY_Page_Up (0xFF55)
- GDK_KEY_KP_Page_Up (0xFF9A)
- Qt::Key_PageUp (0x01000016)		KEYCODE_PAGE_UP (92)
- -

[1] Internet Explorer, Edge (16 and earlier), and Firefox (36 and earlier) use "Left", "Right", "Up", and "Down" instead of "ArrowLeft", "ArrowRight", "ArrowUp", and "ArrowDown".

- -

Editing keys

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Backspace"The Backspace key. This key is labeled Delete on Mac keyboards.VK_BACK (0x08)kVK_Delete (0x33)GDK_KEY_BackSpace (0xFF08)
- Qt::Key_Backspace (0x01000003)		KEYCODE_DEL (67)
"Clear"The Clear key. Removes the currently selected input.VK_CLEAR (0x0C)
- VK_OEM_CLEAR (0xFE)		kVK_ANSI_KeypadClear (0x47)GDK_KEY_Clear (0xFF0B)
- Qt::Key_Clear (0x0100000B)		KEYCODE_CLEAR (28)
"Copy"The Copy key (on certain extended keyboards).APPCOMMAND_COPYGDK_KEY_Copy (0x1008FF57)
- Qt::Key_Copy (0x010000CF)
"CrSel" [3]The Cursor Select key, CrSel.VK_CRSEL (0xF7)GDK_KEY_3270_CursorSelect (0xFD1C)
"Cut"The Cut key (on certain extended keyboards).APPCOMMAND_CUTGDK_KEY_Cut (0x1008FF58)
- Qt::Key_Cut (0x010000D0)
"Delete" [2]The Delete key, Del.VK_DELETE (0x2E)kVK_ForwardDelete (0x75) [1]GDK_KEY_Delete (0xFFFF)
- GDK_KEY_KP_Delete (0xFF9F)
- Qt::Key_Delete (0x01000007)		KEYCODE_FORWARD_DEL (112)
"EraseEof"Erase to End of Field. Deletes all characters from the current cursor position to the end of the current field.VK_EREOF (0xF9)GDK_KEY_3270_ExSelect (0xFD1B)
"ExSel" [4]The ExSel (Extend Selection) key.VK_EXSEL (0xF8)GDK_KEY_3270_ExSelect (0xFD1B)
"Insert"The Insert key, Ins. Toggles  between inserting and overwriting text.VK_INSERT (0x2D)GDK_KEY_Insert (0xFF63)
- GDK_KEY_KP_Insert (0xFF9E)
- Qt::Key_Insert (0x01000006)		KEYCODE_INSERT (124)
"Paste"Paste from the clipboard.APPCOMMAND_PASTEGDK_KEY_Paste (0x1008FF6D)
- Qt::Key_Paste (0x010000E2)
"Redo"Redo the last action.APPCOMMAND_REDOGDK_KEY_Redo (0xFF66)
"Undo"Undo the last action.APPCOMMAND_UNDOGDK_KEY_Undo (0xFF65)
- -

[1] On keyboards without a dedicated Del key, the Mac generates the "Delete" value when Fn is pressed in tandem with Delete (which is Backspace on other platforms).

- -

[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier use "Del" instead of "Delete" for the Del key.

- -

[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value "Crsel" instead of "CrSel" when the CrSel key is pressed.

- -

[4] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value "Exsel" instead of "ExSel" when the ExSel key is pressed.

- -

UI keys

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Accept"The Accept, Commit, or OK key or button. Accepts the currently selected option or input method sequence conversion.VK_ACCEPT (0x1E)KEYCODE_DPAD_CENTER (23)
"Again"The Again key. Redoes or repeats a previous action.GDK_KEY_Redo (0xFF66)
"Attn" [4]The Attn (Attention) key.VK_OEM_ATTN (0xF0)GDK_KEY_3270_Attn (0xFD0E)
"Cancel" [1]The Cancel key.GDK_KEY_Cancel (0xFF69)
"ContextMenu" [3]Shows the context menu. Typically found between the Windows (or OS) key and the Control key on the right side of the keyboard.VK_APPS (0x5D)kVK_PC_ContextMenu (0x6E)GDK_KEY_Menu (0xFF67)
- Qt::Key_Menu (0x01000055)		KEYCODE_MENU (82)
"Escape" [2]The Esc (Escape) key. Typically used as an exit, cancel, or "escape this operation" button. Historically, the Escape character was used to signal the start of a special control sequence of characters called an "escape sequence."VK_ESCAPE (0x1B)kVK_Escape (0x35)GDK_KEY_Escape (0xFF1B)
- Qt::Key_Escape (0x01000000)		KEYCODE_ESCAPE (111)
"Execute"The Execute key.VK_EXECUTE (0x2B)Qt::Key_Execute (0x01020003)
"Find"The Find key. Opens an interface (typically a dialog box) for performing a find/search operation.APPCOMMAND_FINDGDK_KEY_Find (0xFF68)
"Finish" [5]The Finish key.VK_OEM_FINISH (0xF1)
"Help"The Help key. Opens or toggles the display of help information.VK_HELP (0x2F)
- APPCOMMAND_HELP		kVK_Help (0x72)GDK_KEY_Help (0xFF6A)
- Qt::Key_Help (0x01000058)		KEYCODE_HELP (259)
"Pause"The Pause key. Pauses the current application or state, if applicable. -

Note : This shouldn't be confused with the "MediaPause" key value, which is used for media controllers, rather than to control applications and processes.

- 		VK_PAUSE (0x13)GDK_KEY_Pause (0xFF13)
- GDK_KEY_Break (0xFF6B)
- Qt::Key_Pause (0x01000008)		KEYCODE_BREAK (121)
"Play"The Play key. Resumes a previously paused application, if applicable. -

Note : This shouldn't be confused with the "MediaPlay" key value, which is used for media controllers, rather than to control applications and processes.

- 		VK_PLAY (0xFA)GDK_KEY_3270_Play (0xFD16)
- Qt::Key_Play (0x01020005)
"Props"The Props (Properties) key.
"Select"The Select key.VK_SELECT (0x29)GDK_KEY_Select (0xFF60)KEYCODE_BUTTON_SELECT (109)
"ZoomIn" [6]The ZoomIn key.GDK_KEY_ZoomIn (0x1008FF8B)
- Qt::Key_ZoomIn (0x010000F6)		KEYCODE_ZOOM_IN (168)
"ZoomOut" [6]The ZoomOut key.GDK_KEY_ZoomOut (0x1008FF8C)
- Qt::Key_ZoomOut (0x010000F7)		KEYCODE_ZOOM_OUT (169)
- -

[1] In Google Chrome 52, the Cancel key incorrectly returns the key code "Pause". This is fixed in Chrome 53. See Chrome bug 612749 for details.

- -

[2] In Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, the Esc key returns "Esc" instead of "Escape".

- -

[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier report "Apps" instead of "ContextMenu" for the context menu key.

- -

[4] The Attn key generates the key code "Unidentified" on Internet Explorer (tested on release 9 and 11). Firefox and Google Chrome report the same, unless the Japanese keyboard layout is in effect, in which case it generates "KanaMode" instead.

- -

[5] The Finish key gemerates the key code "Unidentified" on Internet Explorer (tested on release 9 and 11). Firefox reports the same, unless the Japanese keyboard layout is in effect, in which case it generates "Katakana" instead.

- -

[6] Firefox didn't support the "ZoomIn" and "ZoomOut" keys until Firefox 37.

- -

Device keys

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"BrightnessDown"The Brightness Down key. Typically used to reduce the brightness of the display.GDK_KEY_MonBrightnessDown (0x1008FF03)
- Qt::Key_MonBrightnessDown (0x010000B3)		KEYCODE_BRIGHTNESS_DOWN (220)
"BrightnessUp"The Brightness Up key. Typically increases the brightness of the display.GDK_KEY_MonBrightnessUp (0x1008FF02)
- Qt::Key_MonBrightnessUp (0x010000B2)		KEYCODE_BRIGHTNESS_UP (221)
"Eject"The Eject key. Ejects removable media (or toggles an optical storage device tray open and closed).GDK_KEY_Eject (0x1008FF2C)
- Qt::Key_Eject (0x010000B9)		KEYCODE_MEDIA_EJECT (129)
"LogOff" [2]The LogOff key.GDK_KEY_LogOff (0x1008FF61)
- Qt::Key_LogOff (0x010000D9)
"Power"The Power button or key, to toggle power on and off. -

Note : Not all systems pass this key through to to the user agent.

- 		KEYCODE_POWER (26)
"PowerOff"The PowerOff or PowerDown key. Shuts off the system.GDK_KEY_PowerDown (0x1008FF21)
- GDK_KEY_PowerOff (0x1008FF2A)
- Qt::Key_PowerDown (0x0100010B)
- Qt::Key_PowerOff (0x010000B7)
"PrintScreen"The PrintScreen or PrtScr key. Sometimes SnapShot. Captures the screen and prints it or saves it to disk.VK_SNAPSHOT (0x2C)GDK_KEY_3270_PrintScreen (0xFD1D)
- GDK_KEY_Print (0xFF61)
- GDK_KEY_Sys_Req (0xFF15)
- Qt::Key_Print (0x01000009)
- Qt::Key_SysReq (0x0100000A)		KEYCODE_SYSRQ (120)
"Hibernate" [2]The Hibernate key. This saves the state of the computer to disk and then shuts down; the computer can be returned to its previous state by restoring the saved state information.GDK_KEY_Hibernate (0x1008FFA8)
- Qt::Key_Hibernate (0x01000108)
"Standby" [1]The Standby key; also known as Suspend or Sleep. This turns off the display and puts the computer in a low power consumption mode, without completely powering off.VK_SLEEP (0x5F)GDK_KEY_Standby (0x1008FF10)
- GDK_KEY_Suspend (0x1008FFA7)
- GDK_KEY_Sleep (0x1008FF2F)
- Qt::Key_Standby (0x01000093)
- Qt::Key_Suspend (0x0100010C)
- Qt::Key_Sleep (0x01020004)		KEYCODE_SLEEP (223)
"WakeUp" [2]The WakeUp key; used to wake the computer from the hibernation or standby modes.GDK_KEY_WakeUp (0x1008FF2B)
- Qt::Key_WakeUp (0x010000B8)		KEYCODE_WAKEUP (224)
- -

[1] The Standby key is not supported by Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, so it is reported as "Unidentified".

- -

[2] Prior to Firefox 37, this key generated the value "Unidentified".

- -

IME and composition keys

- -

Keys used when using an Input Method Editor (IME) to input text which can't readily be entered by simple keypresses, such as text in languages such as those which have more graphemes than there are character entry keys on the keyboard; common examples include Chinese, Japanese, Korean, and Hindi.

- -

Some keys are common across multiple languages, while others exist only on keyboards targeting specific languages. In addition, not all keyboards have all of these keys.

- -

Common IME keys

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"AllCandidates"The All Candidates key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input.GDK_KEY_MultipleCandidate (0xFF3D
- Qt::Key_MultipleCandidate (0x0100113D)
"Alphanumeric"The Alphanumeric key.VK_OEM_ATTN (0xF0)GDK_KEY_Eisu_Shift (0xFF2F)
- GDK_KEY_Eisu_toggle (0xFF30)
- Qt::Key_Eisu_Shift (0x0100112f)
- Qt::Key_Eisu_toggle (0x01001130)
"CodeInput"The Code Input key, which enables code input mode, which lets the user enter characters by typing their code points (their Unicode character numbers, typically).GDK_KEY_Codeinput (0xFF37)
- Qt::Key_Codeinput (0x01001137)
"Compose"The Compose key.GDK_KEY_Multi_key (0xFF20) [1]
- Qt::Key_Multi_key (0x01001120)
"Convert" [4]The Convert key, which instructs the IME to convert the current input method sequence into the resulting character.VK_CONVERT (0x1C)GDK_KEY_Henkan (0xFF23)
- Qt::Key_Henkan (0x01001123)		KEYCODE_HENKAN (214)
"Dead"A dead "combining" key; that is, a key which is used in tandem with other keys to generate accented and other modified characters. If pressed by itself, it doesn't generate a character. If you wish to identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.See {{anch("Dead keycodes for Linux")}} below
"FinalMode"The Final (Final Mode) key is used on some Asian keyboards to enter final mode when using IMEs.VK_FINAL (0x18)
"GroupFirst"Switches to the first character group on an ISO/IEC 9995 keyboard. Each key may have multiple groups of characters, each in its own column. Pressing this key instructs the device to interpret keypresses as coming from the first column on subsequent keystrokes.GDK_KEY_ISO_First_Group (0xFE0C)
"GroupLast"Switches to the last character group on an ISO/IEC 9995 keyboard.GDK_KEY_ISO_Last_Group (0xFE0E)
"GroupNext" [4]Switches to the next character group on an ISO/IEC 9995 keyboard.GDK_KEY_ISO_Next_Group (0xFE08)KEYCODE_LANGUAGE_SWITCH (204)
"GroupPrevious"Switches to the previous character group on an ISO/IEC 9995 keyboard.GDK_KEY_ISO_Prev_Group (0xFE0A)
"ModeChange" [5]The Mode Change key. Toggles or cycles among input modes of IMEs.VK_MODECHANGE (0x1F)GDK_KEY_Mode_switch (0xFF7E)
- GDK_KEY_script_switch (0xFF7E)
- Qt::Key_Mode_switch (0x0100117E)		KEYCODE_SWITCH_CHARSET (95)
"NextCandidate"The Next Candidate function key. Selects the next possible match for the ongoing input.
"NonConvert" [2]The NonConvert ("Don't convert") key. This accepts the current input method sequence without running conversion when using an IME.VK_NONCONVERT (0x1D)GDK_KEY_Muhenkan (0xFF22)
- Qt::Key_Muhenkan (0x01001122)
-  		KEYCODE_MUHENKAN (213)
"PreviousCandidate"The Previous Candidate key. Selects the previous possible match for the ongoing input.GDK_KEY_PreviousCandidate (0xFF3E)
- Qt::Key_PreviousCandidate (0x0100113E)
"Process" [3]The Process key. Instructs the IME to process the conversion.VK_PROCESSKEY (0xE5)
"SingleCandidate" [4]The Single Candidate key. Enables single candidate mode (as opposed to multi-candidate mode); in this mode, only one candidate is displayed at a time.GDK_KEY_SingleCandidate (0xFF3C)
- Qt::Key_SingleCandidate (0x0100113C)
- -

[1] On the X Window System, the Compose key is called the Multi key.

- -

[2] The NonConvert key is reported as "Nonconvert" instead of the correct "NonConvert" by Internet Explorer (tested on release 9 and 11) and Firefox versions 36 and earlier.

- -

[3] The Process key currently returns "Unidentified" in Firefox and Internet Explorer. Google Chrome returns the value of the key as if IME were not in use.

- -

[4] Prior to Firefox 37, these keys were "Unidentified".

- -

[5] Firefox generates the key value "AltGraph" instead of "ModeChange".

- -

Korean keyboards only

- -

These keys are only available on Korean keyboards. There are other keys defined by various platforms for Korean keyboards, but these are the most common and are the ones identified by the UI Events specification.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"HangulMode"The Hangul (Korean character set) mode key, which toggles between Hangul and English entry modes.VK_HANGUL (0x15) [1]GDK_KEY_Hangul (0xFF31)
- Qt::Key_Hangul (0x01001131)
"HanjaMode"Selects the Hanja mode, for converting Hangul characters to the more specific Hanja characters.VK_HANJA (0x19) [1]GDK_KEY_Hangul_Hanja (0xFF34)
- Qt::Key_Hangul_Hanja (0x01001134)
"JunjaMode"Selects the Junja mode, in which Korean is represented using single-byte Latin characters.VK_JUNJA (0x17)GDK_KEY_Hangul_Jeonja (0xFF38)
- Qt::Key_Hangul_Jeonja (0x01001138)
- -

[1] VK_HANGUL and VK_KANA share the same numeric key value on Windows, as do VK_HANJA and VK_KANJI.

- -

Japanese keyboards only

- -

These keys are only available on Japanese keyboards.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Eisu" [1]The Eisu key. This key's purpose is defined by the IME, but may be used to close the IME.kVK_JIS_Eisu (0x66)GDK_KEY_Eisu_toggle (0xFF2F)
- Qt::Key_Eisu_toggle (0x01001130)		KEYCODE_EISU (212)
"Hankaku" [3]The Hankaku (half-width characters) key.VK_OEM_AUTO (0xF3)GDK_KEY_Hankaku (0xFF29)
- Qt::Key_Hankaku (0x01001129)
"Hiragana"The Hiragana key; selects Kana characters mode.VK_OEM_COPY (0xF2)GDK_KEY_Hiragana (0xFF25)
- Qt::Key_Hiragana (0x01001125)
"HiraganaKatakana" [6]Toggles between the Hiragana and Katakana writing systems.GDK_KEY_Hiragana_Katakana (0xFF27)
- Qt::Key_Hiragana_Katakana (0x01001127)		KEYCODE_KATAKANA_HIRAGANA (215)
"KanaMode"The Kana Mode (Kana Lock) key.VK_KANA (0x15) [2]
- VK_ATTN (0xF6)		GDK_KEY_Kana_Lock (0xFF2D)
- GDK_KEY_Kana_Shift (0xFF2E)
- Qt::Key_Kana_Lock (0x0100112D)
- Qt::Key_Kana_Shift (0x0100112E)
"KanjiMode"The Kanji Mode key. Enables entering Japanese text using the ideographic characters of Chinese origin.VK_KANJI [2]kVK_JIS_Kana (0x68)GDK_KEY_Kanji (0xFF21)
- Qt::Key_Kanji (0x01001121)		KEYCODE_KANA (218)
"Katakana"The Katakana key.VK_OEM_FINISH (0xF1)GDK_KEY_Katakana (0xFF26)
- Qt::Key_Katakana (0x01001126)
"Romaji" [5]The Romaji key; selects the Roman character set.VK_OEM_BACKTAB (0xF5)GDK_KEY_Romaji (0xFF24)
- Qt::Key_Romaji (0x01001124)
"Zenkaku" [4]The Zenkaku (full width) characters key.VK_OEM_ENLW (0xF4)GDK_KEY_Zenkaku (0xFF28)
- Qt::Key_Zenkaku (0x01001128)
"ZenkakuHanaku" [6]The Zenkaku/Hankaku (full width/half width) toggle key.GDK_KEY_Zenkaku_Hankaku (0xFF2A)
- Qt::Zenkaku_Hankaku (0x0100112A)		 -

KEYCODE_ZENKAKU_HANKAKU (211)

-
- -

[1] Prior to Firefox 37, the Eisu key was mapped to "RomanCharacters" by mistake.

- -

[2] VK_HANGUL and VK_KANA share the same numeric key value on Windows, as do VK_HANJA and VK_KANJI.

- -

[3] Prior to Firefox 37, the Hankaku (half-width) key generated the key value "HalfWidth" on Firefox. Also, this key generates the value "Unidentified" on Internet Explorer (tested on release 9 and 11).

- -

[4] Internet Explorer (tested on release 9 and 11) reports "Unidentified" for the Zenkaku key; Firefox 36 and earlier identify this key as "FullWidth" on Japanese keyboard layouts and "Unidentified" on all other keyboard layouts. Firefox 37 and later, and all versions of Google Chrome, correctly return "Zenkaku".

- -

[5] "Unidentified" in Internet Explorer (tested on release 9 and 11). Firefox 36 and earlier identify the Romaji key as "RomanCharacters" on Japanese keyboards and "Unidentified" for other keyboards; this is corrected to return "Romaji" in Firefox 37 and later.

- -

[6] This key is reported as "Unidentified" prior to Firefox 37.

- -

Dead keycodes for Linux

- -

Linux generates accented characters using special dead keys; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the  {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.

- -

You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK

- -

The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CompositionEvent.data valueSymbolComments
GDK_KEY_dead_grave (0xFE50)
- Qt::Key_Dead_Grave (0x01001250)		`
GDK_KEY_dead_acute (0xFE51)
- Qt::Key_Dead_Acute (0x01001251)		´
GDK_KEY_dead_circumflex (0xFE52)
- Qt::Key_Dead_Circumflex (0x01001252)		ˆ
GDK_KEY_dead_tilde (0xFE53)
- Qt::Key_Dead_Tilde (0x01001253)		˜
GDK_KEY_dead_perispomeni (0xFE53) ͂
GDK_KEY_dead_macron (0xFE54)
- Qt::Key_Dead_Macron (0x01001254)		¯
GDK_KEY_dead_breve (0xFE55)
- Qt::Key_Dead_Breve (0x01001255)		˘
GDK_KEY_dead_abovedot (0xFE56)
- Qt::Key_Dead_Abovedot (0x01001256)		˙
GDK_KEY_dead_diaeresis (0xFE57)
- Qt::Key_Dead_Diaeresis (0x01001257)		¨Also called an umlaut.
GDK_KEY_dead_abovering (0xFE58)
- Qt::Key_Dead_Abovering (0x01001258)		˚
GDK_KEY_dead_doubleacute (0xFE59)
- Qt::Key_Dead_Doubleacute (0x01001259)		˝
GDK_KEY_dead_caron (0xFE5A)
- Qt::Key_Dead_Caron (0x0100125A)		ˇAlso called a háček; used in Czech among other languages.
GDK_KEY_dead_cedilla (0xFE5B)
- Qt::Key_Dead_Cedilla (0x0100125B)		¸
GDK_KEY_dead_ogonek (0xFE5C)
- Qt::Key_Dead_Ogonek (0x0100125C)		˛Also called a nosinė; used in Polish and Old Irish.
GDK_KEY_dead_iota (0xFE5D)
- Qt::Key_Dead_Iota (0x0100125D)		 ͅIota subscript.
GDK_KEY_dead_voiced_sound (0xFE5E)
- Qt::Key_Dead_Voiced_Sound (0x0100125E)		゙
GDK_KEY_dead_semivoiced_sound (0xFE5F)
- Qt::Key_Dead_Semivoiced_Sound (0x0100125F)		゚
GDK_KEY_dead_belowdot (0xFE60)
- Qt::Key_Dead_Belowdot (0x01001260)		̣̣
GDK_KEY_dead_hook (0xFE61)
- Qt::Key_Dead_Hook (0x01001261)		  ̡
GDK_KEY_dead_horn (0xFE62)
- Qt::Key_Dead_Horn (0x01001262)		 ̛
GDK_KEY_dead_stroke (0xFE63) ̶̶
GDK_KEY_dead_abovecomma (0xFE64) ̓̓
GDK_KEY_dead_psili (0xFE64) ᾿
GDK_KEY_dead_abovereversedcomma (0xFE65)ʽ
GDK_KEY_dead_dasia (0xFE65)῾
GDK_KEY_dead_doublegrave (0xFE66) ̏
GDK_KEY_dead_belowring (0xFE67)˳
GDK_KEY_dead_belowmacron (0xFE68) ̱
GDK_KEY_dead_belowcircumflex (0xFE69)ꞈ
GDK_KEY_dead_belowtilde (0xFE6A)̰
GDK_KEY_dead_belowbreve (0xFE6B)̮
GDK_KEY_dead_belowdiaeresis (0xFE6C) ̤
GDK_KEY_dead_invertedbreve (0xFE6D)̯
GDK_KEY_dead_belowcomma (0xFE6E)̦
GDK_KEY_dead_currency (0xFE6F)
GDK_KEY_dead_a (0xFE80)
GDK_KEY_dead_A (0xFE81)
GDK_KEY_dead_e (0xFE82)
GDK_KEY_dead_E (0xFE83)
GDK_KEY_dead_i (0xFE84)
GDK_KEY_dead_I (0xFE85)
GDK_KEY_dead_o (0xFE86)
GDK_KEY_dead_O (0xFE87)
GDK_KEY_dead_u (0xFE88)
GDK_KEY_dead_U (0xFE89)
GDK_KEY_dead_small_schwa (0xFE8A)ə
GDK_KEY_dead_capital_schwa (0xFE8B)Ə
GDK_KEY_dead_greek (0xFE8C)
- -

Function keys

- -

While various platforms support different numbers of the general-purpose function keys, such as F1-F12 (or F1-F10, or F1-F15, or...), the first few are specifically defined as follows. If more function keys are available, their names continue the pattern here by continuing to increment the numeric portion of each key's name, so that, for example, "F24" is a valid key value.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key valueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"F1"The first general-purpose function key, F1.VK_F1 (0x70)kVK_F1 (0x7A)GDK_KEY_F1 (0xFFBE)
- GDK_KEY_KP_F1 (0xFF91)
- Qt::Key_F1 (0x01000030)		KEYCODE_F1 (131)
"F2"The F2 key.VK_F2 (0x71)kVK_F2 (0x78)GDK_KEY_F2 (0xFFBF)
- GDK_KEY_KP_F2 (0xFF92)
- Qt::Key_F2 (0x01000031)		KEYCODE_F2 (132)
"F3"The F3 key.VK_F3 (0x72)kVK_F3 (0x63)GDK_KEY_F3 (0xFFC0)
- GDK_KEY_KP_F3 (0xFF93)
- Qt::Key_F3 (0x01000032)		KEYCODE_F3 (133)
"F4"The F4 key.VK_F4 (0x73)kVK_F4 (0x76)GDK_KEY_F4 (0xFFC1)
- GDK_KEY_KP_F4 (0xFF94)
- Qt::Key_F4 (0x01000033)		KEYCODE_F4 (134)
"F5"The F5 key.VK_F5 (0x74)kVK_F5 (0x60)GDK_KEY_F5 (0xFFC2)
- Qt::Key_F5 (0x01000034)		KEYCODE_F5 (135)
"F6"The F6 key.VK_F6 (0x75)kVK_F6 (0x61)GDK_KEY_F6 (0xFFC3)
- Qt::Key_F6 (0x01000035)		KEYCODE_F6 (136)
"F7"The F7 key.VK_F7 (0x76)kVK_F7 (0x62)GDK_KEY_F7 (0xFFC4)
- Qt::Key_F7 (0x01000036)		KEYCODE_F7 (137)
"F8"The F8 key.VK_F8 (0x77)kVK_F8 (0x64)GDK_KEY_F8 (0xFFC5)
- Qt::Key_F8 (0x01000037)		KEYCODE_F8 (138)
"F9"The F9 key.VK_F9 (0x78)kVK_F9 (0x65)GDK_KEY_F9 (0xFFC6)
- Qt::Key_F9 (0x01000038)		KEYCODE_F9 (139)
"F10"The F10 key.VK_F10 (0x79)kVK_F10 (0x6D)GDK_KEY_F10 (0xFFC7)
- Qt::Key_F10 (0x01000039)		KEYCODE_F10 (140)
"F11"The F11 key.VK_F11 (0x7A)kVK_F11 (0x67)GDK_KEY_F11 (0xFFC8)
- Qt::Key_F11 (0x0100003A)		KEYCODE_F11 (141)
"F12"The F12 key.VK_F12 (0x7B)kVK_F12 (0x6F)GDK_KEY_F12 (0xFFC9)
- Qt::Key_F12 (0x0100003B)		KEYCODE_F12 (142)
"F13"The F13 key.VK_F13 (0x7C)kVK_F13 (0x69)GDK_KEY_F13 (0xFFCA)
- Qt::Key_F13 (0x0100003C)		KEYCODE_F13
"F14"The F14 key.VK_F14 (0x7D)kVK_F14 (0x6B)GDK_KEY_F14 (0xFFCB)
- Qt::Key_F14 (0x0100003D)		KEYCODE_F14
"F15"The F15 key.VK_F15 (0x7E)kVK_F15 (0x71)GDK_KEY_F15 (0xFFCC)
- Qt::Key_F15 (0x0100003E)		KEYCODE_F15
"F16"The F16 key.VK_F16 (0x7F)kVK_F16 (0x6A)GDK_KEY_F16 (0xFFCD)
- Qt::Key_F16 (0x0100003F)		KEYCODE_F16
"F17"The F17 key.VK_F17 (0x80)kVK_F17 (0x40)GDK_KEY_F17 (0xFFCE)
- Qt::Key_F17 (0x01000040)		KEYCODE_F17
"F18"The F18 key.VK_F18 (0x81)kVK_F18 (0x4F)GDK_KEY_F18 (0xFFCF)
- Qt::Key_F18 (0x01000041)		KEYCODE_F18
"F19"The F19 key.VK_F19 (0x82)kVK_F19 (0x50)GDK_KEY_F19 (0xFFD0)
- Qt::Key_F19 (0x01000042)		KEYCODE_F19
"F20"The F20 key.VK_F20 (0x83)kVK_F20 (0x5A)GDK_KEY_F20 (0xFFD1)
- Qt::Key_F20 (0x01000043)		KEYCODE_F20
"Soft1"The first general-purpose virtual function key.Qt::Key_Context1 (0x01100000)
"Soft2"The second general-purpose virtual function key.Qt::Key_Context2 (0x01100001)
"Soft3"The third general-purpose virtual function key.Qt::Key_Context3 (0x01100002)
"Soft4"The fourth general-purpose virtual function key.Qt::Key_Context4 (0x01100003)
- -

Phone keys

- -

These keys represent buttons which commonly exist on modern smartphones.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"AppSwitch"Presents a list of recently-used applications which lets the user change apps quickly.KEYCODE_APP_SWITCH (181)
"Call"The Call key; dials the number which has been entered.Qt::Key_Call (0x01100004)KEYCODE_CALL (5)
"Camera"The Camera key; activates the camera.Qt::Key_Camera (0x01100020)KEYCODE_CAMERA (27)
"CameraFocus"The Focus key; focuses the camera.Qt::Key_CameraFocus (0x01100021)KEYCODE_FOCUS (80)
"EndCall"The End Call or Hang Up button.Qt::Key_Hangup (0x01100005)KEYCODE_ENDCALL (6)
"GoBack"The Back button.KEYCODE_BACK (4)
"GoHome" [1]The Home button, which takes the user to the phone's main screen (usually an application launcher).KEYCODE_HOME (3)
"HeadsetHook"The Headset Hook key. This is typically actually a button on the headset which is used to hang up calls and play or pause media.Qt::Key_ToggleCallHangup (0x01100007)KEYCODE_HEADSETHOOK (79)
"LastNumberRedial"The Redial button, which redials the last-called number.Qt::Key_LastNumberRedial (0x01100009)
"Notification"The Notification key.KEYCODE_NOTIFICATION (83)
"MannerMode"A button which cycles among the notification modes: silent, vibrate, ring, and so forth.KEYCODE_MANNER_MODE (205)
"VoiceDial"The Voice Dial key. Initiates voice dialing.Qt::Key_VoiceDial (0x01100008)KEYCODE_VOICE_ASSIST (231)
- -

[1] Prior to Firefox 37, the Home button generated a key code of "Exit". Starting in Firefox 37, the button generates the key code "MozHomeScreen".

- -

Multimedia keys

- -

The multimedia keys are extra buttons or keys for controlling media devices, found on some keyboards.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"ChannelDown"Switches to the previous channel.APPCOMMAND_MEDIA_CHANNEL_DOWNQt::Key_ChannelDown (0x01000119)KEYCODE_CHANNEL_DOWN (167)
"ChannelUp"Switches to the next channel.APPCOMMAND_MEDIA_CHANNEL_UPQt::Key_ChannelUp (0x01000118)KEYCODE_CHANNEL_UP (166)
"MediaFastForward" [2]Starts, continues, or increases the speed of fast forwarding the media.APPCOMMAND_MEDIA_FAST_FORWARDGDK_KEY_AudioForward (0x1008FF97)
- Qt:Key_AudioForward (0x01000102)		KEYCODE_MEDIA_FAST_FORWARD (90)
"MediaPause"Pauses the currently playing media. Some older applications use simply "Pause" but this is not correct.APPCOMMAND_MEDIA_PAUSEGDK_KEY_AudioPause (0x1008FF31)
- Qt::Key_MediaPause (0x1000085)		KEYCODE_MEDIA_PAUSE (127)
"MediaPlay"Starts or continues playing media at normal speed, if not already doing so. Has no effect otherwise.APPCOMMAND_MEDIA_PLAYGDK_KEY_AudioPlay (0x1008FF14)KEYCODE_MEDIA_PLAY (126)
"MediaPlayPause"Toggles between playing and pausing the current media.VK_MEDIA_PLAY_PAUSE (0xB3)
- APPCOMMAND_MEDIA_PLAY_PAUSE		Qt::Key_MediaTogglePlayPause (0x1000086)KEYCODE_MEDIA_PLAY_PAUSE (85)
"MediaRecord"Starts or resumes recording media.APPCOMMAND_MEDIA_RECORDGDK_KEY_AudioRecord (0x1008FF1C)
- Qt::Key_MediaRecord (0x01000084)		KEYCODE_MEDIA_RECORD (130)
"MediaRewind"Starts, continues, or increases the speed of rewinding the media.APPCOMMAND_MEDIA_REWINDGDK_KEY_AudioRewind (0x1008FF3E)
- Qt::Key_AudioRewind (0x010000C5)		KEYCODE_MEDIA_REWIND (89)
"MediaStop"Stops the current media activity (such as playing, recording, pausing, forwarding, or rewinding). Has no effect if the media is currently stopped already.VK_MEDIA_STOP (0xB2)
- APPCOMMAND_MEDIA_STOP		GDK_KEY_AudioStop (0x1008FF15)
- Qt::Key_MediaStop (0x01000081)		KEYCODE_MEDIA_STOP (86)
"MediaTrackNext" [1]Seeks to the next media or program track.VK_MEDIA_NEXT_TRACK (0xB0)
- APPCOMMAND_MEDIA_NEXTTRACK		GDK_KEY_AudioNext (0x1008FF17)
- Qt::Key_MediaNext (0x01000083)		KEYCODE_MEDIA_NEXT (87)
"MediaTrackPrevious" [1]Seeks to the previous media or program track.VK_MEDIA_PREV_TRACK (0xB1)
- APPCOMMAND_MEDIA_PREVIOUSTRACK		GDK_KEY_AudioPrev (0x1008FF16)
- Qt::Key_MediaPrevious (0x01000082)		KEYCODE_MEDIA_PREVIOUS (88)
- -

[1] Internet Explorer, Edge, and Firefox (36 and earlier) use "MediaNextTrack" and "MediaPreviousTrack" instead of "MediaTrackNext" and "MediaTrackPrevious".

- -

[2] Prior to Firefox 37, Firefox generated the key code "FastFwd" on some platforms and "Unidentified" on others instead of "MediaFastForward".

- -

Audio control keys

- -

These media keys are used specifically for controlling audio.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"AudioBalanceLeft"Adjusts audio balance toward the left.VK_AUDIO_BALANCE_LEFT
"AudioBalanceRight"Adjusts audio balance twoard the right.VK_AUDIO_BALANCE_RIGHT
"AudioBassDown"Decreases the amount of bass.APPCOMMAND_BASS_DOWN
"AudioBassBoostDown"Reduces bass boosting or cycles downward through bass boost modes or states.VK_BASS_BOOST_DOWN
"AudioBassBoostToggle"Toggles bass boosting on and off.APPCOMMAND_BASS_BOOST
"AudioBassBoostUp"Increases the amoung of bass boosting, or cycles upward through a set of bass boost modes or states.VK_BASS_BOOST_UP
"AudioBassUp"Increases the amount of bass.APPCOMMAND_BASS_UP
"AudioFaderFront"Adjusts the audio fader toward the front.VK_FADER_FRONT
"AudioFaderRear"Adjustts the audio fader toward the rear.VK_FADER_REAR
"AudioSurroundModeNext"Selects the next available surround sound mode.VK_SURROUND_MODE_NEXT
"AudioTrebleDown"Decreases the amount of treble.APPCOMMAND_TREBLE_DOWN
"AudioTrebleUp"Increases the amount of treble.APPCOMMAND_TREBLE_UP
"AudioVolumeDown" [1]Decreases the audio volume.VK_VOLUME_DOWN (0xAE)
- APPCOMMAND_VOLUME_DOWN		kVK_VolumeDown (0x49)GDK_KEY_AudioLowerVolume (0x1008FF11)
- Qt::Key_VolumeDown (0x01000070)		KEYCODE_VOLUME_DOWN (25)
"AudioVolumeMute" [1]Mutes the audio.VK_VOLUME_MUTE (0xAD)
- APPCOMMAND_VOLUME_MUTE		kVK_Mute (0x4A)GDK_KEY_AudioMute (0x1008FF12)
- Qt::Key_VolumeMute (0x01000071)		KEYCODE_VOLUME_MUTE (164)
"AudioVolumeUp" [1]Increases the audio volume.VK_VOLUME_UP (0xAF)
- APPCOMMAND_VOLUME_UP		kVK_VolumeUp (0x48)GDK_KEY_AudioRaiseVolume (0x1008FF13)
- Qt::Key_VolumeUp (0x01000072)		KEYCODE_VOLUME_UP (24)
"MicrophoneToggle"Toggles the microphone on and off.APPCOMMAND_MIC_ON_OFF_TOGGLE
"MicrophoneVolumeDown"Decreases the microphone's input volume.APPCOMMAND_MICROPHONE_VOLUME_DOWNQt::Key_MicVolumeDown (0x0100011E)
"MicrophoneVolumeMute"Mutes the microphone input.APPCOMMAND_MICROPHONE_VOLUME_MUTEGDK_KEY_AudioMicMute (0x1008FFB2)
- Qt::Key_MicMute (0x01000113)		KEYCODE_MUTE (91)
"MicrophoneVolumeUp"Increases the microphone's input volume.APPCOMMAND_MICROPHONE_VOLUME_UPQt::Key_MicVolumeUp (0x0100011D)
- -

[1] Internet Explorer, Edge, and Firefox (48 and earlier) use "VolumeUp", "VolumeDown", and "VolumeMute" instead of "AudioVolumeUp", "AudioVolumeDown", and "AudioVolumeMute". In Firefox 49 they were updated to match the latest specification. The old names are still used on Boot to Gecko.

- -

TV control keys

- -

These key values represent buttons or keys present on television devices, or computers or phones which have TV support.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"TV" [1]Switches into TV viewing mode.KEYCODE_TV (170)
"TV3DMode"Toggles 3D TV mode on and off.KEYCODE_3D_MODE (206)
"TVAntennaCable"Toggles between antenna and cable inputs.KEYCODE_TV_ANTENNA_CABLE (242)
"TVAudioDescription"Toggles audio description mode on and off.KEYCODE_TV_AUDIO_DESCRIPTION (252)
"TVAudioDescriptionMixDown"Decreases trhe audio description's mixing volume; reduces the volume of the audio descriptions relative to the program sound.KEYCODE_TV_AUDIO_DESCRIPTION_MIX_DOWN (254)
"TVAudioDescriptionMixUp"Increases the audio description's mixing volume; increases the volume of the audio descriptions relative to the program sound.KEYCODE_TV_AUDIO_DESCRIPTION_MIX_UP (253)
"TVContentsMenu"Displays or hides the media contents available for playback (this may be a channel guide showing the currently airing programs, or a list of media files to play).KEYCODE_TV_CONTENTS_MENU (256)
"TVDataService"Displays or hides the TV's data service menu.KEYCODE_TV_DATA_SERVICE (230)
"TVInput" [2]Cycles the input mode on an external TV.KEYCODE_TV_INPUT (178)
"TVInputComponent1"Switches to the input "Component 1."KEYCODE_TV_INPUT_COMPONENT_1 (249)
"TVInputComponent2"Switches to the input "Component 2."KEYCODE_TV_INPUT_COMPONENT_2 (250)
"TVInputComposite1"Switches to the input "Composite 1."KEYCODE_TV_INPUT_COMPOSITE_1 (247)
"TVInputComposite2"Switches to the input "Composite 2."KEYCODE_TV_INPUT_COMPOSITE_2 (248)
"TVInputHDMI1"Switches to the input "HDMI 1."KEYCODE_TV_INPUT_HDMI_1 (243)
"TVInputHDMI2"Switches to the input "HDMI 2."KEYCODE_TV_INPUT_HDMI_2 (244)
"TVInputHDMI3"Switches to the input "HDMI 3."KEYCODE_TV_INPUT_HDMI_3 (245)
"TVInputHDMI4"Switches to the input "HDMI 4."KEYCODE_TV_INPUT_HDMI_4 (246)
"TVInputVGA1"Switches to the input "VGA 1."KEYCODE_TV_INPUT_VGA_1 (251)
"TVMediaContext"The Media Context menu key.KEYCODE_TV_MEDIA_CONTEXT_MENU (257)
"TVNetwork"Toggle the TV's network connection on and off.KEYCODE_TV_NETWORK (241)
"TVNumberEntry"Put the TV into number entry mode.KEYCODE_TV_NUMBER_ENTRY (234)
"TVPower" [2]The device's power button.KEYCODE_TV_POWER (177)
"TVRadioService"Radio button.KEYCODE_TV_RADIO_SERVICE (232)
"TVSatellite"Satellite button.KEYCODE_TV_SATELLITE (237)
"TVSatelliteBS"Broadcast Satellite button.KEYCODE_TV_SATELLITE_BS (238)
"TVSatelliteCS"Communication Satellite button.KEYCODE_TV_SATELLITE_CS (239)
"TVSatelliteToggle"Toggles among available satellites.KEYCODE_TV_SATELLITE_SERVICE (240)
"TVTerrestrialAnalog"Selects analog terrestrial television service (analog cable or antenna reception).KEYCODE_TV_TERRESTRIAL_ANALOG (235)
"TVTerrestrialDigital"Selects digital terrestrial television service (digital cable or antenna receiption).KEYCODE_TV_TERRESTRIAL_DIGITAL (236)
"TVTimer"Timer programming button.KEYCODE_TV_TIMER_PROGRAMMING (258)
- -

[1] Firefox added proper support for the "TV" key in Firefox 37; before that, this key generated the key code "Live".

- -

[2] These keys were "Unidentified" until Firefox 37.

- -

Media controller keys

- -

Because modern remote controls for media devices often include buttons beyond the basic controls covered elsewhere in this document, key values are defined for a broad array of these additional buttons.

- -

The values below are derived in part form a number of consumer electronics technical specifications:

- - - -
-

Note : Remote controls typically include keys whose values are already defined elsewhere, such as under {{anch("Multimedia keys")}} or {{anch("Audio control keys")}}. Those keys' values will match what's documented in those tables.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"AVRInput" [3]Changes the input mode on an external audio/video receiver (AVR) unit.KEYCODE_AVR_INPUT (182)
"AVRPower" [3]Toggles the power on an external AVR unit.KEYCODE_AVR_POWER (181)
"ColorF0Red" [3]General-purpose media function key, color-coded red; this has index 0 among the colored keys.VK_COLORED_KEY_0KEYCODE_PROG_RED (183)
"ColorF1Green" [3]General-purpose media funciton key, color-coded green; this has index 1 among the colored keys.VK_COLORED_KEY_1KEYCODE_PROG_GREEN (184)
"ColorF2Yellow" [3]General-purpose media funciton key, color-coded yellow; this has index 2 among the colored keys.VK_COLORED_KEY_2KEYCODE_PROG_YELLOW (185)
"ColorF3Blue" [3]General-purpose media funciton key, color-coded blue; this has index 3 among the colored keys.VK_COLORED_KEY_3KEYCODE_PROG_BLUE (186)
"ColorF4Grey"General-purpose media funciton key, color-coded grey; this has index 4 among the colored keys.VK_COLORED_KEY_4KEYCODE_PROG_GREY
"ColorF5Brown"General-purpose media funciton key, color-coded brown; this has index 5 among the colored keys.VK_COLORED_KEY_5KEYCODE_PROG_BROWN
"ClosedCaptionToggle"Toggles closed captioning on and off.VK_CCKEYCODE_CAPTIONS (175)
"Dimmer"Adjusts the brightness of the device by toggling between two brightness levels or by cycling among multiple brightness levels.VK_DIMMERGDK_KEY_BrightnessAdjust (0x1008FF3B)
"DisplaySwap"Cycles among video sources.VK_DISPLAY_SWAP
"DVR"Switches the input source to the Digital Video Recorder (DVR).KEYCODE_DVR (173)
"Exit"The Exit button, which exits the curreent application or menu.VK_EXITQt::Key_Exit (0x0102000a)
"FavoriteClear0"Clears the program or content stored in the first favorites list slot.VK_CLEAR_FAVORITE_0
"FavoriteClear1"Clears the program or content stored in the second favorites list slot.VK_CLEAR_FAVORITE_1
"FavoriteClear2"Clears the program or content stored in the third favorites list slot.VK_CLEAR_FAVORITE_2
"FavoriteClear3"Clears the program or content stored in the fourth favorites list slot.VK_CLEAR_FAVORITE_3
"FavoriteRecall0"Selects (recalls) the program or content stored in the first favorites list slot.VK_RECALL_FAVORITE_0
"FavoriteRecall1"Selects (recalls) the program or content stored in the second favorites list slot.VK_RECALL_FAVORITE_1
"FavoriteRecall2"Selects (recalls) the program or content stored in the third favorites list slot.VK_RECALL_FAVORITE_2
"FavoriteRecall3"Selects (recalls) the program or content stored in the fourth favorites list slot.VK_RECALL_FAVORITE_3
"FavoriteStore0"Stores the current program or content into the first favorites list slot.VK_STORE_FAVORITE_0
"FavoriteStore1"Stores the current program or content into the second favorites list slot.VK_STORE_FAVORITE_1
"FavoriteStore2"Stores the current program or content into the third favorites list slot.VK_STORE_FAVORITE_2
"FavoriteStore3"Stores the current program or content into the fourth favorites list slot.VK_STORE_FAVORITE_3
"Guide"Toggles the display of the program or content guide.VK_GUIDEQt::Key_Guide (0x0100011A)KEYCODE_GUIDE (172)
"GuideNextDay"If the guide is currently displayed, this button tells the guide to display the next day's content.VK_NEXT_DAY
"GuidePreviousDay"If the guide is currently displayed, this button tells the guide to display the previous day's content.VK_PREV_DAY
"Info"Toggles the display of information about the currently selected content, program, or media.VK_INFOQt::Key_Info (0x0100011B)KEYCODE_INFO (165)
"InstantReplay"Tellls the device to perform an instant replay (typically some form of jumping back a short amount of time then playing it again, possibly but not usually in slow motion).VK_INSTANT_REPLAY
"Link"Opens content liniked to the current program, if available and possible.VK_LINK
"ListProgram"Lists the current program.VK_LIST
"LiveContent"Toggles a display listing currently available live content or programs.VK_LIVE
"Lock"Locks or unlocks the currently selected content or pgoram.VK_LOCK
"MediaApps"Presents a list of media applications, such as photo viewers, audio and video players, and games. [1]VK_APPS
"MediaAudioTrack"The Audio Track key.GDK_KEY_AudioCycleTrack (0x1008FF9B)
- Qt::Key_AudioCycleTrack (0x01000106)		KEYCODE_MEDIA_AUDIO_TRACK (222)
"MediaLast"Jumps back to the last-viewed content, program, or other media.VK_LASTQt::Key_MediaLast (0x0100FFFF)KEYCODE_LAST_CHANNEL (229)
"MediaSkipBackward"Skips backward to the previous content or program.KEYCODE_MEDIA_SKIP_BACKWARD
"MediaSkipForward"Skips forward to the next content or program.VK_SKIPKEYCODE_MEDIA_SKIP_FORWARD
"MediaStepBackward"Steps backward to the previous content or program.KEYCODE_MEDIA_STEP_BACKWARD
"MediaStepForward"Steps forward to the next content or program.KEYCODE_MEDIA_SKIP_FORWARD
"MediaTopMenu"Top Menu button; opens the media's main menu, such as on a DVD or Blu-Ray disc.Qt::Key_TopMenu (0x0100010A)KEYCODE_MEDIA_TOP_MENU
"NavigateIn"Navigates into a submenu or option.KEYCODE_NAVIGATE_IN
"NavigateNext"Navigates to the next item.KEYCODE_NAVIGATE_NEXT
"NavigateOut"Navigates out of the current screen or menu.KEYCODE_NAVIGATE_OUT
"NavigatePrevious"Navigates to the previous item.KEYCODE_NAVIGATE_PREVIOUS
"NextFavoriteChannel"Cycles to the next channel in the favorites list.VK_NEXT_FAVORITE_CHANNEL
"NextUserProfile"Cycles to the next saved user profile, if this feature is supported and multiple profiles exist.VK_USER
"OnDemand"Opens the user interface for selecting on demand content or programs to watch.VK_ON_DEMAND
"Pairing"Starts the process of pairing the remote with a device to be controlled.KEYCODE_PAIRING (225)
"PinPDown"A button to move the picture-in-picture view downward.VK_PINP_DOWN
"PinPMove"A button to control moving the picture-in-picture view.VK_PINP_MOVE
"PinPToggle"Toggles display of th epicture-in-picture view on and off.VK_PINP_TOGGLE
"PinPUp"A button to move the picture-in-picture view upward.VK_PINP_UP
"PlaySpeedDown"Decreases the media playback rate.VK_PLAY_SPEED_DOWN
"PlaySpeedReset"Returns the media playback rate to normal.VK_PLAY_SPEED_RESET
"PlaySpeedUp"Increases the media playback rate.VK_PLAY_SPEED_UP
"RandomToggle"Toggles random media (also known as "shuffle mode") on and off.VK_RANDOM_TOGGLEGDK_KEY_AudioRandomPlay (0x1008FF99)
"RcLowBattery"A code sent when the remote control's battery is low. This doesn't actually correspond to a physical key at all.VK_RC_LOW_BATTERY
"RecordSpeedNext"Cycles among the available media recording speeds.VK_RECORD_SPEED_NEXT
"RfBypass"Toggles radio frequency (RF) input bypass mode on and off. RF bypass mode passes RF input directly to the RF output without any processing or filtering.VK_RF_BYPASS
"ScanChannelsToggle"Toggles the channel scan mode on and off; this is a mode which flips through channels automatically until the user stops the scan.VK_SCAN_CHANNELS_TOGGLE
"ScreenModeNext"Cycles through the available screen display modes.VK_SCREEN_MODE_NEXT
"Settings"Toggles display of the device's settings screen on and off.VK_SETTINGSQt::Key_Settings (0x0100011C)KEYCODE_SETTINGS
"SplitScreenToggle"Toggles split screen display mode on and off.VK_SPLIT_SCREEN_TOGGLEGDK_KEY_SplitScreen (0x1008FF7D)
- Qt::Key_SplitScreen (0x010000ED)
"STBInput" [3]Cycles among input modes on an external set-top box (STB).KEYCODE_STB_INPUT (180)
"STBPower" [3]Toggles on and off an external STB.KEYCODE_STB_POWER (179)
"Subtitle"Toggles the display of subtitles on and off if they're available.VK_SUBTITLEGDK_KEY_Subtitle (0x1008FF9A)KEYCODE_CAPTIONS (175)
"Teletext"Toggles display of {{interwiki("wikipedia", "teletext")}}, if available.VK_TELETEXTKEYCODE_TV_TELETEXT (233)
"VideoModeNext" [3]Cycles through the available video modes.VK_VIDEO_MODE_NEXTGDK_KEY_Next_VMode (0x1008FE22)
"Wink"Causes the device to identify itself in some fashion, such as by flashing a light, briefly changing the brightness of indicator lights, or emitting a tone.VK_WINK
"ZoomToggle" [2]Toggles between full-screen and scaled content display, or otherwise change the magnification level.VK_ZOOM (0xFB)Qt::Key_Zoom (0x01020006)KEYCODE_TV_ZOOM_MODE (255)
- -

[1] Don't confuse the media controller VK_APPS key with the Windows VK_APPS key, which is also known as VK_CONTEXT_MENU. That key is encoded as "ContextMenu".

- -

[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier identify the zoom toggle button as "Zoom". Firefox 37 corrects this to "ZoomToggle".

- -

[3] These keys were "Unidentified" until Firefox 37.

- -

Speech recognition keys

- -

These special multimedia keys are used to control speech recognition features.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"SpeechCorrectionList" [1]Presents a list of possible corrections for a word which was incorrectly identified.APPCOMMAND_CORRECTION_LIST
"SpeechInputToggle" [2]Toggles between dictation mode and command/control mode. This lets the speech engine know whether to interpret spoken words as input text or as commands.APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE
- -

[1] The APPCOMMAND_CORRECTION_LIST command on Windows generates "Unidentified" on Firefox.

- -

[2] The APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE command on Windows generates "Unidentified" on Firefox.

- -

Document keys

- -

These keys control documents. In the specification, they're included in other sets of keys, such as the media keys, but they make more sense when considered to be their own category.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Close" [1]Closes the current document or message. Must not exit the application.APPCOMMAND_CLOSEGDK_KEY_Close (0x1008FF56)
- Qt::Key_Close (0x010000CE)		KEYCODE_MEDIA_CLOSE (128)
"New" [1]Creates a new document or message.APPCOMMAND_NEWGDK_KEY_New (0x1008FF68)
- Qt::Key_New (0x01000120)
"Open" [1]Opens an existing document or message.APPCOMMAND_OPENGDK_KEY_Open (0x1008FF6B)
- Qt::Key_Open (0x01000121)
"Print"Prints the current document or message.APPCOMMAND_PRINTGDK_KEY_Print (0xFF61)
- Qt::Print (0x01000009)
"Save" [1]Saves the current document or message.APPCOMMAND_SAVEGDK_KEY_Save (0x1008FF77)
- Qt::Key_Save (0x010000EA)
"SpellCheck" [1]Starts spell checking the current document.APPCOMMAND_SPELL_CHECKGDK_KEY_Spell (0x1008FF7C)
- Qt::Key_Spell (0x010000EC)
"MailForward" [1]Opens the user interface to forward a message.APPCOMMAND_FORWARD_MAILGDK_KEY_MailForward (0x1008FF90)
- Qt::Key_MailForward (0x010000FB)
"MailReply" [1]Opens the user interface to reply to a message.APPCOMMAND_REPLY_TO_MAILGDK_KEY_Reply (0x1008FF72)
- Qt::Key_Reply (0x010000E5)
"MailSend" [1]Sends the current message.APPCOMMAND_SEND_MAILGDK_KEY_Send (0x1008FF7B)
- Qt::Key_Send (0x010000EB)
- -

[1] Prior to Firefox 37, this key generated the key value "Unidentified".

- -

Application selector keys

- -

Some keyboards offer special keys for launching or switching to certain common applications. Key values for those are listed here.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"LaunchCalculator" [5]The Calculator key, often labeled with an icon. This is often used as a generic application launcher key (APPCOMMAND_LAUNCH_APP2).APPCOMMAND_LAUNCH_APP2GDK_KEY_Calculator (0x1008FF1D)
- Qt::Key_Calculator (0x010000CB)		KEYCODE_CALCULATOR (210)
"LaunchCalendar" [5]The Calendar key, often labeled with an icon.GDK_KEY_Calendar (0x1008FF20)
- Qt::Key_Calendar (0x010000E4)		KEYCODE_CALENDAR (208)
"LaunchContacts"The Contacts key.KEYCODE_CONTACTS (207)
"LaunchMail"The Mail key. This is often displayed with an icon.VK_LAUNCH_MAIL (0xB4)
- APPCOMMAND_LAUNCH_MAIL		GDK_KEY_Mail (0x1008FF19)
- Qt::Key_LaunchMail (0x010000A0)		KEYCODE_ENVELOPE (65)
"LaunchMediaPlayer" [1]The Media Player key.VK_LAUNCH_MEDIA_SELECT (0xB5)
- APPCOMMAND_LAUNCH_MEDIA_SELECT		GDK_KEY_CD (0x1008FF53)
- GDK_KEY_Video (0x1008FF87)
- GDK_KEY_AudioMedia (0x1008FF32)
- Qt::Key_LaunchMedia (0x010000A1)
"LaunchMusicPlayer" [5]The Music Player key, often labeled with an icon.GDK_KEY_Music (0x1008FF92)
- Qt::Key_Music (0x010000FD)		KEYCODE_MUSIC (209)
"LaunchMyComputer" [5]The My Computer key on Windows keyboards. This is often used as a generic application launcher key (APPCOMMAND_LAUNCH_APP1).APPCOMMAND_LAUNCH_APP1GDK_KEY_MyComputer (0x1008FF33)
- GDK_KEY_Explorer (0x1008FF5D)
"LaunchPhone"The Phone key, to open the phone dialer application if one is present.GDK_KEY_Phone (0x1008FF6E)
- Qt::Key_Phone (0x010000E3)
"LaunchScreenSaver" [5]The Screen Saver key.GDK_KEY_ScreenSaver (0x1008FF2D)
- Qt::Key_ScreenSaver (0x010000BA)
"LaunchSpreadsheet" [4]The Spreadsheet key. This key may be labeled with an icon.GDK_KEY_Excel (0x1008FF5C)
- Qt::Key_Excel (0x010000D4)
"LaunchWebBrowser" [4]The Web Browser key. This key is frequently labeled with an icon.GDK_KEY_WWW (0x1008FF2E)
- Qt::Key_WWW (0x010000BB)		KEYCODE_EXPLORER (64)
"LaunchWebCam" [5]The WebCam key. Opens the webcam application.GDK_KEY_WebCam (0x1008FF8F)
- Qt::Key_WebCam (0x010000FA)
"LaunchWordProcessor" [5]The Word Processor key. This may be an icon of a specific word processor application, or a generic document icon.GDK_KEY_Word (0x1008FF89)
- Qt::Key_Word (0x010000F4)
"LaunchApplication1" [2]The first generic application launcher button.VK_LAUNCH_APP1 (0xB6)
- APPCOMMAND_LAUNCH_APP1		GDK_KEY_Launch0 (0x1008FF40)
- Qt::Key_Launch0 (0x010000A2)
"LaunchApplication2" [3]The second generic application launcher button.VK_LAUNCH_APP2 (0xB7)
- APPCOMMAND_LAUNCH_APP2		GDK_KEY_Launch1 (0x1008FF41)
- Qt::Key_Launch1 (0x010000A3)
"LaunchApplication3"The third generic application launcher button.GDK_KEY_Launch2 (0x1008FF42)
- Qt::Key_Launch2 (0x010000A4)
"LaunchApplication4"The fourth generic application launcher button.GDK_KEY_Launch3 (0x1008FF43)
- Qt::Key_Launch3 (0x010000A5)
"LaunchApplication5"The fifth generic application launcher button.GDK_KEY_Launch4 (0x1008FF44)
- Qt::Key_Launch4 (0x010000A6)
"LaunchApplication6"The sixth generic application launcher button.GDK_KEY_Launch5 (0x1008FF45)
- Qt::Key_Launch5 (0x010000A7)
"LaunchApplication7"The seventh generic application launcher button.GDK_KEY_Launch6 (0x1008FF46)
- Qt::Key_Launch6 (0x010000A8)
"LaunchApplication8"The eighth generic application launcher button.GDK_KEY_Launch7 (0x1008FF47)
- Qt::Key_Launch7 (0x010000A9)
"LaunchApplication9"The ninth generic application launcher button.GDK_KEY_Launch8 (0x1008FF48)
- Qt::Key_Launch8 (0x010000AA)
"LaunchApplication10"The 10th generic application launcher button.GDK_KEY_Launch9 (0x1008FF49)
- Qt::Key_Launch9 (0x010000AB)
"LaunchApplication11"The 11th generic application launcher button.GDK_KEY_LaunchA (0x1008FF4A)
- Qt::Key_LaunchA (0x010000AC)
"LaunchApplication12"The 12th generic application launcher button.GDK_KEY_LaunchB (0x1008FF4B)
- Qt::Key_LaunchB (0x010000AD)
"LaunchApplication13"The 13th generic application launcher button.GDK_KEY_LaunchC (0x1008FF4C)
- Qt::Key_LaunchC (0x010000AE)
"LaunchApplication14"The 14th generic application launcher button.GDK_KEY_LaunchD (0x1008FF4D)
- Qt::Key_LaunchD (0x010000AF)
"LaunchApplication15"The 15th generic application launcher button.GDK_KEY_LaunchE (0x1008FF4E)
- Qt::Key_LaunchE (0x010000B0)
"LaunchApplication16"The 16th generic application launcher button.GDK_KEY_LaunchF (0x1008FF4F)
- Qt::Key_LaunchF (0x010000B1)
- -

[1] Internet Explorer, Edge, and Firefox (36 and earlier) use "SelectMedia" instead of "LaunchMediaPlayer". Firefox 37 through Firefox 48 use "MediaSelect". Firefox 49 has been updated to match the latest specification, and to return "LaunchMediaPlayer".

- -

[2] Google Chrome 57 and earlier returned "LaunchMyComputer" instead of "LaunchApplication1". See Chrome Bug 612743 for more information.

- -

[3] Google Chrome 57 and earlier returned "LaunchCalculator" instead of "LaunchApplication2". See Chrome Bug 612743 for more information.

- -

[4] Prior to Firefox 37, Firefox returned the key code "LaunchApplication1" instead of "LaunchWebBrowser" for the Web browser key.

- -

[5] Firefox introduced support for this key in Firefox 37; prior to that, this key was reported as "Unidentified".

- -

Browser control keys

- -

Some keyboards include special keys for controlling Web browsers. Those keys follow.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"BrowserBack"Navigates to the previous content or page in the current Web view's history.VK_BROWSER_BACK (0xA6)
- APPCOMMAND_BROWSER_BACKWARD		GDK_KEY_Back (0x1008FF26)
- Qt::Key_Back (0x01000061)		KEYCODE_BACK (4)
"BrowserFavorites" [1]Opens the user's list of bookmarks/favorites.VK_BROWSER_FAVORITES (0xAB)
- APPCOMMAND_BROWSER_FAVORITES		GDK_KEY_Favorites (0x1008FF30)
- GDK_KEY_MySites (0x1008FF67)
- Qt::Favorites (0x01000091)		KEYCODE_BOOKMARK (174)
"BrowserForward"Navigates to the next content or page in the current Web view's history.VK_BROWSER_FORWARD (0xA7)
- APPCOMMAND_BROWSER_FORWARD		GDK_KEY_Forward (0x1008FF27)
- Qt::Key_Forward (0x01000062)		KEYCODE_FORWARD (125)
"BrowserHome"Navigates to the user's preferred home page.VK_BROWSER_HOME (0xAC)
- APPCOMMAND_BROWSER_HOME		GDK_KEY_HomePage (0x1008FF18)
- Qt::Key_HomePage (0x01000090)		KEYCODE_HOME (3)
"BrowserRefresh"Refreshes the current page or contentl.VK_BROWSER_REFRESH (0xA8)
- APPCOMMAND_BROWSER_REFRESH		GDK_KEY_Refresh (0x1008FF29)
- GDK_KEY_Reload (0x1008FF73)
"BrowserSearch"Activates the user's preferred search engine or the search interface within their browser.VK_BROWSER_SEARCH (0xAA)
- APPCOMMAND_BROWSER_SEARCH		GDK_KEY_Search (0x1008FF1B)
- Qt::Key_Search (0x01000092)		KEYCODE_SEARCH (84)
"BrowserStop"Stops loading the currently displayed Web view or content.VK_BROWSER_STOP (0xA9)
- APPCOMMAND_BROWSER_STOP		GDK_KEY_Stop (0x1008FF28)
- Qt::Key_Search (0x01000063)
- -

[1] Prior to Firefox 37, this key's value was reported as "Unidentified".

- -

Numeric keypad keys

- -

These keys are found on the keyboard's numeric keypad. However, not all are present on every keyboard. Although typical numeric keypads have numeric keys from 0 to 9 (encoded as "0" through "9"), some multimedia keyboards include additional number keys for higher numbers.

- -
-

Note :The 10 key, if present, generates events with the key value of "0".

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Decimal" [1] {{obsolete_inline}}The decimal point key (typically . or , depending on the region. In newer browsers, this value to simply be the character generated by the decimal key (one of those two characters). [1]VK_DECIMAL (0x6E)kVK_ANSI_KeypadDecimal (0x41)GDK_KEY_KP_Decimal (0xFFAE)
-  		KEYCODE_NUMPAD_DOT (158)
"Key11"The 11 key found on certain media numeric keypads.
"Key12"The 12 key found on certain media numeric keypads.
"Multiply" [1] {{obsolete_inline}}The numeric keypad's multiplication key, *.VK_MULTIPLY (0x6A)kVK_ANSI_KeypadMultiply (0x43)GDK_KEY_KP_Multiply (0xFFAA)
- Qt::Key_Multiply (0x0D7)		KEYCODE_NUMPAD_MULTIPLY (155)
"Add" [1] {{obsolete_inline}}The numeric keypad's addition key, +.VK_ADD (0x6B)kVK_ANSI_KeypadPlus (0x45)GDK_KEY_KP_Add (0xFFAB)KEYCODE_NUMPAD_ADD (157)
"Clear"The numeric keypad's Clear key.kVK_ANSI_KeypadClear (0x47)GDK_KEY_Clear (0xFF0B)
- Qt::Key_Clear (0x0100000B)		KEYCODE_CLEAR (28)
"Divide" [1] {{obsolete_inline}}The numeric keypad's division key, /.VK_DIVIDE (0x6F)kVK_ANSI_KeypadDivide (0x4B)GDK_KEY_KP_Divide (0xFFAF)
- Qt::Key_Slash (0x2F)		KEYCODE_NUMPAD_DIVIDE (154)
"Subtract" [1] {{obsolete_inline}}The numeric keypad's subtraction key, -.VK_SUBTRACT (0x6D)kVK_ANSI_KeypadMinus (0x4E)GDK_KEY_KP_Subtract (0xFFAD)KEYCODE_NUMPAD_SUBTRACT (156)
"Separator" [1]The numeric keypad's places separator character (in the United States, this is a comma, but elsewhere it is frequently a period).VK_SEPARATOR (0x6C)kVK_JIS_KeypadComma (0x5F)GDK_KEY_KP_Separator (0xFFAC)
-  		KEYCODE_NUMPAD_COMMA (159)
"0" through "9"The actual digit keys on the numeric keypad.VK_NUMPAD0 (0x60) - VK_NUMPAD9 (0x69)kVK_Keypad0 (0x52) - kVK_Keypad9 (0x5C)GDK_KEY_KP_0 (0xFFB0) - GDK_KEY_KP_9 (0xFFB9)KEYCODE_NUMPAD_0 (144) - KEYCODE_NUMPAD_9 (153)
- -

[1] While older browsers used words like "Add", "Decimal", "Multiply", and so forth modern browsers identify these using the actual character ("+", ".", "*", and so forth).

diff --git a/files/fr/web/api/keyboardevent/key/key_values/index.md b/files/fr/web/api/keyboardevent/key/key_values/index.md new file mode 100644 index 0000000000..07c8ba499c --- /dev/null +++ b/files/fr/web/api/keyboardevent/key/key_values/index.md @@ -0,0 +1,3637 @@ +--- +title: Key Values +slug: Web/API/KeyboardEvent/key/Key_Values +translation_of: Web/API/KeyboardEvent/key/Key_Values +--- +

Les tableaux ci-dessous énumèrent les valeurs clés standard dans différentes catégories de clés, avec une explication de l'utilisation habituelle de la clé. Les codes de clés virtuels correspondants pour les plateformes communes sont inclus lorsqu'ils sont disponibles.

+ +

Apprenez à utiliser ces valeurs clés en JavaScript en utilisant KeyboardEvent.key

+ +

Special Values | Modifier Keys | Whitespace Keys | Navigation Keys | Editing Keys | UI Keys | Device Keys | IME and Composition Keys | Function Keys | Phone Keys | Multimedia Keys | Audio Control Keys | TV Control Keys | Media Controller Keys | Speech Recognition Keys | Document Keys | Application Selector Keys | Browser Control Keys | Numeric Keypad Keys

+ +

Valeurs spéciales

+ +

Les valeurs de key qui ont une signification particulière autre que l'identification d'une clé ou d'un caractère spécifique.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValeurDescriptionCode clé virtuel
WindowsMacLinuxAndroid
"Unidentified"L'agent utilisateur n'a pas été en mesure de faire correspondre le code virtuel de l'événement à une valeur clé spécifique. Cela peut être dû à des contraintes matérielles ou logicielles, ou à des contraintes liées à la plate-forme sur laquelle l'agent utilisateur fonctionne.varievarievarievarie
+ +

Modifier keys

+ +

Modifiers are special keys which are used to generate special characters or cause special actions when used in combination with other keys. Examples include the Shift and Control keys, and lock keys such as Caps Lock and NumLock.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Alt" [5]The Alt (Alternative) key.VK_MENU (0x12)
+ VK_LMENU (0xA4)
+ VK_RMENU (0xA5)		kVK_Option (0x3A)
+ kVK_RightOption (0x3D)		GDK_KEY_Alt_L (0xFFE9)
+ GDK_KEY_Alt_R (0xFFEA)
+ Qt::Key_Alt (0x01000023)		KEYCODE_ALT_LEFT (57)
+ KEYCODE_ALT_RIGHT (58)
"AltGraph" [5]The AltGr or AltGraph (Alternate Graphics) key. Enables the ISO Level 3 shift modifier (where Shift is the level 2 modifier).GDK_KEY_Mode_switch (0xFF7E)
+ GDK_KEY_ISO_Level3_Shift (0xFE03)
+ GDK_KEY_ISO_Level3_Latch (0xFE04)
+ GDK_KEY_ISO_Level3_Lock (0xFE05)
+ GDK_KEY_ISO_Level5_Shift (0xFE11)
+ GDK_KEY_ISO_Level5_Latch (0xFE12)
+ GDK_KEY_ISO_Level5_Lock (0xFE13)
+ Qt::Key_AltGr (0x01001103
+ Qt::Key_Mode_switch (0x0100117E)
"CapsLock"The Caps Lock key. Toggles the capital character lock on and off for subsequent input.VK_CAPITAL (0x14)kVK_CapsLock (0x39)GDK_KEY_Caps_Lock (0xFFE5)
+ Qt::Key_CapsLock (0x01000024)		KEYCODE_CAPS_LOCK (115)
"Control"The Control, Ctrl, or Ctl key. Allows typing control characters.VK_CONTROL (0x11)
+ VK_LCONTROL (0xA2)
+ VK_RCONTROL (0xA3)		kVK_Control (0x3B)
+ kVK_RightControl (0x3E)		GDK_KEY_Control_L (0xFFE3)
+ GDK_KEY_Control_R (0xFFE4)
+ Qt::Key_Control (0x01000021)		KEYCODE_CTRL_LEFT (113)
+ KEYCODE_CTRL_RIGHT (114)
"Fn"The Fn (Function modifier) key. Used to allow generating function key (F1-F15, for instance) characters on keyboards without a dedicated function key area. Often handled in hardware so that events aren't generated for this key.kVK_Function (0x3F)KEYCODE_FUNCTION (119)
"FnLock"The FnLock or F-Lock (Function Lock) key.Toggles the function key mode described by "Fn" on and off. Often handled in hardware so that events aren't generated for this key.
"Hyper" [4]The Hyper key.GDK_KEY_Hyper_L (0xFFED)
+ GDK_KEY_Hyper_R (0xFFEE)
+ Qt::Key_Hyper_L (0x01000056)
+ Qt::Key_Hyper_R (0x01000057)
"Meta" [1]The Meta key. Allows issuing special command inputs. This is the Windows logo key, or the Command or ⌘ key on Mac keyboards.VK_LWIN (0x5B)
+ VK_RWIN (0x5C)		kVK_Command (0x37)
+ kVK_RightCommand (0x36)		GDK_KEY_Meta_L (0xFFE7)
+ GDK_KEY_Meta_R (0xFFE8)
+ Qt::Key_Meta (0x01000022)		KEYCODE_META_LEFT (117)
+ KEYCODE_META_RIGHT (118)
"NumLock"The NumLock (Number Lock) key. Toggles the numeric keypad between number entry some other mode (often directional arrows).VK_NUMLOCK (0x90)GDK_KEY_Num_Lock (0xFF7F)
+ Qt::Key_NumLock (0x01000025)		KEYCODE_NUM_LOCK (143)
"ScrollLock" [2]The Scroll Lock key. Toggles beteen scrolling and cursor movement modes.VK_SCROLL (0x91)GDK_KEY_Scroll_Lock (0xFF14)
+ Qt::Key_ScrollLock (0x01000026)		KEYCODE_SCROLL_LOCK (116)
"Shift"The Shift key. Modifies keystrokes to allow typing upper (or other) case letters, and to support typing punctuation and other special characters.VK_SHIFT (0x10)
+ VK_LSHIFT (0xA0)
+ VK_RSHIFT (0xA1)		kVK_Shift (0x38)
+ kVK_RightShift (0x3C)		GDK_KEY_Shift_L (0xFFE1)
+ GDK_KEY_Shift_R (0xFFE2)
+ Qt::Key_Shift (0x01000020)		KEYCODE_SHIFT_LEFT (59)
+ KEYCODE_SHIFT_RIGHT (60)
"Super" [4]The Super key.GDK_KEY_Super_L (0xFFEB)
+ GDK_KEY_Super_R (0xFFEC)
+ Qt::Key_Super_L (0x01000053)
+ Qt::Key_Super_R (0x01000054)
"Symbol"The Symbol modifier key (found on certain virtual keyboards).KEYCODE_SYM (63) [3]
"SymbolLock"The Symbol Lock key.
+ +

[1] In Internet Explorer (tested on release 9 and 11), as well as in all versions of Firefox, the Windows key is reported as "OS" instead of as "Meta". This will be changed in Firefox per {{bug(1232918)}}. Until that's fixed, these keys are returned as "OS" by Firefox: VK_LWIN (0x5B) and VK_RWIN (0x5C) on Windows, and GDK_KEY_Super_L (0xFFEB), GDK_KEY_Super_R (0xFFEC), GDK_KEY_Hyper_L (0xFFED), and GDK_KEY_Hyper_R (0xFFEE) on Linux.

+ +

[2] Internet Explorer (tested on release 9 and 11) reports "Scroll" instead of "ScrollLock" for the Scroll Lock key.

+ +

[3] Firefox did not add support for the Symbol key until Firefox 37.

+ +

[4] Firefox generates the key value "OS" for the Super and Hyper keys, instead of "Super" and "Hyper".

+ +

[5] Chrome 67 and Firefox 63 now correctly interpret the right Alt key for keyboard layouts which map that key to AltGr. See Firefox bug {{bug(900750)}} and Chrome bug 25503 for further details.

+ +

Whitespace keys

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Enter"The Enter or ↵ key (sometimes labeled Return).VK_RETURN (0x0D)kVK_Return (0x24)
+ kVK_ANSI_KeypadEnter (0x4C)
+ kVK_Powerbook_KeypadEnter (0x34)		GDK_KEY_Return (0xFF0D)
+ GDK_KEY_KP_Enter (0xFF8D)
+ GDK_KEY_ISO_Enter (0xFE34)
+ GDK_KEY_3270_Enter (0xFD1E)
+ Qt::Key_Return (0x01000004)
+ Qt::Key_Enter (0x01000005)		KEYCODE_ENTER (66)
+ KEYCODE_NUMPAD_ENTER (160)
+ KEYCODE_DPAD_CENTER (23)
"Tab"The Horizontal Tab key, Tab.VK_TAB (0x09)kVK_Tab (0x30)GDK_KEY_Tab (0xFF09)
+ GDK_KEY_KP_Tab (0xFF89)
+ GDK_KEY_ISO_Left_Tab (0xFE20)
+ Qt::Key_Tab (0x01000001)		KEYCODE_TAB (61)
" " [1]The space key, Space Bar.VK_SPACE (0x20)kVK_Space (0x31) +

GDK_KEY_space (0x20)
+ GDK_KEY_KP_Space (0xFF80)
+ Qt::Key_Space (0x20)

+ 		KEYCODE_SPACE (62)
+ +

[1] Older browsers may return "Spacebar" instead of " " for the Space Bar key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"ArrowDown" [1]The down arrow key.VK_DOWN (0x28)kVK_DownArrow (0x7D)GDK_KEY_Down (0xFF54)
+ GDK_KEY_KP_Down (0xFF99)
+ Qt::Key_Down (0x01000015)		KEYCODE_DPAD_DOWN (20)
"ArrowLeft" [1]The left arrow key.VK_LEFT (0x25)kVK_LeftArrow (0x7B)GDK_KEY_Left (0xFF51)
+ GDK_KEY_KP_Left (0xFF96)
+ Qt::Key_Left (0x01000012)		KEYCODE_DPAD_LEFT (21)
"ArrowRight" [1]The right arrow key.VK_RIGHT (0x27)kVK_RightArrow (0x7C)GDK_KEY_Right (0xFF53)
+ GDK_KEY_KP_Right (0xFF98)
+ Qt::Key_Right (0x01000014)		KEYCODE_DPAD_RIGHT (22)
"ArrowUp" [1]The up arrow key.VK_UP (0x26)kVK_UpArrow (0x7E)GDK_KEY_Up (0xFF52)
+ GDK_KEY_KP_Up (0xFF97)
+ Qt::Key_Up (0x01000013)		KEYCODE_DPAD_UP (19)
"End"The End key. Moves to the end of content.VK_END (0x23)kVK_End (0x77)GDK_KEY_End (0xFF57)
+ GDK_KEY_KP_End (0xFF9C)
+ Qt::Key_End (0x01000011)		KEYCODE_MOVE_END (123)
"Home"The Home key. Moves to the start of content.VK_HOME (0x24)kVK_Home (0x73)GDK_KEY_Home (0xFF50)
+ GDK_KEY_KP_Home (0xFF95)
+ Qt::Key_Home (0x01000010)		KEYCODE_MOVE_HOME (122)
"PageDown"The Page Down (or PgDn) key. Scrolls down or displays the next page of content.VK_NEXT (0x22)kVK_PageDown (0x79)GDK_KEY_Page_Down (0xFF56)
+ GDK_KEY_KP_Page_Down (0xFF9B)
+ Qt::Key_PageDown (0x01000017)		KEYCODE_PAGE_DOWN (93)
"PageUp"The Page Up (or PgUp) key. Scrolls up or displays the previous page of content.VK_PRIOR (0x21)kVK_PageUp (0x74)GDK_KEY_Page_Up (0xFF55)
+ GDK_KEY_KP_Page_Up (0xFF9A)
+ Qt::Key_PageUp (0x01000016)		KEYCODE_PAGE_UP (92)
+ +

[1] Internet Explorer, Edge (16 and earlier), and Firefox (36 and earlier) use "Left", "Right", "Up", and "Down" instead of "ArrowLeft", "ArrowRight", "ArrowUp", and "ArrowDown".

+ +

Editing keys

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Backspace"The Backspace key. This key is labeled Delete on Mac keyboards.VK_BACK (0x08)kVK_Delete (0x33)GDK_KEY_BackSpace (0xFF08)
+ Qt::Key_Backspace (0x01000003)		KEYCODE_DEL (67)
"Clear"The Clear key. Removes the currently selected input.VK_CLEAR (0x0C)
+ VK_OEM_CLEAR (0xFE)		kVK_ANSI_KeypadClear (0x47)GDK_KEY_Clear (0xFF0B)
+ Qt::Key_Clear (0x0100000B)		KEYCODE_CLEAR (28)
"Copy"The Copy key (on certain extended keyboards).APPCOMMAND_COPYGDK_KEY_Copy (0x1008FF57)
+ Qt::Key_Copy (0x010000CF)
"CrSel" [3]The Cursor Select key, CrSel.VK_CRSEL (0xF7)GDK_KEY_3270_CursorSelect (0xFD1C)
"Cut"The Cut key (on certain extended keyboards).APPCOMMAND_CUTGDK_KEY_Cut (0x1008FF58)
+ Qt::Key_Cut (0x010000D0)
"Delete" [2]The Delete key, Del.VK_DELETE (0x2E)kVK_ForwardDelete (0x75) [1]GDK_KEY_Delete (0xFFFF)
+ GDK_KEY_KP_Delete (0xFF9F)
+ Qt::Key_Delete (0x01000007)		KEYCODE_FORWARD_DEL (112)
"EraseEof"Erase to End of Field. Deletes all characters from the current cursor position to the end of the current field.VK_EREOF (0xF9)GDK_KEY_3270_ExSelect (0xFD1B)
"ExSel" [4]The ExSel (Extend Selection) key.VK_EXSEL (0xF8)GDK_KEY_3270_ExSelect (0xFD1B)
"Insert"The Insert key, Ins. Toggles  between inserting and overwriting text.VK_INSERT (0x2D)GDK_KEY_Insert (0xFF63)
+ GDK_KEY_KP_Insert (0xFF9E)
+ Qt::Key_Insert (0x01000006)		KEYCODE_INSERT (124)
"Paste"Paste from the clipboard.APPCOMMAND_PASTEGDK_KEY_Paste (0x1008FF6D)
+ Qt::Key_Paste (0x010000E2)
"Redo"Redo the last action.APPCOMMAND_REDOGDK_KEY_Redo (0xFF66)
"Undo"Undo the last action.APPCOMMAND_UNDOGDK_KEY_Undo (0xFF65)
+ +

[1] On keyboards without a dedicated Del key, the Mac generates the "Delete" value when Fn is pressed in tandem with Delete (which is Backspace on other platforms).

+ +

[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier use "Del" instead of "Delete" for the Del key.

+ +

[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value "Crsel" instead of "CrSel" when the CrSel key is pressed.

+ +

[4] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value "Exsel" instead of "ExSel" when the ExSel key is pressed.

+ +

UI keys

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Accept"The Accept, Commit, or OK key or button. Accepts the currently selected option or input method sequence conversion.VK_ACCEPT (0x1E)KEYCODE_DPAD_CENTER (23)
"Again"The Again key. Redoes or repeats a previous action.GDK_KEY_Redo (0xFF66)
"Attn" [4]The Attn (Attention) key.VK_OEM_ATTN (0xF0)GDK_KEY_3270_Attn (0xFD0E)
"Cancel" [1]The Cancel key.GDK_KEY_Cancel (0xFF69)
"ContextMenu" [3]Shows the context menu. Typically found between the Windows (or OS) key and the Control key on the right side of the keyboard.VK_APPS (0x5D)kVK_PC_ContextMenu (0x6E)GDK_KEY_Menu (0xFF67)
+ Qt::Key_Menu (0x01000055)		KEYCODE_MENU (82)
"Escape" [2]The Esc (Escape) key. Typically used as an exit, cancel, or "escape this operation" button. Historically, the Escape character was used to signal the start of a special control sequence of characters called an "escape sequence."VK_ESCAPE (0x1B)kVK_Escape (0x35)GDK_KEY_Escape (0xFF1B)
+ Qt::Key_Escape (0x01000000)		KEYCODE_ESCAPE (111)
"Execute"The Execute key.VK_EXECUTE (0x2B)Qt::Key_Execute (0x01020003)
"Find"The Find key. Opens an interface (typically a dialog box) for performing a find/search operation.APPCOMMAND_FINDGDK_KEY_Find (0xFF68)
"Finish" [5]The Finish key.VK_OEM_FINISH (0xF1)
"Help"The Help key. Opens or toggles the display of help information.VK_HELP (0x2F)
+ APPCOMMAND_HELP		kVK_Help (0x72)GDK_KEY_Help (0xFF6A)
+ Qt::Key_Help (0x01000058)		KEYCODE_HELP (259)
"Pause"The Pause key. Pauses the current application or state, if applicable. +

Note : This shouldn't be confused with the "MediaPause" key value, which is used for media controllers, rather than to control applications and processes.

+ 		VK_PAUSE (0x13)GDK_KEY_Pause (0xFF13)
+ GDK_KEY_Break (0xFF6B)
+ Qt::Key_Pause (0x01000008)		KEYCODE_BREAK (121)
"Play"The Play key. Resumes a previously paused application, if applicable. +

Note : This shouldn't be confused with the "MediaPlay" key value, which is used for media controllers, rather than to control applications and processes.

+ 		VK_PLAY (0xFA)GDK_KEY_3270_Play (0xFD16)
+ Qt::Key_Play (0x01020005)
"Props"The Props (Properties) key.
"Select"The Select key.VK_SELECT (0x29)GDK_KEY_Select (0xFF60)KEYCODE_BUTTON_SELECT (109)
"ZoomIn" [6]The ZoomIn key.GDK_KEY_ZoomIn (0x1008FF8B)
+ Qt::Key_ZoomIn (0x010000F6)		KEYCODE_ZOOM_IN (168)
"ZoomOut" [6]The ZoomOut key.GDK_KEY_ZoomOut (0x1008FF8C)
+ Qt::Key_ZoomOut (0x010000F7)		KEYCODE_ZOOM_OUT (169)
+ +

[1] In Google Chrome 52, the Cancel key incorrectly returns the key code "Pause". This is fixed in Chrome 53. See Chrome bug 612749 for details.

+ +

[2] In Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, the Esc key returns "Esc" instead of "Escape".

+ +

[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier report "Apps" instead of "ContextMenu" for the context menu key.

+ +

[4] The Attn key generates the key code "Unidentified" on Internet Explorer (tested on release 9 and 11). Firefox and Google Chrome report the same, unless the Japanese keyboard layout is in effect, in which case it generates "KanaMode" instead.

+ +

[5] The Finish key gemerates the key code "Unidentified" on Internet Explorer (tested on release 9 and 11). Firefox reports the same, unless the Japanese keyboard layout is in effect, in which case it generates "Katakana" instead.

+ +

[6] Firefox didn't support the "ZoomIn" and "ZoomOut" keys until Firefox 37.

+ +

Device keys

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"BrightnessDown"The Brightness Down key. Typically used to reduce the brightness of the display.GDK_KEY_MonBrightnessDown (0x1008FF03)
+ Qt::Key_MonBrightnessDown (0x010000B3)		KEYCODE_BRIGHTNESS_DOWN (220)
"BrightnessUp"The Brightness Up key. Typically increases the brightness of the display.GDK_KEY_MonBrightnessUp (0x1008FF02)
+ Qt::Key_MonBrightnessUp (0x010000B2)		KEYCODE_BRIGHTNESS_UP (221)
"Eject"The Eject key. Ejects removable media (or toggles an optical storage device tray open and closed).GDK_KEY_Eject (0x1008FF2C)
+ Qt::Key_Eject (0x010000B9)		KEYCODE_MEDIA_EJECT (129)
"LogOff" [2]The LogOff key.GDK_KEY_LogOff (0x1008FF61)
+ Qt::Key_LogOff (0x010000D9)
"Power"The Power button or key, to toggle power on and off. +

Note : Not all systems pass this key through to to the user agent.

+ 		KEYCODE_POWER (26)
"PowerOff"The PowerOff or PowerDown key. Shuts off the system.GDK_KEY_PowerDown (0x1008FF21)
+ GDK_KEY_PowerOff (0x1008FF2A)
+ Qt::Key_PowerDown (0x0100010B)
+ Qt::Key_PowerOff (0x010000B7)
"PrintScreen"The PrintScreen or PrtScr key. Sometimes SnapShot. Captures the screen and prints it or saves it to disk.VK_SNAPSHOT (0x2C)GDK_KEY_3270_PrintScreen (0xFD1D)
+ GDK_KEY_Print (0xFF61)
+ GDK_KEY_Sys_Req (0xFF15)
+ Qt::Key_Print (0x01000009)
+ Qt::Key_SysReq (0x0100000A)		KEYCODE_SYSRQ (120)
"Hibernate" [2]The Hibernate key. This saves the state of the computer to disk and then shuts down; the computer can be returned to its previous state by restoring the saved state information.GDK_KEY_Hibernate (0x1008FFA8)
+ Qt::Key_Hibernate (0x01000108)
"Standby" [1]The Standby key; also known as Suspend or Sleep. This turns off the display and puts the computer in a low power consumption mode, without completely powering off.VK_SLEEP (0x5F)GDK_KEY_Standby (0x1008FF10)
+ GDK_KEY_Suspend (0x1008FFA7)
+ GDK_KEY_Sleep (0x1008FF2F)
+ Qt::Key_Standby (0x01000093)
+ Qt::Key_Suspend (0x0100010C)
+ Qt::Key_Sleep (0x01020004)		KEYCODE_SLEEP (223)
"WakeUp" [2]The WakeUp key; used to wake the computer from the hibernation or standby modes.GDK_KEY_WakeUp (0x1008FF2B)
+ Qt::Key_WakeUp (0x010000B8)		KEYCODE_WAKEUP (224)
+ +

[1] The Standby key is not supported by Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, so it is reported as "Unidentified".

+ +

[2] Prior to Firefox 37, this key generated the value "Unidentified".

+ +

IME and composition keys

+ +

Keys used when using an Input Method Editor (IME) to input text which can't readily be entered by simple keypresses, such as text in languages such as those which have more graphemes than there are character entry keys on the keyboard; common examples include Chinese, Japanese, Korean, and Hindi.

+ +

Some keys are common across multiple languages, while others exist only on keyboards targeting specific languages. In addition, not all keyboards have all of these keys.

+ +

Common IME keys

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"AllCandidates"The All Candidates key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input.GDK_KEY_MultipleCandidate (0xFF3D
+ Qt::Key_MultipleCandidate (0x0100113D)
"Alphanumeric"The Alphanumeric key.VK_OEM_ATTN (0xF0)GDK_KEY_Eisu_Shift (0xFF2F)
+ GDK_KEY_Eisu_toggle (0xFF30)
+ Qt::Key_Eisu_Shift (0x0100112f)
+ Qt::Key_Eisu_toggle (0x01001130)
"CodeInput"The Code Input key, which enables code input mode, which lets the user enter characters by typing their code points (their Unicode character numbers, typically).GDK_KEY_Codeinput (0xFF37)
+ Qt::Key_Codeinput (0x01001137)
"Compose"The Compose key.GDK_KEY_Multi_key (0xFF20) [1]
+ Qt::Key_Multi_key (0x01001120)
"Convert" [4]The Convert key, which instructs the IME to convert the current input method sequence into the resulting character.VK_CONVERT (0x1C)GDK_KEY_Henkan (0xFF23)
+ Qt::Key_Henkan (0x01001123)		KEYCODE_HENKAN (214)
"Dead"A dead "combining" key; that is, a key which is used in tandem with other keys to generate accented and other modified characters. If pressed by itself, it doesn't generate a character. If you wish to identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.See {{anch("Dead keycodes for Linux")}} below
"FinalMode"The Final (Final Mode) key is used on some Asian keyboards to enter final mode when using IMEs.VK_FINAL (0x18)
"GroupFirst"Switches to the first character group on an ISO/IEC 9995 keyboard. Each key may have multiple groups of characters, each in its own column. Pressing this key instructs the device to interpret keypresses as coming from the first column on subsequent keystrokes.GDK_KEY_ISO_First_Group (0xFE0C)
"GroupLast"Switches to the last character group on an ISO/IEC 9995 keyboard.GDK_KEY_ISO_Last_Group (0xFE0E)
"GroupNext" [4]Switches to the next character group on an ISO/IEC 9995 keyboard.GDK_KEY_ISO_Next_Group (0xFE08)KEYCODE_LANGUAGE_SWITCH (204)
"GroupPrevious"Switches to the previous character group on an ISO/IEC 9995 keyboard.GDK_KEY_ISO_Prev_Group (0xFE0A)
"ModeChange" [5]The Mode Change key. Toggles or cycles among input modes of IMEs.VK_MODECHANGE (0x1F)GDK_KEY_Mode_switch (0xFF7E)
+ GDK_KEY_script_switch (0xFF7E)
+ Qt::Key_Mode_switch (0x0100117E)		KEYCODE_SWITCH_CHARSET (95)
"NextCandidate"The Next Candidate function key. Selects the next possible match for the ongoing input.
"NonConvert" [2]The NonConvert ("Don't convert") key. This accepts the current input method sequence without running conversion when using an IME.VK_NONCONVERT (0x1D)GDK_KEY_Muhenkan (0xFF22)
+ Qt::Key_Muhenkan (0x01001122)
+  		KEYCODE_MUHENKAN (213)
"PreviousCandidate"The Previous Candidate key. Selects the previous possible match for the ongoing input.GDK_KEY_PreviousCandidate (0xFF3E)
+ Qt::Key_PreviousCandidate (0x0100113E)
"Process" [3]The Process key. Instructs the IME to process the conversion.VK_PROCESSKEY (0xE5)
"SingleCandidate" [4]The Single Candidate key. Enables single candidate mode (as opposed to multi-candidate mode); in this mode, only one candidate is displayed at a time.GDK_KEY_SingleCandidate (0xFF3C)
+ Qt::Key_SingleCandidate (0x0100113C)
+ +

[1] On the X Window System, the Compose key is called the Multi key.

+ +

[2] The NonConvert key is reported as "Nonconvert" instead of the correct "NonConvert" by Internet Explorer (tested on release 9 and 11) and Firefox versions 36 and earlier.

+ +

[3] The Process key currently returns "Unidentified" in Firefox and Internet Explorer. Google Chrome returns the value of the key as if IME were not in use.

+ +

[4] Prior to Firefox 37, these keys were "Unidentified".

+ +

[5] Firefox generates the key value "AltGraph" instead of "ModeChange".

+ +

Korean keyboards only

+ +

These keys are only available on Korean keyboards. There are other keys defined by various platforms for Korean keyboards, but these are the most common and are the ones identified by the UI Events specification.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"HangulMode"The Hangul (Korean character set) mode key, which toggles between Hangul and English entry modes.VK_HANGUL (0x15) [1]GDK_KEY_Hangul (0xFF31)
+ Qt::Key_Hangul (0x01001131)
"HanjaMode"Selects the Hanja mode, for converting Hangul characters to the more specific Hanja characters.VK_HANJA (0x19) [1]GDK_KEY_Hangul_Hanja (0xFF34)
+ Qt::Key_Hangul_Hanja (0x01001134)
"JunjaMode"Selects the Junja mode, in which Korean is represented using single-byte Latin characters.VK_JUNJA (0x17)GDK_KEY_Hangul_Jeonja (0xFF38)
+ Qt::Key_Hangul_Jeonja (0x01001138)
+ +

[1] VK_HANGUL and VK_KANA share the same numeric key value on Windows, as do VK_HANJA and VK_KANJI.

+ +

Japanese keyboards only

+ +

These keys are only available on Japanese keyboards.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Eisu" [1]The Eisu key. This key's purpose is defined by the IME, but may be used to close the IME.kVK_JIS_Eisu (0x66)GDK_KEY_Eisu_toggle (0xFF2F)
+ Qt::Key_Eisu_toggle (0x01001130)		KEYCODE_EISU (212)
"Hankaku" [3]The Hankaku (half-width characters) key.VK_OEM_AUTO (0xF3)GDK_KEY_Hankaku (0xFF29)
+ Qt::Key_Hankaku (0x01001129)
"Hiragana"The Hiragana key; selects Kana characters mode.VK_OEM_COPY (0xF2)GDK_KEY_Hiragana (0xFF25)
+ Qt::Key_Hiragana (0x01001125)
"HiraganaKatakana" [6]Toggles between the Hiragana and Katakana writing systems.GDK_KEY_Hiragana_Katakana (0xFF27)
+ Qt::Key_Hiragana_Katakana (0x01001127)		KEYCODE_KATAKANA_HIRAGANA (215)
"KanaMode"The Kana Mode (Kana Lock) key.VK_KANA (0x15) [2]
+ VK_ATTN (0xF6)		GDK_KEY_Kana_Lock (0xFF2D)
+ GDK_KEY_Kana_Shift (0xFF2E)
+ Qt::Key_Kana_Lock (0x0100112D)
+ Qt::Key_Kana_Shift (0x0100112E)
"KanjiMode"The Kanji Mode key. Enables entering Japanese text using the ideographic characters of Chinese origin.VK_KANJI [2]kVK_JIS_Kana (0x68)GDK_KEY_Kanji (0xFF21)
+ Qt::Key_Kanji (0x01001121)		KEYCODE_KANA (218)
"Katakana"The Katakana key.VK_OEM_FINISH (0xF1)GDK_KEY_Katakana (0xFF26)
+ Qt::Key_Katakana (0x01001126)
"Romaji" [5]The Romaji key; selects the Roman character set.VK_OEM_BACKTAB (0xF5)GDK_KEY_Romaji (0xFF24)
+ Qt::Key_Romaji (0x01001124)
"Zenkaku" [4]The Zenkaku (full width) characters key.VK_OEM_ENLW (0xF4)GDK_KEY_Zenkaku (0xFF28)
+ Qt::Key_Zenkaku (0x01001128)
"ZenkakuHanaku" [6]The Zenkaku/Hankaku (full width/half width) toggle key.GDK_KEY_Zenkaku_Hankaku (0xFF2A)
+ Qt::Zenkaku_Hankaku (0x0100112A)		 +

KEYCODE_ZENKAKU_HANKAKU (211)

+
+ +

[1] Prior to Firefox 37, the Eisu key was mapped to "RomanCharacters" by mistake.

+ +

[2] VK_HANGUL and VK_KANA share the same numeric key value on Windows, as do VK_HANJA and VK_KANJI.

+ +

[3] Prior to Firefox 37, the Hankaku (half-width) key generated the key value "HalfWidth" on Firefox. Also, this key generates the value "Unidentified" on Internet Explorer (tested on release 9 and 11).

+ +

[4] Internet Explorer (tested on release 9 and 11) reports "Unidentified" for the Zenkaku key; Firefox 36 and earlier identify this key as "FullWidth" on Japanese keyboard layouts and "Unidentified" on all other keyboard layouts. Firefox 37 and later, and all versions of Google Chrome, correctly return "Zenkaku".

+ +

[5] "Unidentified" in Internet Explorer (tested on release 9 and 11). Firefox 36 and earlier identify the Romaji key as "RomanCharacters" on Japanese keyboards and "Unidentified" for other keyboards; this is corrected to return "Romaji" in Firefox 37 and later.

+ +

[6] This key is reported as "Unidentified" prior to Firefox 37.

+ +

Dead keycodes for Linux

+ +

Linux generates accented characters using special dead keys; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the  {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.

+ +

You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK

+ +

The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CompositionEvent.data valueSymbolComments
GDK_KEY_dead_grave (0xFE50)
+ Qt::Key_Dead_Grave (0x01001250)		`
GDK_KEY_dead_acute (0xFE51)
+ Qt::Key_Dead_Acute (0x01001251)		´
GDK_KEY_dead_circumflex (0xFE52)
+ Qt::Key_Dead_Circumflex (0x01001252)		ˆ
GDK_KEY_dead_tilde (0xFE53)
+ Qt::Key_Dead_Tilde (0x01001253)		˜
GDK_KEY_dead_perispomeni (0xFE53) ͂
GDK_KEY_dead_macron (0xFE54)
+ Qt::Key_Dead_Macron (0x01001254)		¯
GDK_KEY_dead_breve (0xFE55)
+ Qt::Key_Dead_Breve (0x01001255)		˘
GDK_KEY_dead_abovedot (0xFE56)
+ Qt::Key_Dead_Abovedot (0x01001256)		˙
GDK_KEY_dead_diaeresis (0xFE57)
+ Qt::Key_Dead_Diaeresis (0x01001257)		¨Also called an umlaut.
GDK_KEY_dead_abovering (0xFE58)
+ Qt::Key_Dead_Abovering (0x01001258)		˚
GDK_KEY_dead_doubleacute (0xFE59)
+ Qt::Key_Dead_Doubleacute (0x01001259)		˝
GDK_KEY_dead_caron (0xFE5A)
+ Qt::Key_Dead_Caron (0x0100125A)		ˇAlso called a háček; used in Czech among other languages.
GDK_KEY_dead_cedilla (0xFE5B)
+ Qt::Key_Dead_Cedilla (0x0100125B)		¸
GDK_KEY_dead_ogonek (0xFE5C)
+ Qt::Key_Dead_Ogonek (0x0100125C)		˛Also called a nosinė; used in Polish and Old Irish.
GDK_KEY_dead_iota (0xFE5D)
+ Qt::Key_Dead_Iota (0x0100125D)		 ͅIota subscript.
GDK_KEY_dead_voiced_sound (0xFE5E)
+ Qt::Key_Dead_Voiced_Sound (0x0100125E)		゙
GDK_KEY_dead_semivoiced_sound (0xFE5F)
+ Qt::Key_Dead_Semivoiced_Sound (0x0100125F)		゚
GDK_KEY_dead_belowdot (0xFE60)
+ Qt::Key_Dead_Belowdot (0x01001260)		̣̣
GDK_KEY_dead_hook (0xFE61)
+ Qt::Key_Dead_Hook (0x01001261)		  ̡
GDK_KEY_dead_horn (0xFE62)
+ Qt::Key_Dead_Horn (0x01001262)		 ̛
GDK_KEY_dead_stroke (0xFE63) ̶̶
GDK_KEY_dead_abovecomma (0xFE64) ̓̓
GDK_KEY_dead_psili (0xFE64) ᾿
GDK_KEY_dead_abovereversedcomma (0xFE65)ʽ
GDK_KEY_dead_dasia (0xFE65)῾
GDK_KEY_dead_doublegrave (0xFE66) ̏
GDK_KEY_dead_belowring (0xFE67)˳
GDK_KEY_dead_belowmacron (0xFE68) ̱
GDK_KEY_dead_belowcircumflex (0xFE69)ꞈ
GDK_KEY_dead_belowtilde (0xFE6A)̰
GDK_KEY_dead_belowbreve (0xFE6B)̮
GDK_KEY_dead_belowdiaeresis (0xFE6C) ̤
GDK_KEY_dead_invertedbreve (0xFE6D)̯
GDK_KEY_dead_belowcomma (0xFE6E)̦
GDK_KEY_dead_currency (0xFE6F)
GDK_KEY_dead_a (0xFE80)
GDK_KEY_dead_A (0xFE81)
GDK_KEY_dead_e (0xFE82)
GDK_KEY_dead_E (0xFE83)
GDK_KEY_dead_i (0xFE84)
GDK_KEY_dead_I (0xFE85)
GDK_KEY_dead_o (0xFE86)
GDK_KEY_dead_O (0xFE87)
GDK_KEY_dead_u (0xFE88)
GDK_KEY_dead_U (0xFE89)
GDK_KEY_dead_small_schwa (0xFE8A)ə
GDK_KEY_dead_capital_schwa (0xFE8B)Ə
GDK_KEY_dead_greek (0xFE8C)
+ +

Function keys

+ +

While various platforms support different numbers of the general-purpose function keys, such as F1-F12 (or F1-F10, or F1-F15, or...), the first few are specifically defined as follows. If more function keys are available, their names continue the pattern here by continuing to increment the numeric portion of each key's name, so that, for example, "F24" is a valid key value.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key valueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"F1"The first general-purpose function key, F1.VK_F1 (0x70)kVK_F1 (0x7A)GDK_KEY_F1 (0xFFBE)
+ GDK_KEY_KP_F1 (0xFF91)
+ Qt::Key_F1 (0x01000030)		KEYCODE_F1 (131)
"F2"The F2 key.VK_F2 (0x71)kVK_F2 (0x78)GDK_KEY_F2 (0xFFBF)
+ GDK_KEY_KP_F2 (0xFF92)
+ Qt::Key_F2 (0x01000031)		KEYCODE_F2 (132)
"F3"The F3 key.VK_F3 (0x72)kVK_F3 (0x63)GDK_KEY_F3 (0xFFC0)
+ GDK_KEY_KP_F3 (0xFF93)
+ Qt::Key_F3 (0x01000032)		KEYCODE_F3 (133)
"F4"The F4 key.VK_F4 (0x73)kVK_F4 (0x76)GDK_KEY_F4 (0xFFC1)
+ GDK_KEY_KP_F4 (0xFF94)
+ Qt::Key_F4 (0x01000033)		KEYCODE_F4 (134)
"F5"The F5 key.VK_F5 (0x74)kVK_F5 (0x60)GDK_KEY_F5 (0xFFC2)
+ Qt::Key_F5 (0x01000034)		KEYCODE_F5 (135)
"F6"The F6 key.VK_F6 (0x75)kVK_F6 (0x61)GDK_KEY_F6 (0xFFC3)
+ Qt::Key_F6 (0x01000035)		KEYCODE_F6 (136)
"F7"The F7 key.VK_F7 (0x76)kVK_F7 (0x62)GDK_KEY_F7 (0xFFC4)
+ Qt::Key_F7 (0x01000036)		KEYCODE_F7 (137)
"F8"The F8 key.VK_F8 (0x77)kVK_F8 (0x64)GDK_KEY_F8 (0xFFC5)
+ Qt::Key_F8 (0x01000037)		KEYCODE_F8 (138)
"F9"The F9 key.VK_F9 (0x78)kVK_F9 (0x65)GDK_KEY_F9 (0xFFC6)
+ Qt::Key_F9 (0x01000038)		KEYCODE_F9 (139)
"F10"The F10 key.VK_F10 (0x79)kVK_F10 (0x6D)GDK_KEY_F10 (0xFFC7)
+ Qt::Key_F10 (0x01000039)		KEYCODE_F10 (140)
"F11"The F11 key.VK_F11 (0x7A)kVK_F11 (0x67)GDK_KEY_F11 (0xFFC8)
+ Qt::Key_F11 (0x0100003A)		KEYCODE_F11 (141)
"F12"The F12 key.VK_F12 (0x7B)kVK_F12 (0x6F)GDK_KEY_F12 (0xFFC9)
+ Qt::Key_F12 (0x0100003B)		KEYCODE_F12 (142)
"F13"The F13 key.VK_F13 (0x7C)kVK_F13 (0x69)GDK_KEY_F13 (0xFFCA)
+ Qt::Key_F13 (0x0100003C)		KEYCODE_F13
"F14"The F14 key.VK_F14 (0x7D)kVK_F14 (0x6B)GDK_KEY_F14 (0xFFCB)
+ Qt::Key_F14 (0x0100003D)		KEYCODE_F14
"F15"The F15 key.VK_F15 (0x7E)kVK_F15 (0x71)GDK_KEY_F15 (0xFFCC)
+ Qt::Key_F15 (0x0100003E)		KEYCODE_F15
"F16"The F16 key.VK_F16 (0x7F)kVK_F16 (0x6A)GDK_KEY_F16 (0xFFCD)
+ Qt::Key_F16 (0x0100003F)		KEYCODE_F16
"F17"The F17 key.VK_F17 (0x80)kVK_F17 (0x40)GDK_KEY_F17 (0xFFCE)
+ Qt::Key_F17 (0x01000040)		KEYCODE_F17
"F18"The F18 key.VK_F18 (0x81)kVK_F18 (0x4F)GDK_KEY_F18 (0xFFCF)
+ Qt::Key_F18 (0x01000041)		KEYCODE_F18
"F19"The F19 key.VK_F19 (0x82)kVK_F19 (0x50)GDK_KEY_F19 (0xFFD0)
+ Qt::Key_F19 (0x01000042)		KEYCODE_F19
"F20"The F20 key.VK_F20 (0x83)kVK_F20 (0x5A)GDK_KEY_F20 (0xFFD1)
+ Qt::Key_F20 (0x01000043)		KEYCODE_F20
"Soft1"The first general-purpose virtual function key.Qt::Key_Context1 (0x01100000)
"Soft2"The second general-purpose virtual function key.Qt::Key_Context2 (0x01100001)
"Soft3"The third general-purpose virtual function key.Qt::Key_Context3 (0x01100002)
"Soft4"The fourth general-purpose virtual function key.Qt::Key_Context4 (0x01100003)
+ +

Phone keys

+ +

These keys represent buttons which commonly exist on modern smartphones.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"AppSwitch"Presents a list of recently-used applications which lets the user change apps quickly.KEYCODE_APP_SWITCH (181)
"Call"The Call key; dials the number which has been entered.Qt::Key_Call (0x01100004)KEYCODE_CALL (5)
"Camera"The Camera key; activates the camera.Qt::Key_Camera (0x01100020)KEYCODE_CAMERA (27)
"CameraFocus"The Focus key; focuses the camera.Qt::Key_CameraFocus (0x01100021)KEYCODE_FOCUS (80)
"EndCall"The End Call or Hang Up button.Qt::Key_Hangup (0x01100005)KEYCODE_ENDCALL (6)
"GoBack"The Back button.KEYCODE_BACK (4)
"GoHome" [1]The Home button, which takes the user to the phone's main screen (usually an application launcher).KEYCODE_HOME (3)
"HeadsetHook"The Headset Hook key. This is typically actually a button on the headset which is used to hang up calls and play or pause media.Qt::Key_ToggleCallHangup (0x01100007)KEYCODE_HEADSETHOOK (79)
"LastNumberRedial"The Redial button, which redials the last-called number.Qt::Key_LastNumberRedial (0x01100009)
"Notification"The Notification key.KEYCODE_NOTIFICATION (83)
"MannerMode"A button which cycles among the notification modes: silent, vibrate, ring, and so forth.KEYCODE_MANNER_MODE (205)
"VoiceDial"The Voice Dial key. Initiates voice dialing.Qt::Key_VoiceDial (0x01100008)KEYCODE_VOICE_ASSIST (231)
+ +

[1] Prior to Firefox 37, the Home button generated a key code of "Exit". Starting in Firefox 37, the button generates the key code "MozHomeScreen".

+ +

Multimedia keys

+ +

The multimedia keys are extra buttons or keys for controlling media devices, found on some keyboards.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"ChannelDown"Switches to the previous channel.APPCOMMAND_MEDIA_CHANNEL_DOWNQt::Key_ChannelDown (0x01000119)KEYCODE_CHANNEL_DOWN (167)
"ChannelUp"Switches to the next channel.APPCOMMAND_MEDIA_CHANNEL_UPQt::Key_ChannelUp (0x01000118)KEYCODE_CHANNEL_UP (166)
"MediaFastForward" [2]Starts, continues, or increases the speed of fast forwarding the media.APPCOMMAND_MEDIA_FAST_FORWARDGDK_KEY_AudioForward (0x1008FF97)
+ Qt:Key_AudioForward (0x01000102)		KEYCODE_MEDIA_FAST_FORWARD (90)
"MediaPause"Pauses the currently playing media. Some older applications use simply "Pause" but this is not correct.APPCOMMAND_MEDIA_PAUSEGDK_KEY_AudioPause (0x1008FF31)
+ Qt::Key_MediaPause (0x1000085)		KEYCODE_MEDIA_PAUSE (127)
"MediaPlay"Starts or continues playing media at normal speed, if not already doing so. Has no effect otherwise.APPCOMMAND_MEDIA_PLAYGDK_KEY_AudioPlay (0x1008FF14)KEYCODE_MEDIA_PLAY (126)
"MediaPlayPause"Toggles between playing and pausing the current media.VK_MEDIA_PLAY_PAUSE (0xB3)
+ APPCOMMAND_MEDIA_PLAY_PAUSE		Qt::Key_MediaTogglePlayPause (0x1000086)KEYCODE_MEDIA_PLAY_PAUSE (85)
"MediaRecord"Starts or resumes recording media.APPCOMMAND_MEDIA_RECORDGDK_KEY_AudioRecord (0x1008FF1C)
+ Qt::Key_MediaRecord (0x01000084)		KEYCODE_MEDIA_RECORD (130)
"MediaRewind"Starts, continues, or increases the speed of rewinding the media.APPCOMMAND_MEDIA_REWINDGDK_KEY_AudioRewind (0x1008FF3E)
+ Qt::Key_AudioRewind (0x010000C5)		KEYCODE_MEDIA_REWIND (89)
"MediaStop"Stops the current media activity (such as playing, recording, pausing, forwarding, or rewinding). Has no effect if the media is currently stopped already.VK_MEDIA_STOP (0xB2)
+ APPCOMMAND_MEDIA_STOP		GDK_KEY_AudioStop (0x1008FF15)
+ Qt::Key_MediaStop (0x01000081)		KEYCODE_MEDIA_STOP (86)
"MediaTrackNext" [1]Seeks to the next media or program track.VK_MEDIA_NEXT_TRACK (0xB0)
+ APPCOMMAND_MEDIA_NEXTTRACK		GDK_KEY_AudioNext (0x1008FF17)
+ Qt::Key_MediaNext (0x01000083)		KEYCODE_MEDIA_NEXT (87)
"MediaTrackPrevious" [1]Seeks to the previous media or program track.VK_MEDIA_PREV_TRACK (0xB1)
+ APPCOMMAND_MEDIA_PREVIOUSTRACK		GDK_KEY_AudioPrev (0x1008FF16)
+ Qt::Key_MediaPrevious (0x01000082)		KEYCODE_MEDIA_PREVIOUS (88)
+ +

[1] Internet Explorer, Edge, and Firefox (36 and earlier) use "MediaNextTrack" and "MediaPreviousTrack" instead of "MediaTrackNext" and "MediaTrackPrevious".

+ +

[2] Prior to Firefox 37, Firefox generated the key code "FastFwd" on some platforms and "Unidentified" on others instead of "MediaFastForward".

+ +

Audio control keys

+ +

These media keys are used specifically for controlling audio.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"AudioBalanceLeft"Adjusts audio balance toward the left.VK_AUDIO_BALANCE_LEFT
"AudioBalanceRight"Adjusts audio balance twoard the right.VK_AUDIO_BALANCE_RIGHT
"AudioBassDown"Decreases the amount of bass.APPCOMMAND_BASS_DOWN
"AudioBassBoostDown"Reduces bass boosting or cycles downward through bass boost modes or states.VK_BASS_BOOST_DOWN
"AudioBassBoostToggle"Toggles bass boosting on and off.APPCOMMAND_BASS_BOOST
"AudioBassBoostUp"Increases the amoung of bass boosting, or cycles upward through a set of bass boost modes or states.VK_BASS_BOOST_UP
"AudioBassUp"Increases the amount of bass.APPCOMMAND_BASS_UP
"AudioFaderFront"Adjusts the audio fader toward the front.VK_FADER_FRONT
"AudioFaderRear"Adjustts the audio fader toward the rear.VK_FADER_REAR
"AudioSurroundModeNext"Selects the next available surround sound mode.VK_SURROUND_MODE_NEXT
"AudioTrebleDown"Decreases the amount of treble.APPCOMMAND_TREBLE_DOWN
"AudioTrebleUp"Increases the amount of treble.APPCOMMAND_TREBLE_UP
"AudioVolumeDown" [1]Decreases the audio volume.VK_VOLUME_DOWN (0xAE)
+ APPCOMMAND_VOLUME_DOWN		kVK_VolumeDown (0x49)GDK_KEY_AudioLowerVolume (0x1008FF11)
+ Qt::Key_VolumeDown (0x01000070)		KEYCODE_VOLUME_DOWN (25)
"AudioVolumeMute" [1]Mutes the audio.VK_VOLUME_MUTE (0xAD)
+ APPCOMMAND_VOLUME_MUTE		kVK_Mute (0x4A)GDK_KEY_AudioMute (0x1008FF12)
+ Qt::Key_VolumeMute (0x01000071)		KEYCODE_VOLUME_MUTE (164)
"AudioVolumeUp" [1]Increases the audio volume.VK_VOLUME_UP (0xAF)
+ APPCOMMAND_VOLUME_UP		kVK_VolumeUp (0x48)GDK_KEY_AudioRaiseVolume (0x1008FF13)
+ Qt::Key_VolumeUp (0x01000072)		KEYCODE_VOLUME_UP (24)
"MicrophoneToggle"Toggles the microphone on and off.APPCOMMAND_MIC_ON_OFF_TOGGLE
"MicrophoneVolumeDown"Decreases the microphone's input volume.APPCOMMAND_MICROPHONE_VOLUME_DOWNQt::Key_MicVolumeDown (0x0100011E)
"MicrophoneVolumeMute"Mutes the microphone input.APPCOMMAND_MICROPHONE_VOLUME_MUTEGDK_KEY_AudioMicMute (0x1008FFB2)
+ Qt::Key_MicMute (0x01000113)		KEYCODE_MUTE (91)
"MicrophoneVolumeUp"Increases the microphone's input volume.APPCOMMAND_MICROPHONE_VOLUME_UPQt::Key_MicVolumeUp (0x0100011D)
+ +

[1] Internet Explorer, Edge, and Firefox (48 and earlier) use "VolumeUp", "VolumeDown", and "VolumeMute" instead of "AudioVolumeUp", "AudioVolumeDown", and "AudioVolumeMute". In Firefox 49 they were updated to match the latest specification. The old names are still used on Boot to Gecko.

+ +

TV control keys

+ +

These key values represent buttons or keys present on television devices, or computers or phones which have TV support.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"TV" [1]Switches into TV viewing mode.KEYCODE_TV (170)
"TV3DMode"Toggles 3D TV mode on and off.KEYCODE_3D_MODE (206)
"TVAntennaCable"Toggles between antenna and cable inputs.KEYCODE_TV_ANTENNA_CABLE (242)
"TVAudioDescription"Toggles audio description mode on and off.KEYCODE_TV_AUDIO_DESCRIPTION (252)
"TVAudioDescriptionMixDown"Decreases trhe audio description's mixing volume; reduces the volume of the audio descriptions relative to the program sound.KEYCODE_TV_AUDIO_DESCRIPTION_MIX_DOWN (254)
"TVAudioDescriptionMixUp"Increases the audio description's mixing volume; increases the volume of the audio descriptions relative to the program sound.KEYCODE_TV_AUDIO_DESCRIPTION_MIX_UP (253)
"TVContentsMenu"Displays or hides the media contents available for playback (this may be a channel guide showing the currently airing programs, or a list of media files to play).KEYCODE_TV_CONTENTS_MENU (256)
"TVDataService"Displays or hides the TV's data service menu.KEYCODE_TV_DATA_SERVICE (230)
"TVInput" [2]Cycles the input mode on an external TV.KEYCODE_TV_INPUT (178)
"TVInputComponent1"Switches to the input "Component 1."KEYCODE_TV_INPUT_COMPONENT_1 (249)
"TVInputComponent2"Switches to the input "Component 2."KEYCODE_TV_INPUT_COMPONENT_2 (250)
"TVInputComposite1"Switches to the input "Composite 1."KEYCODE_TV_INPUT_COMPOSITE_1 (247)
"TVInputComposite2"Switches to the input "Composite 2."KEYCODE_TV_INPUT_COMPOSITE_2 (248)
"TVInputHDMI1"Switches to the input "HDMI 1."KEYCODE_TV_INPUT_HDMI_1 (243)
"TVInputHDMI2"Switches to the input "HDMI 2."KEYCODE_TV_INPUT_HDMI_2 (244)
"TVInputHDMI3"Switches to the input "HDMI 3."KEYCODE_TV_INPUT_HDMI_3 (245)
"TVInputHDMI4"Switches to the input "HDMI 4."KEYCODE_TV_INPUT_HDMI_4 (246)
"TVInputVGA1"Switches to the input "VGA 1."KEYCODE_TV_INPUT_VGA_1 (251)
"TVMediaContext"The Media Context menu key.KEYCODE_TV_MEDIA_CONTEXT_MENU (257)
"TVNetwork"Toggle the TV's network connection on and off.KEYCODE_TV_NETWORK (241)
"TVNumberEntry"Put the TV into number entry mode.KEYCODE_TV_NUMBER_ENTRY (234)
"TVPower" [2]The device's power button.KEYCODE_TV_POWER (177)
"TVRadioService"Radio button.KEYCODE_TV_RADIO_SERVICE (232)
"TVSatellite"Satellite button.KEYCODE_TV_SATELLITE (237)
"TVSatelliteBS"Broadcast Satellite button.KEYCODE_TV_SATELLITE_BS (238)
"TVSatelliteCS"Communication Satellite button.KEYCODE_TV_SATELLITE_CS (239)
"TVSatelliteToggle"Toggles among available satellites.KEYCODE_TV_SATELLITE_SERVICE (240)
"TVTerrestrialAnalog"Selects analog terrestrial television service (analog cable or antenna reception).KEYCODE_TV_TERRESTRIAL_ANALOG (235)
"TVTerrestrialDigital"Selects digital terrestrial television service (digital cable or antenna receiption).KEYCODE_TV_TERRESTRIAL_DIGITAL (236)
"TVTimer"Timer programming button.KEYCODE_TV_TIMER_PROGRAMMING (258)
+ +

[1] Firefox added proper support for the "TV" key in Firefox 37; before that, this key generated the key code "Live".

+ +

[2] These keys were "Unidentified" until Firefox 37.

+ +

Media controller keys

+ +

Because modern remote controls for media devices often include buttons beyond the basic controls covered elsewhere in this document, key values are defined for a broad array of these additional buttons.

+ +

The values below are derived in part form a number of consumer electronics technical specifications:

+ + + +
+

Note : Remote controls typically include keys whose values are already defined elsewhere, such as under {{anch("Multimedia keys")}} or {{anch("Audio control keys")}}. Those keys' values will match what's documented in those tables.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"AVRInput" [3]Changes the input mode on an external audio/video receiver (AVR) unit.KEYCODE_AVR_INPUT (182)
"AVRPower" [3]Toggles the power on an external AVR unit.KEYCODE_AVR_POWER (181)
"ColorF0Red" [3]General-purpose media function key, color-coded red; this has index 0 among the colored keys.VK_COLORED_KEY_0KEYCODE_PROG_RED (183)
"ColorF1Green" [3]General-purpose media funciton key, color-coded green; this has index 1 among the colored keys.VK_COLORED_KEY_1KEYCODE_PROG_GREEN (184)
"ColorF2Yellow" [3]General-purpose media funciton key, color-coded yellow; this has index 2 among the colored keys.VK_COLORED_KEY_2KEYCODE_PROG_YELLOW (185)
"ColorF3Blue" [3]General-purpose media funciton key, color-coded blue; this has index 3 among the colored keys.VK_COLORED_KEY_3KEYCODE_PROG_BLUE (186)
"ColorF4Grey"General-purpose media funciton key, color-coded grey; this has index 4 among the colored keys.VK_COLORED_KEY_4KEYCODE_PROG_GREY
"ColorF5Brown"General-purpose media funciton key, color-coded brown; this has index 5 among the colored keys.VK_COLORED_KEY_5KEYCODE_PROG_BROWN
"ClosedCaptionToggle"Toggles closed captioning on and off.VK_CCKEYCODE_CAPTIONS (175)
"Dimmer"Adjusts the brightness of the device by toggling between two brightness levels or by cycling among multiple brightness levels.VK_DIMMERGDK_KEY_BrightnessAdjust (0x1008FF3B)
"DisplaySwap"Cycles among video sources.VK_DISPLAY_SWAP
"DVR"Switches the input source to the Digital Video Recorder (DVR).KEYCODE_DVR (173)
"Exit"The Exit button, which exits the curreent application or menu.VK_EXITQt::Key_Exit (0x0102000a)
"FavoriteClear0"Clears the program or content stored in the first favorites list slot.VK_CLEAR_FAVORITE_0
"FavoriteClear1"Clears the program or content stored in the second favorites list slot.VK_CLEAR_FAVORITE_1
"FavoriteClear2"Clears the program or content stored in the third favorites list slot.VK_CLEAR_FAVORITE_2
"FavoriteClear3"Clears the program or content stored in the fourth favorites list slot.VK_CLEAR_FAVORITE_3
"FavoriteRecall0"Selects (recalls) the program or content stored in the first favorites list slot.VK_RECALL_FAVORITE_0
"FavoriteRecall1"Selects (recalls) the program or content stored in the second favorites list slot.VK_RECALL_FAVORITE_1
"FavoriteRecall2"Selects (recalls) the program or content stored in the third favorites list slot.VK_RECALL_FAVORITE_2
"FavoriteRecall3"Selects (recalls) the program or content stored in the fourth favorites list slot.VK_RECALL_FAVORITE_3
"FavoriteStore0"Stores the current program or content into the first favorites list slot.VK_STORE_FAVORITE_0
"FavoriteStore1"Stores the current program or content into the second favorites list slot.VK_STORE_FAVORITE_1
"FavoriteStore2"Stores the current program or content into the third favorites list slot.VK_STORE_FAVORITE_2
"FavoriteStore3"Stores the current program or content into the fourth favorites list slot.VK_STORE_FAVORITE_3
"Guide"Toggles the display of the program or content guide.VK_GUIDEQt::Key_Guide (0x0100011A)KEYCODE_GUIDE (172)
"GuideNextDay"If the guide is currently displayed, this button tells the guide to display the next day's content.VK_NEXT_DAY
"GuidePreviousDay"If the guide is currently displayed, this button tells the guide to display the previous day's content.VK_PREV_DAY
"Info"Toggles the display of information about the currently selected content, program, or media.VK_INFOQt::Key_Info (0x0100011B)KEYCODE_INFO (165)
"InstantReplay"Tellls the device to perform an instant replay (typically some form of jumping back a short amount of time then playing it again, possibly but not usually in slow motion).VK_INSTANT_REPLAY
"Link"Opens content liniked to the current program, if available and possible.VK_LINK
"ListProgram"Lists the current program.VK_LIST
"LiveContent"Toggles a display listing currently available live content or programs.VK_LIVE
"Lock"Locks or unlocks the currently selected content or pgoram.VK_LOCK
"MediaApps"Presents a list of media applications, such as photo viewers, audio and video players, and games. [1]VK_APPS
"MediaAudioTrack"The Audio Track key.GDK_KEY_AudioCycleTrack (0x1008FF9B)
+ Qt::Key_AudioCycleTrack (0x01000106)		KEYCODE_MEDIA_AUDIO_TRACK (222)
"MediaLast"Jumps back to the last-viewed content, program, or other media.VK_LASTQt::Key_MediaLast (0x0100FFFF)KEYCODE_LAST_CHANNEL (229)
"MediaSkipBackward"Skips backward to the previous content or program.KEYCODE_MEDIA_SKIP_BACKWARD
"MediaSkipForward"Skips forward to the next content or program.VK_SKIPKEYCODE_MEDIA_SKIP_FORWARD
"MediaStepBackward"Steps backward to the previous content or program.KEYCODE_MEDIA_STEP_BACKWARD
"MediaStepForward"Steps forward to the next content or program.KEYCODE_MEDIA_SKIP_FORWARD
"MediaTopMenu"Top Menu button; opens the media's main menu, such as on a DVD or Blu-Ray disc.Qt::Key_TopMenu (0x0100010A)KEYCODE_MEDIA_TOP_MENU
"NavigateIn"Navigates into a submenu or option.KEYCODE_NAVIGATE_IN
"NavigateNext"Navigates to the next item.KEYCODE_NAVIGATE_NEXT
"NavigateOut"Navigates out of the current screen or menu.KEYCODE_NAVIGATE_OUT
"NavigatePrevious"Navigates to the previous item.KEYCODE_NAVIGATE_PREVIOUS
"NextFavoriteChannel"Cycles to the next channel in the favorites list.VK_NEXT_FAVORITE_CHANNEL
"NextUserProfile"Cycles to the next saved user profile, if this feature is supported and multiple profiles exist.VK_USER
"OnDemand"Opens the user interface for selecting on demand content or programs to watch.VK_ON_DEMAND
"Pairing"Starts the process of pairing the remote with a device to be controlled.KEYCODE_PAIRING (225)
"PinPDown"A button to move the picture-in-picture view downward.VK_PINP_DOWN
"PinPMove"A button to control moving the picture-in-picture view.VK_PINP_MOVE
"PinPToggle"Toggles display of th epicture-in-picture view on and off.VK_PINP_TOGGLE
"PinPUp"A button to move the picture-in-picture view upward.VK_PINP_UP
"PlaySpeedDown"Decreases the media playback rate.VK_PLAY_SPEED_DOWN
"PlaySpeedReset"Returns the media playback rate to normal.VK_PLAY_SPEED_RESET
"PlaySpeedUp"Increases the media playback rate.VK_PLAY_SPEED_UP
"RandomToggle"Toggles random media (also known as "shuffle mode") on and off.VK_RANDOM_TOGGLEGDK_KEY_AudioRandomPlay (0x1008FF99)
"RcLowBattery"A code sent when the remote control's battery is low. This doesn't actually correspond to a physical key at all.VK_RC_LOW_BATTERY
"RecordSpeedNext"Cycles among the available media recording speeds.VK_RECORD_SPEED_NEXT
"RfBypass"Toggles radio frequency (RF) input bypass mode on and off. RF bypass mode passes RF input directly to the RF output without any processing or filtering.VK_RF_BYPASS
"ScanChannelsToggle"Toggles the channel scan mode on and off; this is a mode which flips through channels automatically until the user stops the scan.VK_SCAN_CHANNELS_TOGGLE
"ScreenModeNext"Cycles through the available screen display modes.VK_SCREEN_MODE_NEXT
"Settings"Toggles display of the device's settings screen on and off.VK_SETTINGSQt::Key_Settings (0x0100011C)KEYCODE_SETTINGS
"SplitScreenToggle"Toggles split screen display mode on and off.VK_SPLIT_SCREEN_TOGGLEGDK_KEY_SplitScreen (0x1008FF7D)
+ Qt::Key_SplitScreen (0x010000ED)
"STBInput" [3]Cycles among input modes on an external set-top box (STB).KEYCODE_STB_INPUT (180)
"STBPower" [3]Toggles on and off an external STB.KEYCODE_STB_POWER (179)
"Subtitle"Toggles the display of subtitles on and off if they're available.VK_SUBTITLEGDK_KEY_Subtitle (0x1008FF9A)KEYCODE_CAPTIONS (175)
"Teletext"Toggles display of {{interwiki("wikipedia", "teletext")}}, if available.VK_TELETEXTKEYCODE_TV_TELETEXT (233)
"VideoModeNext" [3]Cycles through the available video modes.VK_VIDEO_MODE_NEXTGDK_KEY_Next_VMode (0x1008FE22)
"Wink"Causes the device to identify itself in some fashion, such as by flashing a light, briefly changing the brightness of indicator lights, or emitting a tone.VK_WINK
"ZoomToggle" [2]Toggles between full-screen and scaled content display, or otherwise change the magnification level.VK_ZOOM (0xFB)Qt::Key_Zoom (0x01020006)KEYCODE_TV_ZOOM_MODE (255)
+ +

[1] Don't confuse the media controller VK_APPS key with the Windows VK_APPS key, which is also known as VK_CONTEXT_MENU. That key is encoded as "ContextMenu".

+ +

[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier identify the zoom toggle button as "Zoom". Firefox 37 corrects this to "ZoomToggle".

+ +

[3] These keys were "Unidentified" until Firefox 37.

+ +

Speech recognition keys

+ +

These special multimedia keys are used to control speech recognition features.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"SpeechCorrectionList" [1]Presents a list of possible corrections for a word which was incorrectly identified.APPCOMMAND_CORRECTION_LIST
"SpeechInputToggle" [2]Toggles between dictation mode and command/control mode. This lets the speech engine know whether to interpret spoken words as input text or as commands.APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE
+ +

[1] The APPCOMMAND_CORRECTION_LIST command on Windows generates "Unidentified" on Firefox.

+ +

[2] The APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE command on Windows generates "Unidentified" on Firefox.

+ +

Document keys

+ +

These keys control documents. In the specification, they're included in other sets of keys, such as the media keys, but they make more sense when considered to be their own category.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Close" [1]Closes the current document or message. Must not exit the application.APPCOMMAND_CLOSEGDK_KEY_Close (0x1008FF56)
+ Qt::Key_Close (0x010000CE)		KEYCODE_MEDIA_CLOSE (128)
"New" [1]Creates a new document or message.APPCOMMAND_NEWGDK_KEY_New (0x1008FF68)
+ Qt::Key_New (0x01000120)
"Open" [1]Opens an existing document or message.APPCOMMAND_OPENGDK_KEY_Open (0x1008FF6B)
+ Qt::Key_Open (0x01000121)
"Print"Prints the current document or message.APPCOMMAND_PRINTGDK_KEY_Print (0xFF61)
+ Qt::Print (0x01000009)
"Save" [1]Saves the current document or message.APPCOMMAND_SAVEGDK_KEY_Save (0x1008FF77)
+ Qt::Key_Save (0x010000EA)
"SpellCheck" [1]Starts spell checking the current document.APPCOMMAND_SPELL_CHECKGDK_KEY_Spell (0x1008FF7C)
+ Qt::Key_Spell (0x010000EC)
"MailForward" [1]Opens the user interface to forward a message.APPCOMMAND_FORWARD_MAILGDK_KEY_MailForward (0x1008FF90)
+ Qt::Key_MailForward (0x010000FB)
"MailReply" [1]Opens the user interface to reply to a message.APPCOMMAND_REPLY_TO_MAILGDK_KEY_Reply (0x1008FF72)
+ Qt::Key_Reply (0x010000E5)
"MailSend" [1]Sends the current message.APPCOMMAND_SEND_MAILGDK_KEY_Send (0x1008FF7B)
+ Qt::Key_Send (0x010000EB)
+ +

[1] Prior to Firefox 37, this key generated the key value "Unidentified".

+ +

Application selector keys

+ +

Some keyboards offer special keys for launching or switching to certain common applications. Key values for those are listed here.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"LaunchCalculator" [5]The Calculator key, often labeled with an icon. This is often used as a generic application launcher key (APPCOMMAND_LAUNCH_APP2).APPCOMMAND_LAUNCH_APP2GDK_KEY_Calculator (0x1008FF1D)
+ Qt::Key_Calculator (0x010000CB)		KEYCODE_CALCULATOR (210)
"LaunchCalendar" [5]The Calendar key, often labeled with an icon.GDK_KEY_Calendar (0x1008FF20)
+ Qt::Key_Calendar (0x010000E4)		KEYCODE_CALENDAR (208)
"LaunchContacts"The Contacts key.KEYCODE_CONTACTS (207)
"LaunchMail"The Mail key. This is often displayed with an icon.VK_LAUNCH_MAIL (0xB4)
+ APPCOMMAND_LAUNCH_MAIL		GDK_KEY_Mail (0x1008FF19)
+ Qt::Key_LaunchMail (0x010000A0)		KEYCODE_ENVELOPE (65)
"LaunchMediaPlayer" [1]The Media Player key.VK_LAUNCH_MEDIA_SELECT (0xB5)
+ APPCOMMAND_LAUNCH_MEDIA_SELECT		GDK_KEY_CD (0x1008FF53)
+ GDK_KEY_Video (0x1008FF87)
+ GDK_KEY_AudioMedia (0x1008FF32)
+ Qt::Key_LaunchMedia (0x010000A1)
"LaunchMusicPlayer" [5]The Music Player key, often labeled with an icon.GDK_KEY_Music (0x1008FF92)
+ Qt::Key_Music (0x010000FD)		KEYCODE_MUSIC (209)
"LaunchMyComputer" [5]The My Computer key on Windows keyboards. This is often used as a generic application launcher key (APPCOMMAND_LAUNCH_APP1).APPCOMMAND_LAUNCH_APP1GDK_KEY_MyComputer (0x1008FF33)
+ GDK_KEY_Explorer (0x1008FF5D)
"LaunchPhone"The Phone key, to open the phone dialer application if one is present.GDK_KEY_Phone (0x1008FF6E)
+ Qt::Key_Phone (0x010000E3)
"LaunchScreenSaver" [5]The Screen Saver key.GDK_KEY_ScreenSaver (0x1008FF2D)
+ Qt::Key_ScreenSaver (0x010000BA)
"LaunchSpreadsheet" [4]The Spreadsheet key. This key may be labeled with an icon.GDK_KEY_Excel (0x1008FF5C)
+ Qt::Key_Excel (0x010000D4)
"LaunchWebBrowser" [4]The Web Browser key. This key is frequently labeled with an icon.GDK_KEY_WWW (0x1008FF2E)
+ Qt::Key_WWW (0x010000BB)		KEYCODE_EXPLORER (64)
"LaunchWebCam" [5]The WebCam key. Opens the webcam application.GDK_KEY_WebCam (0x1008FF8F)
+ Qt::Key_WebCam (0x010000FA)
"LaunchWordProcessor" [5]The Word Processor key. This may be an icon of a specific word processor application, or a generic document icon.GDK_KEY_Word (0x1008FF89)
+ Qt::Key_Word (0x010000F4)
"LaunchApplication1" [2]The first generic application launcher button.VK_LAUNCH_APP1 (0xB6)
+ APPCOMMAND_LAUNCH_APP1		GDK_KEY_Launch0 (0x1008FF40)
+ Qt::Key_Launch0 (0x010000A2)
"LaunchApplication2" [3]The second generic application launcher button.VK_LAUNCH_APP2 (0xB7)
+ APPCOMMAND_LAUNCH_APP2		GDK_KEY_Launch1 (0x1008FF41)
+ Qt::Key_Launch1 (0x010000A3)
"LaunchApplication3"The third generic application launcher button.GDK_KEY_Launch2 (0x1008FF42)
+ Qt::Key_Launch2 (0x010000A4)
"LaunchApplication4"The fourth generic application launcher button.GDK_KEY_Launch3 (0x1008FF43)
+ Qt::Key_Launch3 (0x010000A5)
"LaunchApplication5"The fifth generic application launcher button.GDK_KEY_Launch4 (0x1008FF44)
+ Qt::Key_Launch4 (0x010000A6)
"LaunchApplication6"The sixth generic application launcher button.GDK_KEY_Launch5 (0x1008FF45)
+ Qt::Key_Launch5 (0x010000A7)
"LaunchApplication7"The seventh generic application launcher button.GDK_KEY_Launch6 (0x1008FF46)
+ Qt::Key_Launch6 (0x010000A8)
"LaunchApplication8"The eighth generic application launcher button.GDK_KEY_Launch7 (0x1008FF47)
+ Qt::Key_Launch7 (0x010000A9)
"LaunchApplication9"The ninth generic application launcher button.GDK_KEY_Launch8 (0x1008FF48)
+ Qt::Key_Launch8 (0x010000AA)
"LaunchApplication10"The 10th generic application launcher button.GDK_KEY_Launch9 (0x1008FF49)
+ Qt::Key_Launch9 (0x010000AB)
"LaunchApplication11"The 11th generic application launcher button.GDK_KEY_LaunchA (0x1008FF4A)
+ Qt::Key_LaunchA (0x010000AC)
"LaunchApplication12"The 12th generic application launcher button.GDK_KEY_LaunchB (0x1008FF4B)
+ Qt::Key_LaunchB (0x010000AD)
"LaunchApplication13"The 13th generic application launcher button.GDK_KEY_LaunchC (0x1008FF4C)
+ Qt::Key_LaunchC (0x010000AE)
"LaunchApplication14"The 14th generic application launcher button.GDK_KEY_LaunchD (0x1008FF4D)
+ Qt::Key_LaunchD (0x010000AF)
"LaunchApplication15"The 15th generic application launcher button.GDK_KEY_LaunchE (0x1008FF4E)
+ Qt::Key_LaunchE (0x010000B0)
"LaunchApplication16"The 16th generic application launcher button.GDK_KEY_LaunchF (0x1008FF4F)
+ Qt::Key_LaunchF (0x010000B1)
+ +

[1] Internet Explorer, Edge, and Firefox (36 and earlier) use "SelectMedia" instead of "LaunchMediaPlayer". Firefox 37 through Firefox 48 use "MediaSelect". Firefox 49 has been updated to match the latest specification, and to return "LaunchMediaPlayer".

+ +

[2] Google Chrome 57 and earlier returned "LaunchMyComputer" instead of "LaunchApplication1". See Chrome Bug 612743 for more information.

+ +

[3] Google Chrome 57 and earlier returned "LaunchCalculator" instead of "LaunchApplication2". See Chrome Bug 612743 for more information.

+ +

[4] Prior to Firefox 37, Firefox returned the key code "LaunchApplication1" instead of "LaunchWebBrowser" for the Web browser key.

+ +

[5] Firefox introduced support for this key in Firefox 37; prior to that, this key was reported as "Unidentified".

+ +

Browser control keys

+ +

Some keyboards include special keys for controlling Web browsers. Those keys follow.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"BrowserBack"Navigates to the previous content or page in the current Web view's history.VK_BROWSER_BACK (0xA6)
+ APPCOMMAND_BROWSER_BACKWARD		GDK_KEY_Back (0x1008FF26)
+ Qt::Key_Back (0x01000061)		KEYCODE_BACK (4)
"BrowserFavorites" [1]Opens the user's list of bookmarks/favorites.VK_BROWSER_FAVORITES (0xAB)
+ APPCOMMAND_BROWSER_FAVORITES		GDK_KEY_Favorites (0x1008FF30)
+ GDK_KEY_MySites (0x1008FF67)
+ Qt::Favorites (0x01000091)		KEYCODE_BOOKMARK (174)
"BrowserForward"Navigates to the next content or page in the current Web view's history.VK_BROWSER_FORWARD (0xA7)
+ APPCOMMAND_BROWSER_FORWARD		GDK_KEY_Forward (0x1008FF27)
+ Qt::Key_Forward (0x01000062)		KEYCODE_FORWARD (125)
"BrowserHome"Navigates to the user's preferred home page.VK_BROWSER_HOME (0xAC)
+ APPCOMMAND_BROWSER_HOME		GDK_KEY_HomePage (0x1008FF18)
+ Qt::Key_HomePage (0x01000090)		KEYCODE_HOME (3)
"BrowserRefresh"Refreshes the current page or contentl.VK_BROWSER_REFRESH (0xA8)
+ APPCOMMAND_BROWSER_REFRESH		GDK_KEY_Refresh (0x1008FF29)
+ GDK_KEY_Reload (0x1008FF73)
"BrowserSearch"Activates the user's preferred search engine or the search interface within their browser.VK_BROWSER_SEARCH (0xAA)
+ APPCOMMAND_BROWSER_SEARCH		GDK_KEY_Search (0x1008FF1B)
+ Qt::Key_Search (0x01000092)		KEYCODE_SEARCH (84)
"BrowserStop"Stops loading the currently displayed Web view or content.VK_BROWSER_STOP (0xA9)
+ APPCOMMAND_BROWSER_STOP		GDK_KEY_Stop (0x1008FF28)
+ Qt::Key_Search (0x01000063)
+ +

[1] Prior to Firefox 37, this key's value was reported as "Unidentified".

+ +

Numeric keypad keys

+ +

These keys are found on the keyboard's numeric keypad. However, not all are present on every keyboard. Although typical numeric keypads have numeric keys from 0 to 9 (encoded as "0" through "9"), some multimedia keyboards include additional number keys for higher numbers.

+ +
+

Note :The 10 key, if present, generates events with the key value of "0".

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyboardEvent.key ValueDescriptionVirtual Keycode
WindowsMacLinuxAndroid
"Decimal" [1] {{obsolete_inline}}The decimal point key (typically . or , depending on the region. In newer browsers, this value to simply be the character generated by the decimal key (one of those two characters). [1]VK_DECIMAL (0x6E)kVK_ANSI_KeypadDecimal (0x41)GDK_KEY_KP_Decimal (0xFFAE)
+  		KEYCODE_NUMPAD_DOT (158)
"Key11"The 11 key found on certain media numeric keypads.
"Key12"The 12 key found on certain media numeric keypads.
"Multiply" [1] {{obsolete_inline}}The numeric keypad's multiplication key, *.VK_MULTIPLY (0x6A)kVK_ANSI_KeypadMultiply (0x43)GDK_KEY_KP_Multiply (0xFFAA)
+ Qt::Key_Multiply (0x0D7)		KEYCODE_NUMPAD_MULTIPLY (155)
"Add" [1] {{obsolete_inline}}The numeric keypad's addition key, +.VK_ADD (0x6B)kVK_ANSI_KeypadPlus (0x45)GDK_KEY_KP_Add (0xFFAB)KEYCODE_NUMPAD_ADD (157)
"Clear"The numeric keypad's Clear key.kVK_ANSI_KeypadClear (0x47)GDK_KEY_Clear (0xFF0B)
+ Qt::Key_Clear (0x0100000B)		KEYCODE_CLEAR (28)
"Divide" [1] {{obsolete_inline}}The numeric keypad's division key, /.VK_DIVIDE (0x6F)kVK_ANSI_KeypadDivide (0x4B)GDK_KEY_KP_Divide (0xFFAF)
+ Qt::Key_Slash (0x2F)		KEYCODE_NUMPAD_DIVIDE (154)
"Subtract" [1] {{obsolete_inline}}The numeric keypad's subtraction key, -.VK_SUBTRACT (0x6D)kVK_ANSI_KeypadMinus (0x4E)GDK_KEY_KP_Subtract (0xFFAD)KEYCODE_NUMPAD_SUBTRACT (156)
"Separator" [1]The numeric keypad's places separator character (in the United States, this is a comma, but elsewhere it is frequently a period).VK_SEPARATOR (0x6C)kVK_JIS_KeypadComma (0x5F)GDK_KEY_KP_Separator (0xFFAC)
+  		KEYCODE_NUMPAD_COMMA (159)
"0" through "9"The actual digit keys on the numeric keypad.VK_NUMPAD0 (0x60) - VK_NUMPAD9 (0x69)kVK_Keypad0 (0x52) - kVK_Keypad9 (0x5C)GDK_KEY_KP_0 (0xFFB0) - GDK_KEY_KP_9 (0xFFB9)KEYCODE_NUMPAD_0 (144) - KEYCODE_NUMPAD_9 (153)
+ +

[1] While older browsers used words like "Add", "Decimal", "Multiply", and so forth modern browsers identify these using the actual character ("+", ".", "*", and so forth).

diff --git a/files/fr/web/api/keyboardevent/keyboardevent/index.html b/files/fr/web/api/keyboardevent/keyboardevent/index.html deleted file mode 100644 index f488108a15..0000000000 --- a/files/fr/web/api/keyboardevent/keyboardevent/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: KeyboardEvent() -slug: Web/API/KeyboardEvent/KeyboardEvent -tags: - - API - - Clavier - - Constructeur - - DOM - - évènements -translation_of: Web/API/KeyboardEvent/KeyboardEvent ---- -

{{APIRef("DOM Events")}}

- -

Le constructeur KeyboardEvent() crée un nouveau {{domxref("KeyboardEvent")}}.

- -

Syntaxe

- -
 event = new KeyboardEvent(typeArg, KeyboardEventInit);
- -

Valeurs

- -
-
typeArg
-
Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}.
-
KeyboardEventInit{{optional_inline}}
-

Un dictionnaire KeyboardEventInit ayant les champs suivants :

-
    -
  • "key", optionnel et par défaut "", de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.key")}}.
    • -
  • "code", optionnel et par défaut "", de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.code")}}.
    • -
  • "location", optionnel et par défaut 0, de type unsigned long, qui définit la valeur de {{domxref("KeyboardEvent.location")}}.
    • -
  • "ctrlKey", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.ctrlKey")}}.
    • -
  • "shiftKey", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.shiftKey")}}.
    • -
  • "altKey", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.altKey")}}.
    • -
  • "metaKey", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.metaKey")}}.
    • -
  • "repeat", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.repeat")}}.
    • -
  • "isComposing", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.isComposing")}}.
    • -
  • "charCode", optionnel et par défaut 0, de type unsigned long, qui définit la valeur du déprécié {{domxref("KeyboardEvent.charCode")}}.
    • -
  • "keyCode", optionnel et par défaut 0, de type unsigned long, qui définit la valeur du déprécié {{domxref("KeyboardEvent.keyCode")}}.
    • -
  • "which", optionnel et par défaut 0, de type unsigned long, qui définit la valeur du déprécié {{domxref("KeyboardEvent.which")}}.
    • -
-
-
- -
-

Note : Le dictionnaire KeyboardEventInit accepte aussi les champs des dictionnaires {{domxref("UIEvent.UIEvent", "UIEventInit")}} et {{domxref("Event.Event", "EventInit")}}.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('UI Events','#interface-keyboardevent','KeyboardEvent()')}}{{Spec2('UI Events')}}Définition actuelle.
{{SpecName('DOM3 Events','#interface-KeyboardEvent','KeyboardEvent()')}}{{Spec2('DOM3 Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.KeyboardEvent.KeyboardEvent")}}

- -

Voir aussi

- -
    -
  • {{domxref("KeyboardEvent")}}, l'interface des objets qu'il construit.
    • -
diff --git a/files/fr/web/api/keyboardevent/keyboardevent/index.md b/files/fr/web/api/keyboardevent/keyboardevent/index.md new file mode 100644 index 0000000000..f488108a15 --- /dev/null +++ b/files/fr/web/api/keyboardevent/keyboardevent/index.md @@ -0,0 +1,82 @@ +--- +title: KeyboardEvent() +slug: Web/API/KeyboardEvent/KeyboardEvent +tags: + - API + - Clavier + - Constructeur + - DOM + - évènements +translation_of: Web/API/KeyboardEvent/KeyboardEvent +--- +

{{APIRef("DOM Events")}}

+ +

Le constructeur KeyboardEvent() crée un nouveau {{domxref("KeyboardEvent")}}.

+ +

Syntaxe

+ +
 event = new KeyboardEvent(typeArg, KeyboardEventInit);
+ +

Valeurs

+ +
+
typeArg
+
Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}.
+
KeyboardEventInit{{optional_inline}}
+

Un dictionnaire KeyboardEventInit ayant les champs suivants :

+
    +
  • "key", optionnel et par défaut "", de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.key")}}.
    • +
  • "code", optionnel et par défaut "", de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.code")}}.
    • +
  • "location", optionnel et par défaut 0, de type unsigned long, qui définit la valeur de {{domxref("KeyboardEvent.location")}}.
    • +
  • "ctrlKey", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.ctrlKey")}}.
    • +
  • "shiftKey", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.shiftKey")}}.
    • +
  • "altKey", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.altKey")}}.
    • +
  • "metaKey", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.metaKey")}}.
    • +
  • "repeat", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.repeat")}}.
    • +
  • "isComposing", optionnel et par défaut false, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.isComposing")}}.
    • +
  • "charCode", optionnel et par défaut 0, de type unsigned long, qui définit la valeur du déprécié {{domxref("KeyboardEvent.charCode")}}.
    • +
  • "keyCode", optionnel et par défaut 0, de type unsigned long, qui définit la valeur du déprécié {{domxref("KeyboardEvent.keyCode")}}.
    • +
  • "which", optionnel et par défaut 0, de type unsigned long, qui définit la valeur du déprécié {{domxref("KeyboardEvent.which")}}.
    • +
+
+
+ +
+

Note : Le dictionnaire KeyboardEventInit accepte aussi les champs des dictionnaires {{domxref("UIEvent.UIEvent", "UIEventInit")}} et {{domxref("Event.Event", "EventInit")}}.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('UI Events','#interface-keyboardevent','KeyboardEvent()')}}{{Spec2('UI Events')}}Définition actuelle.
{{SpecName('DOM3 Events','#interface-KeyboardEvent','KeyboardEvent()')}}{{Spec2('DOM3 Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.KeyboardEvent.KeyboardEvent")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("KeyboardEvent")}}, l'interface des objets qu'il construit.
    • +
diff --git a/files/fr/web/api/localfilesystem/index.html b/files/fr/web/api/localfilesystem/index.html deleted file mode 100644 index 9f4ca0c7c3..0000000000 --- a/files/fr/web/api/localfilesystem/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: LocalFileSystem -slug: Web/API/LocalFileSystem -translation_of: Web/API/LocalFileSystem ---- -
{{APIRef("File System API")}}{{non-standard_header()}}
- -

L'interface LocalFileSystem, appartenant à l'API File System fournit un accès à un système de fichier placé dans un bac à sable (sandboxed file system). Les méthodes de cette interface sont implémentées par les objets implémentants Window ou Worker.

- -

Concepts de base

- -

Créer un nouvel espace de stockage

- -

Il est possible de demander l'accès à un système de fichier dans un bac à sable en utilisant la méthode window.requestFileSystem(). Lorsque la création de cet espace est effectuée, une fonction de rappel (callback) est appelée avec un objet FileSystem contenant deux propriétés : le nom et la racine du système de fichier ainsi créé.

- -

Il est possible d'appeler cette méthode plusieurs fois pour différentes situations : on peut créer un espace de stockage temporaire et/ou un espace de stockage permanent (voir l'article sur les concepts de base pour approfondir). On peut ainsi créer un espace de stockage temporaire pour mettre en cache certains fichiers (des images par exemple) afin d'améliorer les performances ou créer un espace de stockage pour des données applicatives (ex. des brouillons de messages créés par l'utilisateur) qui ne devraient pas être supprimées avant d'être répliquées sur les serveurs distants.

- -

Utiliser un stockage persistent

- -

La méthode requestFileSystem() permet d'indiquer si on souhaite un stockage persistent ou temporaire. Un espace de stockage persistent est conservé dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. Pour créer un espace de stockage permanent, l'utilisateur doit fournir la permission à l'application de l'utiliser. En revanche, un espace de stockage temporaire peut être créé sans permission mais peut être libéré par le navigateur à tout moment.

- -

Pour utiliser un stockage permanent, Chrome expose la méthode requestQuota. Il faut invoquer cette méthode ainsi :

- -
var requestedBytes = 1024*1024*10; // 10MB
-
-navigator.webkitPersistentStorage.requestQuota (
-    requestedBytes, function(grantedBytes) {
-        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
-
-    }, function(e) { console.log('Error', e); }
-);
-
- -

L'utilisateur doit fournir la permission à l'application pour enregistrer des données locales avant que l'application puisse utiliser le stockage permanent. Une fois que l'utilisateur a autorisé l'accès, il n'est plus nécessaire d'appeler requestQuota() (des appels ultérieurs n'auront aucun effet).

- -

Une autre API, Quota Management, permet de connaître le quota alloué et l'espace consommé pour l'origine courante. On peut ainsi utiliser la méthode window.webkitPersistentStorage.queryUsageAndQuota(). Pour en savoir plus, voir cette réponse StackOverflow.

- -

Origine unique

- -

Le système de fichier est accessible depuis une seule origine. Cela signifie que votre application ne peut pas lire ou écrire des fichiers dans les systèmes de fichier éventuellement créés par d'autres applications. Par ailleurs, votre application ne peut pas accéder aux fichiers d'un répertoire arbitraire (ex. Mes Images, Mes Documents) sur le disque de l'utilisateur. Pour plus d'informations, voir l'article d'introduction aux concepts de base.

- -

Exemple

- -

Voici un fragment de code qui illustre comment demander l'accès à un stockage sur le système de fichier.

- -
// Gestion des préfixes spécifiques au navigateur
-window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
-
-// Le premier paramètre indique le type de stockage
-// Ensuite, on indique la taille de l'espace demandé (en octets)
-// initFs est la fonction à invoquer en cas de succès
-// errorHandler est la fonction à invoquer en cas d'erreur ou de refus d'accès
-
-window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler);
-
- -

Constantes

- - - - - - - - - - - - - - - - - - - - - -
ConstanteValeurDescription
TEMPORARY0Un espace de stockage temporaire qui peut être supprimé par le navigateur lorsque celui-ci l'estime nécessaire.
PERSISTENT1Un espace de stockage qui reste permanent dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. L'utilisateur doit fournir une permission avant qu'une application puisse utiliser ce type de stockage.
- -

Méthodes

- -

requestFileSystem()

- -

Cette méthode permet de demander l'accès à uyn système de fichier pour stocker des données. On peut ainsi accéder à un système de fichier placé dans un bac à sable en demandant un objet LocalFileSystem avec la méthode globale window.requestFileSystem().

- -
void requestFileSystem(
-  in unsigned short type,
-  in unsigned long long size,
-  in FileSystemCallback successCallback,
-  in ErrorCallback errorCallback
-);
- -

Paramètres

- -
-
type
-
Le type de stockage sur le système de fichier. La valeur de cet argument peut être TEMPORARY ou PERSISTENT.
-
size
-
L'espace de stockage, exprimé en octets, nécessaire à l'application.
-
successCallback
-
Une fonction de rappel à invoquer lorsque le navigateur fournit bien l'accès au système de fichier. Cette fonction reçoit en argument un objet FileSystem avec deux propriétés : -
    -
  • name - le nom unique, assigné par le navigateur au système de fichiers.
    • -
  • root - un objet DirectoryEntry en lecture seule qui représente la racine du système de fichier.
    • -
-
-
errorCallback
-
Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès n'est pas autorisé. Cette fonction reçoit un objet FileError comme argument.
-
- -

Valeur de retour

- -

void

- -

Exceptions

- -

Cette méthode peut lever une exception FileError avec le code suivant :

- - - - - - - - - - - - -
ExceptionDescription
SECURITY_ERRORL'application n'est pas autorisée à accéder à l'interface File System. Par exemple, il est interdit d'utiliser file://. Pour plus de détails, consulter l'article d'introduction aux concepts de base.
- -

resolveLocalFileSystemURL()

- -

Cette méthode permet de consulter une entrée pour un fichier ou un répertoire avec une URL locale.

- -
void resolveLocalFileSystemURL(
-  in DOMString url,
-  in EntryCallback successCallback,
-  in optional ErrorCallback errorCallback
-);
-
- -

Paramètres

- -
-
url
-
L'URL du fichier local ou du répertoire sur le système de fichier.
-
successCallback
-
Une fonction de rappel à invoquer lorsque le navigateur fournit le fichier ou le répertoire de l'URL indiquée.
-
errorCallback
-
Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès est refusé.
-
- -

Valeur de retour

- -

void

- -

Exceptions

- -

Cette méthode peut lever une exception FileError avec l'un des code suivants :

- - - - - - - - - - - - - - - - - - - - - - -
ExceptionDescription
ENCODING_ERRLa syntaxe de l'URL est invalide.
NOT_FOUND_ERRLa structure de l'URL est correcte mais elle réfère à une ressource qui n'existe pas.
SECURITY_ERRL'application n'est pas autorisée à accéder à l'interface pour le système de fichier.
- -

Compatibilité des navigateurs

- -

{{Compat("api.LocalFileSystem")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/localfilesystem/index.md b/files/fr/web/api/localfilesystem/index.md new file mode 100644 index 0000000000..9f4ca0c7c3 --- /dev/null +++ b/files/fr/web/api/localfilesystem/index.md @@ -0,0 +1,196 @@ +--- +title: LocalFileSystem +slug: Web/API/LocalFileSystem +translation_of: Web/API/LocalFileSystem +--- +
{{APIRef("File System API")}}{{non-standard_header()}}
+ +

L'interface LocalFileSystem, appartenant à l'API File System fournit un accès à un système de fichier placé dans un bac à sable (sandboxed file system). Les méthodes de cette interface sont implémentées par les objets implémentants Window ou Worker.

+ +

Concepts de base

+ +

Créer un nouvel espace de stockage

+ +

Il est possible de demander l'accès à un système de fichier dans un bac à sable en utilisant la méthode window.requestFileSystem(). Lorsque la création de cet espace est effectuée, une fonction de rappel (callback) est appelée avec un objet FileSystem contenant deux propriétés : le nom et la racine du système de fichier ainsi créé.

+ +

Il est possible d'appeler cette méthode plusieurs fois pour différentes situations : on peut créer un espace de stockage temporaire et/ou un espace de stockage permanent (voir l'article sur les concepts de base pour approfondir). On peut ainsi créer un espace de stockage temporaire pour mettre en cache certains fichiers (des images par exemple) afin d'améliorer les performances ou créer un espace de stockage pour des données applicatives (ex. des brouillons de messages créés par l'utilisateur) qui ne devraient pas être supprimées avant d'être répliquées sur les serveurs distants.

+ +

Utiliser un stockage persistent

+ +

La méthode requestFileSystem() permet d'indiquer si on souhaite un stockage persistent ou temporaire. Un espace de stockage persistent est conservé dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. Pour créer un espace de stockage permanent, l'utilisateur doit fournir la permission à l'application de l'utiliser. En revanche, un espace de stockage temporaire peut être créé sans permission mais peut être libéré par le navigateur à tout moment.

+ +

Pour utiliser un stockage permanent, Chrome expose la méthode requestQuota. Il faut invoquer cette méthode ainsi :

+ +
var requestedBytes = 1024*1024*10; // 10MB
+
+navigator.webkitPersistentStorage.requestQuota (
+    requestedBytes, function(grantedBytes) {
+        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
+
+    }, function(e) { console.log('Error', e); }
+);
+
+ +

L'utilisateur doit fournir la permission à l'application pour enregistrer des données locales avant que l'application puisse utiliser le stockage permanent. Une fois que l'utilisateur a autorisé l'accès, il n'est plus nécessaire d'appeler requestQuota() (des appels ultérieurs n'auront aucun effet).

+ +

Une autre API, Quota Management, permet de connaître le quota alloué et l'espace consommé pour l'origine courante. On peut ainsi utiliser la méthode window.webkitPersistentStorage.queryUsageAndQuota(). Pour en savoir plus, voir cette réponse StackOverflow.

+ +

Origine unique

+ +

Le système de fichier est accessible depuis une seule origine. Cela signifie que votre application ne peut pas lire ou écrire des fichiers dans les systèmes de fichier éventuellement créés par d'autres applications. Par ailleurs, votre application ne peut pas accéder aux fichiers d'un répertoire arbitraire (ex. Mes Images, Mes Documents) sur le disque de l'utilisateur. Pour plus d'informations, voir l'article d'introduction aux concepts de base.

+ +

Exemple

+ +

Voici un fragment de code qui illustre comment demander l'accès à un stockage sur le système de fichier.

+ +
// Gestion des préfixes spécifiques au navigateur
+window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
+
+// Le premier paramètre indique le type de stockage
+// Ensuite, on indique la taille de l'espace demandé (en octets)
+// initFs est la fonction à invoquer en cas de succès
+// errorHandler est la fonction à invoquer en cas d'erreur ou de refus d'accès
+
+window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler);
+
+ +

Constantes

+ + + + + + + + + + + + + + + + + + + + + +
ConstanteValeurDescription
TEMPORARY0Un espace de stockage temporaire qui peut être supprimé par le navigateur lorsque celui-ci l'estime nécessaire.
PERSISTENT1Un espace de stockage qui reste permanent dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. L'utilisateur doit fournir une permission avant qu'une application puisse utiliser ce type de stockage.
+ +

Méthodes

+ +

requestFileSystem()

+ +

Cette méthode permet de demander l'accès à uyn système de fichier pour stocker des données. On peut ainsi accéder à un système de fichier placé dans un bac à sable en demandant un objet LocalFileSystem avec la méthode globale window.requestFileSystem().

+ +
void requestFileSystem(
+  in unsigned short type,
+  in unsigned long long size,
+  in FileSystemCallback successCallback,
+  in ErrorCallback errorCallback
+);
+ +

Paramètres

+ +
+
type
+
Le type de stockage sur le système de fichier. La valeur de cet argument peut être TEMPORARY ou PERSISTENT.
+
size
+
L'espace de stockage, exprimé en octets, nécessaire à l'application.
+
successCallback
+
Une fonction de rappel à invoquer lorsque le navigateur fournit bien l'accès au système de fichier. Cette fonction reçoit en argument un objet FileSystem avec deux propriétés : +
    +
  • name - le nom unique, assigné par le navigateur au système de fichiers.
    • +
  • root - un objet DirectoryEntry en lecture seule qui représente la racine du système de fichier.
    • +
+
+
errorCallback
+
Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès n'est pas autorisé. Cette fonction reçoit un objet FileError comme argument.
+
+ +

Valeur de retour

+ +

void

+ +

Exceptions

+ +

Cette méthode peut lever une exception FileError avec le code suivant :

+ + + + + + + + + + + + +
ExceptionDescription
SECURITY_ERRORL'application n'est pas autorisée à accéder à l'interface File System. Par exemple, il est interdit d'utiliser file://. Pour plus de détails, consulter l'article d'introduction aux concepts de base.
+ +

resolveLocalFileSystemURL()

+ +

Cette méthode permet de consulter une entrée pour un fichier ou un répertoire avec une URL locale.

+ +
void resolveLocalFileSystemURL(
+  in DOMString url,
+  in EntryCallback successCallback,
+  in optional ErrorCallback errorCallback
+);
+
+ +

Paramètres

+ +
+
url
+
L'URL du fichier local ou du répertoire sur le système de fichier.
+
successCallback
+
Une fonction de rappel à invoquer lorsque le navigateur fournit le fichier ou le répertoire de l'URL indiquée.
+
errorCallback
+
Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès est refusé.
+
+ +

Valeur de retour

+ +

void

+ +

Exceptions

+ +

Cette méthode peut lever une exception FileError avec l'un des code suivants :

+ + + + + + + + + + + + + + + + + + + + + + +
ExceptionDescription
ENCODING_ERRLa syntaxe de l'URL est invalide.
NOT_FOUND_ERRLa structure de l'URL est correcte mais elle réfère à une ressource qui n'existe pas.
SECURITY_ERRL'application n'est pas autorisée à accéder à l'interface pour le système de fichier.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.LocalFileSystem")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/location/assign/index.html b/files/fr/web/api/location/assign/index.html deleted file mode 100644 index 3e0476b3be..0000000000 --- a/files/fr/web/api/location/assign/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Location.assign() -slug: Web/API/Location/assign -tags: - - API - - JavaScript - - Location - - Méthode - - Reference - - WebAPI -translation_of: Web/API/Location/assign ---- -

{{ APIRef("Location") }}

- -

La méthode Location.assign() charge et affiche dans la fenêtre le document situé à l'URL spécifiée.

- -

Si l'action est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type SECURITY_ERROR est lancée. Cela se produit si l'origine du script appelant est différente de l'origine de la page initialement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.

- -

Si l'URL spécifiée n'est pas valide, une {{domxref("DOMException")}} de type SYNTAX_ERROR est lancée.

- -

Syntaxe

- -
object.assign(url);
-
- -

Paramètres

- -
-
url
-
Une {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.
-
- -

Examples

- -
// Navigue vers l'article Location.reload
-document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', "history.html#dom-location-assign", "Location.assign()")}}{{Spec2('HTML WHATWG')}}Pas de différence avec {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-assign", "Location.assign()")}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -

Compatibilité

- - - -

{{Compat("api.Location.assign")}}

- -

Voir aussi

- -
    -
  • L'interface {{domxref("Location")}} à laquelle appartient cette méthode.
    • -
  • Méthodes similaires : {{domxref("Location.replace()")}} et {{domxref("Location.reload()")}}.
    • -
diff --git a/files/fr/web/api/location/assign/index.md b/files/fr/web/api/location/assign/index.md new file mode 100644 index 0000000000..3e0476b3be --- /dev/null +++ b/files/fr/web/api/location/assign/index.md @@ -0,0 +1,71 @@ +--- +title: Location.assign() +slug: Web/API/Location/assign +tags: + - API + - JavaScript + - Location + - Méthode + - Reference + - WebAPI +translation_of: Web/API/Location/assign +--- +

{{ APIRef("Location") }}

+ +

La méthode Location.assign() charge et affiche dans la fenêtre le document situé à l'URL spécifiée.

+ +

Si l'action est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type SECURITY_ERROR est lancée. Cela se produit si l'origine du script appelant est différente de l'origine de la page initialement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.

+ +

Si l'URL spécifiée n'est pas valide, une {{domxref("DOMException")}} de type SYNTAX_ERROR est lancée.

+ +

Syntaxe

+ +
object.assign(url);
+
+ +

Paramètres

+ +
+
url
+
Une {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.
+
+ +

Examples

+ +
// Navigue vers l'article Location.reload
+document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', "history.html#dom-location-assign", "Location.assign()")}}{{Spec2('HTML WHATWG')}}Pas de différence avec {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-assign", "Location.assign()")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité

+ + + +

{{Compat("api.Location.assign")}}

+ +

Voir aussi

+ +
    +
  • L'interface {{domxref("Location")}} à laquelle appartient cette méthode.
    • +
  • Méthodes similaires : {{domxref("Location.replace()")}} et {{domxref("Location.reload()")}}.
    • +
diff --git a/files/fr/web/api/location/index.html b/files/fr/web/api/location/index.html deleted file mode 100644 index dc4e6e6a36..0000000000 --- a/files/fr/web/api/location/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Location -slug: Web/API/Location -tags: - - API - - HTML DOM - - Interface - - JavaScript - - Location - - Reference -translation_of: Web/API/Location ---- -
{{APIRef("HTML DOM")}}
- -

L'interface Location représente l'emplacement de l'objet auquel elle est liée. Les changements effectués dessus sont reflétés sur l'objet lié. Les deux interfaces {{domxref("Document")}} et {{domxref("Window")}} sont liées à une Location, accessible via {{domxref("Document.location")}} et {{domxref("Window.location")}} respectivement.

- -

Anatomie d'une Location

- -

HTML

- -
<span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span>
- -

CSS

- -
html, body {height:100%;}
-html {display:table; width:100%;}
-body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;}
-
-[title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;}
-
-[title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;}
-[title]:hover:before,
-:target:before {background:black; color:yellow;}
-
-[title] [title]:before {margin-top:1.5em;}
-[title] [title] [title]:before {margin-top:3em;}
-
-[title]:hover,
-:target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);}
- -

JavaScript

- -
[].forEach.call(document.querySelectorAll('[title][id]'), function (node) {
-  node.addEventListener("click", function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    window.location.hash = '#' + $(this).attr('id');
-  });
-});
-[].forEach.call(document.querySelectorAll('[title]'), function (node) {
-  node.addEventListener("click", function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    window.location.hash = '';
-  });
-});
- -

Result

- -

{{EmbedLiveSample('Anatomy_Of_Location')}}

- -

Propriétés

- -

L'interface Location n'hérite d'aucune propriété, mais implémente celles de {{domxref("URLUtils")}}.

- -
-
{{domxref("Location.href")}}
-
Une {{domxref("DOMString")}} contenant l'URL entière.
-
{{domxref("Location.protocol")}}
-
Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le ':' final.
-
{{domxref("Location.host")}}
-
Une {{domxref("DOMString")}} contenant l'hôte, c'est-à-dire le domaine, un ':', et le numéro de port de l'URL.
-
{{domxref("Location.hostname")}}
-
Une {{domxref("DOMString")}} contenant le domaine de l'URL.
-
{{domxref("Location.port")}}
-
Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.
-
{{domxref("Location.pathname")}}
-
Une {{domxref("DOMString")}} contenant un '/' initial suivi du chemin de l'URL.
-
{{domxref("Location.search")}}
-
Une {{domxref("DOMString")}} contenant un '?' suivi des paramètres de l'URL. Les navigateurs moderne fournissent URLSearchParams et URL.searchParams pour faciliter l'analyse des paramètres de la chaîne de requête (querystring).
-
{{domxref("Location.hash")}}
-
Une {{domxref("DOMString")}} contenant un '#' suivi de l'identifiant de fragment de l'URL.
-
{{domxref("Location.username")}} {{Obsolete_Inline}}
-
Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié avant le nom de domaine.
-
{{domxref("Location.password")}} {{Obsolete_Inline}}
-
Une {{domxref("DOMString")}} contenant le mot de passe spécifié avant le nom de domaine.
-
{{domxref("Location.origin")}} {{readOnlyInline}}
-
Retourne une {{domxref("DOMString")}} contenant la forme canonique de l'origine de la location.
-
- -

Méthodes

- -

L'interface Location n'hérite d'aucune méthode, mais implémente celles de {{domxref("URLUtils")}}.

- -
-
{{domxref("Location.assign()")}}
-
Charge la ressource située à l'URL passée en paramètre.
-
{{domxref("Location.reload()")}}
-
Recharge la ressource depuis l'URL actuelle. Son unique paramètre facultatif est un Boolean, qui, s'il est true, implique que la page est toujours rechargée depuis le serveur. Si ce paramètre est false ou non spécifié, le navigateur peut éventuellement recharger la page depuis son cache.
-
{{domxref("Location.replace()")}}
-
Remplace la ressource actuelle par celle à l'URL passée en paramètre. la différence avec la méthode assign() est que, après avoir utilisé replace(), la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton précédent pour y revenir.
-
{{domxref("Location.toString()")}}
-
Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf que toString() ne peut être utilisée pour modifier la valeur.
-
- -

Exemples

- -
// Crée un élèment ancre et utilise la propriété href dans le but de cet exemple
-// Une alternative plus correcte est de naviguer vers l'URL et d'utiliser document.location ou window.location
-var url = document.createElement('a');
-url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
-console.log(url.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
-console.log(url.protocol);  // https:
-console.log(url.host);      // developer.mozilla.org:8080
-console.log(url.hostname);  // developer.mozilla.org
-console.log(url.port);      // 8080
-console.log(url.pathname);  // /en-US/search
-console.log(url.search);    // ?q=URL
-console.log(url.hash);      // #search-results-close-container
-console.log(url.origin);    // https://developer.mozilla.org:8080
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Location")}}{{Spec2('HTML WHATWG')}}Pas de différence avec {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -

Compatibilité

- - - -

{{Compat("api.Location")}}

- -

Voir aussi

- -
    -
  • Deux méthodes qui créent un objet location : {{domxref("Window.location")}} et {{domxref("Document.location")}}.
    • -
  • Interfaces liées aux URL: {{domxref("URL")}}, {{domxref("URLSearchParams")}} et {{domxref("HTMLHyperlinkElementUtils")}}.
    • -
diff --git a/files/fr/web/api/location/index.md b/files/fr/web/api/location/index.md new file mode 100644 index 0000000000..dc4e6e6a36 --- /dev/null +++ b/files/fr/web/api/location/index.md @@ -0,0 +1,155 @@ +--- +title: Location +slug: Web/API/Location +tags: + - API + - HTML DOM + - Interface + - JavaScript + - Location + - Reference +translation_of: Web/API/Location +--- +
{{APIRef("HTML DOM")}}
+ +

L'interface Location représente l'emplacement de l'objet auquel elle est liée. Les changements effectués dessus sont reflétés sur l'objet lié. Les deux interfaces {{domxref("Document")}} et {{domxref("Window")}} sont liées à une Location, accessible via {{domxref("Document.location")}} et {{domxref("Window.location")}} respectivement.

+ +

Anatomie d'une Location

+ +

HTML

+ +
<span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span>
+ +

CSS

+ +
html, body {height:100%;}
+html {display:table; width:100%;}
+body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;}
+
+[title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;}
+
+[title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;}
+[title]:hover:before,
+:target:before {background:black; color:yellow;}
+
+[title] [title]:before {margin-top:1.5em;}
+[title] [title] [title]:before {margin-top:3em;}
+
+[title]:hover,
+:target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);}
+ +

JavaScript

+ +
[].forEach.call(document.querySelectorAll('[title][id]'), function (node) {
+  node.addEventListener("click", function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    window.location.hash = '#' + $(this).attr('id');
+  });
+});
+[].forEach.call(document.querySelectorAll('[title]'), function (node) {
+  node.addEventListener("click", function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    window.location.hash = '';
+  });
+});
+ +

Result

+ +

{{EmbedLiveSample('Anatomy_Of_Location')}}

+ +

Propriétés

+ +

L'interface Location n'hérite d'aucune propriété, mais implémente celles de {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.href")}}
+
Une {{domxref("DOMString")}} contenant l'URL entière.
+
{{domxref("Location.protocol")}}
+
Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le ':' final.
+
{{domxref("Location.host")}}
+
Une {{domxref("DOMString")}} contenant l'hôte, c'est-à-dire le domaine, un ':', et le numéro de port de l'URL.
+
{{domxref("Location.hostname")}}
+
Une {{domxref("DOMString")}} contenant le domaine de l'URL.
+
{{domxref("Location.port")}}
+
Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.
+
{{domxref("Location.pathname")}}
+
Une {{domxref("DOMString")}} contenant un '/' initial suivi du chemin de l'URL.
+
{{domxref("Location.search")}}
+
Une {{domxref("DOMString")}} contenant un '?' suivi des paramètres de l'URL. Les navigateurs moderne fournissent URLSearchParams et URL.searchParams pour faciliter l'analyse des paramètres de la chaîne de requête (querystring).
+
{{domxref("Location.hash")}}
+
Une {{domxref("DOMString")}} contenant un '#' suivi de l'identifiant de fragment de l'URL.
+
{{domxref("Location.username")}} {{Obsolete_Inline}}
+
Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié avant le nom de domaine.
+
{{domxref("Location.password")}} {{Obsolete_Inline}}
+
Une {{domxref("DOMString")}} contenant le mot de passe spécifié avant le nom de domaine.
+
{{domxref("Location.origin")}} {{readOnlyInline}}
+
Retourne une {{domxref("DOMString")}} contenant la forme canonique de l'origine de la location.
+
+ +

Méthodes

+ +

L'interface Location n'hérite d'aucune méthode, mais implémente celles de {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.assign()")}}
+
Charge la ressource située à l'URL passée en paramètre.
+
{{domxref("Location.reload()")}}
+
Recharge la ressource depuis l'URL actuelle. Son unique paramètre facultatif est un Boolean, qui, s'il est true, implique que la page est toujours rechargée depuis le serveur. Si ce paramètre est false ou non spécifié, le navigateur peut éventuellement recharger la page depuis son cache.
+
{{domxref("Location.replace()")}}
+
Remplace la ressource actuelle par celle à l'URL passée en paramètre. la différence avec la méthode assign() est que, après avoir utilisé replace(), la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton précédent pour y revenir.
+
{{domxref("Location.toString()")}}
+
Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf que toString() ne peut être utilisée pour modifier la valeur.
+
+ +

Exemples

+ +
// Crée un élèment ancre et utilise la propriété href dans le but de cet exemple
+// Une alternative plus correcte est de naviguer vers l'URL et d'utiliser document.location ou window.location
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org:8080
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // 8080
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org:8080
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Location")}}{{Spec2('HTML WHATWG')}}Pas de différence avec {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité

+ + + +

{{Compat("api.Location")}}

+ +

Voir aussi

+ +
    +
  • Deux méthodes qui créent un objet location : {{domxref("Window.location")}} et {{domxref("Document.location")}}.
    • +
  • Interfaces liées aux URL: {{domxref("URL")}}, {{domxref("URLSearchParams")}} et {{domxref("HTMLHyperlinkElementUtils")}}.
    • +
diff --git a/files/fr/web/api/location/reload/index.html b/files/fr/web/api/location/reload/index.html deleted file mode 100644 index 76d94b1efd..0000000000 --- a/files/fr/web/api/location/reload/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: 'Location : reload()' -slug: Web/API/Location/reload -translation_of: Web/API/Location/reload -browser-compat: api.Location.reload ---- -
{{ APIRef("HTML DOM") }}
- -

La méthode Location.reload() recharge la ressource depuis l'URL actuelle.

- -

Le rechargement peut être bloqué avec une exception DOMException SECURITY_ERROR. Cela se produit si l'origine du script qui invoque location.reload() est différente de l'origine de la page qui possède l'objet Location. Voir les règles sur l'origine pour plus d'informations.

- -

Syntaxe

- -
-location.reload();
-
- -

location.reload() n'a pas de paramètre

- -

Firefox prend en charge un paramètre booléen non-standard forceGet pour la méthode location.reload(), qui permet à Firefox de passer outre le cache et d'effectuer un rafraîchissement forcé du document. Toutefois, pour tous les autres navigateurs, tout argument utilisé en appelant location.reload() sera ignoré et n'aura aucun effet.

- -

Il est toutefois possible que vous rencontriez des occurrences de location.reload(true) dans du code existant basé sur l'hypothèse que ce rafraîchissement forcé aurait lieu dans tous les navigateurs. Une recherche GitHub "location.reload(true)" renvoie plusieurs centaines de milliers de résultats.

- -

Historiquement, une version de Netscape Navigator a introduit la prise en charge de cet argument et cela s'est retrouvé dans Firefox. À un moment, le groupe de travail du W3C sur les API Web a ouvert le sujet pour étudier son ajout à la spécification pour location.reload(). Toutefois, il n'a jamais été ajouté formellement.

- -

En résumé, ce paramètre booléen ne fait pas partie de la spécification actuelle location.reload() et n'en a en fait jamais fait partie.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/location/reload/index.md b/files/fr/web/api/location/reload/index.md new file mode 100644 index 0000000000..76d94b1efd --- /dev/null +++ b/files/fr/web/api/location/reload/index.md @@ -0,0 +1,42 @@ +--- +title: 'Location : reload()' +slug: Web/API/Location/reload +translation_of: Web/API/Location/reload +browser-compat: api.Location.reload +--- +
{{ APIRef("HTML DOM") }}
+ +

La méthode Location.reload() recharge la ressource depuis l'URL actuelle.

+ +

Le rechargement peut être bloqué avec une exception DOMException SECURITY_ERROR. Cela se produit si l'origine du script qui invoque location.reload() est différente de l'origine de la page qui possède l'objet Location. Voir les règles sur l'origine pour plus d'informations.

+ +

Syntaxe

+ +
+location.reload();
+
+ +

location.reload() n'a pas de paramètre

+ +

Firefox prend en charge un paramètre booléen non-standard forceGet pour la méthode location.reload(), qui permet à Firefox de passer outre le cache et d'effectuer un rafraîchissement forcé du document. Toutefois, pour tous les autres navigateurs, tout argument utilisé en appelant location.reload() sera ignoré et n'aura aucun effet.

+ +

Il est toutefois possible que vous rencontriez des occurrences de location.reload(true) dans du code existant basé sur l'hypothèse que ce rafraîchissement forcé aurait lieu dans tous les navigateurs. Une recherche GitHub "location.reload(true)" renvoie plusieurs centaines de milliers de résultats.

+ +

Historiquement, une version de Netscape Navigator a introduit la prise en charge de cet argument et cela s'est retrouvé dans Firefox. À un moment, le groupe de travail du W3C sur les API Web a ouvert le sujet pour étudier son ajout à la spécification pour location.reload(). Toutefois, il n'a jamais été ajouté formellement.

+ +

En résumé, ce paramètre booléen ne fait pas partie de la spécification actuelle location.reload() et n'en a en fait jamais fait partie.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/location/replace/index.html b/files/fr/web/api/location/replace/index.html deleted file mode 100644 index 90fa954e20..0000000000 --- a/files/fr/web/api/location/replace/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Location.replace() -slug: Web/API/Location/replace -tags: - - API - - JavaScript - - Méthode - - Reference -translation_of: Web/API/Location/replace ---- -

{{APIRef("Location")}}

-

La méthode Location.replace() remplace la ressource actuelle par celle présente à l'URL donnée. La différence avec la méthode {{domxref("Location.assign","assign()")}} est que, après avoir utilisé replace(), la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne sera pas en mesure d'utiliser le bouton précédent pour y revenir.

-

Si le remplacement est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type SECURITY_ERROR est lancée. Ceci se produit si l'origine du script appelant est différente de l'origine de la page originellement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.

-

Si l'URL donnée n'est pas valide, une {{domxref("DOMException")}} de type SYNTAX_ERROR est lancée.

-

Syntaxe

-
object.replace(url);
-
-

Paramètres

-
-
- url
-
- {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.
-
-

Exemples

-
// Navigue vers l'article Location.reload en remplaçant la page actuelle
-document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
-

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', "history.html#dom-location-replace", "Location.replace()")}}{{Spec2('HTML WHATWG')}}Pas de différence avec {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-replace", "Location.replace()")}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.IDBIndex")}}

- -

Voir aussi

- -
    -
  • L'interface {{domxref("Location")}} à laquelle appartient cette méthode.
    • -
  • Méthodes similaires : {{domxref("Location.assign()")}} et {{domxref("Location.reload()")}}.
    • -
diff --git a/files/fr/web/api/location/replace/index.md b/files/fr/web/api/location/replace/index.md new file mode 100644 index 0000000000..90fa954e20 --- /dev/null +++ b/files/fr/web/api/location/replace/index.md @@ -0,0 +1,58 @@ +--- +title: Location.replace() +slug: Web/API/Location/replace +tags: + - API + - JavaScript + - Méthode + - Reference +translation_of: Web/API/Location/replace +--- +

{{APIRef("Location")}}

+

La méthode Location.replace() remplace la ressource actuelle par celle présente à l'URL donnée. La différence avec la méthode {{domxref("Location.assign","assign()")}} est que, après avoir utilisé replace(), la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne sera pas en mesure d'utiliser le bouton précédent pour y revenir.

+

Si le remplacement est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type SECURITY_ERROR est lancée. Ceci se produit si l'origine du script appelant est différente de l'origine de la page originellement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.

+

Si l'URL donnée n'est pas valide, une {{domxref("DOMException")}} de type SYNTAX_ERROR est lancée.

+

Syntaxe

+
object.replace(url);
+
+

Paramètres

+
+
+ url
+
+ {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.
+
+

Exemples

+
// Navigue vers l'article Location.reload en remplaçant la page actuelle
+document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
+

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', "history.html#dom-location-replace", "Location.replace()")}}{{Spec2('HTML WHATWG')}}Pas de différence avec {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-replace", "Location.replace()")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.IDBIndex")}}

+ +

Voir aussi

+ +
    +
  • L'interface {{domxref("Location")}} à laquelle appartient cette méthode.
    • +
  • Méthodes similaires : {{domxref("Location.assign()")}} et {{domxref("Location.reload()")}}.
    • +
diff --git a/files/fr/web/api/media_streams_api/index.html b/files/fr/web/api/media_streams_api/index.html deleted file mode 100644 index b6e04f8156..0000000000 --- a/files/fr/web/api/media_streams_api/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: API MediaStream -slug: Web/API/Media_Streams_API -tags: - - API - - Audio - - Media - - Overview -translation_of: Web/API/Media_Streams_API -original_slug: WebRTC/MediaStream_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/media_streams_api/index.md b/files/fr/web/api/media_streams_api/index.md new file mode 100644 index 0000000000..b6e04f8156 --- /dev/null +++ b/files/fr/web/api/media_streams_api/index.md @@ -0,0 +1,82 @@ +--- +title: API MediaStream +slug: Web/API/Media_Streams_API +tags: + - API + - Audio + - Media + - Overview +translation_of: Web/API/Media_Streams_API +original_slug: WebRTC/MediaStream_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/mediadevices/getusermedia/index.html b/files/fr/web/api/mediadevices/getusermedia/index.html deleted file mode 100644 index c36f3740bf..0000000000 --- a/files/fr/web/api/mediadevices/getusermedia/index.html +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: MediaDevices.getUserMedia() -slug: Web/API/MediaDevices/getUserMedia -translation_of: Web/API/MediaDevices/getUserMedia ---- -
{{APIRef("WebRTC")}}
- -

La méthode MediaDevices.getUserMedia() invite l'utilisateur à autoriser l'utilisation d'une entrée multimédia qui produit un {{domxref("MediaStream")}} avec des pistes contenant les types de médias demandés. Ce flux peut inclure, par exemple, une piste vidéo (produite par une source matérielle ou vidéo virtuelle telle qu'une caméra, un dispositif d'enregistrement vidéo, un service de partage d'écran, etc.), une piste audio (de la même manière, produite par une source physique ou Source audio virtuelle comme un microphone, convertisseur A / D ou similaire) et éventuellement d'autres types de piste.

- -

Il renvoie un {{jsxref("Promise")}} qui est résolu avec succès si l'utilisateur donne son autorisation; {{domxref("MediaStream")}} est fourni à ce moment-là. Si l'utilisateur refuse ou si le média correspondant n'est pas disponible, le {{jsxref("Promise")}} est rejetée avec respectivement PermissionDeniedError ou NotFoundError.

- -
-

Note : Il est possible que le {{jsxref("Promise")}} renvoyé ne soit ni résolu ni rejeté, car l'utilisateur n'est pas tenu de faire un choix. .

-
- -

Généralement, vous accédez à l'objet {{domxref("MediaDevices")}} avec {{domxref("navigator.mediaDevices")}} , comme ceci:

- -
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
-  /* use the stream */
-}).catch(function(err) {
-  /* handle the error */
-});
- -

Syntaxe

- -
var promise = navigator.mediaDevices.getUserMedia(constraints);
-
- -

Paramètres

- -
-
constraints
-
-

Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de supports à demander, ainsi que toutes les exigences pour chaque type.

- -

Le paramètre constraints est un objet MediaStreamConstraints avec deux membres: video et audio , décrivant les types de média demandés. L'un ou l'autre ou les deux doivent être spécifiés. Si le navigateur ne trouve pas toutes les pistes multimédia avec les types spécifiés qui répondent aux contraintes fournies, la promesse renvoyée est rejetée avec NotFoundError .

- -

Les demandes suivantes sont audio et vidéo sans aucune exigence spécifique:

- - 
{ audio: true, video: true }
- -

Si true est spécifié pour un type de média, le flux résultant est requis pour obtenir ce type de piste. Si on ne peut pas l'obtenir pour une raison quelconque, l'appel à getUserMedia() entraînera une erreur.

- -

Alors que les informations sur les caméras et les microphones d'un utilisateur sont inaccessibles pour des raisons de confidentialité, une application peut demander les capacités de caméra et de microphone dont elle a besoin en utilisant des contraintes supplémentaires. Ce qui suit exprime une préférence pour la résolution de la caméra 1280x720:

- - 
{
-  audio: true,
-  video: { width: 1280, height: 720 }
-}
- -

Le navigateur essaiera d'honorer cela, mais peut renvoyer d'autres résolutions si une correspondance exacte n'est pas disponible, ou si l'utilisateur l'annule.

- -

Pour exiger une capacité, utilisez les mots-clés min , max ou exact (aka min == max ). Ce qui suit exige une résolution minimale de 1280x720:

- - 
{
-  audio: true,
-  video: {
-    width: { min: 1280 },
-    height: { min: 720 }
-  }
-}
- -

Si aucune caméra n'existe avec cette résolution ou plus haut, le {{jsxref("Promise")}} retourné sera rejeté avec OverconstrainedError.

- -

La raison de la différence de comportement est que les mots clés min , max et exact sont intrinsèquement obligatoires, alors que les valeurs simples et un mot-clé appelé ideal ne le sont pas. Voici un exemple plus complet:

- - 
{
-  audio: true,
-  video: {
-    width: { min: 1024, ideal: 1280, max: 1920 },
-    height: { min: 776, ideal: 720, max: 1080 }
-  }
-}
- -

Une valeur ideal , lorsqu'elle est utilisée, a une gravité, ce qui signifie que le navigateur essaiera de trouver le réglage (et la caméra, si vous en avez plus d'une), avec les valeurs les plus proches des valeurs idéales données.

- -

Les valeurs simples sont par nature idéales, ce qui signifie que le premier de nos exemples de résolution ci-dessus aurait pu être écrit comme ceci:

- - 
{
-  audio: true,
-  video: {
-    width: { ideal: 1280 },
-    height: { ideal: 720 }
-  }
-}
- -

Toutes les contraintes ne sont pas des nombres. Par exemple, sur les appareils mobiles, les éléments suivants préfèrent la caméra avant (si celle-ci est disponible) sur l'arrière:

- - 
{ audio: true, video: { facingMode: "user" } }
- -

Pour exiger la caméra arrière, utilisez:

- - 
{ audio: true, video: { facingMode: { exact: "environment" } } }
-
-
- -

Valeur de retour

- -

Un {{jsxref("Promise")}} qui reçoit en objet {{domxref("MediaStream")}} lorsque les médias demandés ont été obtenus avec succès.

- -

Erreurs

- -

Les rejets du {{jsxref("Promise")}} retourné sont effectués en passant un objet erreur DOMException au gestionnaire d'erreurs. Les erreurs possibles sont:

- -
-
AbortError
-
Bien que l'utilisateur et le système d'exploitation aient tous deux accédé à l'équipement matériel, et qu'aucun problème de matériel ne causerait un NotReadableError , un problème s'est produit, ce qui a empêché l'utilisation du périphérique.
-
NotAllowedError
-
L'utilisateur a spécifié que l'instance de navigation actuelle n'a pas accès au périphérique; Ou l'utilisateur a refusé l'accès pour la session en cours; Ou l'utilisateur a refusé tout l'accès aux périphériques multimédias utilisateurs dans le monde entier. -

Note : Les versions plus anciennes de la spécification ont utilisé SecurityError pour cela à la place; SecurityError a pris une nouvelle signification.

-
-
NotFoundError
-
Aucune piste multimédia du type spécifié n'a été trouvée satisfaisant les contraintes données.
-
NotReadableError
-
Bien que l'utilisateur ait autorisé l'utilisation des appareils correspondants, une erreur matérielle s'est produite sur le système d'exploitation, le navigateur ou le niveau de la page Web qui a empêché l'accès au périphérique.
-
OverConstrainedError
-
Aucun dispositif candidat répondant aux critères demandés. L'erreur est un objet de type OverconstrainedError et possède une propriété de constraint dont la valeur de chaîne est le nom d'une contrainte impossible à honorer et une propriété message contenant une chaîne lisible par l'homme expliquant le problème. -

Note : Étant donné que cette erreur peut se produire même lorsque l'utilisateur n'a pas encore autorisé l'utilisation du périphérique sous-jacent, il peut être utilisé comme surface d'empreinte digitale.

-
-
SecurityError
-
Le support multimédia utilisateur est désactivé sur le {{domxref("Document")}} sur lequel getUserMedia() été appelé. Le mécanisme par lequel le support média utilisateur est activé/désactivé est laissé à la discrétion de l'utilisateur.
-
TypeError
-
La liste des contraintes spécifiées est vide ou toutes les contraintes sont définies comme false .
-
- -

Exemples

- -

Largeur et hauteur

- -

Cet exemple donne une préférence pour la résolution de la caméra et attribue l'objet MediaStream résultant à un élément vidéo.

- -
// Prefer camera resolution nearest to 1280x720.
-var constraints = { audio: true, video: { width: 1280, height: 720 } };
-
-navigator.mediaDevices.getUserMedia(constraints)
-.then(function(mediaStream) {
-  var video = document.querySelector('video');
-  video.srcObject = mediaStream;
-  video.onloadedmetadata = function(e) {
-    video.play();
-  };
-})
-.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
-
- -

Utilisation de la nouvelle API dans les navigateurs plus anciens

- -

Voici un exemple d'utilisation de navigator.mediaDevices.getUserMedia() , avec un adaptateur pour faire face aux navigateurs plus anciens. Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs. Il est recommandé d'utiliser l'adaptateur adapter.js  a la place, qui gère les contraintes.

- -
// Older browsers might not implement mediaDevices at all, so we set an empty object first
-if (navigator.mediaDevices === undefined) {
-  navigator.mediaDevices = {};
-}
-
-// Some browsers partially implement mediaDevices. We can't just assign an object
-// with getUserMedia as it would overwrite existing properties.
-// Here, we will just add the getUserMedia property if it's missing.
-if (navigator.mediaDevices.getUserMedia === undefined) {
-  navigator.mediaDevices.getUserMedia = function(constraints) {
-
-    // First get ahold of the legacy getUserMedia, if present
-    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-
-    // Some browsers just don't implement it - return a rejected promise with an error
-    // to keep a consistent interface
-    if (!getUserMedia) {
-      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
-    }
-
-    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
-    return new Promise(function(resolve, reject) {
-      getUserMedia.call(navigator, constraints, resolve, reject);
-    });
-  }
-}
-
-navigator.mediaDevices.getUserMedia({ audio: true, video: true })
-.then(function(stream) {
-  var video = document.querySelector('video');
-  // Older browsers may not have srcObject
-  if ("srcObject" in video) {
-    video.srcObject = stream;
-  } else {
-    // Avoid using this in new browsers, as it is going away.
-    video.src = window.URL.createObjectURL(stream);
-  }
-  video.onloadedmetadata = function(e) {
-    video.play();
-  };
-})
-.catch(function(err) {
-  console.log(err.name + ": " + err.message);
-});
-
- -

Taux d'images

- -

Des cadences inférieures peuvent être souhaitables dans certains cas, comme les transmissions WebRTC avec des restrictions de bande passante.

- -
var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
-
- -

Caméra avant et arrière

- -

Sur les téléphones portables.

- -
var front = false;
-document.getElementById('flip-button').onclick = function() { front = !front; };
-
-var constraints = { video: { facingMode: (front? "user" : "environment") } };
-
- -

Permissions

- -

Pour utiliser getUserMedia() dans une application installable (par exemple, une application Firefox OS ), vous devez spécifier un ou les deux champs suivants dans votre fichier manifeste:

- -
"permissions": {
-  "audio-capture": {
-    "description": "Required to capture audio using getUserMedia()"
-  },
-  "video-capture": {
-    "description": "Required to capture video using getUserMedia()"
-  }
-}
- -

Voir permission: audio-capture et permission: video-capture pour plus d'informations.

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}{{Spec2('Media Capture')}}Initial definition
- -

Compatibilité des navigateurs

- -

{{Compat("api.MediaDevices.getUserMedia")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/mediadevices/getusermedia/index.md b/files/fr/web/api/mediadevices/getusermedia/index.md new file mode 100644 index 0000000000..c36f3740bf --- /dev/null +++ b/files/fr/web/api/mediadevices/getusermedia/index.md @@ -0,0 +1,257 @@ +--- +title: MediaDevices.getUserMedia() +slug: Web/API/MediaDevices/getUserMedia +translation_of: Web/API/MediaDevices/getUserMedia +--- +
{{APIRef("WebRTC")}}
+ +

La méthode MediaDevices.getUserMedia() invite l'utilisateur à autoriser l'utilisation d'une entrée multimédia qui produit un {{domxref("MediaStream")}} avec des pistes contenant les types de médias demandés. Ce flux peut inclure, par exemple, une piste vidéo (produite par une source matérielle ou vidéo virtuelle telle qu'une caméra, un dispositif d'enregistrement vidéo, un service de partage d'écran, etc.), une piste audio (de la même manière, produite par une source physique ou Source audio virtuelle comme un microphone, convertisseur A / D ou similaire) et éventuellement d'autres types de piste.

+ +

Il renvoie un {{jsxref("Promise")}} qui est résolu avec succès si l'utilisateur donne son autorisation; {{domxref("MediaStream")}} est fourni à ce moment-là. Si l'utilisateur refuse ou si le média correspondant n'est pas disponible, le {{jsxref("Promise")}} est rejetée avec respectivement PermissionDeniedError ou NotFoundError.

+ +
+

Note : Il est possible que le {{jsxref("Promise")}} renvoyé ne soit ni résolu ni rejeté, car l'utilisateur n'est pas tenu de faire un choix. .

+
+ +

Généralement, vous accédez à l'objet {{domxref("MediaDevices")}} avec {{domxref("navigator.mediaDevices")}} , comme ceci:

+ +
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
+  /* use the stream */
+}).catch(function(err) {
+  /* handle the error */
+});
+ +

Syntaxe

+ +
var promise = navigator.mediaDevices.getUserMedia(constraints);
+
+ +

Paramètres

+ +
+
constraints
+
+

Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de supports à demander, ainsi que toutes les exigences pour chaque type.

+ +

Le paramètre constraints est un objet MediaStreamConstraints avec deux membres: video et audio , décrivant les types de média demandés. L'un ou l'autre ou les deux doivent être spécifiés. Si le navigateur ne trouve pas toutes les pistes multimédia avec les types spécifiés qui répondent aux contraintes fournies, la promesse renvoyée est rejetée avec NotFoundError .

+ +

Les demandes suivantes sont audio et vidéo sans aucune exigence spécifique:

+ + 
{ audio: true, video: true }
+ +

Si true est spécifié pour un type de média, le flux résultant est requis pour obtenir ce type de piste. Si on ne peut pas l'obtenir pour une raison quelconque, l'appel à getUserMedia() entraînera une erreur.

+ +

Alors que les informations sur les caméras et les microphones d'un utilisateur sont inaccessibles pour des raisons de confidentialité, une application peut demander les capacités de caméra et de microphone dont elle a besoin en utilisant des contraintes supplémentaires. Ce qui suit exprime une préférence pour la résolution de la caméra 1280x720:

+ + 
{
+  audio: true,
+  video: { width: 1280, height: 720 }
+}
+ +

Le navigateur essaiera d'honorer cela, mais peut renvoyer d'autres résolutions si une correspondance exacte n'est pas disponible, ou si l'utilisateur l'annule.

+ +

Pour exiger une capacité, utilisez les mots-clés min , max ou exact (aka min == max ). Ce qui suit exige une résolution minimale de 1280x720:

+ + 
{
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}
+ +

Si aucune caméra n'existe avec cette résolution ou plus haut, le {{jsxref("Promise")}} retourné sera rejeté avec OverconstrainedError.

+ +

La raison de la différence de comportement est que les mots clés min , max et exact sont intrinsèquement obligatoires, alors que les valeurs simples et un mot-clé appelé ideal ne le sont pas. Voici un exemple plus complet:

+ + 
{
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}
+ +

Une valeur ideal , lorsqu'elle est utilisée, a une gravité, ce qui signifie que le navigateur essaiera de trouver le réglage (et la caméra, si vous en avez plus d'une), avec les valeurs les plus proches des valeurs idéales données.

+ +

Les valeurs simples sont par nature idéales, ce qui signifie que le premier de nos exemples de résolution ci-dessus aurait pu être écrit comme ceci:

+ + 
{
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}
+ +

Toutes les contraintes ne sont pas des nombres. Par exemple, sur les appareils mobiles, les éléments suivants préfèrent la caméra avant (si celle-ci est disponible) sur l'arrière:

+ + 
{ audio: true, video: { facingMode: "user" } }
+ +

Pour exiger la caméra arrière, utilisez:

+ + 
{ audio: true, video: { facingMode: { exact: "environment" } } }
+
+
+ +

Valeur de retour

+ +

Un {{jsxref("Promise")}} qui reçoit en objet {{domxref("MediaStream")}} lorsque les médias demandés ont été obtenus avec succès.

+ +

Erreurs

+ +

Les rejets du {{jsxref("Promise")}} retourné sont effectués en passant un objet erreur DOMException au gestionnaire d'erreurs. Les erreurs possibles sont:

+ +
+
AbortError
+
Bien que l'utilisateur et le système d'exploitation aient tous deux accédé à l'équipement matériel, et qu'aucun problème de matériel ne causerait un NotReadableError , un problème s'est produit, ce qui a empêché l'utilisation du périphérique.
+
NotAllowedError
+
L'utilisateur a spécifié que l'instance de navigation actuelle n'a pas accès au périphérique; Ou l'utilisateur a refusé l'accès pour la session en cours; Ou l'utilisateur a refusé tout l'accès aux périphériques multimédias utilisateurs dans le monde entier. +

Note : Les versions plus anciennes de la spécification ont utilisé SecurityError pour cela à la place; SecurityError a pris une nouvelle signification.

+
+
NotFoundError
+
Aucune piste multimédia du type spécifié n'a été trouvée satisfaisant les contraintes données.
+
NotReadableError
+
Bien que l'utilisateur ait autorisé l'utilisation des appareils correspondants, une erreur matérielle s'est produite sur le système d'exploitation, le navigateur ou le niveau de la page Web qui a empêché l'accès au périphérique.
+
OverConstrainedError
+
Aucun dispositif candidat répondant aux critères demandés. L'erreur est un objet de type OverconstrainedError et possède une propriété de constraint dont la valeur de chaîne est le nom d'une contrainte impossible à honorer et une propriété message contenant une chaîne lisible par l'homme expliquant le problème. +

Note : Étant donné que cette erreur peut se produire même lorsque l'utilisateur n'a pas encore autorisé l'utilisation du périphérique sous-jacent, il peut être utilisé comme surface d'empreinte digitale.

+
+
SecurityError
+
Le support multimédia utilisateur est désactivé sur le {{domxref("Document")}} sur lequel getUserMedia() été appelé. Le mécanisme par lequel le support média utilisateur est activé/désactivé est laissé à la discrétion de l'utilisateur.
+
TypeError
+
La liste des contraintes spécifiées est vide ou toutes les contraintes sont définies comme false .
+
+ +

Exemples

+ +

Largeur et hauteur

+ +

Cet exemple donne une préférence pour la résolution de la caméra et attribue l'objet MediaStream résultant à un élément vidéo.

+ +
// Prefer camera resolution nearest to 1280x720.
+var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(mediaStream) {
+  var video = document.querySelector('video');
+  video.srcObject = mediaStream;
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
+
+ +

Utilisation de la nouvelle API dans les navigateurs plus anciens

+ +

Voici un exemple d'utilisation de navigator.mediaDevices.getUserMedia() , avec un adaptateur pour faire face aux navigateurs plus anciens. Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs. Il est recommandé d'utiliser l'adaptateur adapter.js  a la place, qui gère les contraintes.

+ +
// Older browsers might not implement mediaDevices at all, so we set an empty object first
+if (navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Some browsers partially implement mediaDevices. We can't just assign an object
+// with getUserMedia as it would overwrite existing properties.
+// Here, we will just add the getUserMedia property if it's missing.
+if (navigator.mediaDevices.getUserMedia === undefined) {
+  navigator.mediaDevices.getUserMedia = function(constraints) {
+
+    // First get ahold of the legacy getUserMedia, if present
+    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+    // Some browsers just don't implement it - return a rejected promise with an error
+    // to keep a consistent interface
+    if (!getUserMedia) {
+      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+    }
+
+    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+    return new Promise(function(resolve, reject) {
+      getUserMedia.call(navigator, constraints, resolve, reject);
+    });
+  }
+}
+
+navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+.then(function(stream) {
+  var video = document.querySelector('video');
+  // Older browsers may not have srcObject
+  if ("srcObject" in video) {
+    video.srcObject = stream;
+  } else {
+    // Avoid using this in new browsers, as it is going away.
+    video.src = window.URL.createObjectURL(stream);
+  }
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+
+ +

Taux d'images

+ +

Des cadences inférieures peuvent être souhaitables dans certains cas, comme les transmissions WebRTC avec des restrictions de bande passante.

+ +
var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+
+ +

Caméra avant et arrière

+ +

Sur les téléphones portables.

+ +
var front = false;
+document.getElementById('flip-button').onclick = function() { front = !front; };
+
+var constraints = { video: { facingMode: (front? "user" : "environment") } };
+
+ +

Permissions

+ +

Pour utiliser getUserMedia() dans une application installable (par exemple, une application Firefox OS ), vous devez spécifier un ou les deux champs suivants dans votre fichier manifeste:

+ +
"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}
+ +

Voir permission: audio-capture et permission: video-capture pour plus d'informations.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}{{Spec2('Media Capture')}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MediaDevices.getUserMedia")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/mediadevices/index.html b/files/fr/web/api/mediadevices/index.html deleted file mode 100644 index e1743db309..0000000000 --- a/files/fr/web/api/mediadevices/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: MediaDevices -slug: Web/API/MediaDevices -tags: - - API - - Appareils - - Audio - - Conference - - Interface - - Media - - Partage - - Reference - - Video - - WebRTC -translation_of: Web/API/MediaDevices ---- -
{{APIRef("Media Capture and Streams")}}
- -

L'interface MediaDevices permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.

- -

Propriétés

- -

Hérite des propriétés de son interface parente, {{domxref("EventTarget")}}.

- -

Événéments

- -
-
{{domxref("MediaDevices/devicechange_event", "devicechange")}}
-
Déclenché lorsqu'un périphérique d'entrée ou de sortie multimédia est connecté ou retiré de l'ordinateur de l'utilisateur.
- Egalement disponible via la propriété {{domxref("MediaDevices/ondevicechange", "ondevicechange")}}.
-
- -

Méthodes

- -

Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.

- -
-
{{ domxref("MediaDevices.enumerateDevices", "enumerateDevices()") }}
-
Obtient un tableau d'informations sur les périphériques d'entrée et de sortie multimédia disponibles sur le système.
-
{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}
-
Renvoie un objet conforme à {{domxref("MediaTrackSupportedConstraints")}} indiquant quelles propriétés de contrainte sont prises en charge sur l'interface {{domxref("MediaStreamTrack")}}. Consultez {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} pour en savoir plus sur les contraintes et comment les utiliser.
-
{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}
-
Invite l'utilisateur à sélectionner un affichage ou une partie d'un affichage (comme une fenêtre) à capturer en tant que {{domxref("MediaStream")}} à des fins de partage ou d'enregistrement. Renvoie une promesse qui se résout en un MediaStream.
-
{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}
-
Avec l'autorisation de l'utilisateur via une invite, allume une caméra et / ou un microphone sur le système et fournit un {{domxref("MediaStream")}} contenant une piste vidéo et / ou une piste audio avec l'entrée.
-
- -

Exemple

- -
'use strict';
-
-// Placez les variables dans la portée globale pour les rendre disponibles à la console du navigateur.
-var video = document.querySelector('video');
-var constraints = window.constraints = {
-  audio: false,
-  video: true
-};
-var errorElement = document.querySelector('#errorMsg');
-
-navigator.mediaDevices.getUserMedia(constraints)
-.then(function(stream) {
-  var videoTracks = stream.getVideoTracks();
-  console.log('Got stream with constraints:', constraints);
-  console.log('Using video device: ' + videoTracks[0].label);
-  stream.onremovetrack = function() {
-    console.log('Stream ended');
-  };
-  window.stream = stream; // rendre la variable disponible dans la console du navigateur
-  video.srcObject = stream;
-})
-.catch(function(error) {
-  if (error.name === 'ConstraintNotSatisfiedError') {
-    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
-        constraints.video.height.exact + ' px is not supported by your device.');
-  } else if (error.name === 'PermissionDeniedError') {
-    errorMsg('Permissions have not been granted to use your camera and ' +
-      'microphone, you need to allow the page access to your devices in ' +
-      'order for the demo to work.');
-  }
-  errorMsg('getUserMedia error: ' + error.name, error);
-});
-
-function errorMsg(msg, error) {
-  errorElement.innerHTML += '<p>' + msg + '</p>';
-  if (typeof error !== 'undefined') {
-    console.error(error);
-  }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}{{Spec2('Media Capture')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.MediaDevices")}}

- -

Voir aussi

- -
    -
  • Media Capture et Streams API: l'API dont cette interface fait partie.
    • -
  • API de capture d'écran: L'API définissant la méthode {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}.
    • -
  • WebRTC API
    • -
  • {{domxref("Navigator.mediaDevices")}}: Renvoie une référence à un objet MediaDevices qui peut être utilisé pour accéder aux périphériques.
    • -
  • CameraCaptureJS: Capture et lecture vidéo HTML5 à l'aide de MediaDevices et de l'API d'enregistrement MediaStream (source sur GitHub)
    • -
  • OpenLang: Application Web de laboratoire de langage vidéo HTML5 video utilisant MediaDevices et l'API d'enregistrement MediaStream pour l'enregistrement vidéo (source sur GitHub)
    • -
diff --git a/files/fr/web/api/mediadevices/index.md b/files/fr/web/api/mediadevices/index.md new file mode 100644 index 0000000000..e1743db309 --- /dev/null +++ b/files/fr/web/api/mediadevices/index.md @@ -0,0 +1,122 @@ +--- +title: MediaDevices +slug: Web/API/MediaDevices +tags: + - API + - Appareils + - Audio + - Conference + - Interface + - Media + - Partage + - Reference + - Video + - WebRTC +translation_of: Web/API/MediaDevices +--- +
{{APIRef("Media Capture and Streams")}}
+ +

L'interface MediaDevices permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.

+ +

Propriétés

+ +

Hérite des propriétés de son interface parente, {{domxref("EventTarget")}}.

+ +

Événéments

+ +
+
{{domxref("MediaDevices/devicechange_event", "devicechange")}}
+
Déclenché lorsqu'un périphérique d'entrée ou de sortie multimédia est connecté ou retiré de l'ordinateur de l'utilisateur.
+ Egalement disponible via la propriété {{domxref("MediaDevices/ondevicechange", "ondevicechange")}}.
+
+ +

Méthodes

+ +

Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.

+ +
+
{{ domxref("MediaDevices.enumerateDevices", "enumerateDevices()") }}
+
Obtient un tableau d'informations sur les périphériques d'entrée et de sortie multimédia disponibles sur le système.
+
{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}
+
Renvoie un objet conforme à {{domxref("MediaTrackSupportedConstraints")}} indiquant quelles propriétés de contrainte sont prises en charge sur l'interface {{domxref("MediaStreamTrack")}}. Consultez {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} pour en savoir plus sur les contraintes et comment les utiliser.
+
{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}
+
Invite l'utilisateur à sélectionner un affichage ou une partie d'un affichage (comme une fenêtre) à capturer en tant que {{domxref("MediaStream")}} à des fins de partage ou d'enregistrement. Renvoie une promesse qui se résout en un MediaStream.
+
{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}
+
Avec l'autorisation de l'utilisateur via une invite, allume une caméra et / ou un microphone sur le système et fournit un {{domxref("MediaStream")}} contenant une piste vidéo et / ou une piste audio avec l'entrée.
+
+ +

Exemple

+ +
'use strict';
+
+// Placez les variables dans la portée globale pour les rendre disponibles à la console du navigateur.
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Got stream with constraints:', constraints);
+  console.log('Using video device: ' + videoTracks[0].label);
+  stream.onremovetrack = function() {
+    console.log('Stream ended');
+  };
+  window.stream = stream; // rendre la variable disponible dans la console du navigateur
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
+        constraints.video.height.exact + ' px is not supported by your device.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('Permissions have not been granted to use your camera and ' +
+      'microphone, you need to allow the page access to your devices in ' +
+      'order for the demo to work.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '<p>' + msg + '</p>';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}{{Spec2('Media Capture')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MediaDevices")}}

+ +

Voir aussi

+ +
    +
  • Media Capture et Streams API: l'API dont cette interface fait partie.
    • +
  • API de capture d'écran: L'API définissant la méthode {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}.
    • +
  • WebRTC API
    • +
  • {{domxref("Navigator.mediaDevices")}}: Renvoie une référence à un objet MediaDevices qui peut être utilisé pour accéder aux périphériques.
    • +
  • CameraCaptureJS: Capture et lecture vidéo HTML5 à l'aide de MediaDevices et de l'API d'enregistrement MediaStream (source sur GitHub)
    • +
  • OpenLang: Application Web de laboratoire de langage vidéo HTML5 video utilisant MediaDevices et l'API d'enregistrement MediaStream pour l'enregistrement vidéo (source sur GitHub)
    • +
diff --git a/files/fr/web/api/mediasource/index.html b/files/fr/web/api/mediasource/index.html deleted file mode 100644 index b472be76ed..0000000000 --- a/files/fr/web/api/mediasource/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: MediaSource -slug: Web/API/MediaSource -tags: - - API - - Audio - - Experimental - - Extensions - - Interface - - MSE - - Media - - MediaSource - - MediaSource Extensions - - Reference - - TopicStub - - Video -translation_of: Web/API/MediaSource ---- -

{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}

- -

L'interface MediaSource de l'API Media Source Extensions représente une source de données multimédia pour un objet {{domxref("HTMLMediaElement")}}. Un objet MediaSource peut être attaché à un {{domxref("HTMLMediaElement")}} pour être lu dans l'agent utilisateur.

- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
{{domxref("MediaSource.MediaSource", "MediaSource()")}}
-
Construit et renvoie un nouvel objet MediaSource sans tampon source associé.
-
- -

Propriétés

- -
-
{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}
-
Renvoie un objet {{domxref("SourceBufferList")}} contenant la liste des objets {{domxref("SourceBuffer")}} associés à ce MediaSource.
-
{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}
-
Renvoie un objet {{domxref("SourceBufferList")}} contenant un sous-ensemble des objets {{domxref("SourceBuffer")}} contenus dans {{domxref("MediaSource.sourceBuffers")}} — la liste des objets fournissant la piste vidéo sélectionnée, pistes audio activées et pistes de texte affichées / masquées.
-
{{domxref("MediaSource.readyState")}} {{readonlyInline}}
-
Renvoie une énumération représentant l'état de la MediaSource actuelle, qu'elle ne soit pas actuellement attachée à un élément multimédia (fermé), attachée et prête à recevoir des objets {{domxref("SourceBuffer")}} (ouvert), ou attachée mais le flux a été terminé via {{domxref("MediaSource.endOfStream()")}} (terminé).
-
{{domxref("MediaSource.duration")}}
-
Obtient et définit la durée du média actuel présenté.
-
- -

Gestionnaires d'événements

- -
-
{{domxref("MediaSource.onsourceclose")}}
-
Le gestionnaire d'événements pour l'événement sourceclose.
-
{{domxref("MediaSource.onsourceended")}}
-
Le gestionnaire d'événements pour l'événement sourceended.
-
{{domxref("MediaSource.onsourceopen")}}
-
Le gestionnaire d'événements pour l'événement sourceopen.
-
- -

Méthodes

- -

Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.

- -
-
{{domxref("MediaSource.addSourceBuffer()")}}
-
Crée un nouveau {{domxref ("SourceBuffer")}} du type MIME donné et l'ajoute à la liste {{domxref ("MediaSource.sourceBuffers")}}.
-
{{domxref("MediaSource.clearLiveSeekableRange()")}}
-
Efface un ensemble privé de plage de recherche avec un appel à setLiveSeekableRange().
-
{{domxref("MediaSource.endOfStream()")}}
-
Signale la fin du flux.
-
{{domxref("MediaSource.removeSourceBuffer()")}}
-
Supprime le {{domxref ("SourceBuffer")}} donné de la liste {{domxref ("MediaSource.sourceBuffers")}}.
-
{{domxref("MediaSource.setLiveSeekableRange()")}}
-
Définit la plage que l'utilisateur peut rechercher dans l'élément multimédia.
-
- -

Méthodes statiques

- -
-
{{domxref("MediaSource.isTypeSupported()")}}
-
Renvoie une valeur {{domxref ("Boolean")}} indiquant si le type MIME donné est pris en charge par l'agent utilisateur actuel - c'est-à-dire s'il parvient à créer des objets {{domxref ("SourceBuffer")}} pour ce type MIME .
-
- -

Exemples

- -

L'exemple simple suivant charge une vidéo avec {{domxref ("XMLHttpRequest")}} et la lit dès que possible. Cet exemple a été écrit par Nick Desaulniers et peut être consulté en direct ici (vous pouvez aussi télécharger la source pour une enquête plus approfondie).

- -
var video = document.querySelector('video');
-
-var assetURL = 'frag_bunny.mp4';
-// Need to be specific for Blink regarding codecs
-// ./mp4info frag_bunny.mp4 | grep Codec
-var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
-
-if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
-  var mediaSource = new MediaSource();
-  //console.log(mediaSource.readyState); // closed
-  video.src = URL.createObjectURL(mediaSource);
-  mediaSource.addEventListener('sourceopen', sourceOpen);
-} else {
-  console.error('Unsupported MIME type or codec: ', mimeCodec);
-}
-
-function sourceOpen (_) {
-  //console.log(this.readyState); // open
-  var mediaSource = this;
-  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
-  fetchAB(assetURL, function (buf) {
-    sourceBuffer.addEventListener('updateend', function (_) {
-      mediaSource.endOfStream();
-      video.play();
-      //console.log(mediaSource.readyState); // ended
-    });
-    sourceBuffer.appendBuffer(buf);
-  });
-};
-
-function fetchAB (url, cb) {
-  console.log(url);
-  var xhr = new XMLHttpRequest;
-  xhr.open('get', url);
-  xhr.responseType = 'arraybuffer';
-  xhr.onload = function () {
-    cb(xhr.response);
-  };
-  xhr.send();
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}{{Spec2('Media Source Extensions')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.MediaSource")}}

- -

Voir aussi

- -
    -
  • {{domxref("SourceBuffer")}}
    • -
  • {{domxref("SourceBufferList")}}
    • -
diff --git a/files/fr/web/api/mediasource/index.md b/files/fr/web/api/mediasource/index.md new file mode 100644 index 0000000000..b472be76ed --- /dev/null +++ b/files/fr/web/api/mediasource/index.md @@ -0,0 +1,151 @@ +--- +title: MediaSource +slug: Web/API/MediaSource +tags: + - API + - Audio + - Experimental + - Extensions + - Interface + - MSE + - Media + - MediaSource + - MediaSource Extensions + - Reference + - TopicStub + - Video +translation_of: Web/API/MediaSource +--- +

{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}

+ +

L'interface MediaSource de l'API Media Source Extensions représente une source de données multimédia pour un objet {{domxref("HTMLMediaElement")}}. Un objet MediaSource peut être attaché à un {{domxref("HTMLMediaElement")}} pour être lu dans l'agent utilisateur.

+ +

{{InheritanceDiagram}}

+ +

Constructeur

+ +
+
{{domxref("MediaSource.MediaSource", "MediaSource()")}}
+
Construit et renvoie un nouvel objet MediaSource sans tampon source associé.
+
+ +

Propriétés

+ +
+
{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}
+
Renvoie un objet {{domxref("SourceBufferList")}} contenant la liste des objets {{domxref("SourceBuffer")}} associés à ce MediaSource.
+
{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}
+
Renvoie un objet {{domxref("SourceBufferList")}} contenant un sous-ensemble des objets {{domxref("SourceBuffer")}} contenus dans {{domxref("MediaSource.sourceBuffers")}} — la liste des objets fournissant la piste vidéo sélectionnée, pistes audio activées et pistes de texte affichées / masquées.
+
{{domxref("MediaSource.readyState")}} {{readonlyInline}}
+
Renvoie une énumération représentant l'état de la MediaSource actuelle, qu'elle ne soit pas actuellement attachée à un élément multimédia (fermé), attachée et prête à recevoir des objets {{domxref("SourceBuffer")}} (ouvert), ou attachée mais le flux a été terminé via {{domxref("MediaSource.endOfStream()")}} (terminé).
+
{{domxref("MediaSource.duration")}}
+
Obtient et définit la durée du média actuel présenté.
+
+ +

Gestionnaires d'événements

+ +
+
{{domxref("MediaSource.onsourceclose")}}
+
Le gestionnaire d'événements pour l'événement sourceclose.
+
{{domxref("MediaSource.onsourceended")}}
+
Le gestionnaire d'événements pour l'événement sourceended.
+
{{domxref("MediaSource.onsourceopen")}}
+
Le gestionnaire d'événements pour l'événement sourceopen.
+
+ +

Méthodes

+ +

Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaSource.addSourceBuffer()")}}
+
Crée un nouveau {{domxref ("SourceBuffer")}} du type MIME donné et l'ajoute à la liste {{domxref ("MediaSource.sourceBuffers")}}.
+
{{domxref("MediaSource.clearLiveSeekableRange()")}}
+
Efface un ensemble privé de plage de recherche avec un appel à setLiveSeekableRange().
+
{{domxref("MediaSource.endOfStream()")}}
+
Signale la fin du flux.
+
{{domxref("MediaSource.removeSourceBuffer()")}}
+
Supprime le {{domxref ("SourceBuffer")}} donné de la liste {{domxref ("MediaSource.sourceBuffers")}}.
+
{{domxref("MediaSource.setLiveSeekableRange()")}}
+
Définit la plage que l'utilisateur peut rechercher dans l'élément multimédia.
+
+ +

Méthodes statiques

+ +
+
{{domxref("MediaSource.isTypeSupported()")}}
+
Renvoie une valeur {{domxref ("Boolean")}} indiquant si le type MIME donné est pris en charge par l'agent utilisateur actuel - c'est-à-dire s'il parvient à créer des objets {{domxref ("SourceBuffer")}} pour ce type MIME .
+
+ +

Exemples

+ +

L'exemple simple suivant charge une vidéo avec {{domxref ("XMLHttpRequest")}} et la lit dès que possible. Cet exemple a été écrit par Nick Desaulniers et peut être consulté en direct ici (vous pouvez aussi télécharger la source pour une enquête plus approfondie).

+ +
var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource();
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}{{Spec2('Media Source Extensions')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MediaSource")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("SourceBuffer")}}
    • +
  • {{domxref("SourceBufferList")}}
    • +
diff --git a/files/fr/web/api/mediasource/mediasource/index.html b/files/fr/web/api/mediasource/mediasource/index.html deleted file mode 100644 index dac8c3d8ee..0000000000 --- a/files/fr/web/api/mediasource/mediasource/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: MediaSource.MediaSource() -slug: Web/API/MediaSource/MediaSource -translation_of: Web/API/MediaSource/MediaSource ---- -
{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
- -

Le constructeur MediaSource() de l'interface {{domxref("MediaSource")}} construit et retourne un nouvel object MediaSource sans buffer associé

- -

Syntaxe

- -
var mediaSource = new MediaSource();
- -

Paramèteres

- -

Aucun.

- -

Example

- -

Le fragement de code suivant est tiré d'un exemple simple écrit par par Nick Desaulniers (voir la démonstration complète, ou télécharger les sources pour une meilleure compréhention.)

- -
var video = document.querySelector('video');
-
-var assetURL = 'frag_bunny.mp4';
-// A besoin d'être spécifique, Blink (moteur de rendu Chrome) demande le codec
-// ./mp4info frag_bunny.mp4 | grep Codec
-var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
-
-if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
-  var mediaSource = new MediaSource;
-  //console.log(mediaSource.readyState); // "closed"
-  video.src = URL.createObjectURL(mediaSource);
-  mediaSource.addEventListener('sourceopen', sourceOpen);
-} else {
-  console.error('Unsupported MIME type or codec: ', mimeCodec);
-}
-
-...
-
- -

Compatibilitée des navigateurs

- -
- - -

{{Compat("api.MediaSource.MediaSource")}}

-
- -

Voir aussi

- -
    -
  • {{domxref("SourceBuffer")}}
    • -
  • {{domxref("SourceBufferList")}}
    • -
diff --git a/files/fr/web/api/mediasource/mediasource/index.md b/files/fr/web/api/mediasource/mediasource/index.md new file mode 100644 index 0000000000..dac8c3d8ee --- /dev/null +++ b/files/fr/web/api/mediasource/mediasource/index.md @@ -0,0 +1,54 @@ +--- +title: MediaSource.MediaSource() +slug: Web/API/MediaSource/MediaSource +translation_of: Web/API/MediaSource/MediaSource +--- +
{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
+ +

Le constructeur MediaSource() de l'interface {{domxref("MediaSource")}} construit et retourne un nouvel object MediaSource sans buffer associé

+ +

Syntaxe

+ +
var mediaSource = new MediaSource();
+ +

Paramèteres

+ +

Aucun.

+ +

Example

+ +

Le fragement de code suivant est tiré d'un exemple simple écrit par par Nick Desaulniers (voir la démonstration complète, ou télécharger les sources pour une meilleure compréhention.)

+ +
var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// A besoin d'être spécifique, Blink (moteur de rendu Chrome) demande le codec
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource;
+  //console.log(mediaSource.readyState); // "closed"
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+...
+
+ +

Compatibilitée des navigateurs

+ +
+ + +

{{Compat("api.MediaSource.MediaSource")}}

+
+ +

Voir aussi

+ +
    +
  • {{domxref("SourceBuffer")}}
    • +
  • {{domxref("SourceBufferList")}}
    • +
diff --git a/files/fr/web/api/mediastream/index.html b/files/fr/web/api/mediastream/index.html deleted file mode 100644 index 292cb700e0..0000000000 --- a/files/fr/web/api/mediastream/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: MediaStream -slug: Web/API/MediaStream -translation_of: Web/API/MediaStream ---- -
{{APIRef("Media Capture and Streams")}} {{SeeCompatTable}}
- -

L'interface MediaStream représente le contenu d'un flux de média. Un flux est composé de plusieurs pistes, tel que des pistes vidéos ou audio.

- -

Attributs

- -
-
{{domxref("MediaStream.id")}} {{readonlyInline}}
-
{{domxref("DOMString")}} contenant 36 carractères correspondant à l'identifiant unique (GUID) de l'objet.
-
{{domxref("MediaStream.ended")}} {{readonlyInline}}
-
Booléen dont la valeur est true si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou false si la fin du flux n'à pas été atteinte.
-
- -

Gestionnaire d'évènements

- -
-
{{domxref("MediaStream.onaddtrack")}}
-
Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté.
-
{{domxref("MediaStream.onended")}}
-
Est un  {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée.
-
{{domxref("MediaStream.onremovetrack")}}
-
Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet  {{domxref("MediaStreamTrack")}} est retiré.
-
- -

Méthodes

- -
-
{{domxref("MediaStream.getTrackById()")}}
-
Retourne la piste dont l'ID correspond à celui passé en paramètre, trackid. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne null. Si plusieurs pistes ont le même id, elle retourne la première piste.
-
- -
-
{{domxref("MediaStream.addTrack()")}}
-
Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet MediaStream, rien ne se passe; si la piste est au statut finished, c'est à dire qu'elle est terminée, l'exception INVALID_STATE_RAISE est levée.
-
{{domxref("MediaStream.removeTrack()")}}
-
Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du MediaStream, rien ne se passe; Si la piste est au statut finished, ce qui arrive lorsqu'elle est terminée, l'exception INVALID_STATE_RAISE est levée.
-
{{domxref("MediaStream.getAudioTracks()")}}
-
Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet MediaStream qui ont leur attribut kind défini à "audio". L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.
-
{{domxref("MediaStream.getVideoTracks()")}}
-
Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet MediaStream qui ont leur attribut kind défini à "video". L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Media Capture', '#mediastream', 'MediaStream')}}{{Spec2('Media Capture')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.MediaStream")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/mediastream/index.md b/files/fr/web/api/mediastream/index.md new file mode 100644 index 0000000000..292cb700e0 --- /dev/null +++ b/files/fr/web/api/mediastream/index.md @@ -0,0 +1,76 @@ +--- +title: MediaStream +slug: Web/API/MediaStream +translation_of: Web/API/MediaStream +--- +
{{APIRef("Media Capture and Streams")}} {{SeeCompatTable}}
+ +

L'interface MediaStream représente le contenu d'un flux de média. Un flux est composé de plusieurs pistes, tel que des pistes vidéos ou audio.

+ +

Attributs

+ +
+
{{domxref("MediaStream.id")}} {{readonlyInline}}
+
{{domxref("DOMString")}} contenant 36 carractères correspondant à l'identifiant unique (GUID) de l'objet.
+
{{domxref("MediaStream.ended")}} {{readonlyInline}}
+
Booléen dont la valeur est true si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou false si la fin du flux n'à pas été atteinte.
+
+ +

Gestionnaire d'évènements

+ +
+
{{domxref("MediaStream.onaddtrack")}}
+
Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté.
+
{{domxref("MediaStream.onended")}}
+
Est un  {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée.
+
{{domxref("MediaStream.onremovetrack")}}
+
Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet  {{domxref("MediaStreamTrack")}} est retiré.
+
+ +

Méthodes

+ +
+
{{domxref("MediaStream.getTrackById()")}}
+
Retourne la piste dont l'ID correspond à celui passé en paramètre, trackid. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne null. Si plusieurs pistes ont le même id, elle retourne la première piste.
+
+ +
+
{{domxref("MediaStream.addTrack()")}}
+
Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet MediaStream, rien ne se passe; si la piste est au statut finished, c'est à dire qu'elle est terminée, l'exception INVALID_STATE_RAISE est levée.
+
{{domxref("MediaStream.removeTrack()")}}
+
Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du MediaStream, rien ne se passe; Si la piste est au statut finished, ce qui arrive lorsqu'elle est terminée, l'exception INVALID_STATE_RAISE est levée.
+
{{domxref("MediaStream.getAudioTracks()")}}
+
Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet MediaStream qui ont leur attribut kind défini à "audio". L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.
+
{{domxref("MediaStream.getVideoTracks()")}}
+
Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet MediaStream qui ont leur attribut kind défini à "video". L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Media Capture', '#mediastream', 'MediaStream')}}{{Spec2('Media Capture')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MediaStream")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.html b/files/fr/web/api/mediastreamaudiosourcenode/index.html deleted file mode 100644 index d75b8b8f43..0000000000 --- a/files/fr/web/api/mediastreamaudiosourcenode/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: MediaStreamAudioSourceNode -slug: Web/API/MediaStreamAudioSourceNode -tags: - - API - - Interface - - MediaStreamAudioSourceNode - - Reference - - Web Audio API -translation_of: Web/API/MediaStreamAudioSourceNode ---- -

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

- -
-

L'interface MediaStreamAudioSourceNode représente une source audio WebRTC {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio.

-
- -

Un MediaElementSourceNode n'a pas d'entrée et une seule sortie. On le créé en utilisant la méthode {{domxref("AudioContext.createMediaStreamSource")}}. Le nombre de canaux de sortie est égal au nombre de canaux de {{domxref("AudioMediaStreamTrack")}}. S'il n'y a pas de media stream valide, alors la sortie sera constituée d'un seul canal silencieux.

- - - - - - - - - - - - - - - - -
Nombre d'entrées0
Nombre de sorties1
Nombre de canauxDéfini par {{domxref("AudioMediaStreamTrack")}} et passé à la méthode {{domxref("AudioContext.createMediaStreamSource")}} qui le créé.
- -

Constructeur

- -
-
{{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode()")}}
-
Créé une nouvelle instance de MediaStreamAudioSourceNode.
-
- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

- -

Méthodes

- -

Hérite des méthdoes de son parent, {{domxref("AudioNode")}}.

- -

Exemple

- -

{{page("/fr-FR/docs/Web/API/AudioContext.createMediaStreamSource","Example")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#the-mediastreamaudiosourcenode-interface', 'MediaStreamAudioSourceNode')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.MediaStreamAudioSourceNode")}}

- -

Voir aussi

- - - diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.md b/files/fr/web/api/mediastreamaudiosourcenode/index.md new file mode 100644 index 0000000000..d75b8b8f43 --- /dev/null +++ b/files/fr/web/api/mediastreamaudiosourcenode/index.md @@ -0,0 +1,85 @@ +--- +title: MediaStreamAudioSourceNode +slug: Web/API/MediaStreamAudioSourceNode +tags: + - API + - Interface + - MediaStreamAudioSourceNode + - Reference + - Web Audio API +translation_of: Web/API/MediaStreamAudioSourceNode +--- +

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

+ +
+

L'interface MediaStreamAudioSourceNode représente une source audio WebRTC {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio.

+
+ +

Un MediaElementSourceNode n'a pas d'entrée et une seule sortie. On le créé en utilisant la méthode {{domxref("AudioContext.createMediaStreamSource")}}. Le nombre de canaux de sortie est égal au nombre de canaux de {{domxref("AudioMediaStreamTrack")}}. S'il n'y a pas de media stream valide, alors la sortie sera constituée d'un seul canal silencieux.

+ + + + + + + + + + + + + + + + +
Nombre d'entrées0
Nombre de sorties1
Nombre de canauxDéfini par {{domxref("AudioMediaStreamTrack")}} et passé à la méthode {{domxref("AudioContext.createMediaStreamSource")}} qui le créé.
+ +

Constructeur

+ +
+
{{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode()")}}
+
Créé une nouvelle instance de MediaStreamAudioSourceNode.
+
+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

+ +

Méthodes

+ +

Hérite des méthdoes de son parent, {{domxref("AudioNode")}}.

+ +

Exemple

+ +

{{page("/fr-FR/docs/Web/API/AudioContext.createMediaStreamSource","Example")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#the-mediastreamaudiosourcenode-interface', 'MediaStreamAudioSourceNode')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MediaStreamAudioSourceNode")}}

+ +

Voir aussi

+ + + diff --git a/files/fr/web/api/mediastreamevent/index.html b/files/fr/web/api/mediastreamevent/index.html deleted file mode 100644 index 1f9eeb32ec..0000000000 --- a/files/fr/web/api/mediastreamevent/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: MediaStreamEvent -slug: Web/API/MediaStreamEvent -tags: - - API - - Expérimentale - - Expérimentale(2) - - Interface - - Reference - - Référence(2) - - WebRTC -translation_of: Web/API/MediaStreamEvent ---- -

{{APIRef("WebRTC")}}{{deprecated_header}}

- -

L'interface MediaStreamEvent représente les événements qui se produisent en relation avec un {{domxref("MediaStream")}}. Deux événements de ce type peuvent être lancés: {{event("addstream")}} et {{event("removestream")}}.

- -

Propriétés

- -

Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés.

- -
-
{{domxref("MediaStreamEvent.stream")}} {{readOnlyInline}}
-
Contient le {{domxref("MediaStream")}} contenant le flux associé à l'événement.
-
- -

Constructeurs

- -
-
{{domxref("MediaStreamEvent.MediaStreamEvent()", "MediaStreamEvent()")}}
-
Renvoie un nouveau MediaStreamEvent. Il prend deux paramètres, le premier étant un {{domxref("DOMString")}} représentant le type de l'événement; le second un dictionnaire contenant le {{domxref("MediaStream")}} auquel il se réfère.
-
- -

Méthodes

- -

Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés.  Il n'y a pas de méthode {{domxref("MediaStreamEvent")}} spécifique.

- -

Exemples

- -
pc.onaddstream = function( ev ) {
-  alert("Un stream (id: '" + ev.stream.id + "') a été ajouté à cette connexion.");
-};
-
- -

Compatibilité des navigateurs

- -

{{Compat("api.MediaStreamEvent")}}

- -

Voir aussi

- -
    -
  • WebRTC
    • -
  • Sa cible habituelle: {{domxref("RTCPeerConnection")}}.
    • -
diff --git a/files/fr/web/api/mediastreamevent/index.md b/files/fr/web/api/mediastreamevent/index.md new file mode 100644 index 0000000000..1f9eeb32ec --- /dev/null +++ b/files/fr/web/api/mediastreamevent/index.md @@ -0,0 +1,54 @@ +--- +title: MediaStreamEvent +slug: Web/API/MediaStreamEvent +tags: + - API + - Expérimentale + - Expérimentale(2) + - Interface + - Reference + - Référence(2) + - WebRTC +translation_of: Web/API/MediaStreamEvent +--- +

{{APIRef("WebRTC")}}{{deprecated_header}}

+ +

L'interface MediaStreamEvent représente les événements qui se produisent en relation avec un {{domxref("MediaStream")}}. Deux événements de ce type peuvent être lancés: {{event("addstream")}} et {{event("removestream")}}.

+ +

Propriétés

+ +

Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés.

+ +
+
{{domxref("MediaStreamEvent.stream")}} {{readOnlyInline}}
+
Contient le {{domxref("MediaStream")}} contenant le flux associé à l'événement.
+
+ +

Constructeurs

+ +
+
{{domxref("MediaStreamEvent.MediaStreamEvent()", "MediaStreamEvent()")}}
+
Renvoie un nouveau MediaStreamEvent. Il prend deux paramètres, le premier étant un {{domxref("DOMString")}} représentant le type de l'événement; le second un dictionnaire contenant le {{domxref("MediaStream")}} auquel il se réfère.
+
+ +

Méthodes

+ +

Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés.  Il n'y a pas de méthode {{domxref("MediaStreamEvent")}} spécifique.

+ +

Exemples

+ +
pc.onaddstream = function( ev ) {
+  alert("Un stream (id: '" + ev.stream.id + "') a été ajouté à cette connexion.");
+};
+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MediaStreamEvent")}}

+ +

Voir aussi

+ +
    +
  • WebRTC
    • +
  • Sa cible habituelle: {{domxref("RTCPeerConnection")}}.
    • +
diff --git a/files/fr/web/api/mediatrackconstraints/index.html b/files/fr/web/api/mediatrackconstraints/index.html deleted file mode 100644 index f0991f5277..0000000000 --- a/files/fr/web/api/mediatrackconstraints/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: DoubleRange -slug: Web/API/MediaTrackConstraints -tags: - - API - - API Media Streams - - API de capture multimédia et de flux - - Contraintes - - Dictionnaire - - DoubleRange - - Interface - - Media - - Reference - - WebRTC -translation_of: Web/API/DoubleRange -original_slug: Web/API/DoubleRange ---- -
{{APIRef("Media Capture and Streams")}}
- -

Le dictionnaire DoubleRange est utilisé pour définir une plage de valeurs à virgule flottante double précision autorisées pour une propriété, avec l'une ou les deux valeurs maximale et minimale spécifiées. Le dictionnaire {{domxref("ConstrainDouble")}} est basé sur cela, en l'augmentant pour prendre également en charge les valeurs exactes et idéales.

- -

Propriétés

- -
-
max
-
Une valeur à virgule flottante spécifiant la plus grande valeur autorisée de la propriété qu'elle décrit.
-
min
-
Une valeur à virgule flottante spécifiant la plus petit valeur autorisée de la propriété qu'elle décrit.
-
- -

Les valeurs min et/ou max spécifiées sont obligatoires. Si aucune correspondance ne peut être trouvée dans la plage donnée, une erreur se produit.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Media Capture', '#dom-doublerange', 'DoubleRange')}}{{Spec2('Media Capture')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.DoubleRange")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/mediatrackconstraints/index.md b/files/fr/web/api/mediatrackconstraints/index.md new file mode 100644 index 0000000000..f0991f5277 --- /dev/null +++ b/files/fr/web/api/mediatrackconstraints/index.md @@ -0,0 +1,63 @@ +--- +title: DoubleRange +slug: Web/API/MediaTrackConstraints +tags: + - API + - API Media Streams + - API de capture multimédia et de flux + - Contraintes + - Dictionnaire + - DoubleRange + - Interface + - Media + - Reference + - WebRTC +translation_of: Web/API/DoubleRange +original_slug: Web/API/DoubleRange +--- +
{{APIRef("Media Capture and Streams")}}
+ +

Le dictionnaire DoubleRange est utilisé pour définir une plage de valeurs à virgule flottante double précision autorisées pour une propriété, avec l'une ou les deux valeurs maximale et minimale spécifiées. Le dictionnaire {{domxref("ConstrainDouble")}} est basé sur cela, en l'augmentant pour prendre également en charge les valeurs exactes et idéales.

+ +

Propriétés

+ +
+
max
+
Une valeur à virgule flottante spécifiant la plus grande valeur autorisée de la propriété qu'elle décrit.
+
min
+
Une valeur à virgule flottante spécifiant la plus petit valeur autorisée de la propriété qu'elle décrit.
+
+ +

Les valeurs min et/ou max spécifiées sont obligatoires. Si aucune correspondance ne peut être trouvée dans la plage donnée, une erreur se produit.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Media Capture', '#dom-doublerange', 'DoubleRange')}}{{Spec2('Media Capture')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.DoubleRange")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/messageevent/index.html b/files/fr/web/api/messageevent/index.html deleted file mode 100644 index 473489039a..0000000000 --- a/files/fr/web/api/messageevent/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: MessageEvent -slug: Web/API/MessageEvent -tags: - - API - - Channels - - Interface - - Reference - - WebSockets - - Window - - Workers - - messaging -translation_of: Web/API/MessageEvent ---- -
{{APIRef("HTML DOM")}}
- -

L'interface MessageEvent représente un message reçu par un objet cible.

- -

Il est utilisé pour représenter les messages en :

- -
    -
  • Événements envoyés par le serveur (voir {{domxref("EventSource.onmessage")}}).
    • -
  • Sockets Web (voir la propriété onmessage de l'interface WebSocket).
    • -
  • Messagerie inter-documents (voir {{domxref("Window.postMessage()")}} et {{domxref("Window.onmessage")}}).
    • -
  • Messagerie de canal (voir {{domxref("MessagePort.postMessage()")}} et {{domxref("MessagePort.onmessage")}}).
    • -
  • Messagerie inter-worker/document (voir les deux entrées ci-dessus, mais aussi {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, etc.)
    • -
  • Canaux de diffusion (voir {{domxref("Broadcastchannel.postMessage()")}}) et {{domxref("BroadcastChannel.onmessage")}}).
    • -
  • Les canaux de données WebRTC (voir {{domxref("RTCDataChannel.onmessage")}}).
    • -
- -

L'action déclenchée par cet événement est définie dans une fonction définie comme gestionnaire d'événement pour l'événement {{event("message")}} correspondant (par exemple, en utilisant un gestionnaire onmessage comme indiqué ci-dessus).

- -

{{AvailableInWorkers}}

- -

{{InheritanceDiagram(600, 80)}}

- -

Constructeur

- -
-
{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
-
Crée un nouveau MessageEvent.
-
- -

Propriétés

- -

Cette interface hérite également des propriétés de son parent, {{domxref("Event")}}.

- -
-
{{domxref("MessageEvent.data")}} {{readonlyInline}}
-
Les données envoyées par l'émetteur du message.
-
{{domxref("MessageEvent.origin")}} {{readonlyInline}}
-
Une chaîne de caractères {{domxref("USVString")}} représentant l'origine de l'émetteur du message.
-
{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
-
Une chaîne de caractères {{domxref("DOMString")}} représentant un identifiant unique pour l'événement.
-
{{domxref("MessageEvent.source")}} {{readonlyInline}}
-
Un MessageEventSource (qui peut être un objet {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, ou {{domxref("ServiceWorker")}}) représentant l'émetteur du message.
-
{{domxref("MessageEvent.ports")}} {{readonlyInline}}
-
Un tableau d'objets {{domxref("MessagePort")}} représentant les ports associés au canal par lequel le message est envoyé (le cas échéant, par exemple dans la messagerie de canal ou lors de l'envoi d'un message à un travailleur partagé).
-
- -

Méthodes

- -

Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}.

- -
-
{{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}}
-
Initialise un événement de message. Ne plus utiliser ceci - utilisez le constructeur {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} à la place.
-
- -

Exemples

- -

Dans notre exemple de travailleur partagé basique (exécuter le travailleur partagé), nous avons deux pages HTML, dont chacune utilise un peu de JavaScript pour effectuer un calcul simple. Les différents scripts utilisent le même fichier worker pour effectuer le calcul - ils peuvent tous deux y accéder, même si leurs pages s'exécutent dans des fenêtres différentes.

- -

L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} à l'aide du constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :

- -
var myWorker = new SharedWorker('worker.js');
- -

Les deux scripts accèdent ensuite au worker par le biais d'un objet {{domxref("MessagePort")}} créé à l'aide de la propriété {{domxref("SharedWorker.port")}}. Si l'événement onmessage est attaché à l'aide de addEventListener, le port est démarré manuellement à l'aide de sa méthode start() :

- -
myWorker.port.start();
- -

Lorsque le port est démarré, les deux scripts postent des messages au worker et traitent les messages envoyés par celui-ci en utilisant respectivement port.postMessage() et port.onmessage :

- -
first.onchange = function() {
-  myWorker.port.postMessage([first.value,second.value]);
-  console.log('Message posté au worker');
-}
-
-second.onchange = function() {
-  myWorker.port.postMessage([first.value,second.value]);
-  console.log('Message posté au worker');
-}
-
-myWorker.port.onmessage = function(e) {
-  result1.textContent = e.data;
-  console.log('Message reçu du worker');
-}
- -

À l'intérieur du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour nous connecter au même port que celui mentionné ci-dessus. Les ports associés à ce worker sont accessibles dans la propriété ports de l'événement {{event("connect")}} - nous utilisons ensuite {{domxref("MessagePort")}} La méthode start() pour démarrer le port, et le handler onmessage pour gérer les messages envoyés par les processus principaux.

- -
onconnect = function(e) {
-  var port = e.ports[0];
-
-  port.addEventListener('message', function(e) {
-    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
-    port.postMessage(workerResult);
-  });
-
-  port.start(); // Requis si vous utilisez addEventListener. Sinon, il est appelé implicitement par le paramètre onmessage.
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.MessageEvent")}}

- -

Voir aussi

- -
    -
  • {{domxref("ExtendableMessageEvent")}} — similaire à cette interface mais utilisée dans les interfaces qui doivent donner plus de flexibilité aux auteurs.
    • -
diff --git a/files/fr/web/api/messageevent/index.md b/files/fr/web/api/messageevent/index.md new file mode 100644 index 0000000000..473489039a --- /dev/null +++ b/files/fr/web/api/messageevent/index.md @@ -0,0 +1,139 @@ +--- +title: MessageEvent +slug: Web/API/MessageEvent +tags: + - API + - Channels + - Interface + - Reference + - WebSockets + - Window + - Workers + - messaging +translation_of: Web/API/MessageEvent +--- +
{{APIRef("HTML DOM")}}
+ +

L'interface MessageEvent représente un message reçu par un objet cible.

+ +

Il est utilisé pour représenter les messages en :

+ +
    +
  • Événements envoyés par le serveur (voir {{domxref("EventSource.onmessage")}}).
    • +
  • Sockets Web (voir la propriété onmessage de l'interface WebSocket).
    • +
  • Messagerie inter-documents (voir {{domxref("Window.postMessage()")}} et {{domxref("Window.onmessage")}}).
    • +
  • Messagerie de canal (voir {{domxref("MessagePort.postMessage()")}} et {{domxref("MessagePort.onmessage")}}).
    • +
  • Messagerie inter-worker/document (voir les deux entrées ci-dessus, mais aussi {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, etc.)
    • +
  • Canaux de diffusion (voir {{domxref("Broadcastchannel.postMessage()")}}) et {{domxref("BroadcastChannel.onmessage")}}).
    • +
  • Les canaux de données WebRTC (voir {{domxref("RTCDataChannel.onmessage")}}).
    • +
+ +

L'action déclenchée par cet événement est définie dans une fonction définie comme gestionnaire d'événement pour l'événement {{event("message")}} correspondant (par exemple, en utilisant un gestionnaire onmessage comme indiqué ci-dessus).

+ +

{{AvailableInWorkers}}

+ +

{{InheritanceDiagram(600, 80)}}

+ +

Constructeur

+ +
+
{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
+
Crée un nouveau MessageEvent.
+
+ +

Propriétés

+ +

Cette interface hérite également des propriétés de son parent, {{domxref("Event")}}.

+ +
+
{{domxref("MessageEvent.data")}} {{readonlyInline}}
+
Les données envoyées par l'émetteur du message.
+
{{domxref("MessageEvent.origin")}} {{readonlyInline}}
+
Une chaîne de caractères {{domxref("USVString")}} représentant l'origine de l'émetteur du message.
+
{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
+
Une chaîne de caractères {{domxref("DOMString")}} représentant un identifiant unique pour l'événement.
+
{{domxref("MessageEvent.source")}} {{readonlyInline}}
+
Un MessageEventSource (qui peut être un objet {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, ou {{domxref("ServiceWorker")}}) représentant l'émetteur du message.
+
{{domxref("MessageEvent.ports")}} {{readonlyInline}}
+
Un tableau d'objets {{domxref("MessagePort")}} représentant les ports associés au canal par lequel le message est envoyé (le cas échéant, par exemple dans la messagerie de canal ou lors de l'envoi d'un message à un travailleur partagé).
+
+ +

Méthodes

+ +

Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}.

+ +
+
{{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}}
+
Initialise un événement de message. Ne plus utiliser ceci - utilisez le constructeur {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} à la place.
+
+ +

Exemples

+ +

Dans notre exemple de travailleur partagé basique (exécuter le travailleur partagé), nous avons deux pages HTML, dont chacune utilise un peu de JavaScript pour effectuer un calcul simple. Les différents scripts utilisent le même fichier worker pour effectuer le calcul - ils peuvent tous deux y accéder, même si leurs pages s'exécutent dans des fenêtres différentes.

+ +

L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} à l'aide du constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :

+ +
var myWorker = new SharedWorker('worker.js');
+ +

Les deux scripts accèdent ensuite au worker par le biais d'un objet {{domxref("MessagePort")}} créé à l'aide de la propriété {{domxref("SharedWorker.port")}}. Si l'événement onmessage est attaché à l'aide de addEventListener, le port est démarré manuellement à l'aide de sa méthode start() :

+ +
myWorker.port.start();
+ +

Lorsque le port est démarré, les deux scripts postent des messages au worker et traitent les messages envoyés par celui-ci en utilisant respectivement port.postMessage() et port.onmessage :

+ +
first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posté au worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posté au worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message reçu du worker');
+}
+ +

À l'intérieur du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour nous connecter au même port que celui mentionné ci-dessus. Les ports associés à ce worker sont accessibles dans la propriété ports de l'événement {{event("connect")}} - nous utilisons ensuite {{domxref("MessagePort")}} La méthode start() pour démarrer le port, et le handler onmessage pour gérer les messages envoyés par les processus principaux.

+ +
onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Requis si vous utilisez addEventListener. Sinon, il est appelé implicitement par le paramètre onmessage.
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MessageEvent")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("ExtendableMessageEvent")}} — similaire à cette interface mais utilisée dans les interfaces qui doivent donner plus de flexibilité aux auteurs.
    • +
diff --git a/files/fr/web/api/mouseevent/index.html b/files/fr/web/api/mouseevent/index.html deleted file mode 100644 index 521eedf8fd..0000000000 --- a/files/fr/web/api/mouseevent/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: MouseEvent -slug: Web/API/MouseEvent -tags: - - API - - DOM - - Interface - - Reference - - Référence(2) - - Souris - - évènements -translation_of: Web/API/MouseEvent ---- -

{{APIRef("DOM Events")}}

- -

L'interface MouseEvent représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}.

- -

MouseEvent dérive de {{domxref("UIEvent")}}, qui lui-même est issu d'{{domxref("Event")}}. Bien que la méthode {{domxref ("MouseEvent.initMouseEvent()")}} soit conservée à des fins de compatibilité descendante, la création d'un objet MouseEvent doit être effectuée à l'aide du constructeur {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}.

- -

Plusieurs événements plus spécifiques sont basés sur MouseEvent, y compris {{domxref ("WheelEvent")}} et {{domxref ("DragEvent")}}.

- -

Constructeur

- -
-
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}
-
crée un objet MouseEvent.
-
- -

Propriétés

- -

Cette interface hérite aussi des propriétés de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.

- -
-
{{domxref("MouseEvent.altKey")}} {{readonlyinline}}
-
renvoie true (vrai) si la touche alt est pressée lorsque l'événement est lancé.
-
{{domxref("MouseEvent.button")}} {{readonlyinline}}
-
Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé.
-
{{domxref("MouseEvent.buttons")}} {{readonlyinline}}{{gecko_minversion_inline("15.0")}}
-
-

Les boutons qui sont pressés alors que l'événement est lancé.

-
-
{{domxref("MouseEvent.clientX")}} {{readonlyinline}}
-
La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM).
-
{{domxref("MouseEvent.clientY")}} {{readonlyinline}}
-
La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM).
-
{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}
-
renvoie true si la touche ctrl est pressée alors que l'événement est lancé.
-
{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}
-
renvoie true si la touche méta est pressée alors que l'événement est lancé.
-
{{domxref("MouseEvent.movementX")}} {{readonlyinline}}
-
La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.
-
{{domxref("MouseEvent.movementY")}} {{readonlyinline}}
-
La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.
-
{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}
-
La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.
-
{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}
-
La coordonnée en Y du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.
-
{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}
-
La coordonnée en X du pointeur de la souris relative au document entier.
-
{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}
-
La coordonnée en Y du pointeur de la souris relative au document entier.
-
{{domxref("MouseEvent.region")}} {{readonlyinline}}
-
renvoie l'identifiant de la région touchée par l'évènement. Si aucune région n'est affectée, null est retourné.
-
{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}
-
-

La seconde cible pour l'événement, s'il y en a une.

-
-
{{domxref("MouseEvent.screenX")}} {{readonlyinline}}
-
La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran).
-
{{domxref("MouseEvent.screenY")}} {{readonlyinline}}
-
La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran).
-
{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}
-
renvoie true si la touche Maj est pressée alors que l'événement est lancé.
-
{{domxref("MouseEvent.which")}} {{readonlyinline}}
-
Le bouton qui est pressé alors que l'événement est lancé.
-
MouseEvent.mozPressure {{non-standard_inline()}} {{readonlyinline}}
-
La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum).
-
MouseEvent.mozInputSource {{non-standard_inline()}} {{readonlyinline}}
-
Le type d'appareil qui a généré l'événement (une des constantes MOZ_SOURCE_* listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement).
-
{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
-
La quantité de pression appliquée en cliquant.
-
{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}
-
Alias pour {{domxref("MouseEvent.clientX")}}.
-
{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}
-
Alias pour {{domxref("MouseEvent.clientY")}}.
-
- -

Constantes

- -
-
{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
-
Force minimum nécessaire pour un click normal.
-
{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
-
Force minimum nécessaire pour un click fort.
-
- -

Les méthodes

- -

Cette interface hérite aussi des méthodes de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.

- -
-
{{domxref("MouseEvent.getModifierState")}}(){{gecko_minversion_inline("15.0")}}
-
Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails.
-
{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}
-
initialise la valeur de l'MouseEvent créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien.
-
- -

Exemple

- -

Cet exemple illustre la simulation d'un clic (générant par programmation un événement click) sur une case à cocher en utilisant les méthodes DOM.

- -
function simulateClick() {
-  var evt = new MouseEvent("click", {
-    bubbles: true,
-    cancelable: true,
-    view: window
-  });
-  var cb = document.getElementById("checkbox"); //élément pour cliquer
-  var canceled = !cb.dispatchEvent(evt);
-  if(canceled) {
-    // Un gestionnaire appelé preventDefault
-    alert("canceled");
-  } else {
-    // Aucun des gestionnaires n'est appelé preventDefault
-    alert("not canceled");
-  }
-}
-document.getElementById("button").addEventListener('click', simulateClick);
- -
<p><label><input type="checkbox" id="checkbox"> Checked</label>
-<p><button id="button">Click me</button>
- -

Cliquez sur le bouton pour voir comment l'exemple fonctionne :

- -

{{ EmbedLiveSample('Example', '', '', '') }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}Redéfinit MouseEvent de long à double. C'est-à-dire qu'un PointerEvent dont le pointerType est "souris" est un double.
{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}{{Spec2('HTML WHATWG')}}Ajout de la propriété  region  à partir de {{SpecName('DOM3 Events')}}.
{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}{{Spec2('Pointer Lock')}}À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés movementX et movementY.
{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés offsetX et offsetY, pageX et pageY, x et y. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme double et non plus long.
{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}{{Spec2('DOM3 Events')}}À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur MouseEvent(), de la méthode getModifierState() et de la propriété buttons.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}{{Spec2('DOM2 Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.MouseEvent")}}

- -

Voir aussi

- -
    -
  • Son parent direct, {{domxref("UIEvent")}}.
    • -
  • {{domxref("PointerEvent")}} : Pour les événements avancés du pointeur, y compris le multi-touch.
    • -
diff --git a/files/fr/web/api/mouseevent/index.md b/files/fr/web/api/mouseevent/index.md new file mode 100644 index 0000000000..521eedf8fd --- /dev/null +++ b/files/fr/web/api/mouseevent/index.md @@ -0,0 +1,188 @@ +--- +title: MouseEvent +slug: Web/API/MouseEvent +tags: + - API + - DOM + - Interface + - Reference + - Référence(2) + - Souris + - évènements +translation_of: Web/API/MouseEvent +--- +

{{APIRef("DOM Events")}}

+ +

L'interface MouseEvent représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}.

+ +

MouseEvent dérive de {{domxref("UIEvent")}}, qui lui-même est issu d'{{domxref("Event")}}. Bien que la méthode {{domxref ("MouseEvent.initMouseEvent()")}} soit conservée à des fins de compatibilité descendante, la création d'un objet MouseEvent doit être effectuée à l'aide du constructeur {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}.

+ +

Plusieurs événements plus spécifiques sont basés sur MouseEvent, y compris {{domxref ("WheelEvent")}} et {{domxref ("DragEvent")}}.

+ +

Constructeur

+ +
+
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}
+
crée un objet MouseEvent.
+
+ +

Propriétés

+ +

Cette interface hérite aussi des propriétés de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.altKey")}} {{readonlyinline}}
+
renvoie true (vrai) si la touche alt est pressée lorsque l'événement est lancé.
+
{{domxref("MouseEvent.button")}} {{readonlyinline}}
+
Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé.
+
{{domxref("MouseEvent.buttons")}} {{readonlyinline}}{{gecko_minversion_inline("15.0")}}
+
+

Les boutons qui sont pressés alors que l'événement est lancé.

+
+
{{domxref("MouseEvent.clientX")}} {{readonlyinline}}
+
La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM).
+
{{domxref("MouseEvent.clientY")}} {{readonlyinline}}
+
La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM).
+
{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}
+
renvoie true si la touche ctrl est pressée alors que l'événement est lancé.
+
{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}
+
renvoie true si la touche méta est pressée alors que l'événement est lancé.
+
{{domxref("MouseEvent.movementX")}} {{readonlyinline}}
+
La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.
+
{{domxref("MouseEvent.movementY")}} {{readonlyinline}}
+
La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.
+
{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}
+
La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.
+
{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}
+
La coordonnée en Y du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.
+
{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}
+
La coordonnée en X du pointeur de la souris relative au document entier.
+
{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}
+
La coordonnée en Y du pointeur de la souris relative au document entier.
+
{{domxref("MouseEvent.region")}} {{readonlyinline}}
+
renvoie l'identifiant de la région touchée par l'évènement. Si aucune région n'est affectée, null est retourné.
+
{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}
+
+

La seconde cible pour l'événement, s'il y en a une.

+
+
{{domxref("MouseEvent.screenX")}} {{readonlyinline}}
+
La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran).
+
{{domxref("MouseEvent.screenY")}} {{readonlyinline}}
+
La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran).
+
{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}
+
renvoie true si la touche Maj est pressée alors que l'événement est lancé.
+
{{domxref("MouseEvent.which")}} {{readonlyinline}}
+
Le bouton qui est pressé alors que l'événement est lancé.
+
MouseEvent.mozPressure {{non-standard_inline()}} {{readonlyinline}}
+
La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum).
+
MouseEvent.mozInputSource {{non-standard_inline()}} {{readonlyinline}}
+
Le type d'appareil qui a généré l'événement (une des constantes MOZ_SOURCE_* listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement).
+
{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
+
La quantité de pression appliquée en cliquant.
+
{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}
+
Alias pour {{domxref("MouseEvent.clientX")}}.
+
{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}
+
Alias pour {{domxref("MouseEvent.clientY")}}.
+
+ +

Constantes

+ +
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
Force minimum nécessaire pour un click normal.
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
Force minimum nécessaire pour un click fort.
+
+ +

Les méthodes

+ +

Cette interface hérite aussi des méthodes de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.getModifierState")}}(){{gecko_minversion_inline("15.0")}}
+
Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails.
+
{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}
+
initialise la valeur de l'MouseEvent créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien.
+
+ +

Exemple

+ +

Cet exemple illustre la simulation d'un clic (générant par programmation un événement click) sur une case à cocher en utilisant les méthodes DOM.

+ +
function simulateClick() {
+  var evt = new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
+  var cb = document.getElementById("checkbox"); //élément pour cliquer
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // Un gestionnaire appelé preventDefault
+    alert("canceled");
+  } else {
+    // Aucun des gestionnaires n'est appelé preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);
+ +
<p><label><input type="checkbox" id="checkbox"> Checked</label>
+<p><button id="button">Click me</button>
+ +

Cliquez sur le bouton pour voir comment l'exemple fonctionne :

+ +

{{ EmbedLiveSample('Example', '', '', '') }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}Redéfinit MouseEvent de long à double. C'est-à-dire qu'un PointerEvent dont le pointerType est "souris" est un double.
{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}{{Spec2('HTML WHATWG')}}Ajout de la propriété  region  à partir de {{SpecName('DOM3 Events')}}.
{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}{{Spec2('Pointer Lock')}}À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés movementX et movementY.
{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés offsetX et offsetY, pageX et pageY, x et y. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme double et non plus long.
{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}{{Spec2('DOM3 Events')}}À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur MouseEvent(), de la méthode getModifierState() et de la propriété buttons.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}{{Spec2('DOM2 Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MouseEvent")}}

+ +

Voir aussi

+ +
    +
  • Son parent direct, {{domxref("UIEvent")}}.
    • +
  • {{domxref("PointerEvent")}} : Pour les événements avancés du pointeur, y compris le multi-touch.
    • +
diff --git a/files/fr/web/api/mouseevent/offsetx/index.html b/files/fr/web/api/mouseevent/offsetx/index.html deleted file mode 100644 index 8a01b713c2..0000000000 --- a/files/fr/web/api/mouseevent/offsetx/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: MouseEvent.offsetX -slug: Web/API/MouseEvent/offsetX -tags: - - API - - Experimental - - MouseEvent - - Property - - Read-only - - Reference -translation_of: Web/API/MouseEvent/offsetX ---- -

{{APIRef("DOM Events")}}{{SeeCompatTable}}

- -

La propriété en lecture seule offsetX de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.

- -

Syntaxe

- -
var xOffset = instanceOfMouseEvent.offsetX;
-
- -

Valeur renvoyée

- -

Un nombre à virgule flottante double précision double. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('CSSOM View', '#dom-mouseevent-offsetx', 'MouseEvent')}}{{Spec2('CSSOM View')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.MouseEvent.offsetX")}}

- -

Voir aussi

- -
    -
  • {{domxref("MouseEvent")}}
    • -
diff --git a/files/fr/web/api/mouseevent/offsetx/index.md b/files/fr/web/api/mouseevent/offsetx/index.md new file mode 100644 index 0000000000..8a01b713c2 --- /dev/null +++ b/files/fr/web/api/mouseevent/offsetx/index.md @@ -0,0 +1,51 @@ +--- +title: MouseEvent.offsetX +slug: Web/API/MouseEvent/offsetX +tags: + - API + - Experimental + - MouseEvent + - Property + - Read-only + - Reference +translation_of: Web/API/MouseEvent/offsetX +--- +

{{APIRef("DOM Events")}}{{SeeCompatTable}}

+ +

La propriété en lecture seule offsetX de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.

+ +

Syntaxe

+ +
var xOffset = instanceOfMouseEvent.offsetX;
+
+ +

Valeur renvoyée

+ +

Un nombre à virgule flottante double précision double. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('CSSOM View', '#dom-mouseevent-offsetx', 'MouseEvent')}}{{Spec2('CSSOM View')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MouseEvent.offsetX")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("MouseEvent")}}
    • +
diff --git a/files/fr/web/api/mouseevent/offsety/index.html b/files/fr/web/api/mouseevent/offsety/index.html deleted file mode 100644 index ca71439cef..0000000000 --- a/files/fr/web/api/mouseevent/offsety/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: MouseEvent.offsetY -slug: Web/API/MouseEvent/offsetY -tags: - - API - - Experimental - - MouseEvent - - Property - - Read-only - - Reference -translation_of: Web/API/MouseEvent/offsetY ---- -

{{APIRef("DOM Events")}}{{SeeCompatTable}}

- -

La propriété en lecture seule offsetY de l'interface {{domxref("MouseEvent")}}  fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.

- -

Syntaxe

- -
var yOffset = instanceOfMouseEvent.offsetY;
-
- -

Valeur retournée

- -

Un nombre à virgule flottante double précision double. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSSOM View', '#dom-mouseevent-offsety', 'MouseEvent')}}{{Spec2('CSSOM View')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.MouseEvent.offsetY")}}

- -

Voir aussi

- -
    -
  • {{domxref("MouseEvent")}}
    • -
diff --git a/files/fr/web/api/mouseevent/offsety/index.md b/files/fr/web/api/mouseevent/offsety/index.md new file mode 100644 index 0000000000..ca71439cef --- /dev/null +++ b/files/fr/web/api/mouseevent/offsety/index.md @@ -0,0 +1,51 @@ +--- +title: MouseEvent.offsetY +slug: Web/API/MouseEvent/offsetY +tags: + - API + - Experimental + - MouseEvent + - Property + - Read-only + - Reference +translation_of: Web/API/MouseEvent/offsetY +--- +

{{APIRef("DOM Events")}}{{SeeCompatTable}}

+ +

La propriété en lecture seule offsetY de l'interface {{domxref("MouseEvent")}}  fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.

+ +

Syntaxe

+ +
var yOffset = instanceOfMouseEvent.offsetY;
+
+ +

Valeur retournée

+ +

Un nombre à virgule flottante double précision double. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSSOM View', '#dom-mouseevent-offsety', 'MouseEvent')}}{{Spec2('CSSOM View')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MouseEvent.offsetY")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("MouseEvent")}}
    • +
diff --git a/files/fr/web/api/mutationobserver/index.html b/files/fr/web/api/mutationobserver/index.html deleted file mode 100644 index 2be16d34b7..0000000000 --- a/files/fr/web/api/mutationobserver/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: MutationObserver -slug: Web/API/MutationObserver -translation_of: Web/API/MutationObserver ---- -

{{APIRef("DOM")}}

- -

MutationObserver fournit un moyen d’intercepter les changements dans le DOM. Il a été conçu pour remplacer les Mutation Events définis dans la spécification DOM3 Events.

- -

Constructeur

- -

MutationObserver()

- -

Le constructeur permettant d’instancier un nouvel observateur de mutations DOM.

- -
new MutationObserver( function callback );
- -

Paramètres

- -
-
callback
-
Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de MutationObserver.
-
- -

Méthodes d’instance

- - - - - - - - - - - - - -
void observe( {{domxref("Node")}} target, MutationObserverInit options );
void disconnect();
Array takeRecords();
- -
-

Note : La cible {{domxref("Node")}} ne doit pas être confondue avec celle de NodeJS.

-
- -

observe()

- -

Inscrit l’instance du MutationObserver afin d’être notifié des mutations DOM du nœud sélectionné.

- -
void observe( {{domxref("Node")}} target, MutationObserverInit options );
-
- -

Paramètres

- -
-
target
-
Le {{domxref("Node")}} (nœud) sur lequel doivent être observées les mutations DOM.
-
options
-
Un objet du type MutationObserverInit. Il spécifie quelles mutations DOM sont à rapporter.
-
- -
-

Note : ajouter un observateur sur un élément revient à utiliser addEventListener. Si vous observez un élément plusieurs fois, cela n’a pas d’impact, dans le sens où, si vous observez un élément deux fois, la callback ne sera pas appelée deux fois, et vous n’aurez pas besoin d’appeler disconnect() deux fois. En d’autres termes, une fois qu’un élément est observé, l’observer à nouveau avec la même instance n’a pas d’effet. Cependant, si la callback est différente, un nouvel observateur sera ajouté.

-
- -

disconnect()

- -

L’instance MutationObserver cesse de recevoir les notifications de mutations DOM. Jusqu’à ce que la méthode observe() soit appelée à nouveau, les callbacks de l’observateur ne seront pas invoquées.

- -
void disconnect();
-
- -
-

Note : Selon la spécification, un MutationObserver est supprimé par le garbage collector si l'élément cible est supprimé.

-
- -

takeRecords()

- -

Vide la file des mutations enregistrées du MutationObserver et retourne son contenu.

- -
Array takeRecords();
-
- -
-
Valeur de retour
-
Retourne un tableau de {{domxref("MutationRecord")}}.
-
- -

MutationObserverInit

- -

MutationObserverInit est un objet pouvant avoir les propriétés suivantes :

- -
-

Note : Au moins une propriété parmi childList, attributes ou characterData doit être initialisée à true, sinon l’erreur "An invalid or illegal string was specified" sera émise.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéDescription
childListtrue si l’ajout ou la suppression des éléments enfants du nœud visé (incluant les nœuds de texte) sont à observer.
attributestrue si les mutations d’attributs du nœud visé sont à observer.
characterDatatrue si les mutation de texte du nœud visé sont à observer.
subtreetrue si les descendants du nœud visé sont également à observer.
attributeOldValuetrue si attributes est true et si la valeur des attributs avant mutation doit être enregistrée.
characterDataOldValuetrue si characterData est true et si la valeur des données avant mutation doit être enregistrée.
attributeFilterSpécifiez un tableau de noms d’attributs locaux (sans namespace) si vous souhaitez n’observer les mutations que sur une partie des attributs.
- -

Exemple d’utilisation

- -

L’exemple suivant est extrait de ce blog.

- -
// Selectionne le noeud dont les mutations seront observées
-var targetNode = document.getElementById('some-id');
-
-// Options de l'observateur (quelles sont les mutations à observer)
-var config = { attributes: true, childList: true };
-
-// Fonction callback à éxécuter quand une mutation est observée
-var callback = function(mutationsList) {
-    for(var mutation of mutationsList) {
-        if (mutation.type == 'childList') {
-            console.log('Un noeud enfant a été ajouté ou supprimé.');
-        }
-        else if (mutation.type == 'attributes') {
-            console.log("L'attribut '" + mutation.attributeName + "' a été modifié.");
-        }
-    }
-};
-
-// Créé une instance de l'observateur lié à la fonction de callback
-var observer = new MutationObserver(callback);
-
-// Commence à observer le noeud cible pour les mutations précédemment configurées
-observer.observe(targetNode, config);
-
-// L'observation peut être arrêtée par la suite
-observer.disconnect();
- -

Autres articles pour en savoir plus (en anglais)

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.MutationObserver")}}

diff --git a/files/fr/web/api/mutationobserver/index.md b/files/fr/web/api/mutationobserver/index.md new file mode 100644 index 0000000000..2be16d34b7 --- /dev/null +++ b/files/fr/web/api/mutationobserver/index.md @@ -0,0 +1,195 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM")}}

+ +

MutationObserver fournit un moyen d’intercepter les changements dans le DOM. Il a été conçu pour remplacer les Mutation Events définis dans la spécification DOM3 Events.

+ +

Constructeur

+ +

MutationObserver()

+ +

Le constructeur permettant d’instancier un nouvel observateur de mutations DOM.

+ +
new MutationObserver( function callback );
+ +

Paramètres

+ +
+
callback
+
Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de MutationObserver.
+
+ +

Méthodes d’instance

+ + + + + + + + + + + + + +
void observe( {{domxref("Node")}} target, MutationObserverInit options );
void disconnect();
Array takeRecords();
+ +
+

Note : La cible {{domxref("Node")}} ne doit pas être confondue avec celle de NodeJS.

+
+ +

observe()

+ +

Inscrit l’instance du MutationObserver afin d’être notifié des mutations DOM du nœud sélectionné.

+ +
void observe( {{domxref("Node")}} target, MutationObserverInit options );
+
+ +

Paramètres

+ +
+
target
+
Le {{domxref("Node")}} (nœud) sur lequel doivent être observées les mutations DOM.
+
options
+
Un objet du type MutationObserverInit. Il spécifie quelles mutations DOM sont à rapporter.
+
+ +
+

Note : ajouter un observateur sur un élément revient à utiliser addEventListener. Si vous observez un élément plusieurs fois, cela n’a pas d’impact, dans le sens où, si vous observez un élément deux fois, la callback ne sera pas appelée deux fois, et vous n’aurez pas besoin d’appeler disconnect() deux fois. En d’autres termes, une fois qu’un élément est observé, l’observer à nouveau avec la même instance n’a pas d’effet. Cependant, si la callback est différente, un nouvel observateur sera ajouté.

+
+ +

disconnect()

+ +

L’instance MutationObserver cesse de recevoir les notifications de mutations DOM. Jusqu’à ce que la méthode observe() soit appelée à nouveau, les callbacks de l’observateur ne seront pas invoquées.

+ +
void disconnect();
+
+ +
+

Note : Selon la spécification, un MutationObserver est supprimé par le garbage collector si l'élément cible est supprimé.

+
+ +

takeRecords()

+ +

Vide la file des mutations enregistrées du MutationObserver et retourne son contenu.

+ +
Array takeRecords();
+
+ +
+
Valeur de retour
+
Retourne un tableau de {{domxref("MutationRecord")}}.
+
+ +

MutationObserverInit

+ +

MutationObserverInit est un objet pouvant avoir les propriétés suivantes :

+ +
+

Note : Au moins une propriété parmi childList, attributes ou characterData doit être initialisée à true, sinon l’erreur "An invalid or illegal string was specified" sera émise.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéDescription
childListtrue si l’ajout ou la suppression des éléments enfants du nœud visé (incluant les nœuds de texte) sont à observer.
attributestrue si les mutations d’attributs du nœud visé sont à observer.
characterDatatrue si les mutation de texte du nœud visé sont à observer.
subtreetrue si les descendants du nœud visé sont également à observer.
attributeOldValuetrue si attributes est true et si la valeur des attributs avant mutation doit être enregistrée.
characterDataOldValuetrue si characterData est true et si la valeur des données avant mutation doit être enregistrée.
attributeFilterSpécifiez un tableau de noms d’attributs locaux (sans namespace) si vous souhaitez n’observer les mutations que sur une partie des attributs.
+ +

Exemple d’utilisation

+ +

L’exemple suivant est extrait de ce blog.

+ +
// Selectionne le noeud dont les mutations seront observées
+var targetNode = document.getElementById('some-id');
+
+// Options de l'observateur (quelles sont les mutations à observer)
+var config = { attributes: true, childList: true };
+
+// Fonction callback à éxécuter quand une mutation est observée
+var callback = function(mutationsList) {
+    for(var mutation of mutationsList) {
+        if (mutation.type == 'childList') {
+            console.log('Un noeud enfant a été ajouté ou supprimé.');
+        }
+        else if (mutation.type == 'attributes') {
+            console.log("L'attribut '" + mutation.attributeName + "' a été modifié.");
+        }
+    }
+};
+
+// Créé une instance de l'observateur lié à la fonction de callback
+var observer = new MutationObserver(callback);
+
+// Commence à observer le noeud cible pour les mutations précédemment configurées
+observer.observe(targetNode, config);
+
+// L'observation peut être arrêtée par la suite
+observer.disconnect();
+ +

Autres articles pour en savoir plus (en anglais)

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.MutationObserver")}}

diff --git a/files/fr/web/api/namednodemap/index.html b/files/fr/web/api/namednodemap/index.html deleted file mode 100644 index fd83416312..0000000000 --- a/files/fr/web/api/namednodemap/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: NamedNodeMap -slug: Web/API/NamedNodeMap -tags: - - API - - DOM - - Interface - - Reference -translation_of: Web/API/NamedNodeMap ---- -
{{APIRef("DOM")}}
- -

L'interface NamedNodeMap représente une collection d'objets {{domxref("Attr")}}. Les objets de cette collection n'ont pas d'ordre particulier (contrairement à {{domxref("NodeList")}}) mais on peut y accéder grâce à un index (comme pour un tableau).

- -

Un objet NamedNodeMap est vivant et sera automatiquement mis à jour si des modifications sont apportées à son contenu (que cela provienne d'une source interne ou externe).

- -
-

Note : Bien qu'intitulée NamedNodeMap, cette interface ne manipule pas d'objets {{domxref("Node")}} mais des objets {{domxref("Attr")}}. Ces derniers étaient à l'origine (et le sont toujours pour certaines implémentations) une classe spécialisée de {{domxref("Node")}}.

-
- -

Propriétés

- -

Cette interface n'hérite d'aucune propriété.

- -
-
{{domxref("NamedNodeMap.length")}} {{ReadOnlyInline}}
-
Cette propriété renvoie le nombre d'objets contenus dans la map.
-
- -

Méthodes

- -

Cette interface n'hérite d'aucune méthode.

- -
-
{{domxref("NamedNodeMap.getNamedItem()")}}
-
Cette méthode renvoie un objet {{domxref("Attr")}} qui correspond au nom indiqué.
-
{{domxref("NamedNodeMap.setNamedItem()")}}
-
Cette méthode remplace ou ajoute l'objet {{domxref("Attr")}} identifié dans la collection par le nom indiqué.
-
{{domxref("NamedNodeMap.removeNamedItem()")}}
-
Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir du nom indiqué.
-
{{domxref("NamedNodeMap.item()")}}
-
Cette méthode renvoie l'objet {{domxref("Attr")}} à l'index indiqué (ou null si l'index est supérieur ou égal au nombre de nœuds.
-
{{domxref("NamedNodeMap.getNamedItemNS()")}}
-
Cette méthode renvoie un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.
-
{{domxref("NamedNodeMap.setNamedItemNS()")}}
-
Cette méthode remplace ou ajoute un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.
-
{{domxref("NamedNodeMap.removeNamedItemNS()")}}
-
Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir d'un espace de noms et d'un nom local associé.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#interface-namednodemap', 'NamedNodeMap')}}{{Spec2('DOM WHATWG')}}Interagit avec {{domxref("Attr")}} plutôt qu'avec {{domxref("Node")}}
{{SpecName('DOM3 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}{{Spec2('DOM3 Core')}}Aucune modification depuis {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}{{Spec2('DOM2 Core')}}Ajout des méthodes getNamedItemNS(), setNamedItemNS() et removeNamedItemNS()
{{SpecName('DOM1', 'core.html#ID-1780488922', 'NamedNodeMap')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.NamedNodeMap")}}

- -

Voir aussi

- -
    -
  • {{domxref("Element.attributes")}}
    • -
  • {{domxref("Attr")}}
    • -
  • {{domxref("NodeList")}}
    • -
diff --git a/files/fr/web/api/namednodemap/index.md b/files/fr/web/api/namednodemap/index.md new file mode 100644 index 0000000000..fd83416312 --- /dev/null +++ b/files/fr/web/api/namednodemap/index.md @@ -0,0 +1,93 @@ +--- +title: NamedNodeMap +slug: Web/API/NamedNodeMap +tags: + - API + - DOM + - Interface + - Reference +translation_of: Web/API/NamedNodeMap +--- +
{{APIRef("DOM")}}
+ +

L'interface NamedNodeMap représente une collection d'objets {{domxref("Attr")}}. Les objets de cette collection n'ont pas d'ordre particulier (contrairement à {{domxref("NodeList")}}) mais on peut y accéder grâce à un index (comme pour un tableau).

+ +

Un objet NamedNodeMap est vivant et sera automatiquement mis à jour si des modifications sont apportées à son contenu (que cela provienne d'une source interne ou externe).

+ +
+

Note : Bien qu'intitulée NamedNodeMap, cette interface ne manipule pas d'objets {{domxref("Node")}} mais des objets {{domxref("Attr")}}. Ces derniers étaient à l'origine (et le sont toujours pour certaines implémentations) une classe spécialisée de {{domxref("Node")}}.

+
+ +

Propriétés

+ +

Cette interface n'hérite d'aucune propriété.

+ +
+
{{domxref("NamedNodeMap.length")}} {{ReadOnlyInline}}
+
Cette propriété renvoie le nombre d'objets contenus dans la map.
+
+ +

Méthodes

+ +

Cette interface n'hérite d'aucune méthode.

+ +
+
{{domxref("NamedNodeMap.getNamedItem()")}}
+
Cette méthode renvoie un objet {{domxref("Attr")}} qui correspond au nom indiqué.
+
{{domxref("NamedNodeMap.setNamedItem()")}}
+
Cette méthode remplace ou ajoute l'objet {{domxref("Attr")}} identifié dans la collection par le nom indiqué.
+
{{domxref("NamedNodeMap.removeNamedItem()")}}
+
Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir du nom indiqué.
+
{{domxref("NamedNodeMap.item()")}}
+
Cette méthode renvoie l'objet {{domxref("Attr")}} à l'index indiqué (ou null si l'index est supérieur ou égal au nombre de nœuds.
+
{{domxref("NamedNodeMap.getNamedItemNS()")}}
+
Cette méthode renvoie un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.
+
{{domxref("NamedNodeMap.setNamedItemNS()")}}
+
Cette méthode remplace ou ajoute un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.
+
{{domxref("NamedNodeMap.removeNamedItemNS()")}}
+
Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir d'un espace de noms et d'un nom local associé.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#interface-namednodemap', 'NamedNodeMap')}}{{Spec2('DOM WHATWG')}}Interagit avec {{domxref("Attr")}} plutôt qu'avec {{domxref("Node")}}
{{SpecName('DOM3 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}{{Spec2('DOM3 Core')}}Aucune modification depuis {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}{{Spec2('DOM2 Core')}}Ajout des méthodes getNamedItemNS(), setNamedItemNS() et removeNamedItemNS()
{{SpecName('DOM1', 'core.html#ID-1780488922', 'NamedNodeMap')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.NamedNodeMap")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("Element.attributes")}}
    • +
  • {{domxref("Attr")}}
    • +
  • {{domxref("NodeList")}}
    • +
diff --git a/files/fr/web/api/navigator/battery/index.html b/files/fr/web/api/navigator/battery/index.html deleted file mode 100644 index 59595e4a78..0000000000 --- a/files/fr/web/api/navigator/battery/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: window.navigator.battery -slug: Web/API/Navigator/battery -translation_of: Web/API/Navigator/battery ---- -

{{ Apiref() }}

- -

{{ SeeCompatTable() }}

- -

L'API Battery Status fournit des informations sur le niveau de charge du système et vous permet d'être notifiée via certains évènements si le niveau de batterie varie. Elle peut être utilisée pour privilégier les tâches moins gourmantes en traitement processeur sur votre site si le niveau de batterie est faible ou permettre une sauvegarde de vos travaux pour prévir d'une perte de données si la batterie est presque vide.

- -

Attributs

- -
-
charging
-
Lecture seule. Un booléen représentant le statut de charge de la batterie du système. Il retourne vrai si la batterie est en charge, si l'état de charge n'est pas déterminable, ou si aucune batterie n'est branchée au système. Retourne faux si la batterie est en cours de décharge.
-
chargingTime
-
Lecture seule. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement chargée. Retourne 0 si la batterie est complètement chargée.
- Retourne un infini positif si la batterie se décharge ou si l'implémentation est incapable de déterminer le temps de charge restant.
-
dischargingTime
-
Lecture seule. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement déchargée et que le système ne soit suspendu. Retourne un infini positif si la batterie est en charge, si l'implémentation n'est pas capable de déterminer le temps de décharge restant, ou s'il n'y a pas de batterie branchée au système.
-
level
-
Lecture seule. Un double représentant le niveau de charge de la batterie du système, échelonné de 0 à 1.0. Retourne 0 si la batterie est vide et que le système est sur le point d'être suspendu. Retourne 1.0 si la batterie est pleine, si l'implémentation n'est pas capable de déterminer le niveau de charge de la batterie, ou s'il n'y a pas de batterie branchée au système.
-
- -

Evènements

- -
-
chargingchange
-
Déclenché lorsque l'état de charge de la batterie est mis à jour.
-
chargingtimechange
-
Déclenché lorsque le temps de charge de la batterie est mis à jour.
-
dischargingtimechange
-
Déclenché lorsque le temps de decharge de la batterie est mis à jour.
-
levelchange
-
Déclenché lorsque le niveau de charge de la batterie est mis à jour.
-
- -

Exemple

- -

Voir aussi l'exemple dans la specification.

- -
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
-
-function updateBatteryStatus() {
-  alert("Battery status: " + battery.level * 100 + " %");
-
-  if (battery.charging) {
-    alert("Battery is charging");
-  }
-}
-
-battery.addEventListener("chargingchange", updateBatteryStatus);
-battery.addEventListener("levelchange", updateBatteryStatus);
-updateBatteryStatus();
-
- -

Compatibilité des navigateurs

- -

{{Compat("api.Navigator.battery")}}

- -

Voir aussi

- - \ No newline at end of file diff --git a/files/fr/web/api/navigator/battery/index.md b/files/fr/web/api/navigator/battery/index.md new file mode 100644 index 0000000000..59595e4a78 --- /dev/null +++ b/files/fr/web/api/navigator/battery/index.md @@ -0,0 +1,67 @@ +--- +title: window.navigator.battery +slug: Web/API/Navigator/battery +translation_of: Web/API/Navigator/battery +--- +

{{ Apiref() }}

+ +

{{ SeeCompatTable() }}

+ +

L'API Battery Status fournit des informations sur le niveau de charge du système et vous permet d'être notifiée via certains évènements si le niveau de batterie varie. Elle peut être utilisée pour privilégier les tâches moins gourmantes en traitement processeur sur votre site si le niveau de batterie est faible ou permettre une sauvegarde de vos travaux pour prévir d'une perte de données si la batterie est presque vide.

+ +

Attributs

+ +
+
charging
+
Lecture seule. Un booléen représentant le statut de charge de la batterie du système. Il retourne vrai si la batterie est en charge, si l'état de charge n'est pas déterminable, ou si aucune batterie n'est branchée au système. Retourne faux si la batterie est en cours de décharge.
+
chargingTime
+
Lecture seule. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement chargée. Retourne 0 si la batterie est complètement chargée.
+ Retourne un infini positif si la batterie se décharge ou si l'implémentation est incapable de déterminer le temps de charge restant.
+
dischargingTime
+
Lecture seule. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement déchargée et que le système ne soit suspendu. Retourne un infini positif si la batterie est en charge, si l'implémentation n'est pas capable de déterminer le temps de décharge restant, ou s'il n'y a pas de batterie branchée au système.
+
level
+
Lecture seule. Un double représentant le niveau de charge de la batterie du système, échelonné de 0 à 1.0. Retourne 0 si la batterie est vide et que le système est sur le point d'être suspendu. Retourne 1.0 si la batterie est pleine, si l'implémentation n'est pas capable de déterminer le niveau de charge de la batterie, ou s'il n'y a pas de batterie branchée au système.
+
+ +

Evènements

+ +
+
chargingchange
+
Déclenché lorsque l'état de charge de la batterie est mis à jour.
+
chargingtimechange
+
Déclenché lorsque le temps de charge de la batterie est mis à jour.
+
dischargingtimechange
+
Déclenché lorsque le temps de decharge de la batterie est mis à jour.
+
levelchange
+
Déclenché lorsque le niveau de charge de la batterie est mis à jour.
+
+ +

Exemple

+ +

Voir aussi l'exemple dans la specification.

+ +
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  alert("Battery status: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    alert("Battery is charging");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Navigator.battery")}}

+ +

Voir aussi

+ + \ No newline at end of file diff --git a/files/fr/web/api/navigator/connection/index.html b/files/fr/web/api/navigator/connection/index.html deleted file mode 100644 index 5d46c33194..0000000000 --- a/files/fr/web/api/navigator/connection/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Navigator.connection -slug: Web/API/Navigator/connection -tags: - - API - - Connexion - - Expérimental(2) - - Navigateur - - Propriété -translation_of: Web/API/Navigator/connection ---- -

{{APIRef("Network Information API")}}{{SeeCompatTable}}

- -

Navigator.connection est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la  bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur.

- -

Syntaxe

- -
connexionInfo = navigator.connection
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Network Information', '#h-the-connection-attribute', 'Navigator.connection')}}{{Spec2('Network Information')}}Spécification initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Navigator.connection")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/navigator/connection/index.md b/files/fr/web/api/navigator/connection/index.md new file mode 100644 index 0000000000..5d46c33194 --- /dev/null +++ b/files/fr/web/api/navigator/connection/index.md @@ -0,0 +1,47 @@ +--- +title: Navigator.connection +slug: Web/API/Navigator/connection +tags: + - API + - Connexion + - Expérimental(2) + - Navigateur + - Propriété +translation_of: Web/API/Navigator/connection +--- +

{{APIRef("Network Information API")}}{{SeeCompatTable}}

+ +

Navigator.connection est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la  bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur.

+ +

Syntaxe

+ +
connexionInfo = navigator.connection
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Network Information', '#h-the-connection-attribute', 'Navigator.connection')}}{{Spec2('Network Information')}}Spécification initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Navigator.connection")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/navigator/cookieenabled/index.html b/files/fr/web/api/navigator/cookieenabled/index.html deleted file mode 100644 index 91d3ae78e0..0000000000 --- a/files/fr/web/api/navigator/cookieenabled/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Navigator.cookieEnabled -slug: Web/API/Navigator/cookieEnabled -translation_of: Web/API/Navigator/cookieEnabled ---- -

{{ ApiRef("HTML DOM") }}

- -

navigator.cookieEnabled retourne une valeur booléenne qui indique si les cookies sont activés. Cette propriété est en lecture seule.

- -

Syntax

- -
var cookieEnabled = navigator.cookieEnabled;
-
- -
    -
  • cookieEnabled est un Boolean: true ou false.
    • -
- -

Example

- -
if (!navigator.cookieEnabled) {
-  // Ce navigateur ne supporte pas ou bloque les cookies.
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "webappapis.html#dom-navigator-cookieenabled", "Navigator.cookieEnabled")}}{{Spec2("HTML WHATWG")}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Navigator.cookieEnabled")}}

diff --git a/files/fr/web/api/navigator/cookieenabled/index.md b/files/fr/web/api/navigator/cookieenabled/index.md new file mode 100644 index 0000000000..91d3ae78e0 --- /dev/null +++ b/files/fr/web/api/navigator/cookieenabled/index.md @@ -0,0 +1,49 @@ +--- +title: Navigator.cookieEnabled +slug: Web/API/Navigator/cookieEnabled +translation_of: Web/API/Navigator/cookieEnabled +--- +

{{ ApiRef("HTML DOM") }}

+ +

navigator.cookieEnabled retourne une valeur booléenne qui indique si les cookies sont activés. Cette propriété est en lecture seule.

+ +

Syntax

+ +
var cookieEnabled = navigator.cookieEnabled;
+
+ +
    +
  • cookieEnabled est un Boolean: true ou false.
    • +
+ +

Example

+ +
if (!navigator.cookieEnabled) {
+  // Ce navigateur ne supporte pas ou bloque les cookies.
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "webappapis.html#dom-navigator-cookieenabled", "Navigator.cookieEnabled")}}{{Spec2("HTML WHATWG")}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Navigator.cookieEnabled")}}

diff --git a/files/fr/web/api/navigator/credentials/index.html b/files/fr/web/api/navigator/credentials/index.html deleted file mode 100644 index 0629fcfe44..0000000000 --- a/files/fr/web/api/navigator/credentials/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Navigator.credentials -slug: Web/API/Navigator/credentials -tags: - - API - - Credential Management API - - CredentialsContainer - - Propriété - - Reference -translation_of: Web/API/Navigator/credentials ---- -

{{securecontext_header}}{{APIRef("")}}

- -

La propriété credentials, rattachée à l'interface {{domxref("Navigator")}}, renvoie l'interface {{domxref("CredentialsContainer")}} qui expose des méthodes pour demander des informations d'authentification. L'interface {{domxref("CredentialsContainer")}} notifie également l'agent utilisateur lorsqu'un évènement pertinent se produit (une connexion ou une déconnexion réussie par exemple). Cette propriété peut être utilisée pour détecter si la fonctionnalité est prise en charge ou non.

- -

Syntaxe

- -
var credentialsContainer = navigator.credentials
- -

Valeur

- -

L'interface {{domxref("CredentialsContainer")}}.

- -

Exemples

- -
if ('credentials' in navigator) {
-  navigator.credentials.get({password: true})
-  .then(function(creds) {
-    // Gérer les informations d'authentification
-  });
-} else {
-  // Gérer la connexion comme avant
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Navigator.credentials")}}

diff --git a/files/fr/web/api/navigator/credentials/index.md b/files/fr/web/api/navigator/credentials/index.md new file mode 100644 index 0000000000..0629fcfe44 --- /dev/null +++ b/files/fr/web/api/navigator/credentials/index.md @@ -0,0 +1,57 @@ +--- +title: Navigator.credentials +slug: Web/API/Navigator/credentials +tags: + - API + - Credential Management API + - CredentialsContainer + - Propriété + - Reference +translation_of: Web/API/Navigator/credentials +--- +

{{securecontext_header}}{{APIRef("")}}

+ +

La propriété credentials, rattachée à l'interface {{domxref("Navigator")}}, renvoie l'interface {{domxref("CredentialsContainer")}} qui expose des méthodes pour demander des informations d'authentification. L'interface {{domxref("CredentialsContainer")}} notifie également l'agent utilisateur lorsqu'un évènement pertinent se produit (une connexion ou une déconnexion réussie par exemple). Cette propriété peut être utilisée pour détecter si la fonctionnalité est prise en charge ou non.

+ +

Syntaxe

+ +
var credentialsContainer = navigator.credentials
+ +

Valeur

+ +

L'interface {{domxref("CredentialsContainer")}}.

+ +

Exemples

+ +
if ('credentials' in navigator) {
+  navigator.credentials.get({password: true})
+  .then(function(creds) {
+    // Gérer les informations d'authentification
+  });
+} else {
+  // Gérer la connexion comme avant
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Navigator.credentials")}}

diff --git a/files/fr/web/api/navigator/donottrack/index.html b/files/fr/web/api/navigator/donottrack/index.html deleted file mode 100644 index 9acf7c3241..0000000000 --- a/files/fr/web/api/navigator/donottrack/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Navigator.doNotTrack -slug: Web/API/Navigator/doNotTrack -tags: - - API - - DOM - - Propriétés - - Reference -translation_of: Web/API/Navigator/doNotTrack ---- -

{{ApiRef("HTML DOM")}}{{SeeCompatTable}}

- -

Renvoi le paramètre utilisateur de do-not-track. Cette valeur est "1" si l´utilisateur a demandé de ne pas être suivi par les sites web, le contenu ou la publicité.

- -

Syntaxe

- -
dnt = navigator.doNotTrack;
-
- -

La valeur reflète celle de l'en-tête "do-not-track" (ne pas suivre), c'est-à-dire {"1", "0", "unspecified" }. Note : Avant Gecko 32, Gecko a utilisé les valeurs { "yes", "no", "unspecified"} (bug 887703).

- -

Exemple

- -
dump(window.navigator.doNotTrack);
-//  écrit "1" si DNT est activé; "0" si l'utilisateur a opté pour le suivi; sinon c'est "unspecified" (non spécifié)
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Tracking", "#widl-Navigator-doNotTrack", "Navigator.doNotTrack")}}{{Spec2("Tracking")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Navigator.doNotTrack")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/navigator/donottrack/index.md b/files/fr/web/api/navigator/donottrack/index.md new file mode 100644 index 0000000000..9acf7c3241 --- /dev/null +++ b/files/fr/web/api/navigator/donottrack/index.md @@ -0,0 +1,55 @@ +--- +title: Navigator.doNotTrack +slug: Web/API/Navigator/doNotTrack +tags: + - API + - DOM + - Propriétés + - Reference +translation_of: Web/API/Navigator/doNotTrack +--- +

{{ApiRef("HTML DOM")}}{{SeeCompatTable}}

+ +

Renvoi le paramètre utilisateur de do-not-track. Cette valeur est "1" si l´utilisateur a demandé de ne pas être suivi par les sites web, le contenu ou la publicité.

+ +

Syntaxe

+ +
dnt = navigator.doNotTrack;
+
+ +

La valeur reflète celle de l'en-tête "do-not-track" (ne pas suivre), c'est-à-dire {"1", "0", "unspecified" }. Note : Avant Gecko 32, Gecko a utilisé les valeurs { "yes", "no", "unspecified"} (bug 887703).

+ +

Exemple

+ +
dump(window.navigator.doNotTrack);
+//  écrit "1" si DNT est activé; "0" si l'utilisateur a opté pour le suivi; sinon c'est "unspecified" (non spécifié)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Tracking", "#widl-Navigator-doNotTrack", "Navigator.doNotTrack")}}{{Spec2("Tracking")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Navigator.doNotTrack")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/navigator/geolocation/index.html b/files/fr/web/api/navigator/geolocation/index.html deleted file mode 100644 index 3d534b7c95..0000000000 --- a/files/fr/web/api/navigator/geolocation/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Navigator.geolocation -slug: Web/API/Navigator/geolocation -tags: - - API - - Géolocalisation API - - Navigateur - - Propriété - - Reference -translation_of: Web/API/Navigator/geolocation ---- -
{{APIRef("Geolocation API")}}
- -

Navigator.geolocation est une propriété en lecture seule, qui retoune un objet {{domxref("Geolocation")}} donnant accès aux contenus web de localisation de l'appareil. Ceci permet à un site Internet ou à une application d'offrir des résultats personnalisés basés sur la localisation des utilisateurs.

- -
-

Note: Pour des raisons de sécurité, quand une page web essaie d'accéder aux informations de localisation, l'utilisateur reçoit une notification qui lui demande la permission d'activer cette fonctionnalité. Chaque navigateur a sa propre politique et ses propres méthodes pour demander cette permission.

-
- -

Syntaxe

- -
geo = navigator.geolocation
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#navi-geo', 'Navigator.geolocation')}}{{Spec2('Geolocation')}}Initial definition
- -

Compatibilité navigateur

- -

{{Compat("api.Navigator.geolocation")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/navigator/geolocation/index.md b/files/fr/web/api/navigator/geolocation/index.md new file mode 100644 index 0000000000..3d534b7c95 --- /dev/null +++ b/files/fr/web/api/navigator/geolocation/index.md @@ -0,0 +1,52 @@ +--- +title: Navigator.geolocation +slug: Web/API/Navigator/geolocation +tags: + - API + - Géolocalisation API + - Navigateur + - Propriété + - Reference +translation_of: Web/API/Navigator/geolocation +--- +
{{APIRef("Geolocation API")}}
+ +

Navigator.geolocation est une propriété en lecture seule, qui retoune un objet {{domxref("Geolocation")}} donnant accès aux contenus web de localisation de l'appareil. Ceci permet à un site Internet ou à une application d'offrir des résultats personnalisés basés sur la localisation des utilisateurs.

+ +
+

Note: Pour des raisons de sécurité, quand une page web essaie d'accéder aux informations de localisation, l'utilisateur reçoit une notification qui lui demande la permission d'activer cette fonctionnalité. Chaque navigateur a sa propre politique et ses propres méthodes pour demander cette permission.

+
+ +

Syntaxe

+ +
geo = navigator.geolocation
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#navi-geo', 'Navigator.geolocation')}}{{Spec2('Geolocation')}}Initial definition
+ +

Compatibilité navigateur

+ +

{{Compat("api.Navigator.geolocation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/navigator/getgamepads/index.html b/files/fr/web/api/navigator/getgamepads/index.html deleted file mode 100644 index 0f7480f238..0000000000 --- a/files/fr/web/api/navigator/getgamepads/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Navigator.getGamepads() -slug: Web/API/Navigator/getGamepads -translation_of: Web/API/Navigator/getGamepads ---- -

{{ APIRef("Navigator") }}{{SeeCompatTable}}

- -

La méthode Navigator.getGamepads() renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine.

- -

Des éléments dans le tableau peuvent être null si un contrôleur est déconnecté durant la session, ainsi les autres restants gardent le même indice.

- -

Syntaxe

- -
 var arrayGP = navigator.getGamepads();
- -

Exemple

- -
window.addEventListener("gamepadconnected", function(e) {
-  var gp = navigator.getGamepads()[0];
-  console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
-  gp.index, gp.id,
-  gp.buttons.length, gp.axes.length);
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Gamepad', '', 'The Gamepad API specification')}}{{Spec2('Gamepad')}}Première définition.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Navigator.getGamepads")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/navigator/getgamepads/index.md b/files/fr/web/api/navigator/getgamepads/index.md new file mode 100644 index 0000000000..0f7480f238 --- /dev/null +++ b/files/fr/web/api/navigator/getgamepads/index.md @@ -0,0 +1,53 @@ +--- +title: Navigator.getGamepads() +slug: Web/API/Navigator/getGamepads +translation_of: Web/API/Navigator/getGamepads +--- +

{{ APIRef("Navigator") }}{{SeeCompatTable}}

+ +

La méthode Navigator.getGamepads() renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine.

+ +

Des éléments dans le tableau peuvent être null si un contrôleur est déconnecté durant la session, ainsi les autres restants gardent le même indice.

+ +

Syntaxe

+ +
 var arrayGP = navigator.getGamepads();
+ +

Exemple

+ +
window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[0];
+  console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
+  gp.index, gp.id,
+  gp.buttons.length, gp.axes.length);
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Gamepad', '', 'The Gamepad API specification')}}{{Spec2('Gamepad')}}Première définition.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Navigator.getGamepads")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/navigator/getusermedia/index.html b/files/fr/web/api/navigator/getusermedia/index.html deleted file mode 100644 index 2c2d6edcac..0000000000 --- a/files/fr/web/api/navigator/getusermedia/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: NavigatorUserMedia.getUserMedia() -slug: Web/API/Navigator/getUserMedia -tags: - - API - - Deprecated - - Media - - WebRTC - - getusermedia -translation_of: Web/API/Navigator/getUserMedia -original_slug: NavigatorUserMedia.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é.

- -
-

Note : 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

- -
-

Attention : Le nouveau code doit utiliser {{domxref("Navigator.mediaDevices.getUserMedia()")}} à la place.

-
- -

{{Compat("api.Navigator.getUserMedia")}}

- -

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/navigator/getusermedia/index.md b/files/fr/web/api/navigator/getusermedia/index.md new file mode 100644 index 0000000000..2c2d6edcac --- /dev/null +++ b/files/fr/web/api/navigator/getusermedia/index.md @@ -0,0 +1,132 @@ +--- +title: NavigatorUserMedia.getUserMedia() +slug: Web/API/Navigator/getUserMedia +tags: + - API + - Deprecated + - Media + - WebRTC + - getusermedia +translation_of: Web/API/Navigator/getUserMedia +original_slug: NavigatorUserMedia.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é.

+ +
+

Note : 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

+ +
+

Attention : Le nouveau code doit utiliser {{domxref("Navigator.mediaDevices.getUserMedia()")}} à la place.

+
+ +

{{Compat("api.Navigator.getUserMedia")}}

+ +

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/navigator/index.html b/files/fr/web/api/navigator/index.html deleted file mode 100644 index 6c258f9873..0000000000 --- a/files/fr/web/api/navigator/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Navigator -slug: Web/API/Navigator -tags: - - API - - DOM - - Interface - - Navigator - - Reference - - Web - - Web Performance -translation_of: Web/API/Navigator ---- -
{{APIRef("DOM")}}
- -

L'interface Navigator représente l'état et l'identité de l'agent utilisateur courant. Elle permet aux scripts de consulter ces informations et de s'enregistrer en vue de certaines activités.

- -

Un objet instanciant Navigator peut être récupéré grâce à la propriété en lecture seule window.navigator.

- -

Propriétés

- -

Cette interface n'hérite d'aucune propriété mais implémente celles définies par NavigatorID, NavigatorLanguage, NavigatorOnLine, NavigatorContentUtils, NavigatorStorage, NavigatorStorageUtils, NavigatorConcurrentHardware, NavigatorPlugins et NavigatorUserMedia.

- -

Propriétés standard

- -
-
Navigator.connection {{readonlyInline}} {{experimental_inline}}
-
Fournit un objet NetworkInformation contenant des informations quant à la connection réseau de l'appareil.
-
Navigator.cookieEnabled {{readonlyinline}}
-
Renvoie un booléen indiquant si l'ajout d'un cookie sera pris en compte.
-
Navigator.credentials {{readonlyInline}}
-
Renvoie l'interface CredentialsContainer qui expose des méthodes pour la demande d'informations d'authentification et qui notifie l'agent utilisateur lors d'évènements particuliers tels que les connexions ou déconnexions.
-
Navigator.deviceMemory {{readonlyInline}} {{experimental_inline}}
-
Renvoie la quantité de mémoire de l'appareil, exprimée en gigaoctets. Cette valeur est une approximation calculée en prenant la plus proche puissance de 2 puis en divisant le résultat par 1024.
-
Navigator.doNotTrack {{readonlyInline}} {{experimental_inline}}
-
Indique le choix de l'utilisateur fournit pour la préférence do-not-track. Lorsque cette valeur vaut "1", l'application web ne devrait pas pister l'utilisateur.
-
Navigator.geolocation {{readonlyInline}}
-
Renvoie un objet Geolocation permettant l'accès à l'emplacement géographique de l'appareil.
-
NavigatorConcurrentHardware.hardwareConcurrency {{readonlyInline}}
-
Renvoie le nombre de cœurs logiques du processeur.
-
NavigatorPlugins.javaEnabled {{readonlyInline}}
-
Renvoie le booléen false.
-
Navigator.keyboard {{readonlyinline}} {{experimental_inline}}
-
Renvoie un objet Keyboard qui permet d'accéder à des fonctions pour récupérer des informations sur la disposition du clavier et la capture de touches du clavier physique.
-
NavigatorLanguage.language {{readonlyInline}}
-
Renvoie une chaîne de caractères DOMString indiquant la langue préférée de l'utilisateur (qui correspond généralement à la langue utilisée pour l'interface utilisateur du navigateur). La valeur null est renvoyée si cette information est inconnue.
-
NavigatorLanguage.languages {{readonlyInline}} {{experimental_inline}}
-
Renvoie un tableau de chaînes DOMString qui représente les langues connues de l'utilisateur, triées par ordre de préférence.
-
Navigator.locks {{readonlyinline}} {{experimental_inline}}
-
Renvoie un objet LockManager qui fournit des méthodes pour demander un nouvel objet Lock ou s'enquérir d'un objet Lock existant.
-
Navigator.maxTouchPoints {{readonlyInline}}
-
Renvoie le nombre maximum de points de toucher simultanés possible pour l'appareil courant.
-
Navigator.mediaCapabilities {{readonlyinline}} {{experimental_inline}}
-
Renvoie un objet MediaCapabilities qui peut exposer des informations sur le décodage/l'encodage d'un format donné.
-
Navigator.mediaDevices {{readonlyinline}}
-
Renvoie une référence vers un objet MediaDevices permettant d'obtenir des informations à propos des appareils médias disponibles (MediaDevices.enumerateDevices()), de déterminer les propriétés et contraintes prises en charge pour les médias sur cet agent utilisateur et cet ordinateur (MediaDevices.getSupportedConstraints()), de demander l'accès au média via MediaDevices.getUserMedia().
-
Navigator.mediaSession {{readonlyinline}} {{experimental_inline}}
-
Renvoie un objet MediaSession pouvant être utilisé afin de fournir des métadonnées utilisées par le navigateur afin de présenter des informations sur le média en cours de lecture (par exemple pour les interfaces utilisateurs générales de contrôle des médias).
-
NavigatorPlugins.mimeTypes {{readonlyInline}}{{deprecated_inline}}
-
Renvoie une liste MimeTypeArray des types MIME pris en charge par le navigateur.
-
NavigatorOnLine.onLine {{readonlyInline}}
-
Renvoie un booléen indiquant si le navigateur est en ligne.
-
Navigator.permissions {{readonlyinline}} {{experimental_inline}}
-
Renvoie un objet Permissions pouvant être utilisé pour demander ou mettre à jour les informations de permissions pour les API couvertes par l'API Permissions.
-
NavigatorPlugins.plugins {{readonlyInline}}{{deprecated_inline}}
-
Renvoie une liste PluginArray indiquant les plugins installés sur le navigateur.
-
Navigator.presentation {{readonlyInline}} {{experimental_inline}}
-
Renvoie une référence à l'API Presentation .
-
Navigator.serial {{readonlyInline}}
-
Renvoie un objet Serial représentant le point d'entrée vers l'API Web Serial qui permet de contrôler les ports série.
-
Navigator.serviceWorker {{readonlyInline}}
-
Renvoie un objet ServiceWorkerContainer qui permet d'enregistrer, de supprimer, de mettre à jour ou de communiquer avec des objets ServiceWorker pour le document associé.
-
NavigatorStorage.storage {{readonlyinline}}
-
Renvoie le singleton StorageManager utilisé pour la persistence des permissions et la gestion du stockage disponible site par site/application par application.
-
NavigatorID.userAgent {{readonlyInline}}
-
Renvoie la chaîne de caractères de l'agent utilisateur pour le navigateur courant.
-
Navigator.vendor {{readonlyInline}}
-
Renvoie le nom de l'éditeur du navigateur courant (par exemple "Netscape6").
-
Navigator.webdriver {{readonlyInline}} {{experimental_inline}}
-
Indique si l'agent utilisateur est contrôlé par un outil automatisé.
-
Navigator.xr {{readonlyInline}} {{experimental_inline}}
-
Renvoie un objet XRSystem qui représente le point d'entrée sur l'API WebXR.
-
- -

Propriétés non-standard

- -
-
Navigator.buildID {{non-standard_inline}}
-
Renvoie l'identifiant de build du navigateur. Les navigateurs renvoient un horodatage fixe pour éviter le pistage (par exemple 20181001000000 à partir de Firefox 64).
-
Navigator.contacts {{readonlyInline}} {{non-standard_inline}}
-
Renvoie une interface ContactsManager qui permet à l'utilisateur de sélectionner certaines entrées dans la liste des contacts afin de partager certains détails limités avec une application web.
-
Navigator.securitypolicy {{non-standard_inline}}
-
Renvoie une chaîne de caractères vide. Netscape 4.7x renvoyait "US & CA domestic policy" ou "Export policy".
-
Navigator.standalone {{non-standard_inline}}
-
Renvoie un booléen indiquant si le navigateur s'exécute en mode standalone. Uniquement disponible sur Safari pour iOS.
-
Navigator.wakeLock {{readonlyInline}} {{non-standard_inline}}
-
Renvoie une interface WakeLock pouvant être utilisée afin de demander un verrou sur l'écran afin de l'empêcher d'entrer en veille, de s'estomper ou de s'éteindre.
-
- -

Propriétés dépréciées

- -
-
NavigatorID.appCodeName {{readonlyInline}} {{deprecated_inline}}
-
Renvoie le nom de code interne du navigateur. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.
-
NavigatorID.appName {{readonlyInline}} {{deprecated_inline}}
-
Renvoie une chaîne DOMString contenant le nom officiel du navigateur. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.
-
NavigatorID.appVersion {{readonlyInline}} {{deprecated_inline}}
-
Renvoie la version du navigateur sous la forme d'une chaîne DOMString. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.
-
Navigator.activeVRDisplays {{readonlyInline}} {{deprecated_inline}}
-
Renvoie un tableau contenant chaque objet VRDisplay actuellement utilisé pour afficher (autrement dit, pour chaque objet où VRDisplay.ispresenting vaut true).
-
Navigator.battery {{readonlyInline}} {{deprecated_inline}}
-
Renvoie un objet BatteryManager permettant d'avoir des informations sur le statut de charge de la batterie.
-
Navigator.oscpu {{readonlyInline}} {{deprecated_inline}}
-
Renvoie une chaîne de caractères qui représente le système d'exploitation courant.
-
NavigatorID.platform {{readonlyInline}} {{deprecated_inline}}
-
Renvoie une chaîne de caractères représentant la plateforme du navigateur. N'utilisez pas cette fonction afin d'obtenir une valeur significative.
-
NavigatorID.product {{readonlyInline}} {{deprecated_inline}}
-
Renvoie toujours 'Gecko' quel que soit le navigateur. Cette propriété est uniquement conservée à des fins de compatibilité.
-
Navigator.productSub {{readonlyInline}} {{deprecated_inline}}
-
Renvoie le numéro de build précis du navigateur (par exemple "20060909").
-
Navigator.vendorSub {{readonlyInline}} {{deprecated_inline}}
-
Renvoie le numéro de version de l'éditeur (e.g. "6.1").
-
- -

Méthodes

- -

Cette interface n'hérite d'aucune méthode mais implémente celles définies par NavigatorID, NavigatorContentUtils, NavigatorUserMedia, and NavigatorStorageUtils.

- -
-
Navigator.canShare()
-
Renvoie true si un appel à Navigator.share() réussirait.
-
Navigator.registerProtocolHandler()
-
Permet aux sites web de s'enregistrer afin de gérer un protocole donné.
-
Navigator.requestMediaKeySystemAccess()
-
Renvoie une promesse (Promise) qui se résout en un objet MediaKeySystemAccess.
-
Navigator.sendBeacon()
-
Transfère, de façon asynchrone, une petite quantité de donnée avec HTTP depuis l'agent utilisateur vers un serveur web.
-
Navigator.share()
-
Invoque la fonctionnalité native de partage pour la plateforme courant.
-
Navigator.vibrate()
-
Permet de faire vibrer l'appareil si celui-ci prend en charge cette fonctionnalité. Aucun effet n'est produit s'il n'y a pas de compatibilité.
-
- -

Méthodes dépréciées

- -
-
Navigator.getVRDisplays() {{deprecated_inline}}
-
Renvoie une promesse qui se résout en un tableau d'objets VRDisplay représentant chacun un appareil de réalité virtuelle connecté à l'ordinateur.
-
Navigator.getUserMedia() {{deprecated_inline}}
-
Après avoir demandé la permission à l'utilisateur, renvoie le flux audio ou vidéo associé à une caméra ou à un micro sur l'ordinateur local.
-
Navigator.registerContentHandler() {{deprecated_inline}}
-
Permet aux sites web de s'enregistrer pour gérer certains types MIME.
-
NavigatorID.taintEnabled() {{deprecated_inline}}
-
Renvoie false. Les fonctions JavaScript jouant sur cet aspect ont été retirées avec JavaScript 1.2.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', '#the-navigator-object', 'the Navigator object')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -
{{Compat("api.Navigator")}}
diff --git a/files/fr/web/api/navigator/index.md b/files/fr/web/api/navigator/index.md new file mode 100644 index 0000000000..6c258f9873 --- /dev/null +++ b/files/fr/web/api/navigator/index.md @@ -0,0 +1,178 @@ +--- +title: Navigator +slug: Web/API/Navigator +tags: + - API + - DOM + - Interface + - Navigator + - Reference + - Web + - Web Performance +translation_of: Web/API/Navigator +--- +
{{APIRef("DOM")}}
+ +

L'interface Navigator représente l'état et l'identité de l'agent utilisateur courant. Elle permet aux scripts de consulter ces informations et de s'enregistrer en vue de certaines activités.

+ +

Un objet instanciant Navigator peut être récupéré grâce à la propriété en lecture seule window.navigator.

+ +

Propriétés

+ +

Cette interface n'hérite d'aucune propriété mais implémente celles définies par NavigatorID, NavigatorLanguage, NavigatorOnLine, NavigatorContentUtils, NavigatorStorage, NavigatorStorageUtils, NavigatorConcurrentHardware, NavigatorPlugins et NavigatorUserMedia.

+ +

Propriétés standard

+ +
+
Navigator.connection {{readonlyInline}} {{experimental_inline}}
+
Fournit un objet NetworkInformation contenant des informations quant à la connection réseau de l'appareil.
+
Navigator.cookieEnabled {{readonlyinline}}
+
Renvoie un booléen indiquant si l'ajout d'un cookie sera pris en compte.
+
Navigator.credentials {{readonlyInline}}
+
Renvoie l'interface CredentialsContainer qui expose des méthodes pour la demande d'informations d'authentification et qui notifie l'agent utilisateur lors d'évènements particuliers tels que les connexions ou déconnexions.
+
Navigator.deviceMemory {{readonlyInline}} {{experimental_inline}}
+
Renvoie la quantité de mémoire de l'appareil, exprimée en gigaoctets. Cette valeur est une approximation calculée en prenant la plus proche puissance de 2 puis en divisant le résultat par 1024.
+
Navigator.doNotTrack {{readonlyInline}} {{experimental_inline}}
+
Indique le choix de l'utilisateur fournit pour la préférence do-not-track. Lorsque cette valeur vaut "1", l'application web ne devrait pas pister l'utilisateur.
+
Navigator.geolocation {{readonlyInline}}
+
Renvoie un objet Geolocation permettant l'accès à l'emplacement géographique de l'appareil.
+
NavigatorConcurrentHardware.hardwareConcurrency {{readonlyInline}}
+
Renvoie le nombre de cœurs logiques du processeur.
+
NavigatorPlugins.javaEnabled {{readonlyInline}}
+
Renvoie le booléen false.
+
Navigator.keyboard {{readonlyinline}} {{experimental_inline}}
+
Renvoie un objet Keyboard qui permet d'accéder à des fonctions pour récupérer des informations sur la disposition du clavier et la capture de touches du clavier physique.
+
NavigatorLanguage.language {{readonlyInline}}
+
Renvoie une chaîne de caractères DOMString indiquant la langue préférée de l'utilisateur (qui correspond généralement à la langue utilisée pour l'interface utilisateur du navigateur). La valeur null est renvoyée si cette information est inconnue.
+
NavigatorLanguage.languages {{readonlyInline}} {{experimental_inline}}
+
Renvoie un tableau de chaînes DOMString qui représente les langues connues de l'utilisateur, triées par ordre de préférence.
+
Navigator.locks {{readonlyinline}} {{experimental_inline}}
+
Renvoie un objet LockManager qui fournit des méthodes pour demander un nouvel objet Lock ou s'enquérir d'un objet Lock existant.
+
Navigator.maxTouchPoints {{readonlyInline}}
+
Renvoie le nombre maximum de points de toucher simultanés possible pour l'appareil courant.
+
Navigator.mediaCapabilities {{readonlyinline}} {{experimental_inline}}
+
Renvoie un objet MediaCapabilities qui peut exposer des informations sur le décodage/l'encodage d'un format donné.
+
Navigator.mediaDevices {{readonlyinline}}
+
Renvoie une référence vers un objet MediaDevices permettant d'obtenir des informations à propos des appareils médias disponibles (MediaDevices.enumerateDevices()), de déterminer les propriétés et contraintes prises en charge pour les médias sur cet agent utilisateur et cet ordinateur (MediaDevices.getSupportedConstraints()), de demander l'accès au média via MediaDevices.getUserMedia().
+
Navigator.mediaSession {{readonlyinline}} {{experimental_inline}}
+
Renvoie un objet MediaSession pouvant être utilisé afin de fournir des métadonnées utilisées par le navigateur afin de présenter des informations sur le média en cours de lecture (par exemple pour les interfaces utilisateurs générales de contrôle des médias).
+
NavigatorPlugins.mimeTypes {{readonlyInline}}{{deprecated_inline}}
+
Renvoie une liste MimeTypeArray des types MIME pris en charge par le navigateur.
+
NavigatorOnLine.onLine {{readonlyInline}}
+
Renvoie un booléen indiquant si le navigateur est en ligne.
+
Navigator.permissions {{readonlyinline}} {{experimental_inline}}
+
Renvoie un objet Permissions pouvant être utilisé pour demander ou mettre à jour les informations de permissions pour les API couvertes par l'API Permissions.
+
NavigatorPlugins.plugins {{readonlyInline}}{{deprecated_inline}}
+
Renvoie une liste PluginArray indiquant les plugins installés sur le navigateur.
+
Navigator.presentation {{readonlyInline}} {{experimental_inline}}
+
Renvoie une référence à l'API Presentation .
+
Navigator.serial {{readonlyInline}}
+
Renvoie un objet Serial représentant le point d'entrée vers l'API Web Serial qui permet de contrôler les ports série.
+
Navigator.serviceWorker {{readonlyInline}}
+
Renvoie un objet ServiceWorkerContainer qui permet d'enregistrer, de supprimer, de mettre à jour ou de communiquer avec des objets ServiceWorker pour le document associé.
+
NavigatorStorage.storage {{readonlyinline}}
+
Renvoie le singleton StorageManager utilisé pour la persistence des permissions et la gestion du stockage disponible site par site/application par application.
+
NavigatorID.userAgent {{readonlyInline}}
+
Renvoie la chaîne de caractères de l'agent utilisateur pour le navigateur courant.
+
Navigator.vendor {{readonlyInline}}
+
Renvoie le nom de l'éditeur du navigateur courant (par exemple "Netscape6").
+
Navigator.webdriver {{readonlyInline}} {{experimental_inline}}
+
Indique si l'agent utilisateur est contrôlé par un outil automatisé.
+
Navigator.xr {{readonlyInline}} {{experimental_inline}}
+
Renvoie un objet XRSystem qui représente le point d'entrée sur l'API WebXR.
+
+ +

Propriétés non-standard

+ +
+
Navigator.buildID {{non-standard_inline}}
+
Renvoie l'identifiant de build du navigateur. Les navigateurs renvoient un horodatage fixe pour éviter le pistage (par exemple 20181001000000 à partir de Firefox 64).
+
Navigator.contacts {{readonlyInline}} {{non-standard_inline}}
+
Renvoie une interface ContactsManager qui permet à l'utilisateur de sélectionner certaines entrées dans la liste des contacts afin de partager certains détails limités avec une application web.
+
Navigator.securitypolicy {{non-standard_inline}}
+
Renvoie une chaîne de caractères vide. Netscape 4.7x renvoyait "US & CA domestic policy" ou "Export policy".
+
Navigator.standalone {{non-standard_inline}}
+
Renvoie un booléen indiquant si le navigateur s'exécute en mode standalone. Uniquement disponible sur Safari pour iOS.
+
Navigator.wakeLock {{readonlyInline}} {{non-standard_inline}}
+
Renvoie une interface WakeLock pouvant être utilisée afin de demander un verrou sur l'écran afin de l'empêcher d'entrer en veille, de s'estomper ou de s'éteindre.
+
+ +

Propriétés dépréciées

+ +
+
NavigatorID.appCodeName {{readonlyInline}} {{deprecated_inline}}
+
Renvoie le nom de code interne du navigateur. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.
+
NavigatorID.appName {{readonlyInline}} {{deprecated_inline}}
+
Renvoie une chaîne DOMString contenant le nom officiel du navigateur. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.
+
NavigatorID.appVersion {{readonlyInline}} {{deprecated_inline}}
+
Renvoie la version du navigateur sous la forme d'une chaîne DOMString. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.
+
Navigator.activeVRDisplays {{readonlyInline}} {{deprecated_inline}}
+
Renvoie un tableau contenant chaque objet VRDisplay actuellement utilisé pour afficher (autrement dit, pour chaque objet où VRDisplay.ispresenting vaut true).
+
Navigator.battery {{readonlyInline}} {{deprecated_inline}}
+
Renvoie un objet BatteryManager permettant d'avoir des informations sur le statut de charge de la batterie.
+
Navigator.oscpu {{readonlyInline}} {{deprecated_inline}}
+
Renvoie une chaîne de caractères qui représente le système d'exploitation courant.
+
NavigatorID.platform {{readonlyInline}} {{deprecated_inline}}
+
Renvoie une chaîne de caractères représentant la plateforme du navigateur. N'utilisez pas cette fonction afin d'obtenir une valeur significative.
+
NavigatorID.product {{readonlyInline}} {{deprecated_inline}}
+
Renvoie toujours 'Gecko' quel que soit le navigateur. Cette propriété est uniquement conservée à des fins de compatibilité.
+
Navigator.productSub {{readonlyInline}} {{deprecated_inline}}
+
Renvoie le numéro de build précis du navigateur (par exemple "20060909").
+
Navigator.vendorSub {{readonlyInline}} {{deprecated_inline}}
+
Renvoie le numéro de version de l'éditeur (e.g. "6.1").
+
+ +

Méthodes

+ +

Cette interface n'hérite d'aucune méthode mais implémente celles définies par NavigatorID, NavigatorContentUtils, NavigatorUserMedia, and NavigatorStorageUtils.

+ +
+
Navigator.canShare()
+
Renvoie true si un appel à Navigator.share() réussirait.
+
Navigator.registerProtocolHandler()
+
Permet aux sites web de s'enregistrer afin de gérer un protocole donné.
+
Navigator.requestMediaKeySystemAccess()
+
Renvoie une promesse (Promise) qui se résout en un objet MediaKeySystemAccess.
+
Navigator.sendBeacon()
+
Transfère, de façon asynchrone, une petite quantité de donnée avec HTTP depuis l'agent utilisateur vers un serveur web.
+
Navigator.share()
+
Invoque la fonctionnalité native de partage pour la plateforme courant.
+
Navigator.vibrate()
+
Permet de faire vibrer l'appareil si celui-ci prend en charge cette fonctionnalité. Aucun effet n'est produit s'il n'y a pas de compatibilité.
+
+ +

Méthodes dépréciées

+ +
+
Navigator.getVRDisplays() {{deprecated_inline}}
+
Renvoie une promesse qui se résout en un tableau d'objets VRDisplay représentant chacun un appareil de réalité virtuelle connecté à l'ordinateur.
+
Navigator.getUserMedia() {{deprecated_inline}}
+
Après avoir demandé la permission à l'utilisateur, renvoie le flux audio ou vidéo associé à une caméra ou à un micro sur l'ordinateur local.
+
Navigator.registerContentHandler() {{deprecated_inline}}
+
Permet aux sites web de s'enregistrer pour gérer certains types MIME.
+
NavigatorID.taintEnabled() {{deprecated_inline}}
+
Renvoie false. Les fonctions JavaScript jouant sur cet aspect ont été retirées avec JavaScript 1.2.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', '#the-navigator-object', 'the Navigator object')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Navigator")}}
diff --git a/files/fr/web/api/navigator/mozislocallyavailable/index.html b/files/fr/web/api/navigator/mozislocallyavailable/index.html deleted file mode 100644 index 839ac2aeb0..0000000000 --- a/files/fr/web/api/navigator/mozislocallyavailable/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: window.navigator.isLocallyAvailable -slug: Web/API/Navigator/mozIsLocallyAvailable -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Navigator/mozIsLocallyAvailable ---- -

{{ ApiRef() }}

-

Résumé

-

Permet de déterminer si une ressource donnée est disponible.

-

Syntaxe

-
window.navigator.isLocallyAvailable(uri,ifOffline);
-
-
    -
  • uri est l'URI de la ressource dont la disponibilité doit être vérifiée, sous la forme d'une chaîne.
    • -
  • ifOffline permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez true pour prendre en compte le cache de ressources hors ligne.
    • -
-

Exemple

-
var disponible = navigator.isLocallyAvailable("my-image-file.png", true);
-if (disponible) {
-  /* la ressource hors ligne est présente */
-} else {
-  alert("Certaines ressources nécessaires ne sont pas disponibles tant que vous ne serez pas connecté au réseau.");
-}
-
-

Notes

-

{{ Note("Des exceptions de sécurité peuvent se produire si l\'URI demandée n\'est pas de la même origine.") }}

-

Spécification

-

Aucune ; cependant certaines informations sont disponibles : Marking Resources for Offline Use

diff --git a/files/fr/web/api/navigator/mozislocallyavailable/index.md b/files/fr/web/api/navigator/mozislocallyavailable/index.md new file mode 100644 index 0000000000..839ac2aeb0 --- /dev/null +++ b/files/fr/web/api/navigator/mozislocallyavailable/index.md @@ -0,0 +1,29 @@ +--- +title: window.navigator.isLocallyAvailable +slug: Web/API/Navigator/mozIsLocallyAvailable +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Navigator/mozIsLocallyAvailable +--- +

{{ ApiRef() }}

+

Résumé

+

Permet de déterminer si une ressource donnée est disponible.

+

Syntaxe

+
window.navigator.isLocallyAvailable(uri,ifOffline);
+
+
    +
  • uri est l'URI de la ressource dont la disponibilité doit être vérifiée, sous la forme d'une chaîne.
    • +
  • ifOffline permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez true pour prendre en compte le cache de ressources hors ligne.
    • +
+

Exemple

+
var disponible = navigator.isLocallyAvailable("my-image-file.png", true);
+if (disponible) {
+  /* la ressource hors ligne est présente */
+} else {
+  alert("Certaines ressources nécessaires ne sont pas disponibles tant que vous ne serez pas connecté au réseau.");
+}
+
+

Notes

+

{{ Note("Des exceptions de sécurité peuvent se produire si l\'URI demandée n\'est pas de la même origine.") }}

+

Spécification

+

Aucune ; cependant certaines informations sont disponibles : Marking Resources for Offline Use

diff --git a/files/fr/web/api/navigator/registerprotocolhandler/index.html b/files/fr/web/api/navigator/registerprotocolhandler/index.html deleted file mode 100644 index 25df0e4c12..0000000000 --- a/files/fr/web/api/navigator/registerprotocolhandler/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: window.navigator.registerProtocolHandler -slug: Web/API/Navigator/registerProtocolHandler -tags: - - Firefox 3 -translation_of: Web/API/Navigator/registerProtocolHandler ---- -

{{ ApiRef() }}

- -

Résumé

- -

Permet aux sites web de s'enregistrer en tant que gestionnaires possibles pour des protocoles particuliers.

- -

{{ Note("Un site web ne peut enregistrer de gestionnaires de protocoles que pour lui-même. Pour des raisons de sécurité, il n\'est pas possible pour une extension ou un site d\'enregistrer des gestionnaires de protocoles ciblant d\'autres sites.") }}

- -

Syntaxe

- -
window.navigator.registerProtocolHandler(protocole,uri,titre);
-
- -
    -
  • protocole est le protocole que le site désire gérer, sous la forme d'une chaîne.
    • -
  • uri est l'URI du gestionnaire sous la forme d'une chaîne. Il peut contenir « %s » pour indiquer où insérer l'URI échappée du document à gérer, comme montré dans l'exemple plus bas.
    • -
  • titre est le titre du gestionnaire présenté à l'utilisateur, sous la forme d'une chaîne.
    • -
- -

Exemple

- -

Si votre application web est située à http://www.example.com, vous pouvez enregistrer un gestionnaire de protocole lui permettant de gérer « mailto » comme ceci :

- -
navigator.registerProtocolHandler("mailto",
-                                 "https://www.example.com/?to=%s",
-                                 "Example Mail");
-
- -

Ceci crée un gestionnaire permettant aux liens mailto de diriger l'utilisateur vers l'application web, en insérant l'adresse spécifiée dans le lien dans l'URL.

- -

Spécification

- -

Spécifié dans le brouillon de travail Web Applications 1.0 du WHATWG.

- -

Voir également

- - diff --git a/files/fr/web/api/navigator/registerprotocolhandler/index.md b/files/fr/web/api/navigator/registerprotocolhandler/index.md new file mode 100644 index 0000000000..25df0e4c12 --- /dev/null +++ b/files/fr/web/api/navigator/registerprotocolhandler/index.md @@ -0,0 +1,46 @@ +--- +title: window.navigator.registerProtocolHandler +slug: Web/API/Navigator/registerProtocolHandler +tags: + - Firefox 3 +translation_of: Web/API/Navigator/registerProtocolHandler +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

Permet aux sites web de s'enregistrer en tant que gestionnaires possibles pour des protocoles particuliers.

+ +

{{ Note("Un site web ne peut enregistrer de gestionnaires de protocoles que pour lui-même. Pour des raisons de sécurité, il n\'est pas possible pour une extension ou un site d\'enregistrer des gestionnaires de protocoles ciblant d\'autres sites.") }}

+ +

Syntaxe

+ +
window.navigator.registerProtocolHandler(protocole,uri,titre);
+
+ +
    +
  • protocole est le protocole que le site désire gérer, sous la forme d'une chaîne.
    • +
  • uri est l'URI du gestionnaire sous la forme d'une chaîne. Il peut contenir « %s » pour indiquer où insérer l'URI échappée du document à gérer, comme montré dans l'exemple plus bas.
    • +
  • titre est le titre du gestionnaire présenté à l'utilisateur, sous la forme d'une chaîne.
    • +
+ +

Exemple

+ +

Si votre application web est située à http://www.example.com, vous pouvez enregistrer un gestionnaire de protocole lui permettant de gérer « mailto » comme ceci :

+ +
navigator.registerProtocolHandler("mailto",
+                                 "https://www.example.com/?to=%s",
+                                 "Example Mail");
+
+ +

Ceci crée un gestionnaire permettant aux liens mailto de diriger l'utilisateur vers l'application web, en insérant l'adresse spécifiée dans le lien dans l'URL.

+ +

Spécification

+ +

Spécifié dans le brouillon de travail Web Applications 1.0 du WHATWG.

+ +

Voir également

+ + diff --git a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html deleted file mode 100644 index 3ab6522963..0000000000 --- a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Gestionnaires de protocoles web -slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers -translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers ---- - - -

Introduction

- -

Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-http. Prenons par exemple le protocole mailto: :

- -
<a href="mailto:webmaster@example.com">Webmestre</a>
-
- -

Les auteurs web peuvent utiliser un lien mailto: lorsqu'ils veulent fournir aux utilisateurs une manière pratique d'envoyer un courrier électronique, directement depuis la page web. Lorsque le lien est activé, le navigateur est supposé lancer l'application par défaut du bureau pour le courrier électronique. On pourrait appeler cela un gestionnaire de protocoledu bureau.

- -

Les gestionnaires de protocoles web permettent à des applications web de participer également à ce processus. Leur importance va grandissant au fur et à mesure que différents types d'applications migrent vers le web. De fait, un grand nombre d'applications de courrier déjà basées sur le web pourraient traiter un lien mailto.

- -

Enregistrement

- -

La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise registerProtocolHandler() pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple :

- -
navigator.registerProtocolHandler("mailto",
-                                  "https://www.example.com/?uri=%s",
-                                  "Example Mail");
-
- -

Où les paramètres sont :

- -
    -
  • Le protocole.
    • -
  • Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le href du lien et une requête GET sera exécutée sur l'URL résultante.
    • -
  • Le nom du gestionnaire de protocole tel que présenté à l'utilisateur.
    • -
- -

Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification :

- -

- -

{{ Note() }}

- -

Exemple

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<html lang="fr">
-<head>
-  <title>Web Protocol Handler Sample - Register</title>
-  <script type="text/javascript">
-    navigator.registerProtocolHandler("fake", "http://starkravingfinkle.org/projects/wph/handler.php?value=%s", "Protocole fake");
-  </script>
-</head>
-<body>
-  <h1>Exemple de gestionnaire de protocole web</h1>
-  <p>Cette page va installer un gestionnaire de protocole web pour le protocole <code>fake:</code>.</p>
-</body>
-</html>
-
- -

Activation

- -

À présent, chaque fois que l'utilisateur activera un lien utilisant le protocole enregistré, le navigateur dirigera l'action vers l'URL spécifiée lors de l'enregistrement de l'application web. Firefox, par défaut, demandera à l'utilisateur avant d'effectuer cette action.

- -

Exemple

- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<html lang="fr">
-<head>
-  <title>Exemple de gestionnaire de protocole web — test</title>
-</head>
-<body>
-  <p>Hola, avez-vous déjà vu <a href="fake:ceci%20est%20un%20faux%20protocole">ceci</a> auparavant ?</p>
-</body>
-</html>
-
- -

Traitement

- -

La phase suivante est le traitement de l'action. Le navigateur extrait le href du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL :

- -
http://starkravingfinkle.org/projects/wph/handler.php?value=fake:ceci%20est%20un%20faux%20protocole
-
- -

Un code côté serveur peut extraire les paramètres de la chaîne de requête et effectuer l'action désirée.

- -

{{ Note("Le code côté serveur reçoit le contenu entier de l\'attribut href. Cela signifie qu\'il devra traiter la chaîne pour retirer l\'indication de protocole des données.") }}

- -

Exemple

- -
<?php
-$value = "";
-if ( isset ( $_GET["value"] ) ) {
-  $value = $_GET["value"];
-}
-?>
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
-<html lang="fr">
-<head>
-    <title>Exemple de gestionnaire de protocole web</title>
-</head>
-<body>
-  <h1>Exemple de gestionnaire de protocole web — Gestionnaire</h1>
-  <p>Cette page est appelée lors de la gestion d'une action utilisant le protocole <code>fake:</code>. Voici les données reçues :</p>
-  <textarea>
-<?php echo(urldecode($value)) ?>
-  </textarea>
-</body>
-</html>
-
- -

 

diff --git a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md new file mode 100644 index 0000000000..3ab6522963 --- /dev/null +++ b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md @@ -0,0 +1,111 @@ +--- +title: Gestionnaires de protocoles web +slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- + + +

Introduction

+ +

Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-http. Prenons par exemple le protocole mailto: :

+ +
<a href="mailto:webmaster@example.com">Webmestre</a>
+
+ +

Les auteurs web peuvent utiliser un lien mailto: lorsqu'ils veulent fournir aux utilisateurs une manière pratique d'envoyer un courrier électronique, directement depuis la page web. Lorsque le lien est activé, le navigateur est supposé lancer l'application par défaut du bureau pour le courrier électronique. On pourrait appeler cela un gestionnaire de protocoledu bureau.

+ +

Les gestionnaires de protocoles web permettent à des applications web de participer également à ce processus. Leur importance va grandissant au fur et à mesure que différents types d'applications migrent vers le web. De fait, un grand nombre d'applications de courrier déjà basées sur le web pourraient traiter un lien mailto.

+ +

Enregistrement

+ +

La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise registerProtocolHandler() pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple :

+ +
navigator.registerProtocolHandler("mailto",
+                                  "https://www.example.com/?uri=%s",
+                                  "Example Mail");
+
+ +

Où les paramètres sont :

+ +
    +
  • Le protocole.
    • +
  • Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le href du lien et une requête GET sera exécutée sur l'URL résultante.
    • +
  • Le nom du gestionnaire de protocole tel que présenté à l'utilisateur.
    • +
+ +

Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification :

+ +

+ +

{{ Note() }}

+ +

Exemple

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="fr">
+<head>
+  <title>Web Protocol Handler Sample - Register</title>
+  <script type="text/javascript">
+    navigator.registerProtocolHandler("fake", "http://starkravingfinkle.org/projects/wph/handler.php?value=%s", "Protocole fake");
+  </script>
+</head>
+<body>
+  <h1>Exemple de gestionnaire de protocole web</h1>
+  <p>Cette page va installer un gestionnaire de protocole web pour le protocole <code>fake:</code>.</p>
+</body>
+</html>
+
+ +

Activation

+ +

À présent, chaque fois que l'utilisateur activera un lien utilisant le protocole enregistré, le navigateur dirigera l'action vers l'URL spécifiée lors de l'enregistrement de l'application web. Firefox, par défaut, demandera à l'utilisateur avant d'effectuer cette action.

+ +

Exemple

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="fr">
+<head>
+  <title>Exemple de gestionnaire de protocole web — test</title>
+</head>
+<body>
+  <p>Hola, avez-vous déjà vu <a href="fake:ceci%20est%20un%20faux%20protocole">ceci</a> auparavant ?</p>
+</body>
+</html>
+
+ +

Traitement

+ +

La phase suivante est le traitement de l'action. Le navigateur extrait le href du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL :

+ +
http://starkravingfinkle.org/projects/wph/handler.php?value=fake:ceci%20est%20un%20faux%20protocole
+
+ +

Un code côté serveur peut extraire les paramètres de la chaîne de requête et effectuer l'action désirée.

+ +

{{ Note("Le code côté serveur reçoit le contenu entier de l\'attribut href. Cela signifie qu\'il devra traiter la chaîne pour retirer l\'indication de protocole des données.") }}

+ +

Exemple

+ +
<?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?>
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="fr">
+<head>
+    <title>Exemple de gestionnaire de protocole web</title>
+</head>
+<body>
+  <h1>Exemple de gestionnaire de protocole web — Gestionnaire</h1>
+  <p>Cette page est appelée lors de la gestion d'une action utilisant le protocole <code>fake:</code>. Voici les données reçues :</p>
+  <textarea>
+<?php echo(urldecode($value)) ?>
+  </textarea>
+</body>
+</html>
+
+ +

 

diff --git a/files/fr/web/api/navigator/sendbeacon/index.html b/files/fr/web/api/navigator/sendbeacon/index.html deleted file mode 100644 index ca4928b18b..0000000000 --- a/files/fr/web/api/navigator/sendbeacon/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Navigator.sendBeacon() -slug: Web/API/Navigator/sendBeacon -tags: - - API - - Beacon - - Méthode - - Navigateur - - Performance Web - - Reference - - Réseau - - sendBeacon -translation_of: Web/API/Navigator/sendBeacon ---- -
{{APIRef("HTML DOM")}}
- -

La méthode  navigator.sendBeacon() peut être utilisée pour transférer une petite quantité de données de façon asynchrone via  {{Glossary("HTTP")}} vers un serveur web.

- -

Syntaxe

- -
navigator.sendBeacon(url, donnees);
-
- -

Paramètres

- -
-
url
-
Le paramètre url indique l'URL résolue à laquelle les donnees seront transmises.
-
- -
-
donnees
-
Le paramètre donnees est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre.
-
- -

Valeurs de retour

- -

La méthode sendBeacon() retourne true (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne false (faux).

- -

Description

- -

Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (unloading) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}.

- -

Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête XMLHttpRequest synchrone dans un gestionnaire d'événements unload ou {{event("beforeunload")}} pour soumettre les données. La requête XMLHttpRequest synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente.

- -

Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre  les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut src dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur.

- -

Non seulement ces techniques représentent-elles de mauvais patrons de programmation, certaines d'entre elles sont peu fiables, et elles résultent toutes en une perception d'une mauvaise performance de chargement de page pour la prochaine navigation.

- -

L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête XMLHttpRequest synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page.

- -
window.addEventListener('unload', enregistrerDonnees, false);
-
-function enregistrerDonnees() {
-  var client = new XMLHttpRequest();
-  client.open("POST", "/log", false); // Le troisième paramètre indique une synchronisation xhr
-  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
-  client.send(donneesAnalytiques);
-}
-
- -

C'est là qu'entre en jeu sendBeacon(). En utilisant la méthode sendBeacon(), les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques!

- -

L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode sendBeacon().

- -
window.addEventListener('unload', enregistrerDonnees, false);
-
-function enregistrerDonnees() {
-  navigator.sendBeacon("/log", donneesAnalytiques);
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}{{Spec2('Beacon')}}Définition initiale
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.Navigator.sendBeacon")}}

- -

Voir aussi

- -
    -
  • {{domxref("navigator", "navigator")}}
    • -
  • {{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de sendBeacon() dans des workers)
    • -
diff --git a/files/fr/web/api/navigator/sendbeacon/index.md b/files/fr/web/api/navigator/sendbeacon/index.md new file mode 100644 index 0000000000..ca4928b18b --- /dev/null +++ b/files/fr/web/api/navigator/sendbeacon/index.md @@ -0,0 +1,99 @@ +--- +title: Navigator.sendBeacon() +slug: Web/API/Navigator/sendBeacon +tags: + - API + - Beacon + - Méthode + - Navigateur + - Performance Web + - Reference + - Réseau + - sendBeacon +translation_of: Web/API/Navigator/sendBeacon +--- +
{{APIRef("HTML DOM")}}
+ +

La méthode  navigator.sendBeacon() peut être utilisée pour transférer une petite quantité de données de façon asynchrone via  {{Glossary("HTTP")}} vers un serveur web.

+ +

Syntaxe

+ +
navigator.sendBeacon(url, donnees);
+
+ +

Paramètres

+ +
+
url
+
Le paramètre url indique l'URL résolue à laquelle les donnees seront transmises.
+
+ +
+
donnees
+
Le paramètre donnees est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre.
+
+ +

Valeurs de retour

+ +

La méthode sendBeacon() retourne true (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne false (faux).

+ +

Description

+ +

Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (unloading) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}.

+ +

Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête XMLHttpRequest synchrone dans un gestionnaire d'événements unload ou {{event("beforeunload")}} pour soumettre les données. La requête XMLHttpRequest synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente.

+ +

Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre  les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut src dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur.

+ +

Non seulement ces techniques représentent-elles de mauvais patrons de programmation, certaines d'entre elles sont peu fiables, et elles résultent toutes en une perception d'une mauvaise performance de chargement de page pour la prochaine navigation.

+ +

L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête XMLHttpRequest synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page.

+ +
window.addEventListener('unload', enregistrerDonnees, false);
+
+function enregistrerDonnees() {
+  var client = new XMLHttpRequest();
+  client.open("POST", "/log", false); // Le troisième paramètre indique une synchronisation xhr
+  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+  client.send(donneesAnalytiques);
+}
+
+ +

C'est là qu'entre en jeu sendBeacon(). En utilisant la méthode sendBeacon(), les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques!

+ +

L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode sendBeacon().

+ +
window.addEventListener('unload', enregistrerDonnees, false);
+
+function enregistrerDonnees() {
+  navigator.sendBeacon("/log", donneesAnalytiques);
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}{{Spec2('Beacon')}}Définition initiale
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.Navigator.sendBeacon")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("navigator", "navigator")}}
    • +
  • {{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de sendBeacon() dans des workers)
    • +
diff --git a/files/fr/web/api/navigator/serviceworker/index.html b/files/fr/web/api/navigator/serviceworker/index.html deleted file mode 100644 index b00e6886fc..0000000000 --- a/files/fr/web/api/navigator/serviceworker/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Navigator.serviceWorker -slug: Web/API/Navigator/serviceWorker -tags: - - API - - Navigateur - - Propriété - - Reference - - Service Workers - - Service worker API - - ServiceWorker -translation_of: Web/API/Navigator/serviceWorker ---- -

{{APIRef("Service Workers API")}}

- -

Le Navigator.serviceWorker est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le document  associé.

- -

syntaxe

- -
var workerContainerInstance = navigator.serviceWorker;
-
- -

Valeur

- -

L'objet {{domxref("ServiceWorkerContainer")}}.

- -

 

- -

Exemples

- -

Le code ci-dessous vérifie si le navigateur supporte les service workers.

- -
if ('serviceWorker' in navigator) {
-  // Supported!
-}
- -

 

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité du navigateur

- -

{{Compat("api.Navigator.serviceWorker")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/navigator/serviceworker/index.md b/files/fr/web/api/navigator/serviceworker/index.md new file mode 100644 index 0000000000..b00e6886fc --- /dev/null +++ b/files/fr/web/api/navigator/serviceworker/index.md @@ -0,0 +1,65 @@ +--- +title: Navigator.serviceWorker +slug: Web/API/Navigator/serviceWorker +tags: + - API + - Navigateur + - Propriété + - Reference + - Service Workers + - Service worker API + - ServiceWorker +translation_of: Web/API/Navigator/serviceWorker +--- +

{{APIRef("Service Workers API")}}

+ +

Le Navigator.serviceWorker est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le document  associé.

+ +

syntaxe

+ +
var workerContainerInstance = navigator.serviceWorker;
+
+ +

Valeur

+ +

L'objet {{domxref("ServiceWorkerContainer")}}.

+ +

 

+ +

Exemples

+ +

Le code ci-dessous vérifie si le navigateur supporte les service workers.

+ +
if ('serviceWorker' in navigator) {
+  // Supported!
+}
+ +

 

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité du navigateur

+ +

{{Compat("api.Navigator.serviceWorker")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/navigator/share/index.html b/files/fr/web/api/navigator/share/index.html deleted file mode 100644 index 041163cac3..0000000000 --- a/files/fr/web/api/navigator/share/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Navigator.share -slug: Web/API/Navigator/share -translation_of: Web/API/Navigator/share ---- -
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
- -

La méthode Navigator.share() invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera undefined.

- -

Syntax

- -
var sharePromise = window.navigator.share(data);
-
- -

Paramètres

- -
-
data
-
Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : 
-
- -
    -
  • url: Un {{domxref("USVString")}} représentant l'URL à partager.
    • -
  • text: Un {{domxref("USVString")}} représentant le texte à partager.
    • -
  • title: Un {{domxref("USVString")}} représentant le titre à partager.
    • -
- -
-
- -

Valeur retournée

- -

Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre data n'est pas correctement spécifié.

- -

Par exemple, sur Chrome pour Android, la Promise retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données.

- -

Examples

- -
navigator.share({
-  title: document.title,
-  text: 'Hello World',
-  url: 'https://developer.mozilla.org',
-}); // partage l'URL de MDN
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Share API','#share-method','share()')}}{{Spec2('Web Share API')}}
- -

Browser compatibility

- - - -

{{Compat("api.Navigator.share")}}

diff --git a/files/fr/web/api/navigator/share/index.md b/files/fr/web/api/navigator/share/index.md new file mode 100644 index 0000000000..041163cac3 --- /dev/null +++ b/files/fr/web/api/navigator/share/index.md @@ -0,0 +1,68 @@ +--- +title: Navigator.share +slug: Web/API/Navigator/share +translation_of: Web/API/Navigator/share +--- +
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+ +

La méthode Navigator.share() invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera undefined.

+ +

Syntax

+ +
var sharePromise = window.navigator.share(data);
+
+ +

Paramètres

+ +
+
data
+
Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : 
+
+ +
    +
  • url: Un {{domxref("USVString")}} représentant l'URL à partager.
    • +
  • text: Un {{domxref("USVString")}} représentant le texte à partager.
    • +
  • title: Un {{domxref("USVString")}} représentant le titre à partager.
    • +
+ +
+
+ +

Valeur retournée

+ +

Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre data n'est pas correctement spécifié.

+ +

Par exemple, sur Chrome pour Android, la Promise retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données.

+ +

Examples

+ +
navigator.share({
+  title: document.title,
+  text: 'Hello World',
+  url: 'https://developer.mozilla.org',
+}); // partage l'URL de MDN
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Share API','#share-method','share()')}}{{Spec2('Web Share API')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Navigator.share")}}

diff --git a/files/fr/web/api/navigator/vibrate/index.html b/files/fr/web/api/navigator/vibrate/index.html deleted file mode 100644 index 335b8adcf9..0000000000 --- a/files/fr/web/api/navigator/vibrate/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Navigator.vibrate() -slug: Web/API/Navigator/vibrate -translation_of: Web/API/Navigator/vibrate ---- -

{{APIRef("Vibration API")}}

- -

La méthode Navigator.vibrate() active le module matériel de vibration de l'appareil, si ce dernier est présent. Si l'appareil ne supporte pas les vibrations, cette méthode n'a aucun effet. Si une série de vibration est déjà en cours, la précédente série est stopée et la nouvelle série est lancée.

- -

Si la méthode ne peut pas vibrer en raison d'arguments invalides, elle retournera false, sinon elle retournera true. Si la série contient de trop longue vibration, elle sera tronqué; la longueur maximale dépend de l'implémentation.

- -

Syntaxe

- -
var successBool = window.navigator.vibrate(motif);
-
- -
-
motif
-
Fournit un motif de vibration et d'intervalle de pause. Chaque valeur indique un nombre de milisecondes de vibration ou de pause, en alternance. Vous pouvez fournir une valeur (pour vibrer une fois) ou un tableau de valeur (vibration, pause, vibration ...). Voir l'API Vibration pour plus de détails.
-
- -

Passer la valeur 0, un tableau vide, ou un tableau de zéro arrêtera toutes les vibrations.

- -

Exemple

- -
window.navigator.vibrate(200); // vibre pendant 200ms
-window.navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); // Vibre 'SOS' en Morse.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}} -

Linked to spec is the latest editor's draft; W3C version is a REC.

-
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Navigator.vibrate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/navigator/vibrate/index.md b/files/fr/web/api/navigator/vibrate/index.md new file mode 100644 index 0000000000..335b8adcf9 --- /dev/null +++ b/files/fr/web/api/navigator/vibrate/index.md @@ -0,0 +1,61 @@ +--- +title: Navigator.vibrate() +slug: Web/API/Navigator/vibrate +translation_of: Web/API/Navigator/vibrate +--- +

{{APIRef("Vibration API")}}

+ +

La méthode Navigator.vibrate() active le module matériel de vibration de l'appareil, si ce dernier est présent. Si l'appareil ne supporte pas les vibrations, cette méthode n'a aucun effet. Si une série de vibration est déjà en cours, la précédente série est stopée et la nouvelle série est lancée.

+ +

Si la méthode ne peut pas vibrer en raison d'arguments invalides, elle retournera false, sinon elle retournera true. Si la série contient de trop longue vibration, elle sera tronqué; la longueur maximale dépend de l'implémentation.

+ +

Syntaxe

+ +
var successBool = window.navigator.vibrate(motif);
+
+ +
+
motif
+
Fournit un motif de vibration et d'intervalle de pause. Chaque valeur indique un nombre de milisecondes de vibration ou de pause, en alternance. Vous pouvez fournir une valeur (pour vibrer une fois) ou un tableau de valeur (vibration, pause, vibration ...). Voir l'API Vibration pour plus de détails.
+
+ +

Passer la valeur 0, un tableau vide, ou un tableau de zéro arrêtera toutes les vibrations.

+ +

Exemple

+ +
window.navigator.vibrate(200); // vibre pendant 200ms
+window.navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); // Vibre 'SOS' en Morse.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}} +

Linked to spec is the latest editor's draft; W3C version is a REC.

+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Navigator.vibrate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/network_information_api/index.html b/files/fr/web/api/network_information_api/index.html deleted file mode 100644 index f051a4c9cc..0000000000 --- a/files/fr/web/api/network_information_api/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Network Information API -slug: Web/API/Network_Information_API -tags: - - WebAPI -translation_of: Web/API/Network_Information_API -original_slug: WebAPI/Network_Information ---- -

{{ 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/network_information_api/index.md b/files/fr/web/api/network_information_api/index.md new file mode 100644 index 0000000000..f051a4c9cc --- /dev/null +++ b/files/fr/web/api/network_information_api/index.md @@ -0,0 +1,86 @@ +--- +title: Network Information API +slug: Web/API/Network_Information_API +tags: + - WebAPI +translation_of: Web/API/Network_Information_API +original_slug: WebAPI/Network_Information +--- +

{{ 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/appendchild/index.html b/files/fr/web/api/node/appendchild/index.html deleted file mode 100644 index 800be4c3bb..0000000000 --- a/files/fr/web/api/node/appendchild/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: element.appendChild -slug: Web/API/Node/appendChild -tags: - - API - - Ajout - - DOM - - Enfant - - Méthodes - - Noeuds -translation_of: Web/API/Node/appendChild ---- -

{{APIRef("DOM")}}

- -

La méthode Node.appendChild() ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, appendChild() le déplace  de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre).

- -

Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le {{domxref("Node.cloneNode()")}} peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec cloneNode ne seront pas automatiquement synchronisées.

- -

Si l'enfant donné est un {{domxref("DocumentFragment")}} , le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste d'enfants du noeud parent spécifié.

- -

Syntaxe

- -
var elementAjoute = element.appendChild(enfant);
-
- -

Paramètres

- -
-
enfant
-
Le noeud à ajouter au noeud parent donné (généralement un élément).
-
- -

Valeur renvoyée

- -

La valeur renvoyée est l'enfant ajouté sauf si l'enfant donné est un {{domxref ("DocumentFragment")}}, auquel cas le {{domxref ("DocumentFragment")}} vide est renvoyé.

- -

Notes

- -

Le chaînage peut ne pas fonctionner comme prévu en raison de appendChild() renvoyant l'élément enfant :

- -
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
- -

Définit aBlock pour <b></b> uniquement, ce que vous ne voulez probablement pas.

- -

Exemple

- -
// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document
-var p = document.createElement("p");
-document.body.appendChild(p);
- -

Spécification

- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName("DOM3 Core")}}.
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}Pas de changement de {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}Pas de changement de {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.appendChild")}}

- -

Voir aussi

- -
    -
  • {{domxref("Node.removeChild")}}
    • -
  • {{domxref("Node.replaceChild")}}
    • -
  • {{domxref("Node.insertBefore")}}
    • -
  • {{domxref("Node.hasChildNodes")}}
    • -
  • {{domxref("ParentNode.append()")}}
    • -
diff --git a/files/fr/web/api/node/appendchild/index.md b/files/fr/web/api/node/appendchild/index.md new file mode 100644 index 0000000000..800be4c3bb --- /dev/null +++ b/files/fr/web/api/node/appendchild/index.md @@ -0,0 +1,99 @@ +--- +title: element.appendChild +slug: Web/API/Node/appendChild +tags: + - API + - Ajout + - DOM + - Enfant + - Méthodes + - Noeuds +translation_of: Web/API/Node/appendChild +--- +

{{APIRef("DOM")}}

+ +

La méthode Node.appendChild() ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, appendChild() le déplace  de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre).

+ +

Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le {{domxref("Node.cloneNode()")}} peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec cloneNode ne seront pas automatiquement synchronisées.

+ +

Si l'enfant donné est un {{domxref("DocumentFragment")}} , le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste d'enfants du noeud parent spécifié.

+ +

Syntaxe

+ +
var elementAjoute = element.appendChild(enfant);
+
+ +

Paramètres

+ +
+
enfant
+
Le noeud à ajouter au noeud parent donné (généralement un élément).
+
+ +

Valeur renvoyée

+ +

La valeur renvoyée est l'enfant ajouté sauf si l'enfant donné est un {{domxref ("DocumentFragment")}}, auquel cas le {{domxref ("DocumentFragment")}} vide est renvoyé.

+ +

Notes

+ +

Le chaînage peut ne pas fonctionner comme prévu en raison de appendChild() renvoyant l'élément enfant :

+ +
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+ +

Définit aBlock pour <b></b> uniquement, ce que vous ne voulez probablement pas.

+ +

Exemple

+ +
// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Spécification

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName("DOM3 Core")}}.
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}Pas de changement de {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}Pas de changement de {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.appendChild")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("Node.removeChild")}}
    • +
  • {{domxref("Node.replaceChild")}}
    • +
  • {{domxref("Node.insertBefore")}}
    • +
  • {{domxref("Node.hasChildNodes")}}
    • +
  • {{domxref("ParentNode.append()")}}
    • +
diff --git a/files/fr/web/api/node/baseuri/index.html b/files/fr/web/api/node/baseuri/index.html deleted file mode 100644 index 68cf5be1bc..0000000000 --- a/files/fr/web/api/node/baseuri/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Node.baseURI -slug: Web/API/Node/baseURI -tags: - - API - - DOM - - HTML - - Propriétés - - URI - - URL - - URL absolue - - XML -translation_of: Web/API/Node/baseURI ---- -
-
{{APIRef("DOM")}}
-
- -

La propriété en lecture seule Node.baseURI renvoie l'URL de base absolue d'un noeud.

- -

L'URL de base est utilisée pour résoudre les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut src  en HTML ou XML xlink:href d'un élément {{HTMLElement("img")}} HTML.

- -

En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut  xml:base en XML.

- -

Syntaxe

- -
var baseURI = node.baseURI;
-
- -
    -
  • baseURI est une {{ domxref("DOMString") }} (chaîne de caractères) représentant l'URL de base du {{domxref("Node")}} spécifié. Elle peut être null s'il est impossible d'obtenir une URI absolue.
    • -
  • node.baseURI est en lecture seule.
    • -
  • node.baseURI peut changer avec le temps (voir ci-dessous).
    • -
- -

Détails

- -

L'URL de base d'un document

- -

L'URL de base d'un document est par défaut l'adresse du document (telle qu'affichée par le navigateur et disponible dans {{domxref("window.location")}}), mais peut changer par défaut :

- -
    -
  • Si une balise HTML {{HTMLElement("base")}} est trouvée dans le document ;
    • -
  • Lorsque celui-ci est un nouveau document créé dynamiquement.
    • -
- -

Voir la page Base URLs section of the HTML Living standard (en) pour plus de détails.

- -

Vous pouvez utiliser {{domxref("document")}}.baseURI pour obtenir l'URL de base d'un document. Notez que l'obtention de l'URL de base d'un document peut renvoyer des URL différentes au fil du temps si la balise {{HTMLElement("base")}} ou l'emplacement du document change.

- -

L'URL de base d'un élément

- -

L'URL de base d'un element en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud.

- -

Si le document contient des attributs xml:base (ce que vous ne devriez pas faire dans les documents HTML), l'element.baseURI prend en compte l'attribut xml:base des parents de l'élément  lors du calcul de l'URL de base. Voir xml:base pour plus de détails.

- -

Vous pouvez utiliser {{domxref("element")}}.baseURI pour obtenir l'URL de base d'un élément.

- -

Spécification

- -
    -
  • {{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}
    • -
- -

Voir aussi

- -
    -
  • l'élément {{HTMLElement("base")}} (HTML)
    • -
  • l'attribut xml:base (documents XML).
    • -
  • {{domxref("Node.baseURIObject")}} - une variante de cette API pour les add-ons Mozilla et le code interne. Renvoie l'URL de base en tant que {{interface("nsIURI")}}.
    • -
diff --git a/files/fr/web/api/node/baseuri/index.md b/files/fr/web/api/node/baseuri/index.md new file mode 100644 index 0000000000..68cf5be1bc --- /dev/null +++ b/files/fr/web/api/node/baseuri/index.md @@ -0,0 +1,71 @@ +--- +title: Node.baseURI +slug: Web/API/Node/baseURI +tags: + - API + - DOM + - HTML + - Propriétés + - URI + - URL + - URL absolue + - XML +translation_of: Web/API/Node/baseURI +--- +
+
{{APIRef("DOM")}}
+
+ +

La propriété en lecture seule Node.baseURI renvoie l'URL de base absolue d'un noeud.

+ +

L'URL de base est utilisée pour résoudre les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut src  en HTML ou XML xlink:href d'un élément {{HTMLElement("img")}} HTML.

+ +

En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut  xml:base en XML.

+ +

Syntaxe

+ +
var baseURI = node.baseURI;
+
+ +
    +
  • baseURI est une {{ domxref("DOMString") }} (chaîne de caractères) représentant l'URL de base du {{domxref("Node")}} spécifié. Elle peut être null s'il est impossible d'obtenir une URI absolue.
    • +
  • node.baseURI est en lecture seule.
    • +
  • node.baseURI peut changer avec le temps (voir ci-dessous).
    • +
+ +

Détails

+ +

L'URL de base d'un document

+ +

L'URL de base d'un document est par défaut l'adresse du document (telle qu'affichée par le navigateur et disponible dans {{domxref("window.location")}}), mais peut changer par défaut :

+ +
    +
  • Si une balise HTML {{HTMLElement("base")}} est trouvée dans le document ;
    • +
  • Lorsque celui-ci est un nouveau document créé dynamiquement.
    • +
+ +

Voir la page Base URLs section of the HTML Living standard (en) pour plus de détails.

+ +

Vous pouvez utiliser {{domxref("document")}}.baseURI pour obtenir l'URL de base d'un document. Notez que l'obtention de l'URL de base d'un document peut renvoyer des URL différentes au fil du temps si la balise {{HTMLElement("base")}} ou l'emplacement du document change.

+ +

L'URL de base d'un élément

+ +

L'URL de base d'un element en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud.

+ +

Si le document contient des attributs xml:base (ce que vous ne devriez pas faire dans les documents HTML), l'element.baseURI prend en compte l'attribut xml:base des parents de l'élément  lors du calcul de l'URL de base. Voir xml:base pour plus de détails.

+ +

Vous pouvez utiliser {{domxref("element")}}.baseURI pour obtenir l'URL de base d'un élément.

+ +

Spécification

+ +
    +
  • {{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}
    • +
+ +

Voir aussi

+ +
    +
  • l'élément {{HTMLElement("base")}} (HTML)
    • +
  • l'attribut xml:base (documents XML).
    • +
  • {{domxref("Node.baseURIObject")}} - une variante de cette API pour les add-ons Mozilla et le code interne. Renvoie l'URL de base en tant que {{interface("nsIURI")}}.
    • +
diff --git a/files/fr/web/api/node/childnodes/index.html b/files/fr/web/api/node/childnodes/index.html deleted file mode 100644 index b9f4630ffc..0000000000 --- a/files/fr/web/api/node/childnodes/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: element.childNodes -slug: Web/API/Node/childNodes -tags: - - API - - DOM - - Enfants - - Noeuds - - Propriétés -translation_of: Web/API/Node/childNodes ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule  Node.childNodes renvoie une {{domxref("NodeList")}} (liste de noeuds) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0.

- -

Syntaxe

- -
var collNoeuds = elementDeReference.childNodes;
-
- -

Exemples

- -

Utilisation simple

- -
// parg est une référence d'objet pour un élément <p>
-
-// D'abord vérifier que l'élément a des noeuds enfants 
-if (parg.hasChildNodes()) {
-  var children = parg.childNodes;
-
-  for (var i = 0; i < children.length; i++) {
-    // faire quelque chose avec chaque enfant[i]
-    // NOTE: La liste est en ligne, l'ajout ou la suppression des enfants changera la liste
-  }
-}
- -

Supprimer tous les enfants d'un nom

- -
// Voici une manière de supprimer tous les enfants d'un nœud
-// (boite est une référence à un élément ayant des enfants)
-while( boite.firstChild) {
-    // La liste n'est pas une copie, elle sera donc réindexée à chaque appel
-    boite.removeChild( boite.firstChild);
-}
-
- -

Notes

- -

Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple elementNodeReference.childNodes[1].nodeName pour obtenir son nom, etc.)

- -

L'objet document lui-même a deux enfants : la déclaration Doctype et l'élément racine, généralement appelés  documentElement . (Dans les documents (X)HTML il s'agit d'éléments  HTML).

- -

childNodes  inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place.

- -

 

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}{{Spec2('DOM WHATWG')}}Pas de changement
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM3 Core')}}Pas de changement
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM2 Core')}}Pas de changement
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.childNodes")}}

- -

Voir aussi

- -
    -
  • {{domxref("Node.firstChild")}}
    • -
  • {{domxref("Node.lastChild")}}
    • -
  • {{domxref("Node.nextSibling")}}
    • -
  • {{domxref("Node.previousSibling")}}
    • -
  • {{domxref("ParentNode.children")}}
    • -
diff --git a/files/fr/web/api/node/childnodes/index.md b/files/fr/web/api/node/childnodes/index.md new file mode 100644 index 0000000000..b9f4630ffc --- /dev/null +++ b/files/fr/web/api/node/childnodes/index.md @@ -0,0 +1,103 @@ +--- +title: element.childNodes +slug: Web/API/Node/childNodes +tags: + - API + - DOM + - Enfants + - Noeuds + - Propriétés +translation_of: Web/API/Node/childNodes +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule  Node.childNodes renvoie une {{domxref("NodeList")}} (liste de noeuds) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0.

+ +

Syntaxe

+ +
var collNoeuds = elementDeReference.childNodes;
+
+ +

Exemples

+ +

Utilisation simple

+ +
// parg est une référence d'objet pour un élément <p>
+
+// D'abord vérifier que l'élément a des noeuds enfants 
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i < children.length; i++) {
+    // faire quelque chose avec chaque enfant[i]
+    // NOTE: La liste est en ligne, l'ajout ou la suppression des enfants changera la liste
+  }
+}
+ +

Supprimer tous les enfants d'un nom

+ +
// Voici une manière de supprimer tous les enfants d'un nœud
+// (boite est une référence à un élément ayant des enfants)
+while( boite.firstChild) {
+    // La liste n'est pas une copie, elle sera donc réindexée à chaque appel
+    boite.removeChild( boite.firstChild);
+}
+
+ +

Notes

+ +

Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple elementNodeReference.childNodes[1].nodeName pour obtenir son nom, etc.)

+ +

L'objet document lui-même a deux enfants : la déclaration Doctype et l'élément racine, généralement appelés  documentElement . (Dans les documents (X)HTML il s'agit d'éléments  HTML).

+ +

childNodes  inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place.

+ +

 

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}{{Spec2('DOM WHATWG')}}Pas de changement
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM3 Core')}}Pas de changement
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM2 Core')}}Pas de changement
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.childNodes")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("Node.firstChild")}}
    • +
  • {{domxref("Node.lastChild")}}
    • +
  • {{domxref("Node.nextSibling")}}
    • +
  • {{domxref("Node.previousSibling")}}
    • +
  • {{domxref("ParentNode.children")}}
    • +
diff --git a/files/fr/web/api/node/clonenode/index.html b/files/fr/web/api/node/clonenode/index.html deleted file mode 100644 index fef79935dc..0000000000 --- a/files/fr/web/api/node/clonenode/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: element.cloneNode -slug: Web/API/Node/cloneNode -tags: - - API - - DOM - - Duplication - - Méthodes - - Noeuds -translation_of: Web/API/Node/cloneNode ---- -

{{APIRef("DOM")}}

- -

La méthode Node.cloneNode() renvoie une copie du nœud sur lequel elle a été appelée.

- -

Syntaxe

- -
var dupNode = node.cloneNode([deep]);
-
- -
-
node
-
Le noeud à dupliquer.
-
dupNode
-
Le nouveau noeud qui sera un clone du node.
-
deep {{optional_inline}} (profondeur)
-
true (vrai) si les enfants du noeud doivent aussi être clonés ou false (faux) si seul le noeud spécifié doit l'être.
-
- -
-

Note : Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), deep est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de  deep était true par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, deep doit être défini sur false.

- -

Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de deep était false. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument deep pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.

-
- -

Exemple

- -
p = document.getElementById("para1");
-p_prime = p.cloneNode(true);
-
- -

Notes

- -

Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec addEventListener() ou ceux assignés au propriétés d'éléments (par exemple node.onclick = fn). De plus, pour un élément {{HTMLElement("canvas")}} l'image peinte n'est pas copiée.

- -

Le nœud dupliqué renvoyé par cloneNode ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode {{domxref("Node.appendChild()")}} ou une méthode similaire. De même, il n'a pas de parent tant qu'il n'a pas été ajouté à un autre nœud.

- -

Si deep est défini à false, aucun des nœuds enfants n'est copié.
- Tout texte contenu dans le nœud n'est pas copié non plus , car il fait partie d'un ou plusieurs nœuds {{domxref("Text")}} enfants.

- -

Si deep est évalué à true, le sous-arbre entier est copié également (y compris le texte qui peut être contenu dans des nœuds {{domxref("Text")}} enfants). Pour les nœuds vides (par exemple les éléments {{HTMLElement("img")}} et {{HTMLElement("input")}} ) le fait de mettre deep à true ou false n'a aucune incidence sur la copie, mais il est tout de même nécessaire de fournir une valeur.

- -
-

Attention : cloneNode() peut conduire à dupliquer des ID (identifiant) d'éléments dans un document.

-
- -

Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus.

- -

Pour cloner un noeud à ajouter dans un document différent, utilisez  {{domxref("Document.importNode()")}} à la place.

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}{{Spec2("DOM3 Core")}} 
{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}{{Spec2("DOM2 Core")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.cloneNode")}}

diff --git a/files/fr/web/api/node/clonenode/index.md b/files/fr/web/api/node/clonenode/index.md new file mode 100644 index 0000000000..fef79935dc --- /dev/null +++ b/files/fr/web/api/node/clonenode/index.md @@ -0,0 +1,92 @@ +--- +title: element.cloneNode +slug: Web/API/Node/cloneNode +tags: + - API + - DOM + - Duplication + - Méthodes + - Noeuds +translation_of: Web/API/Node/cloneNode +--- +

{{APIRef("DOM")}}

+ +

La méthode Node.cloneNode() renvoie une copie du nœud sur lequel elle a été appelée.

+ +

Syntaxe

+ +
var dupNode = node.cloneNode([deep]);
+
+ +
+
node
+
Le noeud à dupliquer.
+
dupNode
+
Le nouveau noeud qui sera un clone du node.
+
deep {{optional_inline}} (profondeur)
+
true (vrai) si les enfants du noeud doivent aussi être clonés ou false (faux) si seul le noeud spécifié doit l'être.
+
+ +
+

Note : Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), deep est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de  deep était true par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, deep doit être défini sur false.

+ +

Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de deep était false. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument deep pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.

+
+ +

Exemple

+ +
p = document.getElementById("para1");
+p_prime = p.cloneNode(true);
+
+ +

Notes

+ +

Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec addEventListener() ou ceux assignés au propriétés d'éléments (par exemple node.onclick = fn). De plus, pour un élément {{HTMLElement("canvas")}} l'image peinte n'est pas copiée.

+ +

Le nœud dupliqué renvoyé par cloneNode ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode {{domxref("Node.appendChild()")}} ou une méthode similaire. De même, il n'a pas de parent tant qu'il n'a pas été ajouté à un autre nœud.

+ +

Si deep est défini à false, aucun des nœuds enfants n'est copié.
+ Tout texte contenu dans le nœud n'est pas copié non plus , car il fait partie d'un ou plusieurs nœuds {{domxref("Text")}} enfants.

+ +

Si deep est évalué à true, le sous-arbre entier est copié également (y compris le texte qui peut être contenu dans des nœuds {{domxref("Text")}} enfants). Pour les nœuds vides (par exemple les éléments {{HTMLElement("img")}} et {{HTMLElement("input")}} ) le fait de mettre deep à true ou false n'a aucune incidence sur la copie, mais il est tout de même nécessaire de fournir une valeur.

+ +
+

Attention : cloneNode() peut conduire à dupliquer des ID (identifiant) d'éléments dans un document.

+
+ +

Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus.

+ +

Pour cloner un noeud à ajouter dans un document différent, utilisez  {{domxref("Document.importNode()")}} à la place.

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}{{Spec2("DOM3 Core")}} 
{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}{{Spec2("DOM2 Core")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.cloneNode")}}

diff --git a/files/fr/web/api/node/comparedocumentposition/index.html b/files/fr/web/api/node/comparedocumentposition/index.html deleted file mode 100644 index a40125b5c1..0000000000 --- a/files/fr/web/api/node/comparedocumentposition/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Node.compareDocumentPosition() -slug: Web/API/Node/compareDocumentPosition -tags: - - API - - Arborescence - - DOM - - Méthodes - - Noeuds - - Position -translation_of: Web/API/Node/compareDocumentPosition ---- -
{{APIRef("DOM")}}
- -

La méthode Node.compareDocumentPosition()compare la position du noeud courant par rapport à un autre noeud dans tout autre document.

- -

La valeur retournée est un masque de bits avec les valeurs suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomValeur
DOCUMENT_POSITION_DISCONNECTED1
DOCUMENT_POSITION_PRECEDING2
DOCUMENT_POSITION_FOLLOWING4
DOCUMENT_POSITION_CONTAINS8
DOCUMENT_POSITION_CONTAINED_BY16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC32
- -

Syntaxe

- -
node.compareDocumentPosition( otherNode )
-
- -

Exemple

- -
var head = document.getElementsByTagName('head').item(0);
-
-if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING) {
-  console.log("well-formed document");
-} else {
-  console.log("<head> is not before <body>");
-}
-
- -
-

Note : Parce que le résultat renvoyé par compareDocumentPosition est un masque de bits, des opérateurs binaires doivent être utilisés pour des résultats significatifs.

-
- -
-

Note : La première instruction utilise l' item(0) de la méthode NodeList , qui est l'équivalent de getElementsByTagName('head')[0].

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}}{{Spec2('DOM3 Core')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.compareDocumentPosition")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/node/comparedocumentposition/index.md b/files/fr/web/api/node/comparedocumentposition/index.md new file mode 100644 index 0000000000..a40125b5c1 --- /dev/null +++ b/files/fr/web/api/node/comparedocumentposition/index.md @@ -0,0 +1,108 @@ +--- +title: Node.compareDocumentPosition() +slug: Web/API/Node/compareDocumentPosition +tags: + - API + - Arborescence + - DOM + - Méthodes + - Noeuds + - Position +translation_of: Web/API/Node/compareDocumentPosition +--- +
{{APIRef("DOM")}}
+ +

La méthode Node.compareDocumentPosition()compare la position du noeud courant par rapport à un autre noeud dans tout autre document.

+ +

La valeur retournée est un masque de bits avec les valeurs suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomValeur
DOCUMENT_POSITION_DISCONNECTED1
DOCUMENT_POSITION_PRECEDING2
DOCUMENT_POSITION_FOLLOWING4
DOCUMENT_POSITION_CONTAINS8
DOCUMENT_POSITION_CONTAINED_BY16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC32
+ +

Syntaxe

+ +
node.compareDocumentPosition( otherNode )
+
+ +

Exemple

+ +
var head = document.getElementsByTagName('head').item(0);
+
+if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING) {
+  console.log("well-formed document");
+} else {
+  console.log("<head> is not before <body>");
+}
+
+ +
+

Note : Parce que le résultat renvoyé par compareDocumentPosition est un masque de bits, des opérateurs binaires doivent être utilisés pour des résultats significatifs.

+
+ +
+

Note : La première instruction utilise l' item(0) de la méthode NodeList , qui est l'équivalent de getElementsByTagName('head')[0].

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}}{{Spec2('DOM3 Core')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.compareDocumentPosition")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/node/contains/index.html b/files/fr/web/api/node/contains/index.html deleted file mode 100644 index e5906fbf28..0000000000 --- a/files/fr/web/api/node/contains/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Node.contains -slug: Web/API/Node/contains -tags: - - API - - DOM - - Filiation - - Méthodes - - Noeuds -translation_of: Web/API/Node/contains ---- -
{{APIRef("DOM")}}
- -
La méthode Node.contains() renvoie une valeur {{jsxref("Boolean")}} (booléenne) indiquant si un nœud est un descendant d'un nœud donné, c'est-à-dire le nœud lui-même, l'un de ses enfants directs ({{domxref("Node.childNodes", "childNodes")}}), l'un des enfants directs des enfants, et ainsi de suite.
- -

Syntaxe

- -
node.contains( otherNode )
-
- -

Exemple

- -

Cette fonction vérifie si un élément est dans le corps de la page. Comme contains est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de isInPage, donc ce cas renvoie false.

- -
function isInPage(node) {
-  return (node === document.body) ? false : document.body.contains(node);
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}{{Spec2("DOM WHATWG")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.contains")}}

- -

Voir aussi

- -
    -
  • {{domxref("Node.compareDocumentPosition")}}
    • -
  • {{domxref("Node.hasChildNodes")}}
    • -
diff --git a/files/fr/web/api/node/contains/index.md b/files/fr/web/api/node/contains/index.md new file mode 100644 index 0000000000..e5906fbf28 --- /dev/null +++ b/files/fr/web/api/node/contains/index.md @@ -0,0 +1,57 @@ +--- +title: Node.contains +slug: Web/API/Node/contains +tags: + - API + - DOM + - Filiation + - Méthodes + - Noeuds +translation_of: Web/API/Node/contains +--- +
{{APIRef("DOM")}}
+ +
La méthode Node.contains() renvoie une valeur {{jsxref("Boolean")}} (booléenne) indiquant si un nœud est un descendant d'un nœud donné, c'est-à-dire le nœud lui-même, l'un de ses enfants directs ({{domxref("Node.childNodes", "childNodes")}}), l'un des enfants directs des enfants, et ainsi de suite.
+ +

Syntaxe

+ +
node.contains( otherNode )
+
+ +

Exemple

+ +

Cette fonction vérifie si un élément est dans le corps de la page. Comme contains est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de isInPage, donc ce cas renvoie false.

+ +
function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}{{Spec2("DOM WHATWG")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.contains")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("Node.compareDocumentPosition")}}
    • +
  • {{domxref("Node.hasChildNodes")}}
    • +
diff --git a/files/fr/web/api/node/firstchild/index.html b/files/fr/web/api/node/firstchild/index.html deleted file mode 100644 index 03550acf9f..0000000000 --- a/files/fr/web/api/node/firstchild/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: element.firstChild -slug: Web/API/Node/firstChild -tags: - - API - - DOM - - Enfant - - Noeuds - - Propriété -translation_of: Web/API/Node/firstChild ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs.

- -

Syntaxe

- -
var childNode = node.firstChild;
- -

Exemple

- -

Cet exemple montre l'utilisation de firstChild et la manière dont les nœuds d'espaces peuvent interférer.

- -
<p id="para-01">
-  <span>Premier span</span>
-</p>
-
-<script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
-</script>
-
- -

Dans le code ci-dessus, la console affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes <p> et <span>. Tout espace provoquera l'insertion d'un nœud #text , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.

- -

Un autre nœud #text est inséré entre les balises de fermeture </span> et </p>.

- -

Si ces espaces sont retirés du code source, les nœuds #text n'apparaîtront plus et l'élément span deviendra le premier enfant du paragraphe.

- -
<p id="para-01"><span>Premier span</span></p>
-
-<script type="text/javascript">
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
-</script>
-
- -

À présent, l'alerte affichera « SPAN ».

- -

Pour éviter le problème avec node.firstChild  renvoyant des noeuds #text ou #comment,  {{domxref("ParentNode.firstElementChild")}}  peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois,  node.firstElementChild nécessite un "shim" pour Internet Explorer 9 et antérieurs.

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}{{Spec2('DOM WHATWG')}}Pas de changement
{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM3 Core')}}Pas de changement
{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM2 Core')}}Pas de changement
{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.firstChild")}}

\ No newline at end of file diff --git a/files/fr/web/api/node/firstchild/index.md b/files/fr/web/api/node/firstchild/index.md new file mode 100644 index 0000000000..03550acf9f --- /dev/null +++ b/files/fr/web/api/node/firstchild/index.md @@ -0,0 +1,88 @@ +--- +title: element.firstChild +slug: Web/API/Node/firstChild +tags: + - API + - DOM + - Enfant + - Noeuds + - Propriété +translation_of: Web/API/Node/firstChild +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs.

+ +

Syntaxe

+ +
var childNode = node.firstChild;
+ +

Exemple

+ +

Cet exemple montre l'utilisation de firstChild et la manière dont les nœuds d'espaces peuvent interférer.

+ +
<p id="para-01">
+  <span>Premier span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

Dans le code ci-dessus, la console affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes <p> et <span>. Tout espace provoquera l'insertion d'un nœud #text , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.

+ +

Un autre nœud #text est inséré entre les balises de fermeture </span> et </p>.

+ +

Si ces espaces sont retirés du code source, les nœuds #text n'apparaîtront plus et l'élément span deviendra le premier enfant du paragraphe.

+ +
<p id="para-01"><span>Premier span</span></p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

À présent, l'alerte affichera « SPAN ».

+ +

Pour éviter le problème avec node.firstChild  renvoyant des noeuds #text ou #comment,  {{domxref("ParentNode.firstElementChild")}}  peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois,  node.firstElementChild nécessite un "shim" pour Internet Explorer 9 et antérieurs.

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}{{Spec2('DOM WHATWG')}}Pas de changement
{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM3 Core')}}Pas de changement
{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM2 Core')}}Pas de changement
{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.firstChild")}}

\ No newline at end of file diff --git a/files/fr/web/api/node/getrootnode/index.html b/files/fr/web/api/node/getrootnode/index.html deleted file mode 100644 index 5a6297d55b..0000000000 --- a/files/fr/web/api/node/getrootnode/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Node.getRootNode() -slug: Web/API/Node/getRootNode -tags: - - API - - DOM - - Méthodes - - Noeuds - - Racine -translation_of: Web/API/Node/getRootNode ---- -

{{APIRef("DOM")}}

- -

La méthode getRootNode() de l'interface {{domxref("Node")}} renvoie le contexte de la racine de l'objet, qui peut optionnellement inclure la racine "shadow" si elle est disponible.

- -

Syntaxe

- -
var root = node.getRootNode(options)
- -

Paramètres

- -
-
options {{optional_inline}}
-
Un objet qui définit les options pour obtenir le noeud racine. Les options disponibles sont : -
    -
  • composed : un {{jsxref('Boolean')}} (booléen) qui indique si la racine shadow doit être retournée (false (faux) par défaut) ou un noeud racine au-delà de la racine shadow (true).
    • -
-
-
- -

Retourne

- -

Une interface {{domxref('Node')}}.

- -

Exemple

- -

Le premier exemple retourne une référence au noeud HTML/document lorsqu'il est exécuté dans les navigateurs de support :

- -
rootNode = node.getRootNode();
- -

Cet exemple plus complexe montre la différence entre retourner une racine normale et une racine qui inclut la racine shadow (voir le code source complet):

- -
<!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html -->
-<div class="js-parent">
-    <div class="js-child"></div>
-</div>
-<div class="js-shadowHost"></div>
-<script>
-    // work on Chrome 54+，Opera41+
-
-    var parent = document.querySelector('.js-parent'),
-        child = document.querySelector('.js-child'),
-        shadowHost = document.querySelector('.js-shadowHost');
-
-    console.log(parent.getRootNode().nodeName); // #document
-    console.log(child.getRootNode().nodeName); // #document
-
-    // create a ShadowRoot
-    var shadowRoot = shadowHost.attachShadow({mode:'open'});
-    shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style>'
-        + '<div class="js-shadowChild">content</div>';
-    var shadowChild = shadowRoot.querySelector('.js-shadowChild');
-
-    // The default value of composed is false
-    console.log(shadowChild.getRootNode() === shadowRoot); // true
-    console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true
-    console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document
-</script>
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-node-getrootnode','getRootNode()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.getRootNode")}}

\ No newline at end of file diff --git a/files/fr/web/api/node/getrootnode/index.md b/files/fr/web/api/node/getrootnode/index.md new file mode 100644 index 0000000000..5a6297d55b --- /dev/null +++ b/files/fr/web/api/node/getrootnode/index.md @@ -0,0 +1,89 @@ +--- +title: Node.getRootNode() +slug: Web/API/Node/getRootNode +tags: + - API + - DOM + - Méthodes + - Noeuds + - Racine +translation_of: Web/API/Node/getRootNode +--- +

{{APIRef("DOM")}}

+ +

La méthode getRootNode() de l'interface {{domxref("Node")}} renvoie le contexte de la racine de l'objet, qui peut optionnellement inclure la racine "shadow" si elle est disponible.

+ +

Syntaxe

+ +
var root = node.getRootNode(options)
+ +

Paramètres

+ +
+
options {{optional_inline}}
+
Un objet qui définit les options pour obtenir le noeud racine. Les options disponibles sont : +
    +
  • composed : un {{jsxref('Boolean')}} (booléen) qui indique si la racine shadow doit être retournée (false (faux) par défaut) ou un noeud racine au-delà de la racine shadow (true).
    • +
+
+
+ +

Retourne

+ +

Une interface {{domxref('Node')}}.

+ +

Exemple

+ +

Le premier exemple retourne une référence au noeud HTML/document lorsqu'il est exécuté dans les navigateurs de support :

+ +
rootNode = node.getRootNode();
+ +

Cet exemple plus complexe montre la différence entre retourner une racine normale et une racine qui inclut la racine shadow (voir le code source complet):

+ +
<!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html -->
+<div class="js-parent">
+    <div class="js-child"></div>
+</div>
+<div class="js-shadowHost"></div>
+<script>
+    // work on Chrome 54+，Opera41+
+
+    var parent = document.querySelector('.js-parent'),
+        child = document.querySelector('.js-child'),
+        shadowHost = document.querySelector('.js-shadowHost');
+
+    console.log(parent.getRootNode().nodeName); // #document
+    console.log(child.getRootNode().nodeName); // #document
+
+    // create a ShadowRoot
+    var shadowRoot = shadowHost.attachShadow({mode:'open'});
+    shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style>'
+        + '<div class="js-shadowChild">content</div>';
+    var shadowChild = shadowRoot.querySelector('.js-shadowChild');
+
+    // The default value of composed is false
+    console.log(shadowChild.getRootNode() === shadowRoot); // true
+    console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true
+    console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document
+</script>
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-node-getrootnode','getRootNode()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.getRootNode")}}

\ No newline at end of file diff --git a/files/fr/web/api/node/haschildnodes/index.html b/files/fr/web/api/node/haschildnodes/index.html deleted file mode 100644 index c14ad9836f..0000000000 --- a/files/fr/web/api/node/haschildnodes/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: element.hasChildNodes -slug: Web/API/Node/hasChildNodes -tags: - - API - - DOM - - Method - - NeedsSpecTable - - Node - - Reference -translation_of: Web/API/Node/hasChildNodes ---- -

{{APIRef("DOM")}}

- -

La méthode Node.hasChildNodes() renvoie un {{jsxref("Boolean")}} indiquant si le {{domxref("Node","noeud")}} actuel possède des nœuds enfants ou non.

- -

Syntaxe

- -
bool = node.hasChildNodes();
- -

Valeur de retour

- -

Un {{jsxref("Boolean")}} qui est true si le nœud a des nœuds enfants, et false dans le cas contraire.

- -

Exemple

- -
let foo = document.getElementById('foo');
-
-if (foo.hasChildNodes()) {
-  // Faire quelque chose avec 'foo.childNodes'
-}
- -

Prothèse d'émulation

- -
(function(prototype) {
-  prototype.hasChildNodes = prototype.hasChildNodes || function() {
-    return !!this.firstChild;
-  }
-})(Node.prototype);
- -

Il y a différentes façons de déterminer si le noeud a un noeud enfant :

- -
    -
  • node.hasChildNodes()
    • -
  • node.firstChild != null (ou simplement node.firstChild)
    • -
  • node.childNodes && node.childNodes.length (ou node.childNodes.length > 0)
    • -
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-node-haschildnodes", "Node: hasChildNodes")}} - {{Spec2("DOM WHATWG")}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.hasChildNodes")}}

- -

Voir aussi

- -
    -
  • {{domxref("Node.childNodes")}}
    • -
  • {{domxref("Node.hasAttributes")}}
    • -
diff --git a/files/fr/web/api/node/haschildnodes/index.md b/files/fr/web/api/node/haschildnodes/index.md new file mode 100644 index 0000000000..c14ad9836f --- /dev/null +++ b/files/fr/web/api/node/haschildnodes/index.md @@ -0,0 +1,78 @@ +--- +title: element.hasChildNodes +slug: Web/API/Node/hasChildNodes +tags: + - API + - DOM + - Method + - NeedsSpecTable + - Node + - Reference +translation_of: Web/API/Node/hasChildNodes +--- +

{{APIRef("DOM")}}

+ +

La méthode Node.hasChildNodes() renvoie un {{jsxref("Boolean")}} indiquant si le {{domxref("Node","noeud")}} actuel possède des nœuds enfants ou non.

+ +

Syntaxe

+ +
bool = node.hasChildNodes();
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean")}} qui est true si le nœud a des nœuds enfants, et false dans le cas contraire.

+ +

Exemple

+ +
let foo = document.getElementById('foo');
+
+if (foo.hasChildNodes()) {
+  // Faire quelque chose avec 'foo.childNodes'
+}
+ +

Prothèse d'émulation

+ +
(function(prototype) {
+  prototype.hasChildNodes = prototype.hasChildNodes || function() {
+    return !!this.firstChild;
+  }
+})(Node.prototype);
+ +

Il y a différentes façons de déterminer si le noeud a un noeud enfant :

+ +
    +
  • node.hasChildNodes()
    • +
  • node.firstChild != null (ou simplement node.firstChild)
    • +
  • node.childNodes && node.childNodes.length (ou node.childNodes.length > 0)
    • +
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-node-haschildnodes", "Node: hasChildNodes")}} + {{Spec2("DOM WHATWG")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.hasChildNodes")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("Node.childNodes")}}
    • +
  • {{domxref("Node.hasAttributes")}}
    • +
diff --git a/files/fr/web/api/node/index.html b/files/fr/web/api/node/index.html deleted file mode 100644 index 4c7ddde36b..0000000000 --- a/files/fr/web/api/node/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: Node -slug: Web/API/Node -tags: - - API - - DOM - - Document - - Element - - Interface - - Node - - Référence DOM - - Structure - - hierarchy -translation_of: Web/API/Node ---- -

{{ApiRef("DOM")}}

- -

Node (nœud) est une classe abstraite de laquelle de nombreux objets de type DOM API héritent, leur permettant d'être traités de manière similaire et souvent interchangeable. Étant une classe abstraire, il n'existe pas d'objet qui soit directement un Node. Tous les objets implantant les fonctionnalités de Node sont des instances d'une de ses sous-classes, dont les plus notables sont {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.

- -

De pls, tous les types de nœuds du DOM sont représentés par une classe héritant des propriétés et méthodes de Node : {{domxref("CharacterData")}} (duquel {{domxref("Text")}}, {{domxref("Comment")}} et {{domxref("CDATASection")}} héritent), {{domxref("ProcessingInstruction")}}, , {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}} et {{domxref("EntityReference")}}.

- -

Les propriétés ou méthodes de ces interfaces peuvent retourner null lorsque leur existence n'est pas pertinente. Elles peuvent aussi générer une exception – par exemple lors de l'ajout d'un enfant à un type de nœud pour lequel aucun enfant ne peut exister.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Hérite les propriétés de son parent {{domxref("EventTarget")}}.

- -
-
{{DOMxRef("Node.baseURI")}} {{readonlyInline}}
-
Retourne une {{domxref("DOMString")}} (chaine de caractères) représentant l'URL de base du document contenant le Node. En HTML, il correspond au protocole, au nom de domaine et à la structure du répertoire, jusqu'au dernier /.
-
{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline()}}
-
(Non disponible pour le contenu Web). L'objet en lecture seule {{Interface ("nsIURI")}} représentant l'URI de base pour l'élément.
-
{{DOMxRef("Node.childNodes")}} {{readonlyInline}}
-
Renvoie un {{domxref ("NodeList")}} contenant tous les enfants de ce nœud. {{domxref ("NodeList")}} signifie que si les enfants du Node changent, l'objet {{domxref ("NodeList")}} est automatiquement mis à jour.
-
{{DOMxRef("Node.firstChild")}} {{readonlyInline}}
-
Renvoie un {{domxref ("Node")}} représentant le premier nœud enfant direct de ce nœud ou null s'il n'a pas d'enfant.
-
{{DOMxRef("Node.lastChild")}} {{readonlyInline}}
-
Retourne un {{domxref("Node")}} représentant le dernier nœud enfant direct de ce nœud ou null s'il n'a pas d'enfant.
-
{{DOMxRef("Node.nextSibling")}} {{readonlyInline}}
-
Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou null s'il n'y en a pas.
-
{{DOMxRef("Node.nodeName")}} {{readonlyInline}}
-
Retourne une {{domxref("DOMString")}} (chaîne de caractères) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme 'audio'  pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne '#text' ou un  {{domxref("Document")}}  doit avoir la chaîne '#document'..
-
{{DOMxRef("Node.nodeType")}}{{readonlyInline}}
-
Retourne un unsigned short (non signé court) représentant le type du nœud. Les valeurs possibles sont :
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomValeur
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
- -
-
{{DOMxRef("Node.nodeValue")}}
-
Retourne / définit la valeur du nœud courant.
-
{{DOMxRef("Node.ownerDocument")}}{{readonlyInline}}
-
Retourne le {{domxref("Document")}}  auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne null .
-
{{DOMxRef("Node.parentNode")}}{{readonlyInline}}
-
Retourne un {{domxref("Node")}} qui est le parent de ce nœud. S'il n'existe pas, parce qu'il est en haut de l'arbre ou parce qu'il ne participe pas à un arbre, cette propriété retourne null .
-
{{DOMxRef("Node.parentElement")}}{{readonlyInline}}
-
Retourne un {{domxref("Element")}} qui est le parent de ce nœud. Si le nœud n'a aucun parent ou si ce parent n'est pas un  {{domxref("Element")}} , cette propriété retourne null.
-
{{DOMxRef("Node.previousSibling")}}{{readonlyInline}}
-
Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou  null s'il n'y en a pas.
-
{{DOMxRef("Node.textContent")}}
-
Retourne / définit le contenu textuel d'un élément et de tous ses descendants.
-
- -
-
- -

Propriétés obsolètes

- -
-
{{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
-
Retourne un {{domxref("DOMString")}}  représentant la partie locale du nom d'un élément.
-
- -
-

Note : Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML). Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML. {{gecko_minversion_inline("1.9.2")}}

-
- -
-
{{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
-
L'URI du "Namespace" de ce nom, ou  null s'il n'y en a pas.
-
- -
-

Note : Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" https://www.w3.org/1999/xhtml/  pour HTML et XML.  {{gecko_minversion_inline("1.9.2")}}

-
- -
-
{{DOMxRef("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
-
Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou null  si aucun préfixe n'est spécifié.
-
{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}
-
Un {{Interface("nsIPrincipal")}} représentant le nœud principal.
-
{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
-
Retourne un objet {{DOMxRef("Node")}} représentant le noeud le plus haut dans l'arbre ou le noeud en cours s'il est le noeud le plus haut de l'arbre. Cette propriété a été remplacée par {{DOMxRef("Node.getRootNode()")}}.
-
- -

Méthodes

- -

Hérite des méthodes de son parent {{domxref("EventTarget")}}.

- -
-
{{DOMxRef("Node.appendChild()", "Node.appendChild(childNode)")}}
-
Ajoute l'argument childNode spécifié comme dernier enfant au noeud actuel.
- Si l'argument fait référence à un noeud existant sur l'arborescence DOM, le nœud sera détaché de sa position actuelle et attaché à la nouvelle position.
-
{{DOMxRef("Node.cloneNode()")}}
-
Clône un {{domxref("Node")}} et, éventuellement, tout son contenu. Par défaut, il duplique le contenu de ce nœud.
-
{{DOMxRef("Node.compareDocumentPosition()")}}
-
Compare la position du nœud courant par rapport à un autre nœud dans tout autre document.
-
{{DOMxRef("Node.contains()")}}
-
Retourne une valeur {{jsxref("Boolean")}} (booléen) indiquant si un noeud est un descendant d'un noeud donné ou non.
-
{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}
-
Retourne une liste des boites CSS des nœuds relatifs à un autre nœud.
-
{{DOMxRef("Node.getRootNode()")}}
-
Retourne la racine de l'objet contextuel qui comprend éventuellement la "Shadow root" si elle est disponible.
-
{{DOMxRef("Node.hasChildNodes()")}}
-
Retourne un {{jsxref("Boolean")}} (booléen) indiquant si l'élément a des noeuds enfants ou non.
-
{{DOMxRef("Node.insertBefore()")}}
-
Insère un {{domxref("Node")}} avant le nœud de référence en tant qu'enfant du noeud actuel.
-
{{DOMxRef("Node.isDefaultNamespace()")}}
-
Accepte une URI d'espace de nom comme argument et retourne une valeur {{jsxref("Boolean")}} avec true (vrai) si l'espace de nom est celui par défaut du noeud donné ou false (faux) sinon.
-
{{DOMxRef("Node.isEqualNode()")}}
-
Retourne une valeur {{jsxref("Boolean")}} (booléenne) qui indique si oui ou non deux noeuds sont du même type et si tous leurs points de données définis correspondent.
-
{{DOMxRef("Node.isSameNode()")}}
-
Retourne une valeur {{jsxref("Boolean")}} (booléenne) indiquant si les deux noeuds sont ou non identiques (c'est-à-dire qu'ils font référence au même objet).
-
{{DOMxRef("Node.lookupPrefix()")}}
-
Retourne une {{domxref("DOMString")}} (chaîne de caractères) contenant le préfixe d'une URI d'un espace de nom donné, s'il est présent, et null sinon.
-
{{DOMxRef("Node.lookupNamespaceURI()")}}
-
Accepte un préfixe et retourne l'URI de l'espace de noms qui lui est associé sur le nœud donné s'il le trouve, null sinon. Fournir null comme préfixe retournera l'espace de noms par défaut.
-
{{DOMxRef("Node.normalize()")}}
-
Nettoye tous les nœuds de texte en-dessous de cet élément (fusionne adjacent, supprime vide).
-
{{DOMxRef("Node.removeChild()")}}
-
Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud.
-
{{DOMxRef("Node.replaceChild()")}}
-
Remplace un {{domxref("Node")}} enfant du nœud courant par celui donné dans le paramètre.
-
- -

Méthodes obsolètes

- -
-
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
-
Permet à un utilisateur d'obtenir un objet {{DOMxRef("DOMUserData")}} à partir du nœud fourni.
-
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
-
Permet à un utilisateur d'obtenir une {{domxref ("DOMUserData")}} (donnée utilisateur) à partir du nœud.
-
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
-
Retourne un {{jsxref("Boolean")}} indiquant si l'élément possède des attributs ou non.
-
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
-
Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le nœud spécifique.
-
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
-
Permet à un utilisateur d'attacher ou d'enlever  {{domxref("DOMUserData")}} du nœud.
-
- -

Exemples

- -

Parcourir tous les nœuds enfants

- -

La fonction suivante parcourt de manière récursive tous les nœuds enfants d'un noeud et exécute une fonction de rappel sur eux (et sur le nœud parent lui-même).

- -
function DOMComb (oParent, oCallback) {
-  if (oParent.hasChildNodes()) {
-    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
-      DOMComb(oNode, oCallback);
-    }
-  }
-  oCallback.call(oParent);
-}
- -

Syntaxe

- -
DOMComb(parentNode, callbackFunction);
- -

Description

- -

Suit le cycle récursif de tous les nœuds enfants d'un parentNode et le parentNode lui-même, et exécute la fonction callbackFunction (rappel) sur eux comme un objet this.

- -

Paramètres

- -
-
parentNode
-
Le nœud parent (Node Object)
-
callbackFunction
-
La fonction de rappel (Function).
-
- -

Exemples d'utilisation

- -

L'exemple suivant envoie à la console.log le contenu texte du corps :

- -
function printContent () {
-  if (this.nodeValue) { console.log(this.nodeValue); }
-}
-
-onload = function () {
-  DOMComb(document.body, printContent);
-};
- -

Supprimer tous les enfants imbriqués dans un nœud

- -
Element.prototype.removeAll = function () {
-  while (this.firstChild) { this.removeChild(this.firstChild); }
-  return this;
-};
- -

Exemple d'utilisation

- -
/* ... an alternative to document.body.innerHTML = "" ... */
-document.body.removeAll();
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Supprime les propriétés suivantes : attributes, namespaceURI, prefix, et localName.
- Supprime les méthodes suivantes : isSupported(), hasAttributes(), getFeature(), setUserData(), et getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}Les méthodes insertBefore(), replaceChild(), removeChild(), etappendChild() renvoient un autre type d'erreur (NOT_SUPPORTED_ERR) si elles sont appelées par {{domxref("Document")}}.
- La méthode normalize()  a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie.
- Ajout des méthodes suivantes : compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), et getUserData().
- Ajout des propriétés suivantes : baseURI et textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}La propriété ownerDocumenta été légèrement modifiée pour que  {{domxref("DocumentFragment")}} renvoie également null.
- Ajout des propriétés suivantes : namespaceURI, prefix, et localName.
- Ajout des méthodes suivantes : normalize(), isSupported() et hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node")}}

\ No newline at end of file diff --git a/files/fr/web/api/node/index.md b/files/fr/web/api/node/index.md new file mode 100644 index 0000000000..4c7ddde36b --- /dev/null +++ b/files/fr/web/api/node/index.md @@ -0,0 +1,306 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Document + - Element + - Interface + - Node + - Référence DOM + - Structure + - hierarchy +translation_of: Web/API/Node +--- +

{{ApiRef("DOM")}}

+ +

Node (nœud) est une classe abstraite de laquelle de nombreux objets de type DOM API héritent, leur permettant d'être traités de manière similaire et souvent interchangeable. Étant une classe abstraire, il n'existe pas d'objet qui soit directement un Node. Tous les objets implantant les fonctionnalités de Node sont des instances d'une de ses sous-classes, dont les plus notables sont {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.

+ +

De pls, tous les types de nœuds du DOM sont représentés par une classe héritant des propriétés et méthodes de Node : {{domxref("CharacterData")}} (duquel {{domxref("Text")}}, {{domxref("Comment")}} et {{domxref("CDATASection")}} héritent), {{domxref("ProcessingInstruction")}}, , {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}} et {{domxref("EntityReference")}}.

+ +

Les propriétés ou méthodes de ces interfaces peuvent retourner null lorsque leur existence n'est pas pertinente. Elles peuvent aussi générer une exception – par exemple lors de l'ajout d'un enfant à un type de nœud pour lequel aucun enfant ne peut exister.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Hérite les propriétés de son parent {{domxref("EventTarget")}}.

+ +
+
{{DOMxRef("Node.baseURI")}} {{readonlyInline}}
+
Retourne une {{domxref("DOMString")}} (chaine de caractères) représentant l'URL de base du document contenant le Node. En HTML, il correspond au protocole, au nom de domaine et à la structure du répertoire, jusqu'au dernier /.
+
{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline()}}
+
(Non disponible pour le contenu Web). L'objet en lecture seule {{Interface ("nsIURI")}} représentant l'URI de base pour l'élément.
+
{{DOMxRef("Node.childNodes")}} {{readonlyInline}}
+
Renvoie un {{domxref ("NodeList")}} contenant tous les enfants de ce nœud. {{domxref ("NodeList")}} signifie que si les enfants du Node changent, l'objet {{domxref ("NodeList")}} est automatiquement mis à jour.
+
{{DOMxRef("Node.firstChild")}} {{readonlyInline}}
+
Renvoie un {{domxref ("Node")}} représentant le premier nœud enfant direct de ce nœud ou null s'il n'a pas d'enfant.
+
{{DOMxRef("Node.lastChild")}} {{readonlyInline}}
+
Retourne un {{domxref("Node")}} représentant le dernier nœud enfant direct de ce nœud ou null s'il n'a pas d'enfant.
+
{{DOMxRef("Node.nextSibling")}} {{readonlyInline}}
+
Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou null s'il n'y en a pas.
+
{{DOMxRef("Node.nodeName")}} {{readonlyInline}}
+
Retourne une {{domxref("DOMString")}} (chaîne de caractères) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme 'audio'  pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne '#text' ou un  {{domxref("Document")}}  doit avoir la chaîne '#document'..
+
{{DOMxRef("Node.nodeType")}}{{readonlyInline}}
+
Retourne un unsigned short (non signé court) représentant le type du nœud. Les valeurs possibles sont :
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomValeur
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
+ +
+
{{DOMxRef("Node.nodeValue")}}
+
Retourne / définit la valeur du nœud courant.
+
{{DOMxRef("Node.ownerDocument")}}{{readonlyInline}}
+
Retourne le {{domxref("Document")}}  auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne null .
+
{{DOMxRef("Node.parentNode")}}{{readonlyInline}}
+
Retourne un {{domxref("Node")}} qui est le parent de ce nœud. S'il n'existe pas, parce qu'il est en haut de l'arbre ou parce qu'il ne participe pas à un arbre, cette propriété retourne null .
+
{{DOMxRef("Node.parentElement")}}{{readonlyInline}}
+
Retourne un {{domxref("Element")}} qui est le parent de ce nœud. Si le nœud n'a aucun parent ou si ce parent n'est pas un  {{domxref("Element")}} , cette propriété retourne null.
+
{{DOMxRef("Node.previousSibling")}}{{readonlyInline}}
+
Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou  null s'il n'y en a pas.
+
{{DOMxRef("Node.textContent")}}
+
Retourne / définit le contenu textuel d'un élément et de tous ses descendants.
+
+ +
+
+ +

Propriétés obsolètes

+ +
+
{{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Retourne un {{domxref("DOMString")}}  représentant la partie locale du nom d'un élément.
+
+ +
+

Note : Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML). Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML. {{gecko_minversion_inline("1.9.2")}}

+
+ +
+
{{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
L'URI du "Namespace" de ce nom, ou  null s'il n'y en a pas.
+
+ +
+

Note : Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" https://www.w3.org/1999/xhtml/  pour HTML et XML.  {{gecko_minversion_inline("1.9.2")}}

+
+ +
+
{{DOMxRef("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou null  si aucun préfixe n'est spécifié.
+
{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}
+
Un {{Interface("nsIPrincipal")}} représentant le nœud principal.
+
{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
+
Retourne un objet {{DOMxRef("Node")}} représentant le noeud le plus haut dans l'arbre ou le noeud en cours s'il est le noeud le plus haut de l'arbre. Cette propriété a été remplacée par {{DOMxRef("Node.getRootNode()")}}.
+
+ +

Méthodes

+ +

Hérite des méthodes de son parent {{domxref("EventTarget")}}.

+ +
+
{{DOMxRef("Node.appendChild()", "Node.appendChild(childNode)")}}
+
Ajoute l'argument childNode spécifié comme dernier enfant au noeud actuel.
+ Si l'argument fait référence à un noeud existant sur l'arborescence DOM, le nœud sera détaché de sa position actuelle et attaché à la nouvelle position.
+
{{DOMxRef("Node.cloneNode()")}}
+
Clône un {{domxref("Node")}} et, éventuellement, tout son contenu. Par défaut, il duplique le contenu de ce nœud.
+
{{DOMxRef("Node.compareDocumentPosition()")}}
+
Compare la position du nœud courant par rapport à un autre nœud dans tout autre document.
+
{{DOMxRef("Node.contains()")}}
+
Retourne une valeur {{jsxref("Boolean")}} (booléen) indiquant si un noeud est un descendant d'un noeud donné ou non.
+
{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}
+
Retourne une liste des boites CSS des nœuds relatifs à un autre nœud.
+
{{DOMxRef("Node.getRootNode()")}}
+
Retourne la racine de l'objet contextuel qui comprend éventuellement la "Shadow root" si elle est disponible.
+
{{DOMxRef("Node.hasChildNodes()")}}
+
Retourne un {{jsxref("Boolean")}} (booléen) indiquant si l'élément a des noeuds enfants ou non.
+
{{DOMxRef("Node.insertBefore()")}}
+
Insère un {{domxref("Node")}} avant le nœud de référence en tant qu'enfant du noeud actuel.
+
{{DOMxRef("Node.isDefaultNamespace()")}}
+
Accepte une URI d'espace de nom comme argument et retourne une valeur {{jsxref("Boolean")}} avec true (vrai) si l'espace de nom est celui par défaut du noeud donné ou false (faux) sinon.
+
{{DOMxRef("Node.isEqualNode()")}}
+
Retourne une valeur {{jsxref("Boolean")}} (booléenne) qui indique si oui ou non deux noeuds sont du même type et si tous leurs points de données définis correspondent.
+
{{DOMxRef("Node.isSameNode()")}}
+
Retourne une valeur {{jsxref("Boolean")}} (booléenne) indiquant si les deux noeuds sont ou non identiques (c'est-à-dire qu'ils font référence au même objet).
+
{{DOMxRef("Node.lookupPrefix()")}}
+
Retourne une {{domxref("DOMString")}} (chaîne de caractères) contenant le préfixe d'une URI d'un espace de nom donné, s'il est présent, et null sinon.
+
{{DOMxRef("Node.lookupNamespaceURI()")}}
+
Accepte un préfixe et retourne l'URI de l'espace de noms qui lui est associé sur le nœud donné s'il le trouve, null sinon. Fournir null comme préfixe retournera l'espace de noms par défaut.
+
{{DOMxRef("Node.normalize()")}}
+
Nettoye tous les nœuds de texte en-dessous de cet élément (fusionne adjacent, supprime vide).
+
{{DOMxRef("Node.removeChild()")}}
+
Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud.
+
{{DOMxRef("Node.replaceChild()")}}
+
Remplace un {{domxref("Node")}} enfant du nœud courant par celui donné dans le paramètre.
+
+ +

Méthodes obsolètes

+ +
+
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
+
Permet à un utilisateur d'obtenir un objet {{DOMxRef("DOMUserData")}} à partir du nœud fourni.
+
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
+
Permet à un utilisateur d'obtenir une {{domxref ("DOMUserData")}} (donnée utilisateur) à partir du nœud.
+
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+
Retourne un {{jsxref("Boolean")}} indiquant si l'élément possède des attributs ou non.
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le nœud spécifique.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Permet à un utilisateur d'attacher ou d'enlever  {{domxref("DOMUserData")}} du nœud.
+
+ +

Exemples

+ +

Parcourir tous les nœuds enfants

+ +

La fonction suivante parcourt de manière récursive tous les nœuds enfants d'un noeud et exécute une fonction de rappel sur eux (et sur le nœud parent lui-même).

+ +
function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}
+ +

Syntaxe

+ +
DOMComb(parentNode, callbackFunction);
+ +

Description

+ +

Suit le cycle récursif de tous les nœuds enfants d'un parentNode et le parentNode lui-même, et exécute la fonction callbackFunction (rappel) sur eux comme un objet this.

+ +

Paramètres

+ +
+
parentNode
+
Le nœud parent (Node Object)
+
callbackFunction
+
La fonction de rappel (Function).
+
+ +

Exemples d'utilisation

+ +

L'exemple suivant envoie à la console.log le contenu texte du corps :

+ +
function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};
+ +

Supprimer tous les enfants imbriqués dans un nœud

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

Exemple d'utilisation

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Supprime les propriétés suivantes : attributes, namespaceURI, prefix, et localName.
+ Supprime les méthodes suivantes : isSupported(), hasAttributes(), getFeature(), setUserData(), et getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}Les méthodes insertBefore(), replaceChild(), removeChild(), etappendChild() renvoient un autre type d'erreur (NOT_SUPPORTED_ERR) si elles sont appelées par {{domxref("Document")}}.
+ La méthode normalize()  a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie.
+ Ajout des méthodes suivantes : compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), et getUserData().
+ Ajout des propriétés suivantes : baseURI et textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}La propriété ownerDocumenta été légèrement modifiée pour que  {{domxref("DocumentFragment")}} renvoie également null.
+ Ajout des propriétés suivantes : namespaceURI, prefix, et localName.
+ Ajout des méthodes suivantes : normalize(), isSupported() et hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node")}}

\ No newline at end of file diff --git a/files/fr/web/api/node/insertbefore/index.html b/files/fr/web/api/node/insertbefore/index.html deleted file mode 100644 index 289539552f..0000000000 --- a/files/fr/web/api/node/insertbefore/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: element.insertBefore -slug: Web/API/Node/insertBefore -tags: - - API - - DOM - - Enfant - - Insertion - - Méthodes - - Noeud -translation_of: Web/API/Node/insertBefore ---- -

{{APIRef("DOM")}}

- -

La méthode Node.insertBefore() insère un nœud avant un nœud de référence en tant qu'enfant d'un nœud parent spécifié.

- -

Si le nœud donné existe déjà dans le document, insertBefore() le déplace de sa position actuelle vers la nouvelle position. (C'est-à-dire qu'il sera automatiquement retiré de son parent existant avant d'être ajouté au nouveau parent spécifié).

- -

Cela signifie qu'un nœud ne peut pas se trouver simultanément à deux endroits du document.

- -

Syntaxe

- -
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
-
- -
-
insertedNode
-
Le nœud en cours d'insertion (le même que newNode).
-
parentNode
-
Le parent du nœud nouvellement inséré.
-
newNode
-
Le nœud à insérer.
-
referenceNode
-
Le nœud avant lequel newNode est inséré. Si c'est null, alors newNode est inséré à la fin des nœuds enfants de parentNode.
-
- -
-

Note : referenceNode n'est pas un paramètre facultatif -- vous devez explicitement transmettre un Node ou null. Ne pas le fournir ou transmettre des valeurs invalides provoque des comportements différents selon les différentes versions des navigateurs.

-
- -

Valeur de retour

- -

Renvoie l'enfant ajouté (sauf si newNode est un {{domxref("DocumentFragment")}}, auquel cas le {{domxref("DocumentFragment")}} vide est renvoyé).

- -

Exemples

- -

Exemple 1

- -
<div id="parentElement">
-  <span id="childElement">foo bar</span>
-</div>
-
-<script>
-// Crée le nouveau nœud à insérer
-let newNode = document.createElement("span")
-
-// Obtient une référence au nœud parent
-let parentDiv = document.getElementById("childElement").parentNode
-
-// Commence le cas de test [ 1 ] : Existing childElement (tout fonctionne correctement)
-let sp2 = document.getElementById("childElement")
-parentDiv.insertBefore(newNode, sp2)
-// Fin du cas de test [ 1 ]
-
-// Commence le cas de test [ 2 ] : childElement est de Type undefined
-let sp2 = undefined // Noeud non existant de l'id "childElement".
-parentDiv.insertBefore(newNode, sp2) // Transfert dynamique implicite vers le type Node
-// Fin du cas de test [ 2 ]
-
-// Commence le cas de test [ 3 ] : childElement est de Type "undefined" ( string )
-let sp2 = "undefined" // Noeud non existant de l'id "childElement".
-parentDiv.insertBefore(newNode, sp2) // Génère "Erreur de type : Argument non valide".
-// Fin du cas de test [ 3 ]
-</script>
-
- -

Exemple 2

- -
<div id="parentElement">
-  <span id="childElement">foo bar</span>
-</div>
-
-<script>
-// Crée un nouvel élément simple de type <span>
-let sp1 = document.createElement("span")
-
-// Obtient l'élément de référence
-let sp2 = document.getElementById("childElement")
-// Get the parent element
-let parentDiv = sp2.parentNode
-
-// Insert le nouvel élément dans avant sp2
-parentDiv.insertBefore(sp1, sp2)
-</script>
-
- -

Il n'existe pas de méthode insertAfter. Il peut être émulé avec une combinaison des méthodes insertBefore et nextSibling.

- -

Dans l'exemple ci-dessus, sp1 pourrait être inséré après sp2 en utilisant :

- -
parentDiv.insertBefore(sp1, sp2.nextSibling);
- -

Si sp2 n'a pas d'enfant suivant, c'est qu'il est le dernier enfant. Dans ce cas, sp2.nextSibling renverra null et sp1 sera donc inséré à la fin de la liste des nœuds enfants (c'est-à-dire immédiatement après sp2).

- -

Exemple 3

- -

Insérer un élément avant le premier élément enfant en utilisant la propriété firstChild.

- -
// Obtient l'élément parent
-  let parentElement = document.getElementById('parentElement')
-  // Obtient le premier enfant du parent
-  let theFirstChild = parentElement.firstChild
-  
-  // Crée un nouvel élément
-  let newElement = document.createElement("div")
-  
-  // Insert le nouvel élément avant le premier enfant
-  parentElement.insertBefore(newElement, theFirstChild)
-
- -

Si l'élément n'a pas de premier enfant, alors firstChild est null. L'élément est toujours ajouté au parent après le dernier enfant. Comme l'élément parent n'avait pas de premier enfant, il n'avait pas non plus de dernier enfant. Par conséquent, le nouvel élément est le seul élément, après l'insertion.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}Fixes errors in the insertion algorithm
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}Describes the algorithm in more detail
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}No notable changes
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}No notable changes
- {{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}} - {{Spec2('DOM1')}}Introduced
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.insertBefore")}}

diff --git a/files/fr/web/api/node/insertbefore/index.md b/files/fr/web/api/node/insertbefore/index.md new file mode 100644 index 0000000000..289539552f --- /dev/null +++ b/files/fr/web/api/node/insertbefore/index.md @@ -0,0 +1,166 @@ +--- +title: element.insertBefore +slug: Web/API/Node/insertBefore +tags: + - API + - DOM + - Enfant + - Insertion + - Méthodes + - Noeud +translation_of: Web/API/Node/insertBefore +--- +

{{APIRef("DOM")}}

+ +

La méthode Node.insertBefore() insère un nœud avant un nœud de référence en tant qu'enfant d'un nœud parent spécifié.

+ +

Si le nœud donné existe déjà dans le document, insertBefore() le déplace de sa position actuelle vers la nouvelle position. (C'est-à-dire qu'il sera automatiquement retiré de son parent existant avant d'être ajouté au nouveau parent spécifié).

+ +

Cela signifie qu'un nœud ne peut pas se trouver simultanément à deux endroits du document.

+ +

Syntaxe

+ +
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
+
+ +
+
insertedNode
+
Le nœud en cours d'insertion (le même que newNode).
+
parentNode
+
Le parent du nœud nouvellement inséré.
+
newNode
+
Le nœud à insérer.
+
referenceNode
+
Le nœud avant lequel newNode est inséré. Si c'est null, alors newNode est inséré à la fin des nœuds enfants de parentNode.
+
+ +
+

Note : referenceNode n'est pas un paramètre facultatif -- vous devez explicitement transmettre un Node ou null. Ne pas le fournir ou transmettre des valeurs invalides provoque des comportements différents selon les différentes versions des navigateurs.

+
+ +

Valeur de retour

+ +

Renvoie l'enfant ajouté (sauf si newNode est un {{domxref("DocumentFragment")}}, auquel cas le {{domxref("DocumentFragment")}} vide est renvoyé).

+ +

Exemples

+ +

Exemple 1

+ +
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Crée le nouveau nœud à insérer
+let newNode = document.createElement("span")
+
+// Obtient une référence au nœud parent
+let parentDiv = document.getElementById("childElement").parentNode
+
+// Commence le cas de test [ 1 ] : Existing childElement (tout fonctionne correctement)
+let sp2 = document.getElementById("childElement")
+parentDiv.insertBefore(newNode, sp2)
+// Fin du cas de test [ 1 ]
+
+// Commence le cas de test [ 2 ] : childElement est de Type undefined
+let sp2 = undefined // Noeud non existant de l'id "childElement".
+parentDiv.insertBefore(newNode, sp2) // Transfert dynamique implicite vers le type Node
+// Fin du cas de test [ 2 ]
+
+// Commence le cas de test [ 3 ] : childElement est de Type "undefined" ( string )
+let sp2 = "undefined" // Noeud non existant de l'id "childElement".
+parentDiv.insertBefore(newNode, sp2) // Génère "Erreur de type : Argument non valide".
+// Fin du cas de test [ 3 ]
+</script>
+
+ +

Exemple 2

+ +
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Crée un nouvel élément simple de type <span>
+let sp1 = document.createElement("span")
+
+// Obtient l'élément de référence
+let sp2 = document.getElementById("childElement")
+// Get the parent element
+let parentDiv = sp2.parentNode
+
+// Insert le nouvel élément dans avant sp2
+parentDiv.insertBefore(sp1, sp2)
+</script>
+
+ +

Il n'existe pas de méthode insertAfter. Il peut être émulé avec une combinaison des méthodes insertBefore et nextSibling.

+ +

Dans l'exemple ci-dessus, sp1 pourrait être inséré après sp2 en utilisant :

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+ +

Si sp2 n'a pas d'enfant suivant, c'est qu'il est le dernier enfant. Dans ce cas, sp2.nextSibling renverra null et sp1 sera donc inséré à la fin de la liste des nœuds enfants (c'est-à-dire immédiatement après sp2).

+ +

Exemple 3

+ +

Insérer un élément avant le premier élément enfant en utilisant la propriété firstChild.

+ +
// Obtient l'élément parent
+  let parentElement = document.getElementById('parentElement')
+  // Obtient le premier enfant du parent
+  let theFirstChild = parentElement.firstChild
+  
+  // Crée un nouvel élément
+  let newElement = document.createElement("div")
+  
+  // Insert le nouvel élément avant le premier enfant
+  parentElement.insertBefore(newElement, theFirstChild)
+
+ +

Si l'élément n'a pas de premier enfant, alors firstChild est null. L'élément est toujours ajouté au parent après le dernier enfant. Comme l'élément parent n'avait pas de premier enfant, il n'avait pas non plus de dernier enfant. Par conséquent, le nouvel élément est le seul élément, après l'insertion.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}Fixes errors in the insertion algorithm
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}Describes the algorithm in more detail
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}No notable changes
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}No notable changes
+ {{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}} + {{Spec2('DOM1')}}Introduced
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.insertBefore")}}

diff --git a/files/fr/web/api/node/isconnected/index.html b/files/fr/web/api/node/isconnected/index.html deleted file mode 100644 index 730afa1beb..0000000000 --- a/files/fr/web/api/node/isconnected/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Node.isConnected -slug: Web/API/Node/isConnected -tags: - - API - - DOM - - Noeuds - - Propriétés -translation_of: Web/API/Node/isConnected ---- -

 

- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule isConnected de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal  ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow.

- -

Syntaxe

- -
var isItConnected = nodeObjectInstance.isConnected
- -

Renvoie la valeur

- -

Un {{domxref("Boolean")}} (booléen) — true (vrai) si le noeud est connecté à son objet contextuel pertinent et false (faux) sinon.

- -

Exemples

- -

Un exemple DOM standard :

- -
let test = document.createElement('p');
-console.log(test.isConnected); // renvoie false (faux)
-document.body.appendChild(test);
-console.log(test.isConnected); // renvoie true (vrai)
-
- -

Un exemple DOM shadow :

- -
// Crée une racine shadow
-var shadow = this.attachShadow({mode: 'open'});
-
-// Crée du CSS à appliquer au dom shadow
-var style = document.createElement('style');
-console.log(style.isConnected); // renvoie false (faux)
-
-style.textContent = '.wrapper {' +
-                       'position: relative;' +
-                    '}' +
-
-                     '.info {' +
-                        'font-size: 0.8rem;' +
-                        'width: 200px;' +
-                        'display: inline-block;' +
-                        'border: 1px solid black;' +
-                        'padding: 10px;' +
-                        'background: white;' +
-                        'border-radius: 10px;' +
-                        'opacity: 0;' +
-                        'transition: 0.6s all;' +
-                        'position: absolute;' +
-                        'bottom: 20px;' +
-                        'left: 10px;' +
-                        'z-index: 3;' +
-                      '}' +
-
-// attache l'élément de style créé au dom shadow
-
-shadow.appendChild(style);
-console.log(style.isConnected); // renvoie true (vrai)
- -

 

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
-
- - -

{{Compat("api.Node.isConnected")}}

-
-
diff --git a/files/fr/web/api/node/isconnected/index.md b/files/fr/web/api/node/isconnected/index.md new file mode 100644 index 0000000000..730afa1beb --- /dev/null +++ b/files/fr/web/api/node/isconnected/index.md @@ -0,0 +1,96 @@ +--- +title: Node.isConnected +slug: Web/API/Node/isConnected +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/isConnected +--- +

 

+ +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule isConnected de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal  ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow.

+ +

Syntaxe

+ +
var isItConnected = nodeObjectInstance.isConnected
+ +

Renvoie la valeur

+ +

Un {{domxref("Boolean")}} (booléen) — true (vrai) si le noeud est connecté à son objet contextuel pertinent et false (faux) sinon.

+ +

Exemples

+ +

Un exemple DOM standard :

+ +
let test = document.createElement('p');
+console.log(test.isConnected); // renvoie false (faux)
+document.body.appendChild(test);
+console.log(test.isConnected); // renvoie true (vrai)
+
+ +

Un exemple DOM shadow :

+ +
// Crée une racine shadow
+var shadow = this.attachShadow({mode: 'open'});
+
+// Crée du CSS à appliquer au dom shadow
+var style = document.createElement('style');
+console.log(style.isConnected); // renvoie false (faux)
+
+style.textContent = '.wrapper {' +
+                       'position: relative;' +
+                    '}' +
+
+                     '.info {' +
+                        'font-size: 0.8rem;' +
+                        'width: 200px;' +
+                        'display: inline-block;' +
+                        'border: 1px solid black;' +
+                        'padding: 10px;' +
+                        'background: white;' +
+                        'border-radius: 10px;' +
+                        'opacity: 0;' +
+                        'transition: 0.6s all;' +
+                        'position: absolute;' +
+                        'bottom: 20px;' +
+                        'left: 10px;' +
+                        'z-index: 3;' +
+                      '}' +
+
+// attache l'élément de style créé au dom shadow
+
+shadow.appendChild(style);
+console.log(style.isConnected); // renvoie true (vrai)
+ +

 

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+
+ + +

{{Compat("api.Node.isConnected")}}

+
+
diff --git a/files/fr/web/api/node/isdefaultnamespace/index.html b/files/fr/web/api/node/isdefaultnamespace/index.html deleted file mode 100644 index 1ea4b789bf..0000000000 --- a/files/fr/web/api/node/isdefaultnamespace/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Node.isDefaultNamespace() -slug: Web/API/Node/isDefaultNamespace -tags: - - API - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/Node/isDefaultNamespace ---- -
-
{{APIRef("DOM")}}
-
- -

La méthode Node.isDefaultNamespace() accepte un URI d'espace de nom comme argument et renvoie un {{jsxref("Boolean")}} (booléen) avec une valeur true (vrai) si l'espace de nom est celui par défaut du noeud donné ou false (faux) sinon.

- -

Syntaxe

- -
result = node.isDefaultNamespace(namespaceURI)
-
- -
    -
  • result détient la valeur de retour true (vrai) ou false (faux).
    • -
  • namespaceURI est une string (chaîne de caractères) représentant l'espace de nom par rapport auquel l'élément sera vérifié.
    • -
- -

Exemple

- -
var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
-
-alert(el.isDefaultNamespace(XULNS)); // true
- -

Spécification

- - diff --git a/files/fr/web/api/node/isdefaultnamespace/index.md b/files/fr/web/api/node/isdefaultnamespace/index.md new file mode 100644 index 0000000000..1ea4b789bf --- /dev/null +++ b/files/fr/web/api/node/isdefaultnamespace/index.md @@ -0,0 +1,39 @@ +--- +title: Node.isDefaultNamespace() +slug: Web/API/Node/isDefaultNamespace +tags: + - API + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/isDefaultNamespace +--- +
+
{{APIRef("DOM")}}
+
+ +

La méthode Node.isDefaultNamespace() accepte un URI d'espace de nom comme argument et renvoie un {{jsxref("Boolean")}} (booléen) avec une valeur true (vrai) si l'espace de nom est celui par défaut du noeud donné ou false (faux) sinon.

+ +

Syntaxe

+ +
result = node.isDefaultNamespace(namespaceURI)
+
+ +
    +
  • result détient la valeur de retour true (vrai) ou false (faux).
    • +
  • namespaceURI est une string (chaîne de caractères) représentant l'espace de nom par rapport auquel l'élément sera vérifié.
    • +
+ +

Exemple

+ +
var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
+
+alert(el.isDefaultNamespace(XULNS)); // true
+ +

Spécification

+ + diff --git a/files/fr/web/api/node/isequalnode/index.html b/files/fr/web/api/node/isequalnode/index.html deleted file mode 100644 index 79bcb16b17..0000000000 --- a/files/fr/web/api/node/isequalnode/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Node.isEqualNode() -slug: Web/API/Node/isEqualNode -tags: - - API - - Comparaison - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/Node/isEqualNode ---- -
-
{{APIRef("DOM")}}
-
- -

La méthode Node.isEqualNode() permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds.

- -

Syntaxe

- -
var isEqualNode = node.isEqualNode(otherNode);
-
- -
    -
  • otherNode : Le noeud à comparer.
    • -
- -

Exemple

- -

Dans cet exemple, nous créons trois blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Alors, nous éxécutons du JavaScript pour comparer les noeuds en utilisant isEqualNode() et sortons les résultats.

- -

HTML

- -
<div>This is the first element.</div>
-<div>This is the second element.</div>
-<div>This is the first element.</div>
-
-<p id="output"></p>
- -

CSS

- -
#output {
-  width: 440px;
-  border: 2px solid black;
-  border-radius: 5px;
-  padding: 10px;
-  margin-top: 20px;
-  display: block;
-}
- -

JavaScript

- -
let output = document.getElementById("output");
-let divList  = document.getElementsByTagName("div");
-
-output.innerHTML += "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>";
-output.innerHTML += "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>";
-output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";
- -

Résultats

- -

{{ EmbedLiveSample('Example', 480) }}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.isEqualNode")}}

- -

Voir aussi

- -
    -
  • {{domxref("Node.isSameNode()")}}
    • -
diff --git a/files/fr/web/api/node/isequalnode/index.md b/files/fr/web/api/node/isequalnode/index.md new file mode 100644 index 0000000000..79bcb16b17 --- /dev/null +++ b/files/fr/web/api/node/isequalnode/index.md @@ -0,0 +1,90 @@ +--- +title: Node.isEqualNode() +slug: Web/API/Node/isEqualNode +tags: + - API + - Comparaison + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/isEqualNode +--- +
+
{{APIRef("DOM")}}
+
+ +

La méthode Node.isEqualNode() permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds.

+ +

Syntaxe

+ +
var isEqualNode = node.isEqualNode(otherNode);
+
+ +
    +
  • otherNode : Le noeud à comparer.
    • +
+ +

Exemple

+ +

Dans cet exemple, nous créons trois blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Alors, nous éxécutons du JavaScript pour comparer les noeuds en utilisant isEqualNode() et sortons les résultats.

+ +

HTML

+ +
<div>This is the first element.</div>
+<div>This is the second element.</div>
+<div>This is the first element.</div>
+
+<p id="output"></p>
+ +

CSS

+ +
#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}
+ +

JavaScript

+ +
let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>";
+output.innerHTML += "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>";
+output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";
+ +

Résultats

+ +

{{ EmbedLiveSample('Example', 480) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.isEqualNode")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("Node.isSameNode()")}}
    • +
diff --git a/files/fr/web/api/node/issamenode/index.html b/files/fr/web/api/node/issamenode/index.html deleted file mode 100644 index cab5401b56..0000000000 --- a/files/fr/web/api/node/issamenode/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Node.isSameNode() -slug: Web/API/Node/isSameNode -tags: - - API - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/Node/isSameNode ---- -
{{APIRef("DOM")}}
- -

La méthode Node.isSameNode() teste si deux noeuds sont identiques, c'est-à-dire, s'ils font référence au même objet.

- -

Syntaxe

- -
var isSameNode = node.isSameNode(other);
-
- -

Paramètres

- -
    -
  • other Le {{domxref("Node")}} à tester.
    • -
- -

Exemple

- -

Dans cet exemple, nous créons 3 blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Ensuite, nous exécutons du JavaScript pour comparer les nœuds en utilisant isSameNode() et sortons les résultats.

- -

HTML

- -
<div>This is the first element.</div>
-<div>This is the second element.</div>
-<div>This is the first element.</div>
-
-<p id="output"></p>
- - - -

JavaScript

- -
let output = document.getElementById("output");
-let divList  = document.getElementsByTagName("div");
-
-output.innerHTML += "div 0 same as div 0: " + divList[0].isSameNode(divList[0]) + "<br/>";
-output.innerHTML += "div 0 same as div 1: " + divList[0].isSameNode(divList[1]) + "<br/>";
-output.innerHTML += "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) + "<br/>";
-
- -

Résultats

- -

{{ EmbedLiveSample('Example', 480) }}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Pas de changement (a été longtemps retiré).
{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}{{Spec2('DOM3 Core')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.isSameNode")}}

- -

Voir aussi

- -
    -
  • {{domxref("Node.isEqualNode()")}}
    • -
diff --git a/files/fr/web/api/node/issamenode/index.md b/files/fr/web/api/node/issamenode/index.md new file mode 100644 index 0000000000..cab5401b56 --- /dev/null +++ b/files/fr/web/api/node/issamenode/index.md @@ -0,0 +1,93 @@ +--- +title: Node.isSameNode() +slug: Web/API/Node/isSameNode +tags: + - API + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/isSameNode +--- +
{{APIRef("DOM")}}
+ +

La méthode Node.isSameNode() teste si deux noeuds sont identiques, c'est-à-dire, s'ils font référence au même objet.

+ +

Syntaxe

+ +
var isSameNode = node.isSameNode(other);
+
+ +

Paramètres

+ +
    +
  • other Le {{domxref("Node")}} à tester.
    • +
+ +

Exemple

+ +

Dans cet exemple, nous créons 3 blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Ensuite, nous exécutons du JavaScript pour comparer les nœuds en utilisant isSameNode() et sortons les résultats.

+ +

HTML

+ +
<div>This is the first element.</div>
+<div>This is the second element.</div>
+<div>This is the first element.</div>
+
+<p id="output"></p>
+ + + +

JavaScript

+ +
let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 same as div 0: " + divList[0].isSameNode(divList[0]) + "<br/>";
+output.innerHTML += "div 0 same as div 1: " + divList[0].isSameNode(divList[1]) + "<br/>";
+output.innerHTML += "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) + "<br/>";
+
+ +

Résultats

+ +

{{ EmbedLiveSample('Example', 480) }}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Pas de changement (a été longtemps retiré).
{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}{{Spec2('DOM3 Core')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.isSameNode")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("Node.isEqualNode()")}}
    • +
diff --git a/files/fr/web/api/node/issupported/index.html b/files/fr/web/api/node/issupported/index.html deleted file mode 100644 index 3c241d4656..0000000000 --- a/files/fr/web/api/node/issupported/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: element.isSupported -slug: Web/API/Node/isSupported -tags: - - API - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/Node/isSupported ---- -

{{APIRef("DOM")}}{{obsolete_header}}

- -

La méthode Node.isSupported() renvoie une marque  {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique.

- -

Syntaxe

- -
boolValue = element.isSupported(feature, version)
- -

Paramètres

- -
-
feature
-
est une  {{domxref("DOMString")}} (chaîne de caractères) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode hasFeature de DOMImplementation. Les valeurs possibles définies dans la spécification DOM core sont listées dans la section Conformance de DOM Level 2.
-
version
-
est une  {{domxref("DOMString")}} (chaîne de caractères) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « 2.0 ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur true.
-
- -

Exemple

- -
<div id="doc">
-</div>
-
-<script>
- // Obtenir un élément et vérifier pour voir s'il est pris en charge par les modules HTML DOM2.
- var main = document.getElementById('doc');
- var output = main.isSupported('HTML', '2.0');
-</script>
- -

Spécifications

- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Supprimée de la spécification
{{SpecName('DOM3 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}{{Spec2('DOM3 Core')}}Pas de changement de {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}{{Spec2('DOM2 Core')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.isSupported")}}

- -

Voir aussi

- -
    -
  • L'interface {{domxref("Node")}} à laquelle elle appartient.
    • -
diff --git a/files/fr/web/api/node/issupported/index.md b/files/fr/web/api/node/issupported/index.md new file mode 100644 index 0000000000..3c241d4656 --- /dev/null +++ b/files/fr/web/api/node/issupported/index.md @@ -0,0 +1,78 @@ +--- +title: element.isSupported +slug: Web/API/Node/isSupported +tags: + - API + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/isSupported +--- +

{{APIRef("DOM")}}{{obsolete_header}}

+ +

La méthode Node.isSupported() renvoie une marque  {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique.

+ +

Syntaxe

+ +
boolValue = element.isSupported(feature, version)
+ +

Paramètres

+ +
+
feature
+
est une  {{domxref("DOMString")}} (chaîne de caractères) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode hasFeature de DOMImplementation. Les valeurs possibles définies dans la spécification DOM core sont listées dans la section Conformance de DOM Level 2.
+
version
+
est une  {{domxref("DOMString")}} (chaîne de caractères) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « 2.0 ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur true.
+
+ +

Exemple

+ +
<div id="doc">
+</div>
+
+<script>
+ // Obtenir un élément et vérifier pour voir s'il est pris en charge par les modules HTML DOM2.
+ var main = document.getElementById('doc');
+ var output = main.isSupported('HTML', '2.0');
+</script>
+ +

Spécifications

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Supprimée de la spécification
{{SpecName('DOM3 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}{{Spec2('DOM3 Core')}}Pas de changement de {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}{{Spec2('DOM2 Core')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.isSupported")}}

+ +

Voir aussi

+ +
    +
  • L'interface {{domxref("Node")}} à laquelle elle appartient.
    • +
diff --git a/files/fr/web/api/node/lastchild/index.html b/files/fr/web/api/node/lastchild/index.html deleted file mode 100644 index 37963f8473..0000000000 --- a/files/fr/web/api/node/lastchild/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: element.lastChild -slug: Web/API/Node/lastChild -tags: - - API - - DOM - - Enfant - - Noeuds - - Propriétés -translation_of: Web/API/Node/lastChild ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule Node.lastChild renvoie le dernier enfant du noeud. Si son parent est un élément, l'enfant est généralement un noeud élément, texte ou commentaire. Elle renvoie null s'il n'y a aucun enfant.

- -

Syntaxe

- -
var childNode = node.lastChild;
-
- -

 

- -

Exemple

- -

 

- -
var tr = document.getElementById("row1");
-var corner_td = tr.lastChild;
- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}{{Spec2('DOM WHATWG')}}Pas de changement
{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM3 Core')}}Pas de changement
{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM2 Core')}}Pas de changement
{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.lastChild")}}

\ No newline at end of file diff --git a/files/fr/web/api/node/lastchild/index.md b/files/fr/web/api/node/lastchild/index.md new file mode 100644 index 0000000000..37963f8473 --- /dev/null +++ b/files/fr/web/api/node/lastchild/index.md @@ -0,0 +1,66 @@ +--- +title: element.lastChild +slug: Web/API/Node/lastChild +tags: + - API + - DOM + - Enfant + - Noeuds + - Propriétés +translation_of: Web/API/Node/lastChild +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule Node.lastChild renvoie le dernier enfant du noeud. Si son parent est un élément, l'enfant est généralement un noeud élément, texte ou commentaire. Elle renvoie null s'il n'y a aucun enfant.

+ +

Syntaxe

+ +
var childNode = node.lastChild;
+
+ +

 

+ +

Exemple

+ +

 

+ +
var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}{{Spec2('DOM WHATWG')}}Pas de changement
{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM3 Core')}}Pas de changement
{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM2 Core')}}Pas de changement
{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.lastChild")}}

\ No newline at end of file diff --git a/files/fr/web/api/node/lookupnamespaceuri/index.html b/files/fr/web/api/node/lookupnamespaceuri/index.html deleted file mode 100644 index 1c88e6b8a2..0000000000 --- a/files/fr/web/api/node/lookupnamespaceuri/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Node.lookupNamespaceURI() -slug: Web/API/Node/lookupNamespaceURI -tags: - - API - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/Node/lookupNamespaceURI ---- -
{{APIRef("DOM")}}
- -

La méthode Node.lookupNamespaceURI() accepte un préfixe et renvoie l'URI de l'espace de nom associé avec lui sur le noeud donné s'il le trouve (et null sinon). La fourniture de null pour le préfixe renverra l'espace de nom par défaut.

- -

Du fait du bug 312019, cette méthode ne fonctionne pas avec les espaces de noms attribués dynamiquement (c'est-à-dire ceux qui sont définis par Node.prefix).

- -

Voir aussi

- - - -

 

diff --git a/files/fr/web/api/node/lookupnamespaceuri/index.md b/files/fr/web/api/node/lookupnamespaceuri/index.md new file mode 100644 index 0000000000..1c88e6b8a2 --- /dev/null +++ b/files/fr/web/api/node/lookupnamespaceuri/index.md @@ -0,0 +1,23 @@ +--- +title: Node.lookupNamespaceURI() +slug: Web/API/Node/lookupNamespaceURI +tags: + - API + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/lookupNamespaceURI +--- +
{{APIRef("DOM")}}
+ +

La méthode Node.lookupNamespaceURI() accepte un préfixe et renvoie l'URI de l'espace de nom associé avec lui sur le noeud donné s'il le trouve (et null sinon). La fourniture de null pour le préfixe renverra l'espace de nom par défaut.

+ +

Du fait du bug 312019, cette méthode ne fonctionne pas avec les espaces de noms attribués dynamiquement (c'est-à-dire ceux qui sont définis par Node.prefix).

+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/api/node/lookupprefix/index.html b/files/fr/web/api/node/lookupprefix/index.html deleted file mode 100644 index 17cc48c622..0000000000 --- a/files/fr/web/api/node/lookupprefix/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Node.lookupPrefix() -slug: Web/API/Node/lookupPrefix -tags: - - API - - DOM - - Méthodes - - Noeuds - - Préfixes - - URI -translation_of: Web/API/Node/lookupPrefix ---- -
{{APIRef("DOM")}}
- -

La méthode Node.lookupPrefix() renvoie une {{domxref("DOMString")}} (chaîne de caractères) contenant le préfixe d'un URI d'un espace de nom donné, s'il est présent, et null sinon. Quand plusieurs préfixes sont possibles, le résultat dépend de l'implémentation.

- -

En raison du bug 312019, cette méthode ne fonctionne plus avec les espaces de nom définis dynamiquement, c'est-à-dire ceux qui sont fixés avec la propriété {{domxref("Node.prefix")}}.

- -

Voir aussi

- - diff --git a/files/fr/web/api/node/lookupprefix/index.md b/files/fr/web/api/node/lookupprefix/index.md new file mode 100644 index 0000000000..17cc48c622 --- /dev/null +++ b/files/fr/web/api/node/lookupprefix/index.md @@ -0,0 +1,23 @@ +--- +title: Node.lookupPrefix() +slug: Web/API/Node/lookupPrefix +tags: + - API + - DOM + - Méthodes + - Noeuds + - Préfixes + - URI +translation_of: Web/API/Node/lookupPrefix +--- +
{{APIRef("DOM")}}
+ +

La méthode Node.lookupPrefix() renvoie une {{domxref("DOMString")}} (chaîne de caractères) contenant le préfixe d'un URI d'un espace de nom donné, s'il est présent, et null sinon. Quand plusieurs préfixes sont possibles, le résultat dépend de l'implémentation.

+ +

En raison du bug 312019, cette méthode ne fonctionne plus avec les espaces de nom définis dynamiquement, c'est-à-dire ceux qui sont fixés avec la propriété {{domxref("Node.prefix")}}.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/node/nextsibling/index.html b/files/fr/web/api/node/nextsibling/index.html deleted file mode 100644 index 2a971a3067..0000000000 --- a/files/fr/web/api/node/nextsibling/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: element.nextSibling -slug: Web/API/Node/nextSibling -tags: - - API - - DOM - - Noeuds - - Propriétés -translation_of: Web/API/Node/nextSibling ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule  Node.nextSibling renvoie le nœud (node) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou null si le nœud spécifié est le dernier dans cette liste.

- -

Syntaxe

- -
nextNode = node.nextSibling
-
- -

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.

- -

{{domxref("Element.nextElementSibling")}} peut être utilisé pour obtenir l'élément suivant en ignorant les noeuds d'espace.

- -

Exemple

- -
<div id="div-01">Here is div-01</div>
-<div id="div-02">Here is div-02</div>
-
-<script type="text/javascript">
-var el = document.getElementById('div-01').nextSibling,
-    i = 1;
-
-console.log('Siblings of div-01:');
-
-while (el) {
-  console.log(i + '. ' + el.nodeName);
-  el = el.nextSibling;
-  i++;
-}
-
-</script>
-
-/**************************************************
-  Ce qui suit est écrit sur la console pendant le chargement:
-
-     Siblings of div-01
-
-      1. #text
-      2. DIV
-      3. #text
-      4. SCRIPT
-
-**************************************************/
- -

Dans cet exemple, on peut voir que des nœuds #text sont insérés dans le DOM là où des espaces se trouvent dans le code source entre les balises (c'est-à-dire après la balise de fermeture d'un élément et avant la balise d'ouverture du suivant). Aucun espace n'est créé entre les éléments insérés par l'instruction document.write .

- -

L'inclusion possible de nœuds textes dans le DOM doit être prise en compte pour le parcours du DOM à l'aide de nextSibling. Consultez les ressources dans la section Notes .

- -

Spécification

- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.nextSibling")}}

- -

Voir aussi

- -

{{domxref("Element.nextElementSibling")}}

diff --git a/files/fr/web/api/node/nextsibling/index.md b/files/fr/web/api/node/nextsibling/index.md new file mode 100644 index 0000000000..2a971a3067 --- /dev/null +++ b/files/fr/web/api/node/nextsibling/index.md @@ -0,0 +1,83 @@ +--- +title: element.nextSibling +slug: Web/API/Node/nextSibling +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/nextSibling +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule  Node.nextSibling renvoie le nœud (node) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou null si le nœud spécifié est le dernier dans cette liste.

+ +

Syntaxe

+ +
nextNode = node.nextSibling
+
+ +

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.

+ +

{{domxref("Element.nextElementSibling")}} peut être utilisé pour obtenir l'élément suivant en ignorant les noeuds d'espace.

+ +

Exemple

+ +
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+var el = document.getElementById('div-01').nextSibling,
+    i = 1;
+
+console.log('Siblings of div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+</script>
+
+/**************************************************
+  Ce qui suit est écrit sur la console pendant le chargement:
+
+     Siblings of div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+ +

Dans cet exemple, on peut voir que des nœuds #text sont insérés dans le DOM là où des espaces se trouvent dans le code source entre les balises (c'est-à-dire après la balise de fermeture d'un élément et avant la balise d'ouverture du suivant). Aucun espace n'est créé entre les éléments insérés par l'instruction document.write .

+ +

L'inclusion possible de nœuds textes dans le DOM doit être prise en compte pour le parcours du DOM à l'aide de nextSibling. Consultez les ressources dans la section Notes .

+ +

Spécification

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.nextSibling")}}

+ +

Voir aussi

+ +

{{domxref("Element.nextElementSibling")}}

diff --git a/files/fr/web/api/node/nodename/index.html b/files/fr/web/api/node/nodename/index.html deleted file mode 100644 index 11c471fff1..0000000000 --- a/files/fr/web/api/node/nodename/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: element.nodeName -slug: Web/API/Node/nodeName -tags: - - API - - DOM - - Noeuds - - Nom - - Propriété -translation_of: Web/API/Node/nodeName ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule Node.nodeName renvoie le nom du nœud courant dans une chaîne.

- -

Les valeurs retournées pour les différents types de noeuds sont :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
InterfaceValeur nodeName
{{domxref("Attr")}}La valeur de {{domxref("Attr.name")}}
{{domxref("CDATASection")}}"#cdata-section"
{{domxref("Comment")}}"#comment"
{{domxref("Document")}}"#document"
{{domxref("DocumentFragment")}}"#document-fragment"
{{domxref("DocumentType")}}La valeur de {{domxref("DocumentType.name")}}
{{domxref("Element")}}La valeur de {{domxref("Element.tagName")}}
{{domxref("Entity")}}Le nom de l'entité
{{domxref("EntityReference")}}Le nom de la référence d'entité
{{domxref("Notation")}}Le nom de notation
{{domxref("ProcessingInstruction")}}La valeur de {{domxref("ProcessingInstruction.target")}}
{{domxref("Text")}}"#text"
- -

Syntaxe

- -
var str = node.nodeName;
-
- -

Exemple

- -

Avec le balisage suivant :

- -
<div id="d1">hello world</div>
-<input type="text" id="t"/>
-
- -

et le script suivant :

- -
var div1 = document.getElementById("d1");
-var text_field = document.getElementById("t");
-text_field.value = div1.nodeName;
-
- -

En XHTML (ou tout autre format XML), la valeur de text_field sera « div ». Cependant, en HTML, la valeur de text_field sera « DIV », parce que nodeName et tagName renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus détails sur la sensibilité à la casse de nodeName dans différents navigateurs (en).

- -

Notez que la propriété tagName aurait pu être uilisée à la place, puisque nodeName a la même valeur que tagName pour un élément. Souvenez vous cependant que nodeName renverra #text pour les nœuds texte tandis que tagName renverra undefined.

- -

Spécification

- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.nodeName")}}

diff --git a/files/fr/web/api/node/nodename/index.md b/files/fr/web/api/node/nodename/index.md new file mode 100644 index 0000000000..11c471fff1 --- /dev/null +++ b/files/fr/web/api/node/nodename/index.md @@ -0,0 +1,111 @@ +--- +title: element.nodeName +slug: Web/API/Node/nodeName +tags: + - API + - DOM + - Noeuds + - Nom + - Propriété +translation_of: Web/API/Node/nodeName +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule Node.nodeName renvoie le nom du nœud courant dans une chaîne.

+ +

Les valeurs retournées pour les différents types de noeuds sont :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterfaceValeur nodeName
{{domxref("Attr")}}La valeur de {{domxref("Attr.name")}}
{{domxref("CDATASection")}}"#cdata-section"
{{domxref("Comment")}}"#comment"
{{domxref("Document")}}"#document"
{{domxref("DocumentFragment")}}"#document-fragment"
{{domxref("DocumentType")}}La valeur de {{domxref("DocumentType.name")}}
{{domxref("Element")}}La valeur de {{domxref("Element.tagName")}}
{{domxref("Entity")}}Le nom de l'entité
{{domxref("EntityReference")}}Le nom de la référence d'entité
{{domxref("Notation")}}Le nom de notation
{{domxref("ProcessingInstruction")}}La valeur de {{domxref("ProcessingInstruction.target")}}
{{domxref("Text")}}"#text"
+ +

Syntaxe

+ +
var str = node.nodeName;
+
+ +

Exemple

+ +

Avec le balisage suivant :

+ +
<div id="d1">hello world</div>
+<input type="text" id="t"/>
+
+ +

et le script suivant :

+ +
var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+text_field.value = div1.nodeName;
+
+ +

En XHTML (ou tout autre format XML), la valeur de text_field sera « div ». Cependant, en HTML, la valeur de text_field sera « DIV », parce que nodeName et tagName renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus détails sur la sensibilité à la casse de nodeName dans différents navigateurs (en).

+ +

Notez que la propriété tagName aurait pu être uilisée à la place, puisque nodeName a la même valeur que tagName pour un élément. Souvenez vous cependant que nodeName renverra #text pour les nœuds texte tandis que tagName renverra undefined.

+ +

Spécification

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.nodeName")}}

diff --git a/files/fr/web/api/node/nodetype/index.html b/files/fr/web/api/node/nodetype/index.html deleted file mode 100644 index 2f6cd30d79..0000000000 --- a/files/fr/web/api/node/nodetype/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: element.nodeType -slug: Web/API/Node/nodeType -tags: - - API - - DOM - - Noeuds - - Propriétés - - Types -translation_of: Web/API/Node/nodeType ---- -
{{APIRef("DOM")}}
- -
La propriété en lecture seule Node.nodeType représente le type du noeud.
- -

Description

- -

La propriété nodeType peut être utilisée pour distinguer les uns des autres les différents genres de noeuds tels que {{domxref("Element")}}, {{domxref("Text")}} et {{domxref("Comment")}} .

- -

Syntaxe

- -
Type = node .nodeType
-
- -

Renvoie un entier (integer) qui spécifie le type du noeud ; les valeurs possibles sont listées dans {{anch("Constantes")}}.

- -

Constantes

- -

Constantes de type nœud

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValeurDescription
Node.ELEMENT_NODE1Un noeud {{domxref("Element")}}  tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}.
Node.TEXT_NODE3Le {{domxref("Text")}} actuel de l'{{domxref("Element")}} ou {{domxref("Attr")}}.
Node.PROCESSING_INSTRUCTION_NODE7Une {{domxref("ProcessingInstruction")}} d'un document XML tel que la déclaration <?xml-stylesheet ... ?>.
Node.COMMENT_NODE8Un noeud {{domxref("Comment")}}.
Node.DOCUMENT_NODE9Un noeud {{domxref("Document")}}.
Node.DOCUMENT_TYPE_NODE10Un noeud {{domxref("DocumentType")}} c'est-à-dire <!DOCTYPE html> pour des documents HTML5.
Node.DOCUMENT_FRAGMENT_NODE11Un noeud {{domxref("DocumentFragment")}}.
- -

Constantes de type noeud dépréciées {{deprecated_inline()}}

- -

Les constantes suivantes ont été dépréciées et ne doivent plus être utilisées.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValeurDescription
Node.ATTRIBUTE_NODE2Un {{domxref("Attr", "Attribut")}} d'un {{domxref("Element")}}. Les attributs d'élément n'implémentent plus l'interface {{domxref("Node")}} dans la spécification {{SpecName("DOM4")}}.
Node.CDATA_SECTION_NODE4Une {{domxref("CDATASection")}}. Supprimée dans la spécification {{SpecName("DOM4")}}.
Node.ENTITY_REFERENCE_NODE5Un noeud référence d'entité XML. Supprimé dans la spécification {{SpecName("DOM4")}}.
Node.ENTITY_NODE6Un noeud <!ENTITY ...> XML. Supprimé dans la spécificatioin {{SpecName("DOM4")}}.
Node.NOTATION_NODE12Un noeud <!NOTATION ...> XML. Supprimé dans la spécification {{SpecName("DOM4")}}.
- -

Exemples

- -

Différents types de noeuds

- -
document.nodeType === Node.DOCUMENT_NODE; // true (vrai)
-document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true  (vrai)
-
-var fragment = document.createDocumentFragment();
-fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true  (vrai)
-
-var p = document.createElement("p");
-p.textContent = "Once upon a time...";
-
-p.nodeType === Node.ELEMENT_NODE; // true  (vrai)
-p.firstChild.nodeType === Node.TEXT_NODE; // true  (vrai)
-
- -

Commentaires

- -

Cet exemple vérifie si le premier noeud dans l'élément du document est un noeud commentaire et si ce n'est pas le cas, affiche un message.

- -
var node = document.documentElement.firstChild;
-if (node.nodeType != Node.COMMENT_NODE)
-  console.log("You should comment your code well!");
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}{{Spec2('DOM WHATWG')}}Sont dépréciés les types ATTRIBUTE_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE et NOTATION_NODE.
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}{{Spec2('DOM3 Core')}}Pas de changement.
{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM2 Core')}}Pas de changement.
{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.nodeType")}}

diff --git a/files/fr/web/api/node/nodetype/index.md b/files/fr/web/api/node/nodetype/index.md new file mode 100644 index 0000000000..2f6cd30d79 --- /dev/null +++ b/files/fr/web/api/node/nodetype/index.md @@ -0,0 +1,180 @@ +--- +title: element.nodeType +slug: Web/API/Node/nodeType +tags: + - API + - DOM + - Noeuds + - Propriétés + - Types +translation_of: Web/API/Node/nodeType +--- +
{{APIRef("DOM")}}
+ +
La propriété en lecture seule Node.nodeType représente le type du noeud.
+ +

Description

+ +

La propriété nodeType peut être utilisée pour distinguer les uns des autres les différents genres de noeuds tels que {{domxref("Element")}}, {{domxref("Text")}} et {{domxref("Comment")}} .

+ +

Syntaxe

+ +
Type = node .nodeType
+
+ +

Renvoie un entier (integer) qui spécifie le type du noeud ; les valeurs possibles sont listées dans {{anch("Constantes")}}.

+ +

Constantes

+ +

Constantes de type nœud

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeurDescription
Node.ELEMENT_NODE1Un noeud {{domxref("Element")}}  tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}.
Node.TEXT_NODE3Le {{domxref("Text")}} actuel de l'{{domxref("Element")}} ou {{domxref("Attr")}}.
Node.PROCESSING_INSTRUCTION_NODE7Une {{domxref("ProcessingInstruction")}} d'un document XML tel que la déclaration <?xml-stylesheet ... ?>.
Node.COMMENT_NODE8Un noeud {{domxref("Comment")}}.
Node.DOCUMENT_NODE9Un noeud {{domxref("Document")}}.
Node.DOCUMENT_TYPE_NODE10Un noeud {{domxref("DocumentType")}} c'est-à-dire <!DOCTYPE html> pour des documents HTML5.
Node.DOCUMENT_FRAGMENT_NODE11Un noeud {{domxref("DocumentFragment")}}.
+ +

Constantes de type noeud dépréciées {{deprecated_inline()}}

+ +

Les constantes suivantes ont été dépréciées et ne doivent plus être utilisées.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeurDescription
Node.ATTRIBUTE_NODE2Un {{domxref("Attr", "Attribut")}} d'un {{domxref("Element")}}. Les attributs d'élément n'implémentent plus l'interface {{domxref("Node")}} dans la spécification {{SpecName("DOM4")}}.
Node.CDATA_SECTION_NODE4Une {{domxref("CDATASection")}}. Supprimée dans la spécification {{SpecName("DOM4")}}.
Node.ENTITY_REFERENCE_NODE5Un noeud référence d'entité XML. Supprimé dans la spécification {{SpecName("DOM4")}}.
Node.ENTITY_NODE6Un noeud <!ENTITY ...> XML. Supprimé dans la spécificatioin {{SpecName("DOM4")}}.
Node.NOTATION_NODE12Un noeud <!NOTATION ...> XML. Supprimé dans la spécification {{SpecName("DOM4")}}.
+ +

Exemples

+ +

Différents types de noeuds

+ +
document.nodeType === Node.DOCUMENT_NODE; // true (vrai)
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true  (vrai)
+
+var fragment = document.createDocumentFragment();
+fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true  (vrai)
+
+var p = document.createElement("p");
+p.textContent = "Once upon a time...";
+
+p.nodeType === Node.ELEMENT_NODE; // true  (vrai)
+p.firstChild.nodeType === Node.TEXT_NODE; // true  (vrai)
+
+ +

Commentaires

+ +

Cet exemple vérifie si le premier noeud dans l'élément du document est un noeud commentaire et si ce n'est pas le cas, affiche un message.

+ +
var node = document.documentElement.firstChild;
+if (node.nodeType != Node.COMMENT_NODE)
+  console.log("You should comment your code well!");
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}{{Spec2('DOM WHATWG')}}Sont dépréciés les types ATTRIBUTE_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE et NOTATION_NODE.
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}{{Spec2('DOM3 Core')}}Pas de changement.
{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM2 Core')}}Pas de changement.
{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.nodeType")}}

diff --git a/files/fr/web/api/node/nodevalue/index.html b/files/fr/web/api/node/nodevalue/index.html deleted file mode 100644 index 9f3fa1f3b3..0000000000 --- a/files/fr/web/api/node/nodevalue/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: element.nodeValue -slug: Web/API/Node/nodeValue -tags: - - API - - DOM - - Noeuds - - Propriétés -translation_of: Web/API/Node/nodeValue ---- -

{{APIRef("DOM")}}

- -

La propriété Node.nodeValue renvoie ou définit la valeur du nœud courant.

- -

Syntaxe

- -
value = node.nodeValue;
-
- -

value (valeur) est une chaîne contenant la valeur du nœud courant, s'il y en a une.

- -

Notes

- -

Pour le document lui-même, nodeValue renvoie null. Pour des nœuds texte, de commentaires et CDATA, nodeValue renvoie le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut.

- -

Le tableau suivant montre les valeurs de retour pour différents types de nœuds :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attrvaleur de l'attribut
CDATASectioncontenu de la section CDATA
Commentcontenu du commentaire
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructiontout le contenu à l'exception de la cible
Textcontenu du nœud texte
- -

Lorsque nodeValue est défini comme étant null, l'assignation n'a aucun effet.

- -

Spécification

- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.nodeValue")}}

diff --git a/files/fr/web/api/node/nodevalue/index.md b/files/fr/web/api/node/nodevalue/index.md new file mode 100644 index 0000000000..9f3fa1f3b3 --- /dev/null +++ b/files/fr/web/api/node/nodevalue/index.md @@ -0,0 +1,93 @@ +--- +title: element.nodeValue +slug: Web/API/Node/nodeValue +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/nodeValue +--- +

{{APIRef("DOM")}}

+ +

La propriété Node.nodeValue renvoie ou définit la valeur du nœud courant.

+ +

Syntaxe

+ +
value = node.nodeValue;
+
+ +

value (valeur) est une chaîne contenant la valeur du nœud courant, s'il y en a une.

+ +

Notes

+ +

Pour le document lui-même, nodeValue renvoie null. Pour des nœuds texte, de commentaires et CDATA, nodeValue renvoie le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut.

+ +

Le tableau suivant montre les valeurs de retour pour différents types de nœuds :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attrvaleur de l'attribut
CDATASectioncontenu de la section CDATA
Commentcontenu du commentaire
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructiontout le contenu à l'exception de la cible
Textcontenu du nœud texte
+ +

Lorsque nodeValue est défini comme étant null, l'assignation n'a aucun effet.

+ +

Spécification

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.nodeValue")}}

diff --git a/files/fr/web/api/node/normalize/index.html b/files/fr/web/api/node/normalize/index.html deleted file mode 100644 index c1a299fb15..0000000000 --- a/files/fr/web/api/node/normalize/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: element.normalize -slug: Web/API/Node/normalize -translation_of: Web/API/Node/normalize ---- -

{{ ApiRef("DOM") }}

- -

Résumé

- -

Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents.

- -

Syntaxe

- -
élément.normalize();
-
- -

Exemple

- -
var conteneur = document.createElement("div");
-conteneur.appendChild( document.createTextNode("Partie 1 ") );
-conteneu.appendChild( document.createTextNode("Partie 2 ") );
-
-// Ici, conteneur.childNodes.length === 2
-// conteneur.childNodes[0].textContent === "Partie 1 "
-// conteneur.childNodes[1].textContent === "Partie 2 "
-
-conteneur.normalize();
-
-// À présent, conteneur.childNodes.length === 1
-// conteneur.childNodes[0].textContent === "Partie 1 Partie 2 "
- -

Notes

- -

Spécification

- - \ No newline at end of file diff --git a/files/fr/web/api/node/normalize/index.md b/files/fr/web/api/node/normalize/index.md new file mode 100644 index 0000000000..c1a299fb15 --- /dev/null +++ b/files/fr/web/api/node/normalize/index.md @@ -0,0 +1,38 @@ +--- +title: element.normalize +slug: Web/API/Node/normalize +translation_of: Web/API/Node/normalize +--- +

{{ ApiRef("DOM") }}

+ +

Résumé

+ +

Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents.

+ +

Syntaxe

+ +
élément.normalize();
+
+ +

Exemple

+ +
var conteneur = document.createElement("div");
+conteneur.appendChild( document.createTextNode("Partie 1 ") );
+conteneu.appendChild( document.createTextNode("Partie 2 ") );
+
+// Ici, conteneur.childNodes.length === 2
+// conteneur.childNodes[0].textContent === "Partie 1 "
+// conteneur.childNodes[1].textContent === "Partie 2 "
+
+conteneur.normalize();
+
+// À présent, conteneur.childNodes.length === 1
+// conteneur.childNodes[0].textContent === "Partie 1 Partie 2 "
+ +

Notes

+ +

Spécification

+ + \ No newline at end of file diff --git a/files/fr/web/api/node/ownerdocument/index.html b/files/fr/web/api/node/ownerdocument/index.html deleted file mode 100644 index 35b5eb6859..0000000000 --- a/files/fr/web/api/node/ownerdocument/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: element.ownerDocument -slug: Web/API/Node/ownerDocument -tags: - - API - - DOM - - Document - - Noeuds - - Propriétés -translation_of: Web/API/Node/ownerDocument ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud.

- -

Syntaxe

- -
document = element.ownerDocument;
-
- -
    -
  • document est l'objet document parent de l'élément courant.
    • -
- -

Exemple

- -
// étant donné un nœud "p", obtient le premier enfant HTML
-// de l'objet document
-var d = p.ownerDocument;
-var html = d.documentElement;
-
- -

Notes

- -

L'objet document renvoyé par cette propriété est l'objet principal avec lequel tous les nœuds enfants du document HTML réel sont créés. Si cette propriété est utilisée sur un nœud qui est lui-même un document, le résultat est null.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}{{Spec2("DOM4")}} 
{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}{{Spec2("DOM3 Core")}}Pas de changement
{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}{{Spec2("DOM2 Core")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.ownerDocument")}}

\ No newline at end of file diff --git a/files/fr/web/api/node/ownerdocument/index.md b/files/fr/web/api/node/ownerdocument/index.md new file mode 100644 index 0000000000..35b5eb6859 --- /dev/null +++ b/files/fr/web/api/node/ownerdocument/index.md @@ -0,0 +1,66 @@ +--- +title: element.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - API + - DOM + - Document + - Noeuds + - Propriétés +translation_of: Web/API/Node/ownerDocument +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud.

+ +

Syntaxe

+ +
document = element.ownerDocument;
+
+ +
    +
  • document est l'objet document parent de l'élément courant.
    • +
+ +

Exemple

+ +
// étant donné un nœud "p", obtient le premier enfant HTML
+// de l'objet document
+var d = p.ownerDocument;
+var html = d.documentElement;
+
+ +

Notes

+ +

L'objet document renvoyé par cette propriété est l'objet principal avec lequel tous les nœuds enfants du document HTML réel sont créés. Si cette propriété est utilisée sur un nœud qui est lui-même un document, le résultat est null.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}{{Spec2("DOM4")}} 
{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}{{Spec2("DOM3 Core")}}Pas de changement
{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}{{Spec2("DOM2 Core")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.ownerDocument")}}

\ No newline at end of file diff --git a/files/fr/web/api/node/parentelement/index.html b/files/fr/web/api/node/parentelement/index.html deleted file mode 100644 index 673cb3b8b2..0000000000 --- a/files/fr/web/api/node/parentelement/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Node.parentElement -slug: Web/API/Node/parentElement -tags: - - API - - DOM - - Noeuds - - Propriétés - - parent -translation_of: Web/API/Node/parentElement ---- -
-
-
{{APIRef("DOM")}}
-
- -
La propriété en lecture seule Node.parentElement renvoie le parent du noeud DOM ({{domxref("Element")}}) ou null si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM.
-
- -

Syntaxe

- -
parentElement = node.parentElement
-
- -

parentElement référence l'élément parent d'un nœud (node). C'est toujours un objet {{domxref("Element")}} du DOM ou null.

- -

Exemple

- -
if (node.parentElement) {
-    node.parentElement.style.color = "red";
-}
- -

Compatibilité des navigateurs

- -

Sur quelques navigateurs, la propriété parentElement est seulement définie sur les noeuds qui sont eux-mêmes des {{domxref("Element")}}. En particulier, elle n'est pas définie sur les noeuds texte.

- -
- - -

{{Compat("api.Node.parentElement")}}

-
- -

Spécifications

- -
    -
  • {{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}
    • -
- -

Voir aussi

- -
    -
  • {{domxref("Node.parentNode")}}
    • -
diff --git a/files/fr/web/api/node/parentelement/index.md b/files/fr/web/api/node/parentelement/index.md new file mode 100644 index 0000000000..673cb3b8b2 --- /dev/null +++ b/files/fr/web/api/node/parentelement/index.md @@ -0,0 +1,53 @@ +--- +title: Node.parentElement +slug: Web/API/Node/parentElement +tags: + - API + - DOM + - Noeuds + - Propriétés + - parent +translation_of: Web/API/Node/parentElement +--- +
+
+
{{APIRef("DOM")}}
+
+ +
La propriété en lecture seule Node.parentElement renvoie le parent du noeud DOM ({{domxref("Element")}}) ou null si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM.
+
+ +

Syntaxe

+ +
parentElement = node.parentElement
+
+ +

parentElement référence l'élément parent d'un nœud (node). C'est toujours un objet {{domxref("Element")}} du DOM ou null.

+ +

Exemple

+ +
if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}
+ +

Compatibilité des navigateurs

+ +

Sur quelques navigateurs, la propriété parentElement est seulement définie sur les noeuds qui sont eux-mêmes des {{domxref("Element")}}. En particulier, elle n'est pas définie sur les noeuds texte.

+ +
+ + +

{{Compat("api.Node.parentElement")}}

+
+ +

Spécifications

+ +
    +
  • {{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}
    • +
+ +

Voir aussi

+ +
    +
  • {{domxref("Node.parentNode")}}
    • +
diff --git a/files/fr/web/api/node/parentnode/index.html b/files/fr/web/api/node/parentnode/index.html deleted file mode 100644 index 5d2088cbf6..0000000000 --- a/files/fr/web/api/node/parentnode/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: element.parentNode -slug: Web/API/Node/parentNode -tags: - - API - - DOM - - Noeuds - - Propriétés - - parent -translation_of: Web/API/Node/parentNode ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule parentNode renvoie le parent du nœud spécifié dans l'arborescence de DOM .

- -

Syntaxe

- -
parentNode = node.parentNode
- -

parentNode est l'élément parent du nœud courant. Le parent d'un élément est un nœud Element , un nœud Document ou un nœud DocumentFragment .

- -

Exemple

- -
if (node.parentNode) {
-  // supprime un noeud  de l'arbre, 
-  // sauf s'il a déjà été supprimé
-  node.parentNode.removeChild(node);
-}
- -

Notes

- -

Les noeuds Document et DocumentFragment ne peuvent jamais avoir de parent, alors  parentNode  retournera toujours null .

- -

 Il renvoie également null si le nœud vient d'être créé et n'est pas encore attaché à l'arbre.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.parentNode")}}

- -

Spécification

-
- - - -

Voir aussi

- - \ No newline at end of file diff --git a/files/fr/web/api/node/parentnode/index.md b/files/fr/web/api/node/parentnode/index.md new file mode 100644 index 0000000000..5d2088cbf6 --- /dev/null +++ b/files/fr/web/api/node/parentnode/index.md @@ -0,0 +1,58 @@ +--- +title: element.parentNode +slug: Web/API/Node/parentNode +tags: + - API + - DOM + - Noeuds + - Propriétés + - parent +translation_of: Web/API/Node/parentNode +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule parentNode renvoie le parent du nœud spécifié dans l'arborescence de DOM .

+ +

Syntaxe

+ +
parentNode = node.parentNode
+ +

parentNode est l'élément parent du nœud courant. Le parent d'un élément est un nœud Element , un nœud Document ou un nœud DocumentFragment .

+ +

Exemple

+ +
if (node.parentNode) {
+  // supprime un noeud  de l'arbre, 
+  // sauf s'il a déjà été supprimé
+  node.parentNode.removeChild(node);
+}
+ +

Notes

+ +

Les noeuds Document et DocumentFragment ne peuvent jamais avoir de parent, alors  parentNode  retournera toujours null .

+ +

 Il renvoie également null si le nœud vient d'être créé et n'est pas encore attaché à l'arbre.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.parentNode")}}

+ +

Spécification

+
+ + + +

Voir aussi

+ + \ No newline at end of file diff --git a/files/fr/web/api/node/previoussibling/index.html b/files/fr/web/api/node/previoussibling/index.html deleted file mode 100644 index 31e02f5c7a..0000000000 --- a/files/fr/web/api/node/previoussibling/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: element.previousSibling -slug: Web/API/Node/previousSibling -tags: - - API - - DOM - - Noeuds - - Propriétés -translation_of: Web/API/Node/previousSibling ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule  Node.previousSibling renvoie le nœud (node) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou null s'il s'agit du premier nœud de la liste.

- -

Syntaxe

- -
previousNode = node.previousSibling;
-
- -

Exemple

- -
// <a><b1 id="b1"/><b2 id="b2"/></a>
-
-alert(document.getElementById("b1").previousSibling); // null
-alert(document.getElementById("b2").previousSibling.id); // "b1"
- -

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.

- -

L'opération inverse Node.nextSibling permet de rechercher l'élément suivant.

- -

Spécifications

- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.previousSibling")}}

- -

Voir aussi

- -

{{domxref("Node.nextSibling")}}

diff --git a/files/fr/web/api/node/previoussibling/index.md b/files/fr/web/api/node/previoussibling/index.md new file mode 100644 index 0000000000..31e02f5c7a --- /dev/null +++ b/files/fr/web/api/node/previoussibling/index.md @@ -0,0 +1,56 @@ +--- +title: element.previousSibling +slug: Web/API/Node/previousSibling +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/previousSibling +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule  Node.previousSibling renvoie le nœud (node) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou null s'il s'agit du premier nœud de la liste.

+ +

Syntaxe

+ +
previousNode = node.previousSibling;
+
+ +

Exemple

+ +
// <a><b1 id="b1"/><b2 id="b2"/></a>
+
+alert(document.getElementById("b1").previousSibling); // null
+alert(document.getElementById("b2").previousSibling.id); // "b1"
+ +

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.

+ +

L'opération inverse Node.nextSibling permet de rechercher l'élément suivant.

+ +

Spécifications

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.previousSibling")}}

+ +

Voir aussi

+ +

{{domxref("Node.nextSibling")}}

diff --git a/files/fr/web/api/node/removechild/index.html b/files/fr/web/api/node/removechild/index.html deleted file mode 100644 index 051a65c4e6..0000000000 --- a/files/fr/web/api/node/removechild/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: element.removeChild -slug: Web/API/Node/removeChild -tags: - - API - - DOM - - Enfant - - Méthodes - - Noeuds - - Suppression -translation_of: Web/API/Node/removeChild ---- -

{{ ApiRef("DOM") }}

- -

La méthode Node.removeChild() retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.

- -

Syntaxe

- -
var oldChild = node.removeChild(child);
-OR
-node.removeChild(child);
-
- - - -

Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet ancienEnfant. 

- -

Avec la seconde forme montrée en exemple, aucune référence à l'objet ancienEnfant n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général automatiquement supprimé de la mémoire après un court moment.

- -

Si  child n'est pas un enfant du noeud  element, la méthode provoque une exception. Une exception sera aussi lancée dans la cas où le nœud enfant est bien un enfant du nœud element au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'événement invoqué dans la cadre d'une tentative de suppression du nœud element (comme blur).

- -

La méthode peut lever une exception de deux façons :

- -
    -
  1. Si enfant était bien un enfant de element et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :​​
    - Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node.
    2. -
  2. si l'enfant n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante :
    - Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.
    3. -
- -

Exemples

- -
<!--Sample HTML code-->
-<div id="top" align="center"> </div>
-
-<script type="text/javascript">
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
-
-      var garbage = top.removeChild(nested);    //Cas test 2: la méthode lance l'exception (2)
-
-</script>
-
-<!--Sample HTML code-->
-<div id="top" align="center">
- <div id="nested"></div>
-</div>
-
-<script type="text/javascript">
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
-
-      var garbage = top.removeChild(nested); // Ce premier appel supprime correctement le noeud
-
-      // ......
-      garbage = top.removeChild(nested);   // Cas test 1 : la méthode dans le second appel ici, lance l'exception (1)
-
-</script>
- -
<!--Sample HTML code-->
-
-<div id="top" align="center">
-  <div id="nested"></div>
-</div>
- -
// Supprime un élément spécifié quand son noeud parent est connu
-var d = document.getElementById("top");
-var d_nested = document.getElementById("nested");
-var throwawayNode = d.removeChild(d_nested);
- -
// Supprime un élément spécifié sans avoir à spécifier son noeud parent
-var node = document.getElementById("nested");
-if (node.parentNode) {
-  node.parentNode.removeChild(node);
-}
- -
-// Supprime tous les enfant d'un élément
-var element = document.getElementById("top");
-while (element.firstChild) {
-  element.removeChild(element.firstChild);
-}
- -

Spécifications

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/node/removechild/index.md b/files/fr/web/api/node/removechild/index.md new file mode 100644 index 0000000000..051a65c4e6 --- /dev/null +++ b/files/fr/web/api/node/removechild/index.md @@ -0,0 +1,112 @@ +--- +title: element.removeChild +slug: Web/API/Node/removeChild +tags: + - API + - DOM + - Enfant + - Méthodes + - Noeuds + - Suppression +translation_of: Web/API/Node/removeChild +--- +

{{ ApiRef("DOM") }}

+ +

La méthode Node.removeChild() retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.

+ +

Syntaxe

+ +
var oldChild = node.removeChild(child);
+OR
+node.removeChild(child);
+
+ + + +

Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet ancienEnfant. 

+ +

Avec la seconde forme montrée en exemple, aucune référence à l'objet ancienEnfant n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général automatiquement supprimé de la mémoire après un court moment.

+ +

Si  child n'est pas un enfant du noeud  element, la méthode provoque une exception. Une exception sera aussi lancée dans la cas où le nœud enfant est bien un enfant du nœud element au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'événement invoqué dans la cadre d'une tentative de suppression du nœud element (comme blur).

+ +

La méthode peut lever une exception de deux façons :

+ +
    +
  1. Si enfant était bien un enfant de element et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :​​
    + Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node.
    2. +
  2. si l'enfant n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante :
    + Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.
    3. +
+ +

Exemples

+ +
<!--Sample HTML code-->
+<div id="top" align="center"> </div>
+
+<script type="text/javascript">
+      var top = document.getElementById("top");
+      var nested = document.getElementById("nested");
+
+      var garbage = top.removeChild(nested);    //Cas test 2: la méthode lance l'exception (2)
+
+</script>
+
+<!--Sample HTML code-->
+<div id="top" align="center">
+ <div id="nested"></div>
+</div>
+
+<script type="text/javascript">
+      var top = document.getElementById("top");
+      var nested = document.getElementById("nested");
+
+      var garbage = top.removeChild(nested); // Ce premier appel supprime correctement le noeud
+
+      // ......
+      garbage = top.removeChild(nested);   // Cas test 1 : la méthode dans le second appel ici, lance l'exception (1)
+
+</script>
+ +
<!--Sample HTML code-->
+
+<div id="top" align="center">
+  <div id="nested"></div>
+</div>
+ +
// Supprime un élément spécifié quand son noeud parent est connu
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+ +
// Supprime un élément spécifié sans avoir à spécifier son noeud parent
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+ +
+// Supprime tous les enfant d'un élément
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+ +

Spécifications

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/node/replacechild/index.html b/files/fr/web/api/node/replacechild/index.html deleted file mode 100644 index 3cdf5aa950..0000000000 --- a/files/fr/web/api/node/replacechild/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: element.replaceChild -slug: Web/API/Node/replaceChild -tags: - - API - - DOM - - Enfant - - Méthodes - - Noeuds - - Remplacement -translation_of: Web/API/Node/replaceChild ---- -

{{APIRef("DOM")}}

- -

La méthode Node.replaceChild() remplace un nœud enfant du noeud spécifié par un autre nœud.

- -

Syntaxe

- -
replacedNode = parentNode.replaceChild(newChild, oldChild);
-
- - - -

Exemple

- -
// Étant donné que :
-// <div>
-//   <span id="childSpan">foo bar</span>
-// </div>
-
-// Crée un nœud d'élément vide
-// sans ID, sans attributs et sans contenu
-var sp1 = document.createElement("span");
-
-// Donne un attribut id appelé "newSpan"
-sp1.id = "newSpan";
-
-// Crée du contenu pour le nouvel élément
-var sp1_content = document.createTextNode("nouvel élément span de remplacement.");
-
-// Applique ce contenu au nouvel élément
-sp1.appendChild(sp1_content);
-
-// Construit une référence au nœud existant à remplacer
-var sp2 = document.getElementById("childSpan");
-var parentDiv = sp2.parentNode;
-
-// Remplacer le noeud existant sp2 par le nouvel élément span sp1
-parentDiv.replaceChild(sp1, sp2);
-
-// Résultat :
-// <div>
-//   <span id="newSpan">nouvel élément span de remplacement.</span>
-// </div>
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-node-replacechild", "Node: replaceChild")}} - {{Spec2("DOM WHATWG")}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Node.replaceChild")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/node/replacechild/index.md b/files/fr/web/api/node/replacechild/index.md new file mode 100644 index 0000000000..3cdf5aa950 --- /dev/null +++ b/files/fr/web/api/node/replacechild/index.md @@ -0,0 +1,90 @@ +--- +title: element.replaceChild +slug: Web/API/Node/replaceChild +tags: + - API + - DOM + - Enfant + - Méthodes + - Noeuds + - Remplacement +translation_of: Web/API/Node/replaceChild +--- +

{{APIRef("DOM")}}

+ +

La méthode Node.replaceChild() remplace un nœud enfant du noeud spécifié par un autre nœud.

+ +

Syntaxe

+ +
replacedNode = parentNode.replaceChild(newChild, oldChild);
+
+ + + +

Exemple

+ +
// Étant donné que :
+// <div>
+//   <span id="childSpan">foo bar</span>
+// </div>
+
+// Crée un nœud d'élément vide
+// sans ID, sans attributs et sans contenu
+var sp1 = document.createElement("span");
+
+// Donne un attribut id appelé "newSpan"
+sp1.id = "newSpan";
+
+// Crée du contenu pour le nouvel élément
+var sp1_content = document.createTextNode("nouvel élément span de remplacement.");
+
+// Applique ce contenu au nouvel élément
+sp1.appendChild(sp1_content);
+
+// Construit une référence au nœud existant à remplacer
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// Remplacer le noeud existant sp2 par le nouvel élément span sp1
+parentDiv.replaceChild(sp1, sp2);
+
+// Résultat :
+// <div>
+//   <span id="newSpan">nouvel élément span de remplacement.</span>
+// </div>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-node-replacechild", "Node: replaceChild")}} + {{Spec2("DOM WHATWG")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Node.replaceChild")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/node/textcontent/index.html b/files/fr/web/api/node/textcontent/index.html deleted file mode 100644 index 63e892d5b6..0000000000 --- a/files/fr/web/api/node/textcontent/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: element.textContent -slug: Web/API/Node/textContent -tags: - - API - - DOM - - Noeuds - - Propriétés -translation_of: Web/API/Node/textContent ---- -

{{APIRef("DOM")}}

- -

La propriété Node.textContent  représente le contenu textuel d'un nœud et de ses descendants.

- -

Syntaxe

- -
var text = element.textContent;
-element.textContent = "ceci est un simple exemple de texte";
-
- -

Description

- - - -

Différences avec innerText

- -

Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'intention est similaire mais comporte les différences suivantes :

- - - -

Différences avec innerHTML

- -

{{domxref("Element.innerHTML")}} renvoie le HTML comme son nom l'indique. Souvent, pour récupérer ou écrire du texte dans un élément, les utilisateurs utilisent innerHTML. Cependant, textContent a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de textContent peut empêcher les attaques XSS.

- -

Exemple

- -
// Étant donné le fragment de HTML suivant :
-//   <div id="divA">Ceci est un <span>exemple de</span> texte</div>
-
-// On obtient le contenu textuel :
-var text = document.getElementById("divA").textContent;
-// |text| vaut "Ceci est un exemple de texte".
-
-// On définit le contenu textuel :
-document.getElementById("divA").textContent = "Ceci est un exemple de texte";
-// Le HTML pour divA est à présent <div id="divA">Ceci est un exemple de texte</div>
-
- -

Polyfill pour IE8

- -
// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8
-if (Object.defineProperty
-  && Object.getOwnPropertyDescriptor
-  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
-  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
-  (function() {
-    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
-    Object.defineProperty(Element.prototype, "textContent",
-     // Passing innerText or innerText.get directly does not work,
-     // wrapper function is required.
-     {
-       get: function() {
-         return innerText.get.call(this);
-       },
-       set: function(s) {
-         return innerText.set.call(this, s);
-       }
-     }
-   );
-  })();
-}
- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.textContent")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Pas de changement de DOM4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Définition initiale.
- -

Voir aussi

- - - -

 

diff --git a/files/fr/web/api/node/textcontent/index.md b/files/fr/web/api/node/textcontent/index.md new file mode 100644 index 0000000000..63e892d5b6 --- /dev/null +++ b/files/fr/web/api/node/textcontent/index.md @@ -0,0 +1,125 @@ +--- +title: element.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/textContent +--- +

{{APIRef("DOM")}}

+ +

La propriété Node.textContent  représente le contenu textuel d'un nœud et de ses descendants.

+ +

Syntaxe

+ +
var text = element.textContent;
+element.textContent = "ceci est un simple exemple de texte";
+
+ +

Description

+ + + +

Différences avec innerText

+ +

Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'intention est similaire mais comporte les différences suivantes :

+ + + +

Différences avec innerHTML

+ +

{{domxref("Element.innerHTML")}} renvoie le HTML comme son nom l'indique. Souvent, pour récupérer ou écrire du texte dans un élément, les utilisateurs utilisent innerHTML. Cependant, textContent a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de textContent peut empêcher les attaques XSS.

+ +

Exemple

+ +
// Étant donné le fragment de HTML suivant :
+//   <div id="divA">Ceci est un <span>exemple de</span> texte</div>
+
+// On obtient le contenu textuel :
+var text = document.getElementById("divA").textContent;
+// |text| vaut "Ceci est un exemple de texte".
+
+// On définit le contenu textuel :
+document.getElementById("divA").textContent = "Ceci est un exemple de texte";
+// Le HTML pour divA est à présent <div id="divA">Ceci est un exemple de texte</div>
+
+ +

Polyfill pour IE8

+ +
// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8
+if (Object.defineProperty
+  && Object.getOwnPropertyDescriptor
+  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  (function() {
+    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
+    Object.defineProperty(Element.prototype, "textContent",
+     // Passing innerText or innerText.get directly does not work,
+     // wrapper function is required.
+     {
+       get: function() {
+         return innerText.get.call(this);
+       },
+       set: function(s) {
+         return innerText.set.call(this, s);
+       }
+     }
+   );
+  })();
+}
+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.textContent")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Pas de changement de DOM4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Définition initiale.
+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/api/nodefilter/acceptnode/index.html b/files/fr/web/api/nodefilter/acceptnode/index.html deleted file mode 100644 index 58a61e0e11..0000000000 --- a/files/fr/web/api/nodefilter/acceptnode/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: NodeFilter.acceptNode() -slug: Web/API/NodeFilter/acceptNode -tags: - - API - - DOM - - Filtre - - Méthodes - - NodeFilter - - Noeuds -translation_of: Web/API/NodeFilter/acceptNode ---- -
{{APIRef("DOM")}}
- -

La méthode NodeFilter.acceptNode() renvoie un unsigned short (non signé court) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du NodeFilter. Les valeurs retournées possibles sont :

- - - - - - - - - - - - - - - - - - - - -
ConstanteDescription
NodeFilter.FILTER_ACCEPTValeur renvoyée par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit être accepté .
NodeFilter.FILTER_REJECTValeur à retourner par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit être rejeté. Les enfants des noeuds rejetés ne sont pas visités par les objets {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }} ; cette valeur est traitée comme "ignorer ce noeud et tous ses enfants".
NodeFilter.FILTER_SKIPValeur à retourner par {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds soient ignorés par les objets {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses enfants".
- -

La fonction doit renvoyer NodeFilter.FILTER_ACCEPT qui pousse le TreeWalker à renvoyer le noeud, NodeFilter.FILTER_REJECT qui contraint le TreeWalker à ignorer le sous-arbre entier ou NodeFilter.FILTER_SKIP.

- -

Le navigateur ne fournit aucun objet implémentant cette méthode. C'est l'utilisateur qui doit écrire un objet implémentant l'interface {{domxref("NodeFilter")}}, adapter la méthode acceptNode() à ses besoins et l'utiliser avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.

- -

Syntaxe

- -
result = nodeFilter.acceptNode(node)
-
- -

Paramètres

- -
-
node
-
est un {{domxref("Node")}} (noeud) qui doit être vérifié avec le filtre.
-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-  // Noeud à utiliser comme racine
-  document.getElementById('someId'),
-
-  // Considérer uniquement les nœuds qui sont des nœuds de texte (nodeType 3)
-  NodeFilter.SHOW_TEXT,
-
-  // Objet contenant la fonction à utiliser pour la méthode acceptNode du NodeFilter
-    { acceptNode: function(node) {
-      // Logique pour déterminer si accepter, rejeter ou ignorer le noeud
-      // dans ce cas, n'accepte que les noeuds ayant du contenu
-      // autres que les espaces
-      if ( ! /^\s*$/.test(node.data) ) {
-        return NodeFilter.FILTER_ACCEPT;
-      }
-    }
-  },
-  false
-);
-
-// Affiche le contenu de tous les noeuds texte non vides qui sont enfants de la racine
-var node;
-
-while ((node = iterator.nextNode())) {
-  alert(node.data);
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#nodeFilter', 'NodeFilter.acceptNode()')}}{{Spec2('DOM WHATWG')}}Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter.acceptNode()')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeFilter.acceptNode")}}

- -

Voir aussi

- - \ No newline at end of file diff --git a/files/fr/web/api/nodefilter/acceptnode/index.md b/files/fr/web/api/nodefilter/acceptnode/index.md new file mode 100644 index 0000000000..58a61e0e11 --- /dev/null +++ b/files/fr/web/api/nodefilter/acceptnode/index.md @@ -0,0 +1,116 @@ +--- +title: NodeFilter.acceptNode() +slug: Web/API/NodeFilter/acceptNode +tags: + - API + - DOM + - Filtre + - Méthodes + - NodeFilter + - Noeuds +translation_of: Web/API/NodeFilter/acceptNode +--- +
{{APIRef("DOM")}}
+ +

La méthode NodeFilter.acceptNode() renvoie un unsigned short (non signé court) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du NodeFilter. Les valeurs retournées possibles sont :

+ + + + + + + + + + + + + + + + + + + + +
ConstanteDescription
NodeFilter.FILTER_ACCEPTValeur renvoyée par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit être accepté .
NodeFilter.FILTER_REJECTValeur à retourner par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit être rejeté. Les enfants des noeuds rejetés ne sont pas visités par les objets {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }} ; cette valeur est traitée comme "ignorer ce noeud et tous ses enfants".
NodeFilter.FILTER_SKIPValeur à retourner par {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds soient ignorés par les objets {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses enfants".
+ +

La fonction doit renvoyer NodeFilter.FILTER_ACCEPT qui pousse le TreeWalker à renvoyer le noeud, NodeFilter.FILTER_REJECT qui contraint le TreeWalker à ignorer le sous-arbre entier ou NodeFilter.FILTER_SKIP.

+ +

Le navigateur ne fournit aucun objet implémentant cette méthode. C'est l'utilisateur qui doit écrire un objet implémentant l'interface {{domxref("NodeFilter")}}, adapter la méthode acceptNode() à ses besoins et l'utiliser avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.

+ +

Syntaxe

+ +
result = nodeFilter.acceptNode(node)
+
+ +

Paramètres

+ +
+
node
+
est un {{domxref("Node")}} (noeud) qui doit être vérifié avec le filtre.
+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+  // Noeud à utiliser comme racine
+  document.getElementById('someId'),
+
+  // Considérer uniquement les nœuds qui sont des nœuds de texte (nodeType 3)
+  NodeFilter.SHOW_TEXT,
+
+  // Objet contenant la fonction à utiliser pour la méthode acceptNode du NodeFilter
+    { acceptNode: function(node) {
+      // Logique pour déterminer si accepter, rejeter ou ignorer le noeud
+      // dans ce cas, n'accepte que les noeuds ayant du contenu
+      // autres que les espaces
+      if ( ! /^\s*$/.test(node.data) ) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  },
+  false
+);
+
+// Affiche le contenu de tous les noeuds texte non vides qui sont enfants de la racine
+var node;
+
+while ((node = iterator.nextNode())) {
+  alert(node.data);
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#nodeFilter', 'NodeFilter.acceptNode()')}}{{Spec2('DOM WHATWG')}}Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter.acceptNode()')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeFilter.acceptNode")}}

+ +

Voir aussi

+ + \ No newline at end of file diff --git a/files/fr/web/api/nodefilter/index.html b/files/fr/web/api/nodefilter/index.html deleted file mode 100644 index 17bab28ee1..0000000000 --- a/files/fr/web/api/nodefilter/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: NodeFilter -slug: Web/API/NodeFilter -tags: - - API - - Arborescence - - DOM - - Filtres - - Interface - - Itérateurs - - Noeuds -translation_of: Web/API/NodeFilter ---- -
{{APIRef("DOM")}}
- -

Une interface NodeFilter représente un objet utilisé pour filtrer les noeuds dans un {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Ils ne savent rien du DOM ni comment traverser les nœuds ; ils savent juste comment évaluer un seul noeud par rapport au filtre fourni.

- -
-

Note : Le navigateur ne fournit aucun objet implémentant cette interface. C'est l'utilisateur qui doit en écrire un, en adaptant la méthode acceptNode() en fonction des besoins et en l'utilisant avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.

-
- -

Propriétés

- -

Cette interface n'implémente ni n'hérite d'aucune propriété.

- -

Méthodes

- -

Cette interface n'hérite d'aucune méthode.

- -
-
{{domxref("NodeFilter.acceptNode()")}}
-
Renvoie un unsigned short (non signé court) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du NodeFilter. Les valeurs retournées possibles sont : - - - - - - - - - - - - - - - - - - - -
ConstanteDescription
FILTER_ACCEPTValeur renvoyée par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit être accepté.
FILTER_REJECTValeur à retourner par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit être rejeté. Pour {{ domxref("TreeWalker") }}, les noeuds enfants sont aussi rejetés. Pour {{ domxref("NodeIterator") }}, cette option est équivalente à FILTER_SKIP.
FILTER_SKIPValeur à retourner par {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds soient ignorés par {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses enfants".
-
-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-  // Noeud à utiliser comme racine
-  document.getElementById('someId'),
-
-  // Considérer uniquement les nœuds qui sont des nœuds de texte (nodeType 3)
-  NodeFilter.SHOW_TEXT,
-
-  // Objet contenant la fonction à utiliser pour la méthode acceptNode
-  // du NodeFilter
-    { acceptNode: function(node) {
-      // Logique pour déterminer si accepter, rejeter ou ignorer le noeud
-      // dans ce cas, n'accepte que les nœuds ayant du contenu
-      // autres que les espaces
-      if ( ! /^\s*$/.test(node.data) ) {
-        return NodeFilter.FILTER_ACCEPT;
-      }
-    }
-  },
-  false
-);
-
-// Affiche le contenu de tous les noeuds texte non vides qui sont enfants de la racine
-var node;
-
-while ((node = nodeIterator.nextNode())) {
-  alert(node.data);
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeFilter")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/nodefilter/index.md b/files/fr/web/api/nodefilter/index.md new file mode 100644 index 0000000000..17bab28ee1 --- /dev/null +++ b/files/fr/web/api/nodefilter/index.md @@ -0,0 +1,119 @@ +--- +title: NodeFilter +slug: Web/API/NodeFilter +tags: + - API + - Arborescence + - DOM + - Filtres + - Interface + - Itérateurs + - Noeuds +translation_of: Web/API/NodeFilter +--- +
{{APIRef("DOM")}}
+ +

Une interface NodeFilter représente un objet utilisé pour filtrer les noeuds dans un {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Ils ne savent rien du DOM ni comment traverser les nœuds ; ils savent juste comment évaluer un seul noeud par rapport au filtre fourni.

+ +
+

Note : Le navigateur ne fournit aucun objet implémentant cette interface. C'est l'utilisateur qui doit en écrire un, en adaptant la méthode acceptNode() en fonction des besoins et en l'utilisant avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.

+
+ +

Propriétés

+ +

Cette interface n'implémente ni n'hérite d'aucune propriété.

+ +

Méthodes

+ +

Cette interface n'hérite d'aucune méthode.

+ +
+
{{domxref("NodeFilter.acceptNode()")}}
+
Renvoie un unsigned short (non signé court) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du NodeFilter. Les valeurs retournées possibles sont : + + + + + + + + + + + + + + + + + + + +
ConstanteDescription
FILTER_ACCEPTValeur renvoyée par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit être accepté.
FILTER_REJECTValeur à retourner par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit être rejeté. Pour {{ domxref("TreeWalker") }}, les noeuds enfants sont aussi rejetés. Pour {{ domxref("NodeIterator") }}, cette option est équivalente à FILTER_SKIP.
FILTER_SKIPValeur à retourner par {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds soient ignorés par {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses enfants".
+
+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+  // Noeud à utiliser comme racine
+  document.getElementById('someId'),
+
+  // Considérer uniquement les nœuds qui sont des nœuds de texte (nodeType 3)
+  NodeFilter.SHOW_TEXT,
+
+  // Objet contenant la fonction à utiliser pour la méthode acceptNode
+  // du NodeFilter
+    { acceptNode: function(node) {
+      // Logique pour déterminer si accepter, rejeter ou ignorer le noeud
+      // dans ce cas, n'accepte que les nœuds ayant du contenu
+      // autres que les espaces
+      if ( ! /^\s*$/.test(node.data) ) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  },
+  false
+);
+
+// Affiche le contenu de tous les noeuds texte non vides qui sont enfants de la racine
+var node;
+
+while ((node = nodeIterator.nextNode())) {
+  alert(node.data);
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeFilter")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodeiterator/detach/index.html b/files/fr/web/api/nodeiterator/detach/index.html deleted file mode 100644 index ee558b083b..0000000000 --- a/files/fr/web/api/nodeiterator/detach/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: NodeIterator.detach() -slug: Web/API/NodeIterator/detach -tags: - - API - - Arborescence - - DOM - - Itérateur - - Méthodes - - Noeuds -translation_of: Web/API/NodeIterator/detach ---- -

{{APIRef("DOM")}}{{obsolete_header}}

- -

La méthode NodeIterator.detach() est une non opération, conservée seulement pour la rétro-compatibilité.

- -

Initialement, elle détachait {{domxref("NodeIterator")}} de l'ensemble sur lequel il itérait, libérant toutes les ressources utilisées par lui et basculant son état à INVALID. Une fois cette méthode utilisée, l'appel d'autres méthodes sur le NodeIterator déclenchait une exception INVALID_STATE_ERR. 

- -

Syntaxe

- -
nodeIterator.detach();
-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-nodeIterator.detach(); // détache l'itérateur
-
-nodeIterator.nextNode(); // lance une exception INVALID_STATE_ERR
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-detach', 'NodeIterator.detach')}}{{Spec2('DOM WHATWG')}}Transformation en non opération
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-detach', 'NodeIterator.detach')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeIterator.detach")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/nodeiterator/detach/index.md b/files/fr/web/api/nodeiterator/detach/index.md new file mode 100644 index 0000000000..ee558b083b --- /dev/null +++ b/files/fr/web/api/nodeiterator/detach/index.md @@ -0,0 +1,69 @@ +--- +title: NodeIterator.detach() +slug: Web/API/NodeIterator/detach +tags: + - API + - Arborescence + - DOM + - Itérateur + - Méthodes + - Noeuds +translation_of: Web/API/NodeIterator/detach +--- +

{{APIRef("DOM")}}{{obsolete_header}}

+ +

La méthode NodeIterator.detach() est une non opération, conservée seulement pour la rétro-compatibilité.

+ +

Initialement, elle détachait {{domxref("NodeIterator")}} de l'ensemble sur lequel il itérait, libérant toutes les ressources utilisées par lui et basculant son état à INVALID. Une fois cette méthode utilisée, l'appel d'autres méthodes sur le NodeIterator déclenchait une exception INVALID_STATE_ERR. 

+ +

Syntaxe

+ +
nodeIterator.detach();
+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+nodeIterator.detach(); // détache l'itérateur
+
+nodeIterator.nextNode(); // lance une exception INVALID_STATE_ERR
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-detach', 'NodeIterator.detach')}}{{Spec2('DOM WHATWG')}}Transformation en non opération
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-detach', 'NodeIterator.detach')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeIterator.detach")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodeiterator/expandentityreferences/index.html b/files/fr/web/api/nodeiterator/expandentityreferences/index.html deleted file mode 100644 index 32c3294fc0..0000000000 --- a/files/fr/web/api/nodeiterator/expandentityreferences/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: NodeIterator.expandEntityReferences -slug: Web/API/NodeIterator/expandEntityReferences -tags: - - API - - Arborescence - - DOM - - Itérateur - - Noeuds - - Propriété -translation_of: Web/API/NodeIterator/expandEntityReferences ---- -

{{APIRef("DOM")}} {{deprecated_header}}

- -

La propriété en lecture seule NodeIterator.expandEntityReferences renvoie un {{domxref("Boolean")}} (booléen) indiquant si les enfants des noeuds de référence d'entité sont visibles ou non pour le {{domxref("NodeIterator")}}.

- -

Si cette valeur est false (faux), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("NodeIterator.whatToShow")}} et le filtre associé.

- -

Syntaxe

- -
expand = nodeIterator.expandEntityReferences;
-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-expand = nodeIterator.expandEntityReferences;
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}{{Spec2('DOM WHATWG')}}Suppression de la spécification
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-expandEntityReferences', 'NodeIterator.expandEntityReferences')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.NodeIterator.expandEntityReferences")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/nodeiterator/expandentityreferences/index.md b/files/fr/web/api/nodeiterator/expandentityreferences/index.md new file mode 100644 index 0000000000..32c3294fc0 --- /dev/null +++ b/files/fr/web/api/nodeiterator/expandentityreferences/index.md @@ -0,0 +1,64 @@ +--- +title: NodeIterator.expandEntityReferences +slug: Web/API/NodeIterator/expandEntityReferences +tags: + - API + - Arborescence + - DOM + - Itérateur + - Noeuds + - Propriété +translation_of: Web/API/NodeIterator/expandEntityReferences +--- +

{{APIRef("DOM")}} {{deprecated_header}}

+ +

La propriété en lecture seule NodeIterator.expandEntityReferences renvoie un {{domxref("Boolean")}} (booléen) indiquant si les enfants des noeuds de référence d'entité sont visibles ou non pour le {{domxref("NodeIterator")}}.

+ +

Si cette valeur est false (faux), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("NodeIterator.whatToShow")}} et le filtre associé.

+ +

Syntaxe

+ +
expand = nodeIterator.expandEntityReferences;
+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+expand = nodeIterator.expandEntityReferences;
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}{{Spec2('DOM WHATWG')}}Suppression de la spécification
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-expandEntityReferences', 'NodeIterator.expandEntityReferences')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.NodeIterator.expandEntityReferences")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodeiterator/filter/index.html b/files/fr/web/api/nodeiterator/filter/index.html deleted file mode 100644 index 57cbd54740..0000000000 --- a/files/fr/web/api/nodeiterator/filter/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: NodeIterator.filter -slug: Web/API/NodeIterator/filter -tags: - - API - - Arborescence - - DOM - - Itérateur - - Noeuds - - Propriétés -translation_of: Web/API/NodeIterator/filter ---- -
{{APIRef("DOM")}}
- -

La méthode en lecture seule NodeIterator.filter renvoie un objet {{domxref("NodeFilter")}}, c'est-à-dire un objet implémentant la méthode acceptNode(node), utilisée pour filtrer les noeuds.

- -

Lors de la création du {{domxref("NodeIterator")}}, l'objet filtre est transmis en 3ème paramètre et l'objet méthode acceptNode(node) est appelé sur chaque noeud pour déterminer s'il doit ou non l'accepter. Cette fonction doit renvoyer la constante NodeFilter.FILTER_ACCEPT quand le noeud doit être accepté et NodeFilter.FILTER_REJECT s'il doit être rejeté.

- -

Syntaxe

- -
nodeFilter = nodeIterator.filter;
-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-nodeFilter = nodeIterator.filter;
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-filter', 'NodeIterator.filter')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-filter', 'NodeIterator.filter')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeIterator.filter")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/nodeiterator/filter/index.md b/files/fr/web/api/nodeiterator/filter/index.md new file mode 100644 index 0000000000..57cbd54740 --- /dev/null +++ b/files/fr/web/api/nodeiterator/filter/index.md @@ -0,0 +1,66 @@ +--- +title: NodeIterator.filter +slug: Web/API/NodeIterator/filter +tags: + - API + - Arborescence + - DOM + - Itérateur + - Noeuds + - Propriétés +translation_of: Web/API/NodeIterator/filter +--- +
{{APIRef("DOM")}}
+ +

La méthode en lecture seule NodeIterator.filter renvoie un objet {{domxref("NodeFilter")}}, c'est-à-dire un objet implémentant la méthode acceptNode(node), utilisée pour filtrer les noeuds.

+ +

Lors de la création du {{domxref("NodeIterator")}}, l'objet filtre est transmis en 3ème paramètre et l'objet méthode acceptNode(node) est appelé sur chaque noeud pour déterminer s'il doit ou non l'accepter. Cette fonction doit renvoyer la constante NodeFilter.FILTER_ACCEPT quand le noeud doit être accepté et NodeFilter.FILTER_REJECT s'il doit être rejeté.

+ +

Syntaxe

+ +
nodeFilter = nodeIterator.filter;
+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+nodeFilter = nodeIterator.filter;
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-filter', 'NodeIterator.filter')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-filter', 'NodeIterator.filter')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeIterator.filter")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodeiterator/index.html b/files/fr/web/api/nodeiterator/index.html deleted file mode 100644 index d45bd86f1f..0000000000 --- a/files/fr/web/api/nodeiterator/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: NodeIterator -slug: Web/API/NodeIterator -tags: - - API - - DOM - - Itérateur - - Noeuds -translation_of: Web/API/NodeIterator ---- -
{{APIRef("DOM")}}
- -

L'interface NodeIterator représente un itérateur pour les membres d'une liste des nœuds dans un sous-arbre du DOM. Les nœuds seront renvoyés dans l'ordre du document.

- -

Un NodeIterator peut être créé en utilisant la méthode {{domxref("Document.createNodeIterator()")}}, comme suit :

- -
var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
- -

Propriétés

- -

L'interface n'hérite d'aucune propriété.

- -
-
{{domxref("NodeIterator.root")}} {{readonlyInline}}
-
Renvoie un {{domxref("Node")}} (noeud) représentant le noeud racine comme spécifié lors de la création du NodeIterator.
-
{{domxref("NodeIterator.whatToShow")}} {{readonlyInline}}
-
Renvoie un unsigned long (long non signé), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} (noeud) et devant être présenté. Les nœuds non correspondants sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{obsolete_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{obsolete_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{obsolete_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{obsolete_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{obsolete_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
-
-
{{domxref("NodeIterator.filter")}} {{readonlyInline}}
-
Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.
-
{{domxref("NodeIterator.expandEntityReferences")}} {{readonlyInline}} {{deprecated_inline}}
-
est un {{domxref("Boolean")}} (booléen) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.
-
{{domxref("NodeIterator.referenceNode")}} {{readonlyInline}} {{experimental_inline() }}
-
Renvoie le {{domxref("Node")}} (noeud) auquel l'itérateur est ancré.
-
{{domxref("NodeIterator.pointerBeforeReferenceNode")}} {{readonlyInline}} {{ experimental_inline() }}
-
Renvoie un {{domxref("Boolean")}} (booléen) qui indique si le {{domxref("NodeIterator")}} est ancré avant (true (vrai)) ou après (false (faux)) le noeud d'ancrage.
-
- -

Méthodes

- -

Cette interface n'hérite d'aucune méthode.

- -
-
{{domxref("NodeIterator.detach()")}} {{obsolete_inline()}}
-
Cette opération est une non opération. Elle ne fait rien. Auparavant, elle disait au moteur que le NodeIterator n'était plus utilisé, mais c'est maintenant inutile.
-
{{domxref("NodeIterator.previousNode()")}}
-
Renvoie le noeud {{domxref("Node")}} précédent dans le document ou null s'il n'y en a aucun.
-
{{domxref("NodeIterator.nextNode()")}}
-
Renvoie le noeud {{domxref("Node")}} suivant dans le  document ou null s'il n'y en a aucun.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}{{Spec2('DOM WHATWG')}}Ajout des propriétés referenceNode et pointerBeforeReferenceNode.
- Suppression de la propriété expandEntityReferences.
- La méthode detach() a été modifiée pour être une non opération.
- Les méthodes previousNode() et nextNode() ne déclenchent plus d'exceptions.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Iterator-overview', 'NodeIterator')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.NodeIterator")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/nodeiterator/index.md b/files/fr/web/api/nodeiterator/index.md new file mode 100644 index 0000000000..d45bd86f1f --- /dev/null +++ b/files/fr/web/api/nodeiterator/index.md @@ -0,0 +1,160 @@ +--- +title: NodeIterator +slug: Web/API/NodeIterator +tags: + - API + - DOM + - Itérateur + - Noeuds +translation_of: Web/API/NodeIterator +--- +
{{APIRef("DOM")}}
+ +

L'interface NodeIterator représente un itérateur pour les membres d'une liste des nœuds dans un sous-arbre du DOM. Les nœuds seront renvoyés dans l'ordre du document.

+ +

Un NodeIterator peut être créé en utilisant la méthode {{domxref("Document.createNodeIterator()")}}, comme suit :

+ +
var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
+ +

Propriétés

+ +

L'interface n'hérite d'aucune propriété.

+ +
+
{{domxref("NodeIterator.root")}} {{readonlyInline}}
+
Renvoie un {{domxref("Node")}} (noeud) représentant le noeud racine comme spécifié lors de la création du NodeIterator.
+
{{domxref("NodeIterator.whatToShow")}} {{readonlyInline}}
+
Renvoie un unsigned long (long non signé), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} (noeud) et devant être présenté. Les nœuds non correspondants sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{obsolete_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{obsolete_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{obsolete_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{obsolete_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{obsolete_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
+
+
{{domxref("NodeIterator.filter")}} {{readonlyInline}}
+
Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.
+
{{domxref("NodeIterator.expandEntityReferences")}} {{readonlyInline}} {{deprecated_inline}}
+
est un {{domxref("Boolean")}} (booléen) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.
+
{{domxref("NodeIterator.referenceNode")}} {{readonlyInline}} {{experimental_inline() }}
+
Renvoie le {{domxref("Node")}} (noeud) auquel l'itérateur est ancré.
+
{{domxref("NodeIterator.pointerBeforeReferenceNode")}} {{readonlyInline}} {{ experimental_inline() }}
+
Renvoie un {{domxref("Boolean")}} (booléen) qui indique si le {{domxref("NodeIterator")}} est ancré avant (true (vrai)) ou après (false (faux)) le noeud d'ancrage.
+
+ +

Méthodes

+ +

Cette interface n'hérite d'aucune méthode.

+ +
+
{{domxref("NodeIterator.detach()")}} {{obsolete_inline()}}
+
Cette opération est une non opération. Elle ne fait rien. Auparavant, elle disait au moteur que le NodeIterator n'était plus utilisé, mais c'est maintenant inutile.
+
{{domxref("NodeIterator.previousNode()")}}
+
Renvoie le noeud {{domxref("Node")}} précédent dans le document ou null s'il n'y en a aucun.
+
{{domxref("NodeIterator.nextNode()")}}
+
Renvoie le noeud {{domxref("Node")}} suivant dans le  document ou null s'il n'y en a aucun.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}{{Spec2('DOM WHATWG')}}Ajout des propriétés referenceNode et pointerBeforeReferenceNode.
+ Suppression de la propriété expandEntityReferences.
+ La méthode detach() a été modifiée pour être une non opération.
+ Les méthodes previousNode() et nextNode() ne déclenchent plus d'exceptions.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Iterator-overview', 'NodeIterator')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.NodeIterator")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodeiterator/nextnode/index.html b/files/fr/web/api/nodeiterator/nextnode/index.html deleted file mode 100644 index 517cc65cef..0000000000 --- a/files/fr/web/api/nodeiterator/nextnode/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: NodeIterator.nextNode() -slug: Web/API/NodeIterator/nextNode -tags: - - API - - Arborescence - - DOM - - Itérateur - - Méthodes - - Noeuds -translation_of: Web/API/NodeIterator/nextNode ---- -
{{APIRef("DOM")}}
- -

La méthode NodeIterator.nextNode() renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble.  Le premier appel de nextNode() en renvoie le premier noeud.

- -

Cette méthode retourne null quand il n'y a plus de nœuds dans l'ensemble.

- -

Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}}   INVALID_STATE_ERR si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.

- -

Syntaxe

- -
node = nodeIterator.nextNode();
-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false // this optional argument is not used any more
-);
-currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-nextnode', 'NodeIterator.nextNode')}}{{Spec2('DOM WHATWG')}}Comme detach() est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-nextNode', 'NodeIterator.nextNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeIterator.nextNode")}}

- -

Voir aussi

- -

L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.

diff --git a/files/fr/web/api/nodeiterator/nextnode/index.md b/files/fr/web/api/nodeiterator/nextnode/index.md new file mode 100644 index 0000000000..517cc65cef --- /dev/null +++ b/files/fr/web/api/nodeiterator/nextnode/index.md @@ -0,0 +1,67 @@ +--- +title: NodeIterator.nextNode() +slug: Web/API/NodeIterator/nextNode +tags: + - API + - Arborescence + - DOM + - Itérateur + - Méthodes + - Noeuds +translation_of: Web/API/NodeIterator/nextNode +--- +
{{APIRef("DOM")}}
+ +

La méthode NodeIterator.nextNode() renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble.  Le premier appel de nextNode() en renvoie le premier noeud.

+ +

Cette méthode retourne null quand il n'y a plus de nœuds dans l'ensemble.

+ +

Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}}   INVALID_STATE_ERR si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.

+ +

Syntaxe

+ +
node = nodeIterator.nextNode();
+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false // this optional argument is not used any more
+);
+currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-nextnode', 'NodeIterator.nextNode')}}{{Spec2('DOM WHATWG')}}Comme detach() est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-nextNode', 'NodeIterator.nextNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeIterator.nextNode")}}

+ +

Voir aussi

+ +

L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.

diff --git a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html deleted file mode 100644 index a2d6507e4f..0000000000 --- a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: NodeIterator.pointerBeforeReferenceNode -slug: Web/API/NodeIterator/pointerBeforeReferenceNode -tags: - - API - - Arborescence - - DOM - - Itérateur - - Noeuds - - Propriétés -translation_of: Web/API/NodeIterator/pointerBeforeReferenceNode ---- -

{{APIRef("DOM")}} {{SeeCompatTable}}

- -

La propriété en lecture seule NodeIterator.pointerBeforeReferenceNode renvoie un {{domxref("Boolean")}} (booléen) qui indique si le {{domxref("NodeFilter")}} est ancré avant (si la valeur est true (vrai)) ou après (false (faux)) le noeud-ancre indiqué par la propriété {{domxref("NodeIterator.referenceNode")}}.

- -

Syntaxe

- -
flag = nodeIterator.pointerBeforeReferenceNode;
-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-flag = nodeIterator.pointerBeforeReferenceNode;
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-pointerbeforereferencenode', 'NodeIterator.pointerBeforeReferenceNode')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeIterator.pointerBeforeReferenceNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.md b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.md new file mode 100644 index 0000000000..a2d6507e4f --- /dev/null +++ b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.md @@ -0,0 +1,59 @@ +--- +title: NodeIterator.pointerBeforeReferenceNode +slug: Web/API/NodeIterator/pointerBeforeReferenceNode +tags: + - API + - Arborescence + - DOM + - Itérateur + - Noeuds + - Propriétés +translation_of: Web/API/NodeIterator/pointerBeforeReferenceNode +--- +

{{APIRef("DOM")}} {{SeeCompatTable}}

+ +

La propriété en lecture seule NodeIterator.pointerBeforeReferenceNode renvoie un {{domxref("Boolean")}} (booléen) qui indique si le {{domxref("NodeFilter")}} est ancré avant (si la valeur est true (vrai)) ou après (false (faux)) le noeud-ancre indiqué par la propriété {{domxref("NodeIterator.referenceNode")}}.

+ +

Syntaxe

+ +
flag = nodeIterator.pointerBeforeReferenceNode;
+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+flag = nodeIterator.pointerBeforeReferenceNode;
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-pointerbeforereferencenode', 'NodeIterator.pointerBeforeReferenceNode')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeIterator.pointerBeforeReferenceNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodeiterator/previousnode/index.html b/files/fr/web/api/nodeiterator/previousnode/index.html deleted file mode 100644 index e6c19c0c07..0000000000 --- a/files/fr/web/api/nodeiterator/previousnode/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: NodeIterator.previousNode() -slug: Web/API/NodeIterator/previousNode -tags: - - API - - Arborescence - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/NodeIterator/previousNode ---- -
{{APIRef("DOM")}}
- -

La méthode NodeIterator.previousNode() renvoie le noeud précédent dans l'ensemble représenté par le {{domxref("NodeIterator")}} et déplace la position de l'itérateur vers l'arrière à l'intérieur de cet ensemble.

- -

Cette méthode renvoie null si le noeud courant est le premier noeud dans l'ensemble.

- -

Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une INVALID_STATE_ERR {{domxref("DOMException")}} si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.

- -

Syntaxe

- -
node = nodeIterator.previousNode();
-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false // cet argument facultatif n'est plus utilisé
-);
-currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant
-previousNode = nodeIterator.previousNode(); // même résultat, puisque nous sommes retournés au noeud précédent
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-previousnode', 'NodeIterator.previousNode')}}{{Spec2('DOM WHATWG')}}Comme detach() est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-previousNode', 'NodeIterator.previousNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeIterator.previousNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/nodeiterator/previousnode/index.md b/files/fr/web/api/nodeiterator/previousnode/index.md new file mode 100644 index 0000000000..e6c19c0c07 --- /dev/null +++ b/files/fr/web/api/nodeiterator/previousnode/index.md @@ -0,0 +1,69 @@ +--- +title: NodeIterator.previousNode() +slug: Web/API/NodeIterator/previousNode +tags: + - API + - Arborescence + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/NodeIterator/previousNode +--- +
{{APIRef("DOM")}}
+ +

La méthode NodeIterator.previousNode() renvoie le noeud précédent dans l'ensemble représenté par le {{domxref("NodeIterator")}} et déplace la position de l'itérateur vers l'arrière à l'intérieur de cet ensemble.

+ +

Cette méthode renvoie null si le noeud courant est le premier noeud dans l'ensemble.

+ +

Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une INVALID_STATE_ERR {{domxref("DOMException")}} si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.

+ +

Syntaxe

+ +
node = nodeIterator.previousNode();
+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false // cet argument facultatif n'est plus utilisé
+);
+currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant
+previousNode = nodeIterator.previousNode(); // même résultat, puisque nous sommes retournés au noeud précédent
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-previousnode', 'NodeIterator.previousNode')}}{{Spec2('DOM WHATWG')}}Comme detach() est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-previousNode', 'NodeIterator.previousNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeIterator.previousNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodeiterator/referencenode/index.html b/files/fr/web/api/nodeiterator/referencenode/index.html deleted file mode 100644 index b706873866..0000000000 --- a/files/fr/web/api/nodeiterator/referencenode/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: NodeIterator.referenceNode -slug: Web/API/NodeIterator/referenceNode -tags: - - API - - Arborescence - - DOM - - Itérateur - - Noeuds - - Propriétés -translation_of: Web/API/NodeIterator/referenceNode ---- -

{{APIRef("DOM")}}{{ SeeCompatTable }}

- -

La propriété en lecture seule NodeIterator.referenceNode renvoie le {{domxref("Node")}} auquel l'itérateur est ancré ; si de nouveaux noeuds sont insérés, l'itérateur reste ancré au noeud de référence spécifié par cette propriété.

- -

Syntaxe

- -
node = nodeIterator.referenceNode;
-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-node = nodeIterator.referenceNode;
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-referencenode', 'NodeIterator.referenceNode')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeIterator.referenceNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/nodeiterator/referencenode/index.md b/files/fr/web/api/nodeiterator/referencenode/index.md new file mode 100644 index 0000000000..b706873866 --- /dev/null +++ b/files/fr/web/api/nodeiterator/referencenode/index.md @@ -0,0 +1,60 @@ +--- +title: NodeIterator.referenceNode +slug: Web/API/NodeIterator/referenceNode +tags: + - API + - Arborescence + - DOM + - Itérateur + - Noeuds + - Propriétés +translation_of: Web/API/NodeIterator/referenceNode +--- +

{{APIRef("DOM")}}{{ SeeCompatTable }}

+ +

La propriété en lecture seule NodeIterator.referenceNode renvoie le {{domxref("Node")}} auquel l'itérateur est ancré ; si de nouveaux noeuds sont insérés, l'itérateur reste ancré au noeud de référence spécifié par cette propriété.

+ +

Syntaxe

+ +
node = nodeIterator.referenceNode;
+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+node = nodeIterator.referenceNode;
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-referencenode', 'NodeIterator.referenceNode')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeIterator.referenceNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodeiterator/root/index.html b/files/fr/web/api/nodeiterator/root/index.html deleted file mode 100644 index c3fcbf3a8b..0000000000 --- a/files/fr/web/api/nodeiterator/root/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: NodeIterator.root -slug: Web/API/NodeIterator/root -tags: - - API - - Arborescence - - DOM - - Itérateur - - Noeuds - - Propriété -translation_of: Web/API/NodeIterator/root ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule NodeIterator.root représente le {{DOMxref("Node")}} qui est la racine de ce que le {{DOMxref("NodeIterator")}} traverse.

- -

Syntaxe

- -
root = nodeIterator.root;
-
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-root = nodeIterator.root; // document.body dans ce cas
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-root', 'NodeIterator.root')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-root', 'NodeIterator.root')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeIterator.root")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/nodeiterator/root/index.md b/files/fr/web/api/nodeiterator/root/index.md new file mode 100644 index 0000000000..c3fcbf3a8b --- /dev/null +++ b/files/fr/web/api/nodeiterator/root/index.md @@ -0,0 +1,65 @@ +--- +title: NodeIterator.root +slug: Web/API/NodeIterator/root +tags: + - API + - Arborescence + - DOM + - Itérateur + - Noeuds + - Propriété +translation_of: Web/API/NodeIterator/root +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule NodeIterator.root représente le {{DOMxref("Node")}} qui est la racine de ce que le {{DOMxref("NodeIterator")}} traverse.

+ +

Syntaxe

+ +
root = nodeIterator.root;
+
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+root = nodeIterator.root; // document.body dans ce cas
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-root', 'NodeIterator.root')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-root', 'NodeIterator.root')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeIterator.root")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodeiterator/whattoshow/index.html b/files/fr/web/api/nodeiterator/whattoshow/index.html deleted file mode 100644 index 216eee5ac5..0000000000 --- a/files/fr/web/api/nodeiterator/whattoshow/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: NodeIterator.whatToShow -slug: Web/API/NodeIterator/whatToShow -tags: - - API - - Arborescence - - DOM - - Itérateur - - Noeuds - - Propriétés -translation_of: Web/API/NodeIterator/whatToShow ---- -
{{APIRef("DOM")}}
- -

La propriété en lecture seule NodeIterator.whatToShow est un unsigned integer (entier non signé) représentant un masque de bits désignant le type de noeuds qui doit être renvoyé par le {{domxref("NodeIterator")}}.

- -

Syntaxe

- -
var nodeTypes = nodeIterator.whatToShow;
-
- -

Les valeurs pouvant être combinées pour former le masque de bits sont :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
- -

Exemple

- -
var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-if( (nodeIterator.whatToShow == NodeFilter.SHOW_ALL) ||
-    (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) {
-    // nodeIterator affichera les commentaires
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-whattoshow', 'NodeIterator.whatToShow')}}{{Spec2('DOM WHATWG')}}Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-whatToShow', 'NodeIterator.whatToShow')}}{{Spec2('DOM2 Traversal_Range')}}Définitioni initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeIterator.whatToShow")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/nodeiterator/whattoshow/index.md b/files/fr/web/api/nodeiterator/whattoshow/index.md new file mode 100644 index 0000000000..216eee5ac5 --- /dev/null +++ b/files/fr/web/api/nodeiterator/whattoshow/index.md @@ -0,0 +1,145 @@ +--- +title: NodeIterator.whatToShow +slug: Web/API/NodeIterator/whatToShow +tags: + - API + - Arborescence + - DOM + - Itérateur + - Noeuds + - Propriétés +translation_of: Web/API/NodeIterator/whatToShow +--- +
{{APIRef("DOM")}}
+ +

La propriété en lecture seule NodeIterator.whatToShow est un unsigned integer (entier non signé) représentant un masque de bits désignant le type de noeuds qui doit être renvoyé par le {{domxref("NodeIterator")}}.

+ +

Syntaxe

+ +
var nodeTypes = nodeIterator.whatToShow;
+
+ +

Les valeurs pouvant être combinées pour former le masque de bits sont :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
+ +

Exemple

+ +
var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+if( (nodeIterator.whatToShow == NodeFilter.SHOW_ALL) ||
+    (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) {
+    // nodeIterator affichera les commentaires
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-nodeiterator-whattoshow', 'NodeIterator.whatToShow')}}{{Spec2('DOM WHATWG')}}Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-whatToShow', 'NodeIterator.whatToShow')}}{{Spec2('DOM2 Traversal_Range')}}Définitioni initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeIterator.whatToShow")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodelist/entries/index.html b/files/fr/web/api/nodelist/entries/index.html deleted file mode 100644 index 55a048203d..0000000000 --- a/files/fr/web/api/nodelist/entries/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: NodeList.entries() -slug: Web/API/NodeList/entries -tags: - - API - - DOM - - Iteration - - Liste - - Méthodes - - Node - - NodeList - - Noeuds -translation_of: Web/API/NodeList/entries ---- -
{{APIRef("DOM")}}
- -

La méthode NodeList.entries() renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet . Les valeurs sont des objets {{domxref("Node")}}.

- -

Syntaxe

- -
list.entries();
- -

Valeur retournée

- -

renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

- -

Exemple

- -
var node = document.createElement("div");
-var kid1 = document.createElement("p");
-var kid2 = document.createTextNode("hey");
-var kid3 = document.createElement("span");
-node.appendChild(kid1);
-node.appendChild(kid2);
-node.appendChild(kid3);
-
-var list = node.childNodes;
-
-// Utiliser for..of
-for (var entry of list.entries()) {
-  console.log(entry);
-}
-
- -

résultat :

- -
Array [ 0, <p> ]
-Array [ 1, #text "hey" ]
-Array [ 2, <span> ]
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-nodelist','entries() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.NodeList.entries")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/nodelist/entries/index.md b/files/fr/web/api/nodelist/entries/index.md new file mode 100644 index 0000000000..55a048203d --- /dev/null +++ b/files/fr/web/api/nodelist/entries/index.md @@ -0,0 +1,81 @@ +--- +title: NodeList.entries() +slug: Web/API/NodeList/entries +tags: + - API + - DOM + - Iteration + - Liste + - Méthodes + - Node + - NodeList + - Noeuds +translation_of: Web/API/NodeList/entries +--- +
{{APIRef("DOM")}}
+ +

La méthode NodeList.entries() renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet . Les valeurs sont des objets {{domxref("Node")}}.

+ +

Syntaxe

+ +
list.entries();
+ +

Valeur retournée

+ +

renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

+ +

Exemple

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Utiliser for..of
+for (var entry of list.entries()) {
+  console.log(entry);
+}
+
+ +

résultat :

+ +
Array [ 0, <p> ]
+Array [ 1, #text "hey" ]
+Array [ 2, <span> ]
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-nodelist','entries() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.NodeList.entries")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodelist/foreach/index.html b/files/fr/web/api/nodelist/foreach/index.html deleted file mode 100644 index 0a0eb9f1a8..0000000000 --- a/files/fr/web/api/nodelist/foreach/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: NodeList.prototype.forEach() -slug: Web/API/NodeList/forEach -tags: - - API - - DOM - - Liste - - Méthodes - - Noeuds -translation_of: Web/API/NodeList/forEach ---- -

{{APIRef("DOM")}}

- -

La méthode forEach() de l'interface {{domxref("NodeList")}} appelle le rappel donné en paramètre une fois pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.

- -

Syntaxe

- -
nodeList.forEach(callback[, thisArg]);
-
- -

Paramètres

- -
-
callback
-
Fonction à exécuter pour chaque élément, contenant éventuellement 3 arguments : -
-
currentValue
-
L'élément en cours de traitement dans la NodeList.
-
currentIndex
-
L'index de l'élément en cours de traitement dans la NodeList.
-
listObj
-
L'objet NodeList auquel forEach() est appliqué.
-
-
-
thisArg {{Optional_inline}}
-
Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du callback (rappel).
-
- -

Valeur retournée

- -

{{jsxref('undefined')}} (indéfini).

- -

Exceptions

- -

Aucune.

- -

Exemple

- -
var node = document.createElement("div");
-var kid1 = document.createElement("p");
-var kid2 = document.createTextNode("hey");
-var kid3 = document.createElement("span");
-
-node.appendChild(kid1);
-node.appendChild(kid2);
-node.appendChild(kid3);
-
-var list = node.childNodes;
-
-list.forEach(
-  function(currentValue, currentIndex, listObj) {
-    console.log(currentValue + ', ' + currentIndex + ', ' + this);
-  },
-  'myThisArg'
-);
- -

résultat :

- -
[object HTMLParagraphElement], 0, myThisArg
-[object Text], 1, myThisArg
-[object HTMLSpanElement], 2, myThisArg
- -

Polyfill

- -

Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les navigateurs prenant en charge ES5 :

- -
if (window.NodeList && !NodeList.prototype.forEach) {
-    NodeList.prototype.forEach = function (callback, thisArg) {
-        thisArg = thisArg || window;
-        for (var i = 0; i < this.length; i++) {
-            callback.call(thisArg, this[i], i, this);
-        }
-    };
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }}Définit NodeList comme iterable<Node> (noeud itérable)
{{SpecName("WebIDL", "#es-forEach", "forEach")}}{{Spec2("WebIDL")}}Définit forEach sur les déclarations iterable (itératives)
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.NodeList.forEach")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/nodelist/foreach/index.md b/files/fr/web/api/nodelist/foreach/index.md new file mode 100644 index 0000000000..0a0eb9f1a8 --- /dev/null +++ b/files/fr/web/api/nodelist/foreach/index.md @@ -0,0 +1,123 @@ +--- +title: NodeList.prototype.forEach() +slug: Web/API/NodeList/forEach +tags: + - API + - DOM + - Liste + - Méthodes + - Noeuds +translation_of: Web/API/NodeList/forEach +--- +

{{APIRef("DOM")}}

+ +

La méthode forEach() de l'interface {{domxref("NodeList")}} appelle le rappel donné en paramètre une fois pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.

+ +

Syntaxe

+ +
nodeList.forEach(callback[, thisArg]);
+
+ +

Paramètres

+ +
+
callback
+
Fonction à exécuter pour chaque élément, contenant éventuellement 3 arguments : +
+
currentValue
+
L'élément en cours de traitement dans la NodeList.
+
currentIndex
+
L'index de l'élément en cours de traitement dans la NodeList.
+
listObj
+
L'objet NodeList auquel forEach() est appliqué.
+
+
+
thisArg {{Optional_inline}}
+
Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du callback (rappel).
+
+ +

Valeur retournée

+ +

{{jsxref('undefined')}} (indéfini).

+ +

Exceptions

+ +

Aucune.

+ +

Exemple

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);
+ +

résultat :

+ +
[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg
+ +

Polyfill

+ +

Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les navigateurs prenant en charge ES5 :

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i < this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }}Définit NodeList comme iterable<Node> (noeud itérable)
{{SpecName("WebIDL", "#es-forEach", "forEach")}}{{Spec2("WebIDL")}}Définit forEach sur les déclarations iterable (itératives)
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.NodeList.forEach")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodelist/index.html b/files/fr/web/api/nodelist/index.html deleted file mode 100644 index 38e9a6121e..0000000000 --- a/files/fr/web/api/nodelist/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: NodeList -slug: Web/API/NodeList -tags: - - API - - DOM - - Interface - - Liste - - Noeuds -translation_of: Web/API/NodeList ---- -

{{APIRef("DOM")}}

- -

Les objets NodeList sont des collections de nœuds comme celles retournées par {{domxref("Node.childNodes")}} et la méthode {{domxref("document.querySelectorAll()")}}.

- -
-

Note : Bien que NodeList ne soit pas un tableau (Array), il est possible d'itérer dessus en utilisant forEach(). Il peut également être converti en tableau (Array) en utilisant {{jsxref("Array.from()")}}.

- -

Néanmoins certains vieux navigateurs n'ont pas encore implémenté NodeList.forEach() ni Array.from(). Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document).

-
- -

Dans certains cas, la NodeList est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple,  {{domxref("Node.childNodes")}} est en direct :

- -
var parent = document.getElementById('parent');
-var child_nodes = parent.childNodes;
-console.log(child_nodes.length); // supposons "2"
-parent.appendChild(document.createElement('div'));
-console.log(child_nodes.length); // devrait afficher "3"
- -

Dans d'autres cas, la NodeList est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}}  renvoie une NodeList statique.

- -

Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste.

- -

Propriétés

- -
-
{{domxref("NodeList.length")}}
-
Le nombre de nœuds dans la NodeList.
-
- -

Méthodes

- -
-
{{domxref("NodeList.item()")}}
-
Retourne un élément de la liste par son index ou null si l'index est en dehors des limites. Équivalent à nodeList[idx] (qui renvoie à la place undefined quand  idx est hors des limites).
-
{{domxref("NodeList.entries()")}}
-
renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.
-
{{domxref("NodeList.forEach()")}}
-
exécute une fonction fournie une fois par élément NodeList.
-
{{domxref("NodeList.keys()")}}
-
renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.
-
{{domxref("NodeList.values()")}}
-
renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet.
-
- -

Exemple

- -

Il est possible de boucler sur les éléments d'une NodeList en utilisant :

- -
for (var i = 0; i < myNodeList.length; ++i) {
-  var item = myNodeList[i];  // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript
-}
-
- -

Ne soyez pas tenté d'utiliser for… in ou for each… in pour énumérer les éléments de la liste, car cela énumère également la taille (length) et les propriétés du NodeList et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, for… in ne garantit pas de visiter les propriétés dans un ordre particulier.

- -

Les boucles for… of boucleront correctement sur les objets NodeList :

- -
var list = document.querySelectorAll( 'input[type=checkbox]' );
-for (var item of list) {
-  item.checked = true;
-}
- -

Les navigateurs récents prennent également en charge les méthodes d'itérateur {{domxref("NodeList.forEach()", "forEach()")}}, aussi bien que {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}} et {{domxref("NodeList.keys()", "keys()")}}.

- -

Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération.

- -
var list = document.querySelectorAll( 'input[type=checkbox]' );
-Array.prototype.forEach.call(list, function (item) {
-  item.checked = true;
-});
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM3 Core') }} 
{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM2 Core') }} 
{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM1') }}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.NodeList")}}

diff --git a/files/fr/web/api/nodelist/index.md b/files/fr/web/api/nodelist/index.md new file mode 100644 index 0000000000..38e9a6121e --- /dev/null +++ b/files/fr/web/api/nodelist/index.md @@ -0,0 +1,119 @@ +--- +title: NodeList +slug: Web/API/NodeList +tags: + - API + - DOM + - Interface + - Liste + - Noeuds +translation_of: Web/API/NodeList +--- +

{{APIRef("DOM")}}

+ +

Les objets NodeList sont des collections de nœuds comme celles retournées par {{domxref("Node.childNodes")}} et la méthode {{domxref("document.querySelectorAll()")}}.

+ +
+

Note : Bien que NodeList ne soit pas un tableau (Array), il est possible d'itérer dessus en utilisant forEach(). Il peut également être converti en tableau (Array) en utilisant {{jsxref("Array.from()")}}.

+ +

Néanmoins certains vieux navigateurs n'ont pas encore implémenté NodeList.forEach() ni Array.from(). Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document).

+
+ +

Dans certains cas, la NodeList est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple,  {{domxref("Node.childNodes")}} est en direct :

+ +
var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // supposons "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // devrait afficher "3"
+ +

Dans d'autres cas, la NodeList est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}}  renvoie une NodeList statique.

+ +

Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste.

+ +

Propriétés

+ +
+
{{domxref("NodeList.length")}}
+
Le nombre de nœuds dans la NodeList.
+
+ +

Méthodes

+ +
+
{{domxref("NodeList.item()")}}
+
Retourne un élément de la liste par son index ou null si l'index est en dehors des limites. Équivalent à nodeList[idx] (qui renvoie à la place undefined quand  idx est hors des limites).
+
{{domxref("NodeList.entries()")}}
+
renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.
+
{{domxref("NodeList.forEach()")}}
+
exécute une fonction fournie une fois par élément NodeList.
+
{{domxref("NodeList.keys()")}}
+
renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.
+
{{domxref("NodeList.values()")}}
+
renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet.
+
+ +

Exemple

+ +

Il est possible de boucler sur les éléments d'une NodeList en utilisant :

+ +
for (var i = 0; i < myNodeList.length; ++i) {
+  var item = myNodeList[i];  // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript
+}
+
+ +

Ne soyez pas tenté d'utiliser for… in ou for each… in pour énumérer les éléments de la liste, car cela énumère également la taille (length) et les propriétés du NodeList et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, for… in ne garantit pas de visiter les propriétés dans un ordre particulier.

+ +

Les boucles for… of boucleront correctement sur les objets NodeList :

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}
+ +

Les navigateurs récents prennent également en charge les méthodes d'itérateur {{domxref("NodeList.forEach()", "forEach()")}}, aussi bien que {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}} et {{domxref("NodeList.keys()", "keys()")}}.

+ +

Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération.

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM3 Core') }} 
{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM2 Core') }} 
{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM1') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.NodeList")}}

diff --git a/files/fr/web/api/nodelist/item/index.html b/files/fr/web/api/nodelist/item/index.html deleted file mode 100644 index 8cee3e9216..0000000000 --- a/files/fr/web/api/nodelist/item/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: NodeList.item() -slug: Web/API/NodeList/item -tags: - - API - - DOM - - Liste - - Méthodes - - Noeuds -translation_of: Web/API/NodeList/item ---- -
{{APIRef("DOM")}}
- -

Renvoie un noeud depuis une NodeList par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur null est renvoyée si l'index est hors des limites et une TypeError est lancée si aucun argument n'est fourni.

- -

Syntaxe

- -
nodeItem = nodeList.item(index)
-
- - - -

Syntaxe alternative

- -

JavaScript propose également une syntaxe semblable à un tableau pour obtenir un élément d'une liste de nœuds par index :

- -
nodeItem = nodeList[index]
-
- -

Exemple

- -
var tables = document.getElementsByTagName("table");
-var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le second tableau dans DOM
-
- -

Spécification

- -

DOM Level 1 Core: NodeList.item()

- -

DOM Level 2 Core: NodeList.item()

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeList.item")}}

diff --git a/files/fr/web/api/nodelist/item/index.md b/files/fr/web/api/nodelist/item/index.md new file mode 100644 index 0000000000..8cee3e9216 --- /dev/null +++ b/files/fr/web/api/nodelist/item/index.md @@ -0,0 +1,50 @@ +--- +title: NodeList.item() +slug: Web/API/NodeList/item +tags: + - API + - DOM + - Liste + - Méthodes + - Noeuds +translation_of: Web/API/NodeList/item +--- +
{{APIRef("DOM")}}
+ +

Renvoie un noeud depuis une NodeList par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur null est renvoyée si l'index est hors des limites et une TypeError est lancée si aucun argument n'est fourni.

+ +

Syntaxe

+ +
nodeItem = nodeList.item(index)
+
+ + + +

Syntaxe alternative

+ +

JavaScript propose également une syntaxe semblable à un tableau pour obtenir un élément d'une liste de nœuds par index :

+ +
nodeItem = nodeList[index]
+
+ +

Exemple

+ +
var tables = document.getElementsByTagName("table");
+var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le second tableau dans DOM
+
+ +

Spécification

+ +

DOM Level 1 Core: NodeList.item()

+ +

DOM Level 2 Core: NodeList.item()

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeList.item")}}

diff --git a/files/fr/web/api/nodelist/keys/index.html b/files/fr/web/api/nodelist/keys/index.html deleted file mode 100644 index 79da27b5b6..0000000000 --- a/files/fr/web/api/nodelist/keys/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: NodeList.keys() -slug: Web/API/NodeList/keys -tags: - - API - - DOM - - Liste - - Méthodes - - Noeuds -translation_of: Web/API/NodeList/keys ---- -

{{APIRef("DOM")}}

- -

La méthode NodeList.keys() renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des unsigned integer (entier non signé).

- -

Syntaxe

- -
nodeList.keys();
- -

Valeur retournée

- -

Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

- -

Exemple

- -
var node = document.createElement("div");
-var kid1 = document.createElement("p");
-var kid2 = document.createTextNode("hey");
-var kid3 = document.createElement("span");
-
-node.appendChild(kid1);
-node.appendChild(kid2);
-node.appendChild(kid3);
-
-var list = node.childNodes;
-
-// Utilisation de for..of
-for(var key of list.keys()) {
-   console.log(key);
-}
-
- -

Le résultat est :

- -
0
-1
-2
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-nodelist','keys() (as iterable)')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.NodeList.keys")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/nodelist/keys/index.md b/files/fr/web/api/nodelist/keys/index.md new file mode 100644 index 0000000000..79da27b5b6 --- /dev/null +++ b/files/fr/web/api/nodelist/keys/index.md @@ -0,0 +1,80 @@ +--- +title: NodeList.keys() +slug: Web/API/NodeList/keys +tags: + - API + - DOM + - Liste + - Méthodes + - Noeuds +translation_of: Web/API/NodeList/keys +--- +

{{APIRef("DOM")}}

+ +

La méthode NodeList.keys() renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des unsigned integer (entier non signé).

+ +

Syntaxe

+ +
nodeList.keys();
+ +

Valeur retournée

+ +

Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

+ +

Exemple

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Utilisation de for..of
+for(var key of list.keys()) {
+   console.log(key);
+}
+
+ +

Le résultat est :

+ +
0
+1
+2
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-nodelist','keys() (as iterable)')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.NodeList.keys")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/nodelist/length/index.html b/files/fr/web/api/nodelist/length/index.html deleted file mode 100644 index 0bc3206cd6..0000000000 --- a/files/fr/web/api/nodelist/length/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: NodeList.length -slug: Web/API/NodeList/length -tags: - - API - - DOM - - Liste - - Noeuds - - Propriétés -translation_of: Web/API/NodeList/length ---- -
{{APIRef("DOM")}}
- -

Résumé

- -

length renvoie le nombre d'éléments dans une NodeList.

- -

Syntaxe

- -
numItems =nodeList.length
-
- - - -

Exemple

- -
// tous les paragraphes dans le document
-var items = document.getElementsByTagName("p");
-// pour chaque élément de la liste,
-// ajouter l'élément entier en tant que chaîne de HTML
-var gross = "";
-for (var i = 0; i < items.length; i++) {
-  gross += items[i].innerHTML;
-}
-// gross est maintenant tout le HTML pour les paragraphes
-
- -

Notes

- -

Malgré l'emplacement de cette page dans la référence, length n'est pas une propriété d'Element, mais plutôt d'une NodeList. Les objets NodeList sont retournés à partir des méthodes DOM comme document.getElementsByTagName.

- -

length est une propriété très commune dans la programmation de DOM. Il est très courant de tester la longueur d'une liste (pour voir si elle existe) et de l'utiliser comme itérateur dans une boucle for, comme dans l'exemple ci-dessus.

- -

Spécification

- -

length

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.NodeList.length")}}

diff --git a/files/fr/web/api/nodelist/length/index.md b/files/fr/web/api/nodelist/length/index.md new file mode 100644 index 0000000000..0bc3206cd6 --- /dev/null +++ b/files/fr/web/api/nodelist/length/index.md @@ -0,0 +1,54 @@ +--- +title: NodeList.length +slug: Web/API/NodeList/length +tags: + - API + - DOM + - Liste + - Noeuds + - Propriétés +translation_of: Web/API/NodeList/length +--- +
{{APIRef("DOM")}}
+ +

Résumé

+ +

length renvoie le nombre d'éléments dans une NodeList.

+ +

Syntaxe

+ +
numItems =nodeList.length
+
+ + + +

Exemple

+ +
// tous les paragraphes dans le document
+var items = document.getElementsByTagName("p");
+// pour chaque élément de la liste,
+// ajouter l'élément entier en tant que chaîne de HTML
+var gross = "";
+for (var i = 0; i < items.length; i++) {
+  gross += items[i].innerHTML;
+}
+// gross est maintenant tout le HTML pour les paragraphes
+
+ +

Notes

+ +

Malgré l'emplacement de cette page dans la référence, length n'est pas une propriété d'Element, mais plutôt d'une NodeList. Les objets NodeList sont retournés à partir des méthodes DOM comme document.getElementsByTagName.

+ +

length est une propriété très commune dans la programmation de DOM. Il est très courant de tester la longueur d'une liste (pour voir si elle existe) et de l'utiliser comme itérateur dans une boucle for, comme dans l'exemple ci-dessus.

+ +

Spécification

+ +

length

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.NodeList.length")}}

diff --git a/files/fr/web/api/nodelist/values/index.html b/files/fr/web/api/nodelist/values/index.html deleted file mode 100644 index 74cf0f4ad5..0000000000 --- a/files/fr/web/api/nodelist/values/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: NodeList.values() -slug: Web/API/NodeList/values -tags: - - API - - DOM - - Itérateur - - Liste - - Méthodes - - Noeuds -translation_of: Web/API/NodeList/values ---- -

{{APIRef("DOM")}}

- -

La méthode NodeList.values() renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("Node")}} (noeud).

- -

Syntaxe

- -
nodeList.values();
- -

Valeur retournée

- -

Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

- -

Exemple

- -
var node = document.createElement("div");
-var kid1 = document.createElement("p");
-var kid2 = document.createTextNode("hey");
-var kid3 = document.createElement("span");
-
-node.appendChild(kid1);
-node.appendChild(kid2);
-node.appendChild(kid3);
-
-var list = node.childNodes;
-
-// Utilisation de for..of
-for(var value of list.values()) {
-  console.log(value);
-}
-
- -

Le résultat est :

- -
<p>
-#text "hey"
-<span>
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-nodelist','values() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.NodeList.values")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/nodelist/values/index.md b/files/fr/web/api/nodelist/values/index.md new file mode 100644 index 0000000000..74cf0f4ad5 --- /dev/null +++ b/files/fr/web/api/nodelist/values/index.md @@ -0,0 +1,81 @@ +--- +title: NodeList.values() +slug: Web/API/NodeList/values +tags: + - API + - DOM + - Itérateur + - Liste + - Méthodes + - Noeuds +translation_of: Web/API/NodeList/values +--- +

{{APIRef("DOM")}}

+ +

La méthode NodeList.values() renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("Node")}} (noeud).

+ +

Syntaxe

+ +
nodeList.values();
+ +

Valeur retournée

+ +

Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.

+ +

Exemple

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Utilisation de for..of
+for(var value of list.values()) {
+  console.log(value);
+}
+
+ +

Le résultat est :

+ +
<p>
+#text "hey"
+<span>
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#interface-nodelist','values() (as iterable<Node>)')}}{{Spec2('DOM WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.NodeList.values")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/notification/actions/index.html b/files/fr/web/api/notification/actions/index.html deleted file mode 100644 index e65543b120..0000000000 --- a/files/fr/web/api/notification/actions/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Notification.actions -slug: Web/API/notification/actions -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - actions -translation_of: Web/API/Notification/actions ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété actions en lecture seule de l'interface {{domxref ("Notification")}} renvoie la liste des {{domxref ("NotificationAction")}} objets définis à l'aide de l'option actions lors de la création de la notification à l'aide du constructeur {{domxref("Notification.Notification","Notification()")}}.

- -

Il s'agit d'une liste des actions définies par l'application que l'utilisateur peut choisir de prendre directement depuis le contexte d'une notification.

- -
-

Note: Le périphérique et l'agent utilisateur peuvent ne pouvoir afficher qu'un nombre limité d'actions (en raison, par exemple, d'un espace d'écran limité). Cette limite peut être déduite de {{DOMxRef ("Notification.maxActions")}}.

-
- -

Syntaxe

- -
Notification.actions
- -

Valeur

- -

Un tableau en lecture seule d'objets {{domxref ("NotificationAction")}}, chacun décrivant une action unique que l'utilisateur peut choisir dans une notification.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-actions','actions')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.actions")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/actions/index.md b/files/fr/web/api/notification/actions/index.md new file mode 100644 index 0000000000..e65543b120 --- /dev/null +++ b/files/fr/web/api/notification/actions/index.md @@ -0,0 +1,58 @@ +--- +title: Notification.actions +slug: Web/API/notification/actions +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - actions +translation_of: Web/API/Notification/actions +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété actions en lecture seule de l'interface {{domxref ("Notification")}} renvoie la liste des {{domxref ("NotificationAction")}} objets définis à l'aide de l'option actions lors de la création de la notification à l'aide du constructeur {{domxref("Notification.Notification","Notification()")}}.

+ +

Il s'agit d'une liste des actions définies par l'application que l'utilisateur peut choisir de prendre directement depuis le contexte d'une notification.

+ +
+

Note: Le périphérique et l'agent utilisateur peuvent ne pouvoir afficher qu'un nombre limité d'actions (en raison, par exemple, d'un espace d'écran limité). Cette limite peut être déduite de {{DOMxRef ("Notification.maxActions")}}.

+
+ +

Syntaxe

+ +
Notification.actions
+ +

Valeur

+ +

Un tableau en lecture seule d'objets {{domxref ("NotificationAction")}}, chacun décrivant une action unique que l'utilisateur peut choisir dans une notification.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-actions','actions')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.actions")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/badge/index.html b/files/fr/web/api/notification/badge/index.html deleted file mode 100644 index 319ba58bb9..0000000000 --- a/files/fr/web/api/notification/badge/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Notification.badge -slug: Web/API/notification/badge -tags: - - API Notification - - API badge - - Notification - - Notifications - - Propriété - - Reference -translation_of: Web/API/Notification/badge ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété badge de l'interface {{domxref ("Notification")}} renvoie l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.

- -

Syntaxe

- -
const url = Notification.badge
- -

Valeur

- -

Une {{domxref('USVString')}} contenant une URL.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-badge','badge')}}{{Spec2('Web Notifications')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.badge")}}

diff --git a/files/fr/web/api/notification/badge/index.md b/files/fr/web/api/notification/badge/index.md new file mode 100644 index 0000000000..319ba58bb9 --- /dev/null +++ b/files/fr/web/api/notification/badge/index.md @@ -0,0 +1,44 @@ +--- +title: Notification.badge +slug: Web/API/notification/badge +tags: + - API Notification + - API badge + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/badge +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété badge de l'interface {{domxref ("Notification")}} renvoie l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.

+ +

Syntaxe

+ +
const url = Notification.badge
+ +

Valeur

+ +

Une {{domxref('USVString')}} contenant une URL.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-badge','badge')}}{{Spec2('Web Notifications')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.badge")}}

diff --git a/files/fr/web/api/notification/body/index.html b/files/fr/web/api/notification/body/index.html deleted file mode 100644 index e19c579157..0000000000 --- a/files/fr/web/api/notification/body/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Notification.body -slug: Web/API/notification/body -tags: - - API - - API Notifications - - Corps - - Notification - - Notifications - - Propriété - - Reference -translation_of: Web/API/Notification/body ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule body de l'interface {{domxref ("Notification")}} est la chaîne de caractères qui correspond au corps de la notification, comme définis à l'aide de l'option body lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.

- -

Syntaxe

- -
Notification.body
-
- -

Valeur

- -

Une {{domxref("DOMString")}} contenant le corps de la notification.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-body','body')}}{{Spec2('Web Notifications')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.body")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/body/index.md b/files/fr/web/api/notification/body/index.md new file mode 100644 index 0000000000..e19c579157 --- /dev/null +++ b/files/fr/web/api/notification/body/index.md @@ -0,0 +1,52 @@ +--- +title: Notification.body +slug: Web/API/notification/body +tags: + - API + - API Notifications + - Corps + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/body +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule body de l'interface {{domxref ("Notification")}} est la chaîne de caractères qui correspond au corps de la notification, comme définis à l'aide de l'option body lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.

+ +

Syntaxe

+ +
Notification.body
+
+ +

Valeur

+ +

Une {{domxref("DOMString")}} contenant le corps de la notification.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-body','body')}}{{Spec2('Web Notifications')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.body")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/close/index.html b/files/fr/web/api/notification/close/index.html deleted file mode 100644 index 359bf36dda..0000000000 --- a/files/fr/web/api/notification/close/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Notification.close() -slug: Web/API/notification/close -tags: - - API - - API Notifications - - Méthode - - Notification - - Notifications - - Reference - - close - - fermeture -translation_of: Web/API/Notification/close ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La méthode close() de l'interface {{domxref("Notification")}} est utilisée pour fermer / supprimer une notification précédemment affichée.

- -
-

Note: Cette API ne doit pas être utilisée uniquement pour supprimer la notification de l'écran après un délai fixe, car cette méthode supprimera également la notification de toute barre de notification, empêchant ainsi les utilisateurs d'interagir avec elle après son affichage initial. Une utilisation valable de cette API serait de supprimer une notification qui n'est plus pertinente (par exemple, l'utilisateur a déjà lu la notification sur la page Web dans le cas d'une application de messagerie ou la chanson suivante est déjà en cours de lecture dans une application musicale).

-
- -

Syntaxe

- -
Notification.close()
- -

Paramètres

- -

Aucun.

- -

Returns

- -

Void.

- -

Exemples

- -

Dans l'extrait de code suivant, nous avons une simple fonction qui, lorsqu'elle est appelée, crée un objet options, puis de celui-ci une nouvelle notification. À la fin de la fonction, elle appelle également close() dans une fonction {{domxref ("EventTarget.addEventListener", "addEventListener ()")}} pour supprimer la notification lorsque le contenu pertinent a été lu sur la page Web.

- -
function spawnNotification(theBody, theIcon, theTitle) {
-  const options = {
-    body: theBody,
-    icon: theIcon
-  }
-
-  const n = new Notification(theTitle, options)
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') {
-      // The tab has become visible so clear the now-stale Notification.
-      n.close()
-    }
-  })
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.close")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/close/index.md b/files/fr/web/api/notification/close/index.md new file mode 100644 index 0000000000..359bf36dda --- /dev/null +++ b/files/fr/web/api/notification/close/index.md @@ -0,0 +1,80 @@ +--- +title: Notification.close() +slug: Web/API/notification/close +tags: + - API + - API Notifications + - Méthode + - Notification + - Notifications + - Reference + - close + - fermeture +translation_of: Web/API/Notification/close +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La méthode close() de l'interface {{domxref("Notification")}} est utilisée pour fermer / supprimer une notification précédemment affichée.

+ +
+

Note: Cette API ne doit pas être utilisée uniquement pour supprimer la notification de l'écran après un délai fixe, car cette méthode supprimera également la notification de toute barre de notification, empêchant ainsi les utilisateurs d'interagir avec elle après son affichage initial. Une utilisation valable de cette API serait de supprimer une notification qui n'est plus pertinente (par exemple, l'utilisateur a déjà lu la notification sur la page Web dans le cas d'une application de messagerie ou la chanson suivante est déjà en cours de lecture dans une application musicale).

+
+ +

Syntaxe

+ +
Notification.close()
+ +

Paramètres

+ +

Aucun.

+ +

Returns

+ +

Void.

+ +

Exemples

+ +

Dans l'extrait de code suivant, nous avons une simple fonction qui, lorsqu'elle est appelée, crée un objet options, puis de celui-ci une nouvelle notification. À la fin de la fonction, elle appelle également close() dans une fonction {{domxref ("EventTarget.addEventListener", "addEventListener ()")}} pour supprimer la notification lorsque le contenu pertinent a été lu sur la page Web.

+ +
function spawnNotification(theBody, theIcon, theTitle) {
+  const options = {
+    body: theBody,
+    icon: theIcon
+  }
+
+  const n = new Notification(theTitle, options)
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      // The tab has become visible so clear the now-stale Notification.
+      n.close()
+    }
+  })
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.close")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/data/index.html b/files/fr/web/api/notification/data/index.html deleted file mode 100644 index 22b3b01747..0000000000 --- a/files/fr/web/api/notification/data/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Notification.data -slug: Web/API/notification/data -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - données -translation_of: Web/API/Notification/data ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule data de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option data  lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}.

- -

Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification.

- -

Syntaxe

- -
Notification.data
-
- -

Valeur

- -

Un clone structuré.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-data','data')}}{{Spec2('Web Notifications')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.data")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/data/index.md b/files/fr/web/api/notification/data/index.md new file mode 100644 index 0000000000..22b3b01747 --- /dev/null +++ b/files/fr/web/api/notification/data/index.md @@ -0,0 +1,54 @@ +--- +title: Notification.data +slug: Web/API/notification/data +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - données +translation_of: Web/API/Notification/data +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule data de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option data  lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}.

+ +

Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification.

+ +

Syntaxe

+ +
Notification.data
+
+ +

Valeur

+ +

Un clone structuré.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-data','data')}}{{Spec2('Web Notifications')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.data")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/dir/index.html b/files/fr/web/api/notification/dir/index.html deleted file mode 100644 index 7fed8f84dd..0000000000 --- a/files/fr/web/api/notification/dir/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Notification.dir -slug: Web/API/notification/dir -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - direction -translation_of: Web/API/Notification/dir ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule dir de l'interface {{domxref ("Notification")}} indique le sens du texte de la notification, définis à l'aide de l'option dir lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.

- -

Syntaxe

- -
Notification.dir
-
- -

Valeur

- -

Une {{domxref ("DOMString")}} spécifiant la direction du texte. Les valeurs possibles sont:

- - - -
-

Note : La plupart des navigateurs semblent ignorer les paramètres explicites de ltr et rtl, et utilisent simplement le paramètre à l'échelle du navigateur.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-dir','dir')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.dir")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/dir/index.md b/files/fr/web/api/notification/dir/index.md new file mode 100644 index 0000000000..7fed8f84dd --- /dev/null +++ b/files/fr/web/api/notification/dir/index.md @@ -0,0 +1,62 @@ +--- +title: Notification.dir +slug: Web/API/notification/dir +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - direction +translation_of: Web/API/Notification/dir +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule dir de l'interface {{domxref ("Notification")}} indique le sens du texte de la notification, définis à l'aide de l'option dir lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.

+ +

Syntaxe

+ +
Notification.dir
+
+ +

Valeur

+ +

Une {{domxref ("DOMString")}} spécifiant la direction du texte. Les valeurs possibles sont:

+ + + +
+

Note : La plupart des navigateurs semblent ignorer les paramètres explicites de ltr et rtl, et utilisent simplement le paramètre à l'échelle du navigateur.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-dir','dir')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.dir")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/icon/index.html b/files/fr/web/api/notification/icon/index.html deleted file mode 100644 index 8b25811ea0..0000000000 --- a/files/fr/web/api/notification/icon/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Notification.icon -slug: Web/API/notification/icon -tags: - - API - - API Notifications - - Icône - - Notification - - Notifications - - Propriété - - Reference -translation_of: Web/API/Notification/icon ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule icon de l'interface {{domxref ("Notification")}} contient l'URL d'une icône à afficher dans le cadre de la notification, comme définis à l'aide de l'option icon lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.

- -

Syntaxe

- -
Notification.icon
-
- -

Valeur

- -

Une {{domxref("USVString")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-icon','icon')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.icon")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/icon/index.md b/files/fr/web/api/notification/icon/index.md new file mode 100644 index 0000000000..8b25811ea0 --- /dev/null +++ b/files/fr/web/api/notification/icon/index.md @@ -0,0 +1,52 @@ +--- +title: Notification.icon +slug: Web/API/notification/icon +tags: + - API + - API Notifications + - Icône + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/icon +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule icon de l'interface {{domxref ("Notification")}} contient l'URL d'une icône à afficher dans le cadre de la notification, comme définis à l'aide de l'option icon lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.

+ +

Syntaxe

+ +
Notification.icon
+
+ +

Valeur

+ +

Une {{domxref("USVString")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-icon','icon')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.icon")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/image/index.html b/files/fr/web/api/notification/image/index.html deleted file mode 100644 index fa57345f6e..0000000000 --- a/files/fr/web/api/notification/image/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Notification.image -slug: Web/API/notification/image -tags: - - API - - API Notifications - - Image - - Notification - - Notifications - - Propriété - - Reference -translation_of: Web/API/Notification/image ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule image de l'interface {{domxref ("Notification")}} contient l'URL d'une image à afficher dans le cadre de la notification, comme définis à l'aide de l'option image lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.

- -

Syntaxe

- -
Notification.image
- -

Valeur

- -

Une {{domxref("USVString")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#image-resource','image')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.image")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/image/index.md b/files/fr/web/api/notification/image/index.md new file mode 100644 index 0000000000..fa57345f6e --- /dev/null +++ b/files/fr/web/api/notification/image/index.md @@ -0,0 +1,51 @@ +--- +title: Notification.image +slug: Web/API/notification/image +tags: + - API + - API Notifications + - Image + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/image +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule image de l'interface {{domxref ("Notification")}} contient l'URL d'une image à afficher dans le cadre de la notification, comme définis à l'aide de l'option image lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.

+ +

Syntaxe

+ +
Notification.image
+ +

Valeur

+ +

Une {{domxref("USVString")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#image-resource','image')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.image")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/index.html b/files/fr/web/api/notification/index.html deleted file mode 100644 index f732fae408..0000000000 --- a/files/fr/web/api/notification/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Notification -slug: Web/API/notification -tags: - - API - - API Notifications - - Interface - - Notifications - - Reference -translation_of: Web/API/Notification ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

L'interface Notification de l'API Notifications est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.

- -

Constructeur

- -
-
{{domxref("Notification.Notification", "Notification()")}}
-
Créer une nouvelle instance de l'object Notification.
-
- -

Propriétés

- -

Propriétés statiques

- -

Ces propriétés ne sont disponibles que sur l'objet Notification lui-même.

- -
-
{{domxref("Notification.permission")}} {{readonlyinline}}
-

Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont:

-
    -
  • denied — L'utilisateur refuse d'afficher des notifications.
    • -
  • granted — L'utilisateur accepte d'afficher des notifications.
    • -
  • default — Le choix de l'utilisateur est inconnu et donc le navigateur agira comme si la valeur était refusée.
    • -
-
-
{{domxref("Notification.maxActions")}} {{readonlyinline}}
-
Le nombre maximal d'actions pris en charge par l'appareil et l'agent utilisateur.
-
- -

Propriétés de l'instance

- -

Ces propriétés ne sont disponibles que sur les instances de l'objet Notification.

- -
-
{{domxref("Notification.actions")}} {{readonlyinline}}
-
Tableau d'actions de la notification comme spécifié dans le paramètre options du constructeur.
-
{{domxref("Notification.badge")}} {{readonlyinline}}
-
L'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
-
{{domxref("Notification.body")}} {{readonlyinline}}
-
Une chaîne représentant le corps de la notification telle que spécifiée dans le paramètre options du constructeur.
-
{{domxref("Notification.data")}} {{readonlyinline}}
-
Renvoie un clone structuré des données de la notification.
-
{{domxref("Notification.dir")}} {{readonlyinline}}
-
La direction du texte de la notification comme spécifié dans le paramètre options du constructeur.
-
{{domxref("Notification.lang")}} {{readonlyinline}}
-
Code de langue de la notification tel que spécifié dans le paramètre options du constructeur.
-
{{domxref("Notification.tag")}} {{readonlyinline}}
-
L'ID de la notification (le cas échéant) tel que spécifié dans le paramètre options du constructeur.
-
{{domxref("Notification.icon")}} {{readonlyinline}}
-
L'URL de l'image utilisée comme icône de la notification comme spécifié dans le paramètre options du constructeur.
-
{{domxref("Notification.image")}} {{readonlyinline}}
-
L'URL d'une image à afficher dans le cadre de la notification, comme spécifié dans le paramètre options du constructeur.
-
{{domxref("Notification.renotify")}} {{readonlyinline}}
-
Spécifie si l'utilisateur doit être averti après qu'une nouvelle notification remplace l'ancienne.
-
{{domxref("Notification.requireInteraction")}} {{readonlyinline}}
-
Un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement.
-
{{domxref("Notification.silent")}} {{readonlyinline}}
-
Spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil.
-
{{domxref("Notification.timestamp")}} {{readonlyinline}}
-
Spécifie l'heure à laquelle une notification est créée ou applicable (passée, présente ou future).
-
{{domxref("Notification.title")}} {{readonlyinline}}
-
Le titre de la notification tel que spécifié dans le premier paramètre du constructeur.
-
{{domxref("Notification.vibrate")}} {{readonlyinline}}
-
Spécifie un modèle de vibration pour les périphériques dotés d'un matériel de vibration à émettre.
-
- -

Gestionnaires d'événements

- -
-
{{domxref("Notification.onclick")}}
-
Un gestionnaire pour l'événement {{domxref ("Element/click_event", "click")}}. Il est déclenché à chaque fois que l'utilisateur clique sur la notification.
-
{{domxref("Notification.onclose")}}
-
Un gestionnaire pour l'événement {{domxref ("HTMLDialogElement/close_event", "close")}}. Il est déclenché lorsque l'utilisateur ferme la notification.
-
{{domxref("Notification.onerror")}}
-
Un gestionnaire pour l'événement {{domxref ("HTMLElement/error_event", "error")}}. Il est déclenché chaque fois que la notification rencontre une erreur.
-
{{domxref("Notification.onshow")}}
-
Un gestionnaire pour l'événement {{domxref ("Element/show_event", "show")}}. Il est déclenché lorsque la notification est affichée.
-
- -

Méthodes

- -

Méthodes statiques

- -

Ces méthodes ne sont disponibles que sur l'objet Notification lui-même.

- -
-
{{domxref("Notification.requestPermission()")}}
-
Demande l'autorisation à l'utilisateur d'afficher les notifications.
-
- -

Méthodes d'instance

- -

Ces propriétés ne sont disponibles que sur une instance de l'objet Notification ou via son prototype. L'objet Notification hérite également de l'interface {{domxref ("EventTarget")}}.

- -
-
{{domxref("Notification.close()")}}
-
Ferme programmatiquement une instance de notification.
-
- -

Exemples

- -

Supposons ce HTML de base:

- -
<button onclick="notifyMe()">Notifie moi !</button>
- -

Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'{{glossary("Origin","origine")}} actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.

- -
function notifyMe() {
-  // Vérifions si le navigateur prend en charge les notifications
-  if (!('Notification' in window)) {
-    alert('Ce navigateur ne prend pas en charge la notification de bureau')
-  }
-
-  // Vérifions si les autorisations de notification ont déjà été accordées
-  else if (Notification.permission === 'granted') {
-    // Si tout va bien, créons une notification
-    const notification = new Notification('Salut toi!')
-  }
-
-  // Sinon, nous devons demander la permission à l'utilisateur
-  else if (Notification.permission !== 'denied') {
-    Notification.requestPermission().then((permission) => {
-      // Si l'utilisateur accepte, créons une notification
-      if (permission === 'granted') {
-        const notification = new Notification('Salut toi!')
-      }
-    })
-  }
-
-  // Enfin, si l'utilisateur a refusé les notifications, et que vous
-  // voulez être respectueux, il n'est plus nécessaire de les déranger.
-}
-
- -

Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre exemple de liste de tâches (voir également l'application en cours d'exécution.)

- -
-

Note : Dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/index.md b/files/fr/web/api/notification/index.md new file mode 100644 index 0000000000..f732fae408 --- /dev/null +++ b/files/fr/web/api/notification/index.md @@ -0,0 +1,178 @@ +--- +title: Notification +slug: Web/API/notification +tags: + - API + - API Notifications + - Interface + - Notifications + - Reference +translation_of: Web/API/Notification +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

L'interface Notification de l'API Notifications est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.

+ +

Constructeur

+ +
+
{{domxref("Notification.Notification", "Notification()")}}
+
Créer une nouvelle instance de l'object Notification.
+
+ +

Propriétés

+ +

Propriétés statiques

+ +

Ces propriétés ne sont disponibles que sur l'objet Notification lui-même.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+

Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont:

+
    +
  • denied — L'utilisateur refuse d'afficher des notifications.
    • +
  • granted — L'utilisateur accepte d'afficher des notifications.
    • +
  • default — Le choix de l'utilisateur est inconnu et donc le navigateur agira comme si la valeur était refusée.
    • +
+
+
{{domxref("Notification.maxActions")}} {{readonlyinline}}
+
Le nombre maximal d'actions pris en charge par l'appareil et l'agent utilisateur.
+
+ +

Propriétés de l'instance

+ +

Ces propriétés ne sont disponibles que sur les instances de l'objet Notification.

+ +
+
{{domxref("Notification.actions")}} {{readonlyinline}}
+
Tableau d'actions de la notification comme spécifié dans le paramètre options du constructeur.
+
{{domxref("Notification.badge")}} {{readonlyinline}}
+
L'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
Une chaîne représentant le corps de la notification telle que spécifiée dans le paramètre options du constructeur.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Renvoie un clone structuré des données de la notification.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
La direction du texte de la notification comme spécifié dans le paramètre options du constructeur.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
Code de langue de la notification tel que spécifié dans le paramètre options du constructeur.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
L'ID de la notification (le cas échéant) tel que spécifié dans le paramètre options du constructeur.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
L'URL de l'image utilisée comme icône de la notification comme spécifié dans le paramètre options du constructeur.
+
{{domxref("Notification.image")}} {{readonlyinline}}
+
L'URL d'une image à afficher dans le cadre de la notification, comme spécifié dans le paramètre options du constructeur.
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
Spécifie si l'utilisateur doit être averti après qu'une nouvelle notification remplace l'ancienne.
+
{{domxref("Notification.requireInteraction")}} {{readonlyinline}}
+
Un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement.
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
Spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil.
+
{{domxref("Notification.timestamp")}} {{readonlyinline}}
+
Spécifie l'heure à laquelle une notification est créée ou applicable (passée, présente ou future).
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Le titre de la notification tel que spécifié dans le premier paramètre du constructeur.
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Spécifie un modèle de vibration pour les périphériques dotés d'un matériel de vibration à émettre.
+
+ +

Gestionnaires d'événements

+ +
+
{{domxref("Notification.onclick")}}
+
Un gestionnaire pour l'événement {{domxref ("Element/click_event", "click")}}. Il est déclenché à chaque fois que l'utilisateur clique sur la notification.
+
{{domxref("Notification.onclose")}}
+
Un gestionnaire pour l'événement {{domxref ("HTMLDialogElement/close_event", "close")}}. Il est déclenché lorsque l'utilisateur ferme la notification.
+
{{domxref("Notification.onerror")}}
+
Un gestionnaire pour l'événement {{domxref ("HTMLElement/error_event", "error")}}. Il est déclenché chaque fois que la notification rencontre une erreur.
+
{{domxref("Notification.onshow")}}
+
Un gestionnaire pour l'événement {{domxref ("Element/show_event", "show")}}. Il est déclenché lorsque la notification est affichée.
+
+ +

Méthodes

+ +

Méthodes statiques

+ +

Ces méthodes ne sont disponibles que sur l'objet Notification lui-même.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
Demande l'autorisation à l'utilisateur d'afficher les notifications.
+
+ +

Méthodes d'instance

+ +

Ces propriétés ne sont disponibles que sur une instance de l'objet Notification ou via son prototype. L'objet Notification hérite également de l'interface {{domxref ("EventTarget")}}.

+ +
+
{{domxref("Notification.close()")}}
+
Ferme programmatiquement une instance de notification.
+
+ +

Exemples

+ +

Supposons ce HTML de base:

+ +
<button onclick="notifyMe()">Notifie moi !</button>
+ +

Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'{{glossary("Origin","origine")}} actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.

+ +
function notifyMe() {
+  // Vérifions si le navigateur prend en charge les notifications
+  if (!('Notification' in window)) {
+    alert('Ce navigateur ne prend pas en charge la notification de bureau')
+  }
+
+  // Vérifions si les autorisations de notification ont déjà été accordées
+  else if (Notification.permission === 'granted') {
+    // Si tout va bien, créons une notification
+    const notification = new Notification('Salut toi!')
+  }
+
+  // Sinon, nous devons demander la permission à l'utilisateur
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission().then((permission) => {
+      // Si l'utilisateur accepte, créons une notification
+      if (permission === 'granted') {
+        const notification = new Notification('Salut toi!')
+      }
+    })
+  }
+
+  // Enfin, si l'utilisateur a refusé les notifications, et que vous
+  // voulez être respectueux, il n'est plus nécessaire de les déranger.
+}
+
+ +

Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre exemple de liste de tâches (voir également l'application en cours d'exécution.)

+ +
+

Note : Dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/lang/index.html b/files/fr/web/api/notification/lang/index.html deleted file mode 100644 index 3a409d72ff..0000000000 --- a/files/fr/web/api/notification/lang/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Notification.lang -slug: Web/API/notification/lang -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference -translation_of: Web/API/Notification/lang ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule lang de l'interface {{domxref ("Notification")}} indique la langue utilisée dans la notification, comme définis à l'aide de l'option lang lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.

- -

La langue elle-même est spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.

- -

Syntaxz

- -
Notification.lang
-
- -

Valeur

- -

Une {{domxref("DOMString")}} spécifiant la balise de langue.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-lang','lang')}}{{Spec2('Web Notifications')}}Living standard
- -

Browser compatibility

- -

{{Compat("api.Notification.lang")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/lang/index.md b/files/fr/web/api/notification/lang/index.md new file mode 100644 index 0000000000..3a409d72ff --- /dev/null +++ b/files/fr/web/api/notification/lang/index.md @@ -0,0 +1,53 @@ +--- +title: Notification.lang +slug: Web/API/notification/lang +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/lang +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule lang de l'interface {{domxref ("Notification")}} indique la langue utilisée dans la notification, comme définis à l'aide de l'option lang lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.

+ +

La langue elle-même est spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.

+ +

Syntaxz

+ +
Notification.lang
+
+ +

Valeur

+ +

Une {{domxref("DOMString")}} spécifiant la balise de langue.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-lang','lang')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ +

{{Compat("api.Notification.lang")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/maxactions/index.html b/files/fr/web/api/notification/maxactions/index.html deleted file mode 100644 index df61031657..0000000000 --- a/files/fr/web/api/notification/maxactions/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Notification.maxActions -slug: Web/API/notification/maxActions -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - actions -translation_of: Web/API/Notification/maxActions ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

L'attribut maxActions de l'interface {{domxref ("Notification")}} renvoie le nombre maximal d'actions prises en charge par l'appareil et l'agent utilisateur. En effet, c'est le nombre maximum d'éléments dans le tableau {{domxref ("Notification.actions")}} qui seront respectés par l'agent utilisateur.

- -

Syntaxe

- -
Notification.maxActions
-
- -

Valeur

- -

Un entier {{JSxRef ("Number")}} qui indique le plus grand nombre d'actions de notification pouvant être présentées à l'utilisateur par l'agent utilisateur et l'appareil.

- -

Exemples

- -

L'extrait de code suivant enregistre le nombre maximal d'actions prises en charge.

- -
const { maxActions } = Notification
-console.log(`This device can display at most ${maxActions} actions on each notification.`);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName("Web Notifications")}}{{Spec2("Web Notifications")}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.maxActions")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/maxactions/index.md b/files/fr/web/api/notification/maxactions/index.md new file mode 100644 index 0000000000..df61031657 --- /dev/null +++ b/files/fr/web/api/notification/maxactions/index.md @@ -0,0 +1,63 @@ +--- +title: Notification.maxActions +slug: Web/API/notification/maxActions +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - actions +translation_of: Web/API/Notification/maxActions +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

L'attribut maxActions de l'interface {{domxref ("Notification")}} renvoie le nombre maximal d'actions prises en charge par l'appareil et l'agent utilisateur. En effet, c'est le nombre maximum d'éléments dans le tableau {{domxref ("Notification.actions")}} qui seront respectés par l'agent utilisateur.

+ +

Syntaxe

+ +
Notification.maxActions
+
+ +

Valeur

+ +

Un entier {{JSxRef ("Number")}} qui indique le plus grand nombre d'actions de notification pouvant être présentées à l'utilisateur par l'agent utilisateur et l'appareil.

+ +

Exemples

+ +

L'extrait de code suivant enregistre le nombre maximal d'actions prises en charge.

+ +
const { maxActions } = Notification
+console.log(`This device can display at most ${maxActions} actions on each notification.`);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName("Web Notifications")}}{{Spec2("Web Notifications")}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.maxActions")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/notification/index.html b/files/fr/web/api/notification/notification/index.html deleted file mode 100644 index 0e9a988e55..0000000000 --- a/files/fr/web/api/notification/notification/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Notification() -slug: Web/API/notification/Notification -tags: - - API - - API Notifications - - Constructeur - - Notification - - Notifications - - Reference -browser-compat: api.Notification.Notification -translation_of: Web/API/Notification/Notification ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

Le constructeur Notification() crée une nouvelle instance d'objet Notification, qui représente une notification utilisateur.

- -

Syntaxe

- -
const myNotification = new Notification(title, options)
- -

Paramètres

- -
-
title
-
Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.
-
options {{optional_inline}}
-
Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont: -
    -
  • dir: La direction dans laquelle afficher la notification. La valeur par défaut est auto, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de ltr et rtl (bien que la plupart des navigateurs semblent ignorer ces paramètres.)
    • -
  • lang: La langue de la notification, telle que spécifiée à l'aide d'un DOMString représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.
    • -
  • badge: Un USVString contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
    • -
  • body: Un DOMString représentant le corps du texte de la notification, qui est affiché sous le titre.
    • -
  • tag: Un DOMString représentant un tag d'identification pour la notification.
    • -
  • icon: Une USVString contenant l'URL d'une icône à afficher dans la notification.
    • -
  • image: Une USVString contenant l'URL d'une image à afficher dans la notification.
    • -
  • data: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.
    • -
  • vibrate: Un modèle de vibration que le matériel de vibration de l'appareil émet avec la notification.
    • -
  • renotify: Un Boolean spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est false, ce qui signifie qu'ils ne seront pas notifiés.
    • -
  • requireInteraction: Un Boolean indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est false.
    • -
  • actions: Un tableau de NotificationAction représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.
    • -
  • silent: Un Boolean spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est false, ce qui signifie qu'il ne sera pas silencieux.
    • -
-
-
- -

Exemple

- -

Dans notre démo Emogotchi (voir le code source), nous exécutons une fonction spawnNotification() lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet options nécessaire et déclenche la notification à l'aide du constructeur Notification().

- -
function spawnNotification(body, icon, title) {
-  const options = {
-    body: body,
-    icon: icon
-  };
-  const n = new Notification(title, options);
-}
- -

Spécifications

- -{{Specifications}} - -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Notes Chrome

- -

À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.

- -

Chrome pour Android lance une erreur TypeError lors de l'appel du constructeur Notification. Il ne prend en charge que la création de notifications à partir d'un service worker. Consultez le Chromium issue tracker pour plus de détails.

- -

Notes Internet Explorer

- -

La version 38.14352 et celles supérieure de MS Edge prend en charge l'API Notification. Wikipédia - MS Edge
- IE 11 et inférieur n'est pas pris en charge.

- -

Voir également

- - diff --git a/files/fr/web/api/notification/notification/index.md b/files/fr/web/api/notification/notification/index.md new file mode 100644 index 0000000000..0e9a988e55 --- /dev/null +++ b/files/fr/web/api/notification/notification/index.md @@ -0,0 +1,82 @@ +--- +title: Notification() +slug: Web/API/notification/Notification +tags: + - API + - API Notifications + - Constructeur + - Notification + - Notifications + - Reference +browser-compat: api.Notification.Notification +translation_of: Web/API/Notification/Notification +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

Le constructeur Notification() crée une nouvelle instance d'objet Notification, qui représente une notification utilisateur.

+ +

Syntaxe

+ +
const myNotification = new Notification(title, options)
+ +

Paramètres

+ +
+
title
+
Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.
+
options {{optional_inline}}
+
Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont: +
    +
  • dir: La direction dans laquelle afficher la notification. La valeur par défaut est auto, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de ltr et rtl (bien que la plupart des navigateurs semblent ignorer ces paramètres.)
    • +
  • lang: La langue de la notification, telle que spécifiée à l'aide d'un DOMString représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.
    • +
  • badge: Un USVString contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
    • +
  • body: Un DOMString représentant le corps du texte de la notification, qui est affiché sous le titre.
    • +
  • tag: Un DOMString représentant un tag d'identification pour la notification.
    • +
  • icon: Une USVString contenant l'URL d'une icône à afficher dans la notification.
    • +
  • image: Une USVString contenant l'URL d'une image à afficher dans la notification.
    • +
  • data: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.
    • +
  • vibrate: Un modèle de vibration que le matériel de vibration de l'appareil émet avec la notification.
    • +
  • renotify: Un Boolean spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est false, ce qui signifie qu'ils ne seront pas notifiés.
    • +
  • requireInteraction: Un Boolean indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est false.
    • +
  • actions: Un tableau de NotificationAction représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.
    • +
  • silent: Un Boolean spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est false, ce qui signifie qu'il ne sera pas silencieux.
    • +
+
+
+ +

Exemple

+ +

Dans notre démo Emogotchi (voir le code source), nous exécutons une fonction spawnNotification() lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet options nécessaire et déclenche la notification à l'aide du constructeur Notification().

+ +
function spawnNotification(body, icon, title) {
+  const options = {
+    body: body,
+    icon: icon
+  };
+  const n = new Notification(title, options);
+}
+ +

Spécifications

+ +{{Specifications}} + +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Notes Chrome

+ +

À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.

+ +

Chrome pour Android lance une erreur TypeError lors de l'appel du constructeur Notification. Il ne prend en charge que la création de notifications à partir d'un service worker. Consultez le Chromium issue tracker pour plus de détails.

+ +

Notes Internet Explorer

+ +

La version 38.14352 et celles supérieure de MS Edge prend en charge l'API Notification. Wikipédia - MS Edge
+ IE 11 et inférieur n'est pas pris en charge.

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/onclick/index.html b/files/fr/web/api/notification/onclick/index.html deleted file mode 100644 index b1561a4fe9..0000000000 --- a/files/fr/web/api/notification/onclick/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Notification.onclick -slug: Web/API/notification/onclick -tags: - - API - - DOM - - Notifications - - Propriété - - Reference - - onclick -translation_of: Web/API/Notification/onclick ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété onclick, rattachée à l'interface {{domxref("Notification")}}, définit un gestionnaire d'évènement à déclencher lorsque la notification recçoit un évènement {{event("click")}} (qui se produit lorsqu'un utilisateur clique sur la notification).

- -

Syntaxe

- -
Notification.onclick = function(event) { ... };
-
- -

Le comportement par défaut consiste à déplacer le focus sur la zone d'affichage (viewport) du contexte de navigation de la notification. Pour éviter ce comportement, on pourra appeler la méthode preventDefault() sur l'objet représentant l'évènement.

- -

Exemples

- -

Dans l'exemple qui suit, on utilise le gestionnaire d'évènement onclick pour ouvrir une page dans un nouvel onglet (avec le paramètre '_blank') lorsqu'on clique sur la notification :

- -
notification.onclick = function(event) {
-  event.preventDefault(); // empêcher le navigateur de passer le focus sur l'onglet de la navigation
-  window.open('http://www.mozilla.org', '_blank');
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Web Notifications','#dom-notification-onclick','onclick')}}{{Spec2('Web Notifications')}}Standard évolutif
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Notification.onclick")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/notification/onclick/index.md b/files/fr/web/api/notification/onclick/index.md new file mode 100644 index 0000000000..b1561a4fe9 --- /dev/null +++ b/files/fr/web/api/notification/onclick/index.md @@ -0,0 +1,63 @@ +--- +title: Notification.onclick +slug: Web/API/notification/onclick +tags: + - API + - DOM + - Notifications + - Propriété + - Reference + - onclick +translation_of: Web/API/Notification/onclick +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété onclick, rattachée à l'interface {{domxref("Notification")}}, définit un gestionnaire d'évènement à déclencher lorsque la notification recçoit un évènement {{event("click")}} (qui se produit lorsqu'un utilisateur clique sur la notification).

+ +

Syntaxe

+ +
Notification.onclick = function(event) { ... };
+
+ +

Le comportement par défaut consiste à déplacer le focus sur la zone d'affichage (viewport) du contexte de navigation de la notification. Pour éviter ce comportement, on pourra appeler la méthode preventDefault() sur l'objet représentant l'évènement.

+ +

Exemples

+ +

Dans l'exemple qui suit, on utilise le gestionnaire d'évènement onclick pour ouvrir une page dans un nouvel onglet (avec le paramètre '_blank') lorsqu'on clique sur la notification :

+ +
notification.onclick = function(event) {
+  event.preventDefault(); // empêcher le navigateur de passer le focus sur l'onglet de la navigation
+  window.open('http://www.mozilla.org', '_blank');
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Web Notifications','#dom-notification-onclick','onclick')}}{{Spec2('Web Notifications')}}Standard évolutif
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Notification.onclick")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/notification/onclose/index.html b/files/fr/web/api/notification/onclose/index.html deleted file mode 100644 index 5dddd078f3..0000000000 --- a/files/fr/web/api/notification/onclose/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Notification.onclose -slug: Web/API/notification/onclose -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - onclose -translation_of: Web/API/Notification/onclose ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété onclose de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir les événements {{domxref ("HTMLDialogElement/close_event", "close")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est fermée.

- -

Syntaxe

- -
Notification.onclose = function(event) { ... }
-Notification.onclose = (event) => { ... }
-
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.onclose")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/onclose/index.md b/files/fr/web/api/notification/onclose/index.md new file mode 100644 index 0000000000..5dddd078f3 --- /dev/null +++ b/files/fr/web/api/notification/onclose/index.md @@ -0,0 +1,33 @@ +--- +title: Notification.onclose +slug: Web/API/notification/onclose +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - onclose +translation_of: Web/API/Notification/onclose +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété onclose de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir les événements {{domxref ("HTMLDialogElement/close_event", "close")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est fermée.

+ +

Syntaxe

+ +
Notification.onclose = function(event) { ... }
+Notification.onclose = (event) => { ... }
+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.onclose")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/onerror/index.html b/files/fr/web/api/notification/onerror/index.html deleted file mode 100644 index af9115de5b..0000000000 --- a/files/fr/web/api/notification/onerror/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Notification.onerror -slug: Web/API/notification/onerror -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - onerror -translation_of: Web/API/Notification/onerror ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété onerror de l'interface {{domxref ("Notification")}} spécifie un écouteur d'événements pour recevoir les événements {{domxref ("HTMLElement/error_event", "error")}}. Ces événements se produisent lorsque quelque chose ce déroule mal avec une {{domxref ("Notification")}} (dans de nombreux cas, une erreur qui empêche l'affichage de la notification.)

- -

Syntaxe

- -
Notification.onerror = function(event) { ... }
-Notification.onerror = (even) => { ... }
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-onerror','onerror')}}{{Spec2('Web Notifications')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.onerror")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/onerror/index.md b/files/fr/web/api/notification/onerror/index.md new file mode 100644 index 0000000000..af9115de5b --- /dev/null +++ b/files/fr/web/api/notification/onerror/index.md @@ -0,0 +1,52 @@ +--- +title: Notification.onerror +slug: Web/API/notification/onerror +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - onerror +translation_of: Web/API/Notification/onerror +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété onerror de l'interface {{domxref ("Notification")}} spécifie un écouteur d'événements pour recevoir les événements {{domxref ("HTMLElement/error_event", "error")}}. Ces événements se produisent lorsque quelque chose ce déroule mal avec une {{domxref ("Notification")}} (dans de nombreux cas, une erreur qui empêche l'affichage de la notification.)

+ +

Syntaxe

+ +
Notification.onerror = function(event) { ... }
+Notification.onerror = (even) => { ... }
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-onerror','onerror')}}{{Spec2('Web Notifications')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.onerror")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/onshow/index.html b/files/fr/web/api/notification/onshow/index.html deleted file mode 100644 index a0a38caf41..0000000000 --- a/files/fr/web/api/notification/onshow/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Notification.onshow -slug: Web/API/notification/onshow -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - onshow -translation_of: Web/API/Notification/onshow ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété onshow de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir des événements {{domxref ("Element/show_event", "show")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est affiché.

- -

Syntaxe

- -
Notification.onshow = function() { ... }
-Notification.onshow = () => { ... }
-
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.onshow")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/onshow/index.md b/files/fr/web/api/notification/onshow/index.md new file mode 100644 index 0000000000..a0a38caf41 --- /dev/null +++ b/files/fr/web/api/notification/onshow/index.md @@ -0,0 +1,33 @@ +--- +title: Notification.onshow +slug: Web/API/notification/onshow +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - onshow +translation_of: Web/API/Notification/onshow +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété onshow de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir des événements {{domxref ("Element/show_event", "show")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est affiché.

+ +

Syntaxe

+ +
Notification.onshow = function() { ... }
+Notification.onshow = () => { ... }
+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.onshow")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/permission/index.html b/files/fr/web/api/notification/permission/index.html deleted file mode 100644 index 603a7cdb3c..0000000000 --- a/files/fr/web/api/notification/permission/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Notification.permission -slug: Web/API/notification/permission -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference -translation_of: Web/API/Notification/permission ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule permission de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications.

- -

Syntaxe

- -
Notification.permission
- -

Valeur

- -

Une {{domxref("DOMString")}} représentant l'autorisation actuelle. La valeur peut être:

- - - -

Exemples

- -

L'extrait suivant peut être utilisé si vous souhaitez d'abord vérifier si les notifications sont prises en charge, puis vérifier si l'autorisation a été accordée pour l'origine actuelle pour envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.

- -
function notifyMe() {
-  // Let's check if the browser supports notifications
-  if (!('Notification' in window)) {
-    console.log('This browser does not support desktop notification')
-  }
-
-  // Let's check whether notification permissions have alredy been granted
-  else if (Notification.permission === 'granted') {
-    // If it's okay let's create a notification
-    const notification = new Notification('Hi there!')
-  }
-
-  // Otherwise, we need to ask the user for permission
-  else if (
-    Notification.permission !== 'denied' ||
-    Notification.permission === 'default'
-  ) {
-    Notification.requestPermission((permission) => {
-      // If the user accepts, let's create a notification
-      if (permission === 'granted') {
-        const notification = new Notification('Hi there!')
-      }
-    })
-  }
-
-  // At last, if the user has denied notifications, and you
-  // want to be respectful there is no need to bother them any more.
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName("Web Notifications","#dom-notification-permission","permission")}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.permission")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/permission/index.md b/files/fr/web/api/notification/permission/index.md new file mode 100644 index 0000000000..603a7cdb3c --- /dev/null +++ b/files/fr/web/api/notification/permission/index.md @@ -0,0 +1,93 @@ +--- +title: Notification.permission +slug: Web/API/notification/permission +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference +translation_of: Web/API/Notification/permission +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule permission de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications.

+ +

Syntaxe

+ +
Notification.permission
+ +

Valeur

+ +

Une {{domxref("DOMString")}} représentant l'autorisation actuelle. La valeur peut être:

+ + + +

Exemples

+ +

L'extrait suivant peut être utilisé si vous souhaitez d'abord vérifier si les notifications sont prises en charge, puis vérifier si l'autorisation a été accordée pour l'origine actuelle pour envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.

+ +
function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!('Notification' in window)) {
+    console.log('This browser does not support desktop notification')
+  }
+
+  // Let's check whether notification permissions have alredy been granted
+  else if (Notification.permission === 'granted') {
+    // If it's okay let's create a notification
+    const notification = new Notification('Hi there!')
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (
+    Notification.permission !== 'denied' ||
+    Notification.permission === 'default'
+  ) {
+    Notification.requestPermission((permission) => {
+      // If the user accepts, let's create a notification
+      if (permission === 'granted') {
+        const notification = new Notification('Hi there!')
+      }
+    })
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName("Web Notifications","#dom-notification-permission","permission")}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.permission")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/renotify/index.html b/files/fr/web/api/notification/renotify/index.html deleted file mode 100644 index ebd7bb4492..0000000000 --- a/files/fr/web/api/notification/renotify/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Notification.renotify -slug: Web/API/notification/renotify -tags: - - API - - API Notifications - - Experimental - - Notification - - Notifications - - Propriété - - Reference - - renotifier - - renotify -translation_of: Web/API/Notification/renotify ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule renotify de l'interface {{domxref ("Notification")}} spécifie si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne, comme spécifié comme définis à l'aide de l'option renotify lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.

- -

Syntaxe

- -
Notification.renotify
-
- -

Valeur

- -

Un {{domxref("Boolean")}}. false est la valeur par défaut; true oblige la notification à renotifier l'utilisateur.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-renotify','renotify')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.renotify")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/renotify/index.md b/files/fr/web/api/notification/renotify/index.md new file mode 100644 index 0000000000..ebd7bb4492 --- /dev/null +++ b/files/fr/web/api/notification/renotify/index.md @@ -0,0 +1,56 @@ +--- +title: Notification.renotify +slug: Web/API/notification/renotify +tags: + - API + - API Notifications + - Experimental + - Notification + - Notifications + - Propriété + - Reference + - renotifier + - renotify +translation_of: Web/API/Notification/renotify +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule renotify de l'interface {{domxref ("Notification")}} spécifie si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne, comme spécifié comme définis à l'aide de l'option renotify lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.

+ +

Syntaxe

+ +
Notification.renotify
+
+ +

Valeur

+ +

Un {{domxref("Boolean")}}. false est la valeur par défaut; true oblige la notification à renotifier l'utilisateur.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-renotify','renotify')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.renotify")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/requestpermission/index.html b/files/fr/web/api/notification/requestpermission/index.html deleted file mode 100644 index e8d71e4a90..0000000000 --- a/files/fr/web/api/notification/requestpermission/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Notification.requestPermission() -slug: Web/API/notification/requestPermission -tags: - - API - - API Notifications - - Méthode - - Notification - - Notifications - - Reference -translation_of: Web/API/Notification/requestPermission ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -
-

Note: Cette fonctionnalité n'est pas disponible dans {{domxref("SharedWorker")}}

-
- -
-

Note : Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez Utilisation de l'API Notifications pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.

-
- -

La méthode requestPermission() de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.

- -

Syntaxe

- -

La dernière spécification a mis à jour cette méthode avec une syntaxe basée sur une promesse qui fonctionne comme ceci:

- -
Notification.requestPermission()
-  .then((permission) => { ... })
- -

Auparavant, la syntaxe était basée sur un simple rappel; cette version est désormais obsolète:

- -
Notification.requestPermission(callback);
- -

Paramètres

- -
-
callback {{optional_inline}} {{deprecated_inline("gecko46")}}
-
Une fonction de rappel facultative qui est appelée avec la valeur d'autorisation. Déconseillé en faveur de la valeur de retour de la promesse.
-
- -

Retour

- -

Une {{jsxref ("Promise", "Promesse")}} qui se résout en une {{domxref ("DOMString")}} avec la permission choisie par l'utilisateur. Les valeurs possibles pour cette chaîne sont:

- - - -

Exemples

- -

Supposons ce HTML de base:

- -
<button onclick="notifyMe()">Notifie moi !</button>
- -

Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.

- -
function notifyMe() {
-  // Vérifions si le navigateur prend en charge les notifications
-  if (!('Notification' in window)) {
-    alert('Ce navigateur ne prend pas en charge la notification de bureau')
-  }
-
-  // Vérifions si les autorisations de notification ont déjà été accordées
-  else if (Notification.permission === 'granted') {
-    // Si tout va bien, créons une notification
-    const notification = new Notification('Salut toi!')
-  }
-
-  // Sinon, nous devons demander la permission à l'utilisateur
-  else if (Notification.permission !== 'denied') {
-    Notification.requestPermission().then((permission) => {
-      // Si l'utilisateur accepte, créons une notification
-      if (permission === 'granted') {
-        const notification = new Notification('Salut toi!')
-      }
-    })
-  }
-
-  // Enfin, si l'utilisateur a refusé les notifications, et que vous
-  // voulez être respectueux, il n'est plus nécessaire de les déranger.
-}
-
- -

Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre exemple de liste de tâches (voir également l'application en cours d'exécution.)

- -
-

Note : Dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.requestPermission")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/requestpermission/index.md b/files/fr/web/api/notification/requestpermission/index.md new file mode 100644 index 0000000000..e8d71e4a90 --- /dev/null +++ b/files/fr/web/api/notification/requestpermission/index.md @@ -0,0 +1,119 @@ +--- +title: Notification.requestPermission() +slug: Web/API/notification/requestPermission +tags: + - API + - API Notifications + - Méthode + - Notification + - Notifications + - Reference +translation_of: Web/API/Notification/requestPermission +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +
+

Note: Cette fonctionnalité n'est pas disponible dans {{domxref("SharedWorker")}}

+
+ +
+

Note : Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez Utilisation de l'API Notifications pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.

+
+ +

La méthode requestPermission() de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.

+ +

Syntaxe

+ +

La dernière spécification a mis à jour cette méthode avec une syntaxe basée sur une promesse qui fonctionne comme ceci:

+ +
Notification.requestPermission()
+  .then((permission) => { ... })
+ +

Auparavant, la syntaxe était basée sur un simple rappel; cette version est désormais obsolète:

+ +
Notification.requestPermission(callback);
+ +

Paramètres

+ +
+
callback {{optional_inline}} {{deprecated_inline("gecko46")}}
+
Une fonction de rappel facultative qui est appelée avec la valeur d'autorisation. Déconseillé en faveur de la valeur de retour de la promesse.
+
+ +

Retour

+ +

Une {{jsxref ("Promise", "Promesse")}} qui se résout en une {{domxref ("DOMString")}} avec la permission choisie par l'utilisateur. Les valeurs possibles pour cette chaîne sont:

+ + + +

Exemples

+ +

Supposons ce HTML de base:

+ +
<button onclick="notifyMe()">Notifie moi !</button>
+ +

Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.

+ +
function notifyMe() {
+  // Vérifions si le navigateur prend en charge les notifications
+  if (!('Notification' in window)) {
+    alert('Ce navigateur ne prend pas en charge la notification de bureau')
+  }
+
+  // Vérifions si les autorisations de notification ont déjà été accordées
+  else if (Notification.permission === 'granted') {
+    // Si tout va bien, créons une notification
+    const notification = new Notification('Salut toi!')
+  }
+
+  // Sinon, nous devons demander la permission à l'utilisateur
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission().then((permission) => {
+      // Si l'utilisateur accepte, créons une notification
+      if (permission === 'granted') {
+        const notification = new Notification('Salut toi!')
+      }
+    })
+  }
+
+  // Enfin, si l'utilisateur a refusé les notifications, et que vous
+  // voulez être respectueux, il n'est plus nécessaire de les déranger.
+}
+
+ +

Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre exemple de liste de tâches (voir également l'application en cours d'exécution.)

+ +
+

Note : Dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.requestPermission")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/requireinteraction/index.html b/files/fr/web/api/notification/requireinteraction/index.html deleted file mode 100644 index 80eacf5f84..0000000000 --- a/files/fr/web/api/notification/requireinteraction/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Notification.requireInteraction -slug: Web/API/notification/requireInteraction -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - Web - - requireInteraction -translation_of: Web/API/Notification/requireInteraction ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule requireInteraction de l'interface {{domxref ("Notification")}} renvoie un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. Ceci peut être défini à l'aide de l'option requireInteraction lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification()")}}.

- -

Syntaxe

- -
Notification.requireInteraction
- -

Valeur

- -

Un {{jsxref("Boolean")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-requireinteraction','requireInteraction')}}{{Spec2('Web Notifications')}}Living standard.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.requireInteraction")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/requireinteraction/index.md b/files/fr/web/api/notification/requireinteraction/index.md new file mode 100644 index 0000000000..80eacf5f84 --- /dev/null +++ b/files/fr/web/api/notification/requireinteraction/index.md @@ -0,0 +1,52 @@ +--- +title: Notification.requireInteraction +slug: Web/API/notification/requireInteraction +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - Web + - requireInteraction +translation_of: Web/API/Notification/requireInteraction +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule requireInteraction de l'interface {{domxref ("Notification")}} renvoie un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. Ceci peut être défini à l'aide de l'option requireInteraction lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification()")}}.

+ +

Syntaxe

+ +
Notification.requireInteraction
+ +

Valeur

+ +

Un {{jsxref("Boolean")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-requireinteraction','requireInteraction')}}{{Spec2('Web Notifications')}}Living standard.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.requireInteraction")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/silent/index.html b/files/fr/web/api/notification/silent/index.html deleted file mode 100644 index d97cde7bd4..0000000000 --- a/files/fr/web/api/notification/silent/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Notification.silent -slug: Web/API/notification/silent -tags: - - API - - API Notifications - - Notifications - - Propriété - - Reference - - Vibration - - Vibreur - - silencieuse - - silent -translation_of: Web/API/Notification/silent ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule silent de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option silent lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.

- -

Syntaxe

- -
Notification.silent
-
- -

Valeur

- -

Un {{domxref("Boolean")}}. false est la valeur par défaut; true rend la notification silencieuse.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-silent','silent')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.silent")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/silent/index.md b/files/fr/web/api/notification/silent/index.md new file mode 100644 index 0000000000..d97cde7bd4 --- /dev/null +++ b/files/fr/web/api/notification/silent/index.md @@ -0,0 +1,54 @@ +--- +title: Notification.silent +slug: Web/API/notification/silent +tags: + - API + - API Notifications + - Notifications + - Propriété + - Reference + - Vibration + - Vibreur + - silencieuse + - silent +translation_of: Web/API/Notification/silent +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule silent de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option silent lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.

+ +

Syntaxe

+ +
Notification.silent
+
+ +

Valeur

+ +

Un {{domxref("Boolean")}}. false est la valeur par défaut; true rend la notification silencieuse.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-silent','silent')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.silent")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/tag/index.html b/files/fr/web/api/notification/tag/index.html deleted file mode 100644 index 7c5196d714..0000000000 --- a/files/fr/web/api/notification/tag/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Notification.tag -slug: Web/API/notification/tag -tags: - - API - - API Notifications - - Balise - - Notification - - Notifications - - Propriété - - Reference - - tag -translation_of: Web/API/Notification/tag ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule tag de l'interface {{domxref ("Notification")}} correspond à une balise d'identification pour la notification, comme définis à l'aide de l'option tag lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.

- -

L'idée des balises de notification est que plusieurs notifications peuvent partager la même balise, les reliant entre elles. Une notification peut ensuite être programmatiquement remplacée par une autre pour éviter que l'écran des utilisateurs ne soit rempli d'un grand nombre de notifications similaires.

- -

Syntaxe

- -
Notification.tag
-
- -

Valeur

- -

Une {{domxref("DOMString")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-tag','tag')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.tag")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/tag/index.md b/files/fr/web/api/notification/tag/index.md new file mode 100644 index 0000000000..7c5196d714 --- /dev/null +++ b/files/fr/web/api/notification/tag/index.md @@ -0,0 +1,55 @@ +--- +title: Notification.tag +slug: Web/API/notification/tag +tags: + - API + - API Notifications + - Balise + - Notification + - Notifications + - Propriété + - Reference + - tag +translation_of: Web/API/Notification/tag +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule tag de l'interface {{domxref ("Notification")}} correspond à une balise d'identification pour la notification, comme définis à l'aide de l'option tag lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.

+ +

L'idée des balises de notification est que plusieurs notifications peuvent partager la même balise, les reliant entre elles. Une notification peut ensuite être programmatiquement remplacée par une autre pour éviter que l'écran des utilisateurs ne soit rempli d'un grand nombre de notifications similaires.

+ +

Syntaxe

+ +
Notification.tag
+
+ +

Valeur

+ +

Une {{domxref("DOMString")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-tag','tag')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.tag")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/timestamp/index.html b/files/fr/web/api/notification/timestamp/index.html deleted file mode 100644 index 8218d858d6..0000000000 --- a/files/fr/web/api/notification/timestamp/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Notification.timestamp -slug: Web/API/notification/timestamp -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - horodatage - - timeStamp -translation_of: Web/API/Notification/timestamp ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule timestamp de l'interface {{domxref ("Notification")}} renvoie un {{domxref ("DOMTimeStamp")}}, comme définis à l'aide de l'option timestamp lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.

- -

L'horodatage de la notification peut représenter le moment, en millisecondes depuis 00:00:00 UTC le 1er janvier 1970, de l'événement pour lequel la notification a été créée, ou il peut s'agir d'un horodatage arbitraire que vous souhaitez associer à la notification. Par exemple, un horodatage pour une réunion à venir pourrait être défini dans le futur, tandis qu'un horodatage pour un message manqué pourrait être défini dans le passé.

- -

Syntaxe

- -
Notification.timestamp
- -

Valeur

- -

Un {{domxref("DOMTimeStamp")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-timestamp','timestamp')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.timestamp")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/timestamp/index.md b/files/fr/web/api/notification/timestamp/index.md new file mode 100644 index 0000000000..8218d858d6 --- /dev/null +++ b/files/fr/web/api/notification/timestamp/index.md @@ -0,0 +1,54 @@ +--- +title: Notification.timestamp +slug: Web/API/notification/timestamp +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - horodatage + - timeStamp +translation_of: Web/API/Notification/timestamp +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule timestamp de l'interface {{domxref ("Notification")}} renvoie un {{domxref ("DOMTimeStamp")}}, comme définis à l'aide de l'option timestamp lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.

+ +

L'horodatage de la notification peut représenter le moment, en millisecondes depuis 00:00:00 UTC le 1er janvier 1970, de l'événement pour lequel la notification a été créée, ou il peut s'agir d'un horodatage arbitraire que vous souhaitez associer à la notification. Par exemple, un horodatage pour une réunion à venir pourrait être défini dans le futur, tandis qu'un horodatage pour un message manqué pourrait être défini dans le passé.

+ +

Syntaxe

+ +
Notification.timestamp
+ +

Valeur

+ +

Un {{domxref("DOMTimeStamp")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-timestamp','timestamp')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.timestamp")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/title/index.html b/files/fr/web/api/notification/title/index.html deleted file mode 100644 index ba07a05630..0000000000 --- a/files/fr/web/api/notification/title/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Notification.title -slug: Web/API/notification/title -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - Title - - Titre -translation_of: Web/API/Notification/title ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule title de l'interface {{domxref ("Notification")}} indique le titre de la notification, comme définis à l'aide de l'option silent lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()") }} constructeur.

- -

Syntaxe

- -
Notification.title
- -

Valeur

- -

Une {{domxref("DOMString")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-title','title')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.title")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/title/index.md b/files/fr/web/api/notification/title/index.md new file mode 100644 index 0000000000..ba07a05630 --- /dev/null +++ b/files/fr/web/api/notification/title/index.md @@ -0,0 +1,52 @@ +--- +title: Notification.title +slug: Web/API/notification/title +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - Title + - Titre +translation_of: Web/API/Notification/title +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule title de l'interface {{domxref ("Notification")}} indique le titre de la notification, comme définis à l'aide de l'option silent lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()") }} constructeur.

+ +

Syntaxe

+ +
Notification.title
+ +

Valeur

+ +

Une {{domxref("DOMString")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-title','title')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.title")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notification/vibrate/index.html b/files/fr/web/api/notification/vibrate/index.html deleted file mode 100644 index d9bae90120..0000000000 --- a/files/fr/web/api/notification/vibrate/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Notification.vibrate -slug: Web/API/notification/vibrate -tags: - - API - - API Notifications - - Notification - - Notifications - - Propriété - - Reference - - Vibration - - Vibreur - - vibrate -translation_of: Web/API/Notification/vibrate ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

La propriété en lecture seule vibrate de l'interface {{domxref ("Notification")}} spécifie un modèle de vibration que le matériel de vibration de l'appareil doit émettre lorsque la notification se déclenche. Ceci est comme définis à l'aide de l'option vibrate lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}.

- -

Syntaxe

- -
Notification.vibrate
-
- -

Valeur

- -

Un modèle de vibration, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-vibrate','vibrate')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification.vibrate")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notification/vibrate/index.md b/files/fr/web/api/notification/vibrate/index.md new file mode 100644 index 0000000000..d9bae90120 --- /dev/null +++ b/files/fr/web/api/notification/vibrate/index.md @@ -0,0 +1,54 @@ +--- +title: Notification.vibrate +slug: Web/API/notification/vibrate +tags: + - API + - API Notifications + - Notification + - Notifications + - Propriété + - Reference + - Vibration + - Vibreur + - vibrate +translation_of: Web/API/Notification/vibrate +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

La propriété en lecture seule vibrate de l'interface {{domxref ("Notification")}} spécifie un modèle de vibration que le matériel de vibration de l'appareil doit émettre lorsque la notification se déclenche. Ceci est comme définis à l'aide de l'option vibrate lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}.

+ +

Syntaxe

+ +
Notification.vibrate
+
+ +

Valeur

+ +

Un modèle de vibration, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-notification-vibrate','vibrate')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification.vibrate")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/notificationevent/index.html b/files/fr/web/api/notificationevent/index.html deleted file mode 100644 index e46d5d4727..0000000000 --- a/files/fr/web/api/notificationevent/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: NotificationEvent -slug: Web/API/NotificationEvent -tags: - - API - - Experimental - - Interface - - Reference - - ServiceWorker -translation_of: Web/API/NotificationEvent ---- -
{{APIRef("Service Workers API")}}{{SeeCompatTable}}
- -

L'interface NotificationEvent représente un évènement de clic pour une notification et qui est dispatché vers le {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.

- -

Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.

- -

Constructeur

- -
-
{{domxref("NotificationEvent.NotificationEvent()")}}
-
Cette méthode permet de créer un nouvel objet NotificationEvent.
-
- -

Propriétés

- -

Cet objet hérite de propriétés grâce à son ancêtre : {{domxref("Event")}}.

- -
-
{{domxref("NotificationEvent.notification")}} {{readonlyInline}}
-
Cette propriété renvoie un objet {{domxref("Notification")}} représentant la notification sur laquelle on a cliqué pour déclencher l'évènement.
-
{{domxref("NotificationEvent.action")}} {{readonlyinline}}
-
Cette propriété renvoie une chaîne de caractères identifiant le bouton de la notification sur lequel l'utilisateur a cliqué. Cette valeur sera {{jsxref("undefined")}} si l'utilisateur a cliqué autre part que sur le bouton pour la notification ou si la notification ne possède pas de bouton.
-
- -

Méthodes

- -

Cet objet hérite de méthodes grâce à son parent {{domxref("ExtendableEvent")}}.

- -
-
{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}
-
-

Cette méthode allonge la durée de vie de l'évènement. Elle est conçue pour être appelée dans le gestionnaire d'évènement {{event("install")}} lors de l'installation (cf. {{domxref("ServiceWorkerRegistration.installing")}}) du worker et dans le gestionnaire d'évènement {{event("active")}} pour le worker actif (cf. {{domxref("ServiceWorkerRegistration.active")}}).

-
-
- -

Exemples

- -
self.addEventListener('notificationclick', function(event) {
-  console.log('Au clic sur la notification : ', event.notification.tag);
-  event.notification.close();
-
-  // On regarde ici si elle est déjà ouverte
-  // et si le focus est dessus
-  event.waitUntil(clients.matchAll({
-    type: "window"
-  }).then(function(clientList) {
-    for (var i = 0; i < clientList.length; i++) {
-      var client = clientList[i];
-      if (client.url == '/' && 'focus' in client)
-        return client.focus();
-    }
-    if (clients.openWindow)
-      return clients.openWindow('/');
-  }));
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Web Notifications','#notificationevent','NotificationEvent')}}{{Spec2('Web Notifications')}} 
- -
-

Note : Cette interface est définie au sein de l'API Notifications, mais on y accède via {{domxref("ServiceWorkerGlobalScope")}}.

-
- -

Compatibilité des navigateurs

- -

{{Compat("api.NotificationEvent")}}

diff --git a/files/fr/web/api/notificationevent/index.md b/files/fr/web/api/notificationevent/index.md new file mode 100644 index 0000000000..e46d5d4727 --- /dev/null +++ b/files/fr/web/api/notificationevent/index.md @@ -0,0 +1,92 @@ +--- +title: NotificationEvent +slug: Web/API/NotificationEvent +tags: + - API + - Experimental + - Interface + - Reference + - ServiceWorker +translation_of: Web/API/NotificationEvent +--- +
{{APIRef("Service Workers API")}}{{SeeCompatTable}}
+ +

L'interface NotificationEvent représente un évènement de clic pour une notification et qui est dispatché vers le {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.

+ +

Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.

+ +

Constructeur

+ +
+
{{domxref("NotificationEvent.NotificationEvent()")}}
+
Cette méthode permet de créer un nouvel objet NotificationEvent.
+
+ +

Propriétés

+ +

Cet objet hérite de propriétés grâce à son ancêtre : {{domxref("Event")}}.

+ +
+
{{domxref("NotificationEvent.notification")}} {{readonlyInline}}
+
Cette propriété renvoie un objet {{domxref("Notification")}} représentant la notification sur laquelle on a cliqué pour déclencher l'évènement.
+
{{domxref("NotificationEvent.action")}} {{readonlyinline}}
+
Cette propriété renvoie une chaîne de caractères identifiant le bouton de la notification sur lequel l'utilisateur a cliqué. Cette valeur sera {{jsxref("undefined")}} si l'utilisateur a cliqué autre part que sur le bouton pour la notification ou si la notification ne possède pas de bouton.
+
+ +

Méthodes

+ +

Cet objet hérite de méthodes grâce à son parent {{domxref("ExtendableEvent")}}.

+ +
+
{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}
+
+

Cette méthode allonge la durée de vie de l'évènement. Elle est conçue pour être appelée dans le gestionnaire d'évènement {{event("install")}} lors de l'installation (cf. {{domxref("ServiceWorkerRegistration.installing")}}) du worker et dans le gestionnaire d'évènement {{event("active")}} pour le worker actif (cf. {{domxref("ServiceWorkerRegistration.active")}}).

+
+
+ +

Exemples

+ +
self.addEventListener('notificationclick', function(event) {
+  console.log('Au clic sur la notification : ', event.notification.tag);
+  event.notification.close();
+
+  // On regarde ici si elle est déjà ouverte
+  // et si le focus est dessus
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i < clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' && 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Web Notifications','#notificationevent','NotificationEvent')}}{{Spec2('Web Notifications')}} 
+ +
+

Note : Cette interface est définie au sein de l'API Notifications, mais on y accède via {{domxref("ServiceWorkerGlobalScope")}}.

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.NotificationEvent")}}

diff --git a/files/fr/web/api/notifications_api/index.html b/files/fr/web/api/notifications_api/index.html deleted file mode 100644 index 6d8129b9d8..0000000000 --- a/files/fr/web/api/notifications_api/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: API de Notifications -slug: Web/API/Notifications_API -tags: - - API Notifications - - Notifications - - permission - - système -translation_of: Web/API/Notifications_API ---- -

{{DefaultAPISidebar("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

L'API Notifications permet aux pages Web de contrôler l'affichage des notifications système de l'utilisateur final. Ceux-ci sont en dehors de la fenêtre du contexte de navigation de niveau supérieur, ils peuvent donc être affichés même lorsque l'utilisateur a changé d'onglet ou déplacé vers une autre application. L'API est conçue pour être compatible avec les systèmes de notification existants, sur différentes plates-formes.

- -

Concepts et utilisation

- -

Sur les plates-formes prises en charge, l'affichage d'une notification système implique généralement deux choses. Tout d'abord, l'utilisateur doit accorder l'autorisation à l' {{glossary("Origin","origine")}} actuelle pour afficher les notifications système, ce qui est généralement effectué lorsque l'application ou le site s'initialise, à l'aide de la méthode {{domxref ("Notification.requestPermission()")}}. Cela doit être fait en réponse à un geste de l'utilisateur, tel que cliquer sur un bouton, par exemple:

- -
btn.addEventListener('click', () => {
-  let promise = Notification.requestPermission()
-  // wait for permission
-})
- -
-

Note : Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.

-
- -

Cela créera une boîte de dialogue, proche de cette apparence:

- -

- -

De là, l'utilisateur peut choisir d'autoriser les notifications de cette origine ou de les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.

- -
-

Note : Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé.

-
- -

Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc.

- -

En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'API ServiceWorker, pour permettre aux service worker de déclencher des notifications.

- -
-

Note : Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez Utilisation de l'API Notifications.

-
- -

Les interfaces de Notifications

- -
-
{{domxref("Notification")}}
-
Définit un objet Notification.
-
- -

Ajout de service worker

- -
-
{{domxref("ServiceWorkerRegistration")}}
-
Inclut les méthodes {{domxref ("ServiceWorkerRegistration.showNotification()")}} et {{domxref ("ServiceWorkerRegistration.getNotifications()")}}, pour contrôler l'affichage des notifications.
-
{{domxref("ServiceWorkerGlobalScope")}}
-
Inclut le gestionnaire {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}, pour déclencher des fonctions personnalisées lorsqu'un utilisateur clique sur une notification.
-
{{domxref("NotificationEvent")}}
-
Un type spécifique d'objet événement, basé sur {{domxref ("ExtendableEvent")}}, qui représente une notification qui s'est déclenchée.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification")}}

- -

Voir également

- - diff --git a/files/fr/web/api/notifications_api/index.md b/files/fr/web/api/notifications_api/index.md new file mode 100644 index 0000000000..6d8129b9d8 --- /dev/null +++ b/files/fr/web/api/notifications_api/index.md @@ -0,0 +1,91 @@ +--- +title: API de Notifications +slug: Web/API/Notifications_API +tags: + - API Notifications + - Notifications + - permission + - système +translation_of: Web/API/Notifications_API +--- +

{{DefaultAPISidebar("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

L'API Notifications permet aux pages Web de contrôler l'affichage des notifications système de l'utilisateur final. Ceux-ci sont en dehors de la fenêtre du contexte de navigation de niveau supérieur, ils peuvent donc être affichés même lorsque l'utilisateur a changé d'onglet ou déplacé vers une autre application. L'API est conçue pour être compatible avec les systèmes de notification existants, sur différentes plates-formes.

+ +

Concepts et utilisation

+ +

Sur les plates-formes prises en charge, l'affichage d'une notification système implique généralement deux choses. Tout d'abord, l'utilisateur doit accorder l'autorisation à l' {{glossary("Origin","origine")}} actuelle pour afficher les notifications système, ce qui est généralement effectué lorsque l'application ou le site s'initialise, à l'aide de la méthode {{domxref ("Notification.requestPermission()")}}. Cela doit être fait en réponse à un geste de l'utilisateur, tel que cliquer sur un bouton, par exemple:

+ +
btn.addEventListener('click', () => {
+  let promise = Notification.requestPermission()
+  // wait for permission
+})
+ +
+

Note : Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.

+
+ +

Cela créera une boîte de dialogue, proche de cette apparence:

+ +

+ +

De là, l'utilisateur peut choisir d'autoriser les notifications de cette origine ou de les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.

+ +
+

Note : Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé.

+
+ +

Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc.

+ +

En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'API ServiceWorker, pour permettre aux service worker de déclencher des notifications.

+ +
+

Note : Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez Utilisation de l'API Notifications.

+
+ +

Les interfaces de Notifications

+ +
+
{{domxref("Notification")}}
+
Définit un objet Notification.
+
+ +

Ajout de service worker

+ +
+
{{domxref("ServiceWorkerRegistration")}}
+
Inclut les méthodes {{domxref ("ServiceWorkerRegistration.showNotification()")}} et {{domxref ("ServiceWorkerRegistration.getNotifications()")}}, pour contrôler l'affichage des notifications.
+
{{domxref("ServiceWorkerGlobalScope")}}
+
Inclut le gestionnaire {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}, pour déclencher des fonctions personnalisées lorsqu'un utilisateur clique sur une notification.
+
{{domxref("NotificationEvent")}}
+
Un type spécifique d'objet événement, basé sur {{domxref ("ExtendableEvent")}}, qui représente une notification qui s'est déclenchée.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification")}}

+ +

Voir également

+ + 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 deleted file mode 100644 index 694ad26f34..0000000000 --- a/files/fr/web/api/notifications_api/using_the_notifications_api/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: Utilisation de l'API Notifications -slug: Web/API/Notifications_API/Using_the_Notifications_API -translation_of: Web/API/Notifications_API/Using_the_Notifications_API -original_slug: Web/API/notification/Using_Web_Notifications ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

L'API Notifications permet à une application ou à une page web d'envoyer des notifications affichées en dehors de la page par le système sous-jacent. Cela permet aux applications web d'envoyer des informations aux utilisatrices et utilisateurs même lorsque l'application est en veille ou en arrière-plan. Dans cet article, nous verrons les bases de cette API afin de vous permettre de l'utiliser dans vos propres applications.

- -

Généralement, le système sous-jacent utilisé pour les notifications est celui du système d'exploitation. Voyez par exemple comment votre appareil mobile ou ordinateur affiche certaines notifications.

- -

Une capture d'écran d'Android avec trois notifications.

- -

Le système de notification du système d'exploitation variera selon la plateforme et le navigateur mais ce n'est pas un problème en soi : l'API Notifications a été conçue de façon suffisamment générique pour être compatible avec la plupart des systèmes de notification.

- -

Exemples

- -

Un des cas d'usage parmi les plus évidents pour les notifications est un client mail web ou une application de messagerie instantanée qui notifie dès qu'un nouveau message a été reçu, y compris lorsqu'on utilise l'appareil pour autre chose avec une autre application. De nombreux exemples existent pour ce cas, Slack en est un parmi d'autres.

- -

Nous avons écrit un exemple concret : une application pour gérer des listes de trucs à faire (« to-do ») pour vous donner une meilleure idée de la façon dont les notifications web peuvent être utilisées. Les données sont stockées localement avec IndexedDB et les utilisateurs sont notifiés lorsque les tâches arrivent à échéance grâce aux notifications système. Téléchargez le code de cette application, ou testez l'application en live.

- -

Demander la permission

- -

Avant qu'une application puisse envoyer une notification, l'utilisatrice ou l'utilisateur doit lui accorder le droit de le faire. Il s'agit d'un prérequis courant pour les API qui doivent interagir en dehors d'une page web : l'utilisatrice ou l'utilisateur doit, au moins une fois, explicitement accorder la permission à l'application d'afficher des notifications. La personne contrôle ainsi quels sites ou applications sont autorisés à afficher des notifications.

- -

En raison d'abus des notifications par le passé, les équipes des navigateurs web ont commencé à mettre en place des stratégies pour limiter ce problème. Dans la pratique, vous ne devriez demander la permission à une personne uniquement après que celle-ci a interagi avec votre site/application (par exemple en ayant cliqué sur un bouton). Il ne s'agit pas seulement d'une bonne pratique (on ne devrait pas ennuyer les utilisatrices et utilisateurs avec de trop nombreuses notifications indésirées) mais d'une méthode qui sera implémentée par les différents navigateurs : Firefox le fait depuis Firefox 72 et Safari le fait également depuis quelque temps.

- -

De plus, pour Chrome et Firefox, il n'est pas possible de demander la permission d'afficher des notifications à moins que le site soit servi dans un contexte sécurisé (c'est-à-dire avec HTTPS) et il n'est plus possible de demander une telle permission depuis une <iframe> d'une origine tierce.

- -

Vérifier l'état de la permission

- -

Vous pouvez vérifier si la permission a déjà été accordée ou non grâce à la propriété en lecture seule Notification.permission. Cette dernière peut avoir l'une de ces trois valeurs :

- -
-
default
-
La permission n'a pas encore été demandée à l'utilisatrice ou l'utilisateur, les notifications ne seront pas affichées.
-
granted
-
La permission d'afficher des notifications a été accordée après que la demande a été affichée.
-
denied
-
La permission d'afficher des notifications a été explicitement refusée.
-
- -

Obtenir la permission

- -

Si la permission n'a pas encore été accordée, l'application devra utiliser la méthode Notification.requestPermission() afin de la demander. Une version très basique consiste à inclure :

- -
Notification.requestPermission().then(function(result) {
-  console.log(result);
-});
- -

Cela utilise la version de la méthode sous forme de promesse. Si vous souhaitez ou avez besoin de prendre en charge les versions antérieures, vous pourrez avoir besoin de version sous forme d'une fonction de rappel (callback) :

- -
Notification.requestPermission();
- -

Cette version accepte en paramètre une fonction de rappel qui sera appelée une fois que l'utilisatrice ou l'utilisateur aura répondu à la demande de permission.

- -

Exemple

- -

Dans notre application de démonstration, nous avons inclus un bouton « Activer les notifications » qui, lorsqu'il est pressé, demande la permission pour l'application.

- -
<button id="enable">Activer les notifications</button>
- -

Cliquer sur ce bouton déclenche l'appel à la fonction askNotificationPermission() :

- -
function askNotificationPermission() {
-  // La fonction qui sert effectivement à demander la permission
-  function handlePermission(permission) {
-    // On affiche ou non le bouton en fonction de la réponse
-    if(Notification.permission === 'denied' || Notification.permission === 'default') {
-      notificationBtn.style.display = 'block';
-    } else {
-      notificationBtn.style.display = 'none';
-    }
-  }
-
-  // Vérifions si le navigateur prend en charge les notifications
-  if (!('Notification' in window)) {
-    console.log("Ce navigateur ne prend pas en charge les notifications.");
-  } else {
-    if(checkNotificationPromise()) {
-      Notification.requestPermission()
-      .then((permission) => {
-        handlePermission(permission);
-      })
-    } else {
-      Notification.requestPermission(function(permission) {
-        handlePermission(permission);
-      });
-    }
-  }
-}
- -

Commençons par jeter un œil au deuxième bloc de code : vous verrez qu'on commence par vérifier la prise en charge de l'API Notifications. Si celle-ci est bien disponible, on regarde si la version à base de promesses pour Notification.requestPermission() est prise en charge. Si c'est le cas, on utilise cette version (prise en charge partout à l'exception de Safari) et sinon, on utilise l'ancienne version avec le callback (prise en charge par Safari).

- -

Pour éviter la duplication du code, nous avons stocké quelques lignes dans la fonction handlePermission() qui correspond au premier bloc de ce fragment de code. Dans cette fonction, on définit explicitement la valeur de Notification.permission (certaines anciennes versions de Chrome avaient un bug et ne réalisaient pas cette initialisation automatiquement) puis on affiche ou on masque le bouton selon que la permission a déjà été demandée ou non. On ne veut pas afficher le bouton si la permission a déjà été accordée, en revanche, si elle a été déclinée, on veut permettre à l'utilisatrice ou à l'utilisateur de changer d'avis plus tard.

- -
-

Note : Avant Chrome 37, Chrome ne permettait pas d'appeler Notification.requestPermission() dans le gestionnaire d'évènements load (voir le bug 274284).

-
- -

Détecter la prise en charge de requestPermission() en promesse

- -

Plus haut, nous avons dit vérifier la prise en charge du navigateur pour la version de Notification.requestPermission() avec les promesses. Pour cela, nous avons utilisé :

- -
function checkNotificationPromise() {
-    try {
-      Notification.requestPermission().then();
-    } catch(e) {
-      return false;
-    }
-
-    return true;
-  }
- -

Cela permet de vérifier la présence d'une méthode .then() sur requestPermission(). Si une telle fonction est présente, on continue et on renvoie true. Sinon, on renvoie false dans le bloc de code catch() {}.

- -

Créer une notification

- -

Pour créer une notification, on utilisera le constructeur Notification. Ce constructeur attend un titre à afficher au sein de la notification et permet d'utiliser différentes options pour améliorer la notification comme une icône ou un texte (body).

- -

Par exemple, dans notre application de démonstration, on utilise le fragment de code suivant pour créer une notification lorsque c'est nécessaire (ce fragment se trouve dans la fonction createNotification()) :

- -
const img = '/to-do-notifications/img/icon-128.png';
-const text = 'Coucou ! Votre tâche "' + titre + '" arrive maintenant à échéance.';
-const notification = new Notification('Liste de trucs à faire', { body: text, icon: img });
- -

Fermer les notifications

- -

On utilisera la méthode close() afin de retirer une notification qui n'est plus pertinente (par exemple parce que la personne l'a déjà lue sur la page web s'il s'agit d'une messagerie ou, dans le cas d'un lecteur de musique, si la chanson en cours de lecture a déjà changé). La plupart des navigateurs effacent les notifications après un certain délai (généralement autour de 4 secondes) mais ça ne devrait pas être un souci particulier, car cette tâche est souvent gérée par l'utilisateur ou l'agent utilisateur. La fermeture peut également être gérée par le système d'exploitation et les utilisatrices et utilisateurs doivent avoir la main sur ce comportement. D'anciennes versions de Chrome ne retiraient pas les automatiquement les notifications et vous pouvez donc utiliser un setTimeout() uniquement pour ces versions historiques.

- -
const n = new Notification('Une super chanson');
-document.addEventListener('visibilitychange', function() {
-  if (document.visibilityState === 'visible') {
-    // L'onglet est désormais visible et la notification n'est plus pertinente
-    // on peut la fermer
-    n.close();
-  }
-});
-
- -
-

Note : Cette API ne devrait pas être utilisée pour retirer la notification de l'écran après un délai donné car elle supprimera également la notification de la liste des notifications et empêchera toute interaction avec celle-ci après qu'elle a initialement été affichée.

-
- -
-

Note : Lorsque vous recevez un évènement close, il n'y a aucune garantie que celui-ci provienne de l'utilisatrice ou de l'utilisateur. Cela correspond à la spécification qui indique : « lorsqu'une notification est fermée, que ce soit par la plateforme sous-jacente ou par l'utilisateur, l'étape de fermeture correspondante doit être exécutée. ».

-
- -

Évènements relatifs aux notifications

- -

Quatre évènements sont déclenchés sur une instance de Notification :

- -
-
click
-
Déclenché lorsque la personne clique sur la notification.
-
close
-
Déclenché lorsque la notification a été fermée.
-
error
-
Déclenché si une erreur se produit avec la notification. Généralement, cela a lieu lorsqu'il y a un problème d'affichage.
-
show
-
Déclenché lorsque la notification est affichée.
-
- -

Ces évènements peuvent être suivis avec les gestionnaires d'évènement onclick, onclose, onerror, et onshow. Notification héritant également de EventTarget, il est aussi possible d'utiliser la méthode addEventListener().

- -

Remplacer les notifications existantes

- -

Il est généralement peu souhaitable de recevoir de nombreuses notifications sur une courte période. Par exemple, que se passerait-il si une messagerie envoyait une notification pour chaque message reçu alors qu'une discussion est en cours ? Pour éviter de submerger l'utilisatrice ou l'utilisateur avec de trop nombreuses notifications, il est possible de modifier les notifications en attente en remplaçant une ou plusieurs notifications avec une nouvelle notification à jour.

- -

Pour cela, on pourra ajouter une balise à toute nouvelle notification. Si une notification existante possède la balise correspondante et qu'elle n'a pas encore été affichée, la nouvelle notification remplacera la précédente. Si une notification avec la même balise a déjà été affichée, elle est fermée et la nouvelle notification est affichée.

- -

Exemple d'utilisation des balises

- -

Prenons le fragment HTML qui suit :

- -
<button>Envoyez une notification !</button>
- -

Il est possible de gérer plusieurs notifications ainsi :

- -
window.addEventListener('load', function () {
-  const button = document.getElementsByTagName('button')[0];
-
-  button.addEventListener('click', function () {
-    // Si l'utilisateur a permis les notifications
-    // essayons d'envoyer 10 notifications
-    if (window.Notification && Notification.permission === "granted") {
-      let i = 0;
-      // On utilise un intervalle, car certains navigateurs (dont Firefox)
-      // bloquent les notifications s'il y en a trop sur une période
-      // donnée
-      const interval = window.setInterval(function () {
-        // Avec la balise, on ne devrait voir que la notification "Coucou ! 9"
-        const n = new Notification("Coucou ! " + i, {tag: 'soManyNotification'});
-        if (i++ == 9) {
-          window.clearInterval(interval);
-        }
-      }, 200);
-    }
-
-    // Si l'utilisateur n'a pas encore autorisé ou non
-    // Note : À cause de Chrome, on ne peut pas s'assurer que la propriété permission 
-    // est définie et il est donc dangereux de vérifier la valeur "default"
-    else if (window.Notification && Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        // Si la permission a été accordée
-        if (status === "granted") {
-          var i = 0;
-          // On utilise un intervalle, car certains navigateurs (dont Firefox)
-          // bloquent les notifications s'il y en a trop sur une période
-          // donnée
-          var interval = window.setInterval(function () {
-            // Avec la balise, on ne devrait voir que la notification "Coucou ! 9"
-            const n = new Notification("Coucou ! " + i, {tag: 'soManyNotification'});
-            if (i++ == 9) {
-              window.clearInterval(interval);
-            }
-          }, 200);
-        }
-
-        // Sinon, on peut utiliser une alerte modale classique
-        else {
-          alert("Coucou !");
-        }
-      });
-    }
-
-    // Si l'utilisateur a refusé les notifications
-    else {
-      // On utilise une alerte modale classique
-      alert("Coucou !");
-    }
-  });
-});
- -

Voir le résultat de cet exemple :

- -

{{EmbedLiveSample('tag_example', '100%', 30)}}

- -

Spécifications

- -

{{Specifications("api.Notification")}}

- -

Compatibilité des navigateurs

- -

{{Compat("api.Notification")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/notifications_api/using_the_notifications_api/index.md b/files/fr/web/api/notifications_api/using_the_notifications_api/index.md new file mode 100644 index 0000000000..694ad26f34 --- /dev/null +++ b/files/fr/web/api/notifications_api/using_the_notifications_api/index.md @@ -0,0 +1,252 @@ +--- +title: Utilisation de l'API Notifications +slug: Web/API/Notifications_API/Using_the_Notifications_API +translation_of: Web/API/Notifications_API/Using_the_Notifications_API +original_slug: Web/API/notification/Using_Web_Notifications +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

L'API Notifications permet à une application ou à une page web d'envoyer des notifications affichées en dehors de la page par le système sous-jacent. Cela permet aux applications web d'envoyer des informations aux utilisatrices et utilisateurs même lorsque l'application est en veille ou en arrière-plan. Dans cet article, nous verrons les bases de cette API afin de vous permettre de l'utiliser dans vos propres applications.

+ +

Généralement, le système sous-jacent utilisé pour les notifications est celui du système d'exploitation. Voyez par exemple comment votre appareil mobile ou ordinateur affiche certaines notifications.

+ +

Une capture d'écran d'Android avec trois notifications.

+ +

Le système de notification du système d'exploitation variera selon la plateforme et le navigateur mais ce n'est pas un problème en soi : l'API Notifications a été conçue de façon suffisamment générique pour être compatible avec la plupart des systèmes de notification.

+ +

Exemples

+ +

Un des cas d'usage parmi les plus évidents pour les notifications est un client mail web ou une application de messagerie instantanée qui notifie dès qu'un nouveau message a été reçu, y compris lorsqu'on utilise l'appareil pour autre chose avec une autre application. De nombreux exemples existent pour ce cas, Slack en est un parmi d'autres.

+ +

Nous avons écrit un exemple concret : une application pour gérer des listes de trucs à faire (« to-do ») pour vous donner une meilleure idée de la façon dont les notifications web peuvent être utilisées. Les données sont stockées localement avec IndexedDB et les utilisateurs sont notifiés lorsque les tâches arrivent à échéance grâce aux notifications système. Téléchargez le code de cette application, ou testez l'application en live.

+ +

Demander la permission

+ +

Avant qu'une application puisse envoyer une notification, l'utilisatrice ou l'utilisateur doit lui accorder le droit de le faire. Il s'agit d'un prérequis courant pour les API qui doivent interagir en dehors d'une page web : l'utilisatrice ou l'utilisateur doit, au moins une fois, explicitement accorder la permission à l'application d'afficher des notifications. La personne contrôle ainsi quels sites ou applications sont autorisés à afficher des notifications.

+ +

En raison d'abus des notifications par le passé, les équipes des navigateurs web ont commencé à mettre en place des stratégies pour limiter ce problème. Dans la pratique, vous ne devriez demander la permission à une personne uniquement après que celle-ci a interagi avec votre site/application (par exemple en ayant cliqué sur un bouton). Il ne s'agit pas seulement d'une bonne pratique (on ne devrait pas ennuyer les utilisatrices et utilisateurs avec de trop nombreuses notifications indésirées) mais d'une méthode qui sera implémentée par les différents navigateurs : Firefox le fait depuis Firefox 72 et Safari le fait également depuis quelque temps.

+ +

De plus, pour Chrome et Firefox, il n'est pas possible de demander la permission d'afficher des notifications à moins que le site soit servi dans un contexte sécurisé (c'est-à-dire avec HTTPS) et il n'est plus possible de demander une telle permission depuis une <iframe> d'une origine tierce.

+ +

Vérifier l'état de la permission

+ +

Vous pouvez vérifier si la permission a déjà été accordée ou non grâce à la propriété en lecture seule Notification.permission. Cette dernière peut avoir l'une de ces trois valeurs :

+ +
+
default
+
La permission n'a pas encore été demandée à l'utilisatrice ou l'utilisateur, les notifications ne seront pas affichées.
+
granted
+
La permission d'afficher des notifications a été accordée après que la demande a été affichée.
+
denied
+
La permission d'afficher des notifications a été explicitement refusée.
+
+ +

Obtenir la permission

+ +

Si la permission n'a pas encore été accordée, l'application devra utiliser la méthode Notification.requestPermission() afin de la demander. Une version très basique consiste à inclure :

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

Cela utilise la version de la méthode sous forme de promesse. Si vous souhaitez ou avez besoin de prendre en charge les versions antérieures, vous pourrez avoir besoin de version sous forme d'une fonction de rappel (callback) :

+ +
Notification.requestPermission();
+ +

Cette version accepte en paramètre une fonction de rappel qui sera appelée une fois que l'utilisatrice ou l'utilisateur aura répondu à la demande de permission.

+ +

Exemple

+ +

Dans notre application de démonstration, nous avons inclus un bouton « Activer les notifications » qui, lorsqu'il est pressé, demande la permission pour l'application.

+ +
<button id="enable">Activer les notifications</button>
+ +

Cliquer sur ce bouton déclenche l'appel à la fonction askNotificationPermission() :

+ +
function askNotificationPermission() {
+  // La fonction qui sert effectivement à demander la permission
+  function handlePermission(permission) {
+    // On affiche ou non le bouton en fonction de la réponse
+    if(Notification.permission === 'denied' || Notification.permission === 'default') {
+      notificationBtn.style.display = 'block';
+    } else {
+      notificationBtn.style.display = 'none';
+    }
+  }
+
+  // Vérifions si le navigateur prend en charge les notifications
+  if (!('Notification' in window)) {
+    console.log("Ce navigateur ne prend pas en charge les notifications.");
+  } else {
+    if(checkNotificationPromise()) {
+      Notification.requestPermission()
+      .then((permission) => {
+        handlePermission(permission);
+      })
+    } else {
+      Notification.requestPermission(function(permission) {
+        handlePermission(permission);
+      });
+    }
+  }
+}
+ +

Commençons par jeter un œil au deuxième bloc de code : vous verrez qu'on commence par vérifier la prise en charge de l'API Notifications. Si celle-ci est bien disponible, on regarde si la version à base de promesses pour Notification.requestPermission() est prise en charge. Si c'est le cas, on utilise cette version (prise en charge partout à l'exception de Safari) et sinon, on utilise l'ancienne version avec le callback (prise en charge par Safari).

+ +

Pour éviter la duplication du code, nous avons stocké quelques lignes dans la fonction handlePermission() qui correspond au premier bloc de ce fragment de code. Dans cette fonction, on définit explicitement la valeur de Notification.permission (certaines anciennes versions de Chrome avaient un bug et ne réalisaient pas cette initialisation automatiquement) puis on affiche ou on masque le bouton selon que la permission a déjà été demandée ou non. On ne veut pas afficher le bouton si la permission a déjà été accordée, en revanche, si elle a été déclinée, on veut permettre à l'utilisatrice ou à l'utilisateur de changer d'avis plus tard.

+ +
+

Note : Avant Chrome 37, Chrome ne permettait pas d'appeler Notification.requestPermission() dans le gestionnaire d'évènements load (voir le bug 274284).

+
+ +

Détecter la prise en charge de requestPermission() en promesse

+ +

Plus haut, nous avons dit vérifier la prise en charge du navigateur pour la version de Notification.requestPermission() avec les promesses. Pour cela, nous avons utilisé :

+ +
function checkNotificationPromise() {
+    try {
+      Notification.requestPermission().then();
+    } catch(e) {
+      return false;
+    }
+
+    return true;
+  }
+ +

Cela permet de vérifier la présence d'une méthode .then() sur requestPermission(). Si une telle fonction est présente, on continue et on renvoie true. Sinon, on renvoie false dans le bloc de code catch() {}.

+ +

Créer une notification

+ +

Pour créer une notification, on utilisera le constructeur Notification. Ce constructeur attend un titre à afficher au sein de la notification et permet d'utiliser différentes options pour améliorer la notification comme une icône ou un texte (body).

+ +

Par exemple, dans notre application de démonstration, on utilise le fragment de code suivant pour créer une notification lorsque c'est nécessaire (ce fragment se trouve dans la fonction createNotification()) :

+ +
const img = '/to-do-notifications/img/icon-128.png';
+const text = 'Coucou ! Votre tâche "' + titre + '" arrive maintenant à échéance.';
+const notification = new Notification('Liste de trucs à faire', { body: text, icon: img });
+ +

Fermer les notifications

+ +

On utilisera la méthode close() afin de retirer une notification qui n'est plus pertinente (par exemple parce que la personne l'a déjà lue sur la page web s'il s'agit d'une messagerie ou, dans le cas d'un lecteur de musique, si la chanson en cours de lecture a déjà changé). La plupart des navigateurs effacent les notifications après un certain délai (généralement autour de 4 secondes) mais ça ne devrait pas être un souci particulier, car cette tâche est souvent gérée par l'utilisateur ou l'agent utilisateur. La fermeture peut également être gérée par le système d'exploitation et les utilisatrices et utilisateurs doivent avoir la main sur ce comportement. D'anciennes versions de Chrome ne retiraient pas les automatiquement les notifications et vous pouvez donc utiliser un setTimeout() uniquement pour ces versions historiques.

+ +
const n = new Notification('Une super chanson');
+document.addEventListener('visibilitychange', function() {
+  if (document.visibilityState === 'visible') {
+    // L'onglet est désormais visible et la notification n'est plus pertinente
+    // on peut la fermer
+    n.close();
+  }
+});
+
+ +
+

Note : Cette API ne devrait pas être utilisée pour retirer la notification de l'écran après un délai donné car elle supprimera également la notification de la liste des notifications et empêchera toute interaction avec celle-ci après qu'elle a initialement été affichée.

+
+ +
+

Note : Lorsque vous recevez un évènement close, il n'y a aucune garantie que celui-ci provienne de l'utilisatrice ou de l'utilisateur. Cela correspond à la spécification qui indique : « lorsqu'une notification est fermée, que ce soit par la plateforme sous-jacente ou par l'utilisateur, l'étape de fermeture correspondante doit être exécutée. ».

+
+ +

Évènements relatifs aux notifications

+ +

Quatre évènements sont déclenchés sur une instance de Notification :

+ +
+
click
+
Déclenché lorsque la personne clique sur la notification.
+
close
+
Déclenché lorsque la notification a été fermée.
+
error
+
Déclenché si une erreur se produit avec la notification. Généralement, cela a lieu lorsqu'il y a un problème d'affichage.
+
show
+
Déclenché lorsque la notification est affichée.
+
+ +

Ces évènements peuvent être suivis avec les gestionnaires d'évènement onclick, onclose, onerror, et onshow. Notification héritant également de EventTarget, il est aussi possible d'utiliser la méthode addEventListener().

+ +

Remplacer les notifications existantes

+ +

Il est généralement peu souhaitable de recevoir de nombreuses notifications sur une courte période. Par exemple, que se passerait-il si une messagerie envoyait une notification pour chaque message reçu alors qu'une discussion est en cours ? Pour éviter de submerger l'utilisatrice ou l'utilisateur avec de trop nombreuses notifications, il est possible de modifier les notifications en attente en remplaçant une ou plusieurs notifications avec une nouvelle notification à jour.

+ +

Pour cela, on pourra ajouter une balise à toute nouvelle notification. Si une notification existante possède la balise correspondante et qu'elle n'a pas encore été affichée, la nouvelle notification remplacera la précédente. Si une notification avec la même balise a déjà été affichée, elle est fermée et la nouvelle notification est affichée.

+ +

Exemple d'utilisation des balises

+ +

Prenons le fragment HTML qui suit :

+ +
<button>Envoyez une notification !</button>
+ +

Il est possible de gérer plusieurs notifications ainsi :

+ +
window.addEventListener('load', function () {
+  const button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si l'utilisateur a permis les notifications
+    // essayons d'envoyer 10 notifications
+    if (window.Notification && Notification.permission === "granted") {
+      let i = 0;
+      // On utilise un intervalle, car certains navigateurs (dont Firefox)
+      // bloquent les notifications s'il y en a trop sur une période
+      // donnée
+      const interval = window.setInterval(function () {
+        // Avec la balise, on ne devrait voir que la notification "Coucou ! 9"
+        const n = new Notification("Coucou ! " + i, {tag: 'soManyNotification'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
+    }
+
+    // Si l'utilisateur n'a pas encore autorisé ou non
+    // Note : À cause de Chrome, on ne peut pas s'assurer que la propriété permission 
+    // est définie et il est donc dangereux de vérifier la valeur "default"
+    else if (window.Notification && Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        // Si la permission a été accordée
+        if (status === "granted") {
+          var i = 0;
+          // On utilise un intervalle, car certains navigateurs (dont Firefox)
+          // bloquent les notifications s'il y en a trop sur une période
+          // donnée
+          var interval = window.setInterval(function () {
+            // Avec la balise, on ne devrait voir que la notification "Coucou ! 9"
+            const n = new Notification("Coucou ! " + i, {tag: 'soManyNotification'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
+        }
+
+        // Sinon, on peut utiliser une alerte modale classique
+        else {
+          alert("Coucou !");
+        }
+      });
+    }
+
+    // Si l'utilisateur a refusé les notifications
+    else {
+      // On utilise une alerte modale classique
+      alert("Coucou !");
+    }
+  });
+});
+ +

Voir le résultat de cet exemple :

+ +

{{EmbedLiveSample('tag_example', '100%', 30)}}

+ +

Spécifications

+ +

{{Specifications("api.Notification")}}

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Notification")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/notifyaudioavailableevent/index.html b/files/fr/web/api/notifyaudioavailableevent/index.html deleted file mode 100644 index ad2b4365e2..0000000000 --- a/files/fr/web/api/notifyaudioavailableevent/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: NotifyAudioAvailableEvent -slug: Web/API/NotifyAudioAvailableEvent -tags: - - API - - Audio - - Déprécié - - Non-standard - - Reference - - Référence(2) -translation_of: Web/API/NotifyAudioAvailableEvent ---- -
{{APIRef("Web Audio API")}}{{Non-standard_header}}{{Deprecated_header}}
- -

L'interface NotifyAudioAvailableEvent non standard et obsolète définit l'événement envoyé aux éléments audio lorsque la mémoire tampon audio est pleine.

- -

Propriétés

- -
-
frameBuffer {{ReadOnlyInline}}
-
Un {{jsxref("Float32Array")}} contenant les données audo à virgule flottante 32 bits brutes obtenues à partir du décodage de l'audio (par exemple, les données brutes envoyées au matériel audio par rapport à l'audio codé). Les données sont une série d'échantillons audio, chaque échantillon contenant une valeur de 32 bits par canal audio. Toutes les trames audio sont normalisées pour contenir 1024 échantillons par défaut, mais peuvent avoir une longueur comprise entre 512 et 16384 échantillons si l'utilisateur a défini une longueur différente à l'aide de l'attribut mozFrameBufferLength.
-
time
-
Valeur à virgule flottante indiquant le temps en secondes auquel le premier échantillon du frameBuffer se produit, par rapport au début de la piste audio.
-
diff --git a/files/fr/web/api/notifyaudioavailableevent/index.md b/files/fr/web/api/notifyaudioavailableevent/index.md new file mode 100644 index 0000000000..ad2b4365e2 --- /dev/null +++ b/files/fr/web/api/notifyaudioavailableevent/index.md @@ -0,0 +1,24 @@ +--- +title: NotifyAudioAvailableEvent +slug: Web/API/NotifyAudioAvailableEvent +tags: + - API + - Audio + - Déprécié + - Non-standard + - Reference + - Référence(2) +translation_of: Web/API/NotifyAudioAvailableEvent +--- +
{{APIRef("Web Audio API")}}{{Non-standard_header}}{{Deprecated_header}}
+ +

L'interface NotifyAudioAvailableEvent non standard et obsolète définit l'événement envoyé aux éléments audio lorsque la mémoire tampon audio est pleine.

+ +

Propriétés

+ +
+
frameBuffer {{ReadOnlyInline}}
+
Un {{jsxref("Float32Array")}} contenant les données audo à virgule flottante 32 bits brutes obtenues à partir du décodage de l'audio (par exemple, les données brutes envoyées au matériel audio par rapport à l'audio codé). Les données sont une série d'échantillons audio, chaque échantillon contenant une valeur de 32 bits par canal audio. Toutes les trames audio sont normalisées pour contenir 1024 échantillons par défaut, mais peuvent avoir une longueur comprise entre 512 et 16384 échantillons si l'utilisateur a défini une longueur différente à l'aide de l'attribut mozFrameBufferLength.
+
time
+
Valeur à virgule flottante indiquant le temps en secondes auquel le premier échantillon du frameBuffer se produit, par rapport au début de la piste audio.
+
diff --git a/files/fr/web/api/offlineaudiocontext/complete_event/index.html b/files/fr/web/api/offlineaudiocontext/complete_event/index.html deleted file mode 100644 index 80b1b067f5..0000000000 --- a/files/fr/web/api/offlineaudiocontext/complete_event/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: complete -slug: Web/API/OfflineAudioContext/complete_event -translation_of: Web/API/OfflineAudioContext/complete_event -original_slug: Web/Events/complete ---- -
-

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/offlineaudiocontext/complete_event/index.md b/files/fr/web/api/offlineaudiocontext/complete_event/index.md new file mode 100644 index 0000000000..80b1b067f5 --- /dev/null +++ b/files/fr/web/api/offlineaudiocontext/complete_event/index.md @@ -0,0 +1,92 @@ +--- +title: complete +slug: Web/API/OfflineAudioContext/complete_event +translation_of: Web/API/OfflineAudioContext/complete_event +original_slug: Web/Events/complete +--- +
+

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/offscreencanvas/index.html b/files/fr/web/api/offscreencanvas/index.html deleted file mode 100644 index fa540f07d4..0000000000 --- a/files/fr/web/api/offscreencanvas/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: OffscreenCanvas -slug: Web/API/OffscreenCanvas -tags: - - API - - Canevas - - Experimental - - Interface - - Reference -translation_of: Web/API/OffscreenCanvas ---- -
{{APIRef("Canvas API")}} {{SeeCompatTable}}
- -

L'interface OffscreenCanvas fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et worker.

- -
-

Note : Cette API n'est actuellement implémentée que pour les contextes WebGL1 etWebGL2. Voir {{bug(801176)}} pour le support de l'API canvas depuis les workers.

-
- -

Constructeur

- -
-
{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
-
Constructeur OffscreenCanvas. Crée un nouvel objet OffscreenCanvas.
-
- -

Propriétés

- -
-
{{domxref("OffscreenCanvas.height")}}
-
La hauteur du canevas hors écran.
-
{{domxref("OffscreenCanvas.width")}}
-
La largeur du canevas hors écran.
-
- -

Méthodes

- -
-
{{domxref("OffscreenCanvas.getContext()")}}
-
Retourne un contexte de rendu pour le canevas hors écran.
-
- -
-
{{domxref("OffscreenCanvas.toBlob()")}}
-
Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas.
-
- -
-
{{domxref("OffscreenCanvas.transferToImageBitmap()")}}
-
Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du OffscreenCanvas.
-
- -

Exemples

- -

Affichage synchrone d'images produites par un OffscreenCanvas

- -

Une façon d'utiliser l'API OffscreenCanvas est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet OffscreenCanvas pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert.

- -

Pour afficher l'ImageBitmap, vous pouvez utiliser un contexte {{domxref("ImageBitmapRenderingContext")}}, qui peut être créé en appelant canvas.getContext("bitmaprenderer") sur un élément canevas (visible). Ce contexte fournit uniquement des fonctionnalités pour remplacer le contenu du canevas par l'ImageBitmap donnée. Un appel à {{domxref("ImageBitmapRenderingContext.transferImageBitmap()")}} avec l'ImageBitmap précédemment affichée et enregistrée à partir de OffscreenCanvas, affichera l'ImageBitmap sur le canevas et transférera son appartenance au canevas. Un seul OffscreenCanvas peut transférer des images dans un nombre arbitraire d'autres objets ImageBitmapRenderingContext.

- -

Étant donnés ces deux éléments {{HTMLElement("canvas")}} :

- -
<canvas id="une"></canvas>
-<canvas id="deux"></canvas>
- -

le code suivant fournira la restitution, en utilisant un OffscreenCanvas comme décrit ci-dessus.

- -
var une = document.getElementById("une").getContext("bitmaprenderer");
-var deux = document.getElementById("deux").getContext("bitmaprenderer");
-
-var horsEcran = new OffscreenCanvas(256, 256);
-var gl = horsEcran.getContext('webgl');
-
-// ... un peu de dessin pour le premier canevas en utilisant le contexte gl ...
-
-// Exécuter la restitution dans le premier canevas
-var bitmapUne = horsEcran.transferToImageBitmap();
-une.transferImageBitmap(bitmapUne);
-
-// ... davantage de dessin pour le second canevas en utilisant le context gl ...
-
-// Exécuter la restitution pour le second canevas
-var bitmapDeux = horsEcran.transferToImageBitmap();
-deux.transferImageBitmap(bitmapDeux);
-
- -

Affichage asynchrone d'images produites par un OffscreenCanvas

- -

Une autre façon d'utiliser l'API OffscreenCanvas est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet OffscreenCanvas à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un RenderingContext à partir de ce OffscreenCanvas.

- -

Afin de rendre les cadres visibles, vous pouvez appeler commit() sur ce RenderingContext, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original.

- -

Notez que dans Firefox, cette API n'est actuellement implémentée que pour le contexte WebGL ({{domxref ("WebGLRenderingContext.commit()")}}). Pour la prise en charge de l'API Canvas 2D par les employés, voir {{bug (801176)}}.

- -

main.js (code du thread principal) :

- -
var canevasHtml = document.getElementById("canevas");
-var horsEcran = canevasHtml.transferControlToOffscreen();
-
-var worker = new Worker("offscreencanvas.js");
-worker.postMessage({canvas: offscreen}, [offscreen]);
-
- -

offscreencanvas.js (code worker) :

- -
onmessage = function(evt) {
-  var canevas = evt.data.canvas.
-  var gl = canevas.getContext("webgl");
-
-  // ... un peu de dessin en utilisant le contexte gl ...
-
-  // Renvoyer les images dans l'HTMLCanvasElement original
-  gl.commit();
-};
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.OffscreenCanvas")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/offscreencanvas/index.md b/files/fr/web/api/offscreencanvas/index.md new file mode 100644 index 0000000000..fa540f07d4 --- /dev/null +++ b/files/fr/web/api/offscreencanvas/index.md @@ -0,0 +1,147 @@ +--- +title: OffscreenCanvas +slug: Web/API/OffscreenCanvas +tags: + - API + - Canevas + - Experimental + - Interface + - Reference +translation_of: Web/API/OffscreenCanvas +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

L'interface OffscreenCanvas fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et worker.

+ +
+

Note : Cette API n'est actuellement implémentée que pour les contextes WebGL1 etWebGL2. Voir {{bug(801176)}} pour le support de l'API canvas depuis les workers.

+
+ +

Constructeur

+ +
+
{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
+
Constructeur OffscreenCanvas. Crée un nouvel objet OffscreenCanvas.
+
+ +

Propriétés

+ +
+
{{domxref("OffscreenCanvas.height")}}
+
La hauteur du canevas hors écran.
+
{{domxref("OffscreenCanvas.width")}}
+
La largeur du canevas hors écran.
+
+ +

Méthodes

+ +
+
{{domxref("OffscreenCanvas.getContext()")}}
+
Retourne un contexte de rendu pour le canevas hors écran.
+
+ +
+
{{domxref("OffscreenCanvas.toBlob()")}}
+
Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas.
+
+ +
+
{{domxref("OffscreenCanvas.transferToImageBitmap()")}}
+
Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du OffscreenCanvas.
+
+ +

Exemples

+ +

Affichage synchrone d'images produites par un OffscreenCanvas

+ +

Une façon d'utiliser l'API OffscreenCanvas est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet OffscreenCanvas pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert.

+ +

Pour afficher l'ImageBitmap, vous pouvez utiliser un contexte {{domxref("ImageBitmapRenderingContext")}}, qui peut être créé en appelant canvas.getContext("bitmaprenderer") sur un élément canevas (visible). Ce contexte fournit uniquement des fonctionnalités pour remplacer le contenu du canevas par l'ImageBitmap donnée. Un appel à {{domxref("ImageBitmapRenderingContext.transferImageBitmap()")}} avec l'ImageBitmap précédemment affichée et enregistrée à partir de OffscreenCanvas, affichera l'ImageBitmap sur le canevas et transférera son appartenance au canevas. Un seul OffscreenCanvas peut transférer des images dans un nombre arbitraire d'autres objets ImageBitmapRenderingContext.

+ +

Étant donnés ces deux éléments {{HTMLElement("canvas")}} :

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

le code suivant fournira la restitution, en utilisant un OffscreenCanvas comme décrit ci-dessus.

+ +
var une = document.getElementById("une").getContext("bitmaprenderer");
+var deux = document.getElementById("deux").getContext("bitmaprenderer");
+
+var horsEcran = new OffscreenCanvas(256, 256);
+var gl = horsEcran.getContext('webgl');
+
+// ... un peu de dessin pour le premier canevas en utilisant le contexte gl ...
+
+// Exécuter la restitution dans le premier canevas
+var bitmapUne = horsEcran.transferToImageBitmap();
+une.transferImageBitmap(bitmapUne);
+
+// ... davantage de dessin pour le second canevas en utilisant le context gl ...
+
+// Exécuter la restitution pour le second canevas
+var bitmapDeux = horsEcran.transferToImageBitmap();
+deux.transferImageBitmap(bitmapDeux);
+
+ +

Affichage asynchrone d'images produites par un OffscreenCanvas

+ +

Une autre façon d'utiliser l'API OffscreenCanvas est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet OffscreenCanvas à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un RenderingContext à partir de ce OffscreenCanvas.

+ +

Afin de rendre les cadres visibles, vous pouvez appeler commit() sur ce RenderingContext, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original.

+ +

Notez que dans Firefox, cette API n'est actuellement implémentée que pour le contexte WebGL ({{domxref ("WebGLRenderingContext.commit()")}}). Pour la prise en charge de l'API Canvas 2D par les employés, voir {{bug (801176)}}.

+ +

main.js (code du thread principal) :

+ +
var canevasHtml = document.getElementById("canevas");
+var horsEcran = canevasHtml.transferControlToOffscreen();
+
+var worker = new Worker("offscreencanvas.js");
+worker.postMessage({canvas: offscreen}, [offscreen]);
+
+ +

offscreencanvas.js (code worker) :

+ +
onmessage = function(evt) {
+  var canevas = evt.data.canvas.
+  var gl = canevas.getContext("webgl");
+
+  // ... un peu de dessin en utilisant le contexte gl ...
+
+  // Renvoyer les images dans l'HTMLCanvasElement original
+  gl.commit();
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.OffscreenCanvas")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/origin/index.html b/files/fr/web/api/origin/index.html deleted file mode 100644 index 5fd2b80559..0000000000 --- a/files/fr/web/api/origin/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.origin -slug: Web/API/origin -translation_of: Web/API/WindowOrWorkerGlobalScope/origin -original_slug: Web/API/WindowOrWorkerGlobalScope/origin ---- -

{{APIRef()}}{{SeeCompatTable}}

- -

La propriété origin de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères.

- -

Syntaxe

- -
var myOrigin = self.origin; // ou simplement origin
-
- -

Valeur

- -

Une {{domxref("USVString")}}.

- -

Exemples

- -

Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu.

- -
onmessage = function() {
-  console.log(self.origin);
-};
- -

Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via file://), origin retournera la chaîne de caractère "null".

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}{{Spec2('HTML WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WindowOrWorkerGlobalScope.origin")}}

diff --git a/files/fr/web/api/origin/index.md b/files/fr/web/api/origin/index.md new file mode 100644 index 0000000000..5fd2b80559 --- /dev/null +++ b/files/fr/web/api/origin/index.md @@ -0,0 +1,51 @@ +--- +title: WindowOrWorkerGlobalScope.origin +slug: Web/API/origin +translation_of: Web/API/WindowOrWorkerGlobalScope/origin +original_slug: Web/API/WindowOrWorkerGlobalScope/origin +--- +

{{APIRef()}}{{SeeCompatTable}}

+ +

La propriété origin de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères.

+ +

Syntaxe

+ +
var myOrigin = self.origin; // ou simplement origin
+
+ +

Valeur

+ +

Une {{domxref("USVString")}}.

+ +

Exemples

+ +

Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu.

+ +
onmessage = function() {
+  console.log(self.origin);
+};
+ +

Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via file://), origin retournera la chaîne de caractère "null".

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}{{Spec2('HTML WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.origin")}}

diff --git a/files/fr/web/api/oscillatornode/index.html b/files/fr/web/api/oscillatornode/index.html deleted file mode 100644 index c4293946c4..0000000000 --- a/files/fr/web/api/oscillatornode/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: OscillatorNode -slug: Web/API/OscillatorNode -translation_of: Web/API/OscillatorNode ---- -
{{APIRef("Web Audio API")}}
- -

L'interface OscillatorNode représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante.

- -

On crée un OscillatorNode en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont :

- - - -

Propriétés

- -

Hérite des propriétés de ses parents, {{domxref("AudioNode")}}.

- -
-
{{domxref("OscillatorNode.frequency")}}
-
{{domxref("AudioParam")}} de type a-rate représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas).
-
{{domxref("OscillatorNode.detune")}}
-
{{domxref("AudioParam")}} de type a-rate représentant le désaccordage de l' oscillation exprimé en cents  (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas).
-
{{domxref("OscillatorNode.type")}}
-
Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités.  Les valeurs standard sont "sine", "square", "sawtooth", "triangle" et "custom". La valeur par défault is "sine". custom permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée.
-
- -

Méthodes

- -

Hérite des méthodes de ses parents, {{domxref("AudioNode")}}.

- -
-
{{domxref("OscillatorNode.start()")}}
-
Cette méthode déclenche la lecture du son.
-
{{domxref("OscillatorNode.stop()")}}
-
Cette méthode interrompt la lecture du son.
-
{{domxref("OscillatorNode.setPeriodicWave()")}}
-
Cette méthode définit une {{domxref("PeriodicWave")}} qui peut être utilisée pour donner sa forme à la sortie de l'oscillateur, quand on utilise l'attribut type = "custom". Elle remplace la méthode devenue obsolète {{domxref("OscillatorNode.setWaveTable")}}.
-
- -

Event handlers

- -
-
{{domxref("OscillatorNode.onended")}}
-
Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement ended, qui est émis une fois que la lecture du son est terminée.
-
- -

Exemples

- -

L'exemple suivant montre une utilisation basique d'un {{ domxref("AudioContext") }} pour créer un OscillatorNode. Pour un exemple appliqué, jetez un oeil à notre Violent Theremin demo (voir app.js pour l'intégralité du code).

- -
// crée un contexteaudio
-var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-
-// create Oscillator node
-var oscillator = contexteAudio.createOscillator();
-oscillator.connect(contexteAudio.destination);
-oscillator.type = 'square';
-oscillator.frequency.value = 440; // valeur en hertz
-
-oscillator.start();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#the-oscillatornode-interface', 'OscillatorNode')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.OscillatorNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/oscillatornode/index.md b/files/fr/web/api/oscillatornode/index.md new file mode 100644 index 0000000000..c4293946c4 --- /dev/null +++ b/files/fr/web/api/oscillatornode/index.md @@ -0,0 +1,93 @@ +--- +title: OscillatorNode +slug: Web/API/OscillatorNode +translation_of: Web/API/OscillatorNode +--- +
{{APIRef("Web Audio API")}}
+ +

L'interface OscillatorNode représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante.

+ +

On crée un OscillatorNode en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont :

+ + + +

Propriétés

+ +

Hérite des propriétés de ses parents, {{domxref("AudioNode")}}.

+ +
+
{{domxref("OscillatorNode.frequency")}}
+
{{domxref("AudioParam")}} de type a-rate représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas).
+
{{domxref("OscillatorNode.detune")}}
+
{{domxref("AudioParam")}} de type a-rate représentant le désaccordage de l' oscillation exprimé en cents  (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas).
+
{{domxref("OscillatorNode.type")}}
+
Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités.  Les valeurs standard sont "sine", "square", "sawtooth", "triangle" et "custom". La valeur par défault is "sine". custom permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée.
+
+ +

Méthodes

+ +

Hérite des méthodes de ses parents, {{domxref("AudioNode")}}.

+ +
+
{{domxref("OscillatorNode.start()")}}
+
Cette méthode déclenche la lecture du son.
+
{{domxref("OscillatorNode.stop()")}}
+
Cette méthode interrompt la lecture du son.
+
{{domxref("OscillatorNode.setPeriodicWave()")}}
+
Cette méthode définit une {{domxref("PeriodicWave")}} qui peut être utilisée pour donner sa forme à la sortie de l'oscillateur, quand on utilise l'attribut type = "custom". Elle remplace la méthode devenue obsolète {{domxref("OscillatorNode.setWaveTable")}}.
+
+ +

Event handlers

+ +
+
{{domxref("OscillatorNode.onended")}}
+
Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement ended, qui est émis une fois que la lecture du son est terminée.
+
+ +

Exemples

+ +

L'exemple suivant montre une utilisation basique d'un {{ domxref("AudioContext") }} pour créer un OscillatorNode. Pour un exemple appliqué, jetez un oeil à notre Violent Theremin demo (voir app.js pour l'intégralité du code).

+ +
// crée un contexteaudio
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+
+// create Oscillator node
+var oscillator = contexteAudio.createOscillator();
+oscillator.connect(contexteAudio.destination);
+oscillator.type = 'square';
+oscillator.frequency.value = 440; // valeur en hertz
+
+oscillator.start();
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#the-oscillatornode-interface', 'OscillatorNode')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.OscillatorNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/page_visibility_api/index.html b/files/fr/web/api/page_visibility_api/index.html deleted file mode 100644 index 0443a0061a..0000000000 --- a/files/fr/web/api/page_visibility_api/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Page Visibility API -slug: Web/API/Page_Visibility_API -translation_of: Web/API/Page_Visibility_API ---- -
{{DefaultAPISidebar("Page Visibility API")}}
- -

L’API Page Visibility (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus.

- -

Avec la navigation par onglets, il y a une probabilité raisonnable qu’une page web donnée soit en arrière-plan, donc masquée pour l’utilisateur. Quand celui-ci minimise la page ou bascule vers un autre onglet, l’API émet un évènement {{event("visibilitychange")}} correspondant à la visibilité de la page. Vous pouvez détecter cet évènement et réaliser différentes actions ou modifier un comportement. Par exemple, si votre application web est en train de lire une vidéo, elle peut mettre cette dernière en pause au moment où l’utilisateur regarde un autre onglet, et reprendre la lecture quand la personne revient à l’onglet. L’utilisateur ne perd pas le fil de la vidéo et peut continuer à la regarder.

- -

L’état de visibilité d’une {{HTMLElement("iframe")}} est le même que celui du document parent. Masquer l’iframe via une propriété CSS ne déclenche pas d’évènement de visibilité, ni ne change l’état du document contenu.

- -

Avantages

- -

L’API est particulièrement utile pour économiser des ressources. Elle donne aux développeurs l’opportunité de ne pas réaliser des tâches non nécessaires quand la page web est invisible.

- -

Cas d’utilisation

- -

Quelques exemples :

- - - -

Historiquement, les développeurs ont utilisé des solutions de remplacement imparfaites pour détecter de tels changements. Par exemple, inscrire un gestionnaire onblur/onfocus sur la fenêtre est utile quand votre page n’est pas la page active, mais cela ne vous dit pas si votre page est masquée pour l’utilisateur. L’API Page Visibility corrige ce problème. (Lorsqu’on compare avec un gestionnaire onblur/onfocus sur la fenêtre, une différence notable est que la page ne devient pas cachée quand une autre fenêtre est rendue active et le navigateur perd le focus. Une page devient cachée seulement quand l’utilisateur bascule vers un autre onglet ou minimise la fenêtre du navigateur.)

- -

Politiques de performance des pages en arrière-plan

- -

En parallèle avec l’API Page Visibility, un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan :

- - - -

Exemple

- -

Voir l’exemple en direct (vidéo avec son).

- -

Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant :

- -
// Set the name of the hidden property and the change event for visibility
-var hidden, visibilityChange;
-if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
-  hidden = "hidden";
-  visibilityChange = "visibilitychange";
-} else if (typeof document.msHidden !== "undefined") {
-  hidden = "msHidden";
-  visibilityChange = "msvisibilitychange";
-} else if (typeof document.webkitHidden !== "undefined") {
-  hidden = "webkitHidden";
-  visibilityChange = "webkitvisibilitychange";
-}
-
-var videoElement = document.getElementById("videoElement");
-
-// If the page is hidden, pause the video;
-// if the page is shown, play the video
-function handleVisibilityChange() {
-  if (document.hidden) {
-    videoElement.pause();
-  } else {
-    videoElement.play();
-  }
-}
-
-// Warn if the browser doesn't support addEventListener or the Page Visibility API
-if (typeof document.addEventListener === "undefined" || typeof document.hidden === "undefined") {
-  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
-} else {
-  // Handle page visibility change
-  document.addEventListener(visibilityChange, handleVisibilityChange, false);
-
-  // When the video pauses, set the title.
-  // This shows the paused
-  videoElement.addEventListener("pause", function(){
-    document.title = 'Paused';
-  }, false);
-
-  // When the video plays, set the title.
-  videoElement.addEventListener("play", function(){
-    document.title = 'Playing';
-  }, false);
-
-}
-
- -

Propriétés

- -
-
{{domxref("document.hidden")}}
-

Retourne true si la page est dans un état considéré comme masqué à l’utilisateur, et false dans le cas contraire.

-
{{domxref("document.visibilityState")}}
-

Une string représentant l’état de visibilité du document. Valeurs possibles :

-
    -
  • visible : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée.
    • -
  • hidden : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif.
    • -
  • prerender : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour document.hidden). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel.
    • -
  • unloaded : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel.
    • -
- 
//startSimulation and pauseSimulation defined elsewhere
-function handleVisibilityChange() {
-  if (document.hidden) {
-    pauseSimulation();
-  } else  {
-    startSimulation();
-  }
-}
-document.addEventListener("visibilitychange", handleVisibilityChange, false);
-
-
{{domxref("document.onvisibilitychange")}}
-
Un {{event("Event_handlers", "event handler")}} représentant le code à appeler quand l’évènement {{event("visibilitychange")}} est émis.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Document.visibilityState")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/page_visibility_api/index.md b/files/fr/web/api/page_visibility_api/index.md new file mode 100644 index 0000000000..0443a0061a --- /dev/null +++ b/files/fr/web/api/page_visibility_api/index.md @@ -0,0 +1,163 @@ +--- +title: Page Visibility API +slug: Web/API/Page_Visibility_API +translation_of: Web/API/Page_Visibility_API +--- +
{{DefaultAPISidebar("Page Visibility API")}}
+ +

L’API Page Visibility (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus.

+ +

Avec la navigation par onglets, il y a une probabilité raisonnable qu’une page web donnée soit en arrière-plan, donc masquée pour l’utilisateur. Quand celui-ci minimise la page ou bascule vers un autre onglet, l’API émet un évènement {{event("visibilitychange")}} correspondant à la visibilité de la page. Vous pouvez détecter cet évènement et réaliser différentes actions ou modifier un comportement. Par exemple, si votre application web est en train de lire une vidéo, elle peut mettre cette dernière en pause au moment où l’utilisateur regarde un autre onglet, et reprendre la lecture quand la personne revient à l’onglet. L’utilisateur ne perd pas le fil de la vidéo et peut continuer à la regarder.

+ +

L’état de visibilité d’une {{HTMLElement("iframe")}} est le même que celui du document parent. Masquer l’iframe via une propriété CSS ne déclenche pas d’évènement de visibilité, ni ne change l’état du document contenu.

+ +

Avantages

+ +

L’API est particulièrement utile pour économiser des ressources. Elle donne aux développeurs l’opportunité de ne pas réaliser des tâches non nécessaires quand la page web est invisible.

+ +

Cas d’utilisation

+ +

Quelques exemples :

+ + + +

Historiquement, les développeurs ont utilisé des solutions de remplacement imparfaites pour détecter de tels changements. Par exemple, inscrire un gestionnaire onblur/onfocus sur la fenêtre est utile quand votre page n’est pas la page active, mais cela ne vous dit pas si votre page est masquée pour l’utilisateur. L’API Page Visibility corrige ce problème. (Lorsqu’on compare avec un gestionnaire onblur/onfocus sur la fenêtre, une différence notable est que la page ne devient pas cachée quand une autre fenêtre est rendue active et le navigateur perd le focus. Une page devient cachée seulement quand l’utilisateur bascule vers un autre onglet ou minimise la fenêtre du navigateur.)

+ +

Politiques de performance des pages en arrière-plan

+ +

En parallèle avec l’API Page Visibility, un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan :

+ + + +

Exemple

+ +

Voir l’exemple en direct (vidéo avec son).

+ +

Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant :

+ +
// Set the name of the hidden property and the change event for visibility
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// If the page is hidden, pause the video;
+// if the page is shown, play the video
+function handleVisibilityChange() {
+  if (document.hidden) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Warn if the browser doesn't support addEventListener or the Page Visibility API
+if (typeof document.addEventListener === "undefined" || typeof document.hidden === "undefined") {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Handle page visibility change
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // When the video pauses, set the title.
+  // This shows the paused
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // When the video plays, set the title.
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+
+ +

Propriétés

+ +
+
{{domxref("document.hidden")}}
+

Retourne true si la page est dans un état considéré comme masqué à l’utilisateur, et false dans le cas contraire.

+
{{domxref("document.visibilityState")}}
+

Une string représentant l’état de visibilité du document. Valeurs possibles :

+
    +
  • visible : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée.
    • +
  • hidden : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif.
    • +
  • prerender : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour document.hidden). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel.
    • +
  • unloaded : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel.
    • +
+ 
//startSimulation and pauseSimulation defined elsewhere
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+
{{domxref("document.onvisibilitychange")}}
+
Un {{event("Event_handlers", "event handler")}} représentant le code à appeler quand l’évènement {{event("visibilitychange")}} est émis.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Document.visibilityState")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/pagetransitionevent/index.html b/files/fr/web/api/pagetransitionevent/index.html deleted file mode 100644 index b679c056dd..0000000000 --- a/files/fr/web/api/pagetransitionevent/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: PageTransitionEvent -slug: Web/API/PageTransitionEvent -translation_of: Web/API/PageTransitionEvent ---- -

{{APIRef("HTML DOM")}}

- -

Les évènements de transition de page sont émis quand une page web est chargée ou déchargée.

- -

Information du DOM

- -

Hiérarchie d’héritage

- -
Event - -
   PageTransitionEvent
-
- -

Exemple

- -

HTML

- -
<!DOCTYPE html>
-<html>
-<body onpageshow="myFunction(event)">
-</body>
-</html>
- -

JavaScript

- -
function myFunction(event) {
-    if (event.persisted) {
-        alert("La page a été mise en cache par le navigateur");
-    } else {
-        alert("La page n’a PAS été mise en cache par le navigateur");
-    }
-}
- -

Membres

- -

L’objet PageTransitionEvent possède les types de membres suivants :

- - - -

Propriétés

- -

L’objet PageTransitionEvent possède les propriétés suivantes :

- - - - - - - - - - - - - - -
PropriétéType d’accèsDescription
persistedLecture seuleIndique si une page web est chargée depuis le cache.
diff --git a/files/fr/web/api/pagetransitionevent/index.md b/files/fr/web/api/pagetransitionevent/index.md new file mode 100644 index 0000000000..b679c056dd --- /dev/null +++ b/files/fr/web/api/pagetransitionevent/index.md @@ -0,0 +1,64 @@ +--- +title: PageTransitionEvent +slug: Web/API/PageTransitionEvent +translation_of: Web/API/PageTransitionEvent +--- +

{{APIRef("HTML DOM")}}

+ +

Les évènements de transition de page sont émis quand une page web est chargée ou déchargée.

+ +

Information du DOM

+ +

Hiérarchie d’héritage

+ +
Event + +
   PageTransitionEvent
+
+ +

Exemple

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<body onpageshow="myFunction(event)">
+</body>
+</html>
+ +

JavaScript

+ +
function myFunction(event) {
+    if (event.persisted) {
+        alert("La page a été mise en cache par le navigateur");
+    } else {
+        alert("La page n’a PAS été mise en cache par le navigateur");
+    }
+}
+ +

Membres

+ +

L’objet PageTransitionEvent possède les types de membres suivants :

+ + + +

Propriétés

+ +

L’objet PageTransitionEvent possède les propriétés suivantes :

+ + + + + + + + + + + + + + +
PropriétéType d’accèsDescription
persistedLecture seuleIndique si une page web est chargée depuis le cache.
diff --git a/files/fr/web/api/passwordcredential/iconurl/index.html b/files/fr/web/api/passwordcredential/iconurl/index.html deleted file mode 100644 index 0521ac36dc..0000000000 --- a/files/fr/web/api/passwordcredential/iconurl/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: PasswordCredential.iconURL -slug: Web/API/PasswordCredential/iconURL -tags: - - API - - Credential Management API - - PasswordCredential - - Propriété - - Reference -translation_of: Web/API/PasswordCredential/iconURL ---- -

{{SeeCompatTable}}{{APIRef("")}}

- -

La propriété iconURL, rattachée à l'interface {{domxref("PasswordCredential")}}, est accessible en lecture seule et fournit une chaîne de caractères {{domxref("USVString")}} représentant une URL pointant vers l'image d'une icône. Cette image est destinée à être affichée dans un sélecteur d'authentification. L'URL fournie doit être accessible sans authentification.

- -

Syntaxe

- -
url = passwordCredential.iconURL
- -

Valeur

- -

Une chaîne de caractères {{domxref("USVString")}} contenant une URL.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-credentialuserdata-iconurl','iconURL')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PasswordCredential.iconURL")}}

diff --git a/files/fr/web/api/passwordcredential/iconurl/index.md b/files/fr/web/api/passwordcredential/iconurl/index.md new file mode 100644 index 0000000000..0521ac36dc --- /dev/null +++ b/files/fr/web/api/passwordcredential/iconurl/index.md @@ -0,0 +1,45 @@ +--- +title: PasswordCredential.iconURL +slug: Web/API/PasswordCredential/iconURL +tags: + - API + - Credential Management API + - PasswordCredential + - Propriété + - Reference +translation_of: Web/API/PasswordCredential/iconURL +--- +

{{SeeCompatTable}}{{APIRef("")}}

+ +

La propriété iconURL, rattachée à l'interface {{domxref("PasswordCredential")}}, est accessible en lecture seule et fournit une chaîne de caractères {{domxref("USVString")}} représentant une URL pointant vers l'image d'une icône. Cette image est destinée à être affichée dans un sélecteur d'authentification. L'URL fournie doit être accessible sans authentification.

+ +

Syntaxe

+ +
url = passwordCredential.iconURL
+ +

Valeur

+ +

Une chaîne de caractères {{domxref("USVString")}} contenant une URL.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-credentialuserdata-iconurl','iconURL')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PasswordCredential.iconURL")}}

diff --git a/files/fr/web/api/passwordcredential/index.html b/files/fr/web/api/passwordcredential/index.html deleted file mode 100644 index 3bc54c3618..0000000000 --- a/files/fr/web/api/passwordcredential/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: PasswordCredential -slug: Web/API/PasswordCredential -tags: - - API - - Credential Management API - - Interface - - PasswordCredential - - Reference -translation_of: Web/API/PasswordCredential ---- -

{{SeeCompatTable}}{{APIRef("Credential Management API")}}

- -

L'interface PasswordCredential, rattachée à l'API Credential Management, fournit des informations quant à un couple nom d'utilisateur/mot de passe. Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette interface peut être passée comme propriété credential de l'objet init utilisé comme argument de la méthode globale {{domxref('fetch')}}.

- -

Constructeur

- -
-
{{domxref("PasswordCredential.PasswordCredential()","PasswordCredential()")}}
-
Crée un nouvel objet PasswordCredential.
-
- -

Propriétés

- -

Hérite des propriétés de l'interface parente, {{domxref("Credential")}}.

- -
-
{{domxref("PasswordCredential.additionalData")}} {{deprecated_inline()}}
-
Une instance {{domxref("FormData")}} ou une instance {{domxref("URLSearchParams")}} ou {{jsxref("null")}}. Les données de cet objet seront ajoutées au corps de la requête et envoyées au point distant avec les informations d'authentification.
-
{{domxref("PasswordCredential.iconURL")}} {{readonlyinline}}
-
Une chaîne de caractères {{domxref("USVString")}} contenant une URL qui pointe vers une image servant d'icône. Cette image est destinée à être utilisée dans le sélecteur d'informations d'authentification. L'URL doit être accessible sans authentification.
-
{{domxref("PasswordCredential.idName")}} {{deprecated_inline()}}
-
Une chaîne de caractères {{domxref("USVString")}} contenant le nom qui sera uitlisé pour le champ d'identifiant lorsque l'objet courant sera envoyé au point distant grâce à {{domxref("fetch")}}. La valeur par défaut correspond à "username" mais il est possible de surcharger cette valeur afin qu'elle corresponde à ce qui est attendu par le service distant.
-
{{domxref("PasswordCredential.name")}} {{readonlyinline}}
-
Une chaîne de caractères {{domxref("USVString")}} qui contient un nom public, lisible par un humain et qui sera affiché dans le sélecteur d'informations d'authentification.
-
{{domxref("PasswordCredential.password")}} {{readonlyinline}}
-
Une chaîne de caractères {{domxref("USVString")}} qui contient le mot de passe associé aux informations d'authentification.
-
{{domxref("PasswordCredential.passwordName")}} {{deprecated_inline()}}
-
Une chaîne de caractères {{domxref("USVString")}} qui représente le nom utilisé pour le mot de passe lorsque l'objet courant est envoyé au point distant avec {{domxref("fetch")}}. Par défaut, cette propriété vaut "password" mais elle peut être surchargée afin que sa valeur corresponde à ce qui est attendu par le service distant.
-
- -

Gestionnaires d'évènement

- -

Aucun.

- -

Méthodes

- -

Aucune.

- -

Exemples

- -
var cred = new PasswordCredential({
-  id: id,
-  password: password,
-  name: name,
-  iconURL: iconUrl
-});
-
-navigator.credentials.store(cred)
- .then(function() {
- // Faire quelque chose avec.
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PasswordCredential")}}

diff --git a/files/fr/web/api/passwordcredential/index.md b/files/fr/web/api/passwordcredential/index.md new file mode 100644 index 0000000000..3bc54c3618 --- /dev/null +++ b/files/fr/web/api/passwordcredential/index.md @@ -0,0 +1,84 @@ +--- +title: PasswordCredential +slug: Web/API/PasswordCredential +tags: + - API + - Credential Management API + - Interface + - PasswordCredential + - Reference +translation_of: Web/API/PasswordCredential +--- +

{{SeeCompatTable}}{{APIRef("Credential Management API")}}

+ +

L'interface PasswordCredential, rattachée à l'API Credential Management, fournit des informations quant à un couple nom d'utilisateur/mot de passe. Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette interface peut être passée comme propriété credential de l'objet init utilisé comme argument de la méthode globale {{domxref('fetch')}}.

+ +

Constructeur

+ +
+
{{domxref("PasswordCredential.PasswordCredential()","PasswordCredential()")}}
+
Crée un nouvel objet PasswordCredential.
+
+ +

Propriétés

+ +

Hérite des propriétés de l'interface parente, {{domxref("Credential")}}.

+ +
+
{{domxref("PasswordCredential.additionalData")}} {{deprecated_inline()}}
+
Une instance {{domxref("FormData")}} ou une instance {{domxref("URLSearchParams")}} ou {{jsxref("null")}}. Les données de cet objet seront ajoutées au corps de la requête et envoyées au point distant avec les informations d'authentification.
+
{{domxref("PasswordCredential.iconURL")}} {{readonlyinline}}
+
Une chaîne de caractères {{domxref("USVString")}} contenant une URL qui pointe vers une image servant d'icône. Cette image est destinée à être utilisée dans le sélecteur d'informations d'authentification. L'URL doit être accessible sans authentification.
+
{{domxref("PasswordCredential.idName")}} {{deprecated_inline()}}
+
Une chaîne de caractères {{domxref("USVString")}} contenant le nom qui sera uitlisé pour le champ d'identifiant lorsque l'objet courant sera envoyé au point distant grâce à {{domxref("fetch")}}. La valeur par défaut correspond à "username" mais il est possible de surcharger cette valeur afin qu'elle corresponde à ce qui est attendu par le service distant.
+
{{domxref("PasswordCredential.name")}} {{readonlyinline}}
+
Une chaîne de caractères {{domxref("USVString")}} qui contient un nom public, lisible par un humain et qui sera affiché dans le sélecteur d'informations d'authentification.
+
{{domxref("PasswordCredential.password")}} {{readonlyinline}}
+
Une chaîne de caractères {{domxref("USVString")}} qui contient le mot de passe associé aux informations d'authentification.
+
{{domxref("PasswordCredential.passwordName")}} {{deprecated_inline()}}
+
Une chaîne de caractères {{domxref("USVString")}} qui représente le nom utilisé pour le mot de passe lorsque l'objet courant est envoyé au point distant avec {{domxref("fetch")}}. Par défaut, cette propriété vaut "password" mais elle peut être surchargée afin que sa valeur corresponde à ce qui est attendu par le service distant.
+
+ +

Gestionnaires d'évènement

+ +

Aucun.

+ +

Méthodes

+ +

Aucune.

+ +

Exemples

+ +
var cred = new PasswordCredential({
+  id: id,
+  password: password,
+  name: name,
+  iconURL: iconUrl
+});
+
+navigator.credentials.store(cred)
+ .then(function() {
+ // Faire quelque chose avec.
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PasswordCredential")}}

diff --git a/files/fr/web/api/passwordcredential/name/index.html b/files/fr/web/api/passwordcredential/name/index.html deleted file mode 100644 index 4ea8d18a88..0000000000 --- a/files/fr/web/api/passwordcredential/name/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: PasswordCredential.name -slug: Web/API/PasswordCredential/name -tags: - - API - - Credential Management API - - PasswordCredential - - Propriété - - Reference -translation_of: Web/API/PasswordCredential/name ---- -

{{SeeCompatTable}}{{APIRef("")}}

- -

La propriété name est accessible en lecture seule et est rattachée à l'interface {{domxref("PasswordCredential")}}. C'est une chaîne de caractères {{domxref("USVSTring")}} qui contient un nom public, compréhensible pour un humain et qui est destiné à être affiché dans un sélecteur de fournisseur d'authentification.

- -

Syntaxe

- -
name = passwordCredential.name
- -

Valeur

- -

A {{domxref("USVString")}} containing a name.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-credentialuserdata-name','name')}}{{Spec2('Credential Management')}}Définition initiale..
- -

Compatibilité des navigateurs

- -

{{Compat("api.PasswordCredential.name")}}

diff --git a/files/fr/web/api/passwordcredential/name/index.md b/files/fr/web/api/passwordcredential/name/index.md new file mode 100644 index 0000000000..4ea8d18a88 --- /dev/null +++ b/files/fr/web/api/passwordcredential/name/index.md @@ -0,0 +1,45 @@ +--- +title: PasswordCredential.name +slug: Web/API/PasswordCredential/name +tags: + - API + - Credential Management API + - PasswordCredential + - Propriété + - Reference +translation_of: Web/API/PasswordCredential/name +--- +

{{SeeCompatTable}}{{APIRef("")}}

+ +

La propriété name est accessible en lecture seule et est rattachée à l'interface {{domxref("PasswordCredential")}}. C'est une chaîne de caractères {{domxref("USVSTring")}} qui contient un nom public, compréhensible pour un humain et qui est destiné à être affiché dans un sélecteur de fournisseur d'authentification.

+ +

Syntaxe

+ +
name = passwordCredential.name
+ +

Valeur

+ +

A {{domxref("USVString")}} containing a name.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-credentialuserdata-name','name')}}{{Spec2('Credential Management')}}Définition initiale..
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PasswordCredential.name")}}

diff --git a/files/fr/web/api/passwordcredential/password/index.html b/files/fr/web/api/passwordcredential/password/index.html deleted file mode 100644 index 62421690d2..0000000000 --- a/files/fr/web/api/passwordcredential/password/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: PasswordCredential.password -slug: Web/API/PasswordCredential/password -tags: - - API - - Credential Management API - - PasswordCredential - - Propriété - - Reference -translation_of: Web/API/PasswordCredential/password ---- -

{{SeeCompatTable}}{{APIRef("")}}

- -

La propriété password est une propriété accessible en lecture seule rattachée à l'interface {{domxref("PasswordCredential")}} et fournit une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe lié aux informations d'authentification.

- -

Syntaxe

- -
password = passwordCredential.password
- -

Valeur

- -

Une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-passwordcredential-password','password')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PasswordCredential.password")}}

diff --git a/files/fr/web/api/passwordcredential/password/index.md b/files/fr/web/api/passwordcredential/password/index.md new file mode 100644 index 0000000000..62421690d2 --- /dev/null +++ b/files/fr/web/api/passwordcredential/password/index.md @@ -0,0 +1,45 @@ +--- +title: PasswordCredential.password +slug: Web/API/PasswordCredential/password +tags: + - API + - Credential Management API + - PasswordCredential + - Propriété + - Reference +translation_of: Web/API/PasswordCredential/password +--- +

{{SeeCompatTable}}{{APIRef("")}}

+ +

La propriété password est une propriété accessible en lecture seule rattachée à l'interface {{domxref("PasswordCredential")}} et fournit une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe lié aux informations d'authentification.

+ +

Syntaxe

+ +
password = passwordCredential.password
+ +

Valeur

+ +

Une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management','#dom-passwordcredential-password','password')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PasswordCredential.password")}}

diff --git a/files/fr/web/api/passwordcredential/passwordcredential/index.html b/files/fr/web/api/passwordcredential/passwordcredential/index.html deleted file mode 100644 index dda971c84e..0000000000 --- a/files/fr/web/api/passwordcredential/passwordcredential/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: PasswordCredential -slug: Web/API/PasswordCredential/PasswordCredential -tags: - - API - - Constructeur - - Credential Management API - - PasswordCredential - - Reference -translation_of: Web/API/PasswordCredential/PasswordCredential ---- -

{{APIRef("")}}{{Non-standard_header}}

- -

Le constructeur PasswordCredential permet de créer un nouvel objet {{domxref("PasswordCredential")}}.

- -

Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette classe peut être utilisée comme propriété credential pour l'objet init qui sera l'argument pour un appel à {{domxref('fetch')}}.

- -

Syntaxe

- -
var mesCredentials = new PasswordCredential(passwordCredentialData)
-var mesCredentials = new PasswordCredential(HTMLFormElement)
- -

Paramètres

- -

Le constructeur peut prendre l'une de ces deux valeurs en argument.

- -
-
passwordCredentialData 
-
Un dictionnaire PasswordCredentialData avec les champs suivants : -
    -
  • iconURL {{optional_inline}} : l'URL de l'image pour l'avatar de l'utilisateur.
    • -
  • id : l'identifiant de l'utilisateur qui se connecte.
    • -
  • name {{optional_inline}} : le nom de l'utilisateur qui se connecte.
    • -
  • password : le mot de passe de l'utilisateur qui se connecte.
    • -
-
-
htmlFormElement
-
Une référence à un objet {{domxref("HTMLFormElement")}} contenant les champs de saisis appropriés. Le formulaire correspondant devrait contenir au moins un champ id et un champ password. Le formulaire peut aussi demander un jeton CSRF.
-
- -

Exemples

- -

Dans cet exemple, nous verrons comment définir un formulaire et capturer les données saisies pour créer un objet {{domxref("PasswordCredential")}}.

- -

HTML

- -
<form id="form" method="post">
-  <input type="text" name="id" autocomplete="username" />
-  <input type="password" name="password" autocomplete="current-password" />
-  <input type="hidden" name="csrf_token" value="*****" />
-</form>
- -

JavaScript

- -

Dans le script, on pourra faire référence à ce formulaire et l'utiliser pour créer un objet {{domxref("PasswordCredential")}} afin de le stocker dans le système de mots de passe de l'agent utilisateur.

- -
var form = document.querySelector('#form');
-var creds = new PasswordCredential(form);
-// Stocker les informations d'authentification
-navigator.credentials.store(creds)
-  .then(function(creds) {
-  // Faire quelque chose avec les informations d'authentification si besoin
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PasswordCredential.PasswordCredential")}}

diff --git a/files/fr/web/api/passwordcredential/passwordcredential/index.md b/files/fr/web/api/passwordcredential/passwordcredential/index.md new file mode 100644 index 0000000000..dda971c84e --- /dev/null +++ b/files/fr/web/api/passwordcredential/passwordcredential/index.md @@ -0,0 +1,86 @@ +--- +title: PasswordCredential +slug: Web/API/PasswordCredential/PasswordCredential +tags: + - API + - Constructeur + - Credential Management API + - PasswordCredential + - Reference +translation_of: Web/API/PasswordCredential/PasswordCredential +--- +

{{APIRef("")}}{{Non-standard_header}}

+ +

Le constructeur PasswordCredential permet de créer un nouvel objet {{domxref("PasswordCredential")}}.

+ +

Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette classe peut être utilisée comme propriété credential pour l'objet init qui sera l'argument pour un appel à {{domxref('fetch')}}.

+ +

Syntaxe

+ +
var mesCredentials = new PasswordCredential(passwordCredentialData)
+var mesCredentials = new PasswordCredential(HTMLFormElement)
+ +

Paramètres

+ +

Le constructeur peut prendre l'une de ces deux valeurs en argument.

+ +
+
passwordCredentialData 
+
Un dictionnaire PasswordCredentialData avec les champs suivants : +
    +
  • iconURL {{optional_inline}} : l'URL de l'image pour l'avatar de l'utilisateur.
    • +
  • id : l'identifiant de l'utilisateur qui se connecte.
    • +
  • name {{optional_inline}} : le nom de l'utilisateur qui se connecte.
    • +
  • password : le mot de passe de l'utilisateur qui se connecte.
    • +
+
+
htmlFormElement
+
Une référence à un objet {{domxref("HTMLFormElement")}} contenant les champs de saisis appropriés. Le formulaire correspondant devrait contenir au moins un champ id et un champ password. Le formulaire peut aussi demander un jeton CSRF.
+
+ +

Exemples

+ +

Dans cet exemple, nous verrons comment définir un formulaire et capturer les données saisies pour créer un objet {{domxref("PasswordCredential")}}.

+ +

HTML

+ +
<form id="form" method="post">
+  <input type="text" name="id" autocomplete="username" />
+  <input type="password" name="password" autocomplete="current-password" />
+  <input type="hidden" name="csrf_token" value="*****" />
+</form>
+ +

JavaScript

+ +

Dans le script, on pourra faire référence à ce formulaire et l'utiliser pour créer un objet {{domxref("PasswordCredential")}} afin de le stocker dans le système de mots de passe de l'agent utilisateur.

+ +
var form = document.querySelector('#form');
+var creds = new PasswordCredential(form);
+// Stocker les informations d'authentification
+navigator.credentials.store(creds)
+  .then(function(creds) {
+  // Faire quelque chose avec les informations d'authentification si besoin
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PasswordCredential.PasswordCredential")}}

diff --git a/files/fr/web/api/payment_request_api/index.html b/files/fr/web/api/payment_request_api/index.html deleted file mode 100644 index 5712ce4c57..0000000000 --- a/files/fr/web/api/payment_request_api/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Payment Request API -slug: Web/API/Payment_Request_API -translation_of: Web/API/Payment_Request_API ---- -
{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}
- -

L'API Payment Request fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand.

- -

Concepts et usages de l'API Payment Request

- -

De nombreux problèmes concernant l'abandon du panier d'achat en ligne peuvent découler de formulaires de validation finale longs et difficiles à remplir, et nécessitant souvent plusieurs étapes. L'API Payment Request a pour vocation de réduire le nombre d'étapes nécessaires pour terminer un paiement en ligne, faisant potentiellement ainsi diparaître les formulaires de validation finale. Elle vise à rendre le processus de validation final plus facile en conservant les informations de l'utilisateur, qui sont transmises au marchant sans nécessiter de formulaire HTML.

- -

Les avantages de l'utilisation de l'API Payment Request avec des règlements par cartes ("basic-card") :

- - - -

Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le PaymentRequest permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction.

- -

Vous pouvez trouver un guide complet dans l'article Using the Payment Request API.

- -
-

Note : L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut  {{htmlattrxref("allowpaymentrequest","iframe")}}.

-
- -

Interfaces

- -
-
{{domxref('PaymentAddress')}}
-
Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition.
-
{{domxref('PaymentRequest')}}
-
Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}.
-
{{domxref('PaymentRequestEvent')}}
-
Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait.
-
{{domxref('PaymentRequestUpdateEvent')}}
-
Permet à la page web de mettre à jour les détails de la requête de paiement en réponse à une action de l'utilisateur.
-
{{domxref('PaymentMethodChangeEvent')}}
-
Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne).
-
{{domxref('PaymentResponse')}}
-
Un objet renvoyé après que l'utilisateur ait sélectionné un moyen de paiement et approuvé une demande de paiement.
-
{{domxref('MerchantValidationEvent')}}
-
Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay).
-
- -
-
- -

Dictionnaires

- -
-
{{domxref("AddressErrors")}}
-
Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs.
-
{{domxref("PayerErrors")}}
-
Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}.
-
{{domxref("PaymentDetailsUpdate")}}
-
Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec.
-
- -

Dictionnaires connexes pour la specification Basic Card

- -
-
{{domxref("BasicCardChangeDetails")}}
-
Un objet qui donne l'information "redacted address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement.
-
{{domxref("BasicCardErrors")}}
-
Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit.
-
{{domxref('BasicCardRequest')}}
-
Définit une structure d'objet pour contenir les détails d'une requête de paiement, par exemple le type de carte de paiement.
-
{{domxref('BasicCardResponse')}}
-
Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Payment')}}{{Spec2('Payment')}}Initial definition.
{{SpecName('Basic Card Payment')}}{{Spec2('Basic Card Payment')}}Defines {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}, among other things needed for handling credit card payment
{{SpecName('Payment Method Identifiers')}}{{Spec2('Payment Method Identifiers')}}Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.
- -

Browser compatibility

- -
-

PaymentRequest interface

- -
- - -

{{Compat("api.PaymentRequest", 0)}}

-
-
- -

See also

- - diff --git a/files/fr/web/api/payment_request_api/index.md b/files/fr/web/api/payment_request_api/index.md new file mode 100644 index 0000000000..5712ce4c57 --- /dev/null +++ b/files/fr/web/api/payment_request_api/index.md @@ -0,0 +1,125 @@ +--- +title: Payment Request API +slug: Web/API/Payment_Request_API +translation_of: Web/API/Payment_Request_API +--- +
{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}
+ +

L'API Payment Request fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand.

+ +

Concepts et usages de l'API Payment Request

+ +

De nombreux problèmes concernant l'abandon du panier d'achat en ligne peuvent découler de formulaires de validation finale longs et difficiles à remplir, et nécessitant souvent plusieurs étapes. L'API Payment Request a pour vocation de réduire le nombre d'étapes nécessaires pour terminer un paiement en ligne, faisant potentiellement ainsi diparaître les formulaires de validation finale. Elle vise à rendre le processus de validation final plus facile en conservant les informations de l'utilisateur, qui sont transmises au marchant sans nécessiter de formulaire HTML.

+ +

Les avantages de l'utilisation de l'API Payment Request avec des règlements par cartes ("basic-card") :

+ + + +

Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le PaymentRequest permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction.

+ +

Vous pouvez trouver un guide complet dans l'article Using the Payment Request API.

+ +
+

Note : L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut  {{htmlattrxref("allowpaymentrequest","iframe")}}.

+
+ +

Interfaces

+ +
+
{{domxref('PaymentAddress')}}
+
Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition.
+
{{domxref('PaymentRequest')}}
+
Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}.
+
{{domxref('PaymentRequestEvent')}}
+
Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait.
+
{{domxref('PaymentRequestUpdateEvent')}}
+
Permet à la page web de mettre à jour les détails de la requête de paiement en réponse à une action de l'utilisateur.
+
{{domxref('PaymentMethodChangeEvent')}}
+
Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne).
+
{{domxref('PaymentResponse')}}
+
Un objet renvoyé après que l'utilisateur ait sélectionné un moyen de paiement et approuvé une demande de paiement.
+
{{domxref('MerchantValidationEvent')}}
+
Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay).
+
+ +
+
+ +

Dictionnaires

+ +
+
{{domxref("AddressErrors")}}
+
Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs.
+
{{domxref("PayerErrors")}}
+
Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}.
+
{{domxref("PaymentDetailsUpdate")}}
+
Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec.
+
+ +

Dictionnaires connexes pour la specification Basic Card

+ +
+
{{domxref("BasicCardChangeDetails")}}
+
Un objet qui donne l'information "redacted address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement.
+
{{domxref("BasicCardErrors")}}
+
Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit.
+
{{domxref('BasicCardRequest')}}
+
Définit une structure d'objet pour contenir les détails d'une requête de paiement, par exemple le type de carte de paiement.
+
{{domxref('BasicCardResponse')}}
+
Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Payment')}}{{Spec2('Payment')}}Initial definition.
{{SpecName('Basic Card Payment')}}{{Spec2('Basic Card Payment')}}Defines {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}, among other things needed for handling credit card payment
{{SpecName('Payment Method Identifiers')}}{{Spec2('Payment Method Identifiers')}}Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.
+ +

Browser compatibility

+ +
+

PaymentRequest interface

+ +
+ + +

{{Compat("api.PaymentRequest", 0)}}

+
+
+ +

See also

+ + diff --git a/files/fr/web/api/performance/clearmarks/index.html b/files/fr/web/api/performance/clearmarks/index.html deleted file mode 100644 index 81571fb42e..0000000000 --- a/files/fr/web/api/performance/clearmarks/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: performance.clearMarks() -slug: Web/API/Performance/clearMarks -tags: - - API - - Method - - Méthode - - Reference - - Performance web -translation_of: Web/API/Performance/clearMarks ---- -
{{APIRef("User Timing API")}}
- -

La méthode clearMarks() supprime les marqueurs nommés du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType", "entryType")}} de « mark » seront supprimées du tampon d'entrée de performance.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  performance.clearMarks();
-  performance.clearMarks(name);
-
- -

Arguments

- -
-
name {{optional_inline}}
-
Un {{domxref("DOMString")}} représentant le nom de l'horodatage. Si cet argument est omis, toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « mark » seront supprimés.
-
- -

Valeur de retour

- -

Aucune.

- -

Exemple

- -

L'exemple suivant montre les deux utilisations de la méthode clearMarks().

- -
// Créé une petite aide pour montrer combien d'entrées PerformanceMark il y a.
-function logMarkCount() {
-  console.log(
-    "J'ai trouvé autant d'entrées : " + performance.getEntriesByType("mark").length
-  );
-}
-
-// Crée une série de marqueurs.
-performance.mark("squirrel");
-performance.mark("squirrel");
-performance.mark("monkey");
-performance.mark("monkey");
-performance.mark("dog");
-performance.mark("dog");
-
-logMarkCount() // "J'ai trouvé autant d'entrées : 6"
-
-// Supprime seulement les entrées "squirrel" de PerformanceMark.
-performance.clearMarks('squirrel');
-logMarkCount() // "J'ai trouvé autant d'entrées : 4"
-
-// Supprime toutes les entrées de PerformanceMark.
-performance.clearMarks();
-logMarkCount() // "J'ai trouvé autant d'entrées : 0"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#dom-performance-clearmarks', - 'clearMarks()')}}{{Spec2('User Timing Level 2')}}Clarification de clearMarks().
{{SpecName('User Timing', '#dom-performance-clearmarks', 'clearMarks()')}}{{Spec2('User Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.clearMarks")}}

diff --git a/files/fr/web/api/performance/clearmarks/index.md b/files/fr/web/api/performance/clearmarks/index.md new file mode 100644 index 0000000000..81571fb42e --- /dev/null +++ b/files/fr/web/api/performance/clearmarks/index.md @@ -0,0 +1,93 @@ +--- +title: performance.clearMarks() +slug: Web/API/Performance/clearMarks +tags: + - API + - Method + - Méthode + - Reference + - Performance web +translation_of: Web/API/Performance/clearMarks +--- +
{{APIRef("User Timing API")}}
+ +

La méthode clearMarks() supprime les marqueurs nommés du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType", "entryType")}} de « mark » seront supprimées du tampon d'entrée de performance.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  performance.clearMarks();
+  performance.clearMarks(name);
+
+ +

Arguments

+ +
+
name {{optional_inline}}
+
Un {{domxref("DOMString")}} représentant le nom de l'horodatage. Si cet argument est omis, toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « mark » seront supprimés.
+
+ +

Valeur de retour

+ +

Aucune.

+ +

Exemple

+ +

L'exemple suivant montre les deux utilisations de la méthode clearMarks().

+ +
// Créé une petite aide pour montrer combien d'entrées PerformanceMark il y a.
+function logMarkCount() {
+  console.log(
+    "J'ai trouvé autant d'entrées : " + performance.getEntriesByType("mark").length
+  );
+}
+
+// Crée une série de marqueurs.
+performance.mark("squirrel");
+performance.mark("squirrel");
+performance.mark("monkey");
+performance.mark("monkey");
+performance.mark("dog");
+performance.mark("dog");
+
+logMarkCount() // "J'ai trouvé autant d'entrées : 6"
+
+// Supprime seulement les entrées "squirrel" de PerformanceMark.
+performance.clearMarks('squirrel');
+logMarkCount() // "J'ai trouvé autant d'entrées : 4"
+
+// Supprime toutes les entrées de PerformanceMark.
+performance.clearMarks();
+logMarkCount() // "J'ai trouvé autant d'entrées : 0"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#dom-performance-clearmarks', + 'clearMarks()')}}{{Spec2('User Timing Level 2')}}Clarification de clearMarks().
{{SpecName('User Timing', '#dom-performance-clearmarks', 'clearMarks()')}}{{Spec2('User Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.clearMarks")}}

diff --git a/files/fr/web/api/performance/clearmeasures/index.html b/files/fr/web/api/performance/clearmeasures/index.html deleted file mode 100644 index 0748baa2b2..0000000000 --- a/files/fr/web/api/performance/clearmeasures/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: performance.clearMeasures() -slug: Web/API/Performance/clearMeasures -tags: - - API - - Method - - Méthode - - Reference - - Performance web -translation_of: Web/API/Performance/clearMeasures ---- -
{{APIRef("User Timing API")}}
- -

La méthode clearMeasures() supprime les mesures nommées du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « measure » seront supprimées du tampon d'entrée de performance.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  performance.clearMeasures();
-  performance.clearMeasures(name);
-
- -

Arguments

- -
-
name {{optional_inline}}
-
Un {{domxref("DOMString")}} représentant le nom de l'horodatage. Si cet argument est omis, toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entrType")}} de « measure » seront supprimés.
-
- -

Valeur de retour

- -

Aucune.

- -

Exemple

- -

L'exemple suivant montre les deux utilisations de la méthode clearMeasures().

- -
// Crée une petite aide pour montrer combien d'entrées PerformanceMeasure il y a.
-function logMeasureCount() {
-  console.log(
-    "J'ai trouvé ces nombreuses entrées : " + performance.getEntriesByType("measure").length
-  );
-}
-
-// Crée un ensemble de mesures.
-performance.measure("from navigation");
-performance.mark("a");
-performance.measure("from mark a", "a");
-performance.measure("from navigation");
-performance.measure("from mark a", "a");
-performance.mark("b");
-performance.measure("between a and b", "a", "b");
-
-logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 5"
-
-// Supprime uniquement les entrées PerformanceMeasure "from navigation".
-performance.clearMeasures("from navigation");
-logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 3"
-
-// Supprime toutes les entrées de PerformanceMeasure.
-performance.clearMeasures();
-logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 0"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#dom-performance-clearmeasures', - 'clearMeasures()')}}{{Spec2('User Timing Level 2')}}Carification de clearMeasures().
{{SpecName('User Timing', '#dom-performance-clearmeasures', 'clearMeasures()')}} - {{Spec2('User Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.clearMeasures")}}

diff --git a/files/fr/web/api/performance/clearmeasures/index.md b/files/fr/web/api/performance/clearmeasures/index.md new file mode 100644 index 0000000000..0748baa2b2 --- /dev/null +++ b/files/fr/web/api/performance/clearmeasures/index.md @@ -0,0 +1,95 @@ +--- +title: performance.clearMeasures() +slug: Web/API/Performance/clearMeasures +tags: + - API + - Method + - Méthode + - Reference + - Performance web +translation_of: Web/API/Performance/clearMeasures +--- +
{{APIRef("User Timing API")}}
+ +

La méthode clearMeasures() supprime les mesures nommées du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « measure » seront supprimées du tampon d'entrée de performance.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  performance.clearMeasures();
+  performance.clearMeasures(name);
+
+ +

Arguments

+ +
+
name {{optional_inline}}
+
Un {{domxref("DOMString")}} représentant le nom de l'horodatage. Si cet argument est omis, toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entrType")}} de « measure » seront supprimés.
+
+ +

Valeur de retour

+ +

Aucune.

+ +

Exemple

+ +

L'exemple suivant montre les deux utilisations de la méthode clearMeasures().

+ +
// Crée une petite aide pour montrer combien d'entrées PerformanceMeasure il y a.
+function logMeasureCount() {
+  console.log(
+    "J'ai trouvé ces nombreuses entrées : " + performance.getEntriesByType("measure").length
+  );
+}
+
+// Crée un ensemble de mesures.
+performance.measure("from navigation");
+performance.mark("a");
+performance.measure("from mark a", "a");
+performance.measure("from navigation");
+performance.measure("from mark a", "a");
+performance.mark("b");
+performance.measure("between a and b", "a", "b");
+
+logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 5"
+
+// Supprime uniquement les entrées PerformanceMeasure "from navigation".
+performance.clearMeasures("from navigation");
+logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 3"
+
+// Supprime toutes les entrées de PerformanceMeasure.
+performance.clearMeasures();
+logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 0"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#dom-performance-clearmeasures', + 'clearMeasures()')}}{{Spec2('User Timing Level 2')}}Carification de clearMeasures().
{{SpecName('User Timing', '#dom-performance-clearmeasures', 'clearMeasures()')}} + {{Spec2('User Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.clearMeasures")}}

diff --git a/files/fr/web/api/performance/clearresourcetimings/index.html b/files/fr/web/api/performance/clearresourcetimings/index.html deleted file mode 100644 index b7a87a662a..0000000000 --- a/files/fr/web/api/performance/clearresourcetimings/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: performance.clearResourceTimings() -slug: Web/API/Performance/clearResourceTimings -tags: -- API -- Method -- Méthode -- Reference -- Performance web -translation_of: Web/API/Performance/clearResourceTimings ---- -
{{APIRef("Resource Timing API")}}
- -

La méthode clearResourceTimings() supprime toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « resource » du tampon d'entrée de performance et fixe la taille du tampon de données de performance à zéro. Pour définir la taille du tampon de données de performance du navigateur, utilisez la méthode {{domxref("Performance.setResourceTimingBufferSize()")}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
performance.clearResourceTimings();
-
- -

Arguments

- -

Aucun.

- -

Valeur de retour

- -

Aucune.

- -

Exemple

- -
function load_resource() {
-  var image = new Image();
-  image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png";
-}
-function clear_performance_timings() {
-  if (performance === undefined) {
-    log("Le navigateur ne prend pas en charge les performances Web");
-    return;
-  }
-  // Crée une entrée de performance de synchronisation des ressources en chargeant une image
-  load_resource();
-
-  var supported = typeof performance.clearResourceTimings == "function";
-  if (supported) {
-    console.log("Exécuter : performance.clearResourceTimings()");
-    performance.clearResourceTimings();
-  } else {
-    console.log("performance.clearResourceTimings() N'EST PAS supporté");
-    return;
-  }
-  // getEntries devrait maintenant retourner zéro
-  var p = performance.getEntriesByType("resource");
-  if (p.length == 0)
-    console.log("... Le tampon de données de performance a été effacé");
-  else
-    console.log("... Le tampon de données de performance n'a PAS été effacé !");
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performance-clearresourcetimings', - 'clearResourceTimings()')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.clearResourceTimings")}}

diff --git a/files/fr/web/api/performance/clearresourcetimings/index.md b/files/fr/web/api/performance/clearresourcetimings/index.md new file mode 100644 index 0000000000..b7a87a662a --- /dev/null +++ b/files/fr/web/api/performance/clearresourcetimings/index.md @@ -0,0 +1,84 @@ +--- +title: performance.clearResourceTimings() +slug: Web/API/Performance/clearResourceTimings +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/clearResourceTimings +--- +
{{APIRef("Resource Timing API")}}
+ +

La méthode clearResourceTimings() supprime toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « resource » du tampon d'entrée de performance et fixe la taille du tampon de données de performance à zéro. Pour définir la taille du tampon de données de performance du navigateur, utilisez la méthode {{domxref("Performance.setResourceTimingBufferSize()")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
performance.clearResourceTimings();
+
+ +

Arguments

+ +

Aucun.

+ +

Valeur de retour

+ +

Aucune.

+ +

Exemple

+ +
function load_resource() {
+  var image = new Image();
+  image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png";
+}
+function clear_performance_timings() {
+  if (performance === undefined) {
+    log("Le navigateur ne prend pas en charge les performances Web");
+    return;
+  }
+  // Crée une entrée de performance de synchronisation des ressources en chargeant une image
+  load_resource();
+
+  var supported = typeof performance.clearResourceTimings == "function";
+  if (supported) {
+    console.log("Exécuter : performance.clearResourceTimings()");
+    performance.clearResourceTimings();
+  } else {
+    console.log("performance.clearResourceTimings() N'EST PAS supporté");
+    return;
+  }
+  // getEntries devrait maintenant retourner zéro
+  var p = performance.getEntriesByType("resource");
+  if (p.length == 0)
+    console.log("... Le tampon de données de performance a été effacé");
+  else
+    console.log("... Le tampon de données de performance n'a PAS été effacé !");
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performance-clearresourcetimings', + 'clearResourceTimings()')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.clearResourceTimings")}}

diff --git a/files/fr/web/api/performance/getentries/index.html b/files/fr/web/api/performance/getentries/index.html deleted file mode 100644 index 1cf2fd1832..0000000000 --- a/files/fr/web/api/performance/getentries/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: performance.getEntries() -slug: Web/API/Performance/getEntries -tags: -- API -- Method -- Méthode -- Reference -- Performance web -translation_of: Web/API/Performance/getEntries ---- -
{{APIRef("Performance Timeline API")}}
- -

La méthode getEntries() renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour la page. Les membres de la liste (entrées) peuvent être créés en faisant des marqueurs ou des mesures de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites. Si vous souhaitez filtrer les entrées de performance en fonction de leur type ou de leur nom, consultez la documentation des méthodes {{domxref("Performance.getEntriesByType", "getEntriesByType()")}} et {{domxref("Performance.getEntriesByName", "getEntriesByName()")}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  entries = window.performance.getEntries();
-
- -

Valeur de retour

- -
-
entries
-
Un tableau ({{jsxref("Array")}}) d'objets {{domxref("PerformanceEntry")}}. Les éléments seront classés par ordre chronologique en fonction des entrées {{domxref("PerformanceEntry.startTime","startTime")}}.
-
- -

Exemple

- -
function use_PerformanceEntry_methods() {
-  console.log("PerformanceEntry tests ...");
-
-  if (performance.mark === undefined) {
-    console.log("... performance.mark Non pris en charge");
-    return;
-  }
-
-  // Crée quelques entrées de performance via la méthode mark()
-  performance.mark("Begin");
-  do_work(50000);
-  performance.mark("End");
-  performance.mark("Begin");
-  do_work(100000);
-  performance.mark("End");
-  do_work(200000);
-  performance.mark("End");
-
-  // Utilise getEntries() pour itérer à travers chaque entrée.
-  let p = performance.getEntries();
-  for (var i=0; i < p.length; i++) {
-    console.log("Entry[" + i + "]");
-    check_PerformanceEntry(p[i]);
-  }
-
-  // Utilise getEntriesByType() pour obtenir toutes les entrées "mark".
-  p = performance.getEntriesByType("mark");
-  for (let i=0; i < p.length; i++) {
-    console.log ("Mark only entry[" + i + "]: name = " + p[i].name +
-         "; startTime = " + p[i].startTime +
-         "; duration  = " + p[i].duration);
-  }
-
-  // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
-  p = performance.getEntriesByName("Begin", "mark");
-  for (let i=0; i < p.length; i++) {
-    console.log ("Mark and Begin entry[" + i + "]: name = " + p[i].name +
-         "; startTime = " + p[i].startTime +
-         "; duration  = " + p[i].duration);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performance-getentries', - 'getEntries()')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performance-getentries', - 'getEntries()')}}{{Spec2('Performance Timeline')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.getEntries")}}

diff --git a/files/fr/web/api/performance/getentries/index.md b/files/fr/web/api/performance/getentries/index.md new file mode 100644 index 0000000000..1cf2fd1832 --- /dev/null +++ b/files/fr/web/api/performance/getentries/index.md @@ -0,0 +1,104 @@ +--- +title: performance.getEntries() +slug: Web/API/Performance/getEntries +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/getEntries +--- +
{{APIRef("Performance Timeline API")}}
+ +

La méthode getEntries() renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour la page. Les membres de la liste (entrées) peuvent être créés en faisant des marqueurs ou des mesures de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites. Si vous souhaitez filtrer les entrées de performance en fonction de leur type ou de leur nom, consultez la documentation des méthodes {{domxref("Performance.getEntriesByType", "getEntriesByType()")}} et {{domxref("Performance.getEntriesByName", "getEntriesByName()")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  entries = window.performance.getEntries();
+
+ +

Valeur de retour

+ +
+
entries
+
Un tableau ({{jsxref("Array")}}) d'objets {{domxref("PerformanceEntry")}}. Les éléments seront classés par ordre chronologique en fonction des entrées {{domxref("PerformanceEntry.startTime","startTime")}}.
+
+ +

Exemple

+ +
function use_PerformanceEntry_methods() {
+  console.log("PerformanceEntry tests ...");
+
+  if (performance.mark === undefined) {
+    console.log("... performance.mark Non pris en charge");
+    return;
+  }
+
+  // Crée quelques entrées de performance via la méthode mark()
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+  performance.mark("Begin");
+  do_work(100000);
+  performance.mark("End");
+  do_work(200000);
+  performance.mark("End");
+
+  // Utilise getEntries() pour itérer à travers chaque entrée.
+  let p = performance.getEntries();
+  for (var i=0; i < p.length; i++) {
+    console.log("Entry[" + i + "]");
+    check_PerformanceEntry(p[i]);
+  }
+
+  // Utilise getEntriesByType() pour obtenir toutes les entrées "mark".
+  p = performance.getEntriesByType("mark");
+  for (let i=0; i < p.length; i++) {
+    console.log ("Mark only entry[" + i + "]: name = " + p[i].name +
+         "; startTime = " + p[i].startTime +
+         "; duration  = " + p[i].duration);
+  }
+
+  // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
+  p = performance.getEntriesByName("Begin", "mark");
+  for (let i=0; i < p.length; i++) {
+    console.log ("Mark and Begin entry[" + i + "]: name = " + p[i].name +
+         "; startTime = " + p[i].startTime +
+         "; duration  = " + p[i].duration);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performance-getentries', + 'getEntries()')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performance-getentries', + 'getEntries()')}}{{Spec2('Performance Timeline')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.getEntries")}}

diff --git a/files/fr/web/api/performance/getentriesbyname/index.html b/files/fr/web/api/performance/getentriesbyname/index.html deleted file mode 100644 index ac125fe6be..0000000000 --- a/files/fr/web/api/performance/getentriesbyname/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: performance.getEntriesByName() -slug: Web/API/Performance/getEntriesByName -tags: - - API - - Method - - Méthode - - Reference - - Performance web -translation_of: Web/API/Performance/getEntriesByName ---- -
{{APIRef("Performance Timeline API")}}
- -

La méthode getEntriesByName() renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} ayant un nom (et éventuellement un type) donné(s). Les entrées de performance auront pu être créées au préalable avec des marqueurs ou des mesures de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  entries = window.performance.getEntriesByName(name, type);
-
- -

Arguments

- -
-
name
-
Le nom de l'entrée à récupérer.
-
type {{optional_inline}}
-
Le type d'entrée à récupérer tel que « mark ». Les types d'entrées valides sont listés dans {{domxref("PerformanceEntry.entryType")}}.
-
- -

Valeur de retour

- -
-
entries
-
Une liste de tous les objets {{domxref("PerformanceEntry")}} ayant le nom et le type spécifiés. Si l'argument type n'est pas spécifié, seul le nom (name) sera utilisé pour déterminer les entrées à renvoyer. Les éléments seront dans l'ordre chronologique basé sur les {{domxref("PerformanceEntry.startTime", "startTime")}} des entrées. Si aucun objet ne répond aux critères spécifiés, une liste vide est retournée.
-
- -

Exemple

- -
function use_PerformanceEntry_methods() {
-  log("PerformanceEntry tests ...");
-
-  if (performance.mark === undefined) {
-    log("... performance.mark Non pris en charge");
-    return;
-  }
-
-  // Crée quelques entrées de performance via la méthode mark()
-  performance.mark("Begin");
-  do_work(50000);
-  performance.mark("End");
-  performance.mark("Begin");
-  do_work(100000);
-  performance.mark("End");
-  do_work(200000);
-  performance.mark("End");
-
-  // Utilise getEntries() pour itérer à travers chaque entrée
-  var p = performance.getEntries();
-  for (var i=0; i < p.length; i++) {
-    log("Entry[" + i + "]");
-    check_PerformanceEntry(p[i]);
-  }
-
-  // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques
-  p = performance.getEntries({name : "Begin", entryType: "mark"});
-  for (var i=0; i < p.length; i++) {
-    log("Begin[" + i + "]");
-    check_PerformanceEntry(p[i]);
-  }
-
-  // Utilise getEntriesByType() pour obtenir toutes les entrées "mark"
-  p = performance.getEntriesByType("mark");
-  for (var i=0; i < p.length; i++) {
-    log ("Mark only entry[" + i + "]: name = " + p[i].name +
-         "; startTime = " + p[i].startTime +
-         "; duration  = " + p[i].duration);
-  }
-
-  // Utilisez getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin"
-  p = performance.getEntriesByName("Begin", "mark");
-  for (var i=0; i < p.length; i++) {
-    log ("Mark and Begin entry[" + i + "]: name = " + p[i].name +
-         "; startTime = " + p[i].startTime +
-         "; duration  = " + p[i].duration);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performance-getentriesbyname', - 'getEntriesByName()')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performance-getentriesbyname', - 'getEntriesByName()')}}{{Spec2('Performance Timeline')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.getEntriesByName")}}

diff --git a/files/fr/web/api/performance/getentriesbyname/index.md b/files/fr/web/api/performance/getentriesbyname/index.md new file mode 100644 index 0000000000..ac125fe6be --- /dev/null +++ b/files/fr/web/api/performance/getentriesbyname/index.md @@ -0,0 +1,120 @@ +--- +title: performance.getEntriesByName() +slug: Web/API/Performance/getEntriesByName +tags: + - API + - Method + - Méthode + - Reference + - Performance web +translation_of: Web/API/Performance/getEntriesByName +--- +
{{APIRef("Performance Timeline API")}}
+ +

La méthode getEntriesByName() renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} ayant un nom (et éventuellement un type) donné(s). Les entrées de performance auront pu être créées au préalable avec des marqueurs ou des mesures de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  entries = window.performance.getEntriesByName(name, type);
+
+ +

Arguments

+ +
+
name
+
Le nom de l'entrée à récupérer.
+
type {{optional_inline}}
+
Le type d'entrée à récupérer tel que « mark ». Les types d'entrées valides sont listés dans {{domxref("PerformanceEntry.entryType")}}.
+
+ +

Valeur de retour

+ +
+
entries
+
Une liste de tous les objets {{domxref("PerformanceEntry")}} ayant le nom et le type spécifiés. Si l'argument type n'est pas spécifié, seul le nom (name) sera utilisé pour déterminer les entrées à renvoyer. Les éléments seront dans l'ordre chronologique basé sur les {{domxref("PerformanceEntry.startTime", "startTime")}} des entrées. Si aucun objet ne répond aux critères spécifiés, une liste vide est retournée.
+
+ +

Exemple

+ +
function use_PerformanceEntry_methods() {
+  log("PerformanceEntry tests ...");
+
+  if (performance.mark === undefined) {
+    log("... performance.mark Non pris en charge");
+    return;
+  }
+
+  // Crée quelques entrées de performance via la méthode mark()
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+  performance.mark("Begin");
+  do_work(100000);
+  performance.mark("End");
+  do_work(200000);
+  performance.mark("End");
+
+  // Utilise getEntries() pour itérer à travers chaque entrée
+  var p = performance.getEntries();
+  for (var i=0; i < p.length; i++) {
+    log("Entry[" + i + "]");
+    check_PerformanceEntry(p[i]);
+  }
+
+  // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques
+  p = performance.getEntries({name : "Begin", entryType: "mark"});
+  for (var i=0; i < p.length; i++) {
+    log("Begin[" + i + "]");
+    check_PerformanceEntry(p[i]);
+  }
+
+  // Utilise getEntriesByType() pour obtenir toutes les entrées "mark"
+  p = performance.getEntriesByType("mark");
+  for (var i=0; i < p.length; i++) {
+    log ("Mark only entry[" + i + "]: name = " + p[i].name +
+         "; startTime = " + p[i].startTime +
+         "; duration  = " + p[i].duration);
+  }
+
+  // Utilisez getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin"
+  p = performance.getEntriesByName("Begin", "mark");
+  for (var i=0; i < p.length; i++) {
+    log ("Mark and Begin entry[" + i + "]: name = " + p[i].name +
+         "; startTime = " + p[i].startTime +
+         "; duration  = " + p[i].duration);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performance-getentriesbyname', + 'getEntriesByName()')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performance-getentriesbyname', + 'getEntriesByName()')}}{{Spec2('Performance Timeline')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.getEntriesByName")}}

diff --git a/files/fr/web/api/performance/getentriesbytype/index.html b/files/fr/web/api/performance/getentriesbytype/index.html deleted file mode 100644 index 3644cd0f60..0000000000 --- a/files/fr/web/api/performance/getentriesbytype/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: performance.getEntriesByType() -slug: Web/API/Performance/getEntriesByType -tags: -- API -- Method -- Méthode -- Reference -- Performance web -translation_of: Web/API/Performance/getEntriesByType ---- -
{{APIRef("Performance Timeline API")}}
- -

La méthode getEntriesByName() renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour le type donné. Les entrées de performance auront pu être créées au préalable avec des marqueurs ou des mesures de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  let entries = window.performance.getEntriesByType(type);
-
- -

Arguments

- -
-
type
-
Le type d'entrée à récupérer tel que « mark ». Les types d'entrées valides sont listés dans {{domxref("PerformanceEntry.entryType")}}.
-
- -

Valeur de retour

- -
-
entries
-
Une liste de tous les objets {{domxref("PerformanceEntry")}} ayant le type spécifié. Les éléments seront triés dans l'ordre chronologique basé sur les propriétés {{domxref("PerformanceEntry.startTime", "startTime")}} des entrées. Si aucun objet ne possède le type spécifié, ou si aucun argument n'est fourni, une liste vide est renvoyée.
-
- -

Exemple

- -
function usePerformanceEntryMethods() {
-  log("PerformanceEntry tests ...");
-
-  if (performance.mark === undefined) {
-    log("... performance.mark Non pris en charge");
-    return;
-  }
-
-  // Crée quelques entrées de performance via la méthode mark()
-  performance.mark("Begin");
-  doWork(50000);
-  performance.mark("End");
-  performance.mark("Begin");
-  doWork(100000);
-  performance.mark("End");
-  doWork(200000);
-  performance.mark("End");
-
-  // Utilise getEntries() pour itérer à travers chaque entrée.
-  var p = performance.getEntries();
-  for (var i=0; i < p.length; i++) {
-    log("Entry[" + i + "]");
-    checkPerformanceEntry(p[i]);
-  }
-
-  // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques.
-  p = performance.getEntries({name : "Begin", entryType: "mark"});
-  for (var i=0; i < p.length; i++) {
-    log("Begin[" + i + "]");
-    checkPerformanceEntry(p[i]);
-  }
-
-  // Utilise getEntriesByType() pour obtenir toutes les entrées "mark".
-  p = performance.getEntriesByType("mark");
-  for (var i=0; i < p.length; i++) {
-    log("Mark only entry[" + i + "]: name = " + p[i].name +
-         "; startTime = " + p[i].startTime +
-         "; duration  = " + p[i].duration);
-  }
-
-  // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
-  p = performance.getEntriesByName("Begin", "mark");
-  for (var i=0; i < p.length; i++) {
-    log("Mark and Begin entry[" + i + "]: name = " + p[i].name +
-         "; startTime = " + p[i].startTime +
-         "; duration  = " + p[i].duration);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performance-getentriesbytype', - 'getEntriesByType()')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performance-getentriesbytype', - 'getEntriesByType()')}}{{Spec2('Performance Timeline')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.getEntriesByType")}}

diff --git a/files/fr/web/api/performance/getentriesbytype/index.md b/files/fr/web/api/performance/getentriesbytype/index.md new file mode 100644 index 0000000000..3644cd0f60 --- /dev/null +++ b/files/fr/web/api/performance/getentriesbytype/index.md @@ -0,0 +1,118 @@ +--- +title: performance.getEntriesByType() +slug: Web/API/Performance/getEntriesByType +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/getEntriesByType +--- +
{{APIRef("Performance Timeline API")}}
+ +

La méthode getEntriesByName() renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour le type donné. Les entrées de performance auront pu être créées au préalable avec des marqueurs ou des mesures de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  let entries = window.performance.getEntriesByType(type);
+
+ +

Arguments

+ +
+
type
+
Le type d'entrée à récupérer tel que « mark ». Les types d'entrées valides sont listés dans {{domxref("PerformanceEntry.entryType")}}.
+
+ +

Valeur de retour

+ +
+
entries
+
Une liste de tous les objets {{domxref("PerformanceEntry")}} ayant le type spécifié. Les éléments seront triés dans l'ordre chronologique basé sur les propriétés {{domxref("PerformanceEntry.startTime", "startTime")}} des entrées. Si aucun objet ne possède le type spécifié, ou si aucun argument n'est fourni, une liste vide est renvoyée.
+
+ +

Exemple

+ +
function usePerformanceEntryMethods() {
+  log("PerformanceEntry tests ...");
+
+  if (performance.mark === undefined) {
+    log("... performance.mark Non pris en charge");
+    return;
+  }
+
+  // Crée quelques entrées de performance via la méthode mark()
+  performance.mark("Begin");
+  doWork(50000);
+  performance.mark("End");
+  performance.mark("Begin");
+  doWork(100000);
+  performance.mark("End");
+  doWork(200000);
+  performance.mark("End");
+
+  // Utilise getEntries() pour itérer à travers chaque entrée.
+  var p = performance.getEntries();
+  for (var i=0; i < p.length; i++) {
+    log("Entry[" + i + "]");
+    checkPerformanceEntry(p[i]);
+  }
+
+  // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques.
+  p = performance.getEntries({name : "Begin", entryType: "mark"});
+  for (var i=0; i < p.length; i++) {
+    log("Begin[" + i + "]");
+    checkPerformanceEntry(p[i]);
+  }
+
+  // Utilise getEntriesByType() pour obtenir toutes les entrées "mark".
+  p = performance.getEntriesByType("mark");
+  for (var i=0; i < p.length; i++) {
+    log("Mark only entry[" + i + "]: name = " + p[i].name +
+         "; startTime = " + p[i].startTime +
+         "; duration  = " + p[i].duration);
+  }
+
+  // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
+  p = performance.getEntriesByName("Begin", "mark");
+  for (var i=0; i < p.length; i++) {
+    log("Mark and Begin entry[" + i + "]: name = " + p[i].name +
+         "; startTime = " + p[i].startTime +
+         "; duration  = " + p[i].duration);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performance-getentriesbytype', + 'getEntriesByType()')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performance-getentriesbytype', + 'getEntriesByType()')}}{{Spec2('Performance Timeline')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.getEntriesByType")}}

diff --git a/files/fr/web/api/performance/index.html b/files/fr/web/api/performance/index.html deleted file mode 100644 index 3de85d05ed..0000000000 --- a/files/fr/web/api/performance/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Performance -slug: Web/API/Performance -tags: - - API - - Navigation Timing - - Performance - - Performance Web - - Reference -translation_of: Web/API/Performance ---- -
{{APIRef("High Resolution Time")}}
- -

L'interface Performance donne accès à des informations liées aux performances pour la page actuelle. Elle fait partie de l'API « High Resolution Time », mais est complétée par les APIs Performance Timeline, Navigation Timing, User Timing, et Resource Timing.

- -

Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule {{domxref("window.performance")}}.

- -
-

Note : Cette interface et ses attributs sont accessibles aux Web Workers via WorkerGlobalScope.performance sauf dans les cas cités ci-dessous. Notez également que les marqueurs et les mesures de performance sont définis par contexte. Si vous créez un marqueur dans le processus principal (ou un autre Web Worker), vous ne pourrez pas le voir dans le processus du Web Worker, et réciproquement.

-
- -

Propriétés

- -

L'interface Performance n'hérite d'aucune propriété.

- -
-
- {{domxref("performance.navigation")}} {{readonlyInline}} {{deprecated_inline}} -
-
- {{domxref("PerformanceNavigation")}} est un objet qui fournit des informations contextuelles sur les opérations incluses dans les indicateurs de timing, notamment si la page a été chargée ou actualisée, combien de redirections ont été effectuées, etc… -
-

Note : Indisponible dans les Web Workers.

-
-
-
- {{domxref("performance.timing")}} {{readonlyInline}} {{deprecated_inline}} -
-
- {{domxref("PerformanceTiming")}} est un objet contenant des informations de performance liées à la latence. -
-

Note : Indisponible dans les Web Workers.

-
-
-
- {{domxref("performance.memory")}} {{readonlyInline}} {{Non-standard_inline}}
-
- Une extension non standard ajoutée dans Chrome, cette propriété fournit à un objet des informations de base sur l'utilisation de la mémoire. Vous ne devriez pas utiliser cette API non standard. -
-
- {{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Experimental_inline}} -
-
- Fournit un horodatage haute résolution de l'heure de début de la mesure de performance. -
-
- -

Méthodes

- -

L'interface Performance n'hérite d'aucune méthode.

- -
-
{{domxref("performance.clearMarks()")}}
-
Supprime le marqueur indiqué des données de performances du navigateur mises en mémoire tampon.
-
{{domxref("performance.clearMeasures()")}}
-
Supprime la mesure indiquée des données de performances du navigateur mises en mémoire tampon.
-
{{domxref("performance.clearResourceTimings()")}}
-
Supprime toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} "resource" des données de performances du navigateur mises en mémoire tampon.
-
{{domxref("performance.getEntries()")}}
-
Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le filtre indiqué.
-
{{domxref("performance.getEntriesByName()")}}
-
Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le nom indiqué.
-
{{domxref("performance.getEntriesByType()")}}
-
Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le type indiqué.
-
{{domxref("performance.mark()")}}
-
Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} avec le nom indiqué, dans la mémoire tampon du navigateur dédiée aux performances.
-
{{domxref("performance.measure()")}}
-
Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} nommé, dans la mémoire tampon du navigateur dédiée aux performances, entre deux marqueurs spécifiques (connus comme le marqueur de début et le marqueur de fin, respectivement).
-
{{domxref("Performance.now()")}}
-
Retourne un objet {{domxref("DOMHighResTimeStamp")}} représentant le nombre de millisecondes écoulées depuis un instant donné.
-
{{domxref("performance.setResourceTimingBufferSize()")}}
-
Configure la taille de la mémoire tampon pour le chronométrage des ressources du navigateur. La valeur passée en argument indiquera le nombre maximal d'objets {{domxref("PerformanceEntry")}} ayant le {{domxref("PerformanceEntry.entryType","type")}} "resource" qu'il sera possible d'y stocker.
-
{{domxref("Performance.toJSON()")}}
-
Retourne un objet JSON représentant l'objet Performance.
-
- -

Événements

- -

On pourra écouter ces événements en utilisant addEventListener() ou en assignant un gestionnaire d'événement à la propriété on<EventName> de cette interface.

- -
-
{{DOMxRef("Performance.resourcetimingbufferfull_event", "resourcetimingbufferfull")}}
-
Déclenché lorsque le tampon de synchronisation des ressources du navigateur est plein. Également disponible via la propriété {{DOMxRef("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Highres Time Level 2', '#sec-performance', 'Performance')}}{{Spec2('Highres Time Level 2')}}Définition de la méthode toJson().
{{SpecName('Highres Time', '#performance', 'Performance')}}{{Spec2('Highres Time')}}Définition de la méthode now().
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Changements sur l'interface getEntries().
{{SpecName('Performance Timeline', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Définition des méthodes getEntries(), getEntriesByType() et getEntriesByName().
{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('Resource Timing')}}Définition des méthodes clearResourceTimings() et setResourceTimingBufferSize() et de la propriété onresourcetimingbufferfull.
{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing Level 2')}}Clarifications des méthodes mark(), clearMark(), measure() et clearMeasure().
{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing')}}Définition des méthodes mark(), clearMark(), measure() et clearMeasure().
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performance/index.md b/files/fr/web/api/performance/index.md new file mode 100644 index 0000000000..3de85d05ed --- /dev/null +++ b/files/fr/web/api/performance/index.md @@ -0,0 +1,156 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Navigation Timing + - Performance + - Performance Web + - Reference +translation_of: Web/API/Performance +--- +
{{APIRef("High Resolution Time")}}
+ +

L'interface Performance donne accès à des informations liées aux performances pour la page actuelle. Elle fait partie de l'API « High Resolution Time », mais est complétée par les APIs Performance Timeline, Navigation Timing, User Timing, et Resource Timing.

+ +

Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule {{domxref("window.performance")}}.

+ +
+

Note : Cette interface et ses attributs sont accessibles aux Web Workers via WorkerGlobalScope.performance sauf dans les cas cités ci-dessous. Notez également que les marqueurs et les mesures de performance sont définis par contexte. Si vous créez un marqueur dans le processus principal (ou un autre Web Worker), vous ne pourrez pas le voir dans le processus du Web Worker, et réciproquement.

+
+ +

Propriétés

+ +

L'interface Performance n'hérite d'aucune propriété.

+ +
+
+ {{domxref("performance.navigation")}} {{readonlyInline}} {{deprecated_inline}} +
+
+ {{domxref("PerformanceNavigation")}} est un objet qui fournit des informations contextuelles sur les opérations incluses dans les indicateurs de timing, notamment si la page a été chargée ou actualisée, combien de redirections ont été effectuées, etc… +
+

Note : Indisponible dans les Web Workers.

+
+
+
+ {{domxref("performance.timing")}} {{readonlyInline}} {{deprecated_inline}} +
+
+ {{domxref("PerformanceTiming")}} est un objet contenant des informations de performance liées à la latence. +
+

Note : Indisponible dans les Web Workers.

+
+
+
+ {{domxref("performance.memory")}} {{readonlyInline}} {{Non-standard_inline}}
+
+ Une extension non standard ajoutée dans Chrome, cette propriété fournit à un objet des informations de base sur l'utilisation de la mémoire. Vous ne devriez pas utiliser cette API non standard. +
+
+ {{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Experimental_inline}} +
+
+ Fournit un horodatage haute résolution de l'heure de début de la mesure de performance. +
+
+ +

Méthodes

+ +

L'interface Performance n'hérite d'aucune méthode.

+ +
+
{{domxref("performance.clearMarks()")}}
+
Supprime le marqueur indiqué des données de performances du navigateur mises en mémoire tampon.
+
{{domxref("performance.clearMeasures()")}}
+
Supprime la mesure indiquée des données de performances du navigateur mises en mémoire tampon.
+
{{domxref("performance.clearResourceTimings()")}}
+
Supprime toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} "resource" des données de performances du navigateur mises en mémoire tampon.
+
{{domxref("performance.getEntries()")}}
+
Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le filtre indiqué.
+
{{domxref("performance.getEntriesByName()")}}
+
Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le nom indiqué.
+
{{domxref("performance.getEntriesByType()")}}
+
Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le type indiqué.
+
{{domxref("performance.mark()")}}
+
Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} avec le nom indiqué, dans la mémoire tampon du navigateur dédiée aux performances.
+
{{domxref("performance.measure()")}}
+
Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} nommé, dans la mémoire tampon du navigateur dédiée aux performances, entre deux marqueurs spécifiques (connus comme le marqueur de début et le marqueur de fin, respectivement).
+
{{domxref("Performance.now()")}}
+
Retourne un objet {{domxref("DOMHighResTimeStamp")}} représentant le nombre de millisecondes écoulées depuis un instant donné.
+
{{domxref("performance.setResourceTimingBufferSize()")}}
+
Configure la taille de la mémoire tampon pour le chronométrage des ressources du navigateur. La valeur passée en argument indiquera le nombre maximal d'objets {{domxref("PerformanceEntry")}} ayant le {{domxref("PerformanceEntry.entryType","type")}} "resource" qu'il sera possible d'y stocker.
+
{{domxref("Performance.toJSON()")}}
+
Retourne un objet JSON représentant l'objet Performance.
+
+ +

Événements

+ +

On pourra écouter ces événements en utilisant addEventListener() ou en assignant un gestionnaire d'événement à la propriété on<EventName> de cette interface.

+ +
+
{{DOMxRef("Performance.resourcetimingbufferfull_event", "resourcetimingbufferfull")}}
+
Déclenché lorsque le tampon de synchronisation des ressources du navigateur est plein. Également disponible via la propriété {{DOMxRef("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Highres Time Level 2', '#sec-performance', 'Performance')}}{{Spec2('Highres Time Level 2')}}Définition de la méthode toJson().
{{SpecName('Highres Time', '#performance', 'Performance')}}{{Spec2('Highres Time')}}Définition de la méthode now().
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Changements sur l'interface getEntries().
{{SpecName('Performance Timeline', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Définition des méthodes getEntries(), getEntriesByType() et getEntriesByName().
{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('Resource Timing')}}Définition des méthodes clearResourceTimings() et setResourceTimingBufferSize() et de la propriété onresourcetimingbufferfull.
{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing Level 2')}}Clarifications des méthodes mark(), clearMark(), measure() et clearMeasure().
{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing')}}Définition des méthodes mark(), clearMark(), measure() et clearMeasure().
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performance/mark/index.html b/files/fr/web/api/performance/mark/index.html deleted file mode 100644 index c33a169606..0000000000 --- a/files/fr/web/api/performance/mark/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: performance.mark() -slug: Web/API/Performance/mark -tags: -- API -- Method -- Méthode -- Reference -- Performance web -translation_of: Web/API/Performance/mark ---- -
{{APIRef("User Timing API")}}
- -

La méthode mark() crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} dans le tampon d'entrée de performance du navigateur avec le nom donné en argument.

- -

L'horodatage ainsi défini par l'application peut être récupéré par l'une des méthodes getEntries*() de l'interface {{domxref("Performance")}} ({{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}).

- -

La méthode mark() stocke ses données en interne sous la forme d'objets {{domxref("PerformanceEntry")}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  performance.mark(name);
-
- -

Arguments

- -
-
name
-
Une chaîne de caractères ({{domxref("DOMString")}}) représentant le nom du marqueur. Si le nom donné à cette méthode existe déjà dans l'interface {{domxref("PerformanceTiming")}}, une exception {{jsxref("SyntaxError")}} est levée.
-
- -

Valeur de retour

- -

Aucune.

> - -

Exemple

- -

L'exemple suivant montre comment utiliser mark() pour créer et récupérer des entrées {{domxref("PerformanceMark")}}.

- -
// Crée un ensemble de marqueurs.
-performance.mark("squirrel");
-performance.mark("squirrel");
-performance.mark("monkey");
-performance.mark("monkey");
-performance.mark("dog");
-performance.mark("dog");
-
-// Obtient toutes les entrées de PerformanceMark.
-const allEntries = performance.getEntriesByType("mark");
-console.log(allEntries.length);
-// 6
-
-// Obtient toutes les entrées "monkey" de PerformanceMark.
-const monkeyEntries = performance.getEntriesByName("monkey");
-console.log(monkeyEntries.length);
-// 2
-
-// Efface tous les marqueurs.
-performance.clearMarks();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#dom-performance-mark', 'mark()')}}{{Spec2('User Timing Level 2')}}Clarification du modèle de traitement mark().
{{SpecName('User Timing', '#dom-performance-mark', 'mark()')}}{{Spec2('User Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.mark")}}

diff --git a/files/fr/web/api/performance/mark/index.md b/files/fr/web/api/performance/mark/index.md new file mode 100644 index 0000000000..c33a169606 --- /dev/null +++ b/files/fr/web/api/performance/mark/index.md @@ -0,0 +1,91 @@ +--- +title: performance.mark() +slug: Web/API/Performance/mark +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/mark +--- +
{{APIRef("User Timing API")}}
+ +

La méthode mark() crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} dans le tampon d'entrée de performance du navigateur avec le nom donné en argument.

+ +

L'horodatage ainsi défini par l'application peut être récupéré par l'une des méthodes getEntries*() de l'interface {{domxref("Performance")}} ({{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}).

+ +

La méthode mark() stocke ses données en interne sous la forme d'objets {{domxref("PerformanceEntry")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  performance.mark(name);
+
+ +

Arguments

+ +
+
name
+
Une chaîne de caractères ({{domxref("DOMString")}}) représentant le nom du marqueur. Si le nom donné à cette méthode existe déjà dans l'interface {{domxref("PerformanceTiming")}}, une exception {{jsxref("SyntaxError")}} est levée.
+
+ +

Valeur de retour

+ +

Aucune.

> + +

Exemple

+ +

L'exemple suivant montre comment utiliser mark() pour créer et récupérer des entrées {{domxref("PerformanceMark")}}.

+ +
// Crée un ensemble de marqueurs.
+performance.mark("squirrel");
+performance.mark("squirrel");
+performance.mark("monkey");
+performance.mark("monkey");
+performance.mark("dog");
+performance.mark("dog");
+
+// Obtient toutes les entrées de PerformanceMark.
+const allEntries = performance.getEntriesByType("mark");
+console.log(allEntries.length);
+// 6
+
+// Obtient toutes les entrées "monkey" de PerformanceMark.
+const monkeyEntries = performance.getEntriesByName("monkey");
+console.log(monkeyEntries.length);
+// 2
+
+// Efface tous les marqueurs.
+performance.clearMarks();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#dom-performance-mark', 'mark()')}}{{Spec2('User Timing Level 2')}}Clarification du modèle de traitement mark().
{{SpecName('User Timing', '#dom-performance-mark', 'mark()')}}{{Spec2('User Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.mark")}}

diff --git a/files/fr/web/api/performance/measure/index.html b/files/fr/web/api/performance/measure/index.html deleted file mode 100644 index 74ab333134..0000000000 --- a/files/fr/web/api/performance/measure/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: performance.measure() -slug: Web/API/Performance/measure -tags: -- API -- Method -- Méthode -- Reference -- Performance web -- Web Workers -translation_of: Web/API/Performance/measure ---- -
{{APIRef("User Timing API")}}
- -

La méthode measure() crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} nommé dans le tampon d'entrée de performance du navigateur entre deux marqueurs, l'heure de début de navigation ou l'heure actuelle. Lors d'une mesure entre deux marqueurs, on aura un marqueur de début et un marqueur de fin. L'horodatage ainsi nommé est désigné comme une mesure.

- -

La mesure correspondante peut être récupérée par l'une des méthodes suivantes de l'interface {{domxref("Performance")}} : {{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}.

- -

L'{{domxref("PerformanceEntry", "entrée de performance","",1)}} créée par measure() aura les valeurs de propriété suivantes :

- - - -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  performance.measure(name);
-  performance.measure(name, startMark);
-  performance.measure(name, startMark, endMark);
-  performance.measure(name, undefined, endMark);
-
- -

Arguments

- -
-
name
-
Une {{domxref("DOMString")}} représentant le nom de la mesure.
-
startMark {{optional_inline}}
-
Une {{domxref("DOMString")}} représentant le nom du marqueur de départ de la mesure. Peut également être le nom d'une propriété {{domxref("PerformanceTiming")}}. Si elle est omise, l'heure de début sera celle de la navigation.
-
endMark {{optional_inline}}
-
Une {{domxref("DOMString")}} représentant le nom du marqueur de fin de la mesure. Peut également être le nom d'une propriété {{domxref("PerformanceTiming")}}. Si elle est omise, le temps actuel est utilisé.
-
- -

Valeur de retour

- -

Aucune

- -

Exemple

- -

L'exemple suivant montre comment measure() est utilisé pour créer une nouvelle mesure d'{{domxref("PerformanceEntry", "entrée de performance","",1)}} dans le tampon d'entrée de performance du navigateur.

- -
const markerNameA = "example-marker-a"
-const markerNameB = "example-marker-b"
-
-// Exécute des temporisations imbriquées et crée un PerformanceMark pour chacune d'entre elles.
-performance.mark(markerNameA);
-setTimeout(function() {
-  performance.mark(markerNameB);
-  setTimeout(function() {
-
-    // Crée une variété de mesures.
-    performance.measure("mesure a à b", markerNameA, markerNameB);
-    performance.measure("mesure a à maintenant", markerNameA);
-    performance.measure("mesure du début de la navigation à b", undefined, markerNameB);
-    performance.measure("mesure du début de la navigation à maintenant");
-
-    // Sort toutes les mesures.
-    console.log(performance.getEntriesByType("measure"));
-
-    // Enfin, nettoye les entrées.
-    performance.clearMarks();
-    performance.clearMeasures();
-  }, 1000);
-}, 1000);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#dom-performance-measure', 'measure()')}} - {{Spec2('User Timing Level 2')}}Clarification du modèle de traitement de mesure().
{{SpecName('User Timing', '#dom-performance-measure', 'measure()')}}{{Spec2('User Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.measure")}}

diff --git a/files/fr/web/api/performance/measure/index.md b/files/fr/web/api/performance/measure/index.md new file mode 100644 index 0000000000..74ab333134 --- /dev/null +++ b/files/fr/web/api/performance/measure/index.md @@ -0,0 +1,110 @@ +--- +title: performance.measure() +slug: Web/API/Performance/measure +tags: +- API +- Method +- Méthode +- Reference +- Performance web +- Web Workers +translation_of: Web/API/Performance/measure +--- +
{{APIRef("User Timing API")}}
+ +

La méthode measure() crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} nommé dans le tampon d'entrée de performance du navigateur entre deux marqueurs, l'heure de début de navigation ou l'heure actuelle. Lors d'une mesure entre deux marqueurs, on aura un marqueur de début et un marqueur de fin. L'horodatage ainsi nommé est désigné comme une mesure.

+ +

La mesure correspondante peut être récupérée par l'une des méthodes suivantes de l'interface {{domxref("Performance")}} : {{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}.

+ +

L'{{domxref("PerformanceEntry", "entrée de performance","",1)}} créée par measure() aura les valeurs de propriété suivantes :

+ + + +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  performance.measure(name);
+  performance.measure(name, startMark);
+  performance.measure(name, startMark, endMark);
+  performance.measure(name, undefined, endMark);
+
+ +

Arguments

+ +
+
name
+
Une {{domxref("DOMString")}} représentant le nom de la mesure.
+
startMark {{optional_inline}}
+
Une {{domxref("DOMString")}} représentant le nom du marqueur de départ de la mesure. Peut également être le nom d'une propriété {{domxref("PerformanceTiming")}}. Si elle est omise, l'heure de début sera celle de la navigation.
+
endMark {{optional_inline}}
+
Une {{domxref("DOMString")}} représentant le nom du marqueur de fin de la mesure. Peut également être le nom d'une propriété {{domxref("PerformanceTiming")}}. Si elle est omise, le temps actuel est utilisé.
+
+ +

Valeur de retour

+ +

Aucune

+ +

Exemple

+ +

L'exemple suivant montre comment measure() est utilisé pour créer une nouvelle mesure d'{{domxref("PerformanceEntry", "entrée de performance","",1)}} dans le tampon d'entrée de performance du navigateur.

+ +
const markerNameA = "example-marker-a"
+const markerNameB = "example-marker-b"
+
+// Exécute des temporisations imbriquées et crée un PerformanceMark pour chacune d'entre elles.
+performance.mark(markerNameA);
+setTimeout(function() {
+  performance.mark(markerNameB);
+  setTimeout(function() {
+
+    // Crée une variété de mesures.
+    performance.measure("mesure a à b", markerNameA, markerNameB);
+    performance.measure("mesure a à maintenant", markerNameA);
+    performance.measure("mesure du début de la navigation à b", undefined, markerNameB);
+    performance.measure("mesure du début de la navigation à maintenant");
+
+    // Sort toutes les mesures.
+    console.log(performance.getEntriesByType("measure"));
+
+    // Enfin, nettoye les entrées.
+    performance.clearMarks();
+    performance.clearMeasures();
+  }, 1000);
+}, 1000);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#dom-performance-measure', 'measure()')}} + {{Spec2('User Timing Level 2')}}Clarification du modèle de traitement de mesure().
{{SpecName('User Timing', '#dom-performance-measure', 'measure()')}}{{Spec2('User Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.measure")}}

diff --git a/files/fr/web/api/performance/memory/index.html b/files/fr/web/api/performance/memory/index.html deleted file mode 100644 index a98b747b49..0000000000 --- a/files/fr/web/api/performance/memory/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: performance.memory -slug: Web/API/Performance/memory -tags: - - API - - Reference - - Performance web -translation_of: Web/API/Performance/memory ---- -

{{APIRef}}

- -{{Non-standardGeneric('header')}} - -

Syntaxe

- -
-  timingInfo = performance.memory
-
- -

Attributs

- -
-
jsHeapSizeLimit
-
La taille maximale du tas, en octets, qui est disponible pour le contexte.
-
totalJSHeapSize
-
La taille totale du répertoire alloué, en octets.
-
usedJSHeapSize
-
Le segment actuellement actif du répertoire JS, en octets.
-
- -

Spécifications

- -

Aucune

- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.memory")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performance/memory/index.md b/files/fr/web/api/performance/memory/index.md new file mode 100644 index 0000000000..a98b747b49 --- /dev/null +++ b/files/fr/web/api/performance/memory/index.md @@ -0,0 +1,43 @@ +--- +title: performance.memory +slug: Web/API/Performance/memory +tags: + - API + - Reference + - Performance web +translation_of: Web/API/Performance/memory +--- +

{{APIRef}}

+ +{{Non-standardGeneric('header')}} + +

Syntaxe

+ +
+  timingInfo = performance.memory
+
+ +

Attributs

+ +
+
jsHeapSizeLimit
+
La taille maximale du tas, en octets, qui est disponible pour le contexte.
+
totalJSHeapSize
+
La taille totale du répertoire alloué, en octets.
+
usedJSHeapSize
+
Le segment actuellement actif du répertoire JS, en octets.
+
+ +

Spécifications

+ +

Aucune

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.memory")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performance/navigation/index.html b/files/fr/web/api/performance/navigation/index.html deleted file mode 100644 index b3487091fd..0000000000 --- a/files/fr/web/api/performance/navigation/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: performance.navigation -slug: Web/API/Performance/navigation -tags: - - API - - Rétrocompatibilité - - Déprécié - - HTTP - - Performance - - Propriété - - Property - - Lecture seule - - Read-only - - Reference - - legacy -translation_of: Web/API/Performance/navigation ---- -

{{Deprecated_Header}}{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette propriété est dépréciée dans la spécification Navigation Timing Level 2 specification.

-
- -

L'ancienne propriété en lecture seule Performance.navigation renvoie un objet {{domxref("PerformanceNavigation")}} représentant le type de navigation qui se produit dans le contexte de navigation donné, comme le nombre de redirections nécessaires pour aller chercher la ressource.

- -{{warning("Cette propriété n'est pas disponible dans les Web Workers.")}} - -

Syntaxe

- -
-  navObject = performance.navigation;
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.navigation')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.navigation")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performance/navigation/index.md b/files/fr/web/api/performance/navigation/index.md new file mode 100644 index 0000000000..b3487091fd --- /dev/null +++ b/files/fr/web/api/performance/navigation/index.md @@ -0,0 +1,61 @@ +--- +title: performance.navigation +slug: Web/API/Performance/navigation +tags: + - API + - Rétrocompatibilité + - Déprécié + - HTTP + - Performance + - Propriété + - Property + - Lecture seule + - Read-only + - Reference + - legacy +translation_of: Web/API/Performance/navigation +--- +

{{Deprecated_Header}}{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette propriété est dépréciée dans la spécification Navigation Timing Level 2 specification.

+
+ +

L'ancienne propriété en lecture seule Performance.navigation renvoie un objet {{domxref("PerformanceNavigation")}} représentant le type de navigation qui se produit dans le contexte de navigation donné, comme le nombre de redirections nécessaires pour aller chercher la ressource.

+ +{{warning("Cette propriété n'est pas disponible dans les Web Workers.")}} + +

Syntaxe

+ +
+  navObject = performance.navigation;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.navigation')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.navigation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performance/now/index.html b/files/fr/web/api/performance/now/index.html deleted file mode 100644 index 0505c4a6cd..0000000000 --- a/files/fr/web/api/performance/now/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: performance.now() -slug: Web/API/Performance/now -tags: - - API - - API Performance Web - - Method - - Méthode - - Performance - - Reference -translation_of: Web/API/Performance/now ---- -

{{APIRef("High Resolution Timing")}}

- -

La méthode Performance.now() retourne une valeur de type {{domxref("DOMHighResTimeStamp")}}, mesurée en millisecondes et avec une précision de 5 millièmes de milliseconde (5 microsecondes).

- -

{{AvailableInWorkers}}

- -

La valeur retournée représente le temps écoulé depuis le temps d'origine.

- -

Attention à garder à l'esprit les points suivants :

- - - -

Il est important de garder à l'esprit que pour atténuer les menaces de sécurité potentielles telles que Spectre, les navigateurs arrondissent généralement la valeur retournée d'une certaine quantité afin d'être moins prévisible. Cela introduit intrinsèquement un degré d'imprécision en limitant la résolution ou la précision de la minuterie. Par exemple, Firefox arrondit le temps renvoyé à des incréments de 1 milliseconde.

- -

La précision de la valeur retournée est susceptible de changer si/quand les problèmes de sécurité sont atténués par d'autres moyens.

- -

Syntaxe

- -
-  t = performance.now();
-
- -

Exemple

- -
-  var t0 = performance.now();
-  doSomething();
-  var t1 = performance.now();
-  console.log("L'appel de doSomething a demandé " + (t1 - t0) + " millisecondes.")
-
- -

Contrairement aux autres données de temps disponibles en JavaScript (par exemple Date.now), les horodatages retournés par Performance.now() ne sont pas limités à une précision d'une milliseconde. Au contraire, ils représentent les temps comme des nombres flottants avec une précision pouvant aller jusqu'à une microseconde.

- -

Également contrairement à Date.now(), les valeurs retournées par Performance.now() sont toujours incrémentées à un taux constant, indépendant de l'horloge du système (qui peut être ajustée manuellement ou par l'intermédiaire d'un logiciel comme NTP). Sinon, performance.timing.navigationStart + performance.now() serait approximativement égal à Date.now().

- -

Précision réduite du temps

- -

Pour offrir une protection contre les attaques de temporisation et les empreintes digitales, la précision de performance.now() peut être arrondie en fonction des paramètres du navigateur. Dans Firefox, la préférence privacy.reduceTimerPrecision est activée par défaut et prend la valeur 1ms par défaut.

- -
// précision temporelle réduite (1ms) dans Firefox 60
-performance.now();
-// 8781416
-// 8781815
-// 8782206
-// ...
-
-// précision du temps réduite avec `privacy.resistFingerprinting` activé
-performance.now();
-// 8865400
-// 8866200
-// 8866700
-// ...
-
- -

Dans Firefox, vous pouvez également activer privacy.resistFingerprinting - cela change la précision à 100ms ou à la valeur de privacy.resistFingerprinting.reduceTimerPrecision.microseconds en fonction de la plus grande des deux.

- -

À partir de Firefox 79, les minuteurs haute résolution peuvent être utilisés si vous isolez votre document en utilisant les en-têtes {{HTTPHeader("Cross-Origin-Opener-Policy")}} et {{HTTPHeader("Cross-Origin-Embedder-Policy")}} :

- -
Cross-Origin-Opener-Policy: same-origin
-Cross-Origin-Embedder-Policy: require-corp
- -

Ces en-têtes garantissent qu'un document de premier niveau ne partage pas un groupe de contexte de navigation avec des documents d'origine croisée. Le processus COOP isole votre document et les attaquants potentiels ne peuvent pas accéder à votre objet global s'ils l'ouvrent dans une fenêtre contextuelle, ce qui permet d'éviter un ensemble d'attaques d'origine croisée appelées XS-Leaks.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time Level 2')}}Définitions plus strictes des interfaces et des types.
{{SpecName('Highres Time', '#dom-performance-now', 'Performance.now()')}}{{Spec2('Highres Time')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.now")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performance/now/index.md b/files/fr/web/api/performance/now/index.md new file mode 100644 index 0000000000..0505c4a6cd --- /dev/null +++ b/files/fr/web/api/performance/now/index.md @@ -0,0 +1,111 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - API Performance Web + - Method + - Méthode + - Performance + - Reference +translation_of: Web/API/Performance/now +--- +

{{APIRef("High Resolution Timing")}}

+ +

La méthode Performance.now() retourne une valeur de type {{domxref("DOMHighResTimeStamp")}}, mesurée en millisecondes et avec une précision de 5 millièmes de milliseconde (5 microsecondes).

+ +

{{AvailableInWorkers}}

+ +

La valeur retournée représente le temps écoulé depuis le temps d'origine.

+ +

Attention à garder à l'esprit les points suivants :

+ + + +

Il est important de garder à l'esprit que pour atténuer les menaces de sécurité potentielles telles que Spectre, les navigateurs arrondissent généralement la valeur retournée d'une certaine quantité afin d'être moins prévisible. Cela introduit intrinsèquement un degré d'imprécision en limitant la résolution ou la précision de la minuterie. Par exemple, Firefox arrondit le temps renvoyé à des incréments de 1 milliseconde.

+ +

La précision de la valeur retournée est susceptible de changer si/quand les problèmes de sécurité sont atténués par d'autres moyens.

+ +

Syntaxe

+ +
+  t = performance.now();
+
+ +

Exemple

+ +
+  var t0 = performance.now();
+  doSomething();
+  var t1 = performance.now();
+  console.log("L'appel de doSomething a demandé " + (t1 - t0) + " millisecondes.")
+
+ +

Contrairement aux autres données de temps disponibles en JavaScript (par exemple Date.now), les horodatages retournés par Performance.now() ne sont pas limités à une précision d'une milliseconde. Au contraire, ils représentent les temps comme des nombres flottants avec une précision pouvant aller jusqu'à une microseconde.

+ +

Également contrairement à Date.now(), les valeurs retournées par Performance.now() sont toujours incrémentées à un taux constant, indépendant de l'horloge du système (qui peut être ajustée manuellement ou par l'intermédiaire d'un logiciel comme NTP). Sinon, performance.timing.navigationStart + performance.now() serait approximativement égal à Date.now().

+ +

Précision réduite du temps

+ +

Pour offrir une protection contre les attaques de temporisation et les empreintes digitales, la précision de performance.now() peut être arrondie en fonction des paramètres du navigateur. Dans Firefox, la préférence privacy.reduceTimerPrecision est activée par défaut et prend la valeur 1ms par défaut.

+ +
// précision temporelle réduite (1ms) dans Firefox 60
+performance.now();
+// 8781416
+// 8781815
+// 8782206
+// ...
+
+// précision du temps réduite avec `privacy.resistFingerprinting` activé
+performance.now();
+// 8865400
+// 8866200
+// 8866700
+// ...
+
+ +

Dans Firefox, vous pouvez également activer privacy.resistFingerprinting - cela change la précision à 100ms ou à la valeur de privacy.resistFingerprinting.reduceTimerPrecision.microseconds en fonction de la plus grande des deux.

+ +

À partir de Firefox 79, les minuteurs haute résolution peuvent être utilisés si vous isolez votre document en utilisant les en-têtes {{HTTPHeader("Cross-Origin-Opener-Policy")}} et {{HTTPHeader("Cross-Origin-Embedder-Policy")}} :

+ +
Cross-Origin-Opener-Policy: same-origin
+Cross-Origin-Embedder-Policy: require-corp
+ +

Ces en-têtes garantissent qu'un document de premier niveau ne partage pas un groupe de contexte de navigation avec des documents d'origine croisée. Le processus COOP isole votre document et les attaquants potentiels ne peuvent pas accéder à votre objet global s'ils l'ouvrent dans une fenêtre contextuelle, ce qui permet d'éviter un ensemble d'attaques d'origine croisée appelées XS-Leaks.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time Level 2')}}Définitions plus strictes des interfaces et des types.
{{SpecName('Highres Time', '#dom-performance-now', 'Performance.now()')}}{{Spec2('Highres Time')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.now")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performance/onresourcetimingbufferfull/index.html b/files/fr/web/api/performance/onresourcetimingbufferfull/index.html deleted file mode 100644 index c45a75f39a..0000000000 --- a/files/fr/web/api/performance/onresourcetimingbufferfull/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: performance.onresourcetimingbufferfull -slug: Web/API/Performance/onresourcetimingbufferfull -tags: -- API -- Method -- Méthode -- Reference -- Performance web -translation_of: Web/API/Performance/onresourcetimingbufferfull ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété onresourcetimingbufferfull est un gestionnaire d'événements qui sera appelé lorsque l'événement resourcetimingbufferfull est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  callback = performance.onresourcetimingbufferfull = buffer_full_cb;
-
- -

Valeur de retour

- -
-
callback
-
Un {{event("Event_handlers", "event handler")}} qui est invoqué lorsque l'événement resourcetimingbufferfull est déclenché.
-
- -

Exemple

- -

L'exemple suivant définit une fonction de rappel sur la propriété onresourcetimingbufferfull.

- -
function buffer_full(event) {
-  console.log("WARNING: Resource Timing Buffer is FULL!");
-  performance.setResourceTimingBufferSize(200);
-}
-function init() {
-  // Définit un rappel si le tampon de ressources est rempli.
-  performance.onresourcetimingbufferfull = buffer_full;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', - 'onresourcetimingbufferfull')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.onresourcetimingbufferfull")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performance/onresourcetimingbufferfull/index.md b/files/fr/web/api/performance/onresourcetimingbufferfull/index.md new file mode 100644 index 0000000000..c45a75f39a --- /dev/null +++ b/files/fr/web/api/performance/onresourcetimingbufferfull/index.md @@ -0,0 +1,78 @@ +--- +title: performance.onresourcetimingbufferfull +slug: Web/API/Performance/onresourcetimingbufferfull +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/onresourcetimingbufferfull +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété onresourcetimingbufferfull est un gestionnaire d'événements qui sera appelé lorsque l'événement resourcetimingbufferfull est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  callback = performance.onresourcetimingbufferfull = buffer_full_cb;
+
+ +

Valeur de retour

+ +
+
callback
+
Un {{event("Event_handlers", "event handler")}} qui est invoqué lorsque l'événement resourcetimingbufferfull est déclenché.
+
+ +

Exemple

+ +

L'exemple suivant définit une fonction de rappel sur la propriété onresourcetimingbufferfull.

+ +
function buffer_full(event) {
+  console.log("WARNING: Resource Timing Buffer is FULL!");
+  performance.setResourceTimingBufferSize(200);
+}
+function init() {
+  // Définit un rappel si le tampon de ressources est rempli.
+  performance.onresourcetimingbufferfull = buffer_full;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', + 'onresourcetimingbufferfull')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.onresourcetimingbufferfull")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html deleted file mode 100644 index d23ab10aaf..0000000000 --- a/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: 'Performance : Événement resourcetimingbufferfull' -slug: Web/API/Performance/resourcetimingbufferfull_event -tags: - - API - - DOM - - Event - - Performance - - Reference - - Performance web - - onresourcetimingbufferfull -translation_of: Web/API/Performance/resourcetimingbufferfull_event ---- -
{{APIRef}}
- -

L'événement resourcetimingbufferfull se déclenche lorsque la mémoire tampon de synchronisation des ressources du navigateur est pleine.

- - - - - - - - - - - - - - - - - - - - -
PropagationOui
AnnulableOui
Interface{{domxref("Event")}}
Propriété pour le gestionnaire d'événements correspondant{{domxref("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}
- -

Exemples

- -

L'exemple suivant définit une fonction de rappel sur la propriété onresourcetimingbufferfull.

- -
function buffer_full(event) {
-  console.log("AVERTISSEMENT : La mémoire tampon des ressources est COMPLÈTE !");
-  performance.setResourceTimingBufferSize(200);
-}
-function init() {
-  // Définit un rappel si le tampon de ressources est rempli.
-  performance.onresourcetimingbufferfull = buffer_full;
-}
-<body onload="init()">
- -

Notez que vous pouvez également configurer le gestionnaire à l'aide de la fonction addEventListener() :

- -
performance.addEventListener('resourcetimingbufferfull', buffer_full);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', 'onresourcetimingbufferfull')}}{{Spec2('Resource Timing')}}Définition initialen.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.resourcetimingbufferfull_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performance/resourcetimingbufferfull_event/index.md b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.md new file mode 100644 index 0000000000..d23ab10aaf --- /dev/null +++ b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.md @@ -0,0 +1,86 @@ +--- +title: 'Performance : Événement resourcetimingbufferfull' +slug: Web/API/Performance/resourcetimingbufferfull_event +tags: + - API + - DOM + - Event + - Performance + - Reference + - Performance web + - onresourcetimingbufferfull +translation_of: Web/API/Performance/resourcetimingbufferfull_event +--- +
{{APIRef}}
+ +

L'événement resourcetimingbufferfull se déclenche lorsque la mémoire tampon de synchronisation des ressources du navigateur est pleine.

+ + + + + + + + + + + + + + + + + + + + +
PropagationOui
AnnulableOui
Interface{{domxref("Event")}}
Propriété pour le gestionnaire d'événements correspondant{{domxref("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}
+ +

Exemples

+ +

L'exemple suivant définit une fonction de rappel sur la propriété onresourcetimingbufferfull.

+ +
function buffer_full(event) {
+  console.log("AVERTISSEMENT : La mémoire tampon des ressources est COMPLÈTE !");
+  performance.setResourceTimingBufferSize(200);
+}
+function init() {
+  // Définit un rappel si le tampon de ressources est rempli.
+  performance.onresourcetimingbufferfull = buffer_full;
+}
+<body onload="init()">
+ +

Notez que vous pouvez également configurer le gestionnaire à l'aide de la fonction addEventListener() :

+ +
performance.addEventListener('resourcetimingbufferfull', buffer_full);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', 'onresourcetimingbufferfull')}}{{Spec2('Resource Timing')}}Définition initialen.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.resourcetimingbufferfull_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performance/setresourcetimingbuffersize/index.html b/files/fr/web/api/performance/setresourcetimingbuffersize/index.html deleted file mode 100644 index ba6d23eebe..0000000000 --- a/files/fr/web/api/performance/setresourcetimingbuffersize/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: performance.setResourceTimingBufferSize() -slug: Web/API/Performance/setResourceTimingBufferSize -tags: -- API -- Method -- Méthode -- Reference -- Performance web -translation_of: Web/API/Performance/setResourceTimingBufferSize ---- -
{{APIRef("Resource Timing API")}}
- -

La méthode setResourceTimingBufferSize() définit la taille du tampon mémoire du navigateur dans lequel sont stockés les objets de mesures de performance de type "resource" (voir {{domxref("PerformanceEntry.entryType", "entryType")}}).

- -

La taille recommandée du tampon de synchronisation des ressources d'un navigateur est au moins 150 objets {{domxref("PerformanceEntry")}}.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  performance.setResourceTimingBufferSize(maxSize);
-
- -

Arguments

- -
-
maxSize
-
Un nombre (cf. {{jsxref("Number")}}) représentant le nombre maximal d'objets {{domxref("PerformanceEntry", "d'entrée de performance","",1)}} avec le type "resource" que le navigateur doit contenir dans le tampon correspondant.
-
- -

Valeur de retour

- -

Aucune.

- -

Exemple

- -
function setResourceTimingBufferSize(maxSize) {
-  if (performance === undefined) {
-    log("Le navigateur ne prend pas en charge les performances Web");
-    return;
-  }
-  var supported = typeof performance.setResourceTimingBufferSize == "function";
-  if (supported) {
-    log("... Performance.setResourceTimingBufferSize() = Oui");
-    performance.setResourceTimingBufferSize(maxSize);
-  } else {
-    log("... Performance.setResourceTimingBufferSize() = NON pris en charge");
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performance-setresourcetimingbuffersize', - 'setResourceTimingBufferSize()')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.setResourceTimingBufferSize")}}

diff --git a/files/fr/web/api/performance/setresourcetimingbuffersize/index.md b/files/fr/web/api/performance/setresourcetimingbuffersize/index.md new file mode 100644 index 0000000000..ba6d23eebe --- /dev/null +++ b/files/fr/web/api/performance/setresourcetimingbuffersize/index.md @@ -0,0 +1,76 @@ +--- +title: performance.setResourceTimingBufferSize() +slug: Web/API/Performance/setResourceTimingBufferSize +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/setResourceTimingBufferSize +--- +
{{APIRef("Resource Timing API")}}
+ +

La méthode setResourceTimingBufferSize() définit la taille du tampon mémoire du navigateur dans lequel sont stockés les objets de mesures de performance de type "resource" (voir {{domxref("PerformanceEntry.entryType", "entryType")}}).

+ +

La taille recommandée du tampon de synchronisation des ressources d'un navigateur est au moins 150 objets {{domxref("PerformanceEntry")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  performance.setResourceTimingBufferSize(maxSize);
+
+ +

Arguments

+ +
+
maxSize
+
Un nombre (cf. {{jsxref("Number")}}) représentant le nombre maximal d'objets {{domxref("PerformanceEntry", "d'entrée de performance","",1)}} avec le type "resource" que le navigateur doit contenir dans le tampon correspondant.
+
+ +

Valeur de retour

+ +

Aucune.

+ +

Exemple

+ +
function setResourceTimingBufferSize(maxSize) {
+  if (performance === undefined) {
+    log("Le navigateur ne prend pas en charge les performances Web");
+    return;
+  }
+  var supported = typeof performance.setResourceTimingBufferSize == "function";
+  if (supported) {
+    log("... Performance.setResourceTimingBufferSize() = Oui");
+    performance.setResourceTimingBufferSize(maxSize);
+  } else {
+    log("... Performance.setResourceTimingBufferSize() = NON pris en charge");
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performance-setresourcetimingbuffersize', + 'setResourceTimingBufferSize()')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.setResourceTimingBufferSize")}}

diff --git a/files/fr/web/api/performance/timeorigin/index.html b/files/fr/web/api/performance/timeorigin/index.html deleted file mode 100644 index 014045da71..0000000000 --- a/files/fr/web/api/performance/timeorigin/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: performance.timeOrigin -slug: Web/API/Performance/timeOrigin -tags: - - API - - Experimental - - High Resolution Time API - - Performance - - Property - - Propriété - - Reference - - timeOrigin -translation_of: Web/API/Performance/getEntriesByName ---- -

{{SeeCompatTable}}{{APIRef("High Resolution Time")}}

- -

La propriété en lecture seule timeOrigin de l'interface {{domxref("Performance")}} renvoie l'horodatage haute résolution de l'heure de début de la mesure de performance.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  var timeOrigin = performance.timeOrigin
-
- -

Valeur

- -

Un horodatage haute résolution (voir le type DOMHighResTimeStamp).

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('Highres Time Level 2','#timeorigin-attribute','timeOrigin')}}{{Spec2('Highres Time Level 2')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.timeOrigin")}}

diff --git a/files/fr/web/api/performance/timeorigin/index.md b/files/fr/web/api/performance/timeorigin/index.md new file mode 100644 index 0000000000..014045da71 --- /dev/null +++ b/files/fr/web/api/performance/timeorigin/index.md @@ -0,0 +1,50 @@ +--- +title: performance.timeOrigin +slug: Web/API/Performance/timeOrigin +tags: + - API + - Experimental + - High Resolution Time API + - Performance + - Property + - Propriété + - Reference + - timeOrigin +translation_of: Web/API/Performance/getEntriesByName +--- +

{{SeeCompatTable}}{{APIRef("High Resolution Time")}}

+ +

La propriété en lecture seule timeOrigin de l'interface {{domxref("Performance")}} renvoie l'horodatage haute résolution de l'heure de début de la mesure de performance.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  var timeOrigin = performance.timeOrigin
+
+ +

Valeur

+ +

Un horodatage haute résolution (voir le type DOMHighResTimeStamp).

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('Highres Time Level 2','#timeorigin-attribute','timeOrigin')}}{{Spec2('Highres Time Level 2')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.timeOrigin")}}

diff --git a/files/fr/web/api/performance/timing/index.html b/files/fr/web/api/performance/timing/index.html deleted file mode 100644 index 583aecd811..0000000000 --- a/files/fr/web/api/performance/timing/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: performance.timing -slug: Web/API/Performance/timing -tags: - - API - - Rétrocompatibilité - - Déprécié - - Navigation Timing - - Performance - - Property - - Propriété - - Read-only - - Lecture seule - - Reference -translation_of: Web/API/Performance/timing ---- -

{{deprecated_header}}{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette propriété est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface {{domxref("PerformanceNavigationTiming")}} à la place.

-
- -

L'ancienne propriété Performance.timing renvoie un objet {{domxref("PerformanceTiming")}} en lecture seule contenant des informations de performance liées à la latence.

- -{{warning("Cette propriété n'est pas disponible dans les Web Workers.")}} - -

Syntaxe

- -
-  timingInfo = performance.timing;
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', '#obsolete')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.timing")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performance/timing/index.md b/files/fr/web/api/performance/timing/index.md new file mode 100644 index 0000000000..583aecd811 --- /dev/null +++ b/files/fr/web/api/performance/timing/index.md @@ -0,0 +1,60 @@ +--- +title: performance.timing +slug: Web/API/Performance/timing +tags: + - API + - Rétrocompatibilité + - Déprécié + - Navigation Timing + - Performance + - Property + - Propriété + - Read-only + - Lecture seule + - Reference +translation_of: Web/API/Performance/timing +--- +

{{deprecated_header}}{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette propriété est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface {{domxref("PerformanceNavigationTiming")}} à la place.

+
+ +

L'ancienne propriété Performance.timing renvoie un objet {{domxref("PerformanceTiming")}} en lecture seule contenant des informations de performance liées à la latence.

+ +{{warning("Cette propriété n'est pas disponible dans les Web Workers.")}} + +

Syntaxe

+ +
+  timingInfo = performance.timing;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', '#obsolete')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.timing")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performance/tojson/index.html b/files/fr/web/api/performance/tojson/index.html deleted file mode 100644 index 3136d2d867..0000000000 --- a/files/fr/web/api/performance/tojson/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: performance.toJSON() -slug: Web/API/Performance/toJSON -tags: - - API - - Method - - Méthode - - Performance Web - - Référence -translation_of: Web/API/Performance/toJSON ---- -
{{APIRef("High Resolution Timing")}}
- -

La méthode toJSON() de l'interface {{domxref("Performance")}} est un sérialiseur standard : elle renvoie une représentation JSON des propriétés de l'objet performance.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
-  myPerf = performance.toJSON()
-
- -

Arguments

- -

Aucun

- -

Valeur de retour

- -
-
myPerf
-
Un objet JSON qui est la sérialisation de l'objet {{domxref("Performance")}}.
-
- -

Exemple

- -
var js;
-js = window.performance.toJSON();
-console.log("json = " + JSON.stringify(js));
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Highres Time Level 2', '#dom-performance-tojson', 'toJSON() - serializer')}}{{Spec2('Highres Time Level 2')}}Définition de toJson().
- -

Compatibilité des navigateurs

- -

{{Compat("api.Performance.toJSON")}}

diff --git a/files/fr/web/api/performance/tojson/index.md b/files/fr/web/api/performance/tojson/index.md new file mode 100644 index 0000000000..3136d2d867 --- /dev/null +++ b/files/fr/web/api/performance/tojson/index.md @@ -0,0 +1,64 @@ +--- +title: performance.toJSON() +slug: Web/API/Performance/toJSON +tags: + - API + - Method + - Méthode + - Performance Web + - Référence +translation_of: Web/API/Performance/toJSON +--- +
{{APIRef("High Resolution Timing")}}
+ +

La méthode toJSON() de l'interface {{domxref("Performance")}} est un sérialiseur standard : elle renvoie une représentation JSON des propriétés de l'objet performance.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
+  myPerf = performance.toJSON()
+
+ +

Arguments

+ +

Aucun

+ +

Valeur de retour

+ +
+
myPerf
+
Un objet JSON qui est la sérialisation de l'objet {{domxref("Performance")}}.
+
+ +

Exemple

+ +
var js;
+js = window.performance.toJSON();
+console.log("json = " + JSON.stringify(js));
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Highres Time Level 2', '#dom-performance-tojson', 'toJSON() + serializer')}}{{Spec2('Highres Time Level 2')}}Définition de toJson().
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Performance.toJSON")}}

diff --git a/files/fr/web/api/performance_api/index.html b/files/fr/web/api/performance_api/index.html deleted file mode 100644 index 261219a03b..0000000000 --- a/files/fr/web/api/performance_api/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Performance API -slug: Web/API/Performance_API -tags: - - API - - Guide - - Aperçu - - Performance - - Performance Web -translation_of: Web/API/Performance_API ---- -
{{DefaultAPISidebar("High Resolution Time")}}
- -

La norme High Resolution Time définit l'interface Performance qui prend en charge les mesures de latence côté client au sein des applications. Les interfaces Performance sont considérées comme étant à haute résolution, car elles sont précises au millième de milliseconde (sous réserve de contraintes matérielles ou logicielles).

- -

Les interfaces prennent en charge un certain nombre de cas d'utilisation, notamment le calcul des taux de trame (potentiellement important dans les animations) et l'évaluation comparative (comme le temps de chargement d'une ressource).

- -

Comme l'horloge système d'une plateforme est sujette à divers décalages (comme les ajustements NTP), les interfaces prennent en charge une horloge monotone, c'est-à-dire une horloge toujours croissante. À ce titre, l'API Performance définit un type DOMHighResTimeStamp plutôt que d'utiliser l'interface {{jsxref("Date.now", "Date.now()")}}.

- -

DOMHighResTimeStamp

- -

Le type DOMHighResTimeStamp, comme son nom l'indique, représente un point temporel de haute résolution. Ce type est un double et est utilisé par les interfaces de performance. La valeur peut être un point discret dans le temps ou la différence de temps entre deux points discrets dans le temps.

- -

L'unité de DOMHighResTimeStamp est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison, par exemple, de contraintes matérielles ou logicielles), le navigateur peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.

- -

Méthodes

- -

L'interface Performance possède deux méthodes. La méthode now() renvoie un DOMHighResTimeStamp dont la valeur dépend de navigationStart et du contexte. Si le contexte est une fenêtre, la valeur est l'heure de création du contexte du navigateur et si le contexte est un Worker, la valeur est l'heure de création du worker.

- -

La méthode toJSON() renvoie une sérialisation de l'objet Performance, pour les attributs qui peuvent être sérialisés.

- -

Propriétés

- -

L'interface Performance possède deux propriétés. La propriété timing {{deprecated_inline}} renvoie un objet PerformanceTiming contenant des informations de performance liées à la latence, telles que l'heure de début de navigation, les heures de début et de fin des redirections, les heures de début et de fin des réponses, etc.

- -

La propriété navigation {{deprecated_inline}} renvoie un objet PerformanceNavigation représentant le type de navigation qui se produit dans le contexte de navigation donné, comme la page vers laquelle on a navigué depuis l'historique, la page vers laquelle on a navigué en suivant un lien, etc.

- -

Interfaces

- -
-
Performance
-
Fournit des méthodes et des propriétés contenant des informations sur les performances liées au temps pour la page donnée.
-
PerformanceEntry
-
Fournit des méthodes et des propriétés pour encapsuler une seule mesure de performance qui fait partie de la chronologie des performances.
-
PerformanceFrameTiming
-
Fournit des méthodes et des propriétés contenant des données de synchronisation de trame sur la boucle d'événements du navigateur.
-
PerformanceMark
-
Une interface abstraite pour les entrées de performance avec un type d'entrée de « mark ». Les entrées de ce type sont créées en appelant performance.mark() pour ajouter un DOMHighResTimeStamp (un marqueur) à la chronologie des performances du navigateur.
-
PerformanceMeasure
-
Une interface abstraite pour les entrées de performance avec un type d'entrée de « measure ». Les entrées de ce type sont créées en appelant performance.measure() pour ajouter un DOMHighResTimeStamp (une mesure) entre deux marqueurs à la chronologie des performances du navigateur.
-
PerformanceNavigationTiming
-
Fournit des méthodes et des propriétés pour stocker et récupérer les horodatages haute résolution ou des métriques concernant les événements de navigation de document du navigateur.
-
PerformanceObserver
-
Fournit des méthodes et des propriétés utilisées pour observer les événements de mesure des performances et être informé des nouvelles entrées de performance lorsqu'elles sont enregistrées dans la chronologie des performances du navigateur.
-
PerformanceResourceTiming
-
Fournit des méthodes et des propriétés permettant de récupérer et d'analyser des données détaillées de synchronisation du réseau concernant le chargement des ressources d'une application.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Highres Time')}}{{Spec2('Highres Time')}}Définition initiale.
{{SpecName('Highres Time Level 2')}}{{Spec2('Highres Time Level 2')}}Ajout de l'attribut performance sur Window et WorkerGlobalScope.
{{SpecName('Highres Time Level 3')}}{{Spec2('Highres Time Level 3')}}Ajout de la propriété timeOrigin à l'interface Performance.
{{SpecName('Frame Timing')}}{{Spec2('Frame Timing')}}Ajout de l'interface PerformanceFrameTiming.
{{SpecName('Navigation Timing')}}{{Spec2('Navigation Timing')}}Ajout des interfaces PerformanceTiming et PerformanceNavigation. Ajout des propriétés timing et navigation à l'interface Performance.
{{SpecName('Navigation Timing Level 2')}}{{Spec2('Navigation Timing Level 2')}}Ajout de l'interface PerformanceNavigationTiming. Rend obsolète l'interface PerformanceTiming, l'interface PerformanceNavigation, ainsi que les propriétés timing et navigation à l'interface Performance.
{{SpecName('Performance Timeline')}}{{Spec2('Performance Timeline')}}Ajout de l'interface PerformanceEntry, du type PerformanceEntryList, ainsi que les méthodes getEntries(), getEntriesByType(), et getEntriesByName() sur l'interface Performance.
{{SpecName('Performance Timeline Level 2')}}{{Spec2('Performance Timeline Level 2')}}Ajout d'un sérialiseur à l'interface PerformanceEntry ainsi que l'ajout de l'interface PerformanceObserver et du rappel (« callback »).
{{SpecName('Resource Timing')}}{{Spec2('Resource Timing')}}Ajout de l'interface PerformanceResourceTiming. Ajout de la méthode clearResourceTiming(), la méthode setResourceTimingBufferSize() et du gestionnaire d'événements onresourcetimingbufferfull à l'interface Performance. Ajout de l'en-tête de réponse Timing-Allow-Origin.
{{SpecName('Resource Timing 2')}}{{Spec2('Resource Timing 2')}}Ajout des propriétés nextHopProtocol, workerStart, transferSize, encodedBodySize et decodedBodySize à l'interface PerformanceResourceTiming.
{{SpecName('Resource Timing 3')}}{{Spec2('Resource Timing 3')}}
{{SpecName('User Timing')}}{{Spec2('User Timing')}}Ajout des méthodes mark(), clearMarks(), measure() et clearMeasures() à l'interface Performance. Ajout des interfaces PerformanceMark et PeformanceMeasure.
{{SpecName('User Timing Level 2')}}{{Spec2('User Timing Level 2')}}
- -

État de l'implémentation'

- -

Comme le montre le tableau Compatibilité des navigateurs de l'interface Performance, la plupart de ces interfaces sont largement implémentées par les navigateurs de bureau.

- -

Pour tester le support de votre navigateur pour l'interface Performance, exécutez l'application perf-api-support.

- -

Voir aussi

- - diff --git a/files/fr/web/api/performance_api/index.md b/files/fr/web/api/performance_api/index.md new file mode 100644 index 0000000000..261219a03b --- /dev/null +++ b/files/fr/web/api/performance_api/index.md @@ -0,0 +1,149 @@ +--- +title: Performance API +slug: Web/API/Performance_API +tags: + - API + - Guide + - Aperçu + - Performance + - Performance Web +translation_of: Web/API/Performance_API +--- +
{{DefaultAPISidebar("High Resolution Time")}}
+ +

La norme High Resolution Time définit l'interface Performance qui prend en charge les mesures de latence côté client au sein des applications. Les interfaces Performance sont considérées comme étant à haute résolution, car elles sont précises au millième de milliseconde (sous réserve de contraintes matérielles ou logicielles).

+ +

Les interfaces prennent en charge un certain nombre de cas d'utilisation, notamment le calcul des taux de trame (potentiellement important dans les animations) et l'évaluation comparative (comme le temps de chargement d'une ressource).

+ +

Comme l'horloge système d'une plateforme est sujette à divers décalages (comme les ajustements NTP), les interfaces prennent en charge une horloge monotone, c'est-à-dire une horloge toujours croissante. À ce titre, l'API Performance définit un type DOMHighResTimeStamp plutôt que d'utiliser l'interface {{jsxref("Date.now", "Date.now()")}}.

+ +

DOMHighResTimeStamp

+ +

Le type DOMHighResTimeStamp, comme son nom l'indique, représente un point temporel de haute résolution. Ce type est un double et est utilisé par les interfaces de performance. La valeur peut être un point discret dans le temps ou la différence de temps entre deux points discrets dans le temps.

+ +

L'unité de DOMHighResTimeStamp est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison, par exemple, de contraintes matérielles ou logicielles), le navigateur peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.

+ +

Méthodes

+ +

L'interface Performance possède deux méthodes. La méthode now() renvoie un DOMHighResTimeStamp dont la valeur dépend de navigationStart et du contexte. Si le contexte est une fenêtre, la valeur est l'heure de création du contexte du navigateur et si le contexte est un Worker, la valeur est l'heure de création du worker.

+ +

La méthode toJSON() renvoie une sérialisation de l'objet Performance, pour les attributs qui peuvent être sérialisés.

+ +

Propriétés

+ +

L'interface Performance possède deux propriétés. La propriété timing {{deprecated_inline}} renvoie un objet PerformanceTiming contenant des informations de performance liées à la latence, telles que l'heure de début de navigation, les heures de début et de fin des redirections, les heures de début et de fin des réponses, etc.

+ +

La propriété navigation {{deprecated_inline}} renvoie un objet PerformanceNavigation représentant le type de navigation qui se produit dans le contexte de navigation donné, comme la page vers laquelle on a navigué depuis l'historique, la page vers laquelle on a navigué en suivant un lien, etc.

+ +

Interfaces

+ +
+
Performance
+
Fournit des méthodes et des propriétés contenant des informations sur les performances liées au temps pour la page donnée.
+
PerformanceEntry
+
Fournit des méthodes et des propriétés pour encapsuler une seule mesure de performance qui fait partie de la chronologie des performances.
+
PerformanceFrameTiming
+
Fournit des méthodes et des propriétés contenant des données de synchronisation de trame sur la boucle d'événements du navigateur.
+
PerformanceMark
+
Une interface abstraite pour les entrées de performance avec un type d'entrée de « mark ». Les entrées de ce type sont créées en appelant performance.mark() pour ajouter un DOMHighResTimeStamp (un marqueur) à la chronologie des performances du navigateur.
+
PerformanceMeasure
+
Une interface abstraite pour les entrées de performance avec un type d'entrée de « measure ». Les entrées de ce type sont créées en appelant performance.measure() pour ajouter un DOMHighResTimeStamp (une mesure) entre deux marqueurs à la chronologie des performances du navigateur.
+
PerformanceNavigationTiming
+
Fournit des méthodes et des propriétés pour stocker et récupérer les horodatages haute résolution ou des métriques concernant les événements de navigation de document du navigateur.
+
PerformanceObserver
+
Fournit des méthodes et des propriétés utilisées pour observer les événements de mesure des performances et être informé des nouvelles entrées de performance lorsqu'elles sont enregistrées dans la chronologie des performances du navigateur.
+
PerformanceResourceTiming
+
Fournit des méthodes et des propriétés permettant de récupérer et d'analyser des données détaillées de synchronisation du réseau concernant le chargement des ressources d'une application.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Highres Time')}}{{Spec2('Highres Time')}}Définition initiale.
{{SpecName('Highres Time Level 2')}}{{Spec2('Highres Time Level 2')}}Ajout de l'attribut performance sur Window et WorkerGlobalScope.
{{SpecName('Highres Time Level 3')}}{{Spec2('Highres Time Level 3')}}Ajout de la propriété timeOrigin à l'interface Performance.
{{SpecName('Frame Timing')}}{{Spec2('Frame Timing')}}Ajout de l'interface PerformanceFrameTiming.
{{SpecName('Navigation Timing')}}{{Spec2('Navigation Timing')}}Ajout des interfaces PerformanceTiming et PerformanceNavigation. Ajout des propriétés timing et navigation à l'interface Performance.
{{SpecName('Navigation Timing Level 2')}}{{Spec2('Navigation Timing Level 2')}}Ajout de l'interface PerformanceNavigationTiming. Rend obsolète l'interface PerformanceTiming, l'interface PerformanceNavigation, ainsi que les propriétés timing et navigation à l'interface Performance.
{{SpecName('Performance Timeline')}}{{Spec2('Performance Timeline')}}Ajout de l'interface PerformanceEntry, du type PerformanceEntryList, ainsi que les méthodes getEntries(), getEntriesByType(), et getEntriesByName() sur l'interface Performance.
{{SpecName('Performance Timeline Level 2')}}{{Spec2('Performance Timeline Level 2')}}Ajout d'un sérialiseur à l'interface PerformanceEntry ainsi que l'ajout de l'interface PerformanceObserver et du rappel (« callback »).
{{SpecName('Resource Timing')}}{{Spec2('Resource Timing')}}Ajout de l'interface PerformanceResourceTiming. Ajout de la méthode clearResourceTiming(), la méthode setResourceTimingBufferSize() et du gestionnaire d'événements onresourcetimingbufferfull à l'interface Performance. Ajout de l'en-tête de réponse Timing-Allow-Origin.
{{SpecName('Resource Timing 2')}}{{Spec2('Resource Timing 2')}}Ajout des propriétés nextHopProtocol, workerStart, transferSize, encodedBodySize et decodedBodySize à l'interface PerformanceResourceTiming.
{{SpecName('Resource Timing 3')}}{{Spec2('Resource Timing 3')}}
{{SpecName('User Timing')}}{{Spec2('User Timing')}}Ajout des méthodes mark(), clearMarks(), measure() et clearMeasures() à l'interface Performance. Ajout des interfaces PerformanceMark et PeformanceMeasure.
{{SpecName('User Timing Level 2')}}{{Spec2('User Timing Level 2')}}
+ +

État de l'implémentation'

+ +

Comme le montre le tableau Compatibilité des navigateurs de l'interface Performance, la plupart de ces interfaces sont largement implémentées par les navigateurs de bureau.

+ +

Pour tester le support de votre navigateur pour l'interface Performance, exécutez l'application perf-api-support.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performance_api/using_the_performance_api/index.html b/files/fr/web/api/performance_api/using_the_performance_api/index.html deleted file mode 100644 index 19924b66cc..0000000000 --- a/files/fr/web/api/performance_api/using_the_performance_api/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Utilisation de l'API Performance -slug: Web/API/Performance_API/Using_the_Performance_API -tags: - - API - - Guide - - Aperçu - - Performance - - Performance Web -translation_of: Web/API/Performance_API/Using_the_Performance_API ---- -
{{DefaultAPISidebar("High Resolution Time")}}
- -

Une exigence fondamentale de la performance web est une définition précise et cohérente du temps. Le type DOMHighResTimeStamp (un double) est utilisé par toutes les interfaces de performance pour contenir de telles valeurs de temps.

- -

En outre, il doit y avoir un moyen de créer une empreinte temporelle pour un point spécifique dans le temps ; ceci est fait avec la méthode now().

- -

Les interfaces de performance web sont définies dans un ensemble de normes. L'interface de base de ces normes est l'interface Performance et ses méthodes et propriétés sont étendues par différentes normes. Ce guide décrit comment utiliser les interfaces Performance qui sont définies dans la norme High-Resolution Time. D'autres guides sur les performances web (répertoriés dans la section Voir aussi) décrivent comment utiliser des méthodes et propriétés supplémentaires de l'interface Performance.

- -

Chronométrage de haute précision

- -

Le chronométrage de haute précision est obtenu en utilisant le type DOMHighResTimeStamp pour les valeurs de temps. L'unité est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison de contraintes matérielles ou logicielles, par exemple), il peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.

- -

L'exemple de code suivant montre l'utilisation de DOMHighResTimeStamp et de la méthode Performance.now(). La méthode now() renvoie un timestamp (de type DOMHighResTimeStamp) qui est un point discret dans le temps. En appelant cette méthode avant et après une tâche, il est possible de mesurer le temps nécessaire à l'exécution de la tâche.

- -
-function calculate_time() {
-  let startTime;
-  let endTime;
-
-  startTime = performance.now();
-  do_task();
-  endTime = performance.now();
-
-  return (endTime - startTime);
-}
-
- -

Sérialisation de l'objet Performance

- -

La sérialisation JSON de l'objet Performance est effectuée via la méthode toJSON(). Dans l'exemple suivant, la sérialisation JSON des objets Performance, Performance.timing {{deprecated_inline}} et Performance.navigation {{deprecated_inline}} est imprimée dans l'élément object.

- -
-function print_json() {
-  let json;
-  let o = document.getElementsByTagName("output")[0];
-
-  if (window.performance.toJSON === undefined) {
-    json = "window.performance.toJSON() n'est PAS pris en charge";
-    o.innerHTML += json + "<br>";
-  } else {
-    let s;
-    json = window.performance.toJSON();
-
-    // Imprimer l'objet de performance
-    s = JSON.stringify(json);
-    o.innerHTML = "<p>performance = " + s + "</p>";
-
-    // Imprimer les objets performance.timing et performance.navigation
-    let perf = JSON.parse(s);
-
-    let timing = perf.timing;
-    o.innerHTML += "<p>peformance.timing = " + JSON.stringify(timing) + "</p>";
-
-    let navigation = perf.navigation;
-    o.innerHTML += "<p>peformance.navigation = " + JSON.stringify(navigation) + "</p>";
-  }
-}
-
- -

Spécifications

- -

Les interfaces décrites dans ce document sont définies dans la norme High Resolution Time qui comporte deux niveaux :

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Highres Time Level 2')}}{{Spec2('Highres Time Level 2')}}Ajout de l'attribut performance sur Window et WorkerGlobalScope.
{{SpecName('Highres Time')}}{{Spec2('Highres Time')}}Définition initiale.
- -

Interopérabilité

- -

Comme le montre le tableau des Compatibilités des navigateurs de l'interface Performance, la plupart des interfaces Performance sont largement implémentées par les navigateurs de bureau.

- -

Voir aussi

- - diff --git a/files/fr/web/api/performance_api/using_the_performance_api/index.md b/files/fr/web/api/performance_api/using_the_performance_api/index.md new file mode 100644 index 0000000000..19924b66cc --- /dev/null +++ b/files/fr/web/api/performance_api/using_the_performance_api/index.md @@ -0,0 +1,109 @@ +--- +title: Utilisation de l'API Performance +slug: Web/API/Performance_API/Using_the_Performance_API +tags: + - API + - Guide + - Aperçu + - Performance + - Performance Web +translation_of: Web/API/Performance_API/Using_the_Performance_API +--- +
{{DefaultAPISidebar("High Resolution Time")}}
+ +

Une exigence fondamentale de la performance web est une définition précise et cohérente du temps. Le type DOMHighResTimeStamp (un double) est utilisé par toutes les interfaces de performance pour contenir de telles valeurs de temps.

+ +

En outre, il doit y avoir un moyen de créer une empreinte temporelle pour un point spécifique dans le temps ; ceci est fait avec la méthode now().

+ +

Les interfaces de performance web sont définies dans un ensemble de normes. L'interface de base de ces normes est l'interface Performance et ses méthodes et propriétés sont étendues par différentes normes. Ce guide décrit comment utiliser les interfaces Performance qui sont définies dans la norme High-Resolution Time. D'autres guides sur les performances web (répertoriés dans la section Voir aussi) décrivent comment utiliser des méthodes et propriétés supplémentaires de l'interface Performance.

+ +

Chronométrage de haute précision

+ +

Le chronométrage de haute précision est obtenu en utilisant le type DOMHighResTimeStamp pour les valeurs de temps. L'unité est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison de contraintes matérielles ou logicielles, par exemple), il peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.

+ +

L'exemple de code suivant montre l'utilisation de DOMHighResTimeStamp et de la méthode Performance.now(). La méthode now() renvoie un timestamp (de type DOMHighResTimeStamp) qui est un point discret dans le temps. En appelant cette méthode avant et après une tâche, il est possible de mesurer le temps nécessaire à l'exécution de la tâche.

+ +
+function calculate_time() {
+  let startTime;
+  let endTime;
+
+  startTime = performance.now();
+  do_task();
+  endTime = performance.now();
+
+  return (endTime - startTime);
+}
+
+ +

Sérialisation de l'objet Performance

+ +

La sérialisation JSON de l'objet Performance est effectuée via la méthode toJSON(). Dans l'exemple suivant, la sérialisation JSON des objets Performance, Performance.timing {{deprecated_inline}} et Performance.navigation {{deprecated_inline}} est imprimée dans l'élément object.

+ +
+function print_json() {
+  let json;
+  let o = document.getElementsByTagName("output")[0];
+
+  if (window.performance.toJSON === undefined) {
+    json = "window.performance.toJSON() n'est PAS pris en charge";
+    o.innerHTML += json + "<br>";
+  } else {
+    let s;
+    json = window.performance.toJSON();
+
+    // Imprimer l'objet de performance
+    s = JSON.stringify(json);
+    o.innerHTML = "<p>performance = " + s + "</p>";
+
+    // Imprimer les objets performance.timing et performance.navigation
+    let perf = JSON.parse(s);
+
+    let timing = perf.timing;
+    o.innerHTML += "<p>peformance.timing = " + JSON.stringify(timing) + "</p>";
+
+    let navigation = perf.navigation;
+    o.innerHTML += "<p>peformance.navigation = " + JSON.stringify(navigation) + "</p>";
+  }
+}
+
+ +

Spécifications

+ +

Les interfaces décrites dans ce document sont définies dans la norme High Resolution Time qui comporte deux niveaux :

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Highres Time Level 2')}}{{Spec2('Highres Time Level 2')}}Ajout de l'attribut performance sur Window et WorkerGlobalScope.
{{SpecName('Highres Time')}}{{Spec2('Highres Time')}}Définition initiale.
+ +

Interopérabilité

+ +

Comme le montre le tableau des Compatibilités des navigateurs de l'interface Performance, la plupart des interfaces Performance sont largement implémentées par les navigateurs de bureau.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performance_timeline/index.html b/files/fr/web/api/performance_timeline/index.html deleted file mode 100644 index db39bbf9bd..0000000000 --- a/files/fr/web/api/performance_timeline/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Performance Timeline API -slug: Web/API/Performance_Timeline -tags: - - API - - Guide - - Aperçu - - Performance - - Performance Web - - Overview - - Web Performance -translation_of: Web/API/Performance_Timeline ---- -
{{DefaultAPISidebar("Performance Timeline API")}}
- -

L'API Performance Timeline définit des extensions de l'interface Performance pour prendre en charge les mesures de latence côté client dans les applications. Ces extensions fournissent des interfaces permettant de récupérer les paramètres de saisie des performances en fonction de critères de filtrage spécifiques.

- -

La norme comprend également des interfaces qui permettent à une application de définir des retours (« callbacks ») d'observateur des performances, qui sont notifiés lorsque des événements de performance spécifiques sont ajoutés à la chronologie des performances du navigateur.

- -

Ce document fournit un aperçu des interfaces de la norme. Pour plus de détails sur les interfaces, voir les pages de référence et Utilisation de Performance Timeline.

- -

{{AvailableInWorkers}}

- -

Extensions de Performance

- -

L'API Performance Timeline étend l'interface Performance avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'enregistrements des performances (métriques), en fonction des critères de filtrage spécifiés. Ces méthodes sont les suivantes :

- -
-
getEntries()
-
Renvoie toutes les entrées de performances enregistrées ou, éventuellement, les entrées basées sur les name, type de performance et/ou les initiatorType spécifiés. (tel qu'un élément HTML).
-
getEntriesByName()
-
Renvoie les entrées de performances enregistrées en fonction du name spécifié et éventuellement du type de performance.
-
getEntriesByType()
-
Renvoie les entrées de perfornances enregistrées en fonction des types de performances spécifiés.
-
- -

L'interface PerformanceEntry

- -

L'interface PerformanceEntry encapsule une unique entrée de performance, c'est-à-dire un point de donnée ou une métrique située sur la chronologie des performances. Cette interface possède quatre propriétés ; ces propriétés sont étendues (avec des contraintes supplémentaires) par d'autres interfaces (telles que PerformanceMark) :

- -
-
name
-
Le nom de l'entrée de performance lorsque la métrique a été créée.
-
entryType
-
Le type de mesure de performance (par exemple, « mark »).
-
startTime
-
Un horodatage haute résolution représentant l'heure de départ de l'entrée de performance.
-
duration
-
Un horodatage haute résolution représentant la valeur temporelle de la durée de l'événement de performance (certains types d'entrée de performance n'ont pas de concept de durée et cette valeur est fixée à '0' pour ces types).
-
- -

Cette interface comprend une méthode toJSON() qui renvoie la sérialisation de l'objet PerformanceEntry. La sérialisation varie selon le type de performance.

- -

Observateurs des performances

- -

{{SeeCompatTable}}

- -

Les interfaces d'observateurs de performance permettent à une application d'enregistrer un observateur pour des types d'événements de performance spécifiques. Lorsqu'un de ces types d'événements est enregistré, l'application est notifiée de l'événement via la fonction de rappel de l'observateur qui a été spécifiée lors de la création de l'observateur.

- -

Lorsque la fonction de rappel de l'observateur (callback) est invoquée, les paramètres incluent une liste des entrées de l'observateur de performance qui contient uniquement des entrées de performance observées. C'est-à-dire que la liste contient uniquement des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode observe() de l'observateur a été invoquée. L'interface PerformanceObserverEntryList possède les trois mêmes méthodes getEntries*() que l'interface Performance. Cependant, notez qu'il y a une différence clé avec ces méthodes ; les versions PerformanceObserverEntryList sont utilisées pour récupérer les entrées de performance observées dans le rappel de l'observateur.

- -

Outre la méthode observe() de l'interface PerformanceObserver (qui sert à enregistrer les types d'entrées pour observer), l'interface PerformanceObserver possède également une méthode disconnect() qui empêche un observateur de recevoir d'autres événements.

- -
-

Note : Les observateurs de performance ont été ajoutés au Niveau 2 de la norme et n'ont pas été implémentés à grande échelle.

-
- -

État de la mise en œuvre

- -

Un résumé de l'état de mise en œuvre des interfaces est fourni ci-dessous, avec un lien vers des informations plus détaillées.

- - - -

Pour tester la prise en charge de ces interfaces par votre navigateur, vous pouvez exécuter l'application perf-api-support.

- -

Voir aussi

- - diff --git a/files/fr/web/api/performance_timeline/index.md b/files/fr/web/api/performance_timeline/index.md new file mode 100644 index 0000000000..db39bbf9bd --- /dev/null +++ b/files/fr/web/api/performance_timeline/index.md @@ -0,0 +1,84 @@ +--- +title: Performance Timeline API +slug: Web/API/Performance_Timeline +tags: + - API + - Guide + - Aperçu + - Performance + - Performance Web + - Overview + - Web Performance +translation_of: Web/API/Performance_Timeline +--- +
{{DefaultAPISidebar("Performance Timeline API")}}
+ +

L'API Performance Timeline définit des extensions de l'interface Performance pour prendre en charge les mesures de latence côté client dans les applications. Ces extensions fournissent des interfaces permettant de récupérer les paramètres de saisie des performances en fonction de critères de filtrage spécifiques.

+ +

La norme comprend également des interfaces qui permettent à une application de définir des retours (« callbacks ») d'observateur des performances, qui sont notifiés lorsque des événements de performance spécifiques sont ajoutés à la chronologie des performances du navigateur.

+ +

Ce document fournit un aperçu des interfaces de la norme. Pour plus de détails sur les interfaces, voir les pages de référence et Utilisation de Performance Timeline.

+ +

{{AvailableInWorkers}}

+ +

Extensions de Performance

+ +

L'API Performance Timeline étend l'interface Performance avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'enregistrements des performances (métriques), en fonction des critères de filtrage spécifiés. Ces méthodes sont les suivantes :

+ +
+
getEntries()
+
Renvoie toutes les entrées de performances enregistrées ou, éventuellement, les entrées basées sur les name, type de performance et/ou les initiatorType spécifiés. (tel qu'un élément HTML).
+
getEntriesByName()
+
Renvoie les entrées de performances enregistrées en fonction du name spécifié et éventuellement du type de performance.
+
getEntriesByType()
+
Renvoie les entrées de perfornances enregistrées en fonction des types de performances spécifiés.
+
+ +

L'interface PerformanceEntry

+ +

L'interface PerformanceEntry encapsule une unique entrée de performance, c'est-à-dire un point de donnée ou une métrique située sur la chronologie des performances. Cette interface possède quatre propriétés ; ces propriétés sont étendues (avec des contraintes supplémentaires) par d'autres interfaces (telles que PerformanceMark) :

+ +
+
name
+
Le nom de l'entrée de performance lorsque la métrique a été créée.
+
entryType
+
Le type de mesure de performance (par exemple, « mark »).
+
startTime
+
Un horodatage haute résolution représentant l'heure de départ de l'entrée de performance.
+
duration
+
Un horodatage haute résolution représentant la valeur temporelle de la durée de l'événement de performance (certains types d'entrée de performance n'ont pas de concept de durée et cette valeur est fixée à '0' pour ces types).
+
+ +

Cette interface comprend une méthode toJSON() qui renvoie la sérialisation de l'objet PerformanceEntry. La sérialisation varie selon le type de performance.

+ +

Observateurs des performances

+ +

{{SeeCompatTable}}

+ +

Les interfaces d'observateurs de performance permettent à une application d'enregistrer un observateur pour des types d'événements de performance spécifiques. Lorsqu'un de ces types d'événements est enregistré, l'application est notifiée de l'événement via la fonction de rappel de l'observateur qui a été spécifiée lors de la création de l'observateur.

+ +

Lorsque la fonction de rappel de l'observateur (callback) est invoquée, les paramètres incluent une liste des entrées de l'observateur de performance qui contient uniquement des entrées de performance observées. C'est-à-dire que la liste contient uniquement des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode observe() de l'observateur a été invoquée. L'interface PerformanceObserverEntryList possède les trois mêmes méthodes getEntries*() que l'interface Performance. Cependant, notez qu'il y a une différence clé avec ces méthodes ; les versions PerformanceObserverEntryList sont utilisées pour récupérer les entrées de performance observées dans le rappel de l'observateur.

+ +

Outre la méthode observe() de l'interface PerformanceObserver (qui sert à enregistrer les types d'entrées pour observer), l'interface PerformanceObserver possède également une méthode disconnect() qui empêche un observateur de recevoir d'autres événements.

+ +
+

Note : Les observateurs de performance ont été ajoutés au Niveau 2 de la norme et n'ont pas été implémentés à grande échelle.

+
+ +

État de la mise en œuvre

+ +

Un résumé de l'état de mise en œuvre des interfaces est fourni ci-dessous, avec un lien vers des informations plus détaillées.

+ + + +

Pour tester la prise en charge de ces interfaces par votre navigateur, vous pouvez exécuter l'application perf-api-support.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performance_timeline/using_performance_timeline/index.html b/files/fr/web/api/performance_timeline/using_performance_timeline/index.html deleted file mode 100644 index c3554f1927..0000000000 --- a/files/fr/web/api/performance_timeline/using_performance_timeline/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Utilisation de Performance Timeline -slug: Web/API/Performance_Timeline/Using_Performance_Timeline -tags: - - Guide - - Performance - - Performance Web - - Web Performance -translation_of: Web/API/Performance_Timeline/Using_Performance_Timeline ---- -
{{DefaultAPISidebar("Performance Timeline API")}}
- -

La norme Performance Timeline définit des extensions de l'interface Performance pour prendre en charge les mesures de latence côté client au sein des applications.

- -

La norme comprend également des interfaces qui permettent à une application d'être notifiée lorsque des événements de performance spécifiques se produisent. Ensemble, ces interfaces peuvent être utilisées pour aider à identifier les goulots d'étranglement des performances d'une application.

- -

Extensions de Performance

- -

Performance Timeline étend l'objet Performance avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'enregistrements des performances (métriques), selon les critères de filtrage spécifiés. L'exemple suivant montre l'utilisation de ces méthodes getEntries(), getEntriesByName() et getEntriesByType().

- -
-function log(s) {
-  let o = document.getElementsByTagName("output")[0];
-  o.innerHTML += s + " <br>";
-}
-function do_work(n) {
-  for (let i=0 ; i < n; i++) {
-      let m = Math.random();
-  }
-}
-function print_perf_entry(pe) {
-  log("..name: " + pe.name +
-      "; entryType: " + pe.entryType +
-      "; startTime: " + pe.startTime +
-      "; duration: " + pe.duration);
-}
-function print_PerformanceEntries() {
-  if (performance.mark === undefined) {
-    log("... performance.mark Not supported");
-    return;
-  }
-
-  // Crée quelques entrées de performance via les méthodes mark() et measure()
-  performance.mark("Begin");
-  do_work(50000);
-  performance.mark("End");
-  do_work(50000);
-  performance.measure("Measure1", "Begin", "End");
-
-  // Utilise getEntries() pour itérer toutes les entrées.
-  let p = performance.getEntries();
-  for (let i=0; i < p.length; i++) {
-    log("Toutes les entrées [" + i + "]");
-    print_perf_entry(p[i]);
-  }
-
-  // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques.
-  p = performance.getEntries({name : "Measure1", entryType:   "measure"});
-  for (let i=0; i < p.length; i++) {
-    log("Begin et Measure [" + i + "]");
-    print_perf_entry(p[i]);
-  }
-
-  // Utilisez getEntriesByType() pour obtenir toutes les entrées "mark".
-  p = performance.getEntriesByType("mark");
-  for (let i=0; i < p.length; i++) {
-    log ("Mark seulement [" + i + "]");
-    print_perf_entry(p[i]);
-  }
-
-  // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
-  p = performance.getEntriesByName("Begin", "mark");
-  for (let i=0; i < p.length; i++) {
-    log ("Begin et Mark [" + i + "]");
-    print_perf_entry(p[i]);
-  }
-}
-
- -

L'interface PerformanceEntry

- -

L'interface PerformanceEntry encapsule une seule entrée de performance, c'est-à-dire une seule métrique de performance. Cette interface possède quatre propriétés et un sérialiseur JSON : (toJSON(). L'exemple suivant montre l'utilisation de ces propriétés.

- -
-function print_PerformanceEntry(ev) {
-  let properties = ["name", "entryType", "startTime", "duration"];
-
-  // Crée quelques entrées de performance
-  performance.mark("Start");
-  do_work(50000);
-  performance.mark("Stop");
-  performance.measure("measure-1");
-
-  let p = performance.getEntries();
-  for (let i=0; i < p.length; i++) {
-    log("PerfEntry[" + i + "]");
-    for (let =0; j < properties.length; j++) {
-      // check each property in window.performance
-      let supported = properties[j] in p[i];
-      if (supported) {
-        let pe = p[i];
-        log("... " + properties[j] + " = " + pe[properties[j]]);
-      } else {
-        log("... " + properties[j] + " = N'est pas pris en charge");
-      }
-    }
-  }
-}
-
- -

Cette interface comprend également une méthode toJSON() qui renvoie la sérialisation de l'objet PerformanceEntry. Les exemples suivants montrent l'utilisation de cette méthode.

- -
-function PerfEntry_toJSON() {
-
-  // Crée quelques entrées de performance
-  performance.mark("mark-1");
-  performance.mark("mark-2");
-  performance.measure("meas-1", "mark-1", "mark-2");
-
-  let peList = performance.getEntries();
-  let pe = peList[0];
-
-  if (pe.toJSON === undefined) {
-    log("PerformanceEntry.toJSON() n'est PAS pris en charge");
-    return;
-  }
-
-  // Imprime l'objet PerformanceEntry
-  let json = pe.toJSON();
-  let s = JSON.stringify(json);
-  log("PerformanceEntry.toJSON = " + s);
-}
-
- -

Observateurs de performance

- -

{{SeeCompatTable}}

- -

Les interfaces Performance Observer permettent à une application d'enregistrer un observateur pour des types d'événements de performance spécifiques, et lorsqu'un de ces types d'événements est enregistré, l'application est notifiée de l'événement via la fonction de rappel de l'observateur qui a été spécifiée au moment, où l'observateur a été créé. Lorsque l'observateur (rappel ou « callback ») est invoqué, les paramètres du rappel incluent une liste d'entrées de l'observateur de performance qui contient uniquement des entrées de performance observées. C'est-à-dire que la liste ne contient que des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode observe() de l'observateur a été invoquée.

- -

L'exemple suivant montre comment enregistrer deux observateurs : le premier s'enregistre pour plusieurs types d'événements et le second ne s'enregistre que pour un seul type d'événement.

- -
-function PerformanceObservers() {
-  // Crée un observateur pour tous les types d'événements de performance
-  let observe_all = new PerformanceObserver(function(list, obs) {
-    let perfEntries;
-
-    // Imprime toutes les entrées
-    perfEntries = list.getEntries();
-    for (let i=0; i < perfEntries.length; i++) {
-      print_perf_entry(perfEntries[i]);
-    }
-
-    // Imprime les entrées nommées "Begin" avec le type "mark".
-    perfEntries = list.getEntriesByName("Begin", "mark");
-    for (let i=0; i < perfEntries.length; i++) {
-      print_perf_entry(perfEntries[i]);
-    }
-
-    // Imprime les entrées avec le type "mark".
-    perfEntries = list.getEntriesByType("mark");
-    for (let i=0; i < perfEntries.length; i++) {
-      print_perf_entry(perfEntries[i]);
-    }
-  });
-  // inscrit tous les types d'événements liés aux performances
-  observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
-
-  // Crée un observateur pour le seul type d'événement "mark".
-  let observe_mark = new PerformanceObserver(function(list, obs) {
-    let perfEntries = list.getEntries();
-    // Ne devrait avoir que des entrées de type "mark".
-    for (let i=0; i < perfEntries.length; i++) {
-      print_perf_entry(perfEntries[i]);
-    }
-  });
-  // inscrit uniquement l'événement "mark".
-  observe_mark.observe({entryTypes: ['mark']});
-}
-function print_perf_entry(pe) {
-  log("name: " + pe.name +
-      "; entryType: " + pe.entryType +
-      "; startTime: " + pe.startTime +
-      "; duration: " + pe.duration);
-}
-
- -

L'interface liste des entrées de l'observateur de performance possède les trois mêmes méthodes getEntries*() que l'interface Performance et ces méthodes sont utilisées pour récupérer les entrées de performance observées dans le rappel de l'observateur. Ces méthodes ont été utilisées dans l'exemple cité ci-dessus.

- -

Spécifications

- -

Les interfaces décrites dans ce document sont définies dans la norme Performance Timeline qui comporte deux niveaux :

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Définition des méthodes getEntries(), getEntriesByType() et getEntriesByName().
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Modifications de l'interface getEntries().
- -

Voir aussi

- - diff --git a/files/fr/web/api/performance_timeline/using_performance_timeline/index.md b/files/fr/web/api/performance_timeline/using_performance_timeline/index.md new file mode 100644 index 0000000000..c3554f1927 --- /dev/null +++ b/files/fr/web/api/performance_timeline/using_performance_timeline/index.md @@ -0,0 +1,223 @@ +--- +title: Utilisation de Performance Timeline +slug: Web/API/Performance_Timeline/Using_Performance_Timeline +tags: + - Guide + - Performance + - Performance Web + - Web Performance +translation_of: Web/API/Performance_Timeline/Using_Performance_Timeline +--- +
{{DefaultAPISidebar("Performance Timeline API")}}
+ +

La norme Performance Timeline définit des extensions de l'interface Performance pour prendre en charge les mesures de latence côté client au sein des applications.

+ +

La norme comprend également des interfaces qui permettent à une application d'être notifiée lorsque des événements de performance spécifiques se produisent. Ensemble, ces interfaces peuvent être utilisées pour aider à identifier les goulots d'étranglement des performances d'une application.

+ +

Extensions de Performance

+ +

Performance Timeline étend l'objet Performance avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'enregistrements des performances (métriques), selon les critères de filtrage spécifiés. L'exemple suivant montre l'utilisation de ces méthodes getEntries(), getEntriesByName() et getEntriesByType().

+ +
+function log(s) {
+  let o = document.getElementsByTagName("output")[0];
+  o.innerHTML += s + " <br>";
+}
+function do_work(n) {
+  for (let i=0 ; i < n; i++) {
+      let m = Math.random();
+  }
+}
+function print_perf_entry(pe) {
+  log("..name: " + pe.name +
+      "; entryType: " + pe.entryType +
+      "; startTime: " + pe.startTime +
+      "; duration: " + pe.duration);
+}
+function print_PerformanceEntries() {
+  if (performance.mark === undefined) {
+    log("... performance.mark Not supported");
+    return;
+  }
+
+  // Crée quelques entrées de performance via les méthodes mark() et measure()
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+  do_work(50000);
+  performance.measure("Measure1", "Begin", "End");
+
+  // Utilise getEntries() pour itérer toutes les entrées.
+  let p = performance.getEntries();
+  for (let i=0; i < p.length; i++) {
+    log("Toutes les entrées [" + i + "]");
+    print_perf_entry(p[i]);
+  }
+
+  // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques.
+  p = performance.getEntries({name : "Measure1", entryType:   "measure"});
+  for (let i=0; i < p.length; i++) {
+    log("Begin et Measure [" + i + "]");
+    print_perf_entry(p[i]);
+  }
+
+  // Utilisez getEntriesByType() pour obtenir toutes les entrées "mark".
+  p = performance.getEntriesByType("mark");
+  for (let i=0; i < p.length; i++) {
+    log ("Mark seulement [" + i + "]");
+    print_perf_entry(p[i]);
+  }
+
+  // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
+  p = performance.getEntriesByName("Begin", "mark");
+  for (let i=0; i < p.length; i++) {
+    log ("Begin et Mark [" + i + "]");
+    print_perf_entry(p[i]);
+  }
+}
+
+ +

L'interface PerformanceEntry

+ +

L'interface PerformanceEntry encapsule une seule entrée de performance, c'est-à-dire une seule métrique de performance. Cette interface possède quatre propriétés et un sérialiseur JSON : (toJSON(). L'exemple suivant montre l'utilisation de ces propriétés.

+ +
+function print_PerformanceEntry(ev) {
+  let properties = ["name", "entryType", "startTime", "duration"];
+
+  // Crée quelques entrées de performance
+  performance.mark("Start");
+  do_work(50000);
+  performance.mark("Stop");
+  performance.measure("measure-1");
+
+  let p = performance.getEntries();
+  for (let i=0; i < p.length; i++) {
+    log("PerfEntry[" + i + "]");
+    for (let =0; j < properties.length; j++) {
+      // check each property in window.performance
+      let supported = properties[j] in p[i];
+      if (supported) {
+        let pe = p[i];
+        log("... " + properties[j] + " = " + pe[properties[j]]);
+      } else {
+        log("... " + properties[j] + " = N'est pas pris en charge");
+      }
+    }
+  }
+}
+
+ +

Cette interface comprend également une méthode toJSON() qui renvoie la sérialisation de l'objet PerformanceEntry. Les exemples suivants montrent l'utilisation de cette méthode.

+ +
+function PerfEntry_toJSON() {
+
+  // Crée quelques entrées de performance
+  performance.mark("mark-1");
+  performance.mark("mark-2");
+  performance.measure("meas-1", "mark-1", "mark-2");
+
+  let peList = performance.getEntries();
+  let pe = peList[0];
+
+  if (pe.toJSON === undefined) {
+    log("PerformanceEntry.toJSON() n'est PAS pris en charge");
+    return;
+  }
+
+  // Imprime l'objet PerformanceEntry
+  let json = pe.toJSON();
+  let s = JSON.stringify(json);
+  log("PerformanceEntry.toJSON = " + s);
+}
+
+ +

Observateurs de performance

+ +

{{SeeCompatTable}}

+ +

Les interfaces Performance Observer permettent à une application d'enregistrer un observateur pour des types d'événements de performance spécifiques, et lorsqu'un de ces types d'événements est enregistré, l'application est notifiée de l'événement via la fonction de rappel de l'observateur qui a été spécifiée au moment, où l'observateur a été créé. Lorsque l'observateur (rappel ou « callback ») est invoqué, les paramètres du rappel incluent une liste d'entrées de l'observateur de performance qui contient uniquement des entrées de performance observées. C'est-à-dire que la liste ne contient que des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode observe() de l'observateur a été invoquée.

+ +

L'exemple suivant montre comment enregistrer deux observateurs : le premier s'enregistre pour plusieurs types d'événements et le second ne s'enregistre que pour un seul type d'événement.

+ +
+function PerformanceObservers() {
+  // Crée un observateur pour tous les types d'événements de performance
+  let observe_all = new PerformanceObserver(function(list, obs) {
+    let perfEntries;
+
+    // Imprime toutes les entrées
+    perfEntries = list.getEntries();
+    for (let i=0; i < perfEntries.length; i++) {
+      print_perf_entry(perfEntries[i]);
+    }
+
+    // Imprime les entrées nommées "Begin" avec le type "mark".
+    perfEntries = list.getEntriesByName("Begin", "mark");
+    for (let i=0; i < perfEntries.length; i++) {
+      print_perf_entry(perfEntries[i]);
+    }
+
+    // Imprime les entrées avec le type "mark".
+    perfEntries = list.getEntriesByType("mark");
+    for (let i=0; i < perfEntries.length; i++) {
+      print_perf_entry(perfEntries[i]);
+    }
+  });
+  // inscrit tous les types d'événements liés aux performances
+  observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
+
+  // Crée un observateur pour le seul type d'événement "mark".
+  let observe_mark = new PerformanceObserver(function(list, obs) {
+    let perfEntries = list.getEntries();
+    // Ne devrait avoir que des entrées de type "mark".
+    for (let i=0; i < perfEntries.length; i++) {
+      print_perf_entry(perfEntries[i]);
+    }
+  });
+  // inscrit uniquement l'événement "mark".
+  observe_mark.observe({entryTypes: ['mark']});
+}
+function print_perf_entry(pe) {
+  log("name: " + pe.name +
+      "; entryType: " + pe.entryType +
+      "; startTime: " + pe.startTime +
+      "; duration: " + pe.duration);
+}
+
+ +

L'interface liste des entrées de l'observateur de performance possède les trois mêmes méthodes getEntries*() que l'interface Performance et ces méthodes sont utilisées pour récupérer les entrées de performance observées dans le rappel de l'observateur. Ces méthodes ont été utilisées dans l'exemple cité ci-dessus.

+ +

Spécifications

+ +

Les interfaces décrites dans ce document sont définies dans la norme Performance Timeline qui comporte deux niveaux :

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Définition des méthodes getEntries(), getEntriesByType() et getEntriesByName().
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Modifications de l'interface getEntries().
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performanceelementtiming/element/index.html b/files/fr/web/api/performanceelementtiming/element/index.html deleted file mode 100644 index 1a40658ff7..0000000000 --- a/files/fr/web/api/performanceelementtiming/element/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: PerformanceElementTiming.element -slug: Web/API/PerformanceElementTiming/element -tags: - - API - - Property - - Propriété - - Reference - - element - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming/element ---- -
{{APIRef("Element Timing API")}}
- -

La propriété en lecture seule element de l'interface PerformanceElementTiming renvoie un Element qui est une représentation littérale de l'élément associé.

- -

Syntaxe

- -
var element = PerformanceElementTiming.element;
- -

Valeur

-

Un objet de type Element.

- -

Exemples

- -

Dans cet exemple, l'appel à entry.element va enregistrer dans la console <img src="image.jpg" alt="une belle image" elementtiming="big-image">.

- -
<img src="image.jpg" alt="une belle image" elementtiming="big-image">
- -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
-    if (entry.identifier === "big-image") {
-      console.log(entry.element);
-    }
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-element','PerformanceElementTiming.element')}}{{Spec2('Element Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming.element")}}

diff --git a/files/fr/web/api/performanceelementtiming/element/index.md b/files/fr/web/api/performanceelementtiming/element/index.md new file mode 100644 index 0000000000..1a40658ff7 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/element/index.md @@ -0,0 +1,64 @@ +--- +title: PerformanceElementTiming.element +slug: Web/API/PerformanceElementTiming/element +tags: + - API + - Property + - Propriété + - Reference + - element + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/element +--- +
{{APIRef("Element Timing API")}}
+ +

La propriété en lecture seule element de l'interface PerformanceElementTiming renvoie un Element qui est une représentation littérale de l'élément associé.

+ +

Syntaxe

+ +
var element = PerformanceElementTiming.element;
+ +

Valeur

+

Un objet de type Element.

+ +

Exemples

+ +

Dans cet exemple, l'appel à entry.element va enregistrer dans la console <img src="image.jpg" alt="une belle image" elementtiming="big-image">.

+ +
<img src="image.jpg" alt="une belle image" elementtiming="big-image">
+ +
const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.element);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +
+

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-element','PerformanceElementTiming.element')}}{{Spec2('Element Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming.element")}}

diff --git a/files/fr/web/api/performanceelementtiming/id/index.html b/files/fr/web/api/performanceelementtiming/id/index.html deleted file mode 100644 index f3083cd256..0000000000 --- a/files/fr/web/api/performanceelementtiming/id/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: PerformanceElementTiming.id -slug: Web/API/PerformanceElementTiming/id -tags: - - API - - Property - - Propriété - - Reference - - id - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming/id ---- -
{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
- -

La propriété en lecture seule id de l'interface PerformanceElementTiming renvoie l'id de l'élément associé.

- -

Syntaxe

- -
var id = PerformanceElementTiming.id;
- -

Valeur

-

Une chaîne de caractères DOMString.

- -

Exemples

- -

Dans cet exemple, l'appel à entry.id entraînera l'affichage dans la console du code myImage, qui est l'id de l'élément image.

- -
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
- -
const observer = new PerformanceObserver((list) => {
-let entries = list.getEntries().forEach(function (entry) {
-    if (entry.identifier === "big-image") {
-      console.log(entry.id);
-    }
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément entryType element afin d'utiliser l'interface PerformanceElementTiming.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-id','PerformanceElementTiming.id')}}{{Spec2('Element Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming.id")}}

diff --git a/files/fr/web/api/performanceelementtiming/id/index.md b/files/fr/web/api/performanceelementtiming/id/index.md new file mode 100644 index 0000000000..f3083cd256 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/id/index.md @@ -0,0 +1,64 @@ +--- +title: PerformanceElementTiming.id +slug: Web/API/PerformanceElementTiming/id +tags: + - API + - Property + - Propriété + - Reference + - id + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/id +--- +
{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
+ +

La propriété en lecture seule id de l'interface PerformanceElementTiming renvoie l'id de l'élément associé.

+ +

Syntaxe

+ +
var id = PerformanceElementTiming.id;
+ +

Valeur

+

Une chaîne de caractères DOMString.

+ +

Exemples

+ +

Dans cet exemple, l'appel à entry.id entraînera l'affichage dans la console du code myImage, qui est l'id de l'élément image.

+ +
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+ +
const observer = new PerformanceObserver((list) => {
+let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.id);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +
+

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément entryType element afin d'utiliser l'interface PerformanceElementTiming.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-id','PerformanceElementTiming.id')}}{{Spec2('Element Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming.id")}}

diff --git a/files/fr/web/api/performanceelementtiming/identifier/index.html b/files/fr/web/api/performanceelementtiming/identifier/index.html deleted file mode 100644 index 1fb524cf4f..0000000000 --- a/files/fr/web/api/performanceelementtiming/identifier/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: PerformanceElementTiming.identifier -slug: Web/API/PerformanceElementTiming/identifier -tags: - - API - - Property - - Propriété - - Reference - - identifier - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming/identifier ---- -
{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
- -

La propriété en lecture seule identifier de l'interface PerformanceElementTiming renvoie la valeur de l'attribut elementtiming sur l'élément.

- -

Syntaxe

- -
var identifier = PerformanceElementTiming.identifier;
- -

Valeur

-

Une chaîne de caractères DOMString.

- -

Examples

- -

Dans cet exemple, la valeur de elementtiming est big-image. L'appel à entry.indentifier renvoie donc la chaîne de caractères big-image.

- -
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
- -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
-    if (entry.identifier === "big-image") {
-      console.log(entry.naturalWidth);
-    }
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément entryType element afin d'utiliser l'interface PerformanceElementTiming.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-identifier','PerformanceElementTiming.identifier')}}{{Spec2('Element Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming.identifier")}}

diff --git a/files/fr/web/api/performanceelementtiming/identifier/index.md b/files/fr/web/api/performanceelementtiming/identifier/index.md new file mode 100644 index 0000000000..1fb524cf4f --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/identifier/index.md @@ -0,0 +1,64 @@ +--- +title: PerformanceElementTiming.identifier +slug: Web/API/PerformanceElementTiming/identifier +tags: + - API + - Property + - Propriété + - Reference + - identifier + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/identifier +--- +
{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
+ +

La propriété en lecture seule identifier de l'interface PerformanceElementTiming renvoie la valeur de l'attribut elementtiming sur l'élément.

+ +

Syntaxe

+ +
var identifier = PerformanceElementTiming.identifier;
+ +

Valeur

+

Une chaîne de caractères DOMString.

+ +

Examples

+ +

Dans cet exemple, la valeur de elementtiming est big-image. L'appel à entry.indentifier renvoie donc la chaîne de caractères big-image.

+ +
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+ +
const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.naturalWidth);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +
+

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément entryType element afin d'utiliser l'interface PerformanceElementTiming.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-identifier','PerformanceElementTiming.identifier')}}{{Spec2('Element Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming.identifier")}}

diff --git a/files/fr/web/api/performanceelementtiming/index.html b/files/fr/web/api/performanceelementtiming/index.html deleted file mode 100644 index 3a591036d7..0000000000 --- a/files/fr/web/api/performanceelementtiming/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: PerformanceElementTiming -slug: Web/API/PerformanceElementTiming -tags: - - API - - Interface - - Reference - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming ---- -
{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
- -

L'interface PerformanceElementTiming de l'API Element Timing API rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.

- -

Propriétés

- -
-
PerformanceElementTiming.element {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
-
Un Element représentant l'élément pour lequel nous retournons des informations.
-
PerformanceElementTiming.id {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
-
Un DOMString qui est l'identifiant (attribut id) de l'élément.
-
PerformanceElementTiming.identifier {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
-
Une DOMString qui est la valeur de l'attribut elementtiming de l'élément.
-
PerformanceElementTiming.intersectionRect {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
-
Un DOMRectReadOnly qui est le rectangle de l'élément dans la fenêtre d'affichage.
-
PerformanceElementTiming.loadTime {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
-
Un DOMHighResTimeStamp avec l'heure de chargement de l'élément.
-
PerformanceElementTiming.naturalHeight {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
-
Un entier de 32 bits non signé (unsigned long) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
-
PerformanceElementTiming.naturalWidth {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
-
Un entier de 32 bits non signé (unsigned long) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
-
PerformanceElementTiming.renderTime {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
-
Un DOMHighResTimeStamp avec le renderTime de l'élément.
-
PerformanceElementTiming.url {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
-
Une DOMString qui est l'URL initiale de la demande de ressources pour les images, 0 pour le texte.
-
- -

Méthodes

- -
-
PerformanceElementTiming.toJSON() {{Experimental_Inline}} {{Non-Standard_Inline}}
-
Génère une description JSON de l'objet.
-
- -

Exemples

- -

Dans cet exemple, nous avons deux éléments qui sont observés. Nous utilisons l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, l'observation de l'élément PerformanceEntry.entrytype element afin d'utiliser l'interface PerformanceElementTiming.

- -

Deux entrées seront affichées dans la console. La première contenant les détails de l'image, la seconde les détails du nœud texte.

- -
<img src="image.jpg" elementtiming="big-image">
-<p elementtiming="text" id="text-id">le texte ici</p>
- -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
-      console.log(entry);
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#sec-performance-element-timing','PerformanceElementTiming')}}{{Spec2('Element Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming")}}

diff --git a/files/fr/web/api/performanceelementtiming/index.md b/files/fr/web/api/performanceelementtiming/index.md new file mode 100644 index 0000000000..3a591036d7 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/index.md @@ -0,0 +1,82 @@ +--- +title: PerformanceElementTiming +slug: Web/API/PerformanceElementTiming +tags: + - API + - Interface + - Reference + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming +--- +
{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
+ +

L'interface PerformanceElementTiming de l'API Element Timing API rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.

+ +

Propriétés

+ +
+
PerformanceElementTiming.element {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+
Un Element représentant l'élément pour lequel nous retournons des informations.
+
PerformanceElementTiming.id {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+
Un DOMString qui est l'identifiant (attribut id) de l'élément.
+
PerformanceElementTiming.identifier {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+
Une DOMString qui est la valeur de l'attribut elementtiming de l'élément.
+
PerformanceElementTiming.intersectionRect {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+
Un DOMRectReadOnly qui est le rectangle de l'élément dans la fenêtre d'affichage.
+
PerformanceElementTiming.loadTime {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+
Un DOMHighResTimeStamp avec l'heure de chargement de l'élément.
+
PerformanceElementTiming.naturalHeight {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+
Un entier de 32 bits non signé (unsigned long) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
+
PerformanceElementTiming.naturalWidth {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+
Un entier de 32 bits non signé (unsigned long) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
+
PerformanceElementTiming.renderTime {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+
Un DOMHighResTimeStamp avec le renderTime de l'élément.
+
PerformanceElementTiming.url {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+
Une DOMString qui est l'URL initiale de la demande de ressources pour les images, 0 pour le texte.
+
+ +

Méthodes

+ +
+
PerformanceElementTiming.toJSON() {{Experimental_Inline}} {{Non-Standard_Inline}}
+
Génère une description JSON de l'objet.
+
+ +

Exemples

+ +

Dans cet exemple, nous avons deux éléments qui sont observés. Nous utilisons l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, l'observation de l'élément PerformanceEntry.entrytype element afin d'utiliser l'interface PerformanceElementTiming.

+ +

Deux entrées seront affichées dans la console. La première contenant les détails de l'image, la seconde les détails du nœud texte.

+ +
<img src="image.jpg" elementtiming="big-image">
+<p elementtiming="text" id="text-id">le texte ici</p>
+ +
const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+      console.log(entry);
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#sec-performance-element-timing','PerformanceElementTiming')}}{{Spec2('Element Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming")}}

diff --git a/files/fr/web/api/performanceelementtiming/intersectionrect/index.html b/files/fr/web/api/performanceelementtiming/intersectionrect/index.html deleted file mode 100644 index 4954876475..0000000000 --- a/files/fr/web/api/performanceelementtiming/intersectionrect/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: PerformanceElementTiming.intersectionRect -slug: Web/API/PerformanceElementTiming/intersectionRect -tags: - - API - - Property - - Propriété - - Reference - - intersectionRect - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming/intersectionRect ---- -
{{APIRef("Element Timing API")}}
- -

La propriété en lecture seule intersectionRect de l'interface PerformanceElementTiming renvoie le rectangle de l'élément dans la zone d'affichage (viewport).

- -

Syntaxe

- -
var rect = PerformanceElementTiming.intersectionRect;
- -

Valeur

-

Un objet DOMRectReadOnly qui est le rectangle de l'élément dans la zone d'affichage.

- -

Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.

- -

Exemples

- -

Dans cet exemple, l'appel à entry.intersectionRect renvoie un objet DOMRectReadOnly avec le rectangle d'affichage de l'image.

- -
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
- -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
-    if (entry.identifier === "big-image") {
-      console.log(entry.intersectionRect);
-    }
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-intersectionrect','PerformanceElementTiming.intersectionRect')}}{{Spec2('Element Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming.intersectionRect")}}

diff --git a/files/fr/web/api/performanceelementtiming/intersectionrect/index.md b/files/fr/web/api/performanceelementtiming/intersectionrect/index.md new file mode 100644 index 0000000000..4954876475 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/intersectionrect/index.md @@ -0,0 +1,66 @@ +--- +title: PerformanceElementTiming.intersectionRect +slug: Web/API/PerformanceElementTiming/intersectionRect +tags: + - API + - Property + - Propriété + - Reference + - intersectionRect + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/intersectionRect +--- +
{{APIRef("Element Timing API")}}
+ +

La propriété en lecture seule intersectionRect de l'interface PerformanceElementTiming renvoie le rectangle de l'élément dans la zone d'affichage (viewport).

+ +

Syntaxe

+ +
var rect = PerformanceElementTiming.intersectionRect;
+ +

Valeur

+

Un objet DOMRectReadOnly qui est le rectangle de l'élément dans la zone d'affichage.

+ +

Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.

+ +

Exemples

+ +

Dans cet exemple, l'appel à entry.intersectionRect renvoie un objet DOMRectReadOnly avec le rectangle d'affichage de l'image.

+ +
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+ +
const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.intersectionRect);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +
+

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-intersectionrect','PerformanceElementTiming.intersectionRect')}}{{Spec2('Element Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming.intersectionRect")}}

diff --git a/files/fr/web/api/performanceelementtiming/loadtime/index.html b/files/fr/web/api/performanceelementtiming/loadtime/index.html deleted file mode 100644 index 28e33d6384..0000000000 --- a/files/fr/web/api/performanceelementtiming/loadtime/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: PerformanceElementTiming.loadTime -slug: Web/API/PerformanceElementTiming/loadTime -tags: - - API - - Property - - Propriété - - Reference - - loadTime - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming/loadTime ---- -
{{APIRef("Element Timing API")}}
- -

La propriété en lecture seule loadTime de l'interface PerformanceElementTiming renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.

- -

Syntaxe

- -
var loadTime = PerformanceElementTiming.loadTime;
- -

Valeur

-

Un objet DOMHighResTimeStamp avec le temps de chargement de l'élément.

- -

Exemples

- -

Dans cet exemple, l'appel à entry.loadTime renvoie le temps de chargement de l'image.

- -
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
- -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
-    if (entry.identifier === "big-image") {
-      console.log(entry.loadTime);
-    }
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-loadtime','PerformanceElementTiming.loadTime')}}{{Spec2('Element Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming.loadTime")}}

diff --git a/files/fr/web/api/performanceelementtiming/loadtime/index.md b/files/fr/web/api/performanceelementtiming/loadtime/index.md new file mode 100644 index 0000000000..28e33d6384 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/loadtime/index.md @@ -0,0 +1,64 @@ +--- +title: PerformanceElementTiming.loadTime +slug: Web/API/PerformanceElementTiming/loadTime +tags: + - API + - Property + - Propriété + - Reference + - loadTime + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/loadTime +--- +
{{APIRef("Element Timing API")}}
+ +

La propriété en lecture seule loadTime de l'interface PerformanceElementTiming renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.

+ +

Syntaxe

+ +
var loadTime = PerformanceElementTiming.loadTime;
+ +

Valeur

+

Un objet DOMHighResTimeStamp avec le temps de chargement de l'élément.

+ +

Exemples

+ +

Dans cet exemple, l'appel à entry.loadTime renvoie le temps de chargement de l'image.

+ +
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+ +
const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.loadTime);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +
+

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-loadtime','PerformanceElementTiming.loadTime')}}{{Spec2('Element Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming.loadTime")}}

diff --git a/files/fr/web/api/performanceelementtiming/naturalheight/index.html b/files/fr/web/api/performanceelementtiming/naturalheight/index.html deleted file mode 100644 index 204efdc562..0000000000 --- a/files/fr/web/api/performanceelementtiming/naturalheight/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: PerformanceElementTiming.naturalHeight -slug: Web/API/PerformanceElementTiming/naturalHeight -tags: - - API - - Property - - Propriété - - Reference - - naturalHeight - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming/naturalHeight ---- -
{{APIRef("Element Timing API")}}
- -

La propriété en lecture seule naturalHeight de l'interface PerformanceElementTiming renvoie la hauteur intrinsèque de l'élément image.

- -

Syntaxe

- -
var height = PerformanceElementTiming.naturalHeight;
- -

Valeur

-

Un entier de 32 bits non signé (unsigned long) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.

- -

Exemples

- -

Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de entry.naturalHeight renvoie 750, c'est-à-dire la hauteur intrinsèque en pixels.

- -
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
- -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
-    if (entry.identifier === "big-image") {
-      console.log(entry.naturalHeight);
-    }
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-naturalheight','PerformanceElementTiming.naturalHeight')}}{{Spec2('Element Timing API')}}Initial definition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming.naturalHeight")}}

diff --git a/files/fr/web/api/performanceelementtiming/naturalheight/index.md b/files/fr/web/api/performanceelementtiming/naturalheight/index.md new file mode 100644 index 0000000000..204efdc562 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/naturalheight/index.md @@ -0,0 +1,64 @@ +--- +title: PerformanceElementTiming.naturalHeight +slug: Web/API/PerformanceElementTiming/naturalHeight +tags: + - API + - Property + - Propriété + - Reference + - naturalHeight + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/naturalHeight +--- +
{{APIRef("Element Timing API")}}
+ +

La propriété en lecture seule naturalHeight de l'interface PerformanceElementTiming renvoie la hauteur intrinsèque de l'élément image.

+ +

Syntaxe

+ +
var height = PerformanceElementTiming.naturalHeight;
+ +

Valeur

+

Un entier de 32 bits non signé (unsigned long) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.

+ +

Exemples

+ +

Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de entry.naturalHeight renvoie 750, c'est-à-dire la hauteur intrinsèque en pixels.

+ +
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+ +
const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.naturalHeight);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +
+

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-naturalheight','PerformanceElementTiming.naturalHeight')}}{{Spec2('Element Timing API')}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming.naturalHeight")}}

diff --git a/files/fr/web/api/performanceelementtiming/naturalwidth/index.html b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html deleted file mode 100644 index 3e254d3289..0000000000 --- a/files/fr/web/api/performanceelementtiming/naturalwidth/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: PerformanceElementTiming.naturalWidth -slug: Web/API/PerformanceElementTiming/naturalWidth -tags: - - API - - Property - - Propriété - - Reference - - naturalWidth - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming/naturalWidth ---- -
{{APIRef("Element Timing API")}}
- -

La propriété en lecture seule naturalWidth de l'interface PerformanceElementTiming renvoie la largeur intrinsèque de l'élément image.

-

Syntax

- -
var width = PerformanceElementTiming.naturalWidth;
- -

Valeur

-

Un entier de 32 bits non signé (unsigned long) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.

- -

Exemples

- -

Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de entry.naturalWidth renvoie 1000, c'est-à-dire la largeur intrinsèque en pixels.

- -
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
- -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
-    if (entry.identifier === "big-image") {
-      console.log(entry.naturalWidth);
-    }
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-naturalwidth','PerformanceElementTiming.naturalWidth')}}{{Spec2('Element Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming.naturalWidth")}}

diff --git a/files/fr/web/api/performanceelementtiming/naturalwidth/index.md b/files/fr/web/api/performanceelementtiming/naturalwidth/index.md new file mode 100644 index 0000000000..3e254d3289 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/naturalwidth/index.md @@ -0,0 +1,63 @@ +--- +title: PerformanceElementTiming.naturalWidth +slug: Web/API/PerformanceElementTiming/naturalWidth +tags: + - API + - Property + - Propriété + - Reference + - naturalWidth + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/naturalWidth +--- +
{{APIRef("Element Timing API")}}
+ +

La propriété en lecture seule naturalWidth de l'interface PerformanceElementTiming renvoie la largeur intrinsèque de l'élément image.

+

Syntax

+ +
var width = PerformanceElementTiming.naturalWidth;
+ +

Valeur

+

Un entier de 32 bits non signé (unsigned long) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.

+ +

Exemples

+ +

Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de entry.naturalWidth renvoie 1000, c'est-à-dire la largeur intrinsèque en pixels.

+ +
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+ +
const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.naturalWidth);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +
+

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-naturalwidth','PerformanceElementTiming.naturalWidth')}}{{Spec2('Element Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming.naturalWidth")}}

diff --git a/files/fr/web/api/performanceelementtiming/rendertime/index.html b/files/fr/web/api/performanceelementtiming/rendertime/index.html deleted file mode 100644 index b541771563..0000000000 --- a/files/fr/web/api/performanceelementtiming/rendertime/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: PerformanceElementTiming.renderTime -slug: Web/API/PerformanceElementTiming/renderTime -tags: - - API - - Property - - Propriété - - Reference - - renderTime - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming/renderTime ---- -
{{APIRef("Element Timing API")}}
- -

La propriété en lecture seule renderTime de l'interface PerformanceElementTiming renvoie le temps écoulé pour le rendu de l'élément associé.

- -

Syntaxe

- -
var renderTime = PerformanceElementTiming.renderTime;
- -

Valeur

-

Un objet DOMHighResTimeStamp avec le temps de rendu de l'élément.

- -

Pour les images, il s'agira de l'horodatage du rendu de l'image. Ceci est défini comme le moment du rendu suivant le chargement complet de l'image. Si la vérification de l'autorisation de temporisation échoue (comme défini par l'en-tête Timing-allow-origin), ceci retournera 0.

- -

Pour les nœuds de texte, il s'agira de l'horodatage du rendu du texte. Ceci est défini comme le moment où l'élément est affiché à l'écran.

- -

Exemples

- -

Dans cet exemple, appeler entry.renderTime renvoie le temps de rendu de l'élément image.

- -
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
- -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
-    if (entry.identifier === "big-image") {
-      console.log(entry.renderTime);
-    }
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-rendertime','PerformanceElementTiming.renderTime')}}{{Spec2('Element Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming.renderTime")}}

diff --git a/files/fr/web/api/performanceelementtiming/rendertime/index.md b/files/fr/web/api/performanceelementtiming/rendertime/index.md new file mode 100644 index 0000000000..b541771563 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/rendertime/index.md @@ -0,0 +1,68 @@ +--- +title: PerformanceElementTiming.renderTime +slug: Web/API/PerformanceElementTiming/renderTime +tags: + - API + - Property + - Propriété + - Reference + - renderTime + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/renderTime +--- +
{{APIRef("Element Timing API")}}
+ +

La propriété en lecture seule renderTime de l'interface PerformanceElementTiming renvoie le temps écoulé pour le rendu de l'élément associé.

+ +

Syntaxe

+ +
var renderTime = PerformanceElementTiming.renderTime;
+ +

Valeur

+

Un objet DOMHighResTimeStamp avec le temps de rendu de l'élément.

+ +

Pour les images, il s'agira de l'horodatage du rendu de l'image. Ceci est défini comme le moment du rendu suivant le chargement complet de l'image. Si la vérification de l'autorisation de temporisation échoue (comme défini par l'en-tête Timing-allow-origin), ceci retournera 0.

+ +

Pour les nœuds de texte, il s'agira de l'horodatage du rendu du texte. Ceci est défini comme le moment où l'élément est affiché à l'écran.

+ +

Exemples

+ +

Dans cet exemple, appeler entry.renderTime renvoie le temps de rendu de l'élément image.

+ +
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+ +
const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.renderTime);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +
+

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-rendertime','PerformanceElementTiming.renderTime')}}{{Spec2('Element Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming.renderTime")}}

diff --git a/files/fr/web/api/performanceelementtiming/tojson/index.html b/files/fr/web/api/performanceelementtiming/tojson/index.html deleted file mode 100644 index b0dd7affae..0000000000 --- a/files/fr/web/api/performanceelementtiming/tojson/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: PerformanceElementTiming.toJSON() -slug: Web/API/PerformanceElementTiming/toJSON -tags: - - API - - Method - - Méthode - - Reference - - toJSON() - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming/toJSON ---- -
{{APIRef("Element Timing API")}}
- -

La méthode toJSON() de l'interface PerformanceElementTiming est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.

- -

Syntaxe

- -
var json = PerformanceElementTiming.toJSON();
- -

Valeur de retour

- -
-
json
-
Un objet JSON qui est la sérialisation de l'objet PerformanceElementTiming.
-
- -

Exemples

- -

Dans cet exemple, l'appel de entry.toJSON() renvoie une représentation JSON de l'objet PerformanceElementTiming, avec les informations sur l'élément image.

- -
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
- -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
-    if (entry.identifier === "big-image") {
-      console.log(entry.toJSON());
-    }
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-tojson','PerformanceElementTiming.toJson()')}}{{Spec2('Element Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming.toJSON")}}

diff --git a/files/fr/web/api/performanceelementtiming/tojson/index.md b/files/fr/web/api/performanceelementtiming/tojson/index.md new file mode 100644 index 0000000000..b0dd7affae --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/tojson/index.md @@ -0,0 +1,68 @@ +--- +title: PerformanceElementTiming.toJSON() +slug: Web/API/PerformanceElementTiming/toJSON +tags: + - API + - Method + - Méthode + - Reference + - toJSON() + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/toJSON +--- +
{{APIRef("Element Timing API")}}
+ +

La méthode toJSON() de l'interface PerformanceElementTiming est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.

+ +

Syntaxe

+ +
var json = PerformanceElementTiming.toJSON();
+ +

Valeur de retour

+ +
+
json
+
Un objet JSON qui est la sérialisation de l'objet PerformanceElementTiming.
+
+ +

Exemples

+ +

Dans cet exemple, l'appel de entry.toJSON() renvoie une représentation JSON de l'objet PerformanceElementTiming, avec les informations sur l'élément image.

+ +
<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+ +
const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.toJSON());
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +
+

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-tojson','PerformanceElementTiming.toJson()')}}{{Spec2('Element Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming.toJSON")}}

diff --git a/files/fr/web/api/performanceelementtiming/url/index.html b/files/fr/web/api/performanceelementtiming/url/index.html deleted file mode 100644 index 6828122328..0000000000 --- a/files/fr/web/api/performanceelementtiming/url/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: PerformanceElementTiming.url -slug: Web/API/PerformanceElementTiming/url -tags: - - API - - Property - - Propriété - - Reference - - url - - PerformanceElementTiming -translation_of: Web/API/PerformanceElementTiming/url ---- -
{{APIRef("Element Timing API")}}
- -

La propriété en lecture seule url de l'interface PerformanceElementTiming renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.

- -

Syntaxe

- -
var url = PerformanceElementTiming.url;
- -

Valeur

-

Une DOMString qui est l'URL initiale de la demande de ressources pour les images ou 0 pour le texte.

- -

Exemples

- -

Dans cet exemple, appeler entry.url renvoie https://example.com/image.jpg.

- -
<img src="https://example.com/image.jpg" alt="une belle imahe" elementtiming="big-image" id="myImage">
- -
const observer = new PerformanceObserver((list) => {
-  let entries = list.getEntries().forEach(function (entry) {
-    if (entry.identifier === "big-image") {
-      console.log(entry.url);
-    }
-  });
-});
-observer.observe({ entryTypes: ["element"] });
- -
-

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-url','PerformanceElementTiming.url')}}{{Spec2('Element Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceElementTiming.url")}}

diff --git a/files/fr/web/api/performanceelementtiming/url/index.md b/files/fr/web/api/performanceelementtiming/url/index.md new file mode 100644 index 0000000000..6828122328 --- /dev/null +++ b/files/fr/web/api/performanceelementtiming/url/index.md @@ -0,0 +1,64 @@ +--- +title: PerformanceElementTiming.url +slug: Web/API/PerformanceElementTiming/url +tags: + - API + - Property + - Propriété + - Reference + - url + - PerformanceElementTiming +translation_of: Web/API/PerformanceElementTiming/url +--- +
{{APIRef("Element Timing API")}}
+ +

La propriété en lecture seule url de l'interface PerformanceElementTiming renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.

+ +

Syntaxe

+ +
var url = PerformanceElementTiming.url;
+ +

Valeur

+

Une DOMString qui est l'URL initiale de la demande de ressources pour les images ou 0 pour le texte.

+ +

Exemples

+ +

Dans cet exemple, appeler entry.url renvoie https://example.com/image.jpg.

+ +
<img src="https://example.com/image.jpg" alt="une belle imahe" elementtiming="big-image" id="myImage">
+ +
const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.url);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });
+ +
+

Note : Cet exemple utilise l'interface PerformanceObserver pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément PerformanceEntry.entryType afin d'utiliser l'interface PerformanceElementTiming.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Element Timing API','#dom-performanceelementtiming-url','PerformanceElementTiming.url')}}{{Spec2('Element Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceElementTiming.url")}}

diff --git a/files/fr/web/api/performanceentry/duration/index.html b/files/fr/web/api/performanceentry/duration/index.html deleted file mode 100644 index 8fa0aa4edf..0000000000 --- a/files/fr/web/api/performanceentry/duration/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: PerformanceEntry.duration -slug: Web/API/PerformanceEntry/duration -tags: - - API - - PerformanceEntry - - Property - - Propriété - - Reference - - Performance Web -translation_of: Web/API/PerformanceEntry/duration ---- -
{{APIRef("Performance Timeline API")}}
- -

La propriété duration renvoie un timestamp qui correspond à la durée de l'entrée de performance.

- -

{{AvailableInWorkers}}

- -

La valeur retournée par cette propriété dépend du type de l'entrée de performance :

- - - -

Cette propriété est en {{readonlyInline}}.

- -

Syntaxe

- -
entry.duration;
- -

Valeur de retour

- -

Un objet DOMHighResTimeStamp représentant la durée de l'entrée de performance. Si le concept de durée ne s'applique pas à une mesure de performance particulière, le navigateur peut choisir de renvoyer une durée de 0.

- -
-

Note : si l'entrée de performance a un entryType "resource" (c'est-à-dire que l'entrée est un objet PerformanceResourceTiming), cette propriété renvoie la différence entre les timestamps PerformanceEntry.responseEnd et PerformanceEntry.startTime.

-
- -

Exemple

- -

L'exemple suivant montre l'utilisation de la propriété duration.

- -
function run_PerformanceEntry() {
-  console.log("Support de PerformanceEntry ...");
-
-  if (performance.mark === undefined) {
-    console.log("... performance.mark N'est pas pris en charge");
-    return;
-  }
-
-  // Créer quelques entrées de performance via la méthode mark()
-  performance.mark("Begin");
-  do_work(50000);
-  performance.mark("End");
-
-  // Utilise getEntries() pour itérer à travers chaque entrée.
-  let p = performance.getEntries();
-  for (let i=0; i < p.length; i++) {
-    console.log("Entry[" + i + "]");
-    check_PerformanceEntry(p[i]);
-  }
-}
-function check_PerformanceEntry(obj) {
-  let properties = ["name", "entryType", "startTime", "duration"];
-  let methods = ["toJSON"];
-
-  for (let i=0; i < properties.length; i++) {
-    // check each property
-    let supported = properties[i] in obj;
-    if (supported)
-      console.log("..." + properties[i] + " = " + obj[properties[i]]);
-    else
-      console.log("..." + properties[i] + " = N'est pas pris en charge");
-  }
-  for (let i=0; i < methods.length; i++) {
-    // check each method
-    let supported = typeof obj[methods[i]] == "function";
-    if (supported) {
-      let js = obj[methods[i]]();
-      console.log("..." + methods[i] + "() = " + JSON.stringify(js));
-    } else {
-      console.log("..." + methods[i] + " = N'est pas pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-duration', - 'duration')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performanceentry-duration', - 'duration')}}{{Spec2('Performance Timeline')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceEntry.duration")}}

diff --git a/files/fr/web/api/performanceentry/duration/index.md b/files/fr/web/api/performanceentry/duration/index.md new file mode 100644 index 0000000000..8fa0aa4edf --- /dev/null +++ b/files/fr/web/api/performanceentry/duration/index.md @@ -0,0 +1,120 @@ +--- +title: PerformanceEntry.duration +slug: Web/API/PerformanceEntry/duration +tags: + - API + - PerformanceEntry + - Property + - Propriété + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry/duration +--- +
{{APIRef("Performance Timeline API")}}
+ +

La propriété duration renvoie un timestamp qui correspond à la durée de l'entrée de performance.

+ +

{{AvailableInWorkers}}

+ +

La valeur retournée par cette propriété dépend du type de l'entrée de performance :

+ + + +

Cette propriété est en {{readonlyInline}}.

+ +

Syntaxe

+ +
entry.duration;
+ +

Valeur de retour

+ +

Un objet DOMHighResTimeStamp représentant la durée de l'entrée de performance. Si le concept de durée ne s'applique pas à une mesure de performance particulière, le navigateur peut choisir de renvoyer une durée de 0.

+ +
+

Note : si l'entrée de performance a un entryType "resource" (c'est-à-dire que l'entrée est un objet PerformanceResourceTiming), cette propriété renvoie la différence entre les timestamps PerformanceEntry.responseEnd et PerformanceEntry.startTime.

+
+ +

Exemple

+ +

L'exemple suivant montre l'utilisation de la propriété duration.

+ +
function run_PerformanceEntry() {
+  console.log("Support de PerformanceEntry ...");
+
+  if (performance.mark === undefined) {
+    console.log("... performance.mark N'est pas pris en charge");
+    return;
+  }
+
+  // Créer quelques entrées de performance via la méthode mark()
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+
+  // Utilise getEntries() pour itérer à travers chaque entrée.
+  let p = performance.getEntries();
+  for (let i=0; i < p.length; i++) {
+    console.log("Entry[" + i + "]");
+    check_PerformanceEntry(p[i]);
+  }
+}
+function check_PerformanceEntry(obj) {
+  let properties = ["name", "entryType", "startTime", "duration"];
+  let methods = ["toJSON"];
+
+  for (let i=0; i < properties.length; i++) {
+    // check each property
+    let supported = properties[i] in obj;
+    if (supported)
+      console.log("..." + properties[i] + " = " + obj[properties[i]]);
+    else
+      console.log("..." + properties[i] + " = N'est pas pris en charge");
+  }
+  for (let i=0; i < methods.length; i++) {
+    // check each method
+    let supported = typeof obj[methods[i]] == "function";
+    if (supported) {
+      let js = obj[methods[i]]();
+      console.log("..." + methods[i] + "() = " + JSON.stringify(js));
+    } else {
+      console.log("..." + methods[i] + " = N'est pas pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-duration', + 'duration')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performanceentry-duration', + 'duration')}}{{Spec2('Performance Timeline')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceEntry.duration")}}

diff --git a/files/fr/web/api/performanceentry/entrytype/index.html b/files/fr/web/api/performanceentry/entrytype/index.html deleted file mode 100644 index 63ed9dc6c7..0000000000 --- a/files/fr/web/api/performanceentry/entrytype/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: PerformanceEntry.entryType -slug: Web/API/PerformanceEntry/entryType -tags: - - API - - Performance Timeline API - - PerformanceEntry - - Property - - Propriété - - Reference - - Performance Web -translation_of: Web/API/PerformanceEntry/entryType ---- -
{{APIRef("Performance Timeline API")}}
- -

La propriété entryType renvoie un DOMString représentant le type de mesure de performance tel que, par exemple, « mark ». Cette propriété est en lecture seule.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var type = entry.entryType;
- -

Valeur de retour

- -

La valeur de retour dépend du sous-type de l'objet PerformanceEntry et affecte la valeur de la propriété PerformanceEntry.name comme le montre le tableau ci-dessous.

- -

Noms des types d'entrée de performance

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurSous-typeType de propriété pour le nomDescription de la valeur du nom.
elementPerformanceElementTimingDOMStringRapporte le temps de chargement des éléments.
frame, navigationPerformanceFrameTiming, - PerformanceNavigationTimingURLL'adresse du document.
resourcePerformanceResourceTimingURLL'URL résolue de la ressource demandée. Cette valeur ne change pas même si la demande est redirigée.
markPerformanceMarkDOMStringLe nom utilisé lorsque la marque a été créée en appelant mark().
measurePerformanceMeasureDOMStringLe nom utilisé lorsque la mesure a été créée en appelant measure().
paintPerformancePaintTimingDOMStringSoit 'first-paint' ou 'first-contentful-paint'.
longtaskPerformanceLongTaskTimingDOMStringSignale les cas de tâches longues.
- -

Exemple

- -

L'exemple suivant montre l'utilisation de la propriété entryType.

- -
function run_PerformanceEntry() {
-
-  // Vérifie le support des fonctionnalités avant de continuer
-  if (performance.mark === undefined) {
-    console.log("performance.mark n'est pas pris en charge");
-    return;
-  }
-
-  // Crée une entrée de performance nommée "begin" via la méthode mark()
-  performance.mark("begin");
-
-  // Vérifie le type d'entrée de toutes les entrées "begin".
-  let entriesNamedBegin = performance.getEntriesByName("begin");
-  for (let i=0; i < entriesNamedBegin.length; i++) {
-    let typeOfEntry = entriesNamedBegin[i].entryType;
-    console.log("L'entrée est de type : " + typeOfEntry);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-entrytype', - 'entryType')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performanceentry-entrytype', - 'entryType')}}{{Spec2('Performance Timeline')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceEntry.entryType")}}

diff --git a/files/fr/web/api/performanceentry/entrytype/index.md b/files/fr/web/api/performanceentry/entrytype/index.md new file mode 100644 index 0000000000..63ed9dc6c7 --- /dev/null +++ b/files/fr/web/api/performanceentry/entrytype/index.md @@ -0,0 +1,138 @@ +--- +title: PerformanceEntry.entryType +slug: Web/API/PerformanceEntry/entryType +tags: + - API + - Performance Timeline API + - PerformanceEntry + - Property + - Propriété + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry/entryType +--- +
{{APIRef("Performance Timeline API")}}
+ +

La propriété entryType renvoie un DOMString représentant le type de mesure de performance tel que, par exemple, « mark ». Cette propriété est en lecture seule.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var type = entry.entryType;
+ +

Valeur de retour

+ +

La valeur de retour dépend du sous-type de l'objet PerformanceEntry et affecte la valeur de la propriété PerformanceEntry.name comme le montre le tableau ci-dessous.

+ +

Noms des types d'entrée de performance

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurSous-typeType de propriété pour le nomDescription de la valeur du nom.
elementPerformanceElementTimingDOMStringRapporte le temps de chargement des éléments.
frame, navigationPerformanceFrameTiming, + PerformanceNavigationTimingURLL'adresse du document.
resourcePerformanceResourceTimingURLL'URL résolue de la ressource demandée. Cette valeur ne change pas même si la demande est redirigée.
markPerformanceMarkDOMStringLe nom utilisé lorsque la marque a été créée en appelant mark().
measurePerformanceMeasureDOMStringLe nom utilisé lorsque la mesure a été créée en appelant measure().
paintPerformancePaintTimingDOMStringSoit 'first-paint' ou 'first-contentful-paint'.
longtaskPerformanceLongTaskTimingDOMStringSignale les cas de tâches longues.
+ +

Exemple

+ +

L'exemple suivant montre l'utilisation de la propriété entryType.

+ +
function run_PerformanceEntry() {
+
+  // Vérifie le support des fonctionnalités avant de continuer
+  if (performance.mark === undefined) {
+    console.log("performance.mark n'est pas pris en charge");
+    return;
+  }
+
+  // Crée une entrée de performance nommée "begin" via la méthode mark()
+  performance.mark("begin");
+
+  // Vérifie le type d'entrée de toutes les entrées "begin".
+  let entriesNamedBegin = performance.getEntriesByName("begin");
+  for (let i=0; i < entriesNamedBegin.length; i++) {
+    let typeOfEntry = entriesNamedBegin[i].entryType;
+    console.log("L'entrée est de type : " + typeOfEntry);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-entrytype', + 'entryType')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performanceentry-entrytype', + 'entryType')}}{{Spec2('Performance Timeline')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceEntry.entryType")}}

diff --git a/files/fr/web/api/performanceentry/index.html b/files/fr/web/api/performanceentry/index.html deleted file mode 100644 index 32e388a73b..0000000000 --- a/files/fr/web/api/performanceentry/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: PerformanceEntry -slug: Web/API/PerformanceEntry -tags: - - API - - Interface - - Performance Timeline API - - PerformanceEntry - - Reference - - Performance Web -translation_of: Web/API/PerformanceEntry ---- -
{{APIRef("Performance Timeline API")}}
- -

L'objet PerformanceEntry encapsule une seule mesure de performance qui fait partie de la chronologie de performance. Une entrée de performance peut être créée directement en faisant une marque ou une mesure (par exemple en appelant la méthode mark()) à un point explicite d'une application. Les entrées de performance sont également créées de manière indirecte, par exemple en chargeant une ressource (telle qu'une image).

- -

Les instances PerformanceEntry auront toujours l'un des sous-types suivants :

- - - -

{{AvailableInWorkers}}

- -

Propriétés

- -
-
PerformanceEntry.name {{readonlyInline}}
-
Une valeur qui précise davantage la valeur renvoyée par la propriété PerformanceEntry.entryType. La valeur des deux dépend du sous-type. Voir la page de la propriété pour les valeurs valides.
-
PerformanceEntry.entryType {{readonlyInline}}
-
Une chaîne de caractère DOMString représentant le type de mesure de performance comme, par exemple, "mark". Voir la page des propriétés pour les valeurs valides.
-
PerformanceEntry.startTime {{readonlyInline}}
-
Un objet DOMHighResTimeStamp représentant l'heure de départ de la mesure de performance.
-
PerformanceEntry.duration {{readonlyInline}}
-
Un objet DOMHighResTimeStamp représentant la valeur temporelle de la durée de l'événement de performance.
-
- -

Méthodes

- -
-
PerformanceEntry.toJSON()
-
Renvoie une représentation JSON de l'objet PerformanceEntry.
-
- -

Exemple

- -

L'exemple suivant vérifie toutes les propriétés PerformanceEntry pour voir si le navigateur les prend en charge et, le cas échéant, écrit leurs valeurs dans la console.

- -
function print_PerformanceEntries() {
-  // Utilise getEntries() pour obtenir une liste de toutes les entrées de performance.
-  let p = performance.getEntries();
-  for (let i = 0; i < p.length; i++) {
-    console.log("PerformanceEntry[" + i + "]");
-    print_PerformanceEntry(p[i]);
-  }
-}
-function print_PerformanceEntry(perfEntry) {
-  let properties = ["name",
-                    "entryType",
-                    "startTime",
-                    "duration"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // Vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " n'est PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing 3')}}{{Spec2('Resource Timing 3')}}
{{SpecName('Resource Timing 2')}}{{Spec2('Resource Timing 2')}}
{{SpecName('Resource Timing')}}{{Spec2('Resource Timing')}}Ajoute l'interface PerformanceResourceTiming et la valeur resource pour entryType.
{{SpecName('Navigation Timing Level 2')}}{{Spec2('Navigation Timing Level 2')}}
{{SpecName('Navigation Timing')}}{{Spec2('Navigation Timing')}}Ajoute l'interface PerformanceNavigationTiming et la valeur navigation pour entryType.
{{SpecName('User Timing Level 2')}}{{Spec2('User Timing Level 2')}}
{{SpecName('User Timing')}}{{Spec2('User Timing')}}Ajoute les interfaces PerformanceMark et PerformanceMeasure ainsi que les valeurs mark et measure pour entryType.
{{SpecName('Frame Timing')}}{{Spec2('Frame Timing')}}Ajoute l'interface PerformanceFrameTiming et la valeur frame pour entryType.
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry', 'PerformanceEntry')}}{{Spec2('Performance Timeline Level 2')}}Ajout de la méthode de sérialisation toJSON().
{{SpecName('Performance Timeline', '#dom-performanceentry', 'PerformanceEntry')}}{{Spec2('Performance Timeline')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceEntry")}}

diff --git a/files/fr/web/api/performanceentry/index.md b/files/fr/web/api/performanceentry/index.md new file mode 100644 index 0000000000..32e388a73b --- /dev/null +++ b/files/fr/web/api/performanceentry/index.md @@ -0,0 +1,147 @@ +--- +title: PerformanceEntry +slug: Web/API/PerformanceEntry +tags: + - API + - Interface + - Performance Timeline API + - PerformanceEntry + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry +--- +
{{APIRef("Performance Timeline API")}}
+ +

L'objet PerformanceEntry encapsule une seule mesure de performance qui fait partie de la chronologie de performance. Une entrée de performance peut être créée directement en faisant une marque ou une mesure (par exemple en appelant la méthode mark()) à un point explicite d'une application. Les entrées de performance sont également créées de manière indirecte, par exemple en chargeant une ressource (telle qu'une image).

+ +

Les instances PerformanceEntry auront toujours l'un des sous-types suivants :

+ + + +

{{AvailableInWorkers}}

+ +

Propriétés

+ +
+
PerformanceEntry.name {{readonlyInline}}
+
Une valeur qui précise davantage la valeur renvoyée par la propriété PerformanceEntry.entryType. La valeur des deux dépend du sous-type. Voir la page de la propriété pour les valeurs valides.
+
PerformanceEntry.entryType {{readonlyInline}}
+
Une chaîne de caractère DOMString représentant le type de mesure de performance comme, par exemple, "mark". Voir la page des propriétés pour les valeurs valides.
+
PerformanceEntry.startTime {{readonlyInline}}
+
Un objet DOMHighResTimeStamp représentant l'heure de départ de la mesure de performance.
+
PerformanceEntry.duration {{readonlyInline}}
+
Un objet DOMHighResTimeStamp représentant la valeur temporelle de la durée de l'événement de performance.
+
+ +

Méthodes

+ +
+
PerformanceEntry.toJSON()
+
Renvoie une représentation JSON de l'objet PerformanceEntry.
+
+ +

Exemple

+ +

L'exemple suivant vérifie toutes les propriétés PerformanceEntry pour voir si le navigateur les prend en charge et, le cas échéant, écrit leurs valeurs dans la console.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntries() pour obtenir une liste de toutes les entrées de performance.
+  let p = performance.getEntries();
+  for (let i = 0; i < p.length; i++) {
+    console.log("PerformanceEntry[" + i + "]");
+    print_PerformanceEntry(p[i]);
+  }
+}
+function print_PerformanceEntry(perfEntry) {
+  let properties = ["name",
+                    "entryType",
+                    "startTime",
+                    "duration"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // Vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " n'est PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing 3')}}{{Spec2('Resource Timing 3')}}
{{SpecName('Resource Timing 2')}}{{Spec2('Resource Timing 2')}}
{{SpecName('Resource Timing')}}{{Spec2('Resource Timing')}}Ajoute l'interface PerformanceResourceTiming et la valeur resource pour entryType.
{{SpecName('Navigation Timing Level 2')}}{{Spec2('Navigation Timing Level 2')}}
{{SpecName('Navigation Timing')}}{{Spec2('Navigation Timing')}}Ajoute l'interface PerformanceNavigationTiming et la valeur navigation pour entryType.
{{SpecName('User Timing Level 2')}}{{Spec2('User Timing Level 2')}}
{{SpecName('User Timing')}}{{Spec2('User Timing')}}Ajoute les interfaces PerformanceMark et PerformanceMeasure ainsi que les valeurs mark et measure pour entryType.
{{SpecName('Frame Timing')}}{{Spec2('Frame Timing')}}Ajoute l'interface PerformanceFrameTiming et la valeur frame pour entryType.
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry', 'PerformanceEntry')}}{{Spec2('Performance Timeline Level 2')}}Ajout de la méthode de sérialisation toJSON().
{{SpecName('Performance Timeline', '#dom-performanceentry', 'PerformanceEntry')}}{{Spec2('Performance Timeline')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceEntry")}}

diff --git a/files/fr/web/api/performanceentry/name/index.html b/files/fr/web/api/performanceentry/name/index.html deleted file mode 100644 index 6e8c05fe4e..0000000000 --- a/files/fr/web/api/performanceentry/name/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: PerformanceEntry.name -slug: Web/API/PerformanceEntry/name -tags: - - API - - Performance Timeline API - - PerformanceEntry - - Property - - Propriété - - Reference - - Performance Web -translation_of: Web/API/PerformanceEntry/name ---- -
{{APIRef("Performance Timeline API")}}
- -

La propriété name de l'interface PerformanceEntry renvoie une valeur qui précise davantage la valeur renvoyée par la propriété PerformanceEntry.entryType. Cette propriété est en lecture seule.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var name = entry.name;
-
- -

Valeur de retour

- -

La valeur de retour dépend du sous-type de l'objet PerformanceEntry et de la valeur de PerformanceEntry.entryType, comme le montre le tableau ci-dessous.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de valeur pour nameSous-typeType (entryType)Description
URLPerformanceFrameTiming, - PerformanceNavigationTimingframe, navigationL'adresse du document.
URLPerformanceResourceTimingresourceL'URL résolue de la ressource demandée. Cette valeur ne change pas même si la demande est redirigée.
DOMStringPerformanceMarkmarkLe nom utilisé lorsque le marqueur a été créé en appelant mark().
DOMStringPerformanceMeasuremeasureLe nom utilisé lorsque la mesure a été créée en appelant measure().
DOMStringPerformancePaintTimingpaintSoit 'first-paint' ou 'first-contentful-paint'.
- -

Exemple

- -

L'exemple suivant montre l'utilisation de la propriété name.

- -
function run_PerformanceEntry() {
-  console.log("Support de PerformanceEntry ...");
-
-  if (performance.mark === undefined) {
-    console.log("... performance.mark n'est pas pris en charge");
-    return;
-  }
-
-  // Crée quelques entrées de performance via la méthode mark()
-  performance.mark("Begin");
-  do_work(50000);
-  performance.mark("End");
-
-  // Utilise getEntries() pour itérer à travers chaque entrée.
-  let p = performance.getEntries();
-  for (let i = 0; i < p.length; i++) {
-    console.log("Entry[" + i + "]");
-    check_PerformanceEntry(p[i]);
-  }
-}
-function check_PerformanceEntry(obj) {
-  let properties = ["name", "entryType", "startTime", "duration"];
-  let methods = ["toJSON"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // Vérifie chaque propriété
-    let supported = properties[i] in obj;
-    if (supported)
-      console.log("..." + properties[i] + " = " + obj[properties[i]]);
-    else
-      console.log("..." + properties[i] + " = Not supported");
-  }
-  for (let i = 0; i < methods.length; i++) {
-    // Vérifie chaque méthode
-    let supported = typeof obj[methods[i]] == "function";
-    if (supported) {
-      let js = obj[methods[i]]();
-      console.log("..." + methods[i] + "() = " + JSON.stringify(js));
-    } else {
-      console.log("..." + methods[i] + " = Not supported");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-name', - 'name')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performanceentry-name', - 'name')}}{{Spec2('Performance Timeline')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceEntry.name")}}

diff --git a/files/fr/web/api/performanceentry/name/index.md b/files/fr/web/api/performanceentry/name/index.md new file mode 100644 index 0000000000..6e8c05fe4e --- /dev/null +++ b/files/fr/web/api/performanceentry/name/index.md @@ -0,0 +1,150 @@ +--- +title: PerformanceEntry.name +slug: Web/API/PerformanceEntry/name +tags: + - API + - Performance Timeline API + - PerformanceEntry + - Property + - Propriété + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry/name +--- +
{{APIRef("Performance Timeline API")}}
+ +

La propriété name de l'interface PerformanceEntry renvoie une valeur qui précise davantage la valeur renvoyée par la propriété PerformanceEntry.entryType. Cette propriété est en lecture seule.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var name = entry.name;
+
+ +

Valeur de retour

+ +

La valeur de retour dépend du sous-type de l'objet PerformanceEntry et de la valeur de PerformanceEntry.entryType, comme le montre le tableau ci-dessous.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de valeur pour nameSous-typeType (entryType)Description
URLPerformanceFrameTiming, + PerformanceNavigationTimingframe, navigationL'adresse du document.
URLPerformanceResourceTimingresourceL'URL résolue de la ressource demandée. Cette valeur ne change pas même si la demande est redirigée.
DOMStringPerformanceMarkmarkLe nom utilisé lorsque le marqueur a été créé en appelant mark().
DOMStringPerformanceMeasuremeasureLe nom utilisé lorsque la mesure a été créée en appelant measure().
DOMStringPerformancePaintTimingpaintSoit 'first-paint' ou 'first-contentful-paint'.
+ +

Exemple

+ +

L'exemple suivant montre l'utilisation de la propriété name.

+ +
function run_PerformanceEntry() {
+  console.log("Support de PerformanceEntry ...");
+
+  if (performance.mark === undefined) {
+    console.log("... performance.mark n'est pas pris en charge");
+    return;
+  }
+
+  // Crée quelques entrées de performance via la méthode mark()
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+
+  // Utilise getEntries() pour itérer à travers chaque entrée.
+  let p = performance.getEntries();
+  for (let i = 0; i < p.length; i++) {
+    console.log("Entry[" + i + "]");
+    check_PerformanceEntry(p[i]);
+  }
+}
+function check_PerformanceEntry(obj) {
+  let properties = ["name", "entryType", "startTime", "duration"];
+  let methods = ["toJSON"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // Vérifie chaque propriété
+    let supported = properties[i] in obj;
+    if (supported)
+      console.log("..." + properties[i] + " = " + obj[properties[i]]);
+    else
+      console.log("..." + properties[i] + " = Not supported");
+  }
+  for (let i = 0; i < methods.length; i++) {
+    // Vérifie chaque méthode
+    let supported = typeof obj[methods[i]] == "function";
+    if (supported) {
+      let js = obj[methods[i]]();
+      console.log("..." + methods[i] + "() = " + JSON.stringify(js));
+    } else {
+      console.log("..." + methods[i] + " = Not supported");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-name', + 'name')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performanceentry-name', + 'name')}}{{Spec2('Performance Timeline')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceEntry.name")}}

diff --git a/files/fr/web/api/performanceentry/starttime/index.html b/files/fr/web/api/performanceentry/starttime/index.html deleted file mode 100644 index e8f625d52f..0000000000 --- a/files/fr/web/api/performanceentry/starttime/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: PerformanceEntry.startTime -slug: Web/API/PerformanceEntry/startTime -tags: - - API - - Performance Timeline API - - PerformanceEntry - - Property - - Propriété - - Reference - - Performance Web -translation_of: Web/API/PerformanceEntry/startTime ---- -
{{APIRef("Performance Timeline API")}}
- -

La propriété startTime renvoie le premier timestamp enregistré pour l'entrée de performance.

- -

{{AvailableInWorkers}}

- -

La valeur renvoyée par cette propriété dépend du type de l'entrée de performance :

- - - -

Cette propriété est en lecture seule.

- -

Syntaxe

- -
entry.startTime;
- -

Valeur de retour

- -

Un objet DOMHighResTimeStamp représentant le premier horodatage lorsque l'entrée de performance a été créée.

- -
-

Note : Si l'entrée de performance a un entryType "resource" (c'est-à-dire que l'entrée est un objet PerformanceResourceTiming), cette propriété renvoie la valeur de l'horodatage fournie par PerformanceResourceTiming.fetchStart.

-
- -

Exemple

- -

L'exemple suivant montre l'utilisation de la propriété startTime.

- -
function run_PerformanceEntry() {
-  console.log("Support de PerformanceEntry ...");
-
-  if (performance.mark === undefined) {
-    console.log("... performance.mark n'est pas pris en charge");
-    return;
-  }
-
-  // Crée quelques entrées de performance via la méthode mark()
-  performance.mark("Begin");
-  do_work(50000);
-  performance.mark("End");
-
-  // Utilise getEntries() pour itérer à travers chaque entrée
-  let p = performance.getEntries();
-  for (let i = 0; i < p.length; i++) {
-    log("Entry[" + i + "]");
-    check_PerformanceEntry(p[i]);
-  }
-}
-function check_PerformanceEntry(obj) {
-  let properties = ["name", "entryType", "startTime", "duration"];
-  let methods = ["toJSON"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // On vérifie chaque propriété
-    let supported = properties[i] in obj;
-    if (supported)
-      log("..." + properties[i] + " = " + obj[properties[i]]);
-    else
-      log("..." + properties[i] + " = N'est pas pris en charge");
-  }
-  for (let i = 0; i < methods.length; i++) {
-    // On vérifie chaque méthode
-    let supported = typeof obj[methods[i]] == "function";
-    if (supported) {
-      let js = obj[methods[i]]();
-      log("..." + methods[i] + "() = " + JSON.stringify(js));
-    } else {
-      log("..." + methods[i] + " = N'est pas pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-starttime', - 'startTime')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performanceentry-starttime', - 'startTime')}}{{Spec2('Performance Timeline')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceEntry.startTime")}}

diff --git a/files/fr/web/api/performanceentry/starttime/index.md b/files/fr/web/api/performanceentry/starttime/index.md new file mode 100644 index 0000000000..e8f625d52f --- /dev/null +++ b/files/fr/web/api/performanceentry/starttime/index.md @@ -0,0 +1,122 @@ +--- +title: PerformanceEntry.startTime +slug: Web/API/PerformanceEntry/startTime +tags: + - API + - Performance Timeline API + - PerformanceEntry + - Property + - Propriété + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry/startTime +--- +
{{APIRef("Performance Timeline API")}}
+ +

La propriété startTime renvoie le premier timestamp enregistré pour l'entrée de performance.

+ +

{{AvailableInWorkers}}

+ +

La valeur renvoyée par cette propriété dépend du type de l'entrée de performance :

+ + + +

Cette propriété est en lecture seule.

+ +

Syntaxe

+ +
entry.startTime;
+ +

Valeur de retour

+ +

Un objet DOMHighResTimeStamp représentant le premier horodatage lorsque l'entrée de performance a été créée.

+ +
+

Note : Si l'entrée de performance a un entryType "resource" (c'est-à-dire que l'entrée est un objet PerformanceResourceTiming), cette propriété renvoie la valeur de l'horodatage fournie par PerformanceResourceTiming.fetchStart.

+
+ +

Exemple

+ +

L'exemple suivant montre l'utilisation de la propriété startTime.

+ +
function run_PerformanceEntry() {
+  console.log("Support de PerformanceEntry ...");
+
+  if (performance.mark === undefined) {
+    console.log("... performance.mark n'est pas pris en charge");
+    return;
+  }
+
+  // Crée quelques entrées de performance via la méthode mark()
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+
+  // Utilise getEntries() pour itérer à travers chaque entrée
+  let p = performance.getEntries();
+  for (let i = 0; i < p.length; i++) {
+    log("Entry[" + i + "]");
+    check_PerformanceEntry(p[i]);
+  }
+}
+function check_PerformanceEntry(obj) {
+  let properties = ["name", "entryType", "startTime", "duration"];
+  let methods = ["toJSON"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // On vérifie chaque propriété
+    let supported = properties[i] in obj;
+    if (supported)
+      log("..." + properties[i] + " = " + obj[properties[i]]);
+    else
+      log("..." + properties[i] + " = N'est pas pris en charge");
+  }
+  for (let i = 0; i < methods.length; i++) {
+    // On vérifie chaque méthode
+    let supported = typeof obj[methods[i]] == "function";
+    if (supported) {
+      let js = obj[methods[i]]();
+      log("..." + methods[i] + "() = " + JSON.stringify(js));
+    } else {
+      log("..." + methods[i] + " = N'est pas pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-starttime', + 'startTime')}}{{Spec2('Performance Timeline Level 2')}}
{{SpecName('Performance Timeline', '#dom-performanceentry-starttime', + 'startTime')}}{{Spec2('Performance Timeline')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceEntry.startTime")}}

diff --git a/files/fr/web/api/performanceentry/tojson/index.html b/files/fr/web/api/performanceentry/tojson/index.html deleted file mode 100644 index 9450e8f3f0..0000000000 --- a/files/fr/web/api/performanceentry/tojson/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: PerformanceEntry.toJSON() -slug: Web/API/PerformanceEntry/toJSON -tags: - - API - - Method - - Méthode - - Performance Timeline API - - PerformanceEntry - - Reference - - Performance Web -translation_of: Web/API/PerformanceEntry/toJSON ---- -
{{APIRef("Performance Timeline API")}}
- -

La méthode toJSON() permet de sérialiser l'objet PerformanceEntry courant et renvoie une représentation JSON de l'objet.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
let jsonObj = perfEntry.toJSON();
-
- -

Arguments

- -

Aucun.

- -

Valeur de retour

- -
-
json
-
Un objet JSON qui est la sérialisation de l'objet PerformanceEntry.
-
- -

Exemple

- -

L'exemple suivant montre l'utilisation de la méthode toJSON().

- -
function run_PerformanceEntry() {
-  console.log("Support de PerformanceEntry ...");
-
-  if (performance.mark === undefined) {
-    console.log("... performance.mark n'est pas pris en charge");
-    return;
-  }
-
-  // Crée quelques entrées de performance via la méthode mark()
-  performance.mark("Begin");
-  do_work(50000);
-  performance.mark("End");
-
-  // Utilise getEntries() pour itérer à travers chaque entrée.
-  let p = performance.getEntries();
-  for (let i = 0; i < p.length; i++) {
-    console.log("Entry[" + i + "]");
-    check_PerformanceEntry(p[i]);
-  }
-}
-function check_PerformanceEntry(obj) {
-  let properties = ["name", "entryType", "startTime", "duration"];
-  let methods = ["toJSON"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // On vérifie chaque propriété
-    let supported = properties[i] in obj;
-    if (supported)
-      console.log("..." + properties[i] + " = " + obj[properties[i]]);
-    else
-      console.log("..." + properties[i] + " = N'est pas pris en charge");
-  }
-  for (let i = 0; i < methods.length; i++) {
-    // On vérifie chaque méthode
-    let supported = typeof obj[methods[i]] == "function";
-    if (supported) {
-      let js = obj[methods[i]]();
-      console.log("..." + methods[i] + "() = " + JSON.stringify(js));
-    } else {
-      console.log("..." + methods[i] + " = N'est pas pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-tojson', - 'toJSON')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode toJSON().
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceEntry.toJSON")}}

diff --git a/files/fr/web/api/performanceentry/tojson/index.md b/files/fr/web/api/performanceentry/tojson/index.md new file mode 100644 index 0000000000..9450e8f3f0 --- /dev/null +++ b/files/fr/web/api/performanceentry/tojson/index.md @@ -0,0 +1,107 @@ +--- +title: PerformanceEntry.toJSON() +slug: Web/API/PerformanceEntry/toJSON +tags: + - API + - Method + - Méthode + - Performance Timeline API + - PerformanceEntry + - Reference + - Performance Web +translation_of: Web/API/PerformanceEntry/toJSON +--- +
{{APIRef("Performance Timeline API")}}
+ +

La méthode toJSON() permet de sérialiser l'objet PerformanceEntry courant et renvoie une représentation JSON de l'objet.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
let jsonObj = perfEntry.toJSON();
+
+ +

Arguments

+ +

Aucun.

+ +

Valeur de retour

+ +
+
json
+
Un objet JSON qui est la sérialisation de l'objet PerformanceEntry.
+
+ +

Exemple

+ +

L'exemple suivant montre l'utilisation de la méthode toJSON().

+ +
function run_PerformanceEntry() {
+  console.log("Support de PerformanceEntry ...");
+
+  if (performance.mark === undefined) {
+    console.log("... performance.mark n'est pas pris en charge");
+    return;
+  }
+
+  // Crée quelques entrées de performance via la méthode mark()
+  performance.mark("Begin");
+  do_work(50000);
+  performance.mark("End");
+
+  // Utilise getEntries() pour itérer à travers chaque entrée.
+  let p = performance.getEntries();
+  for (let i = 0; i < p.length; i++) {
+    console.log("Entry[" + i + "]");
+    check_PerformanceEntry(p[i]);
+  }
+}
+function check_PerformanceEntry(obj) {
+  let properties = ["name", "entryType", "startTime", "duration"];
+  let methods = ["toJSON"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // On vérifie chaque propriété
+    let supported = properties[i] in obj;
+    if (supported)
+      console.log("..." + properties[i] + " = " + obj[properties[i]]);
+    else
+      console.log("..." + properties[i] + " = N'est pas pris en charge");
+  }
+  for (let i = 0; i < methods.length; i++) {
+    // On vérifie chaque méthode
+    let supported = typeof obj[methods[i]] == "function";
+    if (supported) {
+      let js = obj[methods[i]]();
+      console.log("..." + methods[i] + "() = " + JSON.stringify(js));
+    } else {
+      console.log("..." + methods[i] + " = N'est pas pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceentry-tojson', + 'toJSON')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode toJSON().
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceEntry.toJSON")}}

diff --git a/files/fr/web/api/performanceeventtiming/index.html b/files/fr/web/api/performanceeventtiming/index.html deleted file mode 100644 index 117fefc656..0000000000 --- a/files/fr/web/api/performanceeventtiming/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: PerformanceEventTiming -slug: Web/API/PerformanceEventTiming -tags: - - API - - Event Timing API - - Interface - - Performance - - PerformanceEventTiming - - Reference - - Performance Web -translation_of: Web/API/PerformanceEventTiming ---- -
{{APIRef("Event Timing API")}}
- -

L'interface PerformanceEventTiming des événements de l'Event Timing API fournit des informations de chronométrage pour les types d'événements énumérés ci-dessous.

- - - -

Propriétés

- -
-
PerformanceEventTiming.processingStart lecture seule {{ExperimentalBadge}}
-
Retourne un DOMHighResTimeStamp représentant l'heure à laquelle la diffusion des événements a commencé.
-
PerformanceEventTiming.processingEnd lecture seule {{ExperimentalBadge}}
-
Retourne un DOMHighResTimeStamp représentant l'heure à laquelle la diffusion de l'événement s'est terminée.
-
PerformanceEventTiming.cancelable lecture seule {{ExperimentalBadge}}
-
Retourne un Boolean représentant l'attribut annulable de l'événement associé.
-
PerformanceEventTiming.target lecture seule {{NonStandardBadge}}
-
Retourne un Node représentant la dernière cible de l'événement associé, si elle n'est pas supprimée.
-
- -

Méthodes

- -
-
PerformanceEventTiming.toJSON() {{ExperimentalBadge}}
-
Convertit l'objet PerformanceEventTiming en JSON.
-
- -

Exemples

- -

L'exemple suivant montre comment utiliser l'API pour tous les événements :

- -
const observer = new PerformanceObserver(function(list) {
-  const perfEntries = list.getEntries().forEach(entry => {
-    // Durée totale
-    const inputDuration = entry.duration;
-    // Retard d'entrée (avant l'événement de traitement)
-    const inputDelay = entry.processingStart - entry.startTime;
-    // Temps de traitement d'un événement synchrone (entre le début et la fin de la diffusion).
-    const inputSyncProcessingTime = entry.processingEnd - entry.processingStart;
-  });
-});
-// Enregistre un observateur pour l'événement.
-observer.observe({entryTypes: ["event"]});
-
- -

Nous pouvons également interroger directement le premier délai d'entrée. Le premier délai d'entrée ou « FID : First input delay », mesure le temps entre le moment où un utilisateur interagit pour la première fois avec une page (c'est-à-dire lorsqu'il clique sur un lien ou sur un bouton) et le moment où le navigateur est effectivement en mesure de commencer à traiter les gestionnaires d'événements en réponse à cette interaction.

- -
// Pour savoir si (et quand) la page a été masquée pour la première fois, voir :
-// https://github.com/w3c/page-visibility/issues/29
-// NOTE : idéalement, cette vérification devrait être effectuée dans le <head> du document
-// pour éviter les cas où l'état de visibilité change avant l'exécution de ce code.
-let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
-document.addEventListener('visibilitychange', (event) => {
-  firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
-}, {once: true});
-
-// Envoie les données transmises à un point de terminaison analytique. Ce code
-// utilise `/analytics` ; vous pouvez le remplacer par votre propre URL.
-function sendToAnalytics(data) {
-  const body = JSON.stringify(data);
-  // Utilise `navigator.sendBeacon()` si disponible, en revenant à `fetch()`.
-  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
-      fetch('/analytics', {body, method: 'POST', keepalive: true});
-}
-
-// Utilise un try/catch au lieu de la fonction de détection de la prise en charge de `first-input`
-// car certains navigateurs lancent des requêtes lorsqu'ils utilisent la nouvelle option `type`.
-// https://bugs.webkit.org/show_bug.cgi?id=209216
-try {
-  function onFirstInputEntry(entry) {
-    // Ne rapporte le FID que si la page n'était pas cachée avant que
-    // l'entrée soit envoyée. Cela se produit généralement lorsqu'une
-    // page est chargée dans un onglet en arrière-plan.
-    if (entry.startTime < firstHiddenTime) {
-      const fid = entry.processingStart - entry.startTime;
-
-      // Rapporte la valeur du FID à un terminal d'analyse.
-      sendToAnalytics({fid});
-    }
-  }
-
-  // Crée un PerformanceObserver qui appelle `onFirstInputEntry` pour chaque entrée.
-  const po = new PerformanceObserver((entryList) => {
-    entryList.getEntries().forEach(onFirstInputEntry);
-  });
-
-  // Observe les entrées de type `first-input`, y compris les entrées en mémoire tampon,
-  // c'est-à-dire les entrées qui ont eu lieu avant d'appeler `observe()` ci-dessous.
-  po.observe({
-    type: 'first-input',
-    buffered: true,
-  });
-} catch (e) {
-  // Ne fait rien si le navigateur ne prend pas en charge cette API.
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Event Timing API','#sec-performance-event-timing','PerformanceEventTiming')}}{{Spec2('Event Timing API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceEventTiming")}}

diff --git a/files/fr/web/api/performanceeventtiming/index.md b/files/fr/web/api/performanceeventtiming/index.md new file mode 100644 index 0000000000..117fefc656 --- /dev/null +++ b/files/fr/web/api/performanceeventtiming/index.md @@ -0,0 +1,168 @@ +--- +title: PerformanceEventTiming +slug: Web/API/PerformanceEventTiming +tags: + - API + - Event Timing API + - Interface + - Performance + - PerformanceEventTiming + - Reference + - Performance Web +translation_of: Web/API/PerformanceEventTiming +--- +
{{APIRef("Event Timing API")}}
+ +

L'interface PerformanceEventTiming des événements de l'Event Timing API fournit des informations de chronométrage pour les types d'événements énumérés ci-dessous.

+ + + +

Propriétés

+ +
+
PerformanceEventTiming.processingStart lecture seule {{ExperimentalBadge}}
+
Retourne un DOMHighResTimeStamp représentant l'heure à laquelle la diffusion des événements a commencé.
+
PerformanceEventTiming.processingEnd lecture seule {{ExperimentalBadge}}
+
Retourne un DOMHighResTimeStamp représentant l'heure à laquelle la diffusion de l'événement s'est terminée.
+
PerformanceEventTiming.cancelable lecture seule {{ExperimentalBadge}}
+
Retourne un Boolean représentant l'attribut annulable de l'événement associé.
+
PerformanceEventTiming.target lecture seule {{NonStandardBadge}}
+
Retourne un Node représentant la dernière cible de l'événement associé, si elle n'est pas supprimée.
+
+ +

Méthodes

+ +
+
PerformanceEventTiming.toJSON() {{ExperimentalBadge}}
+
Convertit l'objet PerformanceEventTiming en JSON.
+
+ +

Exemples

+ +

L'exemple suivant montre comment utiliser l'API pour tous les événements :

+ +
const observer = new PerformanceObserver(function(list) {
+  const perfEntries = list.getEntries().forEach(entry => {
+    // Durée totale
+    const inputDuration = entry.duration;
+    // Retard d'entrée (avant l'événement de traitement)
+    const inputDelay = entry.processingStart - entry.startTime;
+    // Temps de traitement d'un événement synchrone (entre le début et la fin de la diffusion).
+    const inputSyncProcessingTime = entry.processingEnd - entry.processingStart;
+  });
+});
+// Enregistre un observateur pour l'événement.
+observer.observe({entryTypes: ["event"]});
+
+ +

Nous pouvons également interroger directement le premier délai d'entrée. Le premier délai d'entrée ou « FID : First input delay », mesure le temps entre le moment où un utilisateur interagit pour la première fois avec une page (c'est-à-dire lorsqu'il clique sur un lien ou sur un bouton) et le moment où le navigateur est effectivement en mesure de commencer à traiter les gestionnaires d'événements en réponse à cette interaction.

+ +
// Pour savoir si (et quand) la page a été masquée pour la première fois, voir :
+// https://github.com/w3c/page-visibility/issues/29
+// NOTE : idéalement, cette vérification devrait être effectuée dans le <head> du document
+// pour éviter les cas où l'état de visibilité change avant l'exécution de ce code.
+let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
+document.addEventListener('visibilitychange', (event) => {
+  firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
+}, {once: true});
+
+// Envoie les données transmises à un point de terminaison analytique. Ce code
+// utilise `/analytics` ; vous pouvez le remplacer par votre propre URL.
+function sendToAnalytics(data) {
+  const body = JSON.stringify(data);
+  // Utilise `navigator.sendBeacon()` si disponible, en revenant à `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+// Utilise un try/catch au lieu de la fonction de détection de la prise en charge de `first-input`
+// car certains navigateurs lancent des requêtes lorsqu'ils utilisent la nouvelle option `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  function onFirstInputEntry(entry) {
+    // Ne rapporte le FID que si la page n'était pas cachée avant que
+    // l'entrée soit envoyée. Cela se produit généralement lorsqu'une
+    // page est chargée dans un onglet en arrière-plan.
+    if (entry.startTime < firstHiddenTime) {
+      const fid = entry.processingStart - entry.startTime;
+
+      // Rapporte la valeur du FID à un terminal d'analyse.
+      sendToAnalytics({fid});
+    }
+  }
+
+  // Crée un PerformanceObserver qui appelle `onFirstInputEntry` pour chaque entrée.
+  const po = new PerformanceObserver((entryList) => {
+    entryList.getEntries().forEach(onFirstInputEntry);
+  });
+
+  // Observe les entrées de type `first-input`, y compris les entrées en mémoire tampon,
+  // c'est-à-dire les entrées qui ont eu lieu avant d'appeler `observe()` ci-dessous.
+  po.observe({
+    type: 'first-input',
+    buffered: true,
+  });
+} catch (e) {
+  // Ne fait rien si le navigateur ne prend pas en charge cette API.
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Event Timing API','#sec-performance-event-timing','PerformanceEventTiming')}}{{Spec2('Event Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceEventTiming")}}

diff --git a/files/fr/web/api/performanceframetiming/index.html b/files/fr/web/api/performanceframetiming/index.html deleted file mode 100644 index e1c86e7c39..0000000000 --- a/files/fr/web/api/performanceframetiming/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: PerformanceFrameTiming -slug: Web/API/PerformanceFrameTiming -tags: - - API - - Frame Timing API - - Interface - - Performance Timeline API - - PerformanceFrameTiming - - Reference - - Performance Web -translation_of: Web/API/PerformanceFrameTiming ---- -
{{SeeCompatTable}}{{APIRef("Frame Timing API")}}
- -

PerformanceFrameTiming est une interface abstraite qui fournit des données d'horodatage de « frame » pour la boucle d'événements du navigateur. Une « frame » représente la quantité de travail qu'un navigateur effectue dans une itération de la boucle d'événements, comme le traitement des événements DOM, le redimensionnement, le défilement, le rendu, les animations CSS, etc. Un frame rate de 60fps (images par seconde) pour un taux de rafraîchissement de 60Hz est l'objectif pour une expérience utilisateur réactive. Cela signifie que le navigateur doit traiter une image en environ 16,7 ms.

- -

Une application peut enregistrer un PerformanceObserver pour une « frame » de l'entrée de performance et l'observateur peut récupérer des données sur la durée de chaque événement. Ces informations peuvent être utilisées pour aider à identifier les choses qui consomment trop de temps pour offrir une bonne expérience utilisateur.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Cette interface n'a pas de propriétés mais elle étend les propriétés de PerformanceEntry suivantes (c'est-à-dire quand le type de l'entrée de performance vaut « frame ») en restreignant les propriétés comme suit :

- -
-
PerformanceEntry.entryType
-
Retourne « frame ».
-
PerformanceEntry.name
-
Renvoie l'adresse du document.
-
PerformanceEntry.startTime
-
Retourne le timestamp (moment) où le cadre a été lancé.
-
PerformanceEntry.duration
-
Retourne un timestamp indiquant la différence entre le startTime de deux images successives.
-
- -

Méthodes

- -

Cette interface n'a pas de méthodes.

- -

Exemple

- -

Voir l'exemple dans l'article Utilisation de l'API Frame Timing.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Frame Timing', '#performanceframetiming-interface', 'PerformanceFrameTiming')}}{{Spec2('Frame Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceFrameTiming")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performanceframetiming/index.md b/files/fr/web/api/performanceframetiming/index.md new file mode 100644 index 0000000000..e1c86e7c39 --- /dev/null +++ b/files/fr/web/api/performanceframetiming/index.md @@ -0,0 +1,75 @@ +--- +title: PerformanceFrameTiming +slug: Web/API/PerformanceFrameTiming +tags: + - API + - Frame Timing API + - Interface + - Performance Timeline API + - PerformanceFrameTiming + - Reference + - Performance Web +translation_of: Web/API/PerformanceFrameTiming +--- +
{{SeeCompatTable}}{{APIRef("Frame Timing API")}}
+ +

PerformanceFrameTiming est une interface abstraite qui fournit des données d'horodatage de « frame » pour la boucle d'événements du navigateur. Une « frame » représente la quantité de travail qu'un navigateur effectue dans une itération de la boucle d'événements, comme le traitement des événements DOM, le redimensionnement, le défilement, le rendu, les animations CSS, etc. Un frame rate de 60fps (images par seconde) pour un taux de rafraîchissement de 60Hz est l'objectif pour une expérience utilisateur réactive. Cela signifie que le navigateur doit traiter une image en environ 16,7 ms.

+ +

Une application peut enregistrer un PerformanceObserver pour une « frame » de l'entrée de performance et l'observateur peut récupérer des données sur la durée de chaque événement. Ces informations peuvent être utilisées pour aider à identifier les choses qui consomment trop de temps pour offrir une bonne expérience utilisateur.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Cette interface n'a pas de propriétés mais elle étend les propriétés de PerformanceEntry suivantes (c'est-à-dire quand le type de l'entrée de performance vaut « frame ») en restreignant les propriétés comme suit :

+ +
+
PerformanceEntry.entryType
+
Retourne « frame ».
+
PerformanceEntry.name
+
Renvoie l'adresse du document.
+
PerformanceEntry.startTime
+
Retourne le timestamp (moment) où le cadre a été lancé.
+
PerformanceEntry.duration
+
Retourne un timestamp indiquant la différence entre le startTime de deux images successives.
+
+ +

Méthodes

+ +

Cette interface n'a pas de méthodes.

+ +

Exemple

+ +

Voir l'exemple dans l'article Utilisation de l'API Frame Timing.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Frame Timing', '#performanceframetiming-interface', 'PerformanceFrameTiming')}}{{Spec2('Frame Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceFrameTiming")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancelongtasktiming/attribution/index.html b/files/fr/web/api/performancelongtasktiming/attribution/index.html deleted file mode 100644 index c3e9c82ff3..0000000000 --- a/files/fr/web/api/performancelongtasktiming/attribution/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: PerformanceLongTaskTiming.attribution -slug: Web/API/PerformanceLongTaskTiming/attribution -tags: - - API - - Long Tasks API - - PerformanceLongTaskTiming - - Property - - Propriété - - Reference -translation_of: Web/API/PerformanceLongTaskTiming/attribution ---- -

{{SeeCompatTable}}{{APIRef("Long Tasks")}}

- -

La propriété en lecture seule attribution de l'interface PerformanceLongTaskTiming retourne une séquence d'instances TaskAttributionTiming.

- -

Syntaxe

- -
var taskAttributeTiming = PerformanceLongTaskTiming.attribution;
- -

Valeur

- -

Une séquence d'instances TaskAttributionTiming.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Long Tasks','#dom-performancelongtasktiming-attribution','attribution')}}{{Spec2('Long Tasks')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceLongTaskTiming.attribution")}}

diff --git a/files/fr/web/api/performancelongtasktiming/attribution/index.md b/files/fr/web/api/performancelongtasktiming/attribution/index.md new file mode 100644 index 0000000000..c3e9c82ff3 --- /dev/null +++ b/files/fr/web/api/performancelongtasktiming/attribution/index.md @@ -0,0 +1,46 @@ +--- +title: PerformanceLongTaskTiming.attribution +slug: Web/API/PerformanceLongTaskTiming/attribution +tags: + - API + - Long Tasks API + - PerformanceLongTaskTiming + - Property + - Propriété + - Reference +translation_of: Web/API/PerformanceLongTaskTiming/attribution +--- +

{{SeeCompatTable}}{{APIRef("Long Tasks")}}

+ +

La propriété en lecture seule attribution de l'interface PerformanceLongTaskTiming retourne une séquence d'instances TaskAttributionTiming.

+ +

Syntaxe

+ +
var taskAttributeTiming = PerformanceLongTaskTiming.attribution;
+ +

Valeur

+ +

Une séquence d'instances TaskAttributionTiming.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Long Tasks','#dom-performancelongtasktiming-attribution','attribution')}}{{Spec2('Long Tasks')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceLongTaskTiming.attribution")}}

diff --git a/files/fr/web/api/performancelongtasktiming/index.html b/files/fr/web/api/performancelongtasktiming/index.html deleted file mode 100644 index 2066469ef5..0000000000 --- a/files/fr/web/api/performancelongtasktiming/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: PerformanceLongTaskTiming -slug: Web/API/PerformanceLongTaskTiming -tags: - - API - - Interface - - Long Tasks API - - PerformanceLongTaskTiming - - Reference -translation_of: Web/API/PerformanceLongTaskTiming ---- -

{{SeeCompatTable}}{{APIRef("Long Tasks")}}

- -

L'interface PerformanceLongTaskTiming de l'API Long Tasks signale les instances de tâches longues.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -
-
PerformanceLongTaskTiming lecture seule {{ExperimentalBadge}}
-
Retourne une séquence d'instances TaskAttributionTiming.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Long Tasks','#sec-PerformanceLongTaskTiming','PerformanceLongTaskTiming')}}{{Spec2('Long Tasks')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceLongTaskTiming")}}

diff --git a/files/fr/web/api/performancelongtasktiming/index.md b/files/fr/web/api/performancelongtasktiming/index.md new file mode 100644 index 0000000000..2066469ef5 --- /dev/null +++ b/files/fr/web/api/performancelongtasktiming/index.md @@ -0,0 +1,46 @@ +--- +title: PerformanceLongTaskTiming +slug: Web/API/PerformanceLongTaskTiming +tags: + - API + - Interface + - Long Tasks API + - PerformanceLongTaskTiming + - Reference +translation_of: Web/API/PerformanceLongTaskTiming +--- +

{{SeeCompatTable}}{{APIRef("Long Tasks")}}

+ +

L'interface PerformanceLongTaskTiming de l'API Long Tasks signale les instances de tâches longues.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +
+
PerformanceLongTaskTiming lecture seule {{ExperimentalBadge}}
+
Retourne une séquence d'instances TaskAttributionTiming.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Long Tasks','#sec-PerformanceLongTaskTiming','PerformanceLongTaskTiming')}}{{Spec2('Long Tasks')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceLongTaskTiming")}}

diff --git a/files/fr/web/api/performancemark/index.html b/files/fr/web/api/performancemark/index.html deleted file mode 100644 index c8f1c80399..0000000000 --- a/files/fr/web/api/performancemark/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: PerformanceMark -slug: Web/API/PerformanceMark -tags: - - API - - Interface - - Performance Timing API - - Reference - - Performance Web -translation_of: Web/API/PerformanceMark ---- -
{{APIRef("User Timing API")}}
- -

PerformanceMark est une interface abstraite pour les objets PerformanceEntry avec un entryType « mark ».Les entrées de ce type sont créées en appelant performance.mark() pour ajouter un DOMHighResTimeStamp nommé (le marqueur) à la chronologie des performances du navigateur.

- -

{{InheritanceDiagram}}

- -

{{AvailableInWorkers}}

- -

Propriétés

- -

Cette interface n'a pas de propriété mais elle étend les propriétés de PerformanceEntry suivantes en restreignant les propriétés comme suit :

- -
-
PerformanceEntry.entryType
-
Retourne « mark ».
-
PerformanceEntry.name
-
Retourne le nom donné au marqueur lorsqu'il a été créé via un appel de performance.mark().
-
PerformanceEntry.startTime
-
Retourne le DOMHighResTimeStamp à partir du moment où performance.mark() a été appelé.
-
PerformanceEntry.duration
-
Retourne « 0 ». (Un marqueur n'a pas de durée.)
-
- -

Méthodes

- -

Cette interface n'a pas de méthodes.

- -

Exemple

- -

Voir l'exemple dans Utilisation de l'API User Timing.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#performancemark', 'PerformanceMark')}}{{Spec2('User Timing Level 2')}}
{{SpecName('User Timing', '#performancemark', 'PerformanceMark')}}{{Spec2('User Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceMark")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancemark/index.md b/files/fr/web/api/performancemark/index.md new file mode 100644 index 0000000000..c8f1c80399 --- /dev/null +++ b/files/fr/web/api/performancemark/index.md @@ -0,0 +1,76 @@ +--- +title: PerformanceMark +slug: Web/API/PerformanceMark +tags: + - API + - Interface + - Performance Timing API + - Reference + - Performance Web +translation_of: Web/API/PerformanceMark +--- +
{{APIRef("User Timing API")}}
+ +

PerformanceMark est une interface abstraite pour les objets PerformanceEntry avec un entryType « mark ».Les entrées de ce type sont créées en appelant performance.mark() pour ajouter un DOMHighResTimeStamp nommé (le marqueur) à la chronologie des performances du navigateur.

+ +

{{InheritanceDiagram}}

+ +

{{AvailableInWorkers}}

+ +

Propriétés

+ +

Cette interface n'a pas de propriété mais elle étend les propriétés de PerformanceEntry suivantes en restreignant les propriétés comme suit :

+ +
+
PerformanceEntry.entryType
+
Retourne « mark ».
+
PerformanceEntry.name
+
Retourne le nom donné au marqueur lorsqu'il a été créé via un appel de performance.mark().
+
PerformanceEntry.startTime
+
Retourne le DOMHighResTimeStamp à partir du moment où performance.mark() a été appelé.
+
PerformanceEntry.duration
+
Retourne « 0 ». (Un marqueur n'a pas de durée.)
+
+ +

Méthodes

+ +

Cette interface n'a pas de méthodes.

+ +

Exemple

+ +

Voir l'exemple dans Utilisation de l'API User Timing.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#performancemark', 'PerformanceMark')}}{{Spec2('User Timing Level 2')}}
{{SpecName('User Timing', '#performancemark', 'PerformanceMark')}}{{Spec2('User Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceMark")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancemeasure/index.html b/files/fr/web/api/performancemeasure/index.html deleted file mode 100644 index 22c05d1a9a..0000000000 --- a/files/fr/web/api/performancemeasure/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: PerformanceMeasure -slug: Web/API/PerformanceMeasure -tags: - - API - - Interface - - Performance Timeline API - - Reference - - Performance Web -translation_of: Web/API/PerformanceMeasure ---- -
{{APIRef("User Timing API")}}
- -

PerformanceMeasure est une interface abstraite pour les objets PerformanceEntry ayant un entryType « measure ». Les entrées de ce type sont créées en appelant measure() pour ajouter un DOMHighResTimeStamp nommé (la mesure) entre deux marqueurs à la chronologie des performances du navigateur.

- -

{{InheritanceDiagram}}

- -

{{AvailableInWorkers}}

- -

Propriétés

- -

Cette interface n'a pas de propriété mais elle étend les propriétés de PerformanceEntry suivantes en restreignant les propriétés comme suit :

- -
-
PerformanceEntry.entryType
-
Retourne « measure ».
-
PerformanceEntry.name
-
Retourne le nom donné à la mesure lorsqu'elle a été créée via un appel à performance.measure().
-
PerformanceEntry.startTime
-
Retourne un objet DOMHighResTimeStamp associé à la mesure indiquant le moment où performance.measure() a été appelée.
-
PerformanceEntry.duration
-
Retourne un objet DOMHighResTimeStamp correspondant à la durée de la mesure (généralement, l'horodatage de fin de la mesure moins l'horodatage de début).
-
- -

Méthodes

- -

Cette interface n'a pas de méthode.

- -

Exemple

- -

Voir l'exemple dans : Utilisation de l'API User Timing.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#dom-performance-measure', 'PerformanceMeasure')}}{{Spec2('User Timing Level 2')}}
{{SpecName('User Timing', '#performancemeasure', 'PerformanceMeasure')}}{{Spec2('User Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceMeasure")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancemeasure/index.md b/files/fr/web/api/performancemeasure/index.md new file mode 100644 index 0000000000..22c05d1a9a --- /dev/null +++ b/files/fr/web/api/performancemeasure/index.md @@ -0,0 +1,76 @@ +--- +title: PerformanceMeasure +slug: Web/API/PerformanceMeasure +tags: + - API + - Interface + - Performance Timeline API + - Reference + - Performance Web +translation_of: Web/API/PerformanceMeasure +--- +
{{APIRef("User Timing API")}}
+ +

PerformanceMeasure est une interface abstraite pour les objets PerformanceEntry ayant un entryType « measure ». Les entrées de ce type sont créées en appelant measure() pour ajouter un DOMHighResTimeStamp nommé (la mesure) entre deux marqueurs à la chronologie des performances du navigateur.

+ +

{{InheritanceDiagram}}

+ +

{{AvailableInWorkers}}

+ +

Propriétés

+ +

Cette interface n'a pas de propriété mais elle étend les propriétés de PerformanceEntry suivantes en restreignant les propriétés comme suit :

+ +
+
PerformanceEntry.entryType
+
Retourne « measure ».
+
PerformanceEntry.name
+
Retourne le nom donné à la mesure lorsqu'elle a été créée via un appel à performance.measure().
+
PerformanceEntry.startTime
+
Retourne un objet DOMHighResTimeStamp associé à la mesure indiquant le moment où performance.measure() a été appelée.
+
PerformanceEntry.duration
+
Retourne un objet DOMHighResTimeStamp correspondant à la durée de la mesure (généralement, l'horodatage de fin de la mesure moins l'horodatage de début).
+
+ +

Méthodes

+ +

Cette interface n'a pas de méthode.

+ +

Exemple

+ +

Voir l'exemple dans : Utilisation de l'API User Timing.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('User Timing Level 2', '#dom-performance-measure', 'PerformanceMeasure')}}{{Spec2('User Timing Level 2')}}
{{SpecName('User Timing', '#performancemeasure', 'PerformanceMeasure')}}{{Spec2('User Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceMeasure")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancenavigation/index.html b/files/fr/web/api/performancenavigation/index.html deleted file mode 100644 index ced6eff643..0000000000 --- a/files/fr/web/api/performancenavigation/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: PerformanceNavigation -slug: Web/API/PerformanceNavigation -tags: - - API - - Backwards compatibility - - Deprecated - - Déprécié - - Interface - - Navigation Timing - - Navigation Timing API - - Performance - - PerformanceNavigation - - Reference - - Timing -translation_of: Web/API/PerformanceNavigation ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne interface PerformanceNavigation représente des informations sur la façon dont la navigation vers le document actuel a été effectuée.

- -

Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule Performance.navigation.

- -

Propriétés

- -

L'interface PerformanceNavigation n'hérite d'aucune propriété.

- -
-
PerformanceNavigation.type {{readonlyInline}} {{deprecated_inline}}
-
Une valeur unsigned short qui indique comment la navigation vers cette page s'est faite. Les valeurs possibles sont : -
-
TYPE_NAVIGATE (0)
-
La page a été consultée en suivant un lien, un signet, un formulaire ou un script, ou en tapant l'URL dans la barre d'adresse.
-
TYPE_RELOAD (1)
-
L'accès à la page s'est fait en cliquant sur le bouton Recharger ou via la méthode Location.reload().
-
TYPE_BACK_FORWARD (2)
-
On a accédé à cette page en naviguant dans l'historique.
-
TYPE_RESERVED (255)
-
De n'importe quelle autre manière.
-
-
-
PerformanceNavigation.redirectCount {{readonlyInline}} {{deprecated_inline}}
-
Un unsigned short représentant le nombre de Redirections effectués avant d'atteindre la page.
-
- -

Méthodes

- -

L'interface Performance n'hérite d'aucune méthode.

- -
-
PerformanceNavigation.toJSON() {{deprecated_inline}}
-
Un sérialiseur renvoyant un objet json représentant l'objet PerformanceNavigation.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationsStatutCommentaire
{{SpecName('Navigation Timing', '#performancenavigation', 'PerformanceNavigation')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigation")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancenavigation/index.md b/files/fr/web/api/performancenavigation/index.md new file mode 100644 index 0000000000..ced6eff643 --- /dev/null +++ b/files/fr/web/api/performancenavigation/index.md @@ -0,0 +1,87 @@ +--- +title: PerformanceNavigation +slug: Web/API/PerformanceNavigation +tags: + - API + - Backwards compatibility + - Deprecated + - Déprécié + - Interface + - Navigation Timing + - Navigation Timing API + - Performance + - PerformanceNavigation + - Reference + - Timing +translation_of: Web/API/PerformanceNavigation +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne interface PerformanceNavigation représente des informations sur la façon dont la navigation vers le document actuel a été effectuée.

+ +

Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule Performance.navigation.

+ +

Propriétés

+ +

L'interface PerformanceNavigation n'hérite d'aucune propriété.

+ +
+
PerformanceNavigation.type {{readonlyInline}} {{deprecated_inline}}
+
Une valeur unsigned short qui indique comment la navigation vers cette page s'est faite. Les valeurs possibles sont : +
+
TYPE_NAVIGATE (0)
+
La page a été consultée en suivant un lien, un signet, un formulaire ou un script, ou en tapant l'URL dans la barre d'adresse.
+
TYPE_RELOAD (1)
+
L'accès à la page s'est fait en cliquant sur le bouton Recharger ou via la méthode Location.reload().
+
TYPE_BACK_FORWARD (2)
+
On a accédé à cette page en naviguant dans l'historique.
+
TYPE_RESERVED (255)
+
De n'importe quelle autre manière.
+
+
+
PerformanceNavigation.redirectCount {{readonlyInline}} {{deprecated_inline}}
+
Un unsigned short représentant le nombre de Redirections effectués avant d'atteindre la page.
+
+ +

Méthodes

+ +

L'interface Performance n'hérite d'aucune méthode.

+ +
+
PerformanceNavigation.toJSON() {{deprecated_inline}}
+
Un sérialiseur renvoyant un objet json représentant l'objet PerformanceNavigation.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationsStatutCommentaire
{{SpecName('Navigation Timing', '#performancenavigation', 'PerformanceNavigation')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancenavigation/redirectcount/index.html b/files/fr/web/api/performancenavigation/redirectcount/index.html deleted file mode 100644 index 42d9006675..0000000000 --- a/files/fr/web/api/performancenavigation/redirectcount/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: PerformanceNavigation.redirectCount -slug: Web/API/PerformanceNavigation/redirectCount -tags: - - API - - Backwards compatibility - - Deprecated - - Déprécié - - HTML - - Navigation Timing - - PerformanceNavigation - - Property - - Propriété - - Read-only - - Héritage -translation_of: Web/API/PerformanceNavigation/redirectCount ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.redirectCount de l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule PerformanceNavigation.redirectCount renvoie un unsigned short représentant le nombre de Redirections effectués avant d'atteindre la page.

- -

Syntaxe

- -
let amount = performanceNavigation.redirectCount;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationsStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancenavigation-redirectcount', - 'PerformanceNavigation.redirectCount')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigation.redirectCount")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancenavigation/redirectcount/index.md b/files/fr/web/api/performancenavigation/redirectcount/index.md new file mode 100644 index 0000000000..42d9006675 --- /dev/null +++ b/files/fr/web/api/performancenavigation/redirectcount/index.md @@ -0,0 +1,58 @@ +--- +title: PerformanceNavigation.redirectCount +slug: Web/API/PerformanceNavigation/redirectCount +tags: + - API + - Backwards compatibility + - Deprecated + - Déprécié + - HTML + - Navigation Timing + - PerformanceNavigation + - Property + - Propriété + - Read-only + - Héritage +translation_of: Web/API/PerformanceNavigation/redirectCount +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.redirectCount de l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule PerformanceNavigation.redirectCount renvoie un unsigned short représentant le nombre de Redirections effectués avant d'atteindre la page.

+ +

Syntaxe

+ +
let amount = performanceNavigation.redirectCount;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationsStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancenavigation-redirectcount', + 'PerformanceNavigation.redirectCount')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigation.redirectCount")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancenavigation/type/index.html b/files/fr/web/api/performancenavigation/type/index.html deleted file mode 100644 index d203b51da0..0000000000 --- a/files/fr/web/api/performancenavigation/type/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: PerformanceNavigation.type -slug: Web/API/PerformanceNavigation/type -tags: - - API - - Backwards compatibility - - Deprecated - - Déprécié - - Navigation Timing - - PerformanceNavigation - - Property - - Propriété - - Read-only - - Héritage -translation_of: Web/API/PerformanceNavigation/type ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.type de l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété PerformanceNavigation.type en lecture seule renvoie un unsigned short contenant une constante décrivant comment la navigation vers cette page a été effectuée. Les valeurs possibles sont :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurNom de la constanteSignification
0TYPE_NAVIGATELa page a été consultée en suivant un lien, un signet, un formulaire, un script ou en tapant l'URL dans la barre d'adresse.
1TYPE_RELOADLa page a été consultée en cliquant sur le bouton Recharger ou via la méthode Location.reload().
2TYPE_BACK_FORWARDLa page a été consultée en naviguant dans l'historique.
255TYPE_RESERVEDDe toute autre manière.
- -

Syntaxe

- -
let type = performanceNavigation.type;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationsStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancenavigation-type', - 'PerformanceNavigation.type')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigation.type")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancenavigation/type/index.md b/files/fr/web/api/performancenavigation/type/index.md new file mode 100644 index 0000000000..d203b51da0 --- /dev/null +++ b/files/fr/web/api/performancenavigation/type/index.md @@ -0,0 +1,89 @@ +--- +title: PerformanceNavigation.type +slug: Web/API/PerformanceNavigation/type +tags: + - API + - Backwards compatibility + - Deprecated + - Déprécié + - Navigation Timing + - PerformanceNavigation + - Property + - Propriété + - Read-only + - Héritage +translation_of: Web/API/PerformanceNavigation/type +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.type de l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété PerformanceNavigation.type en lecture seule renvoie un unsigned short contenant une constante décrivant comment la navigation vers cette page a été effectuée. Les valeurs possibles sont :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurNom de la constanteSignification
0TYPE_NAVIGATELa page a été consultée en suivant un lien, un signet, un formulaire, un script ou en tapant l'URL dans la barre d'adresse.
1TYPE_RELOADLa page a été consultée en cliquant sur le bouton Recharger ou via la méthode Location.reload().
2TYPE_BACK_FORWARDLa page a été consultée en naviguant dans l'historique.
255TYPE_RESERVEDDe toute autre manière.
+ +

Syntaxe

+ +
let type = performanceNavigation.type;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationsStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancenavigation-type', + 'PerformanceNavigation.type')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigation.type")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancenavigationtiming/domcomplete/index.html b/files/fr/web/api/performancenavigationtiming/domcomplete/index.html deleted file mode 100644 index 39a3b6d2ec..0000000000 --- a/files/fr/web/api/performancenavigationtiming/domcomplete/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: PerformanceNavigationTiming.domComplete -slug: Web/API/PerformanceNavigationTiming/domComplete -tags: - - API - - Property - - Propriété - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/domComplete ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La propriété en lecture seule domComplete renvoie un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à complete.

- -

Syntaxe

- -
perfEntry.domComplete;
- -

Valeur de retour

- -

Un timestamp représentant une valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à complete.

- -

Exemple

- -

L'exemple suivant illustre l'utilisation de cette propriété.

- -
function print_nav_timing_data() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
-  let perfEntries = performance.getEntriesByType("navigation");
-
-  for (let i = 0; i < perfEntries.length; i++) {
-    console.log("= Entrée de navigation : entry[" + i + "]");
-    let p = perfEntries[i];
-    // propriétés du DOM
-    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
-    console.log("Contenu du DOM complet = " + p.domComplete);
-    console.log("Contenu du DOM interactif = " + p.interactive);
-
-    // temps de chargement et de déchargement des documents
-    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
-    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
-
-    // autres propriétés
-    console.log("type = " + p.type);
-    console.log("redirectCount = " + p.redirectCount);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', - '#dom-performancenavigationtiming-domcomplete', 'domComplete')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.domComplete")}}

diff --git a/files/fr/web/api/performancenavigationtiming/domcomplete/index.md b/files/fr/web/api/performancenavigationtiming/domcomplete/index.md new file mode 100644 index 0000000000..39a3b6d2ec --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/domcomplete/index.md @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.domComplete +slug: Web/API/PerformanceNavigationTiming/domComplete +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/domComplete +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule domComplete renvoie un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à complete.

+ +

Syntaxe

+ +
perfEntry.domComplete;
+ +

Valeur de retour

+ +

Un timestamp représentant une valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à complete.

+ +

Exemple

+ +

L'exemple suivant illustre l'utilisation de cette propriété.

+ +
function print_nav_timing_data() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
+  let perfEntries = performance.getEntriesByType("navigation");
+
+  for (let i = 0; i < perfEntries.length; i++) {
+    console.log("= Entrée de navigation : entry[" + i + "]");
+    let p = perfEntries[i];
+    // propriétés du DOM
+    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
+    console.log("Contenu du DOM complet = " + p.domComplete);
+    console.log("Contenu du DOM interactif = " + p.interactive);
+
+    // temps de chargement et de déchargement des documents
+    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
+    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
+
+    // autres propriétés
+    console.log("type = " + p.type);
+    console.log("redirectCount = " + p.redirectCount);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', + '#dom-performancenavigationtiming-domcomplete', 'domComplete')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.domComplete")}}

diff --git a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.html b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.html deleted file mode 100644 index e9f37b8720..0000000000 --- a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: PerformanceNavigationTiming.domContentLoadedEventEnd -slug: Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd -tags: - - API - - Property - - Propriété - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La propriété en lecture seule domContentLoadedEventEnd retourne un timestamp représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement DOMContentLoaded du document actuel.

- -

Syntaxe

- -
perfEntry.domContentLoadedEventEnd;
- -

Valeur de retour

- -

Un timestamp représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement DOMContentLoaded du document actuel.

- -

Exemple

- -

L'exemple suivant illustre l'utilisation de cette propriété.

- -
function print_nav_timing_data() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
-  let perfEntries = performance.getEntriesByType("navigation");
-
-  for (let i = 0; i < perfEntries.length; i++) {
-    console.log("= Entrée de navigation : entry[" + i + "]");
-    let p = perfEntries[i];
-    // propriétés du DOM
-    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
-    console.log("Contenu du DOM complet = " + p.domComplete);
-    console.log("Contenu du DOM interactif = " + p.interactive);
-
-    // temps de chargement et de déchargement des documents
-    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
-    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
-
-    // autres propriétés
-    console.log("type = " + p.type);
-    console.log("redirectCount = " + p.redirectCount);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', - '#dom-performancenavigationtiming-domcontentloadedeventend', - 'domContentLoadedEventEnd')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.domContentLoadedEventEnd")}}

diff --git a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.md b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.md new file mode 100644 index 0000000000..e9f37b8720 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.md @@ -0,0 +1,75 @@ +--- +title: PerformanceNavigationTiming.domContentLoadedEventEnd +slug: Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule domContentLoadedEventEnd retourne un timestamp représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement DOMContentLoaded du document actuel.

+ +

Syntaxe

+ +
perfEntry.domContentLoadedEventEnd;
+ +

Valeur de retour

+ +

Un timestamp représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement DOMContentLoaded du document actuel.

+ +

Exemple

+ +

L'exemple suivant illustre l'utilisation de cette propriété.

+ +
function print_nav_timing_data() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
+  let perfEntries = performance.getEntriesByType("navigation");
+
+  for (let i = 0; i < perfEntries.length; i++) {
+    console.log("= Entrée de navigation : entry[" + i + "]");
+    let p = perfEntries[i];
+    // propriétés du DOM
+    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
+    console.log("Contenu du DOM complet = " + p.domComplete);
+    console.log("Contenu du DOM interactif = " + p.interactive);
+
+    // temps de chargement et de déchargement des documents
+    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
+    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
+
+    // autres propriétés
+    console.log("type = " + p.type);
+    console.log("redirectCount = " + p.redirectCount);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', + '#dom-performancenavigationtiming-domcontentloadedeventend', + 'domContentLoadedEventEnd')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.domContentLoadedEventEnd")}}

diff --git a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.html b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.html deleted file mode 100644 index 88e1459fbb..0000000000 --- a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: PerformanceNavigationTiming.domContentLoadedEventStart -slug: Web/API/PerformanceNavigationTiming/domContentLoadedEventStart -tags: - - API - - Property - - Propriété - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/domContentLoadedEventStart ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La propriété en lecture seule domContentLoadedEventStart retourne un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement DOMContentLoaded du document actuel.

- -

Syntaxe

- -
perfEntry.domContentLoadedEventStart;
- -

Valeur de retour

- -

Un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement DOMContentLoaded du document actuel.

- -

Exemple

- -

L'exemple suivant illustre l'utilisation de cette propriété.

- -
function print_nav_timing_data() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
-  let perfEntries = performance.getEntriesByType("navigation");
-
-  for (let i = 0; i < perfEntries.length; i++) {
-    console.log("= Entrée de navigation : entry[" + i + "]");
-    let p = perfEntries[i];
-    // propriétés du DOM
-    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
-    console.log("Contenu du DOM complet = " + p.domComplete);
-    console.log("Contenu du DOM interactif = " + p.interactive);
-
-    // temps de chargement et de déchargement des documents
-    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
-    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
-
-    // autres propriétés
-    console.log("type = " + p.type);
-    console.log("redirectCount = " + p.redirectCount);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', - '#dom-performancenavigationtiming-domcontentloadedeventstart', - 'domContentLoadedEventStart')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.domContentLoadedEventStart")}}

diff --git a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md new file mode 100644 index 0000000000..88e1459fbb --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md @@ -0,0 +1,75 @@ +--- +title: PerformanceNavigationTiming.domContentLoadedEventStart +slug: Web/API/PerformanceNavigationTiming/domContentLoadedEventStart +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/domContentLoadedEventStart +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule domContentLoadedEventStart retourne un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement DOMContentLoaded du document actuel.

+ +

Syntaxe

+ +
perfEntry.domContentLoadedEventStart;
+ +

Valeur de retour

+ +

Un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement DOMContentLoaded du document actuel.

+ +

Exemple

+ +

L'exemple suivant illustre l'utilisation de cette propriété.

+ +
function print_nav_timing_data() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
+  let perfEntries = performance.getEntriesByType("navigation");
+
+  for (let i = 0; i < perfEntries.length; i++) {
+    console.log("= Entrée de navigation : entry[" + i + "]");
+    let p = perfEntries[i];
+    // propriétés du DOM
+    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
+    console.log("Contenu du DOM complet = " + p.domComplete);
+    console.log("Contenu du DOM interactif = " + p.interactive);
+
+    // temps de chargement et de déchargement des documents
+    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
+    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
+
+    // autres propriétés
+    console.log("type = " + p.type);
+    console.log("redirectCount = " + p.redirectCount);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', + '#dom-performancenavigationtiming-domcontentloadedeventstart', + 'domContentLoadedEventStart')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.domContentLoadedEventStart")}}

diff --git a/files/fr/web/api/performancenavigationtiming/dominteractive/index.html b/files/fr/web/api/performancenavigationtiming/dominteractive/index.html deleted file mode 100644 index 88045fd7d9..0000000000 --- a/files/fr/web/api/performancenavigationtiming/dominteractive/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: PerformanceNavigationTiming.domInteractive -slug: Web/API/PerformanceNavigationTiming/domInteractive -tags: - - API - - Property - - Propriété - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/domInteractive ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La propriété en lecture seule domInteractive retourne un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à interactif.

- -

Syntaxe

- -
perfEntry.domInteractive;
- -

Valeur de retour

- -

Une timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à interactif.

- -

Exemple

- -

L'exemple suivant illustre l'utilisation de cette propriété.

- -
function print_nav_timing_data() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
-  let perfEntries = performance.getEntriesByType("navigation");
-
-  for (let i =0; i < perfEntries.length; i++) {
-    console.log("= Entrée de navigation : entry[" + i + "]");
-    let p = perfEntries[i];
-    // propriétés du DOM
-    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
-    console.log("Contenu du DOM complet = " + p.domComplete);
-    console.log("Contenu du DOM interactif = " + p.interactive);
-
-    // temps de chargement et de déchargement des documents
-    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
-    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
-
-    // autres propriétés
-    console.log("type = " + p.type);
-    console.log("redirectCount = " + p.redirectCount);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', - '#dom-performancenavigationtiming-dominteractive', 'domInteractive')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.domInteractive")}}

diff --git a/files/fr/web/api/performancenavigationtiming/dominteractive/index.md b/files/fr/web/api/performancenavigationtiming/dominteractive/index.md new file mode 100644 index 0000000000..88045fd7d9 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/dominteractive/index.md @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.domInteractive +slug: Web/API/PerformanceNavigationTiming/domInteractive +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/domInteractive +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule domInteractive retourne un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à interactif.

+ +

Syntaxe

+ +
perfEntry.domInteractive;
+ +

Valeur de retour

+ +

Une timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à interactif.

+ +

Exemple

+ +

L'exemple suivant illustre l'utilisation de cette propriété.

+ +
function print_nav_timing_data() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
+  let perfEntries = performance.getEntriesByType("navigation");
+
+  for (let i =0; i < perfEntries.length; i++) {
+    console.log("= Entrée de navigation : entry[" + i + "]");
+    let p = perfEntries[i];
+    // propriétés du DOM
+    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
+    console.log("Contenu du DOM complet = " + p.domComplete);
+    console.log("Contenu du DOM interactif = " + p.interactive);
+
+    // temps de chargement et de déchargement des documents
+    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
+    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
+
+    // autres propriétés
+    console.log("type = " + p.type);
+    console.log("redirectCount = " + p.redirectCount);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', + '#dom-performancenavigationtiming-dominteractive', 'domInteractive')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.domInteractive")}}

diff --git a/files/fr/web/api/performancenavigationtiming/index.html b/files/fr/web/api/performancenavigationtiming/index.html deleted file mode 100644 index 95faf846f3..0000000000 --- a/files/fr/web/api/performancenavigationtiming/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: PerformanceNavigationTiming -slug: Web/API/PerformanceNavigationTiming -tags: - - API - - Interface - - Navigation Timing API - - Performance Timeline API - - Reference - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming ---- -

{{APIRef("Navigation Timing")}}{{SeeCompatTable}}

- -

L'interface PerformanceNavigationTiming fournit des méthodes et des propriétés pour stocker et récupérer des métriques concernant les événements de navigation de document du navigateur. Par exemple, cette interface peut être utilisée pour déterminer le temps nécessaire au chargement ou au déchargement d'un document.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Cette interface étend les propriétés de PerformanceEntry suivantes pour les types d'entrée de performance de navigation en les qualifiant et en les contraignant comme suit :

- -
-
PerformanceEntry.entryType {{readonlyInline}}
-
Retourne « navigation ».
-
PerformanceEntry.name {{readonlyInline}}
-
Retourne l'adresse du document.
-
PerformanceEntry.startTime {{readonlyInline}}
-
Retourne un DOMHighResTimeStamp avec une valeur de « 0 ».
-
PerformanceEntry.duration {{readonlyInline}}
-
Retourne un timestamp qui est la différence entre les propriétés PerformanceNavigationTiming.loadEventEnd et PerformanceEntry.startTime.
-
- -

Cette interface étend également les propriétés PerformanceResourceTiming suivantes pour les types d'entrée de performance de navigation en les qualifiant et en les contraignant comme suit :

- -
-
PerformanceResourceTiming.initiatorType {{readonlyInline}}
-
Retourne « navigation ».
-
- -

L'interface prend également en charge les propriétés suivantes :

- -
-
PerformanceNavigationTiming.domComplete {{readonlyInline}} {{Experimental_Inline}}
-
Un DOMHighResTimeStamp représentant une valeur temporelle égale au temps immédiatement avant que le navigateur ne définisse la disponibilité du document actuel à complete.
-
PerformanceNavigationTiming.domContentLoadedEventEnd {{readonlyInline}} {{Experimental_Inline}}
-
Un DOMHighResTimeStamp représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement DOMContentLoaded du document actuel.
-
PerformanceNavigationTiming.domContentLoadedEventStart {{readonlyInline}} {{Experimental_Inline}}
-
Un DOMHighResTimeStamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement DOMContentLoaded sur le document actuel.
-
PerformanceNavigationTiming.domInteractive {{readonlyInline}} {{Experimental_Inline}}
-
Un DOMHighResTimeStamp représentant une valeur temporelle égale qui précède immédiatement le moment où l'agent utilisateur règle l'état de préparation du document actuel sur interactif.
-
PerformanceNavigationTiming.loadEventEnd {{readonlyInline}} {{Experimental_Inline}}
-
Un DOMHighResTimeStamp représentant le moment où l'événement de chargement du document actuel est terminé.
-
PerformanceNavigationTiming.loadEventStart {{readonlyInline}} {{Experimental_Inline}}
-
Un DOMHighResTimeStamp représentant la valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.
-
PerformanceNavigationTiming.redirectCount {{readonlyInline}} {{Experimental_Inline}}
-
Un nombre représentant le nombre de redirections, depuis la dernière navigation sans redirection, dans le contexte de navigation actuel. S'il n'y a pas eu de redirection, ou si la redirection provenait d'une autre origine, et que cette origine ne permet pas que ses informations temporelles soient exposées à l'origine actuelle, la valeur sera 0.
-
PerformanceNavigationTiming.requestStart {{readonlyInline}} {{Experimental_Inline}}
-
Un DOMHighResTimeStamp représentant le moment immédiatement avant que l'agent utilisateur ne commence à demander la ressource au serveur, ou aux caches d'application pertinents ou aux ressources locales.
-
PerformanceNavigationTiming.responseStart {{readonlyInline}} {{Experimental_Inline}}
-
Un DOMHighResTimeStamp représentant l'heure immédiatement après que l'analyseur HTTP de l'agent utilisateur ait reçu le premier octet de la réponse des caches d'application pertinents, ou des ressources locales ou du serveur.
-
PerformanceNavigationTiming.type {{readonlyInline}} {{Experimental_Inline}}
-
Une chaîne de caractère DOMString représentant le type de navigation. Doit être : « navigate », « reload », « back_forward » ou « prerender ».
-
PerformanceNavigationTiming.unloadEventEnd {{readonlyInline}} {{Experimental_Inline}}
-
Un DOMHighResTimeStamp représentant la valeur temporelle égale au temps immédiatement après que l'agent utilisateur ait terminé l'événement de déchargement du document précédent.
-
PerformanceNavigationTiming.unloadEventStart {{readonlyInline}} {{Experimental_Inline}}
-
Un DOMHighResTimeStamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne lance l'événement de déchargement du document précédent.
-
- -

Méthodes

- -
-
PerformanceNavigationTiming.toJSON() {{Experimental_Inline}}
-
Retourne une chaîne de caractères DOMString qui est la représentation JSON de l'objet PerformanceNavigationTiming.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationsStatutCommentaire
{{SpecName('Navigation Timing Level 2', '#sec-PerformanceNavigationTiming', 'PerformanceNavigationTiming')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancenavigationtiming/index.md b/files/fr/web/api/performancenavigationtiming/index.md new file mode 100644 index 0000000000..95faf846f3 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/index.md @@ -0,0 +1,105 @@ +--- +title: PerformanceNavigationTiming +slug: Web/API/PerformanceNavigationTiming +tags: + - API + - Interface + - Navigation Timing API + - Performance Timeline API + - Reference + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming +--- +

{{APIRef("Navigation Timing")}}{{SeeCompatTable}}

+ +

L'interface PerformanceNavigationTiming fournit des méthodes et des propriétés pour stocker et récupérer des métriques concernant les événements de navigation de document du navigateur. Par exemple, cette interface peut être utilisée pour déterminer le temps nécessaire au chargement ou au déchargement d'un document.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Cette interface étend les propriétés de PerformanceEntry suivantes pour les types d'entrée de performance de navigation en les qualifiant et en les contraignant comme suit :

+ +
+
PerformanceEntry.entryType {{readonlyInline}}
+
Retourne « navigation ».
+
PerformanceEntry.name {{readonlyInline}}
+
Retourne l'adresse du document.
+
PerformanceEntry.startTime {{readonlyInline}}
+
Retourne un DOMHighResTimeStamp avec une valeur de « 0 ».
+
PerformanceEntry.duration {{readonlyInline}}
+
Retourne un timestamp qui est la différence entre les propriétés PerformanceNavigationTiming.loadEventEnd et PerformanceEntry.startTime.
+
+ +

Cette interface étend également les propriétés PerformanceResourceTiming suivantes pour les types d'entrée de performance de navigation en les qualifiant et en les contraignant comme suit :

+ +
+
PerformanceResourceTiming.initiatorType {{readonlyInline}}
+
Retourne « navigation ».
+
+ +

L'interface prend également en charge les propriétés suivantes :

+ +
+
PerformanceNavigationTiming.domComplete {{readonlyInline}} {{Experimental_Inline}}
+
Un DOMHighResTimeStamp représentant une valeur temporelle égale au temps immédiatement avant que le navigateur ne définisse la disponibilité du document actuel à complete.
+
PerformanceNavigationTiming.domContentLoadedEventEnd {{readonlyInline}} {{Experimental_Inline}}
+
Un DOMHighResTimeStamp représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement DOMContentLoaded du document actuel.
+
PerformanceNavigationTiming.domContentLoadedEventStart {{readonlyInline}} {{Experimental_Inline}}
+
Un DOMHighResTimeStamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement DOMContentLoaded sur le document actuel.
+
PerformanceNavigationTiming.domInteractive {{readonlyInline}} {{Experimental_Inline}}
+
Un DOMHighResTimeStamp représentant une valeur temporelle égale qui précède immédiatement le moment où l'agent utilisateur règle l'état de préparation du document actuel sur interactif.
+
PerformanceNavigationTiming.loadEventEnd {{readonlyInline}} {{Experimental_Inline}}
+
Un DOMHighResTimeStamp représentant le moment où l'événement de chargement du document actuel est terminé.
+
PerformanceNavigationTiming.loadEventStart {{readonlyInline}} {{Experimental_Inline}}
+
Un DOMHighResTimeStamp représentant la valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.
+
PerformanceNavigationTiming.redirectCount {{readonlyInline}} {{Experimental_Inline}}
+
Un nombre représentant le nombre de redirections, depuis la dernière navigation sans redirection, dans le contexte de navigation actuel. S'il n'y a pas eu de redirection, ou si la redirection provenait d'une autre origine, et que cette origine ne permet pas que ses informations temporelles soient exposées à l'origine actuelle, la valeur sera 0.
+
PerformanceNavigationTiming.requestStart {{readonlyInline}} {{Experimental_Inline}}
+
Un DOMHighResTimeStamp représentant le moment immédiatement avant que l'agent utilisateur ne commence à demander la ressource au serveur, ou aux caches d'application pertinents ou aux ressources locales.
+
PerformanceNavigationTiming.responseStart {{readonlyInline}} {{Experimental_Inline}}
+
Un DOMHighResTimeStamp représentant l'heure immédiatement après que l'analyseur HTTP de l'agent utilisateur ait reçu le premier octet de la réponse des caches d'application pertinents, ou des ressources locales ou du serveur.
+
PerformanceNavigationTiming.type {{readonlyInline}} {{Experimental_Inline}}
+
Une chaîne de caractère DOMString représentant le type de navigation. Doit être : « navigate », « reload », « back_forward » ou « prerender ».
+
PerformanceNavigationTiming.unloadEventEnd {{readonlyInline}} {{Experimental_Inline}}
+
Un DOMHighResTimeStamp représentant la valeur temporelle égale au temps immédiatement après que l'agent utilisateur ait terminé l'événement de déchargement du document précédent.
+
PerformanceNavigationTiming.unloadEventStart {{readonlyInline}} {{Experimental_Inline}}
+
Un DOMHighResTimeStamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne lance l'événement de déchargement du document précédent.
+
+ +

Méthodes

+ +
+
PerformanceNavigationTiming.toJSON() {{Experimental_Inline}}
+
Retourne une chaîne de caractères DOMString qui est la représentation JSON de l'objet PerformanceNavigationTiming.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationsStatutCommentaire
{{SpecName('Navigation Timing Level 2', '#sec-PerformanceNavigationTiming', 'PerformanceNavigationTiming')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancenavigationtiming/loadeventend/index.html b/files/fr/web/api/performancenavigationtiming/loadeventend/index.html deleted file mode 100644 index 58b2490f45..0000000000 --- a/files/fr/web/api/performancenavigationtiming/loadeventend/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: PerformanceNavigationTiming.loadEventEnd -slug: Web/API/PerformanceNavigationTiming/loadEventEnd -tags: - - API - - Property - - Propriété - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/loadEventEnd ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La propriété en lecture seule loadEventEnd renvoie un timestamp qui est égal à l'heure à laquelle l'événement de chargement du document actuel est terminé.

- -

Syntaxe

- -
perfEntry.loadEventEnd;
- -

Valeur de retour

- -

Un timestamp représentant le moment où l'événement de chargement du document actuel est terminé.

- -

Exemple

- -

L'exemple suivant illustre l'utilisation de cette propriété.

- -
function print_nav_timing_data() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
-  let perfEntries = performance.getEntriesByType("navigation");
-
-  for (let i = 0; i < perfEntries.length; i++) {
-    console.log("= Entrée de navigation : entry[" + i + "]");
-    let p = perfEntries[i];
-    // propriétés du DOM
-    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
-    console.log("Contenu du DOM complet = " + p.domComplete);
-    console.log("Contenu du DOM interactif = " + p.interactive);
-
-    // temps de chargement et de déchargement des documents
-    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
-    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
-
-    // autres propriétés
-    console.log("type = " + p.type);
-    console.log("redirectCount = " + p.redirectCount);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', - '#dom-performancenavigationtiming-loadeventend', 'loadEventEnd')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.loadEventEnd")}}

diff --git a/files/fr/web/api/performancenavigationtiming/loadeventend/index.md b/files/fr/web/api/performancenavigationtiming/loadeventend/index.md new file mode 100644 index 0000000000..58b2490f45 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/loadeventend/index.md @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.loadEventEnd +slug: Web/API/PerformanceNavigationTiming/loadEventEnd +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/loadEventEnd +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule loadEventEnd renvoie un timestamp qui est égal à l'heure à laquelle l'événement de chargement du document actuel est terminé.

+ +

Syntaxe

+ +
perfEntry.loadEventEnd;
+ +

Valeur de retour

+ +

Un timestamp représentant le moment où l'événement de chargement du document actuel est terminé.

+ +

Exemple

+ +

L'exemple suivant illustre l'utilisation de cette propriété.

+ +
function print_nav_timing_data() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
+  let perfEntries = performance.getEntriesByType("navigation");
+
+  for (let i = 0; i < perfEntries.length; i++) {
+    console.log("= Entrée de navigation : entry[" + i + "]");
+    let p = perfEntries[i];
+    // propriétés du DOM
+    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
+    console.log("Contenu du DOM complet = " + p.domComplete);
+    console.log("Contenu du DOM interactif = " + p.interactive);
+
+    // temps de chargement et de déchargement des documents
+    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
+    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
+
+    // autres propriétés
+    console.log("type = " + p.type);
+    console.log("redirectCount = " + p.redirectCount);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', + '#dom-performancenavigationtiming-loadeventend', 'loadEventEnd')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.loadEventEnd")}}

diff --git a/files/fr/web/api/performancenavigationtiming/loadeventstart/index.html b/files/fr/web/api/performancenavigationtiming/loadeventstart/index.html deleted file mode 100644 index 910b29c044..0000000000 --- a/files/fr/web/api/performancenavigationtiming/loadeventstart/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: PerformanceNavigationTiming.loadEventStart -slug: Web/API/PerformanceNavigationTiming/loadEventStart -tags: - - API - - Property - - Propriété - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/loadEventStart ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La propriété en lecture seule loadEventStart retourne un timestamp représentant la valeur temporelle égale au temps immédiatement avant le déclenchement de l'événement de chargement du document actuel.

- -

Syntaxe

- -
perfEntry.loadEventStart;
- -

Valeur de retour

- -

Un timestamp représentant une valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.

- -

Exemple

- -

L'exemple suivant illustre l'utilisation de cette propriété.

- -
function print_nav_timing_data() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
-  let perfEntries = performance.getEntriesByType("navigation");
-
-  for (let i = 0; i < perfEntries.length; i++) {
-    console.log("= Entrée de navigation : entry[" + i + "]");
-    let p = perfEntries[i];
-    // propriétés du DOM
-    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
-    console.log("Contenu du DOM complet = " + p.domComplete);
-    console.log("Contenu du DOM interactif = " + p.interactive);
-
-    // temps de chargement et de déchargement des documents
-    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
-    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
-
-    // autres propriétés
-    console.log("type = " + p.type);
-    console.log("redirectCount = " + p.redirectCount);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', - '#dom-performancenavigationtiming-loadeventstart', 'loadEventStart')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.loadEventStart")}}

diff --git a/files/fr/web/api/performancenavigationtiming/loadeventstart/index.md b/files/fr/web/api/performancenavigationtiming/loadeventstart/index.md new file mode 100644 index 0000000000..910b29c044 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/loadeventstart/index.md @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.loadEventStart +slug: Web/API/PerformanceNavigationTiming/loadEventStart +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/loadEventStart +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule loadEventStart retourne un timestamp représentant la valeur temporelle égale au temps immédiatement avant le déclenchement de l'événement de chargement du document actuel.

+ +

Syntaxe

+ +
perfEntry.loadEventStart;
+ +

Valeur de retour

+ +

Un timestamp représentant une valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.

+ +

Exemple

+ +

L'exemple suivant illustre l'utilisation de cette propriété.

+ +
function print_nav_timing_data() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
+  let perfEntries = performance.getEntriesByType("navigation");
+
+  for (let i = 0; i < perfEntries.length; i++) {
+    console.log("= Entrée de navigation : entry[" + i + "]");
+    let p = perfEntries[i];
+    // propriétés du DOM
+    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
+    console.log("Contenu du DOM complet = " + p.domComplete);
+    console.log("Contenu du DOM interactif = " + p.interactive);
+
+    // temps de chargement et de déchargement des documents
+    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
+    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
+
+    // autres propriétés
+    console.log("type = " + p.type);
+    console.log("redirectCount = " + p.redirectCount);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', + '#dom-performancenavigationtiming-loadeventstart', 'loadEventStart')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.loadEventStart")}}

diff --git a/files/fr/web/api/performancenavigationtiming/redirectcount/index.html b/files/fr/web/api/performancenavigationtiming/redirectcount/index.html deleted file mode 100644 index 5c17f209f2..0000000000 --- a/files/fr/web/api/performancenavigationtiming/redirectcount/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: PerformanceNavigationTiming.redirectCount -slug: Web/API/PerformanceNavigationTiming/redirectCount -tags: - - API - - Property - - Propriété - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/redirectCount ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La propriété en lecture seule redirectCount renvoie un timestamp représentant le nombre de redirections depuis la dernière navigation sans redirection dans le contexte de navigation actuel.

- -

Syntaxe

- -
perfEntry.redirectCount;
- -

Valeur de retour

- -

Un nombre représentant le nombre de redirections depuis la dernière navigation sans redirection dans le contexte de navigation actuel.

- -

Exemple

- -

L'exemple suivant illustre l'utilisation de cette propriété.

- -
function print_nav_timing_data() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
-  let perfEntries = performance.getEntriesByType("navigation");
-
-  for (let i = 0; i < perfEntries.length; i++) {
-    console.log("= Entrée de navigation : entry[" + i + "]");
-    let p = perfEntries[i];
-    // propriétés du DOM
-    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
-    console.log("Contenu du DOM complet = " + p.domComplete);
-    console.log("Contenu du DOM interactif = " + p.interactive);
-
-    // temps de chargement et de déchargement des documents
-    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
-    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
-
-    // autres propriétés
-    console.log("type = " + p.type);
-    console.log("redirectCount = " + p.redirectCount);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', - '#dom-performancenavigationtiming-redirectcount', 'redirectCount')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.redirectCount")}}

diff --git a/files/fr/web/api/performancenavigationtiming/redirectcount/index.md b/files/fr/web/api/performancenavigationtiming/redirectcount/index.md new file mode 100644 index 0000000000..5c17f209f2 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/redirectcount/index.md @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.redirectCount +slug: Web/API/PerformanceNavigationTiming/redirectCount +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/redirectCount +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule redirectCount renvoie un timestamp représentant le nombre de redirections depuis la dernière navigation sans redirection dans le contexte de navigation actuel.

+ +

Syntaxe

+ +
perfEntry.redirectCount;
+ +

Valeur de retour

+ +

Un nombre représentant le nombre de redirections depuis la dernière navigation sans redirection dans le contexte de navigation actuel.

+ +

Exemple

+ +

L'exemple suivant illustre l'utilisation de cette propriété.

+ +
function print_nav_timing_data() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
+  let perfEntries = performance.getEntriesByType("navigation");
+
+  for (let i = 0; i < perfEntries.length; i++) {
+    console.log("= Entrée de navigation : entry[" + i + "]");
+    let p = perfEntries[i];
+    // propriétés du DOM
+    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
+    console.log("Contenu du DOM complet = " + p.domComplete);
+    console.log("Contenu du DOM interactif = " + p.interactive);
+
+    // temps de chargement et de déchargement des documents
+    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
+    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
+
+    // autres propriétés
+    console.log("type = " + p.type);
+    console.log("redirectCount = " + p.redirectCount);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', + '#dom-performancenavigationtiming-redirectcount', 'redirectCount')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.redirectCount")}}

diff --git a/files/fr/web/api/performancenavigationtiming/tojson/index.html b/files/fr/web/api/performancenavigationtiming/tojson/index.html deleted file mode 100644 index 8ca2ec6289..0000000000 --- a/files/fr/web/api/performancenavigationtiming/tojson/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: PerformanceNavigationTiming.toJSON() -slug: Web/API/PerformanceNavigationTiming/toJSON -tags: - - API - - Method - - Méthode - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/toJSON ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La méthode toJSON() est un sérialiseur - elle renvoie une représentation JSON de l'objet PerformanceNavigationTiming.

- -

Syntaxe

- -
const json = resourcePerfEntry.toJSON();
- -

Arguments

- -

Aucun.

- -

Valeur de retour

- -
-
json
-
Un objet JSON qui est la sérialisation de l'objet PerformanceNavigationTiming comme une carte avec des entrées de l'interface héritée la plus proche et avec des entrées pour chacun des attributs sérialisables.
-
- -

Exemple

- -
// Obtient une entrée de performance des ressources
-let perfEntries = performance.getEntriesByType("navigation");
-let entry = perfEntries[0];
-
-// Récupère le JSON et l'affiche dans les journaux
-let json = entry.toJSON();
-let s = JSON.stringify(json);
-console.log("PerformanceNavigationTiming.toJSON() = " + s);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', - '#dom-performancenavigationtiming-tojson', 'toJSON()')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.toJSON")}}

diff --git a/files/fr/web/api/performancenavigationtiming/tojson/index.md b/files/fr/web/api/performancenavigationtiming/tojson/index.md new file mode 100644 index 0000000000..8ca2ec6289 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/tojson/index.md @@ -0,0 +1,66 @@ +--- +title: PerformanceNavigationTiming.toJSON() +slug: Web/API/PerformanceNavigationTiming/toJSON +tags: + - API + - Method + - Méthode + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/toJSON +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La méthode toJSON() est un sérialiseur - elle renvoie une représentation JSON de l'objet PerformanceNavigationTiming.

+ +

Syntaxe

+ +
const json = resourcePerfEntry.toJSON();
+ +

Arguments

+ +

Aucun.

+ +

Valeur de retour

+ +
+
json
+
Un objet JSON qui est la sérialisation de l'objet PerformanceNavigationTiming comme une carte avec des entrées de l'interface héritée la plus proche et avec des entrées pour chacun des attributs sérialisables.
+
+ +

Exemple

+ +
// Obtient une entrée de performance des ressources
+let perfEntries = performance.getEntriesByType("navigation");
+let entry = perfEntries[0];
+
+// Récupère le JSON et l'affiche dans les journaux
+let json = entry.toJSON();
+let s = JSON.stringify(json);
+console.log("PerformanceNavigationTiming.toJSON() = " + s);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', + '#dom-performancenavigationtiming-tojson', 'toJSON()')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.toJSON")}}

diff --git a/files/fr/web/api/performancenavigationtiming/type/index.html b/files/fr/web/api/performancenavigationtiming/type/index.html deleted file mode 100644 index 4c0d9dcb12..0000000000 --- a/files/fr/web/api/performancenavigationtiming/type/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: PerformanceNavigationTiming.type -slug: Web/API/PerformanceNavigationTiming/type -tags: - - API - - Property - - Propriété - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/type ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La propriété en lecture seule type renvoie une chaîne de caractères DOMString représentant le type de navigation. La valeur doit être l'une des suivantes :

- -
-
navigate
-
La navigation a commencé en cliquant sur un lien, en saisissant l'URL dans la barre d'adresse du navigateur, en soumettant un formulaire ou en s'initialisant par une opération de script autre que reload et back_forward, comme indiqué ci-dessous.
-
reload
-
La navigation s'effectue par l'opération de rechargement du navigateur ou location.reload().
-
back_forward
-
La navigation se fait par l'opération de traversée de l'historique du navigateur.
-
prerender
-
La navigation est initiée par un indice de prétraitement.
-
- -

Syntaxe

- -
perfEntry.type;
- -

Valeur de retour

- -

Une chaîne de caractères DOMString qui est l'une des valeurs énumérées ci-dessus.

- -

Exemple

- -

L'exemple suivant illustre l'utilisation de cette propriété.

- -
function print_nav_timing_data() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
-  let perfEntries = performance.getEntriesByType("navigation");
-
-  for (let i = 0; i < perfEntries.length; i++) {
-    console.log("= Entrée de navigation : entry[" + i + "]");
-    let p = perfEntries[i];
-    // propriétés du DOM
-    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
-    console.log("Contenu du DOM complet = " + p.domComplete);
-    console.log("Contenu du DOM interactif = " + p.interactive);
-
-    // temps de chargement et de déchargement des documents
-    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
-    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
-
-    // autres propriétés
-    console.log("type = " + p.type);
-    console.log("redirectCount = " + p.redirectCount);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', '#dom-performancenavigationtiming-type', - 'type')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.type")}}

diff --git a/files/fr/web/api/performancenavigationtiming/type/index.md b/files/fr/web/api/performancenavigationtiming/type/index.md new file mode 100644 index 0000000000..4c0d9dcb12 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/type/index.md @@ -0,0 +1,85 @@ +--- +title: PerformanceNavigationTiming.type +slug: Web/API/PerformanceNavigationTiming/type +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/type +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule type renvoie une chaîne de caractères DOMString représentant le type de navigation. La valeur doit être l'une des suivantes :

+ +
+
navigate
+
La navigation a commencé en cliquant sur un lien, en saisissant l'URL dans la barre d'adresse du navigateur, en soumettant un formulaire ou en s'initialisant par une opération de script autre que reload et back_forward, comme indiqué ci-dessous.
+
reload
+
La navigation s'effectue par l'opération de rechargement du navigateur ou location.reload().
+
back_forward
+
La navigation se fait par l'opération de traversée de l'historique du navigateur.
+
prerender
+
La navigation est initiée par un indice de prétraitement.
+
+ +

Syntaxe

+ +
perfEntry.type;
+ +

Valeur de retour

+ +

Une chaîne de caractères DOMString qui est l'une des valeurs énumérées ci-dessus.

+ +

Exemple

+ +

L'exemple suivant illustre l'utilisation de cette propriété.

+ +
function print_nav_timing_data() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
+  let perfEntries = performance.getEntriesByType("navigation");
+
+  for (let i = 0; i < perfEntries.length; i++) {
+    console.log("= Entrée de navigation : entry[" + i + "]");
+    let p = perfEntries[i];
+    // propriétés du DOM
+    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
+    console.log("Contenu du DOM complet = " + p.domComplete);
+    console.log("Contenu du DOM interactif = " + p.interactive);
+
+    // temps de chargement et de déchargement des documents
+    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
+    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
+
+    // autres propriétés
+    console.log("type = " + p.type);
+    console.log("redirectCount = " + p.redirectCount);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', '#dom-performancenavigationtiming-type', + 'type')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.type")}}

diff --git a/files/fr/web/api/performancenavigationtiming/unloadeventend/index.html b/files/fr/web/api/performancenavigationtiming/unloadeventend/index.html deleted file mode 100644 index c1625c81d2..0000000000 --- a/files/fr/web/api/performancenavigationtiming/unloadeventend/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: PerformanceNavigationTiming.unloadEventEnd -slug: Web/API/PerformanceNavigationTiming/unloadEventEnd -tags: - - API - - Property - - Propriété - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/unloadEventEnd ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La propriété unloadEventEnd en lecture seule retourne un timestamp représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement de déchargement du document précédent par l'agent utilisateur. S'il n'y a pas de document précédent, la valeur de cette propriété est 0.

- -

Syntaxe

- -
perfEntry.unloadEventEnd;
- -

Valeur de retour

- -

Un timestamp représentant une valeur temporelle égale au temps immédiatement après que l'agent utilisateur ait terminé l'événement de déchargement du document précédent.

- -

Exemple

- -

L'exemple suivant illustre l'utilisation de cette propriété.

- -
function print_nav_timing_data() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
-  let perfEntries = performance.getEntriesByType("navigation");
-
-  for (let i = 0; i < perfEntries.length; i++) {
-    console.log("= Entrée de navigation : entry[" + i + "]");
-    let p = perfEntries[i];
-    // propriétés du DOM
-    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
-    console.log("Contenu du DOM complet = " + p.domComplete);
-    console.log("Contenu du DOM interactif = " + p.interactive);
-
-    // temps de chargement et de déchargement des documents
-    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
-    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
-
-    // autres propriétés
-    console.log("type = " + p.type);
-    console.log("redirectCount = " + p.redirectCount);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', - '#dom-performancenavigationtiming-unloadeventend', 'unloadEventEnd')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.unloadEventEnd")}}

diff --git a/files/fr/web/api/performancenavigationtiming/unloadeventend/index.md b/files/fr/web/api/performancenavigationtiming/unloadeventend/index.md new file mode 100644 index 0000000000..c1625c81d2 --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/unloadeventend/index.md @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.unloadEventEnd +slug: Web/API/PerformanceNavigationTiming/unloadEventEnd +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/unloadEventEnd +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La propriété unloadEventEnd en lecture seule retourne un timestamp représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement de déchargement du document précédent par l'agent utilisateur. S'il n'y a pas de document précédent, la valeur de cette propriété est 0.

+ +

Syntaxe

+ +
perfEntry.unloadEventEnd;
+ +

Valeur de retour

+ +

Un timestamp représentant une valeur temporelle égale au temps immédiatement après que l'agent utilisateur ait terminé l'événement de déchargement du document précédent.

+ +

Exemple

+ +

L'exemple suivant illustre l'utilisation de cette propriété.

+ +
function print_nav_timing_data() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
+  let perfEntries = performance.getEntriesByType("navigation");
+
+  for (let i = 0; i < perfEntries.length; i++) {
+    console.log("= Entrée de navigation : entry[" + i + "]");
+    let p = perfEntries[i];
+    // propriétés du DOM
+    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
+    console.log("Contenu du DOM complet = " + p.domComplete);
+    console.log("Contenu du DOM interactif = " + p.interactive);
+
+    // temps de chargement et de déchargement des documents
+    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
+    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
+
+    // autres propriétés
+    console.log("type = " + p.type);
+    console.log("redirectCount = " + p.redirectCount);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', + '#dom-performancenavigationtiming-unloadeventend', 'unloadEventEnd')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.unloadEventEnd")}}

diff --git a/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.html b/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.html deleted file mode 100644 index f4b7ceabba..0000000000 --- a/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: PerformanceNavigationTiming.unloadEventStart -slug: Web/API/PerformanceNavigationTiming/unloadEventStart -tags: - - API - - Property - - Propriété - - Reference - - PerformanceNavigationTiming - - Performance Web -translation_of: Web/API/PerformanceNavigationTiming/unloadEventStart ---- -
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
- -

La propriété en lecture seule unloadEventStart renvoie un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne commence l'événement de déchargement du document précédent. S'il n'y a pas de document précédent, cette propriété renvoie 0.

- -

Syntaxe

- -
perfEntry.unloadEventStart;
- -

Valeur de retour

- -

Un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne lance l'événement de déchargement du document précédent.

- -

Exemple

- -

L'exemple suivant illustre l'utilisation de cette propriété.

- -
function print_nav_timing_data() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
-  let perfEntries = performance.getEntriesByType("navigation");
-
-  for (let i = 0; i < perfEntries.length; i++) {
-    console.log("= Entrée de navigation : entry[" + i + "]");
-    let p = perfEntries[i];
-    // propriétés du DOM
-    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
-    console.log("Contenu du DOM complet = " + p.domComplete);
-    console.log("Contenu du DOM interactif = " + p.interactive);
-
-    // temps de chargement et de déchargement des documents
-    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
-    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
-
-    // autres propriétés
-    console.log("type = " + p.type);
-    console.log("redirectCount = " + p.redirectCount);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', - '#dom-performancenavigationtiming-unloadeventstart', 'unloadEventStart')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceNavigationTiming.unloadEventStart")}}

diff --git a/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.md b/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.md new file mode 100644 index 0000000000..f4b7ceabba --- /dev/null +++ b/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.md @@ -0,0 +1,74 @@ +--- +title: PerformanceNavigationTiming.unloadEventStart +slug: Web/API/PerformanceNavigationTiming/unloadEventStart +tags: + - API + - Property + - Propriété + - Reference + - PerformanceNavigationTiming + - Performance Web +translation_of: Web/API/PerformanceNavigationTiming/unloadEventStart +--- +
{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+ +

La propriété en lecture seule unloadEventStart renvoie un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne commence l'événement de déchargement du document précédent. S'il n'y a pas de document précédent, cette propriété renvoie 0.

+ +

Syntaxe

+ +
perfEntry.unloadEventStart;
+ +

Valeur de retour

+ +

Un timestamp représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne lance l'événement de déchargement du document précédent.

+ +

Exemple

+ +

L'exemple suivant illustre l'utilisation de cette propriété.

+ +
function print_nav_timing_data() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
+  let perfEntries = performance.getEntriesByType("navigation");
+
+  for (let i = 0; i < perfEntries.length; i++) {
+    console.log("= Entrée de navigation : entry[" + i + "]");
+    let p = perfEntries[i];
+    // propriétés du DOM
+    console.log("Contenu du DOM chargé = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
+    console.log("Contenu du DOM complet = " + p.domComplete);
+    console.log("Contenu du DOM interactif = " + p.interactive);
+
+    // temps de chargement et de déchargement des documents
+    console.log("Document chargé = " + (p.loadEventEnd - p.loadEventStart));
+    console.log("Document déchargé = " + (p.unloadEventEnd - p.unloadEventStart));
+
+    // autres propriétés
+    console.log("type = " + p.type);
+    console.log("redirectCount = " + p.redirectCount);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing Level 2', + '#dom-performancenavigationtiming-unloadeventstart', 'unloadEventStart')}}{{Spec2('Navigation Timing Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceNavigationTiming.unloadEventStart")}}

diff --git a/files/fr/web/api/performanceobserver/disconnect/index.html b/files/fr/web/api/performanceobserver/disconnect/index.html deleted file mode 100644 index d4e509708b..0000000000 --- a/files/fr/web/api/performanceobserver/disconnect/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: PeformanceObserver.disconnect() -slug: Web/API/PerformanceObserver/disconnect -tags: - - API - - Method - - Méthode - - Performance Observer API - - PerformanceObserver - - Reference - - Performance Web - - disconnect() - - observers -translation_of: Web/API/PerformanceObserver/disconnect ---- -
{{APIRef("Performance Timeline API")}}
- -

La méthode disconnect() de l'interface PerformanceObserver est utilisée pour empêcher l'observateur de performances de recevoir tout événement d'entrée de performance.

- -

Syntaxe

- -
performanceObserver.disconnect();
- -

Exemple

- -
const observer = new PerformanceObserver(function(list, obj) {
-  let entries = list.getEntries();
-  for (let i=0; i < entries.length; i++) {
-    // Traiter les événements "mark" et "frame"
-  }
-});
-observer.observe({entryTypes: ["mark", "frame"]});
-
-function perf_observer(list, observer) {
-  // Traiter l'événement "measure".
-  // ...
-  // Désactiver les événements de performance supplémentaires
-  observer.disconnect();
-}
-const observer2 = new PerformanceObserver(perf_observer);
-observer2.observe({entryTypes: ["measure"]});
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', - '#dom-performanceobserver-disconnect', 'disconnect()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode disconnect().
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceObserver.disconnect")}}

diff --git a/files/fr/web/api/performanceobserver/disconnect/index.md b/files/fr/web/api/performanceobserver/disconnect/index.md new file mode 100644 index 0000000000..d4e509708b --- /dev/null +++ b/files/fr/web/api/performanceobserver/disconnect/index.md @@ -0,0 +1,66 @@ +--- +title: PeformanceObserver.disconnect() +slug: Web/API/PerformanceObserver/disconnect +tags: + - API + - Method + - Méthode + - Performance Observer API + - PerformanceObserver + - Reference + - Performance Web + - disconnect() + - observers +translation_of: Web/API/PerformanceObserver/disconnect +--- +
{{APIRef("Performance Timeline API")}}
+ +

La méthode disconnect() de l'interface PerformanceObserver est utilisée pour empêcher l'observateur de performances de recevoir tout événement d'entrée de performance.

+ +

Syntaxe

+ +
performanceObserver.disconnect();
+ +

Exemple

+ +
const observer = new PerformanceObserver(function(list, obj) {
+  let entries = list.getEntries();
+  for (let i=0; i < entries.length; i++) {
+    // Traiter les événements "mark" et "frame"
+  }
+});
+observer.observe({entryTypes: ["mark", "frame"]});
+
+function perf_observer(list, observer) {
+  // Traiter l'événement "measure".
+  // ...
+  // Désactiver les événements de performance supplémentaires
+  observer.disconnect();
+}
+const observer2 = new PerformanceObserver(perf_observer);
+observer2.observe({entryTypes: ["measure"]});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', + '#dom-performanceobserver-disconnect', 'disconnect()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode disconnect().
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceObserver.disconnect")}}

diff --git a/files/fr/web/api/performanceobserver/index.html b/files/fr/web/api/performanceobserver/index.html deleted file mode 100644 index 27831bb210..0000000000 --- a/files/fr/web/api/performanceobserver/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: PerformanceObserver -slug: Web/API/PerformanceObserver -tags: - - API - - Interface - - Performance Observer API - - PerformanceObserver - - Reference - - Performance Web - - observers -translation_of: Web/API/PerformanceObserver ---- -
{{APIRef("Performance Timeline API")}}
- -

L'interface PerformanceObserver est utilisée pour observer les événements de mesure des performances et être notifié des nouvelles entréés de performance lorsqu'elles sont enregistrées dans la chronologie des performances du navigateur.

- -

{{AvailableInWorkers}}

- -

Constructeur

- -
-
PerformanceObserver()
-
Crée et retourne un nouvel objet PerformanceObserver.
-
- -

Méthodes

- -
-
PerformanceObserver.observe()
-
Spécifie l'ensemble des types d'entrées à observer. La fonction de rappel de l'observateur de performances sera invoquée lorsqu'une entrée de performance est enregistrée pour l'un des entryTypes spécifiés.
-
PerformanceObserver.disconnect()
-
Arrête l'observation des entrées de performances.
-
PerformanceObserver.takeRecords() {{Experimental_Inline}}
-
Renvoie la liste actuelle des entrées de performances stockées dans l'observateur de performance, en la vidant.
-
- -

Exemple

- -
function perf_observer(list, observer) {
-  // Traiter l'événement "measure".
-}
-const observer2 = new PerformanceObserver(perf_observer);
-observer2.observe({entryTypes: ["measure"]});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceobserver', 'PerformanceObserver')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de l'interface PerformanceObserver.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceObserver")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performanceobserver/index.md b/files/fr/web/api/performanceobserver/index.md new file mode 100644 index 0000000000..27831bb210 --- /dev/null +++ b/files/fr/web/api/performanceobserver/index.md @@ -0,0 +1,75 @@ +--- +title: PerformanceObserver +slug: Web/API/PerformanceObserver +tags: + - API + - Interface + - Performance Observer API + - PerformanceObserver + - Reference + - Performance Web + - observers +translation_of: Web/API/PerformanceObserver +--- +
{{APIRef("Performance Timeline API")}}
+ +

L'interface PerformanceObserver est utilisée pour observer les événements de mesure des performances et être notifié des nouvelles entréés de performance lorsqu'elles sont enregistrées dans la chronologie des performances du navigateur.

+ +

{{AvailableInWorkers}}

+ +

Constructeur

+ +
+
PerformanceObserver()
+
Crée et retourne un nouvel objet PerformanceObserver.
+
+ +

Méthodes

+ +
+
PerformanceObserver.observe()
+
Spécifie l'ensemble des types d'entrées à observer. La fonction de rappel de l'observateur de performances sera invoquée lorsqu'une entrée de performance est enregistrée pour l'un des entryTypes spécifiés.
+
PerformanceObserver.disconnect()
+
Arrête l'observation des entrées de performances.
+
PerformanceObserver.takeRecords() {{Experimental_Inline}}
+
Renvoie la liste actuelle des entrées de performances stockées dans l'observateur de performance, en la vidant.
+
+ +

Exemple

+ +
function perf_observer(list, observer) {
+  // Traiter l'événement "measure".
+}
+const observer2 = new PerformanceObserver(perf_observer);
+observer2.observe({entryTypes: ["measure"]});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceobserver', 'PerformanceObserver')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de l'interface PerformanceObserver.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceObserver")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performanceobserver/observe/index.html b/files/fr/web/api/performanceobserver/observe/index.html deleted file mode 100644 index b8fdf46703..0000000000 --- a/files/fr/web/api/performanceobserver/observe/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: PerformanceObserver.observe() -slug: Web/API/PerformanceObserver/observe -tags: - - API - - Method - - Méthode - - Performance - - PerformanceObserver - - Reference - - Performance Web -translation_of: Web/API/PerformanceObserver/observe ---- -
{{APIRef("Performance Timeline API")}}
- -

La méthode observe() de l'interface PerformanceObserver est utilisée pour spécifier l'ensemble des types d'entrée de performance à observer. Les types d'entrée de performance sont spécifiés sous la forme d'un tableau d'objets DOMString, chacun nommant un type d'entrée ; les noms de type sont documentés sur la page PerformanceEntry.entryType.

- -

Lorsqu'une entrée de performance correspondante est enregistrée, la fonction de rappel de l'observateur de performance — définie lors de la création du PerformanceObserver — est invoquée.

- -

Syntaxe

- -
observer.observe(options);
- -

Paramètres

- -
-
options
-
Un dictionnaire PerformanceObserverInit avec les membres possibles suivants : -
    -
  • entryTypes : Un tableau d'objets DOMString, chacun spécifiant un type d'entrée de performance à observer. Ne peut pas être utilisé avec les options « type » ou « buffered ».
    • -
  • type : Une DOMString unique spécifiant exactement un type d'entrée de performance à observer. Ne peut pas être utilisé avec l'option entryTypes.
    • -
  • buffered : Un indicateur booléen pour indiquer si les entrées en mémoire tampon doivent être mises en file d'attente dans la mémoire tampon de l'observateur. Ne doit être utilisé qu'avec l'option « type ».
    • -
-
-

Note :Voir PerformanceEntry.entryType pour une liste des noms de types d'entrées de performance valides. Les types non reconnus sont ignorés, bien que le navigateur puisse afficher un message d'avertissement sur la console pour aider les développeurs à déboguer leur code. Si aucun type valide n'est trouvé, observe() n'a aucun effet.

-
-
-
- -

Exemple

- -

Cet exemple crée et configure deux PerformanceObservers ; l'un surveille les événements "mark" et "frame", et l'autre surveille les événements "measure".

- -
const observer = new PerformanceObserver(function(list, obj) {
-  let entries = list.getEntries();
-  for (let i = 0; i < entries.length; i++) {
-    // Traiter les événements "mark" et "famse"
-  }
-});
-observer.observe({entryTypes: ["mark", "frame"]});
-
-function perf_observer(list, observer) {
-  // Traiter l'événement "measure"
-}
-const observer2 = new PerformanceObserver(perf_observer);
-observer2.observe({entryTypes: ["measure"]});
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceobserver-observe', - 'observe()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode observe().
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceObserver.observe")}}

diff --git a/files/fr/web/api/performanceobserver/observe/index.md b/files/fr/web/api/performanceobserver/observe/index.md new file mode 100644 index 0000000000..b8fdf46703 --- /dev/null +++ b/files/fr/web/api/performanceobserver/observe/index.md @@ -0,0 +1,81 @@ +--- +title: PerformanceObserver.observe() +slug: Web/API/PerformanceObserver/observe +tags: + - API + - Method + - Méthode + - Performance + - PerformanceObserver + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserver/observe +--- +
{{APIRef("Performance Timeline API")}}
+ +

La méthode observe() de l'interface PerformanceObserver est utilisée pour spécifier l'ensemble des types d'entrée de performance à observer. Les types d'entrée de performance sont spécifiés sous la forme d'un tableau d'objets DOMString, chacun nommant un type d'entrée ; les noms de type sont documentés sur la page PerformanceEntry.entryType.

+ +

Lorsqu'une entrée de performance correspondante est enregistrée, la fonction de rappel de l'observateur de performance — définie lors de la création du PerformanceObserver — est invoquée.

+ +

Syntaxe

+ +
observer.observe(options);
+ +

Paramètres

+ +
+
options
+
Un dictionnaire PerformanceObserverInit avec les membres possibles suivants : +
    +
  • entryTypes : Un tableau d'objets DOMString, chacun spécifiant un type d'entrée de performance à observer. Ne peut pas être utilisé avec les options « type » ou « buffered ».
    • +
  • type : Une DOMString unique spécifiant exactement un type d'entrée de performance à observer. Ne peut pas être utilisé avec l'option entryTypes.
    • +
  • buffered : Un indicateur booléen pour indiquer si les entrées en mémoire tampon doivent être mises en file d'attente dans la mémoire tampon de l'observateur. Ne doit être utilisé qu'avec l'option « type ».
    • +
+
+

Note :Voir PerformanceEntry.entryType pour une liste des noms de types d'entrées de performance valides. Les types non reconnus sont ignorés, bien que le navigateur puisse afficher un message d'avertissement sur la console pour aider les développeurs à déboguer leur code. Si aucun type valide n'est trouvé, observe() n'a aucun effet.

+
+
+
+ +

Exemple

+ +

Cet exemple crée et configure deux PerformanceObservers ; l'un surveille les événements "mark" et "frame", et l'autre surveille les événements "measure".

+ +
const observer = new PerformanceObserver(function(list, obj) {
+  let entries = list.getEntries();
+  for (let i = 0; i < entries.length; i++) {
+    // Traiter les événements "mark" et "famse"
+  }
+});
+observer.observe({entryTypes: ["mark", "frame"]});
+
+function perf_observer(list, observer) {
+  // Traiter l'événement "measure"
+}
+const observer2 = new PerformanceObserver(perf_observer);
+observer2.observe({entryTypes: ["measure"]});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceobserver-observe', + 'observe()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode observe().
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceObserver.observe")}}

diff --git a/files/fr/web/api/performanceobserver/performanceobserver/index.html b/files/fr/web/api/performanceobserver/performanceobserver/index.html deleted file mode 100644 index 41ffd9d82b..0000000000 --- a/files/fr/web/api/performanceobserver/performanceobserver/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: PerformanceObserver() -slug: Web/API/PerformanceObserver/PerformanceObserver -tags: - - API - - Constructor - - Constructeur - - PerformanceObserver - - Reference - - Performance Web -translation_of: Web/API/PerformanceObserver/PerformanceObserver ---- -
{{APIRef("Performance Timeline API")}}
- -

Le constructeur PerformanceObserver() crée un nouvel objet PerformanceObserver avec le callback d'observation donné. La fonction de rappel de l'observateur est invoquée lorsque des événements d'entrée de performance sont répertoriés pour les types d'entrées qui ont été enregistrés, via la méthode observe().

- -

Syntaxe

- -
const observer = new PerformanceObserver(callback);
- -

Paramètres

- -
-
callback
-
Une fonction de rappel qui sera invoquée lorsque des événements de performance observés sont enregistrés. Lorsque la fonction de rappel est invoquée, son premier paramètre est une liste des entrées de l'observateur de performance et le second paramètre est l'objet PerformanceObserver courant.
-
- -

Valeur de retour

- -

Un nouvel objet PerformanceObserver qui appellera le callback spécifiée lorsque des événements de performance observés se produisent.

- -

Exemple

- -
const observer = new PerformanceObserver(function(list, obj) {
-  let entries = list.getEntries();
-  for (let i = 0; i < entries.length; i++) {
-    // Traiter les événements "mark" et "frame"
-  }
-});
-observer.observe({entryTypes: ["mark", "frame"]});
-
-function perf_observer(list, observer) {
-  // Traiter l'événement "measure"
-}
-const observer2 = new PerformanceObserver(perf_observer);
-observer2.observe({entryTypes: ["measure"]});
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', - '#idl-def-performanceobservercallback', 'PerformanceObserver()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale du constructeur PerformanceObserver().
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceObserver.PerformanceObserver")}}

diff --git a/files/fr/web/api/performanceobserver/performanceobserver/index.md b/files/fr/web/api/performanceobserver/performanceobserver/index.md new file mode 100644 index 0000000000..41ffd9d82b --- /dev/null +++ b/files/fr/web/api/performanceobserver/performanceobserver/index.md @@ -0,0 +1,71 @@ +--- +title: PerformanceObserver() +slug: Web/API/PerformanceObserver/PerformanceObserver +tags: + - API + - Constructor + - Constructeur + - PerformanceObserver + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserver/PerformanceObserver +--- +
{{APIRef("Performance Timeline API")}}
+ +

Le constructeur PerformanceObserver() crée un nouvel objet PerformanceObserver avec le callback d'observation donné. La fonction de rappel de l'observateur est invoquée lorsque des événements d'entrée de performance sont répertoriés pour les types d'entrées qui ont été enregistrés, via la méthode observe().

+ +

Syntaxe

+ +
const observer = new PerformanceObserver(callback);
+ +

Paramètres

+ +
+
callback
+
Une fonction de rappel qui sera invoquée lorsque des événements de performance observés sont enregistrés. Lorsque la fonction de rappel est invoquée, son premier paramètre est une liste des entrées de l'observateur de performance et le second paramètre est l'objet PerformanceObserver courant.
+
+ +

Valeur de retour

+ +

Un nouvel objet PerformanceObserver qui appellera le callback spécifiée lorsque des événements de performance observés se produisent.

+ +

Exemple

+ +
const observer = new PerformanceObserver(function(list, obj) {
+  let entries = list.getEntries();
+  for (let i = 0; i < entries.length; i++) {
+    // Traiter les événements "mark" et "frame"
+  }
+});
+observer.observe({entryTypes: ["mark", "frame"]});
+
+function perf_observer(list, observer) {
+  // Traiter l'événement "measure"
+}
+const observer2 = new PerformanceObserver(perf_observer);
+observer2.observe({entryTypes: ["measure"]});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', + '#idl-def-performanceobservercallback', 'PerformanceObserver()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale du constructeur PerformanceObserver().
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceObserver.PerformanceObserver")}}

diff --git a/files/fr/web/api/performanceobserver/takerecords/index.html b/files/fr/web/api/performanceobserver/takerecords/index.html deleted file mode 100644 index 3d7dba65c9..0000000000 --- a/files/fr/web/api/performanceobserver/takerecords/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: PerformanceObserver.takeRecords() -slug: Web/API/PerformanceObserver/takeRecords -tags: -- API -- Method -- Méthode -- Performance Observer API -- PerformanceObserver -- Reference -- observers -- takeRecords() -translation_of: Web/API/PerformanceObserver/disconnect ---- -
{{APIRef("Performance Timeline API")}}
- -

La méthode takeRecords() de l'interface PerformanceObserver renvoie la liste actuelle des entrées de performance stockées dans l'observateur de performance, en la vidant.

- -

Syntaxe

- -
let performanceEntryList = performanceObserver.takeRecords();
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Une liste d'objets PerformanceEntry.

- -

Exemple

- -
const observer = new PerformanceObserver(function(list, obj) {
-  let entries = list.getEntries();
-  for (let i= 0; i < entries.length; i++) {
-    // Traiter les événements "mark" et "frame"
-  }
-});
-observer.observe({entryTypes: ["mark", "frame"]});
-let records = observer.takeRecords();
-console.log(records[0].name);
-console.log(records[0].startTime);
-console.log(records[0].duration);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', - '#dom-performanceobserver-takerecords', 'takeRecords()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode takeRecords().
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceObserver.takeRecords")}}

diff --git a/files/fr/web/api/performanceobserver/takerecords/index.md b/files/fr/web/api/performanceobserver/takerecords/index.md new file mode 100644 index 0000000000..3d7dba65c9 --- /dev/null +++ b/files/fr/web/api/performanceobserver/takerecords/index.md @@ -0,0 +1,68 @@ +--- +title: PerformanceObserver.takeRecords() +slug: Web/API/PerformanceObserver/takeRecords +tags: +- API +- Method +- Méthode +- Performance Observer API +- PerformanceObserver +- Reference +- observers +- takeRecords() +translation_of: Web/API/PerformanceObserver/disconnect +--- +
{{APIRef("Performance Timeline API")}}
+ +

La méthode takeRecords() de l'interface PerformanceObserver renvoie la liste actuelle des entrées de performance stockées dans l'observateur de performance, en la vidant.

+ +

Syntaxe

+ +
let performanceEntryList = performanceObserver.takeRecords();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Une liste d'objets PerformanceEntry.

+ +

Exemple

+ +
const observer = new PerformanceObserver(function(list, obj) {
+  let entries = list.getEntries();
+  for (let i= 0; i < entries.length; i++) {
+    // Traiter les événements "mark" et "frame"
+  }
+});
+observer.observe({entryTypes: ["mark", "frame"]});
+let records = observer.takeRecords();
+console.log(records[0].name);
+console.log(records[0].startTime);
+console.log(records[0].duration);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', + '#dom-performanceobserver-takerecords', 'takeRecords()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode takeRecords().
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceObserver.takeRecords")}}

diff --git a/files/fr/web/api/performanceobserverentrylist/getentries/index.html b/files/fr/web/api/performanceobserverentrylist/getentries/index.html deleted file mode 100644 index 6e86d57d99..0000000000 --- a/files/fr/web/api/performanceobserverentrylist/getentries/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: PerformanceObserverEntryList.getEntries() -slug: Web/API/PerformanceObserverEntryList/getEntries -tags: - - API - - Method - - Méthode - - PerformanceObserverEntryList - - Reference - - Performance Web -translation_of: Web/API/PerformanceObserverEntryList/getEntries ---- -
{{APIRef("Performance Timeline API")}}
- -

La méthode getEntries() de l'interface PerformanceObserverEntryList retourne une liste d'objets explicitement observés d'entrées de performance pour un filtre donné. Les membres de la liste sont déterminés par l'ensemble des types d'entrée spécifiés dans l'appel à la méthode observe(). La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).

- -
-

Note : Cette interface est exposée à Window et Worker.

-
- -

Syntaxe

- -
let entries = list.getEntries();
-entries = list.getEntries(PerformanceEntryFilterOptions);
- -

Utilisation spécifique :

- -
entries = list.getEntries({name: "entry_name", entryType: "mark"});
- -

Paramètres

- -
-
PerformanceEntryFilterOptions {{optional_inline}}
-
Est un dictionnaire PerformanceEntryFilterOptions, comportant les champs suivants : -
    -
  • "name", le nom d'une entrée de performance.
    • -
  • "entryType", le type d'entrée. Les types d'entrée valides sont énumérés dans la propriété PerformanceEntry.entryType.
    • -
  • "initiatorType", le type de la ressource initiatrice (par exemple un élément HTML). Les valeurs sont définies par la propriété PerformanceResourceTiming.initiatorType.
    • -
- Ce paramètre n'est actuellement pas pris en charge par Chrome ou Opera. -
-
- -

Valeur de retour

- -

Une liste d'objets PerformanceEntry explicitement observés qui répondent aux critères du filtre. Les éléments seront dans l'ordre chronologique basé sur les startTime des entrées. Si aucun objet répondant au filtre n'est trouvé, une liste vide est renvoyée. Si aucun argument n'est fourni, toutes les entrées sont renvoyées.

- -

Exemple

- -
function print_perf_entry(pe) {
-  console.log("name: " + pe.name +
-              "; entryType: " + pe.entryType +
-              "; startTime: " + pe.startTime +
-              "; duration: " + pe.duration);
-}
-
-// Crée un observateur pour tous les types d'événements de performance
-const observe_all = new PerformanceObserver(function(list, obs) {
-  let perfEntries;
-
-  // Imprime toutes les entrées
-  perfEntries = list.getEntries();
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-
-  // Imprime les entrées nommées "Begin" avec le type "mark".
-  perfEntries = list.getEntriesByName("Begin", "mark");
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-
-  // Imprime les entrées de type "mark".
-  perfEntries = list.getEntriesByType("mark");
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-});
-// inscrire tous les types d'événements de performance
-observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
-
-const observe_frame = new PerformanceObserver(function(list, obs) {
-  let perfEntries = list.getEntries();
-  // Ne devrait avoir que des entrées "frame"
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-});
-// inscrire à l'événement "frame" uniquement
-observe_frame.observe({entryTypes: ['frame']});
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', - '#dom-performanceobserverentrylist-getentries', 'getEntries()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceObserverEntryList.getEntries")}}

diff --git a/files/fr/web/api/performanceobserverentrylist/getentries/index.md b/files/fr/web/api/performanceobserverentrylist/getentries/index.md new file mode 100644 index 0000000000..6e86d57d99 --- /dev/null +++ b/files/fr/web/api/performanceobserverentrylist/getentries/index.md @@ -0,0 +1,115 @@ +--- +title: PerformanceObserverEntryList.getEntries() +slug: Web/API/PerformanceObserverEntryList/getEntries +tags: + - API + - Method + - Méthode + - PerformanceObserverEntryList + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserverEntryList/getEntries +--- +
{{APIRef("Performance Timeline API")}}
+ +

La méthode getEntries() de l'interface PerformanceObserverEntryList retourne une liste d'objets explicitement observés d'entrées de performance pour un filtre donné. Les membres de la liste sont déterminés par l'ensemble des types d'entrée spécifiés dans l'appel à la méthode observe(). La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).

+ +
+

Note : Cette interface est exposée à Window et Worker.

+
+ +

Syntaxe

+ +
let entries = list.getEntries();
+entries = list.getEntries(PerformanceEntryFilterOptions);
+ +

Utilisation spécifique :

+ +
entries = list.getEntries({name: "entry_name", entryType: "mark"});
+ +

Paramètres

+ +
+
PerformanceEntryFilterOptions {{optional_inline}}
+
Est un dictionnaire PerformanceEntryFilterOptions, comportant les champs suivants : +
    +
  • "name", le nom d'une entrée de performance.
    • +
  • "entryType", le type d'entrée. Les types d'entrée valides sont énumérés dans la propriété PerformanceEntry.entryType.
    • +
  • "initiatorType", le type de la ressource initiatrice (par exemple un élément HTML). Les valeurs sont définies par la propriété PerformanceResourceTiming.initiatorType.
    • +
+ Ce paramètre n'est actuellement pas pris en charge par Chrome ou Opera. +
+
+ +

Valeur de retour

+ +

Une liste d'objets PerformanceEntry explicitement observés qui répondent aux critères du filtre. Les éléments seront dans l'ordre chronologique basé sur les startTime des entrées. Si aucun objet répondant au filtre n'est trouvé, une liste vide est renvoyée. Si aucun argument n'est fourni, toutes les entrées sont renvoyées.

+ +

Exemple

+ +
function print_perf_entry(pe) {
+  console.log("name: " + pe.name +
+              "; entryType: " + pe.entryType +
+              "; startTime: " + pe.startTime +
+              "; duration: " + pe.duration);
+}
+
+// Crée un observateur pour tous les types d'événements de performance
+const observe_all = new PerformanceObserver(function(list, obs) {
+  let perfEntries;
+
+  // Imprime toutes les entrées
+  perfEntries = list.getEntries();
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+
+  // Imprime les entrées nommées "Begin" avec le type "mark".
+  perfEntries = list.getEntriesByName("Begin", "mark");
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+
+  // Imprime les entrées de type "mark".
+  perfEntries = list.getEntriesByType("mark");
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+});
+// inscrire tous les types d'événements de performance
+observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
+
+const observe_frame = new PerformanceObserver(function(list, obs) {
+  let perfEntries = list.getEntries();
+  // Ne devrait avoir que des entrées "frame"
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+});
+// inscrire à l'événement "frame" uniquement
+observe_frame.observe({entryTypes: ['frame']});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', + '#dom-performanceobserverentrylist-getentries', 'getEntries()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceObserverEntryList.getEntries")}}

diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html deleted file mode 100644 index b92be9f1a5..0000000000 --- a/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: PerformanceObserverEntryList.getEntriesByName() -slug: Web/API/PerformanceObserverEntryList/getEntriesByName -tags: - - API - - Method - - Méthode - - PerformanceObserverEntryList - - Reference - - Performance Web -translation_of: Web/API/PerformanceObserverEntryList/getEntriesByName ---- -
{{APIRef("Performance Timeline API")}}
- -

La méthode getEntriesByName() de l'interface PerformanceObserverEntryList retourne une liste d'objets d'entrée de performance explicitement observés pour un name et entryType donnés. Les membres de la liste sont déterminés par l'ensemble des types d'entrées spécifiés dans l'appel à la méthode observe(). La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).

- -
-

Note : Cette interface est exposée à Window et Worker.

-
- -

Syntaxe

- -
let entries = list.getEntriesByName(name, type);
- -

Paramètres

- -
-
name
-
Une chaîne de caractères DOMString représentant le nom de l'entrée à récupérer.
-
type {{optional_inline}}
-
Une chaîne de caractères DOMString représentant le type d'entrée à récupérer tel que « mark ». Les types d'entrée valides sont énumérés dans PerformanceEntry.entryType.
-
- -

Valeur de retour

- -

Une liste d'objets d'entrée de performance explicitement observés qui ont le name et le type spécifiés. Si l'argument type n'est pas spécifié, seul name sera utilisé pour déterminer les entrées à retourner. Les éléments seront triés dans l'ordre chronologique selon les startTime des entrées. Si aucun objet ne répond aux critères spécifiés, une liste vide est retournée.

- -

Exemple

- -
function print_perf_entry(pe) {
-  console.log("name: " + pe.name +
-              "; entryType: " + pe.entryType +
-              "; startTime: " + pe.startTime +
-              "; duration: " + pe.duration);
-}
-
-// Crée un observateur pour tous les types d'événements de performance
-const observe_all = new PerformanceObserver(function(list, obs) {
-  let perfEntries;
-
-  // Imprime toutes les entrées
-  perfEntries = list.getEntries();
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-
-  // Imprime les entrées nommées "Begin" avec le type "mark".
-  perfEntries = list.getEntriesByName("Begin", "mark");
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-
-  // Imprime les entrées de type "mark".
-  perfEntries = list.getEntriesByType("mark");
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-});
-// inscrire tous les types d'événements de performance
-observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
-
-const observe_frame = new PerformanceObserver(function(list, obs) {
-  let perfEntries = list.getEntries();
-  // Ne devrait avoir que des entrées "frame"
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-});
-// inscrire à l'événement "frame" uniquement
-observe_frame.observe({entryTypes: ['frame']});
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', - '#dom-performanceobserverentrylist-getentriesbyname', 'getEntriesByName()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode getEntriesByName().
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceObserverEntryList.getEntriesByName")}}

diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.md b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.md new file mode 100644 index 0000000000..b92be9f1a5 --- /dev/null +++ b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.md @@ -0,0 +1,105 @@ +--- +title: PerformanceObserverEntryList.getEntriesByName() +slug: Web/API/PerformanceObserverEntryList/getEntriesByName +tags: + - API + - Method + - Méthode + - PerformanceObserverEntryList + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserverEntryList/getEntriesByName +--- +
{{APIRef("Performance Timeline API")}}
+ +

La méthode getEntriesByName() de l'interface PerformanceObserverEntryList retourne une liste d'objets d'entrée de performance explicitement observés pour un name et entryType donnés. Les membres de la liste sont déterminés par l'ensemble des types d'entrées spécifiés dans l'appel à la méthode observe(). La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).

+ +
+

Note : Cette interface est exposée à Window et Worker.

+
+ +

Syntaxe

+ +
let entries = list.getEntriesByName(name, type);
+ +

Paramètres

+ +
+
name
+
Une chaîne de caractères DOMString représentant le nom de l'entrée à récupérer.
+
type {{optional_inline}}
+
Une chaîne de caractères DOMString représentant le type d'entrée à récupérer tel que « mark ». Les types d'entrée valides sont énumérés dans PerformanceEntry.entryType.
+
+ +

Valeur de retour

+ +

Une liste d'objets d'entrée de performance explicitement observés qui ont le name et le type spécifiés. Si l'argument type n'est pas spécifié, seul name sera utilisé pour déterminer les entrées à retourner. Les éléments seront triés dans l'ordre chronologique selon les startTime des entrées. Si aucun objet ne répond aux critères spécifiés, une liste vide est retournée.

+ +

Exemple

+ +
function print_perf_entry(pe) {
+  console.log("name: " + pe.name +
+              "; entryType: " + pe.entryType +
+              "; startTime: " + pe.startTime +
+              "; duration: " + pe.duration);
+}
+
+// Crée un observateur pour tous les types d'événements de performance
+const observe_all = new PerformanceObserver(function(list, obs) {
+  let perfEntries;
+
+  // Imprime toutes les entrées
+  perfEntries = list.getEntries();
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+
+  // Imprime les entrées nommées "Begin" avec le type "mark".
+  perfEntries = list.getEntriesByName("Begin", "mark");
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+
+  // Imprime les entrées de type "mark".
+  perfEntries = list.getEntriesByType("mark");
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+});
+// inscrire tous les types d'événements de performance
+observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
+
+const observe_frame = new PerformanceObserver(function(list, obs) {
+  let perfEntries = list.getEntries();
+  // Ne devrait avoir que des entrées "frame"
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+});
+// inscrire à l'événement "frame" uniquement
+observe_frame.observe({entryTypes: ['frame']});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', + '#dom-performanceobserverentrylist-getentriesbyname', 'getEntriesByName()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode getEntriesByName().
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceObserverEntryList.getEntriesByName")}}

diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html deleted file mode 100644 index 8d692a3092..0000000000 --- a/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: PerformanceObserverEntryList.getEntriesByType() -slug: Web/API/PerformanceObserverEntryList/getEntriesByType -tags: - - API - - Method - - Méthodes - - PerformanceObserverEntryList - - Reference - - Performance Web -translation_of: Web/API/PerformanceObserverEntryList/getEntriesByType ---- -
{{APIRef("Performance Timeline API")}}
- -

La méthode getEntriesByType() de la PerformanceObserverEntryList retourne une liste d'objets d'entrée de performance explicitement observés pour un type d'entrée de performance. Les membres de la liste sont déterminés par l'ensemble des types d'entrées spécifiés dans l'appel à la méthode observe(). La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).

- -
-

Note : Cette interface est exposée à Window et Worker.

-
- -

Syntaxe

- -
let entries = list.getEntriesByType(type);
- -

Paramètres

- -
-
type
-
Le type d'entrée à récupérer, tel que « frame ». Les types d'entrée valides sont énumérés dans PerformanceEntry.entryType.
-
- -

Valeur de retour

- -

Une liste d'objets PerformanceEntry explicitement observés qui ont le type spécifié. Les éléments seront dans l'ordre chronologique basé sur les startTime des entrées. Si aucun objet n'a le type spécifié, ou si aucun argument n'est fourni, une liste vide est retournée.

- -

Exemple

- -
function print_perf_entry(pe) {
-  console.log("name: " + pe.name +
-              "; entryType: " + pe.entryType +
-              "; startTime: " + pe.startTime +
-              "; duration: " + pe.duration);
-}
-
-// Crée un observateur pour tous les types d'événements de performance
-const observe_all = new PerformanceObserver(function(list, obs) {
-  let perfEntries;
-
-  // Imprime toutes les entrées
-  perfEntries = list.getEntries();
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-
-  // Imprime les entrées nommées "Begin" avec le type "mark".
-  perfEntries = list.getEntriesByName("Begin", "mark");
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-
-  // Imprime les entrées de type "mark".
-  perfEntries = list.getEntriesByType("mark");
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-});
-// inscrire tous les types d'événements de performance
-observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
-
-const observe_frame = new PerformanceObserver(function(list, obs) {
-  let perfEntries = list.getEntries();
-  // Ne devrait avoir que des entrées "frame"
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-  }
-});
-// inscrire à l'événement "frame" uniquement
-observe_frame.observe({entryTypes: ['frame']});
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceobserverentrylist-getentriesbytype', 'getEntriesByType()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode getEntriesByType().
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceObserverEntryList.getEntriesByType")}}

diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.md b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.md new file mode 100644 index 0000000000..8d692a3092 --- /dev/null +++ b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.md @@ -0,0 +1,102 @@ +--- +title: PerformanceObserverEntryList.getEntriesByType() +slug: Web/API/PerformanceObserverEntryList/getEntriesByType +tags: + - API + - Method + - Méthodes + - PerformanceObserverEntryList + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserverEntryList/getEntriesByType +--- +
{{APIRef("Performance Timeline API")}}
+ +

La méthode getEntriesByType() de la PerformanceObserverEntryList retourne une liste d'objets d'entrée de performance explicitement observés pour un type d'entrée de performance. Les membres de la liste sont déterminés par l'ensemble des types d'entrées spécifiés dans l'appel à la méthode observe(). La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).

+ +
+

Note : Cette interface est exposée à Window et Worker.

+
+ +

Syntaxe

+ +
let entries = list.getEntriesByType(type);
+ +

Paramètres

+ +
+
type
+
Le type d'entrée à récupérer, tel que « frame ». Les types d'entrée valides sont énumérés dans PerformanceEntry.entryType.
+
+ +

Valeur de retour

+ +

Une liste d'objets PerformanceEntry explicitement observés qui ont le type spécifié. Les éléments seront dans l'ordre chronologique basé sur les startTime des entrées. Si aucun objet n'a le type spécifié, ou si aucun argument n'est fourni, une liste vide est retournée.

+ +

Exemple

+ +
function print_perf_entry(pe) {
+  console.log("name: " + pe.name +
+              "; entryType: " + pe.entryType +
+              "; startTime: " + pe.startTime +
+              "; duration: " + pe.duration);
+}
+
+// Crée un observateur pour tous les types d'événements de performance
+const observe_all = new PerformanceObserver(function(list, obs) {
+  let perfEntries;
+
+  // Imprime toutes les entrées
+  perfEntries = list.getEntries();
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+
+  // Imprime les entrées nommées "Begin" avec le type "mark".
+  perfEntries = list.getEntriesByName("Begin", "mark");
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+
+  // Imprime les entrées de type "mark".
+  perfEntries = list.getEntriesByType("mark");
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+});
+// inscrire tous les types d'événements de performance
+observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
+
+const observe_frame = new PerformanceObserver(function(list, obs) {
+  let perfEntries = list.getEntries();
+  // Ne devrait avoir que des entrées "frame"
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+  }
+});
+// inscrire à l'événement "frame" uniquement
+observe_frame.observe({entryTypes: ['frame']});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#dom-performanceobserverentrylist-getentriesbytype', 'getEntriesByType()')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale de la méthode getEntriesByType().
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceObserverEntryList.getEntriesByType")}}

diff --git a/files/fr/web/api/performanceobserverentrylist/index.html b/files/fr/web/api/performanceobserverentrylist/index.html deleted file mode 100644 index 14cfeaea9e..0000000000 --- a/files/fr/web/api/performanceobserverentrylist/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: PerformanceObserverEntryList -slug: Web/API/PerformanceObserverEntryList -tags: - - API - - Interface - - Reference - - Performance Web -translation_of: Web/API/PerformanceObserverEntryList ---- -
{{APIRef("Performance Timeline API")}}
- -

L'interface PerformanceObserverEntryList est une liste d'événements de performance qui ont été explicitement observés via la méthode observe().

- -
-

Note : Cette interface est exposée à Window et Worker.

-
- -

Méthodes

- -
-
PerformanceObserverEntryList.getEntries()
-
Retourne une liste d'objets explicitement observés de PerformanceEntry en fonction du filtre donné.
-
PerformanceObserverEntryList.getEntriesByType()
-
Retourne une liste d'objets explicitement observés de PerformanceEntry du type d'entrée donné.
-
PerformanceObserverEntryList.getEntriesByName()
-
Retourne une liste d'objets explicitement observés de PerformanceEntry en fonction du nom et du type d'entrée donnés.
-
- -

Exemple

- -
// Crée un observateur pour tous les types d'événements de performance
-// la liste est de type PerformanceObserveEntryList
-const observe_all = new PerformanceObserver(function(list, obs) {
-  let perfEntries = list.getEntries();
-  for (let i = 0; i < perfEntries.length; i++) {
-    print_perf_entry(perfEntries[i]);
-    // faire quelque chose avec
-  }
-})
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#idl-def-performanceobserverentrylist', 'PerformanceObserverEntryList')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceObserverEntryList")}}

diff --git a/files/fr/web/api/performanceobserverentrylist/index.md b/files/fr/web/api/performanceobserverentrylist/index.md new file mode 100644 index 0000000000..14cfeaea9e --- /dev/null +++ b/files/fr/web/api/performanceobserverentrylist/index.md @@ -0,0 +1,63 @@ +--- +title: PerformanceObserverEntryList +slug: Web/API/PerformanceObserverEntryList +tags: + - API + - Interface + - Reference + - Performance Web +translation_of: Web/API/PerformanceObserverEntryList +--- +
{{APIRef("Performance Timeline API")}}
+ +

L'interface PerformanceObserverEntryList est une liste d'événements de performance qui ont été explicitement observés via la méthode observe().

+ +
+

Note : Cette interface est exposée à Window et Worker.

+
+ +

Méthodes

+ +
+
PerformanceObserverEntryList.getEntries()
+
Retourne une liste d'objets explicitement observés de PerformanceEntry en fonction du filtre donné.
+
PerformanceObserverEntryList.getEntriesByType()
+
Retourne une liste d'objets explicitement observés de PerformanceEntry du type d'entrée donné.
+
PerformanceObserverEntryList.getEntriesByName()
+
Retourne une liste d'objets explicitement observés de PerformanceEntry en fonction du nom et du type d'entrée donnés.
+
+ +

Exemple

+ +
// Crée un observateur pour tous les types d'événements de performance
+// la liste est de type PerformanceObserveEntryList
+const observe_all = new PerformanceObserver(function(list, obs) {
+  let perfEntries = list.getEntries();
+  for (let i = 0; i < perfEntries.length; i++) {
+    print_perf_entry(perfEntries[i]);
+    // faire quelque chose avec
+  }
+})
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Performance Timeline Level 2', '#idl-def-performanceobserverentrylist', 'PerformanceObserverEntryList')}}{{Spec2('Performance Timeline Level 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceObserverEntryList")}}

diff --git a/files/fr/web/api/performancepainttiming/index.html b/files/fr/web/api/performancepainttiming/index.html deleted file mode 100644 index 01214c61c1..0000000000 --- a/files/fr/web/api/performancepainttiming/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: PerformancePaintTiming -slug: Web/API/PerformancePaintTiming -tags: - - API - - Interface - - Paint Timing - - Performance Timeline API - - PerformancePaintTiming - - Reference - - Performance Web -translation_of: Web/API/PerformancePaintTiming ---- -

{{APIRef("Performance Timeline API")}}

- -

L'interface PerformancePaintTiming de l'API Paint Timing API fournit des informations de temps sur les opérations de « peinture » (également appelées « render ») pendant la construction de la page Web. « Paint » fait référence à la conversion de l'arbre de rendu en pixels à l'écran.

- -

Une application peut enregistrer un PerformanceObserver pour le type d'entrée de performance « paint » et l'observateur peut récupérer les heures auxquelles les événements de peinture se produisent. Utilisez ces informations pour aider à identifier les zones qui prennent trop de temps pour offrir une bonne expérience utilisateur.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Cette interface n'a pas de propriétés mais elle étend les propriétés de PerformanceEntry suivantes (pour le type d'entrée de performance « paint ») en qualifiant/contraignant les propriétés comme suit :

- -
-
PerformanceEntry.entryType
-
Retourne « paint ».
-
PerformanceEntry.name
-
Retourne soit "first-paint" ou "first-contentful-paint".
-
PerformanceEntry.startTime
-
Retourne le DOMHighResTimeStamp du moment où la peinture s'est produite.
-
PerformanceEntry.duration
-
Retourne « 0 ».
-
- -

Méthodes

- -

Cette interface n'a pas de méthodes.

- -

Exemple

- -
function showPaintTimings() {
-  if (window.performance) {
-    let performance = window.performance;
-    let performanceEntries = performance.getEntriesByType('paint');
-    performanceEntries.forEach( (performanceEntry, i, entries) => {
-      console.log("Le temps pour " + performanceEntry.name + " est de " + performanceEntry.startTime + " millisecondes.");
-    });
-  } else {
-    console.log("Performance Timing n'est pas prise en charge.");
-  }
-}
- -

Le code ci-dessus produit une sortie de console semblable à ce qui suit :

- -
Le temps pour first-paint est de 2785.915 millisecondes.
-Le temps pour first-contentful-paint est de 2787.460 millisecondes.
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Paint Timing','#sec-PerformancePaintTiming','PerformancePaintTiming')}}{{Spec2('Paint Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformancePaintTiming")}}

diff --git a/files/fr/web/api/performancepainttiming/index.md b/files/fr/web/api/performancepainttiming/index.md new file mode 100644 index 0000000000..01214c61c1 --- /dev/null +++ b/files/fr/web/api/performancepainttiming/index.md @@ -0,0 +1,81 @@ +--- +title: PerformancePaintTiming +slug: Web/API/PerformancePaintTiming +tags: + - API + - Interface + - Paint Timing + - Performance Timeline API + - PerformancePaintTiming + - Reference + - Performance Web +translation_of: Web/API/PerformancePaintTiming +--- +

{{APIRef("Performance Timeline API")}}

+ +

L'interface PerformancePaintTiming de l'API Paint Timing API fournit des informations de temps sur les opérations de « peinture » (également appelées « render ») pendant la construction de la page Web. « Paint » fait référence à la conversion de l'arbre de rendu en pixels à l'écran.

+ +

Une application peut enregistrer un PerformanceObserver pour le type d'entrée de performance « paint » et l'observateur peut récupérer les heures auxquelles les événements de peinture se produisent. Utilisez ces informations pour aider à identifier les zones qui prennent trop de temps pour offrir une bonne expérience utilisateur.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Cette interface n'a pas de propriétés mais elle étend les propriétés de PerformanceEntry suivantes (pour le type d'entrée de performance « paint ») en qualifiant/contraignant les propriétés comme suit :

+ +
+
PerformanceEntry.entryType
+
Retourne « paint ».
+
PerformanceEntry.name
+
Retourne soit "first-paint" ou "first-contentful-paint".
+
PerformanceEntry.startTime
+
Retourne le DOMHighResTimeStamp du moment où la peinture s'est produite.
+
PerformanceEntry.duration
+
Retourne « 0 ».
+
+ +

Méthodes

+ +

Cette interface n'a pas de méthodes.

+ +

Exemple

+ +
function showPaintTimings() {
+  if (window.performance) {
+    let performance = window.performance;
+    let performanceEntries = performance.getEntriesByType('paint');
+    performanceEntries.forEach( (performanceEntry, i, entries) => {
+      console.log("Le temps pour " + performanceEntry.name + " est de " + performanceEntry.startTime + " millisecondes.");
+    });
+  } else {
+    console.log("Performance Timing n'est pas prise en charge.");
+  }
+}
+ +

Le code ci-dessus produit une sortie de console semblable à ce qui suit :

+ +
Le temps pour first-paint est de 2785.915 millisecondes.
+Le temps pour first-contentful-paint est de 2787.460 millisecondes.
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Paint Timing','#sec-PerformancePaintTiming','PerformancePaintTiming')}}{{Spec2('Paint Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformancePaintTiming")}}

diff --git a/files/fr/web/api/performanceresourcetiming/connectend/index.html b/files/fr/web/api/performanceresourcetiming/connectend/index.html deleted file mode 100644 index c5c10a2ec5..0000000000 --- a/files/fr/web/api/performanceresourcetiming/connectend/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: PerformanceResourceTiming.connectEnd -slug: Web/API/PerformanceResourceTiming/connectEnd -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - connectEnd -translation_of: Web/API/PerformanceResourceTiming/connectEnd ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule connectEnd renvoie le timestamp de l'instant suivant immédiatement la fin d'établissement de la connexion du navigateur au serveur pour récupérer la ressource. La valeur de l'horodatage comprend l'intervalle de temps pour établir la connexion de transport, ainsi que d'autres intervalles de temps tels que la poignée de main TLS/SSL et l'authentification SOCKS.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.connectEnd;
- -

Valeur de retour

- -

Un DOMHighResTimeStamp représentant le temps après l'établissement d'une connexion.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont consignés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-connectend', - 'connectEnd')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.connectEnd")}}

diff --git a/files/fr/web/api/performanceresourcetiming/connectend/index.md b/files/fr/web/api/performanceresourcetiming/connectend/index.md new file mode 100644 index 0000000000..c5c10a2ec5 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/connectend/index.md @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.connectEnd +slug: Web/API/PerformanceResourceTiming/connectEnd +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - connectEnd +translation_of: Web/API/PerformanceResourceTiming/connectEnd +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule connectEnd renvoie le timestamp de l'instant suivant immédiatement la fin d'établissement de la connexion du navigateur au serveur pour récupérer la ressource. La valeur de l'horodatage comprend l'intervalle de temps pour établir la connexion de transport, ainsi que d'autres intervalles de temps tels que la poignée de main TLS/SSL et l'authentification SOCKS.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.connectEnd;
+ +

Valeur de retour

+ +

Un DOMHighResTimeStamp représentant le temps après l'établissement d'une connexion.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont consignés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-connectend', + 'connectEnd')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.connectEnd")}}

diff --git a/files/fr/web/api/performanceresourcetiming/connectstart/index.html b/files/fr/web/api/performanceresourcetiming/connectstart/index.html deleted file mode 100644 index 31d6fbf5da..0000000000 --- a/files/fr/web/api/performanceresourcetiming/connectstart/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: PerformanceResourceTiming.connectStart -slug: Web/API/PerformanceResourceTiming/connectStart -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - connectStart -translation_of: Web/API/PerformanceResourceTiming/connectStart ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule connectStart retourne le timestamp de l'instant avant que l'agent utilisateur ne commence à établir la connexion au serveur pour récupérer la ressource.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.connectStart;
- -

Valeur de retour

- -

Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence à établir la connexion avec le serveur pour récupérer la ressource.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont consignés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-connectstart', - 'connectStart')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.connectStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/connectstart/index.md b/files/fr/web/api/performanceresourcetiming/connectstart/index.md new file mode 100644 index 0000000000..31d6fbf5da --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/connectstart/index.md @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.connectStart +slug: Web/API/PerformanceResourceTiming/connectStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - connectStart +translation_of: Web/API/PerformanceResourceTiming/connectStart +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule connectStart retourne le timestamp de l'instant avant que l'agent utilisateur ne commence à établir la connexion au serveur pour récupérer la ressource.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.connectStart;
+ +

Valeur de retour

+ +

Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence à établir la connexion avec le serveur pour récupérer la ressource.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont consignés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-connectstart', + 'connectStart')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.connectStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html deleted file mode 100644 index 9f83cb80c7..0000000000 --- a/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: PerformanceResourceTiming.decodedBodySize -slug: Web/API/PerformanceResourceTiming/decodedBodySize -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - decodedBodySize -translation_of: Web/API/PerformanceResourceTiming/decodedBodySize ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule decodedBodySize renvoie la taille (en octets) reçue de la récupération (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué. Si la ressource est récupérée à partir d'un cache d'application ou de ressources locales, elle renvoie la taille de la donnée utile après suppression de tous les codages de contenu appliqués.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.decodedBodySize;
- -

Valeur de retour

- -

La taille (en octets) reçue de l'extraction (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés de taille de tous les événements de type "resource" est enregistrée.

- -
function log_sizes(perfEntry){
-  // Vérifie la prise en charge des propriétés *size et imprime leurs
-  // valeurs si elles sont prises en charge.
-  if ("decodedBodySize" in perfEntry) {
-    console.log("decodedBodySize = " + perfEntry.decodedBodySize);
-  } else {
-    console.log("decodedBodySize = N'EST PAS pris en charge");
-  }
-
-  if ("encodedBodySize" in perfEntry) {
-    console.log("encodedBodySize = " + perfEntry.encodedBodySize);
-  } else {
-    console.log("encodedBodySize = N'EST PAS pris en charge");
-  }
-
-  if ("transferSize" in perfEntry) {
-    console.log("transferSize = " + perfEntry.transferSize);
-  } else {
-    console.log("transferSize = N'EST PAS pris en charge");
-  }
-}
-function check_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    log_sizes(p[i]);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', - '#dom-performanceresourcetiming-decodedbodysize', 'decodedBodySize')}}{{Spec2('Resource Timing 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.decodedBodySize")}}

diff --git a/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.md b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.md new file mode 100644 index 0000000000..9f83cb80c7 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.md @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.decodedBodySize +slug: Web/API/PerformanceResourceTiming/decodedBodySize +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - decodedBodySize +translation_of: Web/API/PerformanceResourceTiming/decodedBodySize +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule decodedBodySize renvoie la taille (en octets) reçue de la récupération (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué. Si la ressource est récupérée à partir d'un cache d'application ou de ressources locales, elle renvoie la taille de la donnée utile après suppression de tous les codages de contenu appliqués.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.decodedBodySize;
+ +

Valeur de retour

+ +

La taille (en octets) reçue de l'extraction (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés de taille de tous les événements de type "resource" est enregistrée.

+ +
function log_sizes(perfEntry){
+  // Vérifie la prise en charge des propriétés *size et imprime leurs
+  // valeurs si elles sont prises en charge.
+  if ("decodedBodySize" in perfEntry) {
+    console.log("decodedBodySize = " + perfEntry.decodedBodySize);
+  } else {
+    console.log("decodedBodySize = N'EST PAS pris en charge");
+  }
+
+  if ("encodedBodySize" in perfEntry) {
+    console.log("encodedBodySize = " + perfEntry.encodedBodySize);
+  } else {
+    console.log("encodedBodySize = N'EST PAS pris en charge");
+  }
+
+  if ("transferSize" in perfEntry) {
+    console.log("transferSize = " + perfEntry.transferSize);
+  } else {
+    console.log("transferSize = N'EST PAS pris en charge");
+  }
+}
+function check_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    log_sizes(p[i]);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', + '#dom-performanceresourcetiming-decodedbodysize', 'decodedBodySize')}}{{Spec2('Resource Timing 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.decodedBodySize")}}

diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html deleted file mode 100644 index be289e3896..0000000000 --- a/files/fr/web/api/performanceresourcetiming/domainlookupend/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: PerformanceResourceTiming.domainLookupEnd -slug: Web/API/PerformanceResourceTiming/domainLookupEnd -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - domainLookupEnd -translation_of: Web/API/PerformanceResourceTiming/domainLookupEnd ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule domainLookupEnd retourne le timestamp immédiatement après que le navigateur ait terminé la recherche du nom de domaine pour la ressource.

- -

Si l'agent utilisateur dispose des informations de domaine dans le cache, domainLookupStart et domainLookupEnd représentent les moments où l'agent utilisateur commence et termine la récupération des données de domaine dans le cache.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.domainLookupEnd;
- -

Valeur de retour

- -

Un DOMHighResTimeStamp représentant l'heure immédiatement après la fin de la recherche du nom de domaine de la ressource par le navigateur.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-domainlookupend', - 'domainLookupEnd')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.domainLookupEnd")}}

diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupend/index.md b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.md new file mode 100644 index 0000000000..be289e3896 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.md @@ -0,0 +1,86 @@ +--- +title: PerformanceResourceTiming.domainLookupEnd +slug: Web/API/PerformanceResourceTiming/domainLookupEnd +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - domainLookupEnd +translation_of: Web/API/PerformanceResourceTiming/domainLookupEnd +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule domainLookupEnd retourne le timestamp immédiatement après que le navigateur ait terminé la recherche du nom de domaine pour la ressource.

+ +

Si l'agent utilisateur dispose des informations de domaine dans le cache, domainLookupStart et domainLookupEnd représentent les moments où l'agent utilisateur commence et termine la récupération des données de domaine dans le cache.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.domainLookupEnd;
+ +

Valeur de retour

+ +

Un DOMHighResTimeStamp représentant l'heure immédiatement après la fin de la recherche du nom de domaine de la ressource par le navigateur.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-domainlookupend', + 'domainLookupEnd')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.domainLookupEnd")}}

diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html deleted file mode 100644 index 0e4ed58d1e..0000000000 --- a/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: PerformanceResourceTiming.domainLookupStart -slug: Web/API/PerformanceResourceTiming/domainLookupStart -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - domainLookupStart -translation_of: Web/API/PerformanceResourceTiming/domainLookupStart ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule domainLookupStart retourne le timestamp immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.domainLookupStart;
- -

Valeur de retour

- -

Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', - '#dom-performanceresourcetiming-domainlookupstart', 'domainLookupStart')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.domainLookupStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.md b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.md new file mode 100644 index 0000000000..0e4ed58d1e --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.md @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.domainLookupStart +slug: Web/API/PerformanceResourceTiming/domainLookupStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - domainLookupStart +translation_of: Web/API/PerformanceResourceTiming/domainLookupStart +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule domainLookupStart retourne le timestamp immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.domainLookupStart;
+ +

Valeur de retour

+ +

Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', + '#dom-performanceresourcetiming-domainlookupstart', 'domainLookupStart')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.domainLookupStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html deleted file mode 100644 index 567134f104..0000000000 --- a/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: PerformanceResourceTiming.encodedBodySize -slug: Web/API/PerformanceResourceTiming/encodedBodySize -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - encodedBodySize -translation_of: Web/API/PerformanceResourceTiming/encodedBodySize ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété encodedBodySize en lecture seule représente la taille (en octets) reçue de la récupération (HTTP ou cache), du corps de la donnée utile, avant de supprimer tout codage de contenu appliqué.

- -

{{AvailableInWorkers}}

- -

Si la ressource est extraite d'un cache d'application ou d'une ressource locale, elle doit renvoyer la taille du corps de la charge utile avant de supprimer tout codage de contenu appliqué.

- -

Syntaxe

- -
resource.encodedBodySize;
- -

Valeur de retour

- -

Un number représentant la taille (en octets) reçue de la récupération (HTTP ou cache), du corps de la donnée utile, avant de supprimer tout codage de contenu appliqué.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés de taille de tous les types "resource" sont enregistrées.

- -
function log_sizes(perfEntry){
-  // Vérifie la prise en charge des propriétés PerformanceEntry.*size et imprime leurs valeurs
-  // si elles sont prises en charge
-  if ("decodedBodySize" in perfEntry)
-    console.log("decodedBodySize = " + perfEntry.decodedBodySize);
-  else
-    console.log("decodedBodySize = N'EST PAS pris en charge");
-
-  if ("encodedBodySize" in perfEntry)
-    console.log("encodedBodySize = " + perfEntry.encodedBodySize);
-  else
-    console.log("encodedBodySize = N'EST PAS pris en charge");
-
-  if ("transferSize" in perfEntry)
-    console.log("transferSize = " + perfEntry.transferSize);
-  else
-    console.log("transferSize = N'EST PAS pris en charge");
-}
-function check_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    log_sizes(p[i]);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', - '#dom-performanceresourcetiming-encodedbodysize', 'encodedBodySize')}}{{Spec2('Resource Timing 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.encodedBodySize")}}

diff --git a/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.md b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.md new file mode 100644 index 0000000000..567134f104 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.md @@ -0,0 +1,83 @@ +--- +title: PerformanceResourceTiming.encodedBodySize +slug: Web/API/PerformanceResourceTiming/encodedBodySize +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - encodedBodySize +translation_of: Web/API/PerformanceResourceTiming/encodedBodySize +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété encodedBodySize en lecture seule représente la taille (en octets) reçue de la récupération (HTTP ou cache), du corps de la donnée utile, avant de supprimer tout codage de contenu appliqué.

+ +

{{AvailableInWorkers}}

+ +

Si la ressource est extraite d'un cache d'application ou d'une ressource locale, elle doit renvoyer la taille du corps de la charge utile avant de supprimer tout codage de contenu appliqué.

+ +

Syntaxe

+ +
resource.encodedBodySize;
+ +

Valeur de retour

+ +

Un number représentant la taille (en octets) reçue de la récupération (HTTP ou cache), du corps de la donnée utile, avant de supprimer tout codage de contenu appliqué.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés de taille de tous les types "resource" sont enregistrées.

+ +
function log_sizes(perfEntry){
+  // Vérifie la prise en charge des propriétés PerformanceEntry.*size et imprime leurs valeurs
+  // si elles sont prises en charge
+  if ("decodedBodySize" in perfEntry)
+    console.log("decodedBodySize = " + perfEntry.decodedBodySize);
+  else
+    console.log("decodedBodySize = N'EST PAS pris en charge");
+
+  if ("encodedBodySize" in perfEntry)
+    console.log("encodedBodySize = " + perfEntry.encodedBodySize);
+  else
+    console.log("encodedBodySize = N'EST PAS pris en charge");
+
+  if ("transferSize" in perfEntry)
+    console.log("transferSize = " + perfEntry.transferSize);
+  else
+    console.log("transferSize = N'EST PAS pris en charge");
+}
+function check_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    log_sizes(p[i]);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', + '#dom-performanceresourcetiming-encodedbodysize', 'encodedBodySize')}}{{Spec2('Resource Timing 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.encodedBodySize")}}

diff --git a/files/fr/web/api/performanceresourcetiming/fetchstart/index.html b/files/fr/web/api/performanceresourcetiming/fetchstart/index.html deleted file mode 100644 index 9acdd0756b..0000000000 --- a/files/fr/web/api/performanceresourcetiming/fetchstart/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: PerformanceResourceTiming.fetchStart -slug: Web/API/PerformanceResourceTiming/fetchStart -tags: -- API -- Property -- Propriété -- Reference -- Performance Web -- Resource Timing API -- fetchStart -translation_of: Web/API/PerformanceResourceTiming/fetchStart ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule fetchStart représente un timestamp immédiatement avant que le navigateur ne commence à récupérer la ressource.

- -

S'il y a des redirections HTTP, la propriété renvoie le temps immédiatement avant que l'agent utilisateur ne commence à récupérer la ressource finale dans la redirection.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.fetchStart;
- -

Valeur de retour

- -

Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence à récupérer la ressource.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-fetchstart', - 'fetchStart')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.fetchStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/fetchstart/index.md b/files/fr/web/api/performanceresourcetiming/fetchstart/index.md new file mode 100644 index 0000000000..9acdd0756b --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/fetchstart/index.md @@ -0,0 +1,86 @@ +--- +title: PerformanceResourceTiming.fetchStart +slug: Web/API/PerformanceResourceTiming/fetchStart +tags: +- API +- Property +- Propriété +- Reference +- Performance Web +- Resource Timing API +- fetchStart +translation_of: Web/API/PerformanceResourceTiming/fetchStart +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule fetchStart représente un timestamp immédiatement avant que le navigateur ne commence à récupérer la ressource.

+ +

S'il y a des redirections HTTP, la propriété renvoie le temps immédiatement avant que l'agent utilisateur ne commence à récupérer la ressource finale dans la redirection.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.fetchStart;
+ +

Valeur de retour

+ +

Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence à récupérer la ressource.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-fetchstart', + 'fetchStart')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.fetchStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/index.html b/files/fr/web/api/performanceresourcetiming/index.html deleted file mode 100644 index 708701fc43..0000000000 --- a/files/fr/web/api/performanceresourcetiming/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: PerformanceResourceTiming -slug: Web/API/PerformanceResourceTiming -tags: - - API - - DOM - - Interface - - Reference - - Performance Web - - Resource Timing API -translation_of: Web/API/PerformanceResourceTiming ---- -
{{APIRef("Resource Timing API")}}
- -

L'interface PerformanceResourceTiming permet de récupérer et d'analyser des données de synchronisation réseau détaillées concernant le chargement des ressources d'une application. Une application peut utiliser les mesures temporelles pour déterminer, par exemple, la durée nécessaire à l'extraction d'une ressource spécifique, telle qu'une XMLHttpRequest, un élément <svg>, une image ou un script.

- -

Les propriétés de l'interface créent une chronologie de chargement des ressources avec un timestamps haute résolution pour les événements réseau tels que les heures de début et de fin de redirection, les heures de début de récupération, les heures de début et de fin de recherche DNS, les heures de début et de fin de réponse, etc. En outre, l'interface étend PerformanceEntry avec d'autres propriétés qui fournissent des données sur la taille de la ressource extraite ainsi que le type de ressource qui a initié l'extraction.

- -

{{InheritanceDiagram}}

- -

{{AvailableInWorkers}}

- -

Propriétés

- -

Cette interface étend les propriétés PerformanceEntry suivantes pour les types d'entrée de performance des ressources en les restreignant comme suit :

- -
-
PerformanceEntry.entryType {{readonlyInline}}
-
Retourne "resource".
-
PerformanceEntry.name {{readonlyInline}}
-
Retourne l'URL des ressources.
-
PerformanceEntry.startTime {{readonlyInline}}
-
Retourne le timestamp de l'heure de début de la récupération d'une ressource. Cette valeur est équivalente à PerformanceResourceTiming.fetchStart.
-
PerformanceEntry.duration {{readonlyInline}}
-
Retourne un timestamp qui est la différence entre les propriétés responseEnd et startTime.
-
- -

L'interface prend également en charge les propriétés suivantes, qui sont énumérées dans l'ordre temporel selon lequel elles sont enregistrées pour l'extraction d'une seule ressource. Une liste alphabétique est présentée dans la navigation, à gauche.

- -
-
PerformanceResourceTiming.initiatorType {{readonlyInline}}
-
Une chaîne de caractère string représentant le type de ressource qui a initié l'entrée de performance, comme spécifié dans PerformanceResourceTiming.initiatorType.
-
PerformanceResourceTiming.nextHopProtocol {{readonlyInline}}
-
Une chaîne de caractère string représentant le protocole réseau utilisé pour récupérer la ressource, tel qu'identifié par le ALPN Protocol ID (RFC7301).
-
PerformanceResourceTiming.workerStart {{readonlyInline}}
-
Retourne un DOMHighResTimeStamp immédiatement avant de transmettre le FetchEvent si un processus de Service Worker est déjà en cours, ou immédiatement avant de lancer le processus de Service Worker s'il n'est pas encore en cours. Si la ressource n'est pas interceptée par un Service Worker, la propriété retourne toujours 0.
-
PerformanceResourceTiming.redirectStart {{readonlyInline}}
-
Un DOMHighResTimeStamp qui représente l'heure de début de l'extraction qui déclenche la redirection.
-
PerformanceResourceTiming.redirectEnd {{readonlyInline}}
-
Un DOMHighResTimeStamp immédiatement après la réception du dernier octet de la réponse de la dernière redirection.
-
PerformanceResourceTiming.fetchStart {{readonlyInline}}
-
Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence à récupérer la ressource.
-
PerformanceResourceTiming.domainLookupStart {{readonlyInline}}
-
Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.
-
PerformanceResourceTiming.domainLookupEnd {{readonlyInline}}
-
Un DOMHighResTimeStamp représentant l'heure immédiatement après la fin de la recherche du nom de domaine de la ressource par le navigateur.
-
PerformanceResourceTiming.connectStart {{readonlyInline}}
-
Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence à établir la connexion avec le serveur pour récupérer la ressource.
-
PerformanceResourceTiming.connectEnd {{readonlyInline}}
-
Un DOMHighResTimeStamp immédiatement après que le navigateur ait fini d'établir la connexion avec le serveur pour récupérer la ressource.
-
PerformanceResourceTiming.secureConnectionStart {{readonlyInline}}
-
Un DOMHighResTimeStamp immédiatement avant que le navigateur ne lance le processus de reconnaissance pour sécuriser la connexion en cours.
-
PerformanceResourceTiming.requestStart {{readonlyInline}}
-
Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence à demander la ressource au serveur.
-
PerformanceResourceTiming.responseStart {{readonlyInline}}
-
Un DOMHighResTimeStamp immédiatement après que le navigateur ait reçu le premier octet de la réponse du serveur.
-
PerformanceResourceTiming.responseEnd {{readonlyInline}}
-
Un DOMHighResTimeStamp immédiatement après la réception par le navigateur du dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transfert, selon la première éventualité.
-
PerformanceResourceTiming.transferSize {{readonlyInline}}
-
Un nombre représentant la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus le corps des données utiles de la réponse.
-
PerformanceResourceTiming.encodedBodySize {{readonlyInline}}
-
Un nombre représentant la taille (en octets) reçue de la récupération (HTTP ou cache), du corps de la donnée, avant de supprimer tout codage de contenu appliqué.
-
PerformanceResourceTiming.decodedBodySize {{readonlyInline}}
-
Un nombre représentant la taille (en octets) reçue de la récupération (HTTP ou cache) du message body, après avoir retiré tout codage de contenu appliqué.
-
PerformanceResourceTiming.serverTiming {{readonlyInline}}
-
Un tableau d'entrées PerformanceServerTiming contenant des mesures de synchronisation du serveur.
-
- -

Méthodes

- -
-
PerformanceResourceTiming.toJSON()
-
Renvoie une chaîne de caractère DOMString qui est la représentation JSON de l'objet PerformanceResourceTiming.
-
- -

Exemple

- -

Voir l'exemple dans Utilisation de Resource Timing API.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#performanceresourcetiming', 'PerformanceResourceTiming')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performanceresourcetiming/index.md b/files/fr/web/api/performanceresourcetiming/index.md new file mode 100644 index 0000000000..708701fc43 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/index.md @@ -0,0 +1,118 @@ +--- +title: PerformanceResourceTiming +slug: Web/API/PerformanceResourceTiming +tags: + - API + - DOM + - Interface + - Reference + - Performance Web + - Resource Timing API +translation_of: Web/API/PerformanceResourceTiming +--- +
{{APIRef("Resource Timing API")}}
+ +

L'interface PerformanceResourceTiming permet de récupérer et d'analyser des données de synchronisation réseau détaillées concernant le chargement des ressources d'une application. Une application peut utiliser les mesures temporelles pour déterminer, par exemple, la durée nécessaire à l'extraction d'une ressource spécifique, telle qu'une XMLHttpRequest, un élément <svg>, une image ou un script.

+ +

Les propriétés de l'interface créent une chronologie de chargement des ressources avec un timestamps haute résolution pour les événements réseau tels que les heures de début et de fin de redirection, les heures de début de récupération, les heures de début et de fin de recherche DNS, les heures de début et de fin de réponse, etc. En outre, l'interface étend PerformanceEntry avec d'autres propriétés qui fournissent des données sur la taille de la ressource extraite ainsi que le type de ressource qui a initié l'extraction.

+ +

{{InheritanceDiagram}}

+ +

{{AvailableInWorkers}}

+ +

Propriétés

+ +

Cette interface étend les propriétés PerformanceEntry suivantes pour les types d'entrée de performance des ressources en les restreignant comme suit :

+ +
+
PerformanceEntry.entryType {{readonlyInline}}
+
Retourne "resource".
+
PerformanceEntry.name {{readonlyInline}}
+
Retourne l'URL des ressources.
+
PerformanceEntry.startTime {{readonlyInline}}
+
Retourne le timestamp de l'heure de début de la récupération d'une ressource. Cette valeur est équivalente à PerformanceResourceTiming.fetchStart.
+
PerformanceEntry.duration {{readonlyInline}}
+
Retourne un timestamp qui est la différence entre les propriétés responseEnd et startTime.
+
+ +

L'interface prend également en charge les propriétés suivantes, qui sont énumérées dans l'ordre temporel selon lequel elles sont enregistrées pour l'extraction d'une seule ressource. Une liste alphabétique est présentée dans la navigation, à gauche.

+ +
+
PerformanceResourceTiming.initiatorType {{readonlyInline}}
+
Une chaîne de caractère string représentant le type de ressource qui a initié l'entrée de performance, comme spécifié dans PerformanceResourceTiming.initiatorType.
+
PerformanceResourceTiming.nextHopProtocol {{readonlyInline}}
+
Une chaîne de caractère string représentant le protocole réseau utilisé pour récupérer la ressource, tel qu'identifié par le ALPN Protocol ID (RFC7301).
+
PerformanceResourceTiming.workerStart {{readonlyInline}}
+
Retourne un DOMHighResTimeStamp immédiatement avant de transmettre le FetchEvent si un processus de Service Worker est déjà en cours, ou immédiatement avant de lancer le processus de Service Worker s'il n'est pas encore en cours. Si la ressource n'est pas interceptée par un Service Worker, la propriété retourne toujours 0.
+
PerformanceResourceTiming.redirectStart {{readonlyInline}}
+
Un DOMHighResTimeStamp qui représente l'heure de début de l'extraction qui déclenche la redirection.
+
PerformanceResourceTiming.redirectEnd {{readonlyInline}}
+
Un DOMHighResTimeStamp immédiatement après la réception du dernier octet de la réponse de la dernière redirection.
+
PerformanceResourceTiming.fetchStart {{readonlyInline}}
+
Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence à récupérer la ressource.
+
PerformanceResourceTiming.domainLookupStart {{readonlyInline}}
+
Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.
+
PerformanceResourceTiming.domainLookupEnd {{readonlyInline}}
+
Un DOMHighResTimeStamp représentant l'heure immédiatement après la fin de la recherche du nom de domaine de la ressource par le navigateur.
+
PerformanceResourceTiming.connectStart {{readonlyInline}}
+
Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence à établir la connexion avec le serveur pour récupérer la ressource.
+
PerformanceResourceTiming.connectEnd {{readonlyInline}}
+
Un DOMHighResTimeStamp immédiatement après que le navigateur ait fini d'établir la connexion avec le serveur pour récupérer la ressource.
+
PerformanceResourceTiming.secureConnectionStart {{readonlyInline}}
+
Un DOMHighResTimeStamp immédiatement avant que le navigateur ne lance le processus de reconnaissance pour sécuriser la connexion en cours.
+
PerformanceResourceTiming.requestStart {{readonlyInline}}
+
Un DOMHighResTimeStamp immédiatement avant que le navigateur ne commence à demander la ressource au serveur.
+
PerformanceResourceTiming.responseStart {{readonlyInline}}
+
Un DOMHighResTimeStamp immédiatement après que le navigateur ait reçu le premier octet de la réponse du serveur.
+
PerformanceResourceTiming.responseEnd {{readonlyInline}}
+
Un DOMHighResTimeStamp immédiatement après la réception par le navigateur du dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transfert, selon la première éventualité.
+
PerformanceResourceTiming.transferSize {{readonlyInline}}
+
Un nombre représentant la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus le corps des données utiles de la réponse.
+
PerformanceResourceTiming.encodedBodySize {{readonlyInline}}
+
Un nombre représentant la taille (en octets) reçue de la récupération (HTTP ou cache), du corps de la donnée, avant de supprimer tout codage de contenu appliqué.
+
PerformanceResourceTiming.decodedBodySize {{readonlyInline}}
+
Un nombre représentant la taille (en octets) reçue de la récupération (HTTP ou cache) du message body, après avoir retiré tout codage de contenu appliqué.
+
PerformanceResourceTiming.serverTiming {{readonlyInline}}
+
Un tableau d'entrées PerformanceServerTiming contenant des mesures de synchronisation du serveur.
+
+ +

Méthodes

+ +
+
PerformanceResourceTiming.toJSON()
+
Renvoie une chaîne de caractère DOMString qui est la représentation JSON de l'objet PerformanceResourceTiming.
+
+ +

Exemple

+ +

Voir l'exemple dans Utilisation de Resource Timing API.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#performanceresourcetiming', 'PerformanceResourceTiming')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performanceresourcetiming/initiatortype/index.html b/files/fr/web/api/performanceresourcetiming/initiatortype/index.html deleted file mode 100644 index 1d8ed0a780..0000000000 --- a/files/fr/web/api/performanceresourcetiming/initiatortype/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: PerformanceResourceTiming.initiatorType -slug: Web/API/PerformanceResourceTiming/initiatorType -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - initiatorType -translation_of: Web/API/PerformanceResourceTiming/initiatorType ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété initiatorType en lecture seule est une chaîne de caractères qui représente le type de ressource qui a initié l'événement de performance.

- -

La valeur de cette chaîne est la suivante:

- - - -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.initiatorType;
- -

Valeur de retour

- -

Une chaîne de caractères (DOMString) représentant le type de ressource qui a initié l'événement de performance, comme spécifié ci-dessus.

- -

Exemple

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_initiatorType(p[i]);
-  }
-}
-function print_initiatorType(perfEntry) {
-  // Imprime la valeur initiatorType de cet objet d'entrée de performance
-  let value = "initiatorType" in perfEntry;
-  if (value)
-    console.log("... initiatorType = " + perfEntry.initiatorType);
-  else
-    console.log("... initiatorType = N'EST PAS pris en charge");
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', - '#dom-performanceresourcetiming-initiatortype', 'initiatorType')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.initiatorType")}}

diff --git a/files/fr/web/api/performanceresourcetiming/initiatortype/index.md b/files/fr/web/api/performanceresourcetiming/initiatortype/index.md new file mode 100644 index 0000000000..1d8ed0a780 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/initiatortype/index.md @@ -0,0 +1,78 @@ +--- +title: PerformanceResourceTiming.initiatorType +slug: Web/API/PerformanceResourceTiming/initiatorType +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - initiatorType +translation_of: Web/API/PerformanceResourceTiming/initiatorType +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété initiatorType en lecture seule est une chaîne de caractères qui représente le type de ressource qui a initié l'événement de performance.

+ +

La valeur de cette chaîne est la suivante:

+ + + +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.initiatorType;
+ +

Valeur de retour

+ +

Une chaîne de caractères (DOMString) représentant le type de ressource qui a initié l'événement de performance, comme spécifié ci-dessus.

+ +

Exemple

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_initiatorType(p[i]);
+  }
+}
+function print_initiatorType(perfEntry) {
+  // Imprime la valeur initiatorType de cet objet d'entrée de performance
+  let value = "initiatorType" in perfEntry;
+  if (value)
+    console.log("... initiatorType = " + perfEntry.initiatorType);
+  else
+    console.log("... initiatorType = N'EST PAS pris en charge");
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', + '#dom-performanceresourcetiming-initiatortype', 'initiatorType')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.initiatorType")}}

diff --git a/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html deleted file mode 100644 index dff0c7e8fd..0000000000 --- a/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: PerformanceResourceTiming.nextHopProtocol -slug: Web/API/PerformanceResourceTiming/nextHopProtocol -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - nextHopProtocol -translation_of: Web/API/PerformanceResourceTiming/nextHopProtocol ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule nextHopProtocol est une chaîne de caractères représentant le protocole réseau utilisé pour récupérer la ressource, tel qu'identifié par le ALPN Protocol ID (RFC7301).

- -

Lorsqu'un proxy est utilisé, si une connexion tunnel est établie, cette propriété renvoie l'ID du protocole ALPN du protocole tunnelisé. Sinon, cette propriété renvoie l'ID du protocole ALPN du premier saut vers le proxy.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.nextHopProtocol;
- -

Valeur de retour

- -

Une chaîne de caractères string représentant le protocole réseau utilisé pour récupérer la ressource, tel qu'identifié par le ALPN Protocol ID (RFC7301).

- -

Exemple

- -

L'exemple suivant utilise la propriété nextHopProtocol :

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_nextHopProtocol(p[i]);
-  }
-}
-function print_nextHopProtocol(perfEntry) {
-  let value = "nextHopProtocol" in perfEntry;
-  if (value)
-    console.log("nextHopProtocol = " + perfEntry.nextHopProtocol);
-  else
-    console.log("nextHopProtocol = N'EST PAS pris en charge");
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', - '#dom-performanceresourcetiming-nexthopprotocol', 'nextHopProtocol')}}{{Spec2('Resource Timing 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.nextHopProtocol")}}

diff --git a/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.md b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.md new file mode 100644 index 0000000000..dff0c7e8fd --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.md @@ -0,0 +1,72 @@ +--- +title: PerformanceResourceTiming.nextHopProtocol +slug: Web/API/PerformanceResourceTiming/nextHopProtocol +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - nextHopProtocol +translation_of: Web/API/PerformanceResourceTiming/nextHopProtocol +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule nextHopProtocol est une chaîne de caractères représentant le protocole réseau utilisé pour récupérer la ressource, tel qu'identifié par le ALPN Protocol ID (RFC7301).

+ +

Lorsqu'un proxy est utilisé, si une connexion tunnel est établie, cette propriété renvoie l'ID du protocole ALPN du protocole tunnelisé. Sinon, cette propriété renvoie l'ID du protocole ALPN du premier saut vers le proxy.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.nextHopProtocol;
+ +

Valeur de retour

+ +

Une chaîne de caractères string représentant le protocole réseau utilisé pour récupérer la ressource, tel qu'identifié par le ALPN Protocol ID (RFC7301).

+ +

Exemple

+ +

L'exemple suivant utilise la propriété nextHopProtocol :

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_nextHopProtocol(p[i]);
+  }
+}
+function print_nextHopProtocol(perfEntry) {
+  let value = "nextHopProtocol" in perfEntry;
+  if (value)
+    console.log("nextHopProtocol = " + perfEntry.nextHopProtocol);
+  else
+    console.log("nextHopProtocol = N'EST PAS pris en charge");
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', + '#dom-performanceresourcetiming-nexthopprotocol', 'nextHopProtocol')}}{{Spec2('Resource Timing 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.nextHopProtocol")}}

diff --git a/files/fr/web/api/performanceresourcetiming/redirectend/index.html b/files/fr/web/api/performanceresourcetiming/redirectend/index.html deleted file mode 100644 index 15002c1b46..0000000000 --- a/files/fr/web/api/performanceresourcetiming/redirectend/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: PerformanceResourceTiming.redirectEnd -slug: Web/API/PerformanceResourceTiming/redirectEnd -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - redirectEnd -translation_of: Web/API/PerformanceResourceTiming/redirectEnd ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule redirectEnd retourne un timestamp immédiatement après la réception du dernier octet de la réponse de la dernière redirection.

- -

Lors de l'extraction d'une ressource, s'il y a plusieurs redirections HTTP, que l'une d'entre elles a une origine différente du document actuel, et que l'algorithme de vérification d'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure immédiatement après la réception du dernier octet de la réponse de la dernière redirection ; sinon, zéro est retourné.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.redirectEnd;
- -

Valeur de retour

- -

Un timestamp immédiatement après la réception du dernier octet de la réponse de la dernière redirection.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-redirectend', - 'redirectEnd')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.redirectEnd")}}

diff --git a/files/fr/web/api/performanceresourcetiming/redirectend/index.md b/files/fr/web/api/performanceresourcetiming/redirectend/index.md new file mode 100644 index 0000000000..15002c1b46 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/redirectend/index.md @@ -0,0 +1,86 @@ +--- +title: PerformanceResourceTiming.redirectEnd +slug: Web/API/PerformanceResourceTiming/redirectEnd +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - redirectEnd +translation_of: Web/API/PerformanceResourceTiming/redirectEnd +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule redirectEnd retourne un timestamp immédiatement après la réception du dernier octet de la réponse de la dernière redirection.

+ +

Lors de l'extraction d'une ressource, s'il y a plusieurs redirections HTTP, que l'une d'entre elles a une origine différente du document actuel, et que l'algorithme de vérification d'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure immédiatement après la réception du dernier octet de la réponse de la dernière redirection ; sinon, zéro est retourné.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.redirectEnd;
+ +

Valeur de retour

+ +

Un timestamp immédiatement après la réception du dernier octet de la réponse de la dernière redirection.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-redirectend', + 'redirectEnd')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.redirectEnd")}}

diff --git a/files/fr/web/api/performanceresourcetiming/redirectstart/index.html b/files/fr/web/api/performanceresourcetiming/redirectstart/index.html deleted file mode 100644 index 106c2de0d3..0000000000 --- a/files/fr/web/api/performanceresourcetiming/redirectstart/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: PerformanceResourceTiming.redirectStart -slug: Web/API/PerformanceResourceTiming/redirectStart -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - redirectStart -translation_of: Web/API/PerformanceResourceTiming/redirectStart ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule redirectStart retourne un timestamp représentant l'instant du début de la récupération qui initie la redirection.

- -

S'il y a des redirections HTTP lors de l'extraction de la ressource et si l'une des redirections ne provient pas de la même origine que le document actuel, mais que l'algorithme de vérification de l'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure de début de l'extraction qui initie la redirection ; sinon, zéro est renvoyé.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.redirectStart;
- -

Valeur de retour

- -

Un timestamp représentant l'heure de début de l'extraction qui déclenche la redirection.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-redirectstart', - 'redirectStart')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.redirectStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/redirectstart/index.md b/files/fr/web/api/performanceresourcetiming/redirectstart/index.md new file mode 100644 index 0000000000..106c2de0d3 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/redirectstart/index.md @@ -0,0 +1,86 @@ +--- +title: PerformanceResourceTiming.redirectStart +slug: Web/API/PerformanceResourceTiming/redirectStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - redirectStart +translation_of: Web/API/PerformanceResourceTiming/redirectStart +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule redirectStart retourne un timestamp représentant l'instant du début de la récupération qui initie la redirection.

+ +

S'il y a des redirections HTTP lors de l'extraction de la ressource et si l'une des redirections ne provient pas de la même origine que le document actuel, mais que l'algorithme de vérification de l'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure de début de l'extraction qui initie la redirection ; sinon, zéro est renvoyé.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.redirectStart;
+ +

Valeur de retour

+ +

Un timestamp représentant l'heure de début de l'extraction qui déclenche la redirection.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-redirectstart', + 'redirectStart')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.redirectStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/requeststart/index.html b/files/fr/web/api/performanceresourcetiming/requeststart/index.html deleted file mode 100644 index 27e8c19f0d..0000000000 --- a/files/fr/web/api/performanceresourcetiming/requeststart/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: PerformanceResourceTiming.requestStart -slug: Web/API/PerformanceResourceTiming/requestStart -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - requestStart -translation_of: Web/API/PerformanceResourceTiming/requestStart ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule requestStart renvoie un timestamp du moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur, au cache ou à la ressource locale. Si la connexion de transport échoue et que le navigateur retire la demande, la valeur renvoyée sera le début de la nouvelle demande.

- -

Il n'y a pas de propriété de fin (« requestEnd ») correspondante pour requestStart.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.requestStart;
- -

Valeur de retour

- -

Un DOMHighResTimeStamp représentant le moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur.

- -

Example

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-requeststart', - 'requestStart')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.requestStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/requeststart/index.md b/files/fr/web/api/performanceresourcetiming/requeststart/index.md new file mode 100644 index 0000000000..27e8c19f0d --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/requeststart/index.md @@ -0,0 +1,86 @@ +--- +title: PerformanceResourceTiming.requestStart +slug: Web/API/PerformanceResourceTiming/requestStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - requestStart +translation_of: Web/API/PerformanceResourceTiming/requestStart +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule requestStart renvoie un timestamp du moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur, au cache ou à la ressource locale. Si la connexion de transport échoue et que le navigateur retire la demande, la valeur renvoyée sera le début de la nouvelle demande.

+ +

Il n'y a pas de propriété de fin (« requestEnd ») correspondante pour requestStart.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.requestStart;
+ +

Valeur de retour

+ +

Un DOMHighResTimeStamp représentant le moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur.

+ +

Example

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-requeststart', + 'requestStart')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.requestStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/responseend/index.html b/files/fr/web/api/performanceresourcetiming/responseend/index.html deleted file mode 100644 index 71b45f97b1..0000000000 --- a/files/fr/web/api/performanceresourcetiming/responseend/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: PerformanceResourceTiming.responseEnd -slug: Web/API/PerformanceResourceTiming/responseEnd -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - responseEnd -translation_of: Web/API/PerformanceResourceTiming/responseEnd ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule responseEnd retourne un timestamp immédiatement après que le navigateur a reçu le dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui se produit en premier.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.responseEnd;
- -

Valeur de retour

- -

Un DOMHighResTimeStamp immédiatement après la réception par le navigateur du dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui arrive en premier.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-responseend', - 'responseEnd')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.responseEnd")}}

diff --git a/files/fr/web/api/performanceresourcetiming/responseend/index.md b/files/fr/web/api/performanceresourcetiming/responseend/index.md new file mode 100644 index 0000000000..71b45f97b1 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/responseend/index.md @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.responseEnd +slug: Web/API/PerformanceResourceTiming/responseEnd +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - responseEnd +translation_of: Web/API/PerformanceResourceTiming/responseEnd +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule responseEnd retourne un timestamp immédiatement après que le navigateur a reçu le dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui se produit en premier.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.responseEnd;
+ +

Valeur de retour

+ +

Un DOMHighResTimeStamp immédiatement après la réception par le navigateur du dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui arrive en premier.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-responseend', + 'responseEnd')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.responseEnd")}}

diff --git a/files/fr/web/api/performanceresourcetiming/responsestart/index.html b/files/fr/web/api/performanceresourcetiming/responsestart/index.html deleted file mode 100644 index 4279d42446..0000000000 --- a/files/fr/web/api/performanceresourcetiming/responsestart/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: PerformanceResourceTiming.responseStart -slug: Web/API/PerformanceResourceTiming/responseStart -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - responseStart -translation_of: Web/API/PerformanceResourceTiming/responseStart ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule responseStart renvoie un timestamp immédiatement après que le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.responseStart;
- -

Valeur de retour

- -

Un DOMHighResTimeStamp immédiatement après que le navigateur ait reçu le premier octet de la réponse du serveur.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-responsestart', - 'responseStart')}}{{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.responseStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/responsestart/index.md b/files/fr/web/api/performanceresourcetiming/responsestart/index.md new file mode 100644 index 0000000000..4279d42446 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/responsestart/index.md @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.responseStart +slug: Web/API/PerformanceResourceTiming/responseStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - responseStart +translation_of: Web/API/PerformanceResourceTiming/responseStart +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule responseStart renvoie un timestamp immédiatement après que le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.responseStart;
+ +

Valeur de retour

+ +

Un DOMHighResTimeStamp immédiatement après que le navigateur ait reçu le premier octet de la réponse du serveur.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', '#dom-performanceresourcetiming-responsestart', + 'responseStart')}}{{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.responseStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html deleted file mode 100644 index 1b5487516a..0000000000 --- a/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: PerformanceResourceTiming.secureConnectionStart -slug: Web/API/PerformanceResourceTiming/secureConnectionStart -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - secureConnectionStart -translation_of: Web/API/PerformanceResourceTiming/secureConnectionStart ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule secureConnectionStart renvoie un timestamp immédiatement avant que le navigateur ne commence le processus de poignée de main (handshake) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, la propriété renvoie zéro.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.secureConnectionStart;
- -

Valeur de retour

- -

Si la ressource est récupérée par le biais d'une connexion sécurisée, un DOMHighResTimeStamp immédiatement avant que le navigateur ne lance le processus de poignée de main (handshake) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, cette propriété renvoie zéro.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing', - '#dom-performanceresourcetiming-secureconnectionstart', 'secureConnectionStart')}} - {{Spec2('Resource Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.secureConnectionStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.md b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.md new file mode 100644 index 0000000000..1b5487516a --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.md @@ -0,0 +1,85 @@ +--- +title: PerformanceResourceTiming.secureConnectionStart +slug: Web/API/PerformanceResourceTiming/secureConnectionStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - secureConnectionStart +translation_of: Web/API/PerformanceResourceTiming/secureConnectionStart +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule secureConnectionStart renvoie un timestamp immédiatement avant que le navigateur ne commence le processus de poignée de main (handshake) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, la propriété renvoie zéro.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.secureConnectionStart;
+ +

Valeur de retour

+ +

Si la ressource est récupérée par le biais d'une connexion sécurisée, un DOMHighResTimeStamp immédiatement avant que le navigateur ne lance le processus de poignée de main (handshake) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, cette propriété renvoie zéro.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing', + '#dom-performanceresourcetiming-secureconnectionstart', 'secureConnectionStart')}} + {{Spec2('Resource Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.secureConnectionStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/servertiming/index.html b/files/fr/web/api/performanceresourcetiming/servertiming/index.html deleted file mode 100644 index 0a1b96fc82..0000000000 --- a/files/fr/web/api/performanceresourcetiming/servertiming/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: PerformanceResourceTiming.serverTiming -slug: Web/API/PerformanceResourceTiming/serverTiming -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - SecureContextOnly - - serverTiming -translation_of: Web/API/PerformanceResourceTiming/serverTiming ---- -
{{APIRef("Resource Timing API")}} {{securecontext_header}}
- -

La propriété en lecture seule serverTiming retourne un tableau d'entrées PerformanceServerTiming contenant des mesures de synchronisation du serveur.

- -

Syntaxe

- -
resource.serverTiming;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Server Timing','#servertiming-attribute', 'serverTiming')}}{{Spec2('Server Timing')}}Initial definition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.serverTiming")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performanceresourcetiming/servertiming/index.md b/files/fr/web/api/performanceresourcetiming/servertiming/index.md new file mode 100644 index 0000000000..0a1b96fc82 --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/servertiming/index.md @@ -0,0 +1,51 @@ +--- +title: PerformanceResourceTiming.serverTiming +slug: Web/API/PerformanceResourceTiming/serverTiming +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - SecureContextOnly + - serverTiming +translation_of: Web/API/PerformanceResourceTiming/serverTiming +--- +
{{APIRef("Resource Timing API")}} {{securecontext_header}}
+ +

La propriété en lecture seule serverTiming retourne un tableau d'entrées PerformanceServerTiming contenant des mesures de synchronisation du serveur.

+ +

Syntaxe

+ +
resource.serverTiming;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Server Timing','#servertiming-attribute', 'serverTiming')}}{{Spec2('Server Timing')}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.serverTiming")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performanceresourcetiming/tojson/index.html b/files/fr/web/api/performanceresourcetiming/tojson/index.html deleted file mode 100644 index 8385dcbafa..0000000000 --- a/files/fr/web/api/performanceresourcetiming/tojson/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: PerformanceResourceTiming.toJSON() -slug: Web/API/PerformanceResourceTiming/toJSON -tags: - - API - - Method - - Méthode - - Reference - - Performance Web - - Resource Timing API - - toJSON() -translation_of: Web/API/PerformanceResourceTiming/toJSON ---- -
{{APIRef("Resource Timing API")}}
- -

La méthode toJSON() est un sérialiseur qui retourne une représentation JSON de l'objet PerformanceResourceTiming.

- -

Syntaxe

- -
let json = resourcePerfEntry.toJSON();
- -

Arguments

- -

Aucun.

- -

Valeur de retour

- -
-
json
-
Un objet JSON qui est la sérialisation de l'objet PerformanceResourceTiming comme une carte avec des entrées de l'interface héritée la plus proche et avec des entrées pour chacun des attributs sérialisables.
-
- -

Exemple

- -
// Obtient une entrée de performance des ressources
-let perfEntries = performance.getEntriesByType("resource");
-let entry = perfEntries[0];
-
-// Récupère le JSON et l'enregistre
-let json = entry.toJSON();
-let s = JSON.stringify(json);
-console.log("PerformanceEntry.toJSON = " + s);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', '#dom-performanceresourcetiming-tojson', - 'toJSON')}}{{Spec2('Resource Timing 2')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.toJSON")}}

diff --git a/files/fr/web/api/performanceresourcetiming/tojson/index.md b/files/fr/web/api/performanceresourcetiming/tojson/index.md new file mode 100644 index 0000000000..8385dcbafa --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/tojson/index.md @@ -0,0 +1,67 @@ +--- +title: PerformanceResourceTiming.toJSON() +slug: Web/API/PerformanceResourceTiming/toJSON +tags: + - API + - Method + - Méthode + - Reference + - Performance Web + - Resource Timing API + - toJSON() +translation_of: Web/API/PerformanceResourceTiming/toJSON +--- +
{{APIRef("Resource Timing API")}}
+ +

La méthode toJSON() est un sérialiseur qui retourne une représentation JSON de l'objet PerformanceResourceTiming.

+ +

Syntaxe

+ +
let json = resourcePerfEntry.toJSON();
+ +

Arguments

+ +

Aucun.

+ +

Valeur de retour

+ +
+
json
+
Un objet JSON qui est la sérialisation de l'objet PerformanceResourceTiming comme une carte avec des entrées de l'interface héritée la plus proche et avec des entrées pour chacun des attributs sérialisables.
+
+ +

Exemple

+ +
// Obtient une entrée de performance des ressources
+let perfEntries = performance.getEntriesByType("resource");
+let entry = perfEntries[0];
+
+// Récupère le JSON et l'enregistre
+let json = entry.toJSON();
+let s = JSON.stringify(json);
+console.log("PerformanceEntry.toJSON = " + s);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', '#dom-performanceresourcetiming-tojson', + 'toJSON')}}{{Spec2('Resource Timing 2')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.toJSON")}}

diff --git a/files/fr/web/api/performanceresourcetiming/transfersize/index.html b/files/fr/web/api/performanceresourcetiming/transfersize/index.html deleted file mode 100644 index bd19c4db5f..0000000000 --- a/files/fr/web/api/performanceresourcetiming/transfersize/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: PerformanceResourceTiming.transferSize -slug: Web/API/PerformanceResourceTiming/transferSize -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - transferSize -translation_of: Web/API/PerformanceResourceTiming/transferSize ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule transferSize représente la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la charge utile du corps de la réponse (comme défini par la RFC 7230).

- -

{{AvailableInWorkers}}

- -

Si la ressource est extraite d'un cache local ou s'il s'agit d'une ressource d'origine croisée, cette propriété renvoie zéro.

- -

Syntaxe

- -
resource.transferSize;
- -

Valeur de retour

- -

Un number représentant la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la taille de la charge utile du corps de la réponse (RFC7230).

- -

Exemple

- -

Dans l'exemple suivant, les valeurs des propriétés de taille de tous les types "resource" sont enregistrées.

- -
function log_sizes(perfEntry){
-  // Vérifie la prise en charge des propriétés PerformanceEntry.*size et imprime leurs valeurs
-  // si elles sont prises en charge
-  if ("decodedBodySize" in perfEntry)
-    console.log("decodedBodySize = " + perfEntry.decodedBodySize);
-  else
-    console.log("decodedBodySize = N'EST PAS pris en charge");
-
-  if ("encodedBodySize" in perfEntry)
-    console.log("encodedBodySize = " + perfEntry.encodedBodySize);
-  else
-    console.log("encodedBodySize = N'EST PAS pris en charge");
-
-  if ("transferSize" in perfEntry)
-    console.log("transferSize = " + perfEntry.transferSize);
-  else
-    console.log("transferSize = N'EST PAS pris en charge");
-}
-function check_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    log_sizes(p[i]);
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', '#dom-performanceresourcetiming-transfersize', - 'transferSize')}}{{Spec2('Resource Timing 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.transferSize")}}

diff --git a/files/fr/web/api/performanceresourcetiming/transfersize/index.md b/files/fr/web/api/performanceresourcetiming/transfersize/index.md new file mode 100644 index 0000000000..bd19c4db5f --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/transfersize/index.md @@ -0,0 +1,83 @@ +--- +title: PerformanceResourceTiming.transferSize +slug: Web/API/PerformanceResourceTiming/transferSize +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - transferSize +translation_of: Web/API/PerformanceResourceTiming/transferSize +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule transferSize représente la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la charge utile du corps de la réponse (comme défini par la RFC 7230).

+ +

{{AvailableInWorkers}}

+ +

Si la ressource est extraite d'un cache local ou s'il s'agit d'une ressource d'origine croisée, cette propriété renvoie zéro.

+ +

Syntaxe

+ +
resource.transferSize;
+ +

Valeur de retour

+ +

Un number représentant la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la taille de la charge utile du corps de la réponse (RFC7230).

+ +

Exemple

+ +

Dans l'exemple suivant, les valeurs des propriétés de taille de tous les types "resource" sont enregistrées.

+ +
function log_sizes(perfEntry){
+  // Vérifie la prise en charge des propriétés PerformanceEntry.*size et imprime leurs valeurs
+  // si elles sont prises en charge
+  if ("decodedBodySize" in perfEntry)
+    console.log("decodedBodySize = " + perfEntry.decodedBodySize);
+  else
+    console.log("decodedBodySize = N'EST PAS pris en charge");
+
+  if ("encodedBodySize" in perfEntry)
+    console.log("encodedBodySize = " + perfEntry.encodedBodySize);
+  else
+    console.log("encodedBodySize = N'EST PAS pris en charge");
+
+  if ("transferSize" in perfEntry)
+    console.log("transferSize = " + perfEntry.transferSize);
+  else
+    console.log("transferSize = N'EST PAS pris en charge");
+}
+function check_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    log_sizes(p[i]);
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', '#dom-performanceresourcetiming-transfersize', + 'transferSize')}}{{Spec2('Resource Timing 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.transferSize")}}

diff --git a/files/fr/web/api/performanceresourcetiming/workerstart/index.html b/files/fr/web/api/performanceresourcetiming/workerstart/index.html deleted file mode 100644 index 8a6c2cbede..0000000000 --- a/files/fr/web/api/performanceresourcetiming/workerstart/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: PerformanceResourceTiming.workerStart -slug: Web/API/PerformanceResourceTiming/workerStart -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - workerStart -translation_of: Web/API/PerformanceResourceTiming/workerStart ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule workerStart de l'interface PerformanceResourceTiming renvoie un DOMHighResTimeStamp immédiatement avant l'envoi du FetchEvent si un processus de service worker est déjà en cours, ou immédiatement avant le démarrage du processus de service worker s'il n'est pas déjà en cours. Si la ressource n'est pas interceptée par un service worker, la propriété renvoie toujours 0.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
resource.workerStart;
- -

Valeur de retour

- -

Un DOMHighResTimeStamp immédiatement avant de transmettre le FetchEvent si un processus de service worker est déjà en cours, ou immédiatement avant de lancer le processus de service worker s'il n'est pas encore en cours. Si la ressource n'est pas interceptée par un service worker, la propriété retourne toujours 0.

- -

Exemple

- -

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

- -
function print_PerformanceEntries() {
-  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
-  let p = performance.getEntriesByType("resource");
-  for (let i = 0; i < p.length; i++) {
-    print_start_and_end_properties(p[i]);
-  }
-}
-function print_start_and_end_properties(perfEntry) {
-  // Imprime les horodatages des propriétés *start et *end
-  properties = ["connectStart", "connectEnd",
-                "domainLookupStart", "domainLookupEnd",
-                "fetchStart",
-                "redirectStart", "redirectEnd",
-                "requestStart",
-                "responseStart", "responseEnd",
-                "secureConnectionStart"];
-
-  for (let i = 0; i < properties.length; i++) {
-    // vérifie chaque propriété
-    let supported = properties[i] in perfEntry;
-    if (supported) {
-      let value = perfEntry[properties[i]];
-      console.log("... " + properties[i] + " = " + value);
-    } else {
-      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
-    }
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', '#dom-performanceresourcetiming-workerstart', - 'workerStart')}}{{Spec2('Resource Timing 2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceResourceTiming.workerStart")}}

diff --git a/files/fr/web/api/performanceresourcetiming/workerstart/index.md b/files/fr/web/api/performanceresourcetiming/workerstart/index.md new file mode 100644 index 0000000000..8a6c2cbede --- /dev/null +++ b/files/fr/web/api/performanceresourcetiming/workerstart/index.md @@ -0,0 +1,84 @@ +--- +title: PerformanceResourceTiming.workerStart +slug: Web/API/PerformanceResourceTiming/workerStart +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - workerStart +translation_of: Web/API/PerformanceResourceTiming/workerStart +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule workerStart de l'interface PerformanceResourceTiming renvoie un DOMHighResTimeStamp immédiatement avant l'envoi du FetchEvent si un processus de service worker est déjà en cours, ou immédiatement avant le démarrage du processus de service worker s'il n'est pas déjà en cours. Si la ressource n'est pas interceptée par un service worker, la propriété renvoie toujours 0.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
resource.workerStart;
+ +

Valeur de retour

+ +

Un DOMHighResTimeStamp immédiatement avant de transmettre le FetchEvent si un processus de service worker est déjà en cours, ou immédiatement avant de lancer le processus de service worker s'il n'est pas encore en cours. Si la ressource n'est pas interceptée par un service worker, la propriété retourne toujours 0.

+ +

Exemple

+ +

Dans l'exemple suivant, la valeur des propriétés *Start et *End de tous les événements de type "resource" sont enregistrés.

+ +
function print_PerformanceEntries() {
+  // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
+  let p = performance.getEntriesByType("resource");
+  for (let i = 0; i < p.length; i++) {
+    print_start_and_end_properties(p[i]);
+  }
+}
+function print_start_and_end_properties(perfEntry) {
+  // Imprime les horodatages des propriétés *start et *end
+  properties = ["connectStart", "connectEnd",
+                "domainLookupStart", "domainLookupEnd",
+                "fetchStart",
+                "redirectStart", "redirectEnd",
+                "requestStart",
+                "responseStart", "responseEnd",
+                "secureConnectionStart"];
+
+  for (let i = 0; i < properties.length; i++) {
+    // vérifie chaque propriété
+    let supported = properties[i] in perfEntry;
+    if (supported) {
+      let value = perfEntry[properties[i]];
+      console.log("... " + properties[i] + " = " + value);
+    } else {
+      console.log("... " + properties[i] + " = N'EST PAS pris en charge");
+    }
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Resource Timing 2', '#dom-performanceresourcetiming-workerstart', + 'workerStart')}}{{Spec2('Resource Timing 2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceResourceTiming.workerStart")}}

diff --git a/files/fr/web/api/performanceservertiming/description/index.html b/files/fr/web/api/performanceservertiming/description/index.html deleted file mode 100644 index 68062d8a27..0000000000 --- a/files/fr/web/api/performanceservertiming/description/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: PerformanceServerTiming.description -slug: Web/API/PerformanceServerTiming/description -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - description -translation_of: Web/API/PerformanceServerTiming/description ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule description retourne une chaîne de caractères (DOMString) décrivant la métrique spécifiée par le serveur, ou une chaîne vide.

- -

Syntaxe

- -
serverTiming.description;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Server Timing','#dom-performanceservertiming-description', - 'description')}}{{Spec2('Server Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceServerTiming.description")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performanceservertiming/description/index.md b/files/fr/web/api/performanceservertiming/description/index.md new file mode 100644 index 0000000000..68062d8a27 --- /dev/null +++ b/files/fr/web/api/performanceservertiming/description/index.md @@ -0,0 +1,51 @@ +--- +title: PerformanceServerTiming.description +slug: Web/API/PerformanceServerTiming/description +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - description +translation_of: Web/API/PerformanceServerTiming/description +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule description retourne une chaîne de caractères (DOMString) décrivant la métrique spécifiée par le serveur, ou une chaîne vide.

+ +

Syntaxe

+ +
serverTiming.description;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Server Timing','#dom-performanceservertiming-description', + 'description')}}{{Spec2('Server Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceServerTiming.description")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performanceservertiming/duration/index.html b/files/fr/web/api/performanceservertiming/duration/index.html deleted file mode 100644 index 7fc0241d4b..0000000000 --- a/files/fr/web/api/performanceservertiming/duration/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: PerformanceServerTiming.duration -slug: Web/API/PerformanceServerTiming/duration -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - duration -translation_of: Web/API/PerformanceServerTiming/duration ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule duration retourne un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur 0,0.

- -

Syntaxe

- -
serverTiming.duration;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Server Timing','#dom-performanceservertiming-duration', - 'duration')}}{{Spec2('Server Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceServerTiming.duration")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performanceservertiming/duration/index.md b/files/fr/web/api/performanceservertiming/duration/index.md new file mode 100644 index 0000000000..7fc0241d4b --- /dev/null +++ b/files/fr/web/api/performanceservertiming/duration/index.md @@ -0,0 +1,51 @@ +--- +title: PerformanceServerTiming.duration +slug: Web/API/PerformanceServerTiming/duration +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - duration +translation_of: Web/API/PerformanceServerTiming/duration +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule duration retourne un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur 0,0.

+ +

Syntaxe

+ +
serverTiming.duration;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Server Timing','#dom-performanceservertiming-duration', + 'duration')}}{{Spec2('Server Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceServerTiming.duration")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performanceservertiming/index.html b/files/fr/web/api/performanceservertiming/index.html deleted file mode 100644 index 25e1d58e01..0000000000 --- a/files/fr/web/api/performanceservertiming/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: PerformanceServerTiming -slug: Web/API/PerformanceServerTiming -tags: - - API - - Interface - - Reference - - Performance Web - - Resource Timing API -translation_of: Web/API/PerformanceServerTiming ---- -
{{APIRef("Resource Timing API")}} {{securecontext_header}}
- -

L'interface PerformanceServerTiming présente des métriques de serveur qui sont envoyées avec la réponse dans l'en-tête Server-Timing dans l'en-tête HTTP.

- -

Cette interface est limitée à la même origine, mais vous pouvez utiliser l'en-tête Timing-Allow-Origin pour spécifier les domaines qui sont autorisés à accéder aux paramètres du serveur. Notez que cette interface n'est disponible que dans des contextes sécurisés (HTTPS) dans certains navigateurs.

- -

{{AvailableInWorkers}}

- -

Propriétés

- -
-
PerformanceServerTiming.description{{readonlyInline}}
-
Une chaîne de caractères DOMString décrivant la métrique spécifiée par le serveur, ou une chaîne vide.
-
PerformanceServerTiming.duration{{readonlyInline}}
-
Un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur 0.0.
-
PerformanceServerTiming.name{{readonlyInline}}
-
Une chaîne de caractères DOMString avec le nom de la métrique spécifiée par le serveur.
-
- -

Méthodes

- -
-
PerformanceServerTiming.toJSON()
-
Retourne une chaîne de caractères DOMString qui est la représentation JSON de l'objet PerformanceServerTiming.
-
- -

Exemple

- -

Étant donné un serveur qui envoie l'en-tête Server-Timing, par exemple un serveur node.js comme celui-ci :

- -
const http = require('http');
-
-function requestHandler(request, response) {
-  const headers = {
-    'Server-Timing': `
-      cache;desc="Cache Read";dur=23.2,
-      db;dur=53,
-      app;dur=47.2
-    `.replace(/\n/g, '')
-  };
-  response.writeHead(200, headers);
-  response.write('');
-  return setTimeout(_ => {
-    response.end();
-  }, 1000)
-};
-
-http.createServer(requestHandler).listen(3000).on('error', console.error);
- -

Les entrées PerformanceServerTiming sont désormais observables depuis JavaScript via la propriété PerformanceResourceTiming.serverTiming :

- -
let entries = performance.getEntriesByType('resource');
-console.log(entries[0].serverTiming);
-// 0: PerformanceServerTiming {name: "cache", duration: 23.2, description: "Cache Read"}
-// 1: PerformanceServerTiming {name: "db", duration: 53, description: ""}
-// 2: PerformanceServerTiming {name: "app", duration: 47.2, description: ""}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Server Timing','#the-performanceservertiming-interface', 'PerformanceServerTiming')}}{{Spec2('Server Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceServerTiming")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performanceservertiming/index.md b/files/fr/web/api/performanceservertiming/index.md new file mode 100644 index 0000000000..25e1d58e01 --- /dev/null +++ b/files/fr/web/api/performanceservertiming/index.md @@ -0,0 +1,98 @@ +--- +title: PerformanceServerTiming +slug: Web/API/PerformanceServerTiming +tags: + - API + - Interface + - Reference + - Performance Web + - Resource Timing API +translation_of: Web/API/PerformanceServerTiming +--- +
{{APIRef("Resource Timing API")}} {{securecontext_header}}
+ +

L'interface PerformanceServerTiming présente des métriques de serveur qui sont envoyées avec la réponse dans l'en-tête Server-Timing dans l'en-tête HTTP.

+ +

Cette interface est limitée à la même origine, mais vous pouvez utiliser l'en-tête Timing-Allow-Origin pour spécifier les domaines qui sont autorisés à accéder aux paramètres du serveur. Notez que cette interface n'est disponible que dans des contextes sécurisés (HTTPS) dans certains navigateurs.

+ +

{{AvailableInWorkers}}

+ +

Propriétés

+ +
+
PerformanceServerTiming.description{{readonlyInline}}
+
Une chaîne de caractères DOMString décrivant la métrique spécifiée par le serveur, ou une chaîne vide.
+
PerformanceServerTiming.duration{{readonlyInline}}
+
Un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur 0.0.
+
PerformanceServerTiming.name{{readonlyInline}}
+
Une chaîne de caractères DOMString avec le nom de la métrique spécifiée par le serveur.
+
+ +

Méthodes

+ +
+
PerformanceServerTiming.toJSON()
+
Retourne une chaîne de caractères DOMString qui est la représentation JSON de l'objet PerformanceServerTiming.
+
+ +

Exemple

+ +

Étant donné un serveur qui envoie l'en-tête Server-Timing, par exemple un serveur node.js comme celui-ci :

+ +
const http = require('http');
+
+function requestHandler(request, response) {
+  const headers = {
+    'Server-Timing': `
+      cache;desc="Cache Read";dur=23.2,
+      db;dur=53,
+      app;dur=47.2
+    `.replace(/\n/g, '')
+  };
+  response.writeHead(200, headers);
+  response.write('');
+  return setTimeout(_ => {
+    response.end();
+  }, 1000)
+};
+
+http.createServer(requestHandler).listen(3000).on('error', console.error);
+ +

Les entrées PerformanceServerTiming sont désormais observables depuis JavaScript via la propriété PerformanceResourceTiming.serverTiming :

+ +
let entries = performance.getEntriesByType('resource');
+console.log(entries[0].serverTiming);
+// 0: PerformanceServerTiming {name: "cache", duration: 23.2, description: "Cache Read"}
+// 1: PerformanceServerTiming {name: "db", duration: 53, description: ""}
+// 2: PerformanceServerTiming {name: "app", duration: 47.2, description: ""}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Server Timing','#the-performanceservertiming-interface', 'PerformanceServerTiming')}}{{Spec2('Server Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceServerTiming")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performanceservertiming/name/index.html b/files/fr/web/api/performanceservertiming/name/index.html deleted file mode 100644 index f4834fdcaa..0000000000 --- a/files/fr/web/api/performanceservertiming/name/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: PerformanceServerTiming.name -slug: Web/API/PerformanceServerTiming/name -tags: - - API - - Property - - Propriété - - Reference - - Performance Web - - Resource Timing API - - name -translation_of: Web/API/PerformanceServerTiming/name ---- -
{{APIRef("Resource Timing API")}}
- -

La propriété en lecture seule name retourne une valeur DOMString qui est le nom de la métrique spécifiée par le serveur.

- -

Syntaxe

- -
serverTiming.name;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Server Timing','#dom-performanceservertiming-name', 'name')}}{{Spec2('Server Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceServerTiming.name")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performanceservertiming/name/index.md b/files/fr/web/api/performanceservertiming/name/index.md new file mode 100644 index 0000000000..f4834fdcaa --- /dev/null +++ b/files/fr/web/api/performanceservertiming/name/index.md @@ -0,0 +1,50 @@ +--- +title: PerformanceServerTiming.name +slug: Web/API/PerformanceServerTiming/name +tags: + - API + - Property + - Propriété + - Reference + - Performance Web + - Resource Timing API + - name +translation_of: Web/API/PerformanceServerTiming/name +--- +
{{APIRef("Resource Timing API")}}
+ +

La propriété en lecture seule name retourne une valeur DOMString qui est le nom de la métrique spécifiée par le serveur.

+ +

Syntaxe

+ +
serverTiming.name;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Server Timing','#dom-performanceservertiming-name', 'name')}}{{Spec2('Server Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceServerTiming.name")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performanceservertiming/tojson/index.html b/files/fr/web/api/performanceservertiming/tojson/index.html deleted file mode 100644 index 4c0822c293..0000000000 --- a/files/fr/web/api/performanceservertiming/tojson/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: PerformanceServerTiming.toJSON() -slug: Web/API/PerformanceServerTiming/toJSON -tags: - - API - - Method - - Méthode - - Reference - - Performance Web - - Resource Timing API - - toJSON -translation_of: Web/API/PerformanceServerTiming/toJSON ---- -
{{APIRef("Resource Timing API")}}
- -

La méthode toJSON() de l'interface PerformanceServerTiming retourne une chaîne de caractères DOMString qui est la représentation JSON de l'objet PerformanceServerTiming.

- -

Syntaxe

- -
let json = PerformanceServerTiming.toJSON()
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -
-
json
-
Une chaîne de caractères JSON qui est la sérialisation de l'objet PerformanceServerTiming.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Server Timing','#dom-performanceservertiming-tojson','toJSON')}} - {{Spec2('Server Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceServerTiming.toJSON")}}

diff --git a/files/fr/web/api/performanceservertiming/tojson/index.md b/files/fr/web/api/performanceservertiming/tojson/index.md new file mode 100644 index 0000000000..4c0822c293 --- /dev/null +++ b/files/fr/web/api/performanceservertiming/tojson/index.md @@ -0,0 +1,55 @@ +--- +title: PerformanceServerTiming.toJSON() +slug: Web/API/PerformanceServerTiming/toJSON +tags: + - API + - Method + - Méthode + - Reference + - Performance Web + - Resource Timing API + - toJSON +translation_of: Web/API/PerformanceServerTiming/toJSON +--- +
{{APIRef("Resource Timing API")}}
+ +

La méthode toJSON() de l'interface PerformanceServerTiming retourne une chaîne de caractères DOMString qui est la représentation JSON de l'objet PerformanceServerTiming.

+ +

Syntaxe

+ +
let json = PerformanceServerTiming.toJSON()
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +
+
json
+
Une chaîne de caractères JSON qui est la sérialisation de l'objet PerformanceServerTiming.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Server Timing','#dom-performanceservertiming-tojson','toJSON')}} + {{Spec2('Server Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceServerTiming.toJSON")}}

diff --git a/files/fr/web/api/performancetiming/connectend/index.html b/files/fr/web/api/performancetiming/connectend/index.html deleted file mode 100644 index 036aec20a5..0000000000 --- a/files/fr/web/api/performancetiming/connectend/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.connectEnd -slug: Web/API/PerformanceTiming/connectEnd -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - connectEnd -translation_of: Web/API/PerformanceTiming/connectEnd ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule connectEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la connexion a été ouverte en réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est recommencé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que PerformanceTiming.fetchStart. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.

- -

Syntaxe

- -
let time = performanceTiming.connectEnd;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-connectend', - 'PerformanceTiming.connectEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.connectEnd")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/connectend/index.md b/files/fr/web/api/performancetiming/connectend/index.md new file mode 100644 index 0000000000..036aec20a5 --- /dev/null +++ b/files/fr/web/api/performancetiming/connectend/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.connectEnd +slug: Web/API/PerformanceTiming/connectEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - connectEnd +translation_of: Web/API/PerformanceTiming/connectEnd +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule connectEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la connexion a été ouverte en réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est recommencé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que PerformanceTiming.fetchStart. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.

+ +

Syntaxe

+ +
let time = performanceTiming.connectEnd;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-connectend', + 'PerformanceTiming.connectEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.connectEnd")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/connectstart/index.html b/files/fr/web/api/performancetiming/connectstart/index.html deleted file mode 100644 index f4b1f27534..0000000000 --- a/files/fr/web/api/performancetiming/connectstart/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.connectStart -slug: Web/API/PerformanceTiming/connectStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - connectStart -translation_of: Web/API/PerformanceTiming/connectStart ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule connectStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la demande d'ouverture de connexion est envoyée au réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, le dernier moment de début d'établissement de la connexion est donné. Si une connexion persistante est utilisée, la valeur sera la même que PerformanceTiming.fetchStart.

- -

Syntaxe

- -
let time = performanceTiming.connectStart;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-connectstart', - 'PerformanceTiming.connectStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.connectStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/connectstart/index.md b/files/fr/web/api/performancetiming/connectstart/index.md new file mode 100644 index 0000000000..f4b1f27534 --- /dev/null +++ b/files/fr/web/api/performancetiming/connectstart/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.connectStart +slug: Web/API/PerformanceTiming/connectStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - connectStart +translation_of: Web/API/PerformanceTiming/connectStart +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule connectStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la demande d'ouverture de connexion est envoyée au réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, le dernier moment de début d'établissement de la connexion est donné. Si une connexion persistante est utilisée, la valeur sera la même que PerformanceTiming.fetchStart.

+ +

Syntaxe

+ +
let time = performanceTiming.connectStart;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-connectstart', + 'PerformanceTiming.connectStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.connectStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/domainlookupend/index.html b/files/fr/web/api/performancetiming/domainlookupend/index.html deleted file mode 100644 index 20a26c397b..0000000000 --- a/files/fr/web/api/performancetiming/domainlookupend/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.domainLookupEnd -slug: Web/API/PerformanceTiming/domainLookupEnd -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - domainLookupEnd -translation_of: Web/API/PerformanceTiming/domainLookupEnd ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule domainLookupEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que PerformanceTiming.fetchStart.

- -

Syntaxe

- -
let time = performanceTiming.domainLookupEnd;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-domainlookupend', - 'PerformanceTiming.domainLookupEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.domainLookupEnd")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/domainlookupend/index.md b/files/fr/web/api/performancetiming/domainlookupend/index.md new file mode 100644 index 0000000000..20a26c397b --- /dev/null +++ b/files/fr/web/api/performancetiming/domainlookupend/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.domainLookupEnd +slug: Web/API/PerformanceTiming/domainLookupEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domainLookupEnd +translation_of: Web/API/PerformanceTiming/domainLookupEnd +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule domainLookupEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que PerformanceTiming.fetchStart.

+ +

Syntaxe

+ +
let time = performanceTiming.domainLookupEnd;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-domainlookupend', + 'PerformanceTiming.domainLookupEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.domainLookupEnd")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/domainlookupstart/index.html b/files/fr/web/api/performancetiming/domainlookupstart/index.html deleted file mode 100644 index 45020fe7b6..0000000000 --- a/files/fr/web/api/performancetiming/domainlookupstart/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.domainLookupStart -slug: Web/API/PerformanceTiming/domainLookupStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - domainLookupStart -translation_of: Web/API/PerformanceTiming/domainLookupStart ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule domainLookupStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que PerformanceTiming.fetchStart.

- -

Syntaxe

- -
let time = performanceTiming.domainLookupStart;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-domainlookupstart', - 'PerformanceTiming.domainLookupStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.domainLookupStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/domainlookupstart/index.md b/files/fr/web/api/performancetiming/domainlookupstart/index.md new file mode 100644 index 0000000000..45020fe7b6 --- /dev/null +++ b/files/fr/web/api/performancetiming/domainlookupstart/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.domainLookupStart +slug: Web/API/PerformanceTiming/domainLookupStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domainLookupStart +translation_of: Web/API/PerformanceTiming/domainLookupStart +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule domainLookupStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que PerformanceTiming.fetchStart.

+ +

Syntaxe

+ +
let time = performanceTiming.domainLookupStart;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-domainlookupstart', + 'PerformanceTiming.domainLookupStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.domainLookupStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/domcomplete/index.html b/files/fr/web/api/performancetiming/domcomplete/index.html deleted file mode 100644 index 27e1c9484b..0000000000 --- a/files/fr/web/api/performancetiming/domcomplete/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.domComplete -slug: Web/API/PerformanceTiming/domComplete -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - domComplete -translation_of: Web/API/PerformanceTiming/domComplete ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.domComplete de l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule domComplete retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son Document.readyState passe à 'complete' et que l'événement readystatechange correspondant est lancé.

- -

Syntaxe

- -
let time = performanceTiming.domComplete;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-domcomplete', - 'PerformanceTiming.domComplete')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.domComplete")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/domcomplete/index.md b/files/fr/web/api/performancetiming/domcomplete/index.md new file mode 100644 index 0000000000..27e1c9484b --- /dev/null +++ b/files/fr/web/api/performancetiming/domcomplete/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.domComplete +slug: Web/API/PerformanceTiming/domComplete +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domComplete +translation_of: Web/API/PerformanceTiming/domComplete +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.domComplete de l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule domComplete retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son Document.readyState passe à 'complete' et que l'événement readystatechange correspondant est lancé.

+ +

Syntaxe

+ +
let time = performanceTiming.domComplete;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-domcomplete', + 'PerformanceTiming.domComplete')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.domComplete")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html deleted file mode 100644 index a593001111..0000000000 --- a/files/fr/web/api/performancetiming/domcontentloadedeventend/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: PerformanceTiming.domContentLoadedEventEnd -slug: Web/API/PerformanceTiming/domContentLoadedEventEnd -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - domContentLoadedEventEnd -translation_of: Web/API/PerformanceTiming/domContentLoadedEventEnd ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.domContentLoadedEventEnd de l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule domContentLoadedEventEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, juste après que tous les scripts qui doivent être exécutés le plus rapidement possible, dans l'ordre ou non, aient été exécutés.

- -

Syntaxe

- -
let time = performanceTiming.domContentLoadedEventEnd;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', - '#dom-performancetiming-domcontentloadedeventend', - 'PerformanceTiming.domContentLoadedEventEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.domContentLoadedEventEnd")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventend/index.md b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.md new file mode 100644 index 0000000000..a593001111 --- /dev/null +++ b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.md @@ -0,0 +1,58 @@ +--- +title: PerformanceTiming.domContentLoadedEventEnd +slug: Web/API/PerformanceTiming/domContentLoadedEventEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domContentLoadedEventEnd +translation_of: Web/API/PerformanceTiming/domContentLoadedEventEnd +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.domContentLoadedEventEnd de l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule domContentLoadedEventEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, juste après que tous les scripts qui doivent être exécutés le plus rapidement possible, dans l'ordre ou non, aient été exécutés.

+ +

Syntaxe

+ +
let time = performanceTiming.domContentLoadedEventEnd;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', + '#dom-performancetiming-domcontentloadedeventend', + 'PerformanceTiming.domContentLoadedEventEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.domContentLoadedEventEnd")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html deleted file mode 100644 index fe2f9588ae..0000000000 --- a/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: PerformanceTiming.domContentLoadedEventStart -slug: Web/API/PerformanceTiming/domContentLoadedEventStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - domContentLoadedEventStart -translation_of: Web/API/PerformanceTiming/domContentLoadedEventStart ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.domContentLoadedEventStart de l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule domContentLoadedEventStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, juste avant que le parseur n'envoie l'événement DOMContentLoaded, c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après le parsing aient été exécutés.

- -

Syntaxe

- -
let time = performanceTiming.domContentLoadedEventStart;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', - '#dom-performancetiming-domcontentloadedeventstart', - 'PerformanceTiming.domContentLoadedEventStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.domContentLoadedEventStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.md b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.md new file mode 100644 index 0000000000..fe2f9588ae --- /dev/null +++ b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.md @@ -0,0 +1,58 @@ +--- +title: PerformanceTiming.domContentLoadedEventStart +slug: Web/API/PerformanceTiming/domContentLoadedEventStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domContentLoadedEventStart +translation_of: Web/API/PerformanceTiming/domContentLoadedEventStart +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.domContentLoadedEventStart de l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule domContentLoadedEventStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, juste avant que le parseur n'envoie l'événement DOMContentLoaded, c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après le parsing aient été exécutés.

+ +

Syntaxe

+ +
let time = performanceTiming.domContentLoadedEventStart;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', + '#dom-performancetiming-domcontentloadedeventstart', + 'PerformanceTiming.domContentLoadedEventStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.domContentLoadedEventStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/dominteractive/index.html b/files/fr/web/api/performancetiming/dominteractive/index.html deleted file mode 100644 index 6d96a184da..0000000000 --- a/files/fr/web/api/performancetiming/dominteractive/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: PerformanceTiming.domInteractive -slug: Web/API/PerformanceTiming/domInteractive -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - domInteractive -translation_of: Web/API/PerformanceTiming/domInteractive ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.domInteractive de l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule domInteractive retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son Document.readyState passe à "interactive" et que l'événement readystatechange correspondant est lancé.

- -

Cette propriété peut être utilisée pour mesurer la vitesse de chargement des sites Web que les utilisateurs ressentent. Néanmoins, il y a quelques mises en garde qui se produisent si des scripts bloquent le rendu et ne sont pas chargés de manière asynchrone ou avec des polices Web personnalisées. Vérifiez si vous êtes dans l'un de ces cas avant d'utiliser cette propriété comme un proxy pour l'expérience utilisateur de la vitesse de chargement d'un site Web.

- -

Syntaxe

- -
let time = performanceTiming.domInteractive;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-dominteractive', - 'PerformanceTiming.domInteractive')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.domInteractive")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/dominteractive/index.md b/files/fr/web/api/performancetiming/dominteractive/index.md new file mode 100644 index 0000000000..6d96a184da --- /dev/null +++ b/files/fr/web/api/performancetiming/dominteractive/index.md @@ -0,0 +1,61 @@ +--- +title: PerformanceTiming.domInteractive +slug: Web/API/PerformanceTiming/domInteractive +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domInteractive +translation_of: Web/API/PerformanceTiming/domInteractive +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.domInteractive de l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule domInteractive retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son Document.readyState passe à "interactive" et que l'événement readystatechange correspondant est lancé.

+ +

Cette propriété peut être utilisée pour mesurer la vitesse de chargement des sites Web que les utilisateurs ressentent. Néanmoins, il y a quelques mises en garde qui se produisent si des scripts bloquent le rendu et ne sont pas chargés de manière asynchrone ou avec des polices Web personnalisées. Vérifiez si vous êtes dans l'un de ces cas avant d'utiliser cette propriété comme un proxy pour l'expérience utilisateur de la vitesse de chargement d'un site Web.

+ +

Syntaxe

+ +
let time = performanceTiming.domInteractive;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-dominteractive', + 'PerformanceTiming.domInteractive')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.domInteractive")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/domloading/index.html b/files/fr/web/api/performancetiming/domloading/index.html deleted file mode 100644 index c8ebdceeea..0000000000 --- a/files/fr/web/api/performancetiming/domloading/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.domLoading -slug: Web/API/PerformanceTiming/domLoading -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - domLoading -translation_of: Web/API/PerformanceTiming/domLoading ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule domLoading retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a commencé son travail, c'est-à-dire lorsque son Document.readyState passe à "loading" et que l'événement readystatechange correspondant est déclenché.

- -

Syntaxe

- -
let time = performanceTiming.domLoading;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-domloading', - 'PerformanceTiming.domLoading')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.domLoading")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/domloading/index.md b/files/fr/web/api/performancetiming/domloading/index.md new file mode 100644 index 0000000000..c8ebdceeea --- /dev/null +++ b/files/fr/web/api/performancetiming/domloading/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.domLoading +slug: Web/API/PerformanceTiming/domLoading +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - domLoading +translation_of: Web/API/PerformanceTiming/domLoading +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule domLoading retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a commencé son travail, c'est-à-dire lorsque son Document.readyState passe à "loading" et que l'événement readystatechange correspondant est déclenché.

+ +

Syntaxe

+ +
let time = performanceTiming.domLoading;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-domloading', + 'PerformanceTiming.domLoading')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.domLoading")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/fetchstart/index.html b/files/fr/web/api/performancetiming/fetchstart/index.html deleted file mode 100644 index 78701f3386..0000000000 --- a/files/fr/web/api/performancetiming/fetchstart/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.fetchStart -slug: Web/API/PerformanceTiming/fetchStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - fetchStart -translation_of: Web/API/PerformanceTiming/fetchStart ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule fetchStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur est prêt à aller chercher le document en utilisant une requête HTTP. Ce moment est avant la vérification de tout cache d'application.

- -

Syntaxe

- -
let time = performance.timing.fetchStart;
- -

Specifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-fetchstart', - 'PerformanceTiming.fetchStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.fetchStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/fetchstart/index.md b/files/fr/web/api/performancetiming/fetchstart/index.md new file mode 100644 index 0000000000..78701f3386 --- /dev/null +++ b/files/fr/web/api/performancetiming/fetchstart/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.fetchStart +slug: Web/API/PerformanceTiming/fetchStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - fetchStart +translation_of: Web/API/PerformanceTiming/fetchStart +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule fetchStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur est prêt à aller chercher le document en utilisant une requête HTTP. Ce moment est avant la vérification de tout cache d'application.

+ +

Syntaxe

+ +
let time = performance.timing.fetchStart;
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-fetchstart', + 'PerformanceTiming.fetchStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.fetchStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/index.html b/files/fr/web/api/performancetiming/index.html deleted file mode 100644 index 7da667936a..0000000000 --- a/files/fr/web/api/performancetiming/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: PerformanceTiming -slug: Web/API/PerformanceTiming -tags: - - API - - Backwards compatibility - - Deprecated - - Interface - - Navigation Timing - - Navigation Timing API - - Optimization - - Performance - - Reference - - Timing - - legacy -translation_of: Web/API/PerformanceTiming ---- -
{{APIRef("Navigation Timing")}}
- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'interface PerformanceTiming est une interface héritée conservée pour la rétrocompatibilité et contient des propriétés qui offrent des informations sur la chronologie des performances pour divers événements qui se produisent pendant le chargement et l'utilisation de la page actuelle. Vous obtenez un objet PerformanceTiming décrivant votre page en utilisant la propriété window.performance.timing.

- -

Propriétés

- -

L'interface PerformanceTiming n'hérite d'aucune propriété.

- -

Ces propriétés décrivent chacune l'heure à laquelle un point particulier du processus de chargement de la page a été atteint. Certaines correspondent à des événements DOM, d'autres décrivent l'heure à laquelle les opérations internes du navigateur ont eu lieu.

- -

Chaque heure est fournie sous la forme d'une heure Unix (unsigned long long) représentant le moment, en millisecondes depuis l'époque UNIX.

- -

Ces propriétés sont énumérées dans l'ordre dans lequel elles apparaissent au cours du processus de navigation.

- -
-
PerformanceTiming.navigationStart {{readonlyInline}} {{deprecated_inline}}
-
Lorsque le prompt de déchargement se termine sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que PerformanceTiming.fetchStart.
-
PerformanceTiming.unloadEventStart {{readonlyInline}} {{deprecated_inline}}
-
Lorsque l'événement unload a été lancé, indiquant l'heure à laquelle le document précédent dans la fenêtre a commencé à se décharger. S'il n'y a pas de document précédent, ou si le document précédent ou l'une des redirections nécessaires n'est pas de la même origine, la valeur retournée est 0.
-
PerformanceTiming.unloadEventEnd {{readonlyInline}} {{deprecated_inline}}
-
Lorsque le gestionnaire d'événement unload se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est 0.
-
PerformanceTiming.redirectStart {{readonlyInline}} {{deprecated_inline}}
-
Quand la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur retournée est 0.
-
PerformanceTiming.redirectEnd {{readonlyInline}} {{deprecated_inline}}
-
Lorsque la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'a pas la même origine, la valeur retournée est 0.
-
PerformanceTiming.fetchStart {{readonlyInline}} {{deprecated_inline}}
-
Lorsque le navigateur est prêt à récupérer le document à l'aide d'une requête HTTP. Ce moment est avant la vérification de tout cache d'application.
-
PerformanceTiming.domainLookupStart {{readonlyInline}} {{deprecated_inline}}
-
Lorsque la recherche du domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que PerformanceTiming.fetchStart.
-
PerformanceTiming.domainLookupEnd {{readonlyInline}} {{deprecated_inline}}
-
Lorsque la recherche du domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que PerformanceTiming.fetchStart.
-
PerformanceTiming.connectStart {{readonlyInline}} {{deprecated_inline}}
-
Lorsque la demande d'ouverture d'une connexion est envoyée au réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est relancé, la dernière heure de début d'établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que PerformanceTiming.fetchStart.
-
PerformanceTiming.connectEnd {{readonlyInline}} {{deprecated_inline}}
-
Lorsque la connexion est ouverte sur le réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que PerformanceTiming.fetchStart. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.
-
PerformanceTiming.secureConnectionStart {{readonlyInline}} {{deprecated_inline}}
-
Lorsque le handshake de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, il retourne 0.
-
PerformanceTiming.requestStart {{readonlyInline}} {{deprecated_inline}}
-
Lorsque le navigateur a envoyé la requête pour obtenir le document réel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la demande et que la connexion est rouverte, cette propriété sera définie sur l'heure correspondant à la nouvelle demande.
-
PerformanceTiming.responseStart {{readonlyInline}} {{deprecated_inline}}
-
Lorsque le navigateur a reçu le premier octet de la réponse, du serveur ou d'un cache, ou d'une ressource locale.
-
PerformanceTiming.responseEnd {{readonlyInline}} {{deprecated_inline}}
-
Lorsque le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur, le cache ou une ressource locale.
-
PerformanceTiming.domLoading {{readonlyInline}} {{deprecated_inline}}
-
Lorsque l'analyseur syntaxique a commencé son travail, c'est-à-dire lorsque son Document.readyState passe à 'loading' et que l'événement readystatechange correspondant est déclenché.
-
PerformanceTiming.domInteractive {{readonlyInline}} {{deprecated_inline}}
-
Lorsque l'analyseur syntaxique a terminé son travail sur le document principal, c'est à ce moment que son Document.readyState passe à 'interactive' et que l'événement readystatechange correspondant est lancé.
-
PerformanceTiming.domContentLoadedEventStart {{readonlyInline}} {{deprecated_inline}}
-
Juste avant que l'analyseur syntaxique envoie l'événement DOMContentLoaded, c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après l'analyse syntaxique aient été exécutés.
-
PerformanceTiming.domContentLoadedEventEnd {{readonlyInline}} {{deprecated_inline}}
-
C'est-à-dire juste après que tous les scripts qui doivent être exécutés dès que possible, dans l'ordre ou non, aient été exécutés.
-
PerformanceTiming.domComplete {{readonlyInline}} {{deprecated_inline}}
-
Lorsque l'analyseur syntaxique a terminé son travail sur le document principal, c'est-à-dire lorsque son Document.readyState passe à 'complete' et que l'événement readystatechange correspondant est lancé.
-
PerformanceTiming.loadEventStart {{readonlyInline}} {{deprecated_inline}}
-
Quand l'événement load a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne 0.
-
PerformanceTiming.loadEventEnd {{readonlyInline}} {{deprecated_inline}}
-
Lorsque le gestionnaire d'événement load s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne 0.
-
- -

Méthodes

- -

L'interface PerformanceTiming n'hérite d'aucune méthode.

- -
-
PerformanceTiming.toJSON() {{non-Standard_Inline}} {{deprecated_inline}}
-
Retourne un objet JSON représentant cet objet PerformanceTiming.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#performancetiming', 'PerformanceTiming')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/index.md b/files/fr/web/api/performancetiming/index.md new file mode 100644 index 0000000000..7da667936a --- /dev/null +++ b/files/fr/web/api/performancetiming/index.md @@ -0,0 +1,117 @@ +--- +title: PerformanceTiming +slug: Web/API/PerformanceTiming +tags: + - API + - Backwards compatibility + - Deprecated + - Interface + - Navigation Timing + - Navigation Timing API + - Optimization + - Performance + - Reference + - Timing + - legacy +translation_of: Web/API/PerformanceTiming +--- +
{{APIRef("Navigation Timing")}}
+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'interface PerformanceTiming est une interface héritée conservée pour la rétrocompatibilité et contient des propriétés qui offrent des informations sur la chronologie des performances pour divers événements qui se produisent pendant le chargement et l'utilisation de la page actuelle. Vous obtenez un objet PerformanceTiming décrivant votre page en utilisant la propriété window.performance.timing.

+ +

Propriétés

+ +

L'interface PerformanceTiming n'hérite d'aucune propriété.

+ +

Ces propriétés décrivent chacune l'heure à laquelle un point particulier du processus de chargement de la page a été atteint. Certaines correspondent à des événements DOM, d'autres décrivent l'heure à laquelle les opérations internes du navigateur ont eu lieu.

+ +

Chaque heure est fournie sous la forme d'une heure Unix (unsigned long long) représentant le moment, en millisecondes depuis l'époque UNIX.

+ +

Ces propriétés sont énumérées dans l'ordre dans lequel elles apparaissent au cours du processus de navigation.

+ +
+
PerformanceTiming.navigationStart {{readonlyInline}} {{deprecated_inline}}
+
Lorsque le prompt de déchargement se termine sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que PerformanceTiming.fetchStart.
+
PerformanceTiming.unloadEventStart {{readonlyInline}} {{deprecated_inline}}
+
Lorsque l'événement unload a été lancé, indiquant l'heure à laquelle le document précédent dans la fenêtre a commencé à se décharger. S'il n'y a pas de document précédent, ou si le document précédent ou l'une des redirections nécessaires n'est pas de la même origine, la valeur retournée est 0.
+
PerformanceTiming.unloadEventEnd {{readonlyInline}} {{deprecated_inline}}
+
Lorsque le gestionnaire d'événement unload se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est 0.
+
PerformanceTiming.redirectStart {{readonlyInline}} {{deprecated_inline}}
+
Quand la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur retournée est 0.
+
PerformanceTiming.redirectEnd {{readonlyInline}} {{deprecated_inline}}
+
Lorsque la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'a pas la même origine, la valeur retournée est 0.
+
PerformanceTiming.fetchStart {{readonlyInline}} {{deprecated_inline}}
+
Lorsque le navigateur est prêt à récupérer le document à l'aide d'une requête HTTP. Ce moment est avant la vérification de tout cache d'application.
+
PerformanceTiming.domainLookupStart {{readonlyInline}} {{deprecated_inline}}
+
Lorsque la recherche du domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que PerformanceTiming.fetchStart.
+
PerformanceTiming.domainLookupEnd {{readonlyInline}} {{deprecated_inline}}
+
Lorsque la recherche du domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que PerformanceTiming.fetchStart.
+
PerformanceTiming.connectStart {{readonlyInline}} {{deprecated_inline}}
+
Lorsque la demande d'ouverture d'une connexion est envoyée au réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est relancé, la dernière heure de début d'établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que PerformanceTiming.fetchStart.
+
PerformanceTiming.connectEnd {{readonlyInline}} {{deprecated_inline}}
+
Lorsque la connexion est ouverte sur le réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que PerformanceTiming.fetchStart. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.
+
PerformanceTiming.secureConnectionStart {{readonlyInline}} {{deprecated_inline}}
+
Lorsque le handshake de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, il retourne 0.
+
PerformanceTiming.requestStart {{readonlyInline}} {{deprecated_inline}}
+
Lorsque le navigateur a envoyé la requête pour obtenir le document réel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la demande et que la connexion est rouverte, cette propriété sera définie sur l'heure correspondant à la nouvelle demande.
+
PerformanceTiming.responseStart {{readonlyInline}} {{deprecated_inline}}
+
Lorsque le navigateur a reçu le premier octet de la réponse, du serveur ou d'un cache, ou d'une ressource locale.
+
PerformanceTiming.responseEnd {{readonlyInline}} {{deprecated_inline}}
+
Lorsque le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur, le cache ou une ressource locale.
+
PerformanceTiming.domLoading {{readonlyInline}} {{deprecated_inline}}
+
Lorsque l'analyseur syntaxique a commencé son travail, c'est-à-dire lorsque son Document.readyState passe à 'loading' et que l'événement readystatechange correspondant est déclenché.
+
PerformanceTiming.domInteractive {{readonlyInline}} {{deprecated_inline}}
+
Lorsque l'analyseur syntaxique a terminé son travail sur le document principal, c'est à ce moment que son Document.readyState passe à 'interactive' et que l'événement readystatechange correspondant est lancé.
+
PerformanceTiming.domContentLoadedEventStart {{readonlyInline}} {{deprecated_inline}}
+
Juste avant que l'analyseur syntaxique envoie l'événement DOMContentLoaded, c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après l'analyse syntaxique aient été exécutés.
+
PerformanceTiming.domContentLoadedEventEnd {{readonlyInline}} {{deprecated_inline}}
+
C'est-à-dire juste après que tous les scripts qui doivent être exécutés dès que possible, dans l'ordre ou non, aient été exécutés.
+
PerformanceTiming.domComplete {{readonlyInline}} {{deprecated_inline}}
+
Lorsque l'analyseur syntaxique a terminé son travail sur le document principal, c'est-à-dire lorsque son Document.readyState passe à 'complete' et que l'événement readystatechange correspondant est lancé.
+
PerformanceTiming.loadEventStart {{readonlyInline}} {{deprecated_inline}}
+
Quand l'événement load a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne 0.
+
PerformanceTiming.loadEventEnd {{readonlyInline}} {{deprecated_inline}}
+
Lorsque le gestionnaire d'événement load s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne 0.
+
+ +

Méthodes

+ +

L'interface PerformanceTiming n'hérite d'aucune méthode.

+ +
+
PerformanceTiming.toJSON() {{non-Standard_Inline}} {{deprecated_inline}}
+
Retourne un objet JSON représentant cet objet PerformanceTiming.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#performancetiming', 'PerformanceTiming')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/loadeventend/index.html b/files/fr/web/api/performancetiming/loadeventend/index.html deleted file mode 100644 index e7ee2a6989..0000000000 --- a/files/fr/web/api/performancetiming/loadeventend/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.loadEventEnd -slug: Web/API/PerformanceTiming/loadEventEnd -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - loadEventEnd -translation_of: Web/API/PerformanceTiming/loadEventEnd ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.loadEventEnd de l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule loadEventEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement load s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne 0.

- -

Syntaxe

- -
let time = performanceTiming.loadEventEnd;
- -

Specifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-loadedeventend', - 'PerformanceTiming.loadEventEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.loadEventEnd")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/loadeventend/index.md b/files/fr/web/api/performancetiming/loadeventend/index.md new file mode 100644 index 0000000000..e7ee2a6989 --- /dev/null +++ b/files/fr/web/api/performancetiming/loadeventend/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.loadEventEnd +slug: Web/API/PerformanceTiming/loadEventEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - loadEventEnd +translation_of: Web/API/PerformanceTiming/loadEventEnd +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.loadEventEnd de l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule loadEventEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement load s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne 0.

+ +

Syntaxe

+ +
let time = performanceTiming.loadEventEnd;
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-loadedeventend', + 'PerformanceTiming.loadEventEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.loadEventEnd")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/loadeventstart/index.html b/files/fr/web/api/performancetiming/loadeventstart/index.html deleted file mode 100644 index ca6d2dd5c7..0000000000 --- a/files/fr/web/api/performancetiming/loadeventstart/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.loadEventStart -slug: Web/API/PerformanceTiming/loadEventStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - loadEventStart -translation_of: Web/API/PerformanceTiming/loadEventStart ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.loadEventStart de l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule loadEventStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement load a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne 0.

- -

Syntaxe

- -
let time = performanceTiming.loadEventStart;
- -

Specifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-loadeventstart', - 'PerformanceTiming.loadEventStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.loadEventStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/loadeventstart/index.md b/files/fr/web/api/performancetiming/loadeventstart/index.md new file mode 100644 index 0000000000..ca6d2dd5c7 --- /dev/null +++ b/files/fr/web/api/performancetiming/loadeventstart/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.loadEventStart +slug: Web/API/PerformanceTiming/loadEventStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - loadEventStart +translation_of: Web/API/PerformanceTiming/loadEventStart +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.loadEventStart de l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule loadEventStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement load a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne 0.

+ +

Syntaxe

+ +
let time = performanceTiming.loadEventStart;
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-loadeventstart', + 'PerformanceTiming.loadEventStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.loadEventStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/navigationstart/index.html b/files/fr/web/api/performancetiming/navigationstart/index.html deleted file mode 100644 index 76fce74f7b..0000000000 --- a/files/fr/web/api/performancetiming/navigationstart/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.navigationStart -slug: Web/API/PerformanceTiming/navigationStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - navigationStart -translation_of: Web/API/PerformanceTiming/navigationStart ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule navigationStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, juste après la fin de l'invite de déchargement sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que PerformanceTiming.fetchStart.

- -

Syntaxe

- -
let time = performanceTiming.navigationStart;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-navigationstart', - 'PerformanceTiming.navigationStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.navigationStart")}}

- -

Voir aussi

- - \ No newline at end of file diff --git a/files/fr/web/api/performancetiming/navigationstart/index.md b/files/fr/web/api/performancetiming/navigationstart/index.md new file mode 100644 index 0000000000..76fce74f7b --- /dev/null +++ b/files/fr/web/api/performancetiming/navigationstart/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.navigationStart +slug: Web/API/PerformanceTiming/navigationStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - navigationStart +translation_of: Web/API/PerformanceTiming/navigationStart +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule navigationStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, juste après la fin de l'invite de déchargement sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que PerformanceTiming.fetchStart.

+ +

Syntaxe

+ +
let time = performanceTiming.navigationStart;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-navigationstart', + 'PerformanceTiming.navigationStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.navigationStart")}}

+ +

Voir aussi

+ + \ No newline at end of file diff --git a/files/fr/web/api/performancetiming/redirectend/index.html b/files/fr/web/api/performancetiming/redirectend/index.html deleted file mode 100644 index fe8213d131..0000000000 --- a/files/fr/web/api/performancetiming/redirectend/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.redirectEnd -slug: Web/API/PerformanceTiming/redirectEnd -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - redirectEnd -translation_of: Web/API/PerformanceTiming/redirectEnd ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule redirectEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est 0.

- -

Syntaxe

- -
let time = performanceTiming.redirectEnd;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-redirectend', - 'PerformanceTiming.redirectEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.redirectEnd")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/redirectend/index.md b/files/fr/web/api/performancetiming/redirectend/index.md new file mode 100644 index 0000000000..fe8213d131 --- /dev/null +++ b/files/fr/web/api/performancetiming/redirectend/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.redirectEnd +slug: Web/API/PerformanceTiming/redirectEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - redirectEnd +translation_of: Web/API/PerformanceTiming/redirectEnd +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule redirectEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est 0.

+ +

Syntaxe

+ +
let time = performanceTiming.redirectEnd;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-redirectend', + 'PerformanceTiming.redirectEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.redirectEnd")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/redirectstart/index.html b/files/fr/web/api/performancetiming/redirectstart/index.html deleted file mode 100644 index fcea481323..0000000000 --- a/files/fr/web/api/performancetiming/redirectstart/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.redirectStart -slug: Web/API/PerformanceTiming/redirectStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - redirectStart -translation_of: Web/API/PerformanceTiming/redirectStart ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule redirectStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est 0.

- -

Syntaxe

- -
let time = performanceTiming.redirectStart;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-redirectstart', - 'PerformanceTiming.redirectStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.redirectStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/redirectstart/index.md b/files/fr/web/api/performancetiming/redirectstart/index.md new file mode 100644 index 0000000000..fcea481323 --- /dev/null +++ b/files/fr/web/api/performancetiming/redirectstart/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.redirectStart +slug: Web/API/PerformanceTiming/redirectStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - redirectStart +translation_of: Web/API/PerformanceTiming/redirectStart +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule redirectStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est 0.

+ +

Syntaxe

+ +
let time = performanceTiming.redirectStart;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-redirectstart', + 'PerformanceTiming.redirectStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.redirectStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/requeststart/index.html b/files/fr/web/api/performancetiming/requeststart/index.html deleted file mode 100644 index 653f3b8feb..0000000000 --- a/files/fr/web/api/performancetiming/requeststart/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.requestStart -slug: Web/API/PerformanceTiming/requestStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - requestStart -translation_of: Web/API/PerformanceTiming/requestStart ---- -

{{ APIRef("PerformanceTiming") }}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule requestStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a envoyé la requête pour obtenir le document actuel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la requête et que la connexion est rouverte, cette propriété sera définie sur le temps correspondant à la nouvelle requête.

- -

Syntaxe

- -
let time = performanceTiming.requestStart;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-requeststart', - 'PerformanceTiming.requestStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.requestStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/requeststart/index.md b/files/fr/web/api/performancetiming/requeststart/index.md new file mode 100644 index 0000000000..653f3b8feb --- /dev/null +++ b/files/fr/web/api/performancetiming/requeststart/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.requestStart +slug: Web/API/PerformanceTiming/requestStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - requestStart +translation_of: Web/API/PerformanceTiming/requestStart +--- +

{{ APIRef("PerformanceTiming") }}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule requestStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a envoyé la requête pour obtenir le document actuel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la requête et que la connexion est rouverte, cette propriété sera définie sur le temps correspondant à la nouvelle requête.

+ +

Syntaxe

+ +
let time = performanceTiming.requestStart;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-requeststart', + 'PerformanceTiming.requestStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.requestStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/responseend/index.html b/files/fr/web/api/performancetiming/responseend/index.html deleted file mode 100644 index ea05b6efd3..0000000000 --- a/files/fr/web/api/performancetiming/responseend/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.responseEnd -slug: Web/API/PerformanceTiming/responseEnd -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - responseEnd -translation_of: Web/API/PerformanceTiming/responseEnd ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule responseEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur à partir d'un cache ou d'une ressource locale.

- -

Syntaxe

- -
let time = performanceTiming.responseEnd;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-responseEnd', - 'PerformanceTiming.responseEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.responseEnd")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/responseend/index.md b/files/fr/web/api/performancetiming/responseend/index.md new file mode 100644 index 0000000000..ea05b6efd3 --- /dev/null +++ b/files/fr/web/api/performancetiming/responseend/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.responseEnd +slug: Web/API/PerformanceTiming/responseEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - responseEnd +translation_of: Web/API/PerformanceTiming/responseEnd +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule responseEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur à partir d'un cache ou d'une ressource locale.

+ +

Syntaxe

+ +
let time = performanceTiming.responseEnd;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-responseEnd', + 'PerformanceTiming.responseEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.responseEnd")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/responsestart/index.html b/files/fr/web/api/performancetiming/responsestart/index.html deleted file mode 100644 index 67ac9329ea..0000000000 --- a/files/fr/web/api/performancetiming/responsestart/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.responseStart -slug: Web/API/PerformanceTiming/responseStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - responseStart -translation_of: Web/API/PerformanceTiming/responseStart ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule responseStart retourne un unsigned long long représentant le moment (en millisecondes depuis l'époque UNIX) où le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.

- -

Syntaxe

- -
let time = performanceTiming.responseStart;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-responsestart', - 'PerformanceTiming.responseStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.responseStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/responsestart/index.md b/files/fr/web/api/performancetiming/responsestart/index.md new file mode 100644 index 0000000000..67ac9329ea --- /dev/null +++ b/files/fr/web/api/performancetiming/responsestart/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.responseStart +slug: Web/API/PerformanceTiming/responseStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - responseStart +translation_of: Web/API/PerformanceTiming/responseStart +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule responseStart retourne un unsigned long long représentant le moment (en millisecondes depuis l'époque UNIX) où le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.

+ +

Syntaxe

+ +
let time = performanceTiming.responseStart;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-responsestart', + 'PerformanceTiming.responseStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.responseStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/secureconnectionstart/index.html b/files/fr/web/api/performancetiming/secureconnectionstart/index.html deleted file mode 100644 index 8031002a2a..0000000000 --- a/files/fr/web/api/performancetiming/secureconnectionstart/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.secureConnectionStart -slug: Web/API/PerformanceTiming/secureConnectionStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - secureConnectionStart -translation_of: Web/API/PerformanceTiming/secureConnectionStart ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule secureConnectionStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la poignée de main de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, elle retourne 0.

- -

Syntaxe

- -
let time = performanceTiming.secureConnectionStart;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-secureconnectionstart', - 'PerformanceTiming.secureConnectionStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.secureConnectionStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/secureconnectionstart/index.md b/files/fr/web/api/performancetiming/secureconnectionstart/index.md new file mode 100644 index 0000000000..8031002a2a --- /dev/null +++ b/files/fr/web/api/performancetiming/secureconnectionstart/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.secureConnectionStart +slug: Web/API/PerformanceTiming/secureConnectionStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - secureConnectionStart +translation_of: Web/API/PerformanceTiming/secureConnectionStart +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule secureConnectionStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où la poignée de main de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, elle retourne 0.

+ +

Syntaxe

+ +
let time = performanceTiming.secureConnectionStart;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-secureconnectionstart', + 'PerformanceTiming.secureConnectionStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.secureConnectionStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/unloadeventend/index.html b/files/fr/web/api/performancetiming/unloadeventend/index.html deleted file mode 100644 index 03a0cbe390..0000000000 --- a/files/fr/web/api/performancetiming/unloadeventend/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.unloadEventEnd -slug: Web/API/PerformanceTiming/unloadEventEnd -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - unloadEventEnd -translation_of: Web/API/PerformanceTiming/unloadEventEnd ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.unloadEventEnd de l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule unloadEventEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement unload se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est 0.

- -

Syntaxe

- -
let time = performanceTiming.unloadEventEnd;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-unloadeventend', - 'PerformanceTiming.unloadEventEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.unloadEventEnd")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/unloadeventend/index.md b/files/fr/web/api/performancetiming/unloadeventend/index.md new file mode 100644 index 0000000000..03a0cbe390 --- /dev/null +++ b/files/fr/web/api/performancetiming/unloadeventend/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.unloadEventEnd +slug: Web/API/PerformanceTiming/unloadEventEnd +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - unloadEventEnd +translation_of: Web/API/PerformanceTiming/unloadEventEnd +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.unloadEventEnd de l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule unloadEventEnd retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement unload se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est 0.

+ +

Syntaxe

+ +
let time = performanceTiming.unloadEventEnd;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-unloadeventend', + 'PerformanceTiming.unloadEventEnd')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.unloadEventEnd")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/performancetiming/unloadeventstart/index.html b/files/fr/web/api/performancetiming/unloadeventstart/index.html deleted file mode 100644 index c97032703f..0000000000 --- a/files/fr/web/api/performancetiming/unloadeventstart/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: PerformanceTiming.unloadEventStart -slug: Web/API/PerformanceTiming/unloadEventStart -tags: - - API - - Backwards compatibility - - Deprecated - - Navigation Timing - - PerformanceTiming - - Property - - Propriété - - Read-only - - legacy - - unloadEventStart -translation_of: Web/API/PerformanceTiming/unloadEventStart ---- -

{{APIRef("Navigation Timing")}}

- -
-

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.unloadEventStart de l'interface PerformanceNavigationTiming à la place.

-
- -

L'ancienne propriété en lecture seule unloadEventStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement unload a été lancé. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est 0.

- -

Syntaxe

- -
let time = performanceTiming.unloadEventStart;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-unloadeventstart', - 'PerformanceTiming.unloadEventStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PerformanceTiming.unloadEventStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/performancetiming/unloadeventstart/index.md b/files/fr/web/api/performancetiming/unloadeventstart/index.md new file mode 100644 index 0000000000..c97032703f --- /dev/null +++ b/files/fr/web/api/performancetiming/unloadeventstart/index.md @@ -0,0 +1,57 @@ +--- +title: PerformanceTiming.unloadEventStart +slug: Web/API/PerformanceTiming/unloadEventStart +tags: + - API + - Backwards compatibility + - Deprecated + - Navigation Timing + - PerformanceTiming + - Property + - Propriété + - Read-only + - legacy + - unloadEventStart +translation_of: Web/API/PerformanceTiming/unloadEventStart +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Attention : Cette interface est dépréciée dans la spécification Navigation Timing Level 2. Veuillez utiliser la propriété PerformanceNavigationTiming.unloadEventStart de l'interface PerformanceNavigationTiming à la place.

+
+ +

L'ancienne propriété en lecture seule unloadEventStart retourne un unsigned long long représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement unload a été lancé. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est 0.

+ +

Syntaxe

+ +
let time = performanceTiming.unloadEventStart;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Navigation Timing', '#dom-performancetiming-unloadeventstart', + 'PerformanceTiming.unloadEventStart')}}{{Spec2('Navigation Timing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceTiming.unloadEventStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/periodicwave/index.html b/files/fr/web/api/periodicwave/index.html deleted file mode 100644 index 0bd576e5b9..0000000000 --- a/files/fr/web/api/periodicwave/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: PeriodicWave -slug: Web/API/PeriodicWave -tags: - - API - - Interface - - Media - - PeriodicWave - - Reference - - Web Audio - - Web Audio API - - sinusoïdal - - sinusoïde -translation_of: Web/API/PeriodicWave ---- -

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

- -
-

L'objet PeriodicWave permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}.

-
- -

PeriodicWave n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}.

- -

Constructeur

- -
-
{{domxref("PeriodicWave.PeriodicWave()")}}
-
Crée une PeriodicWave (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}.
-
- -

Propriétés

- -

Aucune; par ailleurs, PeriodicWave n'hérite d'aucune propriété.

- -

Méthodes

- -

Aucune; par ailleurs, PeriodicWave n'hérite d'aucune méthode.

- -

Exemple

- -

{{page("/fr/docs/Web/API/BaseAudioContext/createPeriodicWave","Exemple")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#periodicwave', 'PeriodicWave')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.PeriodicWave")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/periodicwave/index.md b/files/fr/web/api/periodicwave/index.md new file mode 100644 index 0000000000..0bd576e5b9 --- /dev/null +++ b/files/fr/web/api/periodicwave/index.md @@ -0,0 +1,72 @@ +--- +title: PeriodicWave +slug: Web/API/PeriodicWave +tags: + - API + - Interface + - Media + - PeriodicWave + - Reference + - Web Audio + - Web Audio API + - sinusoïdal + - sinusoïde +translation_of: Web/API/PeriodicWave +--- +

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

+ +
+

L'objet PeriodicWave permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}.

+
+ +

PeriodicWave n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}.

+ +

Constructeur

+ +
+
{{domxref("PeriodicWave.PeriodicWave()")}}
+
Crée une PeriodicWave (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}.
+
+ +

Propriétés

+ +

Aucune; par ailleurs, PeriodicWave n'hérite d'aucune propriété.

+ +

Méthodes

+ +

Aucune; par ailleurs, PeriodicWave n'hérite d'aucune méthode.

+ +

Exemple

+ +

{{page("/fr/docs/Web/API/BaseAudioContext/createPeriodicWave","Exemple")}}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#periodicwave', 'PeriodicWave')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.PeriodicWave")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/permissions_api/index.html b/files/fr/web/api/permissions_api/index.html deleted file mode 100644 index 3d0d7e9214..0000000000 --- a/files/fr/web/api/permissions_api/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Permissions API -slug: Web/API/Permissions_API -translation_of: Web/API/Permissions_API ---- -

{{DefaultAPISidebar("Permissions API")}}

- -

L'API Permissions fournit une manière cohérente pour connaître, dans un programme, le statut des permissions dans le contexte courant. On pourra par exemple utiliser cette API afin de déterminer si la permission d'accéder à une API donnée a été accordée ou refusée.

- - -
-

Note : Cette fonctionnalité est disponible via les Web Workers bien que les versions actuelles de Firefox n'implémentent pas WorkerNavigator.permissions.

-
- -

Concepts et usages

- -

Historiquement les differentes API géraient leurs propres permissions de façon peu cohérente. L'API Notifications par exemple permet de vérifier explicitement l'état d'autorisation et de déclencher la demande de permission tandis que l'API Geolocation ne permet pas ce fonctionnement (ce qui peut poser problème lorsque l'utilisateur a refusé la requête de permission initiale). L'API Permissions fournit un ensemble d'outils pour permettre aux développeuses et développeurs d'implémenter une meilleure ergonomie en ce qui concerne les permissions.

- -

La propriété permissions est accessible via l'objet Navigator, dans le contexte standard du navigateur et dans le contexte des workers (WorkerNavigator, ce qui permet de vérifier l'état des permissions depuis les workers). Cette propriété renvoie un objet Permissions qui fournit l'accès aux fonctionalités de l'API Permissions.

- -

Lorsque cet objet a été récupéré, on peut réaliser différentes opérations relatives aux permissions. On peut par exemple connaître l'état d'une permission en utilisant la méthode Permissions.query() qui renvoie une promesse dont la résolution est un objet PermissionStatus renseignant sur l'état d'autorisation pour une API donnée.

- -

L'API Permissions ne donne pas accès aux permissions de l'ensemble des API. Voici un sous-ensemble d'API qui peuvent fonctionner avec l'API Permissions :

- - - -

À l'avenir, davantage d'API devraient être prises en charge par l'API Permissions.

- -

Exemples

- -

Voici un exemple simple nommé Location Finder. Vous pouvez lancer cet exemple en live ici, ou voir le code source sur GitHub.

- -

Vous pouvez également en lire plus sur le fonctionnement de cet exemple dans l'article Utiliser l'API Permissions.

- -

Interfaces

- -
-
Navigator.permissions (respectivement WorkerNavigator.permissions) {{readonlyinline}}
-
Fournit un accès à l'objet Permissions depuis le contexte principal (respectivement celui du worker).
-
Permissions
-
Fournit les principales fonctionalités de l'API Permissions, telles que les méthodes de demande et de révocation des permissions.
-
PermissionStatus
-
Fournit l'accès à l'état actuel d'une permission ainsi qu'un gestionnaire d'évènements pour répondre aux changements d'état d'une permission.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Permissions API')}}{{Spec2('Permissions API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

Interface Permissions

- -

{{Compat("api.Permissions")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/permissions_api/index.md b/files/fr/web/api/permissions_api/index.md new file mode 100644 index 0000000000..3d0d7e9214 --- /dev/null +++ b/files/fr/web/api/permissions_api/index.md @@ -0,0 +1,83 @@ +--- +title: Permissions API +slug: Web/API/Permissions_API +translation_of: Web/API/Permissions_API +--- +

{{DefaultAPISidebar("Permissions API")}}

+ +

L'API Permissions fournit une manière cohérente pour connaître, dans un programme, le statut des permissions dans le contexte courant. On pourra par exemple utiliser cette API afin de déterminer si la permission d'accéder à une API donnée a été accordée ou refusée.

+ + +
+

Note : Cette fonctionnalité est disponible via les Web Workers bien que les versions actuelles de Firefox n'implémentent pas WorkerNavigator.permissions.

+
+ +

Concepts et usages

+ +

Historiquement les differentes API géraient leurs propres permissions de façon peu cohérente. L'API Notifications par exemple permet de vérifier explicitement l'état d'autorisation et de déclencher la demande de permission tandis que l'API Geolocation ne permet pas ce fonctionnement (ce qui peut poser problème lorsque l'utilisateur a refusé la requête de permission initiale). L'API Permissions fournit un ensemble d'outils pour permettre aux développeuses et développeurs d'implémenter une meilleure ergonomie en ce qui concerne les permissions.

+ +

La propriété permissions est accessible via l'objet Navigator, dans le contexte standard du navigateur et dans le contexte des workers (WorkerNavigator, ce qui permet de vérifier l'état des permissions depuis les workers). Cette propriété renvoie un objet Permissions qui fournit l'accès aux fonctionalités de l'API Permissions.

+ +

Lorsque cet objet a été récupéré, on peut réaliser différentes opérations relatives aux permissions. On peut par exemple connaître l'état d'une permission en utilisant la méthode Permissions.query() qui renvoie une promesse dont la résolution est un objet PermissionStatus renseignant sur l'état d'autorisation pour une API donnée.

+ +

L'API Permissions ne donne pas accès aux permissions de l'ensemble des API. Voici un sous-ensemble d'API qui peuvent fonctionner avec l'API Permissions :

+ + + +

À l'avenir, davantage d'API devraient être prises en charge par l'API Permissions.

+ +

Exemples

+ +

Voici un exemple simple nommé Location Finder. Vous pouvez lancer cet exemple en live ici, ou voir le code source sur GitHub.

+ +

Vous pouvez également en lire plus sur le fonctionnement de cet exemple dans l'article Utiliser l'API Permissions.

+ +

Interfaces

+ +
+
Navigator.permissions (respectivement WorkerNavigator.permissions) {{readonlyinline}}
+
Fournit un accès à l'objet Permissions depuis le contexte principal (respectivement celui du worker).
+
Permissions
+
Fournit les principales fonctionalités de l'API Permissions, telles que les méthodes de demande et de révocation des permissions.
+
PermissionStatus
+
Fournit l'accès à l'état actuel d'une permission ainsi qu'un gestionnaire d'évènements pour répondre aux changements d'état d'une permission.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Permissions API')}}{{Spec2('Permissions API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Interface Permissions

+ +

{{Compat("api.Permissions")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/plugin/index.html b/files/fr/web/api/plugin/index.html deleted file mode 100644 index cfb0919f6d..0000000000 --- a/files/fr/web/api/plugin/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Plugin -slug: Web/API/Plugin -tags: - - API - - Add-ons - - DOM - - NeedsContent - - Plug-in - - Plugins -translation_of: Web/API/Plugin ---- -
{{ApiRef("HTML DOM")}}
- -

L'interface Plugin fournit des informations à propos d'un plugin du navigateur.

- -
-

Note : Les propriétés propres des objets Plugin ne sont plus énumérables dans les dernières versions des navigateurs.

-
- -

Propriétés

- -
-
{{domxref("Plugin.description")}} {{readonlyinline}}
-
Une description lisible du plugin.
-
{{domxref("Plugin.filename")}} {{readonlyinline}}
-
Le nom de fichier du fichier plugin.
-
{{domxref("Plugin.name")}} {{readonlyinline}}
-
Le nom du plugin.
-
{{domxref("Plugin.version")}} {{readonlyinline}}
-
Le numéro de version du plugin, en chaîne de caractères.
-
- -

Méthodes

- -
-
{{domxref("Plugin.item")}}
-
Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge.
-
{{domxref("Plugin.namedItem")}}
-
Renvoie le type MIME d'un élément pris en charge.
-
- -

Caractéristiques

- - - - - - - - - - - - - - -
CaractéristiqueStatutCommentaire
{{SpecName('HTML WHATWG','#dom-plugin','Plugin')}}{{Spec2('HTML WHATWG')}}Définition initiale.
- -

Compatibilités

- -

{{Compat("api.Plugin")}}

diff --git a/files/fr/web/api/plugin/index.md b/files/fr/web/api/plugin/index.md new file mode 100644 index 0000000000..cfb0919f6d --- /dev/null +++ b/files/fr/web/api/plugin/index.md @@ -0,0 +1,62 @@ +--- +title: Plugin +slug: Web/API/Plugin +tags: + - API + - Add-ons + - DOM + - NeedsContent + - Plug-in + - Plugins +translation_of: Web/API/Plugin +--- +
{{ApiRef("HTML DOM")}}
+ +

L'interface Plugin fournit des informations à propos d'un plugin du navigateur.

+ +
+

Note : Les propriétés propres des objets Plugin ne sont plus énumérables dans les dernières versions des navigateurs.

+
+ +

Propriétés

+ +
+
{{domxref("Plugin.description")}} {{readonlyinline}}
+
Une description lisible du plugin.
+
{{domxref("Plugin.filename")}} {{readonlyinline}}
+
Le nom de fichier du fichier plugin.
+
{{domxref("Plugin.name")}} {{readonlyinline}}
+
Le nom du plugin.
+
{{domxref("Plugin.version")}} {{readonlyinline}}
+
Le numéro de version du plugin, en chaîne de caractères.
+
+ +

Méthodes

+ +
+
{{domxref("Plugin.item")}}
+
Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge.
+
{{domxref("Plugin.namedItem")}}
+
Renvoie le type MIME d'un élément pris en charge.
+
+ +

Caractéristiques

+ + + + + + + + + + + + + + +
CaractéristiqueStatutCommentaire
{{SpecName('HTML WHATWG','#dom-plugin','Plugin')}}{{Spec2('HTML WHATWG')}}Définition initiale.
+ +

Compatibilités

+ +

{{Compat("api.Plugin")}}

diff --git a/files/fr/web/api/pointer_events/index.html b/files/fr/web/api/pointer_events/index.html deleted file mode 100644 index 734d88d9f5..0000000000 --- a/files/fr/web/api/pointer_events/index.html +++ /dev/null @@ -1,433 +0,0 @@ ---- -title: Événements de pointeur -slug: Web/API/Pointer_events -tags: - - API - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/API/Pointer_events ---- -

{{DefaultAPISidebar("Pointer Events")}}

- -

La plupart du contenu web d'aujourd'hui suppose que le périphérique de pointage de l'utilisateur sera une souris. Cependant, beaucoup d'appareils prennent en charge d'autres types de d'entrée pour pointeur, comme le stylet ou les doigts pour les écrans tactiles. Des extensions aux modèles d'événement de pointage sont nécessaires et les événements de pointeur répondent à ce besoin.

- -

Les événements de pointeur sont des événements DOM déclenché pour tout périphérique de pointage. Ils sont conçus pour créer un modèle unique d'événement DOM pour gérer les périphériques de pointage comme la souris, le stylet ou le toucher (avec un ou plusieurs doigts). Un pointeur est agnostique du type de matériel utilisé pour cibler un endroit sur l'écran.

- -

Avoir un seul modèle pour gérer les événements de pointeur peut simplifier la création de sites web et applications et fournir une bonne expérience utilisateur quelque soit le matériel de l'utilisateur. Toutefois, pour les scénarios dans lesquels une gestion spécifique au périphérique est souhaitée, les événements de pointeur définissent une propriété {{domxref("PointerEvent.pointerType","pointerType")}} qui permet de connaître le type de périphérique ayant déclenché l'événement.

- -

Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (mousedown/pointerdown, mousemove/pointermove, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur.

- -

Terminologie

- -
-
pointeur actif
-
Tout périphérique d'entrée pointeur pouvant produire des événements. Un pointeur est considéré actif s'il peut encore produire des événements. Par exemple, un stylet posé sur l'écran est considéré comme actif puisqu'il peut produire des événements en étant déplacé ou levé.
-
numériseur (digitizer)
-
Un dispositif avec une surface pouvant recevoir et détecter le contact. Le plus souvent, le dispositif est un écran tactile pouvant détecter l'entrée provenant du stylet ou du doigt.
-
hit test
-
Le procédé qu'utilise le navigateur pour détermine l'élément cible de l'événement pointeur. Typiquement, il est déterminé en utilisant l'emplacement du pointeur et la disposition visuelle des éléments dans un document d'un media écran.
-
pointeur
-
Une représentation agnostique du périphérique en entrée pouvant cibler des coordonnées sur un écran. Des exemples d'appareils de pointeur sont la souris, le stylet et la contact tactile.
-
capture du pointeur
-
La capture du pointeur permet aux événements d'être redirigé vers un élément particulier autre que le résultat du hit test.
-
événement de pointeur
-
Un {{domxref("PointerEvent","événement")}} DOM déclenché pour un pointeur.
-
- -

Interfaces

- -

L'interface principale est l'interface {{domxref("PointerEvent")}}, qui comprend un {{domxref("PointerEvent.PointerEvent","constructeur")}} ainsi que plusieurs événements. L'API ajoute également quelques extensions aux interfaces {{domxref("Element")}} et {{domxref("Navigator")}}. Les sous-sections suivantes décrivent brièvement chaque interface et propriétés liées.

- -

Interface PointerEvent

- -

L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseEvent")}} et a les propriétés suivantes (toutes sont {{readonlyInline}}).

- - - -

Types d'événements et gestionnaires d'événements globaux

- -

Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (down, up, move, over, out, enter, leave). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EventOn Event HandlerDescription
{{event('pointerover')}}{{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}déclenché quand un pointeur entre à l'intérieur des limites du hit test d'un élément.
{{event('pointerenter')}}{{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}déclenché quand un pointeur entre à l'intérieur des limites du hit test d'un élément ou d'un de ses descendants.
{{event('pointerdown')}}{{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}déclenché quand le pointeur devient actif (que le contact est établit).
{{event('pointermove')}}{{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}déclenché quand les coordonnées du pointeur changent (que le pointeur bouge).
{{event('pointerup')}}{{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}déclenché quand le pointeur n'est plus actif (que le contact est relaché).
{{event('pointercancel')}}{{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}}le navigateur déclenche cet événement s'il détecte que le pointeur ne pourra plus générer d'événement (si l'appareil est désactivé par exemple).
{{event('pointerout')}}{{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}déclenché quand le pointeur n'est plus affecté à l'élément: qu'il sort des limites du hit test de l'élément; qu'il déclenche l'événement pointerup ou pointercancel; que le stylet sort de la zone de l'écran de l'appareil.
{{event('pointerleave')}}{{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}déclenché quand le pointeur sort des limites du hit test de l'élément. Cet événement est également déclenché lorsqu'on utilise un stylet et qu'il sort de la zone détectable par le numériseur.
{{event('gotpointercapture')}}Aucun (voir Extensions d'Elements)déclenché quand un élément reçoit la capture du pointeur.
{{event('lostpointercapture')}}Aucun (voir Extensions d'Element)déclenché quand la capture du pointeur est désactivée.
- -

Extensions d'Element

- -

Il existe quatre extensions à l'interface {{domxref("Element")}}:

- - - -

Extension de Navigator

- -

La propriété {{domxref("Navigator.maxTouchPoints")}} est utilisé pour déterminer le nombre maximum de points de contact pris en charge à n'importe quel moment.

- -

Exemples

- -

Cette section contient des exemples basiques d'utilisation d'interfaces d'événement de pointeur.

- -

Enregistrer des gestionnaires d'événement

- -

This example registers a handler for every event type for the given element.

- -
<html>
-<script>
-function over_handler(event) { }
-function enter_handler(event) { }
-function down_handler(event) { }
-function move_handler(event) { }
-function up_handler(event) { }
-function cancel_handler(event) { }
-function out_handler(event) { }
-function leave_handler(event) { }
-function gotcapture_handler(event) { }
-function lostcapture_handler(event) { }
-
-function init() {
- var el=document.getElementById("target");
- // Register pointer event handlers
- el.onpointerover = over_handler;
- el.onpointerenter = enter_handler;
- el.onpointerdown = down_handler;
- el.onpointermove = move_handler;
- el.onpointerup = up_handler;
- el.onpointercancel = cancel_handler;
- el.onpointerout = out_handler;
- el.onpointerleave = leave_handler;
- el.gotpointercapture = gotcapture_handler;
- el.lostpointercapture = lostcapture_handler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Propriétés des événements

- -

This example illustrates accessing all of a touch event's properties.

- -
<html>
-<script>
-var id = -1;
-
-function process_id(event) {
-  // Process this event based on the event's identifier
-}
-function process_mouse(event) {
-  // Process the mouse pointer event
-}
-function process_pen(event) {
-  // Process the pen pointer event
-}
-function process_touch(event) {
-  // Process the touch pointer event
-}
-function process_tilt(tiltX, tiltY) {
-  // Tilt data handler
-}
-function process_pressure(pressure) {
-  // Pressure handler
-}
-function process_non_primary(event) {
-  // Pressure handler
-}
-
-function down_handler(ev) {
- // Calculate the touch point's contact area
- var area = ev.width * ev.height;
-
- // Compare cached id with this event's id and process accordingly
- if (id == ev.identifier) process_id(ev);
-
- // Call the appropriate pointer type handler
- switch (ev.pointerType) {
-   case "mouse":
-     process_mouse(ev);
-     break;
-   case "pen":
-     process_pen(ev);
-     break;
-   case "touch":
-     process_touch(ev);
-     break;
-   default:
-     console.log("pointerType " + ev.pointerType + " is Not suported");
- }
-
- // Call the tilt handler
- if (ev.tiltX != 0 && ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);
-
- // Call the pressure handler
- process_pressure(ev.pressure);
-
- // If this event is not primary, call the non primary handler
- if (!ev.isPrimary) process_non_primary(evt);
-}
-
-function init() {
- var el=document.getElementById("target");
- // Register pointerdown handler
- el.onpointerdown = down_handler;
-}
-</script>
-<body onload="init();">
- <div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Déterminer le pointeur principal

- -

In some scenarios there may be multiple pointers (for example a device with both a touchscreen and a mouse) or a pointer supports multiple contact points (for example a touchscreen that supports multiple finger touches). The application can use the {{domxref("PointerEvent.isPrimary","isPrimary")}} property to identify a master pointer among the set of active pointers for each pointer type. If an application only wants to support a primary pointer, it can ignore all pointer events that are not primary.

- -

For mouse, there is only one pointer so it will always be the primary pointer. For touch input, a pointer is considered primary if the user touched the screen when there were no other active touches. For pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen.

- -

Déterminer l'état des boutons

- -

Some pointer devices, such as mouse and pen, support multiple buttons and the button presses can be chorded i.e. depressing an additional button while another button on the pointer device is already depressed. To determine the state of button presses, pointer events uses the {{domxref("MouseEvent.button","button")}} and {{domxref("MouseEvent.buttons","buttons")}} properties of the {{domxref("MouseEvent")}} interface (that {{domxref("PointerEvent")}} inherits from). The following table provides the values of button and buttons for the various device button states.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Device Button Statebuttonbuttons
Mouse move with no buttons pressed-10
Left Mouse, Touch Contact, Pen contact (with no modifier buttons pressed)01
Middle Mouse14
Right Mouse, Pen contact with barrel button pressed22
X1 (back) Mouse38
X2 (forward) Mouse416
Pen contact with eraser button pressed532
- -

Capture du pointeur

- -

Pointer capture allows events for a particular {{domxref("PointerEvent","pointer event")}} to be re-targeted to a particular element instead of the normal hit test at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).

- -

The following example shows pointer capture being set on an element.

- -
<html>
-<script>
-function downHandler(ev) {
- var el=document.getElementById("target");
- //Element 'target' will receive/capture further events
- el.setPointerCapture(ev.pointerId);
-}
-function init() {
- var el=document.getElementById("target");
- el.onpointerdown = downHandler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.

- -
<html>
-<script>
-function downHandler(ev) {
- var el=document.getElementById("target");
- // Element "target" will receive/capture further events
- el.setPointerCapture(ev.pointerId);
-}
-function cancelHandler(ev) {
- var el=document.getElementById("target");
- // Release the pointer capture
- el.releasePointerCapture(ev.pointerId);
-}
-function init() {
- var el=document.getElementById("target");
- // Register pointerdown and pointercancel handlers
- el.onpointerdown = downHandler;
- el.onpointercancel = cancelHandler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Propriété touch-action

- -

The {{cssxref("touch-action")}} CSS property is used to specifiy whether or not the browser should apply its default (native) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.

- -

A value of auto means the browser is free to apply its default touch behavior (to the specified region) and the value of none disables the browser's default touch behavior for the region. The values pan-x and pan-y, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value manipulation means the browser may consider touches that begin on the element are only for scrolling and zooming.

- -

In the following example, the browser's default touch behavior is disabled for the div element.

- -
<html>
-<body>
- <div style="touch-action:none;">Can't touch this ... </div>
-</body>
-</html>
-
- -

In the following example, default touch behavior is disabled for some button elements.

- -
button#tiny {
-  touch-action: none;
-}
-
- -

In the following example, when the target element is touched, it will only pan in the horizontal direction.

- -
#target {
-  touch-action: pan-x;
-}
-
- -

Compatibilité avec les événements de souris

- -

Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.

- -

The browser may map generic pointer input to mouse events for compatibility with mouse-based content. This mapping of events is called compatibility mouse events. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:

- - - -

Bonnes pratiques

- -

Here are some best practices to consider when using pointer events:

- - - -

Implémentation et déploiement

- -

The pointer events browser compatibility data indicates pointer event support among desktop and mobile browsers is relatively low, although additional implementations are in progress.

- -

Some new value have been proposed for the {{cssxref("touch-action", "CSS touch-action")}} property as part of Pointer Events Level 2 specification but currently those new values have no implementation support.

- -

Démos and exemples

- - - -

Communauté

- - - -

Sujets et ressources liés

- - diff --git a/files/fr/web/api/pointer_events/index.md b/files/fr/web/api/pointer_events/index.md new file mode 100644 index 0000000000..734d88d9f5 --- /dev/null +++ b/files/fr/web/api/pointer_events/index.md @@ -0,0 +1,433 @@ +--- +title: Événements de pointeur +slug: Web/API/Pointer_events +tags: + - API + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/API/Pointer_events +--- +

{{DefaultAPISidebar("Pointer Events")}}

+ +

La plupart du contenu web d'aujourd'hui suppose que le périphérique de pointage de l'utilisateur sera une souris. Cependant, beaucoup d'appareils prennent en charge d'autres types de d'entrée pour pointeur, comme le stylet ou les doigts pour les écrans tactiles. Des extensions aux modèles d'événement de pointage sont nécessaires et les événements de pointeur répondent à ce besoin.

+ +

Les événements de pointeur sont des événements DOM déclenché pour tout périphérique de pointage. Ils sont conçus pour créer un modèle unique d'événement DOM pour gérer les périphériques de pointage comme la souris, le stylet ou le toucher (avec un ou plusieurs doigts). Un pointeur est agnostique du type de matériel utilisé pour cibler un endroit sur l'écran.

+ +

Avoir un seul modèle pour gérer les événements de pointeur peut simplifier la création de sites web et applications et fournir une bonne expérience utilisateur quelque soit le matériel de l'utilisateur. Toutefois, pour les scénarios dans lesquels une gestion spécifique au périphérique est souhaitée, les événements de pointeur définissent une propriété {{domxref("PointerEvent.pointerType","pointerType")}} qui permet de connaître le type de périphérique ayant déclenché l'événement.

+ +

Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (mousedown/pointerdown, mousemove/pointermove, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur.

+ +

Terminologie

+ +
+
pointeur actif
+
Tout périphérique d'entrée pointeur pouvant produire des événements. Un pointeur est considéré actif s'il peut encore produire des événements. Par exemple, un stylet posé sur l'écran est considéré comme actif puisqu'il peut produire des événements en étant déplacé ou levé.
+
numériseur (digitizer)
+
Un dispositif avec une surface pouvant recevoir et détecter le contact. Le plus souvent, le dispositif est un écran tactile pouvant détecter l'entrée provenant du stylet ou du doigt.
+
hit test
+
Le procédé qu'utilise le navigateur pour détermine l'élément cible de l'événement pointeur. Typiquement, il est déterminé en utilisant l'emplacement du pointeur et la disposition visuelle des éléments dans un document d'un media écran.
+
pointeur
+
Une représentation agnostique du périphérique en entrée pouvant cibler des coordonnées sur un écran. Des exemples d'appareils de pointeur sont la souris, le stylet et la contact tactile.
+
capture du pointeur
+
La capture du pointeur permet aux événements d'être redirigé vers un élément particulier autre que le résultat du hit test.
+
événement de pointeur
+
Un {{domxref("PointerEvent","événement")}} DOM déclenché pour un pointeur.
+
+ +

Interfaces

+ +

L'interface principale est l'interface {{domxref("PointerEvent")}}, qui comprend un {{domxref("PointerEvent.PointerEvent","constructeur")}} ainsi que plusieurs événements. L'API ajoute également quelques extensions aux interfaces {{domxref("Element")}} et {{domxref("Navigator")}}. Les sous-sections suivantes décrivent brièvement chaque interface et propriétés liées.

+ +

Interface PointerEvent

+ +

L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseEvent")}} et a les propriétés suivantes (toutes sont {{readonlyInline}}).

+ + + +

Types d'événements et gestionnaires d'événements globaux

+ +

Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (down, up, move, over, out, enter, leave). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventOn Event HandlerDescription
{{event('pointerover')}}{{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}déclenché quand un pointeur entre à l'intérieur des limites du hit test d'un élément.
{{event('pointerenter')}}{{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}déclenché quand un pointeur entre à l'intérieur des limites du hit test d'un élément ou d'un de ses descendants.
{{event('pointerdown')}}{{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}déclenché quand le pointeur devient actif (que le contact est établit).
{{event('pointermove')}}{{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}déclenché quand les coordonnées du pointeur changent (que le pointeur bouge).
{{event('pointerup')}}{{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}déclenché quand le pointeur n'est plus actif (que le contact est relaché).
{{event('pointercancel')}}{{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}}le navigateur déclenche cet événement s'il détecte que le pointeur ne pourra plus générer d'événement (si l'appareil est désactivé par exemple).
{{event('pointerout')}}{{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}déclenché quand le pointeur n'est plus affecté à l'élément: qu'il sort des limites du hit test de l'élément; qu'il déclenche l'événement pointerup ou pointercancel; que le stylet sort de la zone de l'écran de l'appareil.
{{event('pointerleave')}}{{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}déclenché quand le pointeur sort des limites du hit test de l'élément. Cet événement est également déclenché lorsqu'on utilise un stylet et qu'il sort de la zone détectable par le numériseur.
{{event('gotpointercapture')}}Aucun (voir Extensions d'Elements)déclenché quand un élément reçoit la capture du pointeur.
{{event('lostpointercapture')}}Aucun (voir Extensions d'Element)déclenché quand la capture du pointeur est désactivée.
+ +

Extensions d'Element

+ +

Il existe quatre extensions à l'interface {{domxref("Element")}}:

+ + + +

Extension de Navigator

+ +

La propriété {{domxref("Navigator.maxTouchPoints")}} est utilisé pour déterminer le nombre maximum de points de contact pris en charge à n'importe quel moment.

+ +

Exemples

+ +

Cette section contient des exemples basiques d'utilisation d'interfaces d'événement de pointeur.

+ +

Enregistrer des gestionnaires d'événement

+ +

This example registers a handler for every event type for the given element.

+ +
<html>
+<script>
+function over_handler(event) { }
+function enter_handler(event) { }
+function down_handler(event) { }
+function move_handler(event) { }
+function up_handler(event) { }
+function cancel_handler(event) { }
+function out_handler(event) { }
+function leave_handler(event) { }
+function gotcapture_handler(event) { }
+function lostcapture_handler(event) { }
+
+function init() {
+ var el=document.getElementById("target");
+ // Register pointer event handlers
+ el.onpointerover = over_handler;
+ el.onpointerenter = enter_handler;
+ el.onpointerdown = down_handler;
+ el.onpointermove = move_handler;
+ el.onpointerup = up_handler;
+ el.onpointercancel = cancel_handler;
+ el.onpointerout = out_handler;
+ el.onpointerleave = leave_handler;
+ el.gotpointercapture = gotcapture_handler;
+ el.lostpointercapture = lostcapture_handler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Propriétés des événements

+ +

This example illustrates accessing all of a touch event's properties.

+ +
<html>
+<script>
+var id = -1;
+
+function process_id(event) {
+  // Process this event based on the event's identifier
+}
+function process_mouse(event) {
+  // Process the mouse pointer event
+}
+function process_pen(event) {
+  // Process the pen pointer event
+}
+function process_touch(event) {
+  // Process the touch pointer event
+}
+function process_tilt(tiltX, tiltY) {
+  // Tilt data handler
+}
+function process_pressure(pressure) {
+  // Pressure handler
+}
+function process_non_primary(event) {
+  // Pressure handler
+}
+
+function down_handler(ev) {
+ // Calculate the touch point's contact area
+ var area = ev.width * ev.height;
+
+ // Compare cached id with this event's id and process accordingly
+ if (id == ev.identifier) process_id(ev);
+
+ // Call the appropriate pointer type handler
+ switch (ev.pointerType) {
+   case "mouse":
+     process_mouse(ev);
+     break;
+   case "pen":
+     process_pen(ev);
+     break;
+   case "touch":
+     process_touch(ev);
+     break;
+   default:
+     console.log("pointerType " + ev.pointerType + " is Not suported");
+ }
+
+ // Call the tilt handler
+ if (ev.tiltX != 0 && ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);
+
+ // Call the pressure handler
+ process_pressure(ev.pressure);
+
+ // If this event is not primary, call the non primary handler
+ if (!ev.isPrimary) process_non_primary(evt);
+}
+
+function init() {
+ var el=document.getElementById("target");
+ // Register pointerdown handler
+ el.onpointerdown = down_handler;
+}
+</script>
+<body onload="init();">
+ <div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Déterminer le pointeur principal

+ +

In some scenarios there may be multiple pointers (for example a device with both a touchscreen and a mouse) or a pointer supports multiple contact points (for example a touchscreen that supports multiple finger touches). The application can use the {{domxref("PointerEvent.isPrimary","isPrimary")}} property to identify a master pointer among the set of active pointers for each pointer type. If an application only wants to support a primary pointer, it can ignore all pointer events that are not primary.

+ +

For mouse, there is only one pointer so it will always be the primary pointer. For touch input, a pointer is considered primary if the user touched the screen when there were no other active touches. For pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen.

+ +

Déterminer l'état des boutons

+ +

Some pointer devices, such as mouse and pen, support multiple buttons and the button presses can be chorded i.e. depressing an additional button while another button on the pointer device is already depressed. To determine the state of button presses, pointer events uses the {{domxref("MouseEvent.button","button")}} and {{domxref("MouseEvent.buttons","buttons")}} properties of the {{domxref("MouseEvent")}} interface (that {{domxref("PointerEvent")}} inherits from). The following table provides the values of button and buttons for the various device button states.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Device Button Statebuttonbuttons
Mouse move with no buttons pressed-10
Left Mouse, Touch Contact, Pen contact (with no modifier buttons pressed)01
Middle Mouse14
Right Mouse, Pen contact with barrel button pressed22
X1 (back) Mouse38
X2 (forward) Mouse416
Pen contact with eraser button pressed532
+ +

Capture du pointeur

+ +

Pointer capture allows events for a particular {{domxref("PointerEvent","pointer event")}} to be re-targeted to a particular element instead of the normal hit test at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).

+ +

The following example shows pointer capture being set on an element.

+ +
<html>
+<script>
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ //Element 'target' will receive/capture further events
+ el.setPointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerdown = downHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.

+ +
<html>
+<script>
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ // Element "target" will receive/capture further events
+ el.setPointerCapture(ev.pointerId);
+}
+function cancelHandler(ev) {
+ var el=document.getElementById("target");
+ // Release the pointer capture
+ el.releasePointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ // Register pointerdown and pointercancel handlers
+ el.onpointerdown = downHandler;
+ el.onpointercancel = cancelHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Propriété touch-action

+ +

The {{cssxref("touch-action")}} CSS property is used to specifiy whether or not the browser should apply its default (native) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.

+ +

A value of auto means the browser is free to apply its default touch behavior (to the specified region) and the value of none disables the browser's default touch behavior for the region. The values pan-x and pan-y, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value manipulation means the browser may consider touches that begin on the element are only for scrolling and zooming.

+ +

In the following example, the browser's default touch behavior is disabled for the div element.

+ +
<html>
+<body>
+ <div style="touch-action:none;">Can't touch this ... </div>
+</body>
+</html>
+
+ +

In the following example, default touch behavior is disabled for some button elements.

+ +
button#tiny {
+  touch-action: none;
+}
+
+ +

In the following example, when the target element is touched, it will only pan in the horizontal direction.

+ +
#target {
+  touch-action: pan-x;
+}
+
+ +

Compatibilité avec les événements de souris

+ +

Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.

+ +

The browser may map generic pointer input to mouse events for compatibility with mouse-based content. This mapping of events is called compatibility mouse events. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:

+ + + +

Bonnes pratiques

+ +

Here are some best practices to consider when using pointer events:

+ + + +

Implémentation et déploiement

+ +

The pointer events browser compatibility data indicates pointer event support among desktop and mobile browsers is relatively low, although additional implementations are in progress.

+ +

Some new value have been proposed for the {{cssxref("touch-action", "CSS touch-action")}} property as part of Pointer Events Level 2 specification but currently those new values have no implementation support.

+ +

Démos and exemples

+ + + +

Communauté

+ + + +

Sujets et ressources liés

+ + 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 deleted file mode 100644 index 70a6466883..0000000000 --- a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Gestes pincer et zoomer -slug: Web/API/Pointer_events/Pinch_zoom_gestures -tags: - - Guide - - PointerEvent - - touch -translation_of: Web/API/Pointer_events/Pinch_zoom_gestures -original_slug: Web/API/Pointer_events/gestes_pincer_zoom ---- -

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

- -
-

Note : 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.md b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md new file mode 100644 index 0000000000..70a6466883 --- /dev/null +++ b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md @@ -0,0 +1,223 @@ +--- +title: Gestes pincer et zoomer +slug: Web/API/Pointer_events/Pinch_zoom_gestures +tags: + - Guide + - PointerEvent + - touch +translation_of: Web/API/Pointer_events/Pinch_zoom_gestures +original_slug: Web/API/Pointer_events/gestes_pincer_zoom +--- +

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

+ +
+

Note : 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 deleted file mode 100644 index d5921f5b20..0000000000 --- a/files/fr/web/api/pointer_lock_api/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: Pointer Lock API -slug: Web/API/Pointer_Lock_API -tags: - - API - - Avancé - - Jeux - - Reference - - mouse lock - - pointer lock -translation_of: Web/API/Pointer_Lock_API -original_slug: WebAPI/Pointer_Lock ---- -
{{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 :

- - - -

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:

- -

Un cercle rouge sur un arrière-plan noir.

- -

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

- -

Element.requestPointerLock

- -

{{Compat("api.Element.requestPointerLock")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/pointer_lock_api/index.md b/files/fr/web/api/pointer_lock_api/index.md new file mode 100644 index 0000000000..d5921f5b20 --- /dev/null +++ b/files/fr/web/api/pointer_lock_api/index.md @@ -0,0 +1,259 @@ +--- +title: Pointer Lock API +slug: Web/API/Pointer_Lock_API +tags: + - API + - Avancé + - Jeux + - Reference + - mouse lock + - pointer lock +translation_of: Web/API/Pointer_Lock_API +original_slug: WebAPI/Pointer_Lock +--- +
{{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 :

+ + + +

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:

+ +

Un cercle rouge sur un arrière-plan noir.

+ +

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

+ +

Element.requestPointerLock

+ +

{{Compat("api.Element.requestPointerLock")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/pointerevent/index.html b/files/fr/web/api/pointerevent/index.html deleted file mode 100644 index b17aaefffb..0000000000 --- a/files/fr/web/api/pointerevent/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: PointerEvent -slug: Web/API/PointerEvent -translation_of: Web/API/PointerEvent ---- -

{{ APIRef("Pointer Events") }}

- -

L'interface PointerEvent représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc.

- -

Un pointeur est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran.

- -

Le test de ciblage d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran.

- -

Constructeurs

- -
-
{{domxref("PointerEvent.PointerEvent", "PointerEvent()")}}
-
Crée un PointerEvent synthétique et anonyme.
-
- -

Propriétés

- -

Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxref("Event")}}.

- -
-
{{ domxref('PointerEvent.pointerId')}} {{readonlyInline}}
-
Un identifiant unique pour le pointeur ayant provoqué l'événément.
-
{{ domxref('PointerEvent.width')}} {{readonlyInline}}
-
La largeur (magnitude sur l'axe X), en pixels CSS, de la géométrie de contact du pointeur.
-
{{ domxref('PointerEvent.height')}} {{readonlyInline}}
-
La hauteur (magniture sur l'axe Y), en pixels CSS, de la géométrie de contact du pointeur.
-
{{ domxref('PointerEvent.pressure')}} {{readonlyInline}}
-
La pressure normalisée de l'influx du pointeur dans un intervalle compris entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.
-
{{ domxref('PointerEvent.tangentialPressure')}} {{readonlyInline}}
-
La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.
-
{{ domxref('PointerEvent.tiltX')}} {{readonlyInline}}
-
Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe Y.
-
{{ domxref('PointerEvent.tiltY')}} {{readonlyInline}}
-
Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe X.
-
{{ domxref('PointerEvent.twist')}} {{readonlyInline}}
-
La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359.
-
{{ domxref('PointerEvent.pointerType')}} {{readonlyInline}}
-
Indique le type d'appareil qui a provoqué l'événément (souris, stylet, touché, etc.)
-
{{ domxref('PointerEvent.isPrimary')}} {{readonlyInline}}
-
Indique si le pointeur est le principal appareil de ce type.
-
- -

Methods

- -
-
{{ domxref('PointerEvent.getCoalescedEvents()')}} {{deprecated_inline}}
-
Retourne une séquence de toutes les instances de PointerEvent qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé.
-
- -

Types d'événéments de pointeur

- -

L'interface PointerEvent a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément.

- -
-

Note : Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée.

-
- -
-
{{event('pointerover')}}
-
Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément.
-
{{event('pointerenter')}}
-
Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément ou l'un de ses descendants, ce qui inclut un événément de pointage vers le bas d'un appareil qui ne propose pas de fonctionnalité de survol (voir pointage vers le bas). Ce type d'événément est similaire à un pointage par dessus, mais se différencie en ne faisant pas circuler l'événément.
-
{{event('pointerdown')}}
-
L'événément est déclenché lorsqu'un pointeur devient actif. Pour une souris, il est déclenché lorsque l'appareil passe d'aucun bouton pressé à au moins un bouton pressé. Pour un touché, il est déclenché lorsqu'un contact physique est effectué avec le numériseur. Pour un stylet, il est déclenché au contact de ce dernier avec le numériseur.
-
{{event('pointermove')}}
-
Cet événément est déclenché lorsqu'un pointeur change de coordonnées.
-
{{event('pointerup')}}
-
Cet événement est déclenché lorsqu'un pointeur n'est plus actif.
-
{{event('pointercancel')}}
-
Un navigateur déclenche cet événément s'il conclut que le pointeur ne sera plus capable de générer des événéments (par exemple, l'appareil concerné a été désactivé).
-
{{event('pointerout')}}
-
Cet événément est déclenché pour plusieurs raisons qui incluent : l'appareil de pointage est déplacé en dehors de la zone du test de ciblage d'un élément; déclencher l'événément de pointage vers le haut pour un appareil qui ne supporte pas le survol (voir pointage vers le haut); après avoir déclenché un événément de pointage annulé (voir pointage annulé); lorsqu'un stylet quitte la zone de portée pour être détectée au survol par le numériseur.
-
{{event('pointerleave')}}
-
Cet événément est déclenché lorsqu'un appareil de pointage est déplacé en dehors de la zone de ciblage d'un élément. Pour les appareils avec un stylet, cet événément est déclenché lorsque le stylet quitte la zone de portée pour être détectée au survol par le numériseur.
-
{{event('gotpointercapture')}}
-
Cet événément est déclenché lorsqu'un élément est capturé par un pointeur.
-
{{event('lostpointercapture')}}
-
Cet événément est déclenché après qu'un pointeur ait relâché sa capture.
-
- -

GlobalEventHandlers

- -
-
{{ domxref('GlobalEventHandlers.onpointerover') }}
-
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerover')}}.
-
{{ domxref('GlobalEventHandlers.onpointerenter') }}
-
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerenter')}}.
-
{{ domxref('GlobalEventHandlers.onpointerdown') }}
-
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerdown')}}.
-
{{ domxref('GlobalEventHandlers.onpointermove') }}
-
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointermove')}}.
-
{{ domxref('GlobalEventHandlers.onpointerup') }}
-
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerup')}}.
-
{{ domxref('GlobalEventHandlers.onpointercancel') }}
-
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointercancel')}}.
-
{{ domxref('GlobalEventHandlers.onpointerout') }}
-
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerout')}}.
-
{{ domxref('GlobalEventHandlers.onpointerleave') }}
-
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerleave')}}.
-
- -

Exemple

- -

Un exemple de chaque propriété, type d'événément, et un gestionnaire d'événéments global sont inclus dans leur page respective de référence.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Pointer Events 2','#pointerevent-interface', 'PointerEvent')}}{{Spec2('Pointer Events 2')}}Version non-stable.
{{SpecName('Pointer Events', '#pointerevent-interface', 'PointerEvent')}}{{Spec2('Pointer Events')}}Définition initiale.
- -

Compatibilité navigateurs

- - - -

{{Compat("api.PointerEvent")}}

- -

See also

- - diff --git a/files/fr/web/api/pointerevent/index.md b/files/fr/web/api/pointerevent/index.md new file mode 100644 index 0000000000..b17aaefffb --- /dev/null +++ b/files/fr/web/api/pointerevent/index.md @@ -0,0 +1,146 @@ +--- +title: PointerEvent +slug: Web/API/PointerEvent +translation_of: Web/API/PointerEvent +--- +

{{ APIRef("Pointer Events") }}

+ +

L'interface PointerEvent représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc.

+ +

Un pointeur est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran.

+ +

Le test de ciblage d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran.

+ +

Constructeurs

+ +
+
{{domxref("PointerEvent.PointerEvent", "PointerEvent()")}}
+
Crée un PointerEvent synthétique et anonyme.
+
+ +

Propriétés

+ +

Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxref("Event")}}.

+ +
+
{{ domxref('PointerEvent.pointerId')}} {{readonlyInline}}
+
Un identifiant unique pour le pointeur ayant provoqué l'événément.
+
{{ domxref('PointerEvent.width')}} {{readonlyInline}}
+
La largeur (magnitude sur l'axe X), en pixels CSS, de la géométrie de contact du pointeur.
+
{{ domxref('PointerEvent.height')}} {{readonlyInline}}
+
La hauteur (magniture sur l'axe Y), en pixels CSS, de la géométrie de contact du pointeur.
+
{{ domxref('PointerEvent.pressure')}} {{readonlyInline}}
+
La pressure normalisée de l'influx du pointeur dans un intervalle compris entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.
+
{{ domxref('PointerEvent.tangentialPressure')}} {{readonlyInline}}
+
La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.
+
{{ domxref('PointerEvent.tiltX')}} {{readonlyInline}}
+
Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe Y.
+
{{ domxref('PointerEvent.tiltY')}} {{readonlyInline}}
+
Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe X.
+
{{ domxref('PointerEvent.twist')}} {{readonlyInline}}
+
La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359.
+
{{ domxref('PointerEvent.pointerType')}} {{readonlyInline}}
+
Indique le type d'appareil qui a provoqué l'événément (souris, stylet, touché, etc.)
+
{{ domxref('PointerEvent.isPrimary')}} {{readonlyInline}}
+
Indique si le pointeur est le principal appareil de ce type.
+
+ +

Methods

+ +
+
{{ domxref('PointerEvent.getCoalescedEvents()')}} {{deprecated_inline}}
+
Retourne une séquence de toutes les instances de PointerEvent qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé.
+
+ +

Types d'événéments de pointeur

+ +

L'interface PointerEvent a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément.

+ +
+

Note : Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée.

+
+ +
+
{{event('pointerover')}}
+
Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément.
+
{{event('pointerenter')}}
+
Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément ou l'un de ses descendants, ce qui inclut un événément de pointage vers le bas d'un appareil qui ne propose pas de fonctionnalité de survol (voir pointage vers le bas). Ce type d'événément est similaire à un pointage par dessus, mais se différencie en ne faisant pas circuler l'événément.
+
{{event('pointerdown')}}
+
L'événément est déclenché lorsqu'un pointeur devient actif. Pour une souris, il est déclenché lorsque l'appareil passe d'aucun bouton pressé à au moins un bouton pressé. Pour un touché, il est déclenché lorsqu'un contact physique est effectué avec le numériseur. Pour un stylet, il est déclenché au contact de ce dernier avec le numériseur.
+
{{event('pointermove')}}
+
Cet événément est déclenché lorsqu'un pointeur change de coordonnées.
+
{{event('pointerup')}}
+
Cet événement est déclenché lorsqu'un pointeur n'est plus actif.
+
{{event('pointercancel')}}
+
Un navigateur déclenche cet événément s'il conclut que le pointeur ne sera plus capable de générer des événéments (par exemple, l'appareil concerné a été désactivé).
+
{{event('pointerout')}}
+
Cet événément est déclenché pour plusieurs raisons qui incluent : l'appareil de pointage est déplacé en dehors de la zone du test de ciblage d'un élément; déclencher l'événément de pointage vers le haut pour un appareil qui ne supporte pas le survol (voir pointage vers le haut); après avoir déclenché un événément de pointage annulé (voir pointage annulé); lorsqu'un stylet quitte la zone de portée pour être détectée au survol par le numériseur.
+
{{event('pointerleave')}}
+
Cet événément est déclenché lorsqu'un appareil de pointage est déplacé en dehors de la zone de ciblage d'un élément. Pour les appareils avec un stylet, cet événément est déclenché lorsque le stylet quitte la zone de portée pour être détectée au survol par le numériseur.
+
{{event('gotpointercapture')}}
+
Cet événément est déclenché lorsqu'un élément est capturé par un pointeur.
+
{{event('lostpointercapture')}}
+
Cet événément est déclenché après qu'un pointeur ait relâché sa capture.
+
+ +

GlobalEventHandlers

+ +
+
{{ domxref('GlobalEventHandlers.onpointerover') }}
+
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerover')}}.
+
{{ domxref('GlobalEventHandlers.onpointerenter') }}
+
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerenter')}}.
+
{{ domxref('GlobalEventHandlers.onpointerdown') }}
+
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerdown')}}.
+
{{ domxref('GlobalEventHandlers.onpointermove') }}
+
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointermove')}}.
+
{{ domxref('GlobalEventHandlers.onpointerup') }}
+
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerup')}}.
+
{{ domxref('GlobalEventHandlers.onpointercancel') }}
+
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointercancel')}}.
+
{{ domxref('GlobalEventHandlers.onpointerout') }}
+
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerout')}}.
+
{{ domxref('GlobalEventHandlers.onpointerleave') }}
+
Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerleave')}}.
+
+ +

Exemple

+ +

Un exemple de chaque propriété, type d'événément, et un gestionnaire d'événéments global sont inclus dans leur page respective de référence.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Events 2','#pointerevent-interface', 'PointerEvent')}}{{Spec2('Pointer Events 2')}}Version non-stable.
{{SpecName('Pointer Events', '#pointerevent-interface', 'PointerEvent')}}{{Spec2('Pointer Events')}}Définition initiale.
+ +

Compatibilité navigateurs

+ + + +

{{Compat("api.PointerEvent")}}

+ +

See also

+ + diff --git a/files/fr/web/api/positionoptions/enablehighaccuracy/index.html b/files/fr/web/api/positionoptions/enablehighaccuracy/index.html deleted file mode 100644 index 4a5d069286..0000000000 --- a/files/fr/web/api/positionoptions/enablehighaccuracy/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: PositionOptions.enableHighAccuracy -slug: Web/API/PositionOptions/enableHighAccuracy -translation_of: Web/API/PositionOptions/enableHighAccuracy ---- -
{{securecontext_header}}{{APIRef("Geolocation API")}}
- -

la propriété PositionOptions.enableHighAccuracy est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si true si l'appareil est capable de fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si false (la valeur par défaut), le périphérique peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie.

- -

Syntax

- -
positionOptions.enableHighAccuracy = booleanValue
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#enablehighaccuracy', 'PositionOptions.enableHighAccuracy')}}{{Spec2('Geolocation')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.PositionOptions.enableHighAccuracy")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/positionoptions/enablehighaccuracy/index.md b/files/fr/web/api/positionoptions/enablehighaccuracy/index.md new file mode 100644 index 0000000000..4a5d069286 --- /dev/null +++ b/files/fr/web/api/positionoptions/enablehighaccuracy/index.md @@ -0,0 +1,43 @@ +--- +title: PositionOptions.enableHighAccuracy +slug: Web/API/PositionOptions/enableHighAccuracy +translation_of: Web/API/PositionOptions/enableHighAccuracy +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

la propriété PositionOptions.enableHighAccuracy est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si true si l'appareil est capable de fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si false (la valeur par défaut), le périphérique peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie.

+ +

Syntax

+ +
positionOptions.enableHighAccuracy = booleanValue
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#enablehighaccuracy', 'PositionOptions.enableHighAccuracy')}}{{Spec2('Geolocation')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PositionOptions.enableHighAccuracy")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/positionoptions/index.html b/files/fr/web/api/positionoptions/index.html deleted file mode 100644 index 1922a175be..0000000000 --- a/files/fr/web/api/positionoptions/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: PositionOptions -slug: Web/API/PositionOptions -translation_of: Web/API/PositionOptions ---- -
{{securecontext_header}}{{APIRef("Geolocation API")}}
- -

L'interface PositionOptions décrit un objet, contenant des propriétés, à passer en paramétre de {{domxref("Geolocation.getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()")}}.

- -

Properties

- -

L'interface PositionOptions n'hérite d'aucune propriété.

- -
-
{{domxref("PositionOptions.enableHighAccuracy")}} {{securecontext_inline}}
-
C'est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si la valeur est true et si l'appareil peut fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si la valeur est false, l'appareil peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie. Valeur par défaut: false.
-
{{domxref("PositionOptions.timeout")}} {{securecontext_inline}}
-
C'est une valeur positive de type long représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est Infinity, ce qui signifie que getCurrentPosition() ne retournera pas tant que la position n'est pas disponible.
-
{{domxref("PositionOptions.maximumAge")}} {{securecontext_inline}}
-
C'est une valeur positive de type long l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de retourner. Si initialisé à 0,  cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si initialisé à Infinity l'appareil doit retourner une position mise en cache indépendamment de son âge. Valeur par défaut: 0.
-
- -

Methods

- -

L'interface PositionOptions n'implémente ni n'hérite d'aucune méthode.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}{{Spec2('Geolocation')}}Specification initiale
- -

Browser compatibility

- -

{{Compat("api.PositionOptions")}}

- -

See also

- - diff --git a/files/fr/web/api/positionoptions/index.md b/files/fr/web/api/positionoptions/index.md new file mode 100644 index 0000000000..1922a175be --- /dev/null +++ b/files/fr/web/api/positionoptions/index.md @@ -0,0 +1,55 @@ +--- +title: PositionOptions +slug: Web/API/PositionOptions +translation_of: Web/API/PositionOptions +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

L'interface PositionOptions décrit un objet, contenant des propriétés, à passer en paramétre de {{domxref("Geolocation.getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()")}}.

+ +

Properties

+ +

L'interface PositionOptions n'hérite d'aucune propriété.

+ +
+
{{domxref("PositionOptions.enableHighAccuracy")}} {{securecontext_inline}}
+
C'est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si la valeur est true et si l'appareil peut fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si la valeur est false, l'appareil peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie. Valeur par défaut: false.
+
{{domxref("PositionOptions.timeout")}} {{securecontext_inline}}
+
C'est une valeur positive de type long représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est Infinity, ce qui signifie que getCurrentPosition() ne retournera pas tant que la position n'est pas disponible.
+
{{domxref("PositionOptions.maximumAge")}} {{securecontext_inline}}
+
C'est une valeur positive de type long l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de retourner. Si initialisé à 0,  cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si initialisé à Infinity l'appareil doit retourner une position mise en cache indépendamment de son âge. Valeur par défaut: 0.
+
+ +

Methods

+ +

L'interface PositionOptions n'implémente ni n'hérite d'aucune méthode.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}{{Spec2('Geolocation')}}Specification initiale
+ +

Browser compatibility

+ +

{{Compat("api.PositionOptions")}}

+ +

See also

+ + diff --git a/files/fr/web/api/positionoptions/maximumage/index.html b/files/fr/web/api/positionoptions/maximumage/index.html deleted file mode 100644 index 72314738ca..0000000000 --- a/files/fr/web/api/positionoptions/maximumage/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: PositionOptions.maximumAge -slug: Web/API/PositionOptions/maximumAge -translation_of: Web/API/PositionOptions/maximumAge ---- -
{{securecontext_header}}{{APIRef("Geolocation API")}}
- -

La propriété PositionOptions.maximumAge est de type long positif indiquant l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de renvoyer. Si la valeur est 0, cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si la valeur est Infinity l'appareil doit renvoyer une position mise en cache indépendamment de son âge.

- -

Syntax

- -
positionOptions.maximumAge = timeLength
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#maximumage', 'PositionOptions.maximumAge')}}{{Spec2('Geolocation')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PositionOptions.maximumAge")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/positionoptions/maximumage/index.md b/files/fr/web/api/positionoptions/maximumage/index.md new file mode 100644 index 0000000000..72314738ca --- /dev/null +++ b/files/fr/web/api/positionoptions/maximumage/index.md @@ -0,0 +1,43 @@ +--- +title: PositionOptions.maximumAge +slug: Web/API/PositionOptions/maximumAge +translation_of: Web/API/PositionOptions/maximumAge +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

La propriété PositionOptions.maximumAge est de type long positif indiquant l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de renvoyer. Si la valeur est 0, cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si la valeur est Infinity l'appareil doit renvoyer une position mise en cache indépendamment de son âge.

+ +

Syntax

+ +
positionOptions.maximumAge = timeLength
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Geolocation', '#maximumage', 'PositionOptions.maximumAge')}}{{Spec2('Geolocation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PositionOptions.maximumAge")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/positionoptions/timeout/index.html b/files/fr/web/api/positionoptions/timeout/index.html deleted file mode 100644 index 4454f93754..0000000000 --- a/files/fr/web/api/positionoptions/timeout/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: PositionOptions.timeout -slug: Web/API/PositionOptions/timeout -translation_of: Web/API/PositionOptions/timeout ---- -
{{securecontext_header}}{{APIRef("Geolocation API")}}
- -

La propriété PositionOptions.timeout est de type long positif représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est Infinity, ce qui signifie que getCurrentPosition() ne retournera rien tant que la position n'est pas disponible.

- -

Syntaxe

- -
positionOptions.timeout = timeLength
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Geolocation', '#dom-positionoptions-timeout', 'PositionOptions.timeout')}}{{Spec2('Geolocation')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.PositionOptions.timeout")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/positionoptions/timeout/index.md b/files/fr/web/api/positionoptions/timeout/index.md new file mode 100644 index 0000000000..4454f93754 --- /dev/null +++ b/files/fr/web/api/positionoptions/timeout/index.md @@ -0,0 +1,45 @@ +--- +title: PositionOptions.timeout +slug: Web/API/PositionOptions/timeout +translation_of: Web/API/PositionOptions/timeout +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

La propriété PositionOptions.timeout est de type long positif représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est Infinity, ce qui signifie que getCurrentPosition() ne retournera rien tant que la position n'est pas disponible.

+ +

Syntaxe

+ +
positionOptions.timeout = timeLength
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('Geolocation', '#dom-positionoptions-timeout', 'PositionOptions.timeout')}}{{Spec2('Geolocation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.PositionOptions.timeout")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/processinginstruction/index.html b/files/fr/web/api/processinginstruction/index.html deleted file mode 100644 index 3db3784969..0000000000 --- a/files/fr/web/api/processinginstruction/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: ProcessingInstruction -slug: Web/API/ProcessingInstruction -tags: - - API - - DOM - - Interface - - Noeuds - - Traitement - - XML - - instructions -translation_of: Web/API/ProcessingInstruction ---- -
{{APIRef("DOM")}}
- -

Une instruction de traitement intègre des instructions spécifiques à une application en XML qui peuvent être ignorées par d'autres applications (ne les reconnaissant pas). Même si un processeur XML ignore les instructions de traitement, il leur donnera une place dans le DOM.

- -

Une instruction de traitement est différente de la déclaration XML, qui fournit des informations sur le document telles que le codage des caractères et ne peut apparaître que comme le premier élément d'un document.

- -

Les instructions de traitement définies par l'utilisateur ne peuvent pas commencer par 'xml', car ceux-ci sont réservés (par exemple <?xml-stylesheet ?>).

- -

Les instructions de traitement héritent des méthodes et propriétés de Node.

- -

{{InheritanceDiagram(700,70)}}

- -

Attributs

- - - -

Spécification

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/processinginstruction/index.md b/files/fr/web/api/processinginstruction/index.md new file mode 100644 index 0000000000..3db3784969 --- /dev/null +++ b/files/fr/web/api/processinginstruction/index.md @@ -0,0 +1,43 @@ +--- +title: ProcessingInstruction +slug: Web/API/ProcessingInstruction +tags: + - API + - DOM + - Interface + - Noeuds + - Traitement + - XML + - instructions +translation_of: Web/API/ProcessingInstruction +--- +
{{APIRef("DOM")}}
+ +

Une instruction de traitement intègre des instructions spécifiques à une application en XML qui peuvent être ignorées par d'autres applications (ne les reconnaissant pas). Même si un processeur XML ignore les instructions de traitement, il leur donnera une place dans le DOM.

+ +

Une instruction de traitement est différente de la déclaration XML, qui fournit des informations sur le document telles que le codage des caractères et ne peut apparaître que comme le premier élément d'un document.

+ +

Les instructions de traitement définies par l'utilisateur ne peuvent pas commencer par 'xml', car ceux-ci sont réservés (par exemple <?xml-stylesheet ?>).

+ +

Les instructions de traitement héritent des méthodes et propriétés de Node.

+ +

{{InheritanceDiagram(700,70)}}

+ +

Attributs

+ + + +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/proximity_events/index.html b/files/fr/web/api/proximity_events/index.html deleted file mode 100644 index 5a3d99de1c..0000000000 --- a/files/fr/web/api/proximity_events/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Proximity -slug: Web/API/Proximity_Events -tags: - - WebAPI -translation_of: Web/API/Proximity_Events -original_slug: WebAPI/Proximity ---- -

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

- -

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écificationStatutCommentaire
{{ SpecName('Proximity Events', '', 'Proximity Events') }}{{ Spec2('Proximity Events') }}Spécification initiale
- -

Compatibilité des navigateurs

- -

DeviceProximityEvent

- -

{{Compat("api.DeviceProximityEvent")}}

- -

UserProximityEvent

- -

{{Compat("api.UserProximityEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/proximity_events/index.md b/files/fr/web/api/proximity_events/index.md new file mode 100644 index 0000000000..5a3d99de1c --- /dev/null +++ b/files/fr/web/api/proximity_events/index.md @@ -0,0 +1,70 @@ +--- +title: Proximity +slug: Web/API/Proximity_Events +tags: + - WebAPI +translation_of: Web/API/Proximity_Events +original_slug: WebAPI/Proximity +--- +

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

+ +

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écificationStatutCommentaire
{{ SpecName('Proximity Events', '', 'Proximity Events') }}{{ Spec2('Proximity Events') }}Spécification initiale
+ +

Compatibilité des navigateurs

+ +

DeviceProximityEvent

+ +

{{Compat("api.DeviceProximityEvent")}}

+ +

UserProximityEvent

+ +

{{Compat("api.UserProximityEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/publickeycredential/index.html b/files/fr/web/api/publickeycredential/index.html deleted file mode 100644 index 48fea0a296..0000000000 --- a/files/fr/web/api/publickeycredential/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: PublicKeyCredential -slug: Web/API/PublicKeyCredential -tags: - - API - - Interface - - PublicKeyCredential - - Reference - - Web Authentication API - - WebAuthn -translation_of: Web/API/PublicKeyCredential ---- -

{{APIRef("Web Authentication API")}}{{securecontext_header}}

- -

L'interface PublicKeyCredential fournit des informations relative à la paire constituée par une clé publique et une clé privée. Cette paire constitue une information d'authentification qui permet de se connecter à un service en utilisant un paire de clé asymétrique (permettant de prévenir les attaques par phishing ou liées à des fuites de données).

- -

Cette interface hérite de {{domxref("Credential")}} et a été créée pour l'API Web Authentication qui étend l'API Credential Management.

- -

Les autres interfaces qui héritent de {{domxref("Credential")}} sont :

- - - -

Propriétés

- -
-
{{domxref("PublicKeyCredential.type")}} {{ReadOnlyInline()}}
-
Propriété héritée depuis {{domxref("Credential")}}. Dans le cas de PublicKeyCredentials, cette propriété vaut toujours "public-key".
-
{{domxref("PublicKeyCredential.id")}} {{ReadOnlyInline()}}
-
Propriété héritée depuis {{domxref("Credential")}} et surchargée afin de correspondre à l'encodage en base64url de PublicKeyCredential.rawId.
-
{{domxref("PublicKeyCredential.rawId")}} {{ReadOnlyInline()}}
-
Un objet {{domxref("ArrayBuffer")}} qui contient l'identifiant unique global/universel pour cette instance PublicKeyCredential. Cet identifiant peut être utilisé afin de rechercher les informations d'authentification avec les futurs appels à {{domxref("CredentialsContainer.get")}}.
-
{{domxref("PublicKeyCredential.response")}} {{ReadOnlyInline()}}
-
Une instance {{domxref("AuthenticatorResponse")}}. Cette instance est de type : -
    -
  • {{domxref("AuthenticatorAttestationResponse")}} si l'objet PublicKeyCredential a été créé grâce à un appel à create()
    • -
  • {{domxref("AuthenticatorAssertionResponse")}} si l'objet PublicKeyCredential a été créé grâce à un appel à get().
    • -
-
-
- -

Méthodes

- -
-
{{domxref("PublicKeyCredential.getClientExtensionResults()")}}
-
Si au moins une extension est demandée, cette méthode renverra le résultat du traitement de ces extensions.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.PublicKeyCredential")}}

diff --git a/files/fr/web/api/publickeycredential/index.md b/files/fr/web/api/publickeycredential/index.md new file mode 100644 index 0000000000..48fea0a296 --- /dev/null +++ b/files/fr/web/api/publickeycredential/index.md @@ -0,0 +1,72 @@ +--- +title: PublicKeyCredential +slug: Web/API/PublicKeyCredential +tags: + - API + - Interface + - PublicKeyCredential + - Reference + - Web Authentication API + - WebAuthn +translation_of: Web/API/PublicKeyCredential +--- +

{{APIRef("Web Authentication API")}}{{securecontext_header}}

+ +

L'interface PublicKeyCredential fournit des informations relative à la paire constituée par une clé publique et une clé privée. Cette paire constitue une information d'authentification qui permet de se connecter à un service en utilisant un paire de clé asymétrique (permettant de prévenir les attaques par phishing ou liées à des fuites de données).

+ +

Cette interface hérite de {{domxref("Credential")}} et a été créée pour l'API Web Authentication qui étend l'API Credential Management.

+ +

Les autres interfaces qui héritent de {{domxref("Credential")}} sont :

+ + + +

Propriétés

+ +
+
{{domxref("PublicKeyCredential.type")}} {{ReadOnlyInline()}}
+
Propriété héritée depuis {{domxref("Credential")}}. Dans le cas de PublicKeyCredentials, cette propriété vaut toujours "public-key".
+
{{domxref("PublicKeyCredential.id")}} {{ReadOnlyInline()}}
+
Propriété héritée depuis {{domxref("Credential")}} et surchargée afin de correspondre à l'encodage en base64url de PublicKeyCredential.rawId.
+
{{domxref("PublicKeyCredential.rawId")}} {{ReadOnlyInline()}}
+
Un objet {{domxref("ArrayBuffer")}} qui contient l'identifiant unique global/universel pour cette instance PublicKeyCredential. Cet identifiant peut être utilisé afin de rechercher les informations d'authentification avec les futurs appels à {{domxref("CredentialsContainer.get")}}.
+
{{domxref("PublicKeyCredential.response")}} {{ReadOnlyInline()}}
+
Une instance {{domxref("AuthenticatorResponse")}}. Cette instance est de type : +
    +
  • {{domxref("AuthenticatorAttestationResponse")}} si l'objet PublicKeyCredential a été créé grâce à un appel à create()
    • +
  • {{domxref("AuthenticatorAssertionResponse")}} si l'objet PublicKeyCredential a été créé grâce à un appel à get().
    • +
+
+
+ +

Méthodes

+ +
+
{{domxref("PublicKeyCredential.getClientExtensionResults()")}}
+
Si au moins une extension est demandée, cette méthode renverra le résultat du traitement de ces extensions.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PublicKeyCredential")}}

diff --git a/files/fr/web/api/push_api/index.html b/files/fr/web/api/push_api/index.html deleted file mode 100644 index cb167263e3..0000000000 --- a/files/fr/web/api/push_api/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Push API -slug: Web/API/Push_API -tags: - - API - - Chargement - - Experimental - - Notifications - - Push - - Reference - - Service Workers -translation_of: Web/API/Push_API ---- -
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
- -

L' API Push  donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement [de l'utilisateur] avec du nouveau contenu au moment opportun.

- -
-

Note : Cette documentation couvre les spécifications W3C de l'API Push; si vous recherchez la documentation du système propriétaire de Push de Firefox OS, merci de vous reporter à Simple Push.

-
- -

Concepts et usages de Push

- -
-

Attention : Lors de la mise en œuvre des abonnements PushManager, il est d'une importance vitale de se protéger contre les problèmes de CSRF/XSRF dans votre application. Voir les articles suivants pour plus d'informations :

- - -
- -

Pour qu'une application web puisse recevoir des messages Push, elle doit avoir un service worker actif. Quand le service worker est actif, on peut souscrire aux notifications Push en utilisant {{domxref("PushManager.subscribe()")}}.

- -

L'élément {{domxref("PushSubscription")}} qui en résulte inclut toutes les informations dont l'application a besoin pour transmettre un message Push: un point de terminaison et la clé de chiffrement nécessaire à l'envoi des données.

- -

Le service worker sera démarré, comme nécessaire, pour réceptionner les messages Push, qui sont délivrés au gestionnaire d'évènement {{domxref("ServiceWorkerGlobalScope.onpush")}}. Ceci permet aux applications de réagir au message Push reçu, par exemple en affichant une notification (en utilisant {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

- -

Chaque souscription est unique à un service worker. Le point de terminaison de la souscription est une URL fonctionnelle unique: la connaissance du point de terminaison est tout ce qui est nécessaire pour envoyer un message à votre application. L'URL du point de terminaison doit cependant rester secrète, sinon d'autres applications seront capables d'envoyer des messages Push à votre application.

- -

Activer un service worker pour délivrer un message Push peut accroître l'utilisation des ressources, particulièrement de la batterie. Les différents navigateurs ont des régimes différents pour gèrer ça — Il n'y a pas de mécanisme standard. Firefox permet à un nombre limité (quota) de messages Push d'être envoyé à une application, cependant les messages Push qui générent les notifications sont exempts de cette limite. La limite est rafraichie chaque fois que le site est visité. En comparaison, Chrome n'applique pas de limites mais nécessite que chaque message Push lance une notification pour pouvoir être affiché.

- -
-

Note : Comme pour Gecko 44, le quota de messages Push par application n'est pas incrémenté quand une nouvelle notification se lance et qu'une autre est déjà visible, pendant une période de 3 secondes. Cela permet de gèrer le cas où une rafale de messages Push est reçue et qu'ils n'afficheraient pas tous une notification.

-
- -
-

Note :: Chrome nécessite actuellement de configurer un projet sur Google Cloud Messaging pour envoyer des messages Push et utilise le numero du projet associé ainsi que la clé durant l'envoi des messages Push. Il requiert aussi un manifeste applicatif avec des paramètres spéciaux pour utiliser ce service. Nous espérons que cette restriction sera supprimée dans le futur..

-
- -

Interfaces

- -
-
{{domxref("PushEvent")}}
-
Représente une action push envoyée à l'élément de portée global (global scope) d'un {{domxref("ServiceWorker")}}. Elle contient les informations envoyées depuis l'application à un {{domxref("PushSubscription")}}.
-
{{domxref("PushManager")}}
-
Fournit un moyen de recevoir des notifications de serveurs tiers ainsi que de demander les URL pour les notifications Push. Cette interface remplace les fonctionnalités obsolètes de l'interface {{domxref("PushRegistrationManager")}}.
-
{{domxref("PushMessageData")}}
-
Fournit l'accès pour pousser des données transmises par un serveur et inclut des méthodes pour manipuler les données reçues.
-
{{domxref("PushSubscription")}}
-
Fournit une URL de point de terminaison et permet la désinscription à un service Push.
-
- -

Complément au Service worker

- -

Les ajouts à l'API Service Worker suivants ont été spécifiés dans l'API Push, pour fournir un point d'entrée à l'utilisation de messages Push pour surveiller et répondre aux événements de changement liés aux messages push et aux souscriptions.

- -
-
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
-
Retourne une référence de l'interface {{domxref("PushManager")}} pour gèrer les souscriptions push incluant la souscription, récupèrer une souscription existante, et accèder au statut des permissions push. C'est le point d'entrée dans l'utilisation de la communication push.
-
{{domxref("ServiceWorkerGlobalScope.onpush")}}
-
Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("push")}} se produit ; c'est à chaque fois qu'un message push du serveur est reçu.
-
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
-
Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("pushsubscriptionchange")}} se produit; par exemple, quand une souscription push a été invalidée, ou va être invalidée (c.à.d. quand un service push définit une durée d'expiration).
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Push API")}}{{Spec2("Push API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

PushEvent

- -

{{Compat("api.PushEvent")}}

- -

PushMessageData

- -

{{Compat("api.PushMessageData")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/push_api/index.md b/files/fr/web/api/push_api/index.md new file mode 100644 index 0000000000..cb167263e3 --- /dev/null +++ b/files/fr/web/api/push_api/index.md @@ -0,0 +1,111 @@ +--- +title: Push API +slug: Web/API/Push_API +tags: + - API + - Chargement + - Experimental + - Notifications + - Push + - Reference + - Service Workers +translation_of: Web/API/Push_API +--- +
{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
+ +

L' API Push  donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement [de l'utilisateur] avec du nouveau contenu au moment opportun.

+ +
+

Note : Cette documentation couvre les spécifications W3C de l'API Push; si vous recherchez la documentation du système propriétaire de Push de Firefox OS, merci de vous reporter à Simple Push.

+
+ +

Concepts et usages de Push

+ +
+

Attention : Lors de la mise en œuvre des abonnements PushManager, il est d'une importance vitale de se protéger contre les problèmes de CSRF/XSRF dans votre application. Voir les articles suivants pour plus d'informations :

+ + +
+ +

Pour qu'une application web puisse recevoir des messages Push, elle doit avoir un service worker actif. Quand le service worker est actif, on peut souscrire aux notifications Push en utilisant {{domxref("PushManager.subscribe()")}}.

+ +

L'élément {{domxref("PushSubscription")}} qui en résulte inclut toutes les informations dont l'application a besoin pour transmettre un message Push: un point de terminaison et la clé de chiffrement nécessaire à l'envoi des données.

+ +

Le service worker sera démarré, comme nécessaire, pour réceptionner les messages Push, qui sont délivrés au gestionnaire d'évènement {{domxref("ServiceWorkerGlobalScope.onpush")}}. Ceci permet aux applications de réagir au message Push reçu, par exemple en affichant une notification (en utilisant {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

+ +

Chaque souscription est unique à un service worker. Le point de terminaison de la souscription est une URL fonctionnelle unique: la connaissance du point de terminaison est tout ce qui est nécessaire pour envoyer un message à votre application. L'URL du point de terminaison doit cependant rester secrète, sinon d'autres applications seront capables d'envoyer des messages Push à votre application.

+ +

Activer un service worker pour délivrer un message Push peut accroître l'utilisation des ressources, particulièrement de la batterie. Les différents navigateurs ont des régimes différents pour gèrer ça — Il n'y a pas de mécanisme standard. Firefox permet à un nombre limité (quota) de messages Push d'être envoyé à une application, cependant les messages Push qui générent les notifications sont exempts de cette limite. La limite est rafraichie chaque fois que le site est visité. En comparaison, Chrome n'applique pas de limites mais nécessite que chaque message Push lance une notification pour pouvoir être affiché.

+ +
+

Note : Comme pour Gecko 44, le quota de messages Push par application n'est pas incrémenté quand une nouvelle notification se lance et qu'une autre est déjà visible, pendant une période de 3 secondes. Cela permet de gèrer le cas où une rafale de messages Push est reçue et qu'ils n'afficheraient pas tous une notification.

+
+ +
+

Note :: Chrome nécessite actuellement de configurer un projet sur Google Cloud Messaging pour envoyer des messages Push et utilise le numero du projet associé ainsi que la clé durant l'envoi des messages Push. Il requiert aussi un manifeste applicatif avec des paramètres spéciaux pour utiliser ce service. Nous espérons que cette restriction sera supprimée dans le futur..

+
+ +

Interfaces

+ +
+
{{domxref("PushEvent")}}
+
Représente une action push envoyée à l'élément de portée global (global scope) d'un {{domxref("ServiceWorker")}}. Elle contient les informations envoyées depuis l'application à un {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Fournit un moyen de recevoir des notifications de serveurs tiers ainsi que de demander les URL pour les notifications Push. Cette interface remplace les fonctionnalités obsolètes de l'interface {{domxref("PushRegistrationManager")}}.
+
{{domxref("PushMessageData")}}
+
Fournit l'accès pour pousser des données transmises par un serveur et inclut des méthodes pour manipuler les données reçues.
+
{{domxref("PushSubscription")}}
+
Fournit une URL de point de terminaison et permet la désinscription à un service Push.
+
+ +

Complément au Service worker

+ +

Les ajouts à l'API Service Worker suivants ont été spécifiés dans l'API Push, pour fournir un point d'entrée à l'utilisation de messages Push pour surveiller et répondre aux événements de changement liés aux messages push et aux souscriptions.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Retourne une référence de l'interface {{domxref("PushManager")}} pour gèrer les souscriptions push incluant la souscription, récupèrer une souscription existante, et accèder au statut des permissions push. C'est le point d'entrée dans l'utilisation de la communication push.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("push")}} se produit ; c'est à chaque fois qu'un message push du serveur est reçu.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("pushsubscriptionchange")}} se produit; par exemple, quand une souscription push a été invalidée, ou va être invalidée (c.à.d. quand un service push définit une durée d'expiration).
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Push API")}}{{Spec2("Push API")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

PushEvent

+ +

{{Compat("api.PushEvent")}}

+ +

PushMessageData

+ +

{{Compat("api.PushMessageData")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/pushevent/index.html b/files/fr/web/api/pushevent/index.html deleted file mode 100644 index 58b2e0e31f..0000000000 --- a/files/fr/web/api/pushevent/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: PushEvent -slug: Web/API/PushEvent -tags: - - API - - ExtendableEvent - - Interface - - Push - - Push API - - Reference - - Service Workers - - Workers - - hors-ligne -translation_of: Web/API/PushEvent ---- -

{{APIRef("Push API")}}{{SeeCompatTable()}}

- -

L'interface PushEvent de l'API Push représente un message Push qui a été reçu. Cet événement est envoyé au scope global d'un {{domxref("ServiceWorker")}}. Il contient les informations transmises de l'application serveur vers un {{domxref("PushSubscription")}}.

- -

Constructeur

- -
-
{{domxref("PushEvent.PushEvent()")}}
-
Créer un nouvel objet PushEvent.
-
- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("ExtendableEvent")}}. Propriétés additionnelles:

- -
-
{{domxref("PushEvent.data")}} {{readonlyinline}}
-
Retourne une référence à un objet {{domxref("PushMessageData")}} contenant les données transmises au {{domxref("PushSubscription")}}.
-
- -

Méthodes

- -

Hérite des méthodes de son parent, {{domxref("ExtendableEvent")}}.

- -

Exemples

- -

L'exemple suivant prends les données du PushEvent et les affiche sur tous les clients du service worker.

- -
self.addEventListener('push', function(event) {
-  if (!(self.Notification && self.notification.permission === 'granted')) {
-    return;
-  }
-
-  var data = {};
-  if (event.data) {
-    data = event.data.json();
-  }
-  var title = data.title || "Something Has Happened";
-  var message = data.message || "Here's something you might want to check out.";
-  var icon = "images/new-notification.png";
-
-  var notification = new Notification(title, {
-    body: message,
-    tag: 'simple-push-demo-notification',
-    icon: icon
-  });
-
-  notification.addEventListener('click', function() {
-    if (clients.openWindow) {
-      clients.openWindow('https://example.blog.com/2015/03/04/something-new.html');
-    }
-  });
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Push API','#the-push-event','PushEvent')}}{{Spec2('Push API')}}Définition intiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.PushEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/pushevent/index.md b/files/fr/web/api/pushevent/index.md new file mode 100644 index 0000000000..58b2e0e31f --- /dev/null +++ b/files/fr/web/api/pushevent/index.md @@ -0,0 +1,98 @@ +--- +title: PushEvent +slug: Web/API/PushEvent +tags: + - API + - ExtendableEvent + - Interface + - Push + - Push API + - Reference + - Service Workers + - Workers + - hors-ligne +translation_of: Web/API/PushEvent +--- +

{{APIRef("Push API")}}{{SeeCompatTable()}}

+ +

L'interface PushEvent de l'API Push représente un message Push qui a été reçu. Cet événement est envoyé au scope global d'un {{domxref("ServiceWorker")}}. Il contient les informations transmises de l'application serveur vers un {{domxref("PushSubscription")}}.

+ +

Constructeur

+ +
+
{{domxref("PushEvent.PushEvent()")}}
+
Créer un nouvel objet PushEvent.
+
+ +

Propriétés

+ +

Hérite des propriétés de son parent, {{domxref("ExtendableEvent")}}. Propriétés additionnelles:

+ +
+
{{domxref("PushEvent.data")}} {{readonlyinline}}
+
Retourne une référence à un objet {{domxref("PushMessageData")}} contenant les données transmises au {{domxref("PushSubscription")}}.
+
+ +

Méthodes

+ +

Hérite des méthodes de son parent, {{domxref("ExtendableEvent")}}.

+ +

Exemples

+ +

L'exemple suivant prends les données du PushEvent et les affiche sur tous les clients du service worker.

+ +
self.addEventListener('push', function(event) {
+  if (!(self.Notification && self.notification.permission === 'granted')) {
+    return;
+  }
+
+  var data = {};
+  if (event.data) {
+    data = event.data.json();
+  }
+  var title = data.title || "Something Has Happened";
+  var message = data.message || "Here's something you might want to check out.";
+  var icon = "images/new-notification.png";
+
+  var notification = new Notification(title, {
+    body: message,
+    tag: 'simple-push-demo-notification',
+    icon: icon
+  });
+
+  notification.addEventListener('click', function() {
+    if (clients.openWindow) {
+      clients.openWindow('https://example.blog.com/2015/03/04/something-new.html');
+    }
+  });
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Push API','#the-push-event','PushEvent')}}{{Spec2('Push API')}}Définition intiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PushEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/queuemicrotask/index.html b/files/fr/web/api/queuemicrotask/index.html deleted file mode 100644 index 043382a45d..0000000000 --- a/files/fr/web/api/queuemicrotask/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.queueMicrotask() -slug: Web/API/queueMicrotask -tags: - - API - - Asynchrone - - HTML DOM - - Intervales - - JavaScript - - Micro-tâche - - Microtask - - Minuteurs - - Méthode - - Performance - - ServiceWorker - - SharedWorker - - Tâches - - Window - - WindowOrWorkerGlobalScope - - Worker - - queueMicrotask - - setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask -original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask ---- -
{{APIRef("HTML DOM")}}
- -

La méthode queueMicrotask(), qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur.

- -

La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur.

- -

Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre microtask guide.

- -

L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir Using microtasks in JavaScript with queueMicrotask() pour plus de détails.

- -

Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu.

- -

queueMicrotask() est exposé dans la mixin {{domxref("WindowOrWorkerGlobalScope")}}.

- -

Syntaxe

- -
scope.queueMicrotask(function);
-
- -

Paramètres

- -
-
function
-
Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur.
-
- -

Valeur de retour

- -

undefined.

- -

Exemples

- -
self.queueMicrotask(() => {
-  // function contents here
-})
- -

Tiré de la spécification de queueMicrotask :

- -
MyElement.prototype.loadData = function (url) {
-  if (this._cache[url]) {
-    queueMicrotask(() => {
-      this._setData(this._cache[url]);
-      this.dispatchEvent(new Event("load"));
-    });
-  } else {
-    fetch(url).then(res => res.arrayBuffer()).then(data => {
-      this._cache[url] = data;
-      this._setData(data);
-      this.dispatchEvent(new Event("load"));
-    });
-  }
-};
- -

Lorsque queueMicrotask() n'est pas disponible

- -

Le code ci-dessous est une prothèse d'émulation (polyfill) pour queueMicrotask(). Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée.

- -
if (typeof window.queueMicrotask !== "function") {
-  window.queueMicrotask = function (callback) {
-    Promise.resolve()
-      .then(callback)
-      .catch(e => setTimeout(() => { throw e; }));
-  };
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}}{{Spec2("HTML WHATWG")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/queuemicrotask/index.md b/files/fr/web/api/queuemicrotask/index.md new file mode 100644 index 0000000000..043382a45d --- /dev/null +++ b/files/fr/web/api/queuemicrotask/index.md @@ -0,0 +1,120 @@ +--- +title: WindowOrWorkerGlobalScope.queueMicrotask() +slug: Web/API/queueMicrotask +tags: + - API + - Asynchrone + - HTML DOM + - Intervales + - JavaScript + - Micro-tâche + - Microtask + - Minuteurs + - Méthode + - Performance + - ServiceWorker + - SharedWorker + - Tâches + - Window + - WindowOrWorkerGlobalScope + - Worker + - queueMicrotask + - setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask +original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask +--- +
{{APIRef("HTML DOM")}}
+ +

La méthode queueMicrotask(), qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur.

+ +

La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur.

+ +

Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre microtask guide.

+ +

L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir Using microtasks in JavaScript with queueMicrotask() pour plus de détails.

+ +

Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu.

+ +

queueMicrotask() est exposé dans la mixin {{domxref("WindowOrWorkerGlobalScope")}}.

+ +

Syntaxe

+ +
scope.queueMicrotask(function);
+
+ +

Paramètres

+ +
+
function
+
Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur.
+
+ +

Valeur de retour

+ +

undefined.

+ +

Exemples

+ +
self.queueMicrotask(() => {
+  // function contents here
+})
+ +

Tiré de la spécification de queueMicrotask :

+ +
MyElement.prototype.loadData = function (url) {
+  if (this._cache[url]) {
+    queueMicrotask(() => {
+      this._setData(this._cache[url]);
+      this.dispatchEvent(new Event("load"));
+    });
+  } else {
+    fetch(url).then(res => res.arrayBuffer()).then(data => {
+      this._cache[url] = data;
+      this._setData(data);
+      this.dispatchEvent(new Event("load"));
+    });
+  }
+};
+ +

Lorsque queueMicrotask() n'est pas disponible

+ +

Le code ci-dessous est une prothèse d'émulation (polyfill) pour queueMicrotask(). Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée.

+ +
if (typeof window.queueMicrotask !== "function") {
+  window.queueMicrotask = function (callback) {
+    Promise.resolve()
+      .then(callback)
+      .catch(e => setTimeout(() => { throw e; }));
+  };
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}}{{Spec2("HTML WHATWG")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/range/createcontextualfragment/index.html b/files/fr/web/api/range/createcontextualfragment/index.html deleted file mode 100644 index 6f9342d87d..0000000000 --- a/files/fr/web/api/range/createcontextualfragment/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Range.createContextualFragment() -slug: Web/API/Range/createContextualFragment -translation_of: Web/API/Range/createContextualFragment ---- -

La méthode Range.createContextualFragment() retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du range (le parent du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le range appartient à un Document dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être html, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec body pour contexte à la place.

- -

Syntaxe

- -
documentFragment = range.createContextualFragment( chaineHTML )
-
- -

Paramètres

- -
-
chaineHTML
-
Une chaîne contenant du texte et des balises à convertir en un fragment de document.
-
- -

Exemple

- -
var chaineHTML = "<div>Je suis un nœud div<div>";
-var range = document.createRange();
-// fait que le parent de la première div du document devient le nœud de contexte
-range.selectNode(document.getElementsByTagName("div").item(0));
-var documentFragment = range.createContextualFragment(chaineHTML);
-document.body.appendChild(documentFragment);
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#idl-def-range-createcontextualfragment(domstring)', 'Range.createContextualFragment()')}}{{Spec2('DOM Parsing')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Range.createContextualFragment")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/range/createcontextualfragment/index.md b/files/fr/web/api/range/createcontextualfragment/index.md new file mode 100644 index 0000000000..6f9342d87d --- /dev/null +++ b/files/fr/web/api/range/createcontextualfragment/index.md @@ -0,0 +1,57 @@ +--- +title: Range.createContextualFragment() +slug: Web/API/Range/createContextualFragment +translation_of: Web/API/Range/createContextualFragment +--- +

La méthode Range.createContextualFragment() retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du range (le parent du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le range appartient à un Document dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être html, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec body pour contexte à la place.

+ +

Syntaxe

+ +
documentFragment = range.createContextualFragment( chaineHTML )
+
+ +

Paramètres

+ +
+
chaineHTML
+
Une chaîne contenant du texte et des balises à convertir en un fragment de document.
+
+ +

Exemple

+ +
var chaineHTML = "<div>Je suis un nœud div<div>";
+var range = document.createRange();
+// fait que le parent de la première div du document devient le nœud de contexte
+range.selectNode(document.getElementsByTagName("div").item(0));
+var documentFragment = range.createContextualFragment(chaineHTML);
+document.body.appendChild(documentFragment);
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#idl-def-range-createcontextualfragment(domstring)', 'Range.createContextualFragment()')}}{{Spec2('DOM Parsing')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Range.createContextualFragment")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/range/detach/index.html b/files/fr/web/api/range/detach/index.html deleted file mode 100644 index b1b68cd16d..0000000000 --- a/files/fr/web/api/range/detach/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Range.detach() -slug: Web/API/Range/detach -translation_of: Web/API/Range/detach ---- -

{{ApiRef("DOM")}}

- -

La méthode Range.detach() n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités.

- -

Syntaxe

- -
range.detach();
-
- -

Exemple

- -
var range = document.createRange();
-
-range.selectNode(document.getElementsByTagName("div").item(0));
-range.detach();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatusCommentaires
{{SpecName('DOM WHATWG', '#dom-range-detach', 'Range.detach()')}}{{Spec2('DOM WHATWG')}}Aucun changement.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-detach', 'Range.detach()')}}{{Spec2('DOM2 Traversal_Range')}}Spécification initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Range.detach")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/range/detach/index.md b/files/fr/web/api/range/detach/index.md new file mode 100644 index 0000000000..b1b68cd16d --- /dev/null +++ b/files/fr/web/api/range/detach/index.md @@ -0,0 +1,55 @@ +--- +title: Range.detach() +slug: Web/API/Range/detach +translation_of: Web/API/Range/detach +--- +

{{ApiRef("DOM")}}

+ +

La méthode Range.detach() n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités.

+ +

Syntaxe

+ +
range.detach();
+
+ +

Exemple

+ +
var range = document.createRange();
+
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.detach();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaires
{{SpecName('DOM WHATWG', '#dom-range-detach', 'Range.detach()')}}{{Spec2('DOM WHATWG')}}Aucun changement.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-detach', 'Range.detach()')}}{{Spec2('DOM2 Traversal_Range')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Range.detach")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/range/extractcontents/index.html b/files/fr/web/api/range/extractcontents/index.html deleted file mode 100644 index dd0d7a672d..0000000000 --- a/files/fr/web/api/range/extractcontents/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Range.extractContents() -slug: Web/API/Range/extractContents -translation_of: Web/API/Range/extractContents ---- -

{{ApiRef("DOM")}}

- -

La méthode Range.extractContents() déplace le contenu du {{ domxref("Range") }} depuis l’arbre du document dans un {{ domxref("DocumentFragment") }}.

- -

Les gestionnaires d’évènements ajoutés en utilisant les méthodes du DOM ne sont pas conservés lors de l’extraction. les attributs HTML d’évènements sont conservés ou dupliqués comme ils le seraient avec la méthode {{domxref("Node.cloneNode()")}}. Les attributs HTML id sont également clonés, ce qui peut mener à un document invalide si un nœud partiellement sélectionné est extrait et ajouté au document.

- -

Les nœuds partiellement sélectionnés sont clonés pour inclure les balises parentes nécessaires pour rendre le fragment de document valide.

- -

Syntaxe

- -
documentFragment = range.extractContents();
-
- -

Exemples

- -
var range = document.createRange();
-range.selectNode(document.getElementsByTagName("div").item(0));
-var documentFragment = range.extractContents();
-document.body.appendChild(documentFragment);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-range-extractcontents', 'Range.extractContents()')}}{{Spec2('DOM WHATWG')}}Pas de changement.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-extractContents', 'Range.extractContents()')}}{{Spec2('DOM2 Traversal_Range')}}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Range.extractContents")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/range/extractcontents/index.md b/files/fr/web/api/range/extractcontents/index.md new file mode 100644 index 0000000000..dd0d7a672d --- /dev/null +++ b/files/fr/web/api/range/extractcontents/index.md @@ -0,0 +1,57 @@ +--- +title: Range.extractContents() +slug: Web/API/Range/extractContents +translation_of: Web/API/Range/extractContents +--- +

{{ApiRef("DOM")}}

+ +

La méthode Range.extractContents() déplace le contenu du {{ domxref("Range") }} depuis l’arbre du document dans un {{ domxref("DocumentFragment") }}.

+ +

Les gestionnaires d’évènements ajoutés en utilisant les méthodes du DOM ne sont pas conservés lors de l’extraction. les attributs HTML d’évènements sont conservés ou dupliqués comme ils le seraient avec la méthode {{domxref("Node.cloneNode()")}}. Les attributs HTML id sont également clonés, ce qui peut mener à un document invalide si un nœud partiellement sélectionné est extrait et ajouté au document.

+ +

Les nœuds partiellement sélectionnés sont clonés pour inclure les balises parentes nécessaires pour rendre le fragment de document valide.

+ +

Syntaxe

+ +
documentFragment = range.extractContents();
+
+ +

Exemples

+ +
var range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+var documentFragment = range.extractContents();
+document.body.appendChild(documentFragment);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-range-extractcontents', 'Range.extractContents()')}}{{Spec2('DOM WHATWG')}}Pas de changement.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-extractContents', 'Range.extractContents()')}}{{Spec2('DOM2 Traversal_Range')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Range.extractContents")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/range/index.html b/files/fr/web/api/range/index.html deleted file mode 100644 index a17b45d829..0000000000 --- a/files/fr/web/api/range/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: range -slug: Web/API/Range -translation_of: Web/API/Range ---- -

{{ ApiRef() }}

- -

Introduction

- -

L'objet Range (littéralement : "étendue" ou "portée", ici : "segment") représente un fragment de document qui peut contenir des nœuds et des parties de nœuds texte dans un document donné.

- -

Un segment peut être crée en utilisant la méthode createRange de l'objet document. Les objets range peuvent également être récupérés en utilisant la méthode getRangeAt de l'objet selection.

- -

Propriétés

- -
-
collapsed
-
Renvoie un booléen indiquant si le point de départ et le point final du segment sont confondus.
-
commonAncestorContainer
-
Renvoie le nœud le plus profond qui contient à la fois les nœuds startContainer et endContainer.
-
endContainer
-
Renvoie le nœud dans lequel le segment se termine.
-
endOffset
-
Renvoie un nombre représentant l'endroit où le segment se termine dans endContainer.
-
startContainer
-
Renvoie le nœud dans lequel le segment débute.
-
startOffset
-
Renvoie un nombre représentant l'endroit où le segment débute dans startContainer.
-
- -

Méthodes

- -

Méthodes de positionnement

- -

Ces méthodes permettent de définir le début et la fin d'un segment.

- -
-
setStart
-
Définit le point de départ d'un segment.
-
setEnd
-
Définit le point final d'un segment.
-
setStartBefore
-
Définit le point de départ d'un segment relativement à un autre nœud.
-
setStartAfter
-
Définit le point de départ d'un segment relativement à un autre nœud.
-
setEndBefore
-
Définit le point final d'un segment relativement à un autre nœud.
-
setEndAfter
-
Définit le point final d'un segment relativement à un autre nœud.
-
selectNode
-
Le contenu du segment devient le nœud et son contenu.
-
selectNodeContents
-
le contenu du segment devient le contenu du nœud.
-
collapse
-
Replie le segment sur l'un de ses points frontières.
-
- -

Méthodes de modification

- -

Ces méthodes recupèrent les nœuds d'un segment et modifient le contenu d'un segment.

- -
-
cloneContents
-
Renvoie un fragment de document où sont copiés les nœuds d'un segment.
-
deleteContents
-
Supprime du document le contenu d'un segment.
-
extractContents
-
Déplace le contenu d'un segment, de l'arbre du document vers un fragment de document.
-
insertNode
-
Insère un nœud au début d'un segment.
-
surroundContents
-
Déplace le contenu d'un segment dans un nouveau nœud.
-
- -

Autres méthodes

- -
-
compareBoundaryPoints
-
Compare les points frontières de deux segments.
-
cloneRange
-
Renvoie un objet Range avec des points frontières identiques à ceux du segment cloné.
-
detach
-
Supprime le segment afin d'améliorer la performance.
-
toString
-
Renvoie le texte du segment.
-
- -

Les méthodes Gecko

- -

Cette section décrit les méthodes de range qui sont particulières à Mozilla et ne font pas partie des spécifications DOM W3C.

- -
-
compareNode {{ Obsolete_inline() }}
-
Renvoie une constante qui indique si le nœud est avant, après, dans ou englobe le segment.
-
comparePoint
-
Renvoie -1, 0, ou 1, indiquant si le point se trouve avant, après, ou dans le segment.
-
createContextualFragment
-
Renvoie un fragment de document créé à partir d'un morceau de code donné.
-
intersectsNode {{ Obsolete_inline() }}
-
Renvoie un booléen indiquant si un nœud donné a une intersection avec le segment.
-
isPointInRange
-
Renvoie un booléen indiquant si le point donné est dans le segment.
-
\ No newline at end of file diff --git a/files/fr/web/api/range/index.md b/files/fr/web/api/range/index.md new file mode 100644 index 0000000000..a17b45d829 --- /dev/null +++ b/files/fr/web/api/range/index.md @@ -0,0 +1,103 @@ +--- +title: range +slug: Web/API/Range +translation_of: Web/API/Range +--- +

{{ ApiRef() }}

+ +

Introduction

+ +

L'objet Range (littéralement : "étendue" ou "portée", ici : "segment") représente un fragment de document qui peut contenir des nœuds et des parties de nœuds texte dans un document donné.

+ +

Un segment peut être crée en utilisant la méthode createRange de l'objet document. Les objets range peuvent également être récupérés en utilisant la méthode getRangeAt de l'objet selection.

+ +

Propriétés

+ +
+
collapsed
+
Renvoie un booléen indiquant si le point de départ et le point final du segment sont confondus.
+
commonAncestorContainer
+
Renvoie le nœud le plus profond qui contient à la fois les nœuds startContainer et endContainer.
+
endContainer
+
Renvoie le nœud dans lequel le segment se termine.
+
endOffset
+
Renvoie un nombre représentant l'endroit où le segment se termine dans endContainer.
+
startContainer
+
Renvoie le nœud dans lequel le segment débute.
+
startOffset
+
Renvoie un nombre représentant l'endroit où le segment débute dans startContainer.
+
+ +

Méthodes

+ +

Méthodes de positionnement

+ +

Ces méthodes permettent de définir le début et la fin d'un segment.

+ +
+
setStart
+
Définit le point de départ d'un segment.
+
setEnd
+
Définit le point final d'un segment.
+
setStartBefore
+
Définit le point de départ d'un segment relativement à un autre nœud.
+
setStartAfter
+
Définit le point de départ d'un segment relativement à un autre nœud.
+
setEndBefore
+
Définit le point final d'un segment relativement à un autre nœud.
+
setEndAfter
+
Définit le point final d'un segment relativement à un autre nœud.
+
selectNode
+
Le contenu du segment devient le nœud et son contenu.
+
selectNodeContents
+
le contenu du segment devient le contenu du nœud.
+
collapse
+
Replie le segment sur l'un de ses points frontières.
+
+ +

Méthodes de modification

+ +

Ces méthodes recupèrent les nœuds d'un segment et modifient le contenu d'un segment.

+ +
+
cloneContents
+
Renvoie un fragment de document où sont copiés les nœuds d'un segment.
+
deleteContents
+
Supprime du document le contenu d'un segment.
+
extractContents
+
Déplace le contenu d'un segment, de l'arbre du document vers un fragment de document.
+
insertNode
+
Insère un nœud au début d'un segment.
+
surroundContents
+
Déplace le contenu d'un segment dans un nouveau nœud.
+
+ +

Autres méthodes

+ +
+
compareBoundaryPoints
+
Compare les points frontières de deux segments.
+
cloneRange
+
Renvoie un objet Range avec des points frontières identiques à ceux du segment cloné.
+
detach
+
Supprime le segment afin d'améliorer la performance.
+
toString
+
Renvoie le texte du segment.
+
+ +

Les méthodes Gecko

+ +

Cette section décrit les méthodes de range qui sont particulières à Mozilla et ne font pas partie des spécifications DOM W3C.

+ +
+
compareNode {{ Obsolete_inline() }}
+
Renvoie une constante qui indique si le nœud est avant, après, dans ou englobe le segment.
+
comparePoint
+
Renvoie -1, 0, ou 1, indiquant si le point se trouve avant, après, ou dans le segment.
+
createContextualFragment
+
Renvoie un fragment de document créé à partir d'un morceau de code donné.
+
intersectsNode {{ Obsolete_inline() }}
+
Renvoie un booléen indiquant si un nœud donné a une intersection avec le segment.
+
isPointInRange
+
Renvoie un booléen indiquant si le point donné est dans le segment.
+
\ No newline at end of file diff --git a/files/fr/web/api/range/insertnode/index.html b/files/fr/web/api/range/insertnode/index.html deleted file mode 100644 index bfbe3dc9df..0000000000 --- a/files/fr/web/api/range/insertnode/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Range.insertNode() -slug: Web/API/Range/insertNode -translation_of: Web/API/Range/insertNode ---- -
{{ApiRef("DOM")}}
- -

La méthode Range.insertNode() insère un nœud au début du {{domxref("Range")}}.

- -

Le nouveau nœud est inséré au point de départ du Range. Si le nouveau nœud est sur le point d’être ajouté à un {{domxref("Node")}} texte, ce Node est coupé en deux au point d’insertion, et l’insertion se fait entre les deux nœuds texte.

- -

Si le nouveau nœud est un fragment de document, les enfants du fragment sont insérés à la place.

- -

Syntaxe

- -
range.insertNode(newNode);
-
- -

Paramètres

- -
-
newNode
-
Le {{domxref("Node")}} à insérer au début du range.
-
- -

Exemple

- -
range = document.createRange();
-newNode = document.createElement("p");
-newNode.appendChild(document.createTextNode("New Node Inserted Here"));
-range.selectNode(document.getElementsByTagName("div").item(0));
-range.insertNode(newNode);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-range-insertnode', 'Range.insertNode()')}}{{Spec2('DOM WHATWG')}}Pas de changement
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-insertNode', 'Range.insertNode()')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Range.insertNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/range/insertnode/index.md b/files/fr/web/api/range/insertnode/index.md new file mode 100644 index 0000000000..bfbe3dc9df --- /dev/null +++ b/files/fr/web/api/range/insertnode/index.md @@ -0,0 +1,65 @@ +--- +title: Range.insertNode() +slug: Web/API/Range/insertNode +translation_of: Web/API/Range/insertNode +--- +
{{ApiRef("DOM")}}
+ +

La méthode Range.insertNode() insère un nœud au début du {{domxref("Range")}}.

+ +

Le nouveau nœud est inséré au point de départ du Range. Si le nouveau nœud est sur le point d’être ajouté à un {{domxref("Node")}} texte, ce Node est coupé en deux au point d’insertion, et l’insertion se fait entre les deux nœuds texte.

+ +

Si le nouveau nœud est un fragment de document, les enfants du fragment sont insérés à la place.

+ +

Syntaxe

+ +
range.insertNode(newNode);
+
+ +

Paramètres

+ +
+
newNode
+
Le {{domxref("Node")}} à insérer au début du range.
+
+ +

Exemple

+ +
range = document.createRange();
+newNode = document.createElement("p");
+newNode.appendChild(document.createTextNode("New Node Inserted Here"));
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.insertNode(newNode);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-range-insertnode', 'Range.insertNode()')}}{{Spec2('DOM WHATWG')}}Pas de changement
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-insertNode', 'Range.insertNode()')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Range.insertNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/range/selectnode/index.html b/files/fr/web/api/range/selectnode/index.html deleted file mode 100644 index 25e418cc4d..0000000000 --- a/files/fr/web/api/range/selectnode/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Range.selectNode() -slug: Web/API/Range/selectNode -tags: - - API - - DOM - - Méthode - - Range -translation_of: Web/API/Range/selectNode ---- -

{{ApiRef("DOM")}}

- -

La méthode Range.selectNode() définit le {{domxref ("Range")}} destiné à contenir le {{domxref("Node")}} et son contenu. Le {{domxref ("Node")}} parent du début et de la fin du {{domxref("Range")}} sera le même que le parent du noeudDeReference.

- -

Syntaxe

- -
range.selectNode(noeudDeReference);
-
- -

Paramètres

- -
-
noeudDeReference
-
Le {{domxref("Node")}} à choisir à l'intérieur d'un {domxref("Range")}}.
-
- -

Exemple

- -
var range = document.createRange();
-var noeudDeReference = document.getElementsByTagName("div").item(0);
-
-range.selectNode(noeudDeReference);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-range-selectnode', 'Range.selectNode()')}}{{Spec2('DOM WHATWG')}}Aucun changement.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNode', 'Range.selectNode()')}}{{Spec2('DOM2 Traversal_Range')}}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Range.selectNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/range/selectnode/index.md b/files/fr/web/api/range/selectnode/index.md new file mode 100644 index 0000000000..25e418cc4d --- /dev/null +++ b/files/fr/web/api/range/selectnode/index.md @@ -0,0 +1,64 @@ +--- +title: Range.selectNode() +slug: Web/API/Range/selectNode +tags: + - API + - DOM + - Méthode + - Range +translation_of: Web/API/Range/selectNode +--- +

{{ApiRef("DOM")}}

+ +

La méthode Range.selectNode() définit le {{domxref ("Range")}} destiné à contenir le {{domxref("Node")}} et son contenu. Le {{domxref ("Node")}} parent du début et de la fin du {{domxref("Range")}} sera le même que le parent du noeudDeReference.

+ +

Syntaxe

+ +
range.selectNode(noeudDeReference);
+
+ +

Paramètres

+ +
+
noeudDeReference
+
Le {{domxref("Node")}} à choisir à l'intérieur d'un {domxref("Range")}}.
+
+ +

Exemple

+ +
var range = document.createRange();
+var noeudDeReference = document.getElementsByTagName("div").item(0);
+
+range.selectNode(noeudDeReference);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-range-selectnode', 'Range.selectNode()')}}{{Spec2('DOM WHATWG')}}Aucun changement.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNode', 'Range.selectNode()')}}{{Spec2('DOM2 Traversal_Range')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Range.selectNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/range/setstart/index.html b/files/fr/web/api/range/setstart/index.html deleted file mode 100644 index 019a481c37..0000000000 --- a/files/fr/web/api/range/setstart/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Range.setStart() -slug: Web/API/Range/setStart -tags: - - API - - DOM - - Method - - Range -translation_of: Web/API/Range/setStart ---- -

{{ApiRef("DOM")}}

- -

La methode Range.setStart() définit la position de départ d'un {{ domxref("Range") }}.

- -

Si le startNode est un {{ domxref("Node") }}  de type Text, Comment, ou CDATASection, alors startOffset est le nombre de caractères depuis le départ du startNode. Pour les autres types de Nœud, startOffset est le nombre de noeuds enfants entre le debut du startNode.

- -

Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée.

- -

Syntaxe

- -
range.setStart(startNode, startOffset);
-
- -

Paramètres

- -
-
startNode
-
{{ domxref("Node") }} ou {{ domxref("Range") }} devrait démarrer.
-
startOffset
-
Un entier supérieur ou égal à zéro représentant le décalage pour le début du {{domxref ("Range")}} à partir du début de startNode.
-
- -

Example

- -
var range = document.createRange();
-var startNode = document.getElementsByTagName("p").item(2);
-var startOffset = 0;
-range.setStart(startNode,startOffset);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité navigateurs

- -

{{Compat("api.Range.setStart")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/range/setstart/index.md b/files/fr/web/api/range/setstart/index.md new file mode 100644 index 0000000000..019a481c37 --- /dev/null +++ b/files/fr/web/api/range/setstart/index.md @@ -0,0 +1,71 @@ +--- +title: Range.setStart() +slug: Web/API/Range/setStart +tags: + - API + - DOM + - Method + - Range +translation_of: Web/API/Range/setStart +--- +

{{ApiRef("DOM")}}

+ +

La methode Range.setStart() définit la position de départ d'un {{ domxref("Range") }}.

+ +

Si le startNode est un {{ domxref("Node") }}  de type Text, Comment, ou CDATASection, alors startOffset est le nombre de caractères depuis le départ du startNode. Pour les autres types de Nœud, startOffset est le nombre de noeuds enfants entre le debut du startNode.

+ +

Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée.

+ +

Syntaxe

+ +
range.setStart(startNode, startOffset);
+
+ +

Paramètres

+ +
+
startNode
+
{{ domxref("Node") }} ou {{ domxref("Range") }} devrait démarrer.
+
startOffset
+
Un entier supérieur ou égal à zéro représentant le décalage pour le début du {{domxref ("Range")}} à partir du début de startNode.
+
+ +

Example

+ +
var range = document.createRange();
+var startNode = document.getElementsByTagName("p").item(2);
+var startOffset = 0;
+range.setStart(startNode,startOffset);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité navigateurs

+ +

{{Compat("api.Range.setStart")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/range/surroundcontents/index.html b/files/fr/web/api/range/surroundcontents/index.html deleted file mode 100644 index 4b8b6fa87e..0000000000 --- a/files/fr/web/api/range/surroundcontents/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Range.surroundContents() -slug: Web/API/Range/surroundContents -translation_of: Web/API/Range/surroundContents ---- -
{{ApiRef("DOM")}}
- -

La méthode Range.surroundContents() déplace le contenu du {{ domxref("Range") }} dans un nouveau nœud, plaçant le nouveau nœud au début du range spécifié.

- -

Cette méthode est à peu près équivalente à :

- -
newNode.appendChild(range.extractContents());
-range.insertNode(newNode)
- -

Après déplacement, les bornes du range incluent newNode.

- -

Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera.

- -

Syntaxe

- -
range.surroundContents(newNode);
-
- -

Paramètres

- -
-
newNode
-
Un {{ domxref("Node") }} à insérer à l’emplacement du range.
-
- -

Exemple

- -
var range = document.createRange();
-var newNode = document.createElement("p");
-
-range.selectNode(document.getElementsByTagName("div").item(0));
-range.surroundContents(newNode);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-range-surroundcontents', 'Range.surroundContents()')}}{{Spec2('DOM WHATWG')}}Pas de changement.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}}{{Spec2('DOM2 Traversal_Range')}}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Range.surroundContents")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/range/surroundcontents/index.md b/files/fr/web/api/range/surroundcontents/index.md new file mode 100644 index 0000000000..4b8b6fa87e --- /dev/null +++ b/files/fr/web/api/range/surroundcontents/index.md @@ -0,0 +1,70 @@ +--- +title: Range.surroundContents() +slug: Web/API/Range/surroundContents +translation_of: Web/API/Range/surroundContents +--- +
{{ApiRef("DOM")}}
+ +

La méthode Range.surroundContents() déplace le contenu du {{ domxref("Range") }} dans un nouveau nœud, plaçant le nouveau nœud au début du range spécifié.

+ +

Cette méthode est à peu près équivalente à :

+ +
newNode.appendChild(range.extractContents());
+range.insertNode(newNode)
+ +

Après déplacement, les bornes du range incluent newNode.

+ +

Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera.

+ +

Syntaxe

+ +
range.surroundContents(newNode);
+
+ +

Paramètres

+ +
+
newNode
+
Un {{ domxref("Node") }} à insérer à l’emplacement du range.
+
+ +

Exemple

+ +
var range = document.createRange();
+var newNode = document.createElement("p");
+
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.surroundContents(newNode);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-range-surroundcontents', 'Range.surroundContents()')}}{{Spec2('DOM WHATWG')}}Pas de changement.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}}{{Spec2('DOM2 Traversal_Range')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Range.surroundContents")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/request/credentials/index.html b/files/fr/web/api/request/credentials/index.html deleted file mode 100644 index c009613a47..0000000000 --- a/files/fr/web/api/request/credentials/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Request.credentials -slug: Web/API/Request/credentials -tags: - - API - - Propriété - - Reference - - request -translation_of: Web/API/Request/credentials ---- -
{{APIRef("Fetch")}}
- -

La propriété en lecture seule credentials, de l'interface {{domxref("Request")}}, indique si l'agent utilisateur doit envoyer des cookies de l'autre domaine dans le cas de requêtes CORS. Ceci est similaire au flag withCredentials de XHR, mais peut prendre trois valeurs possibles (contre deux pour XHR) :

- - - -

Syntaxe

- -
var myCred = request.credentials;
- -

Valeur

- -

Une valeur {{domxref("RequestCredentials")}} qui représente les informations d'authentification utilisées pour cette transaction.

- -

Exemples

- -

Dans le morceau de code suivant, on crée une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour un fichier image dans le même dossier que le script), puis on enregistre les identifiants de la requête dans une variable:

- -
var myRequest = new Request('flowers.jpg');
-var myCred = myRequest.credentials; // renvoie "same-origin" par défaut
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Fetch','#dom-request-credentials','credentials')}}{{Spec2('Fetch')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Request.credentials")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/request/credentials/index.md b/files/fr/web/api/request/credentials/index.md new file mode 100644 index 0000000000..c009613a47 --- /dev/null +++ b/files/fr/web/api/request/credentials/index.md @@ -0,0 +1,65 @@ +--- +title: Request.credentials +slug: Web/API/Request/credentials +tags: + - API + - Propriété + - Reference + - request +translation_of: Web/API/Request/credentials +--- +
{{APIRef("Fetch")}}
+ +

La propriété en lecture seule credentials, de l'interface {{domxref("Request")}}, indique si l'agent utilisateur doit envoyer des cookies de l'autre domaine dans le cas de requêtes CORS. Ceci est similaire au flag withCredentials de XHR, mais peut prendre trois valeurs possibles (contre deux pour XHR) :

+ + + +

Syntaxe

+ +
var myCred = request.credentials;
+ +

Valeur

+ +

Une valeur {{domxref("RequestCredentials")}} qui représente les informations d'authentification utilisées pour cette transaction.

+ +

Exemples

+ +

Dans le morceau de code suivant, on crée une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour un fichier image dans le même dossier que le script), puis on enregistre les identifiants de la requête dans une variable:

+ +
var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.credentials; // renvoie "same-origin" par défaut
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Fetch','#dom-request-credentials','credentials')}}{{Spec2('Fetch')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Request.credentials")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/request/index.html b/files/fr/web/api/request/index.html deleted file mode 100644 index cc9160f5c2..0000000000 --- a/files/fr/web/api/request/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Request -slug: Web/API/Request -tags: - - API - - Experimental - - Fetch - - Fetch API - - Interface - - Reference - - TopicStub - - request -translation_of: Web/API/Request ---- -
{{APIRef("Fetch API")}}
- -

L'interface Request de l'API Fetch représente une demande de ressource.

- -

Vous pouvez créer un nouvel objet Request en utilisant le constructeur {{domxref("Request.Request","Request()")}}, mais vous êtes plus susceptible de rencontrer un objet Request renvoyé à la suite d'une autre opération d'API, telle en tant que service worker {{domxref("FetchEvent.request")}}.

- -

Constructeur

- -
-
{{domxref("Request.Request","Request()")}}
-
Crée un nouvel objet Request.
-
- -

Propriétés

- -
-
{{domxref("Request.cache")}} {{readonlyInline}}
-
Contient le mode de cache de la demande (par exemple, default, reload, no-cache).
-
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
-
Contient le contexte de la demande (par exemple, audio, image, iframe, etc.)
-
{{domxref("Request.credentials")}} {{readonlyInline}}
-
Contient les informations d'identification de la demande (par exemple, omit, same-origin, include). La valeur par défaut est same-origin.
-
{{domxref("Request.destination")}} {{ReadOnlyInline}}
-
Renvoie une chaîne de l'énumération {{domxref("RequestDestination")}} décrivant la destination de la requête. Il s'agit d'une chaîne indiquant le type de contenu demandé.
-
{{domxref("Request.headers")}} {{readonlyInline}}
-
Contient l'objet {{domxref("Headers")}} associé de la requête.
-
{{domxref("Request.integrity")}} {{readonlyInline}}
-
Contient la valeur d'intégrité de la sous-ressource de la demande (par exemple, sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
-
{{domxref("Request.method")}} {{readonlyInline}}
-
Contient la méthode de la requête (GET, POST, etc).
-
{{domxref("Request.mode")}} {{readonlyInline}}
-
Contient le mode de la demande (par exemple, cors, no-cors, same-origin, navigate.)
-
{{domxref("Request.redirect")}} {{readonlyinline}}
-
Contient le mode de gestion des redirections. Il peut s'agir d'un follow, error, ou d'un manual.
-
{{domxref("Request.referrer")}} {{readonlyInline}}
-
Contient le référent de la demande (par exemple, client).
-
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
-
Contient la politique de référent de la demande (par exemple, no-referrer).
-
{{domxref("Request.url")}} {{readonlyInline}}
-
Contient l'URL de la demande.
-
- -

Request implémente {{domxref("Body")}}, donc il hérite également des propriétés suivantes:

- -
-
{{domxref("Body.body", "body")}} {{readonlyInline}}
-
Un getter simple utilisé pour exposer un {{domxref("ReadableStream")}} du contenu du corps.
-
{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}
-
Stocke un {{domxref("Boolean")}} qui déclare si le corps a déjà été utilisé dans une réponse.
-
- -

Méthodes

- -
-
{{domxref("Request.clone()")}}
-
Crée une copie de l'objet Request actuel.
-
- -

Request implémente {{domxref("Body")}}, donc il dispose également des méthodes suivantes:

- -
-
{{domxref("Body.arrayBuffer()")}}
-
Renvoie une promesse qui se résout avec une représentation {{domxref("ArrayBuffer")}} du corps de la requête.
-
{{domxref("Body.blob()")}}
-
Renvoie une promesse qui se résout avec une représentation {{domxref("Blob")}} du corps de la requête.
-
{{domxref("Body.formData()")}}
-
Renvoie une promesse qui se résout avec une représentation {{domxref("FormData")}} du corps de la requếte.
-
{{domxref("Body.json()")}}
-
Renvoie une promesse qui se résout avec une représentation {{domxref("JSON")}} du corps de la requête.
-
{{domxref("Body.text()")}}
-
Renvoie une promesse qui se résout avec une représentation {{domxref("USVString")}} (texte) du coprs de la requête.
-
- -
-

Note : Les fonctions {{domxref("Body")}} ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.

-
- -

Exemples

- -

Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur Request() (pour un fichier image dans le même répertoire que le script), puis renvoyons certaines valeurs de propriété de la requête:

- -
const request = new Request('https://www.mozilla.org/favicon.ico');
-
-const URL = request.url;
-const method = request.method;
-const credentials = request.credentials;
-
- -

Vous pouvez ensuite récupérer cette requête en passant l'objet Request en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple:

- -
fetch(request)
-  .then(response => response.blob())
-  .then(blob => {
-    image.src = URL.createObjectURL(blob);
-  });
- -

Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur Request() avec des données initiales et du contenu du body pour une requête api qui nécessite une charge utile de body:

- -
const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
-
-const URL = request.url;
-const method = request.method;
-const credentials = request.credentials;
-const bodyUsed = request.bodyUsed;
-
- -
-

Note: Le type de body ne peut être qu'un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}} donc pour ajouter un objet JSON à la charge utile, vous devez stringify cet objet.

-
- -

Vous pouvez ensuite récupérer cette demande d'API en passant l'objet Request en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple et obtenir la réponse:

- -
fetch(request)
-  .then(response => {
-    if (response.status === 200) {
-      return response.json();
-    } else {
-      throw new Error('Something went wrong on api server!');
-    }
-  })
-  .then(response => {
-    console.debug(response);
-    // ...
-  }).catch(error => {
-    console.error(error);
-  });
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Fetch','#request-class','Request')}}{{Spec2('Fetch')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Request")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/request/index.md b/files/fr/web/api/request/index.md new file mode 100644 index 0000000000..cc9160f5c2 --- /dev/null +++ b/files/fr/web/api/request/index.md @@ -0,0 +1,171 @@ +--- +title: Request +slug: Web/API/Request +tags: + - API + - Experimental + - Fetch + - Fetch API + - Interface + - Reference + - TopicStub + - request +translation_of: Web/API/Request +--- +
{{APIRef("Fetch API")}}
+ +

L'interface Request de l'API Fetch représente une demande de ressource.

+ +

Vous pouvez créer un nouvel objet Request en utilisant le constructeur {{domxref("Request.Request","Request()")}}, mais vous êtes plus susceptible de rencontrer un objet Request renvoyé à la suite d'une autre opération d'API, telle en tant que service worker {{domxref("FetchEvent.request")}}.

+ +

Constructeur

+ +
+
{{domxref("Request.Request","Request()")}}
+
Crée un nouvel objet Request.
+
+ +

Propriétés

+ +
+
{{domxref("Request.cache")}} {{readonlyInline}}
+
Contient le mode de cache de la demande (par exemple, default, reload, no-cache).
+
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+
Contient le contexte de la demande (par exemple, audio, image, iframe, etc.)
+
{{domxref("Request.credentials")}} {{readonlyInline}}
+
Contient les informations d'identification de la demande (par exemple, omit, same-origin, include). La valeur par défaut est same-origin.
+
{{domxref("Request.destination")}} {{ReadOnlyInline}}
+
Renvoie une chaîne de l'énumération {{domxref("RequestDestination")}} décrivant la destination de la requête. Il s'agit d'une chaîne indiquant le type de contenu demandé.
+
{{domxref("Request.headers")}} {{readonlyInline}}
+
Contient l'objet {{domxref("Headers")}} associé de la requête.
+
{{domxref("Request.integrity")}} {{readonlyInline}}
+
Contient la valeur d'intégrité de la sous-ressource de la demande (par exemple, sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
+
{{domxref("Request.method")}} {{readonlyInline}}
+
Contient la méthode de la requête (GET, POST, etc).
+
{{domxref("Request.mode")}} {{readonlyInline}}
+
Contient le mode de la demande (par exemple, cors, no-cors, same-origin, navigate.)
+
{{domxref("Request.redirect")}} {{readonlyinline}}
+
Contient le mode de gestion des redirections. Il peut s'agir d'un follow, error, ou d'un manual.
+
{{domxref("Request.referrer")}} {{readonlyInline}}
+
Contient le référent de la demande (par exemple, client).
+
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+
Contient la politique de référent de la demande (par exemple, no-referrer).
+
{{domxref("Request.url")}} {{readonlyInline}}
+
Contient l'URL de la demande.
+
+ +

Request implémente {{domxref("Body")}}, donc il hérite également des propriétés suivantes:

+ +
+
{{domxref("Body.body", "body")}} {{readonlyInline}}
+
Un getter simple utilisé pour exposer un {{domxref("ReadableStream")}} du contenu du corps.
+
{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}
+
Stocke un {{domxref("Boolean")}} qui déclare si le corps a déjà été utilisé dans une réponse.
+
+ +

Méthodes

+ +
+
{{domxref("Request.clone()")}}
+
Crée une copie de l'objet Request actuel.
+
+ +

Request implémente {{domxref("Body")}}, donc il dispose également des méthodes suivantes:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Renvoie une promesse qui se résout avec une représentation {{domxref("ArrayBuffer")}} du corps de la requête.
+
{{domxref("Body.blob()")}}
+
Renvoie une promesse qui se résout avec une représentation {{domxref("Blob")}} du corps de la requête.
+
{{domxref("Body.formData()")}}
+
Renvoie une promesse qui se résout avec une représentation {{domxref("FormData")}} du corps de la requếte.
+
{{domxref("Body.json()")}}
+
Renvoie une promesse qui se résout avec une représentation {{domxref("JSON")}} du corps de la requête.
+
{{domxref("Body.text()")}}
+
Renvoie une promesse qui se résout avec une représentation {{domxref("USVString")}} (texte) du coprs de la requête.
+
+ +
+

Note : Les fonctions {{domxref("Body")}} ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.

+
+ +

Exemples

+ +

Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur Request() (pour un fichier image dans le même répertoire que le script), puis renvoyons certaines valeurs de propriété de la requête:

+ +
const request = new Request('https://www.mozilla.org/favicon.ico');
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+
+ +

Vous pouvez ensuite récupérer cette requête en passant l'objet Request en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple:

+ +
fetch(request)
+  .then(response => response.blob())
+  .then(blob => {
+    image.src = URL.createObjectURL(blob);
+  });
+ +

Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur Request() avec des données initiales et du contenu du body pour une requête api qui nécessite une charge utile de body:

+ +
const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+const bodyUsed = request.bodyUsed;
+
+ +
+

Note: Le type de body ne peut être qu'un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}} donc pour ajouter un objet JSON à la charge utile, vous devez stringify cet objet.

+
+ +

Vous pouvez ensuite récupérer cette demande d'API en passant l'objet Request en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple et obtenir la réponse:

+ +
fetch(request)
+  .then(response => {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response => {
+    console.debug(response);
+    // ...
+  }).catch(error => {
+    console.error(error);
+  });
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Fetch','#request-class','Request')}}{{Spec2('Fetch')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Request")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/request/mode/index.html b/files/fr/web/api/request/mode/index.html deleted file mode 100644 index d051e937d6..0000000000 --- a/files/fr/web/api/request/mode/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Request.mode -slug: Web/API/Request/mode -translation_of: Web/API/Request/mode ---- -
{{APIRef("Fetch")}}{{SeeCompatTable}}
- -

La propriété mode (en lecture seule) de l’interface {{domxref("Request")}} contient le mode de la requête (e.g., cors, no-cors, cors-with-forced-preflight, same-origin, or navigate.) Ceci est utilisé pour déterminer si les requêtes différentes de l’origine (cross-origin) mèneront à des réponses valides, et quelles propriétés de la réponse seront lisibles:

- - - -

Syntaxe

- -
var myMode = request.mode;
- -

Valeur

- -

Une valeur {{domxref("RequestMode")}}.

- -

Exemple

- -

Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}}  (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable:

- -
var myRequest = new Request('flowers.jpg');
-var myMode = myRequest.mode; // returns "cors" by default
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Fetch','#dom-request-mode', 'mode')}}{{Spec2('Fetch')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Request.mode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/request/mode/index.md b/files/fr/web/api/request/mode/index.md new file mode 100644 index 0000000000..d051e937d6 --- /dev/null +++ b/files/fr/web/api/request/mode/index.md @@ -0,0 +1,61 @@ +--- +title: Request.mode +slug: Web/API/Request/mode +translation_of: Web/API/Request/mode +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

La propriété mode (en lecture seule) de l’interface {{domxref("Request")}} contient le mode de la requête (e.g., cors, no-cors, cors-with-forced-preflight, same-origin, or navigate.) Ceci est utilisé pour déterminer si les requêtes différentes de l’origine (cross-origin) mèneront à des réponses valides, et quelles propriétés de la réponse seront lisibles:

+ + + +

Syntaxe

+ +
var myMode = request.mode;
+ +

Valeur

+ +

Une valeur {{domxref("RequestMode")}}.

+ +

Exemple

+ +

Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}}  (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable:

+ +
var myRequest = new Request('flowers.jpg');
+var myMode = myRequest.mode; // returns "cors" by default
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Fetch','#dom-request-mode', 'mode')}}{{Spec2('Fetch')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Request.mode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/request/request/index.html b/files/fr/web/api/request/request/index.html deleted file mode 100644 index bea6114c46..0000000000 --- a/files/fr/web/api/request/request/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Request() -slug: Web/API/Request/Request -tags: - - API - - Constructeur - - Experimental - - Fetch - - Reference - - request -translation_of: Web/API/Request/Request ---- -
{{APIRef("Fetch API")}}
- -

Le constructeur Request() crée un nouvel objet {{domxref("Request")}}.

- -

Syntaxe

- -
var maRequete = new Request(entree[, init]);
- -

Paramètres

- -
-
entree
-
Définit la ressource que vous souhaitez récupérer. Cela peut être soit : -
    -
  • Une {{domxref("USVString")}} contenant l'URL directe de la ressource que vous voulez récupérer.
    • -
  • Un objet {{domxref("Request")}}, ce qui crée en fait une copie. Notez les mises à jour de comportement suivantes pour conserver la sécurité, tout en rendant le constructeur moins susceptible de déclencher des exceptions : -
      -
    • Si cet objet existe depuis une autre origine lors de l'appel du constructeur, le {{domxref("Request.referrer")}} est enlevé.
      • -
    • Si cet objet a un {{domxref("Request.mode")}} à navigate, la valeur de mode est convertie en same-origin.
      • -
    -
    • -
-
-
init {{optional_inline}}
-
Un objet d'options contenant tous les paramètres personnalisés que vous voulez appliquer à la requête. Les options possibles sont : -
    -
  • method: La méthode de la requête, par ex., GET, POST.
    • -
  • headers: Tous les entêtes que vous voulez ajouter à votre requête, contenus dans un objet {{domxref("Headers")}} ou un littéral d'objet avec des valeurs {{domxref("ByteString")}}.
    • -
  • body: Tout corps que vous voulez ajouter à votre requête : cela peut être un objet {{domxref ("Blob")}}, {{domxref ("BufferSource")}}, {{domxref ("FormData")}}, {{domxref ("URLSearchParams")}}, {{domxref ("USVString")}} ou {{domxref ("ReadableStream")}}. Notez qu'une requête utilisant la méthode GET ou HEAD ne peut pas avoir de corps .
    • -
  • mode: Le mode que vous souhaitez utiliser pour la requête, par exemple, cors, no-cors, same-origin, ou navigate. La valeur par défaut est cors. Dans Chrome, la valeur par défaut est no-cors avant Chrome 47 et same-origin à partir de Chrome 47.
    • -
  • credentials: Les informations d'authentification de requête que vous souhaitez utiliser pour la requête : omit, same-origin, ou include. La valeur par défaut est omit. Dans Chrome, la valeur par défaut est same-origin avant Chrome 47 et include à partir de Chrome 47.
    • -
  • cache: Le mode de cache que vous voulez utiliser pour la requête.
    • -
  • redirect: Le mode de redirection à utiliser : follow, error, ou manual. Dans Chrome, le défaut est manual avant Chrome 47 et follow à partir de Chrome 47.
    • -
  • referrer: Une {{domxref("USVString")}} indiquant no-referrer, client, ou une URL. La valeur par défaut est client.
    • -
  • integrity: Contient la valeur d'intégrité de la sous ressource de la requête (par ex.., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
    • -
-
-
- -

Erreurs

- - - - - - - - - - - - - - -
TypeDescription
TypeErrorDepuis Firefox 43, Request() déclenchera une TypeError si l'URL contient des informations d'authentification, comme dans http://user:password@example.com.
- -

Exemple

- -

Dans notre exemple de Fetch Request (voir Fetch Request en direct), nous créons un nouvel objet Request en utilisant le constructeur, puis nous le récupérons en utilisant un appel à {{domxref ("GlobalFetch.fetch")}}. Puisque nous récupérons une image, nous lançons {{domxref ("Body.blob")}} sur la réponse pour lui donner le bon type MIME afin qu'il soit géré correctement, puis nous en créons une

- -

Object URL et nous l'affichons dans un élément {{htmlelement ("img")}}.

- -
var monImage = document.querySelector('img');
-
-var maRequete = new Request('fleurs.jpg');
-
-fetch(maRequete).then(function(reponse) {
-  return reponse.blob();
-}).then(function(reponse) {
-  var URLdobjet = URL.createObjectURL(reponse);
-  monImage.src = URLdobjet;
-});
- -

Dans notre exemple de Fetch Request avec init (see Fetch Request init en direct), nous faisons la même chose, excepté que nous passons un objet init quand nous invoquons fetch():

- -
var monImage = document.querySelector('img');
-
-var mesEntetes = new Headers();
-mesEntetes.append('Content-Type', 'image/jpeg');
-
-var monInit = { method: 'GET',
-               headers: mesEntetes,
-               mode: 'cors',
-               cache: 'default' };
-
-var maRequete = new Request('fleurs.jpg',monInit);
-
-fetch(maRequete).then(function(reponse) {
-  ...
-});
- -

Notez que vos pouvez aussi passer l'objet init dans l'appel à fetch pour obtenir le même résultat, par ex. :

- -
fetch(maRequete,monInit).then(function(reponse) {
-  ...
-});
- -

Vous pouvez aussi utilier un littéral d'objet tel que headers dans init.

- -
var monInit = { method: 'GET',
-               headers: {
-                   'Content-Type': 'image/jpeg'
-               },
-               mode: 'cors',
-               cache: 'default' };
-
-var maRequete = new Request('fleurs.jpg', monInit);
-
- -

Vous pouvez aussi passer un objet {{domxref("Request")}} au constructeur Request() pour créer une copie de la Request (c'est similaire au fait d'appeler la méthode {{domxref("Request.clone","clone()")}}).

- -
var copie = new Request(maRequete);
-
- -
-

Note : Cette dernière utilisation n'est probablement utile que dans ServiceWorkers.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Fetch','#dom-request','Request()')}}{{Spec2('Fetch')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Request.Request")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/request/request/index.md b/files/fr/web/api/request/request/index.md new file mode 100644 index 0000000000..bea6114c46 --- /dev/null +++ b/files/fr/web/api/request/request/index.md @@ -0,0 +1,158 @@ +--- +title: Request() +slug: Web/API/Request/Request +tags: + - API + - Constructeur + - Experimental + - Fetch + - Reference + - request +translation_of: Web/API/Request/Request +--- +
{{APIRef("Fetch API")}}
+ +

Le constructeur Request() crée un nouvel objet {{domxref("Request")}}.

+ +

Syntaxe

+ +
var maRequete = new Request(entree[, init]);
+ +

Paramètres

+ +
+
entree
+
Définit la ressource que vous souhaitez récupérer. Cela peut être soit : +
    +
  • Une {{domxref("USVString")}} contenant l'URL directe de la ressource que vous voulez récupérer.
    • +
  • Un objet {{domxref("Request")}}, ce qui crée en fait une copie. Notez les mises à jour de comportement suivantes pour conserver la sécurité, tout en rendant le constructeur moins susceptible de déclencher des exceptions : +
      +
    • Si cet objet existe depuis une autre origine lors de l'appel du constructeur, le {{domxref("Request.referrer")}} est enlevé.
      • +
    • Si cet objet a un {{domxref("Request.mode")}} à navigate, la valeur de mode est convertie en same-origin.
      • +
    +
    • +
+
+
init {{optional_inline}}
+
Un objet d'options contenant tous les paramètres personnalisés que vous voulez appliquer à la requête. Les options possibles sont : +
    +
  • method: La méthode de la requête, par ex., GET, POST.
    • +
  • headers: Tous les entêtes que vous voulez ajouter à votre requête, contenus dans un objet {{domxref("Headers")}} ou un littéral d'objet avec des valeurs {{domxref("ByteString")}}.
    • +
  • body: Tout corps que vous voulez ajouter à votre requête : cela peut être un objet {{domxref ("Blob")}}, {{domxref ("BufferSource")}}, {{domxref ("FormData")}}, {{domxref ("URLSearchParams")}}, {{domxref ("USVString")}} ou {{domxref ("ReadableStream")}}. Notez qu'une requête utilisant la méthode GET ou HEAD ne peut pas avoir de corps .
    • +
  • mode: Le mode que vous souhaitez utiliser pour la requête, par exemple, cors, no-cors, same-origin, ou navigate. La valeur par défaut est cors. Dans Chrome, la valeur par défaut est no-cors avant Chrome 47 et same-origin à partir de Chrome 47.
    • +
  • credentials: Les informations d'authentification de requête que vous souhaitez utiliser pour la requête : omit, same-origin, ou include. La valeur par défaut est omit. Dans Chrome, la valeur par défaut est same-origin avant Chrome 47 et include à partir de Chrome 47.
    • +
  • cache: Le mode de cache que vous voulez utiliser pour la requête.
    • +
  • redirect: Le mode de redirection à utiliser : follow, error, ou manual. Dans Chrome, le défaut est manual avant Chrome 47 et follow à partir de Chrome 47.
    • +
  • referrer: Une {{domxref("USVString")}} indiquant no-referrer, client, ou une URL. La valeur par défaut est client.
    • +
  • integrity: Contient la valeur d'intégrité de la sous ressource de la requête (par ex.., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
    • +
+
+
+ +

Erreurs

+ + + + + + + + + + + + + + +
TypeDescription
TypeErrorDepuis Firefox 43, Request() déclenchera une TypeError si l'URL contient des informations d'authentification, comme dans http://user:password@example.com.
+ +

Exemple

+ +

Dans notre exemple de Fetch Request (voir Fetch Request en direct), nous créons un nouvel objet Request en utilisant le constructeur, puis nous le récupérons en utilisant un appel à {{domxref ("GlobalFetch.fetch")}}. Puisque nous récupérons une image, nous lançons {{domxref ("Body.blob")}} sur la réponse pour lui donner le bon type MIME afin qu'il soit géré correctement, puis nous en créons une

+ +

Object URL et nous l'affichons dans un élément {{htmlelement ("img")}}.

+ +
var monImage = document.querySelector('img');
+
+var maRequete = new Request('fleurs.jpg');
+
+fetch(maRequete).then(function(reponse) {
+  return reponse.blob();
+}).then(function(reponse) {
+  var URLdobjet = URL.createObjectURL(reponse);
+  monImage.src = URLdobjet;
+});
+ +

Dans notre exemple de Fetch Request avec init (see Fetch Request init en direct), nous faisons la même chose, excepté que nous passons un objet init quand nous invoquons fetch():

+ +
var monImage = document.querySelector('img');
+
+var mesEntetes = new Headers();
+mesEntetes.append('Content-Type', 'image/jpeg');
+
+var monInit = { method: 'GET',
+               headers: mesEntetes,
+               mode: 'cors',
+               cache: 'default' };
+
+var maRequete = new Request('fleurs.jpg',monInit);
+
+fetch(maRequete).then(function(reponse) {
+  ...
+});
+ +

Notez que vos pouvez aussi passer l'objet init dans l'appel à fetch pour obtenir le même résultat, par ex. :

+ +
fetch(maRequete,monInit).then(function(reponse) {
+  ...
+});
+ +

Vous pouvez aussi utilier un littéral d'objet tel que headers dans init.

+ +
var monInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var maRequete = new Request('fleurs.jpg', monInit);
+
+ +

Vous pouvez aussi passer un objet {{domxref("Request")}} au constructeur Request() pour créer une copie de la Request (c'est similaire au fait d'appeler la méthode {{domxref("Request.clone","clone()")}}).

+ +
var copie = new Request(maRequete);
+
+ +
+

Note : Cette dernière utilisation n'est probablement utile que dans ServiceWorkers.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Fetch','#dom-request','Request()')}}{{Spec2('Fetch')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Request.Request")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/resize_observer_api/index.html b/files/fr/web/api/resize_observer_api/index.html deleted file mode 100644 index 7a52b0c837..0000000000 --- a/files/fr/web/api/resize_observer_api/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Resize Observer API -slug: Web/API/Resize_Observer_API -tags: - - API - - Draft - - Element - - Monitor - - Overview - - Reference - - Resize Observer - - Resize Observer API - - observe -translation_of: Web/API/Resize_Observer_API ---- -

{{DefaultAPISidebar("Resize Observer API")}}

- -

L'API Resize Observer fournit un mécanisme performant par lequel du code peut surveiller les changements de dimensions d'un élément et un observateur recevoir des notifications chaque fois que les dimensions changent.

- -

Concepts et utilisation

- -

Il y a une multitude de cas d'utilisation pour des techniques de responsive design (et d'autres par ailleurs) qui répondent à des changements de dimensions d'un élément mais, avant, leur implantation était souvent amateures et parfois imparfaites.

- -

Par exemple, les media queries / {{domxref("window.matchMedia")}} sont un bon outil pour mettre à jour une mise en page à des points spécifiques quand la zone d'affichage change de dimensions, mais qu'en est-il si vous désirez changer la mise en page en réponse à un changement spécifique des dimensions d'un élément qui n'est pas le conteneur principal ?

- -

Pour réaliser ceci, une solution limitée serait d'écouter les changements sur un type d'événement qui convienne à résoudre le problème et qui corresponde à l'élément dont les changements de dimensions vous intéresse (c'est-à-dire l'événement resize sur window), puis de calculer les nouvelles dimensions ou autres propriétés de l'élément après un redimensionnement au moyen de {{domxref("Element.getBoundingClientRect")}} ou de {{domxref("Window.getComputedStyle")}}, par exemple.

- -

Une telle solution tend à ne fonctionner que pour des cas d'utilisation limités, causer des soucis de performance (continuellement appeler les méthodes évoquées ci-avant résulterait en une grosse baisse de performance), et souvent ne fonctionnera quand les dimensions de la fenêtre du navigateur ne sont pas changées.

- -

L'API Resize Observer fournit une solution adaptée à résoudre exactement ces types de problèmes, et plus encore, en vous permettant d'observer aisément et de répondre à des changements dans les dimensions du content-box ou du border box d'un élément, et ce d'une manière performante. Elle fournit une solution en JavaScript au manque souvent dénoncé de requêtes sur les éléments sur la plate-forme web.

- -

Son utilisation est simple et presque identique aux autres observateurs tels que le Performance Observer ou l'Intersection Observer. Il vous faut créer un nouvel objet {{domxref("ResizeObserver")}} en utilisant le constructeur ResizeObserver(), puis utiliser {{domxref("ResizeObserver.observe()")}} pour le faire observer les changements de dimensions d'un élément spécifiques. Une fonction de rappel fournise au constructeur sera exécutée à chaque fois que les dimensions changent, fournissant un accès aux nouvelles dimensions et vous permettant de faire tous ce que vous souhaitez faire en réponse à ces changements.

- -

Interfaces

- -
-
{{domxref("ResizeObserver")}}
-
fournit la possibilité d'enregistrer de nouveaux observateurs et de démarrer ou d'arrêter d'observer des éléments.
-
{{domxref("ResizeObserverEntry")}}
-
Décrit un unique élément qui a été redimensionné, identifiant l'élément et ses nouvelles dimensions.
-
- -

Exemples

- -

Vous trouverez plusieurs exemples basiques sur notre dépôt GitHub :

- - - -

Le code suivra usuellement ce genre de modèle (tiré de resize-observer-border-radius.html):

- -
const resizeObserver = new ResizeObserver(entries => {
-  for (let entry of entries) {
-    if(entry.contentBoxSize) {
-      entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
-                                                      (entry.contentBoxSize.blockSize/10)) + 'px';
-    } else {
-      entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) +
-                                                      (entry.contentRect.height/10)) + 'px';
-    }
-  }
-});
-
-resizeObserver.observe(document.querySelector('div'));
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Resize Observer')}}{{Spec2('Resize Observer')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.ResizeObserver")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/resize_observer_api/index.md b/files/fr/web/api/resize_observer_api/index.md new file mode 100644 index 0000000000..7a52b0c837 --- /dev/null +++ b/files/fr/web/api/resize_observer_api/index.md @@ -0,0 +1,95 @@ +--- +title: Resize Observer API +slug: Web/API/Resize_Observer_API +tags: + - API + - Draft + - Element + - Monitor + - Overview + - Reference + - Resize Observer + - Resize Observer API + - observe +translation_of: Web/API/Resize_Observer_API +--- +

{{DefaultAPISidebar("Resize Observer API")}}

+ +

L'API Resize Observer fournit un mécanisme performant par lequel du code peut surveiller les changements de dimensions d'un élément et un observateur recevoir des notifications chaque fois que les dimensions changent.

+ +

Concepts et utilisation

+ +

Il y a une multitude de cas d'utilisation pour des techniques de responsive design (et d'autres par ailleurs) qui répondent à des changements de dimensions d'un élément mais, avant, leur implantation était souvent amateures et parfois imparfaites.

+ +

Par exemple, les media queries / {{domxref("window.matchMedia")}} sont un bon outil pour mettre à jour une mise en page à des points spécifiques quand la zone d'affichage change de dimensions, mais qu'en est-il si vous désirez changer la mise en page en réponse à un changement spécifique des dimensions d'un élément qui n'est pas le conteneur principal ?

+ +

Pour réaliser ceci, une solution limitée serait d'écouter les changements sur un type d'événement qui convienne à résoudre le problème et qui corresponde à l'élément dont les changements de dimensions vous intéresse (c'est-à-dire l'événement resize sur window), puis de calculer les nouvelles dimensions ou autres propriétés de l'élément après un redimensionnement au moyen de {{domxref("Element.getBoundingClientRect")}} ou de {{domxref("Window.getComputedStyle")}}, par exemple.

+ +

Une telle solution tend à ne fonctionner que pour des cas d'utilisation limités, causer des soucis de performance (continuellement appeler les méthodes évoquées ci-avant résulterait en une grosse baisse de performance), et souvent ne fonctionnera quand les dimensions de la fenêtre du navigateur ne sont pas changées.

+ +

L'API Resize Observer fournit une solution adaptée à résoudre exactement ces types de problèmes, et plus encore, en vous permettant d'observer aisément et de répondre à des changements dans les dimensions du content-box ou du border box d'un élément, et ce d'une manière performante. Elle fournit une solution en JavaScript au manque souvent dénoncé de requêtes sur les éléments sur la plate-forme web.

+ +

Son utilisation est simple et presque identique aux autres observateurs tels que le Performance Observer ou l'Intersection Observer. Il vous faut créer un nouvel objet {{domxref("ResizeObserver")}} en utilisant le constructeur ResizeObserver(), puis utiliser {{domxref("ResizeObserver.observe()")}} pour le faire observer les changements de dimensions d'un élément spécifiques. Une fonction de rappel fournise au constructeur sera exécutée à chaque fois que les dimensions changent, fournissant un accès aux nouvelles dimensions et vous permettant de faire tous ce que vous souhaitez faire en réponse à ces changements.

+ +

Interfaces

+ +
+
{{domxref("ResizeObserver")}}
+
fournit la possibilité d'enregistrer de nouveaux observateurs et de démarrer ou d'arrêter d'observer des éléments.
+
{{domxref("ResizeObserverEntry")}}
+
Décrit un unique élément qui a été redimensionné, identifiant l'élément et ses nouvelles dimensions.
+
+ +

Exemples

+ +

Vous trouverez plusieurs exemples basiques sur notre dépôt GitHub :

+ + + +

Le code suivra usuellement ce genre de modèle (tiré de resize-observer-border-radius.html):

+ +
const resizeObserver = new ResizeObserver(entries => {
+  for (let entry of entries) {
+    if(entry.contentBoxSize) {
+      entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
+                                                      (entry.contentBoxSize.blockSize/10)) + 'px';
+    } else {
+      entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) +
+                                                      (entry.contentRect.height/10)) + 'px';
+    }
+  }
+});
+
+resizeObserver.observe(document.querySelector('div'));
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Resize Observer')}}{{Spec2('Resize Observer')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.ResizeObserver")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/response/index.html b/files/fr/web/api/response/index.html deleted file mode 100644 index d1b5aea198..0000000000 --- a/files/fr/web/api/response/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Response -slug: Web/API/Response -tags: - - API - - Experimental - - Fetch - - Fetch API - - Interface - - Reference - - Response -translation_of: Web/API/Response ---- -
{{APIRef("Fetch API")}}
- -

L'interface Response de l'API de fetch représente la réponse d'une requête initialisée.

- -

Vous pouvez créer un nouvel objet Response en utilisant le constructeur {{domxref("Response.Response()")}}. Cependant, vous rencontrerez plus fréquemment l'objet Response comme étant le résultat d'une opération de l'API, par exemple, un service worker {{domxref("Fetchevent.respondWith")}}, ou un simple {{domxref("GlobalFetch.fetch()")}}.

- -

Constructeur

- -
-
{{domxref("Response.Response","Response()")}}
-
Crée un nouvel objet Response.
-
- -

Propriétés

- -
-
{{domxref("Response.headers")}} {{readonlyinline}}
-
Contient les objets {{domxref("Headers")}} associés à la réponse.
-
{{domxref("Response.ok")}} {{readonlyinline}}
-
Contient un booléen statuant s'il s'agit d'une réponse indiquant un succès (statut HTTP entre 200 et 299) ou non.
-
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
-
Indique si oui ou non la réponse est le résultat d'une (ou plusieurs) redirection(s), c'est-à-dire que sa liste d'URLs a plus d'une entrée.
-
{{domxref("Response.status")}} {{readonlyinline}}
-
Contient le status code de la réponse (par exemple 200 en cas de réussite).
-
{{domxref("Response.statusText")}} {{readonlyinline}}
-
Contient le message du statut correspondant au status code (à savoir : OK pour le code 200 par exemple).
-
{{domxref("Response.type")}} {{readonlyinline}}
-
Contient le type de la réponse (par exemple, basic, cors).
-
{{domxref("Response.url")}} {{readonlyinline}}
-
Contient l'URL de la réponse.
-
{{domxref("Response.useFinalURL")}}
-
Contient un booléen statuant s'il s'agit de l'URL finale de la réponse.
-
- -

Par ailleurs, Response implémente également une propriété {{domxref("Body")}}, voici les propriétés qui lui sont propres :

- -
-
{{domxref("Body.body")}} {{readonlyInline}}
-
Un simple getter utilisé afin d'exposer un {{domxref("ReadableStream")}} permettant de lire le contenu du body.
-
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
-
Stocke un {{domxref("Boolean")}} qui indique si le body a déjà été utilisé dans la réponse ou non.
-
- -

Méthodes

- -
-
{{domxref("Response.clone()")}}
-
Crée un clone de l'objet Response.
-
{{domxref("Response.error()")}}
-
Retourne un nouvel objet Response associé à une erreur réseau.
-
{{domxref("Response.redirect()")}}
-
Crée une nouvelle réponse avec une URL différente permettant de rediriger l'utilisateur.
-
- -

Response implémente {{domxref("Body")}}, voici les différentes méthodes qui sont disponibles:

- -
-
{{domxref("Body.arrayBuffer()")}}
-
Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("ArrayBuffer")}} lorsqu'elle est résolue.
-
{{domxref("Body.blob()")}}
-
Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("Blob")}} lorsqu'elle est résolue.
-
{{domxref("Body.formData()")}}
-
Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("FormData")}} lorsqu'elle est résolue.
-
{{domxref("Body.json()")}}
-
Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne le résultat du parsing du body text, comme {{jsxref("JSON")}} ,lorsqu'elle est résolue.
-
{{domxref("Body.text()")}}
-
Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui est résolue avec un {{domxref("USVString")}} (text).
-
- -

Exemples

- -

Dans notre exemple basique d'utilisation de fetch (exemple), nous utilisons un simple appel fetch() pour récupérer une image et l'afficher dans un tag {{htmlelement("img")}}. L'appel fetch() retourne une promise qui est résolue avec un objet Response associé à l'opération de récupération de la ressource. Vous remarquerez que puisque nous récupérons une image, nous avons besoin d'utiliser {{domxref("Body.blob")}} (disponible dans le body de la {{domxref("Response")}}) pour attribuer le bon MIME type à la réponse.

- -
var myImage = document.querySelector('.my-image');
-fetch('flowers.jpg').then(function(response) {
-  return response.blob();
-}).then(function(blob) {
-  var objectURL = URL.createObjectURL(blob);
-  myImage.src = objectURL;
-});
- -

Vous pouvez également utiliser le constructeur {{domxref("Response.Response()")}} pour créer votre propre objet Response:

- -
var myResponse = new Response();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Response")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/response/index.md b/files/fr/web/api/response/index.md new file mode 100644 index 0000000000..d1b5aea198 --- /dev/null +++ b/files/fr/web/api/response/index.md @@ -0,0 +1,126 @@ +--- +title: Response +slug: Web/API/Response +tags: + - API + - Experimental + - Fetch + - Fetch API + - Interface + - Reference + - Response +translation_of: Web/API/Response +--- +
{{APIRef("Fetch API")}}
+ +

L'interface Response de l'API de fetch représente la réponse d'une requête initialisée.

+ +

Vous pouvez créer un nouvel objet Response en utilisant le constructeur {{domxref("Response.Response()")}}. Cependant, vous rencontrerez plus fréquemment l'objet Response comme étant le résultat d'une opération de l'API, par exemple, un service worker {{domxref("Fetchevent.respondWith")}}, ou un simple {{domxref("GlobalFetch.fetch()")}}.

+ +

Constructeur

+ +
+
{{domxref("Response.Response","Response()")}}
+
Crée un nouvel objet Response.
+
+ +

Propriétés

+ +
+
{{domxref("Response.headers")}} {{readonlyinline}}
+
Contient les objets {{domxref("Headers")}} associés à la réponse.
+
{{domxref("Response.ok")}} {{readonlyinline}}
+
Contient un booléen statuant s'il s'agit d'une réponse indiquant un succès (statut HTTP entre 200 et 299) ou non.
+
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
+
Indique si oui ou non la réponse est le résultat d'une (ou plusieurs) redirection(s), c'est-à-dire que sa liste d'URLs a plus d'une entrée.
+
{{domxref("Response.status")}} {{readonlyinline}}
+
Contient le status code de la réponse (par exemple 200 en cas de réussite).
+
{{domxref("Response.statusText")}} {{readonlyinline}}
+
Contient le message du statut correspondant au status code (à savoir : OK pour le code 200 par exemple).
+
{{domxref("Response.type")}} {{readonlyinline}}
+
Contient le type de la réponse (par exemple, basic, cors).
+
{{domxref("Response.url")}} {{readonlyinline}}
+
Contient l'URL de la réponse.
+
{{domxref("Response.useFinalURL")}}
+
Contient un booléen statuant s'il s'agit de l'URL finale de la réponse.
+
+ +

Par ailleurs, Response implémente également une propriété {{domxref("Body")}}, voici les propriétés qui lui sont propres :

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
Un simple getter utilisé afin d'exposer un {{domxref("ReadableStream")}} permettant de lire le contenu du body.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Stocke un {{domxref("Boolean")}} qui indique si le body a déjà été utilisé dans la réponse ou non.
+
+ +

Méthodes

+ +
+
{{domxref("Response.clone()")}}
+
Crée un clone de l'objet Response.
+
{{domxref("Response.error()")}}
+
Retourne un nouvel objet Response associé à une erreur réseau.
+
{{domxref("Response.redirect()")}}
+
Crée une nouvelle réponse avec une URL différente permettant de rediriger l'utilisateur.
+
+ +

Response implémente {{domxref("Body")}}, voici les différentes méthodes qui sont disponibles:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("ArrayBuffer")}} lorsqu'elle est résolue.
+
{{domxref("Body.blob()")}}
+
Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("Blob")}} lorsqu'elle est résolue.
+
{{domxref("Body.formData()")}}
+
Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("FormData")}} lorsqu'elle est résolue.
+
{{domxref("Body.json()")}}
+
Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne le résultat du parsing du body text, comme {{jsxref("JSON")}} ,lorsqu'elle est résolue.
+
{{domxref("Body.text()")}}
+
Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui est résolue avec un {{domxref("USVString")}} (text).
+
+ +

Exemples

+ +

Dans notre exemple basique d'utilisation de fetch (exemple), nous utilisons un simple appel fetch() pour récupérer une image et l'afficher dans un tag {{htmlelement("img")}}. L'appel fetch() retourne une promise qui est résolue avec un objet Response associé à l'opération de récupération de la ressource. Vous remarquerez que puisque nous récupérons une image, nous avons besoin d'utiliser {{domxref("Body.blob")}} (disponible dans le body de la {{domxref("Response")}}) pour attribuer le bon MIME type à la réponse.

+ +
var myImage = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  var objectURL = URL.createObjectURL(blob);
+  myImage.src = objectURL;
+});
+ +

Vous pouvez également utiliser le constructeur {{domxref("Response.Response()")}} pour créer votre propre objet Response:

+ +
var myResponse = new Response();
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Response")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/response/ok/index.html b/files/fr/web/api/response/ok/index.html deleted file mode 100644 index a64a14f384..0000000000 --- a/files/fr/web/api/response/ok/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Response.ok -slug: Web/API/Response/ok -tags: - - API - - Experimental - - Fetch - - Property - - Reference - - Response - - ok -translation_of: Web/API/Response/ok ---- -
{{APIRef("Fetch")}}
- -

La propriété en lecture seule ok de l'interface {{domxref("Response")}} contient un booléen correspondant au succès (codes de statut compris entre 200 et 299) ou à l'échec de la réponse.

- -

Syntaxe

- -
var myOK = response.ok;
- -

Valeur

- -

Un {{domxref("Boolean")}}.

- -

Exemple

- -

Dans notre exemple (voir la démonstration en ligne) nous créons un nouvel objet {{domxref("Request")}} en utilisant le constructeur {{domxref("Request.Request","Request()")}} avec le chemin vers un JPG en argument. On récupère (fetch en anglais) ensuite la requête en utilisant {{domxref("GlobalFetch.fetch()")}}, on extrait un blob de la réponse en utilisant {{domxref("Body.blob")}} pour créer un objet URL grâce à {{domxref("URL.createObjectURL")}} et l'afficher dans une balise {{htmlelement("img")}}.

- -
-

Note : Nous affichons la valeur de la propriété ok de la réponse dans la console en haut du bloc fetch().

-
- -
var myImage = document.querySelector('img');
-
-var myRequest = new Request('flowers.jpg');
-
-fetch(myRequest).then(function(response) {
-  console.log(response.ok); // retourne true si la réponse est retournée avec succès 
-  response.blob().then(function(myBlob) {
-    var objectURL = URL.createObjectURL(myBlob);
-    myImage.src = objectURL;
-  });
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Fetch','#dom-response-ok','ok')}}{{Spec2('Fetch')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Response.ok")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/response/ok/index.md b/files/fr/web/api/response/ok/index.md new file mode 100644 index 0000000000..a64a14f384 --- /dev/null +++ b/files/fr/web/api/response/ok/index.md @@ -0,0 +1,75 @@ +--- +title: Response.ok +slug: Web/API/Response/ok +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - Response + - ok +translation_of: Web/API/Response/ok +--- +
{{APIRef("Fetch")}}
+ +

La propriété en lecture seule ok de l'interface {{domxref("Response")}} contient un booléen correspondant au succès (codes de statut compris entre 200 et 299) ou à l'échec de la réponse.

+ +

Syntaxe

+ +
var myOK = response.ok;
+ +

Valeur

+ +

Un {{domxref("Boolean")}}.

+ +

Exemple

+ +

Dans notre exemple (voir la démonstration en ligne) nous créons un nouvel objet {{domxref("Request")}} en utilisant le constructeur {{domxref("Request.Request","Request()")}} avec le chemin vers un JPG en argument. On récupère (fetch en anglais) ensuite la requête en utilisant {{domxref("GlobalFetch.fetch()")}}, on extrait un blob de la réponse en utilisant {{domxref("Body.blob")}} pour créer un objet URL grâce à {{domxref("URL.createObjectURL")}} et l'afficher dans une balise {{htmlelement("img")}}.

+ +
+

Note : Nous affichons la valeur de la propriété ok de la réponse dans la console en haut du bloc fetch().

+
+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  console.log(response.ok); // retourne true si la réponse est retournée avec succès 
+  response.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Fetch','#dom-response-ok','ok')}}{{Spec2('Fetch')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Response.ok")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/rtciceserver/index.html b/files/fr/web/api/rtciceserver/index.html deleted file mode 100644 index 8974d49f65..0000000000 --- a/files/fr/web/api/rtciceserver/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: RTCIceServer -slug: Web/API/RTCIceServer -translation_of: Web/API/RTCIceServer ---- -

{{APIRef("WebRTC")}}

- -

RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur.

- -

Propriétés

- -
-
{{domxref("RTCIceServer.credential", "credential")}} {{optional_inline}}
-
Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si RTCIceServer est un serveur TURN.
-
{{domxref("RTCIceServer.credentialType", "credentialType")}} {{optional_inline}}
-
Si RTCIceServer est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est password.
-
{{domxref("RTCIceServer.url", "url")}} {{obsolete_inline}}
-
Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens.
-
{{domxref("RTCIceServer.urls", "urls")}}
-
Cette propriété est obligatoire, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur.
-
{{domxref("RTCIceServer.username", "username")}} {{optional_inline}}
-
Si RTCIceServer est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification.
-
- -

Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété urls; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation.

- -
-

Note : Les anciennes versions de la spécification WebRTC incluent une propriété url au lieu de urls; cela a été changé afin de vous permettre de spécifier plusieurs adresses pour chaque serveur dans la liste, comme le montre l'exemple ci-dessous.

-
- -

Constantes

- -

Enumeration RTCIceCredentialType 

- -

L'enumeration RTCIceCredentialType spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous.

- - - - - - - - - - - - - - - - -
ConstanteDescription
"password"un mot de passe d'aithentification. Voir {{RFC (5389, "", 10.2)}} pour plus de détails.
"token"La créance est un jeton d'accès à utiliser avec un système d'authentification tiers.
- -

Exemple

- -

La configuration ci-dessous établit deux serveurs ICE. Le premier, stun:stun.services.mozilla.com, nécessite une authentification, le nom d'utilisateur et le mot de passe sont donc fournis. Le second serveur a deux URLs : stun:stun.example.com et stun:stun-1.example.com.

- -
var configuration = {
-  iceServers: [{
-    urls: "stun:stun.services.mozilla.com",
-    username: "louis@mozilla.com",
-    credential: "webrtcdemo"
-  }, {
-    urls: [
-      "stun:stun.example.com",
-      "stun:stun-1.example.com"
-    ]
-   }]
-};
-
-var pc = new RTCPeerConnection(configuration);
- -

Une fois l'objet de configuration créé, il est passé dans le constructeur {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} pour l'utiliser comme configuration de la nouvelle connexion entre pairs.

- -

Compatibilité des navigateurs

- -

{{Compat("api.RTCIceServer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/rtciceserver/index.md b/files/fr/web/api/rtciceserver/index.md new file mode 100644 index 0000000000..8974d49f65 --- /dev/null +++ b/files/fr/web/api/rtciceserver/index.md @@ -0,0 +1,86 @@ +--- +title: RTCIceServer +slug: Web/API/RTCIceServer +translation_of: Web/API/RTCIceServer +--- +

{{APIRef("WebRTC")}}

+ +

RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur.

+ +

Propriétés

+ +
+
{{domxref("RTCIceServer.credential", "credential")}} {{optional_inline}}
+
Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si RTCIceServer est un serveur TURN.
+
{{domxref("RTCIceServer.credentialType", "credentialType")}} {{optional_inline}}
+
Si RTCIceServer est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est password.
+
{{domxref("RTCIceServer.url", "url")}} {{obsolete_inline}}
+
Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens.
+
{{domxref("RTCIceServer.urls", "urls")}}
+
Cette propriété est obligatoire, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur.
+
{{domxref("RTCIceServer.username", "username")}} {{optional_inline}}
+
Si RTCIceServer est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification.
+
+ +

Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété urls; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation.

+ +
+

Note : Les anciennes versions de la spécification WebRTC incluent une propriété url au lieu de urls; cela a été changé afin de vous permettre de spécifier plusieurs adresses pour chaque serveur dans la liste, comme le montre l'exemple ci-dessous.

+
+ +

Constantes

+ +

Enumeration RTCIceCredentialType 

+ +

L'enumeration RTCIceCredentialType spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous.

+ + + + + + + + + + + + + + + + +
ConstanteDescription
"password"un mot de passe d'aithentification. Voir {{RFC (5389, "", 10.2)}} pour plus de détails.
"token"La créance est un jeton d'accès à utiliser avec un système d'authentification tiers.
+ +

Exemple

+ +

La configuration ci-dessous établit deux serveurs ICE. Le premier, stun:stun.services.mozilla.com, nécessite une authentification, le nom d'utilisateur et le mot de passe sont donc fournis. Le second serveur a deux URLs : stun:stun.example.com et stun:stun-1.example.com.

+ +
var configuration = {
+  iceServers: [{
+    urls: "stun:stun.services.mozilla.com",
+    username: "louis@mozilla.com",
+    credential: "webrtcdemo"
+  }, {
+    urls: [
+      "stun:stun.example.com",
+      "stun:stun-1.example.com"
+    ]
+   }]
+};
+
+var pc = new RTCPeerConnection(configuration);
+ +

Une fois l'objet de configuration créé, il est passé dans le constructeur {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} pour l'utiliser comme configuration de la nouvelle connexion entre pairs.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.RTCIceServer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/rtcpeerconnection/index.html b/files/fr/web/api/rtcpeerconnection/index.html deleted file mode 100644 index 6b4d2f4a02..0000000000 --- a/files/fr/web/api/rtcpeerconnection/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: RTCPeerConnection -slug: Web/API/RTCPeerConnection -browser-compat: api.RTCPeerConnection -translation_of: Web/API/RTCPeerConnection ---- -
{{APIRef('WebRTC')}}
- -

L'interface RTCPeerConnection représente une connexion WebRTC entre un ordinateur local et un pair distant. Elle fournit des méthodes pour se connecter à un pair distant, entretenir et surveiller la connexion et fermer la connexion dès qu'elle n'est plus nécessaire.

- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
RTCPeerConnection()
-
Renvoie un nouvel objet RTCPeerConnection qui représente la connexion entre l'appareil local et le pair distant.
-
- -

Méthodes statiques

- -
-
generateCertificate()
-
Crée un certificat X.509 et la clé privée correspondante. Cette méthode renvoie une promesse dont la valeur de résolution sera le nouvel objet RTCCertificate une fois généré.
-
- -

Propriétés

- -

Cette interface hérite également des propriétés de EventTarget.

- -
-
canTrickleIceCandidates {{ReadOnlyInline}}
-
Renvoie un booléen qui indique si un pair distant peut accepter ou non les candidats ICE au goutte-à-goutte (trickled ICE candidates). -
- -
connectionState {{ReadOnlyInline}}
-
Indique l'état actuel de la connexion au pair en renvoyant une de ces chaînes de caractères new, connecting, connected, disconnected, failed ou closed. -
- -
currentLocalDescription {{ReadOnlyInline}}
-
Renvoie un objet RTCSessionDescription qui décrit la partie locale de la connexion qui a été négociée avec succès le plus récemment depuis la dernière fois où cette connexion RTCPeerConnection a terminé de négocier et s'est connectée à un pair distant. Cet objet inclut également une liste des candidats ICE qui peuvent avoir déjà été générés par l'agent ICE depuis que l'offre ou la réponse représentée par la description a été instanciée en premier lieu.
- -
currentRemoteDescription {{ReadOnlyInline}}
-
Renvoie un objet RTCSessionDescription qui décrit la connexion pour le pair distant pour la connexion qui a été négociée avec succès le plus récemment depuis la dernière fois où cette connexion RTCPeerConnection a terminé de négocier et s'est connectée à un pair distant. Cet objet inclut également une liste des candidats ICE qui peuvent avoir déjà été générés par l'agent ICE depuis que l'offre ou la réponse représentée par la description a été instanciée en premier lieu.
- -
iceConnectionState {{ReadOnlyInline}}
-
Renvoie une chaîne de caractères qui indique l'état de l'agent ICE associée à cette connexion RTCPeerConnection. La chaîne de caractères peut être l'une de celles-ci : new, checking, connected, completed, failed, disconnected ou closed.
- -
iceGatheringState {{ReadOnlyInline}}
-
Renvoie une chaîne de caractères qui décrit l'état de collection ICE de la connexion. Cela permet de détecter par exemple lorsque la collecte des candidats ICE a terminé. Les valeurs possibles pour cette chaîne sont new, gathering ou complete.
- -
localDescription {{ReadOnlyInline}}
-
Renvoie un objet RTCSessionDescription qui décrit la session pour la partie locale de la connexion. Si la session n'a pas encore été initialisée, renvoie null.
- -
peerIdentity {{ReadOnlyInline}}
-
Renvoie une promesse dont la valeur de résolution sera un objet RTCIdentityAssertion contenant une chaîne de caractères identifiant le pair distant. Une fois que la promesse a été résolue avec succès, l'identité obtenue est celle du pair cible et ne changera pas pour la durée de la connexion.
- -
pendingLocalDescription {{ReadOnlyInline}}
-
Renvoie un objet RTCSessionDescription qui décrit un changement de configuration en attente pour la partie locale de la connexion. Cela ne décrit pas la connexion dans son état actuel mais telle qu'elle pourrait être dans un futur proche.
- -
pendingRemoteDescription {{ReadOnlyInline}}
-
Renvoie un objet RTCSessionDescription qui décrit un changement de configuration en attente pour la partie distante de la connexion. Cela ne décrit pas la connexion dans son état actuel mais telle qu'elle pourrait être dans un futur proche.
- -
remoteDescription {{ReadOnlyInline}}
-
Renvoie un objet RTCSessionDescription qui décrit la session, y compris la configuration, les informations sur le média pour la partie distante de la connexion. Si la session n'est pas encore initialisée, renvoie null.
- -
sctp {{ReadOnlyInline}}
-
Renvoie un objet RTCSctpTransport qui décrit la couche de transport SCTP sur laquelle les données SCTP sont envoyées et reçues. Si SCTP n'a pas été négocié, renvoie null.
- -
signalingState {{ReadOnlyInline}}
-
Renvoie une chaîne de caractères qui décrit l'état du processus de signal pour la partie locale de la connexion lors de la connexion ou de la reconnexion à un autre pair. Cette chaîne peut avoir l'une des valeurs suivantes : stable, have-local-offer, have-remote-offer, have-local-pranswer ou have-remote-pranswer.
-
- -

Gestionnaires d'évènements

- -

Cette interface hérite des gestionnaires d'évènements de EventTarget.

- -
-
onconnectionstatechange
-
Un gestionnaire d'évènements appelé pour gérer l'évènement {{DOMxRef("RTCPeerConnection/connectionstatechange_event", "connectionstatechange")}}. Cet évènement se produit lorsque l'état aggrégé de la connexion évolue. L'état aggrégé correspond à la combinaison des états de l'ensemble des transports de réseau individuel utilisés par la connexion
- -
ondatachannel
-
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/datachannel_event", "datachannel")}}. Cet évènement de type RTCDataChannelEvent est envoyé lorsqu'un canal RTCDataChannel est ajouté à la connexion par le pair distant qui a appelé createDataChannel().
- -
onicecandidate
-
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icecandidate_event", "icecandidate")}}. Cela se produit lorsque l'agent ICE local a besoin de délivrer un message à l'autre pair via le serveur de signal.
- -
onicecandidateerror
-
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icecandidateerror_event", "icecandidateerror")}}. Cet évènement est déclenché lorsqu'une erreur se produit lors du processus de collecte des candidats ICE.
- -
oniceconnectionstatechange
-
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/iceconnectionstatechange_event", "iceconnectionstatechange")}}. Cela se produit lorsque l'agent ICE local a besoin de délivrer un message à l'autre pair via le serveur de signal.
- -
onicegatheringstatechange
-
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icegatheringstatechange_event", "icegatheringstatechange")}}. Cela se produit lorsque l'état de collecte ICE évolue.
- -
onnegotiationneeded
-
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/negotiationneeded_event", "negotiationneeded")}}. Cet évènement est déclenché lorsqu'un changement a eu lieu et qui nécessite une négociation de session. La négociation devrait être menée par le requêtant, car certaines modifications de sessions ne peuvent pas être négociés par le répondant.
- -
onsignalingstatechange
-
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/signalingstatechange_event", "signalingstatechange")}}. La fonction reçoit en entrée un évènement qui est celui envoyé lorsque l'état signalingState du pair de la connexion change. Cela peut avoir lieu suite à un appel à setLocalDescription() ou à setRemoteDescription().
- -
ontrack
-
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/track_event", "track")}}. L'évènement reçu en argument de la fonction est de type RTCTrackEvent. Cet évènement est envoyé lorsqu'un nouvel objet entrant MediaStreamTrack a été créé et associé avec un objet RTCRtpReceiver ajouté à l'ensemble des destinataires de la connexion.
-
- -

Propriétés obsolètes

- -
-
onaddstream {{Obsolete_Inline}}
-
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement obsolète {{DOMxRef("RTCPeerConnection/addstream_event", "addstream")}}.
-
onremovestream {{Obsolete_Inline}}
-
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement obsolète {{DOMxRef("RTCPeerConnection/removestream_event", "removestream")}}.
-
- -

Méthodes

- -

Cette interface hérite également des méthodes de EventTarget.

- -
-
addIceCandidate()
-
Ajoute un nouveau candidat distant à la description distante de RTCPeerConnection qui décrit l'état à l'extrémité distante de la connexion
- -
addTrack()
-
Ajoute un nouvel objet MediaStreamTrack à l'ensemble des pistes qui seront transmises au pair distant.
- -
addTransceiver()
-
Crée un nouvel objet RTCRtpTransceiver et l'ajoute à l'ensemble des émetteurs-récepteurs associés à la connexion. Chaque émetteur-récepteur représente un flux bidirectionnel associé à un récepteur RTCRtpSender et à un émetteur RTCRtpReceiver.
- -
close()
-
Ferme la connexion courante vers le pair.
- -
createAnswer()
-
Initie la création d'une réponse SDP à une offre reçue par un pair distant pendant la négociation offre/réponse d'une connexion WebRTC. La réponse contient des informations sur les médias déjà attachés à la session, les codecs et options pris en charge par le navigateur ainsi que sur les éventuels candidats ICE déjà collectés.
- -
createDataChannel()
-
Initie la création d'un nouveau canal relié au pair distant qui permettra de transmettre tout type de données. Cela peut être utile pour le transfert de contenu en arrière-plan comme des images, fichiers, discussions, paquets pour l'état d'un jeu multijoueur, etc.
- -
createOffer()
-
Initie la création d'une offre SDP afin de démarrer une nouvelle connexion WebRTC avec un pair distant. L'offre SDP inclut des informations à propos des éventuels objets MediaStreamTrack déjà attachés à la session WebRTC, des codecs, des options prises en charge par le navigateur ainsi que sur les éventuels candidats déjà collectés par l'agent ICE afin de pouvoir envoyer ces informations via le canal de signalement à un pair potentiel pour demander une connexion ou mettre à jour la configuration d'une connexion existante.
- -
getConfiguration()
-
Renvoie un objet RTCConfiguration qui indique la configuration courante de la connexion.
- -
getIdentityAssertion()
-
Initie la collecte d'une assertion d'identité et renvoie une promesse qui est résolue en l'assertion d'identité encodée dans une chaîne de caractères. Cette méthode aura un effet uniquement si signalingState ne vaut pas closed.
- -
getReceivers()
-
Renvoie un tableu d'objets RTCRtpReceiver dont chacun représente un récepteur RTP.
- -
getSenders()
-
Renvoie un tableau d'objets RTCRtpSender dont chacun représente un émetteur RTP dont le rôle est de transmettre les données d'une piste.
- -
getStats()
-
Renvoie une promesse dont la valeur de résolution sont des statistiques quant à la connexion globale ou à la piste MediaStreamTrack indiquée.
- -
getTransceivers()
-
Renvoie une liste de l'ensemble des objets RTCRtpTransceiver utilisés afin d'envoyer et de recevoir des données sur la connexion.
- -
removeTrack()
-
Indique à la partie locale de la connexion d'arrêter d'envoyer des médias sur la piste indiquée sans pour autant retirer l'objet RTCRtpSender correspondant de la liste des récepteurs telle que fournie par getSenders(). Si la piste est déjà arrêtée ou si elle n'est pas dans la liste des émetteurs de la connexion, cette méthode n'a pas d'effet.
- -
restartIce()
-
Permet de demander facilement une nouvelle collecte de candidats ICE à chaque extrémité de la connexion. Cela simplifie le processus en permettant à l'appelant ou au recevant d'utiliser la même méthode pour déclencher un redémarrage ICE.
- -
setConfiguration()
-
Définit la configuration courante de la connexion en fonction des valeurs incluses dans l'objet RTCConfiguration passé en argument. Cela permet de modifier les serveurs ICE utilisés par la connexion ainsi que les règles de transport utilisées.
- -
setIdentityProvider()
-
Définit le fournisseur d'identité (Identity Provider ou IdP) par le triplet fourni en paramètres : le nom, le protocole de communication et le nom d'utilisateur. Le protocole et le nom d'utilisateur sont optionnels.
- -
setLocalDescription()
-
Modifie la description locale associée à la connexion. Cette description définit les propriétés de l'extrémité locale de la connexion, y compris le format de média. Cette méthode renvoie une promesse qui est résolue de façon asynchrone lorsque la description a été modifiée.
- -
setRemoteDescription()
-
Définit la description de la connexion pour l'extrémité distante pour l'offre ou la réponse courante. Cette description définit les propriétés de l'extrémité distante de la connexion, y compris le format de média. Cette méthode renvoie une promesse qui est résolue de façon asynchrone lorsque la description a été modifiée.
-
- -

Méthodes obsolètes

- -
-
addStream() {{Obsolete_Inline}}
-
Ajoute un objet MediaStream comme source audio ou vidéo locale. La méthode addTrack() devrait être utilisée à la place pour chaque piste qu'on souhaite envoyer au pair distant.
- -
createDTMFSender() {{Obsolete_Inline}}
-
Crée un nouvel émetteur RTCDTMFSender associé à une piste MediaStreamTrack spécifique et qui est capable d'envoyer des signaux téléphoniques DTMF via la connexion.
- -
getStreamById() {{Obsolete_Inline}}
-
Renvoie l'objet MediaStream ayant l'identifiant indiqué qui est associé à l'extrémité locale ou distante de la connexion. Cette propriété a été remplacée par les méthodes getSenders() et getReceivers().
- -
removeStream() {{Obsolete_Inline}}
-
Supprime un flux MediaStream qui est une source audio ou vidéo locale. Cette méthode est obsolète, on doit privilégier removeTrack() à la place.
-
- -

Évènements

- -

On pourra intercepter ces évènements grâce à addEventListener() ou en affectant un gestionnaire d'évènement sur la propriété onnomEvenement de cette interface.

- -
-
connectionstatechange
-
Envoyé lorsque l'état de connectivité global de la connexion RTCPeerConnection évolue. Également disponible via la propriété de gestion d'évènement onconnectionstatechange.
- -
datachannel
-
Envoyé lorsque le pair distant ajoute un canal RTCDataChannel à la connexion. Également disponible via la propriété de gestion d'évènement ondatachannel.
- -
icecandidate
-
Envoyé afin de demander à ce que le candidat indiqué soit transmis au pair distant. Également disponible via la propriété de gestion d'évènement onicecandidate.
- -
icecandidateerror
-
Envoyé à la connexion si une erreur se produit lors de la collecte des candidats ICE. L'évènement décrit l'erreur. Également disponible via la propriété de gestion d'évènement onicecandidateerror.
- -
iceconnectionstatechange
-
Envoyé lorsque l'état de la connexion ICE change (par exemple lorsqu'elle se déconnecte). Également disponible via la propriété de gestion d'évènement oniceconnectionstatechange.
- -
icegatheringstatechange
-
Envoyé lorsque l'état de collecte des couches ICE, tel que reflété par iceGatheringState, évolue. Cela indique si la négociation ICE n'a pas encore commencé (new), a commencé la collecte des candidats (gathering) ou si elle est terminée (complete). Également disponible via la propriété de gestion d'évènement onicegatheringstatechange.
- -
negotiationneeded
-
Envoyé lorsqu'une négociation ou de la renégociation de la connexion ICE doit être réalisée. Cela peut se produire à l'ouverture d'une connexion mais aussi lorsqu'il est nécessaire de s'adapter à des conditions réseau changeantes. Le récepteur devrait répondre en créant une offre et en l'envoyant à l'autre pair. Également disponible via la propriété de gestion d'évènement onnegotiationneeded.
- -
signalingstatechange
-
Envoyé lorsque l'état de signal ICE de la connexion change. Également disponible via la propriété de gestion d'évènement onsignalingstatechange.
- -
track
-
Envoyé après qu'une nouvelle piste ait été ajoutée à une des instances RTCRtpReceiver faisant partie de la connexion. Également disponible via la propriété de gestion d'évènement ontrack.
-
- -

Évènements obsolètes

- -
-
addstream {{Obsolete_Inline}}
-
Envoyé lorsqu'un nouveau flux MediaStream a été ajouté à la connexion. Plutôt que d'écouter cet évènement obsolète, on privilégiera les évènements track. Un tel évènement est envoyé pour chaque piste MediaStreamTrack ajoutée à la connexion. Également disponible via la propriété onaddstream.
- -
removestream {{Obsolete_Inline}}
-
Envoyé lorsqu'un flux MediaStream est retiré de la connexion. Plutôt que d'écouter cet évènement obsolète, on privilégiera les évènements removetrack pour chaque flux. Également disponible via la propriété onremovestream.
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/rtcpeerconnection/index.md b/files/fr/web/api/rtcpeerconnection/index.md new file mode 100644 index 0000000000..6b4d2f4a02 --- /dev/null +++ b/files/fr/web/api/rtcpeerconnection/index.md @@ -0,0 +1,252 @@ +--- +title: RTCPeerConnection +slug: Web/API/RTCPeerConnection +browser-compat: api.RTCPeerConnection +translation_of: Web/API/RTCPeerConnection +--- +
{{APIRef('WebRTC')}}
+ +

L'interface RTCPeerConnection représente une connexion WebRTC entre un ordinateur local et un pair distant. Elle fournit des méthodes pour se connecter à un pair distant, entretenir et surveiller la connexion et fermer la connexion dès qu'elle n'est plus nécessaire.

+ +

{{InheritanceDiagram}}

+ +

Constructeur

+ +
+
RTCPeerConnection()
+
Renvoie un nouvel objet RTCPeerConnection qui représente la connexion entre l'appareil local et le pair distant.
+
+ +

Méthodes statiques

+ +
+
generateCertificate()
+
Crée un certificat X.509 et la clé privée correspondante. Cette méthode renvoie une promesse dont la valeur de résolution sera le nouvel objet RTCCertificate une fois généré.
+
+ +

Propriétés

+ +

Cette interface hérite également des propriétés de EventTarget.

+ +
+
canTrickleIceCandidates {{ReadOnlyInline}}
+
Renvoie un booléen qui indique si un pair distant peut accepter ou non les candidats ICE au goutte-à-goutte (trickled ICE candidates). +
+ +
connectionState {{ReadOnlyInline}}
+
Indique l'état actuel de la connexion au pair en renvoyant une de ces chaînes de caractères new, connecting, connected, disconnected, failed ou closed. +
+ +
currentLocalDescription {{ReadOnlyInline}}
+
Renvoie un objet RTCSessionDescription qui décrit la partie locale de la connexion qui a été négociée avec succès le plus récemment depuis la dernière fois où cette connexion RTCPeerConnection a terminé de négocier et s'est connectée à un pair distant. Cet objet inclut également une liste des candidats ICE qui peuvent avoir déjà été générés par l'agent ICE depuis que l'offre ou la réponse représentée par la description a été instanciée en premier lieu.
+ +
currentRemoteDescription {{ReadOnlyInline}}
+
Renvoie un objet RTCSessionDescription qui décrit la connexion pour le pair distant pour la connexion qui a été négociée avec succès le plus récemment depuis la dernière fois où cette connexion RTCPeerConnection a terminé de négocier et s'est connectée à un pair distant. Cet objet inclut également une liste des candidats ICE qui peuvent avoir déjà été générés par l'agent ICE depuis que l'offre ou la réponse représentée par la description a été instanciée en premier lieu.
+ +
iceConnectionState {{ReadOnlyInline}}
+
Renvoie une chaîne de caractères qui indique l'état de l'agent ICE associée à cette connexion RTCPeerConnection. La chaîne de caractères peut être l'une de celles-ci : new, checking, connected, completed, failed, disconnected ou closed.
+ +
iceGatheringState {{ReadOnlyInline}}
+
Renvoie une chaîne de caractères qui décrit l'état de collection ICE de la connexion. Cela permet de détecter par exemple lorsque la collecte des candidats ICE a terminé. Les valeurs possibles pour cette chaîne sont new, gathering ou complete.
+ +
localDescription {{ReadOnlyInline}}
+
Renvoie un objet RTCSessionDescription qui décrit la session pour la partie locale de la connexion. Si la session n'a pas encore été initialisée, renvoie null.
+ +
peerIdentity {{ReadOnlyInline}}
+
Renvoie une promesse dont la valeur de résolution sera un objet RTCIdentityAssertion contenant une chaîne de caractères identifiant le pair distant. Une fois que la promesse a été résolue avec succès, l'identité obtenue est celle du pair cible et ne changera pas pour la durée de la connexion.
+ +
pendingLocalDescription {{ReadOnlyInline}}
+
Renvoie un objet RTCSessionDescription qui décrit un changement de configuration en attente pour la partie locale de la connexion. Cela ne décrit pas la connexion dans son état actuel mais telle qu'elle pourrait être dans un futur proche.
+ +
pendingRemoteDescription {{ReadOnlyInline}}
+
Renvoie un objet RTCSessionDescription qui décrit un changement de configuration en attente pour la partie distante de la connexion. Cela ne décrit pas la connexion dans son état actuel mais telle qu'elle pourrait être dans un futur proche.
+ +
remoteDescription {{ReadOnlyInline}}
+
Renvoie un objet RTCSessionDescription qui décrit la session, y compris la configuration, les informations sur le média pour la partie distante de la connexion. Si la session n'est pas encore initialisée, renvoie null.
+ +
sctp {{ReadOnlyInline}}
+
Renvoie un objet RTCSctpTransport qui décrit la couche de transport SCTP sur laquelle les données SCTP sont envoyées et reçues. Si SCTP n'a pas été négocié, renvoie null.
+ +
signalingState {{ReadOnlyInline}}
+
Renvoie une chaîne de caractères qui décrit l'état du processus de signal pour la partie locale de la connexion lors de la connexion ou de la reconnexion à un autre pair. Cette chaîne peut avoir l'une des valeurs suivantes : stable, have-local-offer, have-remote-offer, have-local-pranswer ou have-remote-pranswer.
+
+ +

Gestionnaires d'évènements

+ +

Cette interface hérite des gestionnaires d'évènements de EventTarget.

+ +
+
onconnectionstatechange
+
Un gestionnaire d'évènements appelé pour gérer l'évènement {{DOMxRef("RTCPeerConnection/connectionstatechange_event", "connectionstatechange")}}. Cet évènement se produit lorsque l'état aggrégé de la connexion évolue. L'état aggrégé correspond à la combinaison des états de l'ensemble des transports de réseau individuel utilisés par la connexion
+ +
ondatachannel
+
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/datachannel_event", "datachannel")}}. Cet évènement de type RTCDataChannelEvent est envoyé lorsqu'un canal RTCDataChannel est ajouté à la connexion par le pair distant qui a appelé createDataChannel().
+ +
onicecandidate
+
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icecandidate_event", "icecandidate")}}. Cela se produit lorsque l'agent ICE local a besoin de délivrer un message à l'autre pair via le serveur de signal.
+ +
onicecandidateerror
+
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icecandidateerror_event", "icecandidateerror")}}. Cet évènement est déclenché lorsqu'une erreur se produit lors du processus de collecte des candidats ICE.
+ +
oniceconnectionstatechange
+
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/iceconnectionstatechange_event", "iceconnectionstatechange")}}. Cela se produit lorsque l'agent ICE local a besoin de délivrer un message à l'autre pair via le serveur de signal.
+ +
onicegatheringstatechange
+
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icegatheringstatechange_event", "icegatheringstatechange")}}. Cela se produit lorsque l'état de collecte ICE évolue.
+ +
onnegotiationneeded
+
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/negotiationneeded_event", "negotiationneeded")}}. Cet évènement est déclenché lorsqu'un changement a eu lieu et qui nécessite une négociation de session. La négociation devrait être menée par le requêtant, car certaines modifications de sessions ne peuvent pas être négociés par le répondant.
+ +
onsignalingstatechange
+
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/signalingstatechange_event", "signalingstatechange")}}. La fonction reçoit en entrée un évènement qui est celui envoyé lorsque l'état signalingState du pair de la connexion change. Cela peut avoir lieu suite à un appel à setLocalDescription() ou à setRemoteDescription().
+ +
ontrack
+
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/track_event", "track")}}. L'évènement reçu en argument de la fonction est de type RTCTrackEvent. Cet évènement est envoyé lorsqu'un nouvel objet entrant MediaStreamTrack a été créé et associé avec un objet RTCRtpReceiver ajouté à l'ensemble des destinataires de la connexion.
+
+ +

Propriétés obsolètes

+ +
+
onaddstream {{Obsolete_Inline}}
+
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement obsolète {{DOMxRef("RTCPeerConnection/addstream_event", "addstream")}}.
+
onremovestream {{Obsolete_Inline}}
+
Un gestionnaire d'évènements qui définit une fonction appelée pour gérer l'évènement obsolète {{DOMxRef("RTCPeerConnection/removestream_event", "removestream")}}.
+
+ +

Méthodes

+ +

Cette interface hérite également des méthodes de EventTarget.

+ +
+
addIceCandidate()
+
Ajoute un nouveau candidat distant à la description distante de RTCPeerConnection qui décrit l'état à l'extrémité distante de la connexion
+ +
addTrack()
+
Ajoute un nouvel objet MediaStreamTrack à l'ensemble des pistes qui seront transmises au pair distant.
+ +
addTransceiver()
+
Crée un nouvel objet RTCRtpTransceiver et l'ajoute à l'ensemble des émetteurs-récepteurs associés à la connexion. Chaque émetteur-récepteur représente un flux bidirectionnel associé à un récepteur RTCRtpSender et à un émetteur RTCRtpReceiver.
+ +
close()
+
Ferme la connexion courante vers le pair.
+ +
createAnswer()
+
Initie la création d'une réponse SDP à une offre reçue par un pair distant pendant la négociation offre/réponse d'une connexion WebRTC. La réponse contient des informations sur les médias déjà attachés à la session, les codecs et options pris en charge par le navigateur ainsi que sur les éventuels candidats ICE déjà collectés.
+ +
createDataChannel()
+
Initie la création d'un nouveau canal relié au pair distant qui permettra de transmettre tout type de données. Cela peut être utile pour le transfert de contenu en arrière-plan comme des images, fichiers, discussions, paquets pour l'état d'un jeu multijoueur, etc.
+ +
createOffer()
+
Initie la création d'une offre SDP afin de démarrer une nouvelle connexion WebRTC avec un pair distant. L'offre SDP inclut des informations à propos des éventuels objets MediaStreamTrack déjà attachés à la session WebRTC, des codecs, des options prises en charge par le navigateur ainsi que sur les éventuels candidats déjà collectés par l'agent ICE afin de pouvoir envoyer ces informations via le canal de signalement à un pair potentiel pour demander une connexion ou mettre à jour la configuration d'une connexion existante.
+ +
getConfiguration()
+
Renvoie un objet RTCConfiguration qui indique la configuration courante de la connexion.
+ +
getIdentityAssertion()
+
Initie la collecte d'une assertion d'identité et renvoie une promesse qui est résolue en l'assertion d'identité encodée dans une chaîne de caractères. Cette méthode aura un effet uniquement si signalingState ne vaut pas closed.
+ +
getReceivers()
+
Renvoie un tableu d'objets RTCRtpReceiver dont chacun représente un récepteur RTP.
+ +
getSenders()
+
Renvoie un tableau d'objets RTCRtpSender dont chacun représente un émetteur RTP dont le rôle est de transmettre les données d'une piste.
+ +
getStats()
+
Renvoie une promesse dont la valeur de résolution sont des statistiques quant à la connexion globale ou à la piste MediaStreamTrack indiquée.
+ +
getTransceivers()
+
Renvoie une liste de l'ensemble des objets RTCRtpTransceiver utilisés afin d'envoyer et de recevoir des données sur la connexion.
+ +
removeTrack()
+
Indique à la partie locale de la connexion d'arrêter d'envoyer des médias sur la piste indiquée sans pour autant retirer l'objet RTCRtpSender correspondant de la liste des récepteurs telle que fournie par getSenders(). Si la piste est déjà arrêtée ou si elle n'est pas dans la liste des émetteurs de la connexion, cette méthode n'a pas d'effet.
+ +
restartIce()
+
Permet de demander facilement une nouvelle collecte de candidats ICE à chaque extrémité de la connexion. Cela simplifie le processus en permettant à l'appelant ou au recevant d'utiliser la même méthode pour déclencher un redémarrage ICE.
+ +
setConfiguration()
+
Définit la configuration courante de la connexion en fonction des valeurs incluses dans l'objet RTCConfiguration passé en argument. Cela permet de modifier les serveurs ICE utilisés par la connexion ainsi que les règles de transport utilisées.
+ +
setIdentityProvider()
+
Définit le fournisseur d'identité (Identity Provider ou IdP) par le triplet fourni en paramètres : le nom, le protocole de communication et le nom d'utilisateur. Le protocole et le nom d'utilisateur sont optionnels.
+ +
setLocalDescription()
+
Modifie la description locale associée à la connexion. Cette description définit les propriétés de l'extrémité locale de la connexion, y compris le format de média. Cette méthode renvoie une promesse qui est résolue de façon asynchrone lorsque la description a été modifiée.
+ +
setRemoteDescription()
+
Définit la description de la connexion pour l'extrémité distante pour l'offre ou la réponse courante. Cette description définit les propriétés de l'extrémité distante de la connexion, y compris le format de média. Cette méthode renvoie une promesse qui est résolue de façon asynchrone lorsque la description a été modifiée.
+
+ +

Méthodes obsolètes

+ +
+
addStream() {{Obsolete_Inline}}
+
Ajoute un objet MediaStream comme source audio ou vidéo locale. La méthode addTrack() devrait être utilisée à la place pour chaque piste qu'on souhaite envoyer au pair distant.
+ +
createDTMFSender() {{Obsolete_Inline}}
+
Crée un nouvel émetteur RTCDTMFSender associé à une piste MediaStreamTrack spécifique et qui est capable d'envoyer des signaux téléphoniques DTMF via la connexion.
+ +
getStreamById() {{Obsolete_Inline}}
+
Renvoie l'objet MediaStream ayant l'identifiant indiqué qui est associé à l'extrémité locale ou distante de la connexion. Cette propriété a été remplacée par les méthodes getSenders() et getReceivers().
+ +
removeStream() {{Obsolete_Inline}}
+
Supprime un flux MediaStream qui est une source audio ou vidéo locale. Cette méthode est obsolète, on doit privilégier removeTrack() à la place.
+
+ +

Évènements

+ +

On pourra intercepter ces évènements grâce à addEventListener() ou en affectant un gestionnaire d'évènement sur la propriété onnomEvenement de cette interface.

+ +
+
connectionstatechange
+
Envoyé lorsque l'état de connectivité global de la connexion RTCPeerConnection évolue. Également disponible via la propriété de gestion d'évènement onconnectionstatechange.
+ +
datachannel
+
Envoyé lorsque le pair distant ajoute un canal RTCDataChannel à la connexion. Également disponible via la propriété de gestion d'évènement ondatachannel.
+ +
icecandidate
+
Envoyé afin de demander à ce que le candidat indiqué soit transmis au pair distant. Également disponible via la propriété de gestion d'évènement onicecandidate.
+ +
icecandidateerror
+
Envoyé à la connexion si une erreur se produit lors de la collecte des candidats ICE. L'évènement décrit l'erreur. Également disponible via la propriété de gestion d'évènement onicecandidateerror.
+ +
iceconnectionstatechange
+
Envoyé lorsque l'état de la connexion ICE change (par exemple lorsqu'elle se déconnecte). Également disponible via la propriété de gestion d'évènement oniceconnectionstatechange.
+ +
icegatheringstatechange
+
Envoyé lorsque l'état de collecte des couches ICE, tel que reflété par iceGatheringState, évolue. Cela indique si la négociation ICE n'a pas encore commencé (new), a commencé la collecte des candidats (gathering) ou si elle est terminée (complete). Également disponible via la propriété de gestion d'évènement onicegatheringstatechange.
+ +
negotiationneeded
+
Envoyé lorsqu'une négociation ou de la renégociation de la connexion ICE doit être réalisée. Cela peut se produire à l'ouverture d'une connexion mais aussi lorsqu'il est nécessaire de s'adapter à des conditions réseau changeantes. Le récepteur devrait répondre en créant une offre et en l'envoyant à l'autre pair. Également disponible via la propriété de gestion d'évènement onnegotiationneeded.
+ +
signalingstatechange
+
Envoyé lorsque l'état de signal ICE de la connexion change. Également disponible via la propriété de gestion d'évènement onsignalingstatechange.
+ +
track
+
Envoyé après qu'une nouvelle piste ait été ajoutée à une des instances RTCRtpReceiver faisant partie de la connexion. Également disponible via la propriété de gestion d'évènement ontrack.
+
+ +

Évènements obsolètes

+ +
+
addstream {{Obsolete_Inline}}
+
Envoyé lorsqu'un nouveau flux MediaStream a été ajouté à la connexion. Plutôt que d'écouter cet évènement obsolète, on privilégiera les évènements track. Un tel évènement est envoyé pour chaque piste MediaStreamTrack ajoutée à la connexion. Également disponible via la propriété onaddstream.
+ +
removestream {{Obsolete_Inline}}
+
Envoyé lorsqu'un flux MediaStream est retiré de la connexion. Plutôt que d'écouter cet évènement obsolète, on privilégiera les évènements removetrack pour chaque flux. Également disponible via la propriété onremovestream.
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html deleted file mode 100644 index 152e67aa86..0000000000 --- a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: RTCPeerConnection.setConfiguration() -slug: Web/API/RTCPeerConnection/setConfiguration -tags: - - Experimental - - Méthode - - Reference - - WebRTC - - setConfiguration -translation_of: Web/API/RTCPeerConnection/setConfiguration ---- -
{{APIRef("WebRTC")}}{{SeeCompatTable}}
- -

La méthode RTCPeerConnection.setConfiguration() définit la configuration courante pour la connexion {{domxref("RTCPeerConnection")}} en fonction des valeurs des propriétés de l'objet {{domxref("RTCConfiguration")}} passé en argument. Cela permet de modifier les serveurs ICE et les règles de transport utilisés par la connexion.

- -

Le cas d'usage le plus probable (bien qu'il ne soit probablement pas répandu) est le remplacement des serveurs ICE à utiliser. Voici deux scénarios pour lesquels cela pourrait se produire :

- - - -
-

Note : On ne peut pas changer les informations d'identité d'une connexion une fois que celle-ci a été créée.

-
- -

Syntaxe

- -
RTCPeerConnection.setConfiguration(configuration);
- -

Paramètres

- -
-
configuration
-
Un objet {{domxref("RTCConfiguration")}} qui fournit les options à appliquer à la connexion. Les changements ne sont pas utilisés en addition mais remplacent les valeurs existantes.
-
- -

Exceptions

- -
-
InvalidAccessError
-
Une ou plusieurs URL indiquées dans configuration.iceServers sont des serveurs {{Glossary("TURN")}} mais les informations d'authentification ne sont pas complètes (il manque {{domxref("RTCIceServer.username")}} ou {{domxref("RTCIceServer.credentials")}}). Cela empêche une connexion/identification correcte sur le serveur.
-
InvalidModificationError
-
L'objet configuration contient des changements relatifs à l'identité alors que la connexion a déjà ces informations indiquées. Cela se produit lorsque configuration.peerIdentity ou configuration.certificates sont définies et que leurs valeurs diffèrent de la configuration courante.
-
InvalidStateError
-
La connexion ({{domxref("RTCPeerConnection")}}) est fermée.
-
SyntaxError
-
Une ou plusieurs URL fournies dans la liste configuration.iceServers sont invalides.
-
- -

Exemples

- -

Dans cet exemple, on a déjà determiné qu'un redémarrage ICE est nécessaire et que la négociation ICE doit se faire sur un nouveau serveur.

- -
var restartConfig = { iceServers: [{
-                          urls: "turn:asia.myturnserver.net",
-                          username: "allie@oopcode.com",
-                          credential: "topsecretpassword"
-                      }]
-};
-
-myPeerConnection.setConfiguration(restartConfig);
-
-myPeerConnection.createOffer({"iceRestart": true}).then(function(offer) {
-  return myPeerConnection.setLocalDescription(offer);
-})
-.then(function() {
-  // send the offer to the other peer using the signaling server
-})
-.catch(reportError);
- -

Pour commencer, on crée une {{domxref("RTCConfiguration")}}, restartConfig, en indiquant le nouveau serveur ICE et les informations de connexion associées. Cet objet est alors passé à setConfiguration(). La négociation ICE est redémarrée via {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}} pour laquelle on indique true pour l'option iceRestart. Ensuite, on gère le processus habituel en définissant la description locale de l'offre et en envoyant cette offre à l'autre pair.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-setConfiguration-void-RTCConfiguration-configuration', 'setConfiguration()')}}{{Spec2('WebRTC 1.0')}}Initial definition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.RTCPeerConnection.setConfiguration")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md new file mode 100644 index 0000000000..152e67aa86 --- /dev/null +++ b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md @@ -0,0 +1,103 @@ +--- +title: RTCPeerConnection.setConfiguration() +slug: Web/API/RTCPeerConnection/setConfiguration +tags: + - Experimental + - Méthode + - Reference + - WebRTC + - setConfiguration +translation_of: Web/API/RTCPeerConnection/setConfiguration +--- +
{{APIRef("WebRTC")}}{{SeeCompatTable}}
+ +

La méthode RTCPeerConnection.setConfiguration() définit la configuration courante pour la connexion {{domxref("RTCPeerConnection")}} en fonction des valeurs des propriétés de l'objet {{domxref("RTCConfiguration")}} passé en argument. Cela permet de modifier les serveurs ICE et les règles de transport utilisés par la connexion.

+ +

Le cas d'usage le plus probable (bien qu'il ne soit probablement pas répandu) est le remplacement des serveurs ICE à utiliser. Voici deux scénarios pour lesquels cela pourrait se produire :

+ + + +
+

Note : On ne peut pas changer les informations d'identité d'une connexion une fois que celle-ci a été créée.

+
+ +

Syntaxe

+ +
RTCPeerConnection.setConfiguration(configuration);
+ +

Paramètres

+ +
+
configuration
+
Un objet {{domxref("RTCConfiguration")}} qui fournit les options à appliquer à la connexion. Les changements ne sont pas utilisés en addition mais remplacent les valeurs existantes.
+
+ +

Exceptions

+ +
+
InvalidAccessError
+
Une ou plusieurs URL indiquées dans configuration.iceServers sont des serveurs {{Glossary("TURN")}} mais les informations d'authentification ne sont pas complètes (il manque {{domxref("RTCIceServer.username")}} ou {{domxref("RTCIceServer.credentials")}}). Cela empêche une connexion/identification correcte sur le serveur.
+
InvalidModificationError
+
L'objet configuration contient des changements relatifs à l'identité alors que la connexion a déjà ces informations indiquées. Cela se produit lorsque configuration.peerIdentity ou configuration.certificates sont définies et que leurs valeurs diffèrent de la configuration courante.
+
InvalidStateError
+
La connexion ({{domxref("RTCPeerConnection")}}) est fermée.
+
SyntaxError
+
Une ou plusieurs URL fournies dans la liste configuration.iceServers sont invalides.
+
+ +

Exemples

+ +

Dans cet exemple, on a déjà determiné qu'un redémarrage ICE est nécessaire et que la négociation ICE doit se faire sur un nouveau serveur.

+ +
var restartConfig = { iceServers: [{
+                          urls: "turn:asia.myturnserver.net",
+                          username: "allie@oopcode.com",
+                          credential: "topsecretpassword"
+                      }]
+};
+
+myPeerConnection.setConfiguration(restartConfig);
+
+myPeerConnection.createOffer({"iceRestart": true}).then(function(offer) {
+  return myPeerConnection.setLocalDescription(offer);
+})
+.then(function() {
+  // send the offer to the other peer using the signaling server
+})
+.catch(reportError);
+ +

Pour commencer, on crée une {{domxref("RTCConfiguration")}}, restartConfig, en indiquant le nouveau serveur ICE et les informations de connexion associées. Cet objet est alors passé à setConfiguration(). La négociation ICE est redémarrée via {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}} pour laquelle on indique true pour l'option iceRestart. Ensuite, on gère le processus habituel en définissant la description locale de l'offre et en envoyant cette offre à l'autre pair.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-setConfiguration-void-RTCConfiguration-configuration', 'setConfiguration()')}}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.RTCPeerConnection.setConfiguration")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/screen_capture_api/index.html b/files/fr/web/api/screen_capture_api/index.html deleted file mode 100644 index 3bfc553102..0000000000 --- a/files/fr/web/api/screen_capture_api/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Screen Capture API -slug: Web/API/Screen_Capture_API -tags: - - API - - Capture - - Conference - - Media - - MediaDevices - - Overvew - - Screen Capture - - Screen Sharing - - Video - - Window - - display - - getDisplayMedia - - screen -translation_of: Web/API/Screen_Capture_API ---- -
{{DefaultAPISidebar("Screen Capture API")}}
- -

The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.

- -

API Screen Capture concepts et utilisation

- -

L'API Screen Capture est relativement simple à utiliser. Sa seule méthode est {{domxref("MediaDevices.getDisplayMedia()")}} dont le but est de demander à l'utilisateur un écran ou une portion d'écran à capturer sous la forme de {{domxref("MediaStream")}}.

- -

Pour commencer à capturer une vidéo de l'écran, il faut appeler getDisplayMedia() dans une instance de navigator.mediaDevices

- -
captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
- -

La {{jsxref("Promise")}} retournée par getDisplayMedia() résout un {{domxref("MediaStream")}} qui diffuse le dédia capturé.

- -

Voir l'article Utiliser l'API Screen Capture pour plus de détails sur l’utilisation de l’API pour capturer le contenu de l’écran sous forme de flux.

- -

Ajouts à l'interface actuelle

- -

L'API Screen Capture n'a pas sa propre interface. Cependant, elle ajoute une méthode à l'existante interface {{domxref("MediaDevices")}} .

- -

Interface MediaDevices

- -
-
{{domxref("MediaDevices.getDisplayMedia()")}}
-
La méthode getDisplayMedia() est ajoutée à l'interface MediaDevices. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui  method creates a promise qui résout un {{domxref("MediaStream")}} contenant  la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées.
-
- -

Ajouts aux dictionnaires actuels

- -

L'API Screen Capture ajoute des propriétés au dictionnaire suivant définit par d'autres spécificités.

- -

MediaTrackConstraints

- -
-
{{domxref("MediaTrackConstraints.cursor")}}
-
Un {{domxref("ConstrainDOMString")}}  indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement.
-
{{domxref("MediaTrackConstraints.displaySurface")}}
-
Un {{domxref("ConstrainDOMString")}} indiquant quel type de surface d'affichage doit être capturé. La valeur peut être application, browser, monitor, ou window.
-
{{domxref("MediaTrackConstraints.logicalSurface")}}
-
Indique si la vidéo dans le flux représente ou non une surface d'affichage logique (c'est-à-dire une surface qui peut ne pas être entièrement visible à l'écran ou peut-être complètement hors écran). La valeur true indique qu'une surface d'affichage logique doit être capturée.
-
- -

MediaTrackSettings

- -
-
{{domxref("MediaTrackSettings.cursor")}}
-
Une chaîne de caractères indiquant si la surface d'affichage en cours de capture comprend ou non le curseur de la souris et, dans l'affirmative, si elle est visible uniquement lorsque la souris est en mouvement ou si elle est toujours visible. La valeur peut être always, motion, ou never.
-
{{domxref("MediaTrackSettings.displaySurface")}}
-
Une chaîne indiquant le type de surface d'affichage en cours de capture. La valeur peut êtreapplication, browser, monitor, ou window.
-
{{domxref("MediaTrackSettings.logicalSurface")}}
-
Valeur booléenne valant true si la vidéo en cours de capture ne correspond pas directement à une seule zone d'affichage à l'écran.
-
- -

MediaTrackSupportedConstraints

- -
-
{{domxref("MediaTrackSupportedConstraints.cursor")}}
-
Valeur booléenne valant true si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.cursor")}}.
-
{{domxref("MediaTrackSupportedConstraints.displaySurface")}}
-
Valeur booléenne valant true si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.displaySurface")}}.
-
{{domxref("MediaTrackSupportedConstraints.logicalSurface")}}
-
Valeur booléenne valant true si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.logicalSurface")}}.
-
- -

Dictionnaires

- -

Le dictionnaire suivant est difinit par l'API Screen Capture.

- -
-
CursorCaptureConstraint
-
Un type de chaîne énuméré utilisé pour fournir la valeur de la propriété cursor aux paramètres et aux contraintes. La valeur peut être always, motion, ou never.
-
DisplayCaptureSurfaceType
-
Un type de chaîne énuméré utilisé pour identifier le type de surface d'affichage à capturer. ce type est utilisé pour la propriété displaySurface dans les objets contraints et paramètres, et a plusieurs valeurs possibles application, browser, monitor, and window.
-
- -

Validation de Feature Policy

- -

{{Glossary("User agent", "User agents")}} qui supportent  Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle display-capture:

- -
<iframe allow="display-capture" src="/some-other-document.html">
- -

La liste d’autorisations par défaut est self, ce qui permet à tout contenu du document d’utiliser Screen Capture.

- -

Voir Utiliser Feature Policy pour une explication plus en détail sur comment est utilisé Feature Policy.

- -

Caracteristiques

- - - - - - - - - - - - - - -
CaracteristiquesStatutCommentaire
{{SpecName('Screen Capture')}}{{Spec2('Screen Capture')}}Définition Initiale
- -

Compatibilité des Navigateurs

- -
- - -
- - -

{{Compat("api.MediaDevices.getDisplayMedia")}}

-
- - -
- -

Voir aussi

- - diff --git a/files/fr/web/api/screen_capture_api/index.md b/files/fr/web/api/screen_capture_api/index.md new file mode 100644 index 0000000000..3bfc553102 --- /dev/null +++ b/files/fr/web/api/screen_capture_api/index.md @@ -0,0 +1,141 @@ +--- +title: Screen Capture API +slug: Web/API/Screen_Capture_API +tags: + - API + - Capture + - Conference + - Media + - MediaDevices + - Overvew + - Screen Capture + - Screen Sharing + - Video + - Window + - display + - getDisplayMedia + - screen +translation_of: Web/API/Screen_Capture_API +--- +
{{DefaultAPISidebar("Screen Capture API")}}
+ +

The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.

+ +

API Screen Capture concepts et utilisation

+ +

L'API Screen Capture est relativement simple à utiliser. Sa seule méthode est {{domxref("MediaDevices.getDisplayMedia()")}} dont le but est de demander à l'utilisateur un écran ou une portion d'écran à capturer sous la forme de {{domxref("MediaStream")}}.

+ +

Pour commencer à capturer une vidéo de l'écran, il faut appeler getDisplayMedia() dans une instance de navigator.mediaDevices

+ +
captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+ +

La {{jsxref("Promise")}} retournée par getDisplayMedia() résout un {{domxref("MediaStream")}} qui diffuse le dédia capturé.

+ +

Voir l'article Utiliser l'API Screen Capture pour plus de détails sur l’utilisation de l’API pour capturer le contenu de l’écran sous forme de flux.

+ +

Ajouts à l'interface actuelle

+ +

L'API Screen Capture n'a pas sa propre interface. Cependant, elle ajoute une méthode à l'existante interface {{domxref("MediaDevices")}} .

+ +

Interface MediaDevices

+ +
+
{{domxref("MediaDevices.getDisplayMedia()")}}
+
La méthode getDisplayMedia() est ajoutée à l'interface MediaDevices. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui  method creates a promise qui résout un {{domxref("MediaStream")}} contenant  la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées.
+
+ +

Ajouts aux dictionnaires actuels

+ +

L'API Screen Capture ajoute des propriétés au dictionnaire suivant définit par d'autres spécificités.

+ +

MediaTrackConstraints

+ +
+
{{domxref("MediaTrackConstraints.cursor")}}
+
Un {{domxref("ConstrainDOMString")}}  indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement.
+
{{domxref("MediaTrackConstraints.displaySurface")}}
+
Un {{domxref("ConstrainDOMString")}} indiquant quel type de surface d'affichage doit être capturé. La valeur peut être application, browser, monitor, ou window.
+
{{domxref("MediaTrackConstraints.logicalSurface")}}
+
Indique si la vidéo dans le flux représente ou non une surface d'affichage logique (c'est-à-dire une surface qui peut ne pas être entièrement visible à l'écran ou peut-être complètement hors écran). La valeur true indique qu'une surface d'affichage logique doit être capturée.
+
+ +

MediaTrackSettings

+ +
+
{{domxref("MediaTrackSettings.cursor")}}
+
Une chaîne de caractères indiquant si la surface d'affichage en cours de capture comprend ou non le curseur de la souris et, dans l'affirmative, si elle est visible uniquement lorsque la souris est en mouvement ou si elle est toujours visible. La valeur peut être always, motion, ou never.
+
{{domxref("MediaTrackSettings.displaySurface")}}
+
Une chaîne indiquant le type de surface d'affichage en cours de capture. La valeur peut êtreapplication, browser, monitor, ou window.
+
{{domxref("MediaTrackSettings.logicalSurface")}}
+
Valeur booléenne valant true si la vidéo en cours de capture ne correspond pas directement à une seule zone d'affichage à l'écran.
+
+ +

MediaTrackSupportedConstraints

+ +
+
{{domxref("MediaTrackSupportedConstraints.cursor")}}
+
Valeur booléenne valant true si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.cursor")}}.
+
{{domxref("MediaTrackSupportedConstraints.displaySurface")}}
+
Valeur booléenne valant true si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.displaySurface")}}.
+
{{domxref("MediaTrackSupportedConstraints.logicalSurface")}}
+
Valeur booléenne valant true si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.logicalSurface")}}.
+
+ +

Dictionnaires

+ +

Le dictionnaire suivant est difinit par l'API Screen Capture.

+ +
+
CursorCaptureConstraint
+
Un type de chaîne énuméré utilisé pour fournir la valeur de la propriété cursor aux paramètres et aux contraintes. La valeur peut être always, motion, ou never.
+
DisplayCaptureSurfaceType
+
Un type de chaîne énuméré utilisé pour identifier le type de surface d'affichage à capturer. ce type est utilisé pour la propriété displaySurface dans les objets contraints et paramètres, et a plusieurs valeurs possibles application, browser, monitor, and window.
+
+ +

Validation de Feature Policy

+ +

{{Glossary("User agent", "User agents")}} qui supportent  Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle display-capture:

+ +
<iframe allow="display-capture" src="/some-other-document.html">
+ +

La liste d’autorisations par défaut est self, ce qui permet à tout contenu du document d’utiliser Screen Capture.

+ +

Voir Utiliser Feature Policy pour une explication plus en détail sur comment est utilisé Feature Policy.

+ +

Caracteristiques

+ + + + + + + + + + + + + + +
CaracteristiquesStatutCommentaire
{{SpecName('Screen Capture')}}{{Spec2('Screen Capture')}}Définition Initiale
+ +

Compatibilité des Navigateurs

+ +
+ + +
+ + +

{{Compat("api.MediaDevices.getDisplayMedia")}}

+
+ + +
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html deleted file mode 100644 index 266207b731..0000000000 --- a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: audioprocess -slug: Web/API/ScriptProcessorNode/audioprocess_event -translation_of: Web/API/ScriptProcessorNode/audioprocess_event -original_slug: Web/Events/audioprocess ---- -
-

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

- -

{{Compat("api.ScriptProcessorNode.audioprocess_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md new file mode 100644 index 0000000000..266207b731 --- /dev/null +++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md @@ -0,0 +1,106 @@ +--- +title: audioprocess +slug: Web/API/ScriptProcessorNode/audioprocess_event +translation_of: Web/API/ScriptProcessorNode/audioprocess_event +original_slug: Web/Events/audioprocess +--- +
+

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

+ +

{{Compat("api.ScriptProcessorNode.audioprocess_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/selection/collapse/index.html b/files/fr/web/api/selection/collapse/index.html deleted file mode 100644 index 97e9a4c4ae..0000000000 --- a/files/fr/web/api/selection/collapse/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Selection.collapse() -slug: Web/API/Selection/collapse -tags: - - API - - Edition HTML - - Experimental - - Method - - Reference - - Selection -translation_of: Web/API/Selection/collapse ---- -
{{ApiRef("DOM")}}{{SeeCompatTable}}
- -

La méthode Selection.collapse() positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible.

- -

Syntaxe

- -
sel.collapse(parentNode, offset);
-
- -

Paramètres

- -
-
parentNode
-
Le curseur d'édition sera placé à l'intérieur de ce noeud.
-
- -
-
offset
-
Indique la position du curseur d'édition dans parentNode.
-
- -

Exemples

- -
/* Positionner le curseur au début de l'élément body d'un document HTML. */
-var body = document.getElementsByTagName("body")[0];
-window.getSelection().collapse(body,0);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}}{{Spec2('Selection API')}} 
{{SpecName('HTML Editing', '#dom-selection-collapse', 'Selection.collapse()')}}{{Spec2('HTML Editing')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Selection.collapse")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/selection/collapse/index.md b/files/fr/web/api/selection/collapse/index.md new file mode 100644 index 0000000000..97e9a4c4ae --- /dev/null +++ b/files/fr/web/api/selection/collapse/index.md @@ -0,0 +1,71 @@ +--- +title: Selection.collapse() +slug: Web/API/Selection/collapse +tags: + - API + - Edition HTML + - Experimental + - Method + - Reference + - Selection +translation_of: Web/API/Selection/collapse +--- +
{{ApiRef("DOM")}}{{SeeCompatTable}}
+ +

La méthode Selection.collapse() positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible.

+ +

Syntaxe

+ +
sel.collapse(parentNode, offset);
+
+ +

Paramètres

+ +
+
parentNode
+
Le curseur d'édition sera placé à l'intérieur de ce noeud.
+
+ +
+
offset
+
Indique la position du curseur d'édition dans parentNode.
+
+ +

Exemples

+ +
/* Positionner le curseur au début de l'élément body d'un document HTML. */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}}{{Spec2('Selection API')}} 
{{SpecName('HTML Editing', '#dom-selection-collapse', 'Selection.collapse()')}}{{Spec2('HTML Editing')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Selection.collapse")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/selection/index.html b/files/fr/web/api/selection/index.html deleted file mode 100644 index d01facda6d..0000000000 --- a/files/fr/web/api/selection/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: selection -slug: Web/API/Selection -translation_of: Web/API/Selection ---- -

{{ ApiRef() }}

- -

Résumé

- -

La classe de l'objet retourné par window.getSelection(), document.getSelection() et d'autres méthodes.

- -

Description

- -

Un objet selection représente les plages sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci :

- -
range = sel.getRangeAt(0);
-
- -

L'appel de la méthode toString() renvoie le texte contenu dans la sélection. Cet appel peut être automatique, par exemple lorsque l'objet est passé à la fonction alert() : 

- -
selObj = window.getSelection();
-window.alert(selObj);
-
- -

Glossaire

- -

Autres mots clés utilisés dans cette section.

- -
-
anchor (ancre)
-
L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas.
-
focus (focus)
-
Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée.
-
range (plage)
-
Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet range. Les objets range peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation.
-
- -

Propriétés

- -
-
anchorNode
-
Renvoie le nœud d'où la sélection commence.
-
anchorOffset
-
Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'anchorNode. Si l'anchorNode est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'anchorNode. Si l'anchorNode est un élément, il s'agit du nombre de noeuds enfants de l'anchorNode précédant l'« ancre ».
-
focusNode
-
Renvoie le nœud où la sélection se termine.
-
focusOffset
-
Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focusNode. Si le focusNode est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focusNode. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focusNode précédant le « focus ».
-
isCollapsed
-
Renvoie un booléen indiquant si le point de départ et d'arrivée sont à la même position.
-
rangeCount
-
Renvoie le nombre de « plages » dans la sélection.
-
- -

Méthodes

- -
-
getRangeAt
-
Renvoie un objet range représentant une des « plages » actuellement sélectionnée.
-
collapse
-
Réduit la sélection courante à un simple point.
-
extend
-
Déplace le « focus » de la sélection à un endroit spécifié.
-
collapseToStart
-
Déplace le « focus » de la sélection au même point que l'« ancre ».
-
collapseToEnd
-
Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas.
-
selectAllChildren
-
Ajoute tous les enfants d'un nœud spécifié à la sélection.
-
addRange
-
Un objet range devant être ajouté à la sélection.
-
removeRange
-
Supprime une « plage » de la sélection.
-
removeAllRanges
-
Supprime toutes les « plages » de la sélection.
-
deleteFromDocument
-
Efface le contenu de la sélection du document.
-
selectionLanguageChange
-
 
-
toString
-
Renvoie une chaîne de caractères représentant l'actuel objet selection, i.e. le texte sélectionné.
-
containsNode
-
Indique si un nœud donné appartient à la sélection.
-
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Selection")}}

- -

Voir aussi

- -

window.getSelection, document.getSelection(),Range

- -

Liens externes

- - \ No newline at end of file diff --git a/files/fr/web/api/selection/index.md b/files/fr/web/api/selection/index.md new file mode 100644 index 0000000000..d01facda6d --- /dev/null +++ b/files/fr/web/api/selection/index.md @@ -0,0 +1,100 @@ +--- +title: selection +slug: Web/API/Selection +translation_of: Web/API/Selection +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

La classe de l'objet retourné par window.getSelection(), document.getSelection() et d'autres méthodes.

+ +

Description

+ +

Un objet selection représente les plages sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci :

+ +
range = sel.getRangeAt(0);
+
+ +

L'appel de la méthode toString() renvoie le texte contenu dans la sélection. Cet appel peut être automatique, par exemple lorsque l'objet est passé à la fonction alert() : 

+ +
selObj = window.getSelection();
+window.alert(selObj);
+
+ +

Glossaire

+ +

Autres mots clés utilisés dans cette section.

+ +
+
anchor (ancre)
+
L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas.
+
focus (focus)
+
Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée.
+
range (plage)
+
Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet range. Les objets range peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation.
+
+ +

Propriétés

+ +
+
anchorNode
+
Renvoie le nœud d'où la sélection commence.
+
anchorOffset
+
Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'anchorNode. Si l'anchorNode est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'anchorNode. Si l'anchorNode est un élément, il s'agit du nombre de noeuds enfants de l'anchorNode précédant l'« ancre ».
+
focusNode
+
Renvoie le nœud où la sélection se termine.
+
focusOffset
+
Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focusNode. Si le focusNode est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focusNode. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focusNode précédant le « focus ».
+
isCollapsed
+
Renvoie un booléen indiquant si le point de départ et d'arrivée sont à la même position.
+
rangeCount
+
Renvoie le nombre de « plages » dans la sélection.
+
+ +

Méthodes

+ +
+
getRangeAt
+
Renvoie un objet range représentant une des « plages » actuellement sélectionnée.
+
collapse
+
Réduit la sélection courante à un simple point.
+
extend
+
Déplace le « focus » de la sélection à un endroit spécifié.
+
collapseToStart
+
Déplace le « focus » de la sélection au même point que l'« ancre ».
+
collapseToEnd
+
Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas.
+
selectAllChildren
+
Ajoute tous les enfants d'un nœud spécifié à la sélection.
+
addRange
+
Un objet range devant être ajouté à la sélection.
+
removeRange
+
Supprime une « plage » de la sélection.
+
removeAllRanges
+
Supprime toutes les « plages » de la sélection.
+
deleteFromDocument
+
Efface le contenu de la sélection du document.
+
selectionLanguageChange
+
 
+
toString
+
Renvoie une chaîne de caractères représentant l'actuel objet selection, i.e. le texte sélectionné.
+
containsNode
+
Indique si un nœud donné appartient à la sélection.
+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Selection")}}

+ +

Voir aussi

+ +

window.getSelection, document.getSelection(),Range

+ +

Liens externes

+ + \ No newline at end of file diff --git a/files/fr/web/api/selection/tostring/index.html b/files/fr/web/api/selection/tostring/index.html deleted file mode 100644 index c0e4836d47..0000000000 --- a/files/fr/web/api/selection/tostring/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: toString -slug: Web/API/Selection/toString -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Selection/toString ---- -

{{ ApiRef() }}

-

Résumé

-

Renvoie une chaîne de caractères représentant l'actuel objet selection, i.e. le texte sélectionné.

-

Syntaxe

-
string =sel.toString()
-
- -

Paramètres

-

Aucun.

-

Description

-

Cette méthode renvoie le texte sélectionné.

-

En JavaScript, cette méthode est appelée automatiquement pour des objets selection aux fonctions nécessitant un paramètre string :

-
alert(window.getSelection()) // Appel automatique
-alert(window.getSelection().toString())  // Appel explicite
-
-

Voir aussi

- \ No newline at end of file diff --git a/files/fr/web/api/selection/tostring/index.md b/files/fr/web/api/selection/tostring/index.md new file mode 100644 index 0000000000..c0e4836d47 --- /dev/null +++ b/files/fr/web/api/selection/tostring/index.md @@ -0,0 +1,28 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Selection/toString +--- +

{{ ApiRef() }}

+

Résumé

+

Renvoie une chaîne de caractères représentant l'actuel objet selection, i.e. le texte sélectionné.

+

Syntaxe

+
string =sel.toString()
+
+ +

Paramètres

+

Aucun.

+

Description

+

Cette méthode renvoie le texte sélectionné.

+

En JavaScript, cette méthode est appelée automatiquement pour des objets selection aux fonctions nécessitant un paramètre string :

+
alert(window.getSelection()) // Appel automatique
+alert(window.getSelection().toString())  // Appel explicite
+
+

Voir aussi

+ \ No newline at end of file diff --git a/files/fr/web/api/selection/type/index.html b/files/fr/web/api/selection/type/index.html deleted file mode 100644 index 6f6032891a..0000000000 --- a/files/fr/web/api/selection/type/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Selection.type -slug: Web/API/Selection/type -tags: - - API - - Experimental - - Propriété - - Reference - - Type -translation_of: Web/API/Selection/type ---- -
{{APIRef("DOM")}}{{SeeCompatTable}}
- -

La propriété en lecture simple type de l'interface {{domxref("Selection")}} retourne un {{domxref("DOMString")}} décrivant le type de la sélection courante.

- -

Syntax

- -
value = sel.type
-
- -

Value

- -

Une {{domxref("DOMString")}} décrivant le type de la sélection courante. Les valeurs possibles sont :

- - - -

Exemple

- -

Dans cet exemple le gestionnaire d'évènemenet est activé à chaque changement de la sélection. console.log(selection.type) retourne Caret ou Range selon que le curseur est sur un simple caractère ou qu'une plage est sélectionée.

- -
var selection;
-
-document.onselectionchange = function() {
-  console.log('New selection made');
-  selection = document.getSelection();
-  console.log(selection.type);
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Selection API', '#dom-selection-type', 'Selection.type')}}{{Spec2('Selection API')}}Courant
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Selection.type")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/selection/type/index.md b/files/fr/web/api/selection/type/index.md new file mode 100644 index 0000000000..6f6032891a --- /dev/null +++ b/files/fr/web/api/selection/type/index.md @@ -0,0 +1,70 @@ +--- +title: Selection.type +slug: Web/API/Selection/type +tags: + - API + - Experimental + - Propriété + - Reference + - Type +translation_of: Web/API/Selection/type +--- +
{{APIRef("DOM")}}{{SeeCompatTable}}
+ +

La propriété en lecture simple type de l'interface {{domxref("Selection")}} retourne un {{domxref("DOMString")}} décrivant le type de la sélection courante.

+ +

Syntax

+ +
value = sel.type
+
+ +

Value

+ +

Une {{domxref("DOMString")}} décrivant le type de la sélection courante. Les valeurs possibles sont :

+ + + +

Exemple

+ +

Dans cet exemple le gestionnaire d'évènemenet est activé à chaque changement de la sélection. console.log(selection.type) retourne Caret ou Range selon que le curseur est sur un simple caractère ou qu'une plage est sélectionée.

+ +
var selection;
+
+document.onselectionchange = function() {
+  console.log('New selection made');
+  selection = document.getSelection();
+  console.log(selection.type);
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Selection API', '#dom-selection-type', 'Selection.type')}}{{Spec2('Selection API')}}Courant
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Selection.type")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/server-sent_events/index.html b/files/fr/web/api/server-sent_events/index.html deleted file mode 100644 index 8bbfc6079e..0000000000 --- a/files/fr/web/api/server-sent_events/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Server-sent events -slug: Web/API/Server-sent_events -tags: - - Server-sent events - - TopicStub -translation_of: Web/API/Server-sent_events ---- -

Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données.

- -

Documentation

- -
-
Utilisation des événements envoyés par le serveur
-
Un tutoriel sur l'écriture d'une partie côté serveur et côté client d'une application d'événements envoyée par le serveur.
-
EventSource référence
-
Une référence à l'API EventSource côté client.
-
- -

Outils

- - - - - - - -

Voir également

- - - -

Spécification

- - diff --git a/files/fr/web/api/server-sent_events/index.md b/files/fr/web/api/server-sent_events/index.md new file mode 100644 index 0000000000..8bbfc6079e --- /dev/null +++ b/files/fr/web/api/server-sent_events/index.md @@ -0,0 +1,46 @@ +--- +title: Server-sent events +slug: Web/API/Server-sent_events +tags: + - Server-sent events + - TopicStub +translation_of: Web/API/Server-sent_events +--- +

Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données.

+ +

Documentation

+ +
+
Utilisation des événements envoyés par le serveur
+
Un tutoriel sur l'écriture d'une partie côté serveur et côté client d'une application d'événements envoyée par le serveur.
+
EventSource référence
+
Une référence à l'API EventSource côté client.
+
+ +

Outils

+ + + + + + + +

Voir également

+ + + +

Spécification

+ + diff --git a/files/fr/web/api/server-sent_events/using_server-sent_events/index.html b/files/fr/web/api/server-sent_events/using_server-sent_events/index.html deleted file mode 100644 index 0d6c1aa33a..0000000000 --- a/files/fr/web/api/server-sent_events/using_server-sent_events/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: Utiliser les évènements envoyés par le serveur -slug: Web/API/Server-sent_events/Using_server-sent_events -tags: - - Advanced - - Communication - - DOM - - Guide - - SSE - - Server Sent Events - - Server-sent events - - messaging -translation_of: Web/API/Server-sent_events/Using_server-sent_events ---- -

{{DefaultAPISidebar("Server Sent Events")}}

-

Développer une application web qui utilise des évènements envoyés par le serveur (server-sent events en anglais) est relativement simple. Côté serveur, on aura besoin d'un bout de code qui puisse transmettre des évènements à l'application web ; côté client, le fonctionnement est quasi identique à celui qu'on utilise pour les websockets et notamment la gestion d'évènements entrants. Il s'agit d'une connexion unidirectionnelle : on ne peut pas envoyer d'évènements du client vers le serveur.

- -

Recevoir des évènements du serveur

- -

L'API des évènements serveur est exposée par l'interface EventSource ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, on crée un nouvel objet EventSource, en spécifiant l'URL d'un script côté serveur qui va générer les évènements. Par exemple :

- -
const evtSource = new EventSource("ssedemo.php");
-
- -

Si le script qui génère les évènements est hébergé sur une origine différente, le nouvel objet EventSource doit être créé en spécifiant à la fois l'URL et un dictionnaire d'options. Par exemple, en supposant que le script client est sur example.com :

- -
const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );
- -

Une fois que la source d'évènement a été instanciée, on peut écouter les messages provenant du serveur en attachant un gestionnaire d'évènement pour message :

- -
evtSource.onmessage = function(event) {
-  const newElement = document.createElement("li");
-  const eventList = document.getElementById("list");
-
-  newElement.textContent = "message: " + event.data;
-  eventList.appendChild(newElement);
-}
-
- -

Ce code écoute les messages entrants (plus précisément, les notifications venant du serveur qui n'ont pas de champ event attaché) et ajoute le texte des messages à une liste dans le contenu HTML du document.

- -

On peut aussi écouter les évènements avec addEventListener() :

- -
evtSource.addEventListener("ping", function(event) {
-  const newElement = document.createElement("li");
-  const time = JSON.parse(event.data).time;
-  newElement.textContent = "ping at " + time;
-  eventList.appendChild(newElement);
-});
-
- -

Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ event est ping ; il analysera alors le JSON dans le champ data et l'affichera.

- -
-

Attention : Lorsque HTTP/2 n'est pas utilisé, les évènements serveurs sont limités par le nombre maximal de connexion ouvertes, notamment quand on a plusieurs onglets ouverts. La limite est fixée par le navigateur et vaut 6 pour chaque origine (voir les bugs Chrome et Firefox). On pourra avoir 6 connexions pour les évènements serveurs parmi tous les onglets ouverts sur www.example1.com, 6 autres pour tous les onglets sur www.example2.com (voir cette réponse Stack Overflow). Avec HTTP/2, le nombre de flux HTTP simultanés est négocié entre le serveur et le client et vaut 100 par défaut.

-
- -

Envoyer un évènement depuis le serveur

- -

Le script côté serveur qui envoie les évènements doit répondre en utilisant le type MIME text/event-stream. Chaque notification est envoyée sous la forme d'un bloc de texte se terminant par une paire de caractères saut de ligne (\n). Pour plus de détails sur le format du flux d'évènements, voir la section ci-après.

- -

Voici le code PHP que nous utilisons pour notre exemple :

- -
date_default_timezone_set("America/New_York");
-header("Cache-Control: no-cache");
-header("Content-Type: text/event-stream");
-
-$counter = rand(1, 10);
-while (true) {
-  // Chaque seconde, on envoie un évènement "ping".
-
-  echo "event: ping\n";
-  $curDate = date(DATE_ISO8601);
-  echo 'data: {"time": "' . $curDate . '"}';
-  echo "\n\n";
-
-  // Envoi d'un message simple à fréquence aléatoire.
-
-  $counter--;
-
-  if (!$counter) {
-    echo 'data: Message envoyé à ' . $curDate . "\n\n";
-    $counter = rand(1, 10);
-  }
-
-  ob_end_flush();
-  flush();
-
-  // On ferme la boucle si le client a interrompu la connexion
-  // (par exemple en fermant la page)
-
-  if ( connection_aborted() ) break;
-
-  sleep(1);
-}
-
- -

Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l'heure à laquelle l'évènement a été généré. À des intervalles aléatoires, un message simple (sans type d'évènement) est envoyé.

-

La boucle s'exécute indépendamment du statut de la connexion, on a donc une vérification pour terminer l'exécution si la connexion a été terminée.

- -
-

Note : Vous pouvez trouver un exemple complet utilisant le code ci-dessus sur GitHub : voir Démonstration d'évènements serveur avec PHP.

-
- -

Gestion des erreurs

- -

Quand un problème survient (tel qu'un délai de réponse dépassé ou une erreur liée au contrôle d'accès), un évènement error est généré. Vous pouvez traiter ces cas d'erreur en implémentant la fonction de rappel onerror sur l'objet EventSource.

- -
evtSource.onerror = function(err) {
-  console.error("EventSource failed:", err);
-};
-
- -

Fermer les flux d'évènements

- -

Par défaut, si la connexion entre le client et le serveur est rompue, elle sera relancée. Il est possible de la fermer explicitement à l'aide de la méthode .close().

- -
evtSource.close();
- -

Format du flux d'évènements

- -

Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en UTF-8. Les messages dans le flux d'évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne représente un commentaire, et est ignoré.

- -
-

Note : Une ligne de commentaire peut être utilisée pour empêcher les connexions d'expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte.

-
- -

Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d'un « : », suivi des données de texte pour la valeur de ce champ.

- -

Champs

- -

Chaque message reçu contient un ou plusieurs de ces champs, un par ligne  :

- -
-
event
-
Une chaîne identifiant le type d'évènement décrit. S'il est spécifié, un évènement sera envoyé dans le navigateur à l'écouteur défini pour l'évènement spécifié. Le code source de l'application doit utiliser addEventListener() pour écouter des évènements nommés. Le gestionnaire onmessage est appelé si aucun nom d'évènement n'est spécifié dans un message.
-
data
-
Le champ de données du message. Lorsque l'EventSource reçoit plusieurs lignes de message consécutives commençant par data:, il les concatène, en ajoutant un caractère saut de ligne entre chacune d'elles. Les sauts de ligne en fin de message sont supprimés.
-
id
-
L'identifiant d'évènement, qui sera mémorisé comme valeur d'identifiant du dernier évènement de l'objet EventSource.
-
retry
-
Le délai de reconnexion à utiliser lors de la tentative d'envoi de l'évènement. Il doit être un nombre entier, spécifiant le temps de reconnexion en millisecondes. Si une valeur non entière est spécifiée, le champ est ignoré.
-
- -

Tous les autres noms de champs sont ignorés.

- -
-

Note : Si une ligne ne contient aucun caractère deux-points, la ligne entière est considérée comme le nom du champ, avec un contenu vide.

-
- -

Exemples

- -

Messages contenant uniquement des données

- -

Dans l'exemple suivant, trois messages sont envoyés. Le premier est simplement un commentaire, car il débute par un caractère deux-points. Comme mentionné précédemment, cela peut être utile pour maintenir la connexion si des messages doivent être transmis de façon irrégulière.

- -

Le deuxième message contient un champ data avec la valeur "du texte". Le troisième message contient un champ data avec la valeur "un autre message\nsur deux lignes". On notera le caractère saut de ligne dans la valeur.

- -
: this is a test stream
-
-data: du texte
-
-data: un autre message
-data: sur deux lignes
-
- -

Évènements nommés

- -

Cet exemple envoie une série d'évènements nommés. Chacun a un nom d'évènement spécifié par le champ event, et un champ data dont la valeur est une chaîne JSON appropriée avec les données nécessaires au client pour réagir à l'évènement. Le champ data peut évidemment contenir n'importe quelles données textuelles, il n'est pas obligatoirement au format JSON.

- -
event: userconnect
-data: {"username": "bobby", "time": "02:33:48"}
-
-event: usermessage
-data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
-
-event: userdisconnect
-data: {"username": "bobby", "time": "02:34:23"}
-
-event: usermessage
-data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
-
- -

Mélanger les types de message

- -

Il n'est pas obligatoire d'utiliser uniquement des messages sans nom ou des évènements nommés. Vous pouvez mélanger les deux dans un même flux d'évènements.

- -
event: userconnect
-data: {"username": "bobby", "time": "02:33:48"}
-
-data: Ici un message système quelconque qui sera utilisé
-data: pour accomplir une tâche.
-
-event: usermessage
-data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
- -

Compatibilité des navigateurs

- -

{{Compat("api.EventSource")}}

diff --git a/files/fr/web/api/server-sent_events/using_server-sent_events/index.md b/files/fr/web/api/server-sent_events/using_server-sent_events/index.md new file mode 100644 index 0000000000..0d6c1aa33a --- /dev/null +++ b/files/fr/web/api/server-sent_events/using_server-sent_events/index.md @@ -0,0 +1,199 @@ +--- +title: Utiliser les évènements envoyés par le serveur +slug: Web/API/Server-sent_events/Using_server-sent_events +tags: + - Advanced + - Communication + - DOM + - Guide + - SSE + - Server Sent Events + - Server-sent events + - messaging +translation_of: Web/API/Server-sent_events/Using_server-sent_events +--- +

{{DefaultAPISidebar("Server Sent Events")}}

+

Développer une application web qui utilise des évènements envoyés par le serveur (server-sent events en anglais) est relativement simple. Côté serveur, on aura besoin d'un bout de code qui puisse transmettre des évènements à l'application web ; côté client, le fonctionnement est quasi identique à celui qu'on utilise pour les websockets et notamment la gestion d'évènements entrants. Il s'agit d'une connexion unidirectionnelle : on ne peut pas envoyer d'évènements du client vers le serveur.

+ +

Recevoir des évènements du serveur

+ +

L'API des évènements serveur est exposée par l'interface EventSource ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, on crée un nouvel objet EventSource, en spécifiant l'URL d'un script côté serveur qui va générer les évènements. Par exemple :

+ +
const evtSource = new EventSource("ssedemo.php");
+
+ +

Si le script qui génère les évènements est hébergé sur une origine différente, le nouvel objet EventSource doit être créé en spécifiant à la fois l'URL et un dictionnaire d'options. Par exemple, en supposant que le script client est sur example.com :

+ +
const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );
+ +

Une fois que la source d'évènement a été instanciée, on peut écouter les messages provenant du serveur en attachant un gestionnaire d'évènement pour message :

+ +
evtSource.onmessage = function(event) {
+  const newElement = document.createElement("li");
+  const eventList = document.getElementById("list");
+
+  newElement.textContent = "message: " + event.data;
+  eventList.appendChild(newElement);
+}
+
+ +

Ce code écoute les messages entrants (plus précisément, les notifications venant du serveur qui n'ont pas de champ event attaché) et ajoute le texte des messages à une liste dans le contenu HTML du document.

+ +

On peut aussi écouter les évènements avec addEventListener() :

+ +
evtSource.addEventListener("ping", function(event) {
+  const newElement = document.createElement("li");
+  const time = JSON.parse(event.data).time;
+  newElement.textContent = "ping at " + time;
+  eventList.appendChild(newElement);
+});
+
+ +

Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ event est ping ; il analysera alors le JSON dans le champ data et l'affichera.

+ +
+

Attention : Lorsque HTTP/2 n'est pas utilisé, les évènements serveurs sont limités par le nombre maximal de connexion ouvertes, notamment quand on a plusieurs onglets ouverts. La limite est fixée par le navigateur et vaut 6 pour chaque origine (voir les bugs Chrome et Firefox). On pourra avoir 6 connexions pour les évènements serveurs parmi tous les onglets ouverts sur www.example1.com, 6 autres pour tous les onglets sur www.example2.com (voir cette réponse Stack Overflow). Avec HTTP/2, le nombre de flux HTTP simultanés est négocié entre le serveur et le client et vaut 100 par défaut.

+
+ +

Envoyer un évènement depuis le serveur

+ +

Le script côté serveur qui envoie les évènements doit répondre en utilisant le type MIME text/event-stream. Chaque notification est envoyée sous la forme d'un bloc de texte se terminant par une paire de caractères saut de ligne (\n). Pour plus de détails sur le format du flux d'évènements, voir la section ci-après.

+ +

Voici le code PHP que nous utilisons pour notre exemple :

+ +
date_default_timezone_set("America/New_York");
+header("Cache-Control: no-cache");
+header("Content-Type: text/event-stream");
+
+$counter = rand(1, 10);
+while (true) {
+  // Chaque seconde, on envoie un évènement "ping".
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Envoi d'un message simple à fréquence aléatoire.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: Message envoyé à ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_end_flush();
+  flush();
+
+  // On ferme la boucle si le client a interrompu la connexion
+  // (par exemple en fermant la page)
+
+  if ( connection_aborted() ) break;
+
+  sleep(1);
+}
+
+ +

Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l'heure à laquelle l'évènement a été généré. À des intervalles aléatoires, un message simple (sans type d'évènement) est envoyé.

+

La boucle s'exécute indépendamment du statut de la connexion, on a donc une vérification pour terminer l'exécution si la connexion a été terminée.

+ +
+

Note : Vous pouvez trouver un exemple complet utilisant le code ci-dessus sur GitHub : voir Démonstration d'évènements serveur avec PHP.

+
+ +

Gestion des erreurs

+ +

Quand un problème survient (tel qu'un délai de réponse dépassé ou une erreur liée au contrôle d'accès), un évènement error est généré. Vous pouvez traiter ces cas d'erreur en implémentant la fonction de rappel onerror sur l'objet EventSource.

+ +
evtSource.onerror = function(err) {
+  console.error("EventSource failed:", err);
+};
+
+ +

Fermer les flux d'évènements

+ +

Par défaut, si la connexion entre le client et le serveur est rompue, elle sera relancée. Il est possible de la fermer explicitement à l'aide de la méthode .close().

+ +
evtSource.close();
+ +

Format du flux d'évènements

+ +

Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en UTF-8. Les messages dans le flux d'évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne représente un commentaire, et est ignoré.

+ +
+

Note : Une ligne de commentaire peut être utilisée pour empêcher les connexions d'expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte.

+
+ +

Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d'un « : », suivi des données de texte pour la valeur de ce champ.

+ +

Champs

+ +

Chaque message reçu contient un ou plusieurs de ces champs, un par ligne  :

+ +
+
event
+
Une chaîne identifiant le type d'évènement décrit. S'il est spécifié, un évènement sera envoyé dans le navigateur à l'écouteur défini pour l'évènement spécifié. Le code source de l'application doit utiliser addEventListener() pour écouter des évènements nommés. Le gestionnaire onmessage est appelé si aucun nom d'évènement n'est spécifié dans un message.
+
data
+
Le champ de données du message. Lorsque l'EventSource reçoit plusieurs lignes de message consécutives commençant par data:, il les concatène, en ajoutant un caractère saut de ligne entre chacune d'elles. Les sauts de ligne en fin de message sont supprimés.
+
id
+
L'identifiant d'évènement, qui sera mémorisé comme valeur d'identifiant du dernier évènement de l'objet EventSource.
+
retry
+
Le délai de reconnexion à utiliser lors de la tentative d'envoi de l'évènement. Il doit être un nombre entier, spécifiant le temps de reconnexion en millisecondes. Si une valeur non entière est spécifiée, le champ est ignoré.
+
+ +

Tous les autres noms de champs sont ignorés.

+ +
+

Note : Si une ligne ne contient aucun caractère deux-points, la ligne entière est considérée comme le nom du champ, avec un contenu vide.

+
+ +

Exemples

+ +

Messages contenant uniquement des données

+ +

Dans l'exemple suivant, trois messages sont envoyés. Le premier est simplement un commentaire, car il débute par un caractère deux-points. Comme mentionné précédemment, cela peut être utile pour maintenir la connexion si des messages doivent être transmis de façon irrégulière.

+ +

Le deuxième message contient un champ data avec la valeur "du texte". Le troisième message contient un champ data avec la valeur "un autre message\nsur deux lignes". On notera le caractère saut de ligne dans la valeur.

+ +
: this is a test stream
+
+data: du texte
+
+data: un autre message
+data: sur deux lignes
+
+ +

Évènements nommés

+ +

Cet exemple envoie une série d'évènements nommés. Chacun a un nom d'évènement spécifié par le champ event, et un champ data dont la valeur est une chaîne JSON appropriée avec les données nécessaires au client pour réagir à l'évènement. Le champ data peut évidemment contenir n'importe quelles données textuelles, il n'est pas obligatoirement au format JSON.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+
+ +

Mélanger les types de message

+ +

Il n'est pas obligatoire d'utiliser uniquement des messages sans nom ou des évènements nommés. Vous pouvez mélanger les deux dans un même flux d'évènements.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Ici un message système quelconque qui sera utilisé
+data: pour accomplir une tâche.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.EventSource")}}

diff --git a/files/fr/web/api/service_worker_api/index.html b/files/fr/web/api/service_worker_api/index.html deleted file mode 100644 index 76f29f0ca6..0000000000 --- a/files/fr/web/api/service_worker_api/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Service Worker API -slug: Web/API/Service_Worker_API -tags: - - API - - Chargement - - Service Workers - - Workers - - hors-ligne -translation_of: Web/API/Service_Worker_API ---- -
-

{{ServiceWorkerSidebar}}

- -

{{ SeeCompatTable() }}

- -

Les service workers jouent essentiellement le rôle de serveurs proxy placés entre une application web, et le navigateur ou le réseau (lorsque disponible.) Ils sont destinés (entre autres choses) à permettre la création d'expériences de navigation déconnectée efficaces, en interceptant les requêtes réseau et en effectuant des actions appropriées selon que le réseau est disponible et que des ressources mises à jour sont à disposition sur le serveur. Ils permettront aussi d'accéder aux APIs de notifications du serveur (push) et de synchronisation en arrière-plan.

-
- -

Service worker, concepts et usage

- -

Un service worker est un worker événementiel enregistré auprès d'une origine et d'un chemin. Il prend la forme d'un fichier JavaScript qui peut contrôler la page ou le site web auquel il est associé, en interceptant et en modifiant la navigation et les requêtes de ressources, et en mettant en cache les ressources selon une granularité très fine pour vous donner une maîtrise complète de la manière dont doit se comporter votre application dans certaines situations (l'une des plus évidentes étant l'indisponibilité du réseau.)

- -

Un service worker fonctionne dans le contexte d'un worker : il n'a donc pas d'accès au DOM, et s'exécute dans une tâche différente de celle du script principal de votre application, ainsi il est non-bloquant. Il est conçu pour être totalement asynchrone; en conséquence, des APIs telles que XHR en synchrone et localStorage ne peuvent pas être utilisées au sein d'un service worker.

- -

Les service workers fonctionnent uniquement sur HTTPS, pour des raisons de sécurité. Laisser des requêtes réseau modifiées sans défense face aux attaques de l'homme du milieu est une bien mauvaise chose.

- -
-

Note : les service workers ont rallié à eux des tentatives précédemment effectuées dans les mêmes domaines comme l'API AppCache parce qu'ils ne présument pas de ce que vous essayez de faire et ainsi s'interrompent quand ces suppositions ne sont pas tout à fait exactes; tout peut faire l'objet d'un contrôle d'une granularité très fine.

-
- -
-

Note : les service workers font un usage intensif des promesses, comme généralement ils sont en attente de réponses, auxquelles ils réagissent alors différemment en cas de succès ou en cas d'erreur. L'architecture des promesses est idéale dans ces situations.

-
- -

Enregistrement

- -

Un service worker est d'abord enregistré en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. En cas de succès, votre service worker sera téléchargé par le client et tentera l'installation/l'activation (voir ci-dessous) des URLs accédées par l'utilisateur au sein du domaine complet, ou bien au sein d'un sous-ensemble spécifié par vos soins.

- -

Télécharger, installer et activer

- -

A cette étape, votre service worker observera le cycle de vie suivant :

- -
    -
  1. Téléchargement
    2. -
  2. Installation
    3. -
  3. Activation
    4. -
- -

Le service worker est immédiatement téléchargé lorsqu'un utilisateur accède pour la première fois à une page ou à un site contrôlé par un service worker.

- -

Après cela, il est téléchargé toutes les 24 heures environ. Il *peut* être téléchargé plus fréquemment, mais il doit être téléchargé toutes les 24 heures pour s'assurer que des scripts défectueux ne constitueraient pas une nuisance durable.

- -

Une tentative d'installation a lieu lorsque le fichier téléchargé se trouve être nouveau — soit qu'il est différent d'un service worker existant (comparaison bit à bit), soit qu'il s'agit du premier service worker rencontré pour cette page ou ce site.

- -

Si c'est la première fois qu'un service worker est rendu disponible, une tentative d'installation a lieu, puis en cas d'installation avec succès il est activé.

- -

S'il existait déjà un service worker, la nouvelle version est installée en arrière-plan, mais pas encore activée — à cette étape, on parle de worker en attente. Il n'est activé que lorsqu'il n'y a plus aucune page chargée faisant encore usage de l'ancien service worker. Aussitôt qu'il n'y a plus de telles pages chargées, le nouveau service worker est activé (devenant le active worker.)

- -

Vous pouvez guetter l'événement {{domxref("InstallEvent")}}; une action standard consiste à préparer l'usage de votre service worker quand cet événement est lancé, par exemple en créant un cache au moyen de l'API de stockage native, et en y plaçant les ressources dont vous avez besoin pour faire fonctionner de manière déconnectée votre application.

- -

Il y a aussi un événement activate. Lorsque cet événement se produit, c'est généralement le bon moment pour nettoyer les vieux caches et toutes les autres choses associées avec la version précédente de votre service worker.

- -

Votre service worker peut répondre aux requêtes en utilisant l'événement {{domxref("FetchEvent")}}. Vous pouvez modifier la réponse à ces requêtes de la manière que vous souhaitez, en utilisant la méthode {{domxref("FetchEvent.respondWith") }}.

- -
-

Note : Parce que oninstall/onactivate pourraient prendre du temps à s'exécuter, la spec service worker fournit une méthode waitUntil qui, lorsque oninstall ou onactivate sont appelées, passe une promesse. Les événements fonctionnels ne sont pas envoyés au service worker tant que la promesse n'a pas été résolue avec succès.

-
- -

Pour un tutoriel complet qui montre comment réaliser un premier exemple basique, il est conseillé de lire Utiliser les Services Workers.

- -

Autres idées de cas d'utilisation

- -

Les service workers sont aussi destinés à être utilisés pour des choses telles que :

- - - -

À l'avenir, les service workers seront capables de réaliser nombre d'autres tâches utiles au sein d'une plate-forme web, ce qui les rapprochera de la viabilité des applications natives. Il est intéressant de noter que d'autres spécifications peuvent ou commencent à faire usage du contexte des service workers, par exemple :

- - - -

Interfaces

- -
-
{{domxref("Cache") }}
-
Représente le stockage pour le couple d'objets {{domxref("Request")}} / {{domxref("Response")}} qui sont mis en cache comme partie du cycle de vie de {{domxref("ServiceWorker")}}.
-
{{domxref("CacheStorage") }}
-
Représente le stockage pour les objets {{domxref("Cache")}}. Il fournit un répertoire maître à tous les caches nommés auxquels un {{domxref("ServiceWorker")}} peut accéder et maintient une correspondance de noms avec les objets {{domxref("Cache")}} correspondants.
-
{{domxref("Client") }}
-
Représente la portée d'un service worker client. Un service worker client est soit un document dans le contexte d'un navigateur ou un {{domxref("SharedWorker")}}, qui est contrôlé par un active worker.
-
{{domxref("Clients") }}
-
Représente un conteneur pour une liste d'objets {{domxref("Client")}}; la façon principale d'accéder aux clients du service worker actif de l'origine en cours.
-
{{domxref("ExtendableEvent") }}
-
Étend la durée de vie des événements install et activate envoyés au {{domxref("ServiceWorkerGlobalScope")}} comme partie du cycle de vie d'un service worker. Cela garantit que tout événement fonctionnel (comme {{domxref("FetchEvent")}}) n'est pas envoyé au {{domxref("ServiceWorker")}} avant qu'il ne mette à jour des schémas de base de données, supprime des entrées de cache obsolètes, etc.
-
{{domxref("ExtendableMessageEvent") }}
-
L'objet événement d'un événement {{event("message_(ServiceWorker)","message")}} déclenché sur un service worker (lorsqu'un message est reçu par le {{domxref("ServiceWorkerGlobalScope")}} à partir d'un autre contexte) — étend la durée de vie de tels événements.
-
{{domxref("FetchEvent") }}
-
Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, l'interface FetchEvent représente une action de recherche qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations à propos de la requête et de la réponse résultante, et fournit la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}, qui nous permet de produire une réponse arbitraire en retour à la page contrôlée.
-
{{domxref("InstallEvent") }}
-
Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}}, l'interface InstallEvent représente une action d'installation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. En tant qu'enfant de {{domxref("ExtendableEvent")}}, il garantit que les événements fonctionnels tels que {{domxref("FetchEvent")}} ne sont pas envoyés pendant l'installation. 
-
{{domxref("Navigator.serviceWorker") }}
-
Retourne un objet {{domxref("ServiceWorkerContainer")}}, qui fournit un accès provides à l'enregistrement, la supression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le document associé.
-
{{domxref("NotificationEvent") }}
-
Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, l'interface NotificationEvent représente un événement de notification au clic qui est envoyé au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.
-
{{domxref("PeriodicSyncEvent")}} {{non-standard_inline}}
-
-

Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au  {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. 

-
-
{{domxref("PeriodicSyncManager")}} {{non-standard_inline}}
-
Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("PeriodicSyncRegistration")}}.
-
{{domxref("PeriodicSyncRegistration")}} {{non-standard_inline}}
-
Fournit un objet pour la gestion d'une synchronisation périodique en arrière-plan. 
-
{{domxref("ServiceWorker") }}
-
Représente un service worker. De multiples contextes de navigation (e.g. des pages, des workers, etc.) peuvent être associés au même objet ServiceWorker.
-
{{domxref("ServiceWorkerContainer") }}
-
Fournit un objet représentant le service worker comme une unité d'ensemble dans l'éco-système du réseau, en incluant des facilités d'enregistrement, de désinscription et de mise à jour des service workers, et d'accès à l'état des service workers et de leur enregistrement.
-
{{domxref("ServiceWorkerGlobalScope") }}
-
Représente le contexte global d'exécution d'un service worker.
-
{{domxref("ServiceWorkerMessageEvent")}}
-
Contient des informations à propos d'un événement envoyé à la cible d'un {{domxref("ServiceWorkerContainer")}}. 
-
{{domxref("ServiceWorkerRegistration") }}
-
Représente l'enregistrement d'un service worker.
-
{{domxref("SyncEvent")}} {{non-standard_inline}}
-
-

Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. 

-
-
{{domxref("SyncManager")}} {{non-standard_inline}}
-
Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("SyncRegistration")}}.
-
{{domxref("SyncRegistration")}} {{non-standard_inline}}
-
Fournit un objet pour la gestion d'une synchronisation en arrière-plan.
-
{{domxref("WindowClient") }}
-
Représente la portée d'un service worker client qui est un document dans le contexte d'un navigateur, contrôlé par un active worker. C'est un type spécial d'objet {{domxref("Client")}}, avec des propriété et des méthodes supplémentaires.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/api/service_worker_api/index.md b/files/fr/web/api/service_worker_api/index.md new file mode 100644 index 0000000000..76f29f0ca6 --- /dev/null +++ b/files/fr/web/api/service_worker_api/index.md @@ -0,0 +1,174 @@ +--- +title: Service Worker API +slug: Web/API/Service_Worker_API +tags: + - API + - Chargement + - Service Workers + - Workers + - hors-ligne +translation_of: Web/API/Service_Worker_API +--- +
+

{{ServiceWorkerSidebar}}

+ +

{{ SeeCompatTable() }}

+ +

Les service workers jouent essentiellement le rôle de serveurs proxy placés entre une application web, et le navigateur ou le réseau (lorsque disponible.) Ils sont destinés (entre autres choses) à permettre la création d'expériences de navigation déconnectée efficaces, en interceptant les requêtes réseau et en effectuant des actions appropriées selon que le réseau est disponible et que des ressources mises à jour sont à disposition sur le serveur. Ils permettront aussi d'accéder aux APIs de notifications du serveur (push) et de synchronisation en arrière-plan.

+
+ +

Service worker, concepts et usage

+ +

Un service worker est un worker événementiel enregistré auprès d'une origine et d'un chemin. Il prend la forme d'un fichier JavaScript qui peut contrôler la page ou le site web auquel il est associé, en interceptant et en modifiant la navigation et les requêtes de ressources, et en mettant en cache les ressources selon une granularité très fine pour vous donner une maîtrise complète de la manière dont doit se comporter votre application dans certaines situations (l'une des plus évidentes étant l'indisponibilité du réseau.)

+ +

Un service worker fonctionne dans le contexte d'un worker : il n'a donc pas d'accès au DOM, et s'exécute dans une tâche différente de celle du script principal de votre application, ainsi il est non-bloquant. Il est conçu pour être totalement asynchrone; en conséquence, des APIs telles que XHR en synchrone et localStorage ne peuvent pas être utilisées au sein d'un service worker.

+ +

Les service workers fonctionnent uniquement sur HTTPS, pour des raisons de sécurité. Laisser des requêtes réseau modifiées sans défense face aux attaques de l'homme du milieu est une bien mauvaise chose.

+ +
+

Note : les service workers ont rallié à eux des tentatives précédemment effectuées dans les mêmes domaines comme l'API AppCache parce qu'ils ne présument pas de ce que vous essayez de faire et ainsi s'interrompent quand ces suppositions ne sont pas tout à fait exactes; tout peut faire l'objet d'un contrôle d'une granularité très fine.

+
+ +
+

Note : les service workers font un usage intensif des promesses, comme généralement ils sont en attente de réponses, auxquelles ils réagissent alors différemment en cas de succès ou en cas d'erreur. L'architecture des promesses est idéale dans ces situations.

+
+ +

Enregistrement

+ +

Un service worker est d'abord enregistré en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. En cas de succès, votre service worker sera téléchargé par le client et tentera l'installation/l'activation (voir ci-dessous) des URLs accédées par l'utilisateur au sein du domaine complet, ou bien au sein d'un sous-ensemble spécifié par vos soins.

+ +

Télécharger, installer et activer

+ +

A cette étape, votre service worker observera le cycle de vie suivant :

+ +
    +
  1. Téléchargement
    2. +
  2. Installation
    3. +
  3. Activation
    4. +
+ +

Le service worker est immédiatement téléchargé lorsqu'un utilisateur accède pour la première fois à une page ou à un site contrôlé par un service worker.

+ +

Après cela, il est téléchargé toutes les 24 heures environ. Il *peut* être téléchargé plus fréquemment, mais il doit être téléchargé toutes les 24 heures pour s'assurer que des scripts défectueux ne constitueraient pas une nuisance durable.

+ +

Une tentative d'installation a lieu lorsque le fichier téléchargé se trouve être nouveau — soit qu'il est différent d'un service worker existant (comparaison bit à bit), soit qu'il s'agit du premier service worker rencontré pour cette page ou ce site.

+ +

Si c'est la première fois qu'un service worker est rendu disponible, une tentative d'installation a lieu, puis en cas d'installation avec succès il est activé.

+ +

S'il existait déjà un service worker, la nouvelle version est installée en arrière-plan, mais pas encore activée — à cette étape, on parle de worker en attente. Il n'est activé que lorsqu'il n'y a plus aucune page chargée faisant encore usage de l'ancien service worker. Aussitôt qu'il n'y a plus de telles pages chargées, le nouveau service worker est activé (devenant le active worker.)

+ +

Vous pouvez guetter l'événement {{domxref("InstallEvent")}}; une action standard consiste à préparer l'usage de votre service worker quand cet événement est lancé, par exemple en créant un cache au moyen de l'API de stockage native, et en y plaçant les ressources dont vous avez besoin pour faire fonctionner de manière déconnectée votre application.

+ +

Il y a aussi un événement activate. Lorsque cet événement se produit, c'est généralement le bon moment pour nettoyer les vieux caches et toutes les autres choses associées avec la version précédente de votre service worker.

+ +

Votre service worker peut répondre aux requêtes en utilisant l'événement {{domxref("FetchEvent")}}. Vous pouvez modifier la réponse à ces requêtes de la manière que vous souhaitez, en utilisant la méthode {{domxref("FetchEvent.respondWith") }}.

+ +
+

Note : Parce que oninstall/onactivate pourraient prendre du temps à s'exécuter, la spec service worker fournit une méthode waitUntil qui, lorsque oninstall ou onactivate sont appelées, passe une promesse. Les événements fonctionnels ne sont pas envoyés au service worker tant que la promesse n'a pas été résolue avec succès.

+
+ +

Pour un tutoriel complet qui montre comment réaliser un premier exemple basique, il est conseillé de lire Utiliser les Services Workers.

+ +

Autres idées de cas d'utilisation

+ +

Les service workers sont aussi destinés à être utilisés pour des choses telles que :

+ + + +

À l'avenir, les service workers seront capables de réaliser nombre d'autres tâches utiles au sein d'une plate-forme web, ce qui les rapprochera de la viabilité des applications natives. Il est intéressant de noter que d'autres spécifications peuvent ou commencent à faire usage du contexte des service workers, par exemple :

+ + + +

Interfaces

+ +
+
{{domxref("Cache") }}
+
Représente le stockage pour le couple d'objets {{domxref("Request")}} / {{domxref("Response")}} qui sont mis en cache comme partie du cycle de vie de {{domxref("ServiceWorker")}}.
+
{{domxref("CacheStorage") }}
+
Représente le stockage pour les objets {{domxref("Cache")}}. Il fournit un répertoire maître à tous les caches nommés auxquels un {{domxref("ServiceWorker")}} peut accéder et maintient une correspondance de noms avec les objets {{domxref("Cache")}} correspondants.
+
{{domxref("Client") }}
+
Représente la portée d'un service worker client. Un service worker client est soit un document dans le contexte d'un navigateur ou un {{domxref("SharedWorker")}}, qui est contrôlé par un active worker.
+
{{domxref("Clients") }}
+
Représente un conteneur pour une liste d'objets {{domxref("Client")}}; la façon principale d'accéder aux clients du service worker actif de l'origine en cours.
+
{{domxref("ExtendableEvent") }}
+
Étend la durée de vie des événements install et activate envoyés au {{domxref("ServiceWorkerGlobalScope")}} comme partie du cycle de vie d'un service worker. Cela garantit que tout événement fonctionnel (comme {{domxref("FetchEvent")}}) n'est pas envoyé au {{domxref("ServiceWorker")}} avant qu'il ne mette à jour des schémas de base de données, supprime des entrées de cache obsolètes, etc.
+
{{domxref("ExtendableMessageEvent") }}
+
L'objet événement d'un événement {{event("message_(ServiceWorker)","message")}} déclenché sur un service worker (lorsqu'un message est reçu par le {{domxref("ServiceWorkerGlobalScope")}} à partir d'un autre contexte) — étend la durée de vie de tels événements.
+
{{domxref("FetchEvent") }}
+
Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, l'interface FetchEvent représente une action de recherche qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations à propos de la requête et de la réponse résultante, et fournit la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}, qui nous permet de produire une réponse arbitraire en retour à la page contrôlée.
+
{{domxref("InstallEvent") }}
+
Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}}, l'interface InstallEvent représente une action d'installation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. En tant qu'enfant de {{domxref("ExtendableEvent")}}, il garantit que les événements fonctionnels tels que {{domxref("FetchEvent")}} ne sont pas envoyés pendant l'installation. 
+
{{domxref("Navigator.serviceWorker") }}
+
Retourne un objet {{domxref("ServiceWorkerContainer")}}, qui fournit un accès provides à l'enregistrement, la supression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le document associé.
+
{{domxref("NotificationEvent") }}
+
Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, l'interface NotificationEvent représente un événement de notification au clic qui est envoyé au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.
+
{{domxref("PeriodicSyncEvent")}} {{non-standard_inline}}
+
+

Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au  {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. 

+
+
{{domxref("PeriodicSyncManager")}} {{non-standard_inline}}
+
Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("PeriodicSyncRegistration")}}.
+
{{domxref("PeriodicSyncRegistration")}} {{non-standard_inline}}
+
Fournit un objet pour la gestion d'une synchronisation périodique en arrière-plan. 
+
{{domxref("ServiceWorker") }}
+
Représente un service worker. De multiples contextes de navigation (e.g. des pages, des workers, etc.) peuvent être associés au même objet ServiceWorker.
+
{{domxref("ServiceWorkerContainer") }}
+
Fournit un objet représentant le service worker comme une unité d'ensemble dans l'éco-système du réseau, en incluant des facilités d'enregistrement, de désinscription et de mise à jour des service workers, et d'accès à l'état des service workers et de leur enregistrement.
+
{{domxref("ServiceWorkerGlobalScope") }}
+
Représente le contexte global d'exécution d'un service worker.
+
{{domxref("ServiceWorkerMessageEvent")}}
+
Contient des informations à propos d'un événement envoyé à la cible d'un {{domxref("ServiceWorkerContainer")}}. 
+
{{domxref("ServiceWorkerRegistration") }}
+
Représente l'enregistrement d'un service worker.
+
{{domxref("SyncEvent")}} {{non-standard_inline}}
+
+

Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. 

+
+
{{domxref("SyncManager")}} {{non-standard_inline}}
+
Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("SyncRegistration")}}.
+
{{domxref("SyncRegistration")}} {{non-standard_inline}}
+
Fournit un objet pour la gestion d'une synchronisation en arrière-plan.
+
{{domxref("WindowClient") }}
+
Représente la portée d'un service worker client qui est un document dans le contexte d'un navigateur, contrôlé par un active worker. C'est un type spécial d'objet {{domxref("Client")}}, avec des propriété et des méthodes supplémentaires.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/service_worker_api/using_service_workers/index.html b/files/fr/web/api/service_worker_api/using_service_workers/index.html deleted file mode 100644 index 1af137c1f5..0000000000 --- a/files/fr/web/api/service_worker_api/using_service_workers/index.html +++ /dev/null @@ -1,448 +0,0 @@ ---- -title: Utiliser les Service Workers -slug: Web/API/Service_Worker_API/Using_Service_Workers -tags: - - Guide - - Service - - ServiceWorker - - Workers - - basics -translation_of: Web/API/Service_Worker_API/Using_Service_Workers ---- -

{{ServiceWorkerSidebar}}

- -

{{ SeeCompatTable() }}

- -

Cet article fournit des informations pour bien débuter avec les service workers, en présentant une architecture de base, l'inscription d'un service worker, l'installation et l'activation d'un processus pour un nouveau service worker, la mise à jour d'un service worker, le contrôle du cache et la personnalisation des réponses, le tout dans le contexte d'une application de base disponible en mode déconnecté.

- -

Le préambule aux Service Workers

- -

La perte de connexion est un problème majeur auquel sont confrontés les utilisateurs du web depuis des années. La meilleure application web au monde produirait un bien mauvais effet si vous ne pouviez pas la télécharger. Il y a eu de nombreuses tentatives pour mettre en place des technologies susceptibles de résoudre ce problème, comme le montre notre page Offline, et certains problèmes ont été résolus. Mais le problème principal reste l'absence d'un mécanisme de contrôle global pour la mise en cache des ressources et la personnalisation des requêtes réseau.
-
- La première tentative— AppCache — semblait être une bonne idée parce qu'elle permettait de spécifier les ressources à mettre en cache de manière très simple. Cependant, elle faisait beaucoup de suppositions sur la manière de le mettre en place et échouait implacablement si votre application ne se pliait pas exactement à ces suppositions. Lisez Application Cache is a Douchebag de Jake Archibald pour plus de détails.

- -
-

Note : à partir de Firefox 44, lorsque AppCache est utilisé pour fournir un support déconnecté à une page, un message d'avertissement est alors affiché dans la console pour signaler aux développeurs d'utiliser plutôt les Service workers ({{bug("1204581")}}.)

-
- -

Les service workers devraient finalement résoudre ces problèmes. La syntaxe du service Worker est plus complexe que celle de l'AppCache, mais en contrepartie vous pouvez utiliser JavaScript pour contrôler les comportements induits par votre cache local avec une granularité beaucoup plus fine, vous permettant ainsi d'adresser ce problème et beaucoup d'autres. Avec l'aide d'un Service Worker, vous pouvez facilement configurer une application pour d'abord utiliser des ressources mises en cache, fournissant ainsi une première expérience par défaut même en mode déconnecté, avant de récupérer davantage de données depuis le réseau (principe connu généralement sous le nom de Offline First). Cette façon de faire est déjà disponible avec les applications natives, ce qui est l'une des raisons principales de la préférence accordée à ces applications plutôt qu'aux applications web.

- -

Préparatifs aux Service Workers

- -

De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration :

- - - -

Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le localhost est considéré comme une origine sécurisée.

- -

Architecture de base

- -

Avec les service workers, les étapes suivantes sont généralement observées pour une configuration simple :

- -
    -
  1. L'URL du service worker URL est récupérée et enregistrée via {{domxref("serviceWorkerContainer.register()")}}.
    2. -
  2. En cas de succès, le service worker est exécuté dans un {{domxref("ServiceWorkerGlobalScope") }}; c'est en gros une sorte de contexte de worker spécial, fonctionnant hors du fil d'exécution du script principal, sans accès au DOM.
    3. -
  3. Le service worker est désormais prêt à traiter des événements.
    4. -
  4. Une tentative d'installation du worker a lieu lorsque les pages contrôlées par le service worker sont accédées par la suite. Un événement install est toujours le premier envoyé à un service worker (ça peut être le point de départ pour procéder au remplissage d'une base IndexedDB, et à la mise en cache de ressources du site). C'est tout à fait le même type de procédure que l'installation d'une application native ou Firefox OS — en mettant l'ensemble à disposition pour un usage déconnecté.
    5. -
  5. Lorsque le gestionnaire oninstall se termine, on considère que le service worker est installé.
    6. -
  6. L'étape suivante est l'activation. Lorsque le service worker est installé, il reçoit alors un événement activate. L'utilité première de onactivate est de nettoyer les ressources utilisées dans les versions précédentes du script du Service Worker.
    7. -
  7. Le Service Worker contrôle désormais les pages, mais seulement celles ouvertes après que le register() ait réussi. Ainsi un document à sa création s'accompagne ou non d'un Service Worker et conserve cet état tout au long de sa durée de vie. Ainsi les documents devront être rechargés pour réellement être contrôlés.
    8. -
- -

- -

Promesses

- -

Les Promesses sont un puissant mécanisme pour exécuter des opérations asynchrones, dont le succès de l'une dépend du succès de l'autre. Ce mécanisme est au coeur du fonctionnement des service workers.
-
- Les promesses peuvent effectuer bien des choses, mais pour le moment il suffit de savoir que si une promesse est retournée, on peut lui attacher un .then() et inclure des fonctions de rappel en cas de succès, d'échec, etc., ou bien un .catch() et inclure une fonction de rappel en cas d'échec.

- -

Comparons la structure d'une fonction classique de rappel synchrone à la promesse asynchrone équivalente.

- -

sync

- -
try {
-  var value = myFunction();
-  console.log(value);
-} catch(err) {
-  console.log(err);
-}
- -

async

- -
myFunction().then(function(value) {
-  console.log(value);
-  }).catch(function(err) {
-  console.log(err);
-});
- -

Dans le premier exemple, on doit attendre que l'exécution de myFunction() retourne value avant de poursuivre l'exécution de tout autre code. Dans le second exemple, myFunction() retourne une promesse pour value, ainsi le reste du code peut continuer à s'exécuter. Lorsque la promesse est résolue, le code à l'intérieur de then s'exécutera, de manière asynchrone.
-
- Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser .onload pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant .complete, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal.
-
- Alternativement, on pourrait faire notre propre promesse pour gérer ce genre de cas. (Voir l'exemple du test de promesses pour le code source, ou le voir fonctionner en direct.)

- -
-

Note : la mise en place d'un véritable service worker utiliserait la mise en cache et onfetch plutôt que l'API obsolète XMLHttpRequest. Ces fonctionnalités ne sont pas utilisées ici afin de se concentrer sur la compréhension des promesses.

-
- -
function imgLoad(url) {
-  return new Promise(function(resolve, reject) {
-    var request = new XMLHttpRequest();
-    request.open('GET', url);
-    request.responseType = 'blob';
-
-    request.onload = function() {
-      if (request.status == 200) {
-        resolve(request.response);
-      } else {
-        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
-      }
-    };
-
-    request.onerror = function() {
-      reject(Error('There was a network error.'));
-    };
-
-    request.send();
-  });
-}
- -

On retourne une nouvelle promesse en utilisant le constructeur Promise(), qui prend en argument une fonction de rappel avec les paramètres resolve et reject. Quelque part dans la fonction, on a besoin de définir à quoi correspond pour la promesse d'être résolue avec succès ou bien d'être rejetée — dans ce cas, retourner un statut 200 OK status ou pas — et donc appeler resolve en cas de succès, ou reject en cas d'échec. Le reste du contenu de cette fonction correspond à une utilisation plutôt classique d'XHR, et n'appelle pas de commentaires particuliers pour le moment.

- -

Lorsqu'on appelle la fonction imgLoad(), on l'appelle avec l'url de l'image à charger, comme on pourrait s'en douter, mais le reste du code est un peu différent :

- -
var body = document.querySelector('body');
-var myImage = new Image();
-
-imgLoad('myLittleVader.jpg').then(function(response) {
-  var imageURL = window.URL.createObjectURL(response);
-  myImage.src = imageURL;
-  body.appendChild(myImage);
-}, function(Error) {
-  console.log(Error);
-});
- -

A la fin de l'appel de la fonction, on ajoute la méthode then() de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : myImage et on l'ajoute au body (son argument est la valeur request.response contenue dans la méthode resolve de la promesse); en cas de rejet, on retourne une erreur dans la console.

- -

Le tout se déroule de manière asynchrone.

- -
-

Note : il est possible d'assembler des appels de promesse, par exemple:
- myPromise().then(success, failure).then(success).catch(failure);

-
- -
-

Note : pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald JavaScript Promises: there and back again.

-
- -

Démo de service workers

- -

Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée sw-test, qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la spécification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !

- -

- -

Vous pouvez consulter le code source sur GitHub, et voir l'exemple en direct. Le bout de code qui sera appelé est la promesse (voir app.js lines 17-42), qui est une version modifiée du code présenté ci-dessus, dans la démo du test de promesses. Il en diffère de la façon suivante :

- -
    -
  1. Dans l'original, on considère l'URL d'une image à charger. Dans cette version, on passe un fragment JSON contenant toutes les données d'une seule image (voir à quoi il ressemble dans image-list.js). C'est parce que toutes les données pour que chaque promesse soit résolue doivent être passées avec la promesse, que c'est asynchrone. Si l'on passe juste l'url, et si l'on essaie alors d'accéder aux autres éléments dans le JSON séparément lorsqu'on itère plus tard avec la boucle for(), cela ne marchera pas, puisque la promesse ne se résolvera pas en même temps que les itérations sont faites (c'est un mécanisme synchrone.)
    2. -
  2. La promesse est résolue en réalité avec un tableau, puisqu'on veut rendre le blob de l'image chargée disponible à la fonction de résolution plus tard dans le code, mais aussi le nom de l'image, les crédits et le texte alternatif (voir app.js lines 26-29). Les promesses se résolvent seulement avec un seul argument, aussi si l'on souhaite la résoudre avec des valeurs multiples, on a besoin d'utiliser un tableau ou un objet.
    3. -
  3. Pour accéder aux valeurs de la promesse résolue, on accède alors à cette fonction comme on peut s'y attendre (voir app.js lines 55-59.) Cela peut sembler un peu étrange au premier abord, mais c'est la manière dont les promesses fonctionnent.
    4. -
- -

Introduction aux service workers

- -

Maintenant, c'est au tour des service workers !

- -

Enregistrer un worker

- -

Le premier bloc de code dans le fichier JavaScript de l'application — app.js — se présente comme suit. C'est le point d'entrée pour utiliser des service workers.

- -
if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
-    // registration worked
-    console.log('Registration succeeded. Scope is ' + reg.scope);
-  }).catch(function(error) {
-    // registration failed
-    console.log('Registration failed with ' + error);
-  });
-};
- -
    -
  1. Le bloc extérieur effectue un test de détection de fonctionnalité pour s'assurer que les service workers sont supportés avant d'essayer d'en enregistrer un.
    2. -
  2. Ensuite, la fonction {{domxref("ServiceWorkerContainer.register()") }} est utilisée pour enregistrer le service worker de ce site, qui est juste un fichier JavaScript présent au sein de notre application (à noter qu'il s'agit de l'URL relative du fichier par rapport à l'origine, et non seulement le fichier JS qui le référence.)
    3. -
  3. Le paramètre scope est optionnel, et peut être utilisé pour spécifier le sous-ensemble du contenu qui doit être soumis au contrôle du service worker. Dans ce cas, on a spécifié '/sw-test/', ce qui signifie tous les contenus présents sous l'origine de l'application. S'il n'est pas précisé, il correspondra de toute façon par défaut à cette valeur; il a été explicitement spécifié ici à titre d'illustration.
    4. -
  4. La fonction .then() de la promesse est utilisée pour chaîner un traitement en cas de succès à la structure de la promesse. Lorsque la promesse est résolue avec succès, le code qu'elle contient est exécuté.
    5. -
  5. Finalement, une fonction .catch() est chaînée à la fin, qui s'exécutera si la promesse est rejetée.
    6. -
- -

A ce stade un service worker est enregistré, qui s'exécute dans le contexte d'un worker, et n'a donc aucun accès au DOM. Le code s'exécute ainsi dans le service worker, extérieurement aux pages normales dont il contrôle le chargement.
-
- Un seul service worker peut contrôler de nombreuses pages. Chaque fois qu'une page au sein du scope est chargée, le service worker est installé et opère sur la page. Attention, il faut faire un usage prudent des variables globales dans le script du service worker : chaque page ne dispose pas de son propre et unique worker.

- -
-

Note : un service worker fonctionne comme un serveur proxy, permettant de modifier les requêtes et les réponses, de les remplacer par des éléments de son propre cache, et bien plus.

-
- -
-

Note : une chose importante à savoir au sujet des service workers est que si la détection de fonctionnalité est utilisée comme ci-dessus, les navigateurs qui ne supportent pas les service workers peuvent simplement utiliser l'application de la manière normalement attendue. De plus, si vous utilisez AppCache et SW sur une page, les navigateurs qui ne supportent pas SW mais supportent AppCache l'utiliseront, et les navigateurs qui supportent les deux ignoreront AppCache au profit de SW.

-
- -

Pourquoi mon service worker échoue à s'enregistrer ?

- -

Ce pourrait être pour les raisons suivantes :

- -
    -
  1. L'application ne fonctionne pas au travers d'HTTPS
    2. -
  2. Le chemin du fichier du service worker file est syntaxiquement incorrect — il a besoin d'être exprimé relativement à l'origine, et non pas par rapport au répertoire racine. Dans l'exemple, le worker a comme emplacement https://mdn.github.io/sw-test/sw.js, et la racine de l'application est https://mdn.github.io/sw-test/. Mais la syntaxe du chemin s'écrit /sw-test/sw.js, et non /sw.js.
    3. -
  3. Le service worker considéré se trouve sur une origine différente de celle de l'application. Ce qui n'est pas permis.
    4. -
- -

Installer et activer : remplir le cache

- -

Après l'enregistrement du service worker, le navigateur tente d'installer puis d'activer le service worker sur la page ou le site.
-
- L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessaires pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total.

- -
-

Note : L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la démo Topeka de Google, ou peut-être stocker les ressources dans IndexedDB.

-
- -

Commençons cette section par l'examen d'un exemple de code — c'est le premier bloc présent dans le service worker:

- -
this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll([
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      ]);
-    })
-  );
-});
- -
    -
  1. Un écouteur d'événement install est d'abord ajouté au service worker (d'où le  this), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de waitUntil() n'a pas été exécuté avec succès.
    2. -
  2. A l'intérieur de waitUntil() la méthode caches.open() est utilisée pour créer un nouveau cache appelé v1, ce qui constitue la version 1 du cache de ressources de notre site. Cette fonction retourne une promesse lorsque le cache est créé; une fois résolue, est appelée une fonction qui appelle elle-même addAll() sur le cache créé, avec pour paramètre un tableau d'URLs relatives à l'origine correspondant aux ressources à mettre en cache.
    3. -
  3. Si la promesse est rejetée, l'installation échoue, et le worker ne fait rien de plus. Le code peut être alors corrigé et l'opération retentée la prochaine fois que l'enregistrement survient.
    4. -
  4. Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence  la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.)
    5. -
- -
-

Note : localStorage fonctionne de la même façon que le cache du service worker, mais de manière synchrone, et il n'est donc pas autorisé dans les service workers.

-
- -
-

Note : IndexedDB peut être utilisé dans un service worker pour le stockage des donnés si nécessaire.

-
- -

Réponses personnalisées aux requêtes

- -

Une fois que les ressources du site sont mises en cache, les service workers doivent savoir quoi faire de ce contenu en cache. L'événement fetch permet de gérer cela facilement.

- -

Un événement fetch se déclenche à chaque fois qu'une ressource contrôlée par un service worker est retournée, ce qui inclut les documents à l'intérieur du contour spécifié, et toute ressource référencée dans ces documents (par exemple si index.html effectue une requête vers un autre domaine pour l'insertion d'une image, cela se fait encore au travers de son service worker.)

- -

On peut attacher un écouteur de l'événement fetch au service worker, puis appeler la méthode respondWith() sur l'événement pour détourner les réponses HTTP et les mettre à jour en leur jetant un sort particulier.

- -
this.addEventListener('fetch', function(event) {
-  event.respondWith(
-    // la magie opère ici
-  );
-});
- -

On peut déjà simplement répondre avec la ressource en cache dont l'url correspond à celle de la requête réseau, dans chaque cas :

- -
this.addEventListener('fetch', function(event) {
-  event.respondWith(
-    caches.match(event.request)
-  );
-});
- -

caches.match(event.request) permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales.

- -

Voici quelques autres options disponibles pour que la magie opère (voir la documentation de l'API Fetch pour plus d'informations sur les objets {{domxref("Request")}} et {{domxref("Response")}}.)

- -
    -
  1. -

    Le constructeur {{domxref("Response.Response","Response()")}} permet de créer une réponse personnalisée. Dans cet exemple, une chaîne de caractères est simplement retournée :

    - - 
    new Response('Hello from your friendly neighbourhood service worker!');
    -
    2. -
  2. -

    La Response plus complexe ci-dessous montre qu'il est possible de passer optionnellement un ensemble d'en-têtes avec la réponse, émulant ainsi des en-têtes de réponse HTTP standards. Ici, on signale au navigateur quel est le type de contenu de notre réponse artificielle :

    - - 
    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
-  headers: { 'Content-Type': 'text/html' }
-})
    -
    3. -
  3. -

    Si une correspondance n'est pas trouvée en cache, on peut indiquer simplement au navigateur d'effectuer ({{domxref("GlobalFetch.fetch","fetch")}}) la requête réseau par défaut pour cette ressource, afin de récupérer cette nouvelle ressource sur le réseau si disponible :

    - - 
    fetch(event.request)
    -
    4. -
  4. -

    Si une correspondance n'est pas trouvée en cache et que le réseau n'est pas disponible, on peut alors faire correspondre la requête avec une page de rechange par défaut en guise de réponse en utilisant {{domxref("CacheStorage.match","match()")}}, comme suit :

    - - 
    caches.match('/fallback.html');
    -
    5. -
  5. -

    On peut récupérer beaucoup d'informations à propos de chaque requête en interrogeant les paramètres de l'objet {{domxref("Request")}} retourné par {{domxref("FetchEvent")}} :

    - - 
    event.request.url
-event.request.method
-event.request.headers
-event.request.body
    -
    6. -
- -

Récupérer des requêtes en erreur

- -

On vient de voir que caches.match(event.request) est important lorsqu'il y a correspondance avec le cache du service worker, mais qu'en est-il des cas où rien ne correspond ? Si aucune sorte de gestionnaire d'erreur n'est fourni, la promesse est rejetée et une erreur réseau est retournée lorsqu'aucune correspondance n'est trouvée.

- -

Heureusement, la structure des service workers qui repose sur les promesses rend triviale la gestion des alternatives à une situation de succès. On pourrait faire ceci :

- -
this.addEventListener('fetch', function(event) {
-  event.respondWith(
-    caches.match(event.request).catch(function() {
-      return fetch(event.request);
-    })
-  );
-});
- -

Si la promesse est rejetée, la fonction catch() retourne à la place la requête réseau par défaut, ce qui signifie que si le réseau est disponible la ressource sera chargée à partir du serveur.

- -

Plus malin encore, on pourrait non seulement récupérer la ressource à partir du serveur, mais aussi la sauvegarder dans le cache afin que les requêtes ultérieures pour cette ressource puissent être disponibles aussi en mode déconnecté. Cela signifierait que toute image supplémentaire ajoutée à la galerie Star Wars pourrait être récupérée par l'application et mise en cache. Le code suivant illustre ce mécanisme :

- -
this.addEventListener('fetch', function(event) {
-  event.respondWith(
-    caches.match(event.request).catch(function() {
-      return fetch(event.request).then(function(response) {
-        return caches.open('v1').then(function(cache) {
-          cache.put(event.request, response.clone());
-          return response;
-        });
-      });
-    })
-  );
-});
- -

Ici on retourne la requête réseau par défaut au moyen de return fetch(event.request), qui retourne lui-même une promesse. Lorsque cette promesse est résolue, on exécute une fonction qui sollicite le cache en utilisant caches.open('v1'); une promesse est de nouveau retournée. Lorsque cette promesse est résolue, cache.put() est utilisée pour ajouter la ressource au cache. La ressource est récupérée à partir de event.request, et la réponse est alors clonée avec response.clone() et ajoutée au cache. Le clone est placé dans le cache, et la réponse originale est retournée au navigateur et délivrée à la page qui la requiert.

- -

Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois.  Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois.

- -

Le dernier problème qui demeure alors est l'échec de la requête au cas où elle n'a aucune correspondance dans le cache et que le réseau n'est pas disponible. Fournir un document de rechange par défaut permet quoiqu'il arrive, à l'utilisateur de récupérer quelque chose :

- -
this.addEventListener('fetch', function(event) {
-  event.respondWith(
-    caches.match(event.request).catch(function() {
-      return fetch(event.request).then(function(response) {
-        return caches.open('v1').then(function(cache) {
-          cache.put(event.request, response.clone());
-          return response;
-        });
-      });
-    }).catch(function() {
-      return caches.match('/sw-test/gallery/myLittleVader.jpg');
-    })
-  );
-});
- -

Une image de rechange a été choisie parce que les seules mises à jour susceptibles d'échouer sont les nouvelles images, puisque tous les autres éléments dépendent de l'installation comme vu précédemment dans la description de l'écouteur de l'événement install.

- -

Suggestion d'amélioration d'un modèle de code

- -

Ce code utilise un chaînage de promesses plus standard et retourne la réponse au document sans avoir à attendre que caches.open() soit résolue :

- -
this.addEventListener('fetch', function(event) {
-  var response;
-  event.respondWith(caches.match(event.request).catch(function() {
-    return fetch(event.request);
-  }).then(function(r) {
-    response = r;
-    caches.open('v1').then(function(cache) {
-      cache.put(event.request, response);
-    });
-    return response.clone();
-  }).catch(function() {
-    return caches.match('/sw-test/gallery/myLittleVader.jpg');
-  }));
-});
- -

Mettre à jour le service worker

- -

Si le service worker a été précédemment installé, et qu'une nouvelle version du worker est disponible au chargement ou au rafraîchissement de la page, la nouvelle version est installée en arrière-plan, mais pas encore activée. Elle ne sera activée que lorsqu'il n'y aura plus aucune page chargée qui utilise encore l'ancien service worker. Dès lors qu'il n'y a plus de telles pages encore chargées, le nouveau service worker est activé.

- -

On souhaite mettre à jour l'écouteur d'événement install dans le nouveau service worker de la façon suivante (à noter le nouveau numéro de version) :

- -
this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v2').then(function(cache) {
-      return cache.addAll([
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-
-             …
-
-              // include other new resources for the new version...
-      ]);
-    });
-  );
-});
- -

Tandis que la mise à jour se produit, la version précédente est encore en charge de récupérer des ressources. La nouvelle version est installée en arrière-plan. Le nouveau cache se nomme v2, et ainsi ne perturbe en rien le précédent cache nommé v1.

- -

Lorsque plus aucune page n'utilise la version actuelle, le nouveau worker est activé et prend en charge les requêtes.

- -

Supprimer les anciens caches

- -

Il existe un événement activate. Il est généralement utilisé pour faire un travail qui aurait interrompu le fonctionnement d'une version précédente alors qu'elle était encore en cours d'utilisation, comme par exemple se débarrasser des anciens caches. Il est aussi utile pour supprimer des données qui ne sont plus nécessaires afin d'éviter de surcharger l'espace disque — chaque navigateur dispose d'une limite physique quant à la capacité de stockage en cache dont le service worker peut bénéficier. Le navigateur gère au mieux l'espace disque, mais il peut supprimer le stockage du Cache pour une origine. Le navigateur supprimera généralement toutes les données d'une origine ou bien aucune.

- -

Les promesses passées à waitUntil() bloqueront les autres événements jusqu'à réalisation complète, ainsi on a l'assurance que l'opération de nettoyage aura été menée à terme au moment où surviendra le premier événement fetch du nouveau cache.

- -
this.addEventListener('activate', function(event) {
-  var cacheWhitelist = ['v2'];
-
-  event.waitUntil(
-    caches.keys().then(function(keyList) {
-      return Promise.all(keyList.map(function(key) {
-        if (cacheWhitelist.indexOf(key) === -1) {
-          return caches.delete(key);
-        }
-      }));
-    })
-  );
-});
- -

Outils de développement

- -

Chrome dispose de chrome://inspect/#service-workers, qui montre l'activité du service worker courant et le stockage sur l'appareil, et chrome://serviceworker-internals, qui offre plus de détails et permet de démarrer/arrêter/déboguer le processus du worker. A l'avenir, des modes dégradé/déconnecté seront ajoutés pour simuler des connexions mauvaises ou inexistantes, ce qui sera une bonne chose.

- -

Firefox a aussi commencé à implanter quelques outils utiles concernant les service workers :

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/service_worker_api/using_service_workers/index.md b/files/fr/web/api/service_worker_api/using_service_workers/index.md new file mode 100644 index 0000000000..1af137c1f5 --- /dev/null +++ b/files/fr/web/api/service_worker_api/using_service_workers/index.md @@ -0,0 +1,448 @@ +--- +title: Utiliser les Service Workers +slug: Web/API/Service_Worker_API/Using_Service_Workers +tags: + - Guide + - Service + - ServiceWorker + - Workers + - basics +translation_of: Web/API/Service_Worker_API/Using_Service_Workers +--- +

{{ServiceWorkerSidebar}}

+ +

{{ SeeCompatTable() }}

+ +

Cet article fournit des informations pour bien débuter avec les service workers, en présentant une architecture de base, l'inscription d'un service worker, l'installation et l'activation d'un processus pour un nouveau service worker, la mise à jour d'un service worker, le contrôle du cache et la personnalisation des réponses, le tout dans le contexte d'une application de base disponible en mode déconnecté.

+ +

Le préambule aux Service Workers

+ +

La perte de connexion est un problème majeur auquel sont confrontés les utilisateurs du web depuis des années. La meilleure application web au monde produirait un bien mauvais effet si vous ne pouviez pas la télécharger. Il y a eu de nombreuses tentatives pour mettre en place des technologies susceptibles de résoudre ce problème, comme le montre notre page Offline, et certains problèmes ont été résolus. Mais le problème principal reste l'absence d'un mécanisme de contrôle global pour la mise en cache des ressources et la personnalisation des requêtes réseau.
+
+ La première tentative— AppCache — semblait être une bonne idée parce qu'elle permettait de spécifier les ressources à mettre en cache de manière très simple. Cependant, elle faisait beaucoup de suppositions sur la manière de le mettre en place et échouait implacablement si votre application ne se pliait pas exactement à ces suppositions. Lisez Application Cache is a Douchebag de Jake Archibald pour plus de détails.

+ +
+

Note : à partir de Firefox 44, lorsque AppCache est utilisé pour fournir un support déconnecté à une page, un message d'avertissement est alors affiché dans la console pour signaler aux développeurs d'utiliser plutôt les Service workers ({{bug("1204581")}}.)

+
+ +

Les service workers devraient finalement résoudre ces problèmes. La syntaxe du service Worker est plus complexe que celle de l'AppCache, mais en contrepartie vous pouvez utiliser JavaScript pour contrôler les comportements induits par votre cache local avec une granularité beaucoup plus fine, vous permettant ainsi d'adresser ce problème et beaucoup d'autres. Avec l'aide d'un Service Worker, vous pouvez facilement configurer une application pour d'abord utiliser des ressources mises en cache, fournissant ainsi une première expérience par défaut même en mode déconnecté, avant de récupérer davantage de données depuis le réseau (principe connu généralement sous le nom de Offline First). Cette façon de faire est déjà disponible avec les applications natives, ce qui est l'une des raisons principales de la préférence accordée à ces applications plutôt qu'aux applications web.

+ +

Préparatifs aux Service Workers

+ +

De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration :

+ + + +

Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le localhost est considéré comme une origine sécurisée.

+ +

Architecture de base

+ +

Avec les service workers, les étapes suivantes sont généralement observées pour une configuration simple :

+ +
    +
  1. L'URL du service worker URL est récupérée et enregistrée via {{domxref("serviceWorkerContainer.register()")}}.
    2. +
  2. En cas de succès, le service worker est exécuté dans un {{domxref("ServiceWorkerGlobalScope") }}; c'est en gros une sorte de contexte de worker spécial, fonctionnant hors du fil d'exécution du script principal, sans accès au DOM.
    3. +
  3. Le service worker est désormais prêt à traiter des événements.
    4. +
  4. Une tentative d'installation du worker a lieu lorsque les pages contrôlées par le service worker sont accédées par la suite. Un événement install est toujours le premier envoyé à un service worker (ça peut être le point de départ pour procéder au remplissage d'une base IndexedDB, et à la mise en cache de ressources du site). C'est tout à fait le même type de procédure que l'installation d'une application native ou Firefox OS — en mettant l'ensemble à disposition pour un usage déconnecté.
    5. +
  5. Lorsque le gestionnaire oninstall se termine, on considère que le service worker est installé.
    6. +
  6. L'étape suivante est l'activation. Lorsque le service worker est installé, il reçoit alors un événement activate. L'utilité première de onactivate est de nettoyer les ressources utilisées dans les versions précédentes du script du Service Worker.
    7. +
  7. Le Service Worker contrôle désormais les pages, mais seulement celles ouvertes après que le register() ait réussi. Ainsi un document à sa création s'accompagne ou non d'un Service Worker et conserve cet état tout au long de sa durée de vie. Ainsi les documents devront être rechargés pour réellement être contrôlés.
    8. +
+ +

+ +

Promesses

+ +

Les Promesses sont un puissant mécanisme pour exécuter des opérations asynchrones, dont le succès de l'une dépend du succès de l'autre. Ce mécanisme est au coeur du fonctionnement des service workers.
+
+ Les promesses peuvent effectuer bien des choses, mais pour le moment il suffit de savoir que si une promesse est retournée, on peut lui attacher un .then() et inclure des fonctions de rappel en cas de succès, d'échec, etc., ou bien un .catch() et inclure une fonction de rappel en cas d'échec.

+ +

Comparons la structure d'une fonction classique de rappel synchrone à la promesse asynchrone équivalente.

+ +

sync

+ +
try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}
+ +

async

+ +
myFunction().then(function(value) {
+  console.log(value);
+  }).catch(function(err) {
+  console.log(err);
+});
+ +

Dans le premier exemple, on doit attendre que l'exécution de myFunction() retourne value avant de poursuivre l'exécution de tout autre code. Dans le second exemple, myFunction() retourne une promesse pour value, ainsi le reste du code peut continuer à s'exécuter. Lorsque la promesse est résolue, le code à l'intérieur de then s'exécutera, de manière asynchrone.
+
+ Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser .onload pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant .complete, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal.
+
+ Alternativement, on pourrait faire notre propre promesse pour gérer ce genre de cas. (Voir l'exemple du test de promesses pour le code source, ou le voir fonctionner en direct.)

+ +
+

Note : la mise en place d'un véritable service worker utiliserait la mise en cache et onfetch plutôt que l'API obsolète XMLHttpRequest. Ces fonctionnalités ne sont pas utilisées ici afin de se concentrer sur la compréhension des promesses.

+
+ +
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = function() {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}
+ +

On retourne une nouvelle promesse en utilisant le constructeur Promise(), qui prend en argument une fonction de rappel avec les paramètres resolve et reject. Quelque part dans la fonction, on a besoin de définir à quoi correspond pour la promesse d'être résolue avec succès ou bien d'être rejetée — dans ce cas, retourner un statut 200 OK status ou pas — et donc appeler resolve en cas de succès, ou reject en cas d'échec. Le reste du contenu de cette fonction correspond à une utilisation plutôt classique d'XHR, et n'appelle pas de commentaires particuliers pour le moment.

+ +

Lorsqu'on appelle la fonction imgLoad(), on l'appelle avec l'url de l'image à charger, comme on pourrait s'en douter, mais le reste du code est un peu différent :

+ +
var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});
+ +

A la fin de l'appel de la fonction, on ajoute la méthode then() de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : myImage et on l'ajoute au body (son argument est la valeur request.response contenue dans la méthode resolve de la promesse); en cas de rejet, on retourne une erreur dans la console.

+ +

Le tout se déroule de manière asynchrone.

+ +
+

Note : il est possible d'assembler des appels de promesse, par exemple:
+ myPromise().then(success, failure).then(success).catch(failure);

+
+ +
+

Note : pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald JavaScript Promises: there and back again.

+
+ +

Démo de service workers

+ +

Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée sw-test, qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la spécification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !

+ +

+ +

Vous pouvez consulter le code source sur GitHub, et voir l'exemple en direct. Le bout de code qui sera appelé est la promesse (voir app.js lines 17-42), qui est une version modifiée du code présenté ci-dessus, dans la démo du test de promesses. Il en diffère de la façon suivante :

+ +
    +
  1. Dans l'original, on considère l'URL d'une image à charger. Dans cette version, on passe un fragment JSON contenant toutes les données d'une seule image (voir à quoi il ressemble dans image-list.js). C'est parce que toutes les données pour que chaque promesse soit résolue doivent être passées avec la promesse, que c'est asynchrone. Si l'on passe juste l'url, et si l'on essaie alors d'accéder aux autres éléments dans le JSON séparément lorsqu'on itère plus tard avec la boucle for(), cela ne marchera pas, puisque la promesse ne se résolvera pas en même temps que les itérations sont faites (c'est un mécanisme synchrone.)
    2. +
  2. La promesse est résolue en réalité avec un tableau, puisqu'on veut rendre le blob de l'image chargée disponible à la fonction de résolution plus tard dans le code, mais aussi le nom de l'image, les crédits et le texte alternatif (voir app.js lines 26-29). Les promesses se résolvent seulement avec un seul argument, aussi si l'on souhaite la résoudre avec des valeurs multiples, on a besoin d'utiliser un tableau ou un objet.
    3. +
  3. Pour accéder aux valeurs de la promesse résolue, on accède alors à cette fonction comme on peut s'y attendre (voir app.js lines 55-59.) Cela peut sembler un peu étrange au premier abord, mais c'est la manière dont les promesses fonctionnent.
    4. +
+ +

Introduction aux service workers

+ +

Maintenant, c'est au tour des service workers !

+ +

Enregistrer un worker

+ +

Le premier bloc de code dans le fichier JavaScript de l'application — app.js — se présente comme suit. C'est le point d'entrée pour utiliser des service workers.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
+    // registration worked
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch(function(error) {
+    // registration failed
+    console.log('Registration failed with ' + error);
+  });
+};
+ +
    +
  1. Le bloc extérieur effectue un test de détection de fonctionnalité pour s'assurer que les service workers sont supportés avant d'essayer d'en enregistrer un.
    2. +
  2. Ensuite, la fonction {{domxref("ServiceWorkerContainer.register()") }} est utilisée pour enregistrer le service worker de ce site, qui est juste un fichier JavaScript présent au sein de notre application (à noter qu'il s'agit de l'URL relative du fichier par rapport à l'origine, et non seulement le fichier JS qui le référence.)
    3. +
  3. Le paramètre scope est optionnel, et peut être utilisé pour spécifier le sous-ensemble du contenu qui doit être soumis au contrôle du service worker. Dans ce cas, on a spécifié '/sw-test/', ce qui signifie tous les contenus présents sous l'origine de l'application. S'il n'est pas précisé, il correspondra de toute façon par défaut à cette valeur; il a été explicitement spécifié ici à titre d'illustration.
    4. +
  4. La fonction .then() de la promesse est utilisée pour chaîner un traitement en cas de succès à la structure de la promesse. Lorsque la promesse est résolue avec succès, le code qu'elle contient est exécuté.
    5. +
  5. Finalement, une fonction .catch() est chaînée à la fin, qui s'exécutera si la promesse est rejetée.
    6. +
+ +

A ce stade un service worker est enregistré, qui s'exécute dans le contexte d'un worker, et n'a donc aucun accès au DOM. Le code s'exécute ainsi dans le service worker, extérieurement aux pages normales dont il contrôle le chargement.
+
+ Un seul service worker peut contrôler de nombreuses pages. Chaque fois qu'une page au sein du scope est chargée, le service worker est installé et opère sur la page. Attention, il faut faire un usage prudent des variables globales dans le script du service worker : chaque page ne dispose pas de son propre et unique worker.

+ +
+

Note : un service worker fonctionne comme un serveur proxy, permettant de modifier les requêtes et les réponses, de les remplacer par des éléments de son propre cache, et bien plus.

+
+ +
+

Note : une chose importante à savoir au sujet des service workers est que si la détection de fonctionnalité est utilisée comme ci-dessus, les navigateurs qui ne supportent pas les service workers peuvent simplement utiliser l'application de la manière normalement attendue. De plus, si vous utilisez AppCache et SW sur une page, les navigateurs qui ne supportent pas SW mais supportent AppCache l'utiliseront, et les navigateurs qui supportent les deux ignoreront AppCache au profit de SW.

+
+ +

Pourquoi mon service worker échoue à s'enregistrer ?

+ +

Ce pourrait être pour les raisons suivantes :

+ +
    +
  1. L'application ne fonctionne pas au travers d'HTTPS
    2. +
  2. Le chemin du fichier du service worker file est syntaxiquement incorrect — il a besoin d'être exprimé relativement à l'origine, et non pas par rapport au répertoire racine. Dans l'exemple, le worker a comme emplacement https://mdn.github.io/sw-test/sw.js, et la racine de l'application est https://mdn.github.io/sw-test/. Mais la syntaxe du chemin s'écrit /sw-test/sw.js, et non /sw.js.
    3. +
  3. Le service worker considéré se trouve sur une origine différente de celle de l'application. Ce qui n'est pas permis.
    4. +
+ +

Installer et activer : remplir le cache

+ +

Après l'enregistrement du service worker, le navigateur tente d'installer puis d'activer le service worker sur la page ou le site.
+
+ L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessaires pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total.

+ +
+

Note : L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la démo Topeka de Google, ou peut-être stocker les ressources dans IndexedDB.

+
+ +

Commençons cette section par l'examen d'un exemple de code — c'est le premier bloc présent dans le service worker:

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+ +
    +
  1. Un écouteur d'événement install est d'abord ajouté au service worker (d'où le  this), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de waitUntil() n'a pas été exécuté avec succès.
    2. +
  2. A l'intérieur de waitUntil() la méthode caches.open() est utilisée pour créer un nouveau cache appelé v1, ce qui constitue la version 1 du cache de ressources de notre site. Cette fonction retourne une promesse lorsque le cache est créé; une fois résolue, est appelée une fonction qui appelle elle-même addAll() sur le cache créé, avec pour paramètre un tableau d'URLs relatives à l'origine correspondant aux ressources à mettre en cache.
    3. +
  3. Si la promesse est rejetée, l'installation échoue, et le worker ne fait rien de plus. Le code peut être alors corrigé et l'opération retentée la prochaine fois que l'enregistrement survient.
    4. +
  4. Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence  la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.)
    5. +
+ +
+

Note : localStorage fonctionne de la même façon que le cache du service worker, mais de manière synchrone, et il n'est donc pas autorisé dans les service workers.

+
+ +
+

Note : IndexedDB peut être utilisé dans un service worker pour le stockage des donnés si nécessaire.

+
+ +

Réponses personnalisées aux requêtes

+ +

Une fois que les ressources du site sont mises en cache, les service workers doivent savoir quoi faire de ce contenu en cache. L'événement fetch permet de gérer cela facilement.

+ +

Un événement fetch se déclenche à chaque fois qu'une ressource contrôlée par un service worker est retournée, ce qui inclut les documents à l'intérieur du contour spécifié, et toute ressource référencée dans ces documents (par exemple si index.html effectue une requête vers un autre domaine pour l'insertion d'une image, cela se fait encore au travers de son service worker.)

+ +

On peut attacher un écouteur de l'événement fetch au service worker, puis appeler la méthode respondWith() sur l'événement pour détourner les réponses HTTP et les mettre à jour en leur jetant un sort particulier.

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // la magie opère ici
+  );
+});
+ +

On peut déjà simplement répondre avec la ressource en cache dont l'url correspond à celle de la requête réseau, dans chaque cas :

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});
+ +

caches.match(event.request) permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales.

+ +

Voici quelques autres options disponibles pour que la magie opère (voir la documentation de l'API Fetch pour plus d'informations sur les objets {{domxref("Request")}} et {{domxref("Response")}}.)

+ +
    +
  1. +

    Le constructeur {{domxref("Response.Response","Response()")}} permet de créer une réponse personnalisée. Dans cet exemple, une chaîne de caractères est simplement retournée :

    + + 
    new Response('Hello from your friendly neighbourhood service worker!');
    +
    2. +
  2. +

    La Response plus complexe ci-dessous montre qu'il est possible de passer optionnellement un ensemble d'en-têtes avec la réponse, émulant ainsi des en-têtes de réponse HTTP standards. Ici, on signale au navigateur quel est le type de contenu de notre réponse artificielle :

    + + 
    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
+  headers: { 'Content-Type': 'text/html' }
+})
    +
    3. +
  3. +

    Si une correspondance n'est pas trouvée en cache, on peut indiquer simplement au navigateur d'effectuer ({{domxref("GlobalFetch.fetch","fetch")}}) la requête réseau par défaut pour cette ressource, afin de récupérer cette nouvelle ressource sur le réseau si disponible :

    + + 
    fetch(event.request)
    +
    4. +
  4. +

    Si une correspondance n'est pas trouvée en cache et que le réseau n'est pas disponible, on peut alors faire correspondre la requête avec une page de rechange par défaut en guise de réponse en utilisant {{domxref("CacheStorage.match","match()")}}, comme suit :

    + + 
    caches.match('/fallback.html');
    +
    5. +
  5. +

    On peut récupérer beaucoup d'informations à propos de chaque requête en interrogeant les paramètres de l'objet {{domxref("Request")}} retourné par {{domxref("FetchEvent")}} :

    + + 
    event.request.url
+event.request.method
+event.request.headers
+event.request.body
    +
    6. +
+ +

Récupérer des requêtes en erreur

+ +

On vient de voir que caches.match(event.request) est important lorsqu'il y a correspondance avec le cache du service worker, mais qu'en est-il des cas où rien ne correspond ? Si aucune sorte de gestionnaire d'erreur n'est fourni, la promesse est rejetée et une erreur réseau est retournée lorsqu'aucune correspondance n'est trouvée.

+ +

Heureusement, la structure des service workers qui repose sur les promesses rend triviale la gestion des alternatives à une situation de succès. On pourrait faire ceci :

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request);
+    })
+  );
+});
+ +

Si la promesse est rejetée, la fonction catch() retourne à la place la requête réseau par défaut, ce qui signifie que si le réseau est disponible la ressource sera chargée à partir du serveur.

+ +

Plus malin encore, on pourrait non seulement récupérer la ressource à partir du serveur, mais aussi la sauvegarder dans le cache afin que les requêtes ultérieures pour cette ressource puissent être disponibles aussi en mode déconnecté. Cela signifierait que toute image supplémentaire ajoutée à la galerie Star Wars pourrait être récupérée par l'application et mise en cache. Le code suivant illustre ce mécanisme :

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});
+ +

Ici on retourne la requête réseau par défaut au moyen de return fetch(event.request), qui retourne lui-même une promesse. Lorsque cette promesse est résolue, on exécute une fonction qui sollicite le cache en utilisant caches.open('v1'); une promesse est de nouveau retournée. Lorsque cette promesse est résolue, cache.put() est utilisée pour ajouter la ressource au cache. La ressource est récupérée à partir de event.request, et la réponse est alors clonée avec response.clone() et ajoutée au cache. Le clone est placé dans le cache, et la réponse originale est retournée au navigateur et délivrée à la page qui la requiert.

+ +

Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois.  Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois.

+ +

Le dernier problème qui demeure alors est l'échec de la requête au cas où elle n'a aucune correspondance dans le cache et que le réseau n'est pas disponible. Fournir un document de rechange par défaut permet quoiqu'il arrive, à l'utilisateur de récupérer quelque chose :

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});
+ +

Une image de rechange a été choisie parce que les seules mises à jour susceptibles d'échouer sont les nouvelles images, puisque tous les autres éléments dépendent de l'installation comme vu précédemment dans la description de l'écouteur de l'événement install.

+ +

Suggestion d'amélioration d'un modèle de code

+ +

Ce code utilise un chaînage de promesses plus standard et retourne la réponse au document sans avoir à attendre que caches.open() soit résolue :

+ +
this.addEventListener('fetch', function(event) {
+  var response;
+  event.respondWith(caches.match(event.request).catch(function() {
+    return fetch(event.request);
+  }).then(function(r) {
+    response = r;
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, response);
+    });
+    return response.clone();
+  }).catch(function() {
+    return caches.match('/sw-test/gallery/myLittleVader.jpg');
+  }));
+});
+ +

Mettre à jour le service worker

+ +

Si le service worker a été précédemment installé, et qu'une nouvelle version du worker est disponible au chargement ou au rafraîchissement de la page, la nouvelle version est installée en arrière-plan, mais pas encore activée. Elle ne sera activée que lorsqu'il n'y aura plus aucune page chargée qui utilise encore l'ancien service worker. Dès lors qu'il n'y a plus de telles pages encore chargées, le nouveau service worker est activé.

+ +

On souhaite mettre à jour l'écouteur d'événement install dans le nouveau service worker de la façon suivante (à noter le nouveau numéro de version) :

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+             …
+
+              // include other new resources for the new version...
+      ]);
+    });
+  );
+});
+ +

Tandis que la mise à jour se produit, la version précédente est encore en charge de récupérer des ressources. La nouvelle version est installée en arrière-plan. Le nouveau cache se nomme v2, et ainsi ne perturbe en rien le précédent cache nommé v1.

+ +

Lorsque plus aucune page n'utilise la version actuelle, le nouveau worker est activé et prend en charge les requêtes.

+ +

Supprimer les anciens caches

+ +

Il existe un événement activate. Il est généralement utilisé pour faire un travail qui aurait interrompu le fonctionnement d'une version précédente alors qu'elle était encore en cours d'utilisation, comme par exemple se débarrasser des anciens caches. Il est aussi utile pour supprimer des données qui ne sont plus nécessaires afin d'éviter de surcharger l'espace disque — chaque navigateur dispose d'une limite physique quant à la capacité de stockage en cache dont le service worker peut bénéficier. Le navigateur gère au mieux l'espace disque, mais il peut supprimer le stockage du Cache pour une origine. Le navigateur supprimera généralement toutes les données d'une origine ou bien aucune.

+ +

Les promesses passées à waitUntil() bloqueront les autres événements jusqu'à réalisation complète, ainsi on a l'assurance que l'opération de nettoyage aura été menée à terme au moment où surviendra le premier événement fetch du nouveau cache.

+ +
this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+ +

Outils de développement

+ +

Chrome dispose de chrome://inspect/#service-workers, qui montre l'activité du service worker courant et le stockage sur l'appareil, et chrome://serviceworker-internals, qui offre plus de détails et permet de démarrer/arrêter/déboguer le processus du worker. A l'avenir, des modes dégradé/déconnecté seront ajoutés pour simuler des connexions mauvaises ou inexistantes, ce qui sera une bonne chose.

+ +

Firefox a aussi commencé à implanter quelques outils utiles concernant les service workers :

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/serviceworker/index.html b/files/fr/web/api/serviceworker/index.html deleted file mode 100644 index 97c6688183..0000000000 --- a/files/fr/web/api/serviceworker/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: ServiceWorker -slug: Web/API/ServiceWorker -tags: - - API - - Interface - - Reference - - Service Workers - - ServiceWorker - - Workers - - hors-ligne -translation_of: Web/API/ServiceWorker ---- -
{{APIRef("Service Workers API")}}
- -

L'interface ServiceWorker de l'API ServiceWorker met à disposition une référence vers un service worker. Plusieurs  {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un worker, etc.) peuvent être associés au même service worker, chacun à travers un unique objet ServiceWorker.

- -

Un objet ServiceWorker est disponible dans les propriétés  {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée).

- -

L'interface ServiceWorker est distribuée à travers différents évènements de son cycle de vie — install et activate — et d'utilisation, comme fetch. Un objet ServiceWorker a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie.

- -

Propriétés

- -

L'interface ServiceWorker hérite des propriétés de son parent, le {{domxref("Worker")}}.

- -
-
{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}
-
Retourne la scriptURL sérialisée du ServiceWorker, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le  ServiceWorker.
-
{{domxref("ServiceWorker.state")}} {{readonlyinline}}
-
Retourne le status du service worker. Il retourne l'une des valeurs suivantes : installing, installed, activating, activated, or redundant.
-
- -

Gestionnaires d'évènements

- -
-
{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}
-
Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type statechange est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.
-
- -

Méthodes

- -

L'interface du ServiceWorker hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.

- -

Exemples

- -

Ce fragment de code provient d'un exemple d'enregistrement d'évènement pour le service worker (démo en direct). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.

- -
if ('serviceWorker' in navigator) {
-  navigator.serviceWorker
-    .register('service-worker.js', {
-      scope: './'
-    })
-    .then(({ installing, waiting, active }) => {
-      let serviceWorker
-      if (installing) {
-        serviceWorker = installing
-        document.querySelector('#kind').textContent = 'installé'
-      } else if (waiting) {
-        serviceWorker = waiting
-        document.querySelector('#kind').textContent = 'en attente'
-      } else if (active) {
-        serviceWorker = active
-        document.querySelector('#kind').textContent = 'actif'
-      }
-      if (serviceWorker) {
-        // logState(serviceWorker.state);
-        serviceWorker.addEventListener('statechange', (e) => {
-          // logState(e.target.state);
-        })
-      }
-    })
-    .catch((error) => {
-      // L'enregistrement s'est mal déroulé. Le fichier service-worker.js
-      // est peut-être indisponible ou contient une erreur.
-    })
-} else {
-  // Le navigateur ne supporte pas les service workers.
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#service-worker-obj', 'ServiceWorker')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.ServiceWorker")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/serviceworker/index.md b/files/fr/web/api/serviceworker/index.md new file mode 100644 index 0000000000..97c6688183 --- /dev/null +++ b/files/fr/web/api/serviceworker/index.md @@ -0,0 +1,110 @@ +--- +title: ServiceWorker +slug: Web/API/ServiceWorker +tags: + - API + - Interface + - Reference + - Service Workers + - ServiceWorker + - Workers + - hors-ligne +translation_of: Web/API/ServiceWorker +--- +
{{APIRef("Service Workers API")}}
+ +

L'interface ServiceWorker de l'API ServiceWorker met à disposition une référence vers un service worker. Plusieurs  {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un worker, etc.) peuvent être associés au même service worker, chacun à travers un unique objet ServiceWorker.

+ +

Un objet ServiceWorker est disponible dans les propriétés  {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée).

+ +

L'interface ServiceWorker est distribuée à travers différents évènements de son cycle de vie — install et activate — et d'utilisation, comme fetch. Un objet ServiceWorker a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie.

+ +

Propriétés

+ +

L'interface ServiceWorker hérite des propriétés de son parent, le {{domxref("Worker")}}.

+ +
+
{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}
+
Retourne la scriptURL sérialisée du ServiceWorker, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le  ServiceWorker.
+
{{domxref("ServiceWorker.state")}} {{readonlyinline}}
+
Retourne le status du service worker. Il retourne l'une des valeurs suivantes : installing, installed, activating, activated, or redundant.
+
+ +

Gestionnaires d'évènements

+ +
+
{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}
+
Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type statechange est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.
+
+ +

Méthodes

+ +

L'interface du ServiceWorker hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.

+ +

Exemples

+ +

Ce fragment de code provient d'un exemple d'enregistrement d'évènement pour le service worker (démo en direct). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('service-worker.js', {
+      scope: './'
+    })
+    .then(({ installing, waiting, active }) => {
+      let serviceWorker
+      if (installing) {
+        serviceWorker = installing
+        document.querySelector('#kind').textContent = 'installé'
+      } else if (waiting) {
+        serviceWorker = waiting
+        document.querySelector('#kind').textContent = 'en attente'
+      } else if (active) {
+        serviceWorker = active
+        document.querySelector('#kind').textContent = 'actif'
+      }
+      if (serviceWorker) {
+        // logState(serviceWorker.state);
+        serviceWorker.addEventListener('statechange', (e) => {
+          // logState(e.target.state);
+        })
+      }
+    })
+    .catch((error) => {
+      // L'enregistrement s'est mal déroulé. Le fichier service-worker.js
+      // est peut-être indisponible ou contient une erreur.
+    })
+} else {
+  // Le navigateur ne supporte pas les service workers.
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#service-worker-obj', 'ServiceWorker')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ServiceWorker")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/serviceworker/onstatechange/index.html b/files/fr/web/api/serviceworker/onstatechange/index.html deleted file mode 100644 index 71f4cd1e15..0000000000 --- a/files/fr/web/api/serviceworker/onstatechange/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: ServiceWorker.onstatechange -slug: Web/API/ServiceWorker/onstatechange -tags: - - API - - Propriété - - Reference -translation_of: Web/API/ServiceWorker/onstatechange ---- -
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
- -

Une propriété {{domxref("EventListener")}} appelée quand un évenement de type statechange est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.

- -

Syntax

- -
ServiceWorker.onstatechange = function(statechangeevent) { ... }
-ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )
- -

Examples

- -

Ce fragment de code présente un exemple d'enregistrement d'évenements pour le service worker (démo live). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.

- -
var serviceWorker;
-if (registration.installing) {
-  serviceWorker = registration.installing;
-  document.querySelector('#kind').textContent = 'installé';
-} else if (registration.waiting) {
-  serviceWorker = registration.waiting;
-  document.querySelector('#kind').textContent = 'en attente';
-} else if (registration.active) {
-  serviceWorker = registration.active;
-  document.querySelector('#kind').textContent = 'actif';
-}
-
-if (serviceWorker) {
-  logState(serviceWorker.state);
-  serviceWorker.addEventListener('statechange', function(e) {
-  logState(e.target.state);
-  });
-}
- -

Notez que quand l'évenement statechange est déclenché, la référence du service worker peut avoir changée. Par exemple :

- -
navigator.serviceWorker.register(..).then(function(swr) {
-  swr.installing.state == "installé"
-  swr.installing.onstatechange = function() {
-    swr.installing == null;
-    // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement
-    // statechange est mis en queue, pendant que le worker sous jacent est peut être en
-    // état d'attente et sera immédiatement activé si possible.
-  }
-})
- -

Specifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#service-worker-onstatechange-attribute', 'ServiceWorker.onstatechange')}}{{Spec2('Service Workers')}}Définition intiale
- -

Browser compatibility

- -

{{Compat("api.ServiceWorker.onstatechange")}}

diff --git a/files/fr/web/api/serviceworker/onstatechange/index.md b/files/fr/web/api/serviceworker/onstatechange/index.md new file mode 100644 index 0000000000..71f4cd1e15 --- /dev/null +++ b/files/fr/web/api/serviceworker/onstatechange/index.md @@ -0,0 +1,73 @@ +--- +title: ServiceWorker.onstatechange +slug: Web/API/ServiceWorker/onstatechange +tags: + - API + - Propriété + - Reference +translation_of: Web/API/ServiceWorker/onstatechange +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

Une propriété {{domxref("EventListener")}} appelée quand un évenement de type statechange est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.

+ +

Syntax

+ +
ServiceWorker.onstatechange = function(statechangeevent) { ... }
+ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )
+ +

Examples

+ +

Ce fragment de code présente un exemple d'enregistrement d'évenements pour le service worker (démo live). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.

+ +
var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installé';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'en attente';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'actif';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}
+ +

Notez que quand l'évenement statechange est déclenché, la référence du service worker peut avoir changée. Par exemple :

+ +
navigator.serviceWorker.register(..).then(function(swr) {
+  swr.installing.state == "installé"
+  swr.installing.onstatechange = function() {
+    swr.installing == null;
+    // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement
+    // statechange est mis en queue, pendant que le worker sous jacent est peut être en
+    // état d'attente et sera immédiatement activé si possible.
+  }
+})
+ +

Specifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#service-worker-onstatechange-attribute', 'ServiceWorker.onstatechange')}}{{Spec2('Service Workers')}}Définition intiale
+ +

Browser compatibility

+ +

{{Compat("api.ServiceWorker.onstatechange")}}

diff --git a/files/fr/web/api/serviceworkercontainer/getregistration/index.html b/files/fr/web/api/serviceworkercontainer/getregistration/index.html deleted file mode 100644 index d18712f2ff..0000000000 --- a/files/fr/web/api/serviceworkercontainer/getregistration/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: ServiceWorkerContainer.getRegistration() -slug: Web/API/ServiceWorkerContainer/getRegistration -translation_of: Web/API/ServiceWorkerContainer/getRegistration ---- -

{{APIRef("Service Workers API")}}

- -

La méthode getRegistration() de l'interface {{domxref("ServiceWorkerContainer")}} fournis un objet {{domxref("ServiceWorkerRegistration")}} dont la porté inclue l'URL du document. Cette méthode retourne une {{jsxref("Promise")}} qui se résout avec un {{domxref("ServiceWorkerRegistration")}} ou undefined.

- -

Syntaxe

- -
serviceWorkerContainer.getRegistration(scope).then(function(serviceWorkerRegistration) { ... });
- -

Paramètres

- -
-
scope {{optional_inline}}
-
Un identifiant unique pour l'enregistrement du service worker que vous voulez récupérer. L'URL de porté de l'enregistrement . C'est souvent une URL relative.
-
- -

Valeur retournée

- -

Une {{domxref("Promise")}} qui est résolue avec un objet {{domxref("ServiceWorkerRegistration")}} ou undefined.

- -

Exemple

- -
navigator.serviceWorker.getRegistration('/app').then(function(registration) {
-  if(registration){
-    document.querySelector('#status').textContent = 'ServiceWorkerRegistration found.';
-  }
-});
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutsCommentaires
{{SpecName('Service Workers', '#dom-serviceworkercontainer-getregistration', 'ServiceWorkerContainer: getRegistration')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.ServiceWorkerContainer.getRegistration")}}

-
diff --git a/files/fr/web/api/serviceworkercontainer/getregistration/index.md b/files/fr/web/api/serviceworkercontainer/getregistration/index.md new file mode 100644 index 0000000000..d18712f2ff --- /dev/null +++ b/files/fr/web/api/serviceworkercontainer/getregistration/index.md @@ -0,0 +1,57 @@ +--- +title: ServiceWorkerContainer.getRegistration() +slug: Web/API/ServiceWorkerContainer/getRegistration +translation_of: Web/API/ServiceWorkerContainer/getRegistration +--- +

{{APIRef("Service Workers API")}}

+ +

La méthode getRegistration() de l'interface {{domxref("ServiceWorkerContainer")}} fournis un objet {{domxref("ServiceWorkerRegistration")}} dont la porté inclue l'URL du document. Cette méthode retourne une {{jsxref("Promise")}} qui se résout avec un {{domxref("ServiceWorkerRegistration")}} ou undefined.

+ +

Syntaxe

+ +
serviceWorkerContainer.getRegistration(scope).then(function(serviceWorkerRegistration) { ... });
+ +

Paramètres

+ +
+
scope {{optional_inline}}
+
Un identifiant unique pour l'enregistrement du service worker que vous voulez récupérer. L'URL de porté de l'enregistrement . C'est souvent une URL relative.
+
+ +

Valeur retournée

+ +

Une {{domxref("Promise")}} qui est résolue avec un objet {{domxref("ServiceWorkerRegistration")}} ou undefined.

+ +

Exemple

+ +
navigator.serviceWorker.getRegistration('/app').then(function(registration) {
+  if(registration){
+    document.querySelector('#status').textContent = 'ServiceWorkerRegistration found.';
+  }
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutsCommentaires
{{SpecName('Service Workers', '#dom-serviceworkercontainer-getregistration', 'ServiceWorkerContainer: getRegistration')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.ServiceWorkerContainer.getRegistration")}}

+
diff --git a/files/fr/web/api/serviceworkercontainer/index.html b/files/fr/web/api/serviceworkercontainer/index.html deleted file mode 100644 index 9201074b47..0000000000 --- a/files/fr/web/api/serviceworkercontainer/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: ServiceWorkerContainer -slug: Web/API/ServiceWorkerContainer -translation_of: Web/API/ServiceWorkerContainer ---- -

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

- -

L’interface ServiceWorkerContainer de l’API ServiceWorker fournit un objet représentant le service worker comme une unité globale de l’écosystème réseau, incluant des fonctionnalités pour enregistrer, désenregistrer et mettre à jour des services workers, et accéder à l’état des services workers et de leurs enregistrements.

- -

Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} utilisée pour enregistrer les services workers, et la propriété {{domxref("ServiceWorkerContainer.controller")}} utilisée pour déterminer si oui ou non la page courante est activement conrôlée.

- -

Propriétés

- -
-
{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}
-
Retourne un objet {{domxref("ServiceWorker")}} si son état est activated (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne null si la requête est un rechargement forcé (Majuscule + rechargement) ou si il n'y a pas de worker actif.
-
- -
-
{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}
-
Détermine si oui ou non un service worker est prêt à contrôler la page. Cette propriété retourne une {{jsxref("Promise")}} qui ne sera jamais rejetée, et se résoudra en un {{domxref("ServiceWorkerRegistration")}} avec un worker en état {{domxref("ServiceWorkerRegistration.active")}}.
-
- -

Gestionnaires d'événement

- -
-
{{domxref("ServiceWorkerContainer.oncontrollerchange")}}
-
Un gestionnaire d’événement lancé quand un événement {{Event("controllerchange")}} se produit — quand le {{domxref("ServiceWorkerRegistration")}} associé au document ajoute un nouveau worker en état {{domxref("ServiceWorkerRegistration.active")}}.
-
{{domxref("ServiceWorkerContainer.onerror")}}
-
Un gestionnaire d’événement lancé quand un événement {{Event("error")}} se produit dans le service worker associé.
-
{{domxref("ServiceWorkerContainer.onmessage")}}
-
Un gestionnaire d’événement lancé quand un événement {{Event("message")}} se produit — quand des messages entrants sont reçus par l’objet {{domxref("ServiceWorkerContainer")}} (e.g. par un appel à {{domxref("MessagePort.postMessage()")}}.)
-
- -

Méthodes

- -
-
{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} 
-
Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un scriptURL donné.
-
{{domxref("ServiceWorkerContainer.getRegistration()")}}
-
Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni.  Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une Promise. 
-
{{domxref("ServiceWorkerContainer.getRegistrations()")}}
-
Retourne tous les  {{domxref("ServiceWorkerRegistration")}} associés à un ServiceWorkerContainer dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une Promise. 
-
- -

Exemples

- -

Cet extrait de code provient de exemple service worker fallback-response (voir fallback-response live). Le code test si le navigateur supporte les services workers. Alors le code enregistre le service worker et détermine si la page est activement contrôlée par le service worker. Si elle ne l’est pas, il invite l’utilisateur à recharger la page pour permettre au service worker de prendre le contrôle. Ce code indique aussi les échecs d’enregistrement.

- -
if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
-    if (navigator.serviceWorker.controller) {
-      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
-      showRequestButtons();
-    } else {
-      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
-    }
-  }).catch(function(error) {
-    document.querySelector('#status').textContent = error;
-  });
-} else {
-  var aElement = document.createElement('a');
-  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
-  aElement.textContent = 'unavailable';
-  document.querySelector('#status').appendChild(aElement);
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusCommentaires
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité navigateurs

- -

{{Compat("api.ServiceWorkerContainer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/serviceworkercontainer/index.md b/files/fr/web/api/serviceworkercontainer/index.md new file mode 100644 index 0000000000..9201074b47 --- /dev/null +++ b/files/fr/web/api/serviceworkercontainer/index.md @@ -0,0 +1,97 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +translation_of: Web/API/ServiceWorkerContainer +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

L’interface ServiceWorkerContainer de l’API ServiceWorker fournit un objet représentant le service worker comme une unité globale de l’écosystème réseau, incluant des fonctionnalités pour enregistrer, désenregistrer et mettre à jour des services workers, et accéder à l’état des services workers et de leurs enregistrements.

+ +

Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} utilisée pour enregistrer les services workers, et la propriété {{domxref("ServiceWorkerContainer.controller")}} utilisée pour déterminer si oui ou non la page courante est activement conrôlée.

+ +

Propriétés

+ +
+
{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}
+
Retourne un objet {{domxref("ServiceWorker")}} si son état est activated (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne null si la requête est un rechargement forcé (Majuscule + rechargement) ou si il n'y a pas de worker actif.
+
+ +
+
{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}
+
Détermine si oui ou non un service worker est prêt à contrôler la page. Cette propriété retourne une {{jsxref("Promise")}} qui ne sera jamais rejetée, et se résoudra en un {{domxref("ServiceWorkerRegistration")}} avec un worker en état {{domxref("ServiceWorkerRegistration.active")}}.
+
+ +

Gestionnaires d'événement

+ +
+
{{domxref("ServiceWorkerContainer.oncontrollerchange")}}
+
Un gestionnaire d’événement lancé quand un événement {{Event("controllerchange")}} se produit — quand le {{domxref("ServiceWorkerRegistration")}} associé au document ajoute un nouveau worker en état {{domxref("ServiceWorkerRegistration.active")}}.
+
{{domxref("ServiceWorkerContainer.onerror")}}
+
Un gestionnaire d’événement lancé quand un événement {{Event("error")}} se produit dans le service worker associé.
+
{{domxref("ServiceWorkerContainer.onmessage")}}
+
Un gestionnaire d’événement lancé quand un événement {{Event("message")}} se produit — quand des messages entrants sont reçus par l’objet {{domxref("ServiceWorkerContainer")}} (e.g. par un appel à {{domxref("MessagePort.postMessage()")}}.)
+
+ +

Méthodes

+ +
+
{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} 
+
Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un scriptURL donné.
+
{{domxref("ServiceWorkerContainer.getRegistration()")}}
+
Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni.  Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une Promise. 
+
{{domxref("ServiceWorkerContainer.getRegistrations()")}}
+
Retourne tous les  {{domxref("ServiceWorkerRegistration")}} associés à un ServiceWorkerContainer dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une Promise. 
+
+ +

Exemples

+ +

Cet extrait de code provient de exemple service worker fallback-response (voir fallback-response live). Le code test si le navigateur supporte les services workers. Alors le code enregistre le service worker et détermine si la page est activement contrôlée par le service worker. Si elle ne l’est pas, il invite l’utilisateur à recharger la page pour permettre au service worker de prendre le contrôle. Ce code indique aussi les échecs d’enregistrement.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
+    if (navigator.serviceWorker.controller) {
+      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
+      showRequestButtons();
+    } else {
+      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
+    }
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaires
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité navigateurs

+ +

{{Compat("api.ServiceWorkerContainer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/serviceworkercontainer/register/index.html b/files/fr/web/api/serviceworkercontainer/register/index.html deleted file mode 100644 index ebb85bd058..0000000000 --- a/files/fr/web/api/serviceworkercontainer/register/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: ServiceWorkerContainer.register() -slug: Web/API/ServiceWorkerContainer/register -tags: - - API - - Méthode - - Reference - - Service Workers - - Service worker API - - ServiceWorker - - ServicerWorkerContainer - - register -translation_of: Web/API/ServiceWorkerContainer/register ---- -
{{APIRef("Service Workers API")}}
- -

La méthode register() de l'interface {{domxref("ServiceWorkerContainer")}} crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour la scriptURL donnée.

- -

En cas de succès, un ServiceWorkerRegistration attache la scriptURL fournie à une portée, qui sera utilisé ensuite pour la correspondance de navigation. Vous pouvez appeler cette méthode en toutes circonstances depuis la page contrôlée. C'est-à-dire, vous n'avez pas besoin de vérifier si un enregistrement existe déjà.

- -

Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un ServiceWorker ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.

- -

Syntaxe

- -
serviceWorkerContainer.register(scriptURL, options)
-  .then(function(serviceWorkerRegistration) { ... })
- -

Paramètres

- -
-
scriptURL
-
L' URL du script contenant le ServiceWorker. Le fichier qui a enregistré le ServiceWorker doit avoir un JavaScript MIME type valide.
-
options {{optional_inline}}
-
Un objet contenant les options d'enregistrement. Les options sont: -
    -
  • scope: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un ServiceWorker; c'est-à-dire quelle plage d'URL un ServiceWorker peut contrôler. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'enregistrement d'un ServiceWorker est limité au répertoire qui contient le script du ServiceWorker. Consultez la section Exemples pour plus d'informations sur son fonctionnement.
    • -
  • {{non-standard_inline}} type: Un {{domxref("WorkerType")}}, il prend les valeurs "classic" ou "module". Par défaut, la valeur est fixé à "classic".
    • -
  • {{non-standard_inline}} updateViaCache: Un {{domxref("ServiceWorkerUpdateViaCache")}}, il prend les valeurs "imports" ou "all" ou "none". Par défaut, la valeur est fixé à "imports".
    • -
-
-
- -

Valeur de retour

- -

Une {{jsxref("Promise")}} qui se résout avec un objet {{domxref("ServiceWorkerRegistration")}}.

- -

Exemples

- -

Les exemples décrits ici doivent être pris ensemble pour obtenir une meilleure compréhension de comment la portée des ServiceWorker s'applique à une page.

- -

L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). Le code du ServiceWorker dans ce cas, s'il est inclus dans example.com/index.html, contrôlera example.com/index.html, ainsi que les pages en dessous, comme example.com/product/description.html.

- -
if ('serviceWorker' in navigator) {
-  // Register a service worker hosted at the root of the
-  // site using the default scope.
-  navigator.serviceWorker.register('/sw.js').then(
-    (registration) => {
-      console.log('Service worker registration succeeded:', registration)
-    },
-    /*catch*/ (error) => {
-      console.log('Service worker registration failed:', error)
-    }
-  )
-} else {
-  console.log('Service workers are not supported.')
-}
- -

Le code suivant, s'il est inclus dans example.com/index.html, à la racine d'un site, s'appliquerait exactement aux mêmes pages que l'exemple ci-dessus. N'oubliez pas que la portée, lorsqu'elle est incluse, utilise l'emplacement de la page comme base.

- -

Sinon, si ce code était inclus dans une page à example.com/product/description.html, avec le fichier Javascript résidant à example.com/product/sw.js, alors le service worker ne s'appliquerait qu'aux ressources sous example.com /product.

- -
if ('serviceWorker' in navigator) {
-  // declaring scope manually
-  navigator.serviceWorker.register('/sw.js', { scope: './' }).then(
-    (registration) => {
-      console.log('Service worker registration succeeded:', registration)
-    },
-    /*catch*/ (error) => {
-      console.log('Service worker registration failed:', error)
-    }
-  )
-} else {
-  console.log('Service workers are not supported.')
-}
-
- -

Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un ServiceWorker ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.

- -

Le code suivant, s'il est inclus dans example.com/index.html, à la racine d'un site, ne s'appliquerait qu'aux ressources sous example.com/product.

- -
if ('serviceWorker' in navigator) {
-  // declaring scope manually
-  navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then(
-    (registration) => {
-      console.log('Service worker registration succeeded:', registration)
-    },
-    /*catch*/ (error) => {
-      console.log('Service worker registration failed:', error)
-    }
-  )
-} else {
-  console.log('Service workers are not supported.')
-}
- -

Toutefois, les serveurs peuvent supprimer cette restriction en définissant un en-tête Service-Worker-Allowed sur le script du ServiceWorker, et alors vous pouvez spécifier une portée maximale pour ce ServiceWorker au-dessus de l'emplacement du ServiceWorker.

- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Service Workers', '#dom-serviceworkercontainer-register', 'ServiceWorkerContainer: register')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.ServiceWorkerContainer.register")}}

- -

Voir également

- - diff --git a/files/fr/web/api/serviceworkercontainer/register/index.md b/files/fr/web/api/serviceworkercontainer/register/index.md new file mode 100644 index 0000000000..ebb85bd058 --- /dev/null +++ b/files/fr/web/api/serviceworkercontainer/register/index.md @@ -0,0 +1,135 @@ +--- +title: ServiceWorkerContainer.register() +slug: Web/API/ServiceWorkerContainer/register +tags: + - API + - Méthode + - Reference + - Service Workers + - Service worker API + - ServiceWorker + - ServicerWorkerContainer + - register +translation_of: Web/API/ServiceWorkerContainer/register +--- +
{{APIRef("Service Workers API")}}
+ +

La méthode register() de l'interface {{domxref("ServiceWorkerContainer")}} crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour la scriptURL donnée.

+ +

En cas de succès, un ServiceWorkerRegistration attache la scriptURL fournie à une portée, qui sera utilisé ensuite pour la correspondance de navigation. Vous pouvez appeler cette méthode en toutes circonstances depuis la page contrôlée. C'est-à-dire, vous n'avez pas besoin de vérifier si un enregistrement existe déjà.

+ +

Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un ServiceWorker ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.

+ +

Syntaxe

+ +
serviceWorkerContainer.register(scriptURL, options)
+  .then(function(serviceWorkerRegistration) { ... })
+ +

Paramètres

+ +
+
scriptURL
+
L' URL du script contenant le ServiceWorker. Le fichier qui a enregistré le ServiceWorker doit avoir un JavaScript MIME type valide.
+
options {{optional_inline}}
+
Un objet contenant les options d'enregistrement. Les options sont: +
    +
  • scope: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un ServiceWorker; c'est-à-dire quelle plage d'URL un ServiceWorker peut contrôler. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'enregistrement d'un ServiceWorker est limité au répertoire qui contient le script du ServiceWorker. Consultez la section Exemples pour plus d'informations sur son fonctionnement.
    • +
  • {{non-standard_inline}} type: Un {{domxref("WorkerType")}}, il prend les valeurs "classic" ou "module". Par défaut, la valeur est fixé à "classic".
    • +
  • {{non-standard_inline}} updateViaCache: Un {{domxref("ServiceWorkerUpdateViaCache")}}, il prend les valeurs "imports" ou "all" ou "none". Par défaut, la valeur est fixé à "imports".
    • +
+
+
+ +

Valeur de retour

+ +

Une {{jsxref("Promise")}} qui se résout avec un objet {{domxref("ServiceWorkerRegistration")}}.

+ +

Exemples

+ +

Les exemples décrits ici doivent être pris ensemble pour obtenir une meilleure compréhension de comment la portée des ServiceWorker s'applique à une page.

+ +

L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). Le code du ServiceWorker dans ce cas, s'il est inclus dans example.com/index.html, contrôlera example.com/index.html, ainsi que les pages en dessous, comme example.com/product/description.html.

+ +
if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(
+    (registration) => {
+      console.log('Service worker registration succeeded:', registration)
+    },
+    /*catch*/ (error) => {
+      console.log('Service worker registration failed:', error)
+    }
+  )
+} else {
+  console.log('Service workers are not supported.')
+}
+ +

Le code suivant, s'il est inclus dans example.com/index.html, à la racine d'un site, s'appliquerait exactement aux mêmes pages que l'exemple ci-dessus. N'oubliez pas que la portée, lorsqu'elle est incluse, utilise l'emplacement de la page comme base.

+ +

Sinon, si ce code était inclus dans une page à example.com/product/description.html, avec le fichier Javascript résidant à example.com/product/sw.js, alors le service worker ne s'appliquerait qu'aux ressources sous example.com /product.

+ +
if ('serviceWorker' in navigator) {
+  // declaring scope manually
+  navigator.serviceWorker.register('/sw.js', { scope: './' }).then(
+    (registration) => {
+      console.log('Service worker registration succeeded:', registration)
+    },
+    /*catch*/ (error) => {
+      console.log('Service worker registration failed:', error)
+    }
+  )
+} else {
+  console.log('Service workers are not supported.')
+}
+
+ +

Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un ServiceWorker ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.

+ +

Le code suivant, s'il est inclus dans example.com/index.html, à la racine d'un site, ne s'appliquerait qu'aux ressources sous example.com/product.

+ +
if ('serviceWorker' in navigator) {
+  // declaring scope manually
+  navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then(
+    (registration) => {
+      console.log('Service worker registration succeeded:', registration)
+    },
+    /*catch*/ (error) => {
+      console.log('Service worker registration failed:', error)
+    }
+  )
+} else {
+  console.log('Service workers are not supported.')
+}
+ +

Toutefois, les serveurs peuvent supprimer cette restriction en définissant un en-tête Service-Worker-Allowed sur le script du ServiceWorker, et alors vous pouvez spécifier une portée maximale pour ce ServiceWorker au-dessus de l'emplacement du ServiceWorker.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#dom-serviceworkercontainer-register', 'ServiceWorkerContainer: register')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ServiceWorkerContainer.register")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/serviceworkerglobalscope/index.html b/files/fr/web/api/serviceworkerglobalscope/index.html deleted file mode 100644 index 49afb28427..0000000000 --- a/files/fr/web/api/serviceworkerglobalscope/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: ServiceWorkerGlobalScope -slug: Web/API/ServiceWorkerGlobalScope -tags: - - API - - Interface - - NeedsTranslation - - Offline - - Reference - - Service Workers - - ServiceWorkerGlobalScope - - TopicStub -translation_of: Web/API/ServiceWorkerGlobalScope ---- -
{{APIRef("Service Workers API")}}
- -

The ServiceWorkerGlobalScope interface of the Service Worker API represents the global execution context of a service worker.

- -

Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.

- -

Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}.

- -

Additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the {{domxref("GlobalFetch.fetch", "fetch()")}} method, can be used.

- -

This interface inherits from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

- -

{{InheritanceDiagram(700, 85, 20)}}

- -

Properties

- -
-
{{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}
-
Contains the {{domxref("CacheStorage")}} object associated with the service worker.
-
{{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}
-
Contains the {{domxref("Clients")}} object associated with the service worker.
-
{{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}
-
Contains the {{domxref("ServiceWorkerRegistration")}} object that represents the service worker's registration.
-
- -

Events

- -
-
{{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}}
-
Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.
- Also available via the {{domxref("ServiceWorkerGlobalScope.onactivate")}} property.
-
{{domxref("ServiceWorkerGlobalScope/contentdelete_event", "contentdelete")}}
-
Occurs when an item is removed from the {{domxref("ContentIndex", "Content Index")}}.
- Also available via the {{domxref("ServiceWorkerGlobalScope.oncontentdelete")}} property.
-
fetch
-
Occurs when a {{domxref("GlobalFetch.fetch", "fetch()")}} is called.
- Also available via the {{domxref("ServiceWorkerGlobalScope.onfetch")}} property.
-
{{domxref("ServiceWorkerGlobalScope/install_event", "install")}}
-
Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.installing")}} worker.
- Also available via the {{domxref("ServiceWorkerGlobalScope.oninstall")}} property.
-
{{domxref("ServiceWorkerGlobalScope/message_event", "message")}}
-
Occurs when incoming messages are received. Controlled pages can use the {{domxref("MessagePort.postMessage()")}} method to send messages to service workers. The service worker can optionally send a response back via the {{domxref("MessagePort")}} exposed in event.data.port, corresponding to the controlled page.
- Also available via the {{domxref("ServiceWorkerGlobalScope.onmessage")}} property.
-
{{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}}
-
Occurs when a user clicks on a displayed notification.
- Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} property.
-
notificationclose
-
Occurs — when a user closes a displayed notification.
- Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} property.
-
{{domxref("ServiceWorkerGlobalScope/push_event", "push")}}
-
Occurs when a server push notification is received.
- Also available via the {{domxref("ServiceWorkerGlobalScope.onpush")}} property.
-
{{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}}
-
Occurs when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time).
- Also available via the {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} property.
-
sync
-
Triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available.
- Also available via the {{domxref("ServiceWorkerGlobalScope.onsync")}} property.
-
- -

Methods

- -
-
{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}
-
Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.
-
- -

ServiceWorkerGlobalScope implements {{domxref("WorkerGlobalScope")}} — which implements {{domxref("WindowOrWorkerGlobalScope")}}. Therefore it also has the following property available to it:

- -
-
{{domxref("GlobalFetch.fetch()")}}
-
Starts the process of fetching a resource. This returns a promise that resolves to the {{domxref("Response")}} object representing the response to your request. This algorithm is the entry point for the fetch handling handed to the service worker context.
-
- -

Examples

- -

This code snippet is from the service worker prefetch sample (see prefetch example live.) The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler listens for the fetch event. When fired, the code returns a promise that resolves to the first matching request in the {{domxref("Cache")}} object. If no match is found, the code fetches a response from the network.

- -

The code also handles exceptions thrown from the {{domxref("GlobalFetch.fetch", "fetch()")}} operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.

- -
self.addEventListener('fetch', function(event) {
-  console.log('Handling fetch event for', event.request.url);
-
-  event.respondWith(
-    caches.match(event.request).then(function(response) {
-      if (response) {
-        console.log('Found response in cache:', response);
-
-        return response;
-      }
-      console.log('No response found in cache. About to fetch from network...');
-
-      return fetch(event.request).then(function(response) {
-        console.log('Response from network is:', response);
-
-        return response;
-      }, function(error) {
-        console.error('Fetching failed:', error);
-
-        throw error;
-      });
-    })
-  );
-});
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Service Workers', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}}{{Spec2('Service Workers')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("api.ServiceWorkerGlobalScope")}}

- -

See also

- - diff --git a/files/fr/web/api/serviceworkerglobalscope/index.md b/files/fr/web/api/serviceworkerglobalscope/index.md new file mode 100644 index 0000000000..49afb28427 --- /dev/null +++ b/files/fr/web/api/serviceworkerglobalscope/index.md @@ -0,0 +1,152 @@ +--- +title: ServiceWorkerGlobalScope +slug: Web/API/ServiceWorkerGlobalScope +tags: + - API + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorkerGlobalScope + - TopicStub +translation_of: Web/API/ServiceWorkerGlobalScope +--- +
{{APIRef("Service Workers API")}}
+ +

The ServiceWorkerGlobalScope interface of the Service Worker API represents the global execution context of a service worker.

+ +

Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.

+ +

Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}.

+ +

Additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the {{domxref("GlobalFetch.fetch", "fetch()")}} method, can be used.

+ +

This interface inherits from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +

{{InheritanceDiagram(700, 85, 20)}}

+ +

Properties

+ +
+
{{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}
+
Contains the {{domxref("CacheStorage")}} object associated with the service worker.
+
{{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}
+
Contains the {{domxref("Clients")}} object associated with the service worker.
+
{{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}
+
Contains the {{domxref("ServiceWorkerRegistration")}} object that represents the service worker's registration.
+
+ +

Events

+ +
+
{{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}}
+
Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onactivate")}} property.
+
{{domxref("ServiceWorkerGlobalScope/contentdelete_event", "contentdelete")}}
+
Occurs when an item is removed from the {{domxref("ContentIndex", "Content Index")}}.
+ Also available via the {{domxref("ServiceWorkerGlobalScope.oncontentdelete")}} property.
+
fetch
+
Occurs when a {{domxref("GlobalFetch.fetch", "fetch()")}} is called.
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onfetch")}} property.
+
{{domxref("ServiceWorkerGlobalScope/install_event", "install")}}
+
Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.installing")}} worker.
+ Also available via the {{domxref("ServiceWorkerGlobalScope.oninstall")}} property.
+
{{domxref("ServiceWorkerGlobalScope/message_event", "message")}}
+
Occurs when incoming messages are received. Controlled pages can use the {{domxref("MessagePort.postMessage()")}} method to send messages to service workers. The service worker can optionally send a response back via the {{domxref("MessagePort")}} exposed in event.data.port, corresponding to the controlled page.
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onmessage")}} property.
+
{{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}}
+
Occurs when a user clicks on a displayed notification.
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} property.
+
notificationclose
+
Occurs — when a user closes a displayed notification.
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} property.
+
{{domxref("ServiceWorkerGlobalScope/push_event", "push")}}
+
Occurs when a server push notification is received.
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onpush")}} property.
+
{{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}}
+
Occurs when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time).
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} property.
+
sync
+
Triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available.
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onsync")}} property.
+
+ +

Methods

+ +
+
{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}
+
Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.
+
+ +

ServiceWorkerGlobalScope implements {{domxref("WorkerGlobalScope")}} — which implements {{domxref("WindowOrWorkerGlobalScope")}}. Therefore it also has the following property available to it:

+ +
+
{{domxref("GlobalFetch.fetch()")}}
+
Starts the process of fetching a resource. This returns a promise that resolves to the {{domxref("Response")}} object representing the response to your request. This algorithm is the entry point for the fetch handling handed to the service worker context.
+
+ +

Examples

+ +

This code snippet is from the service worker prefetch sample (see prefetch example live.) The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler listens for the fetch event. When fired, the code returns a promise that resolves to the first matching request in the {{domxref("Cache")}} object. If no match is found, the code fetches a response from the network.

+ +

The code also handles exceptions thrown from the {{domxref("GlobalFetch.fetch", "fetch()")}} operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.

+ +
self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        console.log('Found response in cache:', response);
+
+        return response;
+      }
+      console.log('No response found in cache. About to fetch from network...');
+
+      return fetch(event.request).then(function(response) {
+        console.log('Response from network is:', response);
+
+        return response;
+      }, function(error) {
+        console.error('Fetching failed:', error);
+
+        throw error;
+      });
+    })
+  );
+});
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}}{{Spec2('Service Workers')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.ServiceWorkerGlobalScope")}}

+ +

See also

+ + diff --git a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html deleted file mode 100644 index a3dedb93af..0000000000 --- a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: ServiceWorkerGlobalScope.onnotificationclick -slug: Web/API/ServiceWorkerGlobalScope/onnotificationclick -tags: - - API - - Experimental - - Interface - - Propriété - - Reference - - ServiceWorkerGlobalScope - - onnotificationclick -translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclick ---- -

{{APIRef("Service Workers API")}}

- -

La propriété ServiceWorkerGlobalScope.onnotificationclick est un gestionnaire d'événements appelé chaque fois que l'événement {{Event("notificationclick")}} est envoyé sur l'objet {{domxref ("ServiceWorkerGlobalScope")}}, c'est-à-dire lorsqu'un utilisateur clique sur une notification affichée générée par {{domxref("ServiceWorkerRegistration.showNotification()")}}.

- -

Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet Notification lui-même.

- -
-

Note : Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur.

-
- -

Syntaxe

- -
ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... }
-ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) => { ... }
-
- -

Exemple

- -
self.onnotificationclick = (event) => {
-  console.log('On notification click: ', event.notification.tag)
-  event.notification.close()
-
-  // This looks to see if the current is already open and
-  // focuses if it is
-  event.waitUntil(
-    clients
-      .matchAll({
-        type: 'window'
-      })
-      .then((clientList) => {
-        for (let i = 0; i < clientList.length; i++) {
-          const client = clientList[i]
-          if (client.url == '/' && 'focus' in client) return client.focus()
-        }
-        if (clients.openWindow) return clients.openWindow('/')
-      })
-  )
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}{{Spec2('Web Notifications')}}Définition initiale. Cette propriété est spécifiée dans {{domxref ('Notifications_API')}} même si elle fait partie de {{domxref ('ServiceWorkerGlobalScope')}}.
- -

Compatibilité des navigateurs

- -

{{Compat("api.ServiceWorkerGlobalScope.onnotificationclick")}}

diff --git a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md new file mode 100644 index 0000000000..a3dedb93af --- /dev/null +++ b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md @@ -0,0 +1,73 @@ +--- +title: ServiceWorkerGlobalScope.onnotificationclick +slug: Web/API/ServiceWorkerGlobalScope/onnotificationclick +tags: + - API + - Experimental + - Interface + - Propriété + - Reference + - ServiceWorkerGlobalScope + - onnotificationclick +translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclick +--- +

{{APIRef("Service Workers API")}}

+ +

La propriété ServiceWorkerGlobalScope.onnotificationclick est un gestionnaire d'événements appelé chaque fois que l'événement {{Event("notificationclick")}} est envoyé sur l'objet {{domxref ("ServiceWorkerGlobalScope")}}, c'est-à-dire lorsqu'un utilisateur clique sur une notification affichée générée par {{domxref("ServiceWorkerRegistration.showNotification()")}}.

+ +

Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet Notification lui-même.

+ +
+

Note : Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur.

+
+ +

Syntaxe

+ +
ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... }
+ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) => { ... }
+
+ +

Exemple

+ +
self.onnotificationclick = (event) => {
+  console.log('On notification click: ', event.notification.tag)
+  event.notification.close()
+
+  // This looks to see if the current is already open and
+  // focuses if it is
+  event.waitUntil(
+    clients
+      .matchAll({
+        type: 'window'
+      })
+      .then((clientList) => {
+        for (let i = 0; i < clientList.length; i++) {
+          const client = clientList[i]
+          if (client.url == '/' && 'focus' in client) return client.focus()
+        }
+        if (clients.openWindow) return clients.openWindow('/')
+      })
+  )
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}{{Spec2('Web Notifications')}}Définition initiale. Cette propriété est spécifiée dans {{domxref ('Notifications_API')}} même si elle fait partie de {{domxref ('ServiceWorkerGlobalScope')}}.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ServiceWorkerGlobalScope.onnotificationclick")}}

diff --git a/files/fr/web/api/serviceworkerregistration/active/index.html b/files/fr/web/api/serviceworkerregistration/active/index.html deleted file mode 100644 index 257fc3eb90..0000000000 --- a/files/fr/web/api/serviceworkerregistration/active/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: ServiceWorkerRegistration.active -slug: Web/API/ServiceWorkerRegistration/active -translation_of: Web/API/ServiceWorkerRegistration/active ---- -
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
- -

La propriété active de l’interface {{domxref("ServiceWorkerRegistration")}} retourne un service worker dont le {{domxref("ServiceWorker.state")}} est activating ou activated. Cette propriété est initialement définie à null.

- -

Un worker actif contrôle un {{domxref("ServiceWorkerClient")}} si l’URL du client appartient au domaine de l’inscription (l’option scope définie lorsque {{domxref("ServiceWorkerContainer.register")}} est initialement appelé.)

- -
-

Note : Cette fonctionnalité est disponible dans les Web Workers.

-
- -

Syntaxe

- -
sw = ServiceWorker.active
-
- -

Valeur

- -

Un objet {{domxref("ServiceWorker")}}, si le worker est actuellement dans un état activating ou activated.

- -

Spécifications

- -
 
- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}}{{Spec2('Service Workers')}}Définition initiale.
-  
- -

Compatibilité des navigateurs

- -

{{Compat("api.ServiceWorkerRegistration.active")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/serviceworkerregistration/active/index.md b/files/fr/web/api/serviceworkerregistration/active/index.md new file mode 100644 index 0000000000..257fc3eb90 --- /dev/null +++ b/files/fr/web/api/serviceworkerregistration/active/index.md @@ -0,0 +1,57 @@ +--- +title: ServiceWorkerRegistration.active +slug: Web/API/ServiceWorkerRegistration/active +translation_of: Web/API/ServiceWorkerRegistration/active +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

La propriété active de l’interface {{domxref("ServiceWorkerRegistration")}} retourne un service worker dont le {{domxref("ServiceWorker.state")}} est activating ou activated. Cette propriété est initialement définie à null.

+ +

Un worker actif contrôle un {{domxref("ServiceWorkerClient")}} si l’URL du client appartient au domaine de l’inscription (l’option scope définie lorsque {{domxref("ServiceWorkerContainer.register")}} est initialement appelé.)

+ +
+

Note : Cette fonctionnalité est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +
sw = ServiceWorker.active
+
+ +

Valeur

+ +

Un objet {{domxref("ServiceWorker")}}, si le worker est actuellement dans un état activating ou activated.

+ +

Spécifications

+ +
 
+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}}{{Spec2('Service Workers')}}Définition initiale.
+  
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ServiceWorkerRegistration.active")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.html b/files/fr/web/api/serviceworkerregistration/getnotifications/index.html deleted file mode 100644 index 23379e7520..0000000000 --- a/files/fr/web/api/serviceworkerregistration/getnotifications/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: ServiceWorkerRegistration.getNotifications() -slug: Web/API/ServiceWorkerRegistration/getNotifications -tags: - - API - - API Service worker - - Expérimentale - - Méthode - - Notifications - - Reference - - Service Workers - - ServiceWorkerRegistration - - getNotifications -translation_of: Web/API/ServiceWorkerRegistration/getNotifications ---- -
{{APIRef("Service Workers API")}}
- -

La méthode getNotifications() de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie une liste des notifications dans l'ordre dans lequel elles ont été créées à partir de l'origine actuelle via l'enregistrement actuel du service worker. Les origines peuvent avoir de nombreuses inscriptions de service worker actives mais de portée différente. Les notifications créées par un service worker sur la même origine ne seront pas disponibles pour les autres services workers actifs sur la même origine.

- -

Syntaxe

- -
s​erviceWorkerRegistration.getNotifications(options)
-.then(function(notificationsList) { ... })
- -

Paramétres

- -
-
options {{optional_inline}}
-
Un objet contenant des options pour filtrer les notifications renvoyées. Les options disponibles sont: -
    -
  • tag: Un {{domxref ("DOMString")}} représentant un tag de notification. Si spécifié, seules les notifications contenant cette balise seront renvoyées.
    • -
-
-
- -

Valeur de retour

- -

Une {{jsxref ("Promise", "Promesse")}} qui se résout en une liste d'objets {{domxref ("Notification")}}.

- -

Exemple

- -
navigator.serviceWorker.register('sw.js')
-
-const options = { tag: 'user_alerts' }
-
-navigator.serviceWorker.ready.then((registration) => {
-  registration.getNotifications(options).then((notifications) => {
-    // do something with your notifications
-  })
-})
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications', '#dom-serviceworkerregistration-getnotifications', 'ServiceWorkerRegistration.getNotifications()')}}{{Spec2('Web Notifications')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.ServiceWorkerRegistration.getNotifications")}}

diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md new file mode 100644 index 0000000000..23379e7520 --- /dev/null +++ b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md @@ -0,0 +1,72 @@ +--- +title: ServiceWorkerRegistration.getNotifications() +slug: Web/API/ServiceWorkerRegistration/getNotifications +tags: + - API + - API Service worker + - Expérimentale + - Méthode + - Notifications + - Reference + - Service Workers + - ServiceWorkerRegistration + - getNotifications +translation_of: Web/API/ServiceWorkerRegistration/getNotifications +--- +
{{APIRef("Service Workers API")}}
+ +

La méthode getNotifications() de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie une liste des notifications dans l'ordre dans lequel elles ont été créées à partir de l'origine actuelle via l'enregistrement actuel du service worker. Les origines peuvent avoir de nombreuses inscriptions de service worker actives mais de portée différente. Les notifications créées par un service worker sur la même origine ne seront pas disponibles pour les autres services workers actifs sur la même origine.

+ +

Syntaxe

+ +
s​erviceWorkerRegistration.getNotifications(options)
+.then(function(notificationsList) { ... })
+ +

Paramétres

+ +
+
options {{optional_inline}}
+
Un objet contenant des options pour filtrer les notifications renvoyées. Les options disponibles sont: +
    +
  • tag: Un {{domxref ("DOMString")}} représentant un tag de notification. Si spécifié, seules les notifications contenant cette balise seront renvoyées.
    • +
+
+
+ +

Valeur de retour

+ +

Une {{jsxref ("Promise", "Promesse")}} qui se résout en une liste d'objets {{domxref ("Notification")}}.

+ +

Exemple

+ +
navigator.serviceWorker.register('sw.js')
+
+const options = { tag: 'user_alerts' }
+
+navigator.serviceWorker.ready.then((registration) => {
+  registration.getNotifications(options).then((notifications) => {
+    // do something with your notifications
+  })
+})
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications', '#dom-serviceworkerregistration-getnotifications', 'ServiceWorkerRegistration.getNotifications()')}}{{Spec2('Web Notifications')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ServiceWorkerRegistration.getNotifications")}}

diff --git a/files/fr/web/api/serviceworkerregistration/index.html b/files/fr/web/api/serviceworkerregistration/index.html deleted file mode 100644 index 7412dfa554..0000000000 --- a/files/fr/web/api/serviceworkerregistration/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: ServiceWorkerRegistration -slug: Web/API/ServiceWorkerRegistration -tags: - - API - - Interface - - NeedsTranslation - - Offline - - Reference - - Service Workers - - Service worker API - - ServiceWorkerRegistration - - TopicStub - - Workers -translation_of: Web/API/ServiceWorkerRegistration ---- -
-
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
-
- -

The ServiceWorkerRegistration interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin.

- -

The lifetime of a service worker registration is beyond that of the ServiceWorkerRegistration objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active ServiceWorkerRegistration objects.

- -
-

Note : This feature is available in Web Workers.

-
- -

Properties

- -

Also implements properties from its parent interface, {{domxref("EventTarget")}}.

- -
-
{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}
-
Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.
-
{{domxref("ServiceWorkerRegistration.installing")}}{{readonlyinline}}
-
Returns a service worker whose state is installing. This is initially set to null.
-
{{domxref("ServiceWorkerRegistration.waiting")}}{{readonlyinline}}
-
Returns a service worker whose state is waiting. This is initially set to null.
-
{{domxref("ServiceWorkerRegistration.active")}}{{readonlyinline}}
-
Returns a service worker whose state is either activating or activated. This is initially set to null. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the scope option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)
-
{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}
-
Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.
-
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
-
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.
-
{{domxref("ServiceWorkerRegistration.sync")}} {{non-standard_inline}} {{readonlyinline}} 
-
Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.
-
- -

Unimplemented properties

- -
-
{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}
-
Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere.
-
- -

Event handlers

- -
-
{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}
-
An EventListener property called whenever an event of type updatefound is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.
-
- -

Methods

- -

Also implements methods from its parent interface, {{domxref("EventTarget")}}.

- -
-
{{domxref("ServiceWorkerRegistration.getNotifications()")}}
-
Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.
-
{{domxref("ServiceWorkerRegistration.showNotification()")}}
-
Displays the notification with the requested title.
-
{{domxref("ServiceWorkerRegistration.update()")}}
-
Checks the server for an updated version of the service worker without consulting caches.
-
{{domxref("ServiceWorkerRegistration.unregister()")}}
-
Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.
-
- -

Examples

- -

In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and updatefound event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the updatefound event will not be fired.

- -
if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('/sw.js')
-  .then(function(registration) {
-    registration.addEventListener('updatefound', function() {
-      // If updatefound is fired, it means that there's
-      // a new service worker being installed.
-      var installingWorker = registration.installing;
-      console.log('A new service worker is being installed:',
-        installingWorker);
-
-      // You can listen for changes to the installing service worker's
-      // state via installingWorker.onstatechange
-    });
-  })
-  .catch(function(error) {
-    console.log('Service worker registration failed:', error);
-  });
-} else {
-  console.log('Service workers are not supported.');
-}
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}{{Spec2('Service Workers')}}Initial definition.
{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}{{Spec2('Push API')}}Adds the {{domxref("PushManager","pushManager")}} property.
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.
{{SpecName('Background Sync')}}{{Spec2('Background Sync')}}Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.
- -

Browser compatibility

- - - -

{{Compat("api.ServiceWorkerRegistration")}}

- -

See also

- - diff --git a/files/fr/web/api/serviceworkerregistration/index.md b/files/fr/web/api/serviceworkerregistration/index.md new file mode 100644 index 0000000000..7412dfa554 --- /dev/null +++ b/files/fr/web/api/serviceworkerregistration/index.md @@ -0,0 +1,150 @@ +--- +title: ServiceWorkerRegistration +slug: Web/API/ServiceWorkerRegistration +tags: + - API + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Service worker API + - ServiceWorkerRegistration + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerRegistration +--- +
+
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+
+ +

The ServiceWorkerRegistration interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin.

+ +

The lifetime of a service worker registration is beyond that of the ServiceWorkerRegistration objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active ServiceWorkerRegistration objects.

+ +
+

Note : This feature is available in Web Workers.

+
+ +

Properties

+ +

Also implements properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}
+
Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.
+
{{domxref("ServiceWorkerRegistration.installing")}}{{readonlyinline}}
+
Returns a service worker whose state is installing. This is initially set to null.
+
{{domxref("ServiceWorkerRegistration.waiting")}}{{readonlyinline}}
+
Returns a service worker whose state is waiting. This is initially set to null.
+
{{domxref("ServiceWorkerRegistration.active")}}{{readonlyinline}}
+
Returns a service worker whose state is either activating or activated. This is initially set to null. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the scope option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)
+
{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}
+
Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.
+
{{domxref("ServiceWorkerRegistration.sync")}} {{non-standard_inline}} {{readonlyinline}} 
+
Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.
+
+ +

Unimplemented properties

+ +
+
{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}
+
An EventListener property called whenever an event of type updatefound is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.
+
+ +

Methods

+ +

Also implements methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("ServiceWorkerRegistration.getNotifications()")}}
+
Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.
+
{{domxref("ServiceWorkerRegistration.showNotification()")}}
+
Displays the notification with the requested title.
+
{{domxref("ServiceWorkerRegistration.update()")}}
+
Checks the server for an updated version of the service worker without consulting caches.
+
{{domxref("ServiceWorkerRegistration.unregister()")}}
+
Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.
+
+ +

Examples

+ +

In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and updatefound event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the updatefound event will not be fired.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+  .then(function(registration) {
+    registration.addEventListener('updatefound', function() {
+      // If updatefound is fired, it means that there's
+      // a new service worker being installed.
+      var installingWorker = registration.installing;
+      console.log('A new service worker is being installed:',
+        installingWorker);
+
+      // You can listen for changes to the installing service worker's
+      // state via installingWorker.onstatechange
+    });
+  })
+  .catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}{{Spec2('Service Workers')}}Initial definition.
{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}{{Spec2('Push API')}}Adds the {{domxref("PushManager","pushManager")}} property.
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.
{{SpecName('Background Sync')}}{{Spec2('Background Sync')}}Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.
+ +

Browser compatibility

+ + + +

{{Compat("api.ServiceWorkerRegistration")}}

+ +

See also

+ + diff --git a/files/fr/web/api/serviceworkerregistration/scope/index.html b/files/fr/web/api/serviceworkerregistration/scope/index.html deleted file mode 100644 index 19ef530db5..0000000000 --- a/files/fr/web/api/serviceworkerregistration/scope/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: ServiceWorkerRegistration.scope -slug: Web/API/ServiceWorkerRegistration/scope -tags: - - API - - Portée - - Propriété - - Reference - - Service Workers - - ServiceWorkerRegistration - - scope -translation_of: Web/API/ServiceWorkerRegistration/scope ---- -
{{APIRef("Service Workers API")}}
- -

La propriété en lecture seule scope de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie un identifiant unique pour un enregistrement de service worker. Le service worker doit être sur la même origine que le document qui enregistre le {{domxref ("ServiceWorker")}}.

- -
-

Note : Cette fonctionnalité est disponible dans Web Workers.

-
- -

Syntaxe

- -
serviceWorkerRegistration.scope
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#dom-serviceworkerregistration-scope', 'ServiceWorkerRegistration.scope')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.ServiceWorkerRegistration.scope")}}

- -

Voir également

- - diff --git a/files/fr/web/api/serviceworkerregistration/scope/index.md b/files/fr/web/api/serviceworkerregistration/scope/index.md new file mode 100644 index 0000000000..19ef530db5 --- /dev/null +++ b/files/fr/web/api/serviceworkerregistration/scope/index.md @@ -0,0 +1,55 @@ +--- +title: ServiceWorkerRegistration.scope +slug: Web/API/ServiceWorkerRegistration/scope +tags: + - API + - Portée + - Propriété + - Reference + - Service Workers + - ServiceWorkerRegistration + - scope +translation_of: Web/API/ServiceWorkerRegistration/scope +--- +
{{APIRef("Service Workers API")}}
+ +

La propriété en lecture seule scope de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie un identifiant unique pour un enregistrement de service worker. Le service worker doit être sur la même origine que le document qui enregistre le {{domxref ("ServiceWorker")}}.

+ +
+

Note : Cette fonctionnalité est disponible dans Web Workers.

+
+ +

Syntaxe

+ +
serviceWorkerRegistration.scope
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Service Workers', '#dom-serviceworkerregistration-scope', 'ServiceWorkerRegistration.scope')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ServiceWorkerRegistration.scope")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.html b/files/fr/web/api/serviceworkerregistration/shownotification/index.html deleted file mode 100644 index fa1c3dfab1..0000000000 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: ServiceWorkerRegistration.showNotification() -slug: Web/API/ServiceWorkerRegistration/showNotification -tags: - - API - - Experimental - - Méthode - - Reference - - Service Workers - - ServiceWorker - - ServiceWorkerRegistration - - showNotification -translation_of: Web/API/ServiceWorkerRegistration/showNotification ---- -

{{APIRef("Service Workers API")}}

- -

La méthode showNotification() de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.

- -
-

Note : Cette fonctionnalité est disponible dans les Web Workers.

-
- -

Syntaxe

- -
​serviceWorkerRegistration.showNotification(title, [options])
- -

Paramètres

- -
-
title
-
Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.
-
options {{optional_inline}}
-
Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont: -
    -
  • actions: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes: -
      -
    • action: Une {{domxref("DOMString")}}  représentant une action utilisateur à afficher sur la notification.
      • -
    • title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur.
      • -
    • icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action.
      • -
    - Les réponses appropriées sont construites à l'aide de event.action dans l'événement {{event("notificationclick")}}.
    • -
  • badge: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
    • -
  • body: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.
    • -
  • data: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.
    • -
  • dir: La direction dans laquelle afficher la notification. La valeur par défaut est auto, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de ltr et rtl (bien que la plupart des navigateurs semblent ignorer ces paramètres.)
    • -
  • icon: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.
    • -
  • image: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.
    • -
  • lang: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.
    • -
  • renotify: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est false, ce qui signifie qu'ils ne seront pas notifiés.
    • -
  • requireInteraction: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est false.
    • -
  • silent: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est false, ce qui signifie qu'il ne sera pas silencieux.
    • -
  • tag: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.
    • -
  • timestamp: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer.
    • -
  • vibrate: Un modèle de vibration que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, [300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.
    • -
-
-
- -

Valeur de retour

- -

Un {{jsxref('Promise')}} qui se résout en undefined.

- -

Exemples

- -
navigator.serviceWorker.register('sw.js')
-
-function showNotification() {
-  Notification.requestPermission((result) => {
-    if (result === 'granted') {
-      navigator.serviceWorker.ready.then((registration) => {
-        registration.showNotification('Vibration Sample', {
-          body: 'Buzz! Buzz!',
-          icon: '../images/touch/chrome-touch-icon-192x192.png',
-          vibrate: [200, 100, 200, 100, 200, 100, 200],
-          tag: 'vibration-sample'
-        })
-      })
-    }
-  })
-}
-
- -

Pour appeler la fonction ci-dessus à un moment approprié, vous pouvez utiliser le gestionnaire d'événements {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}.

- -

Vous pouvez également récupérer les détails des {{domxref ("Notification", "Notifications")}} qui ont été déclenchés par le service worker actuel en utilisant {{domxref ("ServiceWorkerRegistration.getNotifications()")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotification','showNotification()')}}{{Spec2('Web Notifications')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.ServiceWorkerRegistration.showNotification")}}

diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.md b/files/fr/web/api/serviceworkerregistration/shownotification/index.md new file mode 100644 index 0000000000..fa1c3dfab1 --- /dev/null +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.md @@ -0,0 +1,106 @@ +--- +title: ServiceWorkerRegistration.showNotification() +slug: Web/API/ServiceWorkerRegistration/showNotification +tags: + - API + - Experimental + - Méthode + - Reference + - Service Workers + - ServiceWorker + - ServiceWorkerRegistration + - showNotification +translation_of: Web/API/ServiceWorkerRegistration/showNotification +--- +

{{APIRef("Service Workers API")}}

+ +

La méthode showNotification() de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.

+ +
+

Note : Cette fonctionnalité est disponible dans les Web Workers.

+
+ +

Syntaxe

+ +
​serviceWorkerRegistration.showNotification(title, [options])
+ +

Paramètres

+ +
+
title
+
Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.
+
options {{optional_inline}}
+
Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont: +
    +
  • actions: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes: +
      +
    • action: Une {{domxref("DOMString")}}  représentant une action utilisateur à afficher sur la notification.
      • +
    • title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur.
      • +
    • icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action.
      • +
    + Les réponses appropriées sont construites à l'aide de event.action dans l'événement {{event("notificationclick")}}.
    • +
  • badge: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
    • +
  • body: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.
    • +
  • data: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.
    • +
  • dir: La direction dans laquelle afficher la notification. La valeur par défaut est auto, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de ltr et rtl (bien que la plupart des navigateurs semblent ignorer ces paramètres.)
    • +
  • icon: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.
    • +
  • image: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.
    • +
  • lang: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une balise de langue BCP 47. Consultez la page des codes de langue à 2 lettres ISO de Sitepoint pour une référence simple.
    • +
  • renotify: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est false, ce qui signifie qu'ils ne seront pas notifiés.
    • +
  • requireInteraction: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est false.
    • +
  • silent: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est false, ce qui signifie qu'il ne sera pas silencieux.
    • +
  • tag: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.
    • +
  • timestamp: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer.
    • +
  • vibrate: Un modèle de vibration que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, [300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.
    • +
+
+
+ +

Valeur de retour

+ +

Un {{jsxref('Promise')}} qui se résout en undefined.

+ +

Exemples

+ +
navigator.serviceWorker.register('sw.js')
+
+function showNotification() {
+  Notification.requestPermission((result) => {
+    if (result === 'granted') {
+      navigator.serviceWorker.ready.then((registration) => {
+        registration.showNotification('Vibration Sample', {
+          body: 'Buzz! Buzz!',
+          icon: '../images/touch/chrome-touch-icon-192x192.png',
+          vibrate: [200, 100, 200, 100, 200, 100, 200],
+          tag: 'vibration-sample'
+        })
+      })
+    }
+  })
+}
+
+ +

Pour appeler la fonction ci-dessus à un moment approprié, vous pouvez utiliser le gestionnaire d'événements {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}.

+ +

Vous pouvez également récupérer les détails des {{domxref ("Notification", "Notifications")}} qui ont été déclenchés par le service worker actuel en utilisant {{domxref ("ServiceWorkerRegistration.getNotifications()")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotification','showNotification()')}}{{Spec2('Web Notifications')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ServiceWorkerRegistration.showNotification")}}

diff --git a/files/fr/web/api/settimeout/index.html b/files/fr/web/api/settimeout/index.html deleted file mode 100644 index c487fcc22f..0000000000 --- a/files/fr/web/api/settimeout/index.html +++ /dev/null @@ -1,363 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.setTimeout() -slug: Web/API/setTimeout -tags: - - API - - HTML DOM - - Méthode - - Reference -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout -original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout ---- -
{{APIRef("HTML DOM")}}
- -

La méthode setTimeout(), rattachée au mixin  {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à window.setTimeout()) permet de définir un « minuteur » (timer) qui exécute une fonction ou un code donné après la fin du délai indiqué.

- -

Syntaxe

- -
var identifiant = scope.setTimeout(fonction[, delai, param1, param2, ...]);
-var identifiant = scope.setTimeout(fonction[, delai]);
-var identifiant = scope.setTimeout(code[, delai]);
-
- -

Paramètres

- -
-
function
-
Une fonction ({{jsxref("function")}}) qui doit être exécuté au déclenchement du minuteur après le temps imparti.
-
code
-
Une chaîne de caractères qui représente le code à exécuter. Cette chaîne est compilée et exécutée à l'expiration du minuteur. Pour des raisons analogues à celles exprimées avec {{jsxref("Objets_globaux/eval", "eval()")}}, cette syntaxe n'est pas recommandée.
-
delai {{optional_inline}}
-
La durée, exprimée en millisecondes, à attendre avant que la fonction indiquée soit exécutée. Par défaut, ce paramètre vaut 0, ce qui signifiie que la fonction est exécutée dès que possible. La durée réelle mesurée avant l'exécution de la fonction peut être supérieure à ce paramètre, voir la section ci-après.
-
param1, … , paramN {{optional_inline}}
-
D'autres paramètres qui seront passés à la fonction une fois que le temps est écoulé.
-
- -
-

Note : La première syntaxe utilisant les paramètres supplémentaires ne fonctionne pas pour Internet Explorer 9 et les versions antérieures. Si vous souhaitez obtenir cette fonctionnalité pour ce navigateur, vous devrez utiliser une prothèse, voir ci-après.

-
- -

Valeur de retour

- -

La valeur renvoyée par la fonction est un entier qui représente un identifiant du minuteur créé par l'appel à setTimeout(). Cet identifiant pourra être passé à la méthode {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} afin d'annuler ce minuteur donné.

- -

Il peut être utile de savoir que setTimeout() et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que  clearTimeout() et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger.

- -

Le moteur d'exécution garantit qu'un identifiant donné ne sera pas réutilisé par un appel ultérieur à setTimeout() ou setInterval() pour un même objet (une fenêtre ou un worker). En revanche, différents objets possèdent chacun leurs ensembles d'identifiants.

- -

Exemples

- -

Dans l'exemple qui suit, on dispose deux boutons classiques auxquels on associe, via des gestionnaires d'évènements, des fonctions qui utilisent setTimeout() et clearTimeout(). Utiliser le premier bouton déclenchera un minuteur qui affichera une boîte de dialogue après deux secondes. L'identifiant est enregistré à la création du minuteur et on peut annuler le minuteur en cours en appuyant sur le deuxième bouton (dont la fonction associée au gestionnaire d'évènements utilise clearTimeout()).

- -

HTML

- -
<button onclick="delayedAlert();">
-  Affiche une alerte après deux secondes
-</button>
-<p></p>
-<button onclick="clearAlert();">
-  Annuler l'alerte avant qu'elle ne se déclenche
-</button>
-
- -

JavaScript

- -
var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("C'était long…");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -
-

Note : Voir aussi les exemples pour clearTimeout().

-
- -

Prothèse d'émulation (polyfill)

- -

S'il vous faut passer un ou plusieurs arguments à la fonction de rappel tout en prenant en charge Internet Explorer 9 et les versions antérieures, vous pouvez utiliser cette prothèse qui ajoute la prise en charge des paramètres additionnels :

- -
/*\
-|*|
-|*|  Polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // l'argument est passé, pas besoin de prothèse
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-    // l'argument est passé, pas besoin de prothèse
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())
-
- -

Correctif ciblé sur IE

- -

Si vous souhaitez ne cibler que IE 9 et antérieurs, vous pouvez utiliser les commentaires conditionnels JavaScript :

- -
/*@cc_on
-  // conditional IE < 9 only fix
-  @if (@_jscript_version <= 9)
-  (function(f){
-     window.setTimeout = f(window.setTimeout);
-     window.setInterval = f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
-  @end
-@*/
-
- -

Ou plutôt les commentaires conditionnels HTML :

- -
<!--[if lte IE 9]><script>
-(function(f){
-window.setTimeout=f(window.setTimeout);
-window.setInterval=f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
-});
-</script><![endif]-->
-
- -

Autres méthodes de contournement

- -

Vous pouvez également utiliser une fonction anonyme comme fonction de rappel (callback) :

- -
var intervalID = setTimeout(function() {
-  maFonction('un', 'deux', 'trois');
-  }, 1000);
-
- -

Voici une réécriture de l'exemple précédent avec les fonctions fléchées :

- -
var intervalID = setTimeout(() => {
-  maFonction('un', 'deux', 'trois');
-  }, 1000);
-
- -

On peut également utiliser {{jsxref("Function.prototype.bind()")}} :

- -
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-
- -

Le problème « this »

- -

Lorsqu'on passe une fonction à setTimeout(), cette fonction peut être appelée avec une valeur this qui n'est pas celle qu'on attend. Ce problème est expliqué en détails dans la référence JavaScriptJavaScript reference.

- -

Explications

- -

Le code exécuté par setTimeout() est appelé dans un contexte d'exécution différent de celui de la fonction où setTimeout a été appelé. Les règles usuelles pour la détermination de this s'appliquent : si this n'est pas défini lors de l'appel ou avec bind, la valeur par défaut sera l'objet global (global ou window) en mode non-strict ou {{jsxref("undefined")}} en mode strict. Aussi, le this utilisé par la fonction de rappel ne sera pas le même this que celui utilisé par la fonction ayant appelé setTimeout.

- -
-

Note : La valeur par défaut pour this, lors de l'utilisation d'une fonction de rappel par setTimeout sera toujours l'objet window et pas la valeur undefined, même en mode strict.

-
- -

Par exemple :

- -
monTableau = ['zéro', 'un', 'deux'];
-monTableau.maMéthode = function (sPropriété) {
-    console.log(arguments.length > 0 ? this[sPropriété] : this);
-};
-
-monTableau.maMéthode();  // affichera "zéro,un,deux" dans la console
-monTableau.maMéthode(1); // affichera "un"
- -

Le code qui précède fonctionne car lorsque maMéthode est appelée, this correspond à monTableau et qu'au sein de maMéthode, this[sPropriété] correspond alors à monTableau[sPropriété]. Toutefois, avec :

- -
setTimeout(monTableau.maMéthode, 1000);
-// affiche "[object Window]" après 1 seconde
-setTimeout(monTableau.maMéthode, 1500, '1');
-// affiche "undefined" après 1.5 seconde
- -

La fonction monTableau.maMéthode est pasée à setTimeout et, lorsqu'elle est appelée, this n'est pas défini et le moteur utilise la valeur par défaut : window. Il n'y apas d'option qui permettent de passer une valeur  thisArg à setTimeout() comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser call() afin de définir this ne fonctionnera pas non plus.

- -
setTimeout.call(monTableau, monTableau.maMéthode, 2000);
-// error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(monTableau, monTableau.maMéthode, 2500, 2);
-// même erreur
-
- -

Solutions éventuelles

- -
-

Note : JavaScript 1.8.5 introduced the Function.prototype.bind() method to set the value of this for all calls to a given function. This can avoid having to use a wrapper function to set the value of this in a callback.

-
- -

Exemple d'utilisation :

- -
var monTableau = ['zéro', 'un', 'deux'];
-var maMéthodeLiée = (function (sPropriété) {
-  console.log(arguments.length > 0 ? this[sPropriété] : this);
-}).bind(monTableau);
-
-
-maMéthodeLiée(); // affiche "zéro,un,deux"
-maMéthodeLiée(1); // affiche "un"
-setTimeout(maMéthodeLiée, 1000);
-// affiche "zéro,un,deux" après une seconde
-setTimeout(maMéthodeLiée, 1500, "1");
-// affiche "un" après 1.5 seconde
-
- -

Notes

- -

Les minuteurs peuvent être annulés avec {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}. Si on souhaite appeler une fonction de façon répétée, on utilisera plutôt {{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}}.

- -

Utiliser des chaînes pour le code plutôt que des fonctions

- -

Passer une chaîne de caractères pour le code à exécuter, plutôt qu'une fonction, souffre des mêmes dangers que {{jsxref("Objets_globaux/eval","eval()")}}.

- -
// Recommandé
-window.setTimeout(function() {
-    console.log('Coucou monde !');
-}, 500);
-
-// Non recommandé
-window.setTimeout("console.log('Coucou monde !');", 500);
-
- -

Une chaîne de caractères passée à setTimeout sera évaluée dans le contexte global. Aussi, les symboles locaux au contexte de l'appel de setTimeout() ne seront pas accessibles au code présent dans la chaîne de caractères lors de son évaluation.

- -

Durée plus longue que le paramètre indiquée

- -

Plusieurs raisons peuvent expliquer une durée réelle plus longue que le délai passé en argument. Voici les plus fréquentes.

- -

Précision minimale à 4ms

- -

Dans les navigateurs récents les appels à setTimeout()/{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} possèdent au plus une précision de 4ms lorsque plusieurs appels imbriqués sont réalisés. Par exemple :

- -
function cb() { f(); setTimeout(cb, 0); }
-setTimeout(cb, 0);
- -
setInterval(f, 0);
- -

Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel,  Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite setInterval() de la même façon depuis la version 56.

- -

Par le passé, certains navigateurs implémentaient cette limite différemment (pour les appels à setInterval() quelle que soit leur provenance ou lorsqu'un appel setTimeout() était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication.

- -

Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postMessage()")}}.

- -
-

Note : Le délai minimal est géré dans Firefox via une préférence : dom.min_timeout_value.

-
- -
-

Note : Cette durée de 4 ms est définie dans la spécification HTML5 et est la même dans l'ensemble des navigateurs à partir de 2010. Avant {{geckoRelease("5.0")}}, la valeur minimale pour les appels imbriqués était 10ms.

-
- -

Précision minimale des minuteurs pour les onglets inactifs : plus de 1000ms

- -

Afin de réduire la charge (ainsi que la consommation d'énergie associée) des onglets en arrière-plan, les minuteurs ne sont déclenchés au maximum qu'une fois par seconde pour les onglets inactifs.

- -

Firefox implémente ce comportement depuis Firefox 5 (cf.  {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence dom.min_background_timeout_value. Chrome implémente ce comportement depuis la version 11 (crbug.com/66078).

- -

Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf.  {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement.

- -
-

Note : Firefox 50 ne limite plus la réactivité des onglets en arrière-plan si un contexte Web Audio API {{domxref("AudioContext")}} joue un son. Firefox 51 élargit le spectre en supprimant la limitation si un objet {{domxref("AudioContext")}} est présent dans l'onglet, même sans jouer de son. Cela a permis de résoudre différents problèmes avec certaines applications qui jouent de la musique en arrière-plan.

-
- -

Limitation des minuteurs pour les scripts de pistage

- -

Depuis Firefox 55, les scripts de pistage (par exemple Google Analytics) (c'est-à-dire que toute URL que Firefox reconnaît comme appartenant à un domaine de pistage via la liste TP) ont une limitation plus forte. En premier plan la limitation est toujours de 4ms mais pour les onglets en arrière-plan, la limite est à 10000ms une fois que 30 secondes se sont écoulées après le premier chargement du document.

- -

Ces seuils peuvent être gérés via les préférences :

- - - -

Minuteurs en retard

- -

En plus de ces limitations, le minuteur peut être déclenché plus tard si le navigateur ou le système d'opération est occupé sur d'autres tâches. On notera particulièrement que la fonction de rappel n'est pas exécutée tant que le thread du script n'a pas terminé. Par exemple :

- -
function toto() {
-  console.log('appel de toto');
-}
-setTimeout(toto, 0);
-console.log('Après setTimeout');
- -

affichera, dans la console :

- -
Après setTimeout
-appel de toto
- -

Ici, même si setTimeout a été appelé avec un délai nul, la fonction de rappel est placée dans la queue et est planifiée pour être exécutée dès que possible : ce qui n'est pas « immédiatement ». Le code courant doit finir d'être exécuté afin que les appels dans la queue puissent être dépilés.

- -

Valeur de délai maximale

- -

Les navigateurs que sont Internet Explorer, Chrome, Safari et Firefox stockent, en interne, la valeur du délai comme un entier sur 32 bits signé. Il y a donc un dépassement de borne si le délai est supérieur à 2147483647 millisecondes, ce qui correspond à 24.8 days. Si une telle valeur (supérieure à ce seuil) est utilisée, le minuteur est déclenché dès que possible.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}{{Spec2("HTML WHATWG")}}Déplacement de la méthode sur le mixin WindowOrWorkerGlobalScope dans la dernière spécification.
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Définition initiale (DOM Level 0)
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/settimeout/index.md b/files/fr/web/api/settimeout/index.md new file mode 100644 index 0000000000..c487fcc22f --- /dev/null +++ b/files/fr/web/api/settimeout/index.md @@ -0,0 +1,363 @@ +--- +title: WindowOrWorkerGlobalScope.setTimeout() +slug: Web/API/setTimeout +tags: + - API + - HTML DOM + - Méthode + - Reference +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

La méthode setTimeout(), rattachée au mixin  {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à window.setTimeout()) permet de définir un « minuteur » (timer) qui exécute une fonction ou un code donné après la fin du délai indiqué.

+ +

Syntaxe

+ +
var identifiant = scope.setTimeout(fonction[, delai, param1, param2, ...]);
+var identifiant = scope.setTimeout(fonction[, delai]);
+var identifiant = scope.setTimeout(code[, delai]);
+
+ +

Paramètres

+ +
+
function
+
Une fonction ({{jsxref("function")}}) qui doit être exécuté au déclenchement du minuteur après le temps imparti.
+
code
+
Une chaîne de caractères qui représente le code à exécuter. Cette chaîne est compilée et exécutée à l'expiration du minuteur. Pour des raisons analogues à celles exprimées avec {{jsxref("Objets_globaux/eval", "eval()")}}, cette syntaxe n'est pas recommandée.
+
delai {{optional_inline}}
+
La durée, exprimée en millisecondes, à attendre avant que la fonction indiquée soit exécutée. Par défaut, ce paramètre vaut 0, ce qui signifiie que la fonction est exécutée dès que possible. La durée réelle mesurée avant l'exécution de la fonction peut être supérieure à ce paramètre, voir la section ci-après.
+
param1, … , paramN {{optional_inline}}
+
D'autres paramètres qui seront passés à la fonction une fois que le temps est écoulé.
+
+ +
+

Note : La première syntaxe utilisant les paramètres supplémentaires ne fonctionne pas pour Internet Explorer 9 et les versions antérieures. Si vous souhaitez obtenir cette fonctionnalité pour ce navigateur, vous devrez utiliser une prothèse, voir ci-après.

+
+ +

Valeur de retour

+ +

La valeur renvoyée par la fonction est un entier qui représente un identifiant du minuteur créé par l'appel à setTimeout(). Cet identifiant pourra être passé à la méthode {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} afin d'annuler ce minuteur donné.

+ +

Il peut être utile de savoir que setTimeout() et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que  clearTimeout() et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger.

+ +

Le moteur d'exécution garantit qu'un identifiant donné ne sera pas réutilisé par un appel ultérieur à setTimeout() ou setInterval() pour un même objet (une fenêtre ou un worker). En revanche, différents objets possèdent chacun leurs ensembles d'identifiants.

+ +

Exemples

+ +

Dans l'exemple qui suit, on dispose deux boutons classiques auxquels on associe, via des gestionnaires d'évènements, des fonctions qui utilisent setTimeout() et clearTimeout(). Utiliser le premier bouton déclenchera un minuteur qui affichera une boîte de dialogue après deux secondes. L'identifiant est enregistré à la création du minuteur et on peut annuler le minuteur en cours en appuyant sur le deuxième bouton (dont la fonction associée au gestionnaire d'évènements utilise clearTimeout()).

+ +

HTML

+ +
<button onclick="delayedAlert();">
+  Affiche une alerte après deux secondes
+</button>
+<p></p>
+<button onclick="clearAlert();">
+  Annuler l'alerte avant qu'elle ne se déclenche
+</button>
+
+ +

JavaScript

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("C'était long…");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +
+

Note : Voir aussi les exemples pour clearTimeout().

+
+ +

Prothèse d'émulation (polyfill)

+ +

S'il vous faut passer un ou plusieurs arguments à la fonction de rappel tout en prenant en charge Internet Explorer 9 et les versions antérieures, vous pouvez utiliser cette prothèse qui ajoute la prise en charge des paramètres additionnels :

+ +
/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // l'argument est passé, pas besoin de prothèse
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+    // l'argument est passé, pas besoin de prothèse
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+
+ +

Correctif ciblé sur IE

+ +

Si vous souhaitez ne cibler que IE 9 et antérieurs, vous pouvez utiliser les commentaires conditionnels JavaScript :

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 9)
+  (function(f){
+     window.setTimeout = f(window.setTimeout);
+     window.setInterval = f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+
+ +

Ou plutôt les commentaires conditionnels HTML :

+ +
<!--[if lte IE 9]><script>
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+</script><![endif]-->
+
+ +

Autres méthodes de contournement

+ +

Vous pouvez également utiliser une fonction anonyme comme fonction de rappel (callback) :

+ +
var intervalID = setTimeout(function() {
+  maFonction('un', 'deux', 'trois');
+  }, 1000);
+
+ +

Voici une réécriture de l'exemple précédent avec les fonctions fléchées :

+ +
var intervalID = setTimeout(() => {
+  maFonction('un', 'deux', 'trois');
+  }, 1000);
+
+ +

On peut également utiliser {{jsxref("Function.prototype.bind()")}} :

+ +
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+
+ +

Le problème « this »

+ +

Lorsqu'on passe une fonction à setTimeout(), cette fonction peut être appelée avec une valeur this qui n'est pas celle qu'on attend. Ce problème est expliqué en détails dans la référence JavaScriptJavaScript reference.

+ +

Explications

+ +

Le code exécuté par setTimeout() est appelé dans un contexte d'exécution différent de celui de la fonction où setTimeout a été appelé. Les règles usuelles pour la détermination de this s'appliquent : si this n'est pas défini lors de l'appel ou avec bind, la valeur par défaut sera l'objet global (global ou window) en mode non-strict ou {{jsxref("undefined")}} en mode strict. Aussi, le this utilisé par la fonction de rappel ne sera pas le même this que celui utilisé par la fonction ayant appelé setTimeout.

+ +
+

Note : La valeur par défaut pour this, lors de l'utilisation d'une fonction de rappel par setTimeout sera toujours l'objet window et pas la valeur undefined, même en mode strict.

+
+ +

Par exemple :

+ +
monTableau = ['zéro', 'un', 'deux'];
+monTableau.maMéthode = function (sPropriété) {
+    console.log(arguments.length > 0 ? this[sPropriété] : this);
+};
+
+monTableau.maMéthode();  // affichera "zéro,un,deux" dans la console
+monTableau.maMéthode(1); // affichera "un"
+ +

Le code qui précède fonctionne car lorsque maMéthode est appelée, this correspond à monTableau et qu'au sein de maMéthode, this[sPropriété] correspond alors à monTableau[sPropriété]. Toutefois, avec :

+ +
setTimeout(monTableau.maMéthode, 1000);
+// affiche "[object Window]" après 1 seconde
+setTimeout(monTableau.maMéthode, 1500, '1');
+// affiche "undefined" après 1.5 seconde
+ +

La fonction monTableau.maMéthode est pasée à setTimeout et, lorsqu'elle est appelée, this n'est pas défini et le moteur utilise la valeur par défaut : window. Il n'y apas d'option qui permettent de passer une valeur  thisArg à setTimeout() comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser call() afin de définir this ne fonctionnera pas non plus.

+ +
setTimeout.call(monTableau, monTableau.maMéthode, 2000);
+// error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(monTableau, monTableau.maMéthode, 2500, 2);
+// même erreur
+
+ +

Solutions éventuelles

+ +
+

Note : JavaScript 1.8.5 introduced the Function.prototype.bind() method to set the value of this for all calls to a given function. This can avoid having to use a wrapper function to set the value of this in a callback.

+
+ +

Exemple d'utilisation :

+ +
var monTableau = ['zéro', 'un', 'deux'];
+var maMéthodeLiée = (function (sPropriété) {
+  console.log(arguments.length > 0 ? this[sPropriété] : this);
+}).bind(monTableau);
+
+
+maMéthodeLiée(); // affiche "zéro,un,deux"
+maMéthodeLiée(1); // affiche "un"
+setTimeout(maMéthodeLiée, 1000);
+// affiche "zéro,un,deux" après une seconde
+setTimeout(maMéthodeLiée, 1500, "1");
+// affiche "un" après 1.5 seconde
+
+ +

Notes

+ +

Les minuteurs peuvent être annulés avec {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}. Si on souhaite appeler une fonction de façon répétée, on utilisera plutôt {{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}}.

+ +

Utiliser des chaînes pour le code plutôt que des fonctions

+ +

Passer une chaîne de caractères pour le code à exécuter, plutôt qu'une fonction, souffre des mêmes dangers que {{jsxref("Objets_globaux/eval","eval()")}}.

+ +
// Recommandé
+window.setTimeout(function() {
+    console.log('Coucou monde !');
+}, 500);
+
+// Non recommandé
+window.setTimeout("console.log('Coucou monde !');", 500);
+
+ +

Une chaîne de caractères passée à setTimeout sera évaluée dans le contexte global. Aussi, les symboles locaux au contexte de l'appel de setTimeout() ne seront pas accessibles au code présent dans la chaîne de caractères lors de son évaluation.

+ +

Durée plus longue que le paramètre indiquée

+ +

Plusieurs raisons peuvent expliquer une durée réelle plus longue que le délai passé en argument. Voici les plus fréquentes.

+ +

Précision minimale à 4ms

+ +

Dans les navigateurs récents les appels à setTimeout()/{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} possèdent au plus une précision de 4ms lorsque plusieurs appels imbriqués sont réalisés. Par exemple :

+ +
function cb() { f(); setTimeout(cb, 0); }
+setTimeout(cb, 0);
+ +
setInterval(f, 0);
+ +

Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel,  Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite setInterval() de la même façon depuis la version 56.

+ +

Par le passé, certains navigateurs implémentaient cette limite différemment (pour les appels à setInterval() quelle que soit leur provenance ou lorsqu'un appel setTimeout() était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication.

+ +

Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postMessage()")}}.

+ +
+

Note : Le délai minimal est géré dans Firefox via une préférence : dom.min_timeout_value.

+
+ +
+

Note : Cette durée de 4 ms est définie dans la spécification HTML5 et est la même dans l'ensemble des navigateurs à partir de 2010. Avant {{geckoRelease("5.0")}}, la valeur minimale pour les appels imbriqués était 10ms.

+
+ +

Précision minimale des minuteurs pour les onglets inactifs : plus de 1000ms

+ +

Afin de réduire la charge (ainsi que la consommation d'énergie associée) des onglets en arrière-plan, les minuteurs ne sont déclenchés au maximum qu'une fois par seconde pour les onglets inactifs.

+ +

Firefox implémente ce comportement depuis Firefox 5 (cf.  {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence dom.min_background_timeout_value. Chrome implémente ce comportement depuis la version 11 (crbug.com/66078).

+ +

Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf.  {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement.

+ +
+

Note : Firefox 50 ne limite plus la réactivité des onglets en arrière-plan si un contexte Web Audio API {{domxref("AudioContext")}} joue un son. Firefox 51 élargit le spectre en supprimant la limitation si un objet {{domxref("AudioContext")}} est présent dans l'onglet, même sans jouer de son. Cela a permis de résoudre différents problèmes avec certaines applications qui jouent de la musique en arrière-plan.

+
+ +

Limitation des minuteurs pour les scripts de pistage

+ +

Depuis Firefox 55, les scripts de pistage (par exemple Google Analytics) (c'est-à-dire que toute URL que Firefox reconnaît comme appartenant à un domaine de pistage via la liste TP) ont une limitation plus forte. En premier plan la limitation est toujours de 4ms mais pour les onglets en arrière-plan, la limite est à 10000ms une fois que 30 secondes se sont écoulées après le premier chargement du document.

+ +

Ces seuils peuvent être gérés via les préférences :

+ + + +

Minuteurs en retard

+ +

En plus de ces limitations, le minuteur peut être déclenché plus tard si le navigateur ou le système d'opération est occupé sur d'autres tâches. On notera particulièrement que la fonction de rappel n'est pas exécutée tant que le thread du script n'a pas terminé. Par exemple :

+ +
function toto() {
+  console.log('appel de toto');
+}
+setTimeout(toto, 0);
+console.log('Après setTimeout');
+ +

affichera, dans la console :

+ +
Après setTimeout
+appel de toto
+ +

Ici, même si setTimeout a été appelé avec un délai nul, la fonction de rappel est placée dans la queue et est planifiée pour être exécutée dès que possible : ce qui n'est pas « immédiatement ». Le code courant doit finir d'être exécuté afin que les appels dans la queue puissent être dépilés.

+ +

Valeur de délai maximale

+ +

Les navigateurs que sont Internet Explorer, Chrome, Safari et Firefox stockent, en interne, la valeur du délai comme un entier sur 32 bits signé. Il y a donc un dépassement de borne si le délai est supérieur à 2147483647 millisecondes, ce qui correspond à 24.8 days. Si une telle valeur (supérieure à ce seuil) est utilisée, le minuteur est déclenché dès que possible.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}{{Spec2("HTML WHATWG")}}Déplacement de la méthode sur le mixin WindowOrWorkerGlobalScope dans la dernière spécification.
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Définition initiale (DOM Level 0)
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.html b/files/fr/web/api/shadowroot/delegatesfocus/index.html deleted file mode 100644 index a42192a6a2..0000000000 --- a/files/fr/web/api/shadowroot/delegatesfocus/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: ShadowRoot.delegatesFocus -slug: Web/API/ShadowRoot/delegatesFocus -tags: - - API - - Non-standard - - Propriété - - Reference - - ShadowRoot -translation_of: Web/API/ShadowRoot/delegatesFocus ---- -
{{APIRef("Shadow DOM")}}
- -

delegatesFocus est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option delegatesFocus a été intialisée lors de l'attachement de la racine shadow (cf. {{domxref("Element.attachShadow()")}}).

- -
-

Attention : Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.

-
- -

Syntaxe

- -
var df = shadowRoot.delegatesFocus
- -

Valeur

- -

Un booléen : true si la racine shadow délègue la gestion du focus et false sinon.

- -

Exemples

- -
let customElem = document.querySelector('mon-element-shadow-dom');
-let shadow = customElem.shadowRoot;
-
-  ...
-
-// Est-ce que la racine gère la délégation du focus ?
-let hostElem = shadow.delegatesFocus;
- -

Spécifications

- -

Cette fonctionnalité n'est actuellement décrite dans aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("api.ShadowRoot.delegatesFocus")}}

diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.md b/files/fr/web/api/shadowroot/delegatesfocus/index.md new file mode 100644 index 0000000000..a42192a6a2 --- /dev/null +++ b/files/fr/web/api/shadowroot/delegatesfocus/index.md @@ -0,0 +1,44 @@ +--- +title: ShadowRoot.delegatesFocus +slug: Web/API/ShadowRoot/delegatesFocus +tags: + - API + - Non-standard + - Propriété + - Reference + - ShadowRoot +translation_of: Web/API/ShadowRoot/delegatesFocus +--- +
{{APIRef("Shadow DOM")}}
+ +

delegatesFocus est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option delegatesFocus a été intialisée lors de l'attachement de la racine shadow (cf. {{domxref("Element.attachShadow()")}}).

+ +
+

Attention : Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.

+
+ +

Syntaxe

+ +
var df = shadowRoot.delegatesFocus
+ +

Valeur

+ +

Un booléen : true si la racine shadow délègue la gestion du focus et false sinon.

+ +

Exemples

+ +
let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+  ...
+
+// Est-ce que la racine gère la délégation du focus ?
+let hostElem = shadow.delegatesFocus;
+ +

Spécifications

+ +

Cette fonctionnalité n'est actuellement décrite dans aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ShadowRoot.delegatesFocus")}}

diff --git a/files/fr/web/api/shadowroot/host/index.html b/files/fr/web/api/shadowroot/host/index.html deleted file mode 100644 index 8b23a74117..0000000000 --- a/files/fr/web/api/shadowroot/host/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: ShadowRoot.host -slug: Web/API/ShadowRoot/host -tags: - - API - - Propriété - - Reference - - ShadowRoot - - shadow dom -translation_of: Web/API/ShadowRoot/host ---- -
{{APIRef("Shadow DOM")}}
- -

La propriété host est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui représente une référence à l'élément du DOM auquel la racine ShadowRoot est attachée.

- -

Syntaxe

- -
var element = shadowRoot.host
- -

Valeur

- -

Un élément du DOM sous la forme d'un objet {{domxref('Element')}}.

- -

Exemples

- -
let customElem = document.querySelector('mon-element-shadow-dom');
-let shadow = customElem.shadowRoot;
-
-  ...
-
-// renvoie l'élément hôte
-let hostElem = shadow.host;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#dom-shadowroot-host','ShadowRoot.host')}}{{Spec2('DOM WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.ShadowRoot.host")}}

diff --git a/files/fr/web/api/shadowroot/host/index.md b/files/fr/web/api/shadowroot/host/index.md new file mode 100644 index 0000000000..8b23a74117 --- /dev/null +++ b/files/fr/web/api/shadowroot/host/index.md @@ -0,0 +1,55 @@ +--- +title: ShadowRoot.host +slug: Web/API/ShadowRoot/host +tags: + - API + - Propriété + - Reference + - ShadowRoot + - shadow dom +translation_of: Web/API/ShadowRoot/host +--- +
{{APIRef("Shadow DOM")}}
+ +

La propriété host est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui représente une référence à l'élément du DOM auquel la racine ShadowRoot est attachée.

+ +

Syntaxe

+ +
var element = shadowRoot.host
+ +

Valeur

+ +

Un élément du DOM sous la forme d'un objet {{domxref('Element')}}.

+ +

Exemples

+ +
let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+  ...
+
+// renvoie l'élément hôte
+let hostElem = shadow.host;
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#dom-shadowroot-host','ShadowRoot.host')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ShadowRoot.host")}}

diff --git a/files/fr/web/api/shadowroot/index.html b/files/fr/web/api/shadowroot/index.html deleted file mode 100644 index 81af6c08ea..0000000000 --- a/files/fr/web/api/shadowroot/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: ShadowRoot -slug: Web/API/ShadowRoot -tags: - - API - - Interface - - Reference - - ShadowRoot - - Web Components -translation_of: Web/API/ShadowRoot ---- -
{{APIRef('Shadow DOM')}}
- -

L'interface ShadowRoot, relative à l'API Shadow DOM, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal.

- -

Il est possible de récupérer une référence à la racine shadow d'un élément via la propriété {{domxref("Element.shadowRoot")}} si la racine a été créée avec la méthode {{domxref("Element.attachShadow()")}} et l'option mode qui valait open.

- -

Propriétés

- -
-
{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}
-
Cette propriété renvoie un booléen qui indique si l'option delegatesFocus a été activée lors de la liaison avec la racine shadow (cf. {{domxref("Element.attachShadow()")}}).
-
{{domxref("ShadowRoot.host")}} {{readonlyinline}}
-
Cette propriété renvoie une référence à l'élément DOM auquel la racine ShadowRoot est attachée.
-
{{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}}
-
Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racine ShadowRoot.
-
{{domxref("ShadowRoot.mode")}} {{readonlyinline}}
-
Cette propriété renvoie le mode utilisé pour la racine ShadowRoot : open ou closed. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript.
-
- -

Propriétés incluses via DocumentOrShadowRoot

- -

L'interface ShadowRoot inclut les propriétés suivantes grâce au mixin {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.

- -
-
{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}
-
L'élément ({{domxref('Element')}}) au sein du sous-arbre shadow qui a le focus.
-
{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}
-
Une liste {{domxref('StyleSheetList')}} d'objets {{domxref('CSSStyleSheet')}} qui référencent les feuilles de styles liées explicitement ou embarquées dans le document.
-
- -

Méthodes

- -

L'interface ShadowRoot inclut les méthodes suivantes qui proviennent du mixin {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.

- -
-
{{domxref("DocumentOrShadowRoot.getSelection()")}}
-
Cette méthode renvoie un objet {{domxref('Selection')}} représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur.
-
{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}
-
Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments.
-
{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}
-
Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments.
-
{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}
-
Cette méthode renvoie un objet {{domxref('CaretPosition')}} contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud.
-
- -

Exemples

- -

Les fragments de code suivants sont extraits de l'exemple life-cycle-callbacks (voir le résultat en live) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément.

- -

Dans la définition de la classe pour l'élément <custom-square>, on ajoute certains callbacks permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externe updateStyle() qui applique la taille et la couleur à l'élément. On lui passe l'argument this (c'est-à-dire l'élément lui-même).

- -
connectedCallback() {
-  console.log("Le carré personnalisé a été ajouté à la page.");
-  updateStyle(this);
-}
-
-attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {
-  console.log("Les attributs du carré ont changé.");
-  updateStyle(this);
-}
- -

Quant à la fonction updateStyle(), voyons ici son fonctionnement. On récupère une référence au shadow DOM avec {{domxref("Element.shadowRoot")}}. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément {{htmlelement("style")}} présent dans le shadow DOM et on met à jour le CSS pour cet élément :

- -
function updateStyle(elem) {
-  var shadow = elem.shadowRoot;
-  var childNodes = shadow.childNodes;
-  for(var i = 0; i < childNodes.length; i++) {
-    if(childNodes[i].nodeName === 'STYLE') {
-      childNodes[i].textContent =
-        'div {' +
-          'width: ' + elem.getAttribute('l') + 'px;' +
-          'height: ' + elem.getAttribute('l') + 'px;' +
-          'background-color: ' + elem.getAttribute('c') + ';' +
-        '}';
-    }
-  }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}}{{Spec2('DOM WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.ShadowRoot")}}

diff --git a/files/fr/web/api/shadowroot/index.md b/files/fr/web/api/shadowroot/index.md new file mode 100644 index 0000000000..81af6c08ea --- /dev/null +++ b/files/fr/web/api/shadowroot/index.md @@ -0,0 +1,111 @@ +--- +title: ShadowRoot +slug: Web/API/ShadowRoot +tags: + - API + - Interface + - Reference + - ShadowRoot + - Web Components +translation_of: Web/API/ShadowRoot +--- +
{{APIRef('Shadow DOM')}}
+ +

L'interface ShadowRoot, relative à l'API Shadow DOM, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal.

+ +

Il est possible de récupérer une référence à la racine shadow d'un élément via la propriété {{domxref("Element.shadowRoot")}} si la racine a été créée avec la méthode {{domxref("Element.attachShadow()")}} et l'option mode qui valait open.

+ +

Propriétés

+ +
+
{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}
+
Cette propriété renvoie un booléen qui indique si l'option delegatesFocus a été activée lors de la liaison avec la racine shadow (cf. {{domxref("Element.attachShadow()")}}).
+
{{domxref("ShadowRoot.host")}} {{readonlyinline}}
+
Cette propriété renvoie une référence à l'élément DOM auquel la racine ShadowRoot est attachée.
+
{{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}}
+
Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racine ShadowRoot.
+
{{domxref("ShadowRoot.mode")}} {{readonlyinline}}
+
Cette propriété renvoie le mode utilisé pour la racine ShadowRoot : open ou closed. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript.
+
+ +

Propriétés incluses via DocumentOrShadowRoot

+ +

L'interface ShadowRoot inclut les propriétés suivantes grâce au mixin {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.

+ +
+
{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}
+
L'élément ({{domxref('Element')}}) au sein du sous-arbre shadow qui a le focus.
+
{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}
+
Une liste {{domxref('StyleSheetList')}} d'objets {{domxref('CSSStyleSheet')}} qui référencent les feuilles de styles liées explicitement ou embarquées dans le document.
+
+ +

Méthodes

+ +

L'interface ShadowRoot inclut les méthodes suivantes qui proviennent du mixin {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.

+ +
+
{{domxref("DocumentOrShadowRoot.getSelection()")}}
+
Cette méthode renvoie un objet {{domxref('Selection')}} représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur.
+
{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}
+
Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments.
+
{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}
+
Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments.
+
{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}
+
Cette méthode renvoie un objet {{domxref('CaretPosition')}} contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud.
+
+ +

Exemples

+ +

Les fragments de code suivants sont extraits de l'exemple life-cycle-callbacks (voir le résultat en live) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément.

+ +

Dans la définition de la classe pour l'élément <custom-square>, on ajoute certains callbacks permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externe updateStyle() qui applique la taille et la couleur à l'élément. On lui passe l'argument this (c'est-à-dire l'élément lui-même).

+ +
connectedCallback() {
+  console.log("Le carré personnalisé a été ajouté à la page.");
+  updateStyle(this);
+}
+
+attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {
+  console.log("Les attributs du carré ont changé.");
+  updateStyle(this);
+}
+ +

Quant à la fonction updateStyle(), voyons ici son fonctionnement. On récupère une référence au shadow DOM avec {{domxref("Element.shadowRoot")}}. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément {{htmlelement("style")}} présent dans le shadow DOM et on met à jour le CSS pour cet élément :

+ +
function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i < childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent =
+        'div {' +
+          'width: ' + elem.getAttribute('l') + 'px;' +
+          'height: ' + elem.getAttribute('l') + 'px;' +
+          'background-color: ' + elem.getAttribute('c') + ';' +
+        '}';
+    }
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ShadowRoot")}}

diff --git a/files/fr/web/api/shadowroot/innerhtml/index.html b/files/fr/web/api/shadowroot/innerhtml/index.html deleted file mode 100644 index 5580e5ad2c..0000000000 --- a/files/fr/web/api/shadowroot/innerhtml/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: ShadowRoot.innerHTML -slug: Web/API/ShadowRoot/innerHTML -tags: - - API - - Propriété - - Reference - - ShadowRoot - - innerHTML - - shadow dom -translation_of: Web/API/ShadowRoot/innerHTML ---- -
{{APIRef("Shadow DOM")}}
- -

La propriété innerHTML, rattachée à l'interface {{domxref("ShadowRoot")}}, permet de définir ou de récupérer une référence à l'arbre DOM contenu dans la racine ShadowRoot.

- -

Syntaxe

- -
var domString = shadowRoot.innerHTML
-shadowRoot.innerHTML = domString
-
- -

Valeur

- -

Une chaîne de caractères {{domxref("DOMString")}}.

- -

Exemples

- -
let customElem = document.querySelector('mon-element-shadow-dom');
-let shadow = customElem.shadowRoot;
-
-shadow.innerHTML = '<strong>Cet élément devrait être plus important !</strong>';
- -

Spécifications

- -

Cette propriété ne fait pas encore partie d'une spécification. Voir cette issue pour le projet de spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("api.ShadowRoot.innerHTML")}}

diff --git a/files/fr/web/api/shadowroot/innerhtml/index.md b/files/fr/web/api/shadowroot/innerhtml/index.md new file mode 100644 index 0000000000..5580e5ad2c --- /dev/null +++ b/files/fr/web/api/shadowroot/innerhtml/index.md @@ -0,0 +1,40 @@ +--- +title: ShadowRoot.innerHTML +slug: Web/API/ShadowRoot/innerHTML +tags: + - API + - Propriété + - Reference + - ShadowRoot + - innerHTML + - shadow dom +translation_of: Web/API/ShadowRoot/innerHTML +--- +
{{APIRef("Shadow DOM")}}
+ +

La propriété innerHTML, rattachée à l'interface {{domxref("ShadowRoot")}}, permet de définir ou de récupérer une référence à l'arbre DOM contenu dans la racine ShadowRoot.

+ +

Syntaxe

+ +
var domString = shadowRoot.innerHTML
+shadowRoot.innerHTML = domString
+
+ +

Valeur

+ +

Une chaîne de caractères {{domxref("DOMString")}}.

+ +

Exemples

+ +
let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+shadow.innerHTML = '<strong>Cet élément devrait être plus important !</strong>';
+ +

Spécifications

+ +

Cette propriété ne fait pas encore partie d'une spécification. Voir cette issue pour le projet de spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ShadowRoot.innerHTML")}}

diff --git a/files/fr/web/api/shadowroot/mode/index.html b/files/fr/web/api/shadowroot/mode/index.html deleted file mode 100644 index 2e68fcb24e..0000000000 --- a/files/fr/web/api/shadowroot/mode/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: ShadowRoot.mode -slug: Web/API/ShadowRoot/mode -tags: - - API - - Propriété - - Reference - - ShadowRoot - - mode - - shadow dom -translation_of: Web/API/ShadowRoot/mode ---- -
{{APIRef("Shadow DOM")}}
- -

La propriété mode, rattachée à l'interface {{domxref("ShadowRoot")}}, indique son mode. Celui-ci peut valoir open ou closed et indique si les fonctionnalités internes de la racine sont accessibles en JavaScript.

- -

Lorsque le mode d'une racine shadow vaut closed, les détails d'implémentation internes sont inaccessibles et inchangeables avec JavaScript (de la même façon que les détails du fonctionnement de l'élément {{HTMLElement("video")}} sont inaccessibles et inchangeables en JavaScript).

- -

Syntaxe

- -
var mode = shadowRoot.mode
- -

Valeur

- -

Une valeur définie via l'énumération ShadowRootMode : soit open, soit closed.

- -

Exemples

- -
let customElem = document.querySelector('mon-element-shadow-dom');
-let shadow = customElem.shadowRoot;
-
-// Une autre façon de vérifier si la racine est ouverte :
-// on obtiendra null si elle est fermée
-if(shadow) {
-  // Si elle est ouverte, on ferme la racine pour
-  // cacher ce qu'il y a à l'intérieur.
-  shadow.mode = 'closed';
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}}{{Spec2('DOM WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.ShadowRoot.mode")}}

diff --git a/files/fr/web/api/shadowroot/mode/index.md b/files/fr/web/api/shadowroot/mode/index.md new file mode 100644 index 0000000000..2e68fcb24e --- /dev/null +++ b/files/fr/web/api/shadowroot/mode/index.md @@ -0,0 +1,61 @@ +--- +title: ShadowRoot.mode +slug: Web/API/ShadowRoot/mode +tags: + - API + - Propriété + - Reference + - ShadowRoot + - mode + - shadow dom +translation_of: Web/API/ShadowRoot/mode +--- +
{{APIRef("Shadow DOM")}}
+ +

La propriété mode, rattachée à l'interface {{domxref("ShadowRoot")}}, indique son mode. Celui-ci peut valoir open ou closed et indique si les fonctionnalités internes de la racine sont accessibles en JavaScript.

+ +

Lorsque le mode d'une racine shadow vaut closed, les détails d'implémentation internes sont inaccessibles et inchangeables avec JavaScript (de la même façon que les détails du fonctionnement de l'élément {{HTMLElement("video")}} sont inaccessibles et inchangeables en JavaScript).

+ +

Syntaxe

+ +
var mode = shadowRoot.mode
+ +

Valeur

+ +

Une valeur définie via l'énumération ShadowRootMode : soit open, soit closed.

+ +

Exemples

+ +
let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+// Une autre façon de vérifier si la racine est ouverte :
+// on obtiendra null si elle est fermée
+if(shadow) {
+  // Si elle est ouverte, on ferme la racine pour
+  // cacher ce qu'il y a à l'intérieur.
+  shadow.mode = 'closed';
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ShadowRoot.mode")}}

diff --git a/files/fr/web/api/sharedworker/index.html b/files/fr/web/api/sharedworker/index.html deleted file mode 100644 index 1e5e6b0351..0000000000 --- a/files/fr/web/api/sharedworker/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: SharedWorker -slug: Web/API/SharedWorker -tags: - - API - - Interface - - Reference - - Shared - - SharedWorker - - Worker -translation_of: Web/API/SharedWorker ---- -
{{APIRef("Web Workers API")}}
- -

L'interface SharedWorker représente un type spécifique de worker qui peut être accédé à partir de plusieurs contextes de navigation, tels que plusieurs fenêtres, iframes ou même workers. Ils implémentent une autre interface que les workers dédiés et ont un contexte global différent, {{domxref("SharedWorkerGlobalScope")}}.

- -
-

Note : Si un SharedWorker peut être accédé à partir de plusieurs contextes de navigation, tous ces contextes de navigation doivent partager exactement la même origine (même protocole, hôte et port.)

-
- -

Constructeurs

- -
-
{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}
-
Crée un web worker partagé qui exécute le script spécifié par l'URL.
-
- -

Propriétés

- -

Il hérite des propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.

- -
-
{{domxref("AbstractWorker.onerror")}}
-
Est un {{ domxref("EventListener") }} qui est appelé à chaque fois qu'un {{domxref("ErrorEvent")}} de type error se propage à travers le worker.
-
{{domxref("SharedWorker.port")}} {{readonlyInline}}
-
Retourne un objet {{domxref("MessagePort")}} utilisé pour communiquer et contrôler le worker partagé.
-
- -
-
- -

Méthodes

- -

Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente les méthodes de {{domxref("AbstractWorker")}}.

- -

Exemple

- -

Dans notre  Exemple basique d'un worker partagé (lancer le worker partagé), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes.

- -

L'extrait de code suivant illustre la création d'un objet SharedWorker en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :

- -
var myWorker = new SharedWorker("worker.js");
- -

Les deux scripts accèdent alors au worker à travers un objet {{domxref("MessagePort")}} créé en utilisant la propriété {{domxref("SharedWorker.port")}} — le port est démarré au moyen de sa méthode start() :

- -
myWorker.port.start();
- -

Lorsque le port est démarré, les deux scripts envoient des messages au worker et gèrent les messages qu'il renvoie en utilisant respectivement port.postMessage() et port.onmessage :

- -
first.onchange = function() {
-    myWorker.port.postMessage([first.value,second.value]);
-    console.log('Message envoyé au worker');
-  }
-
-  second.onchange = function() {
-    myWorker.port.postMessage([first.value,second.value]);
-    console.log('Message envoyé au worker');
-  }
-
-  myWorker.port.onmessage = function(e) {
-    result1.textContent = e.data;
-    console.log('Message reçu du worker');
-  }
- -

Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété ports de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} start() pour démarrer le port, et le gestionnaire onmessage pour s'occuper des messages en provenance des threads principaux.

- -
onconnect = function(e) {
-    var port = e.ports[0];
-
-    port.onmessage = function(e) {
-      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
-      port.postMessage(workerResult);
-    }
-
-    port.start();
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}{{Spec2('HTML WHATWG')}}Aucune modification de {{SpecName("Web Workers")}}.
- -

Compatibilité des navigateurs

- -

{{Compat("api.SharedWorker")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/sharedworker/index.md b/files/fr/web/api/sharedworker/index.md new file mode 100644 index 0000000000..1e5e6b0351 --- /dev/null +++ b/files/fr/web/api/sharedworker/index.md @@ -0,0 +1,114 @@ +--- +title: SharedWorker +slug: Web/API/SharedWorker +tags: + - API + - Interface + - Reference + - Shared + - SharedWorker + - Worker +translation_of: Web/API/SharedWorker +--- +
{{APIRef("Web Workers API")}}
+ +

L'interface SharedWorker représente un type spécifique de worker qui peut être accédé à partir de plusieurs contextes de navigation, tels que plusieurs fenêtres, iframes ou même workers. Ils implémentent une autre interface que les workers dédiés et ont un contexte global différent, {{domxref("SharedWorkerGlobalScope")}}.

+ +
+

Note : Si un SharedWorker peut être accédé à partir de plusieurs contextes de navigation, tous ces contextes de navigation doivent partager exactement la même origine (même protocole, hôte et port.)

+
+ +

Constructeurs

+ +
+
{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}
+
Crée un web worker partagé qui exécute le script spécifié par l'URL.
+
+ +

Propriétés

+ +

Il hérite des propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Est un {{ domxref("EventListener") }} qui est appelé à chaque fois qu'un {{domxref("ErrorEvent")}} de type error se propage à travers le worker.
+
{{domxref("SharedWorker.port")}} {{readonlyInline}}
+
Retourne un objet {{domxref("MessagePort")}} utilisé pour communiquer et contrôler le worker partagé.
+
+ +
+
+ +

Méthodes

+ +

Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente les méthodes de {{domxref("AbstractWorker")}}.

+ +

Exemple

+ +

Dans notre  Exemple basique d'un worker partagé (lancer le worker partagé), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes.

+ +

L'extrait de code suivant illustre la création d'un objet SharedWorker en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :

+ +
var myWorker = new SharedWorker("worker.js");
+ +

Les deux scripts accèdent alors au worker à travers un objet {{domxref("MessagePort")}} créé en utilisant la propriété {{domxref("SharedWorker.port")}} — le port est démarré au moyen de sa méthode start() :

+ +
myWorker.port.start();
+ +

Lorsque le port est démarré, les deux scripts envoient des messages au worker et gèrent les messages qu'il renvoie en utilisant respectivement port.postMessage() et port.onmessage :

+ +
first.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message envoyé au worker');
+  }
+
+  second.onchange = function() {
+    myWorker.port.postMessage([first.value,second.value]);
+    console.log('Message envoyé au worker');
+  }
+
+  myWorker.port.onmessage = function(e) {
+    result1.textContent = e.data;
+    console.log('Message reçu du worker');
+  }
+ +

Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété ports de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} start() pour démarrer le port, et le gestionnaire onmessage pour s'occuper des messages en provenance des threads principaux.

+ +
onconnect = function(e) {
+    var port = e.ports[0];
+
+    port.onmessage = function(e) {
+      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+      port.postMessage(workerResult);
+    }
+
+    port.start();
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}{{Spec2('HTML WHATWG')}}Aucune modification de {{SpecName("Web Workers")}}.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.SharedWorker")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/sharedworker/port/index.html b/files/fr/web/api/sharedworker/port/index.html deleted file mode 100644 index 22bd830ee7..0000000000 --- a/files/fr/web/api/sharedworker/port/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: SharedWorker.port -slug: Web/API/SharedWorker/port -translation_of: Web/API/SharedWorker/port ---- -
{{APIRef("Web Workers API")}}
- -

La propriété port de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le worker partagé.

- -

Syntaxe

- -
myWorker.port;
- -

Valeur

- -

Un objet {{domxref("MessagePort")}}.

- -

Exemple

- -

L'exemple de code suivant montre la création de l'objet SharedWorker en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Plusieurs scriptes peuvent accéder au worker avec l'objet {{domxref("MessagePort")}} accessible grâce à la propriété SharedWorker.port — le port est ouvert avec la méthode start().

- -
var myWorker = new SharedWorker('worker.js');
-myWorker.port.start();
- -

Pour un exemple complet, voir (en) Exemple basique de worker partagé ((en) démonstration d'un worker partagé.)

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationsStatusCommentaire
{{SpecName('HTML WHATWG', "#dom-sharedworker-port", "AbstractWorker.onerror")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.SharedWorker.port")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/sharedworker/port/index.md b/files/fr/web/api/sharedworker/port/index.md new file mode 100644 index 0000000000..22bd830ee7 --- /dev/null +++ b/files/fr/web/api/sharedworker/port/index.md @@ -0,0 +1,55 @@ +--- +title: SharedWorker.port +slug: Web/API/SharedWorker/port +translation_of: Web/API/SharedWorker/port +--- +
{{APIRef("Web Workers API")}}
+ +

La propriété port de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le worker partagé.

+ +

Syntaxe

+ +
myWorker.port;
+ +

Valeur

+ +

Un objet {{domxref("MessagePort")}}.

+ +

Exemple

+ +

L'exemple de code suivant montre la création de l'objet SharedWorker en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Plusieurs scriptes peuvent accéder au worker avec l'objet {{domxref("MessagePort")}} accessible grâce à la propriété SharedWorker.port — le port est ouvert avec la méthode start().

+ +
var myWorker = new SharedWorker('worker.js');
+myWorker.port.start();
+ +

Pour un exemple complet, voir (en) Exemple basique de worker partagé ((en) démonstration d'un worker partagé.)

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationsStatusCommentaire
{{SpecName('HTML WHATWG', "#dom-sharedworker-port", "AbstractWorker.onerror")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.SharedWorker.port")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/sharedworker/sharedworker/index.html b/files/fr/web/api/sharedworker/sharedworker/index.html deleted file mode 100644 index c4c35fb16d..0000000000 --- a/files/fr/web/api/sharedworker/sharedworker/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: SharedWorker() -slug: Web/API/SharedWorker/SharedWorker -translation_of: Web/API/SharedWorker/SharedWorker ---- -
{{APIRef("Web Workers API")}}
- -

Le constructeur SharedWorker() crée un objet {{domxref("SharedWorker")}} qui exécute le script depuis l'URL indiquée. Le script doit respecter la politique de même origine.

- -
-

Note : Il y a désaccord entre les fabricants de navigateur pour savoir si l'URI doit avoir la même origine ou non. Bien que Gecko 10.0 {{geckoRelease("10.0")}} et les version supérieurs acceptent des origines différentes, ce n'est pas le cas des autres navigateurs.

-
- -

Syntaxe

- -
var monWorker = new SharedWorker(uneURL, nom);
-var monWorker = new SharedWorker(uneURL, options);
- -

Paramètre

- -
-
uneURL
-
Une {{domxref("DOMString")}} qui représente l'URL du scripte du worker qui sera exécuté. Il doit obéir à la politique de même origine.
-
nom {{optional_inline}}
-
Une {{domxref("DOMString")}} indiquant un nom pour le {{domxref("SharedWorkerGlobalScope")}} représentant la portée du worker. Souvent utilisé pour le débogage.
-
options {{optional_inline}}
-
Une objet contenant les propriétés qui peuvent être défini à la création. Les propriété possibles sont: -
    -
  • type: Une {{domxref("DOMString")}} spécifiant le type de worker à créer. Les valeurs possibles sont: classic ou module. Si non spécifié, la valeur par défaut est classic.
    • -
  • credentials: Une {{domxref("DOMString")}} spécifiant le type de crédit à utilisé pour le worker. La valeur peut être omit, same-origin ou include. Si non spécifié ou si le type est classic, la valeur par défaut sera omit (pas de crédit nécéssaire).
    • -
  • name: Une {{domxref("DOMString")}} spécifiant un identifiant pour le {{domxref("SharedWorkerGlobalScope")}} représentant la porté du worker, souvent utilisé pour déboguer.
    • -
-
-
- -

Valeur retournée

- -

Le woker créé.

- -

Exceptions

- - - -

Exemple

- -

L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} en utilisant le contructeur SharedWorker() et l'usage qui en est fait.

- -
var myWorker = new SharedWorker('worker.js');
-
-myWorker.port.start();
-
-first.onchange = function() {
-  myWorker.port.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
-
-second.onchange = function() {
-  myWorker.port.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
-
-myWorker.port.onmessage = function(e) {
-  result1.textContent = e.data;
-  console.log('Message received from worker');
-}
- -

Pour l'exemple en complet, voir Basic shared worker example (run shared worker.)

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutsCommentaire
{{SpecName('HTML WHATWG', "#dom-sharedworker", "SharedWorker()")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.SharedWorker.SharedWorker")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/sharedworker/sharedworker/index.md b/files/fr/web/api/sharedworker/sharedworker/index.md new file mode 100644 index 0000000000..c4c35fb16d --- /dev/null +++ b/files/fr/web/api/sharedworker/sharedworker/index.md @@ -0,0 +1,101 @@ +--- +title: SharedWorker() +slug: Web/API/SharedWorker/SharedWorker +translation_of: Web/API/SharedWorker/SharedWorker +--- +
{{APIRef("Web Workers API")}}
+ +

Le constructeur SharedWorker() crée un objet {{domxref("SharedWorker")}} qui exécute le script depuis l'URL indiquée. Le script doit respecter la politique de même origine.

+ +
+

Note : Il y a désaccord entre les fabricants de navigateur pour savoir si l'URI doit avoir la même origine ou non. Bien que Gecko 10.0 {{geckoRelease("10.0")}} et les version supérieurs acceptent des origines différentes, ce n'est pas le cas des autres navigateurs.

+
+ +

Syntaxe

+ +
var monWorker = new SharedWorker(uneURL, nom);
+var monWorker = new SharedWorker(uneURL, options);
+ +

Paramètre

+ +
+
uneURL
+
Une {{domxref("DOMString")}} qui représente l'URL du scripte du worker qui sera exécuté. Il doit obéir à la politique de même origine.
+
nom {{optional_inline}}
+
Une {{domxref("DOMString")}} indiquant un nom pour le {{domxref("SharedWorkerGlobalScope")}} représentant la portée du worker. Souvent utilisé pour le débogage.
+
options {{optional_inline}}
+
Une objet contenant les propriétés qui peuvent être défini à la création. Les propriété possibles sont: +
    +
  • type: Une {{domxref("DOMString")}} spécifiant le type de worker à créer. Les valeurs possibles sont: classic ou module. Si non spécifié, la valeur par défaut est classic.
    • +
  • credentials: Une {{domxref("DOMString")}} spécifiant le type de crédit à utilisé pour le worker. La valeur peut être omit, same-origin ou include. Si non spécifié ou si le type est classic, la valeur par défaut sera omit (pas de crédit nécéssaire).
    • +
  • name: Une {{domxref("DOMString")}} spécifiant un identifiant pour le {{domxref("SharedWorkerGlobalScope")}} représentant la porté du worker, souvent utilisé pour déboguer.
    • +
+
+
+ +

Valeur retournée

+ +

Le woker créé.

+ +

Exceptions

+ + + +

Exemple

+ +

L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} en utilisant le contructeur SharedWorker() et l'usage qui en est fait.

+ +
var myWorker = new SharedWorker('worker.js');
+
+myWorker.port.start();
+
+first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

Pour l'exemple en complet, voir Basic shared worker example (run shared worker.)

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutsCommentaire
{{SpecName('HTML WHATWG', "#dom-sharedworker", "SharedWorker()")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.SharedWorker.SharedWorker")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html deleted file mode 100644 index 7440932b75..0000000000 --- a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: SharedWorkerGlobalScope.applicationCache -slug: Web/API/SharedWorkerGlobalScope/applicationCache -translation_of: Web/API/SharedWorkerGlobalScope/applicationCache ---- -
{{APIRef("Web Workers API")}}
- -
-

Attention : Application Cache est déprécié depuis Firefox 44, et ne sera plus disponible dans des contextes non sécurisés avant Firefox 60 ({{bug(1354175)}}, currently uniquement sur les versions Nightly/Beta). Ne pas utiliser cette fonctionnalité sur des sites web en production, utilisez plutôt les services workers.

-
- -

La propriété en lecture seule applicationCache de l'interface {{domxref("SharedWorkerGlobalScope")}} retourne l'objet {{domxref("ApplicationCache")}} pour le worker (voir Utiliser le cache d'application).

- -

Syntaxe

- -
var nameObj = self.applicationCache;
- -

valeur

- -

Un {{domxref("ApplicationCache")}}.

- -

Exemple

- -

Si un worker partagé a un AppCache, vous pouvez récupérer une référence en utilisant à l'intérieur d'un worker partagé:

- -
self.applicationCache
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.SharedWorkerGlobalScope.applicationCache")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.md b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.md new file mode 100644 index 0000000000..7440932b75 --- /dev/null +++ b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.md @@ -0,0 +1,38 @@ +--- +title: SharedWorkerGlobalScope.applicationCache +slug: Web/API/SharedWorkerGlobalScope/applicationCache +translation_of: Web/API/SharedWorkerGlobalScope/applicationCache +--- +
{{APIRef("Web Workers API")}}
+ +
+

Attention : Application Cache est déprécié depuis Firefox 44, et ne sera plus disponible dans des contextes non sécurisés avant Firefox 60 ({{bug(1354175)}}, currently uniquement sur les versions Nightly/Beta). Ne pas utiliser cette fonctionnalité sur des sites web en production, utilisez plutôt les services workers.

+
+ +

La propriété en lecture seule applicationCache de l'interface {{domxref("SharedWorkerGlobalScope")}} retourne l'objet {{domxref("ApplicationCache")}} pour le worker (voir Utiliser le cache d'application).

+ +

Syntaxe

+ +
var nameObj = self.applicationCache;
+ +

valeur

+ +

Un {{domxref("ApplicationCache")}}.

+ +

Exemple

+ +

Si un worker partagé a un AppCache, vous pouvez récupérer une référence en utilisant à l'intérieur d'un worker partagé:

+ +
self.applicationCache
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.SharedWorkerGlobalScope.applicationCache")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/sharedworkerglobalscope/index.html b/files/fr/web/api/sharedworkerglobalscope/index.html deleted file mode 100644 index d3887aafa0..0000000000 --- a/files/fr/web/api/sharedworkerglobalscope/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: SharedWorkerGlobalScope -slug: Web/API/SharedWorkerGlobalScope -tags: - - API - - Interface - - NeedsTranslation - - Reference - - SharedWorkerGlobalScope - - TopicStub - - Web Workers -translation_of: Web/API/SharedWorkerGlobalScope ---- -
{{APIRef("Web Workers API")}}
- -

The SharedWorkerGlobalScope object (the {{domxref("SharedWorker")}} global scope) is accessible through the {{domxref("window.self","self")}} keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the JavaScript Reference. See the complete list of functions available to workers.

- -

Properties

- -

This interface inherits properties from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

- -
-
{{domxref("SharedWorkerGlobalScope.name")}} {{readOnlyinline}}
-
The name that the {{domxref("SharedWorker")}} was (optionally) given when it was created using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. This is mainly useful for debugging purposes.
-
{{domxref("SharedWorkerGlobalScope.applicationCache")}} {{readOnlyinline}} {{deprecated_inline}}
-
This property returns the {{domxref("ApplicationCache")}} object for the worker (see Using the application cache).
-
- -

Properties inherited from WorkerGlobalScope

- -
-
{{domxref("WorkerGlobalScope.self")}}
-
Returns an object reference to the DedicatedWorkerGlobalScope object itself.
-
{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}
-
Returns the {{domxref("Console")}} associated with the worker.
-
{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
-
Returns the {{domxref("WorkerLocation")}} associated with the worker. WorkerLocation is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.
-
{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
-
Returns the {{domxref("WorkerNavigator")}} associated with the worker. WorkerNavigator is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.
-
{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
-
Returns the {{domxref("Performance")}} object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available.
-
- -

Event handlers

- -

This interface inherits event handlers from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

- -
-
{{domxref("SharedWorkerGlobalScope.onconnect")}}
-
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("connect")}} event is raised — that is, when a {{domxref("MessagePort")}} connection is opened between the associated {{domxref("SharedWorker")}} and the main thread.
-
- -

Methods

- -

This interface inherits methods from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

- -
-
{{domxref("SharedWorkerGlobalScope.close()")}}
-
Discards any tasks queued in the SharedWorkerGlobalScope's event loop, effectively closing this particular scope.
-
- -

Inherited from WorkerGlobalScope

- -
-
{{domxref("WorkerGlobalScope.close()")}} {{deprecated_inline}}
-
Discards any tasks queued in the WorkerGlobalScope's event loop, effectively closing this particular scope.
-
{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
-
Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.
-
{{domxref("WorkerGlobalScope.importScripts()")}}
-
Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example: importScripts('foo.js', 'bar.js');
-
- -

Implemented from other places

- -
-
{{domxref("WindowBase64.atob()")}}
-
Decodes a string of data which has been encoded using base-64 encoding.
-
{{domxref("WindowBase64.btoa()")}}
-
Creates a base-64 encoded ASCII string from a string of binary data.
-
{{domxref("WindowTimers.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
-
{{domxref("WindowTimers.setInterval()")}}
-
Schedules the execution of a function every X milliseconds.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Sets a delay for executing a function.
-
- -

Events

- -

Listen to this event using addEventListener() or by assigning an event listener to the oneventname property of this interface.

- -
-
connect
-
Fired on shared workers when a new client connects.
- Also available via the onconnect property.
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#sharedworkerglobalscope', 'SharedWorkerGlobalScope')}}{{Spec2('HTML WHATWG')}}
- -

Browser compatibility

- - - -

{{Compat("api.SharedWorkerGlobalScope")}}

- -

See also

- - diff --git a/files/fr/web/api/sharedworkerglobalscope/index.md b/files/fr/web/api/sharedworkerglobalscope/index.md new file mode 100644 index 0000000000..d3887aafa0 --- /dev/null +++ b/files/fr/web/api/sharedworkerglobalscope/index.md @@ -0,0 +1,132 @@ +--- +title: SharedWorkerGlobalScope +slug: Web/API/SharedWorkerGlobalScope +tags: + - API + - Interface + - NeedsTranslation + - Reference + - SharedWorkerGlobalScope + - TopicStub + - Web Workers +translation_of: Web/API/SharedWorkerGlobalScope +--- +
{{APIRef("Web Workers API")}}
+ +

The SharedWorkerGlobalScope object (the {{domxref("SharedWorker")}} global scope) is accessible through the {{domxref("window.self","self")}} keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the JavaScript Reference. See the complete list of functions available to workers.

+ +

Properties

+ +

This interface inherits properties from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("SharedWorkerGlobalScope.name")}} {{readOnlyinline}}
+
The name that the {{domxref("SharedWorker")}} was (optionally) given when it was created using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. This is mainly useful for debugging purposes.
+
{{domxref("SharedWorkerGlobalScope.applicationCache")}} {{readOnlyinline}} {{deprecated_inline}}
+
This property returns the {{domxref("ApplicationCache")}} object for the worker (see Using the application cache).
+
+ +

Properties inherited from WorkerGlobalScope

+ +
+
{{domxref("WorkerGlobalScope.self")}}
+
Returns an object reference to the DedicatedWorkerGlobalScope object itself.
+
{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}
+
Returns the {{domxref("Console")}} associated with the worker.
+
{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
+
Returns the {{domxref("WorkerLocation")}} associated with the worker. WorkerLocation is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.
+
{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
+
Returns the {{domxref("WorkerNavigator")}} associated with the worker. WorkerNavigator is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.
+
{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
+
Returns the {{domxref("Performance")}} object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available.
+
+ +

Event handlers

+ +

This interface inherits event handlers from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("SharedWorkerGlobalScope.onconnect")}}
+
Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("connect")}} event is raised — that is, when a {{domxref("MessagePort")}} connection is opened between the associated {{domxref("SharedWorker")}} and the main thread.
+
+ +

Methods

+ +

This interface inherits methods from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("SharedWorkerGlobalScope.close()")}}
+
Discards any tasks queued in the SharedWorkerGlobalScope's event loop, effectively closing this particular scope.
+
+ +

Inherited from WorkerGlobalScope

+ +
+
{{domxref("WorkerGlobalScope.close()")}} {{deprecated_inline}}
+
Discards any tasks queued in the WorkerGlobalScope's event loop, effectively closing this particular scope.
+
{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
+
Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.
+
{{domxref("WorkerGlobalScope.importScripts()")}}
+
Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example: importScripts('foo.js', 'bar.js');
+
+ +

Implemented from other places

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function every X milliseconds.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
+ +

Events

+ +

Listen to this event using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
connect
+
Fired on shared workers when a new client connects.
+ Also available via the onconnect property.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#sharedworkerglobalscope', 'SharedWorkerGlobalScope')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.SharedWorkerGlobalScope")}}

+ +

See also

+ + diff --git a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html deleted file mode 100644 index 88b05cd2d7..0000000000 --- a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: SharedWorkerGlobalScope.onconnect -slug: Web/API/SharedWorkerGlobalScope/onconnect -translation_of: Web/API/SharedWorkerGlobalScope/onconnect ---- -

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

- -

La proriété onconnect de l'interface {{domxref("SharedWorkerGlobalScope")}} est un gestionnaire d'évènement pour l'évènement {{event("connect")}}, c'est à dire quand une connexion {{domxref("MessagePort")}} est ouverte entre le {{domxref("SharedWorker")}} et le thread principale.

- -

Syntaxe

- -
onconnect = function() { ... };
- -

Exemple

- -

Cet exemple montre le gestionnaire d'évènement onconnect quand une connection depuis le thread principal vers un fichier de worker partagé via un {{domxref("MessagePort")}}. L'objet évènement est un {{domxref("MessageEvent")}}.

- -

Le port de connexion peut-être récupéré avec la propriété ports de l'objet évènement. Le port a un gestionnaire d'évènement onmessage pour gérer les évènement venant de cet port et la méthode postMessage() peut-être utilisée pour répondre au thread principale qui utilise le worker.

- -
onconnect = function(e) {
-    var port = e.ports[0];
-
-    port.onmessage = function(e) {
-      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
-      port.postMessage(workerResult);
-    }
-
-    port.start();
-}
- -

Pour l'exemple complet en fonctionnement, voir Basic shared worker example (run shared worker.)

- -
-

Note : La propriété data de l'objet évènement est null dans Firefox. À partir de la version 65, elle est initialisée comme une chaîne vide, selon les spécifications ({{bug(1508824)}}).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', '#handler-sharedworkerglobalscope-onconnect', 'onconnect')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.SharedWorkerGlobalScope.onconnect")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.md b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.md new file mode 100644 index 0000000000..88b05cd2d7 --- /dev/null +++ b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.md @@ -0,0 +1,64 @@ +--- +title: SharedWorkerGlobalScope.onconnect +slug: Web/API/SharedWorkerGlobalScope/onconnect +translation_of: Web/API/SharedWorkerGlobalScope/onconnect +--- +

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

+ +

La proriété onconnect de l'interface {{domxref("SharedWorkerGlobalScope")}} est un gestionnaire d'évènement pour l'évènement {{event("connect")}}, c'est à dire quand une connexion {{domxref("MessagePort")}} est ouverte entre le {{domxref("SharedWorker")}} et le thread principale.

+ +

Syntaxe

+ +
onconnect = function() { ... };
+ +

Exemple

+ +

Cet exemple montre le gestionnaire d'évènement onconnect quand une connection depuis le thread principal vers un fichier de worker partagé via un {{domxref("MessagePort")}}. L'objet évènement est un {{domxref("MessageEvent")}}.

+ +

Le port de connexion peut-être récupéré avec la propriété ports de l'objet évènement. Le port a un gestionnaire d'évènement onmessage pour gérer les évènement venant de cet port et la méthode postMessage() peut-être utilisée pour répondre au thread principale qui utilise le worker.

+ +
onconnect = function(e) {
+    var port = e.ports[0];
+
+    port.onmessage = function(e) {
+      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+      port.postMessage(workerResult);
+    }
+
+    port.start();
+}
+ +

Pour l'exemple complet en fonctionnement, voir Basic shared worker example (run shared worker.)

+ +
+

Note : La propriété data de l'objet évènement est null dans Firefox. À partir de la version 65, elle est initialisée comme une chaîne vide, selon les spécifications ({{bug(1508824)}}).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', '#handler-sharedworkerglobalscope-onconnect', 'onconnect')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.SharedWorkerGlobalScope.onconnect")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/speechrecognition/index.html b/files/fr/web/api/speechrecognition/index.html deleted file mode 100644 index 60b7ce9ab6..0000000000 --- a/files/fr/web/api/speechrecognition/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: SpeechRecognition -slug: Web/API/SpeechRecognition -translation_of: Web/API/SpeechRecognition ---- -

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

- -

SpeechRecognition est l'interface contrôleur du service de reconnaissance de la Web Speech API; elle gère également les {{domxref("SpeechRecognitionEvent")}} envoyés par le service de reconnaissance.

- -

Constructeur

- -
-
{{domxref("SpeechRecognition.SpeechRecognition()")}}
-
Crée un nouvel objet SpeechRecognition
-
- -

Propriétés

- -

SpeechRecognition hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.

- -
-
{{domxref("SpeechRecognition.grammars")}}
-
Retourne et définit une collection d'objets {{domxref("SpeechGrammar")}} représentant les grammaires qui seront comprises par SpeechRecognition.
-
{{domxref("SpeechRecognition.lang")}}
-
Retourne et définit la langue de  SpeechRecognition. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus.
-
{{domxref("SpeechRecognition.continuous")}}
-
Contrôle si la reconnaissance est continue, ou retourne seulement un seul résultat. Par défaut retourne un seul résultat (false.)
-
{{domxref("SpeechRecognition.interimResults")}}
-
Contrôle si les résultats intermédiaires doivent être retournés (true) ou pas (false.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}}  est false.)
-
{{domxref("SpeechRecognition.maxAlternatives")}}
-
Règle le nombre maximum de {{domxref("SpeechRecognitionAlternative")}} (d'alternatives) fourni par résultat. La valeur par défaut est 1.
-
{{domxref("SpeechRecognition.serviceURI")}}
-
Spécifie l'emplacement du service de reconnaissance vocale utilisé par SpeechRecognition pour traiter la reconnaissance proprement dite. La valeur par défaut le chemin par défaut du user agent.
-
- -

Event handlers

- -
-
{{domxref("SpeechRecognition.onaudiostart")}}
-
Déclenché lorsque l'agent utilisateur commence à capturer le son.
-
{{domxref("SpeechRecognition.onaudioend")}}
-
Déclenché lorsque l'agent utilisateur a terminé la capture audio.
-
{{domxref("SpeechRecognition.onend")}}
-
Déclenché lorsque le service de reconnaissance vocale est déconnecté.
-
{{domxref("SpeechRecognition.onerror")}}
-
Déclenché en cas d'erreur de reconnaissance vocale.
-
{{domxref("SpeechRecognition.onnomatch")}}
-
Déclenché lorsque le service de reconnaissance vocale retourne un résultat final sans concordance significative. Il peut s'agir d'un certain degré de reconnaissance, qui ne correspond pas ou ne dépasse le seuil de {{domxref("SpeechRecognitionAlternative.confidence","confidence")}}.
-
{{domxref("SpeechRecognition.onresult")}}
-
Déclenché lorsque le service de reconnaissance vocale retourne un résultat - un mot ou une expression a donc été reconnu(e) positivement et cela a été communiqué à l'application.
-
{{domxref("SpeechRecognition.onsoundstart")}}
-
Déclenché lorsqu'un son - parole reconnaissable ou non - a été détecté.
-
{{domxref("SpeechRecognition.onsoundend")}}
-
Déclenché lorsque le son - parole reconnaissable ou non - n'est plus détecté.
-
{{domxref("SpeechRecognition.onspeechstart")}}
-
Déclenché lorsque du son à été reconnu par le service de reconnaissance vocale comme de la parole.
-
{{domxref("SpeechRecognition.onspeechend")}}
-
Déclenché lorsque la parole reconnue par le service de reconnaissance vocale a cesse d'être détectée.
-
{{domxref("SpeechRecognition.onstart")}}
-
Déclenché lorsque le service de reconnaissance vocale commence à écouter l'audio entrant, dans le but de reconnaître les grammaires associées à la (reconnaissance vocale) SpeechRecognition actuelle.
-
- -

Methods

- -

SpeechRecognition also inherits methods from its parent interface, {{domxref("EventTarget")}}.

- -
-
{{domxref("SpeechRecognition.abort()")}}
-
Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.
-
{{domxref("SpeechRecognition.start()")}}
-
Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
-
{{domxref("SpeechRecognition.stop()")}}
-
Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.
-
- -

Examples

- -

In our simple Speech color changer example, we create a new SpeechRecognition object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the SpeechRecognition instance using the {{domxref("SpeechRecognition.grammars")}} property.

- -

After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires,  we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.

- -
var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
-var recognition = new SpeechRecognition();
-var speechRecognitionList = new SpeechGrammarList();
-speechRecognitionList.addFromString(grammar, 1);
-recognition.grammars = speechRecognitionList;
-//recognition.continuous = false;
-recognition.lang = 'en-US';
-recognition.interimResults = false;
-recognition.maxAlternatives = 1;
-
-var diagnostic = document.querySelector('.output');
-var bg = document.querySelector('html');
-
-document.body.onclick = function() {
-  recognition.start();
-  console.log('Ready to receive a color command.');
-}
-
-recognition.onresult = function(event) {
-  var color = event.results[0][0].transcript;
-  diagnostic.textContent = 'Result received: ' + color;
-  bg.style.backgroundColor = color;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}{{Spec2('Web Speech API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.SpeechRecognition")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/speechrecognition/index.md b/files/fr/web/api/speechrecognition/index.md new file mode 100644 index 0000000000..60b7ce9ab6 --- /dev/null +++ b/files/fr/web/api/speechrecognition/index.md @@ -0,0 +1,133 @@ +--- +title: SpeechRecognition +slug: Web/API/SpeechRecognition +translation_of: Web/API/SpeechRecognition +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

SpeechRecognition est l'interface contrôleur du service de reconnaissance de la Web Speech API; elle gère également les {{domxref("SpeechRecognitionEvent")}} envoyés par le service de reconnaissance.

+ +

Constructeur

+ +
+
{{domxref("SpeechRecognition.SpeechRecognition()")}}
+
Crée un nouvel objet SpeechRecognition
+
+ +

Propriétés

+ +

SpeechRecognition hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechRecognition.grammars")}}
+
Retourne et définit une collection d'objets {{domxref("SpeechGrammar")}} représentant les grammaires qui seront comprises par SpeechRecognition.
+
{{domxref("SpeechRecognition.lang")}}
+
Retourne et définit la langue de  SpeechRecognition. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus.
+
{{domxref("SpeechRecognition.continuous")}}
+
Contrôle si la reconnaissance est continue, ou retourne seulement un seul résultat. Par défaut retourne un seul résultat (false.)
+
{{domxref("SpeechRecognition.interimResults")}}
+
Contrôle si les résultats intermédiaires doivent être retournés (true) ou pas (false.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}}  est false.)
+
{{domxref("SpeechRecognition.maxAlternatives")}}
+
Règle le nombre maximum de {{domxref("SpeechRecognitionAlternative")}} (d'alternatives) fourni par résultat. La valeur par défaut est 1.
+
{{domxref("SpeechRecognition.serviceURI")}}
+
Spécifie l'emplacement du service de reconnaissance vocale utilisé par SpeechRecognition pour traiter la reconnaissance proprement dite. La valeur par défaut le chemin par défaut du user agent.
+
+ +

Event handlers

+ +
+
{{domxref("SpeechRecognition.onaudiostart")}}
+
Déclenché lorsque l'agent utilisateur commence à capturer le son.
+
{{domxref("SpeechRecognition.onaudioend")}}
+
Déclenché lorsque l'agent utilisateur a terminé la capture audio.
+
{{domxref("SpeechRecognition.onend")}}
+
Déclenché lorsque le service de reconnaissance vocale est déconnecté.
+
{{domxref("SpeechRecognition.onerror")}}
+
Déclenché en cas d'erreur de reconnaissance vocale.
+
{{domxref("SpeechRecognition.onnomatch")}}
+
Déclenché lorsque le service de reconnaissance vocale retourne un résultat final sans concordance significative. Il peut s'agir d'un certain degré de reconnaissance, qui ne correspond pas ou ne dépasse le seuil de {{domxref("SpeechRecognitionAlternative.confidence","confidence")}}.
+
{{domxref("SpeechRecognition.onresult")}}
+
Déclenché lorsque le service de reconnaissance vocale retourne un résultat - un mot ou une expression a donc été reconnu(e) positivement et cela a été communiqué à l'application.
+
{{domxref("SpeechRecognition.onsoundstart")}}
+
Déclenché lorsqu'un son - parole reconnaissable ou non - a été détecté.
+
{{domxref("SpeechRecognition.onsoundend")}}
+
Déclenché lorsque le son - parole reconnaissable ou non - n'est plus détecté.
+
{{domxref("SpeechRecognition.onspeechstart")}}
+
Déclenché lorsque du son à été reconnu par le service de reconnaissance vocale comme de la parole.
+
{{domxref("SpeechRecognition.onspeechend")}}
+
Déclenché lorsque la parole reconnue par le service de reconnaissance vocale a cesse d'être détectée.
+
{{domxref("SpeechRecognition.onstart")}}
+
Déclenché lorsque le service de reconnaissance vocale commence à écouter l'audio entrant, dans le but de reconnaître les grammaires associées à la (reconnaissance vocale) SpeechRecognition actuelle.
+
+ +

Methods

+ +

SpeechRecognition also inherits methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechRecognition.abort()")}}
+
Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.
+
{{domxref("SpeechRecognition.start()")}}
+
Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
+
{{domxref("SpeechRecognition.stop()")}}
+
Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.
+
+ +

Examples

+ +

In our simple Speech color changer example, we create a new SpeechRecognition object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the SpeechRecognition instance using the {{domxref("SpeechRecognition.grammars")}} property.

+ +

After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires,  we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.

+ +
var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+
+var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+
+recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color;
+  bg.style.backgroundColor = color;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}{{Spec2('Web Speech API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.SpeechRecognition")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/speechsynthesisutterance/index.html b/files/fr/web/api/speechsynthesisutterance/index.html deleted file mode 100644 index e593459ab5..0000000000 --- a/files/fr/web/api/speechsynthesisutterance/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: SpeechSynthesisUtterance -slug: Web/API/SpeechSynthesisUtterance -translation_of: Web/API/SpeechSynthesisUtterance ---- -

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

- -

L'interface SpeechSynthesisUtterance de l'API Web Speech représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume).

- -

Constructor

- -
-
{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}
-
Retourne une nouvelle instance de l'objet SpeechSynthesisUtterance.
-
- -

Properties

- -

SpeechSynthesisUtterance hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.

- -
-
{{domxref("SpeechSynthesisUtterance.lang")}}
-
Gets and sets the language of the utterance.
-
{{domxref("SpeechSynthesisUtterance.pitch")}}
-
Gets and sets the pitch at which the utterance will be spoken at.
-
{{domxref("SpeechSynthesisUtterance.rate")}}
-
Gets and sets the speed at which the utterance will be spoken at.
-
{{domxref("SpeechSynthesisUtterance.text")}}
-
Gets and sets the text that will be synthesised when the utterance is spoken.
-
{{domxref("SpeechSynthesisUtterance.voice")}}
-
Gets and sets the voice that will be used to speak the utterance.
-
{{domxref("SpeechSynthesisUtterance.volume")}}
-
Gets and sets the volume that the utterance will be spoken at.
-
- -

Event handlers

- -
-
{{domxref("SpeechSynthesisUtterance.onboundary")}}
-
Fired when the spoken utterance reaches a word or sentence boundary.
-
{{domxref("SpeechSynthesisUtterance.onend")}}
-
Fired when the utterance has finished being spoken.
-
{{domxref("SpeechSynthesisUtterance.onerror")}}
-
Fired when an error occurs that prevents the utterance from being succesfully spoken.
-
{{domxref("SpeechSynthesisUtterance.onmark")}}
-
Fired when the spoken utterance reaches a named SSML "mark" tag.
-
{{domxref("SpeechSynthesisUtterance.onpause")}}
-
Fired when the utterance is paused part way through.
-
{{domxref("SpeechSynthesisUtterance.onresume")}}
-
Fired when a paused utterance is resumed.
-
{{domxref("SpeechSynthesisUtterance.onstart")}}
-
Fired when the utterance has begun to be spoken.
-
- -

Examples

- -

Dans notre exemple basique de démonstration de synthèse vocale, nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant window.speechSynthesis.
- Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci.
- L'utilisateur pourra ensuite choisir la voix qu'il souhaite.
-
- À l'intérieur du handler inputForm.onsubmit :

- - - -
var synth = window.speechSynthesis;
-
-var inputForm = document.querySelector('form');
-var inputTxt = document.querySelector('input');
-var voiceSelect = document.querySelector('select');
-
-var voices = synth.getVoices();
-
-for(i = 0; i < voices.length ; i++) {
-  var option = document.createElement('option');
-  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
-  option.setAttribute('data-lang', voices[i].lang);
-  option.setAttribute('data-name', voices[i].name);
-  voiceSelect.appendChild(option);
-}
-
-inputForm.onsubmit = function(event) {
-  event.preventDefault();
-
-  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
-  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
-  for(i = 0; i < voices.length ; i++) {
-    if(voices[i].name === selectedOption) {
-      utterThis.voice = voices[i];
-    }
-  }
-  synth.speak(utterThis);
-  inputTxt.blur();
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}{{Spec2('Web Speech API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.SpeechSynthesisUtterance")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/speechsynthesisutterance/index.md b/files/fr/web/api/speechsynthesisutterance/index.md new file mode 100644 index 0000000000..e593459ab5 --- /dev/null +++ b/files/fr/web/api/speechsynthesisutterance/index.md @@ -0,0 +1,127 @@ +--- +title: SpeechSynthesisUtterance +slug: Web/API/SpeechSynthesisUtterance +translation_of: Web/API/SpeechSynthesisUtterance +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

L'interface SpeechSynthesisUtterance de l'API Web Speech représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume).

+ +

Constructor

+ +
+
{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}
+
Retourne une nouvelle instance de l'objet SpeechSynthesisUtterance.
+
+ +

Properties

+ +

SpeechSynthesisUtterance hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesisUtterance.lang")}}
+
Gets and sets the language of the utterance.
+
{{domxref("SpeechSynthesisUtterance.pitch")}}
+
Gets and sets the pitch at which the utterance will be spoken at.
+
{{domxref("SpeechSynthesisUtterance.rate")}}
+
Gets and sets the speed at which the utterance will be spoken at.
+
{{domxref("SpeechSynthesisUtterance.text")}}
+
Gets and sets the text that will be synthesised when the utterance is spoken.
+
{{domxref("SpeechSynthesisUtterance.voice")}}
+
Gets and sets the voice that will be used to speak the utterance.
+
{{domxref("SpeechSynthesisUtterance.volume")}}
+
Gets and sets the volume that the utterance will be spoken at.
+
+ +

Event handlers

+ +
+
{{domxref("SpeechSynthesisUtterance.onboundary")}}
+
Fired when the spoken utterance reaches a word or sentence boundary.
+
{{domxref("SpeechSynthesisUtterance.onend")}}
+
Fired when the utterance has finished being spoken.
+
{{domxref("SpeechSynthesisUtterance.onerror")}}
+
Fired when an error occurs that prevents the utterance from being succesfully spoken.
+
{{domxref("SpeechSynthesisUtterance.onmark")}}
+
Fired when the spoken utterance reaches a named SSML "mark" tag.
+
{{domxref("SpeechSynthesisUtterance.onpause")}}
+
Fired when the utterance is paused part way through.
+
{{domxref("SpeechSynthesisUtterance.onresume")}}
+
Fired when a paused utterance is resumed.
+
{{domxref("SpeechSynthesisUtterance.onstart")}}
+
Fired when the utterance has begun to be spoken.
+
+ +

Examples

+ +

Dans notre exemple basique de démonstration de synthèse vocale, nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant window.speechSynthesis.
+ Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci.
+ L'utilisateur pourra ensuite choisir la voix qu'il souhaite.
+
+ À l'intérieur du handler inputForm.onsubmit :

+ + + +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
+
+var voices = synth.getVoices();
+
+for(i = 0; i < voices.length ; i++) {
+  var option = document.createElement('option');
+  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+  option.setAttribute('data-lang', voices[i].lang);
+  option.setAttribute('data-name', voices[i].name);
+  voiceSelect.appendChild(option);
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i < voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  synth.speak(utterThis);
+  inputTxt.blur();
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}{{Spec2('Web Speech API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.SpeechSynthesisUtterance")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/storage/clear/index.html b/files/fr/web/api/storage/clear/index.html deleted file mode 100644 index c177f94657..0000000000 --- a/files/fr/web/api/storage/clear/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Storage.clear() -slug: Web/API/Storage/clear -tags: - - API - - Méthode - - Reference - - Stockage - - Stockage Web -translation_of: Web/API/Storage/clear ---- -

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

- -

La méthode clear() de l'interface {{domxref("Storage")}},  lorsqu'elle est invoquée, vide toutes les clés stockées.

- -

Syntaxe

- -
storage.clear();
- -

Retoune

- -

{{jsxref("undefined")}}

- -

Exemple

- -

La fonction suivante crée trois entrées de données dans le stockage local, puis les supprime en utilisant clear().

- -
function peuplerLeStockage() {
-  localStorage.setItem('bgcolor', 'red');
-  localStorage.setItem('font', 'Helvetica');
-  localStorage.setItem('image', 'monChat.png');
-
-  localStorage.clear();
-}
- -
-

Note : Pour voir un exemple réel, vous pouvez visitez notre Démo de stockage web. Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationÉtatCommentaire
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Storage.clear")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/storage/clear/index.md b/files/fr/web/api/storage/clear/index.md new file mode 100644 index 0000000000..c177f94657 --- /dev/null +++ b/files/fr/web/api/storage/clear/index.md @@ -0,0 +1,67 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +tags: + - API + - Méthode + - Reference + - Stockage + - Stockage Web +translation_of: Web/API/Storage/clear +--- +

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

+ +

La méthode clear() de l'interface {{domxref("Storage")}},  lorsqu'elle est invoquée, vide toutes les clés stockées.

+ +

Syntaxe

+ +
storage.clear();
+ +

Retoune

+ +

{{jsxref("undefined")}}

+ +

Exemple

+ +

La fonction suivante crée trois entrées de données dans le stockage local, puis les supprime en utilisant clear().

+ +
function peuplerLeStockage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'monChat.png');
+
+  localStorage.clear();
+}
+ +
+

Note : Pour voir un exemple réel, vous pouvez visitez notre Démo de stockage web. Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationÉtatCommentaire
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Storage.clear")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/storage/getitem/index.html b/files/fr/web/api/storage/getitem/index.html deleted file mode 100644 index 1e3f950436..0000000000 --- a/files/fr/web/api/storage/getitem/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Storage.getItem() -slug: Web/API/Storage/getItem -tags: - - API - - Méthode - - Stockage - - Stockage Web -translation_of: Web/API/Storage/getItem ---- -

{{APIRef("Web Storage API")}}
- La méthode getItem() de l'interface {{domxref("Storage")}} renvoie la valeur associée à la clé passée en paramètre.

- -

Syntax

- -
var aValue = storage.getItem(keyName);
-
- -

Paramètre

- -
-
keyName
-
Une {{domxref("DOMString")}} contenant le nom de la clé voulue.
-
- -

Renvoi

- -

Une {{domxref("DOMString")}} contenant la valeur de la clé. null est renvoyé si aucune correspondance n'est trouvée.

- -

Exemple

- -

La fonction suivante récupère trois élément du stockage local, puis réutilise les valeurs renvoyés afin de modifier le style de la page .

- -
function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
-
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
-
-  htmlElem.style.backgroundColor = '#' + currentColor;
-  pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
-}
- -
-

Note : Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre Demo de Stockage Web (en).

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Storage.getItem")}}

- -

Voir aussi

- -

Utilisation de l'API de stockage web

diff --git a/files/fr/web/api/storage/getitem/index.md b/files/fr/web/api/storage/getitem/index.md new file mode 100644 index 0000000000..1e3f950436 --- /dev/null +++ b/files/fr/web/api/storage/getitem/index.md @@ -0,0 +1,77 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +tags: + - API + - Méthode + - Stockage + - Stockage Web +translation_of: Web/API/Storage/getItem +--- +

{{APIRef("Web Storage API")}}
+ La méthode getItem() de l'interface {{domxref("Storage")}} renvoie la valeur associée à la clé passée en paramètre.

+ +

Syntax

+ +
var aValue = storage.getItem(keyName);
+
+ +

Paramètre

+ +
+
keyName
+
Une {{domxref("DOMString")}} contenant le nom de la clé voulue.
+
+ +

Renvoi

+ +

Une {{domxref("DOMString")}} contenant la valeur de la clé. null est renvoyé si aucune correspondance n'est trouvée.

+ +

Exemple

+ +

La fonction suivante récupère trois élément du stockage local, puis réutilise les valeurs renvoyés afin de modifier le style de la page .

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Note : Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre Demo de Stockage Web (en).

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Storage.getItem")}}

+ +

Voir aussi

+ +

Utilisation de l'API de stockage web

diff --git a/files/fr/web/api/storage/index.html b/files/fr/web/api/storage/index.html deleted file mode 100644 index ed862cb650..0000000000 --- a/files/fr/web/api/storage/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Storage -slug: Web/API/Storage -tags: - - API - - Interface - - Reference - - Stockage - - Storage -translation_of: Web/API/Storage ---- -
{{APIRef("Web Storage API")}}
- -

L'interface Storage de l'API Web Storage donne accès au stockage de session (SessionStorage) ou au stockage local (LocalStorage) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés.

- -

Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}.

- -

Propriétés

- -
-
{{domxref("Storage.length")}} {{readonlyInline}}
-
Renvoie un entier représentant le nombre d'éléments contenus dans l'objet Storage.
-
- -

Méthodes

- -
-
{{domxref("Storage.key()")}}
-
Lorsqu'on lui passe un nombre n, cette méthode renvoie le nom de la n-ième clé dans le stockage.
-
- -
-
{{domxref("Storage.getItem()")}}
-
Lorqu'on lui passe le nom d'une clé, cette méthode renvoie la valeur de la clé correspondante.
-
{{domxref("Storage.setItem()")}}
-
Lorqu'on lui passe un nom de clé et une valeur, cette méthode ajoute cette clé et cette valeur dans le stockage. Si la clé existe déjà, elle met à jour la valeur.
-
{{domxref("Storage.removeItem()")}}
-
Lorqu'on lui passe le nom d'une clé, cette méthode supprime cette clé du stockage.
-
{{domxref("Storage.clear()")}}
-
Lorsqu'elle est appelée, cette méthode supprime toutes les clés du stockage.
-
- -

Exemples

- -

Nous accédons ici à un objet Storage en appelant localStorage. Nous testons d'abord si le stockage local contient des éléments en utilisant !localStorage.getItem('bgcolor'). Si oui, nous exécutons une fonction appelée setStyles() qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée populateStorage(), qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute setStyles().

- -
if(!localStorage.getItem('bgcolor')) {
-  populateStorage();
-} else {
-  setStyles();
-}
-
-function populateStorage() {
-  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
-  localStorage.setItem('font', document.getElementById('font').value);
-  localStorage.setItem('image', document.getElementById('image').value);
-
-  setStyles();
-}
-
-function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
-
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
-
-  htmlElem.style.backgroundColor = '#' + currentColor;
-  pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Storage")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/storage/index.md b/files/fr/web/api/storage/index.md new file mode 100644 index 0000000000..ed862cb650 --- /dev/null +++ b/files/fr/web/api/storage/index.md @@ -0,0 +1,105 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - API + - Interface + - Reference + - Stockage + - Storage +translation_of: Web/API/Storage +--- +
{{APIRef("Web Storage API")}}
+ +

L'interface Storage de l'API Web Storage donne accès au stockage de session (SessionStorage) ou au stockage local (LocalStorage) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés.

+ +

Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}.

+ +

Propriétés

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Renvoie un entier représentant le nombre d'éléments contenus dans l'objet Storage.
+
+ +

Méthodes

+ +
+
{{domxref("Storage.key()")}}
+
Lorsqu'on lui passe un nombre n, cette méthode renvoie le nom de la n-ième clé dans le stockage.
+
+ +
+
{{domxref("Storage.getItem()")}}
+
Lorqu'on lui passe le nom d'une clé, cette méthode renvoie la valeur de la clé correspondante.
+
{{domxref("Storage.setItem()")}}
+
Lorqu'on lui passe un nom de clé et une valeur, cette méthode ajoute cette clé et cette valeur dans le stockage. Si la clé existe déjà, elle met à jour la valeur.
+
{{domxref("Storage.removeItem()")}}
+
Lorqu'on lui passe le nom d'une clé, cette méthode supprime cette clé du stockage.
+
{{domxref("Storage.clear()")}}
+
Lorsqu'elle est appelée, cette méthode supprime toutes les clés du stockage.
+
+ +

Exemples

+ +

Nous accédons ici à un objet Storage en appelant localStorage. Nous testons d'abord si le stockage local contient des éléments en utilisant !localStorage.getItem('bgcolor'). Si oui, nous exécutons une fonction appelée setStyles() qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée populateStorage(), qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute setStyles().

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Storage")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/storage/key/index.html b/files/fr/web/api/storage/key/index.html deleted file mode 100644 index 97e9160b4c..0000000000 --- a/files/fr/web/api/storage/key/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Storage.key() -slug: Web/API/Storage/key -tags: - - API - - Méthode - - Reference - - Stockage - - Storage - - Web Storage -translation_of: Web/API/Storage/key ---- -

{{APIRef()}}

- -

La méthode key() de l'interface {{domxref("Storage")}} prend un nombre n en argument et retourne la n-ième clé contenue dans storage. L'ordre des clés étant définie par le navigateur, il est recommandé de ne pas s'y référer .

- -

Syntax

- -
var unNomDeCle = storage.key(cle);
- -

Paramètres

- -
-
cle
-
Un entier représentant le numéro de la clé voulue. L'index débute à zero.
-
- -

Valeur de retour

- -

Un {{domxref("DOMString")}} contenant le nom de la clé .

- -

Exemple

- -

La fonction suivante parcours les éléments présents dans le local storage.

- -
function forEachKey(callback) {
-  for (var i = 0; i < localStorage.length; i++) {
-    callback(localStorage.key(i));
-  }
-}
- -
-

Note : Pour un exemple plus poussé, consultez la Web Storage Demo.

-
- -

Autre exemple

- -

La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes.

- -
for (var i = 0; i < localStorage.length; i++) {
-   console.log(localStorage.getItem(localStorage.key(i)));
-}
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.Storage.key")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/storage/key/index.md b/files/fr/web/api/storage/key/index.md new file mode 100644 index 0000000000..97e9160b4c --- /dev/null +++ b/files/fr/web/api/storage/key/index.md @@ -0,0 +1,80 @@ +--- +title: Storage.key() +slug: Web/API/Storage/key +tags: + - API + - Méthode + - Reference + - Stockage + - Storage + - Web Storage +translation_of: Web/API/Storage/key +--- +

{{APIRef()}}

+ +

La méthode key() de l'interface {{domxref("Storage")}} prend un nombre n en argument et retourne la n-ième clé contenue dans storage. L'ordre des clés étant définie par le navigateur, il est recommandé de ne pas s'y référer .

+ +

Syntax

+ +
var unNomDeCle = storage.key(cle);
+ +

Paramètres

+ +
+
cle
+
Un entier représentant le numéro de la clé voulue. L'index débute à zero.
+
+ +

Valeur de retour

+ +

Un {{domxref("DOMString")}} contenant le nom de la clé .

+ +

Exemple

+ +

La fonction suivante parcours les éléments présents dans le local storage.

+ +
function forEachKey(callback) {
+  for (var i = 0; i < localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}
+ +
+

Note : Pour un exemple plus poussé, consultez la Web Storage Demo.

+
+ +

Autre exemple

+ +

La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes.

+ +
for (var i = 0; i < localStorage.length; i++) {
+   console.log(localStorage.getItem(localStorage.key(i)));
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Storage.key")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/storage/length/index.html b/files/fr/web/api/storage/length/index.html deleted file mode 100644 index b8479be8fa..0000000000 --- a/files/fr/web/api/storage/length/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Storage.length -slug: Web/API/Storage/length -tags: - - API - - Propriété - - Reference - - Stockage - - Web Stockage -translation_of: Web/API/Storage/length ---- -

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

- -

La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet Storage.

- -

Syntaxe

- -
var aLength = storage.length;
- -

Retour

- -

Un entier.

- -

Exemple

- -

La fonction suivante ajoute trois éléments au localStorage du domaine courant puis retourne le nombre d'éléments dans le storage:

- -
function populateStorage() {
-  localStorage.setItem('bgcolor', 'yellow');
-  localStorage.setItem('font', 'Helvetica');
-  localStorage.setItem('image', 'cats.png');
-
-  localStorage.length; // retourne 3 si localStorage est vide au préalable
-}
- -
-

Note : Pour voir ceci utilisé dans un exemple concret, regardez notre Web Storage Demo.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.Storage.length")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/storage/length/index.md b/files/fr/web/api/storage/length/index.md new file mode 100644 index 0000000000..b8479be8fa --- /dev/null +++ b/files/fr/web/api/storage/length/index.md @@ -0,0 +1,65 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +tags: + - API + - Propriété + - Reference + - Stockage + - Web Stockage +translation_of: Web/API/Storage/length +--- +

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

+ +

La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet Storage.

+ +

Syntaxe

+ +
var aLength = storage.length;
+ +

Retour

+ +

Un entier.

+ +

Exemple

+ +

La fonction suivante ajoute trois éléments au localStorage du domaine courant puis retourne le nombre d'éléments dans le storage:

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // retourne 3 si localStorage est vide au préalable
+}
+ +
+

Note : Pour voir ceci utilisé dans un exemple concret, regardez notre Web Storage Demo.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Storage.length")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/storage/removeitem/index.html b/files/fr/web/api/storage/removeitem/index.html deleted file mode 100644 index 40a61a48e0..0000000000 --- a/files/fr/web/api/storage/removeitem/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Storage.removeItem() -slug: Web/API/Storage/removeItem -tags: - - API - - Méthode - - Stockage - - Stockage Web -translation_of: Web/API/Storage/removeItem ---- -

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

- -

La méthode removeItem() de l'interface {{domxref("Storage")}} , lorsque vous lui passez une clé en argument, va supprimer la ressource avec le nom de clé correspondant du storage. L'interface Storage de l'API Web Storage API fournit des accès particuliers dans les domaines des stockages locaux et de sessions.

- -

Si aucun élement n'est donné en paramètre nomCle, cette méthode ne fait rien.

- -

Syntaxe

- -
storage.removeItem(nomCle);
- -

Paramètres

- -
-
nomCle
-
Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Exemple

- -

La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image.

- -
function populateStorage() {
-  localStorage.setItem('bgcolor', 'red');
-  localStorage.setItem('font', 'Helvetica');
-  localStorage.setItem('image', 'myCat.png');
-
-  localStorage.removeItem('image');
-}
- -

Nous pouvons également faire ceci avec le stockage de session.

- -
function populateStorage() {
-  sessionStorage.setItem('bgcolor', 'red');
-  sessionStorage.setItem('font', 'Helvetica');
-  sessionStorage.setItem('image', 'myCat.png');
-
-  sessionStorage.removeItem('image');
-}
- -
-

Note : Pour voir ce code en fonctionnement, voir Web Storage Demo.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Storage.removeItem")}}

- -

Voir aussi

- -

Utilisation de l'API de stockage Web

diff --git a/files/fr/web/api/storage/removeitem/index.md b/files/fr/web/api/storage/removeitem/index.md new file mode 100644 index 0000000000..40a61a48e0 --- /dev/null +++ b/files/fr/web/api/storage/removeitem/index.md @@ -0,0 +1,83 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +tags: + - API + - Méthode + - Stockage + - Stockage Web +translation_of: Web/API/Storage/removeItem +--- +

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

+ +

La méthode removeItem() de l'interface {{domxref("Storage")}} , lorsque vous lui passez une clé en argument, va supprimer la ressource avec le nom de clé correspondant du storage. L'interface Storage de l'API Web Storage API fournit des accès particuliers dans les domaines des stockages locaux et de sessions.

+ +

Si aucun élement n'est donné en paramètre nomCle, cette méthode ne fait rien.

+ +

Syntaxe

+ +
storage.removeItem(nomCle);
+ +

Paramètres

+ +
+
nomCle
+
Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Exemple

+ +

La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}
+ +

Nous pouvons également faire ceci avec le stockage de session.

+ +
function populateStorage() {
+  sessionStorage.setItem('bgcolor', 'red');
+  sessionStorage.setItem('font', 'Helvetica');
+  sessionStorage.setItem('image', 'myCat.png');
+
+  sessionStorage.removeItem('image');
+}
+ +
+

Note : Pour voir ce code en fonctionnement, voir Web Storage Demo.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Storage.removeItem")}}

+ +

Voir aussi

+ +

Utilisation de l'API de stockage Web

diff --git a/files/fr/web/api/storage/setitem/index.html b/files/fr/web/api/storage/setitem/index.html deleted file mode 100644 index ce945681ff..0000000000 --- a/files/fr/web/api/storage/setitem/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Storage.setItem() -slug: Web/API/Storage/setItem -tags: - - API - - Méthode - - Stockage - - Stockage Web -translation_of: Web/API/Storage/setItem ---- -

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

- -

La méthode setItem() de l'interface {{domxref("Storage")}}, lorsque lui sont passées le duo clé-valeur, les ajoute à l'emplacement de stockage, sinon elle met à jour la valeur si la clé existe déjà.

- -

Syntaxe

- -
storage.setItem(nomClé, valeurClé);
- -

Paramètres

- -
-
nomClé
-
C'est une {{domxref("DOMString")}} contenant le nom de la clé que l'on souhaite créer/modifier.
-
valeurClé
-
C'est une {{domxref("DOMString")}} contenant la valeur associée à son nom de clé que l'on souhaite créer/modifier.
-
- -

Retourne

- -

Aucune valeur de retour.

- -

Exceptions

- -

setItem() peut émettre une exception si l'emplacement de stockage est plein. En particulier pour Safari mobile (depuis iOS 5), elle émettra une exception si l'utilisateur passe en navigation privée (contrairement aux autres navigateur qui autorisent le stockage même en navigation privée en utilisant un conteneur de données séparé, Safari met son quota de stockage à 0 octets).
- Par conséquent les développeurs devraient être sûrs de toujours de systématiquement capturer toute possible exception venant de setItem().

- -

Exemple

- -

La fonction suivante crée trois éléments à l'intérieur du stockage local.

- -
function remplissageStockage() {
-  localStorage.setItem('bgcolor', 'red');
-  localStorage.setItem('font', 'Helvetica');
-  localStorage.setItem('image', 'myCat.png');
-}
- -
-

Note : Pour voir ceci utilisé dans un exemple concret, regardez notre Web Storage Demo.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Storage.setItem")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/storage/setitem/index.md b/files/fr/web/api/storage/setitem/index.md new file mode 100644 index 0000000000..ce945681ff --- /dev/null +++ b/files/fr/web/api/storage/setitem/index.md @@ -0,0 +1,78 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +tags: + - API + - Méthode + - Stockage + - Stockage Web +translation_of: Web/API/Storage/setItem +--- +

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

+ +

La méthode setItem() de l'interface {{domxref("Storage")}}, lorsque lui sont passées le duo clé-valeur, les ajoute à l'emplacement de stockage, sinon elle met à jour la valeur si la clé existe déjà.

+ +

Syntaxe

+ +
storage.setItem(nomClé, valeurClé);
+ +

Paramètres

+ +
+
nomClé
+
C'est une {{domxref("DOMString")}} contenant le nom de la clé que l'on souhaite créer/modifier.
+
valeurClé
+
C'est une {{domxref("DOMString")}} contenant la valeur associée à son nom de clé que l'on souhaite créer/modifier.
+
+ +

Retourne

+ +

Aucune valeur de retour.

+ +

Exceptions

+ +

setItem() peut émettre une exception si l'emplacement de stockage est plein. En particulier pour Safari mobile (depuis iOS 5), elle émettra une exception si l'utilisateur passe en navigation privée (contrairement aux autres navigateur qui autorisent le stockage même en navigation privée en utilisant un conteneur de données séparé, Safari met son quota de stockage à 0 octets).
+ Par conséquent les développeurs devraient être sûrs de toujours de systématiquement capturer toute possible exception venant de setItem().

+ +

Exemple

+ +

La fonction suivante crée trois éléments à l'intérieur du stockage local.

+ +
function remplissageStockage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}
+ +
+

Note : Pour voir ceci utilisé dans un exemple concret, regardez notre Web Storage Demo.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Storage.setItem")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/storage_api/index.html b/files/fr/web/api/storage_api/index.html deleted file mode 100644 index fe7135c1d3..0000000000 --- a/files/fr/web/api/storage_api/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Storage API -slug: Web/API/Storage_API -translation_of: Web/API/Storage_API ---- -

{{securecontext_header}}{{DefaultAPISidebar("Storage")}}

- -

Le standard Storage définit un système de stockage commun et partagé utilisable par toutes les API et technologies qui stockent des données accessibles par le contenu pour des sites web individuels. L’API Storage donne aux codes des sites la capacité de déterminer quelle quantité d’espace ils peuvent utiliser, combien ils utilisent déjà, et même contrôler s’ils ont besoin ou non d’être alertés avant que l’{{Glossary("user agent", "agent utilisateur")}} n’élimine des données de site afin de faire de la place pour autre chose.

- -

{{AvailableInWorkers}}

- -

Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut :

- - - -

Unités de stockage de site

- -

Le système de stockage de site décrit par le standard Storage, et avec lequel on interagit en utilisant l’API Storage, consiste en une seule unité de stockage de site pour chaque {{Glossary("origin", "origine")}}. In essence, chaque site web ou application web a sa propre unité de stockage dans laquelle ses données sont placées. Le diagramme ci-dessous présente un bassin de stockage de site contenant trois unités de stockage, montrant que les unités de stockage peuvent contenir différents types de données et avoir différents quotas (limites maximum de stockage).

- -

Un diagramme illustrant la façon dont l'espace de stockage du site se compose de plusieurs unités de stockage qui contienne des données de différentes API ainsi que l'espace libre restant avant que le quota soit atteint.

- - - -

Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas.

- -

Modes de boîte

- -

Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa boîte. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une mode de boîte qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes :

- -
-
"best-effort"
-
L’agent utilisateur essayera de conserver les données contenues dans la boîte aussi longtemps qu’il peut, mais n’avertira pas l’utilisateur ou l’utilisatrice si l’espace de stockage approche sa limite et s’il devient nécessaire de nettoyer la boîte afin de réduire la pression de stockage.
-
"persistent"
-
L’agent utilisateur essayera de conserver les données aussi longtemps que possible, nettoyant toutes les boîtes "best-effort" avant de considérer le nettoyage d’une boîte marquée "persistent". S’il devient nécessaire de considérer le nettoyage d’une boîte persistante, l’agent utilisateur notifiera l’utilisateur ou l’utilisatrice et fournira un moyen de nettoyer une ou plusieurs boîtes persistantes selon le besoin.
-
- -

Modifier le mode de boîte d’une origine nécessite la permission d’utiliser la fonctionnalité "persistent-storage".

- -

Persistance et nettoyage des données

- -

Si le site ou l’application a la permission sur la fonctionnalité "persistent-storage", il ou elle peut utiliser la méthode {{domxref("StorageManager.persist()")}} pour faire la requête que sa boîte devienne persistante. Il est également possible pour l’agent utilisateur de décider de rendre l’unité de stockage du site persistante sur la base de caractéristiques d’usage ou d’autres métriques. Les drapeaux (flags), algorithmes et types associés à la permission "persistent-storage", sont tous positionnés sur les valeurs par défaut standard pour une permission, excepté que l’état de permission doit être le même sur l’ensemble de l’origine, et que si l’état de permission n’est pas "granted" (c’est-à-dire que si, pour une raison ou une autre, l’accès à la fonctionnalité de stockage persistant a été refusé), le mode de boîte de l’unité de stockage de site de l’origine est toujours "best-effort".

- -
-

Note : Voir Using the Permissions API pour plus de détails sur l’obtension et la gestion des permissions.

-
- -

Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle.

- -

Si une boîte est marquée "persistent", le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice.

- -

Estimations de quota et d’usage

- -

L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le quota de l’origine. La quantité de cet espace utilisée par le site est appelée son usage. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons :

- - - -

Les agents utilisateurs peuvent utiliser toute méthode de leur choix pour déterminer la taille du quota de l’origine, et sont encouragés par la spécification à fournir de l’espace supplémentaire aux sites populaires ou fréquemment visités.

- -

Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple :

- -
navigator.storage.estimate().then(estimate => {
-  // estimate.quota est le quota estimé
-  // estimate.usage est le nombre estimé d’octets utilisés
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Storage')}}{{Spec2('Storage')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

StorageManager

- -

{{Compat("api.StorageManager")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/storage_api/index.md b/files/fr/web/api/storage_api/index.md new file mode 100644 index 0000000000..fe7135c1d3 --- /dev/null +++ b/files/fr/web/api/storage_api/index.md @@ -0,0 +1,112 @@ +--- +title: Storage API +slug: Web/API/Storage_API +translation_of: Web/API/Storage_API +--- +

{{securecontext_header}}{{DefaultAPISidebar("Storage")}}

+ +

Le standard Storage définit un système de stockage commun et partagé utilisable par toutes les API et technologies qui stockent des données accessibles par le contenu pour des sites web individuels. L’API Storage donne aux codes des sites la capacité de déterminer quelle quantité d’espace ils peuvent utiliser, combien ils utilisent déjà, et même contrôler s’ils ont besoin ou non d’être alertés avant que l’{{Glossary("user agent", "agent utilisateur")}} n’élimine des données de site afin de faire de la place pour autre chose.

+ +

{{AvailableInWorkers}}

+ +

Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut :

+ + + +

Unités de stockage de site

+ +

Le système de stockage de site décrit par le standard Storage, et avec lequel on interagit en utilisant l’API Storage, consiste en une seule unité de stockage de site pour chaque {{Glossary("origin", "origine")}}. In essence, chaque site web ou application web a sa propre unité de stockage dans laquelle ses données sont placées. Le diagramme ci-dessous présente un bassin de stockage de site contenant trois unités de stockage, montrant que les unités de stockage peuvent contenir différents types de données et avoir différents quotas (limites maximum de stockage).

+ +

Un diagramme illustrant la façon dont l'espace de stockage du site se compose de plusieurs unités de stockage qui contienne des données de différentes API ainsi que l'espace libre restant avant que le quota soit atteint.

+ + + +

Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas.

+ +

Modes de boîte

+ +

Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa boîte. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une mode de boîte qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes :

+ +
+
"best-effort"
+
L’agent utilisateur essayera de conserver les données contenues dans la boîte aussi longtemps qu’il peut, mais n’avertira pas l’utilisateur ou l’utilisatrice si l’espace de stockage approche sa limite et s’il devient nécessaire de nettoyer la boîte afin de réduire la pression de stockage.
+
"persistent"
+
L’agent utilisateur essayera de conserver les données aussi longtemps que possible, nettoyant toutes les boîtes "best-effort" avant de considérer le nettoyage d’une boîte marquée "persistent". S’il devient nécessaire de considérer le nettoyage d’une boîte persistante, l’agent utilisateur notifiera l’utilisateur ou l’utilisatrice et fournira un moyen de nettoyer une ou plusieurs boîtes persistantes selon le besoin.
+
+ +

Modifier le mode de boîte d’une origine nécessite la permission d’utiliser la fonctionnalité "persistent-storage".

+ +

Persistance et nettoyage des données

+ +

Si le site ou l’application a la permission sur la fonctionnalité "persistent-storage", il ou elle peut utiliser la méthode {{domxref("StorageManager.persist()")}} pour faire la requête que sa boîte devienne persistante. Il est également possible pour l’agent utilisateur de décider de rendre l’unité de stockage du site persistante sur la base de caractéristiques d’usage ou d’autres métriques. Les drapeaux (flags), algorithmes et types associés à la permission "persistent-storage", sont tous positionnés sur les valeurs par défaut standard pour une permission, excepté que l’état de permission doit être le même sur l’ensemble de l’origine, et que si l’état de permission n’est pas "granted" (c’est-à-dire que si, pour une raison ou une autre, l’accès à la fonctionnalité de stockage persistant a été refusé), le mode de boîte de l’unité de stockage de site de l’origine est toujours "best-effort".

+ +
+

Note : Voir Using the Permissions API pour plus de détails sur l’obtension et la gestion des permissions.

+
+ +

Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle.

+ +

Si une boîte est marquée "persistent", le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice.

+ +

Estimations de quota et d’usage

+ +

L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le quota de l’origine. La quantité de cet espace utilisée par le site est appelée son usage. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons :

+ + + +

Les agents utilisateurs peuvent utiliser toute méthode de leur choix pour déterminer la taille du quota de l’origine, et sont encouragés par la spécification à fournir de l’espace supplémentaire aux sites populaires ou fréquemment visités.

+ +

Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple :

+ +
navigator.storage.estimate().then(estimate => {
+  // estimate.quota est le quota estimé
+  // estimate.usage est le nombre estimé d’octets utilisés
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Storage')}}{{Spec2('Storage')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

StorageManager

+ +

{{Compat("api.StorageManager")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/storageestimate/index.html b/files/fr/web/api/storageestimate/index.html deleted file mode 100644 index a4a4dd5ebd..0000000000 --- a/files/fr/web/api/storageestimate/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: StorageEstimate -slug: Web/API/StorageEstimate -translation_of: Web/API/StorageEstimate ---- -
{{securecontext_header}}{{APIRef("Storage")}}
- -

Le dictionnaire StorageEstimate est utilisé par le {{domxref("StorageManager")}} pour fournir des estimations de taille du stockage de données d’un site ou d’une application et de la quantité actuellement utilisée. La méthod {{domxref("StorageManager.estimate", "estimate()")}} renvoie un objet qui se conforme à ce dictionnaire quand sa {{jsxref("Promise")}} se résoud.

- -

Ces valeurs sont seulement des estimations pour différentes raisons, telles que la performance, et la prévention de l’utilisation des informations de capacité de stockage à des fins de fingerprinting. Voir les pages de propriétés individuelles pour plus de détails.

- -

Propriétés

- -

Actuellement, ce dictionnaire a toujours les deux propriétés suivantes définies.

- -
-
{{domxref("StorageEstimate.quota", "quota")}} {{securecontext_inline}}
-
Une valeur numérique qui fournit une approximation prudente du stockage total que l’appareil ou l’ordinateur met à disposition de l’origine ou de l’application web. Il est possible que plus d’espace que la valeur indiquée soit disponible, cependant vous ne pouvez pas supposer que c’est le cas.
-
{{domxref("StorageEstimate.usage", "usage")}} {{securecontext_inline}}
-
Une valeur numérique donnant une approximation de la quantité de stockage actuellement utilisée par le site ou l’application, parmi l’espace disponible indiqué par quota.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Storage', '#dictdef-storageestimate', 'StorageEstimate')}}{{Spec2('Storage')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.StorageEstimate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/storageestimate/index.md b/files/fr/web/api/storageestimate/index.md new file mode 100644 index 0000000000..a4a4dd5ebd --- /dev/null +++ b/files/fr/web/api/storageestimate/index.md @@ -0,0 +1,51 @@ +--- +title: StorageEstimate +slug: Web/API/StorageEstimate +translation_of: Web/API/StorageEstimate +--- +
{{securecontext_header}}{{APIRef("Storage")}}
+ +

Le dictionnaire StorageEstimate est utilisé par le {{domxref("StorageManager")}} pour fournir des estimations de taille du stockage de données d’un site ou d’une application et de la quantité actuellement utilisée. La méthod {{domxref("StorageManager.estimate", "estimate()")}} renvoie un objet qui se conforme à ce dictionnaire quand sa {{jsxref("Promise")}} se résoud.

+ +

Ces valeurs sont seulement des estimations pour différentes raisons, telles que la performance, et la prévention de l’utilisation des informations de capacité de stockage à des fins de fingerprinting. Voir les pages de propriétés individuelles pour plus de détails.

+ +

Propriétés

+ +

Actuellement, ce dictionnaire a toujours les deux propriétés suivantes définies.

+ +
+
{{domxref("StorageEstimate.quota", "quota")}} {{securecontext_inline}}
+
Une valeur numérique qui fournit une approximation prudente du stockage total que l’appareil ou l’ordinateur met à disposition de l’origine ou de l’application web. Il est possible que plus d’espace que la valeur indiquée soit disponible, cependant vous ne pouvez pas supposer que c’est le cas.
+
{{domxref("StorageEstimate.usage", "usage")}} {{securecontext_inline}}
+
Une valeur numérique donnant une approximation de la quantité de stockage actuellement utilisée par le site ou l’application, parmi l’espace disponible indiqué par quota.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Storage', '#dictdef-storageestimate', 'StorageEstimate')}}{{Spec2('Storage')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.StorageEstimate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/storagemanager/estimate/index.html b/files/fr/web/api/storagemanager/estimate/index.html deleted file mode 100644 index c94942b615..0000000000 --- a/files/fr/web/api/storagemanager/estimate/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: StorageManager.estimate() -slug: Web/API/StorageManager/estimate -translation_of: Web/API/StorageManager/estimate ---- -

{{securecontext_header}}{{APIRef("Storage")}}

- -

La méthode estimate() de l’interface {{domxref("StorageManager")}} demande au gestionnaire de stockage d’obtenir des informations de quota et d’usage pour l’origine actuelle. Cette méthode opère de manière asynchrone, elle renvoie donc une {{jsxref("Promise")}} qui se résoud une fois que l’information est disponible. La fonction gérant la résolution de la promesse reçoit en entrée un {{domxref("StorageEstimate")}} avec les données de quota et d’usage.

- -

Syntaxe

- -
var estimatePromise = StorageManager.estimate();
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis.

- -

Il est possible de constater que le quota varie d’application en application, basé sur des facteurs tels que la fréquence à laquelle l’utilisateur ou l’utilisatrice la visite, des données de popularité de sites bien connus, et ainsi de suite.

- -

Exemple

- -

Dans cet exemple, nous obtenons des estimations d’usage et présentons le pourcentage de capacité de stockage actuellement utilisé à l’utilisateur ou à l’utilisatrice.

- -

Contenu HTML

- -
<p>
-  Vous utilisez actuellement environ <span id="percent">
-  </span>% de votre espace disponible.
-</p>
-
- -

Contenu JavaScript

- -
navigator.storage.estimate().then(function(estimate) {
-  document.getElementById("percent").textContent =
-      (estimate.usage / estimate.quota).toFixed(2);
-});
-
- -

Résultat

- -

{{ EmbedLiveSample('Example', 600, 40) }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}}{{Spec2('Storage')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.StorageManager.estimate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/storagemanager/estimate/index.md b/files/fr/web/api/storagemanager/estimate/index.md new file mode 100644 index 0000000000..c94942b615 --- /dev/null +++ b/files/fr/web/api/storagemanager/estimate/index.md @@ -0,0 +1,76 @@ +--- +title: StorageManager.estimate() +slug: Web/API/StorageManager/estimate +translation_of: Web/API/StorageManager/estimate +--- +

{{securecontext_header}}{{APIRef("Storage")}}

+ +

La méthode estimate() de l’interface {{domxref("StorageManager")}} demande au gestionnaire de stockage d’obtenir des informations de quota et d’usage pour l’origine actuelle. Cette méthode opère de manière asynchrone, elle renvoie donc une {{jsxref("Promise")}} qui se résoud une fois que l’information est disponible. La fonction gérant la résolution de la promesse reçoit en entrée un {{domxref("StorageEstimate")}} avec les données de quota et d’usage.

+ +

Syntaxe

+ +
var estimatePromise = StorageManager.estimate();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis.

+ +

Il est possible de constater que le quota varie d’application en application, basé sur des facteurs tels que la fréquence à laquelle l’utilisateur ou l’utilisatrice la visite, des données de popularité de sites bien connus, et ainsi de suite.

+ +

Exemple

+ +

Dans cet exemple, nous obtenons des estimations d’usage et présentons le pourcentage de capacité de stockage actuellement utilisé à l’utilisateur ou à l’utilisatrice.

+ +

Contenu HTML

+ +
<p>
+  Vous utilisez actuellement environ <span id="percent">
+  </span>% de votre espace disponible.
+</p>
+
+ +

Contenu JavaScript

+ +
navigator.storage.estimate().then(function(estimate) {
+  document.getElementById("percent").textContent =
+      (estimate.usage / estimate.quota).toFixed(2);
+});
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Example', 600, 40) }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}}{{Spec2('Storage')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.StorageManager.estimate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/storagemanager/index.html b/files/fr/web/api/storagemanager/index.html deleted file mode 100644 index afc0bd77ad..0000000000 --- a/files/fr/web/api/storagemanager/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: StorageManager -slug: Web/API/StorageManager -tags: - - API - - Interface - - NeedsTranslation - - Persistence - - Quotas - - Reference - - Secure context - - Storage - - Storage API - - StorageManager - - TopicStub - - Usage -translation_of: Web/API/StorageManager ---- -

{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}

- -

The StorageManager interface of the the Storage API provides an interface for managing persistance permissions and estimating available storage. You can get a reference to this interface using either {{domxref("navigator.storage")}} or {{domxref("WorkerNavigator.storage")}}.

- -

Methods

- -
-
{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}
-
Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin.
-
{{domxref("StorageManager.persist()")}} {{securecontext_inline}}
-
Returns a {{jsxref('Promise')}} that resolves to true if the user agent is able to persist your site's storage.
-
{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}
-
Returns a {{jsxref('Promise')}} that resolves to true if persistence has already been granted for your site's storage.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Storage','#storagemanager','StorageManger')}}{{Spec2('Storage')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.StorageManager")}}

diff --git a/files/fr/web/api/storagemanager/index.md b/files/fr/web/api/storagemanager/index.md new file mode 100644 index 0000000000..afc0bd77ad --- /dev/null +++ b/files/fr/web/api/storagemanager/index.md @@ -0,0 +1,55 @@ +--- +title: StorageManager +slug: Web/API/StorageManager +tags: + - API + - Interface + - NeedsTranslation + - Persistence + - Quotas + - Reference + - Secure context + - Storage + - Storage API + - StorageManager + - TopicStub + - Usage +translation_of: Web/API/StorageManager +--- +

{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}

+ +

The StorageManager interface of the the Storage API provides an interface for managing persistance permissions and estimating available storage. You can get a reference to this interface using either {{domxref("navigator.storage")}} or {{domxref("WorkerNavigator.storage")}}.

+ +

Methods

+ +
+
{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}
+
Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin.
+
{{domxref("StorageManager.persist()")}} {{securecontext_inline}}
+
Returns a {{jsxref('Promise')}} that resolves to true if the user agent is able to persist your site's storage.
+
{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}
+
Returns a {{jsxref('Promise')}} that resolves to true if persistence has already been granted for your site's storage.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Storage','#storagemanager','StorageManger')}}{{Spec2('Storage')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.StorageManager")}}

diff --git a/files/fr/web/api/storagemanager/persist/index.html b/files/fr/web/api/storagemanager/persist/index.html deleted file mode 100644 index 8a8c15f76f..0000000000 --- a/files/fr/web/api/storagemanager/persist/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: StorageManager.persist() -slug: Web/API/StorageManager/persist -translation_of: Web/API/StorageManager/persist ---- -

{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}

- -

La méthode persist() de l’interface {{domxref("StorageManager")}} fait une demande de permission d’utiliser un stockage persistant, et renvoie une {{jsxref('Promise')}} qui se résoud en true si la permission est accordée et le mode de boîte est persistant, et false dans le cas contraire.

- -

Syntaxe

- -
navigator.storage.persist().then(function(persistent) { ... })
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.

- -

Exemple

- -
if (navigator.storage && navigator.storage.persist)
-  navigator.storage.persist().then(function(persistent) {
-    if (persistent)
-      console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite");
-    else
-      console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage.");
-  });
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Storage','#dom-storagemanager-persist','persist')}}{{Spec2('Storage')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.StorageManager.persist")}}

diff --git a/files/fr/web/api/storagemanager/persist/index.md b/files/fr/web/api/storagemanager/persist/index.md new file mode 100644 index 0000000000..8a8c15f76f --- /dev/null +++ b/files/fr/web/api/storagemanager/persist/index.md @@ -0,0 +1,51 @@ +--- +title: StorageManager.persist() +slug: Web/API/StorageManager/persist +translation_of: Web/API/StorageManager/persist +--- +

{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}

+ +

La méthode persist() de l’interface {{domxref("StorageManager")}} fait une demande de permission d’utiliser un stockage persistant, et renvoie une {{jsxref('Promise')}} qui se résoud en true si la permission est accordée et le mode de boîte est persistant, et false dans le cas contraire.

+ +

Syntaxe

+ +
navigator.storage.persist().then(function(persistent) { ... })
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.

+ +

Exemple

+ +
if (navigator.storage && navigator.storage.persist)
+  navigator.storage.persist().then(function(persistent) {
+    if (persistent)
+      console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite");
+    else
+      console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage.");
+  });
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Storage','#dom-storagemanager-persist','persist')}}{{Spec2('Storage')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.StorageManager.persist")}}

diff --git a/files/fr/web/api/storagemanager/persisted/index.html b/files/fr/web/api/storagemanager/persisted/index.html deleted file mode 100644 index 35fcfa12c2..0000000000 --- a/files/fr/web/api/storagemanager/persisted/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: StorageManager.persisted() -slug: Web/API/StorageManager/persisted -translation_of: Web/API/StorageManager/persisted ---- -

{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}

- -

La propriété persisted de l’interface {{domxref("StorageManager")}} renvoie une {{jsxref('Promise')}} qui se résoud en true si le mode de boîte est est persistant pour le stockage de votre site.

- -

Syntaxe

- -
navigator.storage.persisted().then(function(persistent) { ... })
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.

- -

Example

- -
if (navigator.storage && navigator.storage.persist)
-  navigator.storage.persisted().then(function(persistent) {
-    if (persistent)
-      console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite");
-    else
-      console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage.");
-  });
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Storage','#dom-storagemanager-persisted','persisted')}}{{Spec2('Storage')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.StorageManager.persisted")}}

diff --git a/files/fr/web/api/storagemanager/persisted/index.md b/files/fr/web/api/storagemanager/persisted/index.md new file mode 100644 index 0000000000..35fcfa12c2 --- /dev/null +++ b/files/fr/web/api/storagemanager/persisted/index.md @@ -0,0 +1,51 @@ +--- +title: StorageManager.persisted() +slug: Web/API/StorageManager/persisted +translation_of: Web/API/StorageManager/persisted +--- +

{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}

+ +

La propriété persisted de l’interface {{domxref("StorageManager")}} renvoie une {{jsxref('Promise')}} qui se résoud en true si le mode de boîte est est persistant pour le stockage de votre site.

+ +

Syntaxe

+ +
navigator.storage.persisted().then(function(persistent) { ... })
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.

+ +

Example

+ +
if (navigator.storage && navigator.storage.persist)
+  navigator.storage.persisted().then(function(persistent) {
+    if (persistent)
+      console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite");
+    else
+      console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage.");
+  });
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Storage','#dom-storagemanager-persisted','persisted')}}{{Spec2('Storage')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.StorageManager.persisted")}}

diff --git a/files/fr/web/api/streams_api/index.html b/files/fr/web/api/streams_api/index.html deleted file mode 100644 index 3bce14616c..0000000000 --- a/files/fr/web/api/streams_api/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Streams API -slug: Web/API/Streams_API -translation_of: Web/API/Streams_API ---- -
{{SeeCompatTable}}{{APIRef("Streams")}}
- -

L'API Streams permet à JavaScript d'accèder par programmation aux flux de données reçus sur le réseau et de les traiter selon les souhaits du développeur.

- -

Concepts et utilisation

- -

Le Streaming implique de segmenter une ressource que vous souhaitez recevoir sur le réseau et de la séparer en plus petits morceaux, puis de la traiter petit à petit. C'est une chose que font les navigateurs quand ils reçoivent des ressources pour les afficher sur les pages web — le buffer d'une vidéo est progressivement disponible à la lecture, tout comme parfois vous verrez des images s'afficher progressivement durant leur chargement.

- -

Mais ceci n'a jamais été possible pour le javascript par le passé. Avant, si nous souhaitions traiter une ressource quel qu'en soit le type (qu'il s'agisse d'une vidéo, ou d'un fichier texte, etc.), il nous fallait télécharger le fichier en entier, attendre qu'il soit désérialisé en un format acceptable, pour alors traiter la totalité après l'avoir totalement reçu.

- -

Avec la mise à disposition des Streams en JavaScript, tout ceci a changé — vous pouvez maintenant commencer à traiter des données brutes petit à petit avec du Javascript dès qu'elles sont disponibles coté client, sans avoir besoin de générer un buffer, string, ou blob.

- -

- -

Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence ou prend fin, chaîner les flux entre eux, traiter les erreurs et annuler les flux si nécessaire et vous adapter à la vitesse de lecture du flux.

- -

L'usage basique des Streams s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, la réponse {{domxref("Body")}} retourné par une requête fetch réussie peut être exposée en tant que {{domxref("ReadableStream")}}, vous pourrez ainsi le lire en utilisant un lecteur créé par {{domxref("ReadableStream.getReader()")}}, l'annuler avec {{domxref("ReadableStream.cancel()")}}, etc.

- -

Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un service worker.

- -

Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("WritableStream")}}.

- -
-

Note : Vous trouverez plus de détails sur la théorie et la mise en pratique des flux dans nos articles — Streams API concepts, Using readable streams, et Using writable streams.

-
- -

Stream interfaces

- -

Readable streams

- -
-
{{domxref("ReadableStream")}}
-
Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'API Fetch, ou des flux définis par le développeur (cad. un constructeur  {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé).
-
{{domxref("ReadableStreamDefaultReader")}}
-
Correspond à un lecteur par défaut pouvant être utilisé afin de lire un flux de données fourni par le réseau (cad. une requête fetch).
-
{{domxref("ReadableStreamDefaultController")}}
-
Correspond à un controlleur permettant de gérer l'état d'un {{domxref("ReadableStream")}} et le système de queue interne. Les controleurs par défaut sont à destination des flux qui ne sont pas des flux d'octets.
-
- -

Writable streams

- -
-
{{domxref("WritableStream")}}
-
Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un aggregateur de flux). Cet objet s'accompagne  d'un built-in backpressure et d'un système de queue.
-
{{domxref("WritableStreamDefaultWriter")}}
-
Correspond à un flux inscriptible par défaut pouvant être utilisé afin d'écire des chunks (plus petit morceaux) de données vers un flux inscriptible.
-
{{domxref("WritableStreamDefaultController")}}
-
Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un WritableStream, le sink sous-jacent se voit attribuer une instance de WritableStreamDefaultController afin de pouvoir le manipuler.
-
- - - -
-
{{domxref("ByteLengthQueuingStrategy")}}
-
Fournit une stratégie intégrée de file d'attente basée sur la taille en octets, pouvant être utilisée lors de la construction de flux..
-
{{domxref("CountQueuingStrategy")}}
-
Fournit une stratégie intégrée de file d'attente basée sur le comptage des chunks, pouvant être utilisée lors de la construction de flux.
-
- -

Extensions vers d'autres APIs

- -
-
{{domxref("Request")}}
-
Quand un nouvel objet Request est construit, vous pouvez lui passer un {{domxref("ReadableStream")}} dans la propriété body de son dictionnaire RequestInit. Cette Request peut alors être envoyée à un {{domxref("WindowOrWorkerGlobalScope.fetch()")}} pour initier l'appel vers le flux.
-
{{domxref("Body")}}
-
La réponse {{domxref("Body")}} retrouné par un appel fetch réussi est exposée par défaut comme un {{domxref("ReadableStream")}}, et peut être ratachée à un reader, etc.
-
- -

Interfaces liées aux flux d'octets

- -
-

Attention : Ces méthodes ne sont pas implémentés pour le moment, des questions ont été soulevées afin de déterminer si les détails des specs sont dans état suffisamment stable pour être implémentés. Ceci pourrait changer avec le temps.

-
- -
-
{{domxref("ReadableStreamBYOBReader")}}
-
Correspond à un lecteur BYOB ("bring your own buffer") pouvant être utilisé pour lire des flux de données fourni par le développeur (c.a.d. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personalisé).
-
{{domxref("ReadableByteStreamController")}}
-
Correspond à un controlleur permettant de manipuler l'état et la file d'attente interne d'un {{domxref("ReadableStream")}}. Les controlleurs de flux d'octets sont à usage des flux d'octets.
-
{{domxref("ReadableStreamBYOBRequest")}}
-
Correspond à un pull dans une requête {{domxref("ReadableByteStreamController")}}.
-
- -

Examples

- -

We have created a directory of examples to go along with the Streams API documentation — see mdn/dom-examples/streams. The examples are as follows:

- - - -

Examples from other developers:

- - - -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Streams')}}{{Spec2('Streams')}}Initial definition.
- -

Compatibilité des navigateurs

- -

ReadableStream

- -

{{Compat("api.ReadableStream")}}

- -

WritableStream

- -

{{Compat("api.WritableStream")}}

- -

See also

- - diff --git a/files/fr/web/api/streams_api/index.md b/files/fr/web/api/streams_api/index.md new file mode 100644 index 0000000000..3bce14616c --- /dev/null +++ b/files/fr/web/api/streams_api/index.md @@ -0,0 +1,141 @@ +--- +title: Streams API +slug: Web/API/Streams_API +translation_of: Web/API/Streams_API +--- +
{{SeeCompatTable}}{{APIRef("Streams")}}
+ +

L'API Streams permet à JavaScript d'accèder par programmation aux flux de données reçus sur le réseau et de les traiter selon les souhaits du développeur.

+ +

Concepts et utilisation

+ +

Le Streaming implique de segmenter une ressource que vous souhaitez recevoir sur le réseau et de la séparer en plus petits morceaux, puis de la traiter petit à petit. C'est une chose que font les navigateurs quand ils reçoivent des ressources pour les afficher sur les pages web — le buffer d'une vidéo est progressivement disponible à la lecture, tout comme parfois vous verrez des images s'afficher progressivement durant leur chargement.

+ +

Mais ceci n'a jamais été possible pour le javascript par le passé. Avant, si nous souhaitions traiter une ressource quel qu'en soit le type (qu'il s'agisse d'une vidéo, ou d'un fichier texte, etc.), il nous fallait télécharger le fichier en entier, attendre qu'il soit désérialisé en un format acceptable, pour alors traiter la totalité après l'avoir totalement reçu.

+ +

Avec la mise à disposition des Streams en JavaScript, tout ceci a changé — vous pouvez maintenant commencer à traiter des données brutes petit à petit avec du Javascript dès qu'elles sont disponibles coté client, sans avoir besoin de générer un buffer, string, ou blob.

+ +

+ +

Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence ou prend fin, chaîner les flux entre eux, traiter les erreurs et annuler les flux si nécessaire et vous adapter à la vitesse de lecture du flux.

+ +

L'usage basique des Streams s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, la réponse {{domxref("Body")}} retourné par une requête fetch réussie peut être exposée en tant que {{domxref("ReadableStream")}}, vous pourrez ainsi le lire en utilisant un lecteur créé par {{domxref("ReadableStream.getReader()")}}, l'annuler avec {{domxref("ReadableStream.cancel()")}}, etc.

+ +

Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un service worker.

+ +

Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("WritableStream")}}.

+ +
+

Note : Vous trouverez plus de détails sur la théorie et la mise en pratique des flux dans nos articles — Streams API concepts, Using readable streams, et Using writable streams.

+
+ +

Stream interfaces

+ +

Readable streams

+ +
+
{{domxref("ReadableStream")}}
+
Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'API Fetch, ou des flux définis par le développeur (cad. un constructeur  {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé).
+
{{domxref("ReadableStreamDefaultReader")}}
+
Correspond à un lecteur par défaut pouvant être utilisé afin de lire un flux de données fourni par le réseau (cad. une requête fetch).
+
{{domxref("ReadableStreamDefaultController")}}
+
Correspond à un controlleur permettant de gérer l'état d'un {{domxref("ReadableStream")}} et le système de queue interne. Les controleurs par défaut sont à destination des flux qui ne sont pas des flux d'octets.
+
+ +

Writable streams

+ +
+
{{domxref("WritableStream")}}
+
Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un aggregateur de flux). Cet objet s'accompagne  d'un built-in backpressure et d'un système de queue.
+
{{domxref("WritableStreamDefaultWriter")}}
+
Correspond à un flux inscriptible par défaut pouvant être utilisé afin d'écire des chunks (plus petit morceaux) de données vers un flux inscriptible.
+
{{domxref("WritableStreamDefaultController")}}
+
Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un WritableStream, le sink sous-jacent se voit attribuer une instance de WritableStreamDefaultController afin de pouvoir le manipuler.
+
+ + + +
+
{{domxref("ByteLengthQueuingStrategy")}}
+
Fournit une stratégie intégrée de file d'attente basée sur la taille en octets, pouvant être utilisée lors de la construction de flux..
+
{{domxref("CountQueuingStrategy")}}
+
Fournit une stratégie intégrée de file d'attente basée sur le comptage des chunks, pouvant être utilisée lors de la construction de flux.
+
+ +

Extensions vers d'autres APIs

+ +
+
{{domxref("Request")}}
+
Quand un nouvel objet Request est construit, vous pouvez lui passer un {{domxref("ReadableStream")}} dans la propriété body de son dictionnaire RequestInit. Cette Request peut alors être envoyée à un {{domxref("WindowOrWorkerGlobalScope.fetch()")}} pour initier l'appel vers le flux.
+
{{domxref("Body")}}
+
La réponse {{domxref("Body")}} retrouné par un appel fetch réussi est exposée par défaut comme un {{domxref("ReadableStream")}}, et peut être ratachée à un reader, etc.
+
+ +

Interfaces liées aux flux d'octets

+ +
+

Attention : Ces méthodes ne sont pas implémentés pour le moment, des questions ont été soulevées afin de déterminer si les détails des specs sont dans état suffisamment stable pour être implémentés. Ceci pourrait changer avec le temps.

+
+ +
+
{{domxref("ReadableStreamBYOBReader")}}
+
Correspond à un lecteur BYOB ("bring your own buffer") pouvant être utilisé pour lire des flux de données fourni par le développeur (c.a.d. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personalisé).
+
{{domxref("ReadableByteStreamController")}}
+
Correspond à un controlleur permettant de manipuler l'état et la file d'attente interne d'un {{domxref("ReadableStream")}}. Les controlleurs de flux d'octets sont à usage des flux d'octets.
+
{{domxref("ReadableStreamBYOBRequest")}}
+
Correspond à un pull dans une requête {{domxref("ReadableByteStreamController")}}.
+
+ +

Examples

+ +

We have created a directory of examples to go along with the Streams API documentation — see mdn/dom-examples/streams. The examples are as follows:

+ + + +

Examples from other developers:

+ + + +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Streams')}}{{Spec2('Streams')}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

ReadableStream

+ +

{{Compat("api.ReadableStream")}}

+ +

WritableStream

+ +

{{Compat("api.WritableStream")}}

+ +

See also

+ + diff --git a/files/fr/web/api/stylesheet/disabled/index.html b/files/fr/web/api/stylesheet/disabled/index.html deleted file mode 100644 index 681c2c6795..0000000000 --- a/files/fr/web/api/stylesheet/disabled/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: StyleSheet.disabled -slug: Web/API/StyleSheet/disabled -translation_of: Web/API/StyleSheet/disabled ---- -
{{APIRef("CSSOM")}}
- -

La StyleSheet.disabledpropriété indique si la feuille de style est empêchée de demander le document. Une feuille de style peut être désactivé en réglant manuellement cette propriété trueou si elle est une forme inactive feuille de style alternatif . Notez que disabled == falsene garantit pas la feuille de style est appliquée (il pourrait être supprimé du document, par exemple).

- -

Syntaxe

- -
bool = stylesheet.disabled
-
- -

Exemple

- -
// si la feuille de style est désactivé ... 
-si (stylesheet.disabled) {
-   // appliquer le style en ligne 
-}
-
- -

spécification

- -

désactivée

diff --git a/files/fr/web/api/stylesheet/disabled/index.md b/files/fr/web/api/stylesheet/disabled/index.md new file mode 100644 index 0000000000..681c2c6795 --- /dev/null +++ b/files/fr/web/api/stylesheet/disabled/index.md @@ -0,0 +1,25 @@ +--- +title: StyleSheet.disabled +slug: Web/API/StyleSheet/disabled +translation_of: Web/API/StyleSheet/disabled +--- +
{{APIRef("CSSOM")}}
+ +

La StyleSheet.disabledpropriété indique si la feuille de style est empêchée de demander le document. Une feuille de style peut être désactivé en réglant manuellement cette propriété trueou si elle est une forme inactive feuille de style alternatif . Notez que disabled == falsene garantit pas la feuille de style est appliquée (il pourrait être supprimé du document, par exemple).

+ +

Syntaxe

+ +
bool = stylesheet.disabled
+
+ +

Exemple

+ +
// si la feuille de style est désactivé ... 
+si (stylesheet.disabled) {
+   // appliquer le style en ligne 
+}
+
+ +

spécification

+ +

désactivée

diff --git a/files/fr/web/api/stylesheet/href/index.html b/files/fr/web/api/stylesheet/href/index.html deleted file mode 100644 index 1180f3c619..0000000000 --- a/files/fr/web/api/stylesheet/href/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Stylesheet.href -slug: Web/API/StyleSheet/href -translation_of: Web/API/StyleSheet/href ---- -
{{APIRef ("CSSOM")}}
- -

Renvoie l'emplacement de la feuille de style.

- -

Syntaxe

- -
Uri = stylesheet.href
-
- -

Paramètres

- - - -

Exemple

- -
 // sur une machine locale: 
- <Html> 
-  <Head> 
-   <Link rel = "StyleSheet" href = "example.css" type = "text / css" /> 
-   <Script> 
-    Function sref () { 
-     Alerte (document.styleSheets [0] .href); 
-    }
-   </ Script> 
-  </ Head> 
-  <Body> 
-   <Div class = "tonnerre"> Thunder </ div>
-   <Button onclick = "sref ()"> ss </ button>
-  </ Body> 
- </ Html>
-// retourne "fichier: //// C: /Windows/Desktop/example.css
-
- -

Remarques

- -

Si la feuille de style est une feuille de style liée, la valeur de son attribut est son emplacement. Pour les feuilles de style en ligne, la valeur de cet attribut est NULL.

- -

Cette propriété est en lecture seule sur Firefox, Opera, Google Chrome et Safari, et elle est lue / écrite dans Internet Explorer.

- -

spécification

- -

Href

diff --git a/files/fr/web/api/stylesheet/href/index.md b/files/fr/web/api/stylesheet/href/index.md new file mode 100644 index 0000000000..1180f3c619 --- /dev/null +++ b/files/fr/web/api/stylesheet/href/index.md @@ -0,0 +1,49 @@ +--- +title: Stylesheet.href +slug: Web/API/StyleSheet/href +translation_of: Web/API/StyleSheet/href +--- +
{{APIRef ("CSSOM")}}
+ +

Renvoie l'emplacement de la feuille de style.

+ +

Syntaxe

+ +
Uri = stylesheet.href
+
+ +

Paramètres

+ + + +

Exemple

+ +
 // sur une machine locale: 
+ <Html> 
+  <Head> 
+   <Link rel = "StyleSheet" href = "example.css" type = "text / css" /> 
+   <Script> 
+    Function sref () { 
+     Alerte (document.styleSheets [0] .href); 
+    }
+   </ Script> 
+  </ Head> 
+  <Body> 
+   <Div class = "tonnerre"> Thunder </ div>
+   <Button onclick = "sref ()"> ss </ button>
+  </ Body> 
+ </ Html>
+// retourne "fichier: //// C: /Windows/Desktop/example.css
+
+ +

Remarques

+ +

Si la feuille de style est une feuille de style liée, la valeur de son attribut est son emplacement. Pour les feuilles de style en ligne, la valeur de cet attribut est NULL.

+ +

Cette propriété est en lecture seule sur Firefox, Opera, Google Chrome et Safari, et elle est lue / écrite dans Internet Explorer.

+ +

spécification

+ +

Href

diff --git a/files/fr/web/api/stylesheet/index.html b/files/fr/web/api/stylesheet/index.html deleted file mode 100644 index 6732be552d..0000000000 --- a/files/fr/web/api/stylesheet/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: StyleSheet -slug: Web/API/StyleSheet -tags: - - API - - CSS - - DOM - - Interface - - StyleSheet -translation_of: Web/API/StyleSheet ---- -
{{APIRef("CSSOM")}}
- -

Un objet qui implémente l'interface StyleSheet représente une seule feuille de style. Les feuilles de style CSS implémenteront également l'interface plus spécialisée {{domxref("CSSStyleSheet")}}.

- -

Propriétés

- -
-
{{domxref("StyleSheet.disabled")}}
-
Un booléen ({{domxref("Boolean")}}) indiquant si la feuille de style est appliquée ou non.
-
{{domxref("StyleSheet.href")}} {{readonlyInline}}
-
Une chaîne de caractères ({{domxref("DOMString")}}) représentant l'emplacement de la feuille de style.
-
{{domxref("StyleSheet.media")}} {{readonlyInline}}
-
Une {{domxref("MediaList")}} représentant le média de destination pour les informations de style.
-
{{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}
-
Un objet {{domxref("Node")}} qui représente le nœud associant cette feuille de style avec le document courant.
-
{{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}
-
Un objet {{domxref("StyleSheet")}} qui inclut l'objet courant si ce dernier possède un parent ou null s'il n'y en a pas.
-
{{domxref("StyleSheet.title")}} {{readonlyInline}}
-
Une chaîne de caractères ({{domxref("DOMString")}}) indiquant le titre indicatif de la feuille de style courante.
-
{{domxref("StyleSheet.type")}} {{readonlyInline}}
-
Une chaîne de caractères {{domxref("DOMString")}} indiquant le langage de représentation pour cette feuille de style.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('CSSOM', '#stylesheet', 'StyleSheet')}}{{Spec2('CSSOM')}}Pas de changement depuis {{SpecName('DOM2 Style')}}.
{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet')}}{{Spec2('DOM2 Style')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.StyleSheet")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/stylesheet/index.md b/files/fr/web/api/stylesheet/index.md new file mode 100644 index 0000000000..6732be552d --- /dev/null +++ b/files/fr/web/api/stylesheet/index.md @@ -0,0 +1,67 @@ +--- +title: StyleSheet +slug: Web/API/StyleSheet +tags: + - API + - CSS + - DOM + - Interface + - StyleSheet +translation_of: Web/API/StyleSheet +--- +
{{APIRef("CSSOM")}}
+ +

Un objet qui implémente l'interface StyleSheet représente une seule feuille de style. Les feuilles de style CSS implémenteront également l'interface plus spécialisée {{domxref("CSSStyleSheet")}}.

+ +

Propriétés

+ +
+
{{domxref("StyleSheet.disabled")}}
+
Un booléen ({{domxref("Boolean")}}) indiquant si la feuille de style est appliquée ou non.
+
{{domxref("StyleSheet.href")}} {{readonlyInline}}
+
Une chaîne de caractères ({{domxref("DOMString")}}) représentant l'emplacement de la feuille de style.
+
{{domxref("StyleSheet.media")}} {{readonlyInline}}
+
Une {{domxref("MediaList")}} représentant le média de destination pour les informations de style.
+
{{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}
+
Un objet {{domxref("Node")}} qui représente le nœud associant cette feuille de style avec le document courant.
+
{{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}
+
Un objet {{domxref("StyleSheet")}} qui inclut l'objet courant si ce dernier possède un parent ou null s'il n'y en a pas.
+
{{domxref("StyleSheet.title")}} {{readonlyInline}}
+
Une chaîne de caractères ({{domxref("DOMString")}}) indiquant le titre indicatif de la feuille de style courante.
+
{{domxref("StyleSheet.type")}} {{readonlyInline}}
+
Une chaîne de caractères {{domxref("DOMString")}} indiquant le langage de représentation pour cette feuille de style.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('CSSOM', '#stylesheet', 'StyleSheet')}}{{Spec2('CSSOM')}}Pas de changement depuis {{SpecName('DOM2 Style')}}.
{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet')}}{{Spec2('DOM2 Style')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.StyleSheet")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/stylesheet/media/index.html b/files/fr/web/api/stylesheet/media/index.html deleted file mode 100644 index 5d750c2e9c..0000000000 --- a/files/fr/web/api/stylesheet/media/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: StyleSheet.media -slug: Web/API/StyleSheet/media -translation_of: Web/API/StyleSheet/media ---- -
{{APIRef ("CSSOM")}}
- -

Media spécifie le support de destination prévu pour les informations de style.

- -

Syntaxe

- -
Medium = stylesheet.media
-Stylesheet.media = medium
-
- -

Paramètres

- - - -

Exemple

- -
<Link rel = "StyleSheet" href = "document.css" type = "text / css" media = "screen" />
-
- -

Remarques

- -

La valeur par défaut pour les médias est "écran".

- -

spécification

- -

DOM Styles de niveau 2 - FEUILLE DE STYLES

diff --git a/files/fr/web/api/stylesheet/media/index.md b/files/fr/web/api/stylesheet/media/index.md new file mode 100644 index 0000000000..5d750c2e9c --- /dev/null +++ b/files/fr/web/api/stylesheet/media/index.md @@ -0,0 +1,33 @@ +--- +title: StyleSheet.media +slug: Web/API/StyleSheet/media +translation_of: Web/API/StyleSheet/media +--- +
{{APIRef ("CSSOM")}}
+ +

Media spécifie le support de destination prévu pour les informations de style.

+ +

Syntaxe

+ +
Medium = stylesheet.media
+Stylesheet.media = medium
+
+ +

Paramètres

+ + + +

Exemple

+ +
<Link rel = "StyleSheet" href = "document.css" type = "text / css" media = "screen" />
+
+ +

Remarques

+ +

La valeur par défaut pour les médias est "écran".

+ +

spécification

+ +

DOM Styles de niveau 2 - FEUILLE DE STYLES

diff --git a/files/fr/web/api/stylesheet/ownernode/index.html b/files/fr/web/api/stylesheet/ownernode/index.html deleted file mode 100644 index a0f97236f8..0000000000 --- a/files/fr/web/api/stylesheet/ownernode/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: StyleSheet.ownerNode -slug: Web/API/StyleSheet/ownerNode -translation_of: Web/API/StyleSheet/ownerNode ---- -
{{APIRef ("CSSOM")}}
- -

OwnerNode renvoie le noeud qui associe cette feuille de style au document.

- -

Syntaxe

- -
ObjRef = stylesheet.ownerNode
-
- -

Exemple

- -
<Html>
- <Head>
-  <Link rel = "StyleSheet" href = "example.css" type = "text / css" />
-  <Script>
-   Function stilo () {
-    Alerte (document.styleSheets [0] .ownerNode);
-   }
-  </ Script> 
- </ Head>
- <Body>
-   <Button onclick = "stilo ()"> ss </ button>
- </ Body>
-</ Html>
-// affiche "objet HTMLLinkElement"
-
- -

Remarques

- -

Pour HTML, ownerNode peut être l' élément LINK ou STYLE correspondant . Pour XML, il peut s'agir des instructions de traitement de liaison. Pour les feuilles de style qui sont incluses dans d'autres feuilles de style, la valeur de cet attribut est NULL.

- -

spécification

- -

DOM Styles de niveau 2 - FEUILLE DE STYLES

diff --git a/files/fr/web/api/stylesheet/ownernode/index.md b/files/fr/web/api/stylesheet/ownernode/index.md new file mode 100644 index 0000000000..a0f97236f8 --- /dev/null +++ b/files/fr/web/api/stylesheet/ownernode/index.md @@ -0,0 +1,39 @@ +--- +title: StyleSheet.ownerNode +slug: Web/API/StyleSheet/ownerNode +translation_of: Web/API/StyleSheet/ownerNode +--- +
{{APIRef ("CSSOM")}}
+ +

OwnerNode renvoie le noeud qui associe cette feuille de style au document.

+ +

Syntaxe

+ +
ObjRef = stylesheet.ownerNode
+
+ +

Exemple

+ +
<Html>
+ <Head>
+  <Link rel = "StyleSheet" href = "example.css" type = "text / css" />
+  <Script>
+   Function stilo () {
+    Alerte (document.styleSheets [0] .ownerNode);
+   }
+  </ Script> 
+ </ Head>
+ <Body>
+   <Button onclick = "stilo ()"> ss </ button>
+ </ Body>
+</ Html>
+// affiche "objet HTMLLinkElement"
+
+ +

Remarques

+ +

Pour HTML, ownerNode peut être l' élément LINK ou STYLE correspondant . Pour XML, il peut s'agir des instructions de traitement de liaison. Pour les feuilles de style qui sont incluses dans d'autres feuilles de style, la valeur de cet attribut est NULL.

+ +

spécification

+ +

DOM Styles de niveau 2 - FEUILLE DE STYLES

diff --git a/files/fr/web/api/stylesheet/parentstylesheet/index.html b/files/fr/web/api/stylesheet/parentstylesheet/index.html deleted file mode 100644 index 1f0d852edf..0000000000 --- a/files/fr/web/api/stylesheet/parentstylesheet/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: StyleSheet.parentStyleSheet -slug: Web/API/StyleSheet/parentStyleSheet -translation_of: Web/API/StyleSheet/parentStyleSheet ---- -
-
{{APIRef ("CSSOM")}}
-
- -

Renvoie la feuille de style qui inclut celle-ci, le cas échéant.

- -

Syntaxe

- -
ObjRef = stylesheet.parentStyleSheet
-
- -

Exemple

- -
// trouve la feuille de style de niveau supérieur
-If (stylesheet.parentStyleSheet) {
-    Feuille = stylesheet.parentStyleSheet;
-} autre {
-    Feuille = feuille de style;
-}
- -

Remarques

- -

Cette propriété renvoie NULL est la feuille de style actuelle est une feuille de style de haut niveau ou si l'inclusion de la feuille de style n'est pas prise en charge.

- -

spécification

- - diff --git a/files/fr/web/api/stylesheet/parentstylesheet/index.md b/files/fr/web/api/stylesheet/parentstylesheet/index.md new file mode 100644 index 0000000000..1f0d852edf --- /dev/null +++ b/files/fr/web/api/stylesheet/parentstylesheet/index.md @@ -0,0 +1,34 @@ +--- +title: StyleSheet.parentStyleSheet +slug: Web/API/StyleSheet/parentStyleSheet +translation_of: Web/API/StyleSheet/parentStyleSheet +--- +
+
{{APIRef ("CSSOM")}}
+
+ +

Renvoie la feuille de style qui inclut celle-ci, le cas échéant.

+ +

Syntaxe

+ +
ObjRef = stylesheet.parentStyleSheet
+
+ +

Exemple

+ +
// trouve la feuille de style de niveau supérieur
+If (stylesheet.parentStyleSheet) {
+    Feuille = stylesheet.parentStyleSheet;
+} autre {
+    Feuille = feuille de style;
+}
+ +

Remarques

+ +

Cette propriété renvoie NULL est la feuille de style actuelle est une feuille de style de haut niveau ou si l'inclusion de la feuille de style n'est pas prise en charge.

+ +

spécification

+ + diff --git a/files/fr/web/api/stylesheet/title/index.html b/files/fr/web/api/stylesheet/title/index.html deleted file mode 100644 index 2892d25b2f..0000000000 --- a/files/fr/web/api/stylesheet/title/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: StyleSheet.title -slug: Web/API/StyleSheet/title -translation_of: Web/API/StyleSheet/title ---- -
-
{{APIRef ("CSSOM")}}
-
- -

title Renvoie le titre de conseil de la feuille de style actuelle.

- -

Remarques

- -

Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "ownerNode")}}.

- -

spécification

- - diff --git a/files/fr/web/api/stylesheet/title/index.md b/files/fr/web/api/stylesheet/title/index.md new file mode 100644 index 0000000000..2892d25b2f --- /dev/null +++ b/files/fr/web/api/stylesheet/title/index.md @@ -0,0 +1,20 @@ +--- +title: StyleSheet.title +slug: Web/API/StyleSheet/title +translation_of: Web/API/StyleSheet/title +--- +
+
{{APIRef ("CSSOM")}}
+
+ +

title Renvoie le titre de conseil de la feuille de style actuelle.

+ +

Remarques

+ +

Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "ownerNode")}}.

+ +

spécification

+ + diff --git a/files/fr/web/api/stylesheet/type/index.html b/files/fr/web/api/stylesheet/type/index.html deleted file mode 100644 index 3b2ce12fe1..0000000000 --- a/files/fr/web/api/stylesheet/type/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: StyleSheet.type -slug: Web/API/StyleSheet/type -translation_of: Web/API/StyleSheet/type ---- -
{{APIRef ("CSSOM")}}
- -

Type spécifie la langue de la feuille de style pour cette feuille de style.

- -

Syntaxe

- -
String = stylesheet.type
-
- -

Exemple

- -
 Ss.type = "text / css";
-
- -

spécification

- -

type

diff --git a/files/fr/web/api/stylesheet/type/index.md b/files/fr/web/api/stylesheet/type/index.md new file mode 100644 index 0000000000..3b2ce12fe1 --- /dev/null +++ b/files/fr/web/api/stylesheet/type/index.md @@ -0,0 +1,22 @@ +--- +title: StyleSheet.type +slug: Web/API/StyleSheet/type +translation_of: Web/API/StyleSheet/type +--- +
{{APIRef ("CSSOM")}}
+ +

Type spécifie la langue de la feuille de style pour cette feuille de style.

+ +

Syntaxe

+ +
String = stylesheet.type
+
+ +

Exemple

+ +
 Ss.type = "text / css";
+
+ +

spécification

+ +

type

diff --git a/files/fr/web/api/stylesheetlist/index.html b/files/fr/web/api/stylesheetlist/index.html deleted file mode 100644 index 18336eada2..0000000000 --- a/files/fr/web/api/stylesheetlist/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: StyleSheetList -slug: Web/API/StyleSheetList -tags: - - API - - CSSDOM - - NeedsContent - - NeedsUpdate -translation_of: Web/API/StyleSheetList ---- -

{{APIRef("CSSOM")}}

- -

L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}.

- -

Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}. 

- -

Exemple

- -
// Récupère toutes les règles CSS du document en cours en utilisant les méthodes de Array
-var allCSS = [].slice.call(document.styleSheets)
-                     .reduce(function (prev, styleSheet) {
-        if (styleSheet.cssRules) {
-            return prev +
-                [].slice.call(styleSheet.cssRules)
-                        .reduce(function (prev, cssRule) {
-                    return prev + cssRule.cssText;
-                });
-        } else {
-            return prev;
-        }
-    });
diff --git a/files/fr/web/api/stylesheetlist/index.md b/files/fr/web/api/stylesheetlist/index.md new file mode 100644 index 0000000000..18336eada2 --- /dev/null +++ b/files/fr/web/api/stylesheetlist/index.md @@ -0,0 +1,31 @@ +--- +title: StyleSheetList +slug: Web/API/StyleSheetList +tags: + - API + - CSSDOM + - NeedsContent + - NeedsUpdate +translation_of: Web/API/StyleSheetList +--- +

{{APIRef("CSSOM")}}

+ +

L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}.

+ +

Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}. 

+ +

Exemple

+ +
// Récupère toutes les règles CSS du document en cours en utilisant les méthodes de Array
+var allCSS = [].slice.call(document.styleSheets)
+                     .reduce(function (prev, styleSheet) {
+        if (styleSheet.cssRules) {
+            return prev +
+                [].slice.call(styleSheet.cssRules)
+                        .reduce(function (prev, cssRule) {
+                    return prev + cssRule.cssText;
+                });
+        } else {
+            return prev;
+        }
+    });
diff --git a/files/fr/web/api/subtlecrypto/digest/index.html b/files/fr/web/api/subtlecrypto/digest/index.html deleted file mode 100644 index eee3e4668d..0000000000 --- a/files/fr/web/api/subtlecrypto/digest/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: SubtleCrypto.digest() -slug: Web/API/SubtleCrypto/digest -translation_of: Web/API/SubtleCrypto/digest ---- -
{{APIRef("Web Crypto API")}}{{SecureContext_header}}
- -

La méthode digest() de l'interface {{domxref("SubtleCrypto")}} génère un {{Glossary("digest")}} de la donnée fournie. Un condensé est une petite valeur de taille fixe issue d'une donnée de taille variable. Les condensés cryptographiques doivent résister à la collision, ce qui signifie qu'il doit être très difficile d'obtenir le même condensé à partir de deux entrés différentes.

- -

Il prend en argument un identifiant pour l'algorithme de condensé et les données à traiter. Il retourne une {{jsxref("Promise")}} qui contiendra le condensé.

- -

Syntaxe

- -
const digest = crypto.subtle.digest(algorithm, data);
-
- -

Paramètres

- - - -

Valeur retournée

- - - -

Algorithmes supportés

- -

Les algorithmes de condensé, aussi connue sous le nom de fonctions de hachage cryptographique, transforme un bloque de données de longueur arbitraire dans un résultat de taille fixe, souvent plus petit que l'entré. Ils ont de nombreuses utilisations en cryptographie.

- -

SHA-1

- -

Cet algorithme est spécifié dans FIPS 180-4, section 6.1, et produit un résultat de 160 bits de long.

- -
-

Attention : Cet algorithme est maintenant considérer comme vulnérable et ne doit pas être utilisé pour des applications cryptographiques.

-
- -

SHA-256

- -

Cet algorithme est spécifié dans FIPS 180-4, section 6.2, et produit un résultat de 256 bits de long.

- -

SHA-384

- -

Cet algorithme est spécifié dans FIPS 180-4, section 6.5, et produit un résultat de 384 bits de long.

- -

SHA-512

- -

Cet algorithme est spécifié dans FIPS 180-4, section 6.4, et produit un résultat de 512 bits de long.

- -
-

Note : Si vous cherchez à créer un condensé pour authentifié un message (HMAC), vous aurez plutôt besoin de SubtleCrypto.sign().

-
- -

Exemples

- -

Exemple basique

- -

Cet exemple encode un message, puis calcule le condensé avec SHA-256, enfin affiche la longueur du résultat.

- -
const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
-
-async function digestMessage(message) {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(message);
-  const hash = await crypto.subtle.digest('SHA-256', data);
-  return hash;
-}
-
-const digestBuffer = await digestMessage(text);
-console.log(digestBuffer.byteLength);
-
- -

Convertir un condensé vers une chaîne hexadécimale

- -

Le condensé est retourné sous forme d'un ArrayBuffer, mais la comparaison et l'affichage se fait souvent avec des chaînes hexadécimales. Cet exemple calcule un condensé puis converti l'ArrayBuffer vers une chaîne hexadécimale.

- -
const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
-
-async function digestMessage(message) {
-  const msgUint8 = new TextEncoder().encode(message);                           // encode comme (utf-8) Uint8Array
-  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // fait le condensé
-  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convertit le buffer en tableau d'octet
-  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convertit le tableau en chaîne hexadélimale
-  return hashHex;
-}
-
-const digestHex = await digestMessage(text);
-console.log(digestHex);
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationsStatueCommentaire
{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}{{Spec2('Web Crypto API')}}Définition intiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.SubtleCrypto.digest")}}

- -
-

Note : Dans Chrome 60, une fonctionnalité a été ajoutée qui désactive crypto.subtle pour les connexions non TLS.

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/subtlecrypto/digest/index.md b/files/fr/web/api/subtlecrypto/digest/index.md new file mode 100644 index 0000000000..eee3e4668d --- /dev/null +++ b/files/fr/web/api/subtlecrypto/digest/index.md @@ -0,0 +1,133 @@ +--- +title: SubtleCrypto.digest() +slug: Web/API/SubtleCrypto/digest +translation_of: Web/API/SubtleCrypto/digest +--- +
{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+ +

La méthode digest() de l'interface {{domxref("SubtleCrypto")}} génère un {{Glossary("digest")}} de la donnée fournie. Un condensé est une petite valeur de taille fixe issue d'une donnée de taille variable. Les condensés cryptographiques doivent résister à la collision, ce qui signifie qu'il doit être très difficile d'obtenir le même condensé à partir de deux entrés différentes.

+ +

Il prend en argument un identifiant pour l'algorithme de condensé et les données à traiter. Il retourne une {{jsxref("Promise")}} qui contiendra le condensé.

+ +

Syntaxe

+ +
const digest = crypto.subtle.digest(algorithm, data);
+
+ +

Paramètres

+ + + +

Valeur retournée

+ + + +

Algorithmes supportés

+ +

Les algorithmes de condensé, aussi connue sous le nom de fonctions de hachage cryptographique, transforme un bloque de données de longueur arbitraire dans un résultat de taille fixe, souvent plus petit que l'entré. Ils ont de nombreuses utilisations en cryptographie.

+ +

SHA-1

+ +

Cet algorithme est spécifié dans FIPS 180-4, section 6.1, et produit un résultat de 160 bits de long.

+ +
+

Attention : Cet algorithme est maintenant considérer comme vulnérable et ne doit pas être utilisé pour des applications cryptographiques.

+
+ +

SHA-256

+ +

Cet algorithme est spécifié dans FIPS 180-4, section 6.2, et produit un résultat de 256 bits de long.

+ +

SHA-384

+ +

Cet algorithme est spécifié dans FIPS 180-4, section 6.5, et produit un résultat de 384 bits de long.

+ +

SHA-512

+ +

Cet algorithme est spécifié dans FIPS 180-4, section 6.4, et produit un résultat de 512 bits de long.

+ +
+

Note : Si vous cherchez à créer un condensé pour authentifié un message (HMAC), vous aurez plutôt besoin de SubtleCrypto.sign().

+
+ +

Exemples

+ +

Exemple basique

+ +

Cet exemple encode un message, puis calcule le condensé avec SHA-256, enfin affiche la longueur du résultat.

+ +
const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
+
+async function digestMessage(message) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(message);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
+const digestBuffer = await digestMessage(text);
+console.log(digestBuffer.byteLength);
+
+ +

Convertir un condensé vers une chaîne hexadécimale

+ +

Le condensé est retourné sous forme d'un ArrayBuffer, mais la comparaison et l'affichage se fait souvent avec des chaînes hexadécimales. Cet exemple calcule un condensé puis converti l'ArrayBuffer vers une chaîne hexadécimale.

+ +
const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
+
+async function digestMessage(message) {
+  const msgUint8 = new TextEncoder().encode(message);                           // encode comme (utf-8) Uint8Array
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // fait le condensé
+  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convertit le buffer en tableau d'octet
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convertit le tableau en chaîne hexadélimale
+  return hashHex;
+}
+
+const digestHex = await digestMessage(text);
+console.log(digestHex);
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationsStatueCommentaire
{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}{{Spec2('Web Crypto API')}}Définition intiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.SubtleCrypto.digest")}}

+ +
+

Note : Dans Chrome 60, une fonctionnalité a été ajoutée qui désactive crypto.subtle pour les connexions non TLS.

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/subtlecrypto/index.html b/files/fr/web/api/subtlecrypto/index.html deleted file mode 100644 index b9cca851e9..0000000000 --- a/files/fr/web/api/subtlecrypto/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: SubtleCrypto -slug: Web/API/SubtleCrypto -tags: - - API - - Advanced - - Cryptography - - Encryption - - Interface - - NeedsTranslation - - Reference - - SubtleCrypto - - TopicStub - - Web Crypto API -translation_of: Web/API/SubtleCrypto ---- -
{{APIRef("Web Crypto API")}}{{SecureContext_header}}
- -

The SubtleCrypto interface of the Web Crypto API provides a number of low-level cryptographic functions. Access to the features of SubtleCrypto is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}.

- -
-

Warning: This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.

- -

Even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.

- -

Errors in security system design and implementation can make the security of the system completely ineffective.

- -

If you're not sure you know what you are doing, you probably shouldn't be using this API.

-
- -

Properties

- -

This interface doesn't inherit any properties, as it has no parent interface.

- -

Methods

- -

This interface doesn't inherit any methods, as it has no parent interface.

- -
-
{{domxref("SubtleCrypto.encrypt()")}}
-
Returns a {{jsxref("Promise")}} that fufills with the encrypted data corresponding to the clear text, algorithm, and key given as parameters.
-
{{domxref("SubtleCrypto.decrypt()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with the clear data corresponding to the encrypted text, algorithm, and key given as parameters.
-
{{domxref("SubtleCrypto.sign()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with the signature corresponding to the text, algorithm, and key given as parameters.
-
{{domxref("SubtleCrypto.verify()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with a {{jsxref("Boolean")}} value indicating if the signature given as a parameter matches the text, algorithm, and key that are also given as parameters.
-
{{domxref("SubtleCrypto.digest()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with a digest generated from the algorithm and text given as parameters.
-
{{domxref("SubtleCrypto.generateKey()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with a newly-generated {{domxref("CryptoKey")}}, for symmetrical algorithms, or a {{domxref("CryptoKeyPair")}}, containing two newly generated keys, for asymmetrical algorithms. These will match the algorithm, usages, and extractability given as parameters.
-
{{domxref("SubtleCrypto.deriveKey()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with a newly generated {{domxref("CryptoKey")}} derived from the master key and specific algorithm given as parameters.
-
{{domxref("SubtleCrypto.deriveBits()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with a newly generated buffer of pseudo-random bits derived from the master key and specific algorithm given as parameters.
-
{{domxref("SubtleCrypto.importKey()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters.
-
{{domxref("SubtleCrypto.exportKey()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with a buffer containing the key in the requested format.
-
{{domxref("SubtleCrypto.wrapKey()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with a wrapped symmetric key for usage (transfer and storage) in insecure environments. The wrapped key matches the format specified in the given parameters, and wrapping is done by the given wrapping key, using the specified algorithm.
-
{{domxref("SubtleCrypto.unwrapKey()")}}
-
Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the wrapped key given in the parameter.
-
- -

Using SubtleCrypto

- -

We can split the functions implemented by this API into two groups: cryptography functions and key management functions.

- -

Cryptography functions

- -

These are the functions you can use to implement security features such as privacy and authentication in a system. The SubtleCrypto API provides the following cryptography functions:

- -

* {{DOMxRef("SubtleCrypto.sign","sign()")}} and {{DOMxRef("SubtleCrypto.verify","verify()")}}: create and verify digital signatures.
- * {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} and {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: encrypt and decrypt data.
- * {{DOMxRef("SubtleCrypto.digest","digest()")}}: create a fixed-length, collision-resistant digest of some data.

- -

Key management functions

- -

Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the SubtleCrypto API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function.

- -

Generating and deriving keys

- -

The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object.

- -

The difference is that generateKey() will generate a new distinct key value each time you call it, while deriveKey() derives a key from some initial keying material. If you provide the same keying material to two separate calls to deriveKey(), you will get two CryptoKey objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data.

- -

Importing and exporting keys

- -

To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats.

- -

The inverse of exportKey() is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like PKCS #8 and JSON Web Key helps you do this. The exportKey() function exports the key in an unencrypted format.

- -

If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key".

- -

The inverse of wrapKey() is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key.

- -

Storing keys

- -

CryptoKey objects can be stored using the structured clone algorithm, meaning that you can store and retrieve them using standard web storage APIs. The specification expects that most developers will use the IndexedDB API to store CryptoKey objects.

- -

Supported algorithms

- -

The cryptographic functions provided by the Web Crypto API can be performed by one or more different cryptographic algorithms: the algorithm argument to the function indicates which algorithm to use. Some algorithms need extra parameters: in these cases the algorithm argument is a dictionary object that includes the extra parameters.

- -

The table below summarises which algorithms are suitable for which cryptographic operations:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

sign()

- -

verify()

- 		-

encrypt()

- -

decrypt()

- 		digest() -

deriveBits()

- -

deriveKey()

- 		-

wrapKey()

- -

unwrapKey()

-
RSASSA-PKCS1-v1_5✓
RSA-PSS✓
ECDSA✓
HMAC✓
RSA-OAEP✓✓
AES-CTR✓✓
AES-CBC✓✓
AES-GCM✓✓
SHA-1✓
SHA-256✓
SHA-384✓
SHA-512✓
ECDH✓
HKDF✓
PBKDF2✓
AES-KW✓
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}{{ Spec2('Web Crypto API') }}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.SubtleCrypto")}}

- -

See also

- - diff --git a/files/fr/web/api/subtlecrypto/index.md b/files/fr/web/api/subtlecrypto/index.md new file mode 100644 index 0000000000..b9cca851e9 --- /dev/null +++ b/files/fr/web/api/subtlecrypto/index.md @@ -0,0 +1,298 @@ +--- +title: SubtleCrypto +slug: Web/API/SubtleCrypto +tags: + - API + - Advanced + - Cryptography + - Encryption + - Interface + - NeedsTranslation + - Reference + - SubtleCrypto + - TopicStub + - Web Crypto API +translation_of: Web/API/SubtleCrypto +--- +
{{APIRef("Web Crypto API")}}{{SecureContext_header}}
+ +

The SubtleCrypto interface of the Web Crypto API provides a number of low-level cryptographic functions. Access to the features of SubtleCrypto is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}.

+ +
+

Warning: This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.

+ +

Even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.

+ +

Errors in security system design and implementation can make the security of the system completely ineffective.

+ +

If you're not sure you know what you are doing, you probably shouldn't be using this API.

+
+ +

Properties

+ +

This interface doesn't inherit any properties, as it has no parent interface.

+ +

Methods

+ +

This interface doesn't inherit any methods, as it has no parent interface.

+ +
+
{{domxref("SubtleCrypto.encrypt()")}}
+
Returns a {{jsxref("Promise")}} that fufills with the encrypted data corresponding to the clear text, algorithm, and key given as parameters.
+
{{domxref("SubtleCrypto.decrypt()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with the clear data corresponding to the encrypted text, algorithm, and key given as parameters.
+
{{domxref("SubtleCrypto.sign()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with the signature corresponding to the text, algorithm, and key given as parameters.
+
{{domxref("SubtleCrypto.verify()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with a {{jsxref("Boolean")}} value indicating if the signature given as a parameter matches the text, algorithm, and key that are also given as parameters.
+
{{domxref("SubtleCrypto.digest()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with a digest generated from the algorithm and text given as parameters.
+
{{domxref("SubtleCrypto.generateKey()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with a newly-generated {{domxref("CryptoKey")}}, for symmetrical algorithms, or a {{domxref("CryptoKeyPair")}}, containing two newly generated keys, for asymmetrical algorithms. These will match the algorithm, usages, and extractability given as parameters.
+
{{domxref("SubtleCrypto.deriveKey()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with a newly generated {{domxref("CryptoKey")}} derived from the master key and specific algorithm given as parameters.
+
{{domxref("SubtleCrypto.deriveBits()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with a newly generated buffer of pseudo-random bits derived from the master key and specific algorithm given as parameters.
+
{{domxref("SubtleCrypto.importKey()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters.
+
{{domxref("SubtleCrypto.exportKey()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with a buffer containing the key in the requested format.
+
{{domxref("SubtleCrypto.wrapKey()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with a wrapped symmetric key for usage (transfer and storage) in insecure environments. The wrapped key matches the format specified in the given parameters, and wrapping is done by the given wrapping key, using the specified algorithm.
+
{{domxref("SubtleCrypto.unwrapKey()")}}
+
Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the wrapped key given in the parameter.
+
+ +

Using SubtleCrypto

+ +

We can split the functions implemented by this API into two groups: cryptography functions and key management functions.

+ +

Cryptography functions

+ +

These are the functions you can use to implement security features such as privacy and authentication in a system. The SubtleCrypto API provides the following cryptography functions:

+ +

* {{DOMxRef("SubtleCrypto.sign","sign()")}} and {{DOMxRef("SubtleCrypto.verify","verify()")}}: create and verify digital signatures.
+ * {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} and {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: encrypt and decrypt data.
+ * {{DOMxRef("SubtleCrypto.digest","digest()")}}: create a fixed-length, collision-resistant digest of some data.

+ +

Key management functions

+ +

Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the SubtleCrypto API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function.

+ +

Generating and deriving keys

+ +

The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object.

+ +

The difference is that generateKey() will generate a new distinct key value each time you call it, while deriveKey() derives a key from some initial keying material. If you provide the same keying material to two separate calls to deriveKey(), you will get two CryptoKey objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data.

+ +

Importing and exporting keys

+ +

To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats.

+ +

The inverse of exportKey() is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like PKCS #8 and JSON Web Key helps you do this. The exportKey() function exports the key in an unencrypted format.

+ +

If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key".

+ +

The inverse of wrapKey() is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key.

+ +

Storing keys

+ +

CryptoKey objects can be stored using the structured clone algorithm, meaning that you can store and retrieve them using standard web storage APIs. The specification expects that most developers will use the IndexedDB API to store CryptoKey objects.

+ +

Supported algorithms

+ +

The cryptographic functions provided by the Web Crypto API can be performed by one or more different cryptographic algorithms: the algorithm argument to the function indicates which algorithm to use. Some algorithms need extra parameters: in these cases the algorithm argument is a dictionary object that includes the extra parameters.

+ +

The table below summarises which algorithms are suitable for which cryptographic operations:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

sign()

+ +

verify()

+ 		+

encrypt()

+ +

decrypt()

+ 		digest() +

deriveBits()

+ +

deriveKey()

+ 		+

wrapKey()

+ +

unwrapKey()

+
RSASSA-PKCS1-v1_5✓
RSA-PSS✓
ECDSA✓
HMAC✓
RSA-OAEP✓✓
AES-CTR✓✓
AES-CBC✓✓
AES-GCM✓✓
SHA-1✓
SHA-256✓
SHA-384✓
SHA-512✓
ECDH✓
HKDF✓
PBKDF2✓
AES-KW✓
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}{{ Spec2('Web Crypto API') }}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.SubtleCrypto")}}

+ +

See also

+ + diff --git a/files/fr/web/api/svgaelement/index.html b/files/fr/web/api/svgaelement/index.html deleted file mode 100644 index 90e403be20..0000000000 --- a/files/fr/web/api/svgaelement/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: SVGAElement -slug: Web/API/SVGAElement -tags: - - API - - Reference - - SVG - - SVG DOM - - WebAPI -translation_of: Web/API/SVGAElement ---- -

SVG a DOM interface

-

L'interface SVGAElement fournit un accès aux propriétés des éléments {{ SVGElement("a") }} ainsi qu'aux méthodes pour les manipuler.

-

Interface overview

- - - - - - - - - - - - - - - - - - - -
Egalement implémenté{{ domxref("SVGElement") }}, {{ domxref("SVGURIReference") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}
MethodesAucune
Propriétés -
    -
  • lectureseule{{ domxref("SVGAnimatedString") }} cible
    • -
-
Document NormativeSVG 1.1 (2nd Edition)
-

Propriétés

- - - - - - - - - - - - - - - -
NomTypeDescription
cible{{ domxref("SVGAnimatedString") }}Correspond à attribuer {{ SVGAttr("cible") }} sur l'élément {{ SVGElement("a") }} donné.
- -

Methodes

- -

L'interface SVGAElement ne fournit aucune méthode spécifique.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("SVG2", "linking.html#InterfaceSVGAElement")}}{{Spec2("SVG2")}}Remplacement de l'héritage de {{domxref("SVGElement")}} par {{domxref("SVGGraphicsElement")}} et suppression des implémentations d'interface de {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}}, et {{domxref("SVGTransformable")}} par {{domxref("HTMLHyperlinkElementUtils")}}
{{SpecName("SVG1.1", "linking.html#InterfaceSVGAElement")}}{{Spec2("SVG1.1")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.SVGAElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/svgaelement/index.md b/files/fr/web/api/svgaelement/index.md new file mode 100644 index 0000000000..90e403be20 --- /dev/null +++ b/files/fr/web/api/svgaelement/index.md @@ -0,0 +1,93 @@ +--- +title: SVGAElement +slug: Web/API/SVGAElement +tags: + - API + - Reference + - SVG + - SVG DOM + - WebAPI +translation_of: Web/API/SVGAElement +--- +

SVG a DOM interface

+

L'interface SVGAElement fournit un accès aux propriétés des éléments {{ SVGElement("a") }} ainsi qu'aux méthodes pour les manipuler.

+

Interface overview

+ + + + + + + + + + + + + + + + + + + +
Egalement implémenté{{ domxref("SVGElement") }}, {{ domxref("SVGURIReference") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}
MethodesAucune
Propriétés +
    +
  • lectureseule{{ domxref("SVGAnimatedString") }} cible
    • +
+
Document NormativeSVG 1.1 (2nd Edition)
+

Propriétés

+ + + + + + + + + + + + + + + +
NomTypeDescription
cible{{ domxref("SVGAnimatedString") }}Correspond à attribuer {{ SVGAttr("cible") }} sur l'élément {{ SVGElement("a") }} donné.
+ +

Methodes

+ +

L'interface SVGAElement ne fournit aucune méthode spécifique.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "linking.html#InterfaceSVGAElement")}}{{Spec2("SVG2")}}Remplacement de l'héritage de {{domxref("SVGElement")}} par {{domxref("SVGGraphicsElement")}} et suppression des implémentations d'interface de {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}}, et {{domxref("SVGTransformable")}} par {{domxref("HTMLHyperlinkElementUtils")}}
{{SpecName("SVG1.1", "linking.html#InterfaceSVGAElement")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.SVGAElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/svgdescelement/index.html b/files/fr/web/api/svgdescelement/index.html deleted file mode 100644 index c09d0a8f4e..0000000000 --- a/files/fr/web/api/svgdescelement/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: SVGDescElement -slug: Web/API/SVGDescElement -tags: - - API - - Reference - - SVG - - SVG DOM -translation_of: Web/API/SVGDescElement ---- -
{{APIRef("SVG")}}
- -

L'interface SVGDescElement correspond à l'élément {{SVGElement("desc")}}.

- -

{{InheritanceDiagram(600, 140)}}

- -

Propriétés

- -

Cette interface hérite des propriétés fournies par son parent {{domxref("SVGGeometryElement")}}.

- -

Méthodes

- -

Cette interface n'a pas de méthode propre mais hérite des méthodes de son parent {{domxref("SVGGeometryElement")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("SVG2", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}}{{Spec2("SVG2")}}Retrait de l'héritage depuis {{domxref("SVGLangSpace")}} et {{domxref("SVGStylable")}}
{{SpecName("SVG1.1", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}}{{Spec2("SVG1.1")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.SVGDescElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/svgdescelement/index.md b/files/fr/web/api/svgdescelement/index.md new file mode 100644 index 0000000000..c09d0a8f4e --- /dev/null +++ b/files/fr/web/api/svgdescelement/index.md @@ -0,0 +1,57 @@ +--- +title: SVGDescElement +slug: Web/API/SVGDescElement +tags: + - API + - Reference + - SVG + - SVG DOM +translation_of: Web/API/SVGDescElement +--- +
{{APIRef("SVG")}}
+ +

L'interface SVGDescElement correspond à l'élément {{SVGElement("desc")}}.

+ +

{{InheritanceDiagram(600, 140)}}

+ +

Propriétés

+ +

Cette interface hérite des propriétés fournies par son parent {{domxref("SVGGeometryElement")}}.

+ +

Méthodes

+ +

Cette interface n'a pas de méthode propre mais hérite des méthodes de son parent {{domxref("SVGGeometryElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("SVG2", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}}{{Spec2("SVG2")}}Retrait de l'héritage depuis {{domxref("SVGLangSpace")}} et {{domxref("SVGStylable")}}
{{SpecName("SVG1.1", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}}{{Spec2("SVG1.1")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.SVGDescElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/svgelement/index.html b/files/fr/web/api/svgelement/index.html deleted file mode 100644 index 031175c330..0000000000 --- a/files/fr/web/api/svgelement/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: SVGElement -slug: Web/API/SVGElement -tags: - - Reference -translation_of: Web/API/SVGElement ---- -

Interface d'élément SVG

-

Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface SVGElement.

-

Vue d'ensemble de l'interface

- - - - - - - - - - - - - - - - - - - -
Implémente aussiVoir l'interface générique DOM {{ domxref("Element") }}.
MéthodesAucune
Propriétés -
    -
  • readonly {{ domxref("DOMString") }} id
    • -
  • readonly {{ domxref("DOMString") }} xmlbase
    • -
  • readonly {{ domxref("SVGSVGElement") }} ownerSVGElement
    • -
  • readonly {{ domxref("SVGElement") }} viewportElement
    • -
-
Normative documentSVG 1.1 (2nd Edition)
-

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomTypeDescription
id{{ domxref("DOMString") }}La valeur de l'attribut {{ SVGAttr("id") }} de l'élément, ou une chaîne vide si id n'est pas présent.
xmlbase{{ domxref("DOMString") }}Correspond à l'attribut {{ SVGAttr("xml:base") }} de l'élément.
ownerSVGElement{{ domxref("SVGSVGElement") }} -

L'élément {{ SVGElement("svg") }} parent le plus près. Null si l'élément est l'élément svg le plus à l'extérieur.

-
viewportElement{{ domxref("SVGElement") }} -

L'élément qui a établi la fenêtre actuelle. Souvent l'élément parent {{ SVGElement("svg") }} le plus prêt. Null si l'élément est l'élément svg le plus à l'extérieur.

-
-

Méthodes

-

L'interface SVGElement ne possède aucune méthode spécifique.

- -

Compatibilité des navigateurs

- -

{{Compat("api.SVGElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/svgelement/index.md b/files/fr/web/api/svgelement/index.md new file mode 100644 index 0000000000..031175c330 --- /dev/null +++ b/files/fr/web/api/svgelement/index.md @@ -0,0 +1,85 @@ +--- +title: SVGElement +slug: Web/API/SVGElement +tags: + - Reference +translation_of: Web/API/SVGElement +--- +

Interface d'élément SVG

+

Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface SVGElement.

+

Vue d'ensemble de l'interface

+ + + + + + + + + + + + + + + + + + + +
Implémente aussiVoir l'interface générique DOM {{ domxref("Element") }}.
MéthodesAucune
Propriétés +
    +
  • readonly {{ domxref("DOMString") }} id
    • +
  • readonly {{ domxref("DOMString") }} xmlbase
    • +
  • readonly {{ domxref("SVGSVGElement") }} ownerSVGElement
    • +
  • readonly {{ domxref("SVGElement") }} viewportElement
    • +
+
Normative documentSVG 1.1 (2nd Edition)
+

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomTypeDescription
id{{ domxref("DOMString") }}La valeur de l'attribut {{ SVGAttr("id") }} de l'élément, ou une chaîne vide si id n'est pas présent.
xmlbase{{ domxref("DOMString") }}Correspond à l'attribut {{ SVGAttr("xml:base") }} de l'élément.
ownerSVGElement{{ domxref("SVGSVGElement") }} +

L'élément {{ SVGElement("svg") }} parent le plus près. Null si l'élément est l'élément svg le plus à l'extérieur.

+
viewportElement{{ domxref("SVGElement") }} +

L'élément qui a établi la fenêtre actuelle. Souvent l'élément parent {{ SVGElement("svg") }} le plus prêt. Null si l'élément est l'élément svg le plus à l'extérieur.

+
+

Méthodes

+

L'interface SVGElement ne possède aucune méthode spécifique.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.SVGElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/svgmatrix/index.html b/files/fr/web/api/svgmatrix/index.html deleted file mode 100644 index 374dd11c20..0000000000 --- a/files/fr/web/api/svgmatrix/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: SVGMatrix -slug: Web/API/SVGMatrix -tags: - - Matrice - - Reference -translation_of: Web/API/SVGMatrix ---- -

Interface SVG matrix

- -

Beaucoup d'opération graphiques de SVG utilisent des matrices 2x3 de la forme :

- -
[a c e]
-[b d f]
- -

laquelle, quand étendue en une matrice 3x3 à des fins d'arithmétique matricielle, devient :

- -
[a c e]
-[b d f]
-[0 0 1]
-
- -

Un objet SVGMatrix peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.

- -

Vue d'ensemble de l'interface

- - - - - - - - - - - - - - - - - - - - -
Implémente aussiAucune
Méthodes -
    -
  • {{ domxref("SVGMatrix") }} multiply(in {{ domxref("SVGMatrix") }} secondMatrix)
    • -
  • {{ domxref("SVGMatrix") }} inverse()
    • -
  • {{ domxref("SVGMatrix") }} translate(in float x, in float y)
    • -
  • {{ domxref("SVGMatrix") }} scale(in float scaleFactor)
    • -
  • {{ domxref("SVGMatrix") }} scaleNonUniform(in float scaleFactorX, in float scaleFactorY)
    • -
  • {{ domxref("SVGMatrix") }} rotate(in float angle)
    • -
  • {{ domxref("SVGMatrix") }} rotateFromVector(in float x, in float y)
    • -
  • {{ domxref("SVGMatrix") }} flipX()
    • -
  • {{ domxref("SVGMatrix") }} flipY()
    • -
  • {{ domxref("SVGMatrix") }} skewX(in float angle)
    • -
  • {{ domxref("SVGMatrix") }} skewY(in float angle)
    • -
-
Propriétés -
    -
  • float a
    • -
  • float b
    • -
  • float c
    • -
  • float d
    • -
  • float e
    • -
  • float f
    • -
-
Document normatifSVG 1.1 (2nd Edition)
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomTypeDescription
afloatLe composant a de la matrice.
bfloatLe composant b de la matrice.
cfloatLe composant c de la matrice.
dfloatLe composant d de la matrice.
efloatLe composant e de la matrice.
ffloatLe composant f de la matrice.
- -

Une {{ domxref("DOMException") }} avec le code NO_MODIFICATION_ALLOWED_ERR est levée lors d'une tentative de modification d'un attribut en lecture-seule ou quand l'objet lui-même est en lecture-seule.

- -

Méthodes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom & ArgumentsRetourneDescription
multiply(in {{ domxref("SVGMatrix") }} secondMatrix){{ domxref("SVGMatrix") }}Effectue une multiplication de matrices. Cette matrice est multipliée par une autre matrice, retournant la nouvelle matrice résultante.
inverse(){{ domxref("SVGMatrix") }} -

Retourne la matrice inverse.

- -

Exceptions :

- -
    -
  • une {{ domxref("DOMException") }} avec le code SVG_MATRIX_NOT_INVERTABLE est levée si la matrice n'est pas inversible.
    • -
-
translate(in float x, in float y){{ domxref("SVGMatrix") }} -
Effectue une translation sur la matrice courante et retourne la matrice résultante.
-
scale(in float scaleFactor){{ domxref("SVGMatrix") }} -
Effectue une mise à l'échelle uniforme sur la matrice courante et retourne la matrice résultante.
-
scaleNonUniform(in float scaleFactorX, in float scaleFactorY){{ domxref("SVGMatrix") }} -
Effectue une mise à l'échelle non-uniforme sur la matrice courante et retourne la matrice résultante.
-
rotate(in float angle){{ domxref("SVGMatrix") }} -
Effectue une rotation sur la matrice courante et retourne la matrice résultante.
-
rotateFromVector(in float x, in float y){{ domxref("SVGMatrix") }} -

Effectue une rotation sur la matrice courante et retourne la matrice résultante. L'angle de rotation est déterminé en prenant (+/-) atan(y/x). La direction du vecteur (x, y) détermine si la valeur négative ou positive de l'angle est utilisée.

- -

Exceptions :

- -
    -
  • une {{ domxref("DOMException") }} avec le code SVG_INVALID_VALUE_ERR est levée si un de ces paramètres a une valeur invalide.
    • -
-
flipX(){{ domxref("SVGMatrix") }} -
Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice résultante.
-
flipY(){{ domxref("SVGMatrix") }} -
Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice résultante.
-
skewX(in float angle){{ domxref("SVGMatrix") }} -
Effectue une transformation de skewX sur la matrice courante et retourne la matrice résultante.
-
skewY(in float angle){{ domxref("SVGMatrix") }} -
Effectue une transformation de skewY sur la matrice courante et retourne la matrice résultante.
-
- -

Exceptions

- -

Une {{domxref("DOMException")}} avec le code NO_MODIFICATION_ALLOWED_ERR est levée lors d'une tentative de mise à jour d'un attribut en lecture seule ou lorsque l'objet lui-même est en lecture seule.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("SVG1.1", "coords.html#InterfaceSVGMatrix", "SVGMatrix")}}{{Spec2("SVG1.1")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.SVGMatrix")}}

diff --git a/files/fr/web/api/svgmatrix/index.md b/files/fr/web/api/svgmatrix/index.md new file mode 100644 index 0000000000..374dd11c20 --- /dev/null +++ b/files/fr/web/api/svgmatrix/index.md @@ -0,0 +1,243 @@ +--- +title: SVGMatrix +slug: Web/API/SVGMatrix +tags: + - Matrice + - Reference +translation_of: Web/API/SVGMatrix +--- +

Interface SVG matrix

+ +

Beaucoup d'opération graphiques de SVG utilisent des matrices 2x3 de la forme :

+ +
[a c e]
+[b d f]
+ +

laquelle, quand étendue en une matrice 3x3 à des fins d'arithmétique matricielle, devient :

+ +
[a c e]
+[b d f]
+[0 0 1]
+
+ +

Un objet SVGMatrix peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.

+ +

Vue d'ensemble de l'interface

+ + + + + + + + + + + + + + + + + + + + +
Implémente aussiAucune
Méthodes +
    +
  • {{ domxref("SVGMatrix") }} multiply(in {{ domxref("SVGMatrix") }} secondMatrix)
    • +
  • {{ domxref("SVGMatrix") }} inverse()
    • +
  • {{ domxref("SVGMatrix") }} translate(in float x, in float y)
    • +
  • {{ domxref("SVGMatrix") }} scale(in float scaleFactor)
    • +
  • {{ domxref("SVGMatrix") }} scaleNonUniform(in float scaleFactorX, in float scaleFactorY)
    • +
  • {{ domxref("SVGMatrix") }} rotate(in float angle)
    • +
  • {{ domxref("SVGMatrix") }} rotateFromVector(in float x, in float y)
    • +
  • {{ domxref("SVGMatrix") }} flipX()
    • +
  • {{ domxref("SVGMatrix") }} flipY()
    • +
  • {{ domxref("SVGMatrix") }} skewX(in float angle)
    • +
  • {{ domxref("SVGMatrix") }} skewY(in float angle)
    • +
+
Propriétés +
    +
  • float a
    • +
  • float b
    • +
  • float c
    • +
  • float d
    • +
  • float e
    • +
  • float f
    • +
+
Document normatifSVG 1.1 (2nd Edition)
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomTypeDescription
afloatLe composant a de la matrice.
bfloatLe composant b de la matrice.
cfloatLe composant c de la matrice.
dfloatLe composant d de la matrice.
efloatLe composant e de la matrice.
ffloatLe composant f de la matrice.
+ +

Une {{ domxref("DOMException") }} avec le code NO_MODIFICATION_ALLOWED_ERR est levée lors d'une tentative de modification d'un attribut en lecture-seule ou quand l'objet lui-même est en lecture-seule.

+ +

Méthodes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom & ArgumentsRetourneDescription
multiply(in {{ domxref("SVGMatrix") }} secondMatrix){{ domxref("SVGMatrix") }}Effectue une multiplication de matrices. Cette matrice est multipliée par une autre matrice, retournant la nouvelle matrice résultante.
inverse(){{ domxref("SVGMatrix") }} +

Retourne la matrice inverse.

+ +

Exceptions :

+ +
    +
  • une {{ domxref("DOMException") }} avec le code SVG_MATRIX_NOT_INVERTABLE est levée si la matrice n'est pas inversible.
    • +
+
translate(in float x, in float y){{ domxref("SVGMatrix") }} +
Effectue une translation sur la matrice courante et retourne la matrice résultante.
+
scale(in float scaleFactor){{ domxref("SVGMatrix") }} +
Effectue une mise à l'échelle uniforme sur la matrice courante et retourne la matrice résultante.
+
scaleNonUniform(in float scaleFactorX, in float scaleFactorY){{ domxref("SVGMatrix") }} +
Effectue une mise à l'échelle non-uniforme sur la matrice courante et retourne la matrice résultante.
+
rotate(in float angle){{ domxref("SVGMatrix") }} +
Effectue une rotation sur la matrice courante et retourne la matrice résultante.
+
rotateFromVector(in float x, in float y){{ domxref("SVGMatrix") }} +

Effectue une rotation sur la matrice courante et retourne la matrice résultante. L'angle de rotation est déterminé en prenant (+/-) atan(y/x). La direction du vecteur (x, y) détermine si la valeur négative ou positive de l'angle est utilisée.

+ +

Exceptions :

+ +
    +
  • une {{ domxref("DOMException") }} avec le code SVG_INVALID_VALUE_ERR est levée si un de ces paramètres a une valeur invalide.
    • +
+
flipX(){{ domxref("SVGMatrix") }} +
Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice résultante.
+
flipY(){{ domxref("SVGMatrix") }} +
Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice résultante.
+
skewX(in float angle){{ domxref("SVGMatrix") }} +
Effectue une transformation de skewX sur la matrice courante et retourne la matrice résultante.
+
skewY(in float angle){{ domxref("SVGMatrix") }} +
Effectue une transformation de skewY sur la matrice courante et retourne la matrice résultante.
+
+ +

Exceptions

+ +

Une {{domxref("DOMException")}} avec le code NO_MODIFICATION_ALLOWED_ERR est levée lors d'une tentative de mise à jour d'un attribut en lecture seule ou lorsque l'objet lui-même est en lecture seule.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG1.1", "coords.html#InterfaceSVGMatrix", "SVGMatrix")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.SVGMatrix")}}

diff --git a/files/fr/web/api/svgrect/index.html b/files/fr/web/api/svgrect/index.html deleted file mode 100644 index 96251b83cf..0000000000 --- a/files/fr/web/api/svgrect/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: SVGRect -slug: Web/API/SVGRect -tags: - - Rectangle -translation_of: Web/API/SVGRect ---- -

Interface SVG rect

- -

SVGRect représente la géométrie rectangulaire. Les rectangles consistent en une paire de coordonnées (x,y) correspondant à une valeur X minimale, une valeur Y minimale, et une largeur et hauteur, lesquelles sont habituellement positives.

- -

Un objet SVGRect peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.

- -

Vue d'ensemble de l'interface

- - - - - - - - - - - - - - - - - - - - -
Implémente aussiAucune
MéthodesAucune
Propriétés -
    -
  • float x
    • -
  • float y
    • -
  • float width
    • -
  • float height
    • -
-
Document normatifSVG 1.1 (2nd Edition)
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomTypeDescription
xfloatLa coordonnée x du rectangle, en unité utilisateur.
yfloatLa coordonnée y du rectangle, en unité utilisateur.
widthfloatLa largeur width du rectangle, en unité utilisateur.
heightfloatLa hauteur height du rectangle, en unité utilisateur.
- -

Exceptions à l'affectation : une DOMException avec le code NO_MODIFICATION_ALLOWED_ERR est levée lors d'une tentative de modification d'un attribut en lecture-seule.

- -

Méthodes

- -

L'interface SVGRect ne fournit pas de méthode spécifique.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Geometry Interfaces", "#DOMRect", "DOMRect")}}{{Spec2("Geometry Interfaces")}}Changement de SVGRect en tant qu'ancien alias de DOMRect.
{{SpecName("SVG1.1", "types.html#InterfaceSVGRect", "SVGRect")}}{{Spec2("SVG1.1")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.SVGRect")}}

diff --git a/files/fr/web/api/svgrect/index.md b/files/fr/web/api/svgrect/index.md new file mode 100644 index 0000000000..96251b83cf --- /dev/null +++ b/files/fr/web/api/svgrect/index.md @@ -0,0 +1,110 @@ +--- +title: SVGRect +slug: Web/API/SVGRect +tags: + - Rectangle +translation_of: Web/API/SVGRect +--- +

Interface SVG rect

+ +

SVGRect représente la géométrie rectangulaire. Les rectangles consistent en une paire de coordonnées (x,y) correspondant à une valeur X minimale, une valeur Y minimale, et une largeur et hauteur, lesquelles sont habituellement positives.

+ +

Un objet SVGRect peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.

+ +

Vue d'ensemble de l'interface

+ + + + + + + + + + + + + + + + + + + + +
Implémente aussiAucune
MéthodesAucune
Propriétés +
    +
  • float x
    • +
  • float y
    • +
  • float width
    • +
  • float height
    • +
+
Document normatifSVG 1.1 (2nd Edition)
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomTypeDescription
xfloatLa coordonnée x du rectangle, en unité utilisateur.
yfloatLa coordonnée y du rectangle, en unité utilisateur.
widthfloatLa largeur width du rectangle, en unité utilisateur.
heightfloatLa hauteur height du rectangle, en unité utilisateur.
+ +

Exceptions à l'affectation : une DOMException avec le code NO_MODIFICATION_ALLOWED_ERR est levée lors d'une tentative de modification d'un attribut en lecture-seule.

+ +

Méthodes

+ +

L'interface SVGRect ne fournit pas de méthode spécifique.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Geometry Interfaces", "#DOMRect", "DOMRect")}}{{Spec2("Geometry Interfaces")}}Changement de SVGRect en tant qu'ancien alias de DOMRect.
{{SpecName("SVG1.1", "types.html#InterfaceSVGRect", "SVGRect")}}{{Spec2("SVG1.1")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.SVGRect")}}

diff --git a/files/fr/web/api/svgrectelement/index.html b/files/fr/web/api/svgrectelement/index.html deleted file mode 100644 index 98104ed8b1..0000000000 --- a/files/fr/web/api/svgrectelement/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: SVGRectElement -slug: Web/API/SVGRectElement -translation_of: Web/API/SVGRectElement ---- -
{{APIRef("SVG")}}
- -

L'interface SVGRectElement fournit un accès aux propriétés et aux méthodes de l'élément {{SVGElement("rect")}}.

- -

{{InheritanceDiagram(600, 140)}}

- -

Propriétés

- -

Cette interface hérite aussi des propriétés de {{domxref("SVGGeometryElement")}}.

- -
-
{{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}
-
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.
-
{{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}
-
Retourne un {{domxref("SVGAnimatedLength")}}  correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.
-
{{domxref("SVGRectElement.y")}} {{ReadOnlyInline}}
-
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("y")}} de l'élément {{SVGElement("rect")}} donné.
-
{{domxref("SVGRectElement.width")}} {{ReadOnlyInline}}
-
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("width")}} de l'élément {{SVGElement("rect")}} donné.
-
{{domxref("SVGRectElement.height")}} {{ReadOnlyInline}}
-
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("height")}} de l'élément {{SVGElement("rect")}} donné.
-
{{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}}
-
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("rx")}} de l'élément {{SVGElement("rect")}} donné.
-
{{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}}
-
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("ry")}} de l'élément {{SVGElement("rect")}} donné.
-
- -

Méthode

- -

Cette interface n'implémente pas de méthodes spécifiques mais elle hérite des méthodes parentes de {{domxref("SVGGeometryElement")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("SVG2", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}{{Spec2('SVG2')}}Remplace l'héritage de {{domxref("SVGElement")}}{{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} et {{domxref("SVGTransformable")}} par {{domxref("SVGGeometryElement")}}
{{SpecName("SVG1.1", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}{{Spec2('SVG1.1')}}Définition initiale
- -

Browser compatibility

- - - -

{{Compat("api.SVGRectElement")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/svgrectelement/index.md b/files/fr/web/api/svgrectelement/index.md new file mode 100644 index 0000000000..98104ed8b1 --- /dev/null +++ b/files/fr/web/api/svgrectelement/index.md @@ -0,0 +1,69 @@ +--- +title: SVGRectElement +slug: Web/API/SVGRectElement +translation_of: Web/API/SVGRectElement +--- +
{{APIRef("SVG")}}
+ +

L'interface SVGRectElement fournit un accès aux propriétés et aux méthodes de l'élément {{SVGElement("rect")}}.

+ +

{{InheritanceDiagram(600, 140)}}

+ +

Propriétés

+ +

Cette interface hérite aussi des propriétés de {{domxref("SVGGeometryElement")}}.

+ +
+
{{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}
+
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.
+
{{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}
+
Retourne un {{domxref("SVGAnimatedLength")}}  correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.
+
{{domxref("SVGRectElement.y")}} {{ReadOnlyInline}}
+
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("y")}} de l'élément {{SVGElement("rect")}} donné.
+
{{domxref("SVGRectElement.width")}} {{ReadOnlyInline}}
+
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("width")}} de l'élément {{SVGElement("rect")}} donné.
+
{{domxref("SVGRectElement.height")}} {{ReadOnlyInline}}
+
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("height")}} de l'élément {{SVGElement("rect")}} donné.
+
{{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}}
+
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("rx")}} de l'élément {{SVGElement("rect")}} donné.
+
{{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}}
+
Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("ry")}} de l'élément {{SVGElement("rect")}} donné.
+
+ +

Méthode

+ +

Cette interface n'implémente pas de méthodes spécifiques mais elle hérite des méthodes parentes de {{domxref("SVGGeometryElement")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}{{Spec2('SVG2')}}Remplace l'héritage de {{domxref("SVGElement")}}{{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} et {{domxref("SVGTransformable")}} par {{domxref("SVGGeometryElement")}}
{{SpecName("SVG1.1", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}{{Spec2('SVG1.1')}}Définition initiale
+ +

Browser compatibility

+ + + +

{{Compat("api.SVGRectElement")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/svgtitleelement/index.html b/files/fr/web/api/svgtitleelement/index.html deleted file mode 100644 index 1a29aaefd1..0000000000 --- a/files/fr/web/api/svgtitleelement/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: SVGTitleElement -slug: Web/API/SVGTitleElement -tags: - - Interface Title SVG - - SVG - - SVG DOM - - Title -translation_of: Web/API/SVGTitleElement ---- -
{{APIRef("SVG")}}
- -

Interface DOM de l'élément SVG title

- -

L'interface SVGTitleElement correspond à l'élément {{ SVGElement("title") }}.

- -

Aperçu de l'interface

- - - - - - - - - - - - - - - - - - - - -
Implémente aussi{{ domxref("SVGElement") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGStylable") }}
MetodesAucunes
PropritiétésAucunes
NormeSVG 1.1 (2nd Edition)
- -

Propriétés

- -

L'interface SVGTitleElement n'a pas de propriétés spécifiques.

- -

Méthodes

- -

L'interface SVGTitleElement n'a pas de métodes spécifiques.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("SVG2", "struct.html#InterfaceSVGTitleElement", "SVGTitleElement")}}{{Spec2("SVG2")}}Suppression de l'héritage de {{domxref("SVGLangSpace")}} et {{domxref("SVGStylable")}}.
{{SpecName("SVG1.1", "struct.html#InterfaceSVGTitleElement", "SVGTitleElement")}}{{Spec2("SVG1.1")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.SVGTitleElement")}}

diff --git a/files/fr/web/api/svgtitleelement/index.md b/files/fr/web/api/svgtitleelement/index.md new file mode 100644 index 0000000000..1a29aaefd1 --- /dev/null +++ b/files/fr/web/api/svgtitleelement/index.md @@ -0,0 +1,74 @@ +--- +title: SVGTitleElement +slug: Web/API/SVGTitleElement +tags: + - Interface Title SVG + - SVG + - SVG DOM + - Title +translation_of: Web/API/SVGTitleElement +--- +
{{APIRef("SVG")}}
+ +

Interface DOM de l'élément SVG title

+ +

L'interface SVGTitleElement correspond à l'élément {{ SVGElement("title") }}.

+ +

Aperçu de l'interface

+ + + + + + + + + + + + + + + + + + + + +
Implémente aussi{{ domxref("SVGElement") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGStylable") }}
MetodesAucunes
PropritiétésAucunes
NormeSVG 1.1 (2nd Edition)
+ +

Propriétés

+ +

L'interface SVGTitleElement n'a pas de propriétés spécifiques.

+ +

Méthodes

+ +

L'interface SVGTitleElement n'a pas de métodes spécifiques.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("SVG2", "struct.html#InterfaceSVGTitleElement", "SVGTitleElement")}}{{Spec2("SVG2")}}Suppression de l'héritage de {{domxref("SVGLangSpace")}} et {{domxref("SVGStylable")}}.
{{SpecName("SVG1.1", "struct.html#InterfaceSVGTitleElement", "SVGTitleElement")}}{{Spec2("SVG1.1")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.SVGTitleElement")}}

diff --git a/files/fr/web/api/syncmanager/index.html b/files/fr/web/api/syncmanager/index.html deleted file mode 100644 index 494d730c82..0000000000 --- a/files/fr/web/api/syncmanager/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: SyncManager -slug: Web/API/SyncManager -translation_of: Web/API/SyncManager ---- -

{{APIRef("Service Workers API")}}{{Non-standard_header}}

- -

L'interface SyncManager de l' API ServiceWorker fournit une interface pour l'enregistrement et la liste des sync registrations.

- -

Properties

- -

None.

- -

Methods

- -
-
{{domxref("SyncManager.register")}}
-
Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}}
-
{{domxref("SyncManager.getTags")}}
-
Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement  du SyncManager.
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Background Sync','#sync-manager-interface','SyncManager')}}{{Spec2('Background Sync')}}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("api.SyncManager")}}

-
diff --git a/files/fr/web/api/syncmanager/index.md b/files/fr/web/api/syncmanager/index.md new file mode 100644 index 0000000000..494d730c82 --- /dev/null +++ b/files/fr/web/api/syncmanager/index.md @@ -0,0 +1,46 @@ +--- +title: SyncManager +slug: Web/API/SyncManager +translation_of: Web/API/SyncManager +--- +

{{APIRef("Service Workers API")}}{{Non-standard_header}}

+ +

L'interface SyncManager de l' API ServiceWorker fournit une interface pour l'enregistrement et la liste des sync registrations.

+ +

Properties

+ +

None.

+ +

Methods

+ +
+
{{domxref("SyncManager.register")}}
+
Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}}
+
{{domxref("SyncManager.getTags")}}
+
Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement  du SyncManager.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Background Sync','#sync-manager-interface','SyncManager')}}{{Spec2('Background Sync')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.SyncManager")}}

+
diff --git a/files/fr/web/api/text/index.html b/files/fr/web/api/text/index.html deleted file mode 100644 index 37dfffb61a..0000000000 --- a/files/fr/web/api/text/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Text -slug: Web/API/Text -tags: - - API - - DOM -translation_of: Web/API/Text ---- -

{{ApiRef("DOM")}}

- -

L'interface Text représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant Text qui contient le texte de l'élément.  Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds Text qui sont ses enfants.

- -

Un nouveau document a un unique noeud Text pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés Text en temps que modification du contenu du document.  La méthode {{domxref("Node.normalize()")}}  fusionne les objets Text  dans un seul noeud pour chaque bloc de texte.

- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
{{domxref("Text.Text", "Text()")}} {{experimental_inline}}
-
Retourne un noeud Text avec le paramètre comme contenu textuel.
-
- -

Propriétés

- -

Hérite des propriétés de son parent {{domxref("CharacterData")}}.

- -
-
{{domxref("Text.isElementContentWhitespace")}} {{readonlyInline}}{{ obsolete_inline() }}
-
-

Renvoie une marque {{domxref("Boolean")}} indiquant si le noeud de texte contient uniquement des espaces.

-
-
{{domxref("Text.wholeText")}} {{readonlyInline}}
-
Renvoie une {{domxref("DOMString")}} (chaîne de caractères) contenant le texte de tous les noeuds Text adjacents logiquement à ce {{domxref("Node")}}, concaténé dans l'ordre du document.
-
{{domxref("Text.assignedSlot")}} {{readonlyinline}}
-
Retourne l'objet {{domxref("HTMLSlotElement")}}  associé à l'élément.
-
- -

Méthodes

- -

Hérite des méthodes de son parent {{domxref("CharacterData")}}.

- -
-
- -
-
{{domxref("Text.replaceWholeText")}} {{ obsolete_inline() }}
-
Remplace le texte du noeud en cours et tous les noeuds logiquement adjacents avec le texte spécifié.
-
- -
-
{{domxref("Text.splitText")}}
-
Fractionne le noeud en deux noeuds selon un décalage spécifié.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#text', 'Text')}}{{Spec2('DOM WHATWG')}}Suppression de la propriété isElementContentWhitespace.
- Suppression de la méthode replaceWholeText().
- Ajout du constructeur Text().
- Ajout de la propriété assignedSlot.
{{SpecName('DOM3 Core', 'core.html#ID-1312295772', 'Text')}}{{Spec2('DOM3 Core')}}Ajout des propriétés isElementContentWhitespace et wholeText.
- Ajout de la méthode replaceWholeText().
{{SpecName('DOM2 Core', 'core.html#ID-1312295772', 'Text')}}{{Spec2('DOM2 Core')}}Pas de changement depuis {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-1312295772', 'Text')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Text")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/text/index.md b/files/fr/web/api/text/index.md new file mode 100644 index 0000000000..37dfffb61a --- /dev/null +++ b/files/fr/web/api/text/index.md @@ -0,0 +1,100 @@ +--- +title: Text +slug: Web/API/Text +tags: + - API + - DOM +translation_of: Web/API/Text +--- +

{{ApiRef("DOM")}}

+ +

L'interface Text représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant Text qui contient le texte de l'élément.  Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds Text qui sont ses enfants.

+ +

Un nouveau document a un unique noeud Text pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés Text en temps que modification du contenu du document.  La méthode {{domxref("Node.normalize()")}}  fusionne les objets Text  dans un seul noeud pour chaque bloc de texte.

+ +

{{InheritanceDiagram}}

+ +

Constructeur

+ +
+
{{domxref("Text.Text", "Text()")}} {{experimental_inline}}
+
Retourne un noeud Text avec le paramètre comme contenu textuel.
+
+ +

Propriétés

+ +

Hérite des propriétés de son parent {{domxref("CharacterData")}}.

+ +
+
{{domxref("Text.isElementContentWhitespace")}} {{readonlyInline}}{{ obsolete_inline() }}
+
+

Renvoie une marque {{domxref("Boolean")}} indiquant si le noeud de texte contient uniquement des espaces.

+
+
{{domxref("Text.wholeText")}} {{readonlyInline}}
+
Renvoie une {{domxref("DOMString")}} (chaîne de caractères) contenant le texte de tous les noeuds Text adjacents logiquement à ce {{domxref("Node")}}, concaténé dans l'ordre du document.
+
{{domxref("Text.assignedSlot")}} {{readonlyinline}}
+
Retourne l'objet {{domxref("HTMLSlotElement")}}  associé à l'élément.
+
+ +

Méthodes

+ +

Hérite des méthodes de son parent {{domxref("CharacterData")}}.

+ +
+
+ +
+
{{domxref("Text.replaceWholeText")}} {{ obsolete_inline() }}
+
Remplace le texte du noeud en cours et tous les noeuds logiquement adjacents avec le texte spécifié.
+
+ +
+
{{domxref("Text.splitText")}}
+
Fractionne le noeud en deux noeuds selon un décalage spécifié.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#text', 'Text')}}{{Spec2('DOM WHATWG')}}Suppression de la propriété isElementContentWhitespace.
+ Suppression de la méthode replaceWholeText().
+ Ajout du constructeur Text().
+ Ajout de la propriété assignedSlot.
{{SpecName('DOM3 Core', 'core.html#ID-1312295772', 'Text')}}{{Spec2('DOM3 Core')}}Ajout des propriétés isElementContentWhitespace et wholeText.
+ Ajout de la méthode replaceWholeText().
{{SpecName('DOM2 Core', 'core.html#ID-1312295772', 'Text')}}{{Spec2('DOM2 Core')}}Pas de changement depuis {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-1312295772', 'Text')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Text")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/text/splittext/index.html b/files/fr/web/api/text/splittext/index.html deleted file mode 100644 index 32b259df12..0000000000 --- a/files/fr/web/api/text/splittext/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Text.splitText() -slug: Web/API/Text/splitText -translation_of: Web/API/Text/splitText ---- -
{{apiref("DOM")}}
- -

La méthode Text.splitText() sépare le nœud {{domxref("Text")}} en deux nœuds au niveau de l’indice spécifié, et conserve les deux nœuds dans l’arbre en tant que voisins.

- -

Après la séparation, le nœud actuel contient tout le texte jusqu’à l’indice spécifié, et un nœud nouvellement créé du même type contient le texte restant. Le nœud nouvellement créé est retourné à l’appelant. Si le nœud original avait un parent, le nouveau nœud est inséré en tant que voisin suivant du nœud original. Si l’indice est égal à la longueur du nœud original, le nœud nouvellement créé ne contient pas de données.

- -

Des nœuds texte séparés peuvent être concaténés en utilisant la méthode {{domxref("Node.normalize()")}}.

- -

Une {{domxref("DOMException")}} avec la valeur INDEX_SIZE_ERR est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur NO_MODIFICATION_ALLOWED_ERR est levée si le nœud est en lecture seule.

- -

Syntaxe

- -
noeudRemplacant = noeudTexte.splitText(indice)
-
- -

Exemple

- -

Dans cet exemple, le nœud texte d’un {{HTMLElement("p")}} est séparé en deux nœuds texte et un {{HTMLElement("span")}} est inséré entre les deux.

- -
<body>
-  <p id="p">foobar</p>
-
-  <script type="text/javascript">
-    var p = document.getElementById('p');
-    var noeudTexte = p.firstChild;
-
-    // coupe entre foo et bar
-    var noeudRemplacant = noeudTexte.splitText(3);
-
-    // crée un span avec ' contenu du span '
-    var span = document.createElement('span');
-    span.appendChild(document.createTextNode(' contenu du span '));
-
-    // ajoute le span avant 'bar'
-    p.insertBefore(span, noeudRemplacant);
-
-    // le résultat est <p id="p">foo<span> contenu du span </span>bar</p>
-  </script>
-</body>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('DOM WHATWG', '#dom-text-splittext', 'Text.splitText')}}{{Spec2('DOM WHATWG')}}Pas de changement depuis {{SpecName('DOM3 Core')}}.
{{SpecName('DOM3 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}{{Spec2('DOM3 Core')}}Pas de changement depuis {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}{{Spec2('DOM2 Core')}}Pas de changement depuis {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-38853C1D', 'Text.splitText')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Text.splitText")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/text/splittext/index.md b/files/fr/web/api/text/splittext/index.md new file mode 100644 index 0000000000..32b259df12 --- /dev/null +++ b/files/fr/web/api/text/splittext/index.md @@ -0,0 +1,88 @@ +--- +title: Text.splitText() +slug: Web/API/Text/splitText +translation_of: Web/API/Text/splitText +--- +
{{apiref("DOM")}}
+ +

La méthode Text.splitText() sépare le nœud {{domxref("Text")}} en deux nœuds au niveau de l’indice spécifié, et conserve les deux nœuds dans l’arbre en tant que voisins.

+ +

Après la séparation, le nœud actuel contient tout le texte jusqu’à l’indice spécifié, et un nœud nouvellement créé du même type contient le texte restant. Le nœud nouvellement créé est retourné à l’appelant. Si le nœud original avait un parent, le nouveau nœud est inséré en tant que voisin suivant du nœud original. Si l’indice est égal à la longueur du nœud original, le nœud nouvellement créé ne contient pas de données.

+ +

Des nœuds texte séparés peuvent être concaténés en utilisant la méthode {{domxref("Node.normalize()")}}.

+ +

Une {{domxref("DOMException")}} avec la valeur INDEX_SIZE_ERR est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur NO_MODIFICATION_ALLOWED_ERR est levée si le nœud est en lecture seule.

+ +

Syntaxe

+ +
noeudRemplacant = noeudTexte.splitText(indice)
+
+ +

Exemple

+ +

Dans cet exemple, le nœud texte d’un {{HTMLElement("p")}} est séparé en deux nœuds texte et un {{HTMLElement("span")}} est inséré entre les deux.

+ +
<body>
+  <p id="p">foobar</p>
+
+  <script type="text/javascript">
+    var p = document.getElementById('p');
+    var noeudTexte = p.firstChild;
+
+    // coupe entre foo et bar
+    var noeudRemplacant = noeudTexte.splitText(3);
+
+    // crée un span avec ' contenu du span '
+    var span = document.createElement('span');
+    span.appendChild(document.createTextNode(' contenu du span '));
+
+    // ajoute le span avant 'bar'
+    p.insertBefore(span, noeudRemplacant);
+
+    // le résultat est <p id="p">foo<span> contenu du span </span>bar</p>
+  </script>
+</body>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('DOM WHATWG', '#dom-text-splittext', 'Text.splitText')}}{{Spec2('DOM WHATWG')}}Pas de changement depuis {{SpecName('DOM3 Core')}}.
{{SpecName('DOM3 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}{{Spec2('DOM3 Core')}}Pas de changement depuis {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}{{Spec2('DOM2 Core')}}Pas de changement depuis {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-38853C1D', 'Text.splitText')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Text.splitText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/textencoder/index.html b/files/fr/web/api/textencoder/index.html deleted file mode 100644 index 7fb51d5498..0000000000 --- a/files/fr/web/api/textencoder/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: TextEncoder -slug: Web/API/TextEncoder -tags: - - API - - Encoding - - Experimental - - Interface - - Reference - - TextEncoder -translation_of: Web/API/TextEncoder ---- -

{{APIRef("Encoding API")}}{{SeeCompatTable}}

- -

TextEncoder prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir StringView – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés.

- -
-

Note : Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que utf-8 (tels que utf-16, iso-8859-2, koi8, cp1261, et gbk). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 (ticket) et Opera 41, aucun type d'encodage autre que utf-8 n'est disponible, de manière à être en accord avec la spécification. Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage).

-
- -
-

Note : Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans GitHub.

-
- -

Constructeur

- -
-
{{DOMxRef("TextEncoder.TextEncoder", "TextEncoder()")}}
-
Retourne une nouvel objet TextEncoder qui génèrera un flux d'octets encodés en utf-8.
-
- -

Propriétés

- -

L'interface TextEncoder n'hérite d'aucune propriété.

- -
-
{{DOMxRef("TextEncoder.encoding")}}{{ReadOnlyInline}}
-
{{DOMxRef("DOMString")}} contenant le nom de l'encodeur, qui est une chaîne de caractères décrivant la méthode que l'objet TextEncoder utilisera.
-
- -

Méthodes

- -
-
- -

L'interface TextEncoder n'hérite d'aucune propriété.

- -
-
{{DOMxRef("TextEncoder.encode()")}}
-
Retourne un Uint8Array conternant un texte encodé en utf-8.
-
- -

Prothèse d'émulation

- -

La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹️). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like 0x1e << 3 into 0xf0. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works.

- -
if (typeof TextEncoder === "undefined") {
-    TextEncoder=function TextEncoder(){};
-    TextEncoder.prototype.encode = function encode(str) {
-        "use strict";
-        var Len = str.length, resPos = -1;
-        // The Uint8Array's length must be at least 3x the length of the string because an invalid UTF-16
-        //  takes up the equivelent space of 3 UTF-8 characters to encode it properly. However, Array's
-        //  have an auto expanding length and 1.5x should be just the right balance for most uses.
-        var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3);
-        for (var point=0, nextcode=0, i = 0; i !== Len; ) {
-            point = str.charCodeAt(i), i += 1;
-            if (point >= 0xD800 && point <= 0xDBFF) {
-                if (i === Len) {
-                    resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/;
-                    resArr[resPos += 1] = 0xbd/*0b10111101*/; break;
-                }
-                // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
-                nextcode = str.charCodeAt(i);
-                if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) {
-                    point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000;
-                    i += 1;
-                    if (point > 0xffff) {
-                        resArr[resPos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18);
-                        resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/);
-                        resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/);
-                        resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/);
-                        continue;
-                    }
-                } else {
-                    resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/;
-                    resArr[resPos += 1] = 0xbd/*0b10111101*/; continue;
-                }
-            }
-            if (point <= 0x007f) {
-                resArr[resPos += 1] = (0x0/*0b0*/<<7) | point;
-            } else if (point <= 0x07ff) {
-                resArr[resPos += 1] = (0x6/*0b110*/<<5) | (point>>>6);
-                resArr[resPos += 1] = (0x2/*0b10*/<<6)  | (point&0x3f/*0b00111111*/);
-            } else {
-                resArr[resPos += 1] = (0xe/*0b1110*/<<4) | (point>>>12);
-                resArr[resPos += 1] = (0x2/*0b10*/<<6)    | ((point>>>6)&0x3f/*0b00111111*/);
-                resArr[resPos += 1] = (0x2/*0b10*/<<6)    | (point&0x3f/*0b00111111*/);
-            }
-        }
-        if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1);
-        // else // IE 6-9
-        resArr.length = resPos + 1; // trim off extra weight
-        return resArr;
-    };
-    TextEncoder.prototype.toString = function(){return "[object TextEncoder]"};
-    try { // Object.defineProperty only works on DOM prototypes in IE8
-        Object.defineProperty(TextEncoder.prototype,"encoding",{
-            get:function(){if(TextEncoder.prototype.isPrototypeOf(this)) return"utf-8";
-                           else throw TypeError("Illegal invocation");}
-        });
-    } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; }
-    if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder";
-}
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Encoding", "#interface-textencoder", "TextEncoder")}}{{Spec2("Encoding")}}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("api.TextEncoder")}}

-
- -

See also

- - diff --git a/files/fr/web/api/textencoder/index.md b/files/fr/web/api/textencoder/index.md new file mode 100644 index 0000000000..7fb51d5498 --- /dev/null +++ b/files/fr/web/api/textencoder/index.md @@ -0,0 +1,149 @@ +--- +title: TextEncoder +slug: Web/API/TextEncoder +tags: + - API + - Encoding + - Experimental + - Interface + - Reference + - TextEncoder +translation_of: Web/API/TextEncoder +--- +

{{APIRef("Encoding API")}}{{SeeCompatTable}}

+ +

TextEncoder prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir StringView – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés.

+ +
+

Note : Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que utf-8 (tels que utf-16, iso-8859-2, koi8, cp1261, et gbk). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 (ticket) et Opera 41, aucun type d'encodage autre que utf-8 n'est disponible, de manière à être en accord avec la spécification. Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage).

+
+ +
+

Note : Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans GitHub.

+
+ +

Constructeur

+ +
+
{{DOMxRef("TextEncoder.TextEncoder", "TextEncoder()")}}
+
Retourne une nouvel objet TextEncoder qui génèrera un flux d'octets encodés en utf-8.
+
+ +

Propriétés

+ +

L'interface TextEncoder n'hérite d'aucune propriété.

+ +
+
{{DOMxRef("TextEncoder.encoding")}}{{ReadOnlyInline}}
+
{{DOMxRef("DOMString")}} contenant le nom de l'encodeur, qui est une chaîne de caractères décrivant la méthode que l'objet TextEncoder utilisera.
+
+ +

Méthodes

+ +
+
+ +

L'interface TextEncoder n'hérite d'aucune propriété.

+ +
+
{{DOMxRef("TextEncoder.encode()")}}
+
Retourne un Uint8Array conternant un texte encodé en utf-8.
+
+ +

Prothèse d'émulation

+ +

La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹️). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like 0x1e << 3 into 0xf0. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works.

+ +
if (typeof TextEncoder === "undefined") {
+    TextEncoder=function TextEncoder(){};
+    TextEncoder.prototype.encode = function encode(str) {
+        "use strict";
+        var Len = str.length, resPos = -1;
+        // The Uint8Array's length must be at least 3x the length of the string because an invalid UTF-16
+        //  takes up the equivelent space of 3 UTF-8 characters to encode it properly. However, Array's
+        //  have an auto expanding length and 1.5x should be just the right balance for most uses.
+        var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3);
+        for (var point=0, nextcode=0, i = 0; i !== Len; ) {
+            point = str.charCodeAt(i), i += 1;
+            if (point >= 0xD800 && point <= 0xDBFF) {
+                if (i === Len) {
+                    resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/;
+                    resArr[resPos += 1] = 0xbd/*0b10111101*/; break;
+                }
+                // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+                nextcode = str.charCodeAt(i);
+                if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) {
+                    point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000;
+                    i += 1;
+                    if (point > 0xffff) {
+                        resArr[resPos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18);
+                        resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/);
+                        resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/);
+                        resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/);
+                        continue;
+                    }
+                } else {
+                    resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/;
+                    resArr[resPos += 1] = 0xbd/*0b10111101*/; continue;
+                }
+            }
+            if (point <= 0x007f) {
+                resArr[resPos += 1] = (0x0/*0b0*/<<7) | point;
+            } else if (point <= 0x07ff) {
+                resArr[resPos += 1] = (0x6/*0b110*/<<5) | (point>>>6);
+                resArr[resPos += 1] = (0x2/*0b10*/<<6)  | (point&0x3f/*0b00111111*/);
+            } else {
+                resArr[resPos += 1] = (0xe/*0b1110*/<<4) | (point>>>12);
+                resArr[resPos += 1] = (0x2/*0b10*/<<6)    | ((point>>>6)&0x3f/*0b00111111*/);
+                resArr[resPos += 1] = (0x2/*0b10*/<<6)    | (point&0x3f/*0b00111111*/);
+            }
+        }
+        if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1);
+        // else // IE 6-9
+        resArr.length = resPos + 1; // trim off extra weight
+        return resArr;
+    };
+    TextEncoder.prototype.toString = function(){return "[object TextEncoder]"};
+    try { // Object.defineProperty only works on DOM prototypes in IE8
+        Object.defineProperty(TextEncoder.prototype,"encoding",{
+            get:function(){if(TextEncoder.prototype.isPrototypeOf(this)) return"utf-8";
+                           else throw TypeError("Illegal invocation");}
+        });
+    } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; }
+    if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder";
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Encoding", "#interface-textencoder", "TextEncoder")}}{{Spec2("Encoding")}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.TextEncoder")}}

+
+ +

See also

+ + diff --git a/files/fr/web/api/textencoder/textencoder/index.html b/files/fr/web/api/textencoder/textencoder/index.html deleted file mode 100644 index 739e661142..0000000000 --- a/files/fr/web/api/textencoder/textencoder/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: TextEncoder() -slug: Web/API/TextEncoder/TextEncoder -translation_of: Web/API/TextEncoder/TextEncoder ---- -

{{APIRef("Encoding API")}}

- -

Le constructeur TextEncoder() retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8.

- -

Syntaxe

- -
encoder = new TextEncoder();
-
- -

Paramètre

- - - -
-

Note : Avant Firefox 48 et Chrome 53, le nom de l'encodage était accepté comme un paramètre pour l'objet TextEncoder, depuis ces deux navigateurs ont supprimé le support pour les encodages autres que l'utf-8 afin de respecté les spécifications. N'importe quel indication d'encodage passé au constructeur sera ignoré et un utf-8 TextEncoder sera créé.

-
- -

Exceptions

- - - -
-

Note : Avant Firefox 48 et Chrome 53, une exception était levée pour les types d'encodage inconnu.

-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatuCommentaire
{{SpecName("Encoding", "#dom-textencoder", "TextEncoder()")}}{{Spec2("Encoding")}}Définition initiale
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.TextEncoder.TextEncoder")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/textencoder/textencoder/index.md b/files/fr/web/api/textencoder/textencoder/index.md new file mode 100644 index 0000000000..739e661142 --- /dev/null +++ b/files/fr/web/api/textencoder/textencoder/index.md @@ -0,0 +1,66 @@ +--- +title: TextEncoder() +slug: Web/API/TextEncoder/TextEncoder +translation_of: Web/API/TextEncoder/TextEncoder +--- +

{{APIRef("Encoding API")}}

+ +

Le constructeur TextEncoder() retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8.

+ +

Syntaxe

+ +
encoder = new TextEncoder();
+
+ +

Paramètre

+ + + +
+

Note : Avant Firefox 48 et Chrome 53, le nom de l'encodage était accepté comme un paramètre pour l'objet TextEncoder, depuis ces deux navigateurs ont supprimé le support pour les encodages autres que l'utf-8 afin de respecté les spécifications. N'importe quel indication d'encodage passé au constructeur sera ignoré et un utf-8 TextEncoder sera créé.

+
+ +

Exceptions

+ + + +
+

Note : Avant Firefox 48 et Chrome 53, une exception était levée pour les types d'encodage inconnu.

+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatuCommentaire
{{SpecName("Encoding", "#dom-textencoder", "TextEncoder()")}}{{Spec2("Encoding")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.TextEncoder.TextEncoder")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/textmetrics/index.html b/files/fr/web/api/textmetrics/index.html deleted file mode 100644 index 1343de3979..0000000000 --- a/files/fr/web/api/textmetrics/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: TextMetrics -slug: Web/API/TextMetrics -tags: - - API - - Canevas - - Reference - - TextMetrics -translation_of: Web/API/TextMetrics ---- -
{{APIRef("Canvas API")}}
- -

L'interface TextMetrics représente la dimension d'un texte dans le canevas, tel que créée par la méthode {{domxref ("CanvasRenderingContext2D.measureText()")}}.

- -

Propriétés

- -
-
{{domxref("TextMetrics.width")}} {{readonlyInline}}
-
est un double donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte.
-
{{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné.
-
{{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné.
-
{{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte.
-
{{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte.
-
{{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte.
-
{{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et  le bas du rectangle de délimitation utilisé pour restituer le texte.
-
{{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré em dans la boîte de ligne.
-
{{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré em dans la boîte de ligne.
-
{{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne.
-
{{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne.
-
{{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}}
-
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-canvas-element.html#textmetrics", "TextMetrics")}}{{Spec2('HTML WHATWG')}}Initial definition
- -

Compatibilité des navigateurs

- -

{{Compat("api.TextMetrics")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/textmetrics/index.md b/files/fr/web/api/textmetrics/index.md new file mode 100644 index 0000000000..1343de3979 --- /dev/null +++ b/files/fr/web/api/textmetrics/index.md @@ -0,0 +1,72 @@ +--- +title: TextMetrics +slug: Web/API/TextMetrics +tags: + - API + - Canevas + - Reference + - TextMetrics +translation_of: Web/API/TextMetrics +--- +
{{APIRef("Canvas API")}}
+ +

L'interface TextMetrics représente la dimension d'un texte dans le canevas, tel que créée par la méthode {{domxref ("CanvasRenderingContext2D.measureText()")}}.

+ +

Propriétés

+ +
+
{{domxref("TextMetrics.width")}} {{readonlyInline}}
+
est un double donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte.
+
{{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné.
+
{{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné.
+
{{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte.
+
{{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte.
+
{{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte.
+
{{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et  le bas du rectangle de délimitation utilisé pour restituer le texte.
+
{{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré em dans la boîte de ligne.
+
{{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré em dans la boîte de ligne.
+
{{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne.
+
{{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne.
+
{{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}}
+
est un double donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "the-canvas-element.html#textmetrics", "TextMetrics")}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TextMetrics")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/textmetrics/width/index.html b/files/fr/web/api/textmetrics/width/index.html deleted file mode 100644 index 69436e4cb2..0000000000 --- a/files/fr/web/api/textmetrics/width/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: TextMetrics.width -slug: Web/API/TextMetrics/width -tags: - - API - - Canevas - - Propriété - - Référence(2) - - TextMetrics -translation_of: Web/API/TextMetrics/width ---- -
{{APIRef("Canvas API")}}
- -

La propriété en lecture seule TextMetrics.width contient en pixels CSS la largeur d'avance du texte (la largeur de la boîte de ligne).

- -

Syntaxe

- -
readonly metrics.width;
- -

Exemples

- -

Étant donné cet élément {{HTMLElement("canvas")}} :

- -
<canvas id="canevas"></canvas>
-
- -

vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :

- -
var canvas = document.getElementById("canevas");
-var ctx = canvas.getContext("2d");
-
-var texte = ctx.measureText("foo"); // objet TextMetrics
-texte.width; // 16;
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.TextMetrics.width")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/textmetrics/width/index.md b/files/fr/web/api/textmetrics/width/index.md new file mode 100644 index 0000000000..69436e4cb2 --- /dev/null +++ b/files/fr/web/api/textmetrics/width/index.md @@ -0,0 +1,61 @@ +--- +title: TextMetrics.width +slug: Web/API/TextMetrics/width +tags: + - API + - Canevas + - Propriété + - Référence(2) + - TextMetrics +translation_of: Web/API/TextMetrics/width +--- +
{{APIRef("Canvas API")}}
+ +

La propriété en lecture seule TextMetrics.width contient en pixels CSS la largeur d'avance du texte (la largeur de la boîte de ligne).

+ +

Syntaxe

+ +
readonly metrics.width;
+ +

Exemples

+ +

Étant donné cet élément {{HTMLElement("canvas")}} :

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

vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :

+ +
var canvas = document.getElementById("canevas");
+var ctx = canvas.getContext("2d");
+
+var texte = ctx.measureText("foo"); // objet TextMetrics
+texte.width; // 16;
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TextMetrics.width")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/timeranges/index.html b/files/fr/web/api/timeranges/index.html deleted file mode 100644 index e2b8b214c4..0000000000 --- a/files/fr/web/api/timeranges/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: TimeRanges -slug: Web/API/TimeRanges -tags: - - API - - HTML DOM - - Interface - - NeedsBrowserCompatibility - - NeedsMarkupWork - - NeedsNewLayout - - NeedsSpecTable - - Reference - - Référence(2) -translation_of: Web/API/TimeRanges ---- -

{{ APIRef }}

- -

{{ gecko_minversion_header("2.0") }}

- -

L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}.

- -

Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer.

- -

Le terme "normalized TimeRanges object" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande).

- -

Propriétés

- - - - - - - - - - - - - - - - -
NomDescriptionType retournéDisponibilité
TimeRanges.length -

Le nombre de plages de temps contenues dans l'objet TimeRanges. Lecture seule.

- 		-

unsigned long

- 		?
- -

Méthodes

- -
-
{{ domxref("TimeRanges.start") }}
-
Retourne la position de début de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.
-
{{ domxref("TimeRanges.end") }}
-
Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.
-
- -

Spécification

- - diff --git a/files/fr/web/api/timeranges/index.md b/files/fr/web/api/timeranges/index.md new file mode 100644 index 0000000000..e2b8b214c4 --- /dev/null +++ b/files/fr/web/api/timeranges/index.md @@ -0,0 +1,62 @@ +--- +title: TimeRanges +slug: Web/API/TimeRanges +tags: + - API + - HTML DOM + - Interface + - NeedsBrowserCompatibility + - NeedsMarkupWork + - NeedsNewLayout + - NeedsSpecTable + - Reference + - Référence(2) +translation_of: Web/API/TimeRanges +--- +

{{ APIRef }}

+ +

{{ gecko_minversion_header("2.0") }}

+ +

L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}.

+ +

Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer.

+ +

Le terme "normalized TimeRanges object" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande).

+ +

Propriétés

+ + + + + + + + + + + + + + + + +
NomDescriptionType retournéDisponibilité
TimeRanges.length +

Le nombre de plages de temps contenues dans l'objet TimeRanges. Lecture seule.

+ 		+

unsigned long

+ 		?
+ +

Méthodes

+ +
+
{{ domxref("TimeRanges.start") }}
+
Retourne la position de début de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.
+
{{ domxref("TimeRanges.end") }}
+
Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.
+
+ +

Spécification

+ + diff --git a/files/fr/web/api/touch_events/index.html b/files/fr/web/api/touch_events/index.html deleted file mode 100644 index 5853459757..0000000000 --- a/files/fr/web/api/touch_events/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Événements tactiles / Touch events -slug: Web/API/Touch_events -tags: - - Tactile - - touch -translation_of: Web/API/Touch_events -original_slug: Web/Guide/DOM/Events/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/index.md b/files/fr/web/api/touch_events/index.md new file mode 100644 index 0000000000..5853459757 --- /dev/null +++ b/files/fr/web/api/touch_events/index.md @@ -0,0 +1,243 @@ +--- +title: Événements tactiles / Touch events +slug: Web/API/Touch_events +tags: + - Tactile + - touch +translation_of: Web/API/Touch_events +original_slug: Web/Guide/DOM/Events/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 deleted file mode 100644 index 51773f1c64..0000000000 --- a/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Gérer à la fois événement tactile et événement de la souris -slug: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent -translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent -original_slug: >- - Web/Guide/DOM/Events/Touch_events/Gérer_à_la_fois_événement_tactile_et_événement_de_la_souris ---- -

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

- - - -

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 :

- - - -

Community

- - - - - - diff --git a/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md new file mode 100644 index 0000000000..51773f1c64 --- /dev/null +++ b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md @@ -0,0 +1,65 @@ +--- +title: Gérer à la fois événement tactile et événement de la souris +slug: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent +translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent +original_slug: >- + Web/Guide/DOM/Events/Touch_events/Gérer_à_la_fois_événement_tactile_et_événement_de_la_souris +--- +

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

+ + + +

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 :

+ + + +

Community

+ + + + + + diff --git a/files/fr/web/api/transferable/index.html b/files/fr/web/api/transferable/index.html deleted file mode 100644 index 564d4e4b7f..0000000000 --- a/files/fr/web/api/transferable/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Transferable -slug: Web/API/Transferable -tags: - - API - - Interface - - Reference -translation_of: Web/API/Transferable ---- -

{{ ApiRef("HTML DOM") }}

- -

L'interface Transferable représente un objet qui peut être transféré entre différents contextes d'exécution, comme un thread principal et des web workers.

- -

C'est une interface abstraite et il n'y a aucun objet de ce type. Il ne définit pas non plus ni propriété ni méthode : c'est avant tout une étiquette pour signaler les objets qui peuvent être utilisés dans des conditions spécifiques, comme la possibilité d'être transféré à un {{domxref("Worker")}} au moyen de la méthode {{domxref("Worker.postMessage()")}}.

- -
-

Note : L'interface Transferable n'existe plus pour longtemps. La fonctionnalité des objets Transferable existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu [Transferable] {{Glossary("WebIDL")}})

-
- -

Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent.

- -

Propriétés

- -

L'interface Transferable n'implémente ou n'hérite d'aucune propriété spécifique.

- -

Méthodes

- -

L'interface Transferable n'implémente ou n'hérite d'aucune méthode spécifique.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "infrastructure.html#transferable-objects", "Transferable")}}{{Spec2('HTML WHATWG')}} -

Remplace l'interface Transferable avec l'attribut étendue [Transferable] Web IDL.

-
{{SpecName('HTML5 W3C', "infrastructure.html#transferable-objects", "Transferable")}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
-
- - -

{{Compat("api.Transferable")}}

-
-
- -

Voir aussi

- - diff --git a/files/fr/web/api/transferable/index.md b/files/fr/web/api/transferable/index.md new file mode 100644 index 0000000000..564d4e4b7f --- /dev/null +++ b/files/fr/web/api/transferable/index.md @@ -0,0 +1,68 @@ +--- +title: Transferable +slug: Web/API/Transferable +tags: + - API + - Interface + - Reference +translation_of: Web/API/Transferable +--- +

{{ ApiRef("HTML DOM") }}

+ +

L'interface Transferable représente un objet qui peut être transféré entre différents contextes d'exécution, comme un thread principal et des web workers.

+ +

C'est une interface abstraite et il n'y a aucun objet de ce type. Il ne définit pas non plus ni propriété ni méthode : c'est avant tout une étiquette pour signaler les objets qui peuvent être utilisés dans des conditions spécifiques, comme la possibilité d'être transféré à un {{domxref("Worker")}} au moyen de la méthode {{domxref("Worker.postMessage()")}}.

+ +
+

Note : L'interface Transferable n'existe plus pour longtemps. La fonctionnalité des objets Transferable existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu [Transferable] {{Glossary("WebIDL")}})

+
+ +

Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent.

+ +

Propriétés

+ +

L'interface Transferable n'implémente ou n'hérite d'aucune propriété spécifique.

+ +

Méthodes

+ +

L'interface Transferable n'implémente ou n'hérite d'aucune méthode spécifique.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "infrastructure.html#transferable-objects", "Transferable")}}{{Spec2('HTML WHATWG')}} +

Remplace l'interface Transferable avec l'attribut étendue [Transferable] Web IDL.

+
{{SpecName('HTML5 W3C', "infrastructure.html#transferable-objects", "Transferable")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+
+ + +

{{Compat("api.Transferable")}}

+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/transitionevent/index.html b/files/fr/web/api/transitionevent/index.html deleted file mode 100644 index 72c99a9f6b..0000000000 --- a/files/fr/web/api/transitionevent/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: TransitionEvent -slug: Web/API/TransitionEvent -translation_of: Web/API/TransitionEvent ---- -

{{APIRef("CSSOM")}} {{SeeCompatTable}}

- -

L' TransitionEventinterface représente des événements fournissant des informations relatives aux transitions .

- -

Propriétés

- -

Hérite également des propriétés de son parent {{domxref("Event")}} .

- -
-
{{domxref("TransitionEvent.propertyName")}} {{readonlyInline}}
-
Est-ce qu'un {{domxref("DOMString")}} contient le nom de la propriété CSS associée à la transition.
-
{{domxref("TransitionEvent.elapsedTime")}} {{readonlyInline}}
-
Est- floatce que la durée de l'exécution est en cours, en secondes, lorsque cet événement a été déclenché. Cette valeur n'est pas affectée par la propriété {{cssxref ("transition-delay")}}.
-
{{domxref("TransitionEvent.pseudoElement")}} {{readonlyInline}}
-
Est-ce qu'un {{domxref("DOMString")}}, commençant par '::', contenant le nom du pseudo-élément sur lequel s'exécute l'animation. Si la transition ne s'exécute pas sur un pseudo-élément mais sur l'élément, une chaîne vide:''.
-
- -

Constructeur

- -
-
{{domxref("TransitionEvent.TransitionEvent", "TransitionEvent ()")}}
-
Crée un TransitionEventévénement avec les paramètres donnés.
-
- -

Méthodes

- -

Hérite également des propriétés de son parent {{domxref("Event")}} .

- -
-
{{domxref("TransitionEvent.initTransitionEvent ()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Initialise un TransitionEventcréé en utilisant la méthode {{domxref("Document.createEvent ()")}} déconseillée.
-
- -

Caractéristiques

- - - - - - - - - - - - - - - - -
spécificationStatutCommentaire
{{SpecName ('Transitions CSS3', '# Événements-TransitionEvent', 'TransitionEvent')}}{{Spec2 ('Transitions CSS3')}}Définition initiale.
- -

Compatibilité du navigateur

- -

{{Compat}}

- -

Voir également

- - diff --git a/files/fr/web/api/transitionevent/index.md b/files/fr/web/api/transitionevent/index.md new file mode 100644 index 0000000000..72c99a9f6b --- /dev/null +++ b/files/fr/web/api/transitionevent/index.md @@ -0,0 +1,67 @@ +--- +title: TransitionEvent +slug: Web/API/TransitionEvent +translation_of: Web/API/TransitionEvent +--- +

{{APIRef("CSSOM")}} {{SeeCompatTable}}

+ +

L' TransitionEventinterface représente des événements fournissant des informations relatives aux transitions .

+ +

Propriétés

+ +

Hérite également des propriétés de son parent {{domxref("Event")}} .

+ +
+
{{domxref("TransitionEvent.propertyName")}} {{readonlyInline}}
+
Est-ce qu'un {{domxref("DOMString")}} contient le nom de la propriété CSS associée à la transition.
+
{{domxref("TransitionEvent.elapsedTime")}} {{readonlyInline}}
+
Est- floatce que la durée de l'exécution est en cours, en secondes, lorsque cet événement a été déclenché. Cette valeur n'est pas affectée par la propriété {{cssxref ("transition-delay")}}.
+
{{domxref("TransitionEvent.pseudoElement")}} {{readonlyInline}}
+
Est-ce qu'un {{domxref("DOMString")}}, commençant par '::', contenant le nom du pseudo-élément sur lequel s'exécute l'animation. Si la transition ne s'exécute pas sur un pseudo-élément mais sur l'élément, une chaîne vide:''.
+
+ +

Constructeur

+ +
+
{{domxref("TransitionEvent.TransitionEvent", "TransitionEvent ()")}}
+
Crée un TransitionEventévénement avec les paramètres donnés.
+
+ +

Méthodes

+ +

Hérite également des propriétés de son parent {{domxref("Event")}} .

+ +
+
{{domxref("TransitionEvent.initTransitionEvent ()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Initialise un TransitionEventcréé en utilisant la méthode {{domxref("Document.createEvent ()")}} déconseillée.
+
+ +

Caractéristiques

+ + + + + + + + + + + + + + + + +
spécificationStatutCommentaire
{{SpecName ('Transitions CSS3', '# Événements-TransitionEvent', 'TransitionEvent')}}{{Spec2 ('Transitions CSS3')}}Définition initiale.
+ +

Compatibilité du navigateur

+ +

{{Compat}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/treewalker/currentnode/index.html b/files/fr/web/api/treewalker/currentnode/index.html deleted file mode 100644 index 3af4a1f311..0000000000 --- a/files/fr/web/api/treewalker/currentnode/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: TreeWalker.currentNode -slug: Web/API/TreeWalker/currentNode -tags: - - API - - Arborescence - - DOM - - Noeuds - - Propriété -translation_of: Web/API/TreeWalker/currentNode ---- -

{{ APIRef("DOM") }}

- -

La propriété TreeWalker.currentNode représente le {{domxref("Node")}} (noeud) sur lequel le {{domxref("TreeWalker")}} est actuellement pointé.

- -

Syntaxe

- -
node = treeWalker.currentNode;
-treeWalker.currentNode = node;
-
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-root = treeWalker.currentNode; // l'élément racine car c'est le premier élément!
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-currentnode', 'TreeWalker.currrentNode')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-currentNode', 'TreeWalker.currentNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.currentNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/currentnode/index.md b/files/fr/web/api/treewalker/currentnode/index.md new file mode 100644 index 0000000000..3af4a1f311 --- /dev/null +++ b/files/fr/web/api/treewalker/currentnode/index.md @@ -0,0 +1,63 @@ +--- +title: TreeWalker.currentNode +slug: Web/API/TreeWalker/currentNode +tags: + - API + - Arborescence + - DOM + - Noeuds + - Propriété +translation_of: Web/API/TreeWalker/currentNode +--- +

{{ APIRef("DOM") }}

+ +

La propriété TreeWalker.currentNode représente le {{domxref("Node")}} (noeud) sur lequel le {{domxref("TreeWalker")}} est actuellement pointé.

+ +

Syntaxe

+ +
node = treeWalker.currentNode;
+treeWalker.currentNode = node;
+
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+root = treeWalker.currentNode; // l'élément racine car c'est le premier élément!
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-currentnode', 'TreeWalker.currrentNode')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-currentNode', 'TreeWalker.currentNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.currentNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/expandentityreferences/index.html b/files/fr/web/api/treewalker/expandentityreferences/index.html deleted file mode 100644 index ee9090b598..0000000000 --- a/files/fr/web/api/treewalker/expandentityreferences/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: TreeWalker.expandEntityReferences -slug: Web/API/TreeWalker/expandEntityReferences -tags: - - API - - Arborescence - - DOM - - Noeuds - - Propriétés -translation_of: Web/API/TreeWalker/expandEntityReferences ---- -

{{ APIRef("DOM") }}{{obsolete_header}}

- -

La propriété en lecture seule TreeWalker.expandEntityReferences renvoie un {{domxref("Boolean")}} (booléen) indiquant si les enfants des nœuds de référence d'entité sont visibles ou non pour le {{domxref("TreeWalker")}}.

- -

Si la valeur est false (faux), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("TreeWalker.whatToShow")}} et du filtre associé.

- -

Syntaxe

- -
expand = treeWalker.expandEntityReferences;
-
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-expand = treeWalker.expandEntityReferences;
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#treewalker', 'Treewalker')}}{{Spec2('DOM WHATWG')}}Suppression de la spécification.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-expandEntityReferences', 'TreeWalker.expandEntityReferences')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.expandEntityReferences")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/expandentityreferences/index.md b/files/fr/web/api/treewalker/expandentityreferences/index.md new file mode 100644 index 0000000000..ee9090b598 --- /dev/null +++ b/files/fr/web/api/treewalker/expandentityreferences/index.md @@ -0,0 +1,63 @@ +--- +title: TreeWalker.expandEntityReferences +slug: Web/API/TreeWalker/expandEntityReferences +tags: + - API + - Arborescence + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/TreeWalker/expandEntityReferences +--- +

{{ APIRef("DOM") }}{{obsolete_header}}

+ +

La propriété en lecture seule TreeWalker.expandEntityReferences renvoie un {{domxref("Boolean")}} (booléen) indiquant si les enfants des nœuds de référence d'entité sont visibles ou non pour le {{domxref("TreeWalker")}}.

+ +

Si la valeur est false (faux), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("TreeWalker.whatToShow")}} et du filtre associé.

+ +

Syntaxe

+ +
expand = treeWalker.expandEntityReferences;
+
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+expand = treeWalker.expandEntityReferences;
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#treewalker', 'Treewalker')}}{{Spec2('DOM WHATWG')}}Suppression de la spécification.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-expandEntityReferences', 'TreeWalker.expandEntityReferences')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.expandEntityReferences")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/filter/index.html b/files/fr/web/api/treewalker/filter/index.html deleted file mode 100644 index e9e2904840..0000000000 --- a/files/fr/web/api/treewalker/filter/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: TreeWalker.filter -slug: Web/API/TreeWalker/filter -tags: - - API - - Arborescence - - DOM - - Noeuds - - Propriétés -translation_of: Web/API/TreeWalker/filter ---- -

{{ APIRef("DOM") }}

- -

La propriété en lecture seule TreeWalker.filter renvoie un {{domxref("NodeFilter")}} (filtre de noeuds) qui est l'objet de filtrage associé à {{domxref("TreeWalker")}}.

- -

Lors de la création du TreeWalker, l'objet filtre est transmis comme 3ème paramètre et sa méthode {{domxref("NodeFilter.acceptNode()")}} est appelée sur tous les noeuds pour déterminer s'il doit ou non l'accepter.

- -

Syntaxe

- -
nodeFilter = treeWalker.filter;
-
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-nodeFilter = treeWalker.filter; // document.body dans ce cas
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-filter', 'TreeWalker.filter')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-filter', 'TreeWalker.filter')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.filter")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/filter/index.md b/files/fr/web/api/treewalker/filter/index.md new file mode 100644 index 0000000000..e9e2904840 --- /dev/null +++ b/files/fr/web/api/treewalker/filter/index.md @@ -0,0 +1,64 @@ +--- +title: TreeWalker.filter +slug: Web/API/TreeWalker/filter +tags: + - API + - Arborescence + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/TreeWalker/filter +--- +

{{ APIRef("DOM") }}

+ +

La propriété en lecture seule TreeWalker.filter renvoie un {{domxref("NodeFilter")}} (filtre de noeuds) qui est l'objet de filtrage associé à {{domxref("TreeWalker")}}.

+ +

Lors de la création du TreeWalker, l'objet filtre est transmis comme 3ème paramètre et sa méthode {{domxref("NodeFilter.acceptNode()")}} est appelée sur tous les noeuds pour déterminer s'il doit ou non l'accepter.

+ +

Syntaxe

+ +
nodeFilter = treeWalker.filter;
+
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+nodeFilter = treeWalker.filter; // document.body dans ce cas
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-filter', 'TreeWalker.filter')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-filter', 'TreeWalker.filter')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.filter")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/firstchild/index.html b/files/fr/web/api/treewalker/firstchild/index.html deleted file mode 100644 index 25d5749df2..0000000000 --- a/files/fr/web/api/treewalker/firstchild/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: TreeWalker.firstChild() -slug: Web/API/TreeWalker/firstChild -tags: - - API - - Arborescence - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/TreeWalker/firstChild ---- -

{{ APIRef("DOM") }}

- -

La méthode TreeWalker.firstChild() déplace le {{domxref("Node")}} courant vers le premier enfant visible du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle renvoie null et le noeud courant n'est pas modifié.

- -

Syntaxe

- -
node = treeWalker.firstChild;
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-var node = treeWalker.firstChild(); // renvoie le premier enfant de l'élément racine ou null si aucun
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-firstchild', 'TreeWalker.firstChild')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-firstChild', 'TreeWalker.firstChild')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.firstChild")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/firstchild/index.md b/files/fr/web/api/treewalker/firstchild/index.md new file mode 100644 index 0000000000..25d5749df2 --- /dev/null +++ b/files/fr/web/api/treewalker/firstchild/index.md @@ -0,0 +1,62 @@ +--- +title: TreeWalker.firstChild() +slug: Web/API/TreeWalker/firstChild +tags: + - API + - Arborescence + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/TreeWalker/firstChild +--- +

{{ APIRef("DOM") }}

+ +

La méthode TreeWalker.firstChild() déplace le {{domxref("Node")}} courant vers le premier enfant visible du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle renvoie null et le noeud courant n'est pas modifié.

+ +

Syntaxe

+ +
node = treeWalker.firstChild;
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.firstChild(); // renvoie le premier enfant de l'élément racine ou null si aucun
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-firstchild', 'TreeWalker.firstChild')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-firstChild', 'TreeWalker.firstChild')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.firstChild")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/index.html b/files/fr/web/api/treewalker/index.html deleted file mode 100644 index f5ac68fb17..0000000000 --- a/files/fr/web/api/treewalker/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: TreeWalker -slug: Web/API/TreeWalker -tags: - - API - - Arborescence - - DOM - - Itérateur - - Noeuds -translation_of: Web/API/TreeWalker ---- -
-

{{ APIRef("DOM") }}

-
- -

L'objet TreeWalker représente les noeuds d'un sous-arbre de document et une position à l'intérieur.

- -

Un TreeWalker peut être créé en utilisant la méthode {{domxref("Document.createTreeWalker()")}}.

- -

Propriétés

- -

Cette interface n'hérite d'aucune propriété.

- -
-
{{domxref("TreeWalker.root")}} {{readonlyInline}}
-
Renvoie un {{domxref("Node")}} (noeud) représentant le noeud racine comme spécifié lors de la création du TreeWalker.
-
{{domxref("TreeWalker.whatToShow")}} {{readonlyInline}}
-
Renvoie un unsigned long (long non signé), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} qui doivent être présentés. Les noeuds ne correspondants pas sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
-
-
{{domxref("TreeWalker.filter")}} {{readonlyInline}}
-
Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.
-
{{domxref("TreeWalker.expandEntityReferences")}} {{readonlyInline}}{{obsolete_inline}}
-
est un {{domxref("Boolean")}} (booléen) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.
-
{{domxref("TreeWalker.currentNode")}}
-
est le {{domxref("Node")}} sur lequel le TreeWalker pointe actuellement.
-
- -

Méthodes

- -

Cette interface n'hérite d'aucune méthode.

- -
-

Note : Le TreeWalker considère uniquement les nœuds DOM visibles.

-
- -
-
{{domxref("TreeWalker.parentNode()")}}
-
Déplace le {{domxref("Node")}} actuel vers le premier noeud ancêtre visible dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud actuel vers celui-ci. Si aucun noeud n'existe ou s'il est antérieur au noeud racine défini lors de la construction de l'objet, renvoie null et le noeud courant n'est pas modifié.
-
{{domxref("TreeWalker.firstChild()")}}
-
Déplace le {{domxref("Node")}} courant vers son premier enfant visible et renvoie l'enfant trouvé. Il déplace également le noeud courant vers cet enfant. Si aucun enfant n'existe, renvoie null et le noeud courant n'est pas modifié.
-
{{domxref("TreeWalker.lastChild()")}}
-
Déplace le {{domxref("Node")}} courant vers son dernier enfant visible et renvoie l'enfant trouvé. Il déplace également le noeud courant vers l'enfant. Si aucun enfant n'existe, renvoie null et le noeud courant n'est pas modifié.
-
{{domxref("TreeWalker.previousSibling()")}}
-
Déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie null et le noeud courant n'est pas modifié.
-
{{domxref("TreeWalker.nextSibling()")}}
-
Déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie null et le noeud courant n'est pas modifié.
-
{{domxref("TreeWalker.previousNode()")}}
-
Déplace le {{domxref("Node")}} courant vers le noeud visible précédent dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le noeud racine défini lors de la construction de l'objet, renvoie null et le noeud courant n'est pas modifié.
-
{{domxref("TreeWalker.nextNode()")}}
-
Déplace le {{domxref("Node")}} courant vers le noeud visible suivant dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le noeud racine défini lors de la construction de l'objet, renvoie null et le noeud courant n'est pas modifié.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#treeWalker', 'TreeWalker')}}{{Spec2('DOM WHATWG')}}Suppression de la propriété expandEntityReferences.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker', 'TreeWalker')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/index.md b/files/fr/web/api/treewalker/index.md new file mode 100644 index 0000000000..f5ac68fb17 --- /dev/null +++ b/files/fr/web/api/treewalker/index.md @@ -0,0 +1,168 @@ +--- +title: TreeWalker +slug: Web/API/TreeWalker +tags: + - API + - Arborescence + - DOM + - Itérateur + - Noeuds +translation_of: Web/API/TreeWalker +--- +
+

{{ APIRef("DOM") }}

+
+ +

L'objet TreeWalker représente les noeuds d'un sous-arbre de document et une position à l'intérieur.

+ +

Un TreeWalker peut être créé en utilisant la méthode {{domxref("Document.createTreeWalker()")}}.

+ +

Propriétés

+ +

Cette interface n'hérite d'aucune propriété.

+ +
+
{{domxref("TreeWalker.root")}} {{readonlyInline}}
+
Renvoie un {{domxref("Node")}} (noeud) représentant le noeud racine comme spécifié lors de la création du TreeWalker.
+
{{domxref("TreeWalker.whatToShow")}} {{readonlyInline}}
+
Renvoie un unsigned long (long non signé), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} qui doivent être présentés. Les noeuds ne correspondants pas sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeur numériqueDescription
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
+
+
{{domxref("TreeWalker.filter")}} {{readonlyInline}}
+
Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.
+
{{domxref("TreeWalker.expandEntityReferences")}} {{readonlyInline}}{{obsolete_inline}}
+
est un {{domxref("Boolean")}} (booléen) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.
+
{{domxref("TreeWalker.currentNode")}}
+
est le {{domxref("Node")}} sur lequel le TreeWalker pointe actuellement.
+
+ +

Méthodes

+ +

Cette interface n'hérite d'aucune méthode.

+ +
+

Note : Le TreeWalker considère uniquement les nœuds DOM visibles.

+
+ +
+
{{domxref("TreeWalker.parentNode()")}}
+
Déplace le {{domxref("Node")}} actuel vers le premier noeud ancêtre visible dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud actuel vers celui-ci. Si aucun noeud n'existe ou s'il est antérieur au noeud racine défini lors de la construction de l'objet, renvoie null et le noeud courant n'est pas modifié.
+
{{domxref("TreeWalker.firstChild()")}}
+
Déplace le {{domxref("Node")}} courant vers son premier enfant visible et renvoie l'enfant trouvé. Il déplace également le noeud courant vers cet enfant. Si aucun enfant n'existe, renvoie null et le noeud courant n'est pas modifié.
+
{{domxref("TreeWalker.lastChild()")}}
+
Déplace le {{domxref("Node")}} courant vers son dernier enfant visible et renvoie l'enfant trouvé. Il déplace également le noeud courant vers l'enfant. Si aucun enfant n'existe, renvoie null et le noeud courant n'est pas modifié.
+
{{domxref("TreeWalker.previousSibling()")}}
+
Déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie null et le noeud courant n'est pas modifié.
+
{{domxref("TreeWalker.nextSibling()")}}
+
Déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie null et le noeud courant n'est pas modifié.
+
{{domxref("TreeWalker.previousNode()")}}
+
Déplace le {{domxref("Node")}} courant vers le noeud visible précédent dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le noeud racine défini lors de la construction de l'objet, renvoie null et le noeud courant n'est pas modifié.
+
{{domxref("TreeWalker.nextNode()")}}
+
Déplace le {{domxref("Node")}} courant vers le noeud visible suivant dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le noeud racine défini lors de la construction de l'objet, renvoie null et le noeud courant n'est pas modifié.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#treeWalker', 'TreeWalker')}}{{Spec2('DOM WHATWG')}}Suppression de la propriété expandEntityReferences.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker', 'TreeWalker')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/lastchild/index.html b/files/fr/web/api/treewalker/lastchild/index.html deleted file mode 100644 index c61ad55a6a..0000000000 --- a/files/fr/web/api/treewalker/lastchild/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: TreeWalker.lastChild() -slug: Web/API/TreeWalker/lastChild -tags: - - API - - Arborescence - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/TreeWalker/lastChild ---- -

{{ APIRef("DOM") }}

- -

La méthode TreeWalker.lastChild() déplace le {{domxref("Node")}} courant au dernier enfant visible du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle retourne null et le noeud courant reste inchangé.

- -

Syntaxe

- -
node = treeWalker.lastChild();
-
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-var node = treeWalker.lastChild(); // renvoie le dernier enfant visible de l'élément racine
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-lastchild', 'TreeWalker.lastChild')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-lastChild', 'TreeWalker.lastChild')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.firstChild")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/lastchild/index.md b/files/fr/web/api/treewalker/lastchild/index.md new file mode 100644 index 0000000000..c61ad55a6a --- /dev/null +++ b/files/fr/web/api/treewalker/lastchild/index.md @@ -0,0 +1,62 @@ +--- +title: TreeWalker.lastChild() +slug: Web/API/TreeWalker/lastChild +tags: + - API + - Arborescence + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/TreeWalker/lastChild +--- +

{{ APIRef("DOM") }}

+ +

La méthode TreeWalker.lastChild() déplace le {{domxref("Node")}} courant au dernier enfant visible du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle retourne null et le noeud courant reste inchangé.

+ +

Syntaxe

+ +
node = treeWalker.lastChild();
+
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.lastChild(); // renvoie le dernier enfant visible de l'élément racine
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-lastchild', 'TreeWalker.lastChild')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-lastChild', 'TreeWalker.lastChild')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.firstChild")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/nextnode/index.html b/files/fr/web/api/treewalker/nextnode/index.html deleted file mode 100644 index 19b3d6e972..0000000000 --- a/files/fr/web/api/treewalker/nextnode/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: TreeWalker.nextNode() -slug: Web/API/TreeWalker/nextNode -tags: - - API - - Arborescence - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/TreeWalker/nextNode ---- -

{{ APIRef("DOM") }}

- -

La méthode TreeWalker.nextNode() déplace le {{domxref("Node")}} courant au noeud suivant visible dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. Si aucun noeud n'existe, elle renvoie null et le noeud courant est inchangé.

- -

Syntaxe

- -
node = treeWalker.nextNode();
-
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-var node = treeWalker.nextNode(); // renvoie le premier enfant de la racine, car il s'agit du noeud suivant dans l'ordre du document
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-nextnode', 'TreeWalker.nextNode')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextNode', 'TreeWalker.nextNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.nextNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/nextnode/index.md b/files/fr/web/api/treewalker/nextnode/index.md new file mode 100644 index 0000000000..19b3d6e972 --- /dev/null +++ b/files/fr/web/api/treewalker/nextnode/index.md @@ -0,0 +1,63 @@ +--- +title: TreeWalker.nextNode() +slug: Web/API/TreeWalker/nextNode +tags: + - API + - Arborescence + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/TreeWalker/nextNode +--- +

{{ APIRef("DOM") }}

+ +

La méthode TreeWalker.nextNode() déplace le {{domxref("Node")}} courant au noeud suivant visible dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. Si aucun noeud n'existe, elle renvoie null et le noeud courant est inchangé.

+ +

Syntaxe

+ +
node = treeWalker.nextNode();
+
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.nextNode(); // renvoie le premier enfant de la racine, car il s'agit du noeud suivant dans l'ordre du document
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-nextnode', 'TreeWalker.nextNode')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextNode', 'TreeWalker.nextNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.nextNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/nextsibling/index.html b/files/fr/web/api/treewalker/nextsibling/index.html deleted file mode 100644 index ebf87930af..0000000000 --- a/files/fr/web/api/treewalker/nextsibling/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: TreeWalker.nextSibling() -slug: Web/API/TreeWalker/nextSibling -tags: - - API - - Arborescence - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/TreeWalker/nextSibling ---- -

{{ APIRef("DOM") }}

- -

La méthode TreeWalker.nextSibling() déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'est trouvé, elle renvoie null et le noeud courant reste inchangé.

- -

Syntaxe

- -
node = treeWalker.nextSibling();
-
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-treeWalker.firstChild();
-var node = treeWalker.nextSibling(); // renvoie null si le premier enfant de l'élément racine n'a pas de frère
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-nextsibling', 'TreeWalker.nextSibling')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextSibling', 'TreeWalker.nextSibling')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.nextSibling")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/nextsibling/index.md b/files/fr/web/api/treewalker/nextsibling/index.md new file mode 100644 index 0000000000..ebf87930af --- /dev/null +++ b/files/fr/web/api/treewalker/nextsibling/index.md @@ -0,0 +1,64 @@ +--- +title: TreeWalker.nextSibling() +slug: Web/API/TreeWalker/nextSibling +tags: + - API + - Arborescence + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/TreeWalker/nextSibling +--- +

{{ APIRef("DOM") }}

+ +

La méthode TreeWalker.nextSibling() déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'est trouvé, elle renvoie null et le noeud courant reste inchangé.

+ +

Syntaxe

+ +
node = treeWalker.nextSibling();
+
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+treeWalker.firstChild();
+var node = treeWalker.nextSibling(); // renvoie null si le premier enfant de l'élément racine n'a pas de frère
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-nextsibling', 'TreeWalker.nextSibling')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextSibling', 'TreeWalker.nextSibling')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.nextSibling")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/parentnode/index.html b/files/fr/web/api/treewalker/parentnode/index.html deleted file mode 100644 index a80948ea84..0000000000 --- a/files/fr/web/api/treewalker/parentnode/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: TreeWalker.parentNode() -slug: Web/API/TreeWalker/parentNode -tags: - - API - - Arborescence - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/TreeWalker/parentNode ---- -

{{ APIRef("DOM") }}

- -

La méthode TreeWalker.parentNode() déplace le {{domxref("Node")}} courant vers le premier noeud ancêtre visible dans l'ordre du document et renvoie le noeud trouvé. Si aucun noeud n'existe ou s'il est au-dessus du noeud racine du TreeWalker, elle renvoie null et le noeud actuel reste inchangé.

- -

Syntaxe

- -
node = treeWalker.parentNode();
-
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-var node = treeWalker.parentNode(); // returns null as there is no parent
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-parentnode', 'TreeWalker.parentNode')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-parentNode', 'TreeWalker.parentNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.parentNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/parentnode/index.md b/files/fr/web/api/treewalker/parentnode/index.md new file mode 100644 index 0000000000..a80948ea84 --- /dev/null +++ b/files/fr/web/api/treewalker/parentnode/index.md @@ -0,0 +1,63 @@ +--- +title: TreeWalker.parentNode() +slug: Web/API/TreeWalker/parentNode +tags: + - API + - Arborescence + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/TreeWalker/parentNode +--- +

{{ APIRef("DOM") }}

+ +

La méthode TreeWalker.parentNode() déplace le {{domxref("Node")}} courant vers le premier noeud ancêtre visible dans l'ordre du document et renvoie le noeud trouvé. Si aucun noeud n'existe ou s'il est au-dessus du noeud racine du TreeWalker, elle renvoie null et le noeud actuel reste inchangé.

+ +

Syntaxe

+ +
node = treeWalker.parentNode();
+
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.parentNode(); // returns null as there is no parent
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-parentnode', 'TreeWalker.parentNode')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-parentNode', 'TreeWalker.parentNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.parentNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/previousnode/index.html b/files/fr/web/api/treewalker/previousnode/index.html deleted file mode 100644 index 05471ace25..0000000000 --- a/files/fr/web/api/treewalker/previousnode/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: TreeWalker.previousNode() -slug: Web/API/TreeWalker/previousNode -tags: - - API - - Arborescence - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/TreeWalker/previousNode ---- -

{{ APIRef("DOM") }}

- -

La méthode TreeWalker.previousNode() déplace le {{domxref("Node")}} courant vers le noeud précédent visible dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. S'il n'en existe aucun ou s'il est avant le noeud racine défini lors de la construction de l'objet, elle renvoie null et le noeud actuel n'est pas changé.

- -

Syntaxe

- -
node = treeWalker.previousNode();
-
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-var node = treeWalker.previousNode(); // renvoie null car il n'y a pas de parent
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-previousnode', 'TreeWalker.previousNode')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousNode', 'TreeWalker.previousNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.previousNode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/previousnode/index.md b/files/fr/web/api/treewalker/previousnode/index.md new file mode 100644 index 0000000000..05471ace25 --- /dev/null +++ b/files/fr/web/api/treewalker/previousnode/index.md @@ -0,0 +1,63 @@ +--- +title: TreeWalker.previousNode() +slug: Web/API/TreeWalker/previousNode +tags: + - API + - Arborescence + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/TreeWalker/previousNode +--- +

{{ APIRef("DOM") }}

+ +

La méthode TreeWalker.previousNode() déplace le {{domxref("Node")}} courant vers le noeud précédent visible dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. S'il n'en existe aucun ou s'il est avant le noeud racine défini lors de la construction de l'objet, elle renvoie null et le noeud actuel n'est pas changé.

+ +

Syntaxe

+ +
node = treeWalker.previousNode();
+
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.previousNode(); // renvoie null car il n'y a pas de parent
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-previousnode', 'TreeWalker.previousNode')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousNode', 'TreeWalker.previousNode')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.previousNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/previoussibling/index.html b/files/fr/web/api/treewalker/previoussibling/index.html deleted file mode 100644 index 49db9c03ad..0000000000 --- a/files/fr/web/api/treewalker/previoussibling/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: TreeWalker.previousSibling() -slug: Web/API/TreeWalker/previousSibling -tags: - - API - - Arborescence - - DOM - - Méthodes - - Noeuds -translation_of: Web/API/TreeWalker/previousSibling ---- -

{{ APIRef("DOM") }}

- -

La méthode TreeWalker.previousSibling() déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. S'il n'y en a pas, elle renvoie null et le noeud actuel est inchangé.

- -

Syntaxe

- -
node = treeWalker.previousSibling();
-
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-var node = treeWalker.previousSibling(); // renvoie null car il n'y a pas de frère précédent
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-previoussibling', 'TreeWalker.previousSibling')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousSibling', 'TreeWalker.previousSibling')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.previousSibling")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/previoussibling/index.md b/files/fr/web/api/treewalker/previoussibling/index.md new file mode 100644 index 0000000000..49db9c03ad --- /dev/null +++ b/files/fr/web/api/treewalker/previoussibling/index.md @@ -0,0 +1,63 @@ +--- +title: TreeWalker.previousSibling() +slug: Web/API/TreeWalker/previousSibling +tags: + - API + - Arborescence + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/TreeWalker/previousSibling +--- +

{{ APIRef("DOM") }}

+ +

La méthode TreeWalker.previousSibling() déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. S'il n'y en a pas, elle renvoie null et le noeud actuel est inchangé.

+ +

Syntaxe

+ +
node = treeWalker.previousSibling();
+
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.previousSibling(); // renvoie null car il n'y a pas de frère précédent
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-previoussibling', 'TreeWalker.previousSibling')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousSibling', 'TreeWalker.previousSibling')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.previousSibling")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/root/index.html b/files/fr/web/api/treewalker/root/index.html deleted file mode 100644 index bfa2d38c2b..0000000000 --- a/files/fr/web/api/treewalker/root/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: TreeWalker.root -slug: Web/API/TreeWalker/root -tags: - - API - - Arborescence - - DOM - - Noeuds - - Propriétés -translation_of: Web/API/TreeWalker/root ---- -

{{ APIRef("DOM") }}

- -

La propriété en lecture seule TreeWalker.root renvoie le noeud qui est la racine de ce que TreeWalker doit traverser.

- -

Syntaxe

- -
root = TreeWalker.root;
- -

Exemple

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-root = treeWalker.root; // document.body dans ce cas
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-root', 'TreeWalker.root')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-root', 'TreeWalker.root')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.root")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/root/index.md b/files/fr/web/api/treewalker/root/index.md new file mode 100644 index 0000000000..bfa2d38c2b --- /dev/null +++ b/files/fr/web/api/treewalker/root/index.md @@ -0,0 +1,61 @@ +--- +title: TreeWalker.root +slug: Web/API/TreeWalker/root +tags: + - API + - Arborescence + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/TreeWalker/root +--- +

{{ APIRef("DOM") }}

+ +

La propriété en lecture seule TreeWalker.root renvoie le noeud qui est la racine de ce que TreeWalker doit traverser.

+ +

Syntaxe

+ +
root = TreeWalker.root;
+ +

Exemple

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+root = treeWalker.root; // document.body dans ce cas
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-treewalker-root', 'TreeWalker.root')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-root', 'TreeWalker.root')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.root")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/treewalker/whattoshow/index.html b/files/fr/web/api/treewalker/whattoshow/index.html deleted file mode 100644 index 4e63064707..0000000000 --- a/files/fr/web/api/treewalker/whattoshow/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: TreeWalker.whatToShow -slug: Web/API/TreeWalker/whatToShow -tags: - - API - - DOM - - Propriété - - Reference -translation_of: Web/API/TreeWalker/whatToShow ---- -

{{APIRef("DOM")}}

- -

La propriété en lecture seule TreeWalker.whatToShow renvoie un unsigned long (non signé long) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Constante - Valeur numérique - Description -
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
- -

Syntaxe

- -
nodeTypes = treeWalker.whatToShow;
- -

Exemples

- -
var treeWalker = document.createTreeWalker(
-    document.body,
-    NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-if( (treeWalker.whatToShow == NodeFilter.SHOW_ALL) ||
-    (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) {
-    // treeWalker affichera des commentaires
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#dom-treewalker-whattoshow', 'TreeWalker.whatToShow')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-whatToShow', 'TreeWalker.whatToShow')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
-

Compatibilité des navigateurs

- -

{{Compat("api.TreeWalker.whatToShow")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/treewalker/whattoshow/index.md b/files/fr/web/api/treewalker/whattoshow/index.md new file mode 100644 index 0000000000..4e63064707 --- /dev/null +++ b/files/fr/web/api/treewalker/whattoshow/index.md @@ -0,0 +1,141 @@ +--- +title: TreeWalker.whatToShow +slug: Web/API/TreeWalker/whatToShow +tags: + - API + - DOM + - Propriété + - Reference +translation_of: Web/API/TreeWalker/whatToShow +--- +

{{APIRef("DOM")}}

+ +

La propriété en lecture seule TreeWalker.whatToShow renvoie un unsigned long (non signé long) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Constante + Valeur numérique + Description +
NodeFilter.SHOW_ALL-1 (c'est la valeur numérique maximale du unsigned long (non signé long))Affiche tous les noeuds.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Affiche les noeuds {{domxref("CDATASection")}}.
NodeFilter.SHOW_COMMENT128Affiche les noeuds {{domxref("Comment")}}.
NodeFilter.SHOW_DOCUMENT256Affiche les noeuds {{domxref("Document")}}.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Affiche les noeuds {{domxref("DocumentFragment")}}.
NodeFilter.SHOW_DOCUMENT_TYPE512Affiche les noeuds {{domxref("DocumentType")}}.
NodeFilter.SHOW_ELEMENT1Affiche les noeuds {{domxref("Element")}}.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Affiche les noeuds {{domxref("EntityReference")}}.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Affiche les noeuds {{domxref("ProcessingInstruction")}}.
NodeFilter.SHOW_TEXT4Affiche les noeuds {{domxref("Text")}}.
+ +

Syntaxe

+ +
nodeTypes = treeWalker.whatToShow;
+ +

Exemples

+ +
var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+if( (treeWalker.whatToShow == NodeFilter.SHOW_ALL) ||
+    (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) {
+    // treeWalker affichera des commentaires
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('DOM WHATWG', '#dom-treewalker-whattoshow', 'TreeWalker.whatToShow')}}{{Spec2('DOM WHATWG')}}Pas de changement de {{SpecName('DOM2 Traversal_Range')}}
{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-whatToShow', 'TreeWalker.whatToShow')}}{{Spec2('DOM2 Traversal_Range')}}Définition initiale.
+

Compatibilité des navigateurs

+ +

{{Compat("api.TreeWalker.whatToShow")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/uievent/detail/index.html b/files/fr/web/api/uievent/detail/index.html deleted file mode 100644 index 7c27a30f06..0000000000 --- a/files/fr/web/api/uievent/detail/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: UIEvent.detail -slug: Web/API/UIEvent/detail -tags: - - API - - DOM - - Propriété - - Reference -translation_of: Web/API/UIEvent/detail ---- -

{{APIRef("DOM Events")}}

- -

UIEvent.detail est une propriété en lecture seule, qui, lorsqu'elle ne vaut pas zéro, donne le nombre de clics courant (ou suivant en fonction de l'événement).

- -

Pour les événements {{event("click")}} ou {{event("dblclick")}}, UIEvent.detail donne le nombre de clics courant.

- -

Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, UIEvent.detail donne le nombre de clics courant plus un.

- -

Pour tous les autres objets {{domxref("UIEvent")}}, UIEvent.detail vaut toujours zéro.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}}{{Spec2('DOM3 Events')}} 
{{SpecName('DOM2 Events','#Events-UIEvent-detail','UIEvent.detail')}}{{Spec2('DOM2 Events')}}Première définition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.UIEvent.detail")}}

diff --git a/files/fr/web/api/uievent/detail/index.md b/files/fr/web/api/uievent/detail/index.md new file mode 100644 index 0000000000..7c27a30f06 --- /dev/null +++ b/files/fr/web/api/uievent/detail/index.md @@ -0,0 +1,45 @@ +--- +title: UIEvent.detail +slug: Web/API/UIEvent/detail +tags: + - API + - DOM + - Propriété + - Reference +translation_of: Web/API/UIEvent/detail +--- +

{{APIRef("DOM Events")}}

+ +

UIEvent.detail est une propriété en lecture seule, qui, lorsqu'elle ne vaut pas zéro, donne le nombre de clics courant (ou suivant en fonction de l'événement).

+ +

Pour les événements {{event("click")}} ou {{event("dblclick")}}, UIEvent.detail donne le nombre de clics courant.

+ +

Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, UIEvent.detail donne le nombre de clics courant plus un.

+ +

Pour tous les autres objets {{domxref("UIEvent")}}, UIEvent.detail vaut toujours zéro.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}}{{Spec2('DOM3 Events')}} 
{{SpecName('DOM2 Events','#Events-UIEvent-detail','UIEvent.detail')}}{{Spec2('DOM2 Events')}}Première définition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.UIEvent.detail")}}

diff --git a/files/fr/web/api/uievent/index.html b/files/fr/web/api/uievent/index.html deleted file mode 100644 index 0bf32d28b4..0000000000 --- a/files/fr/web/api/uievent/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: UIEvent -slug: Web/API/UIEvent -tags: - - API - - DOM - - Event - - Evènement - - Interface - - Reference - - UIEvent -translation_of: Web/API/UIEvent ---- -

{{APIRef("DOM Events")}}

- -

L'interface UIEvent représente des évènements simples de l'interface utilisateur.

- -

UIEvent dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}}  soit conservée pour la compatibilité ascendante, vous devez créer un objet UIEvent en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}.

- -

Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}} et {{domxref("CompositionEvent")}}.

- -

Constructeurs

- -
-
{{domxref("UIEvent.UIEvent()", "UIEvent()")}}
-
Crée un objet UIEvent.
-
- -

Propriétés

- -

Cette interface hérite également des propriétés de son parent {{domxref("Event")}}.

- -
-
{{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}}
-
{{jsxref("Boolean")}} (booléen) indiquant si les conséquences de l'évènement ont été annulées ou non.
-
- -
-
{{domxref("UIEvent.detail")}}{{readonlyinline}}
-
Retourne un long qui donne quelques détails sur l'évènement, dépendant du type d'évènement.
-
{{domxref("UIEvent.isChar")}} {{obsolete_inline}} {{readonlyinline}}
-
Retourne un {{jsxref("Boolean")}} indiquant si l'évènement a produit un caractère clé ou non.
-
{{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}
-
Retourne la coordonnée horizontale de l'évènement par rapport à la couche actuelle.
-
{{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}
-
Retourne la coordonnée verticale de l'évènement par rapport à la couche actuelle.
-
{{domxref("UIEvent.pageX")}} {{Non-standard_inline}} {{readonlyinline}}
-
Retourne la coordonnée horizontale de l'évènement par rapport à l'ensemble du document.
-
{{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}
-
Retourne la coordonnée verticale de l'évènement par rapport à l'ensemble du document.
-
{{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}}
-
Retourne une instance de l'interface InputDeviceCapabilities qui fournit des informations sur le périphérique physique responsable de l'évènement.
-
{{domxref("UIEvent.view")}}{{readonlyinline}}
-
Retourne un {{domxref("WindowProxy")}} qui contient la vue de la génération de l'évènement.
-
{{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}
-
Retourne l'identifiant keyCode de la touche pressée, ou le code du caractère (charCode) pour une touche alphanumérique enfoncée.
-
- -

Méthodes

- -

Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}.

- -
-
{{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}
-
Initialise un objet UIEvent. Si l'évènement a déjà été envoyé, cette méthode ne fait rien.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('InputDeviceCapabilities')}}{{Spec2('InputDeviceCapabilities')}}Ajoute la propriété sourceCapabilities.
{{SpecName('UI Events')}}{{Spec2('UI Events')}}Extension de DOM3.
{{SpecName('DOM3 Events', '#interface-UIEvent', 'UIEvent')}}{{Spec2('DOM3 Events')}}Ajoute le constructeur UIEvent(), déprécie la méthode initUIEvent() et change le type de view de AbstractView vers WindowProxy.
{{SpecName('DOM2 Events', '#Events-UIEvent', 'UIEvent')}}{{Spec2('DOM2 Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.UIEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/uievent/index.md b/files/fr/web/api/uievent/index.md new file mode 100644 index 0000000000..0bf32d28b4 --- /dev/null +++ b/files/fr/web/api/uievent/index.md @@ -0,0 +1,109 @@ +--- +title: UIEvent +slug: Web/API/UIEvent +tags: + - API + - DOM + - Event + - Evènement + - Interface + - Reference + - UIEvent +translation_of: Web/API/UIEvent +--- +

{{APIRef("DOM Events")}}

+ +

L'interface UIEvent représente des évènements simples de l'interface utilisateur.

+ +

UIEvent dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}}  soit conservée pour la compatibilité ascendante, vous devez créer un objet UIEvent en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}.

+ +

Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}} et {{domxref("CompositionEvent")}}.

+ +

Constructeurs

+ +
+
{{domxref("UIEvent.UIEvent()", "UIEvent()")}}
+
Crée un objet UIEvent.
+
+ +

Propriétés

+ +

Cette interface hérite également des propriétés de son parent {{domxref("Event")}}.

+ +
+
{{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}}
+
{{jsxref("Boolean")}} (booléen) indiquant si les conséquences de l'évènement ont été annulées ou non.
+
+ +
+
{{domxref("UIEvent.detail")}}{{readonlyinline}}
+
Retourne un long qui donne quelques détails sur l'évènement, dépendant du type d'évènement.
+
{{domxref("UIEvent.isChar")}} {{obsolete_inline}} {{readonlyinline}}
+
Retourne un {{jsxref("Boolean")}} indiquant si l'évènement a produit un caractère clé ou non.
+
{{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}
+
Retourne la coordonnée horizontale de l'évènement par rapport à la couche actuelle.
+
{{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}
+
Retourne la coordonnée verticale de l'évènement par rapport à la couche actuelle.
+
{{domxref("UIEvent.pageX")}} {{Non-standard_inline}} {{readonlyinline}}
+
Retourne la coordonnée horizontale de l'évènement par rapport à l'ensemble du document.
+
{{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}
+
Retourne la coordonnée verticale de l'évènement par rapport à l'ensemble du document.
+
{{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}}
+
Retourne une instance de l'interface InputDeviceCapabilities qui fournit des informations sur le périphérique physique responsable de l'évènement.
+
{{domxref("UIEvent.view")}}{{readonlyinline}}
+
Retourne un {{domxref("WindowProxy")}} qui contient la vue de la génération de l'évènement.
+
{{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}
+
Retourne l'identifiant keyCode de la touche pressée, ou le code du caractère (charCode) pour une touche alphanumérique enfoncée.
+
+ +

Méthodes

+ +

Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}.

+ +
+
{{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}
+
Initialise un objet UIEvent. Si l'évènement a déjà été envoyé, cette méthode ne fait rien.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('InputDeviceCapabilities')}}{{Spec2('InputDeviceCapabilities')}}Ajoute la propriété sourceCapabilities.
{{SpecName('UI Events')}}{{Spec2('UI Events')}}Extension de DOM3.
{{SpecName('DOM3 Events', '#interface-UIEvent', 'UIEvent')}}{{Spec2('DOM3 Events')}}Ajoute le constructeur UIEvent(), déprécie la méthode initUIEvent() et change le type de view de AbstractView vers WindowProxy.
{{SpecName('DOM2 Events', '#Events-UIEvent', 'UIEvent')}}{{Spec2('DOM2 Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.UIEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/uievent/layerx/index.html b/files/fr/web/api/uievent/layerx/index.html deleted file mode 100644 index d48034f4c7..0000000000 --- a/files/fr/web/api/uievent/layerx/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: event.layerX -slug: Web/API/UIEvent/layerX -tags: - - API - - DOM - - Propriété - - Reference - - UIEvent - - lecture seule -translation_of: Web/API/UIEvent/layerX ---- -

{{APIRef("DOM Events")}} {{Non-standard_header}}

- -

La propriété en lecture seule UIEvent.layerX retourne la coordonnée horizontale de l'évènement relativement à la couche en cours.

- -

Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné.

- -

Syntaxe

- -
var posx = event.layerX
- - - -

Exemples

- -
<html>
-<head>
-<title>Exemple pageX\pageY & layerX\layerY</title>
-
-<script type="text/javascript">
-
-function montrerCoords(evt){
-  var form = document.forms.form_coords;
-  var parent_id = evt.target.parentNode.id;
-  form.parentId.value = parent_id;
-  form.pageXCoords.value = evt.pageX;
-  form.pageYCoords.value = evt.pageY;
-  form.layerXCoords.value = evt.layerX;
-  form.layerYCoords.value = evt.layerY;
-}
-</script>
-
-<style type="text/css">
-
- #d1 {
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d2 {
-  position: absolute;
-  top: 180px;
-  left: 80%;
-  right:auto;
-  width: 40%;
-  border: solid blue 1px;
-  padding: 20px;
- }
-
- #d3 {
-  position: absolute;
-  top: 240px;
-  left: 20%;
-  width: 50%;
-  border: solid blue 1px;
-  padding: 10px;
- }
-
-</style>
-</head>
-
-<body onmousedown="montrerCoords(event)">
-
-<p>Pour afficher les coordonnées de la souris, veuillez cliquer quelque part sur la page.</p>
-
-<div id="d1">
-<span>Cette div n'est pas positionnée : cliquer dedans renverra des valeurs layerX/layerY identiques à celles de pageX/PageY.</span>
-</div>
-
-<div id="d2">
-
-<span>Cette div est positionnée : cliquer dedans renverra des valeurs layerX/layerY
-relatives à son coin supérieur. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.</span>
-
-<span>Un peu de défilement ! C'est un div positionné : le clic renverra des valeurs layerX/layerY relative à son coin supérieur gauche. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.</span>
-
-</div>
-
-<div id="d3">
-<form name="form_coords" id="form1">
- Id de l'élément parent : <input type="text" name="parentId" size="7" /><br />
- pageX:<input type="text" name="pageXCoords" size="7" />
- pageY:<input type="text" name="pageYCoords" size="7" /><br />
- layerX:<input type="text" name="layerXCoords" size="7" />
- layerY:<input type="text" name="layerYCoords" size="7" />
-</form>
-</div>
-
-</body>
-</html>
-
- -

Spécifications

- -

Cette propriété ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("api.UIEvent.layerX")}}

diff --git a/files/fr/web/api/uievent/layerx/index.md b/files/fr/web/api/uievent/layerx/index.md new file mode 100644 index 0000000000..d48034f4c7 --- /dev/null +++ b/files/fr/web/api/uievent/layerx/index.md @@ -0,0 +1,112 @@ +--- +title: event.layerX +slug: Web/API/UIEvent/layerX +tags: + - API + - DOM + - Propriété + - Reference + - UIEvent + - lecture seule +translation_of: Web/API/UIEvent/layerX +--- +

{{APIRef("DOM Events")}} {{Non-standard_header}}

+ +

La propriété en lecture seule UIEvent.layerX retourne la coordonnée horizontale de l'évènement relativement à la couche en cours.

+ +

Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné.

+ +

Syntaxe

+ +
var posx = event.layerX
+ + + +

Exemples

+ +
<html>
+<head>
+<title>Exemple pageX\pageY & layerX\layerY</title>
+
+<script type="text/javascript">
+
+function montrerCoords(evt){
+  var form = document.forms.form_coords;
+  var parent_id = evt.target.parentNode.id;
+  form.parentId.value = parent_id;
+  form.pageXCoords.value = evt.pageX;
+  form.pageYCoords.value = evt.pageY;
+  form.layerXCoords.value = evt.layerX;
+  form.layerYCoords.value = evt.layerY;
+}
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="montrerCoords(event)">
+
+<p>Pour afficher les coordonnées de la souris, veuillez cliquer quelque part sur la page.</p>
+
+<div id="d1">
+<span>Cette div n'est pas positionnée : cliquer dedans renverra des valeurs layerX/layerY identiques à celles de pageX/PageY.</span>
+</div>
+
+<div id="d2">
+
+<span>Cette div est positionnée : cliquer dedans renverra des valeurs layerX/layerY
+relatives à son coin supérieur. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.</span>
+
+<span>Un peu de défilement ! C'est un div positionné : le clic renverra des valeurs layerX/layerY relative à son coin supérieur gauche. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.</span>
+
+</div>
+
+<div id="d3">
+<form name="form_coords" id="form1">
+ Id de l'élément parent : <input type="text" name="parentId" size="7" /><br />
+ pageX:<input type="text" name="pageXCoords" size="7" />
+ pageY:<input type="text" name="pageYCoords" size="7" /><br />
+ layerX:<input type="text" name="layerXCoords" size="7" />
+ layerY:<input type="text" name="layerYCoords" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.UIEvent.layerX")}}

diff --git a/files/fr/web/api/url/createobjecturl/index.html b/files/fr/web/api/url/createobjecturl/index.html deleted file mode 100644 index faca6b81b9..0000000000 --- a/files/fr/web/api/url/createobjecturl/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: URL.createObjectURL -slug: Web/API/URL/createObjectURL -translation_of: Web/API/URL/createObjectURL ---- - -

{{APIRef("URL")}}
- La méthode statique URL.createObjectURL() crée une chaîne contenant une URL représentant l’objet passé en paramètre. La durée de vie de l’URL est liée au {{domxref("document")}} de la fenêtre depuis laquelle elle a été créée. La nouvelle URL d’objet représente l’objet {{domxref("File")}} ou {{domxref("Blob")}} spécifié.

- -

Pour libérer une URL d’objet, il faut appeler {{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}

- -

{{AvailableInWorkers}}

- -
-

Note : Cette fonctionnalité n'est pas disponible dans les Service Workers à cause de possible fuite mémoire.

-
- -

Syntaxe

- -
objectURL = URL.createObjectURL(object);
-
- -

Paramètres

- -
-
object
-
Un objet {{domxref("File")}}, {{domxref("Blob")}} ou {{domxref("MediaSource")}} pour lequel créer une URL d’objet.
-
- -

Valeur de retour

- -

Une {{domxref("DOMString")}} contenant une URL d’objet, pouvant être utilisée comme une référence vers l’objet source object spécifié.

- -

Exemple

- -

Voir Utilisation de l’objet URLs pour afficher des images.

- -

Notes d’utilisation

- -

Gestion de la mémoire

- -

À chaque fois que vous appelez createObjectURL(), une nouvelle URL d’objet est créée, même si vous en avez déjà créée une pour le même objet. Chacune d’elles doit être libérée en appelant {{domxref("URL.revokeObjectURL()")}} lorsque vous n’en avez plus besoin.

- -

Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (unload) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire.

- -

Utiliser les URL d’objet pour les flux de média

- -

Dans d’anciennes versions de la spécification de Media Source, attacher un flux à un élément {{HTMLElement("video")}} requiérait de créer une URL d’objet pour le {{domxref("MediaStream")}}. Cela n’est plus nécessaire, et les navigateurs cessent progressivement de supporter cette pratique.

- -
-

Attention : si vous avez toujours du code qui repose sur {{domxref("URL.createObjectURL")}} pour attacher des flux à des éléments média, vous devez mettre à jour votre code pour attacher simplement {{domxref("HTMLMediaElement.srcObject", "srcObject")}} directement au MediaStream.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("File API", "#dfn-createObjectURL", "createObjectURL()")}}{{Spec2("File API")}}Définition initiale.
{{SpecName("Media Source Extensions", "#dom-url-createobjecturl", "URL")}}{{Spec2("Media Source Extensions")}} -

Extension MediaSource.
- Les anciennes versions de cette spécification utilisaient createObjectURL() pour les objets {{domxref("MediaStream")}} ; ce n’est plus supporté.

-
- -

Compatibilité des navigateurs

- -

{{Compat("api.URL.createObjectURL")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/url/createobjecturl/index.md b/files/fr/web/api/url/createobjecturl/index.md new file mode 100644 index 0000000000..faca6b81b9 --- /dev/null +++ b/files/fr/web/api/url/createobjecturl/index.md @@ -0,0 +1,91 @@ +--- +title: URL.createObjectURL +slug: Web/API/URL/createObjectURL +translation_of: Web/API/URL/createObjectURL +--- + +

{{APIRef("URL")}}
+ La méthode statique URL.createObjectURL() crée une chaîne contenant une URL représentant l’objet passé en paramètre. La durée de vie de l’URL est liée au {{domxref("document")}} de la fenêtre depuis laquelle elle a été créée. La nouvelle URL d’objet représente l’objet {{domxref("File")}} ou {{domxref("Blob")}} spécifié.

+ +

Pour libérer une URL d’objet, il faut appeler {{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}

+ +

{{AvailableInWorkers}}

+ +
+

Note : Cette fonctionnalité n'est pas disponible dans les Service Workers à cause de possible fuite mémoire.

+
+ +

Syntaxe

+ +
objectURL = URL.createObjectURL(object);
+
+ +

Paramètres

+ +
+
object
+
Un objet {{domxref("File")}}, {{domxref("Blob")}} ou {{domxref("MediaSource")}} pour lequel créer une URL d’objet.
+
+ +

Valeur de retour

+ +

Une {{domxref("DOMString")}} contenant une URL d’objet, pouvant être utilisée comme une référence vers l’objet source object spécifié.

+ +

Exemple

+ +

Voir Utilisation de l’objet URLs pour afficher des images.

+ +

Notes d’utilisation

+ +

Gestion de la mémoire

+ +

À chaque fois que vous appelez createObjectURL(), une nouvelle URL d’objet est créée, même si vous en avez déjà créée une pour le même objet. Chacune d’elles doit être libérée en appelant {{domxref("URL.revokeObjectURL()")}} lorsque vous n’en avez plus besoin.

+ +

Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (unload) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire.

+ +

Utiliser les URL d’objet pour les flux de média

+ +

Dans d’anciennes versions de la spécification de Media Source, attacher un flux à un élément {{HTMLElement("video")}} requiérait de créer une URL d’objet pour le {{domxref("MediaStream")}}. Cela n’est plus nécessaire, et les navigateurs cessent progressivement de supporter cette pratique.

+ +
+

Attention : si vous avez toujours du code qui repose sur {{domxref("URL.createObjectURL")}} pour attacher des flux à des éléments média, vous devez mettre à jour votre code pour attacher simplement {{domxref("HTMLMediaElement.srcObject", "srcObject")}} directement au MediaStream.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("File API", "#dfn-createObjectURL", "createObjectURL()")}}{{Spec2("File API")}}Définition initiale.
{{SpecName("Media Source Extensions", "#dom-url-createobjecturl", "URL")}}{{Spec2("Media Source Extensions")}} +

Extension MediaSource.
+ Les anciennes versions de cette spécification utilisaient createObjectURL() pour les objets {{domxref("MediaStream")}} ; ce n’est plus supporté.

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.URL.createObjectURL")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/url/hash/index.html b/files/fr/web/api/url/hash/index.html deleted file mode 100644 index f89d838eb1..0000000000 --- a/files/fr/web/api/url/hash/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: URL.hash -slug: Web/API/URL/hash -tags: - - API - - Hash - - Propriété - - Reference - - URL -translation_of: Web/API/URL/hash ---- -
{{ APIRef("URL API") }}
- -

La propriété hash de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère '#' suivi par l'identificateur de fragment de URL.

- -

Le fragment n'est pas décodé en pourcent. Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — "".

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
string = object.hash;
-object.hash = string;
-
- -

Valeur

- -

Un {{domxref("USVString")}}.

- -

Exemples

- -
var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples');
-url.hash // Returns '#Examples'
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('URL', '#dom-url-hash', 'URL.hash')}}{{Spec2('URL')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.URL.hash")}}

- -

A voir également

- - diff --git a/files/fr/web/api/url/hash/index.md b/files/fr/web/api/url/hash/index.md new file mode 100644 index 0000000000..f89d838eb1 --- /dev/null +++ b/files/fr/web/api/url/hash/index.md @@ -0,0 +1,62 @@ +--- +title: URL.hash +slug: Web/API/URL/hash +tags: + - API + - Hash + - Propriété + - Reference + - URL +translation_of: Web/API/URL/hash +--- +
{{ APIRef("URL API") }}
+ +

La propriété hash de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère '#' suivi par l'identificateur de fragment de URL.

+ +

Le fragment n'est pas décodé en pourcent. Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — "".

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
string = object.hash;
+object.hash = string;
+
+ +

Valeur

+ +

Un {{domxref("USVString")}}.

+ +

Exemples

+ +
var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples');
+url.hash // Returns '#Examples'
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('URL', '#dom-url-hash', 'URL.hash')}}{{Spec2('URL')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.URL.hash")}}

+ +

A voir également

+ + diff --git a/files/fr/web/api/url/index.html b/files/fr/web/api/url/index.html deleted file mode 100644 index 917fa44e1a..0000000000 --- a/files/fr/web/api/url/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: URL -slug: Web/API/URL -tags: - - API - - References - - URL -translation_of: Web/API/URL ---- -
{{ApiRef("URL API")}}
- -

L'interface URL représente un objet qui fournit des méthodes statiques utilisées pour créer des URL d'objet.

- -

Lors de l'utilisation d'un agent utilisateur dans lequel aucun constructeur n'a encore été implémenté, il est possible d'accéder à un objet en utilisant les propriétés {{domxref("Window.URL")}} (préfixées sur un navigateur basé sur Webkit tel que Window.webkitURL).

- -

{{AvailableInWorkers}}

- -

Utilisation

- -

Le constructeur prend un paramètre url et un paramètre de base facultatif à utiliser comme base si le paramètre url est une URL relative :

- -
const url = new URL('../cats', 'http://www.example.com/dogs');
-console.log(url.hostname); // "www.example.com"
-console.log(url.pathname); // "/cats"
- -

Les propriétés de l'URL peuvent être définies pour construire l'URL :

- -
url.hash = 'tabby';
-console.log(url.href); // "http://www.example.com/cats#tabby"
- -

Les URL seront encodées selon la norme RFC 3986:

- -
url.pathname = 'démonstration.html';
-console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
- -

L'interface {{domxref("URLSearchParams")}}  peut être utilisée pour construire et manipuler la chaîne de requête de l'URL.

- -

Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours :

- -
// https://some.site/?id=123
-var parsedUrl = new URL(window.location.href);
-console.log(parsedUrl.searchParams.get("id")); // 123
- -

La méthode stringifier de l' URL est la propriété href , ainsi le constructeur peut être utilisé pour normaliser et encoder directement une URL :

- -
const response = await fetch(new URL('http://www.example.com/démonstration.html'));
- -

Constructeur

- -
-
{{domxref("URL.URL", "URL()")}} {{experimental_inline}}
-
Crée et retourne un objet URL  composé des paramètres donnés.
-
- -

Propriétés

- -
-
{{domxref("URL.hash")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant un '#' suivi de l'identifiant du fragment de l'URL.
-
{{domxref("URL.host")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant l'hôte, c'est-à-dire le hostname (nom d'hôte), ':'et le port de l'URL.
-
{{domxref("URL.hostname")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le domaine de l'URL.
-
{{domxref("URL.href")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant l'URL entière.
-
- -
-
{{domxref("URL.origin")}} {{readonlyInline}}
-
Retourne une {{domxref("DOMString")}} (chaîne de caractères) contenant l'origine de l'URL, c'est son schéma, son domaine et son port .
-
- -
-
{{domxref("URL.password")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le mot de passe spécifié avant le nom du domaine.
-
- -
-
{{domxref("URL.pathname")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant une barre oblique initiale '/'suivie du chemin de l'URL.
-
- -
-
{{domxref("URL.port")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le numéro de port de l'URL.
-
- -
-
{{domxref("URL.protocol")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le schéma du protocole de l'URL, y compris le final ':'.
-
{{domxref("URL.search")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant un '?' suivi par les paramètres de l'URL.
-
{{domxref("URL.searchParams")}}
-
Retourne un objet {{domxref("URLSearchParams")}}  permettant d'accéder aux arguments de requête GET contenus dans l'URL.
-
{{domxref("URL.username")}}
-
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le nom d'utilisateur spécifié avant le nom de domaine.
-
- -

Méthodes

- -

L'interface URL implémente les méthodes définies dans {{domxref("URLUtils")}}.

- -
-
{{domxref("URLUtils.toString()")}}
-
Retourne une {{domxref("DOMString")}} (chaîne de caractères) contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, mais il ne peut pas être utilisé pour modifier la valeur.
-
{{domxref("URL.toJSON()")}}
-
Retourne une {{domxref("DOMString")}}   (chaîne de caractères) contenant l'URL entière. Il retourne la même chaîne que la propriété href .
-
- -

Méthodes statiques

- -
-
{{ domxref("URL.createObjectURL()") }}
-
Retourne une {{domxref("DOMString")}} (chaîne de caractères) contenant un "blob URL" unique ; c'est une URL avec blob : son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur.
-
{{ domxref("URL.revokeObjectURL()") }}
-
Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('File API', '#creating-revoking', 'URL')}}{{Spec2('File API')}}Ajoute les méthodes statiques URL.createObjectURL() et URL.revokeObjectURL().
{{SpecName('URL', '#api', 'API')}}{{Spec2('URL')}}Définition initiale (implémente URLUtils).
- -

Compatibilité des navigateurs

- -

{{Compat("api.URL")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/url/index.md b/files/fr/web/api/url/index.md new file mode 100644 index 0000000000..917fa44e1a --- /dev/null +++ b/files/fr/web/api/url/index.md @@ -0,0 +1,152 @@ +--- +title: URL +slug: Web/API/URL +tags: + - API + - References + - URL +translation_of: Web/API/URL +--- +
{{ApiRef("URL API")}}
+ +

L'interface URL représente un objet qui fournit des méthodes statiques utilisées pour créer des URL d'objet.

+ +

Lors de l'utilisation d'un agent utilisateur dans lequel aucun constructeur n'a encore été implémenté, il est possible d'accéder à un objet en utilisant les propriétés {{domxref("Window.URL")}} (préfixées sur un navigateur basé sur Webkit tel que Window.webkitURL).

+ +

{{AvailableInWorkers}}

+ +

Utilisation

+ +

Le constructeur prend un paramètre url et un paramètre de base facultatif à utiliser comme base si le paramètre url est une URL relative :

+ +
const url = new URL('../cats', 'http://www.example.com/dogs');
+console.log(url.hostname); // "www.example.com"
+console.log(url.pathname); // "/cats"
+ +

Les propriétés de l'URL peuvent être définies pour construire l'URL :

+ +
url.hash = 'tabby';
+console.log(url.href); // "http://www.example.com/cats#tabby"
+ +

Les URL seront encodées selon la norme RFC 3986:

+ +
url.pathname = 'démonstration.html';
+console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
+ +

L'interface {{domxref("URLSearchParams")}}  peut être utilisée pour construire et manipuler la chaîne de requête de l'URL.

+ +

Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours :

+ +
// https://some.site/?id=123
+var parsedUrl = new URL(window.location.href);
+console.log(parsedUrl.searchParams.get("id")); // 123
+ +

La méthode stringifier de l' URL est la propriété href , ainsi le constructeur peut être utilisé pour normaliser et encoder directement une URL :

+ +
const response = await fetch(new URL('http://www.example.com/démonstration.html'));
+ +

Constructeur

+ +
+
{{domxref("URL.URL", "URL()")}} {{experimental_inline}}
+
Crée et retourne un objet URL  composé des paramètres donnés.
+
+ +

Propriétés

+ +
+
{{domxref("URL.hash")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant un '#' suivi de l'identifiant du fragment de l'URL.
+
{{domxref("URL.host")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant l'hôte, c'est-à-dire le hostname (nom d'hôte), ':'et le port de l'URL.
+
{{domxref("URL.hostname")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le domaine de l'URL.
+
{{domxref("URL.href")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant l'URL entière.
+
+ +
+
{{domxref("URL.origin")}} {{readonlyInline}}
+
Retourne une {{domxref("DOMString")}} (chaîne de caractères) contenant l'origine de l'URL, c'est son schéma, son domaine et son port .
+
+ +
+
{{domxref("URL.password")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le mot de passe spécifié avant le nom du domaine.
+
+ +
+
{{domxref("URL.pathname")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant une barre oblique initiale '/'suivie du chemin de l'URL.
+
+ +
+
{{domxref("URL.port")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le numéro de port de l'URL.
+
+ +
+
{{domxref("URL.protocol")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le schéma du protocole de l'URL, y compris le final ':'.
+
{{domxref("URL.search")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant un '?' suivi par les paramètres de l'URL.
+
{{domxref("URL.searchParams")}}
+
Retourne un objet {{domxref("URLSearchParams")}}  permettant d'accéder aux arguments de requête GET contenus dans l'URL.
+
{{domxref("URL.username")}}
+
Est une {{domxref("DOMString")}} (chaîne de caractères) contenant le nom d'utilisateur spécifié avant le nom de domaine.
+
+ +

Méthodes

+ +

L'interface URL implémente les méthodes définies dans {{domxref("URLUtils")}}.

+ +
+
{{domxref("URLUtils.toString()")}}
+
Retourne une {{domxref("DOMString")}} (chaîne de caractères) contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, mais il ne peut pas être utilisé pour modifier la valeur.
+
{{domxref("URL.toJSON()")}}
+
Retourne une {{domxref("DOMString")}}   (chaîne de caractères) contenant l'URL entière. Il retourne la même chaîne que la propriété href .
+
+ +

Méthodes statiques

+ +
+
{{ domxref("URL.createObjectURL()") }}
+
Retourne une {{domxref("DOMString")}} (chaîne de caractères) contenant un "blob URL" unique ; c'est une URL avec blob : son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur.
+
{{ domxref("URL.revokeObjectURL()") }}
+
Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('File API', '#creating-revoking', 'URL')}}{{Spec2('File API')}}Ajoute les méthodes statiques URL.createObjectURL() et URL.revokeObjectURL().
{{SpecName('URL', '#api', 'API')}}{{Spec2('URL')}}Définition initiale (implémente URLUtils).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.URL")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/url/protocol/index.html b/files/fr/web/api/url/protocol/index.html deleted file mode 100644 index a67e867df9..0000000000 --- a/files/fr/web/api/url/protocol/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: URL.protocol -slug: Web/API/URL/protocol -tags: - - API - - Propriété - - Reference - - URL - - protocole -translation_of: Web/API/URL/protocol ---- -
{{ApiRef("URL API")}}
- -

La propriété protocol de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant ':' à la fin.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
string = object.protocol;
-object.protocol = string;
-
- -

Valeur

- -

Un {{domxref("USVString")}}.

- -

Exemples

- -
var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
-var result = url.protocol; // Retourne:"https:"
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('URL', '#dom-url-protocol', 'protocol')}}{{Spec2('URL')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.URL.protocol")}}

- -

A voir également

- - diff --git a/files/fr/web/api/url/protocol/index.md b/files/fr/web/api/url/protocol/index.md new file mode 100644 index 0000000000..a67e867df9 --- /dev/null +++ b/files/fr/web/api/url/protocol/index.md @@ -0,0 +1,61 @@ +--- +title: URL.protocol +slug: Web/API/URL/protocol +tags: + - API + - Propriété + - Reference + - URL + - protocole +translation_of: Web/API/URL/protocol +--- +
{{ApiRef("URL API")}}
+ +

La propriété protocol de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant ':' à la fin.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
string = object.protocol;
+object.protocol = string;
+
+ +

Valeur

+ +

Un {{domxref("USVString")}}.

+ +

Exemples

+ +
var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
+var result = url.protocol; // Retourne:"https:"
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('URL', '#dom-url-protocol', 'protocol')}}{{Spec2('URL')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.URL.protocol")}}

+ +

A voir également

+ + diff --git a/files/fr/web/api/url/revokeobjecturl/index.html b/files/fr/web/api/url/revokeobjecturl/index.html deleted file mode 100644 index 5785e39c30..0000000000 --- a/files/fr/web/api/url/revokeobjecturl/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: URL.revokeObjectURL() -slug: Web/API/URL/revokeObjectURL -translation_of: Web/API/URL/revokeObjectURL ---- -
{{ApiRef("URL")}}
- -

La méthode statique URL.revokeObjectURL() libère une URL d’objet existante précédemment créée par un appel à {{domxref("URL.createObjectURL()") }}. Appelez cette méthode quand vous n’utilisez plus une URL d’objet pour indiquer au navigateur qu’il ne doit plus garder de référence sur l’objet.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
window.URL.revokeObjectURL(objectURL);
-
- -

Paramètres

- -
-
objectURL
-
Une {{domxref("DOMString")}} représentant une URL d’objet qui a été précédemment créée par un appel à {{domxref("URL.createObjectURL", "createObjectURL()") }}.
-
- -

Valeur de retour

- -

undefined.

- - - -

Exemple

- -

Voir Utilisation de l’objet URLs pour afficher des images.

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('File API', '#dfn-revokeObjectURL', 'revokeObjectURL()')}}{{Spec2('File API')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.URL.revokeObjectURL")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/url/revokeobjecturl/index.md b/files/fr/web/api/url/revokeobjecturl/index.md new file mode 100644 index 0000000000..5785e39c30 --- /dev/null +++ b/files/fr/web/api/url/revokeobjecturl/index.md @@ -0,0 +1,62 @@ +--- +title: URL.revokeObjectURL() +slug: Web/API/URL/revokeObjectURL +translation_of: Web/API/URL/revokeObjectURL +--- +
{{ApiRef("URL")}}
+ +

La méthode statique URL.revokeObjectURL() libère une URL d’objet existante précédemment créée par un appel à {{domxref("URL.createObjectURL()") }}. Appelez cette méthode quand vous n’utilisez plus une URL d’objet pour indiquer au navigateur qu’il ne doit plus garder de référence sur l’objet.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
window.URL.revokeObjectURL(objectURL);
+
+ +

Paramètres

+ +
+
objectURL
+
Une {{domxref("DOMString")}} représentant une URL d’objet qui a été précédemment créée par un appel à {{domxref("URL.createObjectURL", "createObjectURL()") }}.
+
+ +

Valeur de retour

+ +

undefined.

+ + + +

Exemple

+ +

Voir Utilisation de l’objet URLs pour afficher des images.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('File API', '#dfn-revokeObjectURL', 'revokeObjectURL()')}}{{Spec2('File API')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.URL.revokeObjectURL")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/url/search/index.html b/files/fr/web/api/url/search/index.html deleted file mode 100644 index eb0a49d3a4..0000000000 --- a/files/fr/web/api/url/search/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: URL.search -slug: Web/API/URL/search -tags: - - API - - Propriété - - Recherche - - Reference - - URL -translation_of: Web/API/URL/search ---- -
{{ApiRef("URL API")}}
- -

La propriété search de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère '?' suivi des paramètres de l'URL.

- -

Les navigateurs récents fournissent la propriété {{domxref("URL.searchParams")}} qui permet d'analyser plus facilement les paramètres passés à la chaîne de recherche.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
chaineDeCaractere = objet.search;
-object.search = chaineDeCaractere;
-
- -

Valeur

- -

Un {{domxref("USVString")}}.

- -

Exemples

- -
var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123');
-var queryString = url.search; // Retourne:"?q=123"
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('URL', '#dom-url-search', 'URL.search')}}{{Spec2('URL')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.URL.search")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/url/search/index.md b/files/fr/web/api/url/search/index.md new file mode 100644 index 0000000000..eb0a49d3a4 --- /dev/null +++ b/files/fr/web/api/url/search/index.md @@ -0,0 +1,61 @@ +--- +title: URL.search +slug: Web/API/URL/search +tags: + - API + - Propriété + - Recherche + - Reference + - URL +translation_of: Web/API/URL/search +--- +
{{ApiRef("URL API")}}
+ +

La propriété search de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère '?' suivi des paramètres de l'URL.

+ +

Les navigateurs récents fournissent la propriété {{domxref("URL.searchParams")}} qui permet d'analyser plus facilement les paramètres passés à la chaîne de recherche.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
chaineDeCaractere = objet.search;
+object.search = chaineDeCaractere;
+
+ +

Valeur

+ +

Un {{domxref("USVString")}}.

+ +

Exemples

+ +
var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123');
+var queryString = url.search; // Retourne:"?q=123"
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('URL', '#dom-url-search', 'URL.search')}}{{Spec2('URL')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.URL.search")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/url/searchparams/index.html b/files/fr/web/api/url/searchparams/index.html deleted file mode 100644 index 9fab62581f..0000000000 --- a/files/fr/web/api/url/searchparams/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: URL.searchParams -slug: Web/API/URL/searchParams -tags: - - API - - Lecture-seule - - Propriété - - Reference - - URL - - URLSearchParameters -translation_of: Web/API/URL/searchParams ---- -
{{APIRef("URL API")}}
- -
 
- -
La propriété en lecture seule searchParams de l'interface {{domxref("URL")}} retourne
- -
un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés
- -
de la requête GET contenu dans l'URL.
- -
 
- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
var urlSearchParams = URL.searchParams;
- -

Value

- -

Un objet {{domxref("URLSearchParams")}}.

- -

Exemples

- -

Si l'URL de votre page est https://example.com/?nom=Jonathan%20Smith&age=18
- vous pouvez extraire les paramètres 'nom' et 'age' en utilisant:

- -
let params = (new URL(document.location)).searchParams;
-let name = params.get('nom'); // la chaine de caractère "Jonathan Smith".
-let age = parseInt(params.get('age')); // le nombre 18
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('URL', '#dom-url-searchparams', 'searchParams')}}{{Spec2('URL')}}Définition initiale.
- -

Compatibilités des navigateurs

- - - -

{{Compat("api.URL.searchParams")}}

diff --git a/files/fr/web/api/url/searchparams/index.md b/files/fr/web/api/url/searchparams/index.md new file mode 100644 index 0000000000..9fab62581f --- /dev/null +++ b/files/fr/web/api/url/searchparams/index.md @@ -0,0 +1,65 @@ +--- +title: URL.searchParams +slug: Web/API/URL/searchParams +tags: + - API + - Lecture-seule + - Propriété + - Reference + - URL + - URLSearchParameters +translation_of: Web/API/URL/searchParams +--- +
{{APIRef("URL API")}}
+ +
 
+ +
La propriété en lecture seule searchParams de l'interface {{domxref("URL")}} retourne
+ +
un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés
+ +
de la requête GET contenu dans l'URL.
+ +
 
+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
var urlSearchParams = URL.searchParams;
+ +

Value

+ +

Un objet {{domxref("URLSearchParams")}}.

+ +

Exemples

+ +

Si l'URL de votre page est https://example.com/?nom=Jonathan%20Smith&age=18
+ vous pouvez extraire les paramètres 'nom' et 'age' en utilisant:

+ +
let params = (new URL(document.location)).searchParams;
+let name = params.get('nom'); // la chaine de caractère "Jonathan Smith".
+let age = parseInt(params.get('age')); // le nombre 18
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('URL', '#dom-url-searchparams', 'searchParams')}}{{Spec2('URL')}}Définition initiale.
+ +

Compatibilités des navigateurs

+ + + +

{{Compat("api.URL.searchParams")}}

diff --git a/files/fr/web/api/url/tojson/index.html b/files/fr/web/api/url/tojson/index.html deleted file mode 100644 index 3b594c32cd..0000000000 --- a/files/fr/web/api/url/tojson/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: URL.toJSON() -slug: Web/API/URL/toJSON -tags: - - API - - Méthode - - Reference - - URL - - toJSON() -translation_of: Web/API/URL/toJSON ---- -
{{APIRef("URL API")}}
- -

La méthode toJSON() de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}.

- -

{{AvailableInWorkers}}

- -

Syntax

- -
json = url.toJSON();
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

A {{domxref("USVString")}}.

- -

Exemples

- -
const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
-url.toJSON()
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('URL', '#dom-url-tojson', 'toJSON()')}}{{Spec2('URL')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.URL.toJSON")}}

diff --git a/files/fr/web/api/url/tojson/index.md b/files/fr/web/api/url/tojson/index.md new file mode 100644 index 0000000000..3b594c32cd --- /dev/null +++ b/files/fr/web/api/url/tojson/index.md @@ -0,0 +1,57 @@ +--- +title: URL.toJSON() +slug: Web/API/URL/toJSON +tags: + - API + - Méthode + - Reference + - URL + - toJSON() +translation_of: Web/API/URL/toJSON +--- +
{{APIRef("URL API")}}
+ +

La méthode toJSON() de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
json = url.toJSON();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur retournée

+ +

A {{domxref("USVString")}}.

+ +

Exemples

+ +
const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
+url.toJSON()
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('URL', '#dom-url-tojson', 'toJSON()')}}{{Spec2('URL')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.URL.toJSON")}}

diff --git a/files/fr/web/api/url/tostring/index.html b/files/fr/web/api/url/tostring/index.html deleted file mode 100644 index f3733e2678..0000000000 --- a/files/fr/web/api/url/tostring/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: URL.toString() -slug: Web/API/URL/toString -tags: - - API - - Méthode - - Reference - - URL - - toString() -translation_of: Web/API/URL/toString ---- -
{{ApiRef("URL API")}}
- -

La méthode URL.toString() retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule.

- -

{{AvailableInWorkers}}

- -

Syntaxe

- -
string = url.toString();
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Un {{domxref("USVString")}}.

- -

Examples

- -
const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
-url.toString() // doit retourner l'URL en tant que chaîne
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('URL', '#URL-stringification-behavior', 'stringifier')}}{{Spec2('URL')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.URL.toString")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/url/tostring/index.md b/files/fr/web/api/url/tostring/index.md new file mode 100644 index 0000000000..f3733e2678 --- /dev/null +++ b/files/fr/web/api/url/tostring/index.md @@ -0,0 +1,61 @@ +--- +title: URL.toString() +slug: Web/API/URL/toString +tags: + - API + - Méthode + - Reference + - URL + - toString() +translation_of: Web/API/URL/toString +--- +
{{ApiRef("URL API")}}
+ +

La méthode URL.toString() retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule.

+ +

{{AvailableInWorkers}}

+ +

Syntaxe

+ +
string = url.toString();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Un {{domxref("USVString")}}.

+ +

Examples

+ +
const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
+url.toString() // doit retourner l'URL en tant que chaîne
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('URL', '#URL-stringification-behavior', 'stringifier')}}{{Spec2('URL')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.URL.toString")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/url/url/index.html b/files/fr/web/api/url/url/index.html deleted file mode 100644 index c0ff1cb049..0000000000 --- a/files/fr/web/api/url/url/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: URL() -slug: Web/API/URL/URL -tags: - - API - - Constructeur - - Reference - - URL - - URL API -translation_of: Web/API/URL/URL ---- -

{{APIRef("URL API")}}

- -

Le constructeur URL() renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres.
-
- Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type SYNTAX_ERROR est levée.

- -

{{AvailableInWorkers}}

- -

Syntax

- -
url = new URL(url, [base])
-
- -

Paramètres

- -
-
url
-
Un {{domxref("USVString")}} représentant une URL absolue ou relative. Si l'URL est une URL relative, la base est obligatoire et sera utilisée comme URL de base. Si url est une URL absolue, une base donnée sera ignorée.
-
base {{optional_inline}}
-
Un {{domxref("USVString")}} représentant l'URL de base à utiliser dans le cas où l'URL est une URL relative. Si non spécifié, il est par défaut à ''.
-
- -
-

Note : Vous pouvez toujours utiliser un objet {{domxref ("URL")}} existant pour la base, qui se stringifie en attribut {{domxref ("DOMString.href", "href")}} de l'objet.

-
- -

Exceptions

- - - - - - - - - - - - - - -
ExceptionExplication
TypeErrorurl (dans le cas d'URL absolues) ou base + URL (dans le cas d'URL relatives) n'est pas une URL valide.
- -

Exemple

- -
var a = new URL("/", "https://developer.mozilla.org"); // Crée une URL pointant vers 'https://developer.mozilla.org/'
-var b = new URL("https://developer.mozilla.org");      // Crée une URL pointant vers 'https://developer.mozilla.org/'
-var c = new URL('en-US/docs', b);                      // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
-var d = new URL('/en-US/docs', b);                     // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
-var f = new URL('/en-US/docs', d);                     // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
-var g = new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
-                                                       // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
-var h = new URL('/en-US/docs', a);                     // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
-var i = new URL('/en-US/docs', '');                    // Déclenche une exception TypeError car '' n'est pas une URL valide
-var j = new URL('/en-US/docs');                        // Déclenche une exception TypeError car '/ fr-US / docs' n'est pas une URL valide
-var k = new URL('http://www.example.com', 'https://developers.mozilla.com');
-                                                       // Crée une URL pointant vers 'http://www.example.com/'
-var l = new URL('http://www.example.com', b);          // Crée une URL pointant vers 'http://www.example.com/'
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('URL', '#constructors', 'URL.URL()')}}{{Spec2('URL')}}initialisation.
- -

Compatibilité des navigateurs

- -

{{Compat("api.URL.URL")}}

- -

À voir également

- - diff --git a/files/fr/web/api/url/url/index.md b/files/fr/web/api/url/url/index.md new file mode 100644 index 0000000000..c0ff1cb049 --- /dev/null +++ b/files/fr/web/api/url/url/index.md @@ -0,0 +1,97 @@ +--- +title: URL() +slug: Web/API/URL/URL +tags: + - API + - Constructeur + - Reference + - URL + - URL API +translation_of: Web/API/URL/URL +--- +

{{APIRef("URL API")}}

+ +

Le constructeur URL() renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres.
+
+ Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type SYNTAX_ERROR est levée.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
url = new URL(url, [base])
+
+ +

Paramètres

+ +
+
url
+
Un {{domxref("USVString")}} représentant une URL absolue ou relative. Si l'URL est une URL relative, la base est obligatoire et sera utilisée comme URL de base. Si url est une URL absolue, une base donnée sera ignorée.
+
base {{optional_inline}}
+
Un {{domxref("USVString")}} représentant l'URL de base à utiliser dans le cas où l'URL est une URL relative. Si non spécifié, il est par défaut à ''.
+
+ +
+

Note : Vous pouvez toujours utiliser un objet {{domxref ("URL")}} existant pour la base, qui se stringifie en attribut {{domxref ("DOMString.href", "href")}} de l'objet.

+
+ +

Exceptions

+ + + + + + + + + + + + + + +
ExceptionExplication
TypeErrorurl (dans le cas d'URL absolues) ou base + URL (dans le cas d'URL relatives) n'est pas une URL valide.
+ +

Exemple

+ +
var a = new URL("/", "https://developer.mozilla.org"); // Crée une URL pointant vers 'https://developer.mozilla.org/'
+var b = new URL("https://developer.mozilla.org");      // Crée une URL pointant vers 'https://developer.mozilla.org/'
+var c = new URL('en-US/docs', b);                      // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
+var d = new URL('/en-US/docs', b);                     // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
+var f = new URL('/en-US/docs', d);                     // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
+var g = new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
+                                                       // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
+var h = new URL('/en-US/docs', a);                     // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
+var i = new URL('/en-US/docs', '');                    // Déclenche une exception TypeError car '' n'est pas une URL valide
+var j = new URL('/en-US/docs');                        // Déclenche une exception TypeError car '/ fr-US / docs' n'est pas une URL valide
+var k = new URL('http://www.example.com', 'https://developers.mozilla.com');
+                                                       // Crée une URL pointant vers 'http://www.example.com/'
+var l = new URL('http://www.example.com', b);          // Crée une URL pointant vers 'http://www.example.com/'
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('URL', '#constructors', 'URL.URL()')}}{{Spec2('URL')}}initialisation.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.URL.URL")}}

+ +

À voir également

+ + diff --git a/files/fr/web/api/urlsearchparams/entries/index.html b/files/fr/web/api/urlsearchparams/entries/index.html deleted file mode 100644 index 4f10b1bb12..0000000000 --- a/files/fr/web/api/urlsearchparams/entries/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: URLSearchParams.entries() -slug: Web/API/URLSearchParams/entries -translation_of: Web/API/URLSearchParams/entries ---- -

{{APIRef("URL API")}}{{SeeCompatTable}}

- -

La méthode URLSearchParams.entries() retourne  un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet  {{domxref("USVString")}} .

- -
-

Note : This method is available in Web Workers.

-
- -

Syntax

- -
searchParams.entries();
- -

Return value

- -

Returns an {{jsxref("Iteration_protocols","iterator")}}.

- -

Example

- -
// Create a test URLSearchParams object
-var searchParams = new URLSearchParams("key1=value1&key2=value2");
-
-// Display the key/value pairs
-for(var pair of searchParams.entries()) {
-   console.log(pair[0]+ ', '+ pair[1]);
-}
-
- -

The result is:

- -
key1, value1
-key2, value2
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('URL', '#urlsearchparams','entries() (as iterator<>)')}}{{Spec2('URL')}}Initial definition
- -

Browser compatibility

- -
- - -

{{Compat("api.URLSearchParams.entries")}}

-
- -

See also

- - diff --git a/files/fr/web/api/urlsearchparams/entries/index.md b/files/fr/web/api/urlsearchparams/entries/index.md new file mode 100644 index 0000000000..4f10b1bb12 --- /dev/null +++ b/files/fr/web/api/urlsearchparams/entries/index.md @@ -0,0 +1,67 @@ +--- +title: URLSearchParams.entries() +slug: Web/API/URLSearchParams/entries +translation_of: Web/API/URLSearchParams/entries +--- +

{{APIRef("URL API")}}{{SeeCompatTable}}

+ +

La méthode URLSearchParams.entries() retourne  un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet  {{domxref("USVString")}} .

+ +
+

Note : This method is available in Web Workers.

+
+ +

Syntax

+ +
searchParams.entries();
+ +

Return value

+ +

Returns an {{jsxref("Iteration_protocols","iterator")}}.

+ +

Example

+ +
// Create a test URLSearchParams object
+var searchParams = new URLSearchParams("key1=value1&key2=value2");
+
+// Display the key/value pairs
+for(var pair of searchParams.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+
+ +

The result is:

+ +
key1, value1
+key2, value2
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('URL', '#urlsearchparams','entries() (as iterator<>)')}}{{Spec2('URL')}}Initial definition
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.URLSearchParams.entries")}}

+
+ +

See also

+ + diff --git a/files/fr/web/api/urlsearchparams/index.html b/files/fr/web/api/urlsearchparams/index.html deleted file mode 100644 index 92747ec561..0000000000 --- a/files/fr/web/api/urlsearchparams/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: URLSearchParams -slug: Web/API/URLSearchParams -translation_of: Web/API/URLSearchParams ---- -

{{ApiRef("URL API")}}

- -

L’interface URLSearchParams définit des méthodes utilitaires pour travailler avec la chaîne de requête (les paramètres GET) d’une URL.

- -

Un objet implémentant URLSearchParams peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : for (var p of mySearchParams) ou son équivalent for (var p of mySearchParams.entries()).

- -

Constructeur

- -
-
{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
-
Constructeur renvoyant un objet URLSearchParams.
-
- -

Propriétés

- -

Cette interface n’hérite d’aucune propriété.

- -

Méthodes

- -

Cette interface n’hérite d’aucune méthode.

- -
-
{{domxref("URLSearchParams.append()")}}
-
Ajoute une paire clé / valeur spécifiée en tant que nouveau paramètre de recherche.
-
{{domxref("URLSearchParams.delete()")}}
-
Supprime le paramètre de recherche donné et sa valeur associée de la liste de tous les paramètres de recherche.
-
{{domxref("URLSearchParams.entries()")}}
-
Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.
-
{{domxref("URLSearchParams.get()")}}
-
Retourne la première valeur associée au paramètre de recherche donné.
-
{{domxref("URLSearchParams.getAll()")}}
-
Retourne toutes les valeurs associées au paramètre de recherche donné.
-
{{domxref("URLSearchParams.has()")}}
-
Retourne un {{jsxref("Boolean")}} indiquant si un tel paramètre de recherche existe.
-
{{domxref("URLSearchParams.keys()")}}
-
Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.
-
{{domxref("URLSearchParams.set()")}}
-
Définit la valeur associée à un paramètre de recherche donné à la valeur donnée. S’il y avait plusieurs valeurs, les autres sont supprimées.
-
{{domxref("URLSearchParams.sort()")}}
-
Trie toutes les paires clé / valeur, s’il y en a, par leurs clés.
-
{{domxref("URLSearchParams.toString()")}}
-
Retourne une chaîne contenant une chaîne de requête pouvant être utilisée dans une URL.
-
{{domxref("URLSearchParams.values()")}}
-
Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet.
-
- -

Exemple

- -
var paramsString = "q=URLUtils.searchParams&topic=api";
-var searchParams = new URLSearchParams(paramsString);
-
-// Itère sur les paramètres de recherche.
-for (let p of searchParams) {
-  console.log(p);
-}
-
-searchParams.has("topic") === true; // true
-searchParams.get("topic") === "api"; // true
-searchParams.getAll("topic"); // ["api"]
-searchParams.get("foo") === null; // true
-searchParams.append("topic", "webdev");
-searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
-searchParams.set("topic", "More webdev");
-searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
-searchParams.delete("topic");
-searchParams.toString(); // "q=URLUtils.searchParams"
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}{{Spec2('URL')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.URLSearchParams")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/urlsearchparams/index.md b/files/fr/web/api/urlsearchparams/index.md new file mode 100644 index 0000000000..92747ec561 --- /dev/null +++ b/files/fr/web/api/urlsearchparams/index.md @@ -0,0 +1,102 @@ +--- +title: URLSearchParams +slug: Web/API/URLSearchParams +translation_of: Web/API/URLSearchParams +--- +

{{ApiRef("URL API")}}

+ +

L’interface URLSearchParams définit des méthodes utilitaires pour travailler avec la chaîne de requête (les paramètres GET) d’une URL.

+ +

Un objet implémentant URLSearchParams peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : for (var p of mySearchParams) ou son équivalent for (var p of mySearchParams.entries()).

+ +

Constructeur

+ +
+
{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
+
Constructeur renvoyant un objet URLSearchParams.
+
+ +

Propriétés

+ +

Cette interface n’hérite d’aucune propriété.

+ +

Méthodes

+ +

Cette interface n’hérite d’aucune méthode.

+ +
+
{{domxref("URLSearchParams.append()")}}
+
Ajoute une paire clé / valeur spécifiée en tant que nouveau paramètre de recherche.
+
{{domxref("URLSearchParams.delete()")}}
+
Supprime le paramètre de recherche donné et sa valeur associée de la liste de tous les paramètres de recherche.
+
{{domxref("URLSearchParams.entries()")}}
+
Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.
+
{{domxref("URLSearchParams.get()")}}
+
Retourne la première valeur associée au paramètre de recherche donné.
+
{{domxref("URLSearchParams.getAll()")}}
+
Retourne toutes les valeurs associées au paramètre de recherche donné.
+
{{domxref("URLSearchParams.has()")}}
+
Retourne un {{jsxref("Boolean")}} indiquant si un tel paramètre de recherche existe.
+
{{domxref("URLSearchParams.keys()")}}
+
Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.
+
{{domxref("URLSearchParams.set()")}}
+
Définit la valeur associée à un paramètre de recherche donné à la valeur donnée. S’il y avait plusieurs valeurs, les autres sont supprimées.
+
{{domxref("URLSearchParams.sort()")}}
+
Trie toutes les paires clé / valeur, s’il y en a, par leurs clés.
+
{{domxref("URLSearchParams.toString()")}}
+
Retourne une chaîne contenant une chaîne de requête pouvant être utilisée dans une URL.
+
{{domxref("URLSearchParams.values()")}}
+
Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet.
+
+ +

Exemple

+ +
var paramsString = "q=URLUtils.searchParams&topic=api";
+var searchParams = new URLSearchParams(paramsString);
+
+// Itère sur les paramètres de recherche.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}{{Spec2('URL')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.URLSearchParams")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/usvstring/index.html b/files/fr/web/api/usvstring/index.html deleted file mode 100644 index fc7d4ab42a..0000000000 --- a/files/fr/web/api/usvstring/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: USVString -slug: Web/API/USVString -tags: - - API - - DOM - - Reference - - String - - WedIDL -translation_of: Web/API/USVString ---- -

{{APIRef("DOM")}}

- -

USVString correspond à l'ensemble de toutes les séquences possibles de valeurs scalaires unicode. USVString correspond à une {{JSxRef("String", "chaîne de caractères")}} lorsqu'elle est renvoyée en JavaScript ; elle n'est généralement utilisée que pour les API qui effectuent un traitement de texte et ont besoin d'une chaîne de valeurs scalaires unicode pour fonctionner. USVString est équivalent à {{DOMxRef("DOMString")}} sauf qu'il n'autorise pas les points de code de substitution non appariés. Les points de code de substitution non appariés présents dans USVString sont convertis par le navigateur en "caractère de remplacement" Unicode U+FFFD, (�).

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("WebIDL", "#idl-USVString", "USVString")}}{{Spec2("WebIDL")}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/api/usvstring/index.md b/files/fr/web/api/usvstring/index.md new file mode 100644 index 0000000000..fc7d4ab42a --- /dev/null +++ b/files/fr/web/api/usvstring/index.md @@ -0,0 +1,40 @@ +--- +title: USVString +slug: Web/API/USVString +tags: + - API + - DOM + - Reference + - String + - WedIDL +translation_of: Web/API/USVString +--- +

{{APIRef("DOM")}}

+ +

USVString correspond à l'ensemble de toutes les séquences possibles de valeurs scalaires unicode. USVString correspond à une {{JSxRef("String", "chaîne de caractères")}} lorsqu'elle est renvoyée en JavaScript ; elle n'est généralement utilisée que pour les API qui effectuent un traitement de texte et ont besoin d'une chaîne de valeurs scalaires unicode pour fonctionner. USVString est équivalent à {{DOMxRef("DOMString")}} sauf qu'il n'autorise pas les points de code de substitution non appariés. Les points de code de substitution non appariés présents dans USVString sont convertis par le navigateur en "caractère de remplacement" Unicode U+FFFD, (�).

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("WebIDL", "#idl-USVString", "USVString")}}{{Spec2("WebIDL")}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/vibration_api/index.html b/files/fr/web/api/vibration_api/index.html deleted file mode 100644 index 837703e244..0000000000 --- a/files/fr/web/api/vibration_api/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: API de Vibration -slug: Web/API/Vibration_API -tags: - - Débutant - - Firefox OS - - Vibration -translation_of: Web/API/Vibration_API ---- -

Description des vibrations

- -

La vibration est décrite comme une série de marche-arrêt des impulsions, qui peuvent être de durées différentes. La série peut être soit un entier décrivant le nombre de millisecondes à vibrer ou un tableau d'entiers décrivant une série de pauses et de vibrations. La vibration est contrôlée par une seule méthode: {{domxref("Navigator.vibrate()")}}.

- -

Une seule vibration

- -

Vous pouvez effectuer une seule vibration du matériel en spécifiant soit une valeur de type "entier", soit un tableau d'entiers.

- -
window.navigator.vibrate(200);
-window.navigator.vibrate([200]);
-
- -

Ces deux exemples illustrent tout deux la vibration de l'appareil pendant 200 millisecondes.

- -

Série de vibrations

- -

Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple:

- -

 

- -
window.navigator.vibrate([200, 100, 200]);
-
- -

Cela fera vibrer l'appareil pendant 200ms, puis fait une pause de 100ms avant de le faire vibrer à nouveau pendant 200ms.

- -

Vous pouvez spécifier autant de paires vibration/pause que vous voulez. Vous pouvez également fournir soit un nombre pair ou impair. Il est à noter que vous ne devez pas fournir de pause avant que la dernière vibration ait lieu.

- -

Annuler les vibrations existantes

- -

Faire appel à {{domxref("Navigator.vibrate()")}} avec une valeur 0, un tableau vide, ou encore un tableau composé uniquement de 0 annulera toutes series de vibrations actives.

- -

Vibrations continues

- -

Quelques codes de base comme  setInterval et clearInterval vont vous permettre de créer une vibration persistante:

- -
var vibrateInterval;
-
-// Démarre une vibration avec une durée
-function startVibrate(duration) {
-    navigator.vibrate(duration);
-}
-
-// Arrête la vibration
-function stopVibrate() {
-    // Vide l'intervalle et annule les vibrations persistantes
-    if(vibrateInterval) clearInterval(vibrateInterval);
-    navigator.vibrate(0);
-}
-
-// Démarre la vibration persistante avec un intervalle et une durée donnée
-function startPeristentVibrate(duration, interval) {
-    vibrateInterval = setInterval(function() {
-        startVibrate(duration);
-    }, interval);
-}
- -

Bien sûr, l'extrait de code ci-dessus ne prends pas en compte la méthode du tableau de vibration ; les vibrations persistantes devront se faire en calculant la somme des éléments du tableau et créer un intervalle basé sur ce nombre (avec, probablement, un délai supplémentaire).

- -

Pourquoi utiliser l'API de vibration?

- -

Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Linked to spec is the latest editor's draft; W3C version is a REC.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Navigator.vibrate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/vibration_api/index.md b/files/fr/web/api/vibration_api/index.md new file mode 100644 index 0000000000..837703e244 --- /dev/null +++ b/files/fr/web/api/vibration_api/index.md @@ -0,0 +1,99 @@ +--- +title: API de Vibration +slug: Web/API/Vibration_API +tags: + - Débutant + - Firefox OS + - Vibration +translation_of: Web/API/Vibration_API +--- +

Description des vibrations

+ +

La vibration est décrite comme une série de marche-arrêt des impulsions, qui peuvent être de durées différentes. La série peut être soit un entier décrivant le nombre de millisecondes à vibrer ou un tableau d'entiers décrivant une série de pauses et de vibrations. La vibration est contrôlée par une seule méthode: {{domxref("Navigator.vibrate()")}}.

+ +

Une seule vibration

+ +

Vous pouvez effectuer une seule vibration du matériel en spécifiant soit une valeur de type "entier", soit un tableau d'entiers.

+ +
window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+
+ +

Ces deux exemples illustrent tout deux la vibration de l'appareil pendant 200 millisecondes.

+ +

Série de vibrations

+ +

Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple:

+ +

 

+ +
window.navigator.vibrate([200, 100, 200]);
+
+ +

Cela fera vibrer l'appareil pendant 200ms, puis fait une pause de 100ms avant de le faire vibrer à nouveau pendant 200ms.

+ +

Vous pouvez spécifier autant de paires vibration/pause que vous voulez. Vous pouvez également fournir soit un nombre pair ou impair. Il est à noter que vous ne devez pas fournir de pause avant que la dernière vibration ait lieu.

+ +

Annuler les vibrations existantes

+ +

Faire appel à {{domxref("Navigator.vibrate()")}} avec une valeur 0, un tableau vide, ou encore un tableau composé uniquement de 0 annulera toutes series de vibrations actives.

+ +

Vibrations continues

+ +

Quelques codes de base comme  setInterval et clearInterval vont vous permettre de créer une vibration persistante:

+ +
var vibrateInterval;
+
+// Démarre une vibration avec une durée
+function startVibrate(duration) {
+    navigator.vibrate(duration);
+}
+
+// Arrête la vibration
+function stopVibrate() {
+    // Vide l'intervalle et annule les vibrations persistantes
+    if(vibrateInterval) clearInterval(vibrateInterval);
+    navigator.vibrate(0);
+}
+
+// Démarre la vibration persistante avec un intervalle et une durée donnée
+function startPeristentVibrate(duration, interval) {
+    vibrateInterval = setInterval(function() {
+        startVibrate(duration);
+    }, interval);
+}
+ +

Bien sûr, l'extrait de code ci-dessus ne prends pas en compte la méthode du tableau de vibration ; les vibrations persistantes devront se faire en calculant la somme des éléments du tableau et créer un intervalle basé sur ce nombre (avec, probablement, un délai supplémentaire).

+ +

Pourquoi utiliser l'API de vibration?

+ +

Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Linked to spec is the latest editor's draft; W3C version is a REC.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Navigator.vibrate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/videotrack/id/index.html b/files/fr/web/api/videotrack/id/index.html deleted file mode 100644 index 6cd67b7732..0000000000 --- a/files/fr/web/api/videotrack/id/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: VideoTrack.id -slug: Web/API/VideoTrack/id -translation_of: Web/API/VideoTrack/id ---- -

{{APIRef("HTML DOM")}}

- -

La propriété id contient une chaîne qui identifie de manière unique une piste représentée par {{domxref("VideoTrack")}}. Cet ID peut être utilisé avec la méthode {{domxref("VideoTrackList.getTrackById()")}} pour localiser une piste spécifique dans le media associé à l'élément media.

- -

Cet ID peut aussi être utilisé comme un fragement d'URL pour charger une piste (si le media supporte les fragments de media).

- -

Syntaxe

- -
var trackID = VideoTrack.id;
- -

Valeur

- -

Une {{domxref("DOMString")}} qui identifie la piste, utilisable par la suite pour l'appel de {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} sur une {{domxref("VideoTrackList")}} tel que spécifié par la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}} d'un élément media.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-videotrack-id', 'VideoTrack: id')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.VideoTrack.id")}}

diff --git a/files/fr/web/api/videotrack/id/index.md b/files/fr/web/api/videotrack/id/index.md new file mode 100644 index 0000000000..6cd67b7732 --- /dev/null +++ b/files/fr/web/api/videotrack/id/index.md @@ -0,0 +1,43 @@ +--- +title: VideoTrack.id +slug: Web/API/VideoTrack/id +translation_of: Web/API/VideoTrack/id +--- +

{{APIRef("HTML DOM")}}

+ +

La propriété id contient une chaîne qui identifie de manière unique une piste représentée par {{domxref("VideoTrack")}}. Cet ID peut être utilisé avec la méthode {{domxref("VideoTrackList.getTrackById()")}} pour localiser une piste spécifique dans le media associé à l'élément media.

+ +

Cet ID peut aussi être utilisé comme un fragement d'URL pour charger une piste (si le media supporte les fragments de media).

+ +

Syntaxe

+ +
var trackID = VideoTrack.id;
+ +

Valeur

+ +

Une {{domxref("DOMString")}} qui identifie la piste, utilisable par la suite pour l'appel de {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} sur une {{domxref("VideoTrackList")}} tel que spécifié par la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}} d'un élément media.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-videotrack-id', 'VideoTrack: id')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.VideoTrack.id")}}

diff --git a/files/fr/web/api/videotrack/index.html b/files/fr/web/api/videotrack/index.html deleted file mode 100644 index 07ed277113..0000000000 --- a/files/fr/web/api/videotrack/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: VideoTrack -slug: Web/API/VideoTrack -tags: - - HTML - - HTML DOM - - Interface - - Media - - Reference - - TopicStub - - Video - - VideoTrack - - track -translation_of: Web/API/VideoTrack ---- -
{{APIRef("HTML DOM")}}
- -

L'interface {{domxref("VideoTrack")}} représente une seule piste vidéo d'un élément {{HTMLElement("video")}}. L'utilisation la plus courante à un objet VideoTrack est de basculer sa propriété {{domxref("VideoTrack.selected", "selected")}} afin d'en faire la piste vidéo active pour l'élément {{HTMLElement("video")}}.

- -

Propriétés

- -
-
{{domxref("VideoTrack.selected", "selected")}}
-
Une valeur booléenne qui contrôle si la piste vidéo est active ou non. Seule une seule piste vidéo peut être active à un moment donné, donc la définition de cette propriété sur true pour une piste pendant qu'une autre piste est active rendra cette autre piste inactive.
-
{{domxref("VideoTrack.id", "id")}} {{ReadOnlyInline}}
-
Un {{domxref("DOMString")}} qui identifie de manière unique la piste dans le média. Cet identifiant peut être utilisé pour localiser une piste spécifique dans une liste de pistes vidéo en appelant {{domxref("VideoTrackList.getTrackById()")}}. L'identifiant peut également être utilisé comme partie fragment de l'URL si le support prend en charge la recherche par fragment de support conformément à la spécification UR de fragments de média.
-
{{domxref("VideoTrack.kind", "kind")}} {{ReadOnlyInline}}
-
Un {{domxref("DOMString")}} spécifiant la catégorie dans laquelle appartient la piste. Par exemple, la piste vidéo principale aurait un type "principale".
-
{{domxref("VideoTrack.label", "label")}} {{ReadOnlyInline}}
-
Un {{domxref("DOMString")}} fournissant une étiquette lisible par l'homme pour la piste. Par exemple, une piste dont le type est "signe" peut avoir l'étiquette "Une interprétation en langue des signes". Cette chaîne est vide si aucune étiquette n'est fournie.
-
{{domxref("VideoTrack.language", "language")}} {{ReadOnlyInline}}
-
Un {{domxref("DOMString")}} spécifiant la langue principale de la piste vidéo, ou une chaîne vide si elle est inconnue. La langue est spécifié en tant que code de langue BCP 47 ({{RFC(5646)}}), tel que "en-US" ou "pt-BR".
-
{{domxref("VideoTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}
-
Le {{domxref("SourceBuffer")}} qui a créé la piste. Renvoie null si la piste n'a pas été créée par un {{domxref("SourceBuffer")}} ou le {{domxref("SourceBuffer")}} a été supprimé de l'attribut {{domxref("MediaSource.sourceBuffers")}} de sa source média parent.
-
- -

Notes d'utilisation

- -

Pour obtenir un VideoTrack pour un élément multimédia donné, utilisez la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}}, qui renvoie un objet {{domxref("VideoTrackList")}} à partir duquel vous pouvez obtenir les pistes individuelles contenues dans le média:

- -
var el = document.querySelector("video");
-var tracks = el.videoTracks;
-
- -

Vous pouvez ensuite accéder aux pistes individuelles du média en utilisant soit la syntaxe de tableau, soit des fonctions telles que {{jsxref("Array.forEach", "forEach()")}}.

- -

Ce premier exemple obtient la première piste vidéo sur le média:

- -
var firstTrack = tracks[0];
- -

L'exemple suivant parcourt toutes les pistes vidéo du média, activant la première piste vidéo qui est dans la langue préférée de l'utilisateur (tirée d'une variable userLanguage).

- -
for (var i = 0; i < tracks.length; i++) {
-  if (tracks[i].language === userLanguage) {
-    tracks[i].selected = true;
-    break;
-  }
-});
-
- -

Le {{domxref("VideoTrack.language", "language")}} est au format standard ({{RFC(5646)}}). Pour l'anglais américain, ce serait "en-US", par exemple.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#videotrack', 'VideoTrack')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.VideoTrack")}}

diff --git a/files/fr/web/api/videotrack/index.md b/files/fr/web/api/videotrack/index.md new file mode 100644 index 0000000000..07ed277113 --- /dev/null +++ b/files/fr/web/api/videotrack/index.md @@ -0,0 +1,84 @@ +--- +title: VideoTrack +slug: Web/API/VideoTrack +tags: + - HTML + - HTML DOM + - Interface + - Media + - Reference + - TopicStub + - Video + - VideoTrack + - track +translation_of: Web/API/VideoTrack +--- +
{{APIRef("HTML DOM")}}
+ +

L'interface {{domxref("VideoTrack")}} représente une seule piste vidéo d'un élément {{HTMLElement("video")}}. L'utilisation la plus courante à un objet VideoTrack est de basculer sa propriété {{domxref("VideoTrack.selected", "selected")}} afin d'en faire la piste vidéo active pour l'élément {{HTMLElement("video")}}.

+ +

Propriétés

+ +
+
{{domxref("VideoTrack.selected", "selected")}}
+
Une valeur booléenne qui contrôle si la piste vidéo est active ou non. Seule une seule piste vidéo peut être active à un moment donné, donc la définition de cette propriété sur true pour une piste pendant qu'une autre piste est active rendra cette autre piste inactive.
+
{{domxref("VideoTrack.id", "id")}} {{ReadOnlyInline}}
+
Un {{domxref("DOMString")}} qui identifie de manière unique la piste dans le média. Cet identifiant peut être utilisé pour localiser une piste spécifique dans une liste de pistes vidéo en appelant {{domxref("VideoTrackList.getTrackById()")}}. L'identifiant peut également être utilisé comme partie fragment de l'URL si le support prend en charge la recherche par fragment de support conformément à la spécification UR de fragments de média.
+
{{domxref("VideoTrack.kind", "kind")}} {{ReadOnlyInline}}
+
Un {{domxref("DOMString")}} spécifiant la catégorie dans laquelle appartient la piste. Par exemple, la piste vidéo principale aurait un type "principale".
+
{{domxref("VideoTrack.label", "label")}} {{ReadOnlyInline}}
+
Un {{domxref("DOMString")}} fournissant une étiquette lisible par l'homme pour la piste. Par exemple, une piste dont le type est "signe" peut avoir l'étiquette "Une interprétation en langue des signes". Cette chaîne est vide si aucune étiquette n'est fournie.
+
{{domxref("VideoTrack.language", "language")}} {{ReadOnlyInline}}
+
Un {{domxref("DOMString")}} spécifiant la langue principale de la piste vidéo, ou une chaîne vide si elle est inconnue. La langue est spécifié en tant que code de langue BCP 47 ({{RFC(5646)}}), tel que "en-US" ou "pt-BR".
+
{{domxref("VideoTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}
+
Le {{domxref("SourceBuffer")}} qui a créé la piste. Renvoie null si la piste n'a pas été créée par un {{domxref("SourceBuffer")}} ou le {{domxref("SourceBuffer")}} a été supprimé de l'attribut {{domxref("MediaSource.sourceBuffers")}} de sa source média parent.
+
+ +

Notes d'utilisation

+ +

Pour obtenir un VideoTrack pour un élément multimédia donné, utilisez la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}}, qui renvoie un objet {{domxref("VideoTrackList")}} à partir duquel vous pouvez obtenir les pistes individuelles contenues dans le média:

+ +
var el = document.querySelector("video");
+var tracks = el.videoTracks;
+
+ +

Vous pouvez ensuite accéder aux pistes individuelles du média en utilisant soit la syntaxe de tableau, soit des fonctions telles que {{jsxref("Array.forEach", "forEach()")}}.

+ +

Ce premier exemple obtient la première piste vidéo sur le média:

+ +
var firstTrack = tracks[0];
+ +

L'exemple suivant parcourt toutes les pistes vidéo du média, activant la première piste vidéo qui est dans la langue préférée de l'utilisateur (tirée d'une variable userLanguage).

+ +
for (var i = 0; i < tracks.length; i++) {
+  if (tracks[i].language === userLanguage) {
+    tracks[i].selected = true;
+    break;
+  }
+});
+
+ +

Le {{domxref("VideoTrack.language", "language")}} est au format standard ({{RFC(5646)}}). Pour l'anglais américain, ce serait "en-US", par exemple.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#videotrack', 'VideoTrack')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.VideoTrack")}}

diff --git a/files/fr/web/api/vrdisplaycapabilities/index.html b/files/fr/web/api/vrdisplaycapabilities/index.html deleted file mode 100644 index 27c1a9ffc0..0000000000 --- a/files/fr/web/api/vrdisplaycapabilities/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: VRDisplayCapabilities -slug: Web/API/VRDisplayCapabilities -translation_of: Web/API/VRDisplayCapabilities ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

L'interface VRDisplayCapabilities de WebVR API décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position.

- -

Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}.

- -

Properties

- -
-
{{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}}
-
Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque).
-
{{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}}
-
Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil.
-
{{domxref("VRDisplayCapabilities.hasOrientation")}} {{readonlyInline}}
-
Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.
-
{{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}}
-
Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.
-
{{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}}
-
Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.)
-
- -

Exemples

- -
TBD.
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebVR', '#interface-vrdisplaycapabilities', 'VRDisplayCapabilities')}}{{Spec2('WebVR')}}Définition initiale
- -

Compatibilité avec les navigateurs

- -

{{Compat("api.VRDisplayCapabilities")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/vrdisplaycapabilities/index.md b/files/fr/web/api/vrdisplaycapabilities/index.md new file mode 100644 index 0000000000..27c1a9ffc0 --- /dev/null +++ b/files/fr/web/api/vrdisplaycapabilities/index.md @@ -0,0 +1,59 @@ +--- +title: VRDisplayCapabilities +slug: Web/API/VRDisplayCapabilities +translation_of: Web/API/VRDisplayCapabilities +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

L'interface VRDisplayCapabilities de WebVR API décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position.

+ +

Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}.

+ +

Properties

+ +
+
{{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}}
+
Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque).
+
{{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}}
+
Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil.
+
{{domxref("VRDisplayCapabilities.hasOrientation")}} {{readonlyInline}}
+
Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.
+
{{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}}
+
Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.
+
{{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}}
+
Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.)
+
+ +

Exemples

+ +
TBD.
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebVR', '#interface-vrdisplaycapabilities', 'VRDisplayCapabilities')}}{{Spec2('WebVR')}}Définition initiale
+ +

Compatibilité avec les navigateurs

+ +

{{Compat("api.VRDisplayCapabilities")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/web_animations_api/index.html b/files/fr/web/api/web_animations_api/index.html deleted file mode 100644 index 2e2a8a8435..0000000000 --- a/files/fr/web/api/web_animations_api/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Web Animations API -slug: Web/API/Web_Animations_API -tags: - - API - - Animation - - Reference - - Web Animations -translation_of: Web/API/Web_Animations_API ---- -

{{DefaultAPISidebar("Web Animations")}}

- -

L'API Web Animations permet de synchroniser et de chronométrer les changements de présentation d'une page Web, c'est-à-dire l'animation d'éléments DOM. Pour ce faire, il combine deux modèles : le modèle de synchronisation et le modèle d'animation.

- -

Concepts et utilisation

- -

L'API Web Animations fournit un langage commun aux navigateurs et aux développeurs pour décrire les animations sur les éléments DOM. Pour obtenir plus d'informations sur les concepts derrière l'API et comment l'utiliser, lisez Utilisation de l'API Web Animations.

- -

Interfaces d'animations Web

- -
-
{{domxref("Animation")}}
-
Fournit des commandes de lecture et une chronologie pour un nœud ou une source d'animation. Peut prendre un objet créé avec le constructeur {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}.
-
{{domxref("KeyframeEffect")}}
-
Décrit des ensembles de propriétés et de valeurs animables, appelées images clés (keyframes) et leurs options de minutage . Ceux-ci peuvent ensuite être lus en utilisant le constructeur {{domxref("Animation.Animation", "Animation()")}}.
-
{{domxref("AnimationTimeline")}}
-
Représente la chronologie de l'animation. Cette interface existe pour définir les fonctionnalités de la chronologie (héritées par {{domxref("DocumentTimeline")}} et les futurs objets de chronologie) et n'est pas elle-même accessible par les développeurs.
-
{{domxref("AnimationEvent")}}
-
Fait actuellement partie des animations CSS.
-
{{domxref("DocumentTimeline")}}
-
Représente les chronologies d'animation, y compris la chronologie du document par défaut (accessible à l'aide de la propriété {{domxref("Document.timeline")}}).
-
{{domxref("EffectTiming")}}
-
{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect()")}} acceptent tous un dictionnaire facultatif objet des propriétés de synchronisation.
-
- -

Extensions à d'autres interfaces

- -

L'API Web Animations ajoute de nouvelles fonctionnalités à {{domxref("document")}} et {{domxref("element")}}.

- -

Extensions à l'interface Document

- -
-
{{domxref("document.timeline")}}
-
L'objet DocumentTimeline représentant la chronologie du document par défaut.
-
{{domxref("document.getAnimations()")}}
-
Renvoie un tableau d'objets {{domxref("Animation")}} actuellement en vigueur sur les éléments du document.
-
- -

Extensions à l'interface Element

- -
-
{{domxref("Element.animate()")}}
-
Une méthode de raccourci pour créer et lire une animation sur un élément. Il renvoie l'instance d'objet {{domxref("Animation")}} créée.
-
{{domxref("Element.getAnimations()")}}
-
Renvoie un tableau d'objets {{domxref("Animation")}} affectant actuellement un élément ou qui sont programmés pour le faire à l'avenir.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Animations')}}{{Spec2('Web Animations')}}Définition initiale
- -

Voir aussi

- - diff --git a/files/fr/web/api/web_animations_api/index.md b/files/fr/web/api/web_animations_api/index.md new file mode 100644 index 0000000000..2e2a8a8435 --- /dev/null +++ b/files/fr/web/api/web_animations_api/index.md @@ -0,0 +1,85 @@ +--- +title: Web Animations API +slug: Web/API/Web_Animations_API +tags: + - API + - Animation + - Reference + - Web Animations +translation_of: Web/API/Web_Animations_API +--- +

{{DefaultAPISidebar("Web Animations")}}

+ +

L'API Web Animations permet de synchroniser et de chronométrer les changements de présentation d'une page Web, c'est-à-dire l'animation d'éléments DOM. Pour ce faire, il combine deux modèles : le modèle de synchronisation et le modèle d'animation.

+ +

Concepts et utilisation

+ +

L'API Web Animations fournit un langage commun aux navigateurs et aux développeurs pour décrire les animations sur les éléments DOM. Pour obtenir plus d'informations sur les concepts derrière l'API et comment l'utiliser, lisez Utilisation de l'API Web Animations.

+ +

Interfaces d'animations Web

+ +
+
{{domxref("Animation")}}
+
Fournit des commandes de lecture et une chronologie pour un nœud ou une source d'animation. Peut prendre un objet créé avec le constructeur {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}.
+
{{domxref("KeyframeEffect")}}
+
Décrit des ensembles de propriétés et de valeurs animables, appelées images clés (keyframes) et leurs options de minutage . Ceux-ci peuvent ensuite être lus en utilisant le constructeur {{domxref("Animation.Animation", "Animation()")}}.
+
{{domxref("AnimationTimeline")}}
+
Représente la chronologie de l'animation. Cette interface existe pour définir les fonctionnalités de la chronologie (héritées par {{domxref("DocumentTimeline")}} et les futurs objets de chronologie) et n'est pas elle-même accessible par les développeurs.
+
{{domxref("AnimationEvent")}}
+
Fait actuellement partie des animations CSS.
+
{{domxref("DocumentTimeline")}}
+
Représente les chronologies d'animation, y compris la chronologie du document par défaut (accessible à l'aide de la propriété {{domxref("Document.timeline")}}).
+
{{domxref("EffectTiming")}}
+
{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect()")}} acceptent tous un dictionnaire facultatif objet des propriétés de synchronisation.
+
+ +

Extensions à d'autres interfaces

+ +

L'API Web Animations ajoute de nouvelles fonctionnalités à {{domxref("document")}} et {{domxref("element")}}.

+ +

Extensions à l'interface Document

+ +
+
{{domxref("document.timeline")}}
+
L'objet DocumentTimeline représentant la chronologie du document par défaut.
+
{{domxref("document.getAnimations()")}}
+
Renvoie un tableau d'objets {{domxref("Animation")}} actuellement en vigueur sur les éléments du document.
+
+ +

Extensions à l'interface Element

+ +
+
{{domxref("Element.animate()")}}
+
Une méthode de raccourci pour créer et lire une animation sur un élément. Il renvoie l'instance d'objet {{domxref("Animation")}} créée.
+
{{domxref("Element.getAnimations()")}}
+
Renvoie un tableau d'objets {{domxref("Animation")}} affectant actuellement un élément ou qui sont programmés pour le faire à l'avenir.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Animations')}}{{Spec2('Web Animations')}}Définition initiale
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html deleted file mode 100644 index 6e5c9cae01..0000000000 --- a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Les concepts de base de la Web Audio API -slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API -translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API ---- - -

Cet article explique une partie de la théorie sur laquelle s'appuient les fonctionnalités de la Web Audio API. Il ne fera pas de vous un ingénieur du son, mais vous donnera les bases nécessaires pour comprendre pourquoi la Web Audio API fonctionne de cette manière, et vous permettre de mieux l'utiliser.

- -

Graphes audio

- -

La Web Audio API implique d'effectuer le traitement du son dans un contexte audio; elle a été conçue sur le principe de routage modulaire. Les opérations basiques sont effectuées dans noeuds audio, qui sont liés entre eux pour former un graphe de routage audio. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques.

- -

Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :

- -
    -
  1. Création d'un contexte audio
    2. -
  2. Dans ce contexte, création des sources — telles que <audio>, oscillateur, flux
    3. -
  3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur
    4. -
  4. Choix final de la sortie audio, par exemple les enceintes du système 
    5. -
  5. Connection des sources aux effets, et des effets à la sortie.
    6. -
- -

Diagramme simple composé de trois rectangles intitulés Sources, Effets et Sortie, reliés par des flèches, de gauche à droite, qui indiquent le sens du flux d'informations audio.

- -

Chaque entrée ou sortie est composée de plusieurs canaux, chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris mono, stereo, quad, 5.1, etc.

- -

Diagramme qui montre comment les AudioNodes sont reliés par leurs entrées et sorties, et la configuration des canaux à l'intérieur de ces entrées/sorties.

- -

Les sources audio peuvent être de provenance variée :

- - - -

Données audio: ce qu'on trouve dans un échantillon

- -

Lors du traitement d'un signal audio, l'échantillonage désigne la conversion d'un signal continu en signal discret; formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.

- -

On peut trouver davantage de détails sur la page Wikipedia Echantillonage (signal).

- -

Mémoire tampon : trames, échantillons et canaux

- -

Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde.

- -

Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.)  à un point précis dans le temps.

- -

Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son.

- -

Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz:

- - - -

Le diagramme montre une succession de tames dans un buffer audio. Comme le buffer est composé de deux canaux (stéréo), chaque trame contient deux échantillons.

- -

Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux.

- -
-

Note : Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux.

-
- -

Voici quelques exemples simples:

- -
var contexte = new AudioContext();
-var memoireTampon = contexte.createBuffer(2, 22050, 44100);
- -
-

Note : 44,100 Hz (que l'on peut aussi écrire 44.1 kHz) est un taux d'échantillonage couramment utilisé. Pourquoi 44.1kHz ?
-
- D'abord, parce ce que le champ auditif qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le théorème d'échantillonage de Nyquist–Shannon la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz.
-
- De plus, le signal doit être traité par un filtre passe-bas avant d'être échantilloné, afin d'éviter le phénomène d'aliasing, et, si en théorie un  filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une bande de transition dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un filtre anti-aliasing. Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz.

-
- -

Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes.

- -
var contexte = new AudioContext();
-var memoireTampon = context.createBuffer(1, 22050, 22050);
- -

Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement *rééchantillonnée* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde.

- -
-

Note : le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus).

-
- -

Mémoire tampon linéaire ou entrelacée

- -

La Web Audio API utilise un format de mémoire tampon linéaire : les canaux gauche et droite sont stockés de la façon suivante :

- -
LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (pour un buffer de 16 trames)
- -

C'est assez courant dans le traitement audio, car cela permet de traiter facilement chaque canal de façon indépendante.

- -

L'alternative est d'utiliser un format entrelacé:

- -
LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (pour un buffer de 16 trames)
- -

Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de  MP3 décodé.
-
- La Web Audio API expose *uniquement* des buffer linéaires, car elle est faite pour le traitement du son. Elle fonctionne en linéaire, mais convertit les données au format entrelacé au moment de les envoyer à la carte son pour qu'elles soient jouées. A l'inverse, lorsqu'un MP3 est décodé, le format d'origine entrelacé est converti en linéaire pour le traitement.

- -

Canaux audio

- -

Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard  détaillées dans le tableau ci-après :

- - - - - - - - - - - - - - - - - - - - -
Mono0: M: mono
Stereo0: L: gauche
- 1: R: droit
Quad0: L: gauche
- 1: R: droit
- 2: SL: surround gauche
- 3: SR: surround droit
5.10: L: gauche
- 1: R: droit
- 2: C: centre
- 3: LFE: subwoofer
- 4: SL: surround gauche
- 5: SR: surround droit
- -

Conversion ascendante et descendante

- -

Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effectue une conversion ascendante ou descendante selon les règles suivantes. Cela peut être plus ou moins controllé en assignant la valeur speakers ou discrete à la propriété {{domxref("AudioNode.channelInterpretation")}} .

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
InterprétationCanaux d'entréeCanaux de sortieRègles de conversion
speakers1 (Mono)2 (Stéréo)Conversion ascendante de mono vers stéréo.
- Le canal d'entrée M est utilisé pour les deux canaux de sortie (L et R).
- output.L = input.M
- output.R = input.M
1 (Mono)4 (Quad)Conversion ascendante de mono vers quad.
- Le canal d'entrée M est utilisé pour les canaux de sortie autres que surround (L et R). Les canaux de sortie surround (SL et SR) sont silencieux.
- output.L = input.M
- output.R = input.M
- output.SL = 0
- output.SR = 0
1 (Mono)6 (5.1)Conversion ascendante de mono vers 5.1.
- Le canal d'entrée M est utilisé pour le canal de sortie central (C). Tous les autres canaux (L, R, LFE, SL, et SR) sont silencieux.
- output.L = 0
- output.R = 0
- output.C = input.M
- output.LFE = 0
- output.SL = 0
- output.SR = 0
2 (Stéréo)1 (Mono)Conversion descendante de stéréo vers mono.
- Les deux canaux d'entrée (L et R) sont combinées pour produire l'unique canal de sortie (M).
- output.M = 0.5 * (input.L + input.R)
2 (Stéréo)4 (Quad)Conversion ascendante de stéréo vers quad.
- Les canaux d'entrée L et R input sont utilisés pour leurs équivalents respectifs non-surround en sortie (L et R). Les canaux de sortie surround (SL et SR) sont silencieux.
- output.L = input.L
- output.R = input.R
- output.SL = 0
- output.SR = 0
2 (Stéréo)6 (5.1)Conversion ascendante de stéréo vers 5.1.
- Les canaux d'entrée L et R sont utilisés pour leurs équivalents respectifs non-surround en sortie (L et R). Les canaux de sortie surround (SL et SR), ainsi que le canal central (C) et le canal subwoofer (LFE) restent silencieux.
- output.L = input.L
- output.R = input.R
- output.C = 0
- output.LFE = 0
- output.SL = 0
- output.SR = 0
4 (Quad)1 (Mono)Conversion descendante de quad vers mono.
- Les quatre canaux de sortie (L, R, SL, et SR) sont  combinés pour produire l'unique canal de sortie (M).
- output.M = 0.25 * (input.L + input.R + input.SL + input.SR)
4 (Quad)2 (Stéréo)Conversion descendante de quad vers stéréo.
- Les deux canaux d'entrée à gauche (L and SL) sont combinés pour produire l'unique canal de sortie à gauche (L). De la même façon, les deux canaux d'entrée à droite (R et SR) sont combinés pour produire l'unique canal de sortie à droite (R).
- output.L = 0.5 * (input.L + input.SL)
- output.R = 0.5 * (input.R + input.SR)
4 (Quad)6 (5.1)Conversion ascendante de quad vers 5.1.
- Les canaux d'entrée L, R, SL, et SR sont utilisés pour leur canaux de sortie équivalents respectifs (L and R). Le canal central (C) et le canal subwoofer (LFE) restent silencieux.
- output.L = input.L
- output.R = input.R
- output.C = 0
- output.LFE = 0
- output.SL = input.SL
- output.SR = input.SR
6 (5.1)1 (Mono)Conversion descendante de 5.1 vers mono.
- Les canaux de gauche (L et SL), de droite (R et SR) et central sont tous mixés ensemble. Les canaux surround sont légèrement atténués et la puissance des canaux latéraux est compensée pour la faire compter comme un seul canal en la multipliant par √2/2. Le canal subwoofer (LFE) est perdu.
- output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + input.SR)
6 (5.1)2 (Stéréo)Conversion descendante de 5.1 vers stéréo.
- Le canal central (C) est additionné avec chacun des canaux latéraux  (SL et SR) puis combiné avec chacun des canaux latéraux (L et R). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par √2/2. Le canal subwoofer (LFE) est perdu.
- output.L = input.L + 0.7071 * (input.C + input.SL)
- output.R = input.R + 0.7071 * (input.C + input.SR)
6 (5.1)4 (Quad)Conversion descendante de 5.1 vers quad.
- Le canal central (C) est combiné avec les canaux latéraux non-surround (L et R). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par √2/2. Les canaux surround restent inchangés. Le canal subwoofer (LFE) est perdu.
- output.L = input.L + 0.7071 * input.C
- output.R = input.R + 0.7071 * input.C
- output.SL = input.SL
- output.SR = input.SR
Autres configurations non-standardLes configurations non-standard sont traitées comme si la propriété channelInterpretation avait la valeur discrete.
- La spécification autorise explicitement la définition à venir de nouvelles configurations de sortie pour les enceintes. Ce cas de figure  n'est par conséquent pas garanti dans le futur, car le comportement des navigateurs pour un nombre spécifique de canaux pourrait être amené à changer.
discretetout (x)tout (y) pour lequel x<yConversion ascendante de canaux discrets.
- Remplit chaque canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui a le même index. Les canaux de sortie qui n'ont pas d'équivalent en entrée restent silencieux.
tout (x)tout (y) pour lequel x>yConversion descendante de canaux discrets.
- Remplit chaque canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui a le même index. Les canaux d'entrée qui n'ont pas d'équivalent en sortie sont perdus.
- -

Visualisations

- -

Une visualisation audio consiste en général à utiliser un flux de données audio dans le temps (souvent des informations de gain ou de fréquence) pour générer un affichage graphique (comme un graphe). La Web Audio API possède un {{domxref("AnalyserNode")}} qui n'altère pas le signal audio qui le traverse, permettant de générer des données qui peuvent être utilisées par une technologie de visualisation telle que {{htmlelement("canvas")}}.

- -

Le noeud permet de récupérer la fréquence et le domaine temporel en utilisant FFT, et ce sans modifier le flux audio

- -

On peut accéder aux données en utilisant les méthodes suivantes:

- -
-
{{domxref("AnalyserNode.getFloatFrequencyData()")}}
-
Copie les données de fréquence dans le tableau {{domxref("Float32Array")}} passé en argument.
-
- -
-
{{domxref("AnalyserNode.getByteFrequencyData()")}}
-
Copies les données de fréquence dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.
-
- -
-
{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
-
Copie les données de l'onde de forme, ou domaine temporel, dans le {{domxref("Float32Array")}} passé en argument.
-
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
-
Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.
-
- -
-

Note : Pour plus d'informations, voir notre article Visualizations with Web Audio API.

-
- -

Spatialisations

- -
-

Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal.

- -

La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.

-
- -

Le PannerNode donne la position dans l'espace, la vélocité et la direction d'un signal donné

- -
-

La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite,  son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.

-
- -

On voit la position d'un auditeur, ainsi que les vecteurs de direction haut et de face qui forment un angle de 90°

- -
-

Note : For more information, see our Web audio spatialization basics article.

-
- -

Fan-in et Fan-out

- -

En audio, fan-in désigne le processus par lequel un {{domxref("ChannelMergerNode")}} prend une série d'entrées mono entrée et restitue un seul signal multi-canaux :

- -

- -

Fan-out désigne le processus opposé, par lequel un {{domxref("ChannelSplitterNode")}} prend une source multi-canaux en entrée et restitue plusieurs signaux mono en sortie:

- -

diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md new file mode 100644 index 0000000000..6e5c9cae01 --- /dev/null +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md @@ -0,0 +1,345 @@ +--- +title: Les concepts de base de la Web Audio API +slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API +translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API +--- + +

Cet article explique une partie de la théorie sur laquelle s'appuient les fonctionnalités de la Web Audio API. Il ne fera pas de vous un ingénieur du son, mais vous donnera les bases nécessaires pour comprendre pourquoi la Web Audio API fonctionne de cette manière, et vous permettre de mieux l'utiliser.

+ +

Graphes audio

+ +

La Web Audio API implique d'effectuer le traitement du son dans un contexte audio; elle a été conçue sur le principe de routage modulaire. Les opérations basiques sont effectuées dans noeuds audio, qui sont liés entre eux pour former un graphe de routage audio. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques.

+ +

Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :

+ +
    +
  1. Création d'un contexte audio
    2. +
  2. Dans ce contexte, création des sources — telles que <audio>, oscillateur, flux
    3. +
  3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur
    4. +
  4. Choix final de la sortie audio, par exemple les enceintes du système 
    5. +
  5. Connection des sources aux effets, et des effets à la sortie.
    6. +
+ +

Diagramme simple composé de trois rectangles intitulés Sources, Effets et Sortie, reliés par des flèches, de gauche à droite, qui indiquent le sens du flux d'informations audio.

+ +

Chaque entrée ou sortie est composée de plusieurs canaux, chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris mono, stereo, quad, 5.1, etc.

+ +

Diagramme qui montre comment les AudioNodes sont reliés par leurs entrées et sorties, et la configuration des canaux à l'intérieur de ces entrées/sorties.

+ +

Les sources audio peuvent être de provenance variée :

+ + + +

Données audio: ce qu'on trouve dans un échantillon

+ +

Lors du traitement d'un signal audio, l'échantillonage désigne la conversion d'un signal continu en signal discret; formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.

+ +

On peut trouver davantage de détails sur la page Wikipedia Echantillonage (signal).

+ +

Mémoire tampon : trames, échantillons et canaux

+ +

Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde.

+ +

Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.)  à un point précis dans le temps.

+ +

Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son.

+ +

Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz:

+ + + +

Le diagramme montre une succession de tames dans un buffer audio. Comme le buffer est composé de deux canaux (stéréo), chaque trame contient deux échantillons.

+ +

Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux.

+ +
+

Note : Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux.

+
+ +

Voici quelques exemples simples:

+ +
var contexte = new AudioContext();
+var memoireTampon = contexte.createBuffer(2, 22050, 44100);
+ +
+

Note : 44,100 Hz (que l'on peut aussi écrire 44.1 kHz) est un taux d'échantillonage couramment utilisé. Pourquoi 44.1kHz ?
+
+ D'abord, parce ce que le champ auditif qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le théorème d'échantillonage de Nyquist–Shannon la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz.
+
+ De plus, le signal doit être traité par un filtre passe-bas avant d'être échantilloné, afin d'éviter le phénomène d'aliasing, et, si en théorie un  filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une bande de transition dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un filtre anti-aliasing. Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz.

+
+ +

Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes.

+ +
var contexte = new AudioContext();
+var memoireTampon = context.createBuffer(1, 22050, 22050);
+ +

Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement *rééchantillonnée* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde.

+ +
+

Note : le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus).

+
+ +

Mémoire tampon linéaire ou entrelacée

+ +

La Web Audio API utilise un format de mémoire tampon linéaire : les canaux gauche et droite sont stockés de la façon suivante :

+ +
LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (pour un buffer de 16 trames)
+ +

C'est assez courant dans le traitement audio, car cela permet de traiter facilement chaque canal de façon indépendante.

+ +

L'alternative est d'utiliser un format entrelacé:

+ +
LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (pour un buffer de 16 trames)
+ +

Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de  MP3 décodé.
+
+ La Web Audio API expose *uniquement* des buffer linéaires, car elle est faite pour le traitement du son. Elle fonctionne en linéaire, mais convertit les données au format entrelacé au moment de les envoyer à la carte son pour qu'elles soient jouées. A l'inverse, lorsqu'un MP3 est décodé, le format d'origine entrelacé est converti en linéaire pour le traitement.

+ +

Canaux audio

+ +

Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard  détaillées dans le tableau ci-après :

+ + + + + + + + + + + + + + + + + + + + +
Mono0: M: mono
Stereo0: L: gauche
+ 1: R: droit
Quad0: L: gauche
+ 1: R: droit
+ 2: SL: surround gauche
+ 3: SR: surround droit
5.10: L: gauche
+ 1: R: droit
+ 2: C: centre
+ 3: LFE: subwoofer
+ 4: SL: surround gauche
+ 5: SR: surround droit
+ +

Conversion ascendante et descendante

+ +

Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effectue une conversion ascendante ou descendante selon les règles suivantes. Cela peut être plus ou moins controllé en assignant la valeur speakers ou discrete à la propriété {{domxref("AudioNode.channelInterpretation")}} .

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterprétationCanaux d'entréeCanaux de sortieRègles de conversion
speakers1 (Mono)2 (Stéréo)Conversion ascendante de mono vers stéréo.
+ Le canal d'entrée M est utilisé pour les deux canaux de sortie (L et R).
+ output.L = input.M
+ output.R = input.M
1 (Mono)4 (Quad)Conversion ascendante de mono vers quad.
+ Le canal d'entrée M est utilisé pour les canaux de sortie autres que surround (L et R). Les canaux de sortie surround (SL et SR) sont silencieux.
+ output.L = input.M
+ output.R = input.M
+ output.SL = 0
+ output.SR = 0
1 (Mono)6 (5.1)Conversion ascendante de mono vers 5.1.
+ Le canal d'entrée M est utilisé pour le canal de sortie central (C). Tous les autres canaux (L, R, LFE, SL, et SR) sont silencieux.
+ output.L = 0
+ output.R = 0
+ output.C = input.M
+ output.LFE = 0
+ output.SL = 0
+ output.SR = 0
2 (Stéréo)1 (Mono)Conversion descendante de stéréo vers mono.
+ Les deux canaux d'entrée (L et R) sont combinées pour produire l'unique canal de sortie (M).
+ output.M = 0.5 * (input.L + input.R)
2 (Stéréo)4 (Quad)Conversion ascendante de stéréo vers quad.
+ Les canaux d'entrée L et R input sont utilisés pour leurs équivalents respectifs non-surround en sortie (L et R). Les canaux de sortie surround (SL et SR) sont silencieux.
+ output.L = input.L
+ output.R = input.R
+ output.SL = 0
+ output.SR = 0
2 (Stéréo)6 (5.1)Conversion ascendante de stéréo vers 5.1.
+ Les canaux d'entrée L et R sont utilisés pour leurs équivalents respectifs non-surround en sortie (L et R). Les canaux de sortie surround (SL et SR), ainsi que le canal central (C) et le canal subwoofer (LFE) restent silencieux.
+ output.L = input.L
+ output.R = input.R
+ output.C = 0
+ output.LFE = 0
+ output.SL = 0
+ output.SR = 0
4 (Quad)1 (Mono)Conversion descendante de quad vers mono.
+ Les quatre canaux de sortie (L, R, SL, et SR) sont  combinés pour produire l'unique canal de sortie (M).
+ output.M = 0.25 * (input.L + input.R + input.SL + input.SR)
4 (Quad)2 (Stéréo)Conversion descendante de quad vers stéréo.
+ Les deux canaux d'entrée à gauche (L and SL) sont combinés pour produire l'unique canal de sortie à gauche (L). De la même façon, les deux canaux d'entrée à droite (R et SR) sont combinés pour produire l'unique canal de sortie à droite (R).
+ output.L = 0.5 * (input.L + input.SL)
+ output.R = 0.5 * (input.R + input.SR)
4 (Quad)6 (5.1)Conversion ascendante de quad vers 5.1.
+ Les canaux d'entrée L, R, SL, et SR sont utilisés pour leur canaux de sortie équivalents respectifs (L and R). Le canal central (C) et le canal subwoofer (LFE) restent silencieux.
+ output.L = input.L
+ output.R = input.R
+ output.C = 0
+ output.LFE = 0
+ output.SL = input.SL
+ output.SR = input.SR
6 (5.1)1 (Mono)Conversion descendante de 5.1 vers mono.
+ Les canaux de gauche (L et SL), de droite (R et SR) et central sont tous mixés ensemble. Les canaux surround sont légèrement atténués et la puissance des canaux latéraux est compensée pour la faire compter comme un seul canal en la multipliant par √2/2. Le canal subwoofer (LFE) est perdu.
+ output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + input.SR)
6 (5.1)2 (Stéréo)Conversion descendante de 5.1 vers stéréo.
+ Le canal central (C) est additionné avec chacun des canaux latéraux  (SL et SR) puis combiné avec chacun des canaux latéraux (L et R). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par √2/2. Le canal subwoofer (LFE) est perdu.
+ output.L = input.L + 0.7071 * (input.C + input.SL)
+ output.R = input.R + 0.7071 * (input.C + input.SR)
6 (5.1)4 (Quad)Conversion descendante de 5.1 vers quad.
+ Le canal central (C) est combiné avec les canaux latéraux non-surround (L et R). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par √2/2. Les canaux surround restent inchangés. Le canal subwoofer (LFE) est perdu.
+ output.L = input.L + 0.7071 * input.C
+ output.R = input.R + 0.7071 * input.C
+ output.SL = input.SL
+ output.SR = input.SR
Autres configurations non-standardLes configurations non-standard sont traitées comme si la propriété channelInterpretation avait la valeur discrete.
+ La spécification autorise explicitement la définition à venir de nouvelles configurations de sortie pour les enceintes. Ce cas de figure  n'est par conséquent pas garanti dans le futur, car le comportement des navigateurs pour un nombre spécifique de canaux pourrait être amené à changer.
discretetout (x)tout (y) pour lequel x<yConversion ascendante de canaux discrets.
+ Remplit chaque canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui a le même index. Les canaux de sortie qui n'ont pas d'équivalent en entrée restent silencieux.
tout (x)tout (y) pour lequel x>yConversion descendante de canaux discrets.
+ Remplit chaque canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui a le même index. Les canaux d'entrée qui n'ont pas d'équivalent en sortie sont perdus.
+ +

Visualisations

+ +

Une visualisation audio consiste en général à utiliser un flux de données audio dans le temps (souvent des informations de gain ou de fréquence) pour générer un affichage graphique (comme un graphe). La Web Audio API possède un {{domxref("AnalyserNode")}} qui n'altère pas le signal audio qui le traverse, permettant de générer des données qui peuvent être utilisées par une technologie de visualisation telle que {{htmlelement("canvas")}}.

+ +

Le noeud permet de récupérer la fréquence et le domaine temporel en utilisant FFT, et ce sans modifier le flux audio

+ +

On peut accéder aux données en utilisant les méthodes suivantes:

+ +
+
{{domxref("AnalyserNode.getFloatFrequencyData()")}}
+
Copie les données de fréquence dans le tableau {{domxref("Float32Array")}} passé en argument.
+
+ +
+
{{domxref("AnalyserNode.getByteFrequencyData()")}}
+
Copies les données de fréquence dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.
+
+ +
+
{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
+
Copie les données de l'onde de forme, ou domaine temporel, dans le {{domxref("Float32Array")}} passé en argument.
+
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
+
Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.
+
+ +
+

Note : Pour plus d'informations, voir notre article Visualizations with Web Audio API.

+
+ +

Spatialisations

+ +
+

Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal.

+ +

La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.

+
+ +

Le PannerNode donne la position dans l'espace, la vélocité et la direction d'un signal donné

+ +
+

La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite,  son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.

+
+ +

On voit la position d'un auditeur, ainsi que les vecteurs de direction haut et de face qui forment un angle de 90°

+ +
+

Note : For more information, see our Web audio spatialization basics article.

+
+ +

Fan-in et Fan-out

+ +

En audio, fan-in désigne le processus par lequel un {{domxref("ChannelMergerNode")}} prend une série d'entrées mono entrée et restitue un seul signal multi-canaux :

+ +

+ +

Fan-out désigne le processus opposé, par lequel un {{domxref("ChannelSplitterNode")}} prend une source multi-canaux en entrée et restitue plusieurs signaux mono en sortie:

+ +

diff --git a/files/fr/web/api/web_audio_api/index.html b/files/fr/web/api/web_audio_api/index.html deleted file mode 100644 index 087d05a380..0000000000 --- a/files/fr/web/api/web_audio_api/index.html +++ /dev/null @@ -1,429 +0,0 @@ ---- -title: Web Audio API -slug: Web/API/Web_Audio_API -translation_of: Web/API/Web_Audio_API ---- -
-

La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.

-
- -

Concepts et usages

- -

La Web Audio API effectue des opérations dans un contexte audio; elle a été conçue pour supporter le routing modulaire. Les opérations audio basiques sont réalisées via des noeuds audio reliés entre eux pour former un graphe de routage audio. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.

- -

Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.

- -

Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu.
-
- Un processus de développement typique avec web audio ressemble à ceci :

- - - -

Un diagramme de boîte avec une boîte extérieure intitulée contexte audio et trois boîtes à l'intérieur intitulées source, effets et destination. Les trois boîtes intérieures ont des flèches qui pointent de la gauche vers la droite, indiquant le sens du flux de l'information audio.

- -

Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs.

- -

La Web Audio API permet également de contrôler la spatialisation du son. En utilisant un système basé sur le modèle émetteur - récepteur, elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur).

- -
-

Note : Vous pouvez lire d'avantage de détails sur la Web Audio API en vous rendant sur notre article Concepts de base de la Web Audio API.

-
- -

Interface de la Web Audio API

- -

La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories.

- -

Définition du graphe audio

- -

Conteneurs et définitions qui donnent sa forme au graphe audio

- -
-
{{domxref("AudioContext")}}
-
Un objet AudioContext désigne un graphe de traitement audio construit à partir de modules reliés entre eux, chacun représenté par un noeud audio ({{domxref("AudioNode")}}). Le contexte audio contrôle la création des noeuds qu'il contient, ainsi que l'exécution du traitement audio, et du décodage. Il est nécessaire de créer un AudioContext avant de faire quoi que ce soit d'autre, puisque tout se passe dans un contexte.
-
{{domxref("AudioNode")}}
-
Un objet AudioNode est un module de traitement audio, tel qu'une source audio (c'est-à-dire un élément HTML {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), une destination audio, un module de traitement intermédiaire (par exemple un filtre {{domxref("BiquadFilterNode")}}), ou un contrôle du volume {{domxref("GainNode")}}).
-
{{domxref("AudioParam")}}
-
Un objet AudioParam est un paramètre audio, qui est lié à un {{domxref("AudioNode")}}. On peut lui assigner une valeur ou un changement de valeur, que l'on peut programmer à un moment spécifique et/ou selon un motif particulier.
-
{{event("ended_(Web_Audio)", "ended")}} (event)
-
L'évènement ended est diffusé lorsque la lecture s'arrête en arrivant à la fin d'un media.
-
- -

Définition des sources audio

- -
-
{{domxref("OscillatorNode")}}
-
Un objet OscillatorNode est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.
-
{{domxref("AudioBuffer")}}
-
Un objet AudioBuffer est un petit morceau de contenu audio monté en mémoire. Il peut être créé à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes en utilisant {{ domxref("AudioContext.createBuffer()") }}. Une fois décodé sous cette forme, la source audio peut être placée dans un {{ domxref("AudioBufferSourceNode") }}.
-
{{domxref("AudioBufferSourceNode")}}
-
Un objet AudioBufferSourceNode est une source audio composée de données audio montées en mémoire dans un {{domxref("AudioBuffer")}}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.
-
{{domxref("MediaElementAudioSourceNode")}}
-
Un objet MediaElementAudioSourceNode est une source audio composée d'un élément  HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.
-
{{domxref("MediaStreamAudioSourceNode")}}
-
Un objet MediaStreamAudioSourceNode est une source audio composée d'un WebRTC {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.
-
- -

Définition des filtres d'effets audio

- -
-
{{domxref("BiquadFilterNode")}}
-
Un objet BiquadFilterNode est un simple filtre de bas niveau. Il peut s'agir de différents types de filtres, contrôle du volume ou égaliseurs graphiques. Un BiquadFilterNode a toujours exactement une entrée et une sortie.
-
{{domxref("ConvolverNode")}}
-
Un objet ConvolverNode est un {{domxref("AudioNode")}} qui exécute une circonvolution linéaire sur un AudioBuffer donné, souvent utilisé pour créer un effet de réverbération.
-
{{domxref("DelayNode")}}
-
Un objet DelayNode est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie.
-
{{domxref("DynamicsCompressorNode")}}
-
Un objet DynamicsCompressorNode permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément.
-
{{domxref("GainNode")}}
-
Un objet GainNode  représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un gain aux données récupérées en entrée avant leur propagation vers la sortie.
-
{{domxref("WaveShaperNode")}}
-
Un objet WaveShaperNode représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. 
-
{{domxref("PeriodicWave")}}
-
Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}.
-
- -

Définition des destinations audio

- -

Une fois que le signal audio a été traité, ces interfaces définissent sa destination.

- -
-
{{domxref("AudioDestinationNode")}}
-
Un noeud AudioDestinationNode représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel.
-
{{domxref("MediaStreamAudioDestinationNode")}}
-
Un noeud MediaStreamAudioDestinationNode représente une destination audio constituée d'un {{domxref("MediaStream")}} WebRTC à une seule piste AudioMediaStreamTrack; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio.
-
- -

Analyse des données et visualisation

- -
-
{{domxref("AnalyserNode")}}
-
Un objet AnalyserNode fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser.
-
- -

Division et fusion des pistes audio

- -
-
{{domxref("ChannelSplitterNode")}}
-
Un noeud ChannelSplitterNode prend en entrée une source audio et sépare ses différentes pistes en une série de sorties mono.
-
{{domxref("ChannelMergerNode")}}
-
Un noeud ChannelMergerNode réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique.
-
- -

Spatialisation audio

- -
-
{{domxref("AudioListener")}}
-
Un objet AudioListener représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio.
-
{{domxref("PannerNode")}}
-
Un noeud PannerNode représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction.
-
- -

Traitement audio avec JavaScript

- -
-

Note : Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}.

-
- -
-
{{domxref("ScriptProcessorNode")}}
-
Un noeud ScriptProcessorNode permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. 
-
{{event("audioprocess")}} (event)
-
L'évènement audioprocess est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité.
-
{{domxref("AudioProcessingEvent")}}
-
L'objet  AudioProcessingEvent est envoyé aux fonctions de callback qui écoutent l'évènement audioprocess.
-
- -

Traitement audio hors ligne ou en tâche de fond

- -

Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants.

- -
-
{{domxref("OfflineAudioContext")}}
-
Un objet OfflineAudioContext est un {{domxref("AudioContext")}} qui représente un graphe de traitement audio construit à partir de noeuds audio. A la différence du AudioContext standard, un OfflineAudioContext n'exporte pas vraiment le son, mais le génère, aussi vite que possible, dans un buffer.
-
{{event("complete")}} (event)
-
Un évènement complete est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.
-
{{domxref("OfflineAudioCompletionEvent")}}
-
The OfflineAudioCompletionEvent est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface.
-
- -

Audio Workers

- -

Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'un web worker. En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplaceront {{domxref("ScriptProcessorNode")}}, et les autres fonctionnalités mentionnées dans la section Traitement audio avec JavaScript ci-avant.

- -
-
{{domxref("AudioWorkerNode")}}
-
Un objet AudioWorkerNode représente un {{domxref("AudioNode")}} qui interagit avec le thread d'un worker pour générer, traiter, ou analyse le son directement.
-
{{domxref("AudioWorkerGlobalScope")}}
-
Un objet AudioWorkerGlobalScope est un objet dérivé d'un objet DedicatedWorkerGlobalScope. Il représente le contexte d'un worker dans lequel un script de traitement audio est lancé; il est conçu pour permettre la génération, le traitement, et l'analyse de données audio directement avec JavaScript dans le thread d'un worker.
-
{{domxref("AudioProcessEvent")}}
-
UN objet Event est transmis aux objets {{domxref("AudioWorkerGlobalScope")}} pour effectuer un traitement audio.
-
- -

Objets obsolètes

- -

Les objets suivants étaient définis dans les versions précédentes de la spécification, mais sont maintenant obsolètes et ont été remplacés.

- -
-
{{domxref("JavaScriptNode")}}
-
Utilisé pour le traitement du son directement en Javascript. Cet objet est obsolète, et a été remplacé par {{domxref("ScriptProcessorNode")}}.
-
{{domxref("WaveTableNode")}}
-
Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé par {{domxref("PeriodicWave")}}.
-
- -

Exemple

- -

Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur Voice-change-o-matic (voir aussi le code source complet sur Github) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début !

- -

Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation.

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio
-// les navigateurs avec un moteur Webkit/blink demandent un préfixe
-
-var voixSelectionnee = document.getElementById("voice"); // case à cocher pour la sélection d'effets de voix
-var visualisationSelectionnee = document.getElementById("visual"); // case à cocher pour la sélection d'options de visualisation audio
-var silence = document.querySelector('.mute'); // bouton pour couper le son
-var renduVisuel; // requestAnimationFrame
-
-var analyseur = contexteAudio.createAnalyser();
-var distorsion = contexteAudio.createWaveShaper();
-var gainVolume = contexteAudio.createGain();
-var filtreAccordable = contexteAudio.createBiquadFilter();
-
-function creerCourbeDistorsion(taille) { // fonction qui crée une forme de courbe qui sera utilisée par le générateur de l'onde de distorsion
-  var k = typeof taille === 'number' ? taille : 50,
-    nombre_echantillons = 44100,
-    courbe = new Float32Array(nombre_echantillons),
-    angle = Math.PI / 180,
-    i = 0,
-    x;
-  for ( ; i < nombre_echantillons; ++i ) {
-    x = i * 2 / nombre_echantillons - 1;
-    courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) );
-  }
-  return courbe;
-};
-
-navigator.getUserMedia (
-  // contraintes - uniquement audio dans cet exemple
-  {
-    audio: true
-  },
-
-  // callback de succès
-  function(flux) {
-    source = contexteAudio.createMediaStreamSource(flux);
-    source.connect(analyseur);
-    analyseur.connect(distorsion);
-    distorsion.connect(filtreAccordable);
-    filtreAccordable.connect(gainVolume);
-    gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux
-
-    genererVisualisation(flux);
-    voiceChange();
-
-  },
-
-  // callback d'erreur
-  function(err) {
-    console.log("L'erreur GUM suivante a eu lieu : " + err);
-  }
-);
-
-function genererVisualisation(flux) {
-  const LARGEUR = canvas.width;
-  const HAUTEUR = canvas.height;
-
-  var parametreVisualisation = visualisationSelectionnee.value;
-  console.log(parametreVisualisation);
-
-  if(parametreVisualisation == "sinewave") {
-    analyseur.fftSize = 2048;
-    var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide)
-    var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données
-
-    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
-
-    function draw() {
-
-      renduVisuel = requestAnimationFrame(draw);
-
-      analyseur.getByteTimeDomainData(tableauDonnees); // récupère les données de l'onde de forme et les met dans le tableau créé
-
-      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dessine une onde dans le canvas
-      canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR);
-
-      canvasCtx.lineWidth = 2;
-      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
-
-      canvasCtx.beginPath();
-
-      var sliceWidth = LARGEUR * 1.0 / tailleBuffer;
-      var x = 0;
-
-      for(var i = 0; i < tailleBuffer; i++) {
-
-        var v = tableauDonnees[i] / 128.0;
-        var y = v * HAUTEUR/2;
-
-        if(i === 0) {
-          canvasCtx.moveTo(x, y);
-        } else {
-          canvasCtx.lineTo(x, y);
-        }
-
-        x += sliceWidth;
-      }
-
-      canvasCtx.lineTo(canvas.width, canvas.height/2);
-      canvasCtx.stroke();
-    };
-
-    draw();
-
-  } else if(parametreVisualisation == "off") {
-    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
-    canvasCtx.fillStyle = "red";
-    canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR);
-  }
-
-}
-
-function modifierVoix() {
-  distorsion.curve = new Float32Array;
-  filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée
-
-  var choixVoix = voixSelectionnee.value;
-  console.log(choixVoix);
-
-  if(choixVoix == "distortion") {
-    distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme
-  } else if(choixVoix == "biquad") {
-    filtreAccordable.type = "lowshelf";
-    filtreAccordable.frequency.value = 1000;
-    filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable
-  } else if(choixVoix == "off") {
-    console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée
-  }
-
-}
-
-// écouteurs d'évènements pour les changements de visualisation et de voix
-
-visualisationSelectionnee.onchange = function() {
-  window.cancelAnimationFrame(renduVisuel);
-  genererVisualisation(flux);
-}
-
-voixSelectionnee.onchange = function() {
-  modifierVoix();
-}
-
-silence.onclick = muterVoix;
-
-function muterVoix() { // allumer / éteindre le son
-  if(silence.id == "") {
-    gainVolume.gain.value = 0; // gain à 0 pour éteindre le son
-    silence.id = "activated";
-    silence.innerHTML = "Unmute";
-  } else {
-    gainVolume.gain.value = 1; // gain à 1 pour allumer le son
-    silence.id = "";
-    silence.innerHTML = "Mute";
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.AudioContext", 0)}}

- -

Voir aussi

- - - -

Guides

- - - -

Démos

- - -

API

- - diff --git a/files/fr/web/api/web_audio_api/index.md b/files/fr/web/api/web_audio_api/index.md new file mode 100644 index 0000000000..087d05a380 --- /dev/null +++ b/files/fr/web/api/web_audio_api/index.md @@ -0,0 +1,429 @@ +--- +title: Web Audio API +slug: Web/API/Web_Audio_API +translation_of: Web/API/Web_Audio_API +--- +
+

La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.

+
+ +

Concepts et usages

+ +

La Web Audio API effectue des opérations dans un contexte audio; elle a été conçue pour supporter le routing modulaire. Les opérations audio basiques sont réalisées via des noeuds audio reliés entre eux pour former un graphe de routage audio. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.

+ +

Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.

+ +

Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu.
+
+ Un processus de développement typique avec web audio ressemble à ceci :

+ + + +

Un diagramme de boîte avec une boîte extérieure intitulée contexte audio et trois boîtes à l'intérieur intitulées source, effets et destination. Les trois boîtes intérieures ont des flèches qui pointent de la gauche vers la droite, indiquant le sens du flux de l'information audio.

+ +

Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs.

+ +

La Web Audio API permet également de contrôler la spatialisation du son. En utilisant un système basé sur le modèle émetteur - récepteur, elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur).

+ +
+

Note : Vous pouvez lire d'avantage de détails sur la Web Audio API en vous rendant sur notre article Concepts de base de la Web Audio API.

+
+ +

Interface de la Web Audio API

+ +

La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories.

+ +

Définition du graphe audio

+ +

Conteneurs et définitions qui donnent sa forme au graphe audio

+ +
+
{{domxref("AudioContext")}}
+
Un objet AudioContext désigne un graphe de traitement audio construit à partir de modules reliés entre eux, chacun représenté par un noeud audio ({{domxref("AudioNode")}}). Le contexte audio contrôle la création des noeuds qu'il contient, ainsi que l'exécution du traitement audio, et du décodage. Il est nécessaire de créer un AudioContext avant de faire quoi que ce soit d'autre, puisque tout se passe dans un contexte.
+
{{domxref("AudioNode")}}
+
Un objet AudioNode est un module de traitement audio, tel qu'une source audio (c'est-à-dire un élément HTML {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), une destination audio, un module de traitement intermédiaire (par exemple un filtre {{domxref("BiquadFilterNode")}}), ou un contrôle du volume {{domxref("GainNode")}}).
+
{{domxref("AudioParam")}}
+
Un objet AudioParam est un paramètre audio, qui est lié à un {{domxref("AudioNode")}}. On peut lui assigner une valeur ou un changement de valeur, que l'on peut programmer à un moment spécifique et/ou selon un motif particulier.
+
{{event("ended_(Web_Audio)", "ended")}} (event)
+
L'évènement ended est diffusé lorsque la lecture s'arrête en arrivant à la fin d'un media.
+
+ +

Définition des sources audio

+ +
+
{{domxref("OscillatorNode")}}
+
Un objet OscillatorNode est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.
+
{{domxref("AudioBuffer")}}
+
Un objet AudioBuffer est un petit morceau de contenu audio monté en mémoire. Il peut être créé à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes en utilisant {{ domxref("AudioContext.createBuffer()") }}. Une fois décodé sous cette forme, la source audio peut être placée dans un {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("AudioBufferSourceNode")}}
+
Un objet AudioBufferSourceNode est une source audio composée de données audio montées en mémoire dans un {{domxref("AudioBuffer")}}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.
+
{{domxref("MediaElementAudioSourceNode")}}
+
Un objet MediaElementAudioSourceNode est une source audio composée d'un élément  HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.
+
{{domxref("MediaStreamAudioSourceNode")}}
+
Un objet MediaStreamAudioSourceNode est une source audio composée d'un WebRTC {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.
+
+ +

Définition des filtres d'effets audio

+ +
+
{{domxref("BiquadFilterNode")}}
+
Un objet BiquadFilterNode est un simple filtre de bas niveau. Il peut s'agir de différents types de filtres, contrôle du volume ou égaliseurs graphiques. Un BiquadFilterNode a toujours exactement une entrée et une sortie.
+
{{domxref("ConvolverNode")}}
+
Un objet ConvolverNode est un {{domxref("AudioNode")}} qui exécute une circonvolution linéaire sur un AudioBuffer donné, souvent utilisé pour créer un effet de réverbération.
+
{{domxref("DelayNode")}}
+
Un objet DelayNode est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie.
+
{{domxref("DynamicsCompressorNode")}}
+
Un objet DynamicsCompressorNode permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément.
+
{{domxref("GainNode")}}
+
Un objet GainNode  représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un gain aux données récupérées en entrée avant leur propagation vers la sortie.
+
{{domxref("WaveShaperNode")}}
+
Un objet WaveShaperNode représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. 
+
{{domxref("PeriodicWave")}}
+
Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}.
+
+ +

Définition des destinations audio

+ +

Une fois que le signal audio a été traité, ces interfaces définissent sa destination.

+ +
+
{{domxref("AudioDestinationNode")}}
+
Un noeud AudioDestinationNode représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel.
+
{{domxref("MediaStreamAudioDestinationNode")}}
+
Un noeud MediaStreamAudioDestinationNode représente une destination audio constituée d'un {{domxref("MediaStream")}} WebRTC à une seule piste AudioMediaStreamTrack; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio.
+
+ +

Analyse des données et visualisation

+ +
+
{{domxref("AnalyserNode")}}
+
Un objet AnalyserNode fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser.
+
+ +

Division et fusion des pistes audio

+ +
+
{{domxref("ChannelSplitterNode")}}
+
Un noeud ChannelSplitterNode prend en entrée une source audio et sépare ses différentes pistes en une série de sorties mono.
+
{{domxref("ChannelMergerNode")}}
+
Un noeud ChannelMergerNode réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique.
+
+ +

Spatialisation audio

+ +
+
{{domxref("AudioListener")}}
+
Un objet AudioListener représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio.
+
{{domxref("PannerNode")}}
+
Un noeud PannerNode représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction.
+
+ +

Traitement audio avec JavaScript

+ +
+

Note : Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}.

+
+ +
+
{{domxref("ScriptProcessorNode")}}
+
Un noeud ScriptProcessorNode permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. 
+
{{event("audioprocess")}} (event)
+
L'évènement audioprocess est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité.
+
{{domxref("AudioProcessingEvent")}}
+
L'objet  AudioProcessingEvent est envoyé aux fonctions de callback qui écoutent l'évènement audioprocess.
+
+ +

Traitement audio hors ligne ou en tâche de fond

+ +

Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants.

+ +
+
{{domxref("OfflineAudioContext")}}
+
Un objet OfflineAudioContext est un {{domxref("AudioContext")}} qui représente un graphe de traitement audio construit à partir de noeuds audio. A la différence du AudioContext standard, un OfflineAudioContext n'exporte pas vraiment le son, mais le génère, aussi vite que possible, dans un buffer.
+
{{event("complete")}} (event)
+
Un évènement complete est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.
+
{{domxref("OfflineAudioCompletionEvent")}}
+
The OfflineAudioCompletionEvent est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface.
+
+ +

Audio Workers

+ +

Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'un web worker. En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplaceront {{domxref("ScriptProcessorNode")}}, et les autres fonctionnalités mentionnées dans la section Traitement audio avec JavaScript ci-avant.

+ +
+
{{domxref("AudioWorkerNode")}}
+
Un objet AudioWorkerNode représente un {{domxref("AudioNode")}} qui interagit avec le thread d'un worker pour générer, traiter, ou analyse le son directement.
+
{{domxref("AudioWorkerGlobalScope")}}
+
Un objet AudioWorkerGlobalScope est un objet dérivé d'un objet DedicatedWorkerGlobalScope. Il représente le contexte d'un worker dans lequel un script de traitement audio est lancé; il est conçu pour permettre la génération, le traitement, et l'analyse de données audio directement avec JavaScript dans le thread d'un worker.
+
{{domxref("AudioProcessEvent")}}
+
UN objet Event est transmis aux objets {{domxref("AudioWorkerGlobalScope")}} pour effectuer un traitement audio.
+
+ +

Objets obsolètes

+ +

Les objets suivants étaient définis dans les versions précédentes de la spécification, mais sont maintenant obsolètes et ont été remplacés.

+ +
+
{{domxref("JavaScriptNode")}}
+
Utilisé pour le traitement du son directement en Javascript. Cet objet est obsolète, et a été remplacé par {{domxref("ScriptProcessorNode")}}.
+
{{domxref("WaveTableNode")}}
+
Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé par {{domxref("PeriodicWave")}}.
+
+ +

Exemple

+ +

Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur Voice-change-o-matic (voir aussi le code source complet sur Github) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début !

+ +

Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation.

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio
+// les navigateurs avec un moteur Webkit/blink demandent un préfixe
+
+var voixSelectionnee = document.getElementById("voice"); // case à cocher pour la sélection d'effets de voix
+var visualisationSelectionnee = document.getElementById("visual"); // case à cocher pour la sélection d'options de visualisation audio
+var silence = document.querySelector('.mute'); // bouton pour couper le son
+var renduVisuel; // requestAnimationFrame
+
+var analyseur = contexteAudio.createAnalyser();
+var distorsion = contexteAudio.createWaveShaper();
+var gainVolume = contexteAudio.createGain();
+var filtreAccordable = contexteAudio.createBiquadFilter();
+
+function creerCourbeDistorsion(taille) { // fonction qui crée une forme de courbe qui sera utilisée par le générateur de l'onde de distorsion
+  var k = typeof taille === 'number' ? taille : 50,
+    nombre_echantillons = 44100,
+    courbe = new Float32Array(nombre_echantillons),
+    angle = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i < nombre_echantillons; ++i ) {
+    x = i * 2 / nombre_echantillons - 1;
+    courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) );
+  }
+  return courbe;
+};
+
+navigator.getUserMedia (
+  // contraintes - uniquement audio dans cet exemple
+  {
+    audio: true
+  },
+
+  // callback de succès
+  function(flux) {
+    source = contexteAudio.createMediaStreamSource(flux);
+    source.connect(analyseur);
+    analyseur.connect(distorsion);
+    distorsion.connect(filtreAccordable);
+    filtreAccordable.connect(gainVolume);
+    gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux
+
+    genererVisualisation(flux);
+    voiceChange();
+
+  },
+
+  // callback d'erreur
+  function(err) {
+    console.log("L'erreur GUM suivante a eu lieu : " + err);
+  }
+);
+
+function genererVisualisation(flux) {
+  const LARGEUR = canvas.width;
+  const HAUTEUR = canvas.height;
+
+  var parametreVisualisation = visualisationSelectionnee.value;
+  console.log(parametreVisualisation);
+
+  if(parametreVisualisation == "sinewave") {
+    analyseur.fftSize = 2048;
+    var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide)
+    var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données
+
+    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+    function draw() {
+
+      renduVisuel = requestAnimationFrame(draw);
+
+      analyseur.getByteTimeDomainData(tableauDonnees); // récupère les données de l'onde de forme et les met dans le tableau créé
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dessine une onde dans le canvas
+      canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = LARGEUR * 1.0 / tailleBuffer;
+      var x = 0;
+
+      for(var i = 0; i < tailleBuffer; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(parametreVisualisation == "off") {
+    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR);
+  }
+
+}
+
+function modifierVoix() {
+  distorsion.curve = new Float32Array;
+  filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée
+
+  var choixVoix = voixSelectionnee.value;
+  console.log(choixVoix);
+
+  if(choixVoix == "distortion") {
+    distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme
+  } else if(choixVoix == "biquad") {
+    filtreAccordable.type = "lowshelf";
+    filtreAccordable.frequency.value = 1000;
+    filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable
+  } else if(choixVoix == "off") {
+    console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée
+  }
+
+}
+
+// écouteurs d'évènements pour les changements de visualisation et de voix
+
+visualisationSelectionnee.onchange = function() {
+  window.cancelAnimationFrame(renduVisuel);
+  genererVisualisation(flux);
+}
+
+voixSelectionnee.onchange = function() {
+  modifierVoix();
+}
+
+silence.onclick = muterVoix;
+
+function muterVoix() { // allumer / éteindre le son
+  if(silence.id == "") {
+    gainVolume.gain.value = 0; // gain à 0 pour éteindre le son
+    silence.id = "activated";
+    silence.innerHTML = "Unmute";
+  } else {
+    gainVolume.gain.value = 1; // gain à 1 pour allumer le son
+    silence.id = "";
+    silence.innerHTML = "Mute";
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.AudioContext", 0)}}

+ +

Voir aussi

+ + + +

Guides

+ + + +

Démos

+ + +

API

+ + diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.html b/files/fr/web/api/web_audio_api/using_web_audio_api/index.html deleted file mode 100644 index 26ea00da32..0000000000 --- a/files/fr/web/api/web_audio_api/using_web_audio_api/index.html +++ /dev/null @@ -1,277 +0,0 @@ ---- -title: Utiliser la Web Audio API -slug: Web/API/Web_Audio_API/Using_Web_Audio_API -translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API ---- - -

La Web Audio API offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples.

- -
-

La Web Audio API ne vient pas remplacer l'élément <audio>, mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément <video>. Si vous avez seulement besoin de contrôler la lecture d'un fichier audio, <audio> est probablement une meilleure solution, plus rapide. Si vous voulez procéder à un traitement audio plus complexe et à la lecture d'une source, la Web Audio API offre davantage de possibilités en termes de puissance et de contrôle.

- -

L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades.

-
- -

Exemples

- -

Afin d'expliquer l'utilisation de la Web Audio API, nous avons créé un certain nombre d'exemples qui seront étoffés au fur et à mesure. N'hésitez pas à en ajouter d'autres et à suggérer des améliorations !

- -

Notre premier exemple est Voice-change-O-matic, une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble  (run the Voice-change-O-matic live).

- -

Une boîte à rythme avec des contrôles pour la lecture, le volume et le pan

- -

Concepts de base

- -
-

Note : la plupart des extraits de code dans cette section viennent de l'exemple Violent Theremin.

-
- -

La Web Audio API impliqe de réaliser les opérations de traitement audio dans un contexte audio, et elle a été conçue pour permettre le routage modulaire. Les opérations de traitement de base sont réalisées par des noeuds audio, qui sont reliés entre eux pour former un graphe de routage audio. Plusieurs sources — avec différentes configuration de canaux — peuvent cohabiter dans un seul contexte. Ce design modulaire offre la flexibilité nécessaire pour créer des fonctions complexes avec des effets dynamiques.

- -

Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :

- -
    -
  1. Création d'un contexte audio
    2. -
  2. Dans ce contexte, création des sources — telles que <audio>, oscillateur, flux
    3. -
  3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur
    4. -
  4. Choix final de la sortie audio, par exemple les enceintes du système 
    5. -
  5. Connection des sources aux effets, et des effets à la sortie.
    6. -
- -

Création d'un contexte audio

- -

Commencez par créer une instance de AudioContext sur laquelle vous allez créer un graphe audio. L'exemple le plus simple ressemblerait à ceci:

- -
var contexteAudio = new AudioContext();
-
- -
-

Note : On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.

-
- -

Il faut rajouter une version préfixée pour les navigateurs Webkit/Blink browsers, tout en conservant la version non préfixée pour Firefox (desktop/mobile/OS). Ce qui donne :

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-
- -
-

Note : Safari risque de planter si l'objet window n'est pas explicitement mentionné lors de la création d'un contexte audio

-
- -

Création d'une source audio

- -

Maintenant que nous avons créé un contexte, nous allons utiliser les méthodes de ce contexte pour quasiment tout ce qui nous reste à faire. La première étape consiste à créer une source audio. Les sources peuvent être de provenance diverse :

- - - -

Pour notre exemple nous nous contenterons de créer un oscillateur pour générer un son simple comme source, et un noeud de gain pour contrôler le volume:

- -
var oscillateur = contexteAudio.createOscillator();
-var noeudGain = contexteAudio.createGain();
-
- -
-

Note : Pour jouer un fichier audio directement, il faut charger le fichier en XHR, le décoder en mémoire tampon, puis associer le tampon à une source. Voir l'exemple Voice-change-O-matic.

-
- -
-

Note : Scott Michaud a écrit la librairie AudioSampleLoader, très pratique pour charger et décoder un ou plusieurs extraits audio. Elle peut aider à simplifier le processus de chargement XHR / mémoire tampon décrit dans la note précédente.

-
- -

Lien entre les noeuds source et destination

- -

Pour faire sortir le son dans vos enceintes, il faut relier la source et la destination. Pour cela on appelle la méthode connect sur le noeud source, le noeud de destination étant passé en argument. La méthode connect est disponible sur la plupart des types de noeuds.

- -

La sortie par défaut du matériel (en général les enceintes) est accessible via {{ domxref("AudioContext.destination") }}. Pour connecter l'oscillateur, le noeud de gain et la destination, on écrirait les lignes suivantes:

- -
oscillateur.connect(noeudGain);
-noeudGain.connect(contexteAudio.destination);
-
- -

On peut connecter autant de noeuds qu'on le souhaite (cf. Voice-change-O-matic). Par exemple:

- -
source = contexteAudio.createMediaStreamSource(stream);
-source.connect(analyser);
-analyser.connect(distortion);
-distortion.connect(biquadFilter);
-biquadFilter.connect(convolver);
-convolver.connect(noeudGain);
-noeudGain.connect(contexteAudio.destination);
-
- -

Ce code créerait le graphe audio suivant :

- -

Un graphe audio avec un élément audio source connecté à la destination par défaut

- -

Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain.

- -
-

Note : Depuis Firefox 32, les outils de développement intégrés incluent un éditeur audio,  très utile pour débugger les graphes audio.

-
- -

Lecture du son et définition du pitch

- -

Maintenant que le graphe audio est en place, nous pouvons ajuster certains aspects du son en définissant la valeur de certaines propriétés ou en utilsant ses méthodes. L'exemple suivant spécifie un pitch en hertz pour un oscillateur, lui assigne un type, et demande à l'oscillateur de jouer le son.

- -
oscillateur.type = 'sine'; // onde sinusoïdale — les autres valeurs possible sont : 'square', 'sawtooth', 'triangle' et 'custom'
-oscillateur.frequency.value = 2500; // valeur en hertz
-oscillateur.start();
-
- -

Le code suivant, qui vient de l'exemple Violent Theremin, spécifie une valeur maximum pour le gain, et une valeur pour la fréquence:

- -
var largeur = window.innerWidth;
-var hauteur = window.innerHeight;
-
-var frequenceMax = 6000;
-var volumeMax = 1;
-
-var frequenceInitiale = 3000;
-var volumeInitial = 0.5;
-
-// paramètres de l'oscillateur
-
-oscillateur.type = 'sine'; // onde sinusoïdale — les autres valeurs possible sont : 'square', 'sawtooth', 'triangle' et 'custom'
-oscillateur.frequency.value = frequenceInitiale; // valeur en hertz
-oscillateur.start();
-
-noeudGain.gain.value = volumeInitial;
-
- -

On peut aussi réassigner les valeurs de fréquence et de pitch à chaque mouvement de la souris, en utilisant la position pour calculer un pourcentage des valeurs maximum de fréquence et de gain :

- -
// coordonnées de la souris
-
-var positionX;
-var positionY;
-
-// récupère les nouvelles coordonnées de la souris quand elle bouge
-// puis assigne les nouvelles valeurs de gain et de pitch
-
-document.onmousemove = updatePage;
-
-function updatePage(e) {
-    positionX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
-    positionY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
-
-    oscillateur.frequency.value = (positionX/largeur) * frequenceMax;
-    noeudGain.gain.value = (positionY/hauteur) * volumeMax;
-
-    canvasDraw();
-}
-
- -

Simple visualisation avec canvas

- -

On appelle une fonction canvasDraw() à chaque mouvement de la souris. Elle dessine une grappe de cercles à l'endroit où se trouve la souris, leur taille et couleur étant basées sur les valeurs de fréquence et de gain.

- -
function aleatoire(number1, number2) {
-  return number1 + (Math.floor(Math.random() * (number2 - number1)) + 1);
-}
-
-var canvas = document.querySelector('.canvas');
-canvas.width = largeur;
-canvas.height = hauteur;
-
-var contexteCanvas = canvas.getContext('2d');
-
-function canvasDraw() {
-  rX = positionX;
-  rY = positionY;
-  rC = Math.floor((noeudGain.gain.value / volumeMax) * 30);
-
-  canvasCtx.globalAlpha = 0.2;
-
-  for(i=1;i<=15;i=i+2) {
-    contexteCanvas.beginPath();
-    var chaineStyle = 'rgb(' + 100 + (i * 10) + ',' + Math.floor((noeudGain.gain.value / volumeMax) * 255);
-    chaineStyle += ',' + Math.floor((oscillateur.frequency.value / frequenceMax) * 255) + ')';
-    contexteCanvas.fillStyle = chaineStyle;
-    contexteCanvas.arc(rX + aleatoire(0, 50), rY + aleatoire(0, 50), rC / 2 + i, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
-    contexteCanvas.fill();
-    contexteCanvas.closePath();
-  }
-}
- -

Couper le son du theremin

- -

Quand on appuie sur le bouton pour couper le son, la fonction ci-dessous est appelée, qui déconnecte le noeud de gain du noeud de destination, cassant ainsi le graphe de façon à ce qu'aucun son ne soit produit. Appuyer de nouveau sur le bouton a l'effet inverse.

- -
var coupeSon = document.querySelector('.mute');
-
-coupeSon.onclick = function() {
-  if(coupeSon.id == "") {
-    noeudGain.disconnect(contexteAudio.destination);
-    coupeSon.id = "activated";
-    coupeSon.innerHTML = "Unmute";
-  } else {
-    noeudGain.connect(contexteAudio.destination);
-    coupeSon.id = "";
-    coupeSon.innerHTML = "Mute";
-  }
-}
-
- -

Autres options des noeuds

- -

On peut créer un grand nombre d'autres noeuds avec la Web Audio API. De façon générale, ils fonctionnent de façon très similaire à ceux que nous venons de voir: on crée un noeud, le connecte avec d'autres noeuds, et on manipule ensuite ses propriétés et méthodes pour agir sur la source.

- -

Ce document passe en revue quelques-uns des outils et effets disponibles; vous trouverez davantage de détails sur les pages de référence de la {{ domxref("Web_Audio_API") }}.

- -

Noeuds modulateurs d'onde

- -

On peut créer un noeud modulatur d'onde avec la méthode {{ domxref("AudioContext.createWaveShaper") }} :

- -
var distortion = contexteAudio.createWaveShaper();
-
- -

On associe ensuite à cet objet une forme d'onde définie mathématiquement, qui est appliquée à l'onde de base pour créer un effet de distortion. Ecrire son propre algorithme n'est pas si simple, et pour commencer le mieux est encore d'en chercher un sur le Web. Par exemple, nous avons trouvé celui-ci sur Stack Overflow:

- -
function genererCourbeDistortion(amount) {
-  var k = typeof amount === 'number' ? amount : 50,
-    n_samples = 44100,
-    curve = new Float32Array(n_samples),
-    deg = Math.PI / 180,
-    i = 0,
-    x;
-  for ( ; i < n_samples; ++i ) {
-    x = i * 2 / n_samples - 1;
-    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
-  }
-  return curve;
-};
-
- -

L'exemple suivant, qui vient de Voice-change-O-matic, connecte un noeud de  distortion à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion :

- -
source.connect(analyser);
-analyser.connect(distortion);
-distortion.connect(biquadFilter);
-
-...
-
-distortion.curve = genererCourbeDistortion(400);
-
- -

Filtre biquad

- -

Les filtres biquad ont de nombreuses options. Nous montrons ici comment créer un filtre biquad avec la méthode {{domxref("AudioContext.createBiquadFilter")}}.

- -
var filtreBiquad = contexteAudio.createBiquadFilter();
-
- -

Le filtre utilisé dans la démo Voice-change-o-matic est un filtre lowshelf, qui amplifie le son au niveau des basses. Ici on augmente de 25 décibels toutes les fréquences en dessous de 1000.

- -
filtreBiquad.type = "lowshelf";
-filtreBiquad.frequency.value = 1000;
-filtreBiquad.gain.value = 25;
-
- -

Autres usages de la Web Audio API

- -

La Web Audio API peut avoir bien d'autres applications que la visualisation ou la spatialisation audio (comme gérer la balance d'un son). Nous détaillerons d'autres options dans des articles séparés.

diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md new file mode 100644 index 0000000000..26ea00da32 --- /dev/null +++ b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md @@ -0,0 +1,277 @@ +--- +title: Utiliser la Web Audio API +slug: Web/API/Web_Audio_API/Using_Web_Audio_API +translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API +--- + +

La Web Audio API offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples.

+ +
+

La Web Audio API ne vient pas remplacer l'élément <audio>, mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément <video>. Si vous avez seulement besoin de contrôler la lecture d'un fichier audio, <audio> est probablement une meilleure solution, plus rapide. Si vous voulez procéder à un traitement audio plus complexe et à la lecture d'une source, la Web Audio API offre davantage de possibilités en termes de puissance et de contrôle.

+ +

L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades.

+
+ +

Exemples

+ +

Afin d'expliquer l'utilisation de la Web Audio API, nous avons créé un certain nombre d'exemples qui seront étoffés au fur et à mesure. N'hésitez pas à en ajouter d'autres et à suggérer des améliorations !

+ +

Notre premier exemple est Voice-change-O-matic, une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble  (run the Voice-change-O-matic live).

+ +

Une boîte à rythme avec des contrôles pour la lecture, le volume et le pan

+ +

Concepts de base

+ +
+

Note : la plupart des extraits de code dans cette section viennent de l'exemple Violent Theremin.

+
+ +

La Web Audio API impliqe de réaliser les opérations de traitement audio dans un contexte audio, et elle a été conçue pour permettre le routage modulaire. Les opérations de traitement de base sont réalisées par des noeuds audio, qui sont reliés entre eux pour former un graphe de routage audio. Plusieurs sources — avec différentes configuration de canaux — peuvent cohabiter dans un seul contexte. Ce design modulaire offre la flexibilité nécessaire pour créer des fonctions complexes avec des effets dynamiques.

+ +

Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :

+ +
    +
  1. Création d'un contexte audio
    2. +
  2. Dans ce contexte, création des sources — telles que <audio>, oscillateur, flux
    3. +
  3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur
    4. +
  4. Choix final de la sortie audio, par exemple les enceintes du système 
    5. +
  5. Connection des sources aux effets, et des effets à la sortie.
    6. +
+ +

Création d'un contexte audio

+ +

Commencez par créer une instance de AudioContext sur laquelle vous allez créer un graphe audio. L'exemple le plus simple ressemblerait à ceci:

+ +
var contexteAudio = new AudioContext();
+
+ +
+

Note : On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.

+
+ +

Il faut rajouter une version préfixée pour les navigateurs Webkit/Blink browsers, tout en conservant la version non préfixée pour Firefox (desktop/mobile/OS). Ce qui donne :

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+
+ +
+

Note : Safari risque de planter si l'objet window n'est pas explicitement mentionné lors de la création d'un contexte audio

+
+ +

Création d'une source audio

+ +

Maintenant que nous avons créé un contexte, nous allons utiliser les méthodes de ce contexte pour quasiment tout ce qui nous reste à faire. La première étape consiste à créer une source audio. Les sources peuvent être de provenance diverse :

+ + + +

Pour notre exemple nous nous contenterons de créer un oscillateur pour générer un son simple comme source, et un noeud de gain pour contrôler le volume:

+ +
var oscillateur = contexteAudio.createOscillator();
+var noeudGain = contexteAudio.createGain();
+
+ +
+

Note : Pour jouer un fichier audio directement, il faut charger le fichier en XHR, le décoder en mémoire tampon, puis associer le tampon à une source. Voir l'exemple Voice-change-O-matic.

+
+ +
+

Note : Scott Michaud a écrit la librairie AudioSampleLoader, très pratique pour charger et décoder un ou plusieurs extraits audio. Elle peut aider à simplifier le processus de chargement XHR / mémoire tampon décrit dans la note précédente.

+
+ +

Lien entre les noeuds source et destination

+ +

Pour faire sortir le son dans vos enceintes, il faut relier la source et la destination. Pour cela on appelle la méthode connect sur le noeud source, le noeud de destination étant passé en argument. La méthode connect est disponible sur la plupart des types de noeuds.

+ +

La sortie par défaut du matériel (en général les enceintes) est accessible via {{ domxref("AudioContext.destination") }}. Pour connecter l'oscillateur, le noeud de gain et la destination, on écrirait les lignes suivantes:

+ +
oscillateur.connect(noeudGain);
+noeudGain.connect(contexteAudio.destination);
+
+ +

On peut connecter autant de noeuds qu'on le souhaite (cf. Voice-change-O-matic). Par exemple:

+ +
source = contexteAudio.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(noeudGain);
+noeudGain.connect(contexteAudio.destination);
+
+ +

Ce code créerait le graphe audio suivant :

+ +

Un graphe audio avec un élément audio source connecté à la destination par défaut

+ +

Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain.

+ +
+

Note : Depuis Firefox 32, les outils de développement intégrés incluent un éditeur audio,  très utile pour débugger les graphes audio.

+
+ +

Lecture du son et définition du pitch

+ +

Maintenant que le graphe audio est en place, nous pouvons ajuster certains aspects du son en définissant la valeur de certaines propriétés ou en utilsant ses méthodes. L'exemple suivant spécifie un pitch en hertz pour un oscillateur, lui assigne un type, et demande à l'oscillateur de jouer le son.

+ +
oscillateur.type = 'sine'; // onde sinusoïdale — les autres valeurs possible sont : 'square', 'sawtooth', 'triangle' et 'custom'
+oscillateur.frequency.value = 2500; // valeur en hertz
+oscillateur.start();
+
+ +

Le code suivant, qui vient de l'exemple Violent Theremin, spécifie une valeur maximum pour le gain, et une valeur pour la fréquence:

+ +
var largeur = window.innerWidth;
+var hauteur = window.innerHeight;
+
+var frequenceMax = 6000;
+var volumeMax = 1;
+
+var frequenceInitiale = 3000;
+var volumeInitial = 0.5;
+
+// paramètres de l'oscillateur
+
+oscillateur.type = 'sine'; // onde sinusoïdale — les autres valeurs possible sont : 'square', 'sawtooth', 'triangle' et 'custom'
+oscillateur.frequency.value = frequenceInitiale; // valeur en hertz
+oscillateur.start();
+
+noeudGain.gain.value = volumeInitial;
+
+ +

On peut aussi réassigner les valeurs de fréquence et de pitch à chaque mouvement de la souris, en utilisant la position pour calculer un pourcentage des valeurs maximum de fréquence et de gain :

+ +
// coordonnées de la souris
+
+var positionX;
+var positionY;
+
+// récupère les nouvelles coordonnées de la souris quand elle bouge
+// puis assigne les nouvelles valeurs de gain et de pitch
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    positionX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+    positionY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    oscillateur.frequency.value = (positionX/largeur) * frequenceMax;
+    noeudGain.gain.value = (positionY/hauteur) * volumeMax;
+
+    canvasDraw();
+}
+
+ +

Simple visualisation avec canvas

+ +

On appelle une fonction canvasDraw() à chaque mouvement de la souris. Elle dessine une grappe de cercles à l'endroit où se trouve la souris, leur taille et couleur étant basées sur les valeurs de fréquence et de gain.

+ +
function aleatoire(number1, number2) {
+  return number1 + (Math.floor(Math.random() * (number2 - number1)) + 1);
+}
+
+var canvas = document.querySelector('.canvas');
+canvas.width = largeur;
+canvas.height = hauteur;
+
+var contexteCanvas = canvas.getContext('2d');
+
+function canvasDraw() {
+  rX = positionX;
+  rY = positionY;
+  rC = Math.floor((noeudGain.gain.value / volumeMax) * 30);
+
+  canvasCtx.globalAlpha = 0.2;
+
+  for(i=1;i<=15;i=i+2) {
+    contexteCanvas.beginPath();
+    var chaineStyle = 'rgb(' + 100 + (i * 10) + ',' + Math.floor((noeudGain.gain.value / volumeMax) * 255);
+    chaineStyle += ',' + Math.floor((oscillateur.frequency.value / frequenceMax) * 255) + ')';
+    contexteCanvas.fillStyle = chaineStyle;
+    contexteCanvas.arc(rX + aleatoire(0, 50), rY + aleatoire(0, 50), rC / 2 + i, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
+    contexteCanvas.fill();
+    contexteCanvas.closePath();
+  }
+}
+ +

Couper le son du theremin

+ +

Quand on appuie sur le bouton pour couper le son, la fonction ci-dessous est appelée, qui déconnecte le noeud de gain du noeud de destination, cassant ainsi le graphe de façon à ce qu'aucun son ne soit produit. Appuyer de nouveau sur le bouton a l'effet inverse.

+ +
var coupeSon = document.querySelector('.mute');
+
+coupeSon.onclick = function() {
+  if(coupeSon.id == "") {
+    noeudGain.disconnect(contexteAudio.destination);
+    coupeSon.id = "activated";
+    coupeSon.innerHTML = "Unmute";
+  } else {
+    noeudGain.connect(contexteAudio.destination);
+    coupeSon.id = "";
+    coupeSon.innerHTML = "Mute";
+  }
+}
+
+ +

Autres options des noeuds

+ +

On peut créer un grand nombre d'autres noeuds avec la Web Audio API. De façon générale, ils fonctionnent de façon très similaire à ceux que nous venons de voir: on crée un noeud, le connecte avec d'autres noeuds, et on manipule ensuite ses propriétés et méthodes pour agir sur la source.

+ +

Ce document passe en revue quelques-uns des outils et effets disponibles; vous trouverez davantage de détails sur les pages de référence de la {{ domxref("Web_Audio_API") }}.

+ +

Noeuds modulateurs d'onde

+ +

On peut créer un noeud modulatur d'onde avec la méthode {{ domxref("AudioContext.createWaveShaper") }} :

+ +
var distortion = contexteAudio.createWaveShaper();
+
+ +

On associe ensuite à cet objet une forme d'onde définie mathématiquement, qui est appliquée à l'onde de base pour créer un effet de distortion. Ecrire son propre algorithme n'est pas si simple, et pour commencer le mieux est encore d'en chercher un sur le Web. Par exemple, nous avons trouvé celui-ci sur Stack Overflow:

+ +
function genererCourbeDistortion(amount) {
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i < n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+ +

L'exemple suivant, qui vient de Voice-change-O-matic, connecte un noeud de  distortion à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion :

+ +
source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+
+...
+
+distortion.curve = genererCourbeDistortion(400);
+
+ +

Filtre biquad

+ +

Les filtres biquad ont de nombreuses options. Nous montrons ici comment créer un filtre biquad avec la méthode {{domxref("AudioContext.createBiquadFilter")}}.

+ +
var filtreBiquad = contexteAudio.createBiquadFilter();
+
+ +

Le filtre utilisé dans la démo Voice-change-o-matic est un filtre lowshelf, qui amplifie le son au niveau des basses. Ici on augmente de 25 décibels toutes les fréquences en dessous de 1000.

+ +
filtreBiquad.type = "lowshelf";
+filtreBiquad.frequency.value = 1000;
+filtreBiquad.gain.value = 25;
+
+ +

Autres usages de la Web Audio API

+ +

La Web Audio API peut avoir bien d'autres applications que la visualisation ou la spatialisation audio (comme gérer la balance d'un son). Nous détaillerons d'autres options dans des articles séparés.

diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html deleted file mode 100644 index 8a128b4d81..0000000000 --- a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Visualisations avec la Web Audio API -slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API -translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API ---- -

L'une des fonctionnalités les plus intéressantes de la Web Audio API est la possibilité d'extraire de la source audio la fréquence, la forme d'onde et d'autres données, qui permettent de créer des visualisations. Cet article explique comment, et fournit quelques exemples basiques.

- -
-

Note : Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo Voice-change-O-matic.

-
- -

Concepts de base

- -

Pour extraire les données d'une source audio, il faut un {{ domxref("AnalyserNode") }}, que l'on peut créer à l'aide de la méthode {{ domxref("AudioContext.createAnalyser()") }}, par exemple:

- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
- -

Ce noeud est ensuite connecté à la source audio :

- -
source = contexteAudio.createMediaStreamSource(stream);
-source.connect(analyseur);
-analyseur.connect(distortion);
-// etc.
- -
-

Note : il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud.

-
- -

L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048).

- -
-

Note : Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}.

-
- -

Pour capturer des données, il faut utiliser les méthodes {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getByteFrequencyData()") }} pour la fréquence, et {{ domxref("AnalyserNode.getByteTimeDomainData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} pour la forme d'onde.

- -

Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez.

- -

Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode  Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence.

- -
analyseur.fftSize = 2048;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
- -

Pour récupérer les données et les copier dans notre tableau, nous appelons ensuite la méthode de notre choix, en passant le tableau comme argument. Par exemple :

- -
analyseur.getByteTimeDomainData(tableauDonnees);
- -

Nous avons maintenant les données audio qui correspondent à ce laps de temps capturées dans notre tableau, et pouvons procéder à la visualisation, par exemple en les dessinant dans un élément HTML5 {{ htmlelement("canvas") }}.

- -

Regardons quelques exemples précis.

- -

Création d'une forme d'onde / oscilloscope

- -

Pour visualiser un oscilloscope (chapeau à Soledad Penadés pour le code original sur Voice-change-O-matic), nous commençons par suivre la procédure standard décrite dans le paragraphe précédent pour mettre en place le tampon :

- -
analyseur.fftSize = 2048;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
- -

Ensuite nous effaçons ce qui est dessiné sur le canvas , avant le nouvel affichage :

- -
contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
- -

Puis nous définissons la fonction dessiner() :

- -
function dessiner() {
- -

Dans cette fonction, nous utilisons requestAnimationFrame() pour faire boucler la fonction une fois qu'elle a été appelée :

- -
      dessin = requestAnimationFrame(dessiner);
- -

Ensuite, nous récupérons les données et les passons dans notre tableau :

- -
      analyseur.getByteTimeDomainData(tableauDonnees);
- -

Nous remplissons le canvas avec une couleur de fond :

- -
      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
-      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
- -

Nous définissons l'épaisseur et la couleur du trait pour la forme d'onde que nous allons dessiner, et commençons le tracé :

- -
      contexteCanvas.lineWidth = 2;
-      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
-
-      contexteCanvas.beginPath();
- -

Pour déterminer la largeur de chacun des segments qui composent la ligne, nous divisons la largeur du canvas par la taille du tableau de données (laquelle est égale à FrequencyBinCount, comme nous l'avons dit plus haut), puis nous définissons une variable x pour stocker la position à laquelle il faut se déplacer pour chaque segment.

- -
      var largeurSegment = LARGEUR * 1.0 / tailleMemoireTampon;
-      var x = 0;
- -

Nous parcourons une boucle, qui définit la position du segment de l'onde pour chaque valeur du tableau: la hauteur (y) est basée sur cette valeur, tandis que la position en x correspond à une largeur de segment supplémentaire à chaque itération :

- -
      for(var i = 0; i < tailleMemoireTampon; i++) {
-
-        var v = tableauDonnees[i] / 128.0;
-        var y = v * HAUTEUR/2;
-
-        if(i === 0) {
-          contexteCanvas.moveTo(x, y);
-        } else {
-          contexteCanvas.lineTo(x, y);
-        }
-
-        x += largeurSegment;
-      }
- -

Finally, quand le tracé de la ligne a atteint le bord droit du canvas, nous l'affichons:

- -
      contexteCanvas.lineTo(canvas.width, canvas.height/2);
-      contexteCanvas.stroke();
-    };
- -

Nous pouvons maintenant appeler la fonction draw() que nous venons de définir pour lancer le processus:

- -
    dessiner();
- -

Ce qui nous donne un affichage de forme d'onde, actualisé plusieurs fois par seconde :

- -

Une ligne d'oscilloscope noire, illustrant la forme d'onde d'un signal audio

- -

Création d'un graphique à barres représentant la fréquence

- -

Un autre exemple de visualisation assez simple à créer est le graphique à barres dans le style de Winamp. Il y en a un dans la démo Voice-change-O-matic; regardons comment il est fait.

- -

Tout d'abord, nous mettons de nouveau en place notre analyseur et notre tableau de données, et nous effaçons le contenu du canvas avec clearRect(). La seule différence est que la valeur de la propriété fftSize est beaucoup plus petite, de façon à ce que chaque barre soit assez grosse pour ressembler à une barre et non à un fil.

- -
    analyseur.fftSize = 256;
-    var tailleMemoireTampon = analyseur.frequencyBinCount;
-    console.log(tailleMemoireTampon);
-    var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-
-    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
- -

Ensuite, nous passons à la fonction dessiner(), là encore avec une boucle requestAnimationFrame() qui efface l'affichage et le met à jour.

- -
    function dessiner() {
-      dessin = requestAnimationFrame(dessiner);
-
-      analyseur.getByteFrequencyData(tableauDonnees);
-
-      contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
-      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
- -

A présent nous calculons la largeur d'une barre, à savoir la largeur du canvas divisée par le nombre de barres (par la taille du buffer). Et nous multiplions cette valeur par 2.5, en prévision du fait que la plupart des fréquences ne contiendront pas de son, car les sons que nous entendons se situent dans un intervalle de fréquence plutôt bas. Nous ne voulons pas afficher des barres vides, nous ne gardons donc que celles qui ont une hauteur suffisante.

- -

Nous déclarons une variable hauteurBarre, ainsi qu'une variable x pour mémoriser la posiiton à laquelle il faudra dessiner la barre.

- -
      var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
-      var hauteurBarre;
-      var x = 0;
- -

Nous créons maintenant une boucle et itérons sur chaque valeur de tableauDonnees : hauteurBarre correspond à la valeur du tableau, la couleur de fond est aussi basée sur cette valeur (plus elle est grande plus la barre est lumineuse), et la barre est placée à x pixels du bord gauche du canvas, sa largeur est largeurBarre et sa hauteur est hauteurBarre/2 (nous avons finalement décidé de diviser cette valeur par deux pour que les barres rentrent mieux dans le canvas).

- -

La position verticale de la barre est calculée comme tel : HAUTEUR-hauteurBarre/2, parce que nous voulons que les barres s'alignent en bas du canvas, et non pas en haut (auquel cas nous aurions positionné la barre à 0).

- -
      for(var i = 0; i < tailleMemoireTampon; i++) {
-        hauteurBarre = tableauDonnees[i]/2;
-
-        contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
-        contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre);
-
-        x += largeurBarre + 1;
-      }
-    };
- -

Là encore, nous invoquons la fonction dessiner() pour lancer le processus.

- -
    dessiner();
- -

Ce code donne le résultat suivant:

- -

Une série de barres rouges dans un barre-graphe qui illustre l'intensité des différentes fréquences d'un signal audio

- -
-

Note : Les examples de cet article montrent l'utilisation de {{ domxref("AnalyserNode.getByteFrequencyData()") }} et {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Pour des exemples montrant {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, voir notre démo Voice-change-O-matic-float-data (et son code source) — elle est identique à la Voice-change-O-matic originale, à ceci près qu'elle utilise des données à virgule flottante, au lieu de données non signées.

-
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md new file mode 100644 index 0000000000..8a128b4d81 --- /dev/null +++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md @@ -0,0 +1,180 @@ +--- +title: Visualisations avec la Web Audio API +slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API +translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API +--- +

L'une des fonctionnalités les plus intéressantes de la Web Audio API est la possibilité d'extraire de la source audio la fréquence, la forme d'onde et d'autres données, qui permettent de créer des visualisations. Cet article explique comment, et fournit quelques exemples basiques.

+ +
+

Note : Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo Voice-change-O-matic.

+
+ +

Concepts de base

+ +

Pour extraire les données d'une source audio, il faut un {{ domxref("AnalyserNode") }}, que l'on peut créer à l'aide de la méthode {{ domxref("AudioContext.createAnalyser()") }}, par exemple:

+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+ +

Ce noeud est ensuite connecté à la source audio :

+ +
source = contexteAudio.createMediaStreamSource(stream);
+source.connect(analyseur);
+analyseur.connect(distortion);
+// etc.
+ +
+

Note : il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud.

+
+ +

L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048).

+ +
+

Note : Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}.

+
+ +

Pour capturer des données, il faut utiliser les méthodes {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getByteFrequencyData()") }} pour la fréquence, et {{ domxref("AnalyserNode.getByteTimeDomainData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} pour la forme d'onde.

+ +

Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez.

+ +

Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode  Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence.

+ +
analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+ +

Pour récupérer les données et les copier dans notre tableau, nous appelons ensuite la méthode de notre choix, en passant le tableau comme argument. Par exemple :

+ +
analyseur.getByteTimeDomainData(tableauDonnees);
+ +

Nous avons maintenant les données audio qui correspondent à ce laps de temps capturées dans notre tableau, et pouvons procéder à la visualisation, par exemple en les dessinant dans un élément HTML5 {{ htmlelement("canvas") }}.

+ +

Regardons quelques exemples précis.

+ +

Création d'une forme d'onde / oscilloscope

+ +

Pour visualiser un oscilloscope (chapeau à Soledad Penadés pour le code original sur Voice-change-O-matic), nous commençons par suivre la procédure standard décrite dans le paragraphe précédent pour mettre en place le tampon :

+ +
analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+ +

Ensuite nous effaçons ce qui est dessiné sur le canvas , avant le nouvel affichage :

+ +
contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+ +

Puis nous définissons la fonction dessiner() :

+ +
function dessiner() {
+ +

Dans cette fonction, nous utilisons requestAnimationFrame() pour faire boucler la fonction une fois qu'elle a été appelée :

+ +
      dessin = requestAnimationFrame(dessiner);
+ +

Ensuite, nous récupérons les données et les passons dans notre tableau :

+ +
      analyseur.getByteTimeDomainData(tableauDonnees);
+ +

Nous remplissons le canvas avec une couleur de fond :

+ +
      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+ +

Nous définissons l'épaisseur et la couleur du trait pour la forme d'onde que nous allons dessiner, et commençons le tracé :

+ +
      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();
+ +

Pour déterminer la largeur de chacun des segments qui composent la ligne, nous divisons la largeur du canvas par la taille du tableau de données (laquelle est égale à FrequencyBinCount, comme nous l'avons dit plus haut), puis nous définissons une variable x pour stocker la position à laquelle il faut se déplacer pour chaque segment.

+ +
      var largeurSegment = LARGEUR * 1.0 / tailleMemoireTampon;
+      var x = 0;
+ +

Nous parcourons une boucle, qui définit la position du segment de l'onde pour chaque valeur du tableau: la hauteur (y) est basée sur cette valeur, tandis que la position en x correspond à une largeur de segment supplémentaire à chaque itération :

+ +
      for(var i = 0; i < tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += largeurSegment;
+      }
+ +

Finally, quand le tracé de la ligne a atteint le bord droit du canvas, nous l'affichons:

+ +
      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };
+ +

Nous pouvons maintenant appeler la fonction draw() que nous venons de définir pour lancer le processus:

+ +
    dessiner();
+ +

Ce qui nous donne un affichage de forme d'onde, actualisé plusieurs fois par seconde :

+ +

Une ligne d'oscilloscope noire, illustrant la forme d'onde d'un signal audio

+ +

Création d'un graphique à barres représentant la fréquence

+ +

Un autre exemple de visualisation assez simple à créer est le graphique à barres dans le style de Winamp. Il y en a un dans la démo Voice-change-O-matic; regardons comment il est fait.

+ +

Tout d'abord, nous mettons de nouveau en place notre analyseur et notre tableau de données, et nous effaçons le contenu du canvas avec clearRect(). La seule différence est que la valeur de la propriété fftSize est beaucoup plus petite, de façon à ce que chaque barre soit assez grosse pour ressembler à une barre et non à un fil.

+ +
    analyseur.fftSize = 256;
+    var tailleMemoireTampon = analyseur.frequencyBinCount;
+    console.log(tailleMemoireTampon);
+    var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
+ +

Ensuite, nous passons à la fonction dessiner(), là encore avec une boucle requestAnimationFrame() qui efface l'affichage et le met à jour.

+ +
    function dessiner() {
+      dessin = requestAnimationFrame(dessiner);
+
+      analyseur.getByteFrequencyData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+ +

A présent nous calculons la largeur d'une barre, à savoir la largeur du canvas divisée par le nombre de barres (par la taille du buffer). Et nous multiplions cette valeur par 2.5, en prévision du fait que la plupart des fréquences ne contiendront pas de son, car les sons que nous entendons se situent dans un intervalle de fréquence plutôt bas. Nous ne voulons pas afficher des barres vides, nous ne gardons donc que celles qui ont une hauteur suffisante.

+ +

Nous déclarons une variable hauteurBarre, ainsi qu'une variable x pour mémoriser la posiiton à laquelle il faudra dessiner la barre.

+ +
      var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+      var hauteurBarre;
+      var x = 0;
+ +

Nous créons maintenant une boucle et itérons sur chaque valeur de tableauDonnees : hauteurBarre correspond à la valeur du tableau, la couleur de fond est aussi basée sur cette valeur (plus elle est grande plus la barre est lumineuse), et la barre est placée à x pixels du bord gauche du canvas, sa largeur est largeurBarre et sa hauteur est hauteurBarre/2 (nous avons finalement décidé de diviser cette valeur par deux pour que les barres rentrent mieux dans le canvas).

+ +

La position verticale de la barre est calculée comme tel : HAUTEUR-hauteurBarre/2, parce que nous voulons que les barres s'alignent en bas du canvas, et non pas en haut (auquel cas nous aurions positionné la barre à 0).

+ +
      for(var i = 0; i < tailleMemoireTampon; i++) {
+        hauteurBarre = tableauDonnees[i]/2;
+
+        contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+        contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre);
+
+        x += largeurBarre + 1;
+      }
+    };
+ +

Là encore, nous invoquons la fonction dessiner() pour lancer le processus.

+ +
    dessiner();
+ +

Ce code donne le résultat suivant:

+ +

Une série de barres rouges dans un barre-graphe qui illustre l'intensité des différentes fréquences d'un signal audio

+ +
+

Note : Les examples de cet article montrent l'utilisation de {{ domxref("AnalyserNode.getByteFrequencyData()") }} et {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Pour des exemples montrant {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, voir notre démo Voice-change-O-matic-float-data (et son code source) — elle est identique à la Voice-change-O-matic originale, à ceci près qu'elle utilise des données à virgule flottante, au lieu de données non signées.

+
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html deleted file mode 100644 index d0de8755ec..0000000000 --- a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: Web audio spatialization basics -slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics -translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics ---- -

En plus de sa grande variété de fonctionnalités et d'options, la Web Audio API permet aussi d'émuler la différence dans l'écoute d'un son lorsqu'un auditeur se déplace par rapport à une source, par exemple un panoramique lorsqu'il se déplace de gauche à droite de la source. On parle alors de spatialisation. Cet article expose les notions de base pour implémenter ce type de système.

- -

Le cas d'utilisation le plus simple est la simulation des altérations d'un son de façon réaliste pour imaginer comment une source se comportera pour un personnage qui se déplace dans un environnement 3D.

- -

Concepts de base

- -

Créer une spatialisation audio comporte deux principaux aspects :

- -
    -
  1. L'objet {{ domxref("AudioListener") }} représente la position dans l'espace 3D d'une personne qui écoute la source audio; on y accède avec la propriété {{ domxref("AudioContext.listener") }}. On peut paramétrer la position et l'orientation de l'auditeur, entre autres.
    2. -
  2. L'objet {{ domxref("PannerNode") }} représente la position dans l'espace 3D d'une source audio; on le crée avec la méthode {{ domxref("AudioContext.createPanner()") }}. On peut paramétrer un certain nombre d'options comme la position, l'orientation, la vitesse, et l'angle s'un cône qui indique dans quelle direction le son peut être entendu (s'il n'est pas omnidirectionnel).
    3. -
- -

Dans cet article nous allons nous concentrer sur la position de l'auditeur et du panoramique, tous deux paramétrés à l'aide de la méthode setPosition(). Celle-co accepte trois valeurs qui correspondent à X, Y, et Z dans un système de coordonnées cartésien.

- -
-

Note : Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit.

-
- -

Les autres options  disponibles, que nous ne traiterons pas ici, sont :

- - - -

A simple demo: Room of metal

- -

In our demo, you can move left and right past a 2.5D stereo that can be made to play a groovy tune, and you can also move towards the stereo. As you move left and right, the tune will pan to emulate how the tune will sound as you change your position proportional to the sound source. When you zoom in and out, the sound will get louder and quieter to suit.

- -
-

Note : You can see this example running live, and view the source code.

-
- -

Let's walk through the code and see how this was actually done.

- -

Defining basic variables

- -

First we define a new audio context, panner, listener, and source:

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-
-var panner = audioCtx.createPanner();
-var listener = audioCtx.listener;
-var source;
- -

Next we grab the objects on the page we are using for our demo. First the play and stop buttons to control the audio, then the boomBox, which is just the graphic of the stereo that we are moving around. After that, we grab a reference to two paragraphs that are used to output the position of the listener and panner, for debugging purposes.

- -
var play = document.querySelector('.play');
-var stop = document.querySelector('.stop');
-
-var boomBox = document.querySelector('.boom-box');
-
-var listenerData = document.querySelector('.listener-data');
-var pannerData = document.querySelector('.panner-data');
- -

Working out listener and panner positions

- -

Next comes a little bit of slightly fiddly maths. We want to make the boomBox, listener, and panner appear in the center of the screen initially, so we work out the width and height of the viewport, and divide both by two to get our X and Y values for those things. The zPos is only used on the panner, and is updated as the zoom controls are used (see later on); the initial value of 295 was decided on fairly arbitrarily — it sounded good. As long as you set the position of the panner appropriately in relation to the listener position, you will be ok.

- -

Next for this section, we set a leftBound and rightBound, which is the furthest we want our stereo graph to travel left and right. For the layout, we are using Flexbox to initially place the boomBox right in the center of the viewport, after which we then use iterative transforms and {{domxref("window.requestAnimationFrame()")}} to apply the boomBox movement. Therefore the "0" position is in the center of the viewport so the rightmost position is that position plus half the viewport, but minus 50 (pixels) so the boomBox can't shoot all the way off the right of the screen, and the leftmost position is that position minus half the viewport, but plus 50 (pixels), so the boomBox can't shoot all the way off the left of the screen.

- -

The last part of this code is the xIterator — we set this to a 150th of the screen width, and then move the boomBox left and right by this amount when the left and right controls are pressed. We use this rather than a constant so that the app is a little more responsive.

- -
var WIDTH = window.innerWidth;
-var HEIGHT = window.innerHeight;
-
-var xPos = WIDTH/2;
-var yPos = HEIGHT/2;
-var zPos = 295;
-
-leftBound = (-xPos) + 50;
-rightBound = xPos - 50;
-
-xIterator = WIDTH/150;
- -

Next we set the position of the listener and output the coordinates to the listenerData paragraph. It is always going to be in the same place, in a good position relative to the panner.

- -
listener.setPosition(xPos,yPos,300);
-listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
- -

In the positionPanner() function, we set the position of the panner, and output the coordinates to the pannerData paragraph. This function is called with each animation frame as the boomBox is moved, so the panner position updates accordingly:

- -
function positionPanner() {
-  panner.setPosition(xPos,yPos,zPos);
-  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
-}
- -

Loading and playing our music

- -

Next we use XHR to load an audio track, and decodeAudioData() to decode it and stick it in a buffer. Then we put the buffer into an {{domxref("AudioBufferSourceNode") }}:

- -
function getData() {
-  source = audioCtx.createBufferSource();
-  request = new XMLHttpRequest();
-
-  request.open('GET', 'viper.ogg', true);
-
-  request.responseType = 'arraybuffer';
-
-
-  request.onload = function() {
-    var audioData = request.response;
-
-    audioCtx.decodeAudioData(audioData, function(buffer) {
-        myBuffer = buffer;
-        source.buffer = myBuffer;
-
-        source.connect(panner);
-        panner.connect(audioCtx.destination);
-        positionPanner();
-        source.loop = true;
-      },
-
-      function(e){"Error with decoding audio data" + e.err});
-
-  }
-
-  request.send();
-}
- -

The next stage is to wire up the buttons to stop and play the audio. The pulse wrapper is an extra wrapper {{ htmlelement("div") }} wrapped around the boomBox. We apply the pulsating (scaleY) animation to this element when the play button is clicked, not the boomBox itself, because the boomBox already has animations applied to it throughout the course of the app's running.

- -
var pulseWrapper = document.querySelector('.pulse-wrapper');
-
-play.onclick = function() {
-  getData();
-  source.start(0);
-  play.setAttribute('disabled', 'disabled');
-  pulseWrapper.classList.add('pulsate');
-}
-
-stop.onclick = function() {
-  source.stop(0);
-  play.removeAttribute('disabled');
-  pulseWrapper.classList.remove('pulsate');
-}
- -

Moving the boom box and the panner

- -

The next section of code grabs references to the left, right, zoom in, and zoom out buttons, and defines initial X, Y, and scale amounts for the boomBox to be positioned by when the transforms first start to be applied.

- -
var leftButton = document.querySelector('.left');
-var rightButton = document.querySelector('.right');
-var zoomInButton = document.querySelector('.zoom-in');
-var zoomOutButton = document.querySelector('.zoom-out');
-
-var boomX = 0;
-var boomY = 0;
-var boomZoom = 0.25;
- -

Now we get to the four functions that control the left, right, zoom in, and zoom out functionality: moveRight(), moveLeft(), zoomIn(), and zoomOut(). Each is a little different, but works in a similar way:

- -
    -
  1. The boomX or boomZoom variables are updated in order to change the boomBox's position on the screen.
    2. -
  2. The xPos or zPos variables are updated in order to change the {{domxref("PannerNode") }}'s position in 3D space. The changes are quite small, but these are the values we found to work.
    3. -
  3. A check is done to see if the upper bounds of movement have been reached (a boomX equal or less than leftBound or greater than rightBound, or a boomZoom greater than 4 or equal or less than 0.25.) If so, the values are updated to force the boomBox to stay in certain constraints, and to force the xPos and zPos variables to also stay within certain constrants. These are, respectively, 5 greater or less than WIDTH/2, and a zPos between 295 and 299.9. These are the values we found produced a relatively realistic sounding panning and volume adjustment as the boomBox was moved around.
    4. -
  4. boomBox is transformed (translated and scaled) by the new values of boomX, boomY, and boomZoom to move it around the screen.
    5. -
  5. The positionPanner() function is run to update the position of the panner.
    6. -
  6. A {{domxref("window.requestAnimationFrame") }} instance is called to keep running the function for as long as the mouse button is pressed down.
    7. -
  7. The requestAnimationFrame ID is returned out of the function so that it can be cancelled when the mouse button is released.
    8. -
- -
function moveRight() {
-  boomX += -xIterator;
-  xPos += -0.066;
-
-  if(boomX <= leftBound) {
-    boomX = leftBound;
-    xPos = (WIDTH/2) - 5;
-  }
-
-  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
-  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
-  positionPanner();
-  rightLoop = requestAnimationFrame(moveRight);
-  return rightLoop;
-}
-
-function moveLeft() {
-  boomX += xIterator;
-  xPos += 0.066;
-
-  if(boomX > rightBound) {
-    boomX = rightBound;
-    xPos = (WIDTH/2) + 5;
-  }
-
-  positionPanner();
-  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
-  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
-  leftLoop = requestAnimationFrame(moveLeft);
-  return leftLoop;
-}
-
-function zoomIn() {
-  boomZoom += 0.05;
-  zPos += 0.066;
-
-  if(boomZoom > 4) {
-    boomZoom = 4;
-    zPos = 299.9;
-  }
-
-  positionPanner();
-  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
-  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
-  zoomInLoop = requestAnimationFrame(zoomIn);
-  return zoomInLoop;
-}
-
-function zoomOut() {
-  boomZoom += -0.05;
-  zPos += -0.066;
-
-  if(boomZoom <= 0.25) {
-    boomZoom = 0.25;
-    zPos = 295;
-  }
-
-  positionPanner();
-  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
-  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
-  zoomOutLoop = requestAnimationFrame(zoomOut);
-  return zoomOutLoop;
-}
- -

In the final block of code, we simply wire up event handlers to control the movement when the buttons are pressed. For each button, the relevant function is invoked onmousedown; then onmouseup, {{domxref("window.cancelAnimationFrame") }} is called along with the returned requestAnimationFrame() ID to stop the animation happening.

- -
leftButton.onmousedown = moveLeft;
-leftButton.onmouseup = function () {
-  window.cancelAnimationFrame(leftLoop);
-}
-
-rightButton.onmousedown = moveRight;
-rightButton.onmouseup = function () {
-  window.cancelAnimationFrame(rightLoop);
-}
-
-zoomInButton.onmousedown = zoomIn;
-zoomInButton.onmouseup = function () {
-  window.cancelAnimationFrame(zoomInLoop);
-}
-
-zoomOutButton.onmousedown = zoomOut;
-zoomOutButton.onmouseup = function () {
-  window.cancelAnimationFrame(zoomOutLoop);
-}
- -

As you can see, the actual panner code is pretty simple — specify the positions, and the browser takes care of the rest. It is working out the surrounding code, and the values to use for positioning, which takes a bit more time.

- -
-

Note : You are probably thinking "why didn't you move the listener and keep the panner still instead: surely that is a bit more obvious?" Well, perhaps, but we felt that since the panner has more methods and properties available to it, moving it would allow more control in the long term.

-
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md new file mode 100644 index 0000000000..d0de8755ec --- /dev/null +++ b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md @@ -0,0 +1,261 @@ +--- +title: Web audio spatialization basics +slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics +translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics +--- +

En plus de sa grande variété de fonctionnalités et d'options, la Web Audio API permet aussi d'émuler la différence dans l'écoute d'un son lorsqu'un auditeur se déplace par rapport à une source, par exemple un panoramique lorsqu'il se déplace de gauche à droite de la source. On parle alors de spatialisation. Cet article expose les notions de base pour implémenter ce type de système.

+ +

Le cas d'utilisation le plus simple est la simulation des altérations d'un son de façon réaliste pour imaginer comment une source se comportera pour un personnage qui se déplace dans un environnement 3D.

+ +

Concepts de base

+ +

Créer une spatialisation audio comporte deux principaux aspects :

+ +
    +
  1. L'objet {{ domxref("AudioListener") }} représente la position dans l'espace 3D d'une personne qui écoute la source audio; on y accède avec la propriété {{ domxref("AudioContext.listener") }}. On peut paramétrer la position et l'orientation de l'auditeur, entre autres.
    2. +
  2. L'objet {{ domxref("PannerNode") }} représente la position dans l'espace 3D d'une source audio; on le crée avec la méthode {{ domxref("AudioContext.createPanner()") }}. On peut paramétrer un certain nombre d'options comme la position, l'orientation, la vitesse, et l'angle s'un cône qui indique dans quelle direction le son peut être entendu (s'il n'est pas omnidirectionnel).
    3. +
+ +

Dans cet article nous allons nous concentrer sur la position de l'auditeur et du panoramique, tous deux paramétrés à l'aide de la méthode setPosition(). Celle-co accepte trois valeurs qui correspondent à X, Y, et Z dans un système de coordonnées cartésien.

+ +
+

Note : Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit.

+
+ +

Les autres options  disponibles, que nous ne traiterons pas ici, sont :

+ + + +

A simple demo: Room of metal

+ +

In our demo, you can move left and right past a 2.5D stereo that can be made to play a groovy tune, and you can also move towards the stereo. As you move left and right, the tune will pan to emulate how the tune will sound as you change your position proportional to the sound source. When you zoom in and out, the sound will get louder and quieter to suit.

+ +
+

Note : You can see this example running live, and view the source code.

+
+ +

Let's walk through the code and see how this was actually done.

+ +

Defining basic variables

+ +

First we define a new audio context, panner, listener, and source:

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+var listener = audioCtx.listener;
+var source;
+ +

Next we grab the objects on the page we are using for our demo. First the play and stop buttons to control the audio, then the boomBox, which is just the graphic of the stereo that we are moving around. After that, we grab a reference to two paragraphs that are used to output the position of the listener and panner, for debugging purposes.

+ +
var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');
+ +

Working out listener and panner positions

+ +

Next comes a little bit of slightly fiddly maths. We want to make the boomBox, listener, and panner appear in the center of the screen initially, so we work out the width and height of the viewport, and divide both by two to get our X and Y values for those things. The zPos is only used on the panner, and is updated as the zoom controls are used (see later on); the initial value of 295 was decided on fairly arbitrarily — it sounded good. As long as you set the position of the panner appropriately in relation to the listener position, you will be ok.

+ +

Next for this section, we set a leftBound and rightBound, which is the furthest we want our stereo graph to travel left and right. For the layout, we are using Flexbox to initially place the boomBox right in the center of the viewport, after which we then use iterative transforms and {{domxref("window.requestAnimationFrame()")}} to apply the boomBox movement. Therefore the "0" position is in the center of the viewport so the rightmost position is that position plus half the viewport, but minus 50 (pixels) so the boomBox can't shoot all the way off the right of the screen, and the leftmost position is that position minus half the viewport, but plus 50 (pixels), so the boomBox can't shoot all the way off the left of the screen.

+ +

The last part of this code is the xIterator — we set this to a 150th of the screen width, and then move the boomBox left and right by this amount when the left and right controls are pressed. We use this rather than a constant so that the app is a little more responsive.

+ +
var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = WIDTH/2;
+var yPos = HEIGHT/2;
+var zPos = 295;
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;
+ +

Next we set the position of the listener and output the coordinates to the listenerData paragraph. It is always going to be in the same place, in a good position relative to the panner.

+ +
listener.setPosition(xPos,yPos,300);
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+ +

In the positionPanner() function, we set the position of the panner, and output the coordinates to the pannerData paragraph. This function is called with each animation frame as the boomBox is moved, so the panner position updates accordingly:

+ +
function positionPanner() {
+  panner.setPosition(xPos,yPos,zPos);
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}
+ +

Loading and playing our music

+ +

Next we use XHR to load an audio track, and decodeAudioData() to decode it and stick it in a buffer. Then we put the buffer into an {{domxref("AudioBufferSourceNode") }}:

+ +
function getData() {
+  source = audioCtx.createBufferSource();
+  request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        myBuffer = buffer;
+        source.buffer = myBuffer;
+
+        source.connect(panner);
+        panner.connect(audioCtx.destination);
+        positionPanner();
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+ +

The next stage is to wire up the buttons to stop and play the audio. The pulse wrapper is an extra wrapper {{ htmlelement("div") }} wrapped around the boomBox. We apply the pulsating (scaleY) animation to this element when the play button is clicked, not the boomBox itself, because the boomBox already has animations applied to it throughout the course of the app's running.

+ +
var pulseWrapper = document.querySelector('.pulse-wrapper');
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+  pulseWrapper.classList.add('pulsate');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+  pulseWrapper.classList.remove('pulsate');
+}
+ +

Moving the boom box and the panner

+ +

The next section of code grabs references to the left, right, zoom in, and zoom out buttons, and defines initial X, Y, and scale amounts for the boomBox to be positioned by when the transforms first start to be applied.

+ +
var leftButton = document.querySelector('.left');
+var rightButton = document.querySelector('.right');
+var zoomInButton = document.querySelector('.zoom-in');
+var zoomOutButton = document.querySelector('.zoom-out');
+
+var boomX = 0;
+var boomY = 0;
+var boomZoom = 0.25;
+ +

Now we get to the four functions that control the left, right, zoom in, and zoom out functionality: moveRight(), moveLeft(), zoomIn(), and zoomOut(). Each is a little different, but works in a similar way:

+ +
    +
  1. The boomX or boomZoom variables are updated in order to change the boomBox's position on the screen.
    2. +
  2. The xPos or zPos variables are updated in order to change the {{domxref("PannerNode") }}'s position in 3D space. The changes are quite small, but these are the values we found to work.
    3. +
  3. A check is done to see if the upper bounds of movement have been reached (a boomX equal or less than leftBound or greater than rightBound, or a boomZoom greater than 4 or equal or less than 0.25.) If so, the values are updated to force the boomBox to stay in certain constraints, and to force the xPos and zPos variables to also stay within certain constrants. These are, respectively, 5 greater or less than WIDTH/2, and a zPos between 295 and 299.9. These are the values we found produced a relatively realistic sounding panning and volume adjustment as the boomBox was moved around.
    4. +
  4. boomBox is transformed (translated and scaled) by the new values of boomX, boomY, and boomZoom to move it around the screen.
    5. +
  5. The positionPanner() function is run to update the position of the panner.
    6. +
  6. A {{domxref("window.requestAnimationFrame") }} instance is called to keep running the function for as long as the mouse button is pressed down.
    7. +
  7. The requestAnimationFrame ID is returned out of the function so that it can be cancelled when the mouse button is released.
    8. +
+ +
function moveRight() {
+  boomX += -xIterator;
+  xPos += -0.066;
+
+  if(boomX <= leftBound) {
+    boomX = leftBound;
+    xPos = (WIDTH/2) - 5;
+  }
+
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  positionPanner();
+  rightLoop = requestAnimationFrame(moveRight);
+  return rightLoop;
+}
+
+function moveLeft() {
+  boomX += xIterator;
+  xPos += 0.066;
+
+  if(boomX > rightBound) {
+    boomX = rightBound;
+    xPos = (WIDTH/2) + 5;
+  }
+
+  positionPanner();
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  leftLoop = requestAnimationFrame(moveLeft);
+  return leftLoop;
+}
+
+function zoomIn() {
+  boomZoom += 0.05;
+  zPos += 0.066;
+
+  if(boomZoom > 4) {
+    boomZoom = 4;
+    zPos = 299.9;
+  }
+
+  positionPanner();
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  zoomInLoop = requestAnimationFrame(zoomIn);
+  return zoomInLoop;
+}
+
+function zoomOut() {
+  boomZoom += -0.05;
+  zPos += -0.066;
+
+  if(boomZoom <= 0.25) {
+    boomZoom = 0.25;
+    zPos = 295;
+  }
+
+  positionPanner();
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  zoomOutLoop = requestAnimationFrame(zoomOut);
+  return zoomOutLoop;
+}
+ +

In the final block of code, we simply wire up event handlers to control the movement when the buttons are pressed. For each button, the relevant function is invoked onmousedown; then onmouseup, {{domxref("window.cancelAnimationFrame") }} is called along with the returned requestAnimationFrame() ID to stop the animation happening.

+ +
leftButton.onmousedown = moveLeft;
+leftButton.onmouseup = function () {
+  window.cancelAnimationFrame(leftLoop);
+}
+
+rightButton.onmousedown = moveRight;
+rightButton.onmouseup = function () {
+  window.cancelAnimationFrame(rightLoop);
+}
+
+zoomInButton.onmousedown = zoomIn;
+zoomInButton.onmouseup = function () {
+  window.cancelAnimationFrame(zoomInLoop);
+}
+
+zoomOutButton.onmousedown = zoomOut;
+zoomOutButton.onmouseup = function () {
+  window.cancelAnimationFrame(zoomOutLoop);
+}
+ +

As you can see, the actual panner code is pretty simple — specify the positions, and the browser takes care of the rest. It is working out the surrounding code, and the values to use for positioning, which takes a bit more time.

+ +
+

Note : You are probably thinking "why didn't you move the listener and keep the panner still instead: surely that is a bit more obvious?" Well, perhaps, but we felt that since the panner has more methods and properties available to it, moving it would allow more control in the long term.

+
\ No newline at end of file diff --git a/files/fr/web/api/web_speech_api/index.html b/files/fr/web/api/web_speech_api/index.html deleted file mode 100644 index f659e9f550..0000000000 --- a/files/fr/web/api/web_speech_api/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: L'API Web Speech -slug: Web/API/Web_Speech_API -tags: - - API - - API Web Speech - - Experimental - - reconnaissance vocale - - synthèse vocale -translation_of: Web/API/Web_Speech_API ---- -
{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}
- -

L'API Web Speech permet d'intégrer des données liées à la voix dans des applications web. L'API Web Speech se compose de deux parties : SpeechSynthesis (synthèse vocale) et SpeechRecognition (reconnaissance vocale asynchrone).

- -

Concepts et usages de l'API Web Speech

- -

L'API Web Speech rend les applications web capables de manipuler des données liées à la voix. Cette API se compose de deux parties :

- - - -

Pour plus de détails concernant ces fonctionnalités, voir Using the Web Speech API.

- -

Les interfaces de l'API Web Speech

- -

Le reconnaissance vocale

- -
-
{{domxref("SpeechRecognition")}}
-
L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance.
-
{{domxref("SpeechRecognitionAlternative")}}
-
Représente un mot unique qui a été reconnu par l'outil de reconnaissane vocale.
-
{{domxref("SpeechRecognitionError")}}
-
Répresente les messages d'erreur de l'outil de reconnaissance vocale.
-
{{domxref("SpeechRecognitionEvent")}}
-
L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif.
-
{{domxref("SpeechGrammar")}}
-
Les mots ou schémas de mots que l'on demande à l'outil de reconnaissance vocale de reconnaître.
-
{{domxref("SpeechGrammarList")}}
-
Répresente une liste des objets {{domxref("SpeechGrammar")}}.
-
{{domxref("SpeechRecognitionResult")}}
-
Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}.
-
{{domxref("SpeechRecognitionResultList")}}
-
Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}.
-
- -

La synthèse vocale

- -
-
{{domxref("SpeechSynthesis")}}
-
L'interface de contrôle de l'outil de vocalisation; elle peut être utiliser pour rechercher des informations concernant les voix de synthèse disponible dans l'appareil, le démarrage et l'interruption de la vocalisation, et les commandes complémentaires.
-
{{domxref("SpeechSynthesisErrorEvent")}}
-
Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale.
-
{{domxref("SpeechSynthesisEvent")}}
-
Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale.
-
{{domxref("SpeechSynthesisUtterance")}}
-
Répresente une requête de synthèse vocale. Il contient le contenu que l'outil de synthèse vocale devrait vocaliser et les informations sur comment le vocaliser (e.g. langue, ton et volume).
-
- -
-
{{domxref("SpeechSynthesisVoice")}}
-
Représente une voix qui est supportée par le système. Chaque SpeechSynthesisVoice a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI.
-
{{domxref("Window.speechSynthesis")}}
-
Spécifiée comme une partie de l'interface [NoInterfaceObject] intitulée SpeechSynthesisGetter, et implémentée par l'objet Window, la propriété speechSynthesis fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale.
-
- -

Exemples

- -

Le Web Speech API repo sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('Web Speech API')}}{{Spec2('Web Speech API')}}Définition initiale
- -

Compatibilité des navigateurs

- -

SpeechRecognition

- -

{{Compat("api.SpeechRecognition", 0)}}

- -

SpeechSynthesis

- -

{{Compat("api.SpeechSynthesis", 0)}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/web_speech_api/index.md b/files/fr/web/api/web_speech_api/index.md new file mode 100644 index 0000000000..f659e9f550 --- /dev/null +++ b/files/fr/web/api/web_speech_api/index.md @@ -0,0 +1,108 @@ +--- +title: L'API Web Speech +slug: Web/API/Web_Speech_API +tags: + - API + - API Web Speech + - Experimental + - reconnaissance vocale + - synthèse vocale +translation_of: Web/API/Web_Speech_API +--- +
{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}
+ +

L'API Web Speech permet d'intégrer des données liées à la voix dans des applications web. L'API Web Speech se compose de deux parties : SpeechSynthesis (synthèse vocale) et SpeechRecognition (reconnaissance vocale asynchrone).

+ +

Concepts et usages de l'API Web Speech

+ +

L'API Web Speech rend les applications web capables de manipuler des données liées à la voix. Cette API se compose de deux parties :

+ + + +

Pour plus de détails concernant ces fonctionnalités, voir Using the Web Speech API.

+ +

Les interfaces de l'API Web Speech

+ +

Le reconnaissance vocale

+ +
+
{{domxref("SpeechRecognition")}}
+
L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance.
+
{{domxref("SpeechRecognitionAlternative")}}
+
Représente un mot unique qui a été reconnu par l'outil de reconnaissane vocale.
+
{{domxref("SpeechRecognitionError")}}
+
Répresente les messages d'erreur de l'outil de reconnaissance vocale.
+
{{domxref("SpeechRecognitionEvent")}}
+
L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif.
+
{{domxref("SpeechGrammar")}}
+
Les mots ou schémas de mots que l'on demande à l'outil de reconnaissance vocale de reconnaître.
+
{{domxref("SpeechGrammarList")}}
+
Répresente une liste des objets {{domxref("SpeechGrammar")}}.
+
{{domxref("SpeechRecognitionResult")}}
+
Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}.
+
{{domxref("SpeechRecognitionResultList")}}
+
Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}.
+
+ +

La synthèse vocale

+ +
+
{{domxref("SpeechSynthesis")}}
+
L'interface de contrôle de l'outil de vocalisation; elle peut être utiliser pour rechercher des informations concernant les voix de synthèse disponible dans l'appareil, le démarrage et l'interruption de la vocalisation, et les commandes complémentaires.
+
{{domxref("SpeechSynthesisErrorEvent")}}
+
Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale.
+
{{domxref("SpeechSynthesisEvent")}}
+
Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale.
+
{{domxref("SpeechSynthesisUtterance")}}
+
Répresente une requête de synthèse vocale. Il contient le contenu que l'outil de synthèse vocale devrait vocaliser et les informations sur comment le vocaliser (e.g. langue, ton et volume).
+
+ +
+
{{domxref("SpeechSynthesisVoice")}}
+
Représente une voix qui est supportée par le système. Chaque SpeechSynthesisVoice a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI.
+
{{domxref("Window.speechSynthesis")}}
+
Spécifiée comme une partie de l'interface [NoInterfaceObject] intitulée SpeechSynthesisGetter, et implémentée par l'objet Window, la propriété speechSynthesis fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale.
+
+ +

Exemples

+ +

Le Web Speech API repo sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('Web Speech API')}}{{Spec2('Web Speech API')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

SpeechRecognition

+ +

{{Compat("api.SpeechRecognition", 0)}}

+ +

SpeechSynthesis

+ +

{{Compat("api.SpeechSynthesis", 0)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html deleted file mode 100644 index e826557e2a..0000000000 --- a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: Utiliser l'API Web Speech -slug: Web/API/Web_Speech_API/Using_the_Web_Speech_API -tags: - - API - - API Web Speech - - Guide - - Tutoriel - - Utilisation - - reconnaissance - - synthèse - - vocale -translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API ---- -

L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissance vocale, et la synthèse vocale (aussi appelée "text to speech", ou tts) — qui ouvrent de nouvelles possibiités d'accessibilité, et de mécanismes de contrôle. Cet article apporte une simple introduction à ces deux domaines, accompagnée de démonstrations.

- -

Reconnaissance vocale

- -

La reconnaissance vocale implique de recevoir de la voix à travers un dispositif de capture du son, tel qu'un microphone, qui est ensuite vérifiée par un service de reconnaissance vocale utilisant une "grammaire" (le vocabulaire que vous voulez faire reconnaître par une application donnée). Quand un mot ou une phrase sont reconnus avec succès, ils sont retournés comme résultat (ou une liste de résultats) sous la forme d'une chaîne de caractères, et d'autres actions peuvent être initiées à la suite de ce résultat.

- -

L'API Web Speech a une interface principale de contrôle  — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale  — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc.

- -
-

Note : Sur certains navigateurs, comme Chrome, utiliser la reconnaissance vocale sur une page web implique de disposer d'un moteur de reconnaissance basé sur un serveur. Votre flux audio est envoyé à un service web pour traitement, le moteur ne fonctionnera donc pas hors ligne.

-
- -

Demo

- -

Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée  Speech color changer. Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie.

- -

Pour lancer la demo, vous pouvez cloner (ou directement télécharger) le dépôt Github dont elle fait partie, ouvrir le fichier d'index HTML dans un navigateur pour ordinateur de bureau le supportant comme Chrome, ou naviguer vers l'URL de démonstration live, sur un navigateur pour mobile le supportant comme Chrome.

- -

Support des navigateurs

- -

Le support de la reconnaissance vocale via l'API Web Speech est actuellement limité à Chrome pour ordinateur de bureau et pour mobiles sur Android — Chrome le supporte depuis la version 33 mais avec des interfaces préfixées spécifiques, donc vous avez besoin d'inclure des versions d'interfaces préfixées définies, comme : webkitSpeechRecognition.

- -

HTML and CSS

- -

The HTML and CSS for the app is really trivial. We simply have a title, instructions paragraph, and a div into which we output diagnostic messages.

- -
<h1>Speech color changer</h1>
-<p>Tap/click then say a color to change the background color of the app.</p>
-<div>
-  <p class="output"><em>...diagnostic messages</em></p>
-</div>
- -

The CSS provides a very simple responsive styling so that it looks ok across devices.

- -

JavaScript

- -

Let's look at the JavaScript in a bit more detail.

- -

Chrome support

- -

As mentioned earlier, Chrome currently supports speech recognition with prefixed properties, therefore at the start of our code we include these lines to feed the right objects to Chrome, and any future implementations that might support the features without a prefix:

- -
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
-var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
-var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
- -

The grammar

- -

The next part of our code defines the grammar we want our app to recognise. The following variable is defined to hold our grammar:

- -
var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
-var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
- -

The grammar format used is JSpeech Grammar Format (JSGF) — you can find a lot more about it at the previous link to its spec. However, for now let's just run through it quickly:

- - - -

Plugging the grammar into our speech recognition

- -

The next thing to do is define a speech recogntion instance to control the recognition for our application. This is done using the {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} constructor. We also create a new speech grammar list to contain our grammar, using the {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} constructor.

- -
var recognition = new SpeechRecognition();
-var speechRecognitionList = new SpeechGrammarList();
- -

We add our grammar to the list using the {{domxref("SpeechGrammarList.addFromString()")}} method. This accepts as parameters the string we want to add, plus optionally a weight value that specifies the importance of this grammar in relation of other grammars available in the list (can be from 0 to 1 inclusive.) The added grammar is available in the list as a {{domxref("SpeechGrammar")}} object instance.

- -
speechRecognitionList.addFromString(grammar, 1);
- -

We then add the {{domxref("SpeechGrammarList")}} to the speech recognition instance by setting it to the value of the {{domxref("SpeechRecognition.grammars")}} property. We also set a few other properties of the recognition instance before we move on:

- - - -
recognition.grammars = speechRecognitionList;
-recognition.continuous = false;
-recognition.lang = 'en-US';
-recognition.interimResults = false;
-recognition.maxAlternatives = 1;
- -

Starting the speech recognition

- -

After grabbing references to the output {{htmlelement("div")}} and the HTML element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start. This is achieved by calling {{domxref("SpeechRecognition.start()")}}. The forEach() method is used to output colored indicators showing what colors to try saying.

- -
var diagnostic = document.querySelector('.output');
-var bg = document.querySelector('html');
-var hints = document.querySelector('.hints');
-
-var colorHTML= '';
-colors.forEach(function(v, i, a){
-  console.log(v, i);
-  colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
-});
-hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
-
-document.body.onclick = function() {
-  recognition.start();
-  console.log('Ready to receive a color command.');
-}
- -

Receiving and handling results

- -

Once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the SpeechRecognition event handlers list.) The most common one you'll probably use is {{domxref("SpeechRecognition.onresult")}}, which is fired once a successful result is received:

- -
recognition.onresult = function(event) {
-  var color = event.results[0][0].transcript;
-  diagnostic.textContent = 'Result received: ' + color + '.';
-  bg.style.backgroundColor = color;
-  console.log('Confidence: ' + event.results[0][0].confidence);
-}
- -

The second line here is a bit complex-looking, so let's explain it step by step. The {{domxref("SpeechRecognitionEvent.results")}} property returns a {{domxref("SpeechRecognitionResultList")}} object containing {{domxref("SpeechRecognitionResult")}} objects. It has a getter so it can be accessed like an array — so the first [0] returns the SpeechRecognitionResult at position 0. Each SpeechRecognitionResult object contains {{domxref("SpeechRecognitionAlternative")}} objects that contain individual recognised words. These also have getters so they can be accessed like arrays — the second [0] therefore returns the SpeechRecognitionAlternative at position 0. We then return its transcript property to get a string containing the individual recognised result as a string, set the background color to that color, and report the color recognised as a diagnostic message in the UI.

- -

We also use a {{domxref("SpeechRecognition.onspeechend")}} handler to stop the speech recognition service from running (using {{domxref("SpeechRecognition.stop()")}}) once a single word has been recognised and it has finished being spoken:

- -
recognition.onspeechend = function() {
-  recognition.stop();
-}
- -

Handling errors and unrecognised speech

- -

The last two handlers are there to handle cases where speech was recognised that wasn't in the defined grammar, or an error occured. {{domxref("SpeechRecognition.onnomatch")}} seems to be supposed to handle the first case mentioned, although note that at the moment it doesn't seem to fire correctly; it just returns whatever was recognised anyway:

- -
recognition.onnomatch = function(event) {
-  diagnostic.textContent = 'I didnt recognise that color.';
-}
- -

{{domxref("SpeechRecognition.onerror")}} handles cases where there is an actual error with the recognition successfully — the {{domxref("SpeechRecognitionError.error")}} property contains the actual error returned:

- -
recognition.onerror = function(event) {
-  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
-}
- -

Speech synthesis

- -

Speech synthesis (aka text-to-speech, or tts) involves receiving synthesising text contained within an app to speech, and playing it out of a device's speaker or audio output connection.

- -

The Web Speech API has a main controller interface for this — {{domxref("SpeechSynthesis")}} — plus a number of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. Again, most OSes have some kind of speech synthesis system, which will be used by the API for this task as available.

- -

Demo

- -

To show simple usage of Web speech synthesis, we've provided a demo called Speak easy synthesis. This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press Enter/Return to hear it spoken.

- -

To run the demo, you can clone (or directly download) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the live demo URL in a supporting mobile browser like Chrome, or Firefox OS.

- -

Browser support

- -

Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following:

- - - -

HTML and CSS

- -

The HTML and CSS are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. The {{htmlelement("select")}} element is initially empty, but is populated with {{htmlelement("option")}}s via JavaScript (see later on.)

- -
<h1>Speech synthesiser</h1>
-
-<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
-
-<form>
-  <input type="text" class="txt">
-  <div>
-    <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
-    <div class="rate-value">1</div>
-    <div class="clearfix"></div>
-  </div>
-  <div>
-    <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
-    <div class="pitch-value">1</div>
-    <div class="clearfix"></div>
-  </div>
-  <select>
-
-  </select>
-</form>
- -

JavaScript

- -

Let's investigate the JavaScript that powers this app.

- -

Setting variables

- -

First of all, we capture references to all the DOM elements involved in the UI, but more interestingly, we capture a reference to {{domxref("Window.speechSynthesis")}}. This is API's entry point — it returns an instance of {{domxref("SpeechSynthesis")}}, the controller interface for web speech synthesis.

- -
var synth = window.speechSynthesis;
-
-var inputForm = document.querySelector('form');
-var inputTxt = document.querySelector('.txt');
-var voiceSelect = document.querySelector('select');
-
-var pitch = document.querySelector('#pitch');
-var pitchValue = document.querySelector('.pitch-value');
-var rate = document.querySelector('#rate');
-var rateValue = document.querySelector('.rate-value');
-
-var voices = [];
-
- -

Populating the select element

- -

To populate the {{htmlelement("select")}} element with the different voice options the device has available, we've written a populateVoiceList() function. We first invoke {{domxref("SpeechSynthesis.getVoices()")}}, which returns a list of all the available voices, represented by {{domxref("SpeechSynthesisVoice")}} objects. We then loop through this list — for each voice we create an {{htmlelement("option")}} element, set its text content to display the name of the voice (grabbed from {{domxref("SpeechSynthesisVoice.name")}}), the language of the voice (grabbed from {{domxref("SpeechSynthesisVoice.lang")}}), and -- DEFAULT if the voice is the default voice for the synthesis engine (checked by seeing if {{domxref("SpeechSynthesisVoice.default")}} returns true.)

- -

We also create data- attributes for each option, containing the name and language of the associated voice, so we can grab them easily later on, and then append the options as children of the select.

- -
function populateVoiceList() {
-  voices = synth.getVoices();
-
-  for(i = 0; i < voices.length ; i++) {
-    var option = document.createElement('option');
-    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
-
-    if(voices[i].default) {
-      option.textContent += ' -- DEFAULT';
-    }
-
-    option.setAttribute('data-lang', voices[i].lang);
-    option.setAttribute('data-name', voices[i].name);
-    voiceSelect.appendChild(option);
-  }
-}
- -

When we come to run the function, we do the following. This is because Firefox doesn't support {{domxref("SpeechSynthesis.onvoiceschanged")}}, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the if statement seen below.

- -
populateVoiceList();
-if (speechSynthesis.onvoiceschanged !== undefined) {
-  speechSynthesis.onvoiceschanged = populateVoiceList;
-}
- -

Speaking the entered text

- -

Next, we create an event handler to start speaking the text entered into the text field. We are using an onsubmit handler on the form so that the action happens when Enter/Return is pressed. We first create a new {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} instance using its constructor — this is passed the text input's value as a parameter.

- -

Next, we need to figure out which voice to use. We use the {{domxref("HTMLSelectElement")}} selectedOptions property to return the currently selected {{htmlelement("option")}} element. We then use this element's data-name attribute, finding the {{domxref("SpeechSynthesisVoice")}} object whose name matches this attribute's value. We set the matching voice object to be the value of the {{domxref("SpeechSynthesisUtterance.voice")}} property.

- -

Finally, we set the {{domxref("SpeechSynthesisUtterance.pitch")}} and {{domxref("SpeechSynthesisUtterance.rate")}} to the values of the relevant range form elements. Then, with all necessary preparations made, we start the utterance being spoken by invoking {{domxref("SpeechSynthesis.speak()")}}, passing it the {{domxref("SpeechSynthesisUtterance")}} instance as a parameter.

- -
inputForm.onsubmit = function(event) {
-  event.preventDefault();
-
-  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
-  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
-  for(i = 0; i < voices.length ; i++) {
-    if(voices[i].name === selectedOption) {
-      utterThis.voice = voices[i];
-    }
-  }
-  utterThis.pitch = pitch.value;
-  utterThis.rate = rate.value;
-  synth.speak(utterThis);
- -

In the final part of the handler, we include an {{domxref("SpeechSynthesisUtterance.onpause")}} handler to demonstrate how {{domxref("SpeechSynthesisEvent")}} can be put to good use. When {{domxref("SpeechSynthesis.pause()")}} is invoked, this returns a message reporting the character number and name that the speech was paused at.

- -
   utterThis.onpause = function(event) {
-    var char = event.utterance.text.charAt(event.charIndex);
-    console.log('Speech paused at character ' + event.charIndex + ' of "' +
-    event.utterance.text + '", which is "' + char + '".');
-  }
- -

Finally, we call blur() on the text input. This is mainly to hide the keyboard on Firefox OS.

- -
  inputTxt.blur();
-}
- -

Updating the displayed pitch and rate values

- -

The last part of the code simply updates the pitch/rate values displayed in the UI, each time the slider positions are moved.

- -
pitch.onchange = function() {
-  pitchValue.textContent = pitch.value;
-}
-
-rate.onchange = function() {
-  rateValue.textContent = rate.value;
-}
diff --git a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md new file mode 100644 index 0000000000..e826557e2a --- /dev/null +++ b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md @@ -0,0 +1,306 @@ +--- +title: Utiliser l'API Web Speech +slug: Web/API/Web_Speech_API/Using_the_Web_Speech_API +tags: + - API + - API Web Speech + - Guide + - Tutoriel + - Utilisation + - reconnaissance + - synthèse + - vocale +translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API +--- +

L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissance vocale, et la synthèse vocale (aussi appelée "text to speech", ou tts) — qui ouvrent de nouvelles possibiités d'accessibilité, et de mécanismes de contrôle. Cet article apporte une simple introduction à ces deux domaines, accompagnée de démonstrations.

+ +

Reconnaissance vocale

+ +

La reconnaissance vocale implique de recevoir de la voix à travers un dispositif de capture du son, tel qu'un microphone, qui est ensuite vérifiée par un service de reconnaissance vocale utilisant une "grammaire" (le vocabulaire que vous voulez faire reconnaître par une application donnée). Quand un mot ou une phrase sont reconnus avec succès, ils sont retournés comme résultat (ou une liste de résultats) sous la forme d'une chaîne de caractères, et d'autres actions peuvent être initiées à la suite de ce résultat.

+ +

L'API Web Speech a une interface principale de contrôle  — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale  — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc.

+ +
+

Note : Sur certains navigateurs, comme Chrome, utiliser la reconnaissance vocale sur une page web implique de disposer d'un moteur de reconnaissance basé sur un serveur. Votre flux audio est envoyé à un service web pour traitement, le moteur ne fonctionnera donc pas hors ligne.

+
+ +

Demo

+ +

Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée  Speech color changer. Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie.

+ +

Pour lancer la demo, vous pouvez cloner (ou directement télécharger) le dépôt Github dont elle fait partie, ouvrir le fichier d'index HTML dans un navigateur pour ordinateur de bureau le supportant comme Chrome, ou naviguer vers l'URL de démonstration live, sur un navigateur pour mobile le supportant comme Chrome.

+ +

Support des navigateurs

+ +

Le support de la reconnaissance vocale via l'API Web Speech est actuellement limité à Chrome pour ordinateur de bureau et pour mobiles sur Android — Chrome le supporte depuis la version 33 mais avec des interfaces préfixées spécifiques, donc vous avez besoin d'inclure des versions d'interfaces préfixées définies, comme : webkitSpeechRecognition.

+ +

HTML and CSS

+ +

The HTML and CSS for the app is really trivial. We simply have a title, instructions paragraph, and a div into which we output diagnostic messages.

+ +
<h1>Speech color changer</h1>
+<p>Tap/click then say a color to change the background color of the app.</p>
+<div>
+  <p class="output"><em>...diagnostic messages</em></p>
+</div>
+ +

The CSS provides a very simple responsive styling so that it looks ok across devices.

+ +

JavaScript

+ +

Let's look at the JavaScript in a bit more detail.

+ +

Chrome support

+ +

As mentioned earlier, Chrome currently supports speech recognition with prefixed properties, therefore at the start of our code we include these lines to feed the right objects to Chrome, and any future implementations that might support the features without a prefix:

+ +
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
+ +

The grammar

+ +

The next part of our code defines the grammar we want our app to recognise. The following variable is defined to hold our grammar:

+ +
var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
+var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
+ +

The grammar format used is JSpeech Grammar Format (JSGF) — you can find a lot more about it at the previous link to its spec. However, for now let's just run through it quickly:

+ + + +

Plugging the grammar into our speech recognition

+ +

The next thing to do is define a speech recogntion instance to control the recognition for our application. This is done using the {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} constructor. We also create a new speech grammar list to contain our grammar, using the {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} constructor.

+ +
var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+ +

We add our grammar to the list using the {{domxref("SpeechGrammarList.addFromString()")}} method. This accepts as parameters the string we want to add, plus optionally a weight value that specifies the importance of this grammar in relation of other grammars available in the list (can be from 0 to 1 inclusive.) The added grammar is available in the list as a {{domxref("SpeechGrammar")}} object instance.

+ +
speechRecognitionList.addFromString(grammar, 1);
+ +

We then add the {{domxref("SpeechGrammarList")}} to the speech recognition instance by setting it to the value of the {{domxref("SpeechRecognition.grammars")}} property. We also set a few other properties of the recognition instance before we move on:

+ + + +
recognition.grammars = speechRecognitionList;
+recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+ +

Starting the speech recognition

+ +

After grabbing references to the output {{htmlelement("div")}} and the HTML element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start. This is achieved by calling {{domxref("SpeechRecognition.start()")}}. The forEach() method is used to output colored indicators showing what colors to try saying.

+ +
var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+var hints = document.querySelector('.hints');
+
+var colorHTML= '';
+colors.forEach(function(v, i, a){
+  console.log(v, i);
+  colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
+});
+hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+ +

Receiving and handling results

+ +

Once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the SpeechRecognition event handlers list.) The most common one you'll probably use is {{domxref("SpeechRecognition.onresult")}}, which is fired once a successful result is received:

+ +
recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color + '.';
+  bg.style.backgroundColor = color;
+  console.log('Confidence: ' + event.results[0][0].confidence);
+}
+ +

The second line here is a bit complex-looking, so let's explain it step by step. The {{domxref("SpeechRecognitionEvent.results")}} property returns a {{domxref("SpeechRecognitionResultList")}} object containing {{domxref("SpeechRecognitionResult")}} objects. It has a getter so it can be accessed like an array — so the first [0] returns the SpeechRecognitionResult at position 0. Each SpeechRecognitionResult object contains {{domxref("SpeechRecognitionAlternative")}} objects that contain individual recognised words. These also have getters so they can be accessed like arrays — the second [0] therefore returns the SpeechRecognitionAlternative at position 0. We then return its transcript property to get a string containing the individual recognised result as a string, set the background color to that color, and report the color recognised as a diagnostic message in the UI.

+ +

We also use a {{domxref("SpeechRecognition.onspeechend")}} handler to stop the speech recognition service from running (using {{domxref("SpeechRecognition.stop()")}}) once a single word has been recognised and it has finished being spoken:

+ +
recognition.onspeechend = function() {
+  recognition.stop();
+}
+ +

Handling errors and unrecognised speech

+ +

The last two handlers are there to handle cases where speech was recognised that wasn't in the defined grammar, or an error occured. {{domxref("SpeechRecognition.onnomatch")}} seems to be supposed to handle the first case mentioned, although note that at the moment it doesn't seem to fire correctly; it just returns whatever was recognised anyway:

+ +
recognition.onnomatch = function(event) {
+  diagnostic.textContent = 'I didnt recognise that color.';
+}
+ +

{{domxref("SpeechRecognition.onerror")}} handles cases where there is an actual error with the recognition successfully — the {{domxref("SpeechRecognitionError.error")}} property contains the actual error returned:

+ +
recognition.onerror = function(event) {
+  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
+}
+ +

Speech synthesis

+ +

Speech synthesis (aka text-to-speech, or tts) involves receiving synthesising text contained within an app to speech, and playing it out of a device's speaker or audio output connection.

+ +

The Web Speech API has a main controller interface for this — {{domxref("SpeechSynthesis")}} — plus a number of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. Again, most OSes have some kind of speech synthesis system, which will be used by the API for this task as available.

+ +

Demo

+ +

To show simple usage of Web speech synthesis, we've provided a demo called Speak easy synthesis. This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press Enter/Return to hear it spoken.

+ +

To run the demo, you can clone (or directly download) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the live demo URL in a supporting mobile browser like Chrome, or Firefox OS.

+ +

Browser support

+ +

Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following:

+ + + +

HTML and CSS

+ +

The HTML and CSS are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. The {{htmlelement("select")}} element is initially empty, but is populated with {{htmlelement("option")}}s via JavaScript (see later on.)

+ +
<h1>Speech synthesiser</h1>
+
+<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
+
+<form>
+  <input type="text" class="txt">
+  <div>
+    <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
+    <div class="rate-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <div>
+    <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
+    <div class="pitch-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <select>
+
+  </select>
+</form>
+ +

JavaScript

+ +

Let's investigate the JavaScript that powers this app.

+ +

Setting variables

+ +

First of all, we capture references to all the DOM elements involved in the UI, but more interestingly, we capture a reference to {{domxref("Window.speechSynthesis")}}. This is API's entry point — it returns an instance of {{domxref("SpeechSynthesis")}}, the controller interface for web speech synthesis.

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+
+ +

Populating the select element

+ +

To populate the {{htmlelement("select")}} element with the different voice options the device has available, we've written a populateVoiceList() function. We first invoke {{domxref("SpeechSynthesis.getVoices()")}}, which returns a list of all the available voices, represented by {{domxref("SpeechSynthesisVoice")}} objects. We then loop through this list — for each voice we create an {{htmlelement("option")}} element, set its text content to display the name of the voice (grabbed from {{domxref("SpeechSynthesisVoice.name")}}), the language of the voice (grabbed from {{domxref("SpeechSynthesisVoice.lang")}}), and -- DEFAULT if the voice is the default voice for the synthesis engine (checked by seeing if {{domxref("SpeechSynthesisVoice.default")}} returns true.)

+ +

We also create data- attributes for each option, containing the name and language of the associated voice, so we can grab them easily later on, and then append the options as children of the select.

+ +
function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i < voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+ +

When we come to run the function, we do the following. This is because Firefox doesn't support {{domxref("SpeechSynthesis.onvoiceschanged")}}, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the if statement seen below.

+ +
populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+ +

Speaking the entered text

+ +

Next, we create an event handler to start speaking the text entered into the text field. We are using an onsubmit handler on the form so that the action happens when Enter/Return is pressed. We first create a new {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} instance using its constructor — this is passed the text input's value as a parameter.

+ +

Next, we need to figure out which voice to use. We use the {{domxref("HTMLSelectElement")}} selectedOptions property to return the currently selected {{htmlelement("option")}} element. We then use this element's data-name attribute, finding the {{domxref("SpeechSynthesisVoice")}} object whose name matches this attribute's value. We set the matching voice object to be the value of the {{domxref("SpeechSynthesisUtterance.voice")}} property.

+ +

Finally, we set the {{domxref("SpeechSynthesisUtterance.pitch")}} and {{domxref("SpeechSynthesisUtterance.rate")}} to the values of the relevant range form elements. Then, with all necessary preparations made, we start the utterance being spoken by invoking {{domxref("SpeechSynthesis.speak()")}}, passing it the {{domxref("SpeechSynthesisUtterance")}} instance as a parameter.

+ +
inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i < voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);
+ +

In the final part of the handler, we include an {{domxref("SpeechSynthesisUtterance.onpause")}} handler to demonstrate how {{domxref("SpeechSynthesisEvent")}} can be put to good use. When {{domxref("SpeechSynthesis.pause()")}} is invoked, this returns a message reporting the character number and name that the speech was paused at.

+ +
   utterThis.onpause = function(event) {
+    var char = event.utterance.text.charAt(event.charIndex);
+    console.log('Speech paused at character ' + event.charIndex + ' of "' +
+    event.utterance.text + '", which is "' + char + '".');
+  }
+ +

Finally, we call blur() on the text input. This is mainly to hide the keyboard on Firefox OS.

+ +
  inputTxt.blur();
+}
+ +

Updating the displayed pitch and rate values

+ +

The last part of the code simply updates the pitch/rate values displayed in the UI, each time the slider positions are moved.

+ +
pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+}
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+}
diff --git a/files/fr/web/api/web_storage_api/index.html b/files/fr/web/api/web_storage_api/index.html deleted file mode 100644 index bae54c054c..0000000000 --- a/files/fr/web/api/web_storage_api/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Web Storage API -slug: Web/API/Web_Storage_API -tags: - - API - - Reference - - Storage - - Web Storage - - localStorage - - sessionStorage -translation_of: Web/API/Web_Storage_API ---- -

{{DefaultAPISidebar("Web Storage API")}}

- -

L'API Web Storage fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies.

- -

Web Storage, concepts et utilisations

- -

Les deux mécanismes au sein du web storage sont les suivantes:

- - - -

Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet Window implemente le WindowLocalStorage et l'object WindowSessionStorage, dont les propriétés localStorage et sessionStorage dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}},  à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément.

- -
-

Note : À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web.

-
- -
-

Note : L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a désactivé les cookies tierce-partie (Firefox a adopté ce comportement à partir de la version 43 et suivantes.)

-
- -
-

Note: Le Web Storage n'est pas identique au mozStorage (interfaces XPCOM de Mozilla vers SQLite) ou l'API Session store (un utilitaire de stockage XPCOM utilisable par des extensions).

-
- -

Web Storage interfaces

- -
-
{{domxref("Storage")}}
-
Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés.
-
{{domxref("Window")}}
-
L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement.
-
{{domxref("StorageEvent")}}
-
L'événement storage est déclenché sur l'objet Window du document en cas de changement dans un espace de stockage.
-
- -

Exemples

- -

Pour illustrer une utilisation typique du stockage Web, nous avons créé un exemple simple, appelé de manière imaginative Web Storage Demo. La landing page fournit des commandes permettant de personnaliser la couleur, la police et l'image décorative. Lorsque vous choisissez différentes options, la page est instantanément mise à jour. De plus, vos choix sont stockés dans localStorage. Ainsi, lorsque vous quittez la page puis la rechargez plus tard, vos choix sont mémorisés. En outre, nous avons fourni une event output page — Si vous chargez cette page dans un autre onglet, puis modifiez vos choix dans la page d'arrivée, vous verrez les informations de stockage mises à jour générées lors du déclenchement de {{event("StorageEvent")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

Window.localStorage

- -

{{Compat("api.Window.localStorage")}}

- -

Window.sessionStorage

- -

{{Compat("api.Window.sessionStorage")}}

- - - -

De nos jours, la plupart des navigateurs prennent en charge une option de confidentialité appelée "mode Incognito" ou "navigation privée", qui permet de s'assurer que la session de navigation privée ne laisse aucune trace après la fermeture du navigateur. Ceci est fondamentalement incompatible avec le stockage Web pour des raisons évidentes. En tant que tels, les éditeurs de navigateurs expérimentent différents scénarios pour gérer cette incompatibilité.

- -

La plupart des navigateurs ont opté pour une stratégie dans laquelle les API de stockage sont toujours disponibles et apparemment totalement fonctionnelles, à la différence près que toutes les données stockées sont effacées après la fermeture du navigateur. Pour ces navigateurs, il existe toujours différentes interprétations de ce qui devrait être fait avec les données stockées existantes (à partir d'une session de navigation normale). Devrait-il être disponible en lecture en mode privé? Certains navigateurs, notamment Safari, ont opté pour une solution dans laquelle le stockage est disponible, vide et doté d'un quota de 0 octets, ce qui rend impossible l'écriture de données.

- -

Les développeurs doivent connaître ces différentes implémentations et en tenir compte lors du développement de sites Web en fonction des API de stockage Web. Pour plus d'informations, consultez cet article de blog du WHATWG qui traite spécifiquement de ce sujet

- -

Voir aussi

- - diff --git a/files/fr/web/api/web_storage_api/index.md b/files/fr/web/api/web_storage_api/index.md new file mode 100644 index 0000000000..bae54c054c --- /dev/null +++ b/files/fr/web/api/web_storage_api/index.md @@ -0,0 +1,96 @@ +--- +title: Web Storage API +slug: Web/API/Web_Storage_API +tags: + - API + - Reference + - Storage + - Web Storage + - localStorage + - sessionStorage +translation_of: Web/API/Web_Storage_API +--- +

{{DefaultAPISidebar("Web Storage API")}}

+ +

L'API Web Storage fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies.

+ +

Web Storage, concepts et utilisations

+ +

Les deux mécanismes au sein du web storage sont les suivantes:

+ + + +

Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet Window implemente le WindowLocalStorage et l'object WindowSessionStorage, dont les propriétés localStorage et sessionStorage dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}},  à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément.

+ +
+

Note : À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web.

+
+ +
+

Note : L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a désactivé les cookies tierce-partie (Firefox a adopté ce comportement à partir de la version 43 et suivantes.)

+
+ +
+

Note: Le Web Storage n'est pas identique au mozStorage (interfaces XPCOM de Mozilla vers SQLite) ou l'API Session store (un utilitaire de stockage XPCOM utilisable par des extensions).

+
+ +

Web Storage interfaces

+ +
+
{{domxref("Storage")}}
+
Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés.
+
{{domxref("Window")}}
+
L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement.
+
{{domxref("StorageEvent")}}
+
L'événement storage est déclenché sur l'objet Window du document en cas de changement dans un espace de stockage.
+
+ +

Exemples

+ +

Pour illustrer une utilisation typique du stockage Web, nous avons créé un exemple simple, appelé de manière imaginative Web Storage Demo. La landing page fournit des commandes permettant de personnaliser la couleur, la police et l'image décorative. Lorsque vous choisissez différentes options, la page est instantanément mise à jour. De plus, vos choix sont stockés dans localStorage. Ainsi, lorsque vous quittez la page puis la rechargez plus tard, vos choix sont mémorisés. En outre, nous avons fourni une event output page — Si vous chargez cette page dans un autre onglet, puis modifiez vos choix dans la page d'arrivée, vous verrez les informations de stockage mises à jour générées lors du déclenchement de {{event("StorageEvent")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

Window.localStorage

+ +

{{Compat("api.Window.localStorage")}}

+ +

Window.sessionStorage

+ +

{{Compat("api.Window.sessionStorage")}}

+ + + +

De nos jours, la plupart des navigateurs prennent en charge une option de confidentialité appelée "mode Incognito" ou "navigation privée", qui permet de s'assurer que la session de navigation privée ne laisse aucune trace après la fermeture du navigateur. Ceci est fondamentalement incompatible avec le stockage Web pour des raisons évidentes. En tant que tels, les éditeurs de navigateurs expérimentent différents scénarios pour gérer cette incompatibilité.

+ +

La plupart des navigateurs ont opté pour une stratégie dans laquelle les API de stockage sont toujours disponibles et apparemment totalement fonctionnelles, à la différence près que toutes les données stockées sont effacées après la fermeture du navigateur. Pour ces navigateurs, il existe toujours différentes interprétations de ce qui devrait être fait avec les données stockées existantes (à partir d'une session de navigation normale). Devrait-il être disponible en lecture en mode privé? Certains navigateurs, notamment Safari, ont opté pour une solution dans laquelle le stockage est disponible, vide et doté d'un quota de 0 octets, ce qui rend impossible l'écriture de données.

+ +

Les développeurs doivent connaître ces différentes implémentations et en tenir compte lors du développement de sites Web en fonction des API de stockage Web. Pour plus d'informations, consultez cet article de blog du WHATWG qui traite spécifiquement de ce sujet

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html deleted file mode 100644 index 96ce992c18..0000000000 --- a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Utiliser l'API Web Storage -slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API -tags: - - API - - Guide - - Stockage - - Stockage Web - - localStorage -translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API ---- -

L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation.

- -

Concepts de base

- -

Les objets de stockages sont de simples magasins clé-valeur, similaires aux objets, mais restant intacts après des chargements de page. La clé peut être une chaîne de caractères ou des entiers, mais la valeur sera toujours une chaîne. Vous pouvez accéder à ces valeurs comme pour un objet ou avec les méthodes getItem() et setItem(). Les trois lignes suivantes vont enregistrer la couleur de la même façon :

- -
localStorage.colorSetting = '#a4509b';
-localStorage['colorSetting'] = '#a4509b';
-localStorage.setItem('colorSetting', '#a4509b');
-
- -
-

Note : Il est recommandé d'utiliser l'API "Web Storage" (setItem, getItem, removeItem, key, length) pour prévenir les embûches associées à l'utilisation d'objets capable de stocker des couples clé-valeur.

-
- -

Les deux principaux mécanismes internes du Stockage Web sont :

- - - -

Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}}  (plus précisément, dans les navigateurs web le supportant, l'objet Window  implémente les objets WindowLocalStorage et WindowSessionStorage, sur lesquels les propriétés localStorage et sessionStorage se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour sessionStorage et localStorage, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément.

- -

Donc, par exemple, un appel initial de localStorage sur un document va retourner un objet {{domxref("Storage")}} ; un appel de sessionStorage sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément.

- -

Détection de la fonction localStorage

- -

Pour être capable d'utiliser localStorage, nous devons d'abord vérifier qu'il est supporté et disponible dans la session de navigation actuelle.

- -

Test du support et disponibilité

- -

Les navigateurs qui supportent localStorage ont sur l'objet windows une propriété nommée localStorage. Cependant, pour différentes raisons, la vérification seule de l'existnce de cette propriété peut provoquer des erreurs. .Son absence n'est pas non plus une garantie de son indisponibilité, certains navigateurs offrent un paramètre pour désactiver localStorage. Donc un navigateur peut supporter localStorage, mais peut ne pas le rendre disponible aux scripts de la page. Un exemple de cela est Safari, qui en mode de navigation privée fournit un objet localStorage vide dont le quota est nul, le rendant inutilisable. Notre fonction de détection doit prendre en compte ces scénarios.

- -

Voici une fonction qui va détecter que localStorage est supporté mais aussi disponible:

- -
function storageAvailable(type) {
-    try {
-        var storage = window[type],
-            x = '__storage_test__';
-        storage.setItem(x, x);
-        storage.removeItem(x);
-        return true;
-    }
-    catch(e) {
-        return e instanceof DOMException && (
-            // everything except Firefox
-            e.code === 22 ||
-            // Firefox
-            e.code === 1014 ||
-            // test name field too, because code might not be present
-            // everything except Firefox
-            e.name === 'QuotaExceededError' ||
-            // Firefox
-            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
-            // acknowledge QuotaExceededError only if there's something already stored
-            storage.length !== 0;
-    }
-}
- -

Et voici comment l'utiliser :

- -
if (storageAvailable('localStorage')) {
-	// Nous pouvons utiliser localStorage
-}
-else {
-	// Malheureusement, localStorage n'est pas disponible
-}
- -

Au lieu de cela, vous pouvez tester la disponibilité de sessionStorage en appelant storageAvailable('sessionStorage'). 

- -

Vous pouvez retrouver ici une brève histoire de la détection de localStorage.

- -

Un exemple simple

- -

Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé Web Storage Demo. La page de lancement fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:

- -

- -

Quand vous choisissez une option différente, la page est mise à jour instantanément; de plus, vos choix sont stockés avec localStorage, donc quand vous quitterez la page et la rechargerez plus tard, vos choix auront été mémorisés.

- -

Nous avons aussi fournit une page pour l'événement émis - Si vous chargez cette page dans un autre onglet, puis faite les changements de votre choix sur la page de démarrage, vous allez voir une information liée à l'événement {{domxref("StorageEvent")}} qui a été lancé.

- -

- -
-

Note : En plus de l'affichage en temps réel des pages en utilisant les liens ci-dessus, vous pouvez aussi regarder le code-source.

-
- -

Tester si le stockage a déjà été rempli

- -

Pour démarrer avec main.js, nous allons tester que l'objet de stockage a bien été rempli (c-à-d, que l'on a déjà accédé à la page):

- -
if(!localStorage.getItem('bgcolor')) {
-  populateStorage();
-} else {
-  setStyles();
-}
- -

La méthode {{domxref("Storage.getItem()")}} est utilisée pour obtenir les données de l'élément depuis le stockage ; dans ce cas nous testons l'existence de l'élément bgcolor; si il n'existe pas nous lançons populateStorage() pour ajouter des valeurs personnalisées dans le stockage. Si il y a déjà des valeurs ici, nous lançons setStyles() pour mettre à jour le style de la page avec les valeurs stockées.

- -

Note: Vous pouvez aussi utiliser {{domxref("Storage.length")}} pour tester si l'objet de stockage est vide ou non.

- -

Obtenir les valeurs du stockage

- -

Comme vu ci dessus, les valeurs peuvent être recupérées du stockage en utilisant {{domxref("Storage.getItem()")}}. La méthode prend en argument la clé de l'élément, et retourne la valeur. Par exemple:

- -
function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
-
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
-
-  htmlElem.style.backgroundColor = '#' + currentColor;
-  pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
-}
- -

Ici, les trois premières lignes vont chercher les valeurs dans le stockage local. Puis, nous définissons les valeurs exposées par le formulaire avec ces valeurs, afin qu'elles persistent quand on recharge la page. Enfin, nous mettons à jour le style et l'image de décoration de la page, ainsi nos options de personnalisation reviennent lors du rechargement de la page.

- -

Enregistrer une valeur dans le stockage

- -

{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée,  que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker.

- -
function populateStorage() {
-  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
-  localStorage.setItem('font', document.getElementById('font').value);
-  localStorage.setItem('image', document.getElementById('image').value);
-
-  setStyles();
-}
- -

La fonction populateStorage() définit trois éléments dans le stockage local — la couleur de fond, la police de caractère et le chemin de l'image. Ensuite elle lance la fonction setStyles() pour mettre à jour le style de la page, etc.

- -

Nous avons aussi inclu un handler onchange sur chaque élément du formulaire, ainsi les données et le style sont mis à jour quelque soit la valeur du formulaire qui a changé:

- -
bgcolorForm.onchange = populateStorage;
-fontForm.onchange = populateStorage;
-imageForm.onchange = populateStorage;
- -

Répondre aux changements du stockage avec StorageEvent

- -

L'événement {{event("StorageEvent")}} est lancé dès lors qu'un changement est fait sur l'objet {{domxref("Storage")}}. Cela ne va pas marcher sur la même page qui a provoqué le changement: c'est vraiment un moyen pour que les autres pages du domaine qui utilisent le stockage local puissent se synchroniser avec tous les changements qui ont été fait.

- -

Les pages des autres domaines ne peuvent pas accéder aux mêmes objets de stockage.

- -

Sur la page d'événement (voir events.js) le seul JavaScript est :

- -
window.addEventListener('storage', function(e) {
-  document.querySelector('.my-key').textContent = e.key;
-  document.querySelector('.my-old').textContent = e.oldValue;
-  document.querySelector('.my-new').textContent = e.newValue;
-  document.querySelector('.my-url').textContent = e.url;
-  document.querySelector('.my-storage').textContent = e.storageArea;
-});
- -

Ici nous avons ajouté un event listener à l'objet window qui se lance quand l'objet {{domxref("Storage")}}, associée à l'origine courante, est modifié. Comme vous pouvez le voir ci-dessus, l'objet événement associé à cet événement a de nombreuses propriétés contenant des informations utiles: la clé de la donnée qui a changé, l'ancienne valeur avant le changement, la nouvelle valeur après le changement, l'URL du document qui a changé le stockage et l'objet stockage lui-même.

- -

Supprimer des données

- -

l'API de Stockage Web fournit aussi un couple de méthodes simples pour supprimer des données. Nous ne les utilisons pas dans notre démo, mais elles sont simples à ajouter dans votre projet :

- - - -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}}
- -

Compatibilité des navigateurs

- -

Window.localStorage

- -

{{Compat("api.Window.localStorage")}}

- -

Window.sessionStorage

- -

{{Compat("api.Window.sessionStorage")}}

- -

Tous les navigateurs ont des niveaux de capacité différents pour localStorage et sessionStorage. Voici un détail des capacités de stockage pour différents navigateurs.

- -
-

Note : Depuis iOS 5.1, Safari Mobile stocke les données de localStorage dans le repertoire de cache, qui est parfois sujet à des nettoyages, à la demande de l'OS, typiquement quand l'espace restant est faible.

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md new file mode 100644 index 0000000000..96ce992c18 --- /dev/null +++ b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md @@ -0,0 +1,219 @@ +--- +title: Utiliser l'API Web Storage +slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API +tags: + - API + - Guide + - Stockage + - Stockage Web + - localStorage +translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API +--- +

L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation.

+ +

Concepts de base

+ +

Les objets de stockages sont de simples magasins clé-valeur, similaires aux objets, mais restant intacts après des chargements de page. La clé peut être une chaîne de caractères ou des entiers, mais la valeur sera toujours une chaîne. Vous pouvez accéder à ces valeurs comme pour un objet ou avec les méthodes getItem() et setItem(). Les trois lignes suivantes vont enregistrer la couleur de la même façon :

+ +
localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+
+ +
+

Note : Il est recommandé d'utiliser l'API "Web Storage" (setItem, getItem, removeItem, key, length) pour prévenir les embûches associées à l'utilisation d'objets capable de stocker des couples clé-valeur.

+
+ +

Les deux principaux mécanismes internes du Stockage Web sont :

+ + + +

Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}}  (plus précisément, dans les navigateurs web le supportant, l'objet Window  implémente les objets WindowLocalStorage et WindowSessionStorage, sur lesquels les propriétés localStorage et sessionStorage se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour sessionStorage et localStorage, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément.

+ +

Donc, par exemple, un appel initial de localStorage sur un document va retourner un objet {{domxref("Storage")}} ; un appel de sessionStorage sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément.

+ +

Détection de la fonction localStorage

+ +

Pour être capable d'utiliser localStorage, nous devons d'abord vérifier qu'il est supporté et disponible dans la session de navigation actuelle.

+ +

Test du support et disponibilité

+ +

Les navigateurs qui supportent localStorage ont sur l'objet windows une propriété nommée localStorage. Cependant, pour différentes raisons, la vérification seule de l'existnce de cette propriété peut provoquer des erreurs. .Son absence n'est pas non plus une garantie de son indisponibilité, certains navigateurs offrent un paramètre pour désactiver localStorage. Donc un navigateur peut supporter localStorage, mais peut ne pas le rendre disponible aux scripts de la page. Un exemple de cela est Safari, qui en mode de navigation privée fournit un objet localStorage vide dont le quota est nul, le rendant inutilisable. Notre fonction de détection doit prendre en compte ces scénarios.

+ +

Voici une fonction qui va détecter que localStorage est supporté mais aussi disponible:

+ +
function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException && (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}
+ +

Et voici comment l'utiliser :

+ +
if (storageAvailable('localStorage')) {
+	// Nous pouvons utiliser localStorage
+}
+else {
+	// Malheureusement, localStorage n'est pas disponible
+}
+ +

Au lieu de cela, vous pouvez tester la disponibilité de sessionStorage en appelant storageAvailable('sessionStorage'). 

+ +

Vous pouvez retrouver ici une brève histoire de la détection de localStorage.

+ +

Un exemple simple

+ +

Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé Web Storage Demo. La page de lancement fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:

+ +

+ +

Quand vous choisissez une option différente, la page est mise à jour instantanément; de plus, vos choix sont stockés avec localStorage, donc quand vous quitterez la page et la rechargerez plus tard, vos choix auront été mémorisés.

+ +

Nous avons aussi fournit une page pour l'événement émis - Si vous chargez cette page dans un autre onglet, puis faite les changements de votre choix sur la page de démarrage, vous allez voir une information liée à l'événement {{domxref("StorageEvent")}} qui a été lancé.

+ +

+ +
+

Note : En plus de l'affichage en temps réel des pages en utilisant les liens ci-dessus, vous pouvez aussi regarder le code-source.

+
+ +

Tester si le stockage a déjà été rempli

+ +

Pour démarrer avec main.js, nous allons tester que l'objet de stockage a bien été rempli (c-à-d, que l'on a déjà accédé à la page):

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+ +

La méthode {{domxref("Storage.getItem()")}} est utilisée pour obtenir les données de l'élément depuis le stockage ; dans ce cas nous testons l'existence de l'élément bgcolor; si il n'existe pas nous lançons populateStorage() pour ajouter des valeurs personnalisées dans le stockage. Si il y a déjà des valeurs ici, nous lançons setStyles() pour mettre à jour le style de la page avec les valeurs stockées.

+ +

Note: Vous pouvez aussi utiliser {{domxref("Storage.length")}} pour tester si l'objet de stockage est vide ou non.

+ +

Obtenir les valeurs du stockage

+ +

Comme vu ci dessus, les valeurs peuvent être recupérées du stockage en utilisant {{domxref("Storage.getItem()")}}. La méthode prend en argument la clé de l'élément, et retourne la valeur. Par exemple:

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +

Ici, les trois premières lignes vont chercher les valeurs dans le stockage local. Puis, nous définissons les valeurs exposées par le formulaire avec ces valeurs, afin qu'elles persistent quand on recharge la page. Enfin, nous mettons à jour le style et l'image de décoration de la page, ainsi nos options de personnalisation reviennent lors du rechargement de la page.

+ +

Enregistrer une valeur dans le stockage

+ +

{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée,  que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+ +

La fonction populateStorage() définit trois éléments dans le stockage local — la couleur de fond, la police de caractère et le chemin de l'image. Ensuite elle lance la fonction setStyles() pour mettre à jour le style de la page, etc.

+ +

Nous avons aussi inclu un handler onchange sur chaque élément du formulaire, ainsi les données et le style sont mis à jour quelque soit la valeur du formulaire qui a changé:

+ +
bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;
+ +

Répondre aux changements du stockage avec StorageEvent

+ +

L'événement {{event("StorageEvent")}} est lancé dès lors qu'un changement est fait sur l'objet {{domxref("Storage")}}. Cela ne va pas marcher sur la même page qui a provoqué le changement: c'est vraiment un moyen pour que les autres pages du domaine qui utilisent le stockage local puissent se synchroniser avec tous les changements qui ont été fait.

+ +

Les pages des autres domaines ne peuvent pas accéder aux mêmes objets de stockage.

+ +

Sur la page d'événement (voir events.js) le seul JavaScript est :

+ +
window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = e.storageArea;
+});
+ +

Ici nous avons ajouté un event listener à l'objet window qui se lance quand l'objet {{domxref("Storage")}}, associée à l'origine courante, est modifié. Comme vous pouvez le voir ci-dessus, l'objet événement associé à cet événement a de nombreuses propriétés contenant des informations utiles: la clé de la donnée qui a changé, l'ancienne valeur avant le changement, la nouvelle valeur après le changement, l'URL du document qui a changé le stockage et l'objet stockage lui-même.

+ +

Supprimer des données

+ +

l'API de Stockage Web fournit aussi un couple de méthodes simples pour supprimer des données. Nous ne les utilisons pas dans notre démo, mais elles sont simples à ajouter dans votre projet :

+ + + +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}}
+ +

Compatibilité des navigateurs

+ +

Window.localStorage

+ +

{{Compat("api.Window.localStorage")}}

+ +

Window.sessionStorage

+ +

{{Compat("api.Window.sessionStorage")}}

+ +

Tous les navigateurs ont des niveaux de capacité différents pour localStorage et sessionStorage. Voici un détail des capacités de stockage pour différents navigateurs.

+ +
+

Note : Depuis iOS 5.1, Safari Mobile stocke les données de localStorage dans le repertoire de cache, qui est parfois sujet à des nettoyages, à la demande de l'OS, typiquement quand l'espace restant est faible.

+
+ +

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 deleted file mode 100644 index bcd5c59b3c..0000000000 --- a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Fonctions et classes disponibles dans les Web Workers -slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers -translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers -original_slug: Web/API/Worker/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/functions_and_classes_available_to_workers/index.md b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md new file mode 100644 index 0000000000..bcd5c59b3c --- /dev/null +++ b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md @@ -0,0 +1,241 @@ +--- +title: Fonctions et classes disponibles dans les Web Workers +slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers +translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers +original_slug: Web/API/Worker/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/index.html b/files/fr/web/api/web_workers_api/index.html deleted file mode 100644 index 57afda034b..0000000000 --- a/files/fr/web/api/web_workers_api/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: API Web Workers -slug: Web/API/Web_Workers_API -tags: - - API - - DOM -translation_of: Web/API/Web_Workers_API ---- -
{{DefaultAPISidebar("Web Workers API")}}
- -

Les Web Workers sont un mécanisme grâce auquel les instructions d'un script peuvent être exécutés dans un thread en arrière-plan séparé du thread d'exécution principal d'une application web. Cela a pour avantage qu'un traitement laborieux peut être réalisé dans un thread séparé, permettant au thread principal (généralement l'interface utilisateur) de fonctionner sans blocage ni ralentissement.

- -

Concepts et utilisation des Web Workers

- -

Un worker est un objet créé en utilisant un constructeur (e.g. {{domxref("Worker.Worker", "Worker()")}}) qui exécute un fichier JavaScript nommé — ce fichier contient le code que doit exécuter le thread du worker; les workers s'exécutent dans un autre contexte global qui est différent du contexte actuel {{domxref("window")}}. Ce contexte est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} dans le cas des workers dédiés (workers standards utilisés par un script unique; les workers partagés utilisent {{domxref("SharedWorkerGlobalScope")}}).

- -

Vous pouvez exécuter quelque code que ce soit à l'intérieur du thread du worker, avec quelques exceptions cependant. Par exemple, vous ne pouvez pas directement manipuler le DOM à partir d'un worker, ou utiliser des méthodes et des propriétés par défaut de l'objet {{domxref("window")}}. Mais vous pouvez utiliser un grand nombre des éléments disponibles sous window, comprenant les WebSockets, et les mécanismes de stockage de données tels qu'IndexedDB et l'API Data Store spécifique à Firefox OS. Consultez Les fonctions et classes accessibles aux workers pour plus de détails.

- -

Les données sont envoyées entre les workers et le thread principal au moyen d'un sytème de messages — des deux côtés les messages sont envoyés en utilisant la méthode postMessage(), et la réponse leur parvient au moyen du gestionnaire d'événement onmessage (le message est contenu dans l'attribut data de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées.

- -

Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente.  De plus, les workers peuvent utiliser XMLHttpRequest pour les E/S réseau, à l'exception que les attributs responseXML et channel de XMLHttpRequest retournent toujours null.

- -

En plus des workers dédiés, il y a d'autres types de worker :

- - - -
-

Note : Selon les Spécifications de Web Worker, les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42.

-
- -

Les interfaces Web Worker

- -
-
{{domxref("AbstractWorker")}}
-
Propriétés et méthodes abstraites communes à tous les types de workers (i.e. {{domxref("Worker")}} ou {{domxref("SharedWorker")}}).
-
{{domxref("Worker")}}
-
Représente le thread d'un worker en cours d'exécution, vous permettant de passer des messages au code du worker en cours d'exécution.
-
{{DOMxRef("WorkerLocation")}}
-
Défini la localisation du scripte exécuté par le Worker.
-
{{domxref("SharedWorker")}}
-
Représente un type spécifique de worker qui peut être accédé à partir de plusieurs contextes de navigation, à savoir plusieurs fenêtres, iframes ou même workers.
-
{{domxref("WorkerGlobalScope")}}
-
Représente le contexte générique de tout worker (il joue le même rôle que {{domxref("Window")}} pour un contenu web normal). Les différents types de worker ont un contexte d'objets qui hérite de cette interface et ajoute des fonctionnalités supplémentaires.
-
{{domxref("DedicatedWorkerGlobalScope")}}
-
Représente le contexte d'un worker dédié, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.
-
{{domxref("SharedWorkerGlobalScope")}}
-
Représente le contexte d'un worker partagé, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.
-
{{domxref("WorkerNavigator")}}
-
Représente l'identité et l'état de l'agent utilisateur (le client):
-
- -

Exemples

- -

Nous avons créé deux simples démos pour illustrer des usages basiques :

- - - -

Vous pouvez obtenir plus d'informations sur le fonctionnement de ces démos dans notre guide d'utilisation des web workers.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "workers.html#workers", "Web Workers")}}{{Spec2("HTML WHATWG")}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/api/web_workers_api/index.md b/files/fr/web/api/web_workers_api/index.md new file mode 100644 index 0000000000..57afda034b --- /dev/null +++ b/files/fr/web/api/web_workers_api/index.md @@ -0,0 +1,94 @@ +--- +title: API Web Workers +slug: Web/API/Web_Workers_API +tags: + - API + - DOM +translation_of: Web/API/Web_Workers_API +--- +
{{DefaultAPISidebar("Web Workers API")}}
+ +

Les Web Workers sont un mécanisme grâce auquel les instructions d'un script peuvent être exécutés dans un thread en arrière-plan séparé du thread d'exécution principal d'une application web. Cela a pour avantage qu'un traitement laborieux peut être réalisé dans un thread séparé, permettant au thread principal (généralement l'interface utilisateur) de fonctionner sans blocage ni ralentissement.

+ +

Concepts et utilisation des Web Workers

+ +

Un worker est un objet créé en utilisant un constructeur (e.g. {{domxref("Worker.Worker", "Worker()")}}) qui exécute un fichier JavaScript nommé — ce fichier contient le code que doit exécuter le thread du worker; les workers s'exécutent dans un autre contexte global qui est différent du contexte actuel {{domxref("window")}}. Ce contexte est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} dans le cas des workers dédiés (workers standards utilisés par un script unique; les workers partagés utilisent {{domxref("SharedWorkerGlobalScope")}}).

+ +

Vous pouvez exécuter quelque code que ce soit à l'intérieur du thread du worker, avec quelques exceptions cependant. Par exemple, vous ne pouvez pas directement manipuler le DOM à partir d'un worker, ou utiliser des méthodes et des propriétés par défaut de l'objet {{domxref("window")}}. Mais vous pouvez utiliser un grand nombre des éléments disponibles sous window, comprenant les WebSockets, et les mécanismes de stockage de données tels qu'IndexedDB et l'API Data Store spécifique à Firefox OS. Consultez Les fonctions et classes accessibles aux workers pour plus de détails.

+ +

Les données sont envoyées entre les workers et le thread principal au moyen d'un sytème de messages — des deux côtés les messages sont envoyés en utilisant la méthode postMessage(), et la réponse leur parvient au moyen du gestionnaire d'événement onmessage (le message est contenu dans l'attribut data de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées.

+ +

Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente.  De plus, les workers peuvent utiliser XMLHttpRequest pour les E/S réseau, à l'exception que les attributs responseXML et channel de XMLHttpRequest retournent toujours null.

+ +

En plus des workers dédiés, il y a d'autres types de worker :

+ + + +
+

Note : Selon les Spécifications de Web Worker, les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42.

+
+ +

Les interfaces Web Worker

+ +
+
{{domxref("AbstractWorker")}}
+
Propriétés et méthodes abstraites communes à tous les types de workers (i.e. {{domxref("Worker")}} ou {{domxref("SharedWorker")}}).
+
{{domxref("Worker")}}
+
Représente le thread d'un worker en cours d'exécution, vous permettant de passer des messages au code du worker en cours d'exécution.
+
{{DOMxRef("WorkerLocation")}}
+
Défini la localisation du scripte exécuté par le Worker.
+
{{domxref("SharedWorker")}}
+
Représente un type spécifique de worker qui peut être accédé à partir de plusieurs contextes de navigation, à savoir plusieurs fenêtres, iframes ou même workers.
+
{{domxref("WorkerGlobalScope")}}
+
Représente le contexte générique de tout worker (il joue le même rôle que {{domxref("Window")}} pour un contenu web normal). Les différents types de worker ont un contexte d'objets qui hérite de cette interface et ajoute des fonctionnalités supplémentaires.
+
{{domxref("DedicatedWorkerGlobalScope")}}
+
Représente le contexte d'un worker dédié, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.
+
{{domxref("SharedWorkerGlobalScope")}}
+
Représente le contexte d'un worker partagé, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.
+
{{domxref("WorkerNavigator")}}
+
Représente l'identité et l'état de l'agent utilisateur (le client):
+
+ +

Exemples

+ +

Nous avons créé deux simples démos pour illustrer des usages basiques :

+ + + +

Vous pouvez obtenir plus d'informations sur le fonctionnement de ces démos dans notre guide d'utilisation des web workers.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "workers.html#workers", "Web Workers")}}{{Spec2("HTML WHATWG")}}Définition initiale.
+ +

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 deleted file mode 100644 index ff872b99ad..0000000000 --- a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: L’algorithme de clonage structuré -slug: Web/API/Web_Workers_API/Structured_clone_algorithm -translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm -original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure ---- -

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 :

- - - -

Ce qui ne marche pas avec le clonage structuré

- - - -

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/structured_clone_algorithm/index.md b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md new file mode 100644 index 0000000000..ff872b99ad --- /dev/null +++ b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md @@ -0,0 +1,156 @@ +--- +title: L’algorithme de clonage structuré +slug: Web/API/Web_Workers_API/Structured_clone_algorithm +translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm +original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure +--- +

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 :

+ + + +

Ce qui ne marche pas avec le clonage structuré

+ + + +

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 deleted file mode 100644 index dd63df8aa4..0000000000 --- a/files/fr/web/api/web_workers_api/using_web_workers/index.html +++ /dev/null @@ -1,508 +0,0 @@ ---- -title: Utilisation des web workers -slug: Web/API/Web_Workers_API/Using_web_workers -tags: - - Avancé - - Guide - - JavaScript - - Web Workers -translation_of: Web/API/Web_Workers_API/Using_web_workers -original_slug: Web/API/Web_Workers_API/Utilisation_des_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 :

- - - -

Fonctions et interfaces disponibles pour les workers

- -

La plupart des fonctionnalités JavaScript standard peuvent être utilisées dans les web workers, dont :

- - - -

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')}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/web_workers_api/using_web_workers/index.md b/files/fr/web/api/web_workers_api/using_web_workers/index.md new file mode 100644 index 0000000000..dd63df8aa4 --- /dev/null +++ b/files/fr/web/api/web_workers_api/using_web_workers/index.md @@ -0,0 +1,508 @@ +--- +title: Utilisation des web workers +slug: Web/API/Web_Workers_API/Using_web_workers +tags: + - Avancé + - Guide + - JavaScript + - Web Workers +translation_of: Web/API/Web_Workers_API/Using_web_workers +original_slug: Web/API/Web_Workers_API/Utilisation_des_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 :

+ + + +

Fonctions et interfaces disponibles pour les workers

+ +

La plupart des fonctionnalités JavaScript standard peuvent être utilisées dans les web workers, dont :

+ + + +

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

Voir aussi

+ + diff --git a/files/fr/web/api/webgl2renderingcontext/index.html b/files/fr/web/api/webgl2renderingcontext/index.html deleted file mode 100644 index f1233fd66f..0000000000 --- a/files/fr/web/api/webgl2renderingcontext/index.html +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: WebGL2RenderingContext -slug: Web/API/WebGL2RenderingContext -tags: - - API - - Experimental - - Reference - - WebGL - - WebGL2 -translation_of: Web/API/WebGL2RenderingContext ---- -
{{APIRef("WebGL")}} {{SeeCompatTable}}
- -

L'interface WebGL2RenderingContext fournit le contexte de rendu OpenGL ES 3.0 pour la surface de dessin d'un élément HTML {{HTMLElement("canvas")}}.

- -

Pour obtenir un objet de cette interface, appelez {{domxref ("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <canvas>, en fournissant "webgl2" comme argument :

- -
var canevas = document.getElementById('monCanevas');
-var gl = canevas.getContext('webgl2');
-
- -
-

Note : WebGL 2 est une extension de WebGL 1. L'interface WebGL2RenderingContext implémente tous les membres de l'interface {{domxref("WebGLRenderingContext")}}. Certaines méthodes du contexte WebGL 1 peuvent accepter des valeurs supplémentaires lorsqu'elles sont utilisées dans un contexte WebGL 2. Vous trouverez cette information sur les pages de référence WebGL 1.

-
- -

Le didacticiel WebGL contient plus d'informations, d'exemples et de ressources sur la façon de démarrer avec WebGL.

- -

Constantes

- -

Voir la page des constantes WebGL.

- -

Informations d'état

- -
-
{{domxref("WebGL2RenderingContext.getIndexedParameter()")}}
-
Retourne la valeur indexée pour la cible donnée.
-
- -

Tampons

- -
-
{{domxref("WebGL2RenderingContext.bufferData()")}}
-
Initialise et crée le magasin de données de l'objet tampon.
-
{{domxref("WebGL2RenderingContext.bufferSubData()")}}
-
Met à jour un sous-ensemble d'un magasin de données d'un objet tampon.
-
{{domxref("WebGL2RenderingContext.copyBufferSubData()")}}
-
Copie une partie des données d'un tampon vers un autre tampon.
-
{{domxref("WebGL2RenderingContext.getBufferSubData()")}}
-
Lit les données d'un tampon et les écrit dans un {{jsxref ("ArrayBuffer")}} ou un {{jsxref ("SharedArrayBuffer")}}.
-
- -

Tampons d'image

- -
-
{{domxref("WebGL2RenderingContext.blitFramebuffer()")}}
-
Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin.
-
{{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}}
-
Attache une seule couche de texture à un tampon d'image.
-
{{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}}
-
Invalide le contenu des éléments joints dans un tampon d'image.
-
{{domxref("WebGL2RenderingContext.invalidateSubFramebuffer()")}}
-
Invalide le contenu des éléments joints dans un tampon d'image.
-
{{domxref("WebGL2RenderingContext.readBuffer()")}}
-
Sélectionne un tampon de couleur comme source pour les pixels.
-
- -

Tampons de rendu

- -
-
{{domxref("WebGL2RenderingContext.getInternalformatParameter()")}}
-
Retourne des informations sur le support, dépendant de l'implémentation, des formats internes.
-
{{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}}
-
Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser.
-
- -

Textures

- -
-
{{domxref("WebGL2RenderingContext.texStorage2D()")}}
-
Spécifie tous les niveaux d'un stockage de texture bidimensionnelle.
-
{{domxref("WebGL2RenderingContext.texStorage3D()")}}
-
Spécifie tous les niveaux d'une texture tridimensionnelle ou d'une texture de tableau bidimensionnelle.
-
{{domxref("WebGL2RenderingContext.texImage3D()")}}
-
Spécifie une image de texture tridimensionnelle.
-
{{domxref("WebGL2RenderingContext.texSubImage3D()")}}
-
Spécifie un sous-rectangle de la texture 3D en cours.
-
{{domxref("WebGL2RenderingContext.copyTexSubImage3D()")}}
-
Copie des pixels du tampon WebGLFrame en cours dans une sous-image de texture 3D existante.
-
{{domxref("WebGL2RenderingContext.compressedTexImage3D()")}}
-
Spécifie une image de texture tridimensionnelle dans un format compressé.
-
{{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}}
-
Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé.
-
- -

Programmes et shaders

- -
-
{{domxref("WebGL2RenderingContext.getFragDataLocation()")}}
-
Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur.
-
- -

Uniforms et attributs

- -
-
{{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][uif][v]()")}}
-
Méthodes spécifiant les valeurs des variables uniform.
-
{{domxref("WebGL2RenderingContext.uniformMatrix()", "WebGL2RenderingContext.uniformMatrix[234]x[234]fv()")}}
-
Méthodes spécifiant les valeurs matricielles pour les variables uniform.
-
{{domxref("WebGL2RenderingContext.vertexAttribI()", "WebGL2RenderingContext.vertexAttribI4[u]i[v]()")}}
-
Méthodes spécifiant les valeurs entières des attributs de sommet génériques.
-
{{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}}
-
Spécifie les formats et les emplacements des données entières des attributs de sommet dans un tableau d'attributs de sommet.
-
- -

Tampons de dessin

- -
-
{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}
-
Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec {{domxref ("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} et {{domxref("WebGL2RenderingContext.drawElementsInstanced()" , "gl.drawElementsInstanced()")}}.
-
{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}
-
Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments.
-
{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}
-
Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments.
-
{{domxref("WebGL2RenderingContext.drawRangeElements()")}}
-
Affiche des primitives à partir des données d'un tableau dans la plage donnée.
-
{{domxref("WebGL2RenderingContext.drawBuffers()")}}
-
Spécifie une liste de tampons de couleur dans lesquels dessiner.
-
{{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}}
-
Efface les tampons du tampon d'image actuellement lié.
-
- -

Objets requêtes

- -

Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}.

- -
-
{{domxref("WebGL2RenderingContext.createQuery()")}}
-
Crée un nouvel objet {{domxref("WebGLQuery")}}.
-
{{domxref("WebGL2RenderingContext.deleteQuery()")}}
-
Supprime l'objet {{domxref("WebGLQuery")}} donné.
-
{{domxref("WebGL2RenderingContext.isQuery()")}}
-
Retourne true si l'objet donné est un objet {{domxref("WebGLQuery")}} valide.
-
{{domxref("WebGL2RenderingContext.beginQuery()")}}
-
Commence une requête asynchrone.
-
{{domxref("WebGL2RenderingContext.endQuery()")}}
-
Marque la fin d'une requête asynchrone.
-
{{domxref("WebGL2RenderingContext.getQuery()")}}
-
Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée.
-
{{domxref("WebGL2RenderingContext.getQueryParameter()")}}
-
Retourne des informations sur une requête.
-
- -

Objets échantilloneurs

- -
-
{{domxref("WebGL2RenderingContext.createSampler()")}}
-
Crée un nouvel objet {{domxref("WebGLSampler")}}.
-
{{domxref("WebGL2RenderingContext.deleteSampler()")}}
-
Supprime l'objet {{domxref("WebGLSampler")}} donné.
-
{{domxref("WebGL2RenderingContext.bindSampler()")}}
-
Lie le {{domxref("WebGLSampler")}} donné à une unité de texture.
-
{{domxref("WebGL2RenderingContext.isSampler()")}}
-
Retourne true si l'objet donné est un objet {{domxref("WebGLSampler")}} valide.
-
{{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}}
-
Définit les paramètres de l'échantillonneur.
-
{{domxref("WebGL2RenderingContext.getSamplerParameter()")}}
-
Retourne les informations de paramètres de l'échantillonneur.
-
- -

Objets sync

- -
-
{{domxref("WebGL2RenderingContext.fenceSync()")}}
-
Crée un nouvel objet {{domxref("WebGLSync")}} et l'insère dans le flux de commandes GL.
-
{{domxref("WebGL2RenderingContext.isSync()")}}
-
Retourne true si l'objet transmis est un objet {{domxref("WebGLSync")}} valide.
-
{{domxref("WebGL2RenderingContext.deleteSync()")}}
-
Supprime l'objet {{domxref("WebGLSync")}} donné.
-
{{domxref("WebGL2RenderingContext.clientWaitSync()")}}
-
-

Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue.

-
-
{{domxref("WebGL2RenderingContext.waitSync()")}}
-
Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet {{domxref("WebGLSync")}} donné reçoive un signal.
-
{{domxref("WebGL2RenderingContext.getSyncParameter()")}}
-
Retourne les informations de paramètres d'un objet {{domxref("WebGLSync")}}.
-
- -

Retour de transformations

- -
-
{{domxref("WebGL2RenderingContext.createTransformFeedback()")}}
-
Crée et initialise les objets {{domxref("WebGLTransformFeedback")}}.
-
{{domxref("WebGL2RenderingContext.deleteTransformFeedback()")}}
-
Supprime l'objet {{domxref ("WebGLTransformFeedback")}} donné.
-
{{domxref("WebGL2RenderingContext.isTransformFeedback()")}}
-
Retourne true si l'objet transmis est un objet {{domxref("WebGLTransformFeedback")}} valide.
-
{{domxref("WebGL2RenderingContext.bindTransformFeedback()")}}
-
Lie l'objet {{domxref("WebGLTransformFeedback")}} transmis à l'état GL en cours.
-
{{domxref("WebGL2RenderingContext.beginTransformFeedback()")}}
-
Démarre une opération de retour de transformations.
-
{{domxref("WebGL2RenderingContext.endTransformFeedback()")}}
-
Termine une opération de retour de transformations.
-
{{domxref("WebGL2RenderingContext.transformFeedbackVaryings()")}}
-
Indique les valeurs à enregistrer dans les tampons {{domxref("WebGLTransformFeedback")}}.
-
{{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}
-
Retourne des informations sur les variables varying à partir des tampons {{domxref("WebGLTransformFeedback")}}.
-
{{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}}
-
Suspend une opération de retour de transformations.
-
{{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}}
-
Reprend une opération de retour de transformations.
-
- -

Objets tampons uniforms

- -
-
{{domxref("WebGL2RenderingContext.bindBufferBase()")}}
-
Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (cible) à l'indice donné.
-
{{domxref("WebGL2RenderingContext.bindBufferRange()")}}
-
Lie une plage du {{domxref("WebGLBuffer")}} donné au point de liaison donné (cible) à l'indice donné.
-
{{domxref("WebGL2RenderingContext.getUniformIndices()")}}
-
-

Récupère les indices d'un certain nombre d'uniforms dans un {{domxref("WebGLProgram")}}.

-
-
{{domxref("WebGL2RenderingContext.getActiveUniforms()")}}
-
Récupère des informations sur les uniforms actifs dans un {{domxref("WebGLProgram")}}.
-
{{domxref("WebGL2RenderingContext.getUniformBlockIndex()")}}
-
Récupère l'indice d'un bloc uniform dans un {{domxref("WebGLProgram")}}.
-
{{domxref("WebGL2RenderingContext.getActiveUniformBlockParameter()")}}
-
Récupère des informations d'un bloc uniform actif dans un {{domxref("WebGLProgram")}}.
-
{{domxref("WebGL2RenderingContext.getActiveUniformBlockName()")}}
-
Récupère le nom du bloc uniform actif à l'indice donné dans un {{domxref("WebGLProgram")}}.
-
{{domxref("WebGL2RenderingContext.uniformBlockBinding()")}}
-
Affecte des points de liaison aux blocs uniforms actifs.
-
- -

Objets de tableaux de sommets

- -

Méthodes pour travailler avec les objets {{domxref("WebGLVertexArrayObject")}} (VAO).

- -
-
{{domxref("WebGL2RenderingContext.createVertexArray()")}}
-
Crée un nouveau {{domxref("WebGLVertexArrayObject")}}.
-
{{domxref("WebGL2RenderingContext.deleteVertexArray()")}}
-
Supprime le {{domxref("WebGLVertexArrayObject")}} donné.
-
{{domxref("WebGL2RenderingContext.isVertexArray()")}}
-
Retourne true si l'objet donné est un {{domxref ("WebGLVertexArrayObject")}} valide.
-
{{domxref("WebGL2RenderingContext.bindVertexArray()")}}
-
Lie le {{domxref ("WebGLVertexArrayObject")}} donné au tampon.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL2', "#3.7", "WebGL2RenderingContext")}}{{Spec2('WebGL2')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGL2RenderingContext")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webgl2renderingcontext/index.md b/files/fr/web/api/webgl2renderingcontext/index.md new file mode 100644 index 0000000000..f1233fd66f --- /dev/null +++ b/files/fr/web/api/webgl2renderingcontext/index.md @@ -0,0 +1,278 @@ +--- +title: WebGL2RenderingContext +slug: Web/API/WebGL2RenderingContext +tags: + - API + - Experimental + - Reference + - WebGL + - WebGL2 +translation_of: Web/API/WebGL2RenderingContext +--- +
{{APIRef("WebGL")}} {{SeeCompatTable}}
+ +

L'interface WebGL2RenderingContext fournit le contexte de rendu OpenGL ES 3.0 pour la surface de dessin d'un élément HTML {{HTMLElement("canvas")}}.

+ +

Pour obtenir un objet de cette interface, appelez {{domxref ("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <canvas>, en fournissant "webgl2" comme argument :

+ +
var canevas = document.getElementById('monCanevas');
+var gl = canevas.getContext('webgl2');
+
+ +
+

Note : WebGL 2 est une extension de WebGL 1. L'interface WebGL2RenderingContext implémente tous les membres de l'interface {{domxref("WebGLRenderingContext")}}. Certaines méthodes du contexte WebGL 1 peuvent accepter des valeurs supplémentaires lorsqu'elles sont utilisées dans un contexte WebGL 2. Vous trouverez cette information sur les pages de référence WebGL 1.

+
+ +

Le didacticiel WebGL contient plus d'informations, d'exemples et de ressources sur la façon de démarrer avec WebGL.

+ +

Constantes

+ +

Voir la page des constantes WebGL.

+ +

Informations d'état

+ +
+
{{domxref("WebGL2RenderingContext.getIndexedParameter()")}}
+
Retourne la valeur indexée pour la cible donnée.
+
+ +

Tampons

+ +
+
{{domxref("WebGL2RenderingContext.bufferData()")}}
+
Initialise et crée le magasin de données de l'objet tampon.
+
{{domxref("WebGL2RenderingContext.bufferSubData()")}}
+
Met à jour un sous-ensemble d'un magasin de données d'un objet tampon.
+
{{domxref("WebGL2RenderingContext.copyBufferSubData()")}}
+
Copie une partie des données d'un tampon vers un autre tampon.
+
{{domxref("WebGL2RenderingContext.getBufferSubData()")}}
+
Lit les données d'un tampon et les écrit dans un {{jsxref ("ArrayBuffer")}} ou un {{jsxref ("SharedArrayBuffer")}}.
+
+ +

Tampons d'image

+ +
+
{{domxref("WebGL2RenderingContext.blitFramebuffer()")}}
+
Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin.
+
{{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}}
+
Attache une seule couche de texture à un tampon d'image.
+
{{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}}
+
Invalide le contenu des éléments joints dans un tampon d'image.
+
{{domxref("WebGL2RenderingContext.invalidateSubFramebuffer()")}}
+
Invalide le contenu des éléments joints dans un tampon d'image.
+
{{domxref("WebGL2RenderingContext.readBuffer()")}}
+
Sélectionne un tampon de couleur comme source pour les pixels.
+
+ +

Tampons de rendu

+ +
+
{{domxref("WebGL2RenderingContext.getInternalformatParameter()")}}
+
Retourne des informations sur le support, dépendant de l'implémentation, des formats internes.
+
{{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}}
+
Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser.
+
+ +

Textures

+ +
+
{{domxref("WebGL2RenderingContext.texStorage2D()")}}
+
Spécifie tous les niveaux d'un stockage de texture bidimensionnelle.
+
{{domxref("WebGL2RenderingContext.texStorage3D()")}}
+
Spécifie tous les niveaux d'une texture tridimensionnelle ou d'une texture de tableau bidimensionnelle.
+
{{domxref("WebGL2RenderingContext.texImage3D()")}}
+
Spécifie une image de texture tridimensionnelle.
+
{{domxref("WebGL2RenderingContext.texSubImage3D()")}}
+
Spécifie un sous-rectangle de la texture 3D en cours.
+
{{domxref("WebGL2RenderingContext.copyTexSubImage3D()")}}
+
Copie des pixels du tampon WebGLFrame en cours dans une sous-image de texture 3D existante.
+
{{domxref("WebGL2RenderingContext.compressedTexImage3D()")}}
+
Spécifie une image de texture tridimensionnelle dans un format compressé.
+
{{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}}
+
Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé.
+
+ +

Programmes et shaders

+ +
+
{{domxref("WebGL2RenderingContext.getFragDataLocation()")}}
+
Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur.
+
+ +

Uniforms et attributs

+ +
+
{{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][uif][v]()")}}
+
Méthodes spécifiant les valeurs des variables uniform.
+
{{domxref("WebGL2RenderingContext.uniformMatrix()", "WebGL2RenderingContext.uniformMatrix[234]x[234]fv()")}}
+
Méthodes spécifiant les valeurs matricielles pour les variables uniform.
+
{{domxref("WebGL2RenderingContext.vertexAttribI()", "WebGL2RenderingContext.vertexAttribI4[u]i[v]()")}}
+
Méthodes spécifiant les valeurs entières des attributs de sommet génériques.
+
{{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}}
+
Spécifie les formats et les emplacements des données entières des attributs de sommet dans un tableau d'attributs de sommet.
+
+ +

Tampons de dessin

+ +
+
{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}
+
Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec {{domxref ("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} et {{domxref("WebGL2RenderingContext.drawElementsInstanced()" , "gl.drawElementsInstanced()")}}.
+
{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}
+
Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments.
+
{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}
+
Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments.
+
{{domxref("WebGL2RenderingContext.drawRangeElements()")}}
+
Affiche des primitives à partir des données d'un tableau dans la plage donnée.
+
{{domxref("WebGL2RenderingContext.drawBuffers()")}}
+
Spécifie une liste de tampons de couleur dans lesquels dessiner.
+
{{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}}
+
Efface les tampons du tampon d'image actuellement lié.
+
+ +

Objets requêtes

+ +

Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}.

+ +
+
{{domxref("WebGL2RenderingContext.createQuery()")}}
+
Crée un nouvel objet {{domxref("WebGLQuery")}}.
+
{{domxref("WebGL2RenderingContext.deleteQuery()")}}
+
Supprime l'objet {{domxref("WebGLQuery")}} donné.
+
{{domxref("WebGL2RenderingContext.isQuery()")}}
+
Retourne true si l'objet donné est un objet {{domxref("WebGLQuery")}} valide.
+
{{domxref("WebGL2RenderingContext.beginQuery()")}}
+
Commence une requête asynchrone.
+
{{domxref("WebGL2RenderingContext.endQuery()")}}
+
Marque la fin d'une requête asynchrone.
+
{{domxref("WebGL2RenderingContext.getQuery()")}}
+
Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée.
+
{{domxref("WebGL2RenderingContext.getQueryParameter()")}}
+
Retourne des informations sur une requête.
+
+ +

Objets échantilloneurs

+ +
+
{{domxref("WebGL2RenderingContext.createSampler()")}}
+
Crée un nouvel objet {{domxref("WebGLSampler")}}.
+
{{domxref("WebGL2RenderingContext.deleteSampler()")}}
+
Supprime l'objet {{domxref("WebGLSampler")}} donné.
+
{{domxref("WebGL2RenderingContext.bindSampler()")}}
+
Lie le {{domxref("WebGLSampler")}} donné à une unité de texture.
+
{{domxref("WebGL2RenderingContext.isSampler()")}}
+
Retourne true si l'objet donné est un objet {{domxref("WebGLSampler")}} valide.
+
{{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}}
+
Définit les paramètres de l'échantillonneur.
+
{{domxref("WebGL2RenderingContext.getSamplerParameter()")}}
+
Retourne les informations de paramètres de l'échantillonneur.
+
+ +

Objets sync

+ +
+
{{domxref("WebGL2RenderingContext.fenceSync()")}}
+
Crée un nouvel objet {{domxref("WebGLSync")}} et l'insère dans le flux de commandes GL.
+
{{domxref("WebGL2RenderingContext.isSync()")}}
+
Retourne true si l'objet transmis est un objet {{domxref("WebGLSync")}} valide.
+
{{domxref("WebGL2RenderingContext.deleteSync()")}}
+
Supprime l'objet {{domxref("WebGLSync")}} donné.
+
{{domxref("WebGL2RenderingContext.clientWaitSync()")}}
+
+

Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue.

+
+
{{domxref("WebGL2RenderingContext.waitSync()")}}
+
Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet {{domxref("WebGLSync")}} donné reçoive un signal.
+
{{domxref("WebGL2RenderingContext.getSyncParameter()")}}
+
Retourne les informations de paramètres d'un objet {{domxref("WebGLSync")}}.
+
+ +

Retour de transformations

+ +
+
{{domxref("WebGL2RenderingContext.createTransformFeedback()")}}
+
Crée et initialise les objets {{domxref("WebGLTransformFeedback")}}.
+
{{domxref("WebGL2RenderingContext.deleteTransformFeedback()")}}
+
Supprime l'objet {{domxref ("WebGLTransformFeedback")}} donné.
+
{{domxref("WebGL2RenderingContext.isTransformFeedback()")}}
+
Retourne true si l'objet transmis est un objet {{domxref("WebGLTransformFeedback")}} valide.
+
{{domxref("WebGL2RenderingContext.bindTransformFeedback()")}}
+
Lie l'objet {{domxref("WebGLTransformFeedback")}} transmis à l'état GL en cours.
+
{{domxref("WebGL2RenderingContext.beginTransformFeedback()")}}
+
Démarre une opération de retour de transformations.
+
{{domxref("WebGL2RenderingContext.endTransformFeedback()")}}
+
Termine une opération de retour de transformations.
+
{{domxref("WebGL2RenderingContext.transformFeedbackVaryings()")}}
+
Indique les valeurs à enregistrer dans les tampons {{domxref("WebGLTransformFeedback")}}.
+
{{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}
+
Retourne des informations sur les variables varying à partir des tampons {{domxref("WebGLTransformFeedback")}}.
+
{{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}}
+
Suspend une opération de retour de transformations.
+
{{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}}
+
Reprend une opération de retour de transformations.
+
+ +

Objets tampons uniforms

+ +
+
{{domxref("WebGL2RenderingContext.bindBufferBase()")}}
+
Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (cible) à l'indice donné.
+
{{domxref("WebGL2RenderingContext.bindBufferRange()")}}
+
Lie une plage du {{domxref("WebGLBuffer")}} donné au point de liaison donné (cible) à l'indice donné.
+
{{domxref("WebGL2RenderingContext.getUniformIndices()")}}
+
+

Récupère les indices d'un certain nombre d'uniforms dans un {{domxref("WebGLProgram")}}.

+
+
{{domxref("WebGL2RenderingContext.getActiveUniforms()")}}
+
Récupère des informations sur les uniforms actifs dans un {{domxref("WebGLProgram")}}.
+
{{domxref("WebGL2RenderingContext.getUniformBlockIndex()")}}
+
Récupère l'indice d'un bloc uniform dans un {{domxref("WebGLProgram")}}.
+
{{domxref("WebGL2RenderingContext.getActiveUniformBlockParameter()")}}
+
Récupère des informations d'un bloc uniform actif dans un {{domxref("WebGLProgram")}}.
+
{{domxref("WebGL2RenderingContext.getActiveUniformBlockName()")}}
+
Récupère le nom du bloc uniform actif à l'indice donné dans un {{domxref("WebGLProgram")}}.
+
{{domxref("WebGL2RenderingContext.uniformBlockBinding()")}}
+
Affecte des points de liaison aux blocs uniforms actifs.
+
+ +

Objets de tableaux de sommets

+ +

Méthodes pour travailler avec les objets {{domxref("WebGLVertexArrayObject")}} (VAO).

+ +
+
{{domxref("WebGL2RenderingContext.createVertexArray()")}}
+
Crée un nouveau {{domxref("WebGLVertexArrayObject")}}.
+
{{domxref("WebGL2RenderingContext.deleteVertexArray()")}}
+
Supprime le {{domxref("WebGLVertexArrayObject")}} donné.
+
{{domxref("WebGL2RenderingContext.isVertexArray()")}}
+
Retourne true si l'objet donné est un {{domxref ("WebGLVertexArrayObject")}} valide.
+
{{domxref("WebGL2RenderingContext.bindVertexArray()")}}
+
Lie le {{domxref ("WebGLVertexArrayObject")}} donné au tampon.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL2', "#3.7", "WebGL2RenderingContext")}}{{Spec2('WebGL2')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGL2RenderingContext")}}

+ +

Voir aussi

+ + 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 deleted file mode 100644 index 2fa7a52da1..0000000000 --- a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Appliquer des découpes simples -slug: Web/API/WebGL_API/By_example/Basic_scissoring -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Basic_scissoring -original_slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples ---- -
{{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/basic_scissoring/index.md b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md new file mode 100644 index 0000000000..2fa7a52da1 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md @@ -0,0 +1,91 @@ +--- +title: Appliquer des découpes simples +slug: Web/API/WebGL_API/By_example/Basic_scissoring +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Basic_scissoring +original_slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples +--- +
{{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 deleted file mode 100644 index 406d868fbd..0000000000 --- a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Modèle 1 -slug: Web/API/WebGL_API/By_example/Boilerplate_1 -tags: - - Apprendre - - Débutant - - Exemple - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Boilerplate_1 -original_slug: Web/API/WebGL_API/By_example/Modèle_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

- - - -

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

- - - -

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/boilerplate_1/index.md b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md new file mode 100644 index 0000000000..406d868fbd --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md @@ -0,0 +1,98 @@ +--- +title: Modèle 1 +slug: Web/API/WebGL_API/By_example/Boilerplate_1 +tags: + - Apprendre + - Débutant + - Exemple + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Boilerplate_1 +original_slug: Web/API/WebGL_API/By_example/Modèle_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

+ + + +

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

+ + + +

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 deleted file mode 100644 index 99c382c0ac..0000000000 --- a/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Tailles de canvas et WebGL -slug: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL -tags: - - Apprendre - - Débutant - - Exemple - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL -original_slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_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/canvas_size_and_webgl/index.md b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md new file mode 100644 index 0000000000..99c382c0ac --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md @@ -0,0 +1,83 @@ +--- +title: Tailles de canvas et WebGL +slug: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL +tags: + - Apprendre + - Débutant + - Exemple + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL +original_slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_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 deleted file mode 100644 index 91c858dcec..0000000000 --- a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Appliquer une couleur à la souris -slug: Web/API/WebGL_API/By_example/Clearing_by_clicking -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking -original_slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris ---- -
{{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_by_clicking/index.md b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md new file mode 100644 index 0000000000..91c858dcec --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md @@ -0,0 +1,123 @@ +--- +title: Appliquer une couleur à la souris +slug: Web/API/WebGL_API/By_example/Clearing_by_clicking +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking +original_slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris +--- +
{{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 deleted file mode 100644 index fd92c8ce1c..0000000000 --- a/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Appliquer des couleurs -slug: Web/API/WebGL_API/By_example/Clearing_with_colors -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Clearing_with_colors -original_slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs ---- -
{{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/clearing_with_colors/index.md b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.md new file mode 100644 index 0000000000..fd92c8ce1c --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.md @@ -0,0 +1,101 @@ +--- +title: Appliquer des couleurs +slug: Web/API/WebGL_API/By_example/Clearing_with_colors +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Clearing_with_colors +original_slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs +--- +
{{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 deleted file mode 100644 index f5ef6779ef..0000000000 --- a/files/fr/web/api/webgl_api/by_example/color_masking/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Masque de couleur -slug: Web/API/WebGL_API/By_example/Color_masking -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Color_masking -original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur ---- -
{{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/color_masking/index.md b/files/fr/web/api/webgl_api/by_example/color_masking/index.md new file mode 100644 index 0000000000..f5ef6779ef --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/color_masking/index.md @@ -0,0 +1,129 @@ +--- +title: Masque de couleur +slug: Web/API/WebGL_API/By_example/Color_masking +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Color_masking +original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur +--- +
{{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/detect_webgl/index.html b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html deleted file mode 100644 index b3083ba274..0000000000 --- a/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Détecter WebGL -slug: Web/API/WebGL_API/By_example/Detect_WebGL -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Detect_WebGL -original_slug: Web/API/WebGL_API/By_example/Détecter_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/detect_webgl/index.md b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.md new file mode 100644 index 0000000000..b3083ba274 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.md @@ -0,0 +1,80 @@ +--- +title: Détecter WebGL +slug: Web/API/WebGL_API/By_example/Detect_WebGL +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Detect_WebGL +original_slug: Web/API/WebGL_API/By_example/Détecter_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/hello_glsl/index.html b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html deleted file mode 100644 index c30e81f2f3..0000000000 --- a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Hello GLSL -slug: Web/API/WebGL_API/By_example/Hello_GLSL -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Hello_GLSL ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}

- -

Dans cet article, on décrit un programme de manipulation de shaders qui dessine un carré de couleur.

- -
-

Note : Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.

-
- -

{{EmbedLiveSample("Hello_World_en_GLSL",660,425)}}

- -

Hello World en GLSL

- -

Voici un exemple de premier programme qu'on peut écrire pour manipuler des shaders.

- - - - - -
<script type="x-shader/x-vertex" id="vertex-shader">
-#version 100
-void main() {
-  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
-  gl_PointSize = 64.0;
-}
-</script>
-
- -
<script type="x-shader/x-fragment" id="fragment-shader">
-#version 100
-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 =
-      "La liaison du programme 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.vertexAttribPointer(0, 1, 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/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}

diff --git a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md new file mode 100644 index 0000000000..c30e81f2f3 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md @@ -0,0 +1,159 @@ +--- +title: Hello GLSL +slug: Web/API/WebGL_API/By_example/Hello_GLSL +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Hello_GLSL +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}

+ +

Dans cet article, on décrit un programme de manipulation de shaders qui dessine un carré de couleur.

+ +
+

Note : Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.

+
+ +

{{EmbedLiveSample("Hello_World_en_GLSL",660,425)}}

+ +

Hello World en GLSL

+ +

Voici un exemple de premier programme qu'on peut écrire pour manipuler des shaders.

+ + + + + +
<script type="x-shader/x-vertex" id="vertex-shader">
+#version 100
+void main() {
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+</script>
+
+ +
<script type="x-shader/x-fragment" id="fragment-shader">
+#version 100
+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 =
+      "La liaison du programme 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.vertexAttribPointer(0, 1, 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/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}

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 deleted file mode 100644 index f00e3a7ea1..0000000000 --- a/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Introduction aux attributs de vertex -slug: Web/API/WebGL_API/By_example/Hello_vertex_attributes -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes -original_slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex ---- -
{{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/hello_vertex_attributes/index.md b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md new file mode 100644 index 0000000000..f00e3a7ea1 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md @@ -0,0 +1,172 @@ +--- +title: Introduction aux attributs de vertex +slug: Web/API/WebGL_API/By_example/Hello_vertex_attributes +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes +original_slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex +--- +
{{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/index.html b/files/fr/web/api/webgl_api/by_example/index.html deleted file mode 100644 index 037ed0d183..0000000000 --- a/files/fr/web/api/webgl_api/by_example/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: WebGL par l'exemple -slug: Web/API/WebGL_API/By_example -tags: - - Apprendre - - Débutant - - Graphisme - - WebGL -translation_of: Web/API/WebGL_API/By_example ---- -
{{IncludeSubnav("/fr/docs/Apprendre")}}
- -

{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}

- -

WebGL par l'exemple est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les shaders, les textures, la géométrie et l'interaction avec les utilisateurs.

- -

Les exemples, par catégorie

- -

Les exemples de cette section sont triés par ordre de difficulté croissante. Plutôt que de les présenter sous la forme d'une longue liste, ils sont également répartis selon différentes catégories. Un sujet peut être abordé dans plusieurs exemples afin de couvrir des notions simples, intermédiaires ou avancées.

- -

Plutôt que de manipuler des shaders, optimiser des géométrie et gérer la mémoire {{Glossary("GPU")}} dans le premier exemple, la progression se fera étape par étape afin que les exemples et les concepts puissent mieux être compris.

- -

Les exemples sont expliqués, avec des commentaires dans le code et des paragraphes dédiés. Nous vous invitons à lire l'ensemble des commentaires au fur et à mesure, notamment pour les exemples plus avancés où ce qui a été vu auparavant ne sera pas expliqué à nouveau.

- -

Apprendre à connaître le contexte de rendu

- -
-
Détecter WebGL
-
Dans cet exemple, on montre comment détecter un contexte de rendu {{Glossary("WebGL")}} et l'afficher pour l'utilisateur.
-
Appliquer des couleurs
-
Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.
-
Appliquer une couleur à la souris
-
Ici, on montre comment combiner des interactions utilisateurs avec des opérations graphiques (là, on appliquera une couleur aléatoire dans le contexte à chaque clic de l'utilisateur).
-
Créer une animation colorée
-
Dans cet exemple, on crée une animation simple avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu WebGL.
-
Avoir un masque de couleur
-
Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.
-
Appliquer des découpes simples
-
Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (scissoring).
-
La taille du canevas et WebGL
-
Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément canvas associé.
-
Modèle 1
-
Dans cet exemple, on évoque les fragments de code qui seront utilisés pour les exemples qui suivent (et dans lesquels ils seront cachés car identiques). On définiera également une fonction JavaScript utilitaire pour initialiser WebGL plus facilement.
-
Créer une animation avec du découpage et de l'applique
-
Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.
-
Une pluie de rectangle
-
On voit ici un jeu, simple, qui mélange les découpes, les animations et les interactions utilisateurs.
-
- -
-

Les bases de la programmation avec les shaders

- -
-
Hello GLSL
-
Un programme de manipulation des shaders simple qui dessine un carré.
-
Introduction aux attributs de vertex
-
Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.
-
Générer des textures avec du code
-
Une démonstration simple sur l'utilisation des shaders et des textures procédurales.
-
- -

Divers exemples avancés

- -
-
Les textures vidéos
-
Dans cet exemple, on voit comment utiliser des fichiers vidéos comme des textures.
-
- -

{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}

-
diff --git a/files/fr/web/api/webgl_api/by_example/index.md b/files/fr/web/api/webgl_api/by_example/index.md new file mode 100644 index 0000000000..037ed0d183 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/index.md @@ -0,0 +1,70 @@ +--- +title: WebGL par l'exemple +slug: Web/API/WebGL_API/By_example +tags: + - Apprendre + - Débutant + - Graphisme + - WebGL +translation_of: Web/API/WebGL_API/By_example +--- +
{{IncludeSubnav("/fr/docs/Apprendre")}}
+ +

{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}

+ +

WebGL par l'exemple est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les shaders, les textures, la géométrie et l'interaction avec les utilisateurs.

+ +

Les exemples, par catégorie

+ +

Les exemples de cette section sont triés par ordre de difficulté croissante. Plutôt que de les présenter sous la forme d'une longue liste, ils sont également répartis selon différentes catégories. Un sujet peut être abordé dans plusieurs exemples afin de couvrir des notions simples, intermédiaires ou avancées.

+ +

Plutôt que de manipuler des shaders, optimiser des géométrie et gérer la mémoire {{Glossary("GPU")}} dans le premier exemple, la progression se fera étape par étape afin que les exemples et les concepts puissent mieux être compris.

+ +

Les exemples sont expliqués, avec des commentaires dans le code et des paragraphes dédiés. Nous vous invitons à lire l'ensemble des commentaires au fur et à mesure, notamment pour les exemples plus avancés où ce qui a été vu auparavant ne sera pas expliqué à nouveau.

+ +

Apprendre à connaître le contexte de rendu

+ +
+
Détecter WebGL
+
Dans cet exemple, on montre comment détecter un contexte de rendu {{Glossary("WebGL")}} et l'afficher pour l'utilisateur.
+
Appliquer des couleurs
+
Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.
+
Appliquer une couleur à la souris
+
Ici, on montre comment combiner des interactions utilisateurs avec des opérations graphiques (là, on appliquera une couleur aléatoire dans le contexte à chaque clic de l'utilisateur).
+
Créer une animation colorée
+
Dans cet exemple, on crée une animation simple avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu WebGL.
+
Avoir un masque de couleur
+
Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.
+
Appliquer des découpes simples
+
Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (scissoring).
+
La taille du canevas et WebGL
+
Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément canvas associé.
+
Modèle 1
+
Dans cet exemple, on évoque les fragments de code qui seront utilisés pour les exemples qui suivent (et dans lesquels ils seront cachés car identiques). On définiera également une fonction JavaScript utilitaire pour initialiser WebGL plus facilement.
+
Créer une animation avec du découpage et de l'applique
+
Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.
+
Une pluie de rectangle
+
On voit ici un jeu, simple, qui mélange les découpes, les animations et les interactions utilisateurs.
+
+ +
+

Les bases de la programmation avec les shaders

+ +
+
Hello GLSL
+
Un programme de manipulation des shaders simple qui dessine un carré.
+
Introduction aux attributs de vertex
+
Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.
+
Générer des textures avec du code
+
Une démonstration simple sur l'utilisation des shaders et des textures procédurales.
+
+ +

Divers exemples avancés

+ +
+
Les textures vidéos
+
Dans cet exemple, on voit comment utiliser des fichiers vidéos comme des textures.
+
+ +

{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}

+
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 deleted file mode 100644 index de42151f5c..0000000000 --- a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Une pluie de rectangle -slug: Web/API/WebGL_API/By_example/Raining_rectangles -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Raining_rectangles -original_slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle ---- -
{{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/raining_rectangles/index.md b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md new file mode 100644 index 0000000000..de42151f5c --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md @@ -0,0 +1,177 @@ +--- +title: Une pluie de rectangle +slug: Web/API/WebGL_API/By_example/Raining_rectangles +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Raining_rectangles +original_slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle +--- +
{{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 deleted file mode 100644 index e151ad4c95..0000000000 --- a/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Créer une animation avec découpe et applique -slug: Web/API/WebGL_API/By_example/Scissor_animation -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Scissor_animation -original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_et_applique ---- -
{{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/scissor_animation/index.md b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.md new file mode 100644 index 0000000000..e151ad4c95 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.md @@ -0,0 +1,163 @@ +--- +title: Créer une animation avec découpe et applique +slug: Web/API/WebGL_API/By_example/Scissor_animation +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Scissor_animation +original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_et_applique +--- +
{{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 deleted file mode 100644 index 03897206ae..0000000000 --- a/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Créer une animation colorée -slug: Web/API/WebGL_API/By_example/Simple_color_animation -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Simple_color_animation -original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée ---- -
{{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/simple_color_animation/index.md b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md new file mode 100644 index 0000000000..03897206ae --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md @@ -0,0 +1,140 @@ +--- +title: Créer une animation colorée +slug: Web/API/WebGL_API/By_example/Simple_color_animation +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Simple_color_animation +original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée +--- +
{{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/textures_from_code/index.html b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html deleted file mode 100644 index f88812a7d3..0000000000 --- a/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Générer des textures avec du code -slug: Web/API/WebGL_API/By_example/Textures_from_code -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Textures_from_code -original_slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_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/textures_from_code/index.md b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.md new file mode 100644 index 0000000000..f88812a7d3 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.md @@ -0,0 +1,161 @@ +--- +title: Générer des textures avec du code +slug: Web/API/WebGL_API/By_example/Textures_from_code +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Textures_from_code +original_slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_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/video_textures/index.html b/files/fr/web/api/webgl_api/by_example/video_textures/index.html deleted file mode 100644 index 9f5c93f1f9..0000000000 --- a/files/fr/web/api/webgl_api/by_example/video_textures/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Les textures vidéos -slug: Web/API/WebGL_API/By_example/Video_textures -tags: - - Apprendre - - Avancé - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Video_textures -original_slug: Web/API/WebGL_API/By_example/Les_textures_vidéos ---- -
{{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/video_textures/index.md b/files/fr/web/api/webgl_api/by_example/video_textures/index.md new file mode 100644 index 0000000000..9f5c93f1f9 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/video_textures/index.md @@ -0,0 +1,24 @@ +--- +title: Les textures vidéos +slug: Web/API/WebGL_API/By_example/Video_textures +tags: + - Apprendre + - Avancé + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Video_textures +original_slug: Web/API/WebGL_API/By_example/Les_textures_vidéos +--- +
{{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 deleted file mode 100644 index cdd41f0766..0000000000 --- a/files/fr/web/api/webgl_api/data/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Les données en WebGL -slug: Web/API/WebGL_API/Data -tags: - - 3D - - API WebGL - - Attributs - - BesoinDExemple - - BesoinDeContenu - - Graphismes - - Graphismes 3D - - Guide - - Intermédiaire - - Uniformes - - Variants - - WebGL - - dessin -translation_of: Web/API/WebGL_API/Data -original_slug: Web/API/WebGL_API/Données ---- -
{{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/data/index.md b/files/fr/web/api/webgl_api/data/index.md new file mode 100644 index 0000000000..cdd41f0766 --- /dev/null +++ b/files/fr/web/api/webgl_api/data/index.md @@ -0,0 +1,57 @@ +--- +title: Les données en WebGL +slug: Web/API/WebGL_API/Data +tags: + - 3D + - API WebGL + - Attributs + - BesoinDExemple + - BesoinDeContenu + - Graphismes + - Graphismes 3D + - Guide + - Intermédiaire + - Uniformes + - Variants + - WebGL + - dessin +translation_of: Web/API/WebGL_API/Data +original_slug: Web/API/WebGL_API/Données +--- +
{{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/index.html b/files/fr/web/api/webgl_api/index.html deleted file mode 100644 index cd73e5b62b..0000000000 --- a/files/fr/web/api/webgl_api/index.html +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: 'L''API WebGL : graphismes 2D et 3D pour le web' -slug: Web/API/WebGL_API -tags: - - 3D - - API WebGL - - Avancé - - Graphiques - - Graphiques 3D - - Media - - Vue d'ensemble - - WebGL -translation_of: Web/API/WebGL_API ---- -
{{WebGLSidebar}}
- -

WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments canvas d'HTML5.

- -

Le support pour WebGL est présent dans Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.

- -

L'élément {{HTMLElement("canvas")}} est aussi utilisé par Canvas 2D pour faire des graphismes 2D sur les pages web.

- -

Référence

- -

Interfaces standard

- - - -

Extensions

- - - -

Evènements

- - - -

Constantes et types

- - - -

WebGL 2

- -

WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent :

- - - -

Voir aussi le post de blog "WebGL 2 lands in Firefox" et webglsamples.org/WebGL2Samples pour quelques démos.

- -

Guides et tutoriels

- -

Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas.

- -

Guides

- -
-
Données en WebGL
-
Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL.
-
Meilleures pratiques WebGL
-
Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL.
-
Utilisation des extensions
-
Un guide pour l'utilisation des extensions WebGL.
-
- -

Tutoriels

- -
-
Tutoriel WebGL
-
Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL.
-
- -

Exemples

- -
-
Un exemple de base d'animation WebGL 2D
-
Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL.
-
- -

Tutoriels avancés

- -
-
Projection de vue de modèle WebGL
-
Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.
-
Mathématiques matricielles pour le web
-
Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3.
-
- -

Ressources

- - - -

Bibliothèques

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Définition. Basée sur OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
- -

Compatibilité des navigateurs

- -

WebGL 1

- -

{{Compat("api.WebGLRenderingContext", 0)}}

- -

WebGL 2

- -

{{Compat("api.WebGL2RenderingContext", 0)}}

- -

Notes de compatibilité

- -

En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte webgl, mais les plus anciens ont aussi besoin d'experimental-webgl. De plus, le prochain WebGL 2 sera entièrement rétrocompatible et comprendra le nom de contexte webgl2.

- -

Notes Gecko

- -

Débogage et test WebGL

- -

À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test :

- -
-
webgl.min_capability_mode
-
Propriété booléenne qui, lorsqu'elle est true, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est false par défaut.
-
webgl.disable_extensions
-
Propriété booléenne qui, lorsqu'elle est true, désactive toutes les extensions WebGL. Elle est false par défaut.
-
- -

Voir aussi

- - diff --git a/files/fr/web/api/webgl_api/index.md b/files/fr/web/api/webgl_api/index.md new file mode 100644 index 0000000000..cd73e5b62b --- /dev/null +++ b/files/fr/web/api/webgl_api/index.md @@ -0,0 +1,235 @@ +--- +title: 'L''API WebGL : graphismes 2D et 3D pour le web' +slug: Web/API/WebGL_API +tags: + - 3D + - API WebGL + - Avancé + - Graphiques + - Graphiques 3D + - Media + - Vue d'ensemble + - WebGL +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +

WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments canvas d'HTML5.

+ +

Le support pour WebGL est présent dans Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.

+ +

L'élément {{HTMLElement("canvas")}} est aussi utilisé par Canvas 2D pour faire des graphismes 2D sur les pages web.

+ +

Référence

+ +

Interfaces standard

+ + + +

Extensions

+ + + +

Evènements

+ + + +

Constantes et types

+ + + +

WebGL 2

+ +

WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent :

+ + + +

Voir aussi le post de blog "WebGL 2 lands in Firefox" et webglsamples.org/WebGL2Samples pour quelques démos.

+ +

Guides et tutoriels

+ +

Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas.

+ +

Guides

+ +
+
Données en WebGL
+
Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL.
+
Meilleures pratiques WebGL
+
Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL.
+
Utilisation des extensions
+
Un guide pour l'utilisation des extensions WebGL.
+
+ +

Tutoriels

+ +
+
Tutoriel WebGL
+
Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL.
+
+ +

Exemples

+ +
+
Un exemple de base d'animation WebGL 2D
+
Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL.
+
+ +

Tutoriels avancés

+ +
+
Projection de vue de modèle WebGL
+
Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.
+
Mathématiques matricielles pour le web
+
Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3.
+
+ +

Ressources

+ + + +

Bibliothèques

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Définition. Basée sur OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
+ +

Compatibilité des navigateurs

+ +

WebGL 1

+ +

{{Compat("api.WebGLRenderingContext", 0)}}

+ +

WebGL 2

+ +

{{Compat("api.WebGL2RenderingContext", 0)}}

+ +

Notes de compatibilité

+ +

En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte webgl, mais les plus anciens ont aussi besoin d'experimental-webgl. De plus, le prochain WebGL 2 sera entièrement rétrocompatible et comprendra le nom de contexte webgl2.

+ +

Notes Gecko

+ +

Débogage et test WebGL

+ +

À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test :

+ +
+
webgl.min_capability_mode
+
Propriété booléenne qui, lorsqu'elle est true, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est false par défaut.
+
webgl.disable_extensions
+
Propriété booléenne qui, lorsqu'elle est true, désactive toutes les extensions WebGL. Elle est false par défaut.
+
+ +

Voir aussi

+ + 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 deleted file mode 100644 index 2369abb5e4..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html +++ /dev/null @@ -1,308 +0,0 @@ ---- -title: Ajouter du contenu à WebGL -slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context -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 -original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL ---- -

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

- -
-

Note : 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 :

- - - -

{{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/adding_2d_content_to_a_webgl_context/index.md b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md new file mode 100644 index 0000000000..2369abb5e4 --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md @@ -0,0 +1,308 @@ +--- +title: Ajouter du contenu à WebGL +slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +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 +original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL +--- +

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

+ +
+

Note : 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 :

+ + + +

{{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 deleted file mode 100644 index 05b7ea8e12..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Animer des objets avec WebGL -slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL -tags: - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_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_objects_with_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md new file mode 100644 index 0000000000..05b7ea8e12 --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md @@ -0,0 +1,60 @@ +--- +title: Animer des objets avec WebGL +slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +tags: + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +original_slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_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 deleted file mode 100644 index df7fcb4658..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Animation de textures en WebGL -slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL -tags: - - Media - - Tutoriel - - Video - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Animation_de_textures_en_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/animating_textures_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md new file mode 100644 index 0000000000..df7fcb4658 --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md @@ -0,0 +1,145 @@ +--- +title: Animation de textures en WebGL +slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +tags: + - Media + - Tutoriel + - Video + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +original_slug: Web/API/WebGL_API/Tutorial/Animation_de_textures_en_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/creating_3d_objects_using_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html deleted file mode 100644 index 844ee8f454..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Créer des objets 3D avec WebGL -slug: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -tags: - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_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/creating_3d_objects_using_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md new file mode 100644 index 0000000000..844ee8f454 --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md @@ -0,0 +1,168 @@ +--- +title: Créer des objets 3D avec WebGL +slug: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +tags: + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +original_slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_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/getting_started_with_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html deleted file mode 100644 index 10adde485e..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Commencer avec WebGL -slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -tags: - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Commencer_avec_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

- - - -

{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

\ No newline at end of file diff --git a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md new file mode 100644 index 0000000000..10adde485e --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md @@ -0,0 +1,72 @@ +--- +title: Commencer avec WebGL +slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +tags: + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +original_slug: Web/API/WebGL_API/Tutorial/Commencer_avec_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

+ + + +

{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

\ No newline at end of file diff --git a/files/fr/web/api/webgl_api/tutorial/index.html b/files/fr/web/api/webgl_api/tutorial/index.html deleted file mode 100644 index 671b448a9d..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Tutoriel WebGL -slug: Web/API/WebGL_API/Tutorial -tags: - - API WebGL - - Tutoriel - - Vue d'ensemble - - WebGL -translation_of: Web/API/WebGL_API/Tutorial ---- -
{{WebGLSidebar}}
- -

WebGL permet au contenu web d'utiliser une API basée sur OpenGL ES 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.

- -

Ce tutoriel décrit comment utiliser l'élément <canvas> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.

- -

Avant que vous ne commenciez

- -

L'utilisation de l'élément <canvas> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'HTML et du JavaScript. L'élément <canvas> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.

- -

Dans ce tutoriel

- -
-
Commencer avec WebGL
-
Comment mettre en place un contexte WebGL.
-
Ajouter du contenu à WebGL
-
Comment faire un rendu simple de figures planes avec WebGL.
-
Ajouter des couleurs avec les nuanceurs
-
Démontre comment ajouter de la couleur aux formes avec des nuanceurs.
-
Animer des objets avec WebGL
-
Montre comment tourner et déplacer des objets pour créer des animations simples.
-
Créer des objets 3D avec WebGL
-
Montre comment créer et animer un objet 3D (dans ce cas, un cube).
-
Utilisation des textures dans WebGL
-
Démontrer comment appliquer des textures sur les faces d'un objet.
-
 Éclairage en WebGL
-
Comment simuler des effets d'illumination dans votre contexte WebGL.
-
Animation de textures en WebGL
-
Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation.
-
diff --git a/files/fr/web/api/webgl_api/tutorial/index.md b/files/fr/web/api/webgl_api/tutorial/index.md new file mode 100644 index 0000000000..671b448a9d --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/index.md @@ -0,0 +1,40 @@ +--- +title: Tutoriel WebGL +slug: Web/API/WebGL_API/Tutorial +tags: + - API WebGL + - Tutoriel + - Vue d'ensemble + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +

WebGL permet au contenu web d'utiliser une API basée sur OpenGL ES 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.

+ +

Ce tutoriel décrit comment utiliser l'élément <canvas> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.

+ +

Avant que vous ne commenciez

+ +

L'utilisation de l'élément <canvas> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'HTML et du JavaScript. L'élément <canvas> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.

+ +

Dans ce tutoriel

+ +
+
Commencer avec WebGL
+
Comment mettre en place un contexte WebGL.
+
Ajouter du contenu à WebGL
+
Comment faire un rendu simple de figures planes avec WebGL.
+
Ajouter des couleurs avec les nuanceurs
+
Démontre comment ajouter de la couleur aux formes avec des nuanceurs.
+
Animer des objets avec WebGL
+
Montre comment tourner et déplacer des objets pour créer des animations simples.
+
Créer des objets 3D avec WebGL
+
Montre comment créer et animer un objet 3D (dans ce cas, un cube).
+
Utilisation des textures dans WebGL
+
Démontrer comment appliquer des textures sur les faces d'un objet.
+
 Éclairage en WebGL
+
Comment simuler des effets d'illumination dans votre contexte WebGL.
+
Animation de textures en WebGL
+
Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation.
+
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 deleted file mode 100644 index e61f615228..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Éclairage en WebGL -slug: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL -translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Eclairage_en_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/lighting_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md new file mode 100644 index 0000000000..e61f615228 --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md @@ -0,0 +1,176 @@ +--- +title: Éclairage en WebGL +slug: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +original_slug: Web/API/WebGL_API/Tutorial/Eclairage_en_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 deleted file mode 100644 index 0bd4a47c5d..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Ajouter des couleurs avec les nuanceurs -slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL -tags: - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders ---- -

{{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_shaders_to_apply_color_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md new file mode 100644 index 0000000000..0bd4a47c5d --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md @@ -0,0 +1,118 @@ +--- +title: Ajouter des couleurs avec les nuanceurs +slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +tags: + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +original_slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders +--- +

{{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 deleted file mode 100644 index 002be155c6..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: Utilisation des textures en WebGL -slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL -tags: - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL -original_slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_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/using_textures_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md new file mode 100644 index 0000000000..002be155c6 --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md @@ -0,0 +1,281 @@ +--- +title: Utilisation des textures en WebGL +slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +tags: + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +original_slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_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/types/index.html b/files/fr/web/api/webgl_api/types/index.html deleted file mode 100644 index 8c7156a119..0000000000 --- a/files/fr/web/api/webgl_api/types/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Types WebGL -slug: Web/API/WebGL_API/Types -tags: - - Reference - - Types - - WebGL -translation_of: Web/API/WebGL_API/Types ---- -
{{WebGLSidebar}}
- -

Les types suivants sont utilisés dans les interfaces WebGL.

- -

WebGL 1

- -

Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeType Web IDLDescription
GLenumunsigned longUtilisé pour les enums. Voir aussi la liste des constantes.
GLbooleanbooleanUn {{jsxref("Boolean")}}.
GLbitfieldunsigned longUn champ de bits stockant plusieurs bits logiques. Utilisé par exemple dans {{domxref("WebGLRenderingContext.clear()")}}.
GLbytebyteEntier signé en complément à deux sur 8 bits.
GLshortshortEntier signé en complément à deux sur 16 bits.
GLintlongEntier signé en complément à deux sur 32 bits.
GLsizeilongUtilisé pour les tailles (par ex., la largeur et la hauteur du tampon de dessin).
GLintptrlong longType spécial pour l'arithmétique de pointeur.
GLsizeiptrlong longType spécial pour l'arithmétique de pointeur.
GLubyteoctetEntier non signé en complément à deux sur 8 bits.
GLushortunsigned shortEntier non signé en complément à deux sur 16 bits.
GLuintunsigned longEntier non signé en complément à deux sur 32 bits.
GLfloatunrestricted floatNombre en virgule flottante IEEE sur 32 bits.
GLclampfunrestricted floatNombre en virgule flottante IEEE sur 32 bits borné.
- -

WebGL 2

- -

Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés.

- - - - - - - - - - - - - - -
TypeType Web IDLDescription
GLint64long longNombre entier sur 64 bits signé.
- -

Extensions WebGL

- -

Ces types sont utilisés à l'intérieur des extensions WebGL.

- - - - - - - - - - - - - - -
TypeType Web IDLDescription
GLuint64EXTlong longNombre entier sur 64 bits non signé.
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.1", "Types")}}{{Spec2('WebGL')}}Définition initiale
{{SpecName('WebGL2', "#3.1", "Types")}}{{Spec2('WebGL2')}}Définit des types supplémentaires.
{{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}}{{Spec2('EXT_disjoint_timer_query')}}Ajoute GLuint64EXT
- -

Voir aussi

- - diff --git a/files/fr/web/api/webgl_api/types/index.md b/files/fr/web/api/webgl_api/types/index.md new file mode 100644 index 0000000000..8c7156a119 --- /dev/null +++ b/files/fr/web/api/webgl_api/types/index.md @@ -0,0 +1,167 @@ +--- +title: Types WebGL +slug: Web/API/WebGL_API/Types +tags: + - Reference + - Types + - WebGL +translation_of: Web/API/WebGL_API/Types +--- +
{{WebGLSidebar}}
+ +

Les types suivants sont utilisés dans les interfaces WebGL.

+ +

WebGL 1

+ +

Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeType Web IDLDescription
GLenumunsigned longUtilisé pour les enums. Voir aussi la liste des constantes.
GLbooleanbooleanUn {{jsxref("Boolean")}}.
GLbitfieldunsigned longUn champ de bits stockant plusieurs bits logiques. Utilisé par exemple dans {{domxref("WebGLRenderingContext.clear()")}}.
GLbytebyteEntier signé en complément à deux sur 8 bits.
GLshortshortEntier signé en complément à deux sur 16 bits.
GLintlongEntier signé en complément à deux sur 32 bits.
GLsizeilongUtilisé pour les tailles (par ex., la largeur et la hauteur du tampon de dessin).
GLintptrlong longType spécial pour l'arithmétique de pointeur.
GLsizeiptrlong longType spécial pour l'arithmétique de pointeur.
GLubyteoctetEntier non signé en complément à deux sur 8 bits.
GLushortunsigned shortEntier non signé en complément à deux sur 16 bits.
GLuintunsigned longEntier non signé en complément à deux sur 32 bits.
GLfloatunrestricted floatNombre en virgule flottante IEEE sur 32 bits.
GLclampfunrestricted floatNombre en virgule flottante IEEE sur 32 bits borné.
+ +

WebGL 2

+ +

Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés.

+ + + + + + + + + + + + + + +
TypeType Web IDLDescription
GLint64long longNombre entier sur 64 bits signé.
+ +

Extensions WebGL

+ +

Ces types sont utilisés à l'intérieur des extensions WebGL.

+ + + + + + + + + + + + + + +
TypeType Web IDLDescription
GLuint64EXTlong longNombre entier sur 64 bits non signé.
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.1", "Types")}}{{Spec2('WebGL')}}Définition initiale
{{SpecName('WebGL2', "#3.1", "Types")}}{{Spec2('WebGL2')}}Définit des types supplémentaires.
{{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}}{{Spec2('EXT_disjoint_timer_query')}}Ajoute GLuint64EXT
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglbuffer/index.html b/files/fr/web/api/webglbuffer/index.html deleted file mode 100644 index 6bb964f3d6..0000000000 --- a/files/fr/web/api/webglbuffer/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: WebGLBuffer -slug: Web/API/WebGLBuffer -tags: - - API - - Reference - - WebGL -translation_of: Web/API/WebGLBuffer ---- -
{{APIRef("WebGL")}}
- -

L'interface WebGLBuffer fait partie de l'API WebGL et représente un objet tampon opaque stockant des données telles que des sommets ou des couleurs.

- -

Description

- -

L'objet WebGLBuffer ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets WebGLBuffer, les méthodes suivantes du {{domxref ("WebGLRenderingContext")}} sont utiles :

- - - -

Exemples

- -

Création d'un tampon

- -
var canevas = document.getElementById('canevas');
-var gl = canevas.getContext('webgl');
-var tampon = gl.createBuffer();
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.4", "WebGLBuffer")}}{{Spec2('WebGL')}} -

Définition initiale.

-
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLBuffer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglbuffer/index.md b/files/fr/web/api/webglbuffer/index.md new file mode 100644 index 0000000000..6bb964f3d6 --- /dev/null +++ b/files/fr/web/api/webglbuffer/index.md @@ -0,0 +1,65 @@ +--- +title: WebGLBuffer +slug: Web/API/WebGLBuffer +tags: + - API + - Reference + - WebGL +translation_of: Web/API/WebGLBuffer +--- +
{{APIRef("WebGL")}}
+ +

L'interface WebGLBuffer fait partie de l'API WebGL et représente un objet tampon opaque stockant des données telles que des sommets ou des couleurs.

+ +

Description

+ +

L'objet WebGLBuffer ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets WebGLBuffer, les méthodes suivantes du {{domxref ("WebGLRenderingContext")}} sont utiles :

+ + + +

Exemples

+ +

Création d'un tampon

+ +
var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.4", "WebGLBuffer")}}{{Spec2('WebGL')}} +

Définition initiale.

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLBuffer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglframebuffer/index.html b/files/fr/web/api/webglframebuffer/index.html deleted file mode 100644 index 7298aac9d7..0000000000 --- a/files/fr/web/api/webglframebuffer/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: WebGLFramebuffer -slug: Web/API/WebGLFramebuffer -tags: - - API - - Reference - - WebGL -translation_of: Web/API/WebGLFramebuffer ---- -
{{APIRef("WebGL")}}
- -

L'interface WebGL Framebuffer fait partie de l'API WebGL et représente une collection de tampons servant de destination de rendu.

- -

Description

- -

L'objet WebGLFramebuffer ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets WebGLFramebuffer, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :

- - - -

Exemples

- -

Création d'un tampon d'image

- -
var canevas = document.getElementById('canevas');
-var gl = canevas.getContext('webgl');
-var tampon = gl.createFramebuffer();
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.5", "WebGLFramebuffer")}}{{Spec2('WebGL')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLFramebuffer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglframebuffer/index.md b/files/fr/web/api/webglframebuffer/index.md new file mode 100644 index 0000000000..7298aac9d7 --- /dev/null +++ b/files/fr/web/api/webglframebuffer/index.md @@ -0,0 +1,63 @@ +--- +title: WebGLFramebuffer +slug: Web/API/WebGLFramebuffer +tags: + - API + - Reference + - WebGL +translation_of: Web/API/WebGLFramebuffer +--- +
{{APIRef("WebGL")}}
+ +

L'interface WebGL Framebuffer fait partie de l'API WebGL et représente une collection de tampons servant de destination de rendu.

+ +

Description

+ +

L'objet WebGLFramebuffer ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets WebGLFramebuffer, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :

+ + + +

Exemples

+ +

Création d'un tampon d'image

+ +
var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createFramebuffer();
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.5", "WebGLFramebuffer")}}{{Spec2('WebGL')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLFramebuffer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglprogram/index.html b/files/fr/web/api/webglprogram/index.html deleted file mode 100644 index 7818acb85a..0000000000 --- a/files/fr/web/api/webglprogram/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: WebGLProgram -slug: Web/API/WebGLProgram -tags: - - WebGL - - WebGLProgram -translation_of: Web/API/WebGLProgram ---- -
{{APIRef("WebGL")}}
- -

Le WebGLProgram fait partie de l'API WebGL et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable.

- -
var programme = gl.createProgram();
-
-// Lier les shaders préexistants
-gl.attachShader(programme, shaderDeSommet);
-gl.attachShader(programme, shaderDeFragment);
-
-gl.linkProgram(programme);
-
-if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
-  var info = gl.getProgramInfoLog(programme);
-  throw 'Impossible de compiler le program WebGL.\n\n' + info;
-}
-
- -

Voir {{domxref("WebGLShader")}} pour des informations sur la création de shaderDeSommet et de shaderDeFragment dans le programme ci-dessus.

- -

Exemples

- -

Utilisation du programme

- -

Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran.

- -
// Utiliser le programme
-gl.useProgram(programme);
-
-// Lier les données d'attribut existantes
-gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-gl.enableVertexAttribArray(attributeLocation);
-gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
-
-// Dessiner un unique triangle
-gl.drawArrays(gl.TRIANGLES, 0, 3);
-
- -

Suppression du programme

- -

S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié.

- -
gl.deleteProgram(programme);
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.6", "WebGLProgram")}}{{Spec2('WebGL')}}Définition initale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLProgram")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglprogram/index.md b/files/fr/web/api/webglprogram/index.md new file mode 100644 index 0000000000..7818acb85a --- /dev/null +++ b/files/fr/web/api/webglprogram/index.md @@ -0,0 +1,99 @@ +--- +title: WebGLProgram +slug: Web/API/WebGLProgram +tags: + - WebGL + - WebGLProgram +translation_of: Web/API/WebGLProgram +--- +
{{APIRef("WebGL")}}
+ +

Le WebGLProgram fait partie de l'API WebGL et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable.

+ +
var programme = gl.createProgram();
+
+// Lier les shaders préexistants
+gl.attachShader(programme, shaderDeSommet);
+gl.attachShader(programme, shaderDeFragment);
+
+gl.linkProgram(programme);
+
+if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(programme);
+  throw 'Impossible de compiler le program WebGL.\n\n' + info;
+}
+
+ +

Voir {{domxref("WebGLShader")}} pour des informations sur la création de shaderDeSommet et de shaderDeFragment dans le programme ci-dessus.

+ +

Exemples

+ +

Utilisation du programme

+ +

Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran.

+ +
// Utiliser le programme
+gl.useProgram(programme);
+
+// Lier les données d'attribut existantes
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.enableVertexAttribArray(attributeLocation);
+gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
+
+// Dessiner un unique triangle
+gl.drawArrays(gl.TRIANGLES, 0, 3);
+
+ +

Suppression du programme

+ +

S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié.

+ +
gl.deleteProgram(programme);
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.6", "WebGLProgram")}}{{Spec2('WebGL')}}Définition initale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLProgram")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/activetexture/index.html b/files/fr/web/api/webglrenderingcontext/activetexture/index.html deleted file mode 100644 index 2967ea1329..0000000000 --- a/files/fr/web/api/webglrenderingcontext/activetexture/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: WebGLRenderingContext.activeTexture() -slug: Web/API/WebGLRenderingContext/activeTexture -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/activeTexture ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.activeTexture() de l'API WebGL indique quelle unité de texture doit être rendue active.

- -

Syntaxe

- -
void gl.activeTexture(texture);
-
- -

Paramètres

- -
-
texture
-
L'unité de texture à rendre active. La valueur est une gl.TEXTUREI où I est dans la plage de 0 àgl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1.
-
- -

Valeur retournée

- -

Aucune.

- -

Exceptions

- -

Si texture n'est pas l'une des gl.TEXTUREI, où I est dans la plage de 0 àgl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1, une erreur gl.INVALID_ENUM est déclenchée.

- -

Exemples

- -

L'appel suivant choisit gl.TEXTURE1 comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture.

- -
gl.activeTexture(gl.TEXTURE1);
-
- -

Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante MAX_COMBINED_TEXTURE_IMAGE_UNITS. Il est, de par la spécification, d'au moins 8.

- -
gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
-
- -

Pour obtenir la texture en cours, faire une requête sur la constante ACTIVE_TEXTURE.

- -
gl.activeTexture(gl.TEXTURE0);
-gl.getParameter(gl.ACTIVE_TEXTURE);
-// retourne "33984" (0x84C0, valeur enum pour gl.TEXTURE0)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatuéCommentaire
{{SpecName('WebGL', "#5.14.3", "activeTexture")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.activeTexture")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/activetexture/index.md b/files/fr/web/api/webglrenderingcontext/activetexture/index.md new file mode 100644 index 0000000000..2967ea1329 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/activetexture/index.md @@ -0,0 +1,85 @@ +--- +title: WebGLRenderingContext.activeTexture() +slug: Web/API/WebGLRenderingContext/activeTexture +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/activeTexture +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.activeTexture() de l'API WebGL indique quelle unité de texture doit être rendue active.

+ +

Syntaxe

+ +
void gl.activeTexture(texture);
+
+ +

Paramètres

+ +
+
texture
+
L'unité de texture à rendre active. La valueur est une gl.TEXTUREI où I est dans la plage de 0 àgl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exceptions

+ +

Si texture n'est pas l'une des gl.TEXTUREI, où I est dans la plage de 0 àgl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1, une erreur gl.INVALID_ENUM est déclenchée.

+ +

Exemples

+ +

L'appel suivant choisit gl.TEXTURE1 comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture.

+ +
gl.activeTexture(gl.TEXTURE1);
+
+ +

Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante MAX_COMBINED_TEXTURE_IMAGE_UNITS. Il est, de par la spécification, d'au moins 8.

+ +
gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+
+ +

Pour obtenir la texture en cours, faire une requête sur la constante ACTIVE_TEXTURE.

+ +
gl.activeTexture(gl.TEXTURE0);
+gl.getParameter(gl.ACTIVE_TEXTURE);
+// retourne "33984" (0x84C0, valeur enum pour gl.TEXTURE0)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatuéCommentaire
{{SpecName('WebGL', "#5.14.3", "activeTexture")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.activeTexture")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/attachshader/index.html b/files/fr/web/api/webglrenderingcontext/attachshader/index.html deleted file mode 100644 index 9b2c2b9be7..0000000000 --- a/files/fr/web/api/webglrenderingcontext/attachshader/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: WebGLRenderingContext.attachShader() -slug: Web/API/WebGLRenderingContext/attachShader -tags: - - Méthode - - WebGL -translation_of: Web/API/WebGLRenderingContext/attachShader ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.attachShader() de l'API WebGL attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}.

- -

Syntaxe

- -
void gl.attachShader(programme, shader);
-
- -

Paramètres

- -
-
programme
-
Un {{domxref("WebGLProgram")}}.
-
shader
-
Un {{domxref("WebGLShader")}} de fragment ou de sommet.
-
- -

Exemples

- -

Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}.

- -
var programme = gl.createProgram();
-
-// Attacher des shaders pré-existants
-gl.attachShader(programme, shaderDeSommet);
-gl.attachShader(programme, shaderDeFragment);
-
-gl.linkProgram(programme);
-
-if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
-  var info = gl.getProgramInfoLog(programme);
-  throw 'Impossible de compiler le program WebGL. \n\n' + info;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "attachShader")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}}{{Spec2('OpenGL ES 2.0')}}Page man OpenGL.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.attachShader")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/attachshader/index.md b/files/fr/web/api/webglrenderingcontext/attachshader/index.md new file mode 100644 index 0000000000..9b2c2b9be7 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/attachshader/index.md @@ -0,0 +1,96 @@ +--- +title: WebGLRenderingContext.attachShader() +slug: Web/API/WebGLRenderingContext/attachShader +tags: + - Méthode + - WebGL +translation_of: Web/API/WebGLRenderingContext/attachShader +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.attachShader() de l'API WebGL attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}.

+ +

Syntaxe

+ +
void gl.attachShader(programme, shader);
+
+ +

Paramètres

+ +
+
programme
+
Un {{domxref("WebGLProgram")}}.
+
shader
+
Un {{domxref("WebGLShader")}} de fragment ou de sommet.
+
+ +

Exemples

+ +

Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}.

+ +
var programme = gl.createProgram();
+
+// Attacher des shaders pré-existants
+gl.attachShader(programme, shaderDeSommet);
+gl.attachShader(programme, shaderDeFragment);
+
+gl.linkProgram(programme);
+
+if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(programme);
+  throw 'Impossible de compiler le program WebGL. \n\n' + info;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "attachShader")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}}{{Spec2('OpenGL ES 2.0')}}Page man OpenGL.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.attachShader")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html deleted file mode 100644 index 72cc698db6..0000000000 --- a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: WebGLRenderingContext.bindBuffer() -slug: Web/API/WebGLRenderingContext/bindBuffer -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/bindBuffer ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.bindBuffer() de l'API WebGL lie un {{domxref("WebGLBuffer")}} donné à une cible.

- -

Syntaxe

- -
void gl.bindBuffer(cible, tampon);
-
- -

Paramètres

- -
-
cible
-
Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :
-
- - - -
-
tampon
-
Un {{domxref ("WebGLBuffer")}} à lier.
-
- -

Valeur retournée

- -

Aucune.

- -

Exceptions

- -

Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur INVALID_OPERATION et la liaison du tampon en cours restera la même.

- -

Exemples

- -

Liaison d'un tampon à une cible

- -
var canevas = document.getElementById('canevas');
-var gl = canevas.getContext('webgl');
-var tampon = gl.createBuffer();
-
-gl.bindBuffer(gl.ARRAY_BUFFER, tampon);
-
- -

Récupération des liaisons en cours

- -

Pour vérifier les liaisons de tampon en cours, interrogez les constantes ARRAY_BUFFER_BINDING et ELEMENT_ARRAY_BUFFER_BINDING.

- -
gl.getParameter(gl.ARRAY_BUFFER_BINDING);
-gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}{{Spec2('WebGL')}} -

Définition initiale pour WebGL.

-
{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}{{Spec2('OpenGL ES 2.0')}}Page man de l’API OpenGL ES 2 (similaire).
{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}{{Spec2('WebGL2')}} -

Définition mise à jour pour WebGL 2.

- -

Ajoute de nouveaux tampons cible :
- gl.COPY_READ_BUFFER,
- gl.COPY_WRITE_BUFFER,
- gl.TRANSFORM_FEEDBACK_BUFFER,
- gl.UNIFORM_BUFFER,
- gl.PIXEL_PACK_BUFFER,
- gl.PIXEL_UNPACK_BUFFER

-
{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}{{Spec2('OpenGL ES 3.0')}}Page man de l’API OpenGL ES 3 (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.bindBuffer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md new file mode 100644 index 0000000000..72cc698db6 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md @@ -0,0 +1,130 @@ +--- +title: WebGLRenderingContext.bindBuffer() +slug: Web/API/WebGLRenderingContext/bindBuffer +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindBuffer +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.bindBuffer() de l'API WebGL lie un {{domxref("WebGLBuffer")}} donné à une cible.

+ +

Syntaxe

+ +
void gl.bindBuffer(cible, tampon);
+
+ +

Paramètres

+ +
+
cible
+
Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :
+
+ + + +
+
tampon
+
Un {{domxref ("WebGLBuffer")}} à lier.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exceptions

+ +

Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur INVALID_OPERATION et la liaison du tampon en cours restera la même.

+ +

Exemples

+ +

Liaison d'un tampon à une cible

+ +
var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+gl.bindBuffer(gl.ARRAY_BUFFER, tampon);
+
+ +

Récupération des liaisons en cours

+ +

Pour vérifier les liaisons de tampon en cours, interrogez les constantes ARRAY_BUFFER_BINDING et ELEMENT_ARRAY_BUFFER_BINDING.

+ +
gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}{{Spec2('WebGL')}} +

Définition initiale pour WebGL.

+
{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}{{Spec2('OpenGL ES 2.0')}}Page man de l’API OpenGL ES 2 (similaire).
{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}{{Spec2('WebGL2')}} +

Définition mise à jour pour WebGL 2.

+ +

Ajoute de nouveaux tampons cible :
+ gl.COPY_READ_BUFFER,
+ gl.COPY_WRITE_BUFFER,
+ gl.TRANSFORM_FEEDBACK_BUFFER,
+ gl.UNIFORM_BUFFER,
+ gl.PIXEL_PACK_BUFFER,
+ gl.PIXEL_UNPACK_BUFFER

+
{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}{{Spec2('OpenGL ES 3.0')}}Page man de l’API OpenGL ES 3 (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.bindBuffer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/bindtexture/index.html b/files/fr/web/api/webglrenderingcontext/bindtexture/index.html deleted file mode 100644 index 662c18a8be..0000000000 --- a/files/fr/web/api/webglrenderingcontext/bindtexture/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: WebGLRenderingContext.bindTexture() -slug: Web/API/WebGLRenderingContext/bindTexture -tags: - - API - - Méthode - - Reference - - Textures - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/bindTexture ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.bindTexture() de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison).

- -

Syntaxe

- -
void gl.bindTexture(cible, texture);
-
- -

Paramètres

- -
-
cible
-
Un {{domxref ("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : -
    -
  • gl.TEXTURE_2D : une texture bidimensionnelle ;
    • -
  • gl.TEXTURE_CUBE_MAP : une texture mappée sur un cube ;
    • -
  • lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : -
      -
    • gl.TEXTURE_3D : une texture tridimensionnelle ;
      • -
    • gl.TEXTURE_2D_ARRAY : une texture en tableau bidimensionnelle.
      • -
    -
    • -
-
-
texture
-
Un objet {{domxref ("WebGLTexture")}} à lier.
-
- -

Valeur retournée

- -

Aucune.

- -

Exceptions

- -

Une erreur gl.INVALID_ENUM est déclenchée si cible n'est pas gl.TEXTURE_2D, gl.TEXTURE_CUBE_MAP, gl.TEXTURE_3D, ou gl.TEXTURE_2D_ARRAY.

- -

Exemples

- -

Liaison d'une texture

- -
var canevas = document.getElementById('canevas');
-var gl = canevas.getContext('webgl');
-var texture = gl.createTexture();
-
-gl.bindTexture(gl.TEXTURE_2D, texture);
-
- -

Obtention des liaisons en cours

- -

Pour vérifier la liaison de texture en cours, interrogez les constantes gl.TEXTURE_BINDING_2D ou gl.TEXTURE_BINDING_CUBE_MAP.

- -
gl.getParameter(gl.TEXTURE_BINDING_2D);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "bindTexture")}}{{Spec2('WebGL')}} -

Définition initiale pour WebGL.

-
{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}{{Spec2('OpenGL ES 2.0')}} -

Page man de l’API OpenGL ES 2.0 (similaire).

-
{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}{{Spec2('WebGL2')}}Définition mise à jour pour WebGL 2.
- Ajoute : gl.TEXTURE_3D et  gl.TEXTURE_2D_ARRAY
{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}{{Spec2('OpenGL ES 3.0')}}Page man de l’API OpenGL ES 3.0 (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.bindTexture")}}

- -

Voir aussi

- - - - diff --git a/files/fr/web/api/webglrenderingcontext/bindtexture/index.md b/files/fr/web/api/webglrenderingcontext/bindtexture/index.md new file mode 100644 index 0000000000..662c18a8be --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/bindtexture/index.md @@ -0,0 +1,119 @@ +--- +title: WebGLRenderingContext.bindTexture() +slug: Web/API/WebGLRenderingContext/bindTexture +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bindTexture +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.bindTexture() de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison).

+ +

Syntaxe

+ +
void gl.bindTexture(cible, texture);
+
+ +

Paramètres

+ +
+
cible
+
Un {{domxref ("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : +
    +
  • gl.TEXTURE_2D : une texture bidimensionnelle ;
    • +
  • gl.TEXTURE_CUBE_MAP : une texture mappée sur un cube ;
    • +
  • lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : +
      +
    • gl.TEXTURE_3D : une texture tridimensionnelle ;
      • +
    • gl.TEXTURE_2D_ARRAY : une texture en tableau bidimensionnelle.
      • +
    +
    • +
+
+
texture
+
Un objet {{domxref ("WebGLTexture")}} à lier.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exceptions

+ +

Une erreur gl.INVALID_ENUM est déclenchée si cible n'est pas gl.TEXTURE_2D, gl.TEXTURE_CUBE_MAP, gl.TEXTURE_3D, ou gl.TEXTURE_2D_ARRAY.

+ +

Exemples

+ +

Liaison d'une texture

+ +
var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var texture = gl.createTexture();
+
+gl.bindTexture(gl.TEXTURE_2D, texture);
+
+ +

Obtention des liaisons en cours

+ +

Pour vérifier la liaison de texture en cours, interrogez les constantes gl.TEXTURE_BINDING_2D ou gl.TEXTURE_BINDING_CUBE_MAP.

+ +
gl.getParameter(gl.TEXTURE_BINDING_2D);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "bindTexture")}}{{Spec2('WebGL')}} +

Définition initiale pour WebGL.

+
{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}{{Spec2('OpenGL ES 2.0')}} +

Page man de l’API OpenGL ES 2.0 (similaire).

+
{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}{{Spec2('WebGL2')}}Définition mise à jour pour WebGL 2.
+ Ajoute : gl.TEXTURE_3D et  gl.TEXTURE_2D_ARRAY
{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}{{Spec2('OpenGL ES 3.0')}}Page man de l’API OpenGL ES 3.0 (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.bindTexture")}}

+ +

Voir aussi

+ + + + diff --git a/files/fr/web/api/webglrenderingcontext/bufferdata/index.html b/files/fr/web/api/webglrenderingcontext/bufferdata/index.html deleted file mode 100644 index e9512ad7bd..0000000000 --- a/files/fr/web/api/webglrenderingcontext/bufferdata/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: WebGLRenderingContext.bufferData() -slug: Web/API/WebGLRenderingContext/bufferData -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/bufferData ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.bufferData() de l'API WebGL initialise et crée le magasin de données de l'objet tampon.

- -

Syntaxe

- -
// WebGL1:
-void gl.bufferData(cible, taille, utilisation);
-void gl.bufferData(cible, ArrayBuffer? donneesSrc, utilisation);
-void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation);
-
-// WebGL2:
-void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation, decalageSrc, longueur);
-
- -

Paramètres

- -
-
cible
-
Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles : -
    -
  • gl.ARRAY_BUFFER : tampon contenant des attributs de sommet, tels que des coordonnées de sommet, des données de coordonnées de texture ou des données de couleurs de sommet ;
    • -
  • gl.ELEMENT_ARRAY_BUFFER : tampon utilisé pour les indices d'éléments ;
    • -
  • lors de l'utilisation d'un {{domxref ("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont en outre disponibles : -
      -
    • gl.COPY_READ_BUFFER : tampon pour la copie d'un objet tampon à un autre ;
      • -
    • gl.COPY_WRITE_BUFFER : tampon pour la copie d'un objet tampon à un autre ;
      • -
    • gl.TRANSFORM_FEEDBACK_BUFFER : tampon pour les opérations de retour de transformation ;
      • -
    • gl.UNIFORM_BUFFER : tampon utilisé pour stocker des blocs uniform ;
      • -
    • gl.PIXEL_PACK_BUFFER : tampon utilisé pour les opérations de transfert de pixels ;
      • -
    • gl.PIXEL_UNPACK_BUFFER : tampon utilisé pour les opérations de transfert de pixels.
      • -
    -
    • -
-
-
taille
-
Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon.
-
donneesSrc {{optional_inline}}
-
Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si null, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini.
-
utilisation
-
Un {{domxref("GLenum")}} indiquant le modèle d'utilisation du magasin de données. Valeurs possibles : -
    -
  • gl.STATIC_DRAW : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ;
    • -
  • gl.DYNAMIC_DRAW : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ;
    • -
  • gl.STREAM_DRAW : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ;
    • -
  • lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles : -
      -
    • gl.STATIC_READ : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;
      • -
    • gl.DYNAMIC_READ : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;
      • -
    • gl.STREAM_READ : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ;
      • -
    • gl.STATIC_COPY : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;
      • -
    • gl.DYNAMIC_COPY : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;
      • -
    • gl.STREAM_COPY : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur.
      • -
    -
    • -
-
-
decalageSrc
-
Un {{domxref("GLuint")}} indiquant le décalage d'indice d'élément où commencer à lire dans le tampon.
-
longueur {{optional_inline}}
-
Un {{domxref("GLuint")}} valant 0 par défaut.
-
- -

Valeur retournée

- -

Aucune.

- -

Exceptions

- - - -

Exemples

- -

Utilisation de bufferData

- -
var canevas = document.getElementById('canevas');
-var gl = canevas.getContext('webgl');
-var tampon = gl.createBuffer();
-gl.bindBuffer(gl.ARRAY_BUFFER, tampon);
-gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
-
- -

Récupération de l'information de tampon

- -

Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}.

- -
gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
-gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.5", "bufferData")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}{{Spec2('OpenGL ES 2.0')}} -

Page man de l’API OpenGL.

-
{{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}{{Spec2('OpenGL ES 3.0')}} -

Page man de l’API OpenGL ES 3 (similaire).

- Ajoute les noouveaux tampons cible :
- gl.COPY_READ_BUFFER,
- gl.COPY_WRITE_BUFFER,
- gl.TRANSFORM_FEEDBACK_BUFFER,
- gl.UNIFORM_BUFFER,
- gl.PIXEL_PACK_BUFFER,
- gl.PIXEL_UNPACK_BUFFER
-
- Ajoute les nouvelles indications d'utilisation :
- gl.STATIC_READ,
- gl.DYNAMIC_READ,
- gl.STREAM_READ,
- gl.STATIC_COPY,
- gl.DYNAMIC_COPY,
- gl.STREAM_COPY.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.bufferData")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/bufferdata/index.md b/files/fr/web/api/webglrenderingcontext/bufferdata/index.md new file mode 100644 index 0000000000..e9512ad7bd --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/bufferdata/index.md @@ -0,0 +1,161 @@ +--- +title: WebGLRenderingContext.bufferData() +slug: Web/API/WebGLRenderingContext/bufferData +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/bufferData +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.bufferData() de l'API WebGL initialise et crée le magasin de données de l'objet tampon.

+ +

Syntaxe

+ +
// WebGL1:
+void gl.bufferData(cible, taille, utilisation);
+void gl.bufferData(cible, ArrayBuffer? donneesSrc, utilisation);
+void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation);
+
+// WebGL2:
+void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation, decalageSrc, longueur);
+
+ +

Paramètres

+ +
+
cible
+
Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles : +
    +
  • gl.ARRAY_BUFFER : tampon contenant des attributs de sommet, tels que des coordonnées de sommet, des données de coordonnées de texture ou des données de couleurs de sommet ;
    • +
  • gl.ELEMENT_ARRAY_BUFFER : tampon utilisé pour les indices d'éléments ;
    • +
  • lors de l'utilisation d'un {{domxref ("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont en outre disponibles : +
      +
    • gl.COPY_READ_BUFFER : tampon pour la copie d'un objet tampon à un autre ;
      • +
    • gl.COPY_WRITE_BUFFER : tampon pour la copie d'un objet tampon à un autre ;
      • +
    • gl.TRANSFORM_FEEDBACK_BUFFER : tampon pour les opérations de retour de transformation ;
      • +
    • gl.UNIFORM_BUFFER : tampon utilisé pour stocker des blocs uniform ;
      • +
    • gl.PIXEL_PACK_BUFFER : tampon utilisé pour les opérations de transfert de pixels ;
      • +
    • gl.PIXEL_UNPACK_BUFFER : tampon utilisé pour les opérations de transfert de pixels.
      • +
    +
    • +
+
+
taille
+
Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon.
+
donneesSrc {{optional_inline}}
+
Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si null, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini.
+
utilisation
+
Un {{domxref("GLenum")}} indiquant le modèle d'utilisation du magasin de données. Valeurs possibles : +
    +
  • gl.STATIC_DRAW : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ;
    • +
  • gl.DYNAMIC_DRAW : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ;
    • +
  • gl.STREAM_DRAW : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ;
    • +
  • lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles : +
      +
    • gl.STATIC_READ : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;
      • +
    • gl.DYNAMIC_READ : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;
      • +
    • gl.STREAM_READ : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ;
      • +
    • gl.STATIC_COPY : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;
      • +
    • gl.DYNAMIC_COPY : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;
      • +
    • gl.STREAM_COPY : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur.
      • +
    +
    • +
+
+
decalageSrc
+
Un {{domxref("GLuint")}} indiquant le décalage d'indice d'élément où commencer à lire dans le tampon.
+
longueur {{optional_inline}}
+
Un {{domxref("GLuint")}} valant 0 par défaut.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exceptions

+ + + +

Exemples

+ +

Utilisation de bufferData

+ +
var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, tampon);
+gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
+
+ +

Récupération de l'information de tampon

+ +

Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}.

+ +
gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
+gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.5", "bufferData")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}{{Spec2('OpenGL ES 2.0')}} +

Page man de l’API OpenGL.

+
{{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}{{Spec2('OpenGL ES 3.0')}} +

Page man de l’API OpenGL ES 3 (similaire).

+ Ajoute les noouveaux tampons cible :
+ gl.COPY_READ_BUFFER,
+ gl.COPY_WRITE_BUFFER,
+ gl.TRANSFORM_FEEDBACK_BUFFER,
+ gl.UNIFORM_BUFFER,
+ gl.PIXEL_PACK_BUFFER,
+ gl.PIXEL_UNPACK_BUFFER
+
+ Ajoute les nouvelles indications d'utilisation :
+ gl.STATIC_READ,
+ gl.DYNAMIC_READ,
+ gl.STREAM_READ,
+ gl.STATIC_COPY,
+ gl.DYNAMIC_COPY,
+ gl.STREAM_COPY.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.bufferData")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/canvas/index.html b/files/fr/web/api/webglrenderingcontext/canvas/index.html deleted file mode 100644 index ccdfa7ed8a..0000000000 --- a/files/fr/web/api/webglrenderingcontext/canvas/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: WebGLRenderingContext.canvas -slug: Web/API/WebGLRenderingContext/canvas -tags: - - Propriété - - WebGL - - WebGLRenderingContext - - lecture seule -translation_of: Web/API/WebGLRenderingContext/canvas -original_slug: Web/API/WebGLRenderingContext/canevas ---- -
{{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

- - diff --git a/files/fr/web/api/webglrenderingcontext/canvas/index.md b/files/fr/web/api/webglrenderingcontext/canvas/index.md new file mode 100644 index 0000000000..ccdfa7ed8a --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/canvas/index.md @@ -0,0 +1,74 @@ +--- +title: WebGLRenderingContext.canvas +slug: Web/API/WebGLRenderingContext/canvas +tags: + - Propriété + - WebGL + - WebGLRenderingContext + - lecture seule +translation_of: Web/API/WebGLRenderingContext/canvas +original_slug: Web/API/WebGLRenderingContext/canevas +--- +
{{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

+ + diff --git a/files/fr/web/api/webglrenderingcontext/clear/index.html b/files/fr/web/api/webglrenderingcontext/clear/index.html deleted file mode 100644 index 69acd2f1d1..0000000000 --- a/files/fr/web/api/webglrenderingcontext/clear/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: WebGLRenderingContext.clear() -slug: Web/API/WebGLRenderingContext/clear -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/clear ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.clear() de l'API WebGL efface les tampons avec des valeurs prédéfinies.

- -

Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}.

- -

Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode clear().

- -

Syntaxe

- -
void gl.clear(masque);
-
- -

Paramètres

- -
-
masque
-
Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont : -
    -
  • gl.COLOR_BUFFER_BIT
    • -
  • gl.DEPTH_BUFFER_BIT
    • -
  • gl.STENCIL_BUFFER_BIT
    • -
-
-
- -

Valeur retournée

- -

Aucune.

- -

Exceptions

- -

Si masque n'est pas l'une des valeurs possibles listées, une erreur gl.INVALID_ENUM est déclenchée.

- -

Exemples

- -

La méthode clear() accepte des valeurs multiples.

- -
gl.clear(gl.DEPTH_BUFFER_BIT);
-gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
-
- -

Pour obtenir les valeurs d'effacement courantes, interrogez les constantes COLOR_CLEAR_VALUE, DEPTH_CLEAR_VALUE et STENCIL_CLEAR_VALUE grâce à la méthode getParameter().

- -
gl.getParameter(gl.COLOR_CLEAR_VALUE);
-gl.getParameter(gl.DEPTH_CLEAR_VALUE);
-gl.getParameter(gl.STENCIL_CLEAR_VALUE);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.11", "clear")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.clear")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/clear/index.md b/files/fr/web/api/webglrenderingcontext/clear/index.md new file mode 100644 index 0000000000..69acd2f1d1 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/clear/index.md @@ -0,0 +1,93 @@ +--- +title: WebGLRenderingContext.clear() +slug: Web/API/WebGLRenderingContext/clear +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/clear +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.clear() de l'API WebGL efface les tampons avec des valeurs prédéfinies.

+ +

Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}.

+ +

Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode clear().

+ +

Syntaxe

+ +
void gl.clear(masque);
+
+ +

Paramètres

+ +
+
masque
+
Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont : +
    +
  • gl.COLOR_BUFFER_BIT
    • +
  • gl.DEPTH_BUFFER_BIT
    • +
  • gl.STENCIL_BUFFER_BIT
    • +
+
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exceptions

+ +

Si masque n'est pas l'une des valeurs possibles listées, une erreur gl.INVALID_ENUM est déclenchée.

+ +

Exemples

+ +

La méthode clear() accepte des valeurs multiples.

+ +
gl.clear(gl.DEPTH_BUFFER_BIT);
+gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+
+ +

Pour obtenir les valeurs d'effacement courantes, interrogez les constantes COLOR_CLEAR_VALUE, DEPTH_CLEAR_VALUE et STENCIL_CLEAR_VALUE grâce à la méthode getParameter().

+ +
gl.getParameter(gl.COLOR_CLEAR_VALUE);
+gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.11", "clear")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.clear")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/compileshader/index.html b/files/fr/web/api/webglrenderingcontext/compileshader/index.html deleted file mode 100644 index 4727567959..0000000000 --- a/files/fr/web/api/webglrenderingcontext/compileshader/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: WebGLRenderingContext.compileShader() -slug: Web/API/WebGLRenderingContext/compileShader -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/compileShader ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.compileShader() de l'API WebGL compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}.

- -

Syntaxe

- -
void gl.compileShader(shader);
-
- -

Paramètres

- -
-
shader
-
Un {{domxref("WebGLShader")}} de fragments ou de sommets.
-
- -

Exemples

- -
var shader = gl.createShader(gl.VERTEX_SHADER);
-gl.shaderSource(shader, sourceShader);
-gl.compileShader(shader);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "compileShader")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}{{Spec2('OpenGL ES 2.0')}}Page man OpenGL.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.compileShader")}}

- -

Voire aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/compileshader/index.md b/files/fr/web/api/webglrenderingcontext/compileshader/index.md new file mode 100644 index 0000000000..4727567959 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/compileshader/index.md @@ -0,0 +1,85 @@ +--- +title: WebGLRenderingContext.compileShader() +slug: Web/API/WebGLRenderingContext/compileShader +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/compileShader +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.compileShader() de l'API WebGL compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}.

+ +

Syntaxe

+ +
void gl.compileShader(shader);
+
+ +

Paramètres

+ +
+
shader
+
Un {{domxref("WebGLShader")}} de fragments ou de sommets.
+
+ +

Exemples

+ +
var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, sourceShader);
+gl.compileShader(shader);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "compileShader")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}{{Spec2('OpenGL ES 2.0')}}Page man OpenGL.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.compileShader")}}

+ +

Voire aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/createbuffer/index.html b/files/fr/web/api/webglrenderingcontext/createbuffer/index.html deleted file mode 100644 index 6970f50070..0000000000 --- a/files/fr/web/api/webglrenderingcontext/createbuffer/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: WebGLRenderingContext.createBuffer() -slug: Web/API/WebGLRenderingContext/createBuffer -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/createBuffer ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.createBuffer() de l'API WebGL crée et initialise un {{domxref ("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.

- -

Syntaxe

- -
WebGLBuffer gl.createBuffer();
-
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

Un {{domxref("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.

- -

Exemples

- -

Création d'un tampon

- -
var canevas = document.getElementById('canevas');
-var gl = canevas.getContext('webgl');
-var tampon = gl.createBuffer();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.5", "createBuffer")}}{{Spec2('WebGL')}} -

Définition initiale.

-
{{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}{{Spec2('OpenGL ES 2.0')}} -

Page man de l’API OpenGL (similaire).

-
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.createBuffer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/createbuffer/index.md b/files/fr/web/api/webglrenderingcontext/createbuffer/index.md new file mode 100644 index 0000000000..6970f50070 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/createbuffer/index.md @@ -0,0 +1,75 @@ +--- +title: WebGLRenderingContext.createBuffer() +slug: Web/API/WebGLRenderingContext/createBuffer +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/createBuffer +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.createBuffer() de l'API WebGL crée et initialise un {{domxref ("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.

+ +

Syntaxe

+ +
WebGLBuffer gl.createBuffer();
+
+ +

Paramètres

+ +

Aucun.

+ +

Valeur retournée

+ +

Un {{domxref("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.

+ +

Exemples

+ +

Création d'un tampon

+ +
var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.5", "createBuffer")}}{{Spec2('WebGL')}} +

Définition initiale.

+
{{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}{{Spec2('OpenGL ES 2.0')}} +

Page man de l’API OpenGL (similaire).

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.createBuffer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/createprogram/index.html b/files/fr/web/api/webglrenderingcontext/createprogram/index.html deleted file mode 100644 index 4b59a8b581..0000000000 --- a/files/fr/web/api/webglrenderingcontext/createprogram/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: WebGLRenderingContext.createProgram() -slug: Web/API/WebGLRenderingContext/createProgram -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/createProgram ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.createProgram() de l'API WebGL crée et initialise un objet {{domxref("WebGLProgram")}}.

- -

Syntaxe

- -
WebGLProgram gl.createProgram();
-
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable.

- -

Exemples

- -

Création d'un programme WebGL

- -
var programme = gl.createProgram();
-
-// Attacher les shaders pré-existants
-gl.attachShader(programme, shaderDeSommet);
-gl.attachShader(programme, shaderDeFragment);
-
-gl.linkProgram(programme);
-
-if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
-  var info = gl.getProgramInfoLog(program);
-  throw 'Impossible de compiler le programme WebGL. \n\n' + info;
-}
-
- -

Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du shaderDeSommet et du shaderDeFragment dans l'exemple ci-dessus.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "createProgram")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.createProgram")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/createprogram/index.md b/files/fr/web/api/webglrenderingcontext/createprogram/index.md new file mode 100644 index 0000000000..4b59a8b581 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/createprogram/index.md @@ -0,0 +1,85 @@ +--- +title: WebGLRenderingContext.createProgram() +slug: Web/API/WebGLRenderingContext/createProgram +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/createProgram +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.createProgram() de l'API WebGL crée et initialise un objet {{domxref("WebGLProgram")}}.

+ +

Syntaxe

+ +
WebGLProgram gl.createProgram();
+
+ +

Paramètres

+ +

Aucun.

+ +

Valeur retournée

+ +

Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable.

+ +

Exemples

+ +

Création d'un programme WebGL

+ +
var programme = gl.createProgram();
+
+// Attacher les shaders pré-existants
+gl.attachShader(programme, shaderDeSommet);
+gl.attachShader(programme, shaderDeFragment);
+
+gl.linkProgram(programme);
+
+if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw 'Impossible de compiler le programme WebGL. \n\n' + info;
+}
+
+ +

Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du shaderDeSommet et du shaderDeFragment dans l'exemple ci-dessus.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "createProgram")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.createProgram")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/createshader/index.html b/files/fr/web/api/webglrenderingcontext/createshader/index.html deleted file mode 100644 index d67f27443d..0000000000 --- a/files/fr/web/api/webglrenderingcontext/createshader/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: WebGLRenderingContext.createShader() -slug: Web/API/WebGLRenderingContext/createShader -tags: - - API - - Graphiques - - Méthode - - Reference - - Shader - - WebGL -translation_of: Web/API/WebGLRenderingContext/createShader ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.createShader() de l'API WebGL crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}.

- -

Syntaxe

- -
WebGLShader gl.createShader(type);
-
- -

Paramètres

- -
-
type
-
Soit gl.VERTEX_SHADER, soit gl.FRAGMENT_SHADER
-
- -

Exemples

- -

Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "createShader")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}}{{Spec2('OpenGL ES 2.0')}}Page man OpenGL.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.createShader")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/createshader/index.md b/files/fr/web/api/webglrenderingcontext/createshader/index.md new file mode 100644 index 0000000000..d67f27443d --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/createshader/index.md @@ -0,0 +1,85 @@ +--- +title: WebGLRenderingContext.createShader() +slug: Web/API/WebGLRenderingContext/createShader +tags: + - API + - Graphiques + - Méthode + - Reference + - Shader + - WebGL +translation_of: Web/API/WebGLRenderingContext/createShader +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.createShader() de l'API WebGL crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}.

+ +

Syntaxe

+ +
WebGLShader gl.createShader(type);
+
+ +

Paramètres

+ +
+
type
+
Soit gl.VERTEX_SHADER, soit gl.FRAGMENT_SHADER
+
+ +

Exemples

+ +

Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "createShader")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}}{{Spec2('OpenGL ES 2.0')}}Page man OpenGL.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.createShader")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/createtexture/index.html b/files/fr/web/api/webglrenderingcontext/createtexture/index.html deleted file mode 100644 index 2ac9c1fd62..0000000000 --- a/files/fr/web/api/webglrenderingcontext/createtexture/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: WebGLRenderingContext.createTexture() -slug: Web/API/WebGLRenderingContext/createTexture -tags: - - API - - Méthode - - Reference - - Textures - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/createTexture ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.createTexture() de l'API WebGL crée et initialise un objet {{domxref("WebGLTexture")}}.

- -

Syntaxe

- -
WebGLTexture gl.createTexture();
-
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées.

- -

Exemples

- -

Voir aussi le tutoriel WebGL sur l'Utilisation de textures en WebGL.

- -

Création d'une texture

- -
var canevas = document.getElementById('canevas');
-var gl = canevas.getContext('webgl');
-var texture = gl.createTexture();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "createTexture")}}{{Spec2('WebGL')}} -

Définition initiale.

-
{{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}}{{Spec2('OpenGL ES 2.0')}}Page man de l’API OpenGL (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.createTexture")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/createtexture/index.md b/files/fr/web/api/webglrenderingcontext/createtexture/index.md new file mode 100644 index 0000000000..2ac9c1fd62 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/createtexture/index.md @@ -0,0 +1,76 @@ +--- +title: WebGLRenderingContext.createTexture() +slug: Web/API/WebGLRenderingContext/createTexture +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/createTexture +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.createTexture() de l'API WebGL crée et initialise un objet {{domxref("WebGLTexture")}}.

+ +

Syntaxe

+ +
WebGLTexture gl.createTexture();
+
+ +

Paramètres

+ +

Aucun.

+ +

Valeur retournée

+ +

Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées.

+ +

Exemples

+ +

Voir aussi le tutoriel WebGL sur l'Utilisation de textures en WebGL.

+ +

Création d'une texture

+ +
var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var texture = gl.createTexture();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "createTexture")}}{{Spec2('WebGL')}} +

Définition initiale.

+
{{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}}{{Spec2('OpenGL ES 2.0')}}Page man de l’API OpenGL (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.createTexture")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html deleted file mode 100644 index 561e0c77c6..0000000000 --- a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: WebGLRenderingContext.deleteBuffer() -slug: Web/API/WebGLRenderingContext/deleteBuffer -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/deleteBuffer ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.deleteBuffer() de l'API WebGL supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé.

- -

Syntaxe

- -
void gl.deleteBuffer(tampon);
-
- -

Paramètres

- -
-
tampon
-
Un objet {{domxref("WebGLBuffer")}} à supprimer.
-
- -

Valeur retournée

- -

Aucune.

- -

Exemples

- -

Suppression d'un tampon

- -
var canevas = document.getElementById('canevas');
-var gl = canevas.getContext('webgl');
-var tampon = gl.createBuffer();
-
-// ...
-
-gl.deleteBuffer(tampon);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.5", "deleteBuffer")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glDeleteBuffers.xml", "glDeleteBuffers")}}{{Spec2('OpenGL ES 2.0')}}Page man de l’API OpenGL (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.deleteBuffer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md new file mode 100644 index 0000000000..561e0c77c6 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md @@ -0,0 +1,77 @@ +--- +title: WebGLRenderingContext.deleteBuffer() +slug: Web/API/WebGLRenderingContext/deleteBuffer +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/deleteBuffer +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.deleteBuffer() de l'API WebGL supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé.

+ +

Syntaxe

+ +
void gl.deleteBuffer(tampon);
+
+ +

Paramètres

+ +
+
tampon
+
Un objet {{domxref("WebGLBuffer")}} à supprimer.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exemples

+ +

Suppression d'un tampon

+ +
var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+// ...
+
+gl.deleteBuffer(tampon);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.5", "deleteBuffer")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glDeleteBuffers.xml", "glDeleteBuffers")}}{{Spec2('OpenGL ES 2.0')}}Page man de l’API OpenGL (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.deleteBuffer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/deleteshader/index.html b/files/fr/web/api/webglrenderingcontext/deleteshader/index.html deleted file mode 100644 index 01a62f3e7a..0000000000 --- a/files/fr/web/api/webglrenderingcontext/deleteshader/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: WebGLRenderingContext.deleteShader() -slug: Web/API/WebGLRenderingContext/deleteShader -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/deleteShader ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.deleteShader() de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector.

- -

Syntaxe

- -
void gl.deleteShader(shader);
-
- -

Paramètres

- -
-
shader
-
Un objet {{domxref("WebGLShader")}} à détruire.
-
- -

Valeur retournée

- -

Aucune.

- -

Exemples

- -

Suppression d'un shader

- -
gl.deleteShader(shader);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "deleteShader")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glDeleteShader.xml", "glDeleteShader")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.deleteShader")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/deleteshader/index.md b/files/fr/web/api/webglrenderingcontext/deleteshader/index.md new file mode 100644 index 0000000000..01a62f3e7a --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/deleteshader/index.md @@ -0,0 +1,70 @@ +--- +title: WebGLRenderingContext.deleteShader() +slug: Web/API/WebGLRenderingContext/deleteShader +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/deleteShader +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.deleteShader() de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector.

+ +

Syntaxe

+ +
void gl.deleteShader(shader);
+
+ +

Paramètres

+ +
+
shader
+
Un objet {{domxref("WebGLShader")}} à détruire.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exemples

+ +

Suppression d'un shader

+ +
gl.deleteShader(shader);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "deleteShader")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glDeleteShader.xml", "glDeleteShader")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.deleteShader")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/drawarrays/index.html b/files/fr/web/api/webglrenderingcontext/drawarrays/index.html deleted file mode 100644 index 8bdffeed97..0000000000 --- a/files/fr/web/api/webglrenderingcontext/drawarrays/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: WebGLRenderingContext.drawArrays() -slug: Web/API/WebGLRenderingContext/drawArrays -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/drawArrays ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.drawArrays() de l'API WebGL dessine des primitives à partir de données tabulaires.

- -

Syntaxe

- -
void gl.drawArrays(mode, premier, compte);
-
- -

Paramètres

- -
-
mode
-
Un {{domxref ("GLenum")}} indiquant la primitive de type à dessiner. Les valeurs possibles sont : -
    -
  • gl.POINTS : dessine un seul point ;
    • -
  • gl.LINE_STRIP : dessine une ligne droite jusqu'au sommet suivant ;
    • -
  • gl.LINE_LOOP : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ;
    • -
  • gl.LINES : dessine une ligne entre une paire de sommets ;
    • -
  • gl.TRIANGLE_STRIP
    • -
  • gl.TRIANGLE_FAN
    • -
  • gl.TRIANGLES : dessine un triangle pour un groupe de trois sommets.
    • -
-
-
premier
-
Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs.
-
compte
-
Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner.
-
- -

Valeur retournée

- -

None.

- -

Exceptions

- - - -

Exemples

- -
gl.drawArrays(gl.POINTS, 0, 8);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.11", "drawArrays")}}{{Spec2('WebGL')}} -

 

- Définition initiale.
{{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}{{Spec2('OpenGL ES 2.0')}} -

Page man de l’API OpenGL.

-
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.drawArrays")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/drawarrays/index.md b/files/fr/web/api/webglrenderingcontext/drawarrays/index.md new file mode 100644 index 0000000000..8bdffeed97 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/drawarrays/index.md @@ -0,0 +1,99 @@ +--- +title: WebGLRenderingContext.drawArrays() +slug: Web/API/WebGLRenderingContext/drawArrays +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/drawArrays +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.drawArrays() de l'API WebGL dessine des primitives à partir de données tabulaires.

+ +

Syntaxe

+ +
void gl.drawArrays(mode, premier, compte);
+
+ +

Paramètres

+ +
+
mode
+
Un {{domxref ("GLenum")}} indiquant la primitive de type à dessiner. Les valeurs possibles sont : +
    +
  • gl.POINTS : dessine un seul point ;
    • +
  • gl.LINE_STRIP : dessine une ligne droite jusqu'au sommet suivant ;
    • +
  • gl.LINE_LOOP : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ;
    • +
  • gl.LINES : dessine une ligne entre une paire de sommets ;
    • +
  • gl.TRIANGLE_STRIP
    • +
  • gl.TRIANGLE_FAN
    • +
  • gl.TRIANGLES : dessine un triangle pour un groupe de trois sommets.
    • +
+
+
premier
+
Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs.
+
compte
+
Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner.
+
+ +

Valeur retournée

+ +

None.

+ +

Exceptions

+ + + +

Exemples

+ +
gl.drawArrays(gl.POINTS, 0, 8);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.11", "drawArrays")}}{{Spec2('WebGL')}} +

 

+ Définition initiale.
{{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}{{Spec2('OpenGL ES 2.0')}} +

Page man de l’API OpenGL.

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.drawArrays")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/enable/index.html b/files/fr/web/api/webglrenderingcontext/enable/index.html deleted file mode 100644 index 3a4a7633b1..0000000000 --- a/files/fr/web/api/webglrenderingcontext/enable/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: WebGLRenderingContext.enable() -slug: Web/API/WebGLRenderingContext/enable -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/enable -original_slug: Web/API/WebGLRenderingContext/activer ---- -
{{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

- - diff --git a/files/fr/web/api/webglrenderingcontext/enable/index.md b/files/fr/web/api/webglrenderingcontext/enable/index.md new file mode 100644 index 0000000000..3a4a7633b1 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/enable/index.md @@ -0,0 +1,142 @@ +--- +title: WebGLRenderingContext.enable() +slug: Web/API/WebGLRenderingContext/enable +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/enable +original_slug: Web/API/WebGLRenderingContext/activer +--- +
{{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

+ + diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html deleted file mode 100644 index a573a50f6c..0000000000 --- a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: WebGLRenderingContext.enableVertexAttribArray() -slug: Web/API/WebGLRenderingContext/enableVertexAttribArray -tags: - - 3D - - API - - API WebGL - - Attributs des Sommets - - Graphiques - - Méthode - - Reference - - Tableau des Attributs - - WebGL - - WebGLRenderingContext - - enableVertexAttribArray - - shader de sommet - - sommet -translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray ---- -
{{APIRef("WebGL")}}
- -

La méthode {{domxref ("WebGLRenderingContext")}} enableVertexAttribArray() - qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs.

- -
-

Note : Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.

-
- -

Dans WebGL, les valeurs s'appliquant à un sommet particulier sont stockées dans des attributs. Ceux-ci ne sont disponibles que pour le code JavaScript et le shader de sommet. Les attributs sont référencés par un numéro d'indice dans la liste des attributs gérés par la GPU. Certains indices d'attributs de sommet peuvent avoir des buts prédéfinis, suivant la plate-forme et/ou la GPU. D'autres sont affectés par la couche WebGL lorsque vous créez les attributs.

- -

De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont désactivés par défaut, vous devez appeler enableVertexAttribArray() pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}.

- -

Syntaxe

- -
void gl.enableVertexAttribArray(indice);
-
- -

Paramètres

- -
-
indice
-
Un {{domxref("GLuint")}} indiquant le numéro d'indice identifiant de façon unique l'attribut de sommet à activer. Si vous connaissez le nom de l'attribut mais pas son indice, vous pouvez obtenir l'indice en appelant {{domxref ("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.
-
- -

Valeur retournée

- -

undefined.

- -

Erreurs

- -

Pour vérifier d'éventuelles erreurs  après l'appel à enableVertexAttribArray(), appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}.

- -
-
WebGLRenderingContext.INVALID_VALUE
-
L'indice spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de WebGLRenderingContext.MAX_VERTEX_ATTRIBS.
-
- -

Exemple

- -

Ce code — un extrait de l'exemple complet Un exemple d'animation 2D WebGL de base — montre l'utilisation de enableVertexArray() pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet.

- -
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-
-aVertexPosition =
-    gl.getAttribLocation(programmeShader, "aVertexPosition");
-
-gl.enableVertexAttribArray(aVertexPosition);
-gl.vertexAttribPointer(aVertexPosition, vertexNumComponents,
-      gl.FLOAT, false, 0, 0);
-
-gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
- -
-

Note : Cet extrait de code provient de la fonction animateScene() dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.

-
- -

Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.

- -

Avec l'indice de l'attribut de position des sommets maintenant disponible dans aVertexPosition, nous appelons enableVertexAttribArray() pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet).

- -

Le tampon des sommets est alors lié à l'attribut aVertexPosition en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à aVertexPosition récupére désormais des données à partir du tampon des sommets.

- -

Avec l'association définie entre le tampon des sommets de notre forme et l'attribut aVertexPosition utilisé pour fournir les sommets un par un dans le shader de sommet, nous sommes prêts à dessiner la forme en appelant {{domxref ("WebGLRenderingContext.drawArrays", "drawArrays()")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "enableVertexAttribArray")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glEnableVertexAttribArray.xml", "glEnableVertexAttribArray")}}{{Spec2('OpenGL ES 2.0')}} -

Page man de l’API OpenGL.

-
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.enableVertexAttribArray")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md new file mode 100644 index 0000000000..a573a50f6c --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md @@ -0,0 +1,119 @@ +--- +title: WebGLRenderingContext.enableVertexAttribArray() +slug: Web/API/WebGLRenderingContext/enableVertexAttribArray +tags: + - 3D + - API + - API WebGL + - Attributs des Sommets + - Graphiques + - Méthode + - Reference + - Tableau des Attributs + - WebGL + - WebGLRenderingContext + - enableVertexAttribArray + - shader de sommet + - sommet +translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray +--- +
{{APIRef("WebGL")}}
+ +

La méthode {{domxref ("WebGLRenderingContext")}} enableVertexAttribArray() - qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs.

+ +
+

Note : Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.

+
+ +

Dans WebGL, les valeurs s'appliquant à un sommet particulier sont stockées dans des attributs. Ceux-ci ne sont disponibles que pour le code JavaScript et le shader de sommet. Les attributs sont référencés par un numéro d'indice dans la liste des attributs gérés par la GPU. Certains indices d'attributs de sommet peuvent avoir des buts prédéfinis, suivant la plate-forme et/ou la GPU. D'autres sont affectés par la couche WebGL lorsque vous créez les attributs.

+ +

De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont désactivés par défaut, vous devez appeler enableVertexAttribArray() pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}.

+ +

Syntaxe

+ +
void gl.enableVertexAttribArray(indice);
+
+ +

Paramètres

+ +
+
indice
+
Un {{domxref("GLuint")}} indiquant le numéro d'indice identifiant de façon unique l'attribut de sommet à activer. Si vous connaissez le nom de l'attribut mais pas son indice, vous pouvez obtenir l'indice en appelant {{domxref ("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.
+
+ +

Valeur retournée

+ +

undefined.

+ +

Erreurs

+ +

Pour vérifier d'éventuelles erreurs  après l'appel à enableVertexAttribArray(), appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}.

+ +
+
WebGLRenderingContext.INVALID_VALUE
+
L'indice spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de WebGLRenderingContext.MAX_VERTEX_ATTRIBS.
+
+ +

Exemple

+ +

Ce code — un extrait de l'exemple complet Un exemple d'animation 2D WebGL de base — montre l'utilisation de enableVertexArray() pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet.

+ +
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+
+aVertexPosition =
+    gl.getAttribLocation(programmeShader, "aVertexPosition");
+
+gl.enableVertexAttribArray(aVertexPosition);
+gl.vertexAttribPointer(aVertexPosition, vertexNumComponents,
+      gl.FLOAT, false, 0, 0);
+
+gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
+ +
+

Note : Cet extrait de code provient de la fonction animateScene() dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.

+
+ +

Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.

+ +

Avec l'indice de l'attribut de position des sommets maintenant disponible dans aVertexPosition, nous appelons enableVertexAttribArray() pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet).

+ +

Le tampon des sommets est alors lié à l'attribut aVertexPosition en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à aVertexPosition récupére désormais des données à partir du tampon des sommets.

+ +

Avec l'association définie entre le tampon des sommets de notre forme et l'attribut aVertexPosition utilisé pour fournir les sommets un par un dans le shader de sommet, nous sommes prêts à dessiner la forme en appelant {{domxref ("WebGLRenderingContext.drawArrays", "drawArrays()")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "enableVertexAttribArray")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glEnableVertexAttribArray.xml", "glEnableVertexAttribArray")}}{{Spec2('OpenGL ES 2.0')}} +

Page man de l’API OpenGL.

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.enableVertexAttribArray")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html deleted file mode 100644 index d97ee1aa73..0000000000 --- a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: WebGLRenderingContext.generateMipmap() -slug: Web/API/WebGLRenderingContext/generateMipmap -tags: - - API - - Méthode - - Reference - - Textures - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/generateMipmap ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.generateMipmap() de l'API WebGL génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}.

- -

Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée.

- -

Syntaxe

- -
void gl.generateMipmap(cible);
-
- -

Paramètres

- -
-
cible
-
Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles : -
    -
  • gl.TEXTURE_2D : une  texture bi-dimensionnelle.
    • -
  • gl.TEXTURE_CUBE_MAP : une texture appliquée sur un cube.
    • -
  • Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : -
      -
    • gl.TEXTURE_3D : une texture tri-dimensionnelle.
      • -
    • gl.TEXTURE_2D_ARRAY : une texture bi-dimensionnelle en tableau.
      • -
    -
    • -
-
-
- -

Valeur retournée

- -

Aucune.

- -

Exemples

- -
gl.generateMipmap(gl.TEXTURE_2D);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "generateMipmap")}}{{Spec2('WebGL')}}Définition initiale pour WebGL.
{{SpecName('OpenGL ES 2.0', "glGenerateMipmap.xml", "glGenerateMipmap")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API (similaire) d'OpenGL ES 2.0.
{{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}}{{Spec2('OpenGL ES 3.0')}}Page man de l'API (similaire) d'OpenGL ES 3.0
- Ajoute : gl.TEXTURE_3D et gl.TEXTURE_2D_ARRAY
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.generateMipmap")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md new file mode 100644 index 0000000000..d97ee1aa73 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md @@ -0,0 +1,91 @@ +--- +title: WebGLRenderingContext.generateMipmap() +slug: Web/API/WebGLRenderingContext/generateMipmap +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/generateMipmap +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.generateMipmap() de l'API WebGL génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}.

+ +

Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée.

+ +

Syntaxe

+ +
void gl.generateMipmap(cible);
+
+ +

Paramètres

+ +
+
cible
+
Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles : +
    +
  • gl.TEXTURE_2D : une  texture bi-dimensionnelle.
    • +
  • gl.TEXTURE_CUBE_MAP : une texture appliquée sur un cube.
    • +
  • Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : +
      +
    • gl.TEXTURE_3D : une texture tri-dimensionnelle.
      • +
    • gl.TEXTURE_2D_ARRAY : une texture bi-dimensionnelle en tableau.
      • +
    +
    • +
+
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exemples

+ +
gl.generateMipmap(gl.TEXTURE_2D);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "generateMipmap")}}{{Spec2('WebGL')}}Définition initiale pour WebGL.
{{SpecName('OpenGL ES 2.0', "glGenerateMipmap.xml", "glGenerateMipmap")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API (similaire) d'OpenGL ES 2.0.
{{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}}{{Spec2('OpenGL ES 3.0')}}Page man de l'API (similaire) d'OpenGL ES 3.0
+ Ajoute : gl.TEXTURE_3D et gl.TEXTURE_2D_ARRAY
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.generateMipmap")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html deleted file mode 100644 index d12d46f1c6..0000000000 --- a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: WebGLRenderingContext.getAttribLocation() -slug: Web/API/WebGLRenderingContext/getAttribLocation -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/getAttribLocation ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.getAttribLocation() de l'API WebGL retourne l'emplacement d'une variable d'attribut dans le {{domxref("WebGLProgram")}} indiqué.

- -

Syntaxe

- -
GLint gl.getAttribLocation(programme, nom);
-
- -

Paramètres

- -
-
programme
-
Un {{domxref("WebGLProgram")}} contenant la variable d'attribut.
-
nom
-
Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner.
-
- -

Valeur retournée

- -

Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon.

- -

Exemples

- -
gl.getAttribLocation(programme, 'vColor');
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}{{Spec2('OpenGL ES 2.0')}}Page principale de l'API OpenGL.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.getAttribLocation")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md new file mode 100644 index 0000000000..d12d46f1c6 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md @@ -0,0 +1,69 @@ +--- +title: WebGLRenderingContext.getAttribLocation() +slug: Web/API/WebGLRenderingContext/getAttribLocation +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/getAttribLocation +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.getAttribLocation() de l'API WebGL retourne l'emplacement d'une variable d'attribut dans le {{domxref("WebGLProgram")}} indiqué.

+ +

Syntaxe

+ +
GLint gl.getAttribLocation(programme, nom);
+
+ +

Paramètres

+ +
+
programme
+
Un {{domxref("WebGLProgram")}} contenant la variable d'attribut.
+
nom
+
Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner.
+
+ +

Valeur retournée

+ +

Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon.

+ +

Exemples

+ +
gl.getAttribLocation(programme, 'vColor');
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}{{Spec2('OpenGL ES 2.0')}}Page principale de l'API OpenGL.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.getAttribLocation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/geterror/index.html b/files/fr/web/api/webglrenderingcontext/geterror/index.html deleted file mode 100644 index 1e3d624e40..0000000000 --- a/files/fr/web/api/webglrenderingcontext/geterror/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: WebGLRenderingContext.getError() -slug: Web/API/WebGLRenderingContext/getError -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/getError ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.getError() de l'API WebGL retourne des informations d'erreur.

- -

Syntaxe

- -
GLenum gl.getError();
-
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteDescription
gl.NO_ERRORAucune erreur n'a été enregistrée. La valeur de cette constante est 0.
gl.INVALID_ENUMUne valeur non acceptable a été spécifiée pour un argument énuméré. La commande est ignorée et l'indicateur d'erreur est positionné.
gl.INVALID_VALUEUn argument numérique est hors de sa plage. La commande est ignorée et l'indicateur d'erreur est positionné.
gl.INVALID_OPERATIONLa commande indiquée n'est pas permise dans l'état courant. La commande est ignorée et l'indicateur d'erreur est positionné.
gl.INVALID_FRAMEBUFFER_OPERATIONLe tampon d'images actuellement lié n'est pas complet lors d'une tentative de rendu ou de relecture.
gl.OUT_OF_MEMORYPlus assez de mémoire restante pour exécuter la commande.
gl.CONTEXT_LOST_WEBGLSi le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à getError. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne gl.NO_ERROR.
- -

Exemples

- -
gl.getError(); // gl.NO_ERROR (0)
-
-gl.enable(gl.MACHINTRUC);
-gl.getError(); // gl.INVALID_ENUM;
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.3", "getError")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glGetError.xml", "glGetError")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.getError")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/geterror/index.md b/files/fr/web/api/webglrenderingcontext/geterror/index.md new file mode 100644 index 0000000000..1e3d624e40 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/geterror/index.md @@ -0,0 +1,105 @@ +--- +title: WebGLRenderingContext.getError() +slug: Web/API/WebGLRenderingContext/getError +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/getError +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.getError() de l'API WebGL retourne des informations d'erreur.

+ +

Syntaxe

+ +
GLenum gl.getError();
+
+ +

Paramètres

+ +

Aucun.

+ +

Valeur retournée

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescription
gl.NO_ERRORAucune erreur n'a été enregistrée. La valeur de cette constante est 0.
gl.INVALID_ENUMUne valeur non acceptable a été spécifiée pour un argument énuméré. La commande est ignorée et l'indicateur d'erreur est positionné.
gl.INVALID_VALUEUn argument numérique est hors de sa plage. La commande est ignorée et l'indicateur d'erreur est positionné.
gl.INVALID_OPERATIONLa commande indiquée n'est pas permise dans l'état courant. La commande est ignorée et l'indicateur d'erreur est positionné.
gl.INVALID_FRAMEBUFFER_OPERATIONLe tampon d'images actuellement lié n'est pas complet lors d'une tentative de rendu ou de relecture.
gl.OUT_OF_MEMORYPlus assez de mémoire restante pour exécuter la commande.
gl.CONTEXT_LOST_WEBGLSi le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à getError. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne gl.NO_ERROR.
+ +

Exemples

+ +
gl.getError(); // gl.NO_ERROR (0)
+
+gl.enable(gl.MACHINTRUC);
+gl.getError(); // gl.INVALID_ENUM;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.3", "getError")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glGetError.xml", "glGetError")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.getError")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html deleted file mode 100644 index 46c5369067..0000000000 --- a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: WebGLRenderingContext.getShaderParameter() -slug: Web/API/WebGLRenderingContext/getShaderParameter -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/getShaderParameter ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.getShaderParameter() de l'API WebGL retourne des informations sur le shader donné.

- -

Syntaxe

- -
quelconque gl.getShaderParameter(shader, nomp);
-
- -

Parameters

- -
-
shader
-
Un {{domxref("WebGLShader")}} depuis lequel obtenir une information de paramètre.
-
nomp
-
Un {{domxref("Glenum")}} indiquant l'information à retrouver. Valeurs possibles : -
    -
  • gl.DELETE_STATUS : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non.
    • -
  • gl.COMPILE_STATUS : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non.
    • -
  • gl.SHADER_TYPE : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (gl.VERTEX_SHADER) ou shader de fragment (gl.FRAGMENT_SHADER).
    • -
-
-
- -

Valeur retournée

- -

Retourne l'information de shader demandée (telle qu'indiquée par nomp).

- -

Exemples

- -
gl.getShaderParameter(shader, gl.SHADER_TYPE);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "getShaderParameter")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.getShaderParameter")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md new file mode 100644 index 0000000000..46c5369067 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md @@ -0,0 +1,75 @@ +--- +title: WebGLRenderingContext.getShaderParameter() +slug: Web/API/WebGLRenderingContext/getShaderParameter +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/getShaderParameter +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.getShaderParameter() de l'API WebGL retourne des informations sur le shader donné.

+ +

Syntaxe

+ +
quelconque gl.getShaderParameter(shader, nomp);
+
+ +

Parameters

+ +
+
shader
+
Un {{domxref("WebGLShader")}} depuis lequel obtenir une information de paramètre.
+
nomp
+
Un {{domxref("Glenum")}} indiquant l'information à retrouver. Valeurs possibles : +
    +
  • gl.DELETE_STATUS : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non.
    • +
  • gl.COMPILE_STATUS : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non.
    • +
  • gl.SHADER_TYPE : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (gl.VERTEX_SHADER) ou shader de fragment (gl.FRAGMENT_SHADER).
    • +
+
+
+ +

Valeur retournée

+ +

Retourne l'information de shader demandée (telle qu'indiquée par nomp).

+ +

Exemples

+ +
gl.getShaderParameter(shader, gl.SHADER_TYPE);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "getShaderParameter")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.getShaderParameter")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html deleted file mode 100644 index a153da3ba0..0000000000 --- a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: WebGLRenderingContext.getTexParameter() -slug: Web/API/WebGLRenderingContext/getTexParameter -tags: - - API - - Méthode - - Reference - - Textures - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/getTexParameter ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.getTexParameter() de l'API WebGL retourne des informations concernant la texture indiquée.

- -

Syntaxe

- -
quelconque gl.getTexParameter(cible, nomp);
-
- -

Paramètres

- -
-
cible
-
Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : -
    -
  • gl.TEXTURE_2D : une texture bi-dimensionnelle.
    • -
  • gl.TEXTURE_CUBE_MAP : une texture appliquée à un cube.
    • -
  • Lorsqu' un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : -
      -
    • gl.TEXTURE_3D : une texture tri-dimensionnelle.
      • -
    • gl.TEXTURE_2D_ARRAY : une texture bi-dimensionnelle en tableau.
      • -
    -
    • -
-
-
nomp
-
Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
nompType retournéDescriptionValeurs retournées possibles
Disponible dans un contexte WebGL 1
gl.TEXTURE_MAG_FILTER{{domxref("GLenum")}}Filtre de grossissement de texturegl.LINEAR (valeur par défaut), gl.NEAREST.
gl.TEXTURE_MIN_FILTER{{domxref("GLenum")}}Filtre de réduction de texturegl.LINEAR, gl.NEAREST, gl.NEAREST_MIPMAP_NEAREST, gl.LINEAR_MIPMAP_NEAREST, gl.NEAREST_MIPMAP_LINEAR (valeur par défaut), gl.LINEAR_MIPMAP_LINEAR.
gl.TEXTURE_WRAP_S{{domxref("GLenum")}}Fonction d'emballage pour la coordonnée de texture sgl.REPEAT (valeur par défaut), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
gl.TEXTURE_WRAP_T{{domxref("GLenum")}}Fonction d'emballage pour la coordonnée de texture tgl.REPEAT (valeur par défaut), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
Disponible en outre lorsque l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée
ext.TEXTURE_MAX_ANISOTROPY_EXT{{domxref("GLfloat")}}Anisotropie maximum pour une textureToutes valeurs float.
Disponible en outre lorsqu'un contexte WebGL 2 est utilisé
gl.TEXTURE_BASE_LEVEL{{domxref("GLint")}}Niveau  de mipmap de textureToutes valeurs int.
gl.TEXTURE_COMPARE_FUNC{{domxref("GLenum")}}Fonction de comparaisongl.LEQUAL (valeurs par défaut), gl.GEQUAL, gl.LESS, gl.GREATER, gl.EQUAL, gl.NOTEQUAL, gl.ALWAYS, gl.NEVER.
gl.TEXTURE_COMPARE_MODE{{domxref("GLenum")}}Mode de comparaison de texturegl.NONE (valeur par défaut), gl.COMPARE_REF_TO_TEXTURE.
gl.TEXTURE_IMMUTABLE_FORMAT{{domxref("GLboolean")}}Immuabilité du format et de la taille de la texturetrue ou false.
gl.TEXTURE_IMMUTABLE_LEVELS{{domxref("GLuint")}}?Toutes valeurs uint.
gl.TEXTURE_MAX_LEVEL{{domxref("GLint")}}Niveau maximum  de mipmap de texture en tableauToutes valeurs int.
gl.TEXTURE_MAX_LOD{{domxref("GLfloat")}}Valeur de niveau-de-détail maximum de textureToutes valeurs float.
gl.TEXTURE_MIN_LOD{{domxref("GLfloat")}}Valeur de niveau-de-détail minimum de textureToutes valeurs float.
gl.TEXTURE_WRAP_R{{domxref("GLenum")}}Fonction d'emballage pour la coordonnée de texture  rgl.REPEAT (valeur par défaut), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
-
-
- -

Valeur retournée

- -

Retourne l'information de texture demandée (telle qu'indiquée par nomp). Si une erreur se produit, {{jsxref("null")}} est retourné.

- -

Exemples

- -
gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "getTexParameter")}}{{Spec2('WebGL')}}Définition initiale pour WebGL.
{{SpecName('OpenGL ES 2.0', "glGetTexParameter.xml", "glGetTexParameter")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL ES 2.0 (similaire).
{{SpecName('WebGL2', "#3.7.6", "getTexParameter")}}{{Spec2('WebGL2')}}Définition mise à jour pour WebGL.
{{SpecName('OpenGL ES 3.0', "glGetTexParameter.xhtml", "glGetTexParameter")}}{{Spec2('OpenGL ES 3.0')}}Page man de l'API OpenGL ES 3.0 (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.getTexParameter")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md new file mode 100644 index 0000000000..a153da3ba0 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md @@ -0,0 +1,199 @@ +--- +title: WebGLRenderingContext.getTexParameter() +slug: Web/API/WebGLRenderingContext/getTexParameter +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/getTexParameter +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.getTexParameter() de l'API WebGL retourne des informations concernant la texture indiquée.

+ +

Syntaxe

+ +
quelconque gl.getTexParameter(cible, nomp);
+
+ +

Paramètres

+ +
+
cible
+
Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : +
    +
  • gl.TEXTURE_2D : une texture bi-dimensionnelle.
    • +
  • gl.TEXTURE_CUBE_MAP : une texture appliquée à un cube.
    • +
  • Lorsqu' un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : +
      +
    • gl.TEXTURE_3D : une texture tri-dimensionnelle.
      • +
    • gl.TEXTURE_2D_ARRAY : une texture bi-dimensionnelle en tableau.
      • +
    +
    • +
+
+
nomp
+
Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
nompType retournéDescriptionValeurs retournées possibles
Disponible dans un contexte WebGL 1
gl.TEXTURE_MAG_FILTER{{domxref("GLenum")}}Filtre de grossissement de texturegl.LINEAR (valeur par défaut), gl.NEAREST.
gl.TEXTURE_MIN_FILTER{{domxref("GLenum")}}Filtre de réduction de texturegl.LINEAR, gl.NEAREST, gl.NEAREST_MIPMAP_NEAREST, gl.LINEAR_MIPMAP_NEAREST, gl.NEAREST_MIPMAP_LINEAR (valeur par défaut), gl.LINEAR_MIPMAP_LINEAR.
gl.TEXTURE_WRAP_S{{domxref("GLenum")}}Fonction d'emballage pour la coordonnée de texture sgl.REPEAT (valeur par défaut), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
gl.TEXTURE_WRAP_T{{domxref("GLenum")}}Fonction d'emballage pour la coordonnée de texture tgl.REPEAT (valeur par défaut), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
Disponible en outre lorsque l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée
ext.TEXTURE_MAX_ANISOTROPY_EXT{{domxref("GLfloat")}}Anisotropie maximum pour une textureToutes valeurs float.
Disponible en outre lorsqu'un contexte WebGL 2 est utilisé
gl.TEXTURE_BASE_LEVEL{{domxref("GLint")}}Niveau  de mipmap de textureToutes valeurs int.
gl.TEXTURE_COMPARE_FUNC{{domxref("GLenum")}}Fonction de comparaisongl.LEQUAL (valeurs par défaut), gl.GEQUAL, gl.LESS, gl.GREATER, gl.EQUAL, gl.NOTEQUAL, gl.ALWAYS, gl.NEVER.
gl.TEXTURE_COMPARE_MODE{{domxref("GLenum")}}Mode de comparaison de texturegl.NONE (valeur par défaut), gl.COMPARE_REF_TO_TEXTURE.
gl.TEXTURE_IMMUTABLE_FORMAT{{domxref("GLboolean")}}Immuabilité du format et de la taille de la texturetrue ou false.
gl.TEXTURE_IMMUTABLE_LEVELS{{domxref("GLuint")}}?Toutes valeurs uint.
gl.TEXTURE_MAX_LEVEL{{domxref("GLint")}}Niveau maximum  de mipmap de texture en tableauToutes valeurs int.
gl.TEXTURE_MAX_LOD{{domxref("GLfloat")}}Valeur de niveau-de-détail maximum de textureToutes valeurs float.
gl.TEXTURE_MIN_LOD{{domxref("GLfloat")}}Valeur de niveau-de-détail minimum de textureToutes valeurs float.
gl.TEXTURE_WRAP_R{{domxref("GLenum")}}Fonction d'emballage pour la coordonnée de texture  rgl.REPEAT (valeur par défaut), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
+
+
+ +

Valeur retournée

+ +

Retourne l'information de texture demandée (telle qu'indiquée par nomp). Si une erreur se produit, {{jsxref("null")}} est retourné.

+ +

Exemples

+ +
gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "getTexParameter")}}{{Spec2('WebGL')}}Définition initiale pour WebGL.
{{SpecName('OpenGL ES 2.0', "glGetTexParameter.xml", "glGetTexParameter")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL ES 2.0 (similaire).
{{SpecName('WebGL2', "#3.7.6", "getTexParameter")}}{{Spec2('WebGL2')}}Définition mise à jour pour WebGL.
{{SpecName('OpenGL ES 3.0', "glGetTexParameter.xhtml", "glGetTexParameter")}}{{Spec2('OpenGL ES 3.0')}}Page man de l'API OpenGL ES 3.0 (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.getTexParameter")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html deleted file mode 100644 index 89393bd4f7..0000000000 --- a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: WebGLRenderingContext.getUniformLocation() -slug: Web/API/WebGLRenderingContext/getUniformLocation -tags: - - API - - Méthode - - Reference - - Uniform Variables - - Uniforms - - Variables - - Variables en WebGL - - WebGL - - WebGLRenderingContext - - getUniformLocation -translation_of: Web/API/WebGLRenderingContext/getUniformLocation ---- -
{{APIRef("WebGL")}}
- -
Faisant partie de l'API WebGL, la méthode {{domxref("WebGLRenderingContext")}} getUniformLocation() retourne l'emplacement d'une variable uniform particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU.
- -
 
- -
Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées :
- -
 
- -
-
{{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}}
-
Retourne la valeur de l'uniform à l'emplacement indiqué.
-

- {{domxref ("WebGLRenderingContext.uniform", "uniform[1234] [fi] [v]()")}}
-
Affecte à la valeur de l'uniform la valeur spécifiée, qui peut être un nombre flottant ou entier unique, ou un vecteur de 2 à 4 composantes spécifié soit comme une liste de valeurs, soit comme un {{jsxref ("Float32Array")}} ou un {{ jsxref ("Int32Array")}}.
-

- {{domxref ("WebGLRenderingContext.uniformMatrix", "uniformMatrix[234][fv]()")}}
-
Affecte à la valeur de l'uniforme la matrice spécifiée, éventuellement avec transposition. La valeur est représentée comme une suite de valeurs GLfloat ou comme un Float32Array.
-
- -


- L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL.

- -

Syntaxe

- -
WebGLUniformLocation = WebGLRenderingContext.getUniformLocation(programme, nom);
-
- -

Paramètres

- -
-
programme
-
Le {{domxref ("WebGLProgram")}} dans lequel localiser la variable uniform indiquée.
-
nom
-
Une {{domxref ("DOMString")}} indiquant le nom de la variable uniform dont l'emplacement doit être retourné. Le nom ne peut contenir aucun espace, et vous ne pouvez pas utiliser cette fonction pour obtenir l'emplacement d'aucun uniform commençant par la chaîne réservée "gl_", du fait que ceux-ci sont internes à la couche WebGL.
-
- -

Valeur retournée

- -

Une valeur {{domxref ("WebGLUniformLocation")}} indiquant l'emplacement de la variable nommée, si elle existe. Si la variable indiquée n'existe pas, {{jsxref("null")}} est retourné à la place.

- -

WebGLUniformLocation est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform.

- -
-

Note : Le type WebGLUniformLocation est compatible avec le type GLint pour indiquer l'indice ou l'emplacement d'un attribut uniform.

-
- -

Erreurs

- -

Les erreurs suivantes peuvent se produire ; pour vérifier les erreurs après le retour de getUniformLocation(), appelez {{domxref ("WebGLRenderingContext.getError", "getError()")}}.

- -
-
GL_INVALID_VALUE
-
Le paramètre programme n'est pas une valeur ou un objet généré par WebGL.
-
GL_INVALID_OPERATION
-
Le paramètre programme ne correspond pas à un programme GLSL généré par WebGL, ou le programme indiqué n'a pas été lié avec succès.
-
- -

Exemple

- -

Dans cet exemple, extrait de la méthode animateScene() dans l'article Un exemple d'animation 2D WebGL de base, retrouve les emplacements de trois uniforms du programme d'ombrage, puis définit la valeur de chacun des trois uniforms.

- -
gl.useProgram(programmeShader);
-
-uScalingFactor =
-    gl.getUniformLocation(programmeShader, "uScalingFactor");
-uGlobalColor =
-    gl.getUniformLocation(programmeShader, "uGlobalColor");
-uRotationVector =
-    gl.getUniformLocation(programmeShader, "uRotationVector")
-
-gl.uniform2fv(uScalingFactor, currentScale);
-gl.uniform2fv(uRotationVector, currentRotation);
-gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);
- -
-

Note : Cet extrait de code provient de la fonction animateScene() dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.

-
- -

Après avoir défini le programme d'ombrage en cours comme programmeShader, ce code récupère les trois uniforms "uScalingFactor", "uGlobalColor" et "uRotationVector", en appelant getUniformLocation() une fois pour chaque uniform.

- -

Ensuite, les valeurs des trois uniforms sont définies :

- - - -

Cela fait, la prochaine fois que les fonctions d'ombrage seront appelées, leurs propres variables nommées uScalingFactor, uGlobalColor et uRotationVector auront toutes les valeurs fournies par le code JavaScript.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "getUniformLocation")}}{{Spec2('WebGL')}} -

Définition initiale.

-
{{SpecName('OpenGL ES 2.0', "glGetUniformLocation.xml", "glGetUniformLocation")}}{{Spec2('OpenGL ES 2.0')}}Page man de l’API OpenGL.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.getUniformLocation")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md new file mode 100644 index 0000000000..89393bd4f7 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md @@ -0,0 +1,142 @@ +--- +title: WebGLRenderingContext.getUniformLocation() +slug: Web/API/WebGLRenderingContext/getUniformLocation +tags: + - API + - Méthode + - Reference + - Uniform Variables + - Uniforms + - Variables + - Variables en WebGL + - WebGL + - WebGLRenderingContext + - getUniformLocation +translation_of: Web/API/WebGLRenderingContext/getUniformLocation +--- +
{{APIRef("WebGL")}}
+ +
Faisant partie de l'API WebGL, la méthode {{domxref("WebGLRenderingContext")}} getUniformLocation() retourne l'emplacement d'une variable uniform particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU.
+ +
 
+ +
Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées :
+ +
 
+ +
+
{{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}}
+
Retourne la valeur de l'uniform à l'emplacement indiqué.
+

+ {{domxref ("WebGLRenderingContext.uniform", "uniform[1234] [fi] [v]()")}}
+
Affecte à la valeur de l'uniform la valeur spécifiée, qui peut être un nombre flottant ou entier unique, ou un vecteur de 2 à 4 composantes spécifié soit comme une liste de valeurs, soit comme un {{jsxref ("Float32Array")}} ou un {{ jsxref ("Int32Array")}}.
+

+ {{domxref ("WebGLRenderingContext.uniformMatrix", "uniformMatrix[234][fv]()")}}
+
Affecte à la valeur de l'uniforme la matrice spécifiée, éventuellement avec transposition. La valeur est représentée comme une suite de valeurs GLfloat ou comme un Float32Array.
+
+ +


+ L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL.

+ +

Syntaxe

+ +
WebGLUniformLocation = WebGLRenderingContext.getUniformLocation(programme, nom);
+
+ +

Paramètres

+ +
+
programme
+
Le {{domxref ("WebGLProgram")}} dans lequel localiser la variable uniform indiquée.
+
nom
+
Une {{domxref ("DOMString")}} indiquant le nom de la variable uniform dont l'emplacement doit être retourné. Le nom ne peut contenir aucun espace, et vous ne pouvez pas utiliser cette fonction pour obtenir l'emplacement d'aucun uniform commençant par la chaîne réservée "gl_", du fait que ceux-ci sont internes à la couche WebGL.
+
+ +

Valeur retournée

+ +

Une valeur {{domxref ("WebGLUniformLocation")}} indiquant l'emplacement de la variable nommée, si elle existe. Si la variable indiquée n'existe pas, {{jsxref("null")}} est retourné à la place.

+ +

WebGLUniformLocation est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform.

+ +
+

Note : Le type WebGLUniformLocation est compatible avec le type GLint pour indiquer l'indice ou l'emplacement d'un attribut uniform.

+
+ +

Erreurs

+ +

Les erreurs suivantes peuvent se produire ; pour vérifier les erreurs après le retour de getUniformLocation(), appelez {{domxref ("WebGLRenderingContext.getError", "getError()")}}.

+ +
+
GL_INVALID_VALUE
+
Le paramètre programme n'est pas une valeur ou un objet généré par WebGL.
+
GL_INVALID_OPERATION
+
Le paramètre programme ne correspond pas à un programme GLSL généré par WebGL, ou le programme indiqué n'a pas été lié avec succès.
+
+ +

Exemple

+ +

Dans cet exemple, extrait de la méthode animateScene() dans l'article Un exemple d'animation 2D WebGL de base, retrouve les emplacements de trois uniforms du programme d'ombrage, puis définit la valeur de chacun des trois uniforms.

+ +
gl.useProgram(programmeShader);
+
+uScalingFactor =
+    gl.getUniformLocation(programmeShader, "uScalingFactor");
+uGlobalColor =
+    gl.getUniformLocation(programmeShader, "uGlobalColor");
+uRotationVector =
+    gl.getUniformLocation(programmeShader, "uRotationVector")
+
+gl.uniform2fv(uScalingFactor, currentScale);
+gl.uniform2fv(uRotationVector, currentRotation);
+gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);
+ +
+

Note : Cet extrait de code provient de la fonction animateScene() dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.

+
+ +

Après avoir défini le programme d'ombrage en cours comme programmeShader, ce code récupère les trois uniforms "uScalingFactor", "uGlobalColor" et "uRotationVector", en appelant getUniformLocation() une fois pour chaque uniform.

+ +

Ensuite, les valeurs des trois uniforms sont définies :

+ + + +

Cela fait, la prochaine fois que les fonctions d'ombrage seront appelées, leurs propres variables nommées uScalingFactor, uGlobalColor et uRotationVector auront toutes les valeurs fournies par le code JavaScript.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "getUniformLocation")}}{{Spec2('WebGL')}} +

Définition initiale.

+
{{SpecName('OpenGL ES 2.0', "glGetUniformLocation.xml", "glGetUniformLocation")}}{{Spec2('OpenGL ES 2.0')}}Page man de l’API OpenGL.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.getUniformLocation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/index.html b/files/fr/web/api/webglrenderingcontext/index.html deleted file mode 100644 index 437dbe6f19..0000000000 --- a/files/fr/web/api/webglrenderingcontext/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: WebGLRenderingContext -slug: Web/API/WebGLRenderingContext -tags: - - NeedsTranslation - - TopicStub - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext ---- -
{{APIRef("WebGL")}}
- -
L'interface WebGLRenderingContext fournit le contexte de rendu OpenGL ES 2.0 pour le dessin d'une suface dans un élément HTML {{HTMLElement("canvas")}}.
- -
 
- -

Pour obtenir une instance de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <canvas>, en spécifiant "webgl" en paramètre :

- -
var canvas = document.getElementById('myCanvas');
-var gl = canvas.getContext('webgl');
-
- -

Une fois que avez le contexte de rendu WebGL, vous pouvez dessiner à l'intérieur.

- -

Le tutoriel WebGL contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL.

- -

Constants

- -

See the WebGL constants page.

- -

The WebGL context

- -

The following properties and methods provide general information and functionality to deal with the WebGL context:

- -
-
{{domxref("WebGLRenderingContext.canvas")}}
-
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
-
{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}
-
-

Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.

-
-
{{domxref("WebGLRenderingContext.drawingBufferWidth")}}
-
The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.
-
{{domxref("WebGLRenderingContext.drawingBufferHeight")}}
-
The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.
-
{{domxref("WebGLRenderingContext.getContextAttributes()")}}
-
Returns a WebGLContextAttributes object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.
-
{{domxref("WebGLRenderingContext.isContextLost()")}}
-
Returns true if the context is lost, otherwise returns false.
-
- -

Viewing and clipping

- -
-
{{domxref("WebGLRenderingContext.scissor()")}}
-
Defines the scissor box.
-
{{domxref("WebGLRenderingContext.viewport()")}}
-
Sets the viewport.
-
- -

State information

- -
-
{{domxref("WebGLRenderingContext.activeTexture()")}}
-
Selects the active texture unit.
-
{{domxref("WebGLRenderingContext.blendColor()")}}
-
Sets the source and destination blending factors.
-
{{domxref("WebGLRenderingContext.blendEquation()")}}
-
Sets both the RGB blend equation and alpha blend equation to a single equation.
-
{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}
-
Sets the RGB blend equation and alpha blend equation separately.
-
{{domxref("WebGLRenderingContext.blendFunc()")}}
-
Defines which function is used for blending pixel arithmetic.
-
{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
-
Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.
-
{{domxref("WebGLRenderingContext.clearColor()")}}
-
Specifies the color values used when clearing color buffers.
-
{{domxref("WebGLRenderingContext.clearDepth()")}}
-
Specifies the depth value used when clearing the depth buffer.
-
{{domxref("WebGLRenderingContext.clearStencil()")}}
-
Specifies the stencil value used when clearing the stencil buffer.
-
{{domxref("WebGLRenderingContext.colorMask()")}}
-
Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.
-
{{domxref("WebGLRenderingContext.cullFace()")}}
-
Specifies whether or not front- and/or back-facing polygons can be culled.
-
{{domxref("WebGLRenderingContext.depthFunc()")}}
-
Specifies a function that compares incoming pixel depth to the current depth buffer value.
-
{{domxref("WebGLRenderingContext.depthMask()")}}
-
Sets whether writing into the depth buffer is enabled or disabled.
-
{{domxref("WebGLRenderingContext.depthRange()")}}
-
Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
-
{{domxref("WebGLRenderingContext.disable()")}}
-
Disables specific WebGL capabilities for this context.
-
{{domxref("WebGLRenderingContext.enable()")}}
-
Enables specific WebGL capabilities for this context.
-
{{domxref("WebGLRenderingContext.frontFace()")}}
-
Specifies whether polygons are front- or back-facing by setting a winding orientation.
-
{{domxref("WebGLRenderingContext.getParameter()")}}
-
Returns a value for the passed parameter name.
-
{{domxref("WebGLRenderingContext.getError()")}}
-
Returns error information.
-
{{domxref("WebGLRenderingContext.hint()")}}
-
Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.
-
{{domxref("WebGLRenderingContext.isEnabled()")}}
-
Tests whether a specific WebGL capability is enabled or not for this context.
-
{{domxref("WebGLRenderingContext.lineWidth()")}}
-
Sets the line width of rasterized lines.
-
{{domxref("WebGLRenderingContext.pixelStorei()")}}
-
Specifies the pixel storage modes
-
{{domxref("WebGLRenderingContext.polygonOffset()")}}
-
Specifies the scale factors and units to calculate depth values.
-
{{domxref("WebGLRenderingContext.sampleCoverage()")}}
-
Specifies multi-sample coverage parameters for anti-aliasing effects.
-
{{domxref("WebGLRenderingContext.stencilFunc()")}}
-
Sets the both front and back function and reference value for stencil testing.
-
{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}
-
Sets the front and/or back function and reference value for stencil testing.
-
{{domxref("WebGLRenderingContext.stencilMask()")}}
-
Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
-
{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}
-
Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
-
{{domxref("WebGLRenderingContext.stencilOp()")}}
-
Sets both the front and back-facing stencil test actions.
-
{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}
-
Sets the front and/or back-facing stencil test actions.
-
- -

Buffers

- -
-
{{domxref("WebGLRenderingContext.bindBuffer()")}}
-
Binds a WebGLBuffer object to a given target.
-
{{domxref("WebGLRenderingContext.bufferData()")}}
-
Updates buffer data.
-
{{domxref("WebGLRenderingContext.bufferSubData()")}}
-
Updates buffer data starting at a passed offset.
-
{{domxref("WebGLRenderingContext.createBuffer()")}}
-
Creates a WebGLBuffer object.
-
{{domxref("WebGLRenderingContext.deleteBuffer()")}}
-
Deletes a WebGLBuffer object.
-
{{domxref("WebGLRenderingContext.getBufferParameter()")}}
-
Returns information about the buffer.
-
{{domxref("WebGLRenderingContext.isBuffer()")}}
-
Returns a Boolean indicating if the passed buffer is valid.
-
- -

Framebuffers

- -
-
{{domxref("WebGLRenderingContext.bindFramebuffer()")}}
-
Binds a WebGLFrameBuffer object to a given target.
-
{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
-
Returns the status of the framebuffer.
-
{{domxref("WebGLRenderingContext.createFramebuffer()")}}
-
Creates a WebGLFrameBuffer object.
-
{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
-
Deletes a WebGLFrameBuffer object.
-
{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
-
Attaches a WebGLRenderingBuffer object to a WebGLFrameBuffer object.
-
{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
-
Attaches a textures image to a WebGLFrameBuffer object.
-
{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
-
Returns information about the framebuffer.
-
{{domxref("WebGLRenderingContext.isFramebuffer()")}}
-
Returns a Boolean indicating if the passed WebGLFrameBuffer object is valid.
-
{{domxref("WebGLRenderingContext.readPixels()")}}
-
Reads a block of pixels from the WebGLFrameBuffer.
-
- -

Renderbuffers

- -
-
{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
-
Binds a WebGLRenderBuffer object to a given target.
-
{{domxref("WebGLRenderingContext.createRenderbuffer()")}}
-
Creates a WebGLRenderBuffer object.
-
{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
-
Deletes a WebGLRenderBuffer object.
-
{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
-
Returns information about the renderbuffer.
-
{{domxref("WebGLRenderingContext.isRenderbuffer()")}}
-
Returns a Boolean indicating if the passed WebGLRenderingBuffer is valid.
-
{{domxref("WebGLRenderingContext.renderbufferStorage()")}}
-
Creates a renderbuffer data store.
-
- -

Textures

- -
-
{{domxref("WebGLRenderingContext.bindTexture()")}}
-
Binds a WebGLTexture object to a given target.
-
{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
-
Specifies a 2D texture image in a compressed format.
-
{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
-
Specifies a 2D texture sub-image in a compressed format.
-
{{domxref("WebGLRenderingContext.copyTexImage2D()")}}
-
Copies a 2D texture image.
-
{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
-
Copies a 2D texture sub-image.
-
{{domxref("WebGLRenderingContext.createTexture()")}}
-
Creates a WebGLTexture object.
-
{{domxref("WebGLRenderingContext.deleteTexture()")}}
-
Deletes a WebGLTexture object.
-
{{domxref("WebGLRenderingContext.generateMipmap()")}}
-
Generates a set of mipmaps for a WebGLTexture object.
-
{{domxref("WebGLRenderingContext.getTexParameter()")}}
-
Returns information about the texture.
-
{{domxref("WebGLRenderingContext.isTexture()")}}
-
Returns a Boolean indicating if the passed WebGLTexture is valid.
-
{{domxref("WebGLRenderingContext.texImage2D()")}}
-
Specifies a 2D texture image.
-
{{domxref("WebGLRenderingContext.texSubImage2D()")}}
-
Updates a sub-rectangle of the current WebGLTexture.
-
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}
-
Sets texture parameters.
-
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}
-
Sets texture parameters.
-
- -

Programs and shaders

- -
-
{{domxref("WebGLRenderingContext.attachShader()")}}
-
Attaches a WebGLShader to a WebGLProgram.
-
{{domxref("WebGLRenderingContext.bindAttribLocation()")}}
-
Binds a generic vertex index to a named attribute variable.
-
{{domxref("WebGLRenderingContext.compileShader()")}}
-
Compiles a WebGLShader.
-
{{domxref("WebGLRenderingContext.createProgram()")}}
-
Creates a WebGLProgram.
-
{{domxref("WebGLRenderingContext.createShader()")}}
-
Creates a WebGLShader.
-
{{domxref("WebGLRenderingContext.deleteProgram()")}}
-
Deletes a WebGLProgram.
-
{{domxref("WebGLRenderingContext.deleteShader()")}}
-
Deletes a WebGLShader.
-
{{domxref("WebGLRenderingContext.detachShader()")}}
-
Detaches a WebGLShader.
-
{{domxref("WebGLRenderingContext.getAttachedShaders()")}}
-
Returns a list of WebGLShader objects attached to a WebGLProgram.
-
{{domxref("WebGLRenderingContext.getProgramParameter()")}}
-
Returns information about the program.
-
{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
-
Returns the information log for a WebGLProgram object.
-
{{domxref("WebGLRenderingContext.getShaderParameter()")}}
-
Returns information about the shader.
-
{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
-
Returns a WebGLShaderPrecisionFormat object describing the precision for the numeric format of the shader.
-
{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
-
Returns the information log for a WebGLShader object.
-
{{domxref("WebGLRenderingContext.getShaderSource()")}}
-
Returns the source code of a WebGLShader as a string.
-
{{domxref("WebGLRenderingContext.isProgram()")}}
-
Returns a Boolean indicating if the passed WebGLProgram is valid.
-
{{domxref("WebGLRenderingContext.isShader()")}}
-
Returns a Boolean indicating if the passed WebGLShader is valid.
-
{{domxref("WebGLRenderingContext.linkProgram()")}}
-
Links the passed WebGLProgram object.
-
{{domxref("WebGLRenderingContext.shaderSource()")}}
-
Sets the source code in a WebGLShader.
-
{{domxref("WebGLRenderingContext.useProgram()")}}
-
Uses the specified WebGLProgram as part the current rendering state.
-
{{domxref("WebGLRenderingContext.validateProgram()")}}
-
Validates a WebGLProgram.
-
- -

Uniforms and attributes

- -
-
{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
-
Disables a vertex attribute array at a given position.
-
{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}
-
Enables a vertex attribute array at a given position.
-
{{domxref("WebGLRenderingContext.getActiveAttrib()")}}
-
Returns information about an active attribute variable.
-
{{domxref("WebGLRenderingContext.getActiveUniform()")}}
-
Returns information about an active uniform variable.
-
{{domxref("WebGLRenderingContext.getAttribLocation()")}}
-
Returns the location of an attribute variable.
-
{{domxref("WebGLRenderingContext.getUniform()")}}
-
Returns the value of a uniform variable at a given location.
-
{{domxref("WebGLRenderingContext.getUniformLocation()")}}
-
Returns the location of a uniform variable.
-
{{domxref("WebGLRenderingContext.getVertexAttrib()")}}
-
Returns information about a vertex attribute at a given position.
-
{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}
-
Returns the address of a given vertex attribute.
-
{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}
-
Specifies a value for a uniform variable.
-
{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}
-
Specifies a matrix value for a uniform variable.
-
{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}
-
Specifies a value for a generic vertex attribute.
-
{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}
-
Specifies the data formats and locations of vertex attributes in a vertex attributes array.
-
- -

Drawing buffers

- -
-
{{domxref("WebGLRenderingContext.clear()")}}
-
Clears specified buffers to preset values.
-
{{domxref("WebGLRenderingContext.drawArrays()")}}
-
Renders primitives from array data.
-
{{domxref("WebGLRenderingContext.drawElements()")}}
-
Renders primitives from element array data.
-
{{domxref("WebGLRenderingContext.finish()")}}
-
Blocks execution until all previously called commands are finished.
-
{{domxref("WebGLRenderingContext.flush()")}}
-
Empties different buffer commands, causing all commands to be executed as quickly as possible.
-
- -

Working with extensions

- -

These methods manage WebGL extensions:

- -
-
{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
-
Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.
-
{{domxref("WebGLRenderingContext.getExtension()")}}
-
Returns an extension object.
-
- -

Examples

- -

WebGL context feature detection

- -

{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}

- -

{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}

- -

{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}

- -

Effect of canvas size on rendering with WebGL

- -

{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}

- -

{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}

- -

{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}{{Spec2('WebGL')}}Initial definition
- -

Browser compatibility

- -

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}

- -

See also

- - diff --git a/files/fr/web/api/webglrenderingcontext/index.md b/files/fr/web/api/webglrenderingcontext/index.md new file mode 100644 index 0000000000..437dbe6f19 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/index.md @@ -0,0 +1,367 @@ +--- +title: WebGLRenderingContext +slug: Web/API/WebGLRenderingContext +tags: + - NeedsTranslation + - TopicStub + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext +--- +
{{APIRef("WebGL")}}
+ +
L'interface WebGLRenderingContext fournit le contexte de rendu OpenGL ES 2.0 pour le dessin d'une suface dans un élément HTML {{HTMLElement("canvas")}}.
+ +
 
+ +

Pour obtenir une instance de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <canvas>, en spécifiant "webgl" en paramètre :

+ +
var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+
+ +

Une fois que avez le contexte de rendu WebGL, vous pouvez dessiner à l'intérieur.

+ +

Le tutoriel WebGL contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL.

+ +

Constants

+ +

See the WebGL constants page.

+ +

The WebGL context

+ +

The following properties and methods provide general information and functionality to deal with the WebGL context:

+ +
+
{{domxref("WebGLRenderingContext.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}
+
+

Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.

+
+
{{domxref("WebGLRenderingContext.drawingBufferWidth")}}
+
The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.
+
{{domxref("WebGLRenderingContext.drawingBufferHeight")}}
+
The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.
+
{{domxref("WebGLRenderingContext.getContextAttributes()")}}
+
Returns a WebGLContextAttributes object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.
+
{{domxref("WebGLRenderingContext.isContextLost()")}}
+
Returns true if the context is lost, otherwise returns false.
+
+ +

Viewing and clipping

+ +
+
{{domxref("WebGLRenderingContext.scissor()")}}
+
Defines the scissor box.
+
{{domxref("WebGLRenderingContext.viewport()")}}
+
Sets the viewport.
+
+ +

State information

+ +
+
{{domxref("WebGLRenderingContext.activeTexture()")}}
+
Selects the active texture unit.
+
{{domxref("WebGLRenderingContext.blendColor()")}}
+
Sets the source and destination blending factors.
+
{{domxref("WebGLRenderingContext.blendEquation()")}}
+
Sets both the RGB blend equation and alpha blend equation to a single equation.
+
{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}
+
Sets the RGB blend equation and alpha blend equation separately.
+
{{domxref("WebGLRenderingContext.blendFunc()")}}
+
Defines which function is used for blending pixel arithmetic.
+
{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
+
Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.
+
{{domxref("WebGLRenderingContext.clearColor()")}}
+
Specifies the color values used when clearing color buffers.
+
{{domxref("WebGLRenderingContext.clearDepth()")}}
+
Specifies the depth value used when clearing the depth buffer.
+
{{domxref("WebGLRenderingContext.clearStencil()")}}
+
Specifies the stencil value used when clearing the stencil buffer.
+
{{domxref("WebGLRenderingContext.colorMask()")}}
+
Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.
+
{{domxref("WebGLRenderingContext.cullFace()")}}
+
Specifies whether or not front- and/or back-facing polygons can be culled.
+
{{domxref("WebGLRenderingContext.depthFunc()")}}
+
Specifies a function that compares incoming pixel depth to the current depth buffer value.
+
{{domxref("WebGLRenderingContext.depthMask()")}}
+
Sets whether writing into the depth buffer is enabled or disabled.
+
{{domxref("WebGLRenderingContext.depthRange()")}}
+
Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
+
{{domxref("WebGLRenderingContext.disable()")}}
+
Disables specific WebGL capabilities for this context.
+
{{domxref("WebGLRenderingContext.enable()")}}
+
Enables specific WebGL capabilities for this context.
+
{{domxref("WebGLRenderingContext.frontFace()")}}
+
Specifies whether polygons are front- or back-facing by setting a winding orientation.
+
{{domxref("WebGLRenderingContext.getParameter()")}}
+
Returns a value for the passed parameter name.
+
{{domxref("WebGLRenderingContext.getError()")}}
+
Returns error information.
+
{{domxref("WebGLRenderingContext.hint()")}}
+
Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.
+
{{domxref("WebGLRenderingContext.isEnabled()")}}
+
Tests whether a specific WebGL capability is enabled or not for this context.
+
{{domxref("WebGLRenderingContext.lineWidth()")}}
+
Sets the line width of rasterized lines.
+
{{domxref("WebGLRenderingContext.pixelStorei()")}}
+
Specifies the pixel storage modes
+
{{domxref("WebGLRenderingContext.polygonOffset()")}}
+
Specifies the scale factors and units to calculate depth values.
+
{{domxref("WebGLRenderingContext.sampleCoverage()")}}
+
Specifies multi-sample coverage parameters for anti-aliasing effects.
+
{{domxref("WebGLRenderingContext.stencilFunc()")}}
+
Sets the both front and back function and reference value for stencil testing.
+
{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}
+
Sets the front and/or back function and reference value for stencil testing.
+
{{domxref("WebGLRenderingContext.stencilMask()")}}
+
Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
+
{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}
+
Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
+
{{domxref("WebGLRenderingContext.stencilOp()")}}
+
Sets both the front and back-facing stencil test actions.
+
{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}
+
Sets the front and/or back-facing stencil test actions.
+
+ +

Buffers

+ +
+
{{domxref("WebGLRenderingContext.bindBuffer()")}}
+
Binds a WebGLBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.bufferData()")}}
+
Updates buffer data.
+
{{domxref("WebGLRenderingContext.bufferSubData()")}}
+
Updates buffer data starting at a passed offset.
+
{{domxref("WebGLRenderingContext.createBuffer()")}}
+
Creates a WebGLBuffer object.
+
{{domxref("WebGLRenderingContext.deleteBuffer()")}}
+
Deletes a WebGLBuffer object.
+
{{domxref("WebGLRenderingContext.getBufferParameter()")}}
+
Returns information about the buffer.
+
{{domxref("WebGLRenderingContext.isBuffer()")}}
+
Returns a Boolean indicating if the passed buffer is valid.
+
+ +

Framebuffers

+ +
+
{{domxref("WebGLRenderingContext.bindFramebuffer()")}}
+
Binds a WebGLFrameBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
+
Returns the status of the framebuffer.
+
{{domxref("WebGLRenderingContext.createFramebuffer()")}}
+
Creates a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
+
Deletes a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
+
Attaches a WebGLRenderingBuffer object to a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
+
Attaches a textures image to a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
+
Returns information about the framebuffer.
+
{{domxref("WebGLRenderingContext.isFramebuffer()")}}
+
Returns a Boolean indicating if the passed WebGLFrameBuffer object is valid.
+
{{domxref("WebGLRenderingContext.readPixels()")}}
+
Reads a block of pixels from the WebGLFrameBuffer.
+
+ +

Renderbuffers

+ +
+
{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
+
Binds a WebGLRenderBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.createRenderbuffer()")}}
+
Creates a WebGLRenderBuffer object.
+
{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
+
Deletes a WebGLRenderBuffer object.
+
{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
+
Returns information about the renderbuffer.
+
{{domxref("WebGLRenderingContext.isRenderbuffer()")}}
+
Returns a Boolean indicating if the passed WebGLRenderingBuffer is valid.
+
{{domxref("WebGLRenderingContext.renderbufferStorage()")}}
+
Creates a renderbuffer data store.
+
+ +

Textures

+ +
+
{{domxref("WebGLRenderingContext.bindTexture()")}}
+
Binds a WebGLTexture object to a given target.
+
{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
+
Specifies a 2D texture image in a compressed format.
+
{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
+
Specifies a 2D texture sub-image in a compressed format.
+
{{domxref("WebGLRenderingContext.copyTexImage2D()")}}
+
Copies a 2D texture image.
+
{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
+
Copies a 2D texture sub-image.
+
{{domxref("WebGLRenderingContext.createTexture()")}}
+
Creates a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.deleteTexture()")}}
+
Deletes a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.generateMipmap()")}}
+
Generates a set of mipmaps for a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.getTexParameter()")}}
+
Returns information about the texture.
+
{{domxref("WebGLRenderingContext.isTexture()")}}
+
Returns a Boolean indicating if the passed WebGLTexture is valid.
+
{{domxref("WebGLRenderingContext.texImage2D()")}}
+
Specifies a 2D texture image.
+
{{domxref("WebGLRenderingContext.texSubImage2D()")}}
+
Updates a sub-rectangle of the current WebGLTexture.
+
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}
+
Sets texture parameters.
+
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}
+
Sets texture parameters.
+
+ +

Programs and shaders

+ +
+
{{domxref("WebGLRenderingContext.attachShader()")}}
+
Attaches a WebGLShader to a WebGLProgram.
+
{{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+
Binds a generic vertex index to a named attribute variable.
+
{{domxref("WebGLRenderingContext.compileShader()")}}
+
Compiles a WebGLShader.
+
{{domxref("WebGLRenderingContext.createProgram()")}}
+
Creates a WebGLProgram.
+
{{domxref("WebGLRenderingContext.createShader()")}}
+
Creates a WebGLShader.
+
{{domxref("WebGLRenderingContext.deleteProgram()")}}
+
Deletes a WebGLProgram.
+
{{domxref("WebGLRenderingContext.deleteShader()")}}
+
Deletes a WebGLShader.
+
{{domxref("WebGLRenderingContext.detachShader()")}}
+
Detaches a WebGLShader.
+
{{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+
Returns a list of WebGLShader objects attached to a WebGLProgram.
+
{{domxref("WebGLRenderingContext.getProgramParameter()")}}
+
Returns information about the program.
+
{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+
Returns the information log for a WebGLProgram object.
+
{{domxref("WebGLRenderingContext.getShaderParameter()")}}
+
Returns information about the shader.
+
{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+
Returns a WebGLShaderPrecisionFormat object describing the precision for the numeric format of the shader.
+
{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+
Returns the information log for a WebGLShader object.
+
{{domxref("WebGLRenderingContext.getShaderSource()")}}
+
Returns the source code of a WebGLShader as a string.
+
{{domxref("WebGLRenderingContext.isProgram()")}}
+
Returns a Boolean indicating if the passed WebGLProgram is valid.
+
{{domxref("WebGLRenderingContext.isShader()")}}
+
Returns a Boolean indicating if the passed WebGLShader is valid.
+
{{domxref("WebGLRenderingContext.linkProgram()")}}
+
Links the passed WebGLProgram object.
+
{{domxref("WebGLRenderingContext.shaderSource()")}}
+
Sets the source code in a WebGLShader.
+
{{domxref("WebGLRenderingContext.useProgram()")}}
+
Uses the specified WebGLProgram as part the current rendering state.
+
{{domxref("WebGLRenderingContext.validateProgram()")}}
+
Validates a WebGLProgram.
+
+ +

Uniforms and attributes

+ +
+
{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
+
Disables a vertex attribute array at a given position.
+
{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}
+
Enables a vertex attribute array at a given position.
+
{{domxref("WebGLRenderingContext.getActiveAttrib()")}}
+
Returns information about an active attribute variable.
+
{{domxref("WebGLRenderingContext.getActiveUniform()")}}
+
Returns information about an active uniform variable.
+
{{domxref("WebGLRenderingContext.getAttribLocation()")}}
+
Returns the location of an attribute variable.
+
{{domxref("WebGLRenderingContext.getUniform()")}}
+
Returns the value of a uniform variable at a given location.
+
{{domxref("WebGLRenderingContext.getUniformLocation()")}}
+
Returns the location of a uniform variable.
+
{{domxref("WebGLRenderingContext.getVertexAttrib()")}}
+
Returns information about a vertex attribute at a given position.
+
{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}
+
Returns the address of a given vertex attribute.
+
{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}
+
Specifies a value for a uniform variable.
+
{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}
+
Specifies a matrix value for a uniform variable.
+
{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}
+
Specifies a value for a generic vertex attribute.
+
{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}
+
Specifies the data formats and locations of vertex attributes in a vertex attributes array.
+
+ +

Drawing buffers

+ +
+
{{domxref("WebGLRenderingContext.clear()")}}
+
Clears specified buffers to preset values.
+
{{domxref("WebGLRenderingContext.drawArrays()")}}
+
Renders primitives from array data.
+
{{domxref("WebGLRenderingContext.drawElements()")}}
+
Renders primitives from element array data.
+
{{domxref("WebGLRenderingContext.finish()")}}
+
Blocks execution until all previously called commands are finished.
+
{{domxref("WebGLRenderingContext.flush()")}}
+
Empties different buffer commands, causing all commands to be executed as quickly as possible.
+
+ +

Working with extensions

+ +

These methods manage WebGL extensions:

+ +
+
{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
+
Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.
+
{{domxref("WebGLRenderingContext.getExtension()")}}
+
Returns an extension object.
+
+ +

Examples

+ +

WebGL context feature detection

+ +

{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}

+ +

{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}

+ +

{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}

+ +

Effect of canvas size on rendering with WebGL

+ +

{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}

+ +

{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}

+ +

{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}{{Spec2('WebGL')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}

+ +

See also

+ + diff --git a/files/fr/web/api/webglrenderingcontext/isbuffer/index.html b/files/fr/web/api/webglrenderingcontext/isbuffer/index.html deleted file mode 100644 index 8a10a0f09c..0000000000 --- a/files/fr/web/api/webglrenderingcontext/isbuffer/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: WebGLRenderingContext.isBuffer() -slug: Web/API/WebGLRenderingContext/isBuffer -tags: - - API - - Méthode - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/isBuffer ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.isBuffer() de l'API WebGL renvoie true si le {{domxref ("WebGLBuffer")}} passé est valide et false dans le cas contraire.

- -

Syntaxe

- -
GLboolean gl.isBuffer(tampon);
-
- -

Paramètres

- -
-
tampon
-
Un {{domxref("WebGLBuffer")}} à vérifier.
-
- -

Valeur retournée

- -

Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide.

- -

Exemples

- -

Création d'un tampon

- -
var canevas = document.getElementById('canevas');
-var gl = canevas.getContext('webgl');
-var tampon = gl.createBuffer();
-
-gl.isBuffer(tampon);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.5", "isBuffer")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glIsBuffer.xml", "glIsBuffer")}}{{Spec2('OpenGL ES 2.0')}} -

Page man de l’API OpenGL.

-
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.isBuffer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/isbuffer/index.md b/files/fr/web/api/webglrenderingcontext/isbuffer/index.md new file mode 100644 index 0000000000..8a10a0f09c --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/isbuffer/index.md @@ -0,0 +1,77 @@ +--- +title: WebGLRenderingContext.isBuffer() +slug: Web/API/WebGLRenderingContext/isBuffer +tags: + - API + - Méthode + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/isBuffer +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.isBuffer() de l'API WebGL renvoie true si le {{domxref ("WebGLBuffer")}} passé est valide et false dans le cas contraire.

+ +

Syntaxe

+ +
GLboolean gl.isBuffer(tampon);
+
+ +

Paramètres

+ +
+
tampon
+
Un {{domxref("WebGLBuffer")}} à vérifier.
+
+ +

Valeur retournée

+ +

Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide.

+ +

Exemples

+ +

Création d'un tampon

+ +
var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+gl.isBuffer(tampon);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.5", "isBuffer")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glIsBuffer.xml", "glIsBuffer")}}{{Spec2('OpenGL ES 2.0')}} +

Page man de l’API OpenGL.

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.isBuffer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/shadersource/index.html b/files/fr/web/api/webglrenderingcontext/shadersource/index.html deleted file mode 100644 index 7825a72f7b..0000000000 --- a/files/fr/web/api/webglrenderingcontext/shadersource/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: WebGLRenderingContext.shaderSource() -slug: Web/API/WebGLRenderingContext/shaderSource -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/shaderSource ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.shaderSource() de l'API WebGL définit le code source d'un {{domxref("WebGLShader")}}.

- -

Syntaxe

- -
void gl.shaderSource(shader, source);
-
- -

Parameters

- -
-
shader
-
Un objet {{domxref("WebGLShader")}} dans lequel définir le code source.
-
source
-
Une {{domxref("DOMString")}} contenant le code source GLSL à définir.
-
- -

Valeur retournée

- -

Aucune.

- -

Exemple

- -
var shader = gl.createShader(gl.VERTEX_SHADER);
-gl.shaderSource(shader, originalSource);
-
-var source = gl.getShaderSource(shader);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "shaderSource")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.shaderSource")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/shadersource/index.md b/files/fr/web/api/webglrenderingcontext/shadersource/index.md new file mode 100644 index 0000000000..7825a72f7b --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/shadersource/index.md @@ -0,0 +1,74 @@ +--- +title: WebGLRenderingContext.shaderSource() +slug: Web/API/WebGLRenderingContext/shaderSource +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/shaderSource +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.shaderSource() de l'API WebGL définit le code source d'un {{domxref("WebGLShader")}}.

+ +

Syntaxe

+ +
void gl.shaderSource(shader, source);
+
+ +

Parameters

+ +
+
shader
+
Un objet {{domxref("WebGLShader")}} dans lequel définir le code source.
+
source
+
Une {{domxref("DOMString")}} contenant le code source GLSL à définir.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exemple

+ +
var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, originalSource);
+
+var source = gl.getShaderSource(shader);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "shaderSource")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.shaderSource")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.html b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html deleted file mode 100644 index af95e8f3c8..0000000000 --- a/files/fr/web/api/webglrenderingcontext/teximage2d/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: WebGLRenderingContext.texImage2D() -slug: Web/API/WebGLRenderingContext/texImage2D -tags: - - API - - Méthode - - Reference - - Textures - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/texImage2D ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.texImage2D() de l'API WebGL spécifie une image de texture bidimensionnelle.

- -

Syntaxe

- -
// WebGL1:
-void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ArrayBufferView? pixels);
-void gl.texImage2D(cible, niveau, formatinterne, format, type, ImageData? pixels);
-void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLImageElement? pixels);
-void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLCanvasElement? pixels);
-void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLVideoElement? pixels);
-void gl.texImage2D(cible, niveau, formatinterne, format, type, ImageBitmap? pixels);
-
-// WebGL2:
-void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, GLintptr decalage);
-void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLCanvasElement source);
-void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLImageElement source);
-void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLVideoElement source);
-void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ImageBitmap source);
-void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ImageData source);
-void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ArrayBufferView donneesSrc, decalageSrc);
-
- -

Paramètres

- -
-
cible
-

Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles :

-
    -
  • gl.TEXTURE_2D : une texture bidimensionnelle ;
    • -
  • gl.TEXTURE_CUBE_MAP_POSITIVE_X : face X positive pour une texture mappée sur un cube ;
    • -
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_X : face X négative pour une texture mappée sur un cube ;
    • -
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Y : face Y positive pour une texture mappée sur un cube ;
    • -
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Y : face Y négative pour une texture mappée sur un cube ;
    • -
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Z : face Z positive pour une texture mappée sur un cube ;
    • -
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Z : face Z négative pour une texture mappée sur un cube.
    • -
-
-
niveau
-
Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap.
-
formatinterne
-

Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles :

-
    -
  • gl.ALPHA : ignore les composantes rouge, vert et bleu, et lit la composante alpha ;
    • -
  • gl.RGB : ignore la composante alpha et lit les composantes rouge, vert et bleu ;
    • -
  • gl.RGBA : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ;
    • -
  • gl.LUMINANCE : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ;
    • -
  • gl.LUMINANCE_ALPHA : chaque composante est une composante de luminance/alpha ;
    • -
  • lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} : -
      -
    • gl.DEPTH_COMPONENT
      • -
    • gl.DEPTH_STENCIL
      • -
    -
    • -
  • lors de l'utilisation de l'extension {{domxref("EXT_sRGB")}} : -
      -
    • ext.SRGB_EXT
      • -
    • ext.SRGB_ALPHA_EXT
      • -
    -
    • -
  • Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : -
      -
    • gl.R8
      • -
    • gl.R16F
      • -
    • gl.R32F
      • -
    • gl.R8UI
      • -
    • gl.RG8
      • -
    • gl.RG16F
      • -
    • gl.RG32F
      • -
    • gl.RG8UI
      • -
    • gl.RG16UI
      • -
    • gl.RG32UI
      • -
    • gl.RGB8
      • -
    • gl.SRGB8
      • -
    • gl.RGB565
      • -
    • gl.R11F_G11F_B10F
      • -
    • gl.RGB9_E5
      • -
    • gl.RGB16F
      • -
    • gl.RGB32F
      • -
    • gl.RGB8UI
      • -
    • gl.RGBA8
      • -
    • gl.SRGB8_APLHA8
      • -
    • gl.RGB5_A1
      • -
    • gl.RGB10_A2
      • -
    • gl.RGBA4
      • -
    • gl.RGBA16F
      • -
    • gl.RGBA32F
      • -
    • gl.RGBA8UI
      • -
    -
    • -
-
-
largeur
-
Un {{domxref ("GLsizei")}} indiquant la largeur de la texture.
-
hauteur
-
Un {{domxref ("GLsizei")}} indiquant la hauteur de la texture.
-
bordure
-
Un {{domxref("GLint")}} indiquant la largeur de la bordure. Doit être 0.
-
format
-
Un {{domxref("GLenum")}} indiquant le format des données de texel. En WebGL 1, cela doit être identique à formatinterne (voir ci-dessus). En WebGL 2, les combinaisons sont répertoriées dans ce tableau.
-
type
-

Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles :

-
    -
  • gl.UNSIGNED_BYTE : 8 bits par canal pour gl.RGBA ;
    • -
  • gl.UNSIGNED_SHORT_5_6_5 : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ;
    • -
  • gl.UNSIGNED_SHORT_4_4_4_4 : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ;
    • -
  • gl.UNSIGNED_SHORT_5_5_5_1 : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ;
    • -
  • lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} : -
      -
    • gl.UNSIGNED_SHORT
      • -
    • gl.UNSIGNED_INT
      • -
    • ext.UNSIGNED_INT_24_8_WEBGL (constante fournie par l'extension)
      • -
    -
    • -
  • lors de l'utilisation de l'extension {{domxref("OES_texture_float")}} : -
      -
    • gl.FLOAT
      • -
    -
    • -
  • lors de l'utilisation de l'extension {{domxref("OES_texture_half_float")}} : -
      -
    • ext.HALF_FLOAT_OES (constante fournie par l'extension)
      • -
    -
    • -
  • lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : -
      -
    • gl.BYTE
      • -
    • gl.UNSIGNED_SHORT
      • -
    • gl.SHORT
      • -
    • gl.UNSIGNED_INT
      • -
    • gl.INT
      • -
    • gl.HALF_FLOAT
      • -
    • gl.FLOAT
      • -
    • gl.UNSIGNED_INT_2_10_10_10_REV
      • -
    • gl.UNSIGNED_INT_10F_11F_11F_REV
      • -
    • gl.UNSIGNED_INT_5_9_9_9_REV
      • -
    • gl.UNSIGNED_INT_24_8
      • -
    • gl.FLOAT_32_UNSIGNED_INT_24_8_REV (les pixels doivent être {{jsxref("null")}})
      • -
    -
    • -
-
-
pixels
-

L'un des objets suivants peut être utilisé comme source de pixels pour la texture :

-
    -
  • {{domxref("ArrayBufferView")}}, -
      -
    • un {{jsxref("Uint8Array")}} doit être utilisé si type est gl.UNSIGNED_BYTE ;
      • -
    • un {{jsxref("Uint16Array")}} doit être utilisé si type est gl.UNSIGNED_SHORT_5_6_5, gl.UNSIGNED_SHORT_4_4_4_4, gl.UNSIGNED_SHORT_5_5_5_1, gl.UNSIGNED_SHORT ou ext.HALF_FLOAT_OES ;
      • -
    • un {{jsxref("Uint32Array")}} doit être utilisé si type est gl.UNSIGNED_INT ou ext.UNSIGNED_INT_24_8_WEBGL ;
      • -
    • un {{jsxref("Float32Array")}} doit être utilisé si type est gl.FLOAT ;
      • -
    -
    • -
  • {{domxref("ImageData")}},
    • -
  • {{domxref("HTMLImageElement")}},
    • -
  • {{domxref("HTMLCanvasElement")}},
    • -
  • {{domxref("HTMLVideoElement")}},
    • -
  • {{domxref("ImageBitmap")}}.
    • -
-
-
decalage
-
(WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le WebGLBuffer lié à la cible PIXEL_UNPACK_BUFFER.
-
- -

Valeur retournée

- -

Aucune.

- -

Exemples

- -
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "texImage2D")}}{{Spec2('WebGL')}} -

Définition initiale pour WebGL.

-
{{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}}{{Spec2('OpenGL ES 2.0')}} -

Page man de l’API OpenGL ES 2.0 (similaire).

-
{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}{{Spec2('WebGL2')}}Définition mise à jour pour WebGL.
{{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}}{{Spec2('OpenGL ES 3.0')}}Page man de l’API OpenGL ES 3.0 (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.texImage2D")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.md b/files/fr/web/api/webglrenderingcontext/teximage2d/index.md new file mode 100644 index 0000000000..af95e8f3c8 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.md @@ -0,0 +1,240 @@ +--- +title: WebGLRenderingContext.texImage2D() +slug: Web/API/WebGLRenderingContext/texImage2D +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/texImage2D +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.texImage2D() de l'API WebGL spécifie une image de texture bidimensionnelle.

+ +

Syntaxe

+ +
// WebGL1:
+void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ArrayBufferView? pixels);
+void gl.texImage2D(cible, niveau, formatinterne, format, type, ImageData? pixels);
+void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLImageElement? pixels);
+void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLCanvasElement? pixels);
+void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLVideoElement? pixels);
+void gl.texImage2D(cible, niveau, formatinterne, format, type, ImageBitmap? pixels);
+
+// WebGL2:
+void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, GLintptr decalage);
+void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLCanvasElement source);
+void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLImageElement source);
+void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLVideoElement source);
+void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ImageBitmap source);
+void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ImageData source);
+void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ArrayBufferView donneesSrc, decalageSrc);
+
+ +

Paramètres

+ +
+
cible
+

Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles :

+
    +
  • gl.TEXTURE_2D : une texture bidimensionnelle ;
    • +
  • gl.TEXTURE_CUBE_MAP_POSITIVE_X : face X positive pour une texture mappée sur un cube ;
    • +
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_X : face X négative pour une texture mappée sur un cube ;
    • +
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Y : face Y positive pour une texture mappée sur un cube ;
    • +
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Y : face Y négative pour une texture mappée sur un cube ;
    • +
  • gl.TEXTURE_CUBE_MAP_POSITIVE_Z : face Z positive pour une texture mappée sur un cube ;
    • +
  • gl.TEXTURE_CUBE_MAP_NEGATIVE_Z : face Z négative pour une texture mappée sur un cube.
    • +
+
+
niveau
+
Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap.
+
formatinterne
+

Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles :

+
    +
  • gl.ALPHA : ignore les composantes rouge, vert et bleu, et lit la composante alpha ;
    • +
  • gl.RGB : ignore la composante alpha et lit les composantes rouge, vert et bleu ;
    • +
  • gl.RGBA : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ;
    • +
  • gl.LUMINANCE : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ;
    • +
  • gl.LUMINANCE_ALPHA : chaque composante est une composante de luminance/alpha ;
    • +
  • lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} : +
      +
    • gl.DEPTH_COMPONENT
      • +
    • gl.DEPTH_STENCIL
      • +
    +
    • +
  • lors de l'utilisation de l'extension {{domxref("EXT_sRGB")}} : +
      +
    • ext.SRGB_EXT
      • +
    • ext.SRGB_ALPHA_EXT
      • +
    +
    • +
  • Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : +
      +
    • gl.R8
      • +
    • gl.R16F
      • +
    • gl.R32F
      • +
    • gl.R8UI
      • +
    • gl.RG8
      • +
    • gl.RG16F
      • +
    • gl.RG32F
      • +
    • gl.RG8UI
      • +
    • gl.RG16UI
      • +
    • gl.RG32UI
      • +
    • gl.RGB8
      • +
    • gl.SRGB8
      • +
    • gl.RGB565
      • +
    • gl.R11F_G11F_B10F
      • +
    • gl.RGB9_E5
      • +
    • gl.RGB16F
      • +
    • gl.RGB32F
      • +
    • gl.RGB8UI
      • +
    • gl.RGBA8
      • +
    • gl.SRGB8_APLHA8
      • +
    • gl.RGB5_A1
      • +
    • gl.RGB10_A2
      • +
    • gl.RGBA4
      • +
    • gl.RGBA16F
      • +
    • gl.RGBA32F
      • +
    • gl.RGBA8UI
      • +
    +
    • +
+
+
largeur
+
Un {{domxref ("GLsizei")}} indiquant la largeur de la texture.
+
hauteur
+
Un {{domxref ("GLsizei")}} indiquant la hauteur de la texture.
+
bordure
+
Un {{domxref("GLint")}} indiquant la largeur de la bordure. Doit être 0.
+
format
+
Un {{domxref("GLenum")}} indiquant le format des données de texel. En WebGL 1, cela doit être identique à formatinterne (voir ci-dessus). En WebGL 2, les combinaisons sont répertoriées dans ce tableau.
+
type
+

Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles :

+
    +
  • gl.UNSIGNED_BYTE : 8 bits par canal pour gl.RGBA ;
    • +
  • gl.UNSIGNED_SHORT_5_6_5 : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ;
    • +
  • gl.UNSIGNED_SHORT_4_4_4_4 : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ;
    • +
  • gl.UNSIGNED_SHORT_5_5_5_1 : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ;
    • +
  • lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} : +
      +
    • gl.UNSIGNED_SHORT
      • +
    • gl.UNSIGNED_INT
      • +
    • ext.UNSIGNED_INT_24_8_WEBGL (constante fournie par l'extension)
      • +
    +
    • +
  • lors de l'utilisation de l'extension {{domxref("OES_texture_float")}} : +
      +
    • gl.FLOAT
      • +
    +
    • +
  • lors de l'utilisation de l'extension {{domxref("OES_texture_half_float")}} : +
      +
    • ext.HALF_FLOAT_OES (constante fournie par l'extension)
      • +
    +
    • +
  • lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : +
      +
    • gl.BYTE
      • +
    • gl.UNSIGNED_SHORT
      • +
    • gl.SHORT
      • +
    • gl.UNSIGNED_INT
      • +
    • gl.INT
      • +
    • gl.HALF_FLOAT
      • +
    • gl.FLOAT
      • +
    • gl.UNSIGNED_INT_2_10_10_10_REV
      • +
    • gl.UNSIGNED_INT_10F_11F_11F_REV
      • +
    • gl.UNSIGNED_INT_5_9_9_9_REV
      • +
    • gl.UNSIGNED_INT_24_8
      • +
    • gl.FLOAT_32_UNSIGNED_INT_24_8_REV (les pixels doivent être {{jsxref("null")}})
      • +
    +
    • +
+
+
pixels
+

L'un des objets suivants peut être utilisé comme source de pixels pour la texture :

+
    +
  • {{domxref("ArrayBufferView")}}, +
      +
    • un {{jsxref("Uint8Array")}} doit être utilisé si type est gl.UNSIGNED_BYTE ;
      • +
    • un {{jsxref("Uint16Array")}} doit être utilisé si type est gl.UNSIGNED_SHORT_5_6_5, gl.UNSIGNED_SHORT_4_4_4_4, gl.UNSIGNED_SHORT_5_5_5_1, gl.UNSIGNED_SHORT ou ext.HALF_FLOAT_OES ;
      • +
    • un {{jsxref("Uint32Array")}} doit être utilisé si type est gl.UNSIGNED_INT ou ext.UNSIGNED_INT_24_8_WEBGL ;
      • +
    • un {{jsxref("Float32Array")}} doit être utilisé si type est gl.FLOAT ;
      • +
    +
    • +
  • {{domxref("ImageData")}},
    • +
  • {{domxref("HTMLImageElement")}},
    • +
  • {{domxref("HTMLCanvasElement")}},
    • +
  • {{domxref("HTMLVideoElement")}},
    • +
  • {{domxref("ImageBitmap")}}.
    • +
+
+
decalage
+
(WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le WebGLBuffer lié à la cible PIXEL_UNPACK_BUFFER.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exemples

+ +
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "texImage2D")}}{{Spec2('WebGL')}} +

Définition initiale pour WebGL.

+
{{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}}{{Spec2('OpenGL ES 2.0')}} +

Page man de l’API OpenGL ES 2.0 (similaire).

+
{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}{{Spec2('WebGL2')}}Définition mise à jour pour WebGL.
{{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}}{{Spec2('OpenGL ES 3.0')}}Page man de l’API OpenGL ES 3.0 (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.texImage2D")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/texparameter/index.html b/files/fr/web/api/webglrenderingcontext/texparameter/index.html deleted file mode 100644 index ec02f92374..0000000000 --- a/files/fr/web/api/webglrenderingcontext/texparameter/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: 'WebGLRenderingContext.texParameter[fi]()' -slug: Web/API/WebGLRenderingContext/texParameter -tags: - - API - - Méthode - - Reference - - Textures - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/texParameter ---- -
{{APIRef("WebGL")}}
- -

Les méthodes WebGLRenderingContext.texParameter[fi]() de l'API WebGL définissent les paramètres de texture.

- -

Syntaxe

- -
void gl.texParameterf(GLenum cible, GLenum nomp, GLfloat param);
-void gl.texParameteri(GLenum cible, GLenum nomp, GLint param);
-
- -

Paramètres

- -
-
cible
-
Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : -
    -
  • gl.TEXTURE_2D : une texture bi-dimensionelle.
    • -
  • gl.TEXTURE_CUBE_MAP : une texte appliquée sur un cube.
    • -
  • Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : -
      -
    • gl.TEXTURE_3D : une texture tri-dimensionnelle.
      • -
    • gl.TEXTURE_2D_ARRAY : une texture bi-dimensionnelle en tableau.
      • -
    -
    • -
-
-
- -

Le paramètre nomp est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre param est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre nomp indiqué.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
pnomDescriptionparam
Disponible en WebGL 1
gl.TEXTURE_MAG_FILTERFiltre de grossissement de texturegl.LINEAR (valeur par défaut), gl.NEAREST.
gl.TEXTURE_MIN_FILTERFiltre de réduction de texturegl.LINEAR, gl.NEAREST, gl.NEAREST_MIPMAP_NEAREST, gl.LINEAR_MIPMAP_NEAREST, gl.NEAREST_MIPMAP_LINEAR (valeur par défaut), gl.LINEAR_MIPMAP_LINEAR.
gl.TEXTURE_WRAP_SFonction d'emballage pour la coordonnée de texture sgl.REPEAT (valeur par défaut),gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
gl.TEXTURE_WRAP_TFonction d'emballage pour la coordonnée de texture tgl.REPEAT (valeur par défaut),gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
Disponible en outre quand l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée
ext.TEXTURE_MAX_ANISOTROPY_EXTAnisotropie maximum pour une textureUne valeur {{domxref("GLfloat")}}.
Disponible en outre quand un contexte WebGL 2 est utilisé
gl.TEXTURE_BASE_LEVELNiveau de mipmap de textureToutes valeurs int.
gl.TEXTURE_COMPARE_FUNCFonction de comparaison de texturegl.LEQUAL (valeur par défaut), gl.GEQUAL, gl.LESS, gl.GREATER, gl.EQUAL, gl.NOTEQUAL, gl.ALWAYS, gl.NEVER.
gl.TEXTURE_COMPARE_MODEMode de comparaison de texturegl.NONE (valeur défaut), gl.COMPARE_REF_TO_TEXTURE.
gl.TEXTURE_MAX_LEVELNiveau maximum de mipmap de texture en tableauToutes valeurs int.
gl.TEXTURE_MAX_LOD -

Valeur de niveau-de-détail maximum de texture

- 		Toutes valeurs float.
gl.TEXTURE_MIN_LODValeur de niveau-de-détail minimum de textureToutes valeurs float.
gl.TEXTURE_WRAP_RFonction d'emballage pour la coordonnée de texture  rgl.REPEAT (valeur par défaut), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
- -

Valeur retournée

- -

Aucune.

- -

Exemples

- -
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "texParameter[fi]")}}{{Spec2('WebGL')}}Définition initiale pour WebGL.
{{SpecName('OpenGL ES 2.0', "glTexParameter.xml", "glTexParameter")}}{{Spec2('OpenGL ES 2.0')}}Page man de l’API OpenGL ES 2.0 API (similaire).
{{SpecName('WebGL2', "#3.7.6", "texParameter[fi]")}}{{Spec2('WebGL2')}}Définition mise à jour pour WebGL.
{{SpecName('OpenGL ES 3.0', "glTexParameter.xhtml", "glTexParameter")}}{{Spec2('OpenGL ES 3.0')}}Page man de l’API OpenGL ES 3.0 API (similaire).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.texParameterf")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/texparameter/index.md b/files/fr/web/api/webglrenderingcontext/texparameter/index.md new file mode 100644 index 0000000000..ec02f92374 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/texparameter/index.md @@ -0,0 +1,177 @@ +--- +title: 'WebGLRenderingContext.texParameter[fi]()' +slug: Web/API/WebGLRenderingContext/texParameter +tags: + - API + - Méthode + - Reference + - Textures + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/texParameter +--- +
{{APIRef("WebGL")}}
+ +

Les méthodes WebGLRenderingContext.texParameter[fi]() de l'API WebGL définissent les paramètres de texture.

+ +

Syntaxe

+ +
void gl.texParameterf(GLenum cible, GLenum nomp, GLfloat param);
+void gl.texParameteri(GLenum cible, GLenum nomp, GLint param);
+
+ +

Paramètres

+ +
+
cible
+
Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : +
    +
  • gl.TEXTURE_2D : une texture bi-dimensionelle.
    • +
  • gl.TEXTURE_CUBE_MAP : une texte appliquée sur un cube.
    • +
  • Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : +
      +
    • gl.TEXTURE_3D : une texture tri-dimensionnelle.
      • +
    • gl.TEXTURE_2D_ARRAY : une texture bi-dimensionnelle en tableau.
      • +
    +
    • +
+
+
+ +

Le paramètre nomp est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre param est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre nomp indiqué.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
pnomDescriptionparam
Disponible en WebGL 1
gl.TEXTURE_MAG_FILTERFiltre de grossissement de texturegl.LINEAR (valeur par défaut), gl.NEAREST.
gl.TEXTURE_MIN_FILTERFiltre de réduction de texturegl.LINEAR, gl.NEAREST, gl.NEAREST_MIPMAP_NEAREST, gl.LINEAR_MIPMAP_NEAREST, gl.NEAREST_MIPMAP_LINEAR (valeur par défaut), gl.LINEAR_MIPMAP_LINEAR.
gl.TEXTURE_WRAP_SFonction d'emballage pour la coordonnée de texture sgl.REPEAT (valeur par défaut),gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
gl.TEXTURE_WRAP_TFonction d'emballage pour la coordonnée de texture tgl.REPEAT (valeur par défaut),gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
Disponible en outre quand l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée
ext.TEXTURE_MAX_ANISOTROPY_EXTAnisotropie maximum pour une textureUne valeur {{domxref("GLfloat")}}.
Disponible en outre quand un contexte WebGL 2 est utilisé
gl.TEXTURE_BASE_LEVELNiveau de mipmap de textureToutes valeurs int.
gl.TEXTURE_COMPARE_FUNCFonction de comparaison de texturegl.LEQUAL (valeur par défaut), gl.GEQUAL, gl.LESS, gl.GREATER, gl.EQUAL, gl.NOTEQUAL, gl.ALWAYS, gl.NEVER.
gl.TEXTURE_COMPARE_MODEMode de comparaison de texturegl.NONE (valeur défaut), gl.COMPARE_REF_TO_TEXTURE.
gl.TEXTURE_MAX_LEVELNiveau maximum de mipmap de texture en tableauToutes valeurs int.
gl.TEXTURE_MAX_LOD +

Valeur de niveau-de-détail maximum de texture

+ 		Toutes valeurs float.
gl.TEXTURE_MIN_LODValeur de niveau-de-détail minimum de textureToutes valeurs float.
gl.TEXTURE_WRAP_RFonction d'emballage pour la coordonnée de texture  rgl.REPEAT (valeur par défaut), gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
+ +

Valeur retournée

+ +

Aucune.

+ +

Exemples

+ +
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.8", "texParameter[fi]")}}{{Spec2('WebGL')}}Définition initiale pour WebGL.
{{SpecName('OpenGL ES 2.0', "glTexParameter.xml", "glTexParameter")}}{{Spec2('OpenGL ES 2.0')}}Page man de l’API OpenGL ES 2.0 API (similaire).
{{SpecName('WebGL2', "#3.7.6", "texParameter[fi]")}}{{Spec2('WebGL2')}}Définition mise à jour pour WebGL.
{{SpecName('OpenGL ES 3.0', "glTexParameter.xhtml", "glTexParameter")}}{{Spec2('OpenGL ES 3.0')}}Page man de l’API OpenGL ES 3.0 API (similaire).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.texParameterf")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.html b/files/fr/web/api/webglrenderingcontext/uniform/index.html deleted file mode 100644 index cb27eaeb2c..0000000000 --- a/files/fr/web/api/webglrenderingcontext/uniform/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: 'WebGLRenderingContext.uniform[1234][fi][v]()' -slug: Web/API/WebGLRenderingContext/uniform -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/uniform ---- -
{{APIRef("WebGL")}}
- -

Les méthodes WebGLRenderingContext.uniform[1234][fi][v]() de l'API WebGL indiquent les valeurs des variables uniform.

- -
-

Note : Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.

-
- -

Syntaxe

- -
void gl.uniform1f(emplacement, v0);
-void gl.uniform1fv(emplacement, valeur);
-void gl.uniform1i(emplacement, v0);
-void gl.uniform1iv(emplacement, valeur);
-
-void gl.uniform2f(emplacement, v0, v1);
-void gl.uniform2fv(emplacement, valeur);
-void gl.uniform2i(emplacement, v0, v1);
-void gl.uniform2iv(emplacement, valeur);
-
-void gl.uniform3f(emplacement, v0, v1, v2);
-void gl.uniform3fv(emplacement, valeur);
-void gl.uniform3i(emplacement, v0, v1, v2);
-void gl.uniform3iv(emplacement, valeur);
-
-void gl.uniform4f(emplacement, v0, v1, v2, v3);
-void gl.uniform4fv(emplacement, valeur);
-void gl.uniform4i(emplacement, v0, v1, v2, v3);
-void gl.uniform4iv(emplacement, valeur);
-
- -

Paramètres

- -
-
emplacement
-
Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier.
-
valeur, v0, v1, v2, v3
-
La nouvelle valeur à utiliser pour la variable uniform. Types possibles : -
    -
  • Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f").
    • -
  • Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv").
    • -
  • Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i").
    • -
  • Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv").
    • -
-
-
- -

Valeur retournée

- -

Aucune.

- -

Exemples

- -
gl.uniform1f(u_alpha, 0.8);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "uniform")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.uniform1f")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.md b/files/fr/web/api/webglrenderingcontext/uniform/index.md new file mode 100644 index 0000000000..cb27eaeb2c --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/uniform/index.md @@ -0,0 +1,97 @@ +--- +title: 'WebGLRenderingContext.uniform[1234][fi][v]()' +slug: Web/API/WebGLRenderingContext/uniform +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/uniform +--- +
{{APIRef("WebGL")}}
+ +

Les méthodes WebGLRenderingContext.uniform[1234][fi][v]() de l'API WebGL indiquent les valeurs des variables uniform.

+ +
+

Note : Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.

+
+ +

Syntaxe

+ +
void gl.uniform1f(emplacement, v0);
+void gl.uniform1fv(emplacement, valeur);
+void gl.uniform1i(emplacement, v0);
+void gl.uniform1iv(emplacement, valeur);
+
+void gl.uniform2f(emplacement, v0, v1);
+void gl.uniform2fv(emplacement, valeur);
+void gl.uniform2i(emplacement, v0, v1);
+void gl.uniform2iv(emplacement, valeur);
+
+void gl.uniform3f(emplacement, v0, v1, v2);
+void gl.uniform3fv(emplacement, valeur);
+void gl.uniform3i(emplacement, v0, v1, v2);
+void gl.uniform3iv(emplacement, valeur);
+
+void gl.uniform4f(emplacement, v0, v1, v2, v3);
+void gl.uniform4fv(emplacement, valeur);
+void gl.uniform4i(emplacement, v0, v1, v2, v3);
+void gl.uniform4iv(emplacement, valeur);
+
+ +

Paramètres

+ +
+
emplacement
+
Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier.
+
valeur, v0, v1, v2, v3
+
La nouvelle valeur à utiliser pour la variable uniform. Types possibles : +
    +
  • Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f").
    • +
  • Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv").
    • +
  • Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i").
    • +
  • Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv").
    • +
+
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exemples

+ +
gl.uniform1f(u_alpha, 0.8);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "uniform")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.uniform1f")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html deleted file mode 100644 index 14f4da6939..0000000000 --- a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'WebGLRenderingContext.uniformMatrix[234]fv()' -slug: Web/API/WebGLRenderingContext/uniformMatrix -tags: - - API - - Matrice - - Reference - - Uniforms - - Variables Uniform - - WebGL - - WebGLAPI - - WebGLRenderingContext - - matrices - - uniformMatrix2fv - - uniformMatrix3fv - - uniformMatrix4fv -translation_of: Web/API/WebGLRenderingContext/uniformMatrix ---- -
{{APIRef("WebGL")}}
- -

Les méthodes WebGLRenderingContext.uniformMatrix[234]fv() de l'API WebGL définissent des valeurs matricielles pour les variables uniform.

- -

Les trois versions de cette méthode (uniformMatrix2fv(), uniformMatrix3fv() et unifomMatrix4fv()) prennent comme valeur d'entrée des vecteurs à 2, 3 et 4 composantes, respectivement.

- -

Syntaxe

- -
WebGLRenderingContext.uniformMatrix2fv(emplacement, transposer, valeur);
-WebGLRenderingContext.uniformMatrix3fv(emplacement, transposer, valeur);
-WebGLRenderingContext.uniformMatrix4fv(emplacement, transposer, valeur);
-
- -

Paramètres

- -
-
emplacement
-
Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.
-
transposer
-
Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être false.
-
valeur
-
-

Un {{jsxref("Float32Array")}} ou une suite de valeurs GLfloat.

-
-
- -

Valeur retournée

- -

undefined

- -

Exemples

- -
gl.uniformMatrix2fv(loc, false, [2.1, 2.2]);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "uniformMatrix")}}{{Spec2('WebGL')}} -

Définition initiale.

-
{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}{{Spec2('OpenGL ES 2.0')}} -

Page man de l’API OpenGL.

-
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md new file mode 100644 index 0000000000..14f4da6939 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md @@ -0,0 +1,88 @@ +--- +title: 'WebGLRenderingContext.uniformMatrix[234]fv()' +slug: Web/API/WebGLRenderingContext/uniformMatrix +tags: + - API + - Matrice + - Reference + - Uniforms + - Variables Uniform + - WebGL + - WebGLAPI + - WebGLRenderingContext + - matrices + - uniformMatrix2fv + - uniformMatrix3fv + - uniformMatrix4fv +translation_of: Web/API/WebGLRenderingContext/uniformMatrix +--- +
{{APIRef("WebGL")}}
+ +

Les méthodes WebGLRenderingContext.uniformMatrix[234]fv() de l'API WebGL définissent des valeurs matricielles pour les variables uniform.

+ +

Les trois versions de cette méthode (uniformMatrix2fv(), uniformMatrix3fv() et unifomMatrix4fv()) prennent comme valeur d'entrée des vecteurs à 2, 3 et 4 composantes, respectivement.

+ +

Syntaxe

+ +
WebGLRenderingContext.uniformMatrix2fv(emplacement, transposer, valeur);
+WebGLRenderingContext.uniformMatrix3fv(emplacement, transposer, valeur);
+WebGLRenderingContext.uniformMatrix4fv(emplacement, transposer, valeur);
+
+ +

Paramètres

+ +
+
emplacement
+
Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.
+
transposer
+
Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être false.
+
valeur
+
+

Un {{jsxref("Float32Array")}} ou une suite de valeurs GLfloat.

+
+
+ +

Valeur retournée

+ +

undefined

+ +

Exemples

+ +
gl.uniformMatrix2fv(loc, false, [2.1, 2.2]);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "uniformMatrix")}}{{Spec2('WebGL')}} +

Définition initiale.

+
{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}{{Spec2('OpenGL ES 2.0')}} +

Page man de l’API OpenGL.

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/useprogram/index.html b/files/fr/web/api/webglrenderingcontext/useprogram/index.html deleted file mode 100644 index dced5c95a4..0000000000 --- a/files/fr/web/api/webglrenderingcontext/useprogram/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: WebGLRenderingContext.useProgram() -slug: Web/API/WebGLRenderingContext/useProgram -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/useProgram ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.useProgram() de l'API WebGL définit le {{domxref("WebGLProgram")}} spécifié comme faisant partie de l'état de rendu en cours.

- -

Syntaxe

- -
void gl.useProgram(programme);
-
- -

Paramètres

- -
-
programme
-
Un {{domxref("WebGLProgram")}} à utiliser.
-
- -

Valeur retournée

- -

Aucune.

- -

Exemples

- -
var programme = gl.createProgram();
-
-// Attacher les shaders pré-existants
-gl.attachShader(programme, vertexShader);
-gl.attachShader(programme, fragmentShader);
-
-gl.linkProgram(programme);
-gl.useProgram(programme);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "useProgram")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
- -

Browser compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.useProgram")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/useprogram/index.md b/files/fr/web/api/webglrenderingcontext/useprogram/index.md new file mode 100644 index 0000000000..dced5c95a4 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/useprogram/index.md @@ -0,0 +1,80 @@ +--- +title: WebGLRenderingContext.useProgram() +slug: Web/API/WebGLRenderingContext/useProgram +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/useProgram +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.useProgram() de l'API WebGL définit le {{domxref("WebGLProgram")}} spécifié comme faisant partie de l'état de rendu en cours.

+ +

Syntaxe

+ +
void gl.useProgram(programme);
+
+ +

Paramètres

+ +
+
programme
+
Un {{domxref("WebGLProgram")}} à utiliser.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exemples

+ +
var programme = gl.createProgram();
+
+// Attacher les shaders pré-existants
+gl.attachShader(programme, vertexShader);
+gl.attachShader(programme, fragmentShader);
+
+gl.linkProgram(programme);
+gl.useProgram(programme);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.9", "useProgram")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
+ +

Browser compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.useProgram")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html deleted file mode 100644 index 93961c4fda..0000000000 --- a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: WebGLRenderingContext.vertexAttribPointer() -slug: Web/API/WebGLRenderingContext/vertexAttribPointer -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.vertexAttribPointer() de l'API WebGL spécifie la disposition en mémoire de l'objet de tampon vertex. Elle doit être appelée une fois pour chaque attribut de sommet.

- -

Syntaxe

- -
void gl.vertexAttribPointer(indice, taille, type, normalise, pas, decalage);
-
- -

Paramètres

- -
-
indice
-
Un {{domxref("GLuint")}} indiquant l'indice de l'attribut de sommet à modifier.
-
taille
-
Un {{domxref("GLint")}} indiquant le nombre de composantes par attribut de sommet. Doit être 1, 2, 3 ou 4.
-
type
-
Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles : -
    -
  • gl.BYTE : entier signé sur 8 bits, à valeurs dans [-128, 127]
    • -
  • gl.SHORT : entier signé sur 16 bits, à valeurs dans [-32768, 32767]
    • -
  • gl.UNSIGNED_BYTE : entier non signé sur 8 bits, à valeurs dans [0, 255]
    • -
  • gl.UNSIGNED_SHORT : entier non signé sur 16 bits, à valeurs dans [0, 65535]
    • -
  • gl.FLOAT : nombre flottant IEEE 32 bits
    • -
  • lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible : -
      -
    • gl.HALF_FLOAT : nombre flottant IEEE 16 bits
      • -
    -
    • -
-
-
normalise
-
Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant. -
    -
  • Pour les types gl.BYTE et gl.SHORT, normalise les valeurs à [-1, 1] si true.
    • -
  • Pour les types gl.UNSIGNED_BYTE et gl.UNSIGNED_SHORT, normalise les valeurs à [0, 1] si true.
    • -
  • Pour les types gl.FLOAT et gl.HALF_FLOAT, ce paramètre est sans effet.
    • -
-
-
pas
-
Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de pas est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours.
-
decalage
-
Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de type.
-
- -

Valeur retournée

- -

Aucune.

- -

Exceptions

- - - -

Description

- -

Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode gl.vertexAttribPointer(), nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux.

- -

Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en ArrayBuffer à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie.

- -

Le nombre maximum d'attributs de vertex dépend de la carte graphique, et vous pouvez appeler gl.getParameter(gl.MAX_VERTEX_ATTRIBS) pour obtenir cette valeur. Sur les cartes graphiques haut de gamme, le maximum est de 16, sur les cartes graphiques de bas de gamme, la valeur sera inférieure.

- -

Indice d'attribut

- -

Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options :

- - - -

Attributs entiers

- -

Bien que le ArrayBuffer puisse être rempli à la fois d'entiers et de flottants, les attributs seront toujours convertis en flottant lorsqu'ils seront envoyés au shader de sommet. Si vous avez besoin d'utiliser des entiers dans votre code de shader de sommet, vous pouvez, soit reconvertir les flottants en entiers dans le shader de sommet (par exemple, (int) floatNumber), soit utiliser {{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} à partir de WebGL2.

- -

Valeurs d'attribut par défaut

- -

Le code de vertex shader peut inclure un certain nombre d'attributs, mais nous n'avons pas besoin de spécifier les valeurs pour chaque attribut. A la place, nous pouvons fournir une valeur par défaut qui sera identique pour tous les sommets. Nous pouvons appeler {{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}} pour indiquer à WebGL d'utiliser la valeur par défaut, tandis que l'appel à {{domxref("WebGLRenderingContext.enableVertexAttribArray ()", "gl.enableVertexAttribArray () ")}} lira les valeurs du buffer du tableau comme spécifié avec gl.vertexAttribPointer().

- -

De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec vec4, mais que dans notre appel à gl.vertexAttribPointer(), nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut.

- -

La valeur par défaut est vec4(0.0, 0.0, 0.0, 1.0) par défaut, mais nous pouvons spécifier une valeur par défaut différente avec {{domxref ("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}.

- -

Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez gl.vertexAttrib4fv() pour définir une couleur constante.

- -

Interrogation des paramètres en cours

- -

Vous pouvez appeler {{domxref ("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} et {{domxref ("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} pour obtenir les paramètres en cours d'un attribut, par ex., le type de données ou si l'attribut doit être normalisé. Gardez présent à l'esprit que ces fonctions WebGL ont des performances faibles et qu'il est préférable de stocker l'état dans votre application JavaScript. Cependant, ces fonctions sont idéales pour déboguer un contexte WebGL sans toucher au code de l'application.

- -

Exemples

- -

Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet :

- -
    -
  1. position : nous devons stocker les coordonnées X, Y et Z. Pour une précision maximale, nous utilisons des flottants 32 bits ; au total, cela utilise 12 octets ;
    2. -
  2. vecteur normal : nous avons besoin de stocker les composantes X, Y et Z du vecteur normal, mais comme la précision n'est pas si importante que cela, nous utilisons des entiers signés sur 8 bits. Pour de meilleures performances, nous alignons les données sur 32 bits en stockant également une quatrième composante de valeur zéro, ce qui porte la taille totale à 4 octets. Également, nous indiquons à WebGL de normaliser les valeurs, car nos normales sont toujours dans la plage [-1, 1] ;
    3. -
  3. coordonnées de texture : nous avons besoin de stocker les coordonnées U et V ; pour que ces nombres entiers non signés sur 16 bits offrent suffisamment de précision, la taille totale est de 4 octets. Nous indiquons également à WebGL de normaliser les valeurs à [0, 1].
    4. -
- -

Par exemple, le sommet suivant :

- -
{
-  "position": [1.0, 2.0, 1.5],
-  "normale": [1.0, 0.0, 0.0],
-  "coordTex": [0.5, 0.25]
-}
-
- -

sera stocké dans le tampon des tableaux comme suit :

- - - - - - - - - - - - - - - -
00 00 80 3F00 00 00 4000 00 0C 3F7F0000007F FF3F FF
- -

Création du tampon des tableaux

- -

Tout d'abord, nous créons dynamiquement le tampon des tableaux à partir de données JSON en utilisant un {{domxref("DataView")}}. Notez l'utilisation de true, car WebGL s'attend à ce que nos données soient en little-endian.

- -
// Charger la géometrie avec fetch() et Response.json()
-const response = await fetch('assets/geometry.json');
-const sommets = await response.json();
-
-// Créer le tampon des tableaux
-const tampon = new ArrayBuffer(20 * sommets.length);
-// Remplir le tampon des tableaux
-const dv = new DataView(tampon);
-for (let i = 0; i < sommets.length; i++) {
-  dv.setFloat32(20 * i, sommets[i].position[0], true);
-  dv.setFloat32(20 * i + 4, sommets[i].position[1], true);
-  dv.setFloat32(20 * i + 8, sommets[i].position[2], true);
-  dv.setInt8(20 * i + 12, sommets[i].normale[0] * 0x7F);
-  dv.setInt8(20 * i + 13, sommets[i].normale[1] * 0x7F);
-  dv.setInt8(20 * i + 14, sommets[i].normale[2] * 0x7F);
-  dv.setInt8(20 * i + 15, 0);
-  dv.setUint16(20 * i + 16, sommets[i].coordTex[0] * 0xFFFF, true);
-  dv.setUint16(20 * i + 18, sommets[i].coordTex[1] * 0xFFFF, true);
-}
- -

Pour de meilleures performances, nous pourrions également effectuer la conversion JSON vers ArrayBuffer précédente du côté serveur, par ex. avec Node.js. Nous pourrions alors charger le fichier binaire et l'interpréter comme un tampon de tableaux :

- -
const response = await fetch('assets/geometry.bin');
-const tampon = await response.arrayBuffer();
-
- -

Utiliser le tampon de tableaux avec WebGL

- -

Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux :

- -
// Lier le tampon de tableaux à l'Objet Tampon de Sommets
-const ots = gl.createBuffer();
-gl.bindBuffer(gl.ARRAY_BUFFER, ots);
-gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
-
- -

Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice :

- -
// Décrire la disposition du tampon :
-//1. position, non normalisé
-gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
-gl.enableVertexAttribArray(0);
-//2. vecteur normal, normalisé à [-1, 1]
-gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12);
-gl.enableVertexAttribArray(1);
-//3. coordonnées de texture, normalisées à [0, 1]
-gl.vertexAttribPointer(2, 2, gl.UNSIGNED_SHORT, true, 20, 16);
-gl.enableVertexAttribArray(2);
-
-// Définir les attributs dans le shader de sommet aux mêmes indices
-gl.bindAttribLocation(shaderProgram, 0, 'position');
-gl.bindAttribLocation(shaderProgram, 1, 'normal');
-gl.bindAttribLocation(shaderProgram, 2, 'texUV');
-// Du fait que indices des attributs ont changé, nous devons refaire l'édition de liens du shader
-// Noter que cela réinitialisera tous les uniforms qui avaient été précédemment définis.
-gl.linkProgram(shaderProgram);
-
- -

soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader.

- -
const positionLoc = gl.getAttribLocation(shaderProgram, 'position');
-gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
-gl.enableVertexAttribArray(positionLoc);
-
-const normalLoc = gl.getAttribLocation(shaderProgram, 'normal');
-gl.vertexAttribPointer(normalLoc, 4, gl.BYTE, true, 20, 12);
-gl.enableVertexAttribArray(normalLoc);
-
-const texUVLoc = gl.getAttribLocation(shaderProgram, 'texUV');
-gl.vertexAttribPointer(texUVLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16);
-gl.enableVertexAttribArray(texUVLoc);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "vertexAttribPointer")}}{{Spec2('WebGL')}} -

Définition initiale.

-
{{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}{{Spec2('OpenGL ES 2.0')}} -

Page man de l’API OpenGL.

-
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md new file mode 100644 index 0000000000..93961c4fda --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md @@ -0,0 +1,254 @@ +--- +title: WebGLRenderingContext.vertexAttribPointer() +slug: Web/API/WebGLRenderingContext/vertexAttribPointer +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.vertexAttribPointer() de l'API WebGL spécifie la disposition en mémoire de l'objet de tampon vertex. Elle doit être appelée une fois pour chaque attribut de sommet.

+ +

Syntaxe

+ +
void gl.vertexAttribPointer(indice, taille, type, normalise, pas, decalage);
+
+ +

Paramètres

+ +
+
indice
+
Un {{domxref("GLuint")}} indiquant l'indice de l'attribut de sommet à modifier.
+
taille
+
Un {{domxref("GLint")}} indiquant le nombre de composantes par attribut de sommet. Doit être 1, 2, 3 ou 4.
+
type
+
Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles : +
    +
  • gl.BYTE : entier signé sur 8 bits, à valeurs dans [-128, 127]
    • +
  • gl.SHORT : entier signé sur 16 bits, à valeurs dans [-32768, 32767]
    • +
  • gl.UNSIGNED_BYTE : entier non signé sur 8 bits, à valeurs dans [0, 255]
    • +
  • gl.UNSIGNED_SHORT : entier non signé sur 16 bits, à valeurs dans [0, 65535]
    • +
  • gl.FLOAT : nombre flottant IEEE 32 bits
    • +
  • lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible : +
      +
    • gl.HALF_FLOAT : nombre flottant IEEE 16 bits
      • +
    +
    • +
+
+
normalise
+
Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant. +
    +
  • Pour les types gl.BYTE et gl.SHORT, normalise les valeurs à [-1, 1] si true.
    • +
  • Pour les types gl.UNSIGNED_BYTE et gl.UNSIGNED_SHORT, normalise les valeurs à [0, 1] si true.
    • +
  • Pour les types gl.FLOAT et gl.HALF_FLOAT, ce paramètre est sans effet.
    • +
+
+
pas
+
Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de pas est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours.
+
decalage
+
Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de type.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exceptions

+ + + +

Description

+ +

Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode gl.vertexAttribPointer(), nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux.

+ +

Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en ArrayBuffer à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie.

+ +

Le nombre maximum d'attributs de vertex dépend de la carte graphique, et vous pouvez appeler gl.getParameter(gl.MAX_VERTEX_ATTRIBS) pour obtenir cette valeur. Sur les cartes graphiques haut de gamme, le maximum est de 16, sur les cartes graphiques de bas de gamme, la valeur sera inférieure.

+ +

Indice d'attribut

+ +

Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options :

+ + + +

Attributs entiers

+ +

Bien que le ArrayBuffer puisse être rempli à la fois d'entiers et de flottants, les attributs seront toujours convertis en flottant lorsqu'ils seront envoyés au shader de sommet. Si vous avez besoin d'utiliser des entiers dans votre code de shader de sommet, vous pouvez, soit reconvertir les flottants en entiers dans le shader de sommet (par exemple, (int) floatNumber), soit utiliser {{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} à partir de WebGL2.

+ +

Valeurs d'attribut par défaut

+ +

Le code de vertex shader peut inclure un certain nombre d'attributs, mais nous n'avons pas besoin de spécifier les valeurs pour chaque attribut. A la place, nous pouvons fournir une valeur par défaut qui sera identique pour tous les sommets. Nous pouvons appeler {{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}} pour indiquer à WebGL d'utiliser la valeur par défaut, tandis que l'appel à {{domxref("WebGLRenderingContext.enableVertexAttribArray ()", "gl.enableVertexAttribArray () ")}} lira les valeurs du buffer du tableau comme spécifié avec gl.vertexAttribPointer().

+ +

De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec vec4, mais que dans notre appel à gl.vertexAttribPointer(), nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut.

+ +

La valeur par défaut est vec4(0.0, 0.0, 0.0, 1.0) par défaut, mais nous pouvons spécifier une valeur par défaut différente avec {{domxref ("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}.

+ +

Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez gl.vertexAttrib4fv() pour définir une couleur constante.

+ +

Interrogation des paramètres en cours

+ +

Vous pouvez appeler {{domxref ("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} et {{domxref ("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} pour obtenir les paramètres en cours d'un attribut, par ex., le type de données ou si l'attribut doit être normalisé. Gardez présent à l'esprit que ces fonctions WebGL ont des performances faibles et qu'il est préférable de stocker l'état dans votre application JavaScript. Cependant, ces fonctions sont idéales pour déboguer un contexte WebGL sans toucher au code de l'application.

+ +

Exemples

+ +

Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet :

+ +
    +
  1. position : nous devons stocker les coordonnées X, Y et Z. Pour une précision maximale, nous utilisons des flottants 32 bits ; au total, cela utilise 12 octets ;
    2. +
  2. vecteur normal : nous avons besoin de stocker les composantes X, Y et Z du vecteur normal, mais comme la précision n'est pas si importante que cela, nous utilisons des entiers signés sur 8 bits. Pour de meilleures performances, nous alignons les données sur 32 bits en stockant également une quatrième composante de valeur zéro, ce qui porte la taille totale à 4 octets. Également, nous indiquons à WebGL de normaliser les valeurs, car nos normales sont toujours dans la plage [-1, 1] ;
    3. +
  3. coordonnées de texture : nous avons besoin de stocker les coordonnées U et V ; pour que ces nombres entiers non signés sur 16 bits offrent suffisamment de précision, la taille totale est de 4 octets. Nous indiquons également à WebGL de normaliser les valeurs à [0, 1].
    4. +
+ +

Par exemple, le sommet suivant :

+ +
{
+  "position": [1.0, 2.0, 1.5],
+  "normale": [1.0, 0.0, 0.0],
+  "coordTex": [0.5, 0.25]
+}
+
+ +

sera stocké dans le tampon des tableaux comme suit :

+ + + + + + + + + + + + + + + +
00 00 80 3F00 00 00 4000 00 0C 3F7F0000007F FF3F FF
+ +

Création du tampon des tableaux

+ +

Tout d'abord, nous créons dynamiquement le tampon des tableaux à partir de données JSON en utilisant un {{domxref("DataView")}}. Notez l'utilisation de true, car WebGL s'attend à ce que nos données soient en little-endian.

+ +
// Charger la géometrie avec fetch() et Response.json()
+const response = await fetch('assets/geometry.json');
+const sommets = await response.json();
+
+// Créer le tampon des tableaux
+const tampon = new ArrayBuffer(20 * sommets.length);
+// Remplir le tampon des tableaux
+const dv = new DataView(tampon);
+for (let i = 0; i < sommets.length; i++) {
+  dv.setFloat32(20 * i, sommets[i].position[0], true);
+  dv.setFloat32(20 * i + 4, sommets[i].position[1], true);
+  dv.setFloat32(20 * i + 8, sommets[i].position[2], true);
+  dv.setInt8(20 * i + 12, sommets[i].normale[0] * 0x7F);
+  dv.setInt8(20 * i + 13, sommets[i].normale[1] * 0x7F);
+  dv.setInt8(20 * i + 14, sommets[i].normale[2] * 0x7F);
+  dv.setInt8(20 * i + 15, 0);
+  dv.setUint16(20 * i + 16, sommets[i].coordTex[0] * 0xFFFF, true);
+  dv.setUint16(20 * i + 18, sommets[i].coordTex[1] * 0xFFFF, true);
+}
+ +

Pour de meilleures performances, nous pourrions également effectuer la conversion JSON vers ArrayBuffer précédente du côté serveur, par ex. avec Node.js. Nous pourrions alors charger le fichier binaire et l'interpréter comme un tampon de tableaux :

+ +
const response = await fetch('assets/geometry.bin');
+const tampon = await response.arrayBuffer();
+
+ +

Utiliser le tampon de tableaux avec WebGL

+ +

Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux :

+ +
// Lier le tampon de tableaux à l'Objet Tampon de Sommets
+const ots = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, ots);
+gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
+
+ +

Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice :

+ +
// Décrire la disposition du tampon :
+//1. position, non normalisé
+gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
+gl.enableVertexAttribArray(0);
+//2. vecteur normal, normalisé à [-1, 1]
+gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12);
+gl.enableVertexAttribArray(1);
+//3. coordonnées de texture, normalisées à [0, 1]
+gl.vertexAttribPointer(2, 2, gl.UNSIGNED_SHORT, true, 20, 16);
+gl.enableVertexAttribArray(2);
+
+// Définir les attributs dans le shader de sommet aux mêmes indices
+gl.bindAttribLocation(shaderProgram, 0, 'position');
+gl.bindAttribLocation(shaderProgram, 1, 'normal');
+gl.bindAttribLocation(shaderProgram, 2, 'texUV');
+// Du fait que indices des attributs ont changé, nous devons refaire l'édition de liens du shader
+// Noter que cela réinitialisera tous les uniforms qui avaient été précédemment définis.
+gl.linkProgram(shaderProgram);
+
+ +

soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader.

+ +
const positionLoc = gl.getAttribLocation(shaderProgram, 'position');
+gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
+gl.enableVertexAttribArray(positionLoc);
+
+const normalLoc = gl.getAttribLocation(shaderProgram, 'normal');
+gl.vertexAttribPointer(normalLoc, 4, gl.BYTE, true, 20, 12);
+gl.enableVertexAttribArray(normalLoc);
+
+const texUVLoc = gl.getAttribLocation(shaderProgram, 'texUV');
+gl.vertexAttribPointer(texUVLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16);
+gl.enableVertexAttribArray(texUVLoc);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.10", "vertexAttribPointer")}}{{Spec2('WebGL')}} +

Définition initiale.

+
{{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}{{Spec2('OpenGL ES 2.0')}} +

Page man de l’API OpenGL.

+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglrenderingcontext/viewport/index.html b/files/fr/web/api/webglrenderingcontext/viewport/index.html deleted file mode 100644 index 76290a9bd6..0000000000 --- a/files/fr/web/api/webglrenderingcontext/viewport/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: WebGLRenderingContext.viewport() -slug: Web/API/WebGLRenderingContext/viewport -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/viewport ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.viewport() de l'API WebGL définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre.

- -

Syntaxe

- -
void gl.viewport(x, y, largeur, hauteur);
-
- -

Paramètres

- -
-
x
-
Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.
-
y
-
Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.
-
largeur
-
Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas.
-
height
-
Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas.
-
- -

Valeur retournée

- -

Aucune.

- -

Erreurs déclenchées

- -

Si largeur ou hauteur est une valeur négative, une erreur gl.INVALID_VALUE est déclenchée.

- -

Exemples

- -

Lorsque vous créez un contexte WebGL pour la première fois, la taille de la fenêtre correspondra à celle du canevas. Toutefois, si vous redimensionnez le canevas, vous devrez indiquer au contexte de WebGL une nouvelle définition de viewport. Dans cette situation, vous pouvez utiliser gl.viewport.

- -
gl.viewport(0, 0, canevas.width, canevas.height);
-
- -

La largeur et la hauteur de la fenêtre sont limitées à une plage dépendante de l'implémentation. Pour obtenir cette plage, vous pouvez utiliser la constante MAX_VIEWPORT_DIMS, qui renvoie un {{jsxref ("Int32Array")}}.

- -
gl.getParameter(gl.MAX_VIEWPORT_DIMS);
-// Par ex., Int32Array[16384, 16384]
-
- -

Pour obtenir le viewport en cours, faites une requête sur la constante VIEWPORT.

- -
gl.getParameter(gl.VIEWPORT);
-// e.g. Int32Array[0, 0, 640, 480]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.4", "viewport")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glViewport.xml", "glViewport")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLRenderingContext.viewport")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglrenderingcontext/viewport/index.md b/files/fr/web/api/webglrenderingcontext/viewport/index.md new file mode 100644 index 0000000000..76290a9bd6 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/viewport/index.md @@ -0,0 +1,92 @@ +--- +title: WebGLRenderingContext.viewport() +slug: Web/API/WebGLRenderingContext/viewport +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/viewport +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.viewport() de l'API WebGL définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre.

+ +

Syntaxe

+ +
void gl.viewport(x, y, largeur, hauteur);
+
+ +

Paramètres

+ +
+
x
+
Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.
+
y
+
Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.
+
largeur
+
Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas.
+
height
+
Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas.
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Erreurs déclenchées

+ +

Si largeur ou hauteur est une valeur négative, une erreur gl.INVALID_VALUE est déclenchée.

+ +

Exemples

+ +

Lorsque vous créez un contexte WebGL pour la première fois, la taille de la fenêtre correspondra à celle du canevas. Toutefois, si vous redimensionnez le canevas, vous devrez indiquer au contexte de WebGL une nouvelle définition de viewport. Dans cette situation, vous pouvez utiliser gl.viewport.

+ +
gl.viewport(0, 0, canevas.width, canevas.height);
+
+ +

La largeur et la hauteur de la fenêtre sont limitées à une plage dépendante de l'implémentation. Pour obtenir cette plage, vous pouvez utiliser la constante MAX_VIEWPORT_DIMS, qui renvoie un {{jsxref ("Int32Array")}}.

+ +
gl.getParameter(gl.MAX_VIEWPORT_DIMS);
+// Par ex., Int32Array[16384, 16384]
+
+ +

Pour obtenir le viewport en cours, faites une requête sur la constante VIEWPORT.

+ +
gl.getParameter(gl.VIEWPORT);
+// e.g. Int32Array[0, 0, 640, 480]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.4", "viewport")}}{{Spec2('WebGL')}}Définition initiale.
{{SpecName('OpenGL ES 2.0', "glViewport.xml", "glViewport")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLRenderingContext.viewport")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webglshader/index.html b/files/fr/web/api/webglshader/index.html deleted file mode 100644 index 8a32022723..0000000000 --- a/files/fr/web/api/webglshader/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: WebGLShader -slug: Web/API/WebGLShader -tags: - - Reference - - WebGL - - WebGLShader -translation_of: Web/API/WebGLShader ---- -
{{APIRef("WebGL")}}
- -

Le WebGLShader fait partie de l'API WebGL et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders.

- -

Description

- -

Pour créer un WebGLShader, utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}.

- -
function creerShader (gl, codeSource, type) {
-  // Compile un shader de type soit gl.VERTEX_SHADER, soit gl.FRAGMENT_SHADER
-  var shader = gl.createShader( type );
-  gl.shaderSource( shader, codeSource );
-  gl.compileShader( shader );
-
-  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
-    var info = gl.getShaderInfoLog( shader );
-    throw 'Impossible de compiler le programme WebGL.\n\n' + info;
-  }
-  return shader;
-}
-
- -

Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders.

- -

Exemples

- -

Création d'un shader de sommet

- -

Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement.

- -
var sourceShaderDeSommet =
-  'attribute vec4 position;\n' +
-  'void main() {\n' +
-  '  gl_Position = position;\n' +
-  '}\n';
-
-// Utilisez la function creerShader de l'exemple ci-dessus
-var shaderDeSommet = creerShader(gl, sourceShaderDeSommet, gl.VERTEX_SHADER)
-
- -

Création d'un shader de fragment

- -
var sourceShaderDeFragment =
-  'void main() {\n' +
-  '  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n' +
-  '}\n';
-
-// Utilisez la fonction creerShader de l'exemple ci-dessus
-var shaderDeFragment = creerShader(gl, sourceShaderDeFragment, gl.FRAGMENT_SHADER)
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.8", "WebGLShader")}}{{Spec2('WebGL')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLShader.WebGLShader")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webglshader/index.md b/files/fr/web/api/webglshader/index.md new file mode 100644 index 0000000000..8a32022723 --- /dev/null +++ b/files/fr/web/api/webglshader/index.md @@ -0,0 +1,107 @@ +--- +title: WebGLShader +slug: Web/API/WebGLShader +tags: + - Reference + - WebGL + - WebGLShader +translation_of: Web/API/WebGLShader +--- +
{{APIRef("WebGL")}}
+ +

Le WebGLShader fait partie de l'API WebGL et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders.

+ +

Description

+ +

Pour créer un WebGLShader, utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}.

+ +
function creerShader (gl, codeSource, type) {
+  // Compile un shader de type soit gl.VERTEX_SHADER, soit gl.FRAGMENT_SHADER
+  var shader = gl.createShader( type );
+  gl.shaderSource( shader, codeSource );
+  gl.compileShader( shader );
+
+  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
+    var info = gl.getShaderInfoLog( shader );
+    throw 'Impossible de compiler le programme WebGL.\n\n' + info;
+  }
+  return shader;
+}
+
+ +

Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders.

+ +

Exemples

+ +

Création d'un shader de sommet

+ +

Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement.

+ +
var sourceShaderDeSommet =
+  'attribute vec4 position;\n' +
+  'void main() {\n' +
+  '  gl_Position = position;\n' +
+  '}\n';
+
+// Utilisez la function creerShader de l'exemple ci-dessus
+var shaderDeSommet = creerShader(gl, sourceShaderDeSommet, gl.VERTEX_SHADER)
+
+ +

Création d'un shader de fragment

+ +
var sourceShaderDeFragment =
+  'void main() {\n' +
+  '  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n' +
+  '}\n';
+
+// Utilisez la fonction creerShader de l'exemple ci-dessus
+var shaderDeFragment = creerShader(gl, sourceShaderDeFragment, gl.FRAGMENT_SHADER)
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.8", "WebGLShader")}}{{Spec2('WebGL')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLShader.WebGLShader")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webgltexture/index.html b/files/fr/web/api/webgltexture/index.html deleted file mode 100644 index c80a2f6998..0000000000 --- a/files/fr/web/api/webgltexture/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: WebGLTexture -slug: Web/API/WebGLTexture -tags: - - API - - Reference - - WebGL -translation_of: Web/API/WebGLTexture ---- -
{{APIRef("WebGL")}}
- -

L'interface WebGLTexture fait partie de l'API WebGL et représente un objet de texture opaque fournissant un stockage et un état pour les opérations de texturation.

- -

Description

- -

L'objet WebGLTexture ne définit aucune méthode ou propriété propre, et son contenu n'est pas directement accessible. Lors du travail avec des objets WebGLTexture, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :

- - - -

Exemples

- -

Création d'une texture

- -
var canevas = document.getElementById('canvas');
-var gl = canevas.getContext('webgl');
-var texture = gl.createTexture();
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.9", "WebGLTexture")}}{{Spec2('WebGL')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WebGLTexture")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webgltexture/index.md b/files/fr/web/api/webgltexture/index.md new file mode 100644 index 0000000000..c80a2f6998 --- /dev/null +++ b/files/fr/web/api/webgltexture/index.md @@ -0,0 +1,72 @@ +--- +title: WebGLTexture +slug: Web/API/WebGLTexture +tags: + - API + - Reference + - WebGL +translation_of: Web/API/WebGLTexture +--- +
{{APIRef("WebGL")}}
+ +

L'interface WebGLTexture fait partie de l'API WebGL et représente un objet de texture opaque fournissant un stockage et un état pour les opérations de texturation.

+ +

Description

+ +

L'objet WebGLTexture ne définit aucune méthode ou propriété propre, et son contenu n'est pas directement accessible. Lors du travail avec des objets WebGLTexture, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :

+ + + +

Exemples

+ +

Création d'une texture

+ +
var canevas = document.getElementById('canvas');
+var gl = canevas.getContext('webgl');
+var texture = gl.createTexture();
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.9", "WebGLTexture")}}{{Spec2('WebGL')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WebGLTexture")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webrtc_api/connectivity/index.html b/files/fr/web/api/webrtc_api/connectivity/index.html deleted file mode 100644 index 119cf898ff..0000000000 --- a/files/fr/web/api/webrtc_api/connectivity/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Introduction à l'architecture WebRTC -slug: Web/API/WebRTC_API/Connectivity -tags: - - WebRTC -translation_of: Web/API/WebRTC_API/Connectivity -original_slug: Web/Guide/API/WebRTC/WebRTC_architecture ---- -

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

- -

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.

- -

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.

\ No newline at end of file diff --git a/files/fr/web/api/webrtc_api/connectivity/index.md b/files/fr/web/api/webrtc_api/connectivity/index.md new file mode 100644 index 0000000000..119cf898ff --- /dev/null +++ b/files/fr/web/api/webrtc_api/connectivity/index.md @@ -0,0 +1,51 @@ +--- +title: Introduction à l'architecture WebRTC +slug: Web/API/WebRTC_API/Connectivity +tags: + - WebRTC +translation_of: Web/API/WebRTC_API/Connectivity +original_slug: Web/Guide/API/WebRTC/WebRTC_architecture +--- +

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

+ +

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.

+ +

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.

\ No newline at end of file diff --git a/files/fr/web/api/webrtc_api/index.html b/files/fr/web/api/webrtc_api/index.html deleted file mode 100644 index 99c684f479..0000000000 --- a/files/fr/web/api/webrtc_api/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: L'API WebRTC -slug: Web/API/WebRTC_API -tags: - - API - - API WebRTC - - Atterrissage - - Audio - - Conference - - Media - - Réseau - - Video - - WebRTC - - diffusion -translation_of: Web/API/WebRTC_API ---- -
{{APIRef("WebRTC")}}
- -

WebRTC (Web Real-Time Communications) est une technologie qui permet aux applications et sites web de capturer et éventuellement de diffuser des médias audio et/ou vidéo, ainsi que d'échanger des données arbitraires entre les navigateurs sans passer par un intermédiaire.

-

L'ensemble de normes qui comprend WebRTC permet de partager des données et d'effectuer des téléconférences peer-to-peer, sans exiger que l'utilisateur installe des plug-ins ou tout autre logiciel tiers.

- -

WebRTC se compose de plusieurs API et protocoles interdépendants qui fonctionnent ensemble pour y parvenir. La documentation que vous trouverez ici vous aidera à comprendre les principes de base de WebRTC, comment configurer et utiliser les connexions de données et multimédias, et plus encore.

- -

Concepts et utilisation du WebRTC

- -

WebRTC a plusieurs objectifs et chevauche considérablement l'API Media Capture and Streams. Ensemble, ils offrent de puissantes capacités multimédias au web, notamment la prise en charge des conférences audio et vidéo, l'échange de fichiers, la gestion des idendités et l'interfaçage avec les systèmes téléphoniques hérités en envoyant des signaux {{Glossary("DTMF")}}. Les connexions entre pairs peuvent être établies sans nécessiter de pilotes ou de plug-ins spéciaux, et peuvent souvent être établies sans aucun serveur intermédiaire.

- -

Les connexions entre deux pairs sont créées à l'aide de - et représentées par - l'interface {{domxref("RTCPeerConnection")}}. Une fois la connexion établie et ouverte, des flux multimédias ({{domxref("MediaStream")}}s) et/ou des canaux de données ({{domxref("RTCDataChannel")}}s) peuvent être ajoutés à la connexion.

- -

Les flux multimédias peuvent être constitués de n'importe quel nombre de pistes d'informations multimédias; les pistes, qui sont représentées par des objets basés sur l'interface {{domxref("MediaStreamTrack")}}, peuvent contenir l'un des nombreux types de données multimédias, y compris audio, vidéo et texte (comme des sous-titres ou même des noms de chapitre). La plupart des flux se composent d'au moins une piste audio et probablement également d'une piste vidéo, et peuvent être utilisés pour envoyer et recevoir à la fois des médias en direct ou des informations multimédias stockées (comme un film diffusé en continu).

- -

Vous pouvez également utiliser la connexion entre deux pairs pour échanger des données binaires arbitraires à l'aide de l'interface {{domxref("RTCDataChannel")}}. Cela peut être utilisé pour les informations de canal arrière, l'échange de métadonnées, les paquets d'état du jeu, les transferts de fichiers ou même comme canal principal pour le transfert de données.

- -

plus de détails et de liens vers des guides et didacticiels pertinents nécessaires

- -

Interfaces WebRTC

- -

Étant donné que WebRTC fournit des interfaces qui fonctionnent ensemble pour accomplir une variété de tâches, nous avons divisé les interfaces dans la liste ci-dessous par catégorie. Veuillez consulter la barre latérale pour une liste alphabétique.

- -

Configuration et gestion de la connexion

- -

Ces interfaces sont utilisées pour configurer, ouvrir et gérer les connexions WebRTC.

- -
-
{{domxref("RTCPeerConnection")}}
-
Représente une connexion WebRTC entre l'ordinateur local et un homologue distant. Il est utilisé pour gérer un flux de données efficace entre les deux pairs.
-
{{domxref("RTCDataChannel")}}
-
Représente un canal de données bidirectionnel entre deux homologues d'une connexion.
-
{{domxref("RTCDataChannelEvent")}}
-
Représente les événements qui se produisent lors de l'attachement d'un {{domxref("RTCDataChannel")}} à un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec cette interface est {{event("datachannel")}}.
-
{{domxref("RTCSessionDescription")}}
-
Représente les paramètres d'une session. Chaque RTCSessionDescription se compose d'une description {{domxref("RTCSessionDescription.type", "type")}} indiquant quelle partie du processus de négociation offre / réponse elle décrit et du descripteur {{Glossary("SDP")}} du session.
-
{{domxref("RTCSessionDescriptionCallback")}}
-
Le RTCSessionDescriptionCallback est passé dans l'objet {{domxref("RTCPeerConnection")}} lors de la demande de création d'offres ou de réponses.
-
{{domxref("RTCStatsReport")}}
-
Fournit des informations détaillant les statistiques pour une connexion ou pour une piste individuelle sur la connexion; le rapport peut être obtenu en appelant {{domxref("RTCPeerConnection.getStats()")}}.
-
{{domxref("RTCIceCandidate")}}
-
Représente un serveur d'établissement de connectivité Internet (ICE) candidat pour l'établissement d'un {{domxref("RTCPeerConnection")}}.
-
{{domxref("RTCIceTransport")}}
-
Représente des informations sur un transport d'établissement de connectivité Internet (ICE).
-
{{domxref("RTCIceServer")}}
-
Définit comment se connecter à un seul serveur ICE (tel qu'un serveur STUN ou TURN).
-
{{domxref("RTCPeerConnectionIceEvent")}}
-
Représente les événements qui se produisent en relation avec les candidats ICE avec la cible, généralement un {{domxref("RTCPeerConnection")}}. Un seul événement est de ce type: {{event("icecandidate")}}.
-
{{domxref("RTCRtpSender")}}
-
Gère l'encodage et la transmission des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.
-
{{domxref("RTCRtpReceiver")}}
-
Gère la réception et le décodage des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.
-
{{domxref("RTCRtpContributingSource")}}
-
Contient des informations sur une source contributive donnée (CSRC), y compris l'heure la plus récente où un paquet que la source a contribué a été lu.
-
{{domxref("RTCTrackEvent")}}
-
Indique qu'un nouvel {{domxref("MediaStreamTrack")}} entrant a été créé et qu'un objet {{domxref("RTCRtpReceiver")}} associé a été ajouté à l'objet {{domxref("RTCPeerConnection")}}.
-
{{domxref("RTCConfiguration")}}
-
Utilisé pour fournir des options de configuration pour un RTCPeerConnection.
-
- -
-
{{domxref("RTCSctpTransport")}}
-
Fournit des informations qui décrivent un transport Stream Control Transmission Protocol ({{Glossary("SCTP")}}) et fournit aussi un moeyn d'accéder au transport Datagram Transport Layer Security ({{Glossary("DTLS")}}) sur lequel les paquets SCTP pour tous les canaux de données d'un RTCPeerConnection sont envoyés et reçus.
-
- -

Identité et sécurité

- -

L'API WebRTC comprend un certain nombre d'interfaces pour gérer la sécurité et l'identité.

- -
-
{{domxref("RTCIdentityProvider")}}
-
Permet à un agent utilisateur de demander qu'une assertion d'identité soit générée ou validée.
-
{{domxref("RTCIdentityAssertion")}}
-
Représente l'identité de l'homologue distant de la connexion actuelle. Si aucun pair n'a encore été défini et vérifié, cette interface renvoie null. Une fois défini, il ne peut pas être modifié.
-
{{domxref("RTCIdentityProviderRegistrar")}}
-
Enregistre un fournisseur d'identité (idP).
-
{{domxref("RTCIdentityEvent")}}
-
Représente une assertion d'identité générée par un fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec ce type est {{event("identityresult")}}.
-
{{domxref("RTCIdentityErrorEvent")}}
-
Représente une erreur associée au fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Deux événements sont envoyés avec ce type: {{event("idpassertionerror")}} et {{event("idpvalidationerror")}}.
-
{{domxref("RTCCertificate")}}
-
Représente un certificat qu'un {{domxref("RTCPeerConnection")}} utilise pour s'authentifier.
-
- -

Téléphonie

- -

Ces interfaces sont liées à l'interactivité avec les réseaux téléphoniques publics commutés (RTPC).

- -
-
{{domxref("RTCDTMFSender")}}
-
Gère le codage et la transmission de la signalisation DTMF (Dual-tone multi-frequency) pour une {{domxref("RTCPeerConnection")}}.
-
{{domxref("RTCDTMFToneChangeEvent")}}
-
Indique l'occurence d'une multi-fréquence bicolore (DTMF). Cet événement ne bouillonne pas (sauf indication contraire) et n'est pas annulable (sauf indication contraire).
-
- -

Guides

- -
-
Introduction aux protocoles WebRTC
-
Cet article présente les protocoles sur lesquels l'API WebRTC est construite.
-
Connectivité WebRTC
-
Un guide sur le fonctionnement des connexions WebRTC et sur la manière dont les différents protocoles et interfaces peuvent être utilisés ensemble pour créer de puissantes applications de communication.
-
Durée de vie d'une session WebRTC
-
WebRTC vous permet de créer une communication d'égal à égal de données arbitraires, audio ou vidéo - ou toute combinaison de celles-ci - dans une application de navigateur. Dans cet article, nous examinerons la durée de vie d'une session WebRTC, de l'établissement de la connexion à la fermeture de la connexion lorsqu'elle n'est plus nécessaire.
-
Signalisation et appel vidéo bidirectionnel
-
Un tutoriel et un exemple qui transforme un système de chat basé sur WebSocket créé pour un exemple précédent et ajoute la prise en charge de l'ouverture d'appels vidéo entre les participants. La connexion WebSocket du serveur de discussion est utilisée pour la signalisation WebRTC.
-
Utilisation des canaux de données WebRTC
-
Ce guide explique comment utiliser une connexion homologue et un {{domxref("RTCDataChannel")}} associé pour échanger des données arbitraires entre deux homologues.
-
Utilisation de DTMF avec WebRTC
-
La prise en charge de WebRTC pour l'interaction avec les passerelles reliées aux systèmes téléphoniques de la vieille école inclut la prise en charge de l'envoi de tonalités DTMF à l'aide de l'interface {{domxref("RTCDTMFSender")}}. Ce guide montre comment procéder.
-
- -

Tutoriels

- -
-
Amélioration de la compatibilité à l'aide de WebRTC adapter.js
-
L'organisation WebRTC fournit sur GitHub l'adaptateur WebRTC pour contourner les problèmes de compatibilité dans les implémentations WebRTC de différents navigateurs. L'adaptateur est un shim JavaScript qui permet à votre code d'être écrit selon la spécification afin qu'il "fonctionne simplement" dans tous les navigateurs prenant en charge WebRTC.
-
Prendre des photos fixes avec WebRTC
-
Cet article explique comment utiliser WebRTC pour accéder à l'appareil photo sur un ordinateur ou un téléphone mobile avec prise en charge WebRTC et prendre une photo avec.
-
Un exemple RTCDataChannel simple
-
L'interface {{domxref("RTCDataChannel")}} est une fonctionnalité qui vous permet d'ouvrir un canal entre deux pairs sur lequel vous pouvez envoyer et recevoir des données arbitraires. L'API est intentionnellement similaire à l'API WebSocket, de sorte que le même modèle de programmation peut être utilisé pour chacun.
-
- -

Ressources

- -

Protocoles

- -

Protocoles propres au WebRTC

- - - -

Protocoles de support associés

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebRTC 1.0')}}{{Spec2('WebRTC 1.0')}}La définition initiale de l'API de WebRTC.
{{SpecName('Media Capture')}}{{Spec2('Media Capture')}}La définition initiale de l'objet véhiculant le flux de contenu multimédia.
{{SpecName('Media Capture DOM Elements')}}{{Spec2('Media Capture DOM Elements')}}La définition initiale sur la façon d'obtenir un flux de contenu à partir d'éléments DOM
- -

En plus de ces spécifications définissant l'API nécessaire pour utiliser WebRTC, il existe plusieurs protocoles, répertoriés sous ressources.

- -

Voir aussi

- - diff --git a/files/fr/web/api/webrtc_api/index.md b/files/fr/web/api/webrtc_api/index.md new file mode 100644 index 0000000000..99c684f479 --- /dev/null +++ b/files/fr/web/api/webrtc_api/index.md @@ -0,0 +1,210 @@ +--- +title: L'API WebRTC +slug: Web/API/WebRTC_API +tags: + - API + - API WebRTC + - Atterrissage + - Audio + - Conference + - Media + - Réseau + - Video + - WebRTC + - diffusion +translation_of: Web/API/WebRTC_API +--- +
{{APIRef("WebRTC")}}
+ +

WebRTC (Web Real-Time Communications) est une technologie qui permet aux applications et sites web de capturer et éventuellement de diffuser des médias audio et/ou vidéo, ainsi que d'échanger des données arbitraires entre les navigateurs sans passer par un intermédiaire.

+

L'ensemble de normes qui comprend WebRTC permet de partager des données et d'effectuer des téléconférences peer-to-peer, sans exiger que l'utilisateur installe des plug-ins ou tout autre logiciel tiers.

+ +

WebRTC se compose de plusieurs API et protocoles interdépendants qui fonctionnent ensemble pour y parvenir. La documentation que vous trouverez ici vous aidera à comprendre les principes de base de WebRTC, comment configurer et utiliser les connexions de données et multimédias, et plus encore.

+ +

Concepts et utilisation du WebRTC

+ +

WebRTC a plusieurs objectifs et chevauche considérablement l'API Media Capture and Streams. Ensemble, ils offrent de puissantes capacités multimédias au web, notamment la prise en charge des conférences audio et vidéo, l'échange de fichiers, la gestion des idendités et l'interfaçage avec les systèmes téléphoniques hérités en envoyant des signaux {{Glossary("DTMF")}}. Les connexions entre pairs peuvent être établies sans nécessiter de pilotes ou de plug-ins spéciaux, et peuvent souvent être établies sans aucun serveur intermédiaire.

+ +

Les connexions entre deux pairs sont créées à l'aide de - et représentées par - l'interface {{domxref("RTCPeerConnection")}}. Une fois la connexion établie et ouverte, des flux multimédias ({{domxref("MediaStream")}}s) et/ou des canaux de données ({{domxref("RTCDataChannel")}}s) peuvent être ajoutés à la connexion.

+ +

Les flux multimédias peuvent être constitués de n'importe quel nombre de pistes d'informations multimédias; les pistes, qui sont représentées par des objets basés sur l'interface {{domxref("MediaStreamTrack")}}, peuvent contenir l'un des nombreux types de données multimédias, y compris audio, vidéo et texte (comme des sous-titres ou même des noms de chapitre). La plupart des flux se composent d'au moins une piste audio et probablement également d'une piste vidéo, et peuvent être utilisés pour envoyer et recevoir à la fois des médias en direct ou des informations multimédias stockées (comme un film diffusé en continu).

+ +

Vous pouvez également utiliser la connexion entre deux pairs pour échanger des données binaires arbitraires à l'aide de l'interface {{domxref("RTCDataChannel")}}. Cela peut être utilisé pour les informations de canal arrière, l'échange de métadonnées, les paquets d'état du jeu, les transferts de fichiers ou même comme canal principal pour le transfert de données.

+ +

plus de détails et de liens vers des guides et didacticiels pertinents nécessaires

+ +

Interfaces WebRTC

+ +

Étant donné que WebRTC fournit des interfaces qui fonctionnent ensemble pour accomplir une variété de tâches, nous avons divisé les interfaces dans la liste ci-dessous par catégorie. Veuillez consulter la barre latérale pour une liste alphabétique.

+ +

Configuration et gestion de la connexion

+ +

Ces interfaces sont utilisées pour configurer, ouvrir et gérer les connexions WebRTC.

+ +
+
{{domxref("RTCPeerConnection")}}
+
Représente une connexion WebRTC entre l'ordinateur local et un homologue distant. Il est utilisé pour gérer un flux de données efficace entre les deux pairs.
+
{{domxref("RTCDataChannel")}}
+
Représente un canal de données bidirectionnel entre deux homologues d'une connexion.
+
{{domxref("RTCDataChannelEvent")}}
+
Représente les événements qui se produisent lors de l'attachement d'un {{domxref("RTCDataChannel")}} à un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec cette interface est {{event("datachannel")}}.
+
{{domxref("RTCSessionDescription")}}
+
Représente les paramètres d'une session. Chaque RTCSessionDescription se compose d'une description {{domxref("RTCSessionDescription.type", "type")}} indiquant quelle partie du processus de négociation offre / réponse elle décrit et du descripteur {{Glossary("SDP")}} du session.
+
{{domxref("RTCSessionDescriptionCallback")}}
+
Le RTCSessionDescriptionCallback est passé dans l'objet {{domxref("RTCPeerConnection")}} lors de la demande de création d'offres ou de réponses.
+
{{domxref("RTCStatsReport")}}
+
Fournit des informations détaillant les statistiques pour une connexion ou pour une piste individuelle sur la connexion; le rapport peut être obtenu en appelant {{domxref("RTCPeerConnection.getStats()")}}.
+
{{domxref("RTCIceCandidate")}}
+
Représente un serveur d'établissement de connectivité Internet (ICE) candidat pour l'établissement d'un {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCIceTransport")}}
+
Représente des informations sur un transport d'établissement de connectivité Internet (ICE).
+
{{domxref("RTCIceServer")}}
+
Définit comment se connecter à un seul serveur ICE (tel qu'un serveur STUN ou TURN).
+
{{domxref("RTCPeerConnectionIceEvent")}}
+
Représente les événements qui se produisent en relation avec les candidats ICE avec la cible, généralement un {{domxref("RTCPeerConnection")}}. Un seul événement est de ce type: {{event("icecandidate")}}.
+
{{domxref("RTCRtpSender")}}
+
Gère l'encodage et la transmission des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCRtpReceiver")}}
+
Gère la réception et le décodage des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCRtpContributingSource")}}
+
Contient des informations sur une source contributive donnée (CSRC), y compris l'heure la plus récente où un paquet que la source a contribué a été lu.
+
{{domxref("RTCTrackEvent")}}
+
Indique qu'un nouvel {{domxref("MediaStreamTrack")}} entrant a été créé et qu'un objet {{domxref("RTCRtpReceiver")}} associé a été ajouté à l'objet {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCConfiguration")}}
+
Utilisé pour fournir des options de configuration pour un RTCPeerConnection.
+
+ +
+
{{domxref("RTCSctpTransport")}}
+
Fournit des informations qui décrivent un transport Stream Control Transmission Protocol ({{Glossary("SCTP")}}) et fournit aussi un moeyn d'accéder au transport Datagram Transport Layer Security ({{Glossary("DTLS")}}) sur lequel les paquets SCTP pour tous les canaux de données d'un RTCPeerConnection sont envoyés et reçus.
+
+ +

Identité et sécurité

+ +

L'API WebRTC comprend un certain nombre d'interfaces pour gérer la sécurité et l'identité.

+ +
+
{{domxref("RTCIdentityProvider")}}
+
Permet à un agent utilisateur de demander qu'une assertion d'identité soit générée ou validée.
+
{{domxref("RTCIdentityAssertion")}}
+
Représente l'identité de l'homologue distant de la connexion actuelle. Si aucun pair n'a encore été défini et vérifié, cette interface renvoie null. Une fois défini, il ne peut pas être modifié.
+
{{domxref("RTCIdentityProviderRegistrar")}}
+
Enregistre un fournisseur d'identité (idP).
+
{{domxref("RTCIdentityEvent")}}
+
Représente une assertion d'identité générée par un fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec ce type est {{event("identityresult")}}.
+
{{domxref("RTCIdentityErrorEvent")}}
+
Représente une erreur associée au fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Deux événements sont envoyés avec ce type: {{event("idpassertionerror")}} et {{event("idpvalidationerror")}}.
+
{{domxref("RTCCertificate")}}
+
Représente un certificat qu'un {{domxref("RTCPeerConnection")}} utilise pour s'authentifier.
+
+ +

Téléphonie

+ +

Ces interfaces sont liées à l'interactivité avec les réseaux téléphoniques publics commutés (RTPC).

+ +
+
{{domxref("RTCDTMFSender")}}
+
Gère le codage et la transmission de la signalisation DTMF (Dual-tone multi-frequency) pour une {{domxref("RTCPeerConnection")}}.
+
{{domxref("RTCDTMFToneChangeEvent")}}
+
Indique l'occurence d'une multi-fréquence bicolore (DTMF). Cet événement ne bouillonne pas (sauf indication contraire) et n'est pas annulable (sauf indication contraire).
+
+ +

Guides

+ +
+
Introduction aux protocoles WebRTC
+
Cet article présente les protocoles sur lesquels l'API WebRTC est construite.
+
Connectivité WebRTC
+
Un guide sur le fonctionnement des connexions WebRTC et sur la manière dont les différents protocoles et interfaces peuvent être utilisés ensemble pour créer de puissantes applications de communication.
+
Durée de vie d'une session WebRTC
+
WebRTC vous permet de créer une communication d'égal à égal de données arbitraires, audio ou vidéo - ou toute combinaison de celles-ci - dans une application de navigateur. Dans cet article, nous examinerons la durée de vie d'une session WebRTC, de l'établissement de la connexion à la fermeture de la connexion lorsqu'elle n'est plus nécessaire.
+
Signalisation et appel vidéo bidirectionnel
+
Un tutoriel et un exemple qui transforme un système de chat basé sur WebSocket créé pour un exemple précédent et ajoute la prise en charge de l'ouverture d'appels vidéo entre les participants. La connexion WebSocket du serveur de discussion est utilisée pour la signalisation WebRTC.
+
Utilisation des canaux de données WebRTC
+
Ce guide explique comment utiliser une connexion homologue et un {{domxref("RTCDataChannel")}} associé pour échanger des données arbitraires entre deux homologues.
+
Utilisation de DTMF avec WebRTC
+
La prise en charge de WebRTC pour l'interaction avec les passerelles reliées aux systèmes téléphoniques de la vieille école inclut la prise en charge de l'envoi de tonalités DTMF à l'aide de l'interface {{domxref("RTCDTMFSender")}}. Ce guide montre comment procéder.
+
+ +

Tutoriels

+ +
+
Amélioration de la compatibilité à l'aide de WebRTC adapter.js
+
L'organisation WebRTC fournit sur GitHub l'adaptateur WebRTC pour contourner les problèmes de compatibilité dans les implémentations WebRTC de différents navigateurs. L'adaptateur est un shim JavaScript qui permet à votre code d'être écrit selon la spécification afin qu'il "fonctionne simplement" dans tous les navigateurs prenant en charge WebRTC.
+
Prendre des photos fixes avec WebRTC
+
Cet article explique comment utiliser WebRTC pour accéder à l'appareil photo sur un ordinateur ou un téléphone mobile avec prise en charge WebRTC et prendre une photo avec.
+
Un exemple RTCDataChannel simple
+
L'interface {{domxref("RTCDataChannel")}} est une fonctionnalité qui vous permet d'ouvrir un canal entre deux pairs sur lequel vous pouvez envoyer et recevoir des données arbitraires. L'API est intentionnellement similaire à l'API WebSocket, de sorte que le même modèle de programmation peut être utilisé pour chacun.
+
+ +

Ressources

+ +

Protocoles

+ +

Protocoles propres au WebRTC

+ + + +

Protocoles de support associés

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebRTC 1.0')}}{{Spec2('WebRTC 1.0')}}La définition initiale de l'API de WebRTC.
{{SpecName('Media Capture')}}{{Spec2('Media Capture')}}La définition initiale de l'objet véhiculant le flux de contenu multimédia.
{{SpecName('Media Capture DOM Elements')}}{{Spec2('Media Capture DOM Elements')}}La définition initiale sur la façon d'obtenir un flux de contenu à partir d'éléments DOM
+ +

En plus de ces spécifications définissant l'API nécessaire pour utiliser WebRTC, il existe plusieurs protocoles, répertoriés sous ressources.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/webrtc_api/session_lifetime/index.html b/files/fr/web/api/webrtc_api/session_lifetime/index.html deleted file mode 100644 index 7bc9c98dab..0000000000 --- a/files/fr/web/api/webrtc_api/session_lifetime/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Introduction à WebRTC -slug: Web/API/WebRTC_API/Session_lifetime -translation_of: Web/API/WebRTC_API/Session_lifetime -original_slug: WebRTC/Introduction ---- -
-

Note : 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'.

- -
-

Note : 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/session_lifetime/index.md b/files/fr/web/api/webrtc_api/session_lifetime/index.md new file mode 100644 index 0000000000..7bc9c98dab --- /dev/null +++ b/files/fr/web/api/webrtc_api/session_lifetime/index.md @@ -0,0 +1,31 @@ +--- +title: Introduction à WebRTC +slug: Web/API/WebRTC_API/Session_lifetime +translation_of: Web/API/WebRTC_API/Session_lifetime +original_slug: WebRTC/Introduction +--- +
+

Note : 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'.

+ +
+

Note : 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 deleted file mode 100644 index a4b67ab853..0000000000 --- a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: L’essentiel du WebRTC -slug: Web/API/WebRTC_API/Signaling_and_video_calling -tags: - - WebRTC -translation_of: Web/API/WebRTC_API/Signaling_and_video_calling -translation_of_original: Web/API/WebRTC_API/WebRTC_basics -original_slug: Web/Guide/API/WebRTC/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.

- -
-

Note : 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.

- - diff --git a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md new file mode 100644 index 0000000000..a4b67ab853 --- /dev/null +++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md @@ -0,0 +1,359 @@ +--- +title: L’essentiel du WebRTC +slug: Web/API/WebRTC_API/Signaling_and_video_calling +tags: + - WebRTC +translation_of: Web/API/WebRTC_API/Signaling_and_video_calling +translation_of_original: Web/API/WebRTC_API/WebRTC_basics +original_slug: Web/Guide/API/WebRTC/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.

+ +
+

Note : 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.

+ + 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 deleted file mode 100644 index 26e4bde58c..0000000000 --- a/files/fr/web/api/webrtc_api/taking_still_photos/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Prendre des photos avec la webcam -slug: Web/API/WebRTC_API/Taking_still_photos -tags: - - API - - Avancé - - WebRTC - - getusermedia -translation_of: Web/API/WebRTC_API/Taking_still_photos -original_slug: WebRTC/Prendre_des_photos_avec_la_webcam ---- -

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.

-
-

Attention : À 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:

- diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.md b/files/fr/web/api/webrtc_api/taking_still_photos/index.md new file mode 100644 index 0000000000..26e4bde58c --- /dev/null +++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.md @@ -0,0 +1,162 @@ +--- +title: Prendre des photos avec la webcam +slug: Web/API/WebRTC_API/Taking_still_photos +tags: + - API + - Avancé + - WebRTC + - getusermedia +translation_of: Web/API/WebRTC_API/Taking_still_photos +original_slug: WebRTC/Prendre_des_photos_avec_la_webcam +--- +

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.

+
+

Attention : À 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:

+ diff --git a/files/fr/web/api/websocket/binarytype/index.html b/files/fr/web/api/websocket/binarytype/index.html deleted file mode 100644 index f9dc94bbb4..0000000000 --- a/files/fr/web/api/websocket/binarytype/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: WebSocket.binaryType -slug: Web/API/WebSocket/binaryType -browser-compat: api.WebSocket.binaryType ---- -

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

- -

La propriété WebSocket.binaryType contrôle le type de données binaires reçues via la connexion WebSocket.

- -

Syntaxe

- -
-var binaryType = aWebSocket.binaryType;
-
- -

Valeur

- -

Une chaîne de caractères DOMString ayant l'une de ces deux valeurs :

- -
-
"blob"
-
Utilise des objets Blob pour les données binaires. Il s'agit de la valeur par défaut.
-
"arraybuffer"
-
Utilise des objets ArrayBuffer pour les données binaires. -
-
- -

Exemples

- -
-// On crée une connexion WebSocket connection.
-const socket = new WebSocket("ws://localhost:8080");
-// On change le type de données binaires de "blob" à "arraybuffer"
-socket.binaryType = "arraybuffer";
-
-// On écoute les différents messages
-socket.addEventListener("message", function (event) {
-  if(event.data instanceof ArrayBuffer) {
-    // Frame de données binaires
-    const view = new DataView(event.data);
-    console.log(view.getInt32(0));
-  } else {
-    // Frame textuelle
-    console.log(event.data);
-  }
-});
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/binarytype/index.md b/files/fr/web/api/websocket/binarytype/index.md new file mode 100644 index 0000000000..f9dc94bbb4 --- /dev/null +++ b/files/fr/web/api/websocket/binarytype/index.md @@ -0,0 +1,54 @@ +--- +title: WebSocket.binaryType +slug: Web/API/WebSocket/binaryType +browser-compat: api.WebSocket.binaryType +--- +

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

+ +

La propriété WebSocket.binaryType contrôle le type de données binaires reçues via la connexion WebSocket.

+ +

Syntaxe

+ +
+var binaryType = aWebSocket.binaryType;
+
+ +

Valeur

+ +

Une chaîne de caractères DOMString ayant l'une de ces deux valeurs :

+ +
+
"blob"
+
Utilise des objets Blob pour les données binaires. Il s'agit de la valeur par défaut.
+
"arraybuffer"
+
Utilise des objets ArrayBuffer pour les données binaires. +
+
+ +

Exemples

+ +
+// On crée une connexion WebSocket connection.
+const socket = new WebSocket("ws://localhost:8080");
+// On change le type de données binaires de "blob" à "arraybuffer"
+socket.binaryType = "arraybuffer";
+
+// On écoute les différents messages
+socket.addEventListener("message", function (event) {
+  if(event.data instanceof ArrayBuffer) {
+    // Frame de données binaires
+    const view = new DataView(event.data);
+    console.log(view.getInt32(0));
+  } else {
+    // Frame textuelle
+    console.log(event.data);
+  }
+});
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/bufferedamount/index.html b/files/fr/web/api/websocket/bufferedamount/index.html deleted file mode 100644 index c4492c5c61..0000000000 --- a/files/fr/web/api/websocket/bufferedamount/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: WebSocket.bufferedAmount -slug: Web/API/WebSocket/bufferedAmount -browser-compat: api.WebSocket.bufferedAmount ---- -

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

- -

La propriété en lecture seule WebSocket.bufferedAmount renvoie le nombre d'octets de données qui ont été placées dans la queue via des appels à send() mais qui n'ont pas encore été transmises sur le réseau. Cette valeur est réinitialisée à zéro lorsque toutes les données ont été envoyées. Cette valeur n'est pas remise à zéro lorsque la connexion est fermée. Des appels successifs à send() feront croître cette valeur.

- -

Syntaxe

- -
-var bufferedAmount = aWebSocket.bufferedAmount;
-
- -

Valeur

- -

Un nombre au format unsigned long.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/bufferedamount/index.md b/files/fr/web/api/websocket/bufferedamount/index.md new file mode 100644 index 0000000000..c4492c5c61 --- /dev/null +++ b/files/fr/web/api/websocket/bufferedamount/index.md @@ -0,0 +1,26 @@ +--- +title: WebSocket.bufferedAmount +slug: Web/API/WebSocket/bufferedAmount +browser-compat: api.WebSocket.bufferedAmount +--- +

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

+ +

La propriété en lecture seule WebSocket.bufferedAmount renvoie le nombre d'octets de données qui ont été placées dans la queue via des appels à send() mais qui n'ont pas encore été transmises sur le réseau. Cette valeur est réinitialisée à zéro lorsque toutes les données ont été envoyées. Cette valeur n'est pas remise à zéro lorsque la connexion est fermée. Des appels successifs à send() feront croître cette valeur.

+ +

Syntaxe

+ +
+var bufferedAmount = aWebSocket.bufferedAmount;
+
+ +

Valeur

+ +

Un nombre au format unsigned long.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/close/index.html b/files/fr/web/api/websocket/close/index.html deleted file mode 100644 index 09621ca71b..0000000000 --- a/files/fr/web/api/websocket/close/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: WebSocket.close() -slug: Web/API/WebSocket/close -browser-compat: api.WebSocket.close ---- -

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

- -

La méthode WebSocket.close() ferme la connexion WebSocket ou interrompt l'éventuelle tentative de connexion. Si la connexion est déjà fermée (état CLOSED), cette méthode ne fait rien.

- -

Syntaxe

- -
WebSocket.close();
-
WebSocket.close(code);
-
WebSocket.close(reason);
-
WebSocket.close(code, reason);
- -

Paramètres

- -
-
code {{optional_inline}}
-
Une valeur numérique indiquant le code de statut qui explique pourquoi la connexion est fermée. Si ce paramètre n'est pas fourni, 1005 sera la valeur par défaut. Voir la liste des codes de statut de CloseEvent pour les valeurs autorisées.
-
reason {{optional_inline}}
-
Une chaîne de caractères, lisible et compréhensible par un humain qui explique pourquoi la connexion est fermée. Cette chaîne ne doit pas être plus longue que 123 octets de texte UTF-8 (attention, cela ne signifie pas 123 caractères).
-
- -

Exceptions levées

- -
-
INVALID_ACCESS_ERR
-
Un code invalide a été fourni avec code.
-
SYNTAX_ERR
-
La chaîne de caractères pour reason est trop longue ou contient des surrogates non appairés.
-
- -
-

Note : Avant Gecko 8.0, cette méthode ne prenait en charge aucun paramètre.

-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/close/index.md b/files/fr/web/api/websocket/close/index.md new file mode 100644 index 0000000000..09621ca71b --- /dev/null +++ b/files/fr/web/api/websocket/close/index.md @@ -0,0 +1,45 @@ +--- +title: WebSocket.close() +slug: Web/API/WebSocket/close +browser-compat: api.WebSocket.close +--- +

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

+ +

La méthode WebSocket.close() ferme la connexion WebSocket ou interrompt l'éventuelle tentative de connexion. Si la connexion est déjà fermée (état CLOSED), cette méthode ne fait rien.

+ +

Syntaxe

+ +
WebSocket.close();
+
WebSocket.close(code);
+
WebSocket.close(reason);
+
WebSocket.close(code, reason);
+ +

Paramètres

+ +
+
code {{optional_inline}}
+
Une valeur numérique indiquant le code de statut qui explique pourquoi la connexion est fermée. Si ce paramètre n'est pas fourni, 1005 sera la valeur par défaut. Voir la liste des codes de statut de CloseEvent pour les valeurs autorisées.
+
reason {{optional_inline}}
+
Une chaîne de caractères, lisible et compréhensible par un humain qui explique pourquoi la connexion est fermée. Cette chaîne ne doit pas être plus longue que 123 octets de texte UTF-8 (attention, cela ne signifie pas 123 caractères).
+
+ +

Exceptions levées

+ +
+
INVALID_ACCESS_ERR
+
Un code invalide a été fourni avec code.
+
SYNTAX_ERR
+
La chaîne de caractères pour reason est trop longue ou contient des surrogates non appairés.
+
+ +
+

Note : Avant Gecko 8.0, cette méthode ne prenait en charge aucun paramètre.

+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/close_event/index.html b/files/fr/web/api/websocket/close_event/index.html deleted file mode 100644 index e09d0bb1db..0000000000 --- a/files/fr/web/api/websocket/close_event/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 'WebSocket : évènement close' -slug: Web/API/WebSocket/close_event -browser-compat: api.WebSocket.close_event -translation_of: Web/API/WebSocket/close_event ---- -
{{APIRef}}
- -

L'évènement close est déclenché lorsqu'une connexion avec une WebSocket est fermée.

- - - - - - - - - - - - - - - - - - - - -
Bouillonne/RemonteNon
AnnulableNon
InterfaceCloseEvent
Propriété de gestionnaire d'évènement correspondanteonclose
- -

Exemples

- -

On peut vouloir savoir lorsque la connexion a été fermée afin de mettre à jour l'interface utilisateur ou, éventuellement, pour sauvegarder des données à propos de la connexion. Soit une variable socketExemple qui fait référence à une connexion WebSocket ouverte, le fragment de code suivant gère la situation où la socket a été fermée :

- -
socketExemple.addEventListener('close', (event) => {
-  console.log('La connexion a été fermée avec succès.');
-});
- -

On peut effectuer les mêmes actions avec la propriété de gestion d'évènement correspondante :

- -
socketExemple.onclose = function (event) {
-  console.log('La connexion a été fermée avec succès.');
-};
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/websocket/close_event/index.md b/files/fr/web/api/websocket/close_event/index.md new file mode 100644 index 0000000000..e09d0bb1db --- /dev/null +++ b/files/fr/web/api/websocket/close_event/index.md @@ -0,0 +1,61 @@ +--- +title: 'WebSocket : évènement close' +slug: Web/API/WebSocket/close_event +browser-compat: api.WebSocket.close_event +translation_of: Web/API/WebSocket/close_event +--- +
{{APIRef}}
+ +

L'évènement close est déclenché lorsqu'une connexion avec une WebSocket est fermée.

+ + + + + + + + + + + + + + + + + + + + +
Bouillonne/RemonteNon
AnnulableNon
InterfaceCloseEvent
Propriété de gestionnaire d'évènement correspondanteonclose
+ +

Exemples

+ +

On peut vouloir savoir lorsque la connexion a été fermée afin de mettre à jour l'interface utilisateur ou, éventuellement, pour sauvegarder des données à propos de la connexion. Soit une variable socketExemple qui fait référence à une connexion WebSocket ouverte, le fragment de code suivant gère la situation où la socket a été fermée :

+ +
socketExemple.addEventListener('close', (event) => {
+  console.log('La connexion a été fermée avec succès.');
+});
+ +

On peut effectuer les mêmes actions avec la propriété de gestion d'évènement correspondante :

+ +
socketExemple.onclose = function (event) {
+  console.log('La connexion a été fermée avec succès.');
+};
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/websocket/error_event/index.html b/files/fr/web/api/websocket/error_event/index.html deleted file mode 100644 index 91bb314dde..0000000000 --- a/files/fr/web/api/websocket/error_event/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 'WebSocket : évènement error' -slug: Web/API/WebSocket/error_event -browser-compat: api.WebSocket.error_event ---- -
{{APIRef}}
- -

L'évènement error est déclenché lorsqu'une connexion avec une WebSocket a été fermée à cause d'une erreur (par exemple lorsque des données n'ont pu être envoyées).

- - - - - - - - - - - - - - - - - - - - -
Bouillonne/RemonteNon
AnnulableNon
InterfaceEvent
Propriété de gestionnaire d'évènement correspondanteonerror
- -

Exemples

- -
-// On crée une connexion WebSocket
-const socket = new WebSocket('ws://localhost:8080');
-
-// On écoute les éventuelles erreurs
-socket.addEventListener('error', function (event) {
-  console.log('Erreur WebSocket : ', event);
-});
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/websocket/error_event/index.md b/files/fr/web/api/websocket/error_event/index.md new file mode 100644 index 0000000000..91bb314dde --- /dev/null +++ b/files/fr/web/api/websocket/error_event/index.md @@ -0,0 +1,57 @@ +--- +title: 'WebSocket : évènement error' +slug: Web/API/WebSocket/error_event +browser-compat: api.WebSocket.error_event +--- +
{{APIRef}}
+ +

L'évènement error est déclenché lorsqu'une connexion avec une WebSocket a été fermée à cause d'une erreur (par exemple lorsque des données n'ont pu être envoyées).

+ + + + + + + + + + + + + + + + + + + + +
Bouillonne/RemonteNon
AnnulableNon
InterfaceEvent
Propriété de gestionnaire d'évènement correspondanteonerror
+ +

Exemples

+ +
+// On crée une connexion WebSocket
+const socket = new WebSocket('ws://localhost:8080');
+
+// On écoute les éventuelles erreurs
+socket.addEventListener('error', function (event) {
+  console.log('Erreur WebSocket : ', event);
+});
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/websocket/extensions/index.html b/files/fr/web/api/websocket/extensions/index.html deleted file mode 100644 index 5846b29953..0000000000 --- a/files/fr/web/api/websocket/extensions/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: WebSocket.extensions -slug: Web/API/WebSocket/extensions -browser-compat: api.WebSocket.extensions ---- -

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

- -

La propriété en lecture seule WebSocket.extensions renvoie les extensions sélectionnées par le serveur. Actuellement, cette propriété vaut une chaîne de caractères vide ou la liste des extensions négociées par la connexion.

- -

Syntaxe

- -
-var extensions = aWebSocket.extensions;
-
- -

Valeur

- -

Une chaîne de caractères DOMString.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/extensions/index.md b/files/fr/web/api/websocket/extensions/index.md new file mode 100644 index 0000000000..5846b29953 --- /dev/null +++ b/files/fr/web/api/websocket/extensions/index.md @@ -0,0 +1,26 @@ +--- +title: WebSocket.extensions +slug: Web/API/WebSocket/extensions +browser-compat: api.WebSocket.extensions +--- +

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

+ +

La propriété en lecture seule WebSocket.extensions renvoie les extensions sélectionnées par le serveur. Actuellement, cette propriété vaut une chaîne de caractères vide ou la liste des extensions négociées par la connexion.

+ +

Syntaxe

+ +
+var extensions = aWebSocket.extensions;
+
+ +

Valeur

+ +

Une chaîne de caractères DOMString.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/index.html b/files/fr/web/api/websocket/index.html deleted file mode 100644 index 2ae740ebe7..0000000000 --- a/files/fr/web/api/websocket/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: WebSocket -slug: Web/API/WebSocket -browser-compat: api.WebSocket -translation_of: Web/API/WebSocket ---- -
{{APIRef("Web Sockets API")}}
- -

L'objet WebSocket fournit l'API qui permet de créer et de gérer une connexion WebSocket à un serveur ainsi que d'envoyer et de recevoir des données sur cette connexion.

- -

Pour construire un objet WebSocket, on utilisera le constructeur WebSocket().

- -

{{AvailableInWorkers}}

- -

Constructeur

- -
-
WebSocket(url[, protocols])
-
Renvoie un nouvel objet WebSocket.
-
- -

Constantes

- - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValeur
WebSocket.CONNECTING0
WebSocket.OPEN1
WebSocket.CLOSING2
WebSocket.CLOSED3
- -

Propriétés

- -
-
WebSocket.binaryType
-
Le type de données binaire utilisé par la connexion.
-
WebSocket.bufferedAmount {{readonlyinline}}
-
Le nombre d'octets de données dans la queue.
-
WebSocket.extensions {{readonlyinline}}
-
Les extensions sélectionnées par le serveur.
-
WebSocket.onclose
-
Un gestionnaire d'évènement à appeler lorsque la connexion est fermée.
-
WebSocket.onerror
-
Un gestionnaire d'évènement à appeler en cas d'erreur.
-
WebSocket.onmessage
-
Un gestionnaire d'évènement à appeler lors de la réception d'un message du serveur.
-
WebSocket.onopen
-
Un gestionnaire d'évènement à appeler lorsque la connexion est ouverte.
-
WebSocket.protocol {{readonlyinline}}
-
Le sous-protocole sélectionné par le serveur.
-
WebSocket.readyState {{readonlyinline}}
-
L'état courant de la connexion.
-
WebSocket.url {{readonlyinline}}
-
L'URL absolue de la WebSocket.
-
- -

Méthodes

- -
-
WebSocket.close([code[, reason]])
-
Ferme la connexion.
-
WebSocket.send(data)
-
Ajoute des données à transmettre à la queue.
-
- -

Évènements

- - -
-
close
-
Déclenché lorsqu'une connexion avec une WebSocket est fermée. Également disponible avec la propriété onclose.
-
error
-
Déclenché lorsqu'une connexion avec une WebSocket a été fermée à cause d'une erreur, par exemple lorsque des données n'ont pu être envoyées. Également disponible avec la propriété onerror.
-
message
-
Déclenché lorsque des données sont reçues via une WebSocket. Également disponible avec la propriété onmessage.
-
open
-
Déclenché lorsqu'une connexion avec une WebSocket est ouverte. Également disponible avec la propriété onopen.
-
- -

Exemples

- -
// Créer une connexion WebSocket
-const socket = new WebSocket('ws://localhost:8080');
-
-// La connexion est ouverte
-socket.addEventListener('open', function (event) {
- socket.send('Coucou le serveur !');
-});
-
-// Écouter les messages
-socket.addEventListener('message', function (event) {
-  console.log('Voici un message du serveur', event.data);
-});
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/websocket/index.md b/files/fr/web/api/websocket/index.md new file mode 100644 index 0000000000..2ae740ebe7 --- /dev/null +++ b/files/fr/web/api/websocket/index.md @@ -0,0 +1,124 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +browser-compat: api.WebSocket +translation_of: Web/API/WebSocket +--- +
{{APIRef("Web Sockets API")}}
+ +

L'objet WebSocket fournit l'API qui permet de créer et de gérer une connexion WebSocket à un serveur ainsi que d'envoyer et de recevoir des données sur cette connexion.

+ +

Pour construire un objet WebSocket, on utilisera le constructeur WebSocket().

+ +

{{AvailableInWorkers}}

+ +

Constructeur

+ +
+
WebSocket(url[, protocols])
+
Renvoie un nouvel objet WebSocket.
+
+ +

Constantes

+ + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeur
WebSocket.CONNECTING0
WebSocket.OPEN1
WebSocket.CLOSING2
WebSocket.CLOSED3
+ +

Propriétés

+ +
+
WebSocket.binaryType
+
Le type de données binaire utilisé par la connexion.
+
WebSocket.bufferedAmount {{readonlyinline}}
+
Le nombre d'octets de données dans la queue.
+
WebSocket.extensions {{readonlyinline}}
+
Les extensions sélectionnées par le serveur.
+
WebSocket.onclose
+
Un gestionnaire d'évènement à appeler lorsque la connexion est fermée.
+
WebSocket.onerror
+
Un gestionnaire d'évènement à appeler en cas d'erreur.
+
WebSocket.onmessage
+
Un gestionnaire d'évènement à appeler lors de la réception d'un message du serveur.
+
WebSocket.onopen
+
Un gestionnaire d'évènement à appeler lorsque la connexion est ouverte.
+
WebSocket.protocol {{readonlyinline}}
+
Le sous-protocole sélectionné par le serveur.
+
WebSocket.readyState {{readonlyinline}}
+
L'état courant de la connexion.
+
WebSocket.url {{readonlyinline}}
+
L'URL absolue de la WebSocket.
+
+ +

Méthodes

+ +
+
WebSocket.close([code[, reason]])
+
Ferme la connexion.
+
WebSocket.send(data)
+
Ajoute des données à transmettre à la queue.
+
+ +

Évènements

+ + +
+
close
+
Déclenché lorsqu'une connexion avec une WebSocket est fermée. Également disponible avec la propriété onclose.
+
error
+
Déclenché lorsqu'une connexion avec une WebSocket a été fermée à cause d'une erreur, par exemple lorsque des données n'ont pu être envoyées. Également disponible avec la propriété onerror.
+
message
+
Déclenché lorsque des données sont reçues via une WebSocket. Également disponible avec la propriété onmessage.
+
open
+
Déclenché lorsqu'une connexion avec une WebSocket est ouverte. Également disponible avec la propriété onopen.
+
+ +

Exemples

+ +
// Créer une connexion WebSocket
+const socket = new WebSocket('ws://localhost:8080');
+
+// La connexion est ouverte
+socket.addEventListener('open', function (event) {
+ socket.send('Coucou le serveur !');
+});
+
+// Écouter les messages
+socket.addEventListener('message', function (event) {
+  console.log('Voici un message du serveur', event.data);
+});
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/websocket/message_event/index.html b/files/fr/web/api/websocket/message_event/index.html deleted file mode 100644 index dc35ad18b2..0000000000 --- a/files/fr/web/api/websocket/message_event/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 'WebSocket : évènement message' -slug: Web/API/WebSocket/message_event -browser-compat: api.WebSocket.message_event ---- -
{{APIRef}}
- -

L'évènement message est déclenché lorsque des données sont reçues via une WebSocket.

- - - - - - - - - - - - - - - - - - - - -
Bouillonne/RemonteNon
AnnulableNon
InterfaceMessageEvent
Propriété de gestionnaire d'évènement correspondanteonmessage
- -

Exemples

- -
-// Crée une connexion WebSocket
-const socket = new WebSocket('ws://localhost:8080');
-
-// Écoute les différents messages
-socket.addEventListener('message', function (event) {
-    console.log('Message reçu du serveur ', event.data);
-});
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/websocket/message_event/index.md b/files/fr/web/api/websocket/message_event/index.md new file mode 100644 index 0000000000..dc35ad18b2 --- /dev/null +++ b/files/fr/web/api/websocket/message_event/index.md @@ -0,0 +1,57 @@ +--- +title: 'WebSocket : évènement message' +slug: Web/API/WebSocket/message_event +browser-compat: api.WebSocket.message_event +--- +
{{APIRef}}
+ +

L'évènement message est déclenché lorsque des données sont reçues via une WebSocket.

+ + + + + + + + + + + + + + + + + + + + +
Bouillonne/RemonteNon
AnnulableNon
InterfaceMessageEvent
Propriété de gestionnaire d'évènement correspondanteonmessage
+ +

Exemples

+ +
+// Crée une connexion WebSocket
+const socket = new WebSocket('ws://localhost:8080');
+
+// Écoute les différents messages
+socket.addEventListener('message', function (event) {
+    console.log('Message reçu du serveur ', event.data);
+});
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/websocket/onclose/index.html b/files/fr/web/api/websocket/onclose/index.html deleted file mode 100644 index 040f03c485..0000000000 --- a/files/fr/web/api/websocket/onclose/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: WebSocket.onclose -slug: Web/API/WebSocket/onclose -browser-compat: api.WebSocket.onclose ---- -

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

- -

La propriété WebSocket.onclose est un gestionnaire d'évènement invoqué lorsque l'état readyState de la connexion WebSocket change de valeur pour passer à CLOSED. Ce gestionnaire est appelé avec un paramètre CloseEvent.

- -

Syntaxe

- -
-unWebSocket.onclose = function(event) {
-  console.log("La WebSocket est désormais fermée.");
-};
- -

Valeur

- -

Une fonction EventListener.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/onclose/index.md b/files/fr/web/api/websocket/onclose/index.md new file mode 100644 index 0000000000..040f03c485 --- /dev/null +++ b/files/fr/web/api/websocket/onclose/index.md @@ -0,0 +1,27 @@ +--- +title: WebSocket.onclose +slug: Web/API/WebSocket/onclose +browser-compat: api.WebSocket.onclose +--- +

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

+ +

La propriété WebSocket.onclose est un gestionnaire d'évènement invoqué lorsque l'état readyState de la connexion WebSocket change de valeur pour passer à CLOSED. Ce gestionnaire est appelé avec un paramètre CloseEvent.

+ +

Syntaxe

+ +
+unWebSocket.onclose = function(event) {
+  console.log("La WebSocket est désormais fermée.");
+};
+ +

Valeur

+ +

Une fonction EventListener.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/onerror/index.html b/files/fr/web/api/websocket/onerror/index.html deleted file mode 100644 index 5ffafd26cd..0000000000 --- a/files/fr/web/api/websocket/onerror/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: WebSocket.onerror -slug: Web/API/WebSocket/onerror -browser-compat: api.WebSocket.onerror ---- -
{{APIRef("Web Sockets API")}}
- -

La propriété onerror de l'interface WebSocket est un gestionnaire d'évènement qui est appelé lorsqu'une erreur se produit sur la connexion WebSocket.

- -

Il est également possible d'ajouter un gestionnaire d'évènement error avec la méthode addEventListener().

- -

Syntaxe

- -
-webSocket.onerror = eventHandler;
-
- -

Valeur

- -

Une fonction ou un gestionnaire d'évènement qui est exécuté lorsqu'un évènement error se produit sur la connexion WebSocket.

- -

Exemple

- -
-webSocket.onerror = function(event) {
-  console.error("Erreur WebSocket observée :", event);
-};
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/onerror/index.md b/files/fr/web/api/websocket/onerror/index.md new file mode 100644 index 0000000000..5ffafd26cd --- /dev/null +++ b/files/fr/web/api/websocket/onerror/index.md @@ -0,0 +1,35 @@ +--- +title: WebSocket.onerror +slug: Web/API/WebSocket/onerror +browser-compat: api.WebSocket.onerror +--- +
{{APIRef("Web Sockets API")}}
+ +

La propriété onerror de l'interface WebSocket est un gestionnaire d'évènement qui est appelé lorsqu'une erreur se produit sur la connexion WebSocket.

+ +

Il est également possible d'ajouter un gestionnaire d'évènement error avec la méthode addEventListener().

+ +

Syntaxe

+ +
+webSocket.onerror = eventHandler;
+
+ +

Valeur

+ +

Une fonction ou un gestionnaire d'évènement qui est exécuté lorsqu'un évènement error se produit sur la connexion WebSocket.

+ +

Exemple

+ +
+webSocket.onerror = function(event) {
+  console.error("Erreur WebSocket observée :", event);
+};
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/onmessage/index.html b/files/fr/web/api/websocket/onmessage/index.html deleted file mode 100644 index 03ff9451fb..0000000000 --- a/files/fr/web/api/websocket/onmessage/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: WebSocket.onmessage -slug: Web/API/WebSocket/onmessage -browser-compat: api.WebSocket.onmessage ---- -
{{APIRef("Web Sockets API")}}
- -

La propriété WebSocket.onmessage est un gestionnaire d'évènement qui est appelé lorsqu'un message est reçu depuis le serveur. Ce gestionnaire est appelé avec un évènement MessageEvent en paramètre.

- -

Syntaxe

- -
-unWebSocket.onmessage = function(event) {
-  console.debug("Message WebSocket reçu :", event);
-};
- -

Valeur

- -

Un objet EventListener.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/onmessage/index.md b/files/fr/web/api/websocket/onmessage/index.md new file mode 100644 index 0000000000..03ff9451fb --- /dev/null +++ b/files/fr/web/api/websocket/onmessage/index.md @@ -0,0 +1,27 @@ +--- +title: WebSocket.onmessage +slug: Web/API/WebSocket/onmessage +browser-compat: api.WebSocket.onmessage +--- +
{{APIRef("Web Sockets API")}}
+ +

La propriété WebSocket.onmessage est un gestionnaire d'évènement qui est appelé lorsqu'un message est reçu depuis le serveur. Ce gestionnaire est appelé avec un évènement MessageEvent en paramètre.

+ +

Syntaxe

+ +
+unWebSocket.onmessage = function(event) {
+  console.debug("Message WebSocket reçu :", event);
+};
+ +

Valeur

+ +

Un objet EventListener.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/onopen/index.html b/files/fr/web/api/websocket/onopen/index.html deleted file mode 100644 index 488b3eb0be..0000000000 --- a/files/fr/web/api/websocket/onopen/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: WebSocket.onopen -slug: Web/API/WebSocket/onopen -browser-compat: api.WebSocket.onopen ---- -
{{APIRef("Web Sockets API")}}
- -

La propriété WebSocket.onopen est un gestionnaire d'évènement qui est appelé lorsque l'état (readyState) de la connexion WebSocket passe à 1, indiquant que la connexion est prête pour l'envoi et la réception de données. Lorsqu'il est appelé, ce gestionnaire d'évènement reçoit un objet Event en paramètre.

- -

Syntaxe

- -
-uneWebSocket.onopen = function(event) {
-  console.log("La WebSocket est désormais ouverte.");
-};
- -

Valeur

- -

Un objet EventListener.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/onopen/index.md b/files/fr/web/api/websocket/onopen/index.md new file mode 100644 index 0000000000..488b3eb0be --- /dev/null +++ b/files/fr/web/api/websocket/onopen/index.md @@ -0,0 +1,27 @@ +--- +title: WebSocket.onopen +slug: Web/API/WebSocket/onopen +browser-compat: api.WebSocket.onopen +--- +
{{APIRef("Web Sockets API")}}
+ +

La propriété WebSocket.onopen est un gestionnaire d'évènement qui est appelé lorsque l'état (readyState) de la connexion WebSocket passe à 1, indiquant que la connexion est prête pour l'envoi et la réception de données. Lorsqu'il est appelé, ce gestionnaire d'évènement reçoit un objet Event en paramètre.

+ +

Syntaxe

+ +
+uneWebSocket.onopen = function(event) {
+  console.log("La WebSocket est désormais ouverte.");
+};
+ +

Valeur

+ +

Un objet EventListener.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/open_event/index.html b/files/fr/web/api/websocket/open_event/index.html deleted file mode 100644 index cfa28af7bb..0000000000 --- a/files/fr/web/api/websocket/open_event/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 'WebSocket : évènement open' -slug: Web/API/WebSocket/open_event -browser-compat: api.WebSocket.open_event ---- -
{{APIRef}}
- -

L'évènement open est déclenché lorsqu'une connexion avec une WebSocket est ouverte.

- - - - - - - - - - - - - - - - - - - - -
Bouillonne/RemonteNon
AnnulableNon
InterfaceEvent
Propriété de gestionnaire d'évènement correspondanteonopen
- -

Exemples

- -
-// Crée une connexion WebSocket
-const socket = new WebSocket('ws://localhost:8080');
-
-// La connexion est ouverte
-socket.addEventListener('open', (event) => {
-  socket.send('Coucou serveur !');
-});
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/websocket/open_event/index.md b/files/fr/web/api/websocket/open_event/index.md new file mode 100644 index 0000000000..cfa28af7bb --- /dev/null +++ b/files/fr/web/api/websocket/open_event/index.md @@ -0,0 +1,57 @@ +--- +title: 'WebSocket : évènement open' +slug: Web/API/WebSocket/open_event +browser-compat: api.WebSocket.open_event +--- +
{{APIRef}}
+ +

L'évènement open est déclenché lorsqu'une connexion avec une WebSocket est ouverte.

+ + + + + + + + + + + + + + + + + + + + +
Bouillonne/RemonteNon
AnnulableNon
InterfaceEvent
Propriété de gestionnaire d'évènement correspondanteonopen
+ +

Exemples

+ +
+// Crée une connexion WebSocket
+const socket = new WebSocket('ws://localhost:8080');
+
+// La connexion est ouverte
+socket.addEventListener('open', (event) => {
+  socket.send('Coucou serveur !');
+});
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/websocket/protocol/index.html b/files/fr/web/api/websocket/protocol/index.html deleted file mode 100644 index cf2bc5d053..0000000000 --- a/files/fr/web/api/websocket/protocol/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: WebSocket.protocol -slug: Web/API/WebSocket/protocol -browser-compat: api.WebSocket.protocol ---- -

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

- -

La propriété en lecture seule WebSocket.protocol renvoie le nom du sous protocole sélectionné par le serveur. Cette valeur sera l'une des chaînes de caractères du paramètre protocols utilisé lors de la création de l'objet WebSocket ou la chaîne vide si aucune connexion n'est établie.

- -

Syntax

- -
-var protocol = uneWebSocket.protocol;
-
- -

Valeur

- -

Une chaîne de caractères DOMString.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/protocol/index.md b/files/fr/web/api/websocket/protocol/index.md new file mode 100644 index 0000000000..cf2bc5d053 --- /dev/null +++ b/files/fr/web/api/websocket/protocol/index.md @@ -0,0 +1,26 @@ +--- +title: WebSocket.protocol +slug: Web/API/WebSocket/protocol +browser-compat: api.WebSocket.protocol +--- +

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

+ +

La propriété en lecture seule WebSocket.protocol renvoie le nom du sous protocole sélectionné par le serveur. Cette valeur sera l'une des chaînes de caractères du paramètre protocols utilisé lors de la création de l'objet WebSocket ou la chaîne vide si aucune connexion n'est établie.

+ +

Syntax

+ +
+var protocol = uneWebSocket.protocol;
+
+ +

Valeur

+ +

Une chaîne de caractères DOMString.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/readystate/index.html b/files/fr/web/api/websocket/readystate/index.html deleted file mode 100644 index d33114d5f5..0000000000 --- a/files/fr/web/api/websocket/readystate/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: WebSocket.readyState -slug: Web/API/WebSocket/readyState -browser-compat: api.WebSocket.readyState ---- -

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

- -

La propriété en lecture seule WebSocket.readyState renvoie l'état courant de la connexion WebSocket.

- -

Syntaxe

- -
-var readyState = uneWebSocket.readyState;
-
- -

Valeur

- -

Cette propriété peut valoir l'une des valeurs de type unsigned short suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurÉtatDescription
0CONNECTINGLa socket a été créée. La connexion n'est pas encore ouverte.
1OPENLa connexion est ouverte et prête pour la communication.
2CLOSINGLa connexion est en cours de fermeture.
3CLOSEDLa connexion est fermée ou n'a pas pu être ouverte.
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/readystate/index.md b/files/fr/web/api/websocket/readystate/index.md new file mode 100644 index 0000000000..d33114d5f5 --- /dev/null +++ b/files/fr/web/api/websocket/readystate/index.md @@ -0,0 +1,56 @@ +--- +title: WebSocket.readyState +slug: Web/API/WebSocket/readyState +browser-compat: api.WebSocket.readyState +--- +

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

+ +

La propriété en lecture seule WebSocket.readyState renvoie l'état courant de la connexion WebSocket.

+ +

Syntaxe

+ +
+var readyState = uneWebSocket.readyState;
+
+ +

Valeur

+ +

Cette propriété peut valoir l'une des valeurs de type unsigned short suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurÉtatDescription
0CONNECTINGLa socket a été créée. La connexion n'est pas encore ouverte.
1OPENLa connexion est ouverte et prête pour la communication.
2CLOSINGLa connexion est en cours de fermeture.
3CLOSEDLa connexion est fermée ou n'a pas pu être ouverte.
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/send/index.html b/files/fr/web/api/websocket/send/index.html deleted file mode 100644 index 62cd149882..0000000000 --- a/files/fr/web/api/websocket/send/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: WebSocket.send() -slug: Web/API/WebSocket/send -browser-compat: api.WebSocket.send ---- -

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

- -

La méthode WebSocket.send() rajoute les données indiquées à la queue pour transmission au serveur via la connexion WebSocket, augmentant ainsi la valeur de bufferedAmount du nombre d'octets nécessaires pour les données. Si les données ne peuvent être envoyées (par exemple parce qu'elles doivent être mises en tampon mais que la mémoire tampon est pleine), la socket est fermée automatiquement.

- -

Syntaxe

- -
-WebSocket.send("Coucou serveur !");
-
- -

Paramètres

- -
-
data
-
Les données à envoyer au serveur. La valeur peut avoir un des types suivants : -
-
USVString
-
Une chaîne de caractères. Cette chaîne est ajoutée au tampon au format UTF-8 et la valeur de bufferedAmount est augmentée du nombre d'octets nécessaires pour représenter cette chaîne de caractères UTF-8.
-
ArrayBuffer
-
Les données binaires peuvent aussi être envoyées avec un tableau typé. Son contenu binaire est mis en tampon et la valeur de bufferedAmount est augmentée du nombre d'octets nécessaires.
-
Blob
-
Lorsqu'une valeur Blob est fournie, les données brutes du blob sont rajoutées à la queue pour être transmises dans une frame binaire. La valeur de bufferedAmount est augmentée du nombre d'octets utilisés pour représenter ces données brutes.
-
ArrayBufferView
-
Il est possible d'envoyer n'importe quel objet étant un tableau typé JavaScript sous la forme d'une frame binaire. Le contenu des données binaires est rajouté à la queue dans le tampon et la valeur de bufferedAmount est augmentée du nombre d'octets correspondant.
-
-
-
- -

Exceptions levées

- -
-
INVALID_STATE_ERR
-
La connexion n'est pas ouverte actuellement.
-
SYNTAX_ERR
-
Les données sont une chaîne de caractères pour laquelle il existe des surrogates non appairés.
-
- -
-

Note : Pour Gecko 6.0, l'implémentation de send() varie de la spécification : le moteur renvoie un booléen indiquant si la connexion est toujours ouverte (par extension, cela indique si les données ont été correctement rajoutées à la queue ou transmises). Ce comportement a été corrigé avec Gecko 8.0.

- -

Avec Gecko 11.0, la prise en charge des ArrayBuffer est implémentée mais pas celle pour les objets Blob.

-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/send/index.md b/files/fr/web/api/websocket/send/index.md new file mode 100644 index 0000000000..62cd149882 --- /dev/null +++ b/files/fr/web/api/websocket/send/index.md @@ -0,0 +1,55 @@ +--- +title: WebSocket.send() +slug: Web/API/WebSocket/send +browser-compat: api.WebSocket.send +--- +

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

+ +

La méthode WebSocket.send() rajoute les données indiquées à la queue pour transmission au serveur via la connexion WebSocket, augmentant ainsi la valeur de bufferedAmount du nombre d'octets nécessaires pour les données. Si les données ne peuvent être envoyées (par exemple parce qu'elles doivent être mises en tampon mais que la mémoire tampon est pleine), la socket est fermée automatiquement.

+ +

Syntaxe

+ +
+WebSocket.send("Coucou serveur !");
+
+ +

Paramètres

+ +
+
data
+
Les données à envoyer au serveur. La valeur peut avoir un des types suivants : +
+
USVString
+
Une chaîne de caractères. Cette chaîne est ajoutée au tampon au format UTF-8 et la valeur de bufferedAmount est augmentée du nombre d'octets nécessaires pour représenter cette chaîne de caractères UTF-8.
+
ArrayBuffer
+
Les données binaires peuvent aussi être envoyées avec un tableau typé. Son contenu binaire est mis en tampon et la valeur de bufferedAmount est augmentée du nombre d'octets nécessaires.
+
Blob
+
Lorsqu'une valeur Blob est fournie, les données brutes du blob sont rajoutées à la queue pour être transmises dans une frame binaire. La valeur de bufferedAmount est augmentée du nombre d'octets utilisés pour représenter ces données brutes.
+
ArrayBufferView
+
Il est possible d'envoyer n'importe quel objet étant un tableau typé JavaScript sous la forme d'une frame binaire. Le contenu des données binaires est rajouté à la queue dans le tampon et la valeur de bufferedAmount est augmentée du nombre d'octets correspondant.
+
+
+
+ +

Exceptions levées

+ +
+
INVALID_STATE_ERR
+
La connexion n'est pas ouverte actuellement.
+
SYNTAX_ERR
+
Les données sont une chaîne de caractères pour laquelle il existe des surrogates non appairés.
+
+ +
+

Note : Pour Gecko 6.0, l'implémentation de send() varie de la spécification : le moteur renvoie un booléen indiquant si la connexion est toujours ouverte (par extension, cela indique si les données ont été correctement rajoutées à la queue ou transmises). Ce comportement a été corrigé avec Gecko 8.0.

+ +

Avec Gecko 11.0, la prise en charge des ArrayBuffer est implémentée mais pas celle pour les objets Blob.

+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/url/index.html b/files/fr/web/api/websocket/url/index.html deleted file mode 100644 index acaa13de14..0000000000 --- a/files/fr/web/api/websocket/url/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: WebSocket.url -slug: Web/API/WebSocket/url -browser-compat: api.WebSocket.url ---- -

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

- -

La propriété en lecture seule WebSocket.url renvoie l'URL absolue de la WebSocket telle que résolue par le constructeur.

- -

Syntaxe

- -
-var url = aWebSocket.url;
-
- -

Valeur

- -

Une chaîne de caractères DOMString.

- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/url/index.md b/files/fr/web/api/websocket/url/index.md new file mode 100644 index 0000000000..acaa13de14 --- /dev/null +++ b/files/fr/web/api/websocket/url/index.md @@ -0,0 +1,26 @@ +--- +title: WebSocket.url +slug: Web/API/WebSocket/url +browser-compat: api.WebSocket.url +--- +

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

+ +

La propriété en lecture seule WebSocket.url renvoie l'URL absolue de la WebSocket telle que résolue par le constructeur.

+ +

Syntaxe

+ +
+var url = aWebSocket.url;
+
+ +

Valeur

+ +

Une chaîne de caractères DOMString.

+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websocket/websocket/index.html b/files/fr/web/api/websocket/websocket/index.html deleted file mode 100644 index 94ff66e828..0000000000 --- a/files/fr/web/api/websocket/websocket/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: WebSocket() -slug: Web/API/WebSocket/WebSocket -browser-compat: api.WebSocket.WebSocket ---- -

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

- -

Le constructeur WebSocket() renvoie un nouvel objet WebSocket.

- -

Syntaxe

- -
-var aWebSocket = new WebSocket(url [, protocols]);
-
- -

Paramètres

- -
-
url
-
L'URL à laquelle se connecter. Cela devrait être l'URL à laquelle le serveur WebSocket répondra.
-
protocols {{optional_inline}}
-
Une valeur qui est une chaîne de caractères représentant un seul protocole ou un tableau de chaînes de caractères représentant une liste de protocoles. Ces chaînes de caractères indiquent des sous-protocoles : un serveur donné pourra implémenter différents sous-protocoles WebSocket (on peut vouloir qu'un serveur soit capable de gérér différents types d'interaction selon le protocol indiqué). Si cette valeur est absence, c'est un tableau vide qui est utilisé par défaut : [].
-
- -

Exceptions levées

- -
-
SECURITY_ERR
-
Le port ciblé par la tentative de connexion est bloqué.
-
SyntaxError
-
L'URL est invalide.
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

diff --git a/files/fr/web/api/websocket/websocket/index.md b/files/fr/web/api/websocket/websocket/index.md new file mode 100644 index 0000000000..94ff66e828 --- /dev/null +++ b/files/fr/web/api/websocket/websocket/index.md @@ -0,0 +1,40 @@ +--- +title: WebSocket() +slug: Web/API/WebSocket/WebSocket +browser-compat: api.WebSocket.WebSocket +--- +

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

+ +

Le constructeur WebSocket() renvoie un nouvel objet WebSocket.

+ +

Syntaxe

+ +
+var aWebSocket = new WebSocket(url [, protocols]);
+
+ +

Paramètres

+ +
+
url
+
L'URL à laquelle se connecter. Cela devrait être l'URL à laquelle le serveur WebSocket répondra.
+
protocols {{optional_inline}}
+
Une valeur qui est une chaîne de caractères représentant un seul protocole ou un tableau de chaînes de caractères représentant une liste de protocoles. Ces chaînes de caractères indiquent des sous-protocoles : un serveur donné pourra implémenter différents sous-protocoles WebSocket (on peut vouloir qu'un serveur soit capable de gérér différents types d'interaction selon le protocol indiqué). Si cette valeur est absence, c'est un tableau vide qui est utilisé par défaut : [].
+
+ +

Exceptions levées

+ +
+
SECURITY_ERR
+
Le port ciblé par la tentative de connexion est bloqué.
+
SyntaxError
+
L'URL est invalide.
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

diff --git a/files/fr/web/api/websockets_api/index.html b/files/fr/web/api/websockets_api/index.html deleted file mode 100644 index 3a1f82be97..0000000000 --- a/files/fr/web/api/websockets_api/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: WebSockets -slug: Web/API/WebSockets_API -tags: - - API - - Aperçu - - Bidirectionnel - - Client - - Communication - - Serveur - - WebSocket - - WebSocket API - - WebSockets - - data - - interactive -translation_of: Web/API/WebSockets_API ---- -

{{DefaultAPISidebar("Websockets API")}}

- -

L'API WebSocket est une technologie évoluée qui permet d'ouvrir un canal de communication bidirectionnelle entre un navigateur (côté client) et un serveur. Avec cette API vous pouvez envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse.

- -
-

Note : Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées.

-
- -

Interfaces  

- -
-
WebSocket
-
Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion.
-
CloseEvent
-
Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion.
-
MessageEvent
-
Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur.
-
- -

Guides

- - - -

Outils

- - - -

Ressources liées

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName("HTML WHATWG", "web-sockets.html", "WebSocket API")}}{{Spec2("HTML WHATWG")}}
WebSockets -

Candidat au statut de Recommendation

-
{{RFC(6455, "The WebSocket Protocol")}}IETF RFC
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WebSocket")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/websockets_api/index.md b/files/fr/web/api/websockets_api/index.md new file mode 100644 index 0000000000..3a1f82be97 --- /dev/null +++ b/files/fr/web/api/websockets_api/index.md @@ -0,0 +1,114 @@ +--- +title: WebSockets +slug: Web/API/WebSockets_API +tags: + - API + - Aperçu + - Bidirectionnel + - Client + - Communication + - Serveur + - WebSocket + - WebSocket API + - WebSockets + - data + - interactive +translation_of: Web/API/WebSockets_API +--- +

{{DefaultAPISidebar("Websockets API")}}

+ +

L'API WebSocket est une technologie évoluée qui permet d'ouvrir un canal de communication bidirectionnelle entre un navigateur (côté client) et un serveur. Avec cette API vous pouvez envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse.

+ +
+

Note : Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées.

+
+ +

Interfaces  

+ +
+
WebSocket
+
Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion.
+
CloseEvent
+
Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion.
+
MessageEvent
+
Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur.
+
+ +

Guides

+ + + +

Outils

+ + + +

Ressources liées

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("HTML WHATWG", "web-sockets.html", "WebSocket API")}}{{Spec2("HTML WHATWG")}}
WebSockets +

Candidat au statut de Recommendation

+
{{RFC(6455, "The WebSocket Protocol")}}IETF RFC
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WebSocket")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html deleted file mode 100644 index bf8ac63d44..0000000000 --- a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Écrire un serveur WebSocket en Java -slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java -translation_of: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java ---- -

Introduction

- -

Cet exemple montre comment cérer une serveur d'API WebSocket API utilisant Java d'Oracle.

- -

Bien que d'autres languages exécutés côté serveur peuvent être utilisés pour créer un serveur de WebSocket, cet exemple utilise Java d'Oracle pour simplifier le code en exemple.

- -

Ce seveur respecte la RFC 6455, dont il prend uniquement en charge les connexions depuis Chrome 16, Firefox 11, IE 10 et au delà.

- -

Premiers pas

- -

WebSockets communique via une connexion TCP (Transmission Control Protocol). La classe Java ServerSocket est située dans le paquet java.net.

- -

ServerSocket

- -

Constructeur :

- -
ServerSocket(int port)
- -

Lors de l'instanciation de la classe ServerSocket, celle-ci est liée au numéro de port renseigné par le paramètre port.

- -

Voici comment implémenter ce que nous venons d'apprendre :

- -
import java.net.ServerSocket;
-import java.net.Socket;
-
-public class Server{
-    public static void main(String[] args){
-        ServerSocket server = new ServerSocket(80);
-
-        System.out.println("Démarrage du serveur sur 127.0.0.1:80.\r\nAttente d’une connexion...");
-
-        Socket client = server.accept();
-
-        System.out.println("Un client s’est connecté.");
-    }
-}
- -

Socket

- -

Méthodes :

- - - -

OutputStream

- -

Méthode :

- -
write(byte[] b, int off, int len)
- -

En débutant à partir de la position off, écrit len octets du tableau d'octets fourni.

- -

InputStream

- -

Méthodes :

- -
read(byte[] b, int off, int len)
- -

Reads up to len bytes of data from the input stream into an array of bytes.

- -

Lit jusqu'à len octets de données depuis source d'entrée dans un tableau d'octets.

- -

Développons notre exemple.

- -
Socket client = server.accept();
-
-System.out.println("Un client s’est connecté.");
-
-InputStream in = client.getInputStream();
-
-OutputStream out = client.getOutputStream();
-
-new Scanner(in, "UTF-8").useDelimiter("\\r\\n\\r\\n").next();
- -

Établissement d‘une liaison (handshaking)

- -

Quand un client se connecte à un serveur, il envoit une requête GET pour passer à une connexion WebSocket à partir d'une simple connexion HTTP. Ceci est appelé l’établissement d’une liaison.

- -
import java.util.Scanner;
-import java.util.regex.Matcher;
-import java.util.regex.Pattern;
-
-//translate bytes of request to string
-String data = new Scanner(in,"UTF-8").useDelimiter("\\r\\n\\r\\n").next();
-
-Matcher get = Pattern.compile("^GET").matcher(data);
-
-if (get.find()) {
-
-} else {
-
-}
- -

Créer une réponse est plus facile que de comprendre pourquoi vous devez le faire comme ça.

- -

Vous devez,

- -
    -
  1. obtenir la valeur de la requête d’entête Sec-WebSocket-Key sans aucun espacement;
    2. -
  2. la lier avec « 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 »;
    3. -
  3. en calculer les codes SHA-1 et Base64;
    4. -
  4. renvoyer le résultat comme valeur de l'entête de réponse Sec-WebSocket-Accept qui sera une partie d’une réponse HTTP.
    5. -
- -
if (get.find()) {
-    Matcher match = Pattern.compile("Sec-WebSocket-Key: (.*)").matcher(data);
-    match.find();
-    byte[] response = ("HTTP/1.1 101 Switching Protocols\r\n"
-            + "Connection: Upgrade\r\n"
-            + "Upgrade: websocket\r\n"
-            + "Sec-WebSocket-Accept: "
-            + DatatypeConverter
-            .printBase64Binary(
-                    MessageDigest
-                    .getInstance("SHA-1")
-                    .digest((match.group(1) + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11")
-                            .getBytes("UTF-8")))
-            + "\r\n\r\n")
-            .getBytes("UTF-8");
-
-    out.write(response, 0, response.length);
-}
-
- -

Décoder les messages

- -

Après l’établissement réussie d’une liaison, le client peut transmettre des messages au serveur, ils seront désormais encodés.

- -

Si nous envoyons « abcdef », nous obtenons :

- - - - - - - - - - - - - - - - - - -
129134167225225210198131130182194135
- -

- 129:

- - - - - - - - - - - - - - - - - - - - -
FIN (est-ce la totalité du message ?)RSV1RSV2RSV3Opcode
10000x1=0001
- -

FIN : votre message peut être transmis en plusieurs morceaux, mais restons simple pour l’instant.
- Opcode 0x1 signifie que ceci est un texte. Liste exhaustive des Opcodes

- -

- 134:

- -

If the second byte minus 128 is between 0 and 125, this is the length of the message. If it is 126, the following 2 bytes (16-bit unsigned integer), if 127, the following 8 bytes (64-bit unsigned integer, the most significant bit MUST be 0) are the length.

- -

Si le second octet moins 128 est entre 0 et 125, alors il s’agit de la longueur du message. Si c’est 126, les deux octets suivants (entier non signé de 16-bits), si c’est 127, les huit octets suivants (entier non signé de 64-bis, dont le poid ford doit être 0) sont la longueur.

- -
-

Note : Je peux prendre 128 car le premier bit est toujours 1.

-
- -

- 167, 225, 225 et 210 sont les octets de la clef à décoder. Cela change en permanence.

- -

- Les octets encodés restants constituent le message.

- -

Algorithme de décodage

- -

octet décodé = octet encodé XOR (position de l’octet ET LOGIQUE 0x3)th octet de la clef

- -

Exemple en Java :

- -
byte[] decoded = new byte[6];
-byte[] encoded = new byte[] {198, 131, 130, 182, 194, 135};
-byte[] key = byte[4] {167, 225, 225, 210};
-
-for (int i = 0; i < encoded.length; i++) {
-    decoded[i] = (byte)(encoded[i] ^ key[i & 0x3]);
-}
- -

Voir aussi

- - diff --git a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md new file mode 100644 index 0000000000..bf8ac63d44 --- /dev/null +++ b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md @@ -0,0 +1,217 @@ +--- +title: Écrire un serveur WebSocket en Java +slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java +translation_of: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java +--- +

Introduction

+ +

Cet exemple montre comment cérer une serveur d'API WebSocket API utilisant Java d'Oracle.

+ +

Bien que d'autres languages exécutés côté serveur peuvent être utilisés pour créer un serveur de WebSocket, cet exemple utilise Java d'Oracle pour simplifier le code en exemple.

+ +

Ce seveur respecte la RFC 6455, dont il prend uniquement en charge les connexions depuis Chrome 16, Firefox 11, IE 10 et au delà.

+ +

Premiers pas

+ +

WebSockets communique via une connexion TCP (Transmission Control Protocol). La classe Java ServerSocket est située dans le paquet java.net.

+ +

ServerSocket

+ +

Constructeur :

+ +
ServerSocket(int port)
+ +

Lors de l'instanciation de la classe ServerSocket, celle-ci est liée au numéro de port renseigné par le paramètre port.

+ +

Voici comment implémenter ce que nous venons d'apprendre :

+ +
import java.net.ServerSocket;
+import java.net.Socket;
+
+public class Server{
+    public static void main(String[] args){
+        ServerSocket server = new ServerSocket(80);
+
+        System.out.println("Démarrage du serveur sur 127.0.0.1:80.\r\nAttente d’une connexion...");
+
+        Socket client = server.accept();
+
+        System.out.println("Un client s’est connecté.");
+    }
+}
+ +

Socket

+ +

Méthodes :

+ + + +

OutputStream

+ +

Méthode :

+ +
write(byte[] b, int off, int len)
+ +

En débutant à partir de la position off, écrit len octets du tableau d'octets fourni.

+ +

InputStream

+ +

Méthodes :

+ +
read(byte[] b, int off, int len)
+ +

Reads up to len bytes of data from the input stream into an array of bytes.

+ +

Lit jusqu'à len octets de données depuis source d'entrée dans un tableau d'octets.

+ +

Développons notre exemple.

+ +
Socket client = server.accept();
+
+System.out.println("Un client s’est connecté.");
+
+InputStream in = client.getInputStream();
+
+OutputStream out = client.getOutputStream();
+
+new Scanner(in, "UTF-8").useDelimiter("\\r\\n\\r\\n").next();
+ +

Établissement d‘une liaison (handshaking)

+ +

Quand un client se connecte à un serveur, il envoit une requête GET pour passer à une connexion WebSocket à partir d'une simple connexion HTTP. Ceci est appelé l’établissement d’une liaison.

+ +
import java.util.Scanner;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+//translate bytes of request to string
+String data = new Scanner(in,"UTF-8").useDelimiter("\\r\\n\\r\\n").next();
+
+Matcher get = Pattern.compile("^GET").matcher(data);
+
+if (get.find()) {
+
+} else {
+
+}
+ +

Créer une réponse est plus facile que de comprendre pourquoi vous devez le faire comme ça.

+ +

Vous devez,

+ +
    +
  1. obtenir la valeur de la requête d’entête Sec-WebSocket-Key sans aucun espacement;
    2. +
  2. la lier avec « 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 »;
    3. +
  3. en calculer les codes SHA-1 et Base64;
    4. +
  4. renvoyer le résultat comme valeur de l'entête de réponse Sec-WebSocket-Accept qui sera une partie d’une réponse HTTP.
    5. +
+ +
if (get.find()) {
+    Matcher match = Pattern.compile("Sec-WebSocket-Key: (.*)").matcher(data);
+    match.find();
+    byte[] response = ("HTTP/1.1 101 Switching Protocols\r\n"
+            + "Connection: Upgrade\r\n"
+            + "Upgrade: websocket\r\n"
+            + "Sec-WebSocket-Accept: "
+            + DatatypeConverter
+            .printBase64Binary(
+                    MessageDigest
+                    .getInstance("SHA-1")
+                    .digest((match.group(1) + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11")
+                            .getBytes("UTF-8")))
+            + "\r\n\r\n")
+            .getBytes("UTF-8");
+
+    out.write(response, 0, response.length);
+}
+
+ +

Décoder les messages

+ +

Après l’établissement réussie d’une liaison, le client peut transmettre des messages au serveur, ils seront désormais encodés.

+ +

Si nous envoyons « abcdef », nous obtenons :

+ + + + + + + + + + + + + + + + + + +
129134167225225210198131130182194135
+ +

- 129:

+ + + + + + + + + + + + + + + + + + + + +
FIN (est-ce la totalité du message ?)RSV1RSV2RSV3Opcode
10000x1=0001
+ +

FIN : votre message peut être transmis en plusieurs morceaux, mais restons simple pour l’instant.
+ Opcode 0x1 signifie que ceci est un texte. Liste exhaustive des Opcodes

+ +

- 134:

+ +

If the second byte minus 128 is between 0 and 125, this is the length of the message. If it is 126, the following 2 bytes (16-bit unsigned integer), if 127, the following 8 bytes (64-bit unsigned integer, the most significant bit MUST be 0) are the length.

+ +

Si le second octet moins 128 est entre 0 et 125, alors il s’agit de la longueur du message. Si c’est 126, les deux octets suivants (entier non signé de 16-bits), si c’est 127, les huit octets suivants (entier non signé de 64-bis, dont le poid ford doit être 0) sont la longueur.

+ +
+

Note : Je peux prendre 128 car le premier bit est toujours 1.

+
+ +

- 167, 225, 225 et 210 sont les octets de la clef à décoder. Cela change en permanence.

+ +

- Les octets encodés restants constituent le message.

+ +

Algorithme de décodage

+ +

octet décodé = octet encodé XOR (position de l’octet ET LOGIQUE 0x3)th octet de la clef

+ +

Exemple en Java :

+ +
byte[] decoded = new byte[6];
+byte[] encoded = new byte[] {198, 131, 130, 182, 194, 135};
+byte[] key = byte[4] {167, 225, 225, 210};
+
+for (int i = 0; i < encoded.length; i++) {
+    decoded[i] = (byte)(encoded[i] ^ key[i & 0x3]);
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html deleted file mode 100644 index d2cf5fccbf..0000000000 --- a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Ecrire des applications client WebSocket -slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications -translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications ---- -

Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est  dépendant d'aucune plateforme.

- -
-

Note : Un exemple d'utilisation des WebSockets à travers un système de chat sera mis à disposition sous forme de code dès que nos infrastructures seront en mesure de supporter les WebSockets.

-
- -

{{AvailableInWorkers}}

- -

Création d'un objet WebSocket

- -

Pour utiliser le protocole WebSocket, il faut créer un objet WebSocket ; celui-ci essaiera automatiquement d'ouvrir une connexion avec le server.

- -

Le constructeur WebSocket accepte un paramètre obligatoire et un paramètre optionnel :

- -
WebSocket WebSocket(
-  in DOMString url,
-  in optional DOMString protocols
-);
-
-WebSocket WebSocket(
-  in DOMString url,
-  in optional DOMString[] protocols
-);
-
- -
-
url
-
L'URL à laquelle le client se connecte, et le serveur répond.
-
protocols {{ optional_inline() }}
-
Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide.
-
- -

Le constructeur peut renvoyer des exceptions:

- -
-
SECURITY_ERR
-
Le port sur lequel on essaie d'établir la connexion est bloqué.
-
- -
-
- -

Erreurs de connexion

- -

Si une erreur se produit lors de la tentative de connexion, un  évènement nommé "error" est d'abord renvoyé à l'objet  WebSocket (invoquant ainsi son gestionnaire d'évènement onerror) suivi d'un évènement CloseEvent (qui invoque alors son gestionnaire d'évènement onclose) indiquant la raison de la clôture.

- -

A partir de Firefox 11, un message d'erreur descriptif est envoyé à la console de la plateforme Mozilla, et un code de fermeture tel que défini dans la RFC 6455, Section 7.4 est envoyé à travers l'évènement CloseEvent.

- -

Exemples

- -

Cet  exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse ws://www.example.com/socketserver. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire.

- -
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
-
- -

Lorsque la connexion est établie, la propriété readyState de l'objet exampleSocket prend la valeur CONNECTING. Sa valeur devient  OPEN une fois que la connexion est prête à transférer des données.

- -

Pour ouvrir une connexion flexible quant aux protocoles supportés, on spécifie une liste de protocoles:

- -
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
-
- -

Une fois la connexion établie (c'est-à-dire quand readyState a la valeur OPEN), la propriété protocol indique quel protocole le server a sélectionné.

- -

Dans les exemples ci-dessus on a remplacé  http par ws, et de la même façon on peut remplacer https par  wss . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec ws://www.example.com ou wss://www.example.com.

- -

Envoi de données vers le serveur

- -

Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode  send() de l'objet WebSocket pour chaque message que l'on veut envoyer :

- -

Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de  ArrayBuffer.

- -
-

Note : Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne.

-
- -

Comme l'établissement d'une connexion est asynchrone, et peut potentiellemet échouer, appeler la méthode send() juste après la création d'un objet WebSocket peut ne pas fonctionner. Il est plus sûr de définir un gestionnaire d'évènement onopen, et de n'essayer d'envoyer des données que lorsqu'il est appelé.

- -
exampleSocket.onopen = function (event) {
-  exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !");
-};
-
- -

Utilisation de JSON pour transmettre des objets

- -

Il peut être utile d'utiliser JSON pour envoyer des données complexes au serveur. Par exemple, un programme de chat peut interagir avec un serveur en utilisant un protocole qui implémente l'échange de paquets contenant des données encapsulées en JSON:

- -
// Envoi d'un texte à tous les utilisateurs à travers le serveur
-function sendText() {
-  // Création d'un objet msg qui contient les données
-  // dont le serveur a besoin pour traiter le message
-  var msg = {
-    type: "message",
-    text: document.getElementById("text").value,
-    id:   clientID,
-    date: Date.now()
-  };
-
-  // Envoi de l'objet msg à travers une chaîne formatée en JSON
-  exampleSocket.send(JSON.stringify(msg));
-
-  // Efface le texte de l'élément input
-  // afin de recevoir la prochaine ligne de texte
-  // que l'utilisateur va saisir
-  document.getElementById("text").value = "";
-}
-
- -

Réception de données du serveur

- -

WebSockets est une API orientée évènement; lorsqu'elle reçoit un message, un évènement "message" est envoyé au gestionnaire d'évènement onmessage. Pour écouter les données reçues, on peut écrire quelque chose comme:

- -
exampleSocket.onmessage = function (event) {
-  console.log(event.data);
-}
-
- -

Réception et interprétation d'objets JSON

- -

Considérons l'application de chat évoquée dans {{ anch("Utilisation de JSON pour transmettre des objets") }}. Le client peut recevoir différents types de paquets de données, tels que:

- - - -

Le code qui interprète ces messages entrants pourrait être:

- -
exampleSocket.onmessage = function(event) {
-  var f = document.getElementById("chatbox").contentDocument;
-  var text = "";
-  var msg = JSON.parse(event.data);
-  var time = new Date(msg.date);
-  var timeStr = time.toLocaleTimeString();
-
-  switch(msg.type) {
-    case "id":
-      clientID = msg.id;
-      setUsername();
-      break;
-    case "username":
-      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
-      break;
-    case "message":
-      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
-      break;
-    case "rejectusername":
-      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
-      break;
-    case "userlist":
-      var ul = "";
-      for (i=0; i < msg.users.length; i++) {
-        ul += msg.users[i] + "<br>";
-      }
-      document.getElementById("userlistbox").innerHTML = ul;
-      break;
-  }
-
-  if (text.length) {
-    f.write(text);
-    document.getElementById("chatbox").contentWindow.scrollByPages(1);
-  }
-};
-
- -

Ici nous utilisons JSON.parse() pour convertir l'objet JSON en l'objet original, avant de l'examiner et le traiter.

- -

Encodage du texte

- -

Le texte reçu à travers une connexion WebSocket est encodé au format UTF-8.

- -

Avant Gecko 9.0 {{ geckoRelease("9.0") }}, certains charactères spéciaux dans une chaîne UTF-8 provoquaient l'interruption de la connexion. Maintenant Gecko accepte ces caractères.

- -

Fermeture de la connexion

- -

Quand on n'a plus besoin de la connexion WebSocket, on appelle la méthode close() de l'objet WebSocket:

- -
exampleSocket.close();
-
- -

Il peut être utile de vérifier la valeur de l'attribut bufferedAmount avant de fermer la connexion, pour s'assurer qu'il ne reste pas des données qui n'ont pas été transmises.

- -

Considérations de sécurité

- -

Il est déconseillé d'utiliser les WebSockets dans un environnement mixte, c'est-à-dire qu'il ne faut pas établir de connexion Websocket non sécurisée depuis une page chargée en HTTPS, et inversement. Certains navigateurs l'interdisent explicitement, comme Firefox à partir de la version 8.

diff --git a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md new file mode 100644 index 0000000000..d2cf5fccbf --- /dev/null +++ b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md @@ -0,0 +1,191 @@ +--- +title: Ecrire des applications client WebSocket +slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +

Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est  dépendant d'aucune plateforme.

+ +
+

Note : Un exemple d'utilisation des WebSockets à travers un système de chat sera mis à disposition sous forme de code dès que nos infrastructures seront en mesure de supporter les WebSockets.

+
+ +

{{AvailableInWorkers}}

+ +

Création d'un objet WebSocket

+ +

Pour utiliser le protocole WebSocket, il faut créer un objet WebSocket ; celui-ci essaiera automatiquement d'ouvrir une connexion avec le server.

+ +

Le constructeur WebSocket accepte un paramètre obligatoire et un paramètre optionnel :

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+
+ +
+
url
+
L'URL à laquelle le client se connecte, et le serveur répond.
+
protocols {{ optional_inline() }}
+
Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide.
+
+ +

Le constructeur peut renvoyer des exceptions:

+ +
+
SECURITY_ERR
+
Le port sur lequel on essaie d'établir la connexion est bloqué.
+
+ +
+
+ +

Erreurs de connexion

+ +

Si une erreur se produit lors de la tentative de connexion, un  évènement nommé "error" est d'abord renvoyé à l'objet  WebSocket (invoquant ainsi son gestionnaire d'évènement onerror) suivi d'un évènement CloseEvent (qui invoque alors son gestionnaire d'évènement onclose) indiquant la raison de la clôture.

+ +

A partir de Firefox 11, un message d'erreur descriptif est envoyé à la console de la plateforme Mozilla, et un code de fermeture tel que défini dans la RFC 6455, Section 7.4 est envoyé à travers l'évènement CloseEvent.

+ +

Exemples

+ +

Cet  exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse ws://www.example.com/socketserver. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire.

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+
+ +

Lorsque la connexion est établie, la propriété readyState de l'objet exampleSocket prend la valeur CONNECTING. Sa valeur devient  OPEN une fois que la connexion est prête à transférer des données.

+ +

Pour ouvrir une connexion flexible quant aux protocoles supportés, on spécifie une liste de protocoles:

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+
+ +

Une fois la connexion établie (c'est-à-dire quand readyState a la valeur OPEN), la propriété protocol indique quel protocole le server a sélectionné.

+ +

Dans les exemples ci-dessus on a remplacé  http par ws, et de la même façon on peut remplacer https par  wss . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec ws://www.example.com ou wss://www.example.com.

+ +

Envoi de données vers le serveur

+ +

Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode  send() de l'objet WebSocket pour chaque message que l'on veut envoyer :

+ +

Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de  ArrayBuffer.

+ +
+

Note : Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne.

+
+ +

Comme l'établissement d'une connexion est asynchrone, et peut potentiellemet échouer, appeler la méthode send() juste après la création d'un objet WebSocket peut ne pas fonctionner. Il est plus sûr de définir un gestionnaire d'évènement onopen, et de n'essayer d'envoyer des données que lorsqu'il est appelé.

+ +
exampleSocket.onopen = function (event) {
+  exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !");
+};
+
+ +

Utilisation de JSON pour transmettre des objets

+ +

Il peut être utile d'utiliser JSON pour envoyer des données complexes au serveur. Par exemple, un programme de chat peut interagir avec un serveur en utilisant un protocole qui implémente l'échange de paquets contenant des données encapsulées en JSON:

+ +
// Envoi d'un texte à tous les utilisateurs à travers le serveur
+function sendText() {
+  // Création d'un objet msg qui contient les données
+  // dont le serveur a besoin pour traiter le message
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Envoi de l'objet msg à travers une chaîne formatée en JSON
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Efface le texte de l'élément input
+  // afin de recevoir la prochaine ligne de texte
+  // que l'utilisateur va saisir
+  document.getElementById("text").value = "";
+}
+
+ +

Réception de données du serveur

+ +

WebSockets est une API orientée évènement; lorsqu'elle reçoit un message, un évènement "message" est envoyé au gestionnaire d'évènement onmessage. Pour écouter les données reçues, on peut écrire quelque chose comme:

+ +
exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+
+ +

Réception et interprétation d'objets JSON

+ +

Considérons l'application de chat évoquée dans {{ anch("Utilisation de JSON pour transmettre des objets") }}. Le client peut recevoir différents types de paquets de données, tels que:

+ + + +

Le code qui interprète ces messages entrants pourrait être:

+ +
exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
+      break;
+    case "message":
+      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
+      break;
+    case "rejectusername":
+      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i < msg.users.length; i++) {
+        ul += msg.users[i] + "<br>";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+
+ +

Ici nous utilisons JSON.parse() pour convertir l'objet JSON en l'objet original, avant de l'examiner et le traiter.

+ +

Encodage du texte

+ +

Le texte reçu à travers une connexion WebSocket est encodé au format UTF-8.

+ +

Avant Gecko 9.0 {{ geckoRelease("9.0") }}, certains charactères spéciaux dans une chaîne UTF-8 provoquaient l'interruption de la connexion. Maintenant Gecko accepte ces caractères.

+ +

Fermeture de la connexion

+ +

Quand on n'a plus besoin de la connexion WebSocket, on appelle la méthode close() de l'objet WebSocket:

+ +
exampleSocket.close();
+
+ +

Il peut être utile de vérifier la valeur de l'attribut bufferedAmount avant de fermer la connexion, pour s'assurer qu'il ne reste pas des données qui n'ont pas été transmises.

+ +

Considérations de sécurité

+ +

Il est déconseillé d'utiliser les WebSockets dans un environnement mixte, c'est-à-dire qu'il ne faut pas établir de connexion Websocket non sécurisée depuis une page chargée en HTTPS, et inversement. Certains navigateurs l'interdisent explicitement, comme Firefox à partir de la version 8.

diff --git a/files/fr/web/api/websockets_api/writing_websocket_servers/index.html b/files/fr/web/api/websockets_api/writing_websocket_servers/index.html deleted file mode 100644 index 5cc97ce8b0..0000000000 --- a/files/fr/web/api/websockets_api/writing_websocket_servers/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: Écriture de serveurs WebSocket -slug: Web/API/WebSockets_API/Writing_WebSocket_servers -translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers ---- -

Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix.

- -

Un serveur WebSocket peut être écrit dans n'importe quel language de programmation qui supporte les "Berkeley sockets", par exemple C(++), python ou même PHP et JavaScript (avec nodejs). Ceci n'est pas un tutoriel destiné à un language particulier mais un guide aidant à l'écriture de votre propre serveur.

- -

Avant de débuter, vous devez connaître précisément le fonctionnement du protocole HTTP et disposer d'une certaine expérience sur celui-ci. Des connaissances sur les sockets TCP dans votre langage de développement est également précieux. Ce guide ne présente ainsi que le minimum des connaissances requises et non un guide ultime.

- -
-

Note : Lire la dernière spécification officielle sur les WebSockets RFC 6455. Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production.

-
- -

Un serveur WebSocket est compris ici en "bas niveau" (c'est-à-dire plus proche du langage machine que du langage humain. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un proxy inverse (c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des cookies et d'autres méthodes d'authentification. 

- -

La "poignée de mains" du WebSocket

- -

En tout premier lieu, le serveur doit écouter les connexions sockets entrantes utilisant le protocole TCP standard. Suivant votre plateforme, celui-ci peut déjà le faire pour vous. Pour l'exemple qui suit, nous prenons pour acquis que votre serveur écoute le domaine exemple.com sur le port 8000 et votre serveur socket répond aux requêtes de type GET sur le chemin /chat. 

- -
-

Attention : Si le serveur peut écouter n'importe quel port, mais que vous décidez de ne pas utiliser un port standard (80 ou 443 pour SSL), cela peut créer en avant des problèmes avec les parefeux et/ou les proxys. De plus, gardez en mémoire que certains navigateur Web (notablement Firefox 8+), n'autorisent pas les connexions WebSocket non-SSL sur une page SSL. 

-
- -

La poignée de mains est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées. 

- -

La requête de poignée de mains côté client 

- -

Même si vous construisez votre serveur au profit des WebSockets, votre client doit tout de même démarrer un processus dit de poignée de main. Vous devez donc savoir comment interprêter cette requête. En premier, le client enverra tout d'abord une requête HTTP correctement formée. La requête doit être à la version 1.1 ou supérieure et la méthode doit être de type GET : 

- -
GET /chat HTTP/1.1
-Host: exemple.com:8000
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
-Sec-WebSocket-Version: 13
-
-
- -

Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir Miscellaneous pour les détails. En outre, des en-têtes communs tel que User-Agent, Referer, Cookie ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées. 

- -

Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse  "400 Bad Request" (erreur 400 : la requête est incorrecte) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (en somme, tout dépend du comportement du client). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête Sec-WebSocket-Version correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction). Maintenant, nous allons passer à l'entête attendu : Sec-WebSocket-Key.

- -
-

Note : Un grand nombre de navigateurs enverront un  Entête d'origine. Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse 403 Forbidden si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. 

-
- -
-

Note : L'URI de la requête (/chat dans notre cas), n'a pas de signification particulièrement dans les spécifications en usage : elle permet simplement, par convention, de disposer d'une multitude d'applications en parallèle grâce à WebSocket. Par exemple exemple.com/chat peut être associée à une API/une application de dialogue multiutilisateurs lorsque /game invoquera son homologue pour un jeu. 

-
- -
-

Note: Les codes réguliers (c-à-d défini par le protocole standard) HTTP ne peuvent être utilisés qu'avant la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. 

-
- -

La réponse du serveur lors de la poignée de mains 

- -

Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : \r\n ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). 

- -
HTTP/1.1 101 Switching Protocols
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
-
-
- -

En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir Miscellaneous pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (rassembler) la valeur de Sec-WebSocket-Key et "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (valeur fixée par défaut : c'est une "magic string") puis procéder au hash par la méthode SHA-1 du résultat et retourner le format au format base64. 

- -
-

Note : Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP  (qui serait alors mal interprétée). 

-
- -

Ainsi si la clé (la valeur de l'entête du client) était "dGhlIHNhbXBsZSBub25jZQ==", le retour (Accept * dans la version d'origine du tutoriel) sera : "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! 

- -
-

Note : Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce avant la fin du processus de poignée de main. 

-
- -

Suivre les clients confirmés 

- -

Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de déni de service. 

- -

L'échange de trames de données 

- -

Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le cryptage XOR (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. 

- -

Format

- -
-

Attention : Dans cette partie, payload équivaut en bon français à charge utile. C'est-à-dire les données qui ne font pas partie du fonctionnement de la trame mais de l'échange entre le serveur et le client. Ainsi j'ai traduit payload data comme des données utiles. 

-
- -

Chaque trame (dans un sens ou dans un autre) suit le schéma suivant : 

- -
 0               1               2               3
- 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
-+-+-+-+-+-------+-+-------------+-------------------------------+
-|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
-|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
-|N|V|V|V|       |S|             |   (if payload len==126/127)   |
-| |1|2|3|       |K|             |                               |
-+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
- 4               5               6               7
-+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-|     Extended payload length continued, if payload len == 127  |
-+ - - - - - - - - - - - - - - - +-------------------------------+
- 8               9               10              11
-+ - - - - - - - - - - - - - - - +-------------------------------+
-|                               |Masking-key, if MASK set to 1  |
-+-------------------------------+-------------------------------+
- 12              13              14              15
-+-------------------------------+-------------------------------+
-| Masking-key (continued)       |          Payload Data         |
-+-------------------------------- - - - - - - - - - - - - - - - +
-:                     Payload Data continued ...                :
-+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-|                     Payload Data continued ...                |
-+---------------------------------------------------------------+
- -

RSV1-3 peuvent être ignorés, ils concernent les extensions. 

- -

Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard.

- -

Note: Vous devez masquer les messages même lorsque vous utilisez un socket sécurisé.

- -

Le champ opcode définit comment est interpêtée la charge utile (payload data) : ainsi 0x0 indique la consigne "continuer", 0x1 indique du texte (qui est systématiquement encodé en UTF-8), 0x2 pour des données binaires, et d'autres "codes de contrôle" qui seront évoqués plus tard. Dans cette version des WebSockets, 0x3 à 0x7 et 0xB à 0xF n'ont pas de significations particulières. 

- -

Le bit FIN indique si c'est le dernier message de la série [NDT : pour la concaténation, pas la fin de la connexion elle-même]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. 

- -

Connaître la taille des données utiles 

- -

Pour (pouvoir) lire les données utiles, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des données utiles. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : 

- -
    -
  1. (étape 1) Lire tout d'abord les bits 9 à 15 (inclu) et les interprêter comme un entier non-signé. S'il équivaut à 125 ou moins, alors il correspond à la taille totale de la charge utile.
    - S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. 
    2. -
  2. (étape 2) Lire les 16 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. 
    3. -
  3. (étape 3) Lire les 64 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. Attention, le bit le plus significatif doit rester à 0.
    4. -
- -

Lire et démasquer les données 

- -

Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les données encodées, et la clé masque. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (i modulo 4) ième octet du masque. En voici le pseudo-code (JavaScript valide) : 

- -
var DECODED = "";
-for (var i = 0; i < ENCODED.length; i++) {
-    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
-}
- -
-

Note : Ici la variable DECODED correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (si c'est json, vous devez encore décoder les données utiles reçues avec le parseur JSON). 

-
- -

La fragmentation des messages 

- -

Les champs FIN et opcodes fonctionnent ensemble pour envoyer un message découpé en une multitude de trames. C'est ce que l'on appele la fragmentation des messages. La fragmentation est seulement possible avec les opcodes de 0x0 à 0x2. 

- -

Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour 0x1 c'est du texte, pour 0x2 des données binaires, etc. Toutefois pour 0x0, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) : 

- -
Client: FIN=1, opcode=0x1, msg="hello"
-Server: (process complete message immediately) Hi.
-Client: FIN=0, opcode=0x1, msg="and a"
-Server: (listening, new message containing text started)
-Client: FIN=0, opcode=0x0, msg="happy new"
-Server: (listening, payload concatenated to previous message)
-Client: FIN=1, opcode=0x0, msg="year!"
-Server: (process complete message) Happy new year to you too!
- -

La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. 
- Voir la section 5.4 de la spécification pour les détails de cette partie. 

- -

Pings-Pongs : le "coeur" des WebSockets

- -

A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un ping à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un pong. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. 

- -

Le ping ou le pong sont des trames classiques dites de contrôle. Les pings disposent d'un opcode à 0x9 et les pongs à 0xA. Lorsqu'un ping est envoyé, le pong doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le pong seul (c-à-d sans ping) est ignoré. 

- -
-

Note : Lorsque plusieurs pings sont envoyés à la suite, un seul pong suffit en réponse (le plus récent pour la donnée utile renvoyée). 

-
- -

Clore la connexion 

- -

La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la section 5.5.1). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés. 

- -

Diverses informations utiles

- -
-

Note : L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) IANA WebSocket Protocol Registry.

-
- -

Les extensions et sous-protocoles des WebSockets sont négociés durant l'échange des entêtes de la poignée de mains. Si l'on pourrait croire qu'extensions et sous-protocles sont finalement la même chose, il n'en est rien : le contrôle des extensions agit sur les trames ce qui modifie la charge utile ; alors que les sous-protocoles modifient uniquement la charge utile, et rien d'autre. Les extensions sont optionnelles et généralisées (par exemple pour la compression des données) ; les sous-protocoles sont souvent obligatoires et ciblés (par exemple dans le cadre d'une application de chat ou d'un jeu MMORPG). 

- -
-

Attention : Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). 

-
- -

Les extensions

- -

L'idée des extensions pourrait être, par exemple, la compression d'un fichier avant de l'envoyer par courriel / email à quelqu'un : les données transférées ne changent pas de contenu, mais leur format oui (et leur taille aussi...). Ce n'est donc pas le format du contenu qui change que le mode transmission - c'est le principe des extensions en WebSockets, dont le principe de base est d'être un protocole simple d'échange de données. 

- -
-

Note : Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées.

-
- -

Les sous-protocoles 

- -

Les sous-protocoles sont à comparer à un schéma XML ou une déclaration de DocType. Ainsi vous pouvez utiliser seulement du XML et sa syntaxe et, imposer par le biais des sous-protocoles, son utilisation durant l'échange WebSocket. C'est l'intérêt de ces sous-protocoles : établir une structure définie (et intangible : le client se voit imposer la mise en oeuvre par le serveur), bien que les deux doivent l'accepter pour communiquer ensemble. 

- -
-

Note : Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. 

-
- -

Exemple : un client souhaite demander un sous-protocole spécifique. Pour se faire, il envoie dans les entêtes d'origine du processus de poignées de mains : 

- -
GET /chat HTTP/1.1
-...
-Sec-WebSocket-Protocol: soap, wamp
-
- -

Ou son équivalent : 

- -
...
-Sec-WebSocket-Protocol: soap
-Sec-WebSocket-Protocol: wamp
-
- -

Le serveur doit désormais choisir l'un des protocoles suggérés par le client et qu'il peut prendre en charge. S'il peut en prendre plus d'un, le premier envoyé par le client sera privilégié. Dans notre exemple, le client envoit soap et wamp, le serveur qui supporte les deux enverra donc : 

- -
Sec-WebSocket-Protocol: soap
-
- -
-

Attention : Le serveur ne peut (ne doit) envoyer plus d'un entête Sec-Websocket-Protocol. S'il n'en supporte aucun, il ne doit pas renvoyer l'entête Sec-WebSocket-Protocol (l'entête vide n'est pas correct). Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). 

-
- -

Si vous souhaitez que votre serveur puisse supporter certains sous-protocoles, vous pourriez avoir besoin d'une application ou de scripts supplémentaires sur le serveur. Imaginons par exemple que vous utilisiez le sous-protocole json - où toutes les données échangées par WebSockets sont donc formatés suivant le format JSON. Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous devez disposer d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci. 

- -
-

Note : Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de chat sur le domaine exemple.com, vous devrirez utiliser : Sec-WebSocket-Protocol: chat.exemple.com. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : chat.exemple.com/2.0. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon.

-
- -

Contenus associés

- - diff --git a/files/fr/web/api/websockets_api/writing_websocket_servers/index.md b/files/fr/web/api/websockets_api/writing_websocket_servers/index.md new file mode 100644 index 0000000000..5cc97ce8b0 --- /dev/null +++ b/files/fr/web/api/websockets_api/writing_websocket_servers/index.md @@ -0,0 +1,250 @@ +--- +title: Écriture de serveurs WebSocket +slug: Web/API/WebSockets_API/Writing_WebSocket_servers +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +

Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix.

+ +

Un serveur WebSocket peut être écrit dans n'importe quel language de programmation qui supporte les "Berkeley sockets", par exemple C(++), python ou même PHP et JavaScript (avec nodejs). Ceci n'est pas un tutoriel destiné à un language particulier mais un guide aidant à l'écriture de votre propre serveur.

+ +

Avant de débuter, vous devez connaître précisément le fonctionnement du protocole HTTP et disposer d'une certaine expérience sur celui-ci. Des connaissances sur les sockets TCP dans votre langage de développement est également précieux. Ce guide ne présente ainsi que le minimum des connaissances requises et non un guide ultime.

+ +
+

Note : Lire la dernière spécification officielle sur les WebSockets RFC 6455. Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production.

+
+ +

Un serveur WebSocket est compris ici en "bas niveau" (c'est-à-dire plus proche du langage machine que du langage humain. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un proxy inverse (c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des cookies et d'autres méthodes d'authentification. 

+ +

La "poignée de mains" du WebSocket

+ +

En tout premier lieu, le serveur doit écouter les connexions sockets entrantes utilisant le protocole TCP standard. Suivant votre plateforme, celui-ci peut déjà le faire pour vous. Pour l'exemple qui suit, nous prenons pour acquis que votre serveur écoute le domaine exemple.com sur le port 8000 et votre serveur socket répond aux requêtes de type GET sur le chemin /chat. 

+ +
+

Attention : Si le serveur peut écouter n'importe quel port, mais que vous décidez de ne pas utiliser un port standard (80 ou 443 pour SSL), cela peut créer en avant des problèmes avec les parefeux et/ou les proxys. De plus, gardez en mémoire que certains navigateur Web (notablement Firefox 8+), n'autorisent pas les connexions WebSocket non-SSL sur une page SSL. 

+
+ +

La poignée de mains est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées. 

+ +

La requête de poignée de mains côté client 

+ +

Même si vous construisez votre serveur au profit des WebSockets, votre client doit tout de même démarrer un processus dit de poignée de main. Vous devez donc savoir comment interprêter cette requête. En premier, le client enverra tout d'abord une requête HTTP correctement formée. La requête doit être à la version 1.1 ou supérieure et la méthode doit être de type GET : 

+ +
GET /chat HTTP/1.1
+Host: exemple.com:8000
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+
+ +

Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir Miscellaneous pour les détails. En outre, des en-têtes communs tel que User-Agent, Referer, Cookie ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées. 

+ +

Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse  "400 Bad Request" (erreur 400 : la requête est incorrecte) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (en somme, tout dépend du comportement du client). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête Sec-WebSocket-Version correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction). Maintenant, nous allons passer à l'entête attendu : Sec-WebSocket-Key.

+ +
+

Note : Un grand nombre de navigateurs enverront un  Entête d'origine. Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse 403 Forbidden si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. 

+
+ +
+

Note : L'URI de la requête (/chat dans notre cas), n'a pas de signification particulièrement dans les spécifications en usage : elle permet simplement, par convention, de disposer d'une multitude d'applications en parallèle grâce à WebSocket. Par exemple exemple.com/chat peut être associée à une API/une application de dialogue multiutilisateurs lorsque /game invoquera son homologue pour un jeu. 

+
+ +
+

Note: Les codes réguliers (c-à-d défini par le protocole standard) HTTP ne peuvent être utilisés qu'avant la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. 

+
+ +

La réponse du serveur lors de la poignée de mains 

+ +

Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : \r\n ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). 

+ +
HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+
+ +

En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir Miscellaneous pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (rassembler) la valeur de Sec-WebSocket-Key et "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (valeur fixée par défaut : c'est une "magic string") puis procéder au hash par la méthode SHA-1 du résultat et retourner le format au format base64. 

+ +
+

Note : Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP  (qui serait alors mal interprétée). 

+
+ +

Ainsi si la clé (la valeur de l'entête du client) était "dGhlIHNhbXBsZSBub25jZQ==", le retour (Accept * dans la version d'origine du tutoriel) sera : "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! 

+ +
+

Note : Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce avant la fin du processus de poignée de main. 

+
+ +

Suivre les clients confirmés 

+ +

Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de déni de service. 

+ +

L'échange de trames de données 

+ +

Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le cryptage XOR (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. 

+ +

Format

+ +
+

Attention : Dans cette partie, payload équivaut en bon français à charge utile. C'est-à-dire les données qui ne font pas partie du fonctionnement de la trame mais de l'échange entre le serveur et le client. Ainsi j'ai traduit payload data comme des données utiles. 

+
+ +

Chaque trame (dans un sens ou dans un autre) suit le schéma suivant : 

+ +
 0               1               2               3
+ 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+ 4               5               6               7
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+ 8               9               10              11
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+ 12              13              14              15
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+
+ +

RSV1-3 peuvent être ignorés, ils concernent les extensions. 

+ +

Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard.

+ +

Note: Vous devez masquer les messages même lorsque vous utilisez un socket sécurisé.

+ +

Le champ opcode définit comment est interpêtée la charge utile (payload data) : ainsi 0x0 indique la consigne "continuer", 0x1 indique du texte (qui est systématiquement encodé en UTF-8), 0x2 pour des données binaires, et d'autres "codes de contrôle" qui seront évoqués plus tard. Dans cette version des WebSockets, 0x3 à 0x7 et 0xB à 0xF n'ont pas de significations particulières. 

+ +

Le bit FIN indique si c'est le dernier message de la série [NDT : pour la concaténation, pas la fin de la connexion elle-même]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. 

+ +

Connaître la taille des données utiles 

+ +

Pour (pouvoir) lire les données utiles, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des données utiles. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : 

+ +
    +
  1. (étape 1) Lire tout d'abord les bits 9 à 15 (inclu) et les interprêter comme un entier non-signé. S'il équivaut à 125 ou moins, alors il correspond à la taille totale de la charge utile.
    + S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. 
    2. +
  2. (étape 2) Lire les 16 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. 
    3. +
  3. (étape 3) Lire les 64 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. Attention, le bit le plus significatif doit rester à 0.
    4. +
+ +

Lire et démasquer les données 

+ +

Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les données encodées, et la clé masque. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (i modulo 4) ième octet du masque. En voici le pseudo-code (JavaScript valide) : 

+ +
var DECODED = "";
+for (var i = 0; i < ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+}
+ +
+

Note : Ici la variable DECODED correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (si c'est json, vous devez encore décoder les données utiles reçues avec le parseur JSON). 

+
+ +

La fragmentation des messages 

+ +

Les champs FIN et opcodes fonctionnent ensemble pour envoyer un message découpé en une multitude de trames. C'est ce que l'on appele la fragmentation des messages. La fragmentation est seulement possible avec les opcodes de 0x0 à 0x2. 

+ +

Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour 0x1 c'est du texte, pour 0x2 des données binaires, etc. Toutefois pour 0x0, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) : 

+ +
Client: FIN=1, opcode=0x1, msg="hello"
+Server: (process complete message immediately) Hi.
+Client: FIN=0, opcode=0x1, msg="and a"
+Server: (listening, new message containing text started)
+Client: FIN=0, opcode=0x0, msg="happy new"
+Server: (listening, payload concatenated to previous message)
+Client: FIN=1, opcode=0x0, msg="year!"
+Server: (process complete message) Happy new year to you too!
+ +

La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. 
+ Voir la section 5.4 de la spécification pour les détails de cette partie. 

+ +

Pings-Pongs : le "coeur" des WebSockets

+ +

A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un ping à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un pong. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. 

+ +

Le ping ou le pong sont des trames classiques dites de contrôle. Les pings disposent d'un opcode à 0x9 et les pongs à 0xA. Lorsqu'un ping est envoyé, le pong doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le pong seul (c-à-d sans ping) est ignoré. 

+ +
+

Note : Lorsque plusieurs pings sont envoyés à la suite, un seul pong suffit en réponse (le plus récent pour la donnée utile renvoyée). 

+
+ +

Clore la connexion 

+ +

La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la section 5.5.1). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés. 

+ +

Diverses informations utiles

+ +
+

Note : L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) IANA WebSocket Protocol Registry.

+
+ +

Les extensions et sous-protocoles des WebSockets sont négociés durant l'échange des entêtes de la poignée de mains. Si l'on pourrait croire qu'extensions et sous-protocles sont finalement la même chose, il n'en est rien : le contrôle des extensions agit sur les trames ce qui modifie la charge utile ; alors que les sous-protocoles modifient uniquement la charge utile, et rien d'autre. Les extensions sont optionnelles et généralisées (par exemple pour la compression des données) ; les sous-protocoles sont souvent obligatoires et ciblés (par exemple dans le cadre d'une application de chat ou d'un jeu MMORPG). 

+ +
+

Attention : Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). 

+
+ +

Les extensions

+ +

L'idée des extensions pourrait être, par exemple, la compression d'un fichier avant de l'envoyer par courriel / email à quelqu'un : les données transférées ne changent pas de contenu, mais leur format oui (et leur taille aussi...). Ce n'est donc pas le format du contenu qui change que le mode transmission - c'est le principe des extensions en WebSockets, dont le principe de base est d'être un protocole simple d'échange de données. 

+ +
+

Note : Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées.

+
+ +

Les sous-protocoles 

+ +

Les sous-protocoles sont à comparer à un schéma XML ou une déclaration de DocType. Ainsi vous pouvez utiliser seulement du XML et sa syntaxe et, imposer par le biais des sous-protocoles, son utilisation durant l'échange WebSocket. C'est l'intérêt de ces sous-protocoles : établir une structure définie (et intangible : le client se voit imposer la mise en oeuvre par le serveur), bien que les deux doivent l'accepter pour communiquer ensemble. 

+ +
+

Note : Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. 

+
+ +

Exemple : un client souhaite demander un sous-protocole spécifique. Pour se faire, il envoie dans les entêtes d'origine du processus de poignées de mains : 

+ +
GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+ +

Ou son équivalent : 

+ +
...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+ +

Le serveur doit désormais choisir l'un des protocoles suggérés par le client et qu'il peut prendre en charge. S'il peut en prendre plus d'un, le premier envoyé par le client sera privilégié. Dans notre exemple, le client envoit soap et wamp, le serveur qui supporte les deux enverra donc : 

+ +
Sec-WebSocket-Protocol: soap
+
+ +
+

Attention : Le serveur ne peut (ne doit) envoyer plus d'un entête Sec-Websocket-Protocol. S'il n'en supporte aucun, il ne doit pas renvoyer l'entête Sec-WebSocket-Protocol (l'entête vide n'est pas correct). Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). 

+
+ +

Si vous souhaitez que votre serveur puisse supporter certains sous-protocoles, vous pourriez avoir besoin d'une application ou de scripts supplémentaires sur le serveur. Imaginons par exemple que vous utilisiez le sous-protocole json - où toutes les données échangées par WebSockets sont donc formatés suivant le format JSON. Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous devez disposer d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci. 

+ +
+

Note : Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de chat sur le domaine exemple.com, vous devrirez utiliser : Sec-WebSocket-Protocol: chat.exemple.com. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : chat.exemple.com/2.0. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon.

+
+ +

Contenus associés

+ + diff --git a/files/fr/web/api/webvr_api/index.html b/files/fr/web/api/webvr_api/index.html deleted file mode 100644 index 4d41a433a3..0000000000 --- a/files/fr/web/api/webvr_api/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: WebVR API -slug: Web/API/WebVR_API -translation_of: Web/API/WebVR_API ---- -
{{DefaultAPISidebar("WebVR API")}}{{Deprecated_Header}}
- -

WebVR fournit un support pour les dispositifs de réalité virtuelle - par exemple pour les casques de réalité virtuelle comme l'Oculus Rift - aux applications Web, permettant aux développeurs de traduire les informations de position et de mouvement de l'appareil en mouvements autour d'une scène 3D. Cela a de nombreuses applications très intéressantes, des visites de produits virtuels aux applications de formation interactive en passant par des jeux en première personne dans un environnement immersif.

- -

Concepts et usage

- -

Croquis d'une personne assise sur une chaise et portant des lunettes portant la mention « Head mounted display (HMD) » faisant face à un moniteur avec une webcam portant la mention « Position sensor ».

- -

Tous les périphériques de réalité virtuelle connectés à votre ordinateur seront donné grâce à la méthode {{domxref("Navigator.getVRDisplays()")}}. Cela retournera un tableau d'objets représentant les périphériques, qui auront l'héritage de l'objet {{domxref("VRDevice")}} — généralement un casque de réalité virtuelle renverra deux périphériques — le casque lui-même, représenté par {{domxref("HMDVRDevice")}}, et la caméra capteur de position qui suit la position de votre tête, représenté par {{domxref("PositionSensorVRDevice")}}.

- -

L'objet {{domxref("PositionSensorVRDevice")}} contient la méthode {{domxref("PositionSensorVRDevice.getState","getState()")}}, qui retourne un objet {{domxref("VRPositionState")}} — cela représente l'état du capteur à un timecode donné, et inclus les propriétés avec des données utiles tel que la vélocité, l'accélération et l'orientation, utiles pour mettre à jour le rendu de la scène pour chaque image en accord avec le mouvement du casque de réalité virtuelle.

- -

La méthode {{domxref("HMDVRDevice.getEyeParameters()")}} retourne un objet {{domxref("VREyeParameters")}}, qui peut être utilisé pour obtenir l'information du champ de vision — combien le casque de réalité virtuel peut afficher de la scène. Le {{domxref("VREyeParameters.currentFieldOfView")}} retourne un objet {{domxref("VRFieldOfView")}} qui contient quatre angles décrivant le champ de vision actuel depuis le point central. Vous pouvez aussi changer le champ de vision en utilisant {{domxref("HMDVRDevice.setFieldOfView()")}}.

- -

Interfaces WebVR

- -
-
{{domxref("VRDisplay")}}
-
Représente un périphérique de réalité virtuelle supporté par cette API. Il inclut des informations générales comme les IDs et des descriptions de l'appareil, ainsi que des méthodes pour commencer à présenter une scène RV, récupérer les paramètres visuels, les capacités d'affichage et d'autres fonctionnalités importantes.
-
{{domxref("VRDisplayCapabilities")}}
-
Décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités du périphérique, par exemple peut-il retourner l'information de position.
-
{{domxref("VRPose")}}
-
Représente l'état de la position à un timecode donné (qui inclut l'orientation, la position, la vélocité et l'accélération).
-
{{domxref("VREyeParameters")}}
-
Donne accès à l'ensemble des informations requises pour faire le rendu d'une scène pour l'oeil indiqué, dont les informations de champ de vision.
-
{{domxref("VRFieldOfView")}}
-
Représente le champ de vision actuel définit par quatre angles décrivant la vue depuis le point central.
-
{{domxref("VRLayer")}}
-
Représente un calque d'un objet {{domxref("VRDisplay")}}.
-
{{domxref("VRStageParameters")}}
-
Représente les données décrivant l'espace physique disponible pour les périphériques de réalité virtuelle pouvant offrir une expérience dans une pièce réelle.
-
- -

Extensions à d'autres interfaces

- -
-
{{domxref("Gamepad.displayId")}} {{readonlyInline}}
-
Retourne l'ID {{domxref("VRDisplay.displayId")}} du périphérique {{domxref("VRDisplay")}} associé — l'appareil RV où la manette de jeu contrôle la scene affichée.
-
{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}
-
Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) qui sont actifs (quand {{domxref("VRDisplay.ispresenting")}} est à true).
-
{{domxref("Navigator.getVRDisplays()")}}
-
Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) disponibles qui sont connectés à l'ordinateur.
-
{{domxref("Window.onvrdisplayconnected")}}
-
Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été connecté à l'ordinateur (quand l'événement {{event("vrdisplayconnected")}} est déclenché).
-
{{domxref("Window.onvrdisplaydisconnected")}}
-
Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été déconnecté de l'ordinateur (quand l'événement {{event("vrdisplaydisconnected")}} est déclenché).
-
{{domxref("Window.onvrdisplaypresentchange")}}
-
Représente un gestionaire d'événements qui s'exécute lorsque l'état de présentation d'un appareil change — i.e. un changement de l'état "présente" à "ne présente pas", ou vice versa (quand l'événement {{event("onvrdisplaypresentchange")}} est déclenché).
-
- -

Examples

- -

Vous pouvez retrouver plusieurs exemples dans ces repos Github:

- - - -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR')}}{{Spec2('WebVR')}}Initial definition
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Navigator.getVRDisplays")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webvr_api/index.md b/files/fr/web/api/webvr_api/index.md new file mode 100644 index 0000000000..4d41a433a3 --- /dev/null +++ b/files/fr/web/api/webvr_api/index.md @@ -0,0 +1,99 @@ +--- +title: WebVR API +slug: Web/API/WebVR_API +translation_of: Web/API/WebVR_API +--- +
{{DefaultAPISidebar("WebVR API")}}{{Deprecated_Header}}
+ +

WebVR fournit un support pour les dispositifs de réalité virtuelle - par exemple pour les casques de réalité virtuelle comme l'Oculus Rift - aux applications Web, permettant aux développeurs de traduire les informations de position et de mouvement de l'appareil en mouvements autour d'une scène 3D. Cela a de nombreuses applications très intéressantes, des visites de produits virtuels aux applications de formation interactive en passant par des jeux en première personne dans un environnement immersif.

+ +

Concepts et usage

+ +

Croquis d'une personne assise sur une chaise et portant des lunettes portant la mention « Head mounted display (HMD) » faisant face à un moniteur avec une webcam portant la mention « Position sensor ».

+ +

Tous les périphériques de réalité virtuelle connectés à votre ordinateur seront donné grâce à la méthode {{domxref("Navigator.getVRDisplays()")}}. Cela retournera un tableau d'objets représentant les périphériques, qui auront l'héritage de l'objet {{domxref("VRDevice")}} — généralement un casque de réalité virtuelle renverra deux périphériques — le casque lui-même, représenté par {{domxref("HMDVRDevice")}}, et la caméra capteur de position qui suit la position de votre tête, représenté par {{domxref("PositionSensorVRDevice")}}.

+ +

L'objet {{domxref("PositionSensorVRDevice")}} contient la méthode {{domxref("PositionSensorVRDevice.getState","getState()")}}, qui retourne un objet {{domxref("VRPositionState")}} — cela représente l'état du capteur à un timecode donné, et inclus les propriétés avec des données utiles tel que la vélocité, l'accélération et l'orientation, utiles pour mettre à jour le rendu de la scène pour chaque image en accord avec le mouvement du casque de réalité virtuelle.

+ +

La méthode {{domxref("HMDVRDevice.getEyeParameters()")}} retourne un objet {{domxref("VREyeParameters")}}, qui peut être utilisé pour obtenir l'information du champ de vision — combien le casque de réalité virtuel peut afficher de la scène. Le {{domxref("VREyeParameters.currentFieldOfView")}} retourne un objet {{domxref("VRFieldOfView")}} qui contient quatre angles décrivant le champ de vision actuel depuis le point central. Vous pouvez aussi changer le champ de vision en utilisant {{domxref("HMDVRDevice.setFieldOfView()")}}.

+ +

Interfaces WebVR

+ +
+
{{domxref("VRDisplay")}}
+
Représente un périphérique de réalité virtuelle supporté par cette API. Il inclut des informations générales comme les IDs et des descriptions de l'appareil, ainsi que des méthodes pour commencer à présenter une scène RV, récupérer les paramètres visuels, les capacités d'affichage et d'autres fonctionnalités importantes.
+
{{domxref("VRDisplayCapabilities")}}
+
Décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités du périphérique, par exemple peut-il retourner l'information de position.
+
{{domxref("VRPose")}}
+
Représente l'état de la position à un timecode donné (qui inclut l'orientation, la position, la vélocité et l'accélération).
+
{{domxref("VREyeParameters")}}
+
Donne accès à l'ensemble des informations requises pour faire le rendu d'une scène pour l'oeil indiqué, dont les informations de champ de vision.
+
{{domxref("VRFieldOfView")}}
+
Représente le champ de vision actuel définit par quatre angles décrivant la vue depuis le point central.
+
{{domxref("VRLayer")}}
+
Représente un calque d'un objet {{domxref("VRDisplay")}}.
+
{{domxref("VRStageParameters")}}
+
Représente les données décrivant l'espace physique disponible pour les périphériques de réalité virtuelle pouvant offrir une expérience dans une pièce réelle.
+
+ +

Extensions à d'autres interfaces

+ +
+
{{domxref("Gamepad.displayId")}} {{readonlyInline}}
+
Retourne l'ID {{domxref("VRDisplay.displayId")}} du périphérique {{domxref("VRDisplay")}} associé — l'appareil RV où la manette de jeu contrôle la scene affichée.
+
{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}
+
Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) qui sont actifs (quand {{domxref("VRDisplay.ispresenting")}} est à true).
+
{{domxref("Navigator.getVRDisplays()")}}
+
Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) disponibles qui sont connectés à l'ordinateur.
+
{{domxref("Window.onvrdisplayconnected")}}
+
Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été connecté à l'ordinateur (quand l'événement {{event("vrdisplayconnected")}} est déclenché).
+
{{domxref("Window.onvrdisplaydisconnected")}}
+
Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été déconnecté de l'ordinateur (quand l'événement {{event("vrdisplaydisconnected")}} est déclenché).
+
{{domxref("Window.onvrdisplaypresentchange")}}
+
Représente un gestionaire d'événements qui s'exécute lorsque l'état de présentation d'un appareil change — i.e. un changement de l'état "présente" à "ne présente pas", ou vice versa (quand l'événement {{event("onvrdisplaypresentchange")}} est déclenché).
+
+ +

Examples

+ +

Vous pouvez retrouver plusieurs exemples dans ces repos Github:

+ + + +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR')}}{{Spec2('WebVR')}}Initial definition
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Navigator.getVRDisplays")}}

+ +

Voir aussi

+ + 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 deleted file mode 100644 index ac6babdad9..0000000000 --- a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html +++ /dev/null @@ -1,256 +0,0 @@ ---- -title: Utiliser des contrôleurs de réalité virtuelle pour du WebVR -slug: Web/API/WebVR_API/Using_VR_controllers_with_WebVR -translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR -original_slug: Web/API/WebVR_API/Utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_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 :

- - - -

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:

- - - -

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

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/using_vr_controllers_with_webvr/index.md b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md new file mode 100644 index 0000000000..ac6babdad9 --- /dev/null +++ b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md @@ -0,0 +1,256 @@ +--- +title: Utiliser des contrôleurs de réalité virtuelle pour du WebVR +slug: Web/API/WebVR_API/Using_VR_controllers_with_WebVR +translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR +original_slug: Web/API/WebVR_API/Utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_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 :

+ + + +

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:

+ + + +

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

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/webvtt_api/index.html b/files/fr/web/api/webvtt_api/index.html deleted file mode 100644 index 43a0d9ba78..0000000000 --- a/files/fr/web/api/webvtt_api/index.html +++ /dev/null @@ -1,842 +0,0 @@ ---- -title: Web Video Text Tracks Format (WebVTT) -slug: Web/API/WebVTT_API -translation_of: Web/API/WebVTT_API ---- -
{{DefaultAPISidebar("WebVTT")}}
- -

Web Video Text Tracks Format (WebVTT) est un format pour afficher du texte en fonction du temps (comme des sous-titres ou des légendes) en utilisant l'élément HTML {{HTMLElement("track")}}. L'objectif de ce format est d'afficher du texte sur {{HTMLElement("video")}}.

- -

WebVTT est un format texte codé en {{Glossary("UTF-8")}}. On peut utiliser aussi bien des espaces que des tabulations. Il y a aussi une petite API capable de représenter et de modifier ces pistes ainsi que les données nécéssaires à la synchornisation du texte.

- -

Les fichiers WebVTT

- -

Les fichiers WebVTT ont pour type MIME text/vtt.

- -

Un fichier WebVTT (.vtt) contient les répliques qui peuvent être sur une ou plusieurs lignes.

- -
WEBVTT
-
-00:01.000 --> 00:04.000
-Ne jamais boire de l'azote liquide.
-
-00:05.000 --> 00:09.000
-- Cela peut perforer l'estomac.
-- On peut en mourir.
-
- -

Le corps WebVTT

- -

La structure d'un fichier WebVTT consiste en une série de composants, certains d'entre-eux sont optionnels. Dans l'ordre:

- - - -
Exemple 1 - Plus petit fichier WebVTT
- -
WEBVTT
-
- -
Exemple 2 - Simple fichier WebVTT contenant un entête
- -
WEBVTT - Ce fichier ne possède pas de réplique.
- -
Exemple 3 - Fichier WebVTT courant avec un entête et des répliques
- -
WEBVTT - Ce fichier possède des répliques.
-
-14
-00:01:14.815 --> 00:01:18.114
-- Quoi?
-- Où sommes-nous?
-
-15
-00:01:18.171 --> 00:01:20.991
-- C'est le pays des grandes chauves-souris.
-
-16
-00:01:21.058 --> 00:01:23.868
-- [ Cris perçant de chauves-souris ]
-- Elles ne veulent pas aller dans vos cheveux. Elles attrapent les insectes.
-
- -

Structure interne d'un fichier WebVTT

- -

Réexaminons le premier exemple, et observons la structure plus précisément.

- -
WEBVTT
-
-00:01.000 --> 00:04.000
-Ne jamais boire de l'azote liquide.
-
-00:05.000 --> 00:09.000
-- Cela peut perforer l'estomac.
-- On peut en mourir.
-
-NOTE Cette ligne est la dernière ligne du fichier
-
- -

Dans chaque réplique:

- - - -

Nous pouvons aussi mettre des commentaires dans notre fichier .vtt afin de nous aider à nous remémorer des informations importantes à propos du fichier. Ils doivent être séparés par une ligne vide et commencer par NOTE. Nous en reparlerons dans la prochaine section.

- -

Il est important de ne pas utiliser de ligne vide sans réplique, par exemple entre la ligne indiquant le temps et le texte en lui même. WebVTT est basé sur les lignes, une ligne vide ferme la réplique.

- -

Les commentaires WebVTT

- -

Les commentaires sont des composants optionels qui peuvent être utilisés pour ajouter des informations à un fichier WebVTT. Les commentaires sont prévus pour ceux qui liront le fichier, ils ne seront pas vus par les utilisateurs. Les commentaires peuvent contenir de nouvelles ligne mais ne peuvent pas contenir de ligne vide ce qui équivaut à deux nouvelles lignes. Une ligne vide correspond à la fin d'un commentaire.

- -

Un  commentaire ne peut contenir la chaîne "-->", l'esperluette & ou bien le symbole plus-petit que <. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme &amp;pour l'esperluette et &lt; pour le plus petit que. Il est aussi recommandé &gt; pour le plus grand que, afin d'éviter toutes confusions.

- -

Un commentaire est constitué de ces trois composants:

- - - -
Exemple 4 - Simple commentaire WebVTT
- -
NOTE Ceci est un simple commentaire
- -
Exemple 5 - Multi-line comment
- -
NOTE
-Un autre commentaire qui est
-coupé sur plusieurs lignes.
-
-NOTE Vous pouvez aussi faire un commentaire
-sur plusieurs lignes de cette façon.
-
- -
Exemple 6 - Usage commun des commentaires
- -
WEBVTT - Traduction de ce film que j'aime
-
-NOTE
-Cette traduction a été faite par Kyle pour que
-ses amis puissent la voir avec leurs parents.
-
-1
-00:02:15.000 --> 00:02:20.000
-- Ta en kopp varmt te.
-- Det är inte varmt.
-
-2
-00:02:20.000 --> 00:02:25.000
-- Har en kopp te.
-- Det smakar som te.
-
-NOTE Cette dernière ligne n'est pas forcément bien traduite.
-
-3
-00:02:25.000 --> 00:02:30.000
-- Ta en kopp
-
- -

Styliser les répliques WebTT

- -

Vous pouvez styliser des répliques WebVTT en cherchant les éléments qui correspondent à la pseudo-classe {{cssxref("::cue")}}.

- -

Avec du CSS

- -
video::cue {
-  background-image: linear-gradient(to bottom, dimgray, lightgray);
-  color: papayawhip;
-}
-
-video::cue(b) {
-  color: peachpuff;
-}
-
- -

Here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip". In addition, text boldfaced using the {{HTMLElement("b")}} element are colored "peachpuff".

- -

The HTML snippet below actually handles displaying the media itself.

- -
<video controls autoplay src="video.webm">
- <track default src="track.vtt">
-</video>
-
- -

Within the WebVTT file itself

- -

You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string "STYLE" all by itelf on a line of text, as shown below:

- -
WEBVTT
-
-STYLE
-::cue {
-  background-image: linear-gradient(to bottom, dimgray, lightgray);
-  color: papayawhip;
-}
-/* Style blocks cannot use blank lines nor "dash dash greater than" */
-
-NOTE comment blocks can be used between style blocks.
-
-STYLE
-::cue(b) {
-  color: peachpuff;
-}
-
-00:00:00.000 --> 00:00:10.000
-- Hello <b>world</b>.
-
-NOTE style blocks cannot appear after the first cue.
- -

We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:

- -
WEBVTT
-
-1
-00:00.000 --> 00:02.000
-That’s an, an, that’s an L!
-
-crédit de transcription
-00:04.000 --> 00:05.000
-Transcrit par Célestes™
-
- -
::cue(#\31) { color: lime; }
-::cue(#crédit\ de\ transcription) { color: red; }
- -

Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):

- -
WEBVTT
-
-00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
-Where did he go?
-
-00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
-I think he went down this lane.
-
-00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
-What are you waiting for?
- -

WebVTT cues

- -

A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:

- - - -
Example 7 - Example of a cue
- -
1 - Title Crawl
-00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
-Some time ago in a place rather distant....
- -

Cue identifier

- -

The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "-->". It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).

- -
Example 8 - Cue identifier from Example 7
- -
1 - Title Crawl
- -
Example 9 - Common usage of identifiers
- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --> 00:00:34.074
-This is the second.
-
-3
-00:00:34.159 --> 00:00:35.743
-Third
-
- -

Cue timings

- -

A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.

- -

If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is chapters) then the file cannot have overlapping timings.

- -

Each cue timing contains five components:

- - - -

The timestamps must be in one of two formats:

- - - -

Where the components are defined as follows:

- - - -
Example 10 - Basic cue timing examples
- -
00:00:22.230 --> 00:00:24.606
-00:00:30.739 --> 00:00:34.074
-00:00:34.159 --> 00:00:35.743
-00:00:35.827 --> 00:00:40.122
- -
Example 11 - Overlapping cue timing examples
- -
00:00:00.000 --> 00:00:10.000
-00:00:05.000 --> 00:01:00.000
-00:00:30.000 --> 00:00:50.000
- -
Example 12 - Non-overlapping cue timing examples
- -
00:00:00.000 --> 00:00:10.000
-00:00:10.000 --> 00:01:00.581
-00:01:00.581 --> 00:02:00.100
-00:02:01.000 --> 00:02:01.000
- -

Cue settings

- -

Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.

- -

The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:

- - - -
Example 13 - Cue setting examples
- -

The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.

- -
00:00:05.000 --> 00:00:10.000
-00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
-00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
-00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
-
- -

Cue payload

- -

The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.

- -

A cue text payload cannot contain the string "-->", the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.

- -

In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 6 - Escape sequences
NameCharacterEscape Sequence
Ampersand&&amp;
Less-than<&lt;
Greater-than>&gt;
Left-to-right mark&lrm;
Right-to-left mark&rlm;
Non-breaking space &nbsp;
- -

Cue payload text tags

- -

There are a number of tags, such as <bold>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is chapters then you cannot use tags.

- - - -

The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).

- - - -

Methods and properties

- -

The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:

- - - -

Tutorial on how to write a WebVTT file

- -

There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:

- -
    -
  1. Open a notepad.
    2. -
  2. The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:
    3. -
- -
WEBVTT
- -

Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:

- -
00:01.000 --> 00:05.000
- -
    -
  1. On the next line you can write the caption for this cue which will run from the first second to the fifth second, inclusive.
    2. -
  2. Following the similar steps, a complete WebVTT file for specific video or audio file can be made.
    3. -
- -

CSS pseudo-classes

- -

CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.

- -

It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:

- -
WEBVTT
-
-04:02.500 --> 04:05.000
-J’ai commencé le basket à l'âge de 13, 14 ans
-
-04:05.001 --> 04:07.800
-Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
- -

In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <i> tag is for italics.

- -

The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:

- - - -

Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.

- -

Specifications

- - - - - - - - - - -
Specification
WebVTT: The Web Video Text Tracks Format
- -

Browser compatibility

- -

VTTCue interface

- -

{{Compat("api.VTTCue", 0)}}

- -

TextTrack interface

- -

{{Compat("api.TextTrack", 0)}}

- -

Notes

- -

Prior to Firefox 50, the AlignSetting enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value "middle" instead of "center". This has been corrected.

- -

WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to true. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to false.

- -

Prior to Firefox 58, the REGION keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports VTTRegion and its use; however, this feature is disabled by default behind the preference media.webvtt.regions.enabled; set it to true to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).

diff --git a/files/fr/web/api/webvtt_api/index.md b/files/fr/web/api/webvtt_api/index.md new file mode 100644 index 0000000000..43a0d9ba78 --- /dev/null +++ b/files/fr/web/api/webvtt_api/index.md @@ -0,0 +1,842 @@ +--- +title: Web Video Text Tracks Format (WebVTT) +slug: Web/API/WebVTT_API +translation_of: Web/API/WebVTT_API +--- +
{{DefaultAPISidebar("WebVTT")}}
+ +

Web Video Text Tracks Format (WebVTT) est un format pour afficher du texte en fonction du temps (comme des sous-titres ou des légendes) en utilisant l'élément HTML {{HTMLElement("track")}}. L'objectif de ce format est d'afficher du texte sur {{HTMLElement("video")}}.

+ +

WebVTT est un format texte codé en {{Glossary("UTF-8")}}. On peut utiliser aussi bien des espaces que des tabulations. Il y a aussi une petite API capable de représenter et de modifier ces pistes ainsi que les données nécéssaires à la synchornisation du texte.

+ +

Les fichiers WebVTT

+ +

Les fichiers WebVTT ont pour type MIME text/vtt.

+ +

Un fichier WebVTT (.vtt) contient les répliques qui peuvent être sur une ou plusieurs lignes.

+ +
WEBVTT
+
+00:01.000 --> 00:04.000
+Ne jamais boire de l'azote liquide.
+
+00:05.000 --> 00:09.000
+- Cela peut perforer l'estomac.
+- On peut en mourir.
+
+ +

Le corps WebVTT

+ +

La structure d'un fichier WebVTT consiste en une série de composants, certains d'entre-eux sont optionnels. Dans l'ordre:

+ + + +
Exemple 1 - Plus petit fichier WebVTT
+ +
WEBVTT
+
+ +
Exemple 2 - Simple fichier WebVTT contenant un entête
+ +
WEBVTT - Ce fichier ne possède pas de réplique.
+ +
Exemple 3 - Fichier WebVTT courant avec un entête et des répliques
+ +
WEBVTT - Ce fichier possède des répliques.
+
+14
+00:01:14.815 --> 00:01:18.114
+- Quoi?
+- Où sommes-nous?
+
+15
+00:01:18.171 --> 00:01:20.991
+- C'est le pays des grandes chauves-souris.
+
+16
+00:01:21.058 --> 00:01:23.868
+- [ Cris perçant de chauves-souris ]
+- Elles ne veulent pas aller dans vos cheveux. Elles attrapent les insectes.
+
+ +

Structure interne d'un fichier WebVTT

+ +

Réexaminons le premier exemple, et observons la structure plus précisément.

+ +
WEBVTT
+
+00:01.000 --> 00:04.000
+Ne jamais boire de l'azote liquide.
+
+00:05.000 --> 00:09.000
+- Cela peut perforer l'estomac.
+- On peut en mourir.
+
+NOTE Cette ligne est la dernière ligne du fichier
+
+ +

Dans chaque réplique:

+ + + +

Nous pouvons aussi mettre des commentaires dans notre fichier .vtt afin de nous aider à nous remémorer des informations importantes à propos du fichier. Ils doivent être séparés par une ligne vide et commencer par NOTE. Nous en reparlerons dans la prochaine section.

+ +

Il est important de ne pas utiliser de ligne vide sans réplique, par exemple entre la ligne indiquant le temps et le texte en lui même. WebVTT est basé sur les lignes, une ligne vide ferme la réplique.

+ +

Les commentaires WebVTT

+ +

Les commentaires sont des composants optionels qui peuvent être utilisés pour ajouter des informations à un fichier WebVTT. Les commentaires sont prévus pour ceux qui liront le fichier, ils ne seront pas vus par les utilisateurs. Les commentaires peuvent contenir de nouvelles ligne mais ne peuvent pas contenir de ligne vide ce qui équivaut à deux nouvelles lignes. Une ligne vide correspond à la fin d'un commentaire.

+ +

Un  commentaire ne peut contenir la chaîne "-->", l'esperluette & ou bien le symbole plus-petit que <. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme &amp;pour l'esperluette et &lt; pour le plus petit que. Il est aussi recommandé &gt; pour le plus grand que, afin d'éviter toutes confusions.

+ +

Un commentaire est constitué de ces trois composants:

+ + + +
Exemple 4 - Simple commentaire WebVTT
+ +
NOTE Ceci est un simple commentaire
+ +
Exemple 5 - Multi-line comment
+ +
NOTE
+Un autre commentaire qui est
+coupé sur plusieurs lignes.
+
+NOTE Vous pouvez aussi faire un commentaire
+sur plusieurs lignes de cette façon.
+
+ +
Exemple 6 - Usage commun des commentaires
+ +
WEBVTT - Traduction de ce film que j'aime
+
+NOTE
+Cette traduction a été faite par Kyle pour que
+ses amis puissent la voir avec leurs parents.
+
+1
+00:02:15.000 --> 00:02:20.000
+- Ta en kopp varmt te.
+- Det är inte varmt.
+
+2
+00:02:20.000 --> 00:02:25.000
+- Har en kopp te.
+- Det smakar som te.
+
+NOTE Cette dernière ligne n'est pas forcément bien traduite.
+
+3
+00:02:25.000 --> 00:02:30.000
+- Ta en kopp
+
+ +

Styliser les répliques WebTT

+ +

Vous pouvez styliser des répliques WebVTT en cherchant les éléments qui correspondent à la pseudo-classe {{cssxref("::cue")}}.

+ +

Avec du CSS

+ +
video::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+
+video::cue(b) {
+  color: peachpuff;
+}
+
+ +

Here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip". In addition, text boldfaced using the {{HTMLElement("b")}} element are colored "peachpuff".

+ +

The HTML snippet below actually handles displaying the media itself.

+ +
<video controls autoplay src="video.webm">
+ <track default src="track.vtt">
+</video>
+
+ +

Within the WebVTT file itself

+ +

You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string "STYLE" all by itelf on a line of text, as shown below:

+ +
WEBVTT
+
+STYLE
+::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+/* Style blocks cannot use blank lines nor "dash dash greater than" */
+
+NOTE comment blocks can be used between style blocks.
+
+STYLE
+::cue(b) {
+  color: peachpuff;
+}
+
+00:00:00.000 --> 00:00:10.000
+- Hello <b>world</b>.
+
+NOTE style blocks cannot appear after the first cue.
+ +

We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:

+ +
WEBVTT
+
+1
+00:00.000 --> 00:02.000
+That’s an, an, that’s an L!
+
+crédit de transcription
+00:04.000 --> 00:05.000
+Transcrit par Célestes™
+
+ +
::cue(#\31) { color: lime; }
+::cue(#crédit\ de\ transcription) { color: red; }
+ +

Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):

+ +
WEBVTT
+
+00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
+Where did he go?
+
+00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?
+ +

WebVTT cues

+ +

A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:

+ + + +
Example 7 - Example of a cue
+ +
1 - Title Crawl
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....
+ +

Cue identifier

+ +

The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "-->". It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).

+ +
Example 8 - Cue identifier from Example 7
+ +
1 - Title Crawl
+ +
Example 9 - Common usage of identifiers
+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+3
+00:00:34.159 --> 00:00:35.743
+Third
+
+ +

Cue timings

+ +

A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.

+ +

If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is chapters) then the file cannot have overlapping timings.

+ +

Each cue timing contains five components:

+ + + +

The timestamps must be in one of two formats:

+ + + +

Where the components are defined as follows:

+ + + +
Example 10 - Basic cue timing examples
+ +
00:00:22.230 --> 00:00:24.606
+00:00:30.739 --> 00:00:34.074
+00:00:34.159 --> 00:00:35.743
+00:00:35.827 --> 00:00:40.122
+ +
Example 11 - Overlapping cue timing examples
+ +
00:00:00.000 --> 00:00:10.000
+00:00:05.000 --> 00:01:00.000
+00:00:30.000 --> 00:00:50.000
+ +
Example 12 - Non-overlapping cue timing examples
+ +
00:00:00.000 --> 00:00:10.000
+00:00:10.000 --> 00:01:00.581
+00:01:00.581 --> 00:02:00.100
+00:02:01.000 --> 00:02:01.000
+ +

Cue settings

+ +

Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.

+ +

The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:

+ + + +
Example 13 - Cue setting examples
+ +

The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.

+ +
00:00:05.000 --> 00:00:10.000
+00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
+
+ +

Cue payload

+ +

The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.

+ +

A cue text payload cannot contain the string "-->", the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.

+ +

In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 6 - Escape sequences
NameCharacterEscape Sequence
Ampersand&&amp;
Less-than<&lt;
Greater-than>&gt;
Left-to-right mark&lrm;
Right-to-left mark&rlm;
Non-breaking space &nbsp;
+ +

Cue payload text tags

+ +

There are a number of tags, such as <bold>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is chapters then you cannot use tags.

+ + + +

The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).

+ + + +

Methods and properties

+ +

The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:

+ + + +

Tutorial on how to write a WebVTT file

+ +

There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:

+ +
    +
  1. Open a notepad.
    2. +
  2. The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:
    3. +
+ +
WEBVTT
+ +

Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:

+ +
00:01.000 --> 00:05.000
+ +
    +
  1. On the next line you can write the caption for this cue which will run from the first second to the fifth second, inclusive.
    2. +
  2. Following the similar steps, a complete WebVTT file for specific video or audio file can be made.
    3. +
+ +

CSS pseudo-classes

+ +

CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.

+ +

It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:

+ +
WEBVTT
+
+04:02.500 --> 04:05.000
+J’ai commencé le basket à l'âge de 13, 14 ans
+
+04:05.001 --> 04:07.800
+Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
+ +

In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <i> tag is for italics.

+ +

The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:

+ + + +

Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.

+ +

Specifications

+ + + + + + + + + + +
Specification
WebVTT: The Web Video Text Tracks Format
+ +

Browser compatibility

+ +

VTTCue interface

+ +

{{Compat("api.VTTCue", 0)}}

+ +

TextTrack interface

+ +

{{Compat("api.TextTrack", 0)}}

+ +

Notes

+ +

Prior to Firefox 50, the AlignSetting enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value "middle" instead of "center". This has been corrected.

+ +

WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to true. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to false.

+ +

Prior to Firefox 58, the REGION keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports VTTRegion and its use; however, this feature is disabled by default behind the preference media.webvtt.regions.enabled; set it to true to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).

diff --git a/files/fr/web/api/webxr_device_api/index.html b/files/fr/web/api/webxr_device_api/index.html deleted file mode 100644 index 86781da1b7..0000000000 --- a/files/fr/web/api/webxr_device_api/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: L'API de périphérique WebXR -slug: Web/API/WebXR_Device_API -tags: - - API - - AR - - Réalité augmentée - - Réalité virtuelle - - VR - - WebXR - - WebXR API -translation_of: Web/API/WebXR_Device_API ---- -

{{DefaultAPISidebar("WebXR Device API")}}

- -

WebXR est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (Réalité Virtuelle, ou VR), ou pour ajouter des contenus graphiques dans le monde réel, (Réalité Augmentée, ou AR).

- -

L'API de périphérique WebXR implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée.

- -

Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur.

- -

Pour accomplir toutes ces choses, l'API de périphériques WebXR fournit les fonctionnalités clés suivantes:

- - - -

Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié.

- -

Les concepts et l'utilisation des périphériques WebXR

- -

Alors que l'ancienne WebVR API avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality.

- -

Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe.

- -

L'équipement peut également inclure un accéléromètre, un baromètre, ou d'autres capteurs qui sont utilisés pour détecter lorsque l'utilisateur se déplace dans l'espace, tourne sa tête, ou similaires.

- -

Accéder à l'API WebXR

- -

Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée.

- -
-
{{domxref("navigator.xr")}} {{ReadOnlyInline}}
-
Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet  {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou null, WebXR n'est pas disponible.
-
- -

Les interfaces WebXR

- -
-
{{DOMxRef("XRSystem")}}
-
La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface XRSystem, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles.
-
{{DOMxRef("XRFrame")}}
-
Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une XRFrame. Pour obtenir un XRFrame, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le XRFrame une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi XRFrame pour contenir ces informations.
-
{{DOMxRef("XRRenderState")}}
-
Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une XRSession sont composées.
-
{{DOMxRef("XRSession")}}
-
Fournit l'interface pour interagir avec le matériel XR. Une fois que la XRSession est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur.
-
{{DOMxRef("XRSpace")}}
-
XRSpace est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un XRSpace particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée.
-
{{DOMxRef("XRReferenceSpace")}}
-
Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées XRReferenceSpace devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions.
-
{{DOMxRef("XRBoundedReferenceSpace")}}
-
XRBoundedReferenceSpace étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à XRReferenceSpace, l'origine doit être localisée au niveau du sol (c'est à dire y = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface.
-
{{DOMxRef("XRView")}}
-
Représente une vue unique dans la scène XR pour une image particulière. Chaque XRView correspond à la surface d'affichage vidéo utilisée pour présenter la scène à l'utilisateur. Par exemple, un appareil XR donné peut avoir deux vues: une pour l'œil gauche et une pour la droite. Chaque vue a un décalage utilisé pour déplacer la position de la vue par rapport à la caméra, afin de permettre la création d'effets stéréographiques.
-
{{DOMxRef("XRViewport")}}
-
Décrit un viewport. Un viewport est une partie rectangulaire d'une surface graphique. Dans WebXR, un viewport représente la zone d'une surface de dessin correspondant à un {{domxref ("XRView")}} particulier, tel que la partie de l'image tampon WebGL utilisée pour rendre l'une des perspectives des deux yeux sur la scène.
-
{{DOMxRef("XRRigidTransform")}}
-
Une transformation définie en utilisant une position et une orientation dans le système de coordonnées de l'espace virtuel comme décrit par le {{domxref ("XRSpace")}}.
-
{{DOMxRef("XRPose")}}
-
Décrit une position et une orientation dans l'espace par rapport à un {{domxref ("XRSpace")}}.
-
{{DOMxRef("XRViewerPose")}}
-
Basé sur {{domxref("XRPose")}}, XRViewerPose spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs.
-
{{DOMxRef("XRInputSource")}}
-
Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances XRInputSource.
-
{{DOMxRef("XRWebGLLayer")}}
-
Une couche qui sert de tampon d'image WebGL dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique.
-
- -

Interfaces événementielles

- -

Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR.

- -
-
{{domxref("XRInputSourceEvent")}}
-
Envoyé lorsque l'état d'un {{domxref ("XRInputSource")}} change. Cela peut se produire, par exemple, lorsque la position et/ou l'orientation de l'appareil change, ou lorsque des boutons sont enfoncés ou relâchés.
-
{{domxref("XRInputSourcesChangeEvent")}}
-
Envoyé pour indiquer que l'ensemble des sources d'entrée disponibles a changé pour le {{domxref ("XRSession")}}.
-
{{domxref("XRReferenceSpaceEvent")}}
-
Envoyé lorsque l'état d'un {{domxref ("XRReferenceSpace")}} change.
-
{{domxref("XRSessionEvent")}}
-
Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. Par exemple, si la position et/ou l'orientation
-
- -

Extensions de l'API WebGL

- -

L'API WebGL est étendue par la spécification WebXR pour augmenter le contexte WebGL afin de lui permettre d'être utilisée pour afficher des vues dans un périphérique WebXR.

- -
-
{{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}
-
Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur true, vous devez appeler makeXRCompatible() avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR.
-
- -

Guides et tutoriels

- -

Les guides et didacticiels suivants sont une excellente ressource pour apprendre à comprendre WebXR et les concepts graphiques 3D/VR/AR sous-jacents.

- -

Les bases

- -
-
Fundamentals of WebXR
-
Avant de plonger dans les détails de la création de contenu à l'aide de WebXR, il peut être utile de lire cet aperçu de la technologie, qui comprend des introductions à une terminologie qui peut ne pas vous être familière ou qui peut être utilisée d'une nouvelle manière.
-
Matrix math for the web
-
Un guide expliquant comment les matrices peuvent être utilisées sur le Web, y compris pour les transformations CSS et à des fins WebGL, ainsi que pour gérer le positionnement et l'orientation des objets dans des contextes WebXR.
-
WebXR application life cycle
-
An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.Un aperçu du cycle de vie global d'une application WebXR, du démarrage à l'arrêt. Cet article sert d'introduction aux bases de ce qu'implique la création d'une expérience WebXR sans plonger dans le code en détail. C'est un bon moyen de se préparer aux prochaines étapes.
-
- -

Créer une expérience de réalité mixte

- -
-
Starting up and shutting down a WebXR session
-
Avant de présenter une scène à l'aide d'un appareil XR tel qu'un casque ou des lunettes, vous avez besoin de créer une session WebXR liée à une couche de rendu qui dessine la scène pour la présentation dans chacun des écrans de l'appareil XR pour que l'effet 3D puisse être présenté à l'utilisateur. Ce guide explique comment créer et arrêter des sessions WebXR.
-
Geometry and reference spaces in WebXR
-
Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation.
-
Spatial tracking in WebXR
-
Ce guide décrit comment les objets—incluant le corps de l'utilisateur et ses parties—sont situés dans l'espace, et comment leur mouvement et leur orientation les uns par rapport aux autres sont surveillés et gérés au fil du temps. Cet article explique la relation entre les espaces, les poses/attitudes, les spectateurs et les vues.
-
Rendering and the WebXR frame animation callback
-
En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux.
-
Viewpoints and viewers: Simulating cameras in WebXR
-
 through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas.
-
Lighting a WebXR setting
-
Le rendu WebXR étant basé sur WebGL, les mêmes techniques d'éclairage utilisées pour toute application 3D sont appliquées aux scènes WebXR. Cependant, il existe des problèmes spécifiques à la création de paramètres de réalité augmentée et virtuelle qui doivent être pris en compte lors de l'écriture de votre code d'éclairage. Cet article traite de ces problèmes.
-
Using bounded reference spaces
-
Dans cet article, nous examinons comment utiliser un espace de référence bounded-floor pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le bounded-floor peut être un outil utile dans votre répertoire.
-
- -

Rendre interactif

- -
-
Movement, orientation, and motion: A WebXR example
-
Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris.
-
Inputs and input sources
-
Un guide sur les sources d'entrée et comment gérer efficacement les périphériques d'entrée utilisés pour contrôler la session WebXR, et comment recevoir et traiter les entrées utilisateur de ces périphériques.
-
Targeting and hit detection
-
Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées.
-
Using WebXR input profiles
-
Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le WebXR Input Profiles Registry, qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur.
-
Supporting advanced controllers and gamepads in WebXR applications
-
WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques.
-
- -

Performance and sécurité

- -
-
WebXR performance guide
-
Recommandations et astuces pour vous aider à optimiser les performances de votre application WebXR.
-
Permissions and security for WebXR
-
L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer.
-
- -

Inclure d'autres médias

- -
-
Positional audio in a 3D environment
-
Dans les environnements 3D, qui peuvent être soit des scènes 3D rendues à l'écran, soit une expérience de réalité mixte expérimentée à l'aide d'un casque, il est important que l'audio soit exécuté de sorte qu'il semble provenir de la direction de sa source. Ce guide explique comment y parvenir.
-
Playing video in a 3D environment
-
Dans ce guide, nous examinons comment lire une vidéo dans une scène 3D. Cette technique peut être utilisée à la fois dans des applications WebGL standard présentées sur un écran plat d'ordinateur, ou dans un environnement de réalité virtuelle ou augmentée généré par WebXR.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName("WebXR")}}{{Spec2("WebXR")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Navigator.xr")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/webxr_device_api/index.md b/files/fr/web/api/webxr_device_api/index.md new file mode 100644 index 0000000000..86781da1b7 --- /dev/null +++ b/files/fr/web/api/webxr_device_api/index.md @@ -0,0 +1,203 @@ +--- +title: L'API de périphérique WebXR +slug: Web/API/WebXR_Device_API +tags: + - API + - AR + - Réalité augmentée + - Réalité virtuelle + - VR + - WebXR + - WebXR API +translation_of: Web/API/WebXR_Device_API +--- +

{{DefaultAPISidebar("WebXR Device API")}}

+ +

WebXR est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (Réalité Virtuelle, ou VR), ou pour ajouter des contenus graphiques dans le monde réel, (Réalité Augmentée, ou AR).

+ +

L'API de périphérique WebXR implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée.

+ +

Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur.

+ +

Pour accomplir toutes ces choses, l'API de périphériques WebXR fournit les fonctionnalités clés suivantes:

+ + + +

Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié.

+ +

Les concepts et l'utilisation des périphériques WebXR

+ +

Alors que l'ancienne WebVR API avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality.

+ +

Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe.

+ +

L'équipement peut également inclure un accéléromètre, un baromètre, ou d'autres capteurs qui sont utilisés pour détecter lorsque l'utilisateur se déplace dans l'espace, tourne sa tête, ou similaires.

+ +

Accéder à l'API WebXR

+ +

Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée.

+ +
+
{{domxref("navigator.xr")}} {{ReadOnlyInline}}
+
Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet  {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou null, WebXR n'est pas disponible.
+
+ +

Les interfaces WebXR

+ +
+
{{DOMxRef("XRSystem")}}
+
La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface XRSystem, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles.
+
{{DOMxRef("XRFrame")}}
+
Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une XRFrame. Pour obtenir un XRFrame, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le XRFrame une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi XRFrame pour contenir ces informations.
+
{{DOMxRef("XRRenderState")}}
+
Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une XRSession sont composées.
+
{{DOMxRef("XRSession")}}
+
Fournit l'interface pour interagir avec le matériel XR. Une fois que la XRSession est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur.
+
{{DOMxRef("XRSpace")}}
+
XRSpace est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un XRSpace particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée.
+
{{DOMxRef("XRReferenceSpace")}}
+
Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées XRReferenceSpace devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions.
+
{{DOMxRef("XRBoundedReferenceSpace")}}
+
XRBoundedReferenceSpace étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à XRReferenceSpace, l'origine doit être localisée au niveau du sol (c'est à dire y = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface.
+
{{DOMxRef("XRView")}}
+
Représente une vue unique dans la scène XR pour une image particulière. Chaque XRView correspond à la surface d'affichage vidéo utilisée pour présenter la scène à l'utilisateur. Par exemple, un appareil XR donné peut avoir deux vues: une pour l'œil gauche et une pour la droite. Chaque vue a un décalage utilisé pour déplacer la position de la vue par rapport à la caméra, afin de permettre la création d'effets stéréographiques.
+
{{DOMxRef("XRViewport")}}
+
Décrit un viewport. Un viewport est une partie rectangulaire d'une surface graphique. Dans WebXR, un viewport représente la zone d'une surface de dessin correspondant à un {{domxref ("XRView")}} particulier, tel que la partie de l'image tampon WebGL utilisée pour rendre l'une des perspectives des deux yeux sur la scène.
+
{{DOMxRef("XRRigidTransform")}}
+
Une transformation définie en utilisant une position et une orientation dans le système de coordonnées de l'espace virtuel comme décrit par le {{domxref ("XRSpace")}}.
+
{{DOMxRef("XRPose")}}
+
Décrit une position et une orientation dans l'espace par rapport à un {{domxref ("XRSpace")}}.
+
{{DOMxRef("XRViewerPose")}}
+
Basé sur {{domxref("XRPose")}}, XRViewerPose spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs.
+
{{DOMxRef("XRInputSource")}}
+
Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances XRInputSource.
+
{{DOMxRef("XRWebGLLayer")}}
+
Une couche qui sert de tampon d'image WebGL dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique.
+
+ +

Interfaces événementielles

+ +

Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR.

+ +
+
{{domxref("XRInputSourceEvent")}}
+
Envoyé lorsque l'état d'un {{domxref ("XRInputSource")}} change. Cela peut se produire, par exemple, lorsque la position et/ou l'orientation de l'appareil change, ou lorsque des boutons sont enfoncés ou relâchés.
+
{{domxref("XRInputSourcesChangeEvent")}}
+
Envoyé pour indiquer que l'ensemble des sources d'entrée disponibles a changé pour le {{domxref ("XRSession")}}.
+
{{domxref("XRReferenceSpaceEvent")}}
+
Envoyé lorsque l'état d'un {{domxref ("XRReferenceSpace")}} change.
+
{{domxref("XRSessionEvent")}}
+
Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. Par exemple, si la position et/ou l'orientation
+
+ +

Extensions de l'API WebGL

+ +

L'API WebGL est étendue par la spécification WebXR pour augmenter le contexte WebGL afin de lui permettre d'être utilisée pour afficher des vues dans un périphérique WebXR.

+ +
+
{{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}
+
Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur true, vous devez appeler makeXRCompatible() avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR.
+
+ +

Guides et tutoriels

+ +

Les guides et didacticiels suivants sont une excellente ressource pour apprendre à comprendre WebXR et les concepts graphiques 3D/VR/AR sous-jacents.

+ +

Les bases

+ +
+
Fundamentals of WebXR
+
Avant de plonger dans les détails de la création de contenu à l'aide de WebXR, il peut être utile de lire cet aperçu de la technologie, qui comprend des introductions à une terminologie qui peut ne pas vous être familière ou qui peut être utilisée d'une nouvelle manière.
+
Matrix math for the web
+
Un guide expliquant comment les matrices peuvent être utilisées sur le Web, y compris pour les transformations CSS et à des fins WebGL, ainsi que pour gérer le positionnement et l'orientation des objets dans des contextes WebXR.
+
WebXR application life cycle
+
An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.Un aperçu du cycle de vie global d'une application WebXR, du démarrage à l'arrêt. Cet article sert d'introduction aux bases de ce qu'implique la création d'une expérience WebXR sans plonger dans le code en détail. C'est un bon moyen de se préparer aux prochaines étapes.
+
+ +

Créer une expérience de réalité mixte

+ +
+
Starting up and shutting down a WebXR session
+
Avant de présenter une scène à l'aide d'un appareil XR tel qu'un casque ou des lunettes, vous avez besoin de créer une session WebXR liée à une couche de rendu qui dessine la scène pour la présentation dans chacun des écrans de l'appareil XR pour que l'effet 3D puisse être présenté à l'utilisateur. Ce guide explique comment créer et arrêter des sessions WebXR.
+
Geometry and reference spaces in WebXR
+
Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation.
+
Spatial tracking in WebXR
+
Ce guide décrit comment les objets—incluant le corps de l'utilisateur et ses parties—sont situés dans l'espace, et comment leur mouvement et leur orientation les uns par rapport aux autres sont surveillés et gérés au fil du temps. Cet article explique la relation entre les espaces, les poses/attitudes, les spectateurs et les vues.
+
Rendering and the WebXR frame animation callback
+
En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux.
+
Viewpoints and viewers: Simulating cameras in WebXR
+
 through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas.
+
Lighting a WebXR setting
+
Le rendu WebXR étant basé sur WebGL, les mêmes techniques d'éclairage utilisées pour toute application 3D sont appliquées aux scènes WebXR. Cependant, il existe des problèmes spécifiques à la création de paramètres de réalité augmentée et virtuelle qui doivent être pris en compte lors de l'écriture de votre code d'éclairage. Cet article traite de ces problèmes.
+
Using bounded reference spaces
+
Dans cet article, nous examinons comment utiliser un espace de référence bounded-floor pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le bounded-floor peut être un outil utile dans votre répertoire.
+
+ +

Rendre interactif

+ +
+
Movement, orientation, and motion: A WebXR example
+
Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris.
+
Inputs and input sources
+
Un guide sur les sources d'entrée et comment gérer efficacement les périphériques d'entrée utilisés pour contrôler la session WebXR, et comment recevoir et traiter les entrées utilisateur de ces périphériques.
+
Targeting and hit detection
+
Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées.
+
Using WebXR input profiles
+
Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le WebXR Input Profiles Registry, qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur.
+
Supporting advanced controllers and gamepads in WebXR applications
+
WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques.
+
+ +

Performance and sécurité

+ +
+
WebXR performance guide
+
Recommandations et astuces pour vous aider à optimiser les performances de votre application WebXR.
+
Permissions and security for WebXR
+
L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer.
+
+ +

Inclure d'autres médias

+ +
+
Positional audio in a 3D environment
+
Dans les environnements 3D, qui peuvent être soit des scènes 3D rendues à l'écran, soit une expérience de réalité mixte expérimentée à l'aide d'un casque, il est important que l'audio soit exécuté de sorte qu'il semble provenir de la direction de sa source. Ce guide explique comment y parvenir.
+
Playing video in a 3D environment
+
Dans ce guide, nous examinons comment lire une vidéo dans une scène 3D. Cette technique peut être utilisée à la fois dans des applications WebGL standard présentées sur un écran plat d'ordinateur, ou dans un environnement de réalité virtuelle ou augmentée généré par WebXR.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName("WebXR")}}{{Spec2("WebXR")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Navigator.xr")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/wheelevent/deltax/index.html b/files/fr/web/api/wheelevent/deltax/index.html deleted file mode 100644 index 05a9e41e39..0000000000 --- a/files/fr/web/api/wheelevent/deltax/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: WheelEvent.deltaX -slug: Web/API/WheelEvent/deltaX -tags: - - API - - DOM - - Lecture seulement - - Propriété - - Reference - - Référence(2) - - WheelEvent -translation_of: Web/API/WheelEvent/deltaX ---- -

{{APIRef("DOM Events")}}

- -

La propriété en lecture seule WheelEvent.deltaX est un double représentant la quantité de défilement horizontal dans l'unité {{domxref("WheelEvent.deltaMode")}}.

- -

Syntaxe

- -
var dX = event.deltaX;
- -

Exemple

- -
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});
-
-console.log(syntheticEvent.deltaX);
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommantaire
{{SpecName('DOM3 Events','#widl-WheelEvent-deltaX','WheelEvent.deltaX')}}{{Spec2('DOM3 Events')}}Définiton initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WheelEvent.deltaX")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/wheelevent/deltax/index.md b/files/fr/web/api/wheelevent/deltax/index.md new file mode 100644 index 0000000000..05a9e41e39 --- /dev/null +++ b/files/fr/web/api/wheelevent/deltax/index.md @@ -0,0 +1,55 @@ +--- +title: WheelEvent.deltaX +slug: Web/API/WheelEvent/deltaX +tags: + - API + - DOM + - Lecture seulement + - Propriété + - Reference + - Référence(2) + - WheelEvent +translation_of: Web/API/WheelEvent/deltaX +--- +

{{APIRef("DOM Events")}}

+ +

La propriété en lecture seule WheelEvent.deltaX est un double représentant la quantité de défilement horizontal dans l'unité {{domxref("WheelEvent.deltaMode")}}.

+ +

Syntaxe

+ +
var dX = event.deltaX;
+ +

Exemple

+ +
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaX);
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommantaire
{{SpecName('DOM3 Events','#widl-WheelEvent-deltaX','WheelEvent.deltaX')}}{{Spec2('DOM3 Events')}}Définiton initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WheelEvent.deltaX")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/wheelevent/deltay/index.html b/files/fr/web/api/wheelevent/deltay/index.html deleted file mode 100644 index 49eeb736f5..0000000000 --- a/files/fr/web/api/wheelevent/deltay/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: WheelEvent.deltaY -slug: Web/API/WheelEvent/deltaY -tags: - - API - - DOM - - Lecture seulement - - Propriété - - Reference - - Référence(2) - - WheelEvent -translation_of: Web/API/WheelEvent/deltaY ---- -

{{APIRef("DOM Events")}}

- -

La propriété en lecture seule WheelEvent.deltaY est un double représentant la quantité de défilement vertical dans l'unité {{domxref("WheelEvent.deltaMode")}}.

- -

Syntaxe

- -
var dY = event.deltaY;
- -

Exemple

- -
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
-
-console.log(syntheticEvent.deltaY);
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommantaire
{{SpecName('DOM3 Events','#widl-WheelEvent-deltaY','WheelEvent.deltaY')}}{{Spec2('DOM3 Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WheelEvent.deltaY")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/wheelevent/deltay/index.md b/files/fr/web/api/wheelevent/deltay/index.md new file mode 100644 index 0000000000..49eeb736f5 --- /dev/null +++ b/files/fr/web/api/wheelevent/deltay/index.md @@ -0,0 +1,55 @@ +--- +title: WheelEvent.deltaY +slug: Web/API/WheelEvent/deltaY +tags: + - API + - DOM + - Lecture seulement + - Propriété + - Reference + - Référence(2) + - WheelEvent +translation_of: Web/API/WheelEvent/deltaY +--- +

{{APIRef("DOM Events")}}

+ +

La propriété en lecture seule WheelEvent.deltaY est un double représentant la quantité de défilement vertical dans l'unité {{domxref("WheelEvent.deltaMode")}}.

+ +

Syntaxe

+ +
var dY = event.deltaY;
+ +

Exemple

+ +
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaY);
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommantaire
{{SpecName('DOM3 Events','#widl-WheelEvent-deltaY','WheelEvent.deltaY')}}{{Spec2('DOM3 Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WheelEvent.deltaY")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/wheelevent/deltaz/index.html b/files/fr/web/api/wheelevent/deltaz/index.html deleted file mode 100644 index 8ab33605b0..0000000000 --- a/files/fr/web/api/wheelevent/deltaz/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: WheelEvent.deltaZ -slug: Web/API/WheelEvent/deltaZ -tags: - - API - - DOM - - Interface - - Lecture seulement - - Propriété - - Reference - - Référence(2) - - WheelEvent -translation_of: Web/API/WheelEvent/deltaZ ---- -

{{APIRef("DOM Events")}}

- -

La propriété en lecture seule WheelEvent.deltaZ est un double représentant la quantité de défilement le long de l'axe z, dans l'unité {{domxref("WheelEvent.deltaMode")}}.

- -

Syntaxe

- -
var dZ = event.deltaZ;
- -

Exemple

- -
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaZ": 4, "deltaMode": 0});
-
-console.log(syntheticEvent.deltaZ);
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM3 Events','#widl-WheelEvent-deltaZ','WheelEvent.deltaZ')}}{{Spec2('DOM3 Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WheelEvent.deltaZ")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/wheelevent/deltaz/index.md b/files/fr/web/api/wheelevent/deltaz/index.md new file mode 100644 index 0000000000..8ab33605b0 --- /dev/null +++ b/files/fr/web/api/wheelevent/deltaz/index.md @@ -0,0 +1,56 @@ +--- +title: WheelEvent.deltaZ +slug: Web/API/WheelEvent/deltaZ +tags: + - API + - DOM + - Interface + - Lecture seulement + - Propriété + - Reference + - Référence(2) + - WheelEvent +translation_of: Web/API/WheelEvent/deltaZ +--- +

{{APIRef("DOM Events")}}

+ +

La propriété en lecture seule WheelEvent.deltaZ est un double représentant la quantité de défilement le long de l'axe z, dans l'unité {{domxref("WheelEvent.deltaMode")}}.

+ +

Syntaxe

+ +
var dZ = event.deltaZ;
+ +

Exemple

+ +
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaZ": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaZ);
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM3 Events','#widl-WheelEvent-deltaZ','WheelEvent.deltaZ')}}{{Spec2('DOM3 Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WheelEvent.deltaZ")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/wheelevent/index.html b/files/fr/web/api/wheelevent/index.html deleted file mode 100644 index fcd871b623..0000000000 --- a/files/fr/web/api/wheelevent/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: WheelEvent -slug: Web/API/WheelEvent -tags: - - API - - DOM - - Interface - - Reference - - WheelEvent -translation_of: Web/API/WheelEvent ---- -

{{APIRef("DOM Events")}}

- -

L'interface WheelEvent représente les évènements qui se produisent lorsque l'utilisateur déplace la molette de la souris ou un périphérique d'entrée similaire.

- -
-

Attention : Il s'agit de l'interface d'évènement de roue standard à utiliser. Les anciennes versions des navigateurs implémentaient les interfaces {{DOMxRef("MouseWheelEvent")}} et {{DOMxRef("MouseScrollEvent")}} non standard et non compatibles avec plusierus navigateurs. Utilisez cette interface et évitez les non standard.

-
- -
-

Note : Ne confondez pas l'évènement {{domxref("Element/wheel_event", "wheel")}} avec l'énénement {{domxref("Element/scroll_event", "scroll")}} : L'action par défaut d'un évènement wheel est définie par l'implantation. Ainsi, un évènement wheel ne distribue pas nécessairement un évènement scroll. Même lorsque c'est le cas, cela ne signifie pas que les valeurs delta* dans l'évènement wheel reflètent nécessairement la direction de défilement du contenu. Par conséquent, ne comptez pas sur les propriétés delta* pour obtenir la direction de défilement du contenu. Au lieu de cela, détectez les changements de valeurs de {{DOMxRef("Element.scrollLeft", "scrollLeft")}} et {{DOMxRef("Element.scrollTop", "scrollTop")}} de la cible dans l'évènement scroll.

-
- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
{{DOMxRef("WheelEvent.WheelEvent", "WheelEvent()")}}
-
Crée un objet WheelEvent.
-
- -

Propriétés

- -

Cette interface hérite des propriétés de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.

- -
-
{{DOMxRef("WheelEvent.deltaX")}}{{ReadOnlyInline}}
-
Renvoie un double représentant le montant du défilement horizontal.
-
{{DOMxRef("WheelEvent.deltaY")}}{{ReadOnlyInline}}
-
Renvoie un double représentant le montant du défilement vertical.
-
{{DOMxRef("WheelEvent.deltaZ")}}{{ReadOnlyInline}}
-
Renvoie un double représentant le montant du défilement pour l'axe z.
-
{{DOMxRef("WheelEvent.deltaMode")}}{{ReadOnlyInline}}
-
Revnoie un unsigned long représentant l'unité du montant de défilement des valeurs delta*. Les valeurs autorisées sont : - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstantValeurDescription
WheelEvent.DOM_DELTA_PIXEL0x00Les valeurs delta* sont spécifiées en pixels.
WheelEvent.DOM_DELTA_LINE0x01Les valeurs delta* sont spécifiées en lignes.
WheelEvent.DOM_DELTA_PAGE0x02Les valeurs delta* sont spécifiées dans les pages.
-
-
- -

Méthodes

- -

Cette interface ne définit aucune méthode spécifique, mais hérite des méthodes de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("UI Events", "#interface-wheelevent", "The WheelEvent interface")}}{{Spec2("UI Events")}}
{{SpecName('DOM3 Events', '#interface-wheelevent', 'WheelEvent')}}{{Spec2('DOM3 Events')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WheelEvent")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/wheelevent/index.md b/files/fr/web/api/wheelevent/index.md new file mode 100644 index 0000000000..fcd871b623 --- /dev/null +++ b/files/fr/web/api/wheelevent/index.md @@ -0,0 +1,117 @@ +--- +title: WheelEvent +slug: Web/API/WheelEvent +tags: + - API + - DOM + - Interface + - Reference + - WheelEvent +translation_of: Web/API/WheelEvent +--- +

{{APIRef("DOM Events")}}

+ +

L'interface WheelEvent représente les évènements qui se produisent lorsque l'utilisateur déplace la molette de la souris ou un périphérique d'entrée similaire.

+ +
+

Attention : Il s'agit de l'interface d'évènement de roue standard à utiliser. Les anciennes versions des navigateurs implémentaient les interfaces {{DOMxRef("MouseWheelEvent")}} et {{DOMxRef("MouseScrollEvent")}} non standard et non compatibles avec plusierus navigateurs. Utilisez cette interface et évitez les non standard.

+
+ +
+

Note : Ne confondez pas l'évènement {{domxref("Element/wheel_event", "wheel")}} avec l'énénement {{domxref("Element/scroll_event", "scroll")}} : L'action par défaut d'un évènement wheel est définie par l'implantation. Ainsi, un évènement wheel ne distribue pas nécessairement un évènement scroll. Même lorsque c'est le cas, cela ne signifie pas que les valeurs delta* dans l'évènement wheel reflètent nécessairement la direction de défilement du contenu. Par conséquent, ne comptez pas sur les propriétés delta* pour obtenir la direction de défilement du contenu. Au lieu de cela, détectez les changements de valeurs de {{DOMxRef("Element.scrollLeft", "scrollLeft")}} et {{DOMxRef("Element.scrollTop", "scrollTop")}} de la cible dans l'évènement scroll.

+
+ +

{{InheritanceDiagram}}

+ +

Constructeur

+ +
+
{{DOMxRef("WheelEvent.WheelEvent", "WheelEvent()")}}
+
Crée un objet WheelEvent.
+
+ +

Propriétés

+ +

Cette interface hérite des propriétés de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.

+ +
+
{{DOMxRef("WheelEvent.deltaX")}}{{ReadOnlyInline}}
+
Renvoie un double représentant le montant du défilement horizontal.
+
{{DOMxRef("WheelEvent.deltaY")}}{{ReadOnlyInline}}
+
Renvoie un double représentant le montant du défilement vertical.
+
{{DOMxRef("WheelEvent.deltaZ")}}{{ReadOnlyInline}}
+
Renvoie un double représentant le montant du défilement pour l'axe z.
+
{{DOMxRef("WheelEvent.deltaMode")}}{{ReadOnlyInline}}
+
Revnoie un unsigned long représentant l'unité du montant de défilement des valeurs delta*. Les valeurs autorisées sont : + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValeurDescription
WheelEvent.DOM_DELTA_PIXEL0x00Les valeurs delta* sont spécifiées en pixels.
WheelEvent.DOM_DELTA_LINE0x01Les valeurs delta* sont spécifiées en lignes.
WheelEvent.DOM_DELTA_PAGE0x02Les valeurs delta* sont spécifiées dans les pages.
+
+
+ +

Méthodes

+ +

Cette interface ne définit aucune méthode spécifique, mais hérite des méthodes de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("UI Events", "#interface-wheelevent", "The WheelEvent interface")}}{{Spec2("UI Events")}}
{{SpecName('DOM3 Events', '#interface-wheelevent', 'WheelEvent')}}{{Spec2('DOM3 Events')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WheelEvent")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/afterprint_event/index.html b/files/fr/web/api/window/afterprint_event/index.html deleted file mode 100644 index c63ed6bc56..0000000000 --- a/files/fr/web/api/window/afterprint_event/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: afterprint -slug: Web/API/Window/afterprint_event -translation_of: Web/API/Window/afterprint_event -original_slug: Web/Events/afterprint ---- -

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/afterprint_event/index.md b/files/fr/web/api/window/afterprint_event/index.md new file mode 100644 index 0000000000..c63ed6bc56 --- /dev/null +++ b/files/fr/web/api/window/afterprint_event/index.md @@ -0,0 +1,64 @@ +--- +title: afterprint +slug: Web/API/Window/afterprint_event +translation_of: Web/API/Window/afterprint_event +original_slug: Web/Events/afterprint +--- +

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/alert/index.html b/files/fr/web/api/window/alert/index.html deleted file mode 100644 index 9f41bd3dff..0000000000 --- a/files/fr/web/api/window/alert/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: window.alert -slug: Web/API/Window/alert -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/Window/alert ---- -

{{ ApiRef() }}

-

Résumé

-

Affiche un dialogue d'alerte contenant le texte spécifié.

-

Syntaxe

-
window.alert(message);
-
- -

Exemple

-
window.alert("Bonjour !");
-
-

produira :

- -

- -

Notes

-

Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message.

-

Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).

-

Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de nsIPromptService.

-

Spécification

-

{{ DOM0() }}

-

Voir aussi

- \ No newline at end of file diff --git a/files/fr/web/api/window/alert/index.md b/files/fr/web/api/window/alert/index.md new file mode 100644 index 0000000000..9f41bd3dff --- /dev/null +++ b/files/fr/web/api/window/alert/index.md @@ -0,0 +1,36 @@ +--- +title: window.alert +slug: Web/API/Window/alert +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/Window/alert +--- +

{{ ApiRef() }}

+

Résumé

+

Affiche un dialogue d'alerte contenant le texte spécifié.

+

Syntaxe

+
window.alert(message);
+
+ +

Exemple

+
window.alert("Bonjour !");
+
+

produira :

+ +

+ +

Notes

+

Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message.

+

Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).

+

Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de nsIPromptService.

+

Spécification

+

{{ DOM0() }}

+

Voir aussi

+ \ No newline at end of file diff --git a/files/fr/web/api/window/applicationcache/index.html b/files/fr/web/api/window/applicationcache/index.html deleted file mode 100644 index 7518fb40ed..0000000000 --- a/files/fr/web/api/window/applicationcache/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Window.applicationCache -slug: Web/API/Window/applicationCache -translation_of: Web/API/Window/applicationCache ---- -
-

Attention : Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de service workers à la place.

-
- -

{{APIRef}}

- -

Retourne une référence à l'objet du cache d'application pour la fenêtre.

- -

Syntaxe

- -
cache = window.applicationCache
-
- -

Paramètres

- - - -

Spécification

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/window/applicationcache/index.md b/files/fr/web/api/window/applicationcache/index.md new file mode 100644 index 0000000000..7518fb40ed --- /dev/null +++ b/files/fr/web/api/window/applicationcache/index.md @@ -0,0 +1,35 @@ +--- +title: Window.applicationCache +slug: Web/API/Window/applicationCache +translation_of: Web/API/Window/applicationCache +--- +
+

Attention : Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de service workers à la place.

+
+ +

{{APIRef}}

+ +

Retourne une référence à l'objet du cache d'application pour la fenêtre.

+ +

Syntaxe

+ +
cache = window.applicationCache
+
+ +

Paramètres

+ + + +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/window/back/index.html b/files/fr/web/api/window/back/index.html deleted file mode 100644 index 9743d49f37..0000000000 --- a/files/fr/web/api/window/back/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Window.back() -slug: Web/API/Window/back -tags: - - API - - Firefox - - Gecko - - HTML DOM - - Méthode - - Non-standard - - Obsolete - - Window - - back -translation_of: Web/API/Window/back ---- -
{{APIRef}}{{ Non-standard_header() }}{{deprecated_header}}
- -

La méthode obsolète et non standard back() sur l'objet {{domxref("window")}} renvoie la fenêtre à l'élément précédent de l'historique. Il s'agissait d'une méthode spécifique à Firefox et a été supprimée dans Firefox 31.

- -
-

Note: Utilisez plutôt la méthode standard {{domxref("history.back")}}.

-
- -

Syntaxe

- -
window.back();
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

undefined.

- -

Exemple

- -

Cet exemple simple gère un clic sur un bouton "Retour" en rappelant back().

- -
function boutonRetour() {
-  if (peutRevenirEnArriere) {
-    window.back();
-  }
-}
- -

Spécification

- -

Cela ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

Cette méthode non standard n'a été implémentée que dans Firefox et a été supprimée dans Firefox 31.

- -

Voir également

- - diff --git a/files/fr/web/api/window/back/index.md b/files/fr/web/api/window/back/index.md new file mode 100644 index 0000000000..9743d49f37 --- /dev/null +++ b/files/fr/web/api/window/back/index.md @@ -0,0 +1,59 @@ +--- +title: Window.back() +slug: Web/API/Window/back +tags: + - API + - Firefox + - Gecko + - HTML DOM + - Méthode + - Non-standard + - Obsolete + - Window + - back +translation_of: Web/API/Window/back +--- +
{{APIRef}}{{ Non-standard_header() }}{{deprecated_header}}
+ +

La méthode obsolète et non standard back() sur l'objet {{domxref("window")}} renvoie la fenêtre à l'élément précédent de l'historique. Il s'agissait d'une méthode spécifique à Firefox et a été supprimée dans Firefox 31.

+ +
+

Note: Utilisez plutôt la méthode standard {{domxref("history.back")}}.

+
+ +

Syntaxe

+ +
window.back();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

undefined.

+ +

Exemple

+ +

Cet exemple simple gère un clic sur un bouton "Retour" en rappelant back().

+ +
function boutonRetour() {
+  if (peutRevenirEnArriere) {
+    window.back();
+  }
+}
+ +

Spécification

+ +

Cela ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

Cette méthode non standard n'a été implémentée que dans Firefox et a été supprimée dans Firefox 31.

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/beforeprint_event/index.html b/files/fr/web/api/window/beforeprint_event/index.html deleted file mode 100644 index b0e96ca975..0000000000 --- a/files/fr/web/api/window/beforeprint_event/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: beforeprint -slug: Web/API/Window/beforeprint_event -tags: - - Evènement - - Reference -translation_of: Web/API/Window/beforeprint_event -original_slug: Web/Events/beforeprint ---- -

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/beforeprint_event/index.md b/files/fr/web/api/window/beforeprint_event/index.md new file mode 100644 index 0000000000..b0e96ca975 --- /dev/null +++ b/files/fr/web/api/window/beforeprint_event/index.md @@ -0,0 +1,75 @@ +--- +title: beforeprint +slug: Web/API/Window/beforeprint_event +tags: + - Evènement + - Reference +translation_of: Web/API/Window/beforeprint_event +original_slug: Web/Events/beforeprint +--- +

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 deleted file mode 100644 index 249644f9e3..0000000000 --- a/files/fr/web/api/window/beforeunload_event/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: beforeunload -slug: Web/API/Window/beforeunload_event -translation_of: Web/API/Window/beforeunload_event -original_slug: Web/Events/beforeunload ---- -

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.

-
- -
-

Attention : 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/beforeunload_event/index.md b/files/fr/web/api/window/beforeunload_event/index.md new file mode 100644 index 0000000000..249644f9e3 --- /dev/null +++ b/files/fr/web/api/window/beforeunload_event/index.md @@ -0,0 +1,140 @@ +--- +title: beforeunload +slug: Web/API/Window/beforeunload_event +translation_of: Web/API/Window/beforeunload_event +original_slug: Web/Events/beforeunload +--- +

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.

+
+ +
+

Attention : 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/blur/index.html b/files/fr/web/api/window/blur/index.html deleted file mode 100644 index 75091cf2a6..0000000000 --- a/files/fr/web/api/window/blur/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Window.blur() -slug: Web/API/Window/blur -tags: - - API - - DOM - - Gecko - - Méthode -translation_of: Web/API/Window/blur ---- -

{{APIRef}}

- -

Éloigne la mise au point de la fenêtre.

- -

Syntaxe

- -
window.blur()
- -

Exemple

- -
window.blur();
- -

Notes

- -

La méthode window.blur() est l'équivalent programmatique du déplacement du focus de l'utilisateur loin de la fenêtre courante.

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentair
{{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.blur")}}

diff --git a/files/fr/web/api/window/blur/index.md b/files/fr/web/api/window/blur/index.md new file mode 100644 index 0000000000..75091cf2a6 --- /dev/null +++ b/files/fr/web/api/window/blur/index.md @@ -0,0 +1,46 @@ +--- +title: Window.blur() +slug: Web/API/Window/blur +tags: + - API + - DOM + - Gecko + - Méthode +translation_of: Web/API/Window/blur +--- +

{{APIRef}}

+ +

Éloigne la mise au point de la fenêtre.

+ +

Syntaxe

+ +
window.blur()
+ +

Exemple

+ +
window.blur();
+ +

Notes

+ +

La méthode window.blur() est l'équivalent programmatique du déplacement du focus de l'utilisateur loin de la fenêtre courante.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentair
{{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.blur")}}

diff --git a/files/fr/web/api/window/cancelanimationframe/index.html b/files/fr/web/api/window/cancelanimationframe/index.html deleted file mode 100644 index a0c27fc7eb..0000000000 --- a/files/fr/web/api/window/cancelanimationframe/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: window.cancelAnimationFrame() -slug: Web/API/Window/cancelAnimationFrame -tags: - - API - - Animation - - DOM - - Experimental - - Méthode - - Reference - - Window -translation_of: Web/API/Window/cancelAnimationFrame ---- -
{{APIRef}}
- -
La méthode window.cancelAnimationFrame() met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}.
- -

Syntaxe

- -
window.cancelAnimationFrame(requestID);
- -

Paramètres

- -
-
requestID
-
L'identifiant retourné par l'appel à {{domxref("window.requestAnimationFrame()")}} qui a généré la fonction de rappel (callback)
-
- -

Exemples

- -
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-
-var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
-
-var start = window.mozAnimationStartTime;  // Seulement supporté par Firefox. Les autre navigateurs peuvent utiliser quelque chose comme Date.now()..
-
-var myReq; // Déclarer la variable globalement avant de lancer l'animation
-
-function step(timestamp) {
-  var progress = timestamp - start;
-  d.style.left = Math.min(progress / 10, 200) + 'px';
-  if (progress < 2000) {
-    // Ne pas oublier de récupérer l'identifiant à chaque appel de la fonction
-    myReq = requestAnimationFrame(step);
-  }
-}
-myReq = requestAnimationFrame(step);
-// L'annulation utilise le dernier identifiant
-cancelAnimationFrame(myReq);
-
- -

Spécifications

- - - - - - - - - - - - -
Spécification
{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.cancelAnimationFrame")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/cancelanimationframe/index.md b/files/fr/web/api/window/cancelanimationframe/index.md new file mode 100644 index 0000000000..a0c27fc7eb --- /dev/null +++ b/files/fr/web/api/window/cancelanimationframe/index.md @@ -0,0 +1,77 @@ +--- +title: window.cancelAnimationFrame() +slug: Web/API/Window/cancelAnimationFrame +tags: + - API + - Animation + - DOM + - Experimental + - Méthode + - Reference + - Window +translation_of: Web/API/Window/cancelAnimationFrame +--- +
{{APIRef}}
+ +
La méthode window.cancelAnimationFrame() met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}.
+ +

Syntaxe

+ +
window.cancelAnimationFrame(requestID);
+ +

Paramètres

+ +
+
requestID
+
L'identifiant retourné par l'appel à {{domxref("window.requestAnimationFrame()")}} qui a généré la fonction de rappel (callback)
+
+ +

Exemples

+ +
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Seulement supporté par Firefox. Les autre navigateurs peuvent utiliser quelque chose comme Date.now()..
+
+var myReq; // Déclarer la variable globalement avant de lancer l'animation
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress < 2000) {
+    // Ne pas oublier de récupérer l'identifiant à chaque appel de la fonction
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+// L'annulation utilise le dernier identifiant
+cancelAnimationFrame(myReq);
+
+ +

Spécifications

+ + + + + + + + + + + + +
Spécification
{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.cancelAnimationFrame")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/cancelidlecallback/index.html b/files/fr/web/api/window/cancelidlecallback/index.html deleted file mode 100644 index 39c94deb9a..0000000000 --- a/files/fr/web/api/window/cancelidlecallback/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: window.cancelIdleCallback() -slug: Web/API/Window/cancelIdleCallback -translation_of: Web/API/Window/cancelIdleCallback ---- -
{{APIRef}}{{SeeCompatTable}}
- -

La méthode window.cancelIdleCallback() annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}.

- -

Syntaxe

- -
window.cancelIdleCallback(idleCallbackId);
- -

Paramètres

- -
-
idleCallbackId
-
L'entier long non-signé retourné par {{domxref("window.requestIdleCallback()")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Background Tasks')}}{{Spec2('Background Tasks')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.cancelIdleCallback")}}

diff --git a/files/fr/web/api/window/cancelidlecallback/index.md b/files/fr/web/api/window/cancelidlecallback/index.md new file mode 100644 index 0000000000..39c94deb9a --- /dev/null +++ b/files/fr/web/api/window/cancelidlecallback/index.md @@ -0,0 +1,40 @@ +--- +title: window.cancelIdleCallback() +slug: Web/API/Window/cancelIdleCallback +translation_of: Web/API/Window/cancelIdleCallback +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

La méthode window.cancelIdleCallback() annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}.

+ +

Syntaxe

+ +
window.cancelIdleCallback(idleCallbackId);
+ +

Paramètres

+ +
+
idleCallbackId
+
L'entier long non-signé retourné par {{domxref("window.requestIdleCallback()")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('Background Tasks')}}{{Spec2('Background Tasks')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.cancelIdleCallback")}}

diff --git a/files/fr/web/api/window/captureevents/index.html b/files/fr/web/api/window/captureevents/index.html deleted file mode 100644 index cac350b130..0000000000 --- a/files/fr/web/api/window/captureevents/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Window.captureEvents() -slug: Web/API/Window/captureEvents -tags: - - API - - Gecko - - HTML DOM - - Méthode - - Non-standard -translation_of: Web/API/Window/captureEvents ---- -
{{ ApiRef() }} {{deprecated_header(1.9)}} {{Non-standard_header}}
- -

La méthode Window.captureEvents() enregistre la fenêtre pour capturer tous les événements du type spécifié.

- -

Syntaxe

- -
window.captureEvents(eventType)
-
- -

eventType est une combinaison des valeurs suivantes: Event.ABORT, Event.BLUR, Event.CLICK, Event.CHANGE, Event.DBLCLICK, Event.DRAGDDROP, Event.ERROR, Event.FOCUS, Event.KEYDOWN, Event.KEYPRESS, Event.KEYUP, Event.LOAD, Event.MOUSEDOWN, Event.MOUSEMOVE, Event.MOUSEOUT, Event.MOUSEOVER, Event.MOUSEUP, Event.MOVE, Event.RESET, Event.RESIZE, Event.SELECT, Event.SUBMIT, Event.UNLOAD.

- -

Exemple

- -
<!DOCTYPE html>
-<html lang="fr">
-<head>
-<!-- ... -->
-<script>
-function reg() {
-  window.captureEvents(Event.CLICK);
-  window.onclick = page_click;
-}
-
-function page_click() {
-  alert('événement de clic sur la page détecté!');
-}
-</script>
-</head>
-
-<body onload="reg();">
-<p>cliquez n'importe où sur cette page.</p>
-</body>
-</html>
-
- -

Notes

- -

Les événements déclenchés dans le DOM par l'activité de l'utilisateur (tels que cliquer sur des boutons ou déplacer le focus loin du document actuel) passent généralement par la window de haut niveau et les objets de document avant d'arriver à l'objet qui a déclenché l'événement.

- -

Lorsque vous appelez la méthode captureEvents() sur window, événements du type que vous spécifier (par exemple, Event.CLICK) ne passe plus par les objets "inférieurs" de la hiérarchie. Pour que les événements "bouillonnent" comme ils le font normalement, vous devez appeler window.releaseEvents() ({{deprecated_inline}}) sur la fenêtre pour l'empêcher de piéger les événements.

- -

Notez que vous pouvez transmettre une liste d'événements à cette méthode en utilisant la syntaxe suivante : window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP).

- -

Spécification

- -

Cela ne fait partie d'aucune spécification.

diff --git a/files/fr/web/api/window/captureevents/index.md b/files/fr/web/api/window/captureevents/index.md new file mode 100644 index 0000000000..cac350b130 --- /dev/null +++ b/files/fr/web/api/window/captureevents/index.md @@ -0,0 +1,57 @@ +--- +title: Window.captureEvents() +slug: Web/API/Window/captureEvents +tags: + - API + - Gecko + - HTML DOM + - Méthode + - Non-standard +translation_of: Web/API/Window/captureEvents +--- +
{{ ApiRef() }} {{deprecated_header(1.9)}} {{Non-standard_header}}
+ +

La méthode Window.captureEvents() enregistre la fenêtre pour capturer tous les événements du type spécifié.

+ +

Syntaxe

+ +
window.captureEvents(eventType)
+
+ +

eventType est une combinaison des valeurs suivantes: Event.ABORT, Event.BLUR, Event.CLICK, Event.CHANGE, Event.DBLCLICK, Event.DRAGDDROP, Event.ERROR, Event.FOCUS, Event.KEYDOWN, Event.KEYPRESS, Event.KEYUP, Event.LOAD, Event.MOUSEDOWN, Event.MOUSEMOVE, Event.MOUSEOUT, Event.MOUSEOVER, Event.MOUSEUP, Event.MOVE, Event.RESET, Event.RESIZE, Event.SELECT, Event.SUBMIT, Event.UNLOAD.

+ +

Exemple

+ +
<!DOCTYPE html>
+<html lang="fr">
+<head>
+<!-- ... -->
+<script>
+function reg() {
+  window.captureEvents(Event.CLICK);
+  window.onclick = page_click;
+}
+
+function page_click() {
+  alert('événement de clic sur la page détecté!');
+}
+</script>
+</head>
+
+<body onload="reg();">
+<p>cliquez n'importe où sur cette page.</p>
+</body>
+</html>
+
+ +

Notes

+ +

Les événements déclenchés dans le DOM par l'activité de l'utilisateur (tels que cliquer sur des boutons ou déplacer le focus loin du document actuel) passent généralement par la window de haut niveau et les objets de document avant d'arriver à l'objet qui a déclenché l'événement.

+ +

Lorsque vous appelez la méthode captureEvents() sur window, événements du type que vous spécifier (par exemple, Event.CLICK) ne passe plus par les objets "inférieurs" de la hiérarchie. Pour que les événements "bouillonnent" comme ils le font normalement, vous devez appeler window.releaseEvents() ({{deprecated_inline}}) sur la fenêtre pour l'empêcher de piéger les événements.

+ +

Notez que vous pouvez transmettre une liste d'événements à cette méthode en utilisant la syntaxe suivante : window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP).

+ +

Spécification

+ +

Cela ne fait partie d'aucune spécification.

diff --git a/files/fr/web/api/window/clearimmediate/index.html b/files/fr/web/api/window/clearimmediate/index.html deleted file mode 100644 index 886d10eb4f..0000000000 --- a/files/fr/web/api/window/clearimmediate/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Window.clearImmediate() -slug: Web/API/Window/clearImmediate -tags: - - API - - HTML DOM - - Méthode - - Window -translation_of: Web/API/Window/clearImmediate ---- -

{{APIRef("HTML DOM")}}{{Non-standard_header}}

- -

Cette méthode efface l'action spécifiée par {{DOMxRef("window.setImmediate")}}.

- -
-

Note : Cette méthode ne devrait pas devenir standard et n'est implémentée que par les versions récentes d'Internet Explorer et de Node.js 0.10+. Il rencontre la résistance à la fois de Gecko (Firefox) et Webkit (Google/Apple).

-
- -

Syntaxe

- -
window.clearImmediate( immediateID )
-
- -

où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}.

- -

Exemples

- -
let immediateID = setImmediate(() => {
-  // Exécute du code
-}
-
-document.getElementById("bouton")
-  .addEventListener(() => {
-  clearImmediate(immediateID);
-});
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
Efficient Script Yielding La définition de setImmediate dans cette spécification.Editor's DraftInitial definition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.clearImmediate")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/clearimmediate/index.md b/files/fr/web/api/window/clearimmediate/index.md new file mode 100644 index 0000000000..886d10eb4f --- /dev/null +++ b/files/fr/web/api/window/clearimmediate/index.md @@ -0,0 +1,65 @@ +--- +title: Window.clearImmediate() +slug: Web/API/Window/clearImmediate +tags: + - API + - HTML DOM + - Méthode + - Window +translation_of: Web/API/Window/clearImmediate +--- +

{{APIRef("HTML DOM")}}{{Non-standard_header}}

+ +

Cette méthode efface l'action spécifiée par {{DOMxRef("window.setImmediate")}}.

+ +
+

Note : Cette méthode ne devrait pas devenir standard et n'est implémentée que par les versions récentes d'Internet Explorer et de Node.js 0.10+. Il rencontre la résistance à la fois de Gecko (Firefox) et Webkit (Google/Apple).

+
+ +

Syntaxe

+ +
window.clearImmediate( immediateID )
+
+ +

où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}.

+ +

Exemples

+ +
let immediateID = setImmediate(() => {
+  // Exécute du code
+}
+
+document.getElementById("bouton")
+  .addEventListener(() => {
+  clearImmediate(immediateID);
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
Efficient Script Yielding La définition de setImmediate dans cette spécification.Editor's DraftInitial definition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.clearImmediate")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/close/index.html b/files/fr/web/api/window/close/index.html deleted file mode 100644 index b5ea2c278c..0000000000 --- a/files/fr/web/api/window/close/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: window.close -slug: Web/API/Window/close -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Window/close ---- -

{{ ApiRef() }}

-

Résumé

-

Ferme la fenêtre référencée.

-

Syntaxe

-
window.close();
-
-

Description

-

Lorsque cette méthode est appelée, la fenêtre référencée est fermée.

-

Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode window.open. Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : Scripts may not close windows that were not opened by script.

-

Exemples

-
Fermeture d'une fenêtre ouverte avec window.open()
-
<script type="text/javascript">
-// Variable globale pour stocker une référence vers la fenêtre ouverte
-var fenetreOuverte;
-
-function ouvrirFenetre()
-{
-  fenetreOuverte = window.open('details.html');
-}
-function fermerFenetreOuverte()
-{
-  fenetreOuverte.close();
-}
-</script>
-
-
Fermeture de la fenêtre courante
-
<script type="text/javascript">
-function fermerFenetreCourante()
-{
-  window.close();
-}
-</script>
-
-

Spécification

-

DOM Level 0. window.close() ne fait partie d'aucune spécification ni recommandation technique du W3C.

-

Référence additionnelle

- \ No newline at end of file diff --git a/files/fr/web/api/window/close/index.md b/files/fr/web/api/window/close/index.md new file mode 100644 index 0000000000..b5ea2c278c --- /dev/null +++ b/files/fr/web/api/window/close/index.md @@ -0,0 +1,46 @@ +--- +title: window.close +slug: Web/API/Window/close +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Window/close +--- +

{{ ApiRef() }}

+

Résumé

+

Ferme la fenêtre référencée.

+

Syntaxe

+
window.close();
+
+

Description

+

Lorsque cette méthode est appelée, la fenêtre référencée est fermée.

+

Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode window.open. Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : Scripts may not close windows that were not opened by script.

+

Exemples

+
Fermeture d'une fenêtre ouverte avec window.open()
+
<script type="text/javascript">
+// Variable globale pour stocker une référence vers la fenêtre ouverte
+var fenetreOuverte;
+
+function ouvrirFenetre()
+{
+  fenetreOuverte = window.open('details.html');
+}
+function fermerFenetreOuverte()
+{
+  fenetreOuverte.close();
+}
+</script>
+
+
Fermeture de la fenêtre courante
+
<script type="text/javascript">
+function fermerFenetreCourante()
+{
+  window.close();
+}
+</script>
+
+

Spécification

+

DOM Level 0. window.close() ne fait partie d'aucune spécification ni recommandation technique du W3C.

+

Référence additionnelle

+ \ No newline at end of file diff --git a/files/fr/web/api/window/closed/index.html b/files/fr/web/api/window/closed/index.html deleted file mode 100644 index e01f35054b..0000000000 --- a/files/fr/web/api/window/closed/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: window.closed -slug: Web/API/Window/closed -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Window/closed ---- -

{{ ApiRef() }}

-

Résumé

-

Cette propriété indique si la fenêtre référencée est fermée ou non.

-

Syntaxe

-
isClosed = window.closed;
-
-

Cette propriété est en lecture seule.

-

Valeur renvoyée

-
-
- isClosed
-
- Un booléen. Les valeurs possibles sont :
-
- -

Exemples

-

Chargement d'une page dans la fenêtre principale depuis un popup

-

L'exemple suivant montre comment un popup peut transmettre un choix de l'utilisateur à la fenêtre principale en y ouvrant une URL différente. Mais il faut d'abord vérifier que la fenêtre principale et encore ouverte.

-
if (!window.opener.closed) {
-  // La fenêtre principale est encore là,
-  // on peut donc y charger une autre page
-  window.opener.location.href = newURL;
-}
-
-

Appel d'une fonction dans un popup ouvert précédemment

-

Dans cette exemple, la fonction refreshPopupWindow() appelle une fonction dans le popup pour rafraichir son contenu. Cependant, si le popup n'a pas encore été ouvert ou si l'utilisateur l'a fermé, un nouveau popup est ouvert.

-
var popupWindow = null;
-
-function refreshPopupWindow() {
-  if (popupWindow && !popupWindow.closed) {
-    // Le popup a déjà été ouvert et il l'est encore.
-    // On peut donc appeler sa fonction doRefresh().
-    popupWindow.doRefresh();
-  } else {
-    // Il est nécessaire d'ouvrir d'abord le popup.
-    popupWindow = window.open("popup.html");
-  }
-}
-
-

Spécification

-

DOM Level 0. window.closed ne fait partie d'aucune spécification ou recommandation technique du W3C.

-

Référence supplémentaire

- \ No newline at end of file diff --git a/files/fr/web/api/window/closed/index.md b/files/fr/web/api/window/closed/index.md new file mode 100644 index 0000000000..e01f35054b --- /dev/null +++ b/files/fr/web/api/window/closed/index.md @@ -0,0 +1,55 @@ +--- +title: window.closed +slug: Web/API/Window/closed +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Window/closed +--- +

{{ ApiRef() }}

+

Résumé

+

Cette propriété indique si la fenêtre référencée est fermée ou non.

+

Syntaxe

+
isClosed = window.closed;
+
+

Cette propriété est en lecture seule.

+

Valeur renvoyée

+
+
+ isClosed
+
+ Un booléen. Les valeurs possibles sont :
+
+ +

Exemples

+

Chargement d'une page dans la fenêtre principale depuis un popup

+

L'exemple suivant montre comment un popup peut transmettre un choix de l'utilisateur à la fenêtre principale en y ouvrant une URL différente. Mais il faut d'abord vérifier que la fenêtre principale et encore ouverte.

+
if (!window.opener.closed) {
+  // La fenêtre principale est encore là,
+  // on peut donc y charger une autre page
+  window.opener.location.href = newURL;
+}
+
+

Appel d'une fonction dans un popup ouvert précédemment

+

Dans cette exemple, la fonction refreshPopupWindow() appelle une fonction dans le popup pour rafraichir son contenu. Cependant, si le popup n'a pas encore été ouvert ou si l'utilisateur l'a fermé, un nouveau popup est ouvert.

+
var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow && !popupWindow.closed) {
+    // Le popup a déjà été ouvert et il l'est encore.
+    // On peut donc appeler sa fonction doRefresh().
+    popupWindow.doRefresh();
+  } else {
+    // Il est nécessaire d'ouvrir d'abord le popup.
+    popupWindow = window.open("popup.html");
+  }
+}
+
+

Spécification

+

DOM Level 0. window.closed ne fait partie d'aucune spécification ou recommandation technique du W3C.

+

Référence supplémentaire

+ \ No newline at end of file diff --git a/files/fr/web/api/window/confirm/index.html b/files/fr/web/api/window/confirm/index.html deleted file mode 100644 index bed8eb3463..0000000000 --- a/files/fr/web/api/window/confirm/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: window.confirm -slug: Web/API/Window/confirm -tags: - - DOM - - DOM_0 -translation_of: Web/API/Window/confirm ---- -

{{ApiRef("Window")}}

- -

Résumé

- -

Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.

- -

Syntaxe

- -
resultat = window.confirm(message);
-
- - - -

Exemple

- -
if (window.confirm("Une nouvelle fenêtre va s'ouvrir.")) {
-    window.open("fenetre.html", "Nouvelle fenêtre", "");
-}
-
- -

Notes

- -

Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).

- -

Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de nsIPromptService.

- -

Spécification

- -

{{ DOM0() }}

- -

Voir aussi

- - \ No newline at end of file diff --git a/files/fr/web/api/window/confirm/index.md b/files/fr/web/api/window/confirm/index.md new file mode 100644 index 0000000000..bed8eb3463 --- /dev/null +++ b/files/fr/web/api/window/confirm/index.md @@ -0,0 +1,47 @@ +--- +title: window.confirm +slug: Web/API/Window/confirm +tags: + - DOM + - DOM_0 +translation_of: Web/API/Window/confirm +--- +

{{ApiRef("Window")}}

+ +

Résumé

+ +

Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.

+ +

Syntaxe

+ +
resultat = window.confirm(message);
+
+ + + +

Exemple

+ +
if (window.confirm("Une nouvelle fenêtre va s'ouvrir.")) {
+    window.open("fenetre.html", "Nouvelle fenêtre", "");
+}
+
+ +

Notes

+ +

Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).

+ +

Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de nsIPromptService.

+ +

Spécification

+ +

{{ DOM0() }}

+ +

Voir aussi

+ + \ No newline at end of file diff --git a/files/fr/web/api/window/console/index.html b/files/fr/web/api/window/console/index.html deleted file mode 100644 index cbb2e643a9..0000000000 --- a/files/fr/web/api/window/console/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Window.console -slug: Web/API/Window/console -tags: - - API - - Propriété - - Reference - - Window - - console - - lecture seule -translation_of: Web/API/Window/console ---- -

{{ APIRef }}

- -

La propriété Window.console en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs.

- -

Syntaxe

- -
var consoleObj = window.console;
-
- -

Exemples

- -

Afficher dans la console

- -

Le premier exemple affiche du texte dans la console.

- -
console.log("An error occurred while loading the content");
-
- -

L'exemple suivant affiche un objet dans la console, et les champs de l'objet y sont écrit:

- -
console.dir(someObject);
- -

Voir {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} pour plus d'exemples appronfondit.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Console API')}}{{Spec2('Console API')}}Définition Initiale.
- -
-

Note : Actuellement il y a beaucoup de différences d'implémentation entre les navigateurs, mais ils sont en train d'être standardisés pour les rendre plus consistants entre eux.

-
diff --git a/files/fr/web/api/window/console/index.md b/files/fr/web/api/window/console/index.md new file mode 100644 index 0000000000..cbb2e643a9 --- /dev/null +++ b/files/fr/web/api/window/console/index.md @@ -0,0 +1,56 @@ +--- +title: Window.console +slug: Web/API/Window/console +tags: + - API + - Propriété + - Reference + - Window + - console + - lecture seule +translation_of: Web/API/Window/console +--- +

{{ APIRef }}

+ +

La propriété Window.console en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs.

+ +

Syntaxe

+ +
var consoleObj = window.console;
+
+ +

Exemples

+ +

Afficher dans la console

+ +

Le premier exemple affiche du texte dans la console.

+ +
console.log("An error occurred while loading the content");
+
+ +

L'exemple suivant affiche un objet dans la console, et les champs de l'objet y sont écrit:

+ +
console.dir(someObject);
+ +

Voir {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} pour plus d'exemples appronfondit.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('Console API')}}{{Spec2('Console API')}}Définition Initiale.
+ +
+

Note : Actuellement il y a beaucoup de différences d'implémentation entre les navigateurs, mais ils sont en train d'être standardisés pour les rendre plus consistants entre eux.

+
diff --git a/files/fr/web/api/window/content/index.html b/files/fr/web/api/window/content/index.html deleted file mode 100644 index ef73a10622..0000000000 --- a/files/fr/web/api/window/content/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: window.content -slug: Web/API/Window/content -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Window/content ---- -

{{ ApiRef() }}

-

Résumé

-

Renvoie un objet Window pour la fenêtre de contenu principale. C'est utile pour les fenêtres XUL qui ont un <browser> (ou tabbrowser ou <iframe>) avec l'attribut type="content-primary" défini - l'exemple le plus célèbre étant la fenêtre principale de Firefox, browser.xul. Dans de tels cas, content renvoie une référence à l'objet Window pour le document actuellement affiché dans le navigateur. Il s'agit d'un raccourci pour browserRef.contentWindow.

-

Dans du contenu non privilégié (des pages Web), content est normalement équivalent à top (sauf dans le cas d'une page chargée dans un panneau latéral, où content se réfère à l'objet Window de l'onglet sélectionné).

-

Certains exemples utilisent _content à la place de content. Cette forme est dépréciée depuis un long moment, et vous devriez toujours utiliser content dans du nouveau code.

-

Syntaxe

-
var windowObject = window.content;
-
-

Exemple

-

L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement <browser type="content-primary"/> dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur :

-
content.document.getElementsByTagName("div")[0].style.border = "solid red 1px";
-
-

Spécification

-

Ne fait partie d'aucune spécification du W3C.

-

Voir aussi

- \ No newline at end of file diff --git a/files/fr/web/api/window/content/index.md b/files/fr/web/api/window/content/index.md new file mode 100644 index 0000000000..ef73a10622 --- /dev/null +++ b/files/fr/web/api/window/content/index.md @@ -0,0 +1,26 @@ +--- +title: window.content +slug: Web/API/Window/content +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Window/content +--- +

{{ ApiRef() }}

+

Résumé

+

Renvoie un objet Window pour la fenêtre de contenu principale. C'est utile pour les fenêtres XUL qui ont un <browser> (ou tabbrowser ou <iframe>) avec l'attribut type="content-primary" défini - l'exemple le plus célèbre étant la fenêtre principale de Firefox, browser.xul. Dans de tels cas, content renvoie une référence à l'objet Window pour le document actuellement affiché dans le navigateur. Il s'agit d'un raccourci pour browserRef.contentWindow.

+

Dans du contenu non privilégié (des pages Web), content est normalement équivalent à top (sauf dans le cas d'une page chargée dans un panneau latéral, où content se réfère à l'objet Window de l'onglet sélectionné).

+

Certains exemples utilisent _content à la place de content. Cette forme est dépréciée depuis un long moment, et vous devriez toujours utiliser content dans du nouveau code.

+

Syntaxe

+
var windowObject = window.content;
+
+

Exemple

+

L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement <browser type="content-primary"/> dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur :

+
content.document.getElementsByTagName("div")[0].style.border = "solid red 1px";
+
+

Spécification

+

Ne fait partie d'aucune spécification du W3C.

+

Voir aussi

+ \ No newline at end of file diff --git a/files/fr/web/api/window/controllers/index.html b/files/fr/web/api/window/controllers/index.html deleted file mode 100644 index 9f96ce9c98..0000000000 --- a/files/fr/web/api/window/controllers/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Window.controllers -slug: Web/API/Window/controllers -tags: - - API - - HTML DOM - - NeedMarkupWork - - NeedSpecTavle - - NeedsCompatTable - - Property - - Reference - - Window -translation_of: Web/API/Window/controllers ---- -
{{APIRef}}{{non-standard_header}}
- -

Retourne les contrôleurs XUL de la fenêtre chrome.

- -

Syntaxe

- -
controleurs = window.controllers
-
- - - -

Spécification

- -

Spécifique à XUL. Ne fait pas partie de la spécification.

- -

Par défaut, le contrôleur d'une fenêtre contient le code qui prend en charge les commandes globales de la fenêtre.

- -

Le code Chrome peut ajouter des contrôleurs (à utiliser conjointement avec les fonctions goDoCommand et goUpdateCommand dans globalOverlay.js).

- -

Cependant, les contrôleurs ajoutés doivent être explicitement supprimés lorsque la fenêtre est déchargée, car cela n'est pas fait automatiquement.
- Chaque suppression manquante peut provoquer le

-bug 415775: - -
ASSERTION: XPConnect is being called on a scope without a 'Components' property!
\ No newline at end of file diff --git a/files/fr/web/api/window/controllers/index.md b/files/fr/web/api/window/controllers/index.md new file mode 100644 index 0000000000..9f96ce9c98 --- /dev/null +++ b/files/fr/web/api/window/controllers/index.md @@ -0,0 +1,40 @@ +--- +title: Window.controllers +slug: Web/API/Window/controllers +tags: + - API + - HTML DOM + - NeedMarkupWork + - NeedSpecTavle + - NeedsCompatTable + - Property + - Reference + - Window +translation_of: Web/API/Window/controllers +--- +
{{APIRef}}{{non-standard_header}}
+ +

Retourne les contrôleurs XUL de la fenêtre chrome.

+ +

Syntaxe

+ +
controleurs = window.controllers
+
+ + + +

Spécification

+ +

Spécifique à XUL. Ne fait pas partie de la spécification.

+ +

Par défaut, le contrôleur d'une fenêtre contient le code qui prend en charge les commandes globales de la fenêtre.

+ +

Le code Chrome peut ajouter des contrôleurs (à utiliser conjointement avec les fonctions goDoCommand et goUpdateCommand dans globalOverlay.js).

+ +

Cependant, les contrôleurs ajoutés doivent être explicitement supprimés lorsque la fenêtre est déchargée, car cela n'est pas fait automatiquement.
+ Chaque suppression manquante peut provoquer le

+bug 415775: + +
ASSERTION: XPConnect is being called on a scope without a 'Components' property!
\ No newline at end of file diff --git a/files/fr/web/api/window/copy_event/index.html b/files/fr/web/api/window/copy_event/index.html deleted file mode 100644 index bde3e7a47c..0000000000 --- a/files/fr/web/api/window/copy_event/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: 'Window: copy event' -slug: Web/API/Window/copy_event -tags: - - API - - Clippboard API - - Copie - - Event - - Evènement - - Reference - - Window - - copy -translation_of: Web/API/Window/copy_event ---- -
{{APIRef}}
- -

L'événement copy se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur.

- - - - - - - - - - - - - - - - - - - - -
BullesOui
AnnulableOui
Interface{{domxref("ClipboardEvent")}}
Propriété de gestionnaire d'événement{{domxref("HTMLElement/oncopy", "oncopy")}}
- -

La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de copie. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le Element: copy event.

- -

Exemples

- -
window.addEventListener('copy', (event) => {
-    console.log('action de copie lancée')
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('Clipboard API', '#clipboard-event-copy')}}{{Spec2('Clipboard API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.copy_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/copy_event/index.md b/files/fr/web/api/window/copy_event/index.md new file mode 100644 index 0000000000..bde3e7a47c --- /dev/null +++ b/files/fr/web/api/window/copy_event/index.md @@ -0,0 +1,75 @@ +--- +title: 'Window: copy event' +slug: Web/API/Window/copy_event +tags: + - API + - Clippboard API + - Copie + - Event + - Evènement + - Reference + - Window + - copy +translation_of: Web/API/Window/copy_event +--- +
{{APIRef}}
+ +

L'événement copy se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur.

+ + + + + + + + + + + + + + + + + + + + +
BullesOui
AnnulableOui
Interface{{domxref("ClipboardEvent")}}
Propriété de gestionnaire d'événement{{domxref("HTMLElement/oncopy", "oncopy")}}
+ +

La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de copie. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le Element: copy event.

+ +

Exemples

+ +
window.addEventListener('copy', (event) => {
+    console.log('action de copie lancée')
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('Clipboard API', '#clipboard-event-copy')}}{{Spec2('Clipboard API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.copy_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/customelements/index.html b/files/fr/web/api/window/customelements/index.html deleted file mode 100644 index 7d7d57c203..0000000000 --- a/files/fr/web/api/window/customelements/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Window.customElements -slug: Web/API/Window/customElements -tags: - - API - - CustomElementRegistry - - Property - - Reference - - Web Components - - Window - - custom elements -translation_of: Web/API/Window/customElements ---- -
{{APIRef}}
- -

La propriété en lecture seule customElements de l'interface {{domxref("Window")}} renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux éléments personnalisés et obtenir des informations sur des éléments personnalisés enregistrés.

- -

Syntaxe

- -
let registreElementsPersonnalises = window.customElements;
- -

Valeur retournée

- -

Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours.

- -

Exemples

- -

L'exemple le plus courant d'utilisation de cette propriété que vous verrez sera d'obtenir l'accès à la méthode {{domxref ("CustomElementRegistry.define()")}} pour définir et enregistrer un nouvel élément personnalisé, par exemple :

- -
let registreElementsPersonnalises = window.customElements;
-registreElementsPersonnalises.define('mon-element-personnalise', MonElementPersonnalise);
- -

Cependant, il est généralement raccourci en quelque chose comme :

- -
customElements.define('details-element',
-  class extends HTMLElement {
-    constructor() {
-      super();
-      const modele = document
-        .getElementById('modele-details-element')
-        .content;
-      const racineOmbre = this.attachShadow({mode: 'open'})
-        .appendChild(template.cloneNode(true));
-  }
-});
- -

Voir notre repo web-components-examples pour davantage d'exemples d'utilisation.

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}{{Spec2("HTML WHATWG")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.customElements")}}

diff --git a/files/fr/web/api/window/customelements/index.md b/files/fr/web/api/window/customelements/index.md new file mode 100644 index 0000000000..7d7d57c203 --- /dev/null +++ b/files/fr/web/api/window/customelements/index.md @@ -0,0 +1,68 @@ +--- +title: Window.customElements +slug: Web/API/Window/customElements +tags: + - API + - CustomElementRegistry + - Property + - Reference + - Web Components + - Window + - custom elements +translation_of: Web/API/Window/customElements +--- +
{{APIRef}}
+ +

La propriété en lecture seule customElements de l'interface {{domxref("Window")}} renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux éléments personnalisés et obtenir des informations sur des éléments personnalisés enregistrés.

+ +

Syntaxe

+ +
let registreElementsPersonnalises = window.customElements;
+ +

Valeur retournée

+ +

Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours.

+ +

Exemples

+ +

L'exemple le plus courant d'utilisation de cette propriété que vous verrez sera d'obtenir l'accès à la méthode {{domxref ("CustomElementRegistry.define()")}} pour définir et enregistrer un nouvel élément personnalisé, par exemple :

+ +
let registreElementsPersonnalises = window.customElements;
+registreElementsPersonnalises.define('mon-element-personnalise', MonElementPersonnalise);
+ +

Cependant, il est généralement raccourci en quelque chose comme :

+ +
customElements.define('details-element',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      const modele = document
+        .getElementById('modele-details-element')
+        .content;
+      const racineOmbre = this.attachShadow({mode: 'open'})
+        .appendChild(template.cloneNode(true));
+  }
+});
+ +

Voir notre repo web-components-examples pour davantage d'exemples d'utilisation.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}{{Spec2("HTML WHATWG")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.customElements")}}

diff --git a/files/fr/web/api/window/cut_event/index.html b/files/fr/web/api/window/cut_event/index.html deleted file mode 100644 index ad3a5de15d..0000000000 --- a/files/fr/web/api/window/cut_event/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 'Window: cut event' -slug: Web/API/Window/cut_event -tags: - - API - - API Presse-papiers - - Cut - - Evènement - - Reference - - Web - - Window -translation_of: Web/API/Window/cut_event ---- -
{{APIRef}}
- -

L'événement cut est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur.

- - - - - - - - - - - - - - - - - - - - -
BullesOui
AnnulableOui
Interface{{domxref("ClipboardEvent")}}
Propriété de gestionnaire d'événements{{domxref("HTMLElement/oncut", "oncut")}}
- -

La cible d'origine de cet événement est le {{domxref("Element")}} qui était la cible prévue de l'action cut. Vous pouvez écouter cet événement sur l'interface {{domxref("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur l'événement Element: cut event.

- -

Exemples

- -
window.addEventListener('cut', (event) => {
-    console.log('cut action initiated')
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('Clipboard API', '#clipboard-event-cut')}}{{Spec2('Clipboard API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.cut_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/cut_event/index.md b/files/fr/web/api/window/cut_event/index.md new file mode 100644 index 0000000000..ad3a5de15d --- /dev/null +++ b/files/fr/web/api/window/cut_event/index.md @@ -0,0 +1,74 @@ +--- +title: 'Window: cut event' +slug: Web/API/Window/cut_event +tags: + - API + - API Presse-papiers + - Cut + - Evènement + - Reference + - Web + - Window +translation_of: Web/API/Window/cut_event +--- +
{{APIRef}}
+ +

L'événement cut est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur.

+ + + + + + + + + + + + + + + + + + + + +
BullesOui
AnnulableOui
Interface{{domxref("ClipboardEvent")}}
Propriété de gestionnaire d'événements{{domxref("HTMLElement/oncut", "oncut")}}
+ +

La cible d'origine de cet événement est le {{domxref("Element")}} qui était la cible prévue de l'action cut. Vous pouvez écouter cet événement sur l'interface {{domxref("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur l'événement Element: cut event.

+ +

Exemples

+ +
window.addEventListener('cut', (event) => {
+    console.log('cut action initiated')
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('Clipboard API', '#clipboard-event-cut')}}{{Spec2('Clipboard API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.cut_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/defaultstatus/index.html b/files/fr/web/api/window/defaultstatus/index.html deleted file mode 100644 index 125688eca6..0000000000 --- a/files/fr/web/api/window/defaultstatus/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Window.defaultStatus -slug: Web/API/Window/defaultStatus -tags: - - API - - HTML DOM - - NeedsCompatTable - - NeedsExample - - NeedsMarkupWork - - NeedsSpecTable - - Obsolete - - Propriété - - Reference - - Window -translation_of: Web/API/Window/defaultStatus ---- -

{{ obsolete_header(23) }}

- -

{{ APIRef() }}

- -

Obtient / définit le texte de la barre d'état pour la fenêtre donnée.

- -

Syntaxe

- -
var sMsg = window.defaultStatus;
-window.defaultStatus = sMsg;
-
- -

Paramètres

- - - -

Exemple

- -
<html>
- <body onload="window.defaultStatus='salut!';"/>
-  <button onclick="window.confirm('Êtes-vous sûr de vouloir quitter?');">confirmer</button>
- </body>
-</html>
-
- -

Notes

- -

Pour définir le statut une fois la fenêtre ouverte, utilisez {{domxref("window.status")}}.

- -

Spécification

- -

HTML5

diff --git a/files/fr/web/api/window/defaultstatus/index.md b/files/fr/web/api/window/defaultstatus/index.md new file mode 100644 index 0000000000..125688eca6 --- /dev/null +++ b/files/fr/web/api/window/defaultstatus/index.md @@ -0,0 +1,50 @@ +--- +title: Window.defaultStatus +slug: Web/API/Window/defaultStatus +tags: + - API + - HTML DOM + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Obsolete + - Propriété + - Reference + - Window +translation_of: Web/API/Window/defaultStatus +--- +

{{ obsolete_header(23) }}

+ +

{{ APIRef() }}

+ +

Obtient / définit le texte de la barre d'état pour la fenêtre donnée.

+ +

Syntaxe

+ +
var sMsg = window.defaultStatus;
+window.defaultStatus = sMsg;
+
+ +

Paramètres

+ + + +

Exemple

+ +
<html>
+ <body onload="window.defaultStatus='salut!';"/>
+  <button onclick="window.confirm('Êtes-vous sûr de vouloir quitter?');">confirmer</button>
+ </body>
+</html>
+
+ +

Notes

+ +

Pour définir le statut une fois la fenêtre ouverte, utilisez {{domxref("window.status")}}.

+ +

Spécification

+ +

HTML5

diff --git a/files/fr/web/api/window/devicemotion_event/index.html b/files/fr/web/api/window/devicemotion_event/index.html deleted file mode 100644 index aa77418513..0000000000 --- a/files/fr/web/api/window/devicemotion_event/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: devicemotion -slug: Web/API/Window/devicemotion_event -translation_of: Web/API/Window/devicemotion_event -original_slug: FUEL/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/devicemotion_event/index.md b/files/fr/web/api/window/devicemotion_event/index.md new file mode 100644 index 0000000000..aa77418513 --- /dev/null +++ b/files/fr/web/api/window/devicemotion_event/index.md @@ -0,0 +1,98 @@ +--- +title: devicemotion +slug: Web/API/Window/devicemotion_event +translation_of: Web/API/Window/devicemotion_event +original_slug: FUEL/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 deleted file mode 100644 index 3978ebe617..0000000000 --- a/files/fr/web/api/window/deviceorientation_event/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: 'Window : l''événement deviceorientation' -slug: Web/API/Window/deviceorientation_event -tags: - - Device Orientation API - - Sensors - - Window Event - - events -translation_of: Web/API/Window/deviceorientation_event -original_slug: FUEL/Window/deviceorientation ---- -
{{APIRef}}
- -

L'événement deviceorientation est déclenché lorsque des données sont disponibles, à partir d'un capteur d'orientation, sur l'orientation actuelle de l'appareil par rapport au cadre de coordonnées de la Terre. Ces données sont recueillies à partir d'un magnétomètre à l'intérieur de l'appareil. Voir Données d'orientation et de mouvement expliquées pour plus de détails.

- - - - - - - - - - - - - - - - - - - - -
PropagationNon
AnnulableNon
InterfaceDeviceOrientationEvent
Propriété du gestionnaire d'événementswindow.ondeviceorientation
- -

Exemple

- -
if (window.DeviceOrientationEvent) {
-  window.addEventListener("deviceorientation", function(event) {
-    // alpha : rotation autour de l'axe z
-    var rotateDegrees = event.alpha;
-    // gamma : de gauche à droite
-    var leftToRight = event.gamma;
-    // bêta : mouvement avant-arrière
-    var frontToBack = event.beta;
-
-    handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
-  }, true);
-}
-
-var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
-  // faire quelque chose d'étonnant
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName("Device Orientation", "#deviceorientation", "l'événement DeviceOrientation")}}{{Spec2("Device Orientation")}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.deviceorientation_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/deviceorientation_event/index.md b/files/fr/web/api/window/deviceorientation_event/index.md new file mode 100644 index 0000000000..3978ebe617 --- /dev/null +++ b/files/fr/web/api/window/deviceorientation_event/index.md @@ -0,0 +1,84 @@ +--- +title: 'Window : l''événement deviceorientation' +slug: Web/API/Window/deviceorientation_event +tags: + - Device Orientation API + - Sensors + - Window Event + - events +translation_of: Web/API/Window/deviceorientation_event +original_slug: FUEL/Window/deviceorientation +--- +
{{APIRef}}
+ +

L'événement deviceorientation est déclenché lorsque des données sont disponibles, à partir d'un capteur d'orientation, sur l'orientation actuelle de l'appareil par rapport au cadre de coordonnées de la Terre. Ces données sont recueillies à partir d'un magnétomètre à l'intérieur de l'appareil. Voir Données d'orientation et de mouvement expliquées pour plus de détails.

+ + + + + + + + + + + + + + + + + + + + +
PropagationNon
AnnulableNon
InterfaceDeviceOrientationEvent
Propriété du gestionnaire d'événementswindow.ondeviceorientation
+ +

Exemple

+ +
if (window.DeviceOrientationEvent) {
+  window.addEventListener("deviceorientation", function(event) {
+    // alpha : rotation autour de l'axe z
+    var rotateDegrees = event.alpha;
+    // gamma : de gauche à droite
+    var leftToRight = event.gamma;
+    // bêta : mouvement avant-arrière
+    var frontToBack = event.beta;
+
+    handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
+  }, true);
+}
+
+var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
+  // faire quelque chose d'étonnant
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName("Device Orientation", "#deviceorientation", "l'événement DeviceOrientation")}}{{Spec2("Device Orientation")}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.deviceorientation_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/devicepixelratio/index.html b/files/fr/web/api/window/devicepixelratio/index.html deleted file mode 100644 index f7a9d3a7bf..0000000000 --- a/files/fr/web/api/window/devicepixelratio/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Window.devicePixelRatio -slug: Web/API/Window/devicePixelRatio -translation_of: Web/API/Window/devicePixelRatio ---- -

{{APIRef}}

- -

La propriété en lecture seule Window.devicePixelRatio retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips").

- -

Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes).

- -

Syntaxe

- -
valeur = window.devicePixelRatio;
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}{{Spec2("CSSOM View")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.devicePixelRatio")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/devicepixelratio/index.md b/files/fr/web/api/window/devicepixelratio/index.md new file mode 100644 index 0000000000..f7a9d3a7bf --- /dev/null +++ b/files/fr/web/api/window/devicepixelratio/index.md @@ -0,0 +1,45 @@ +--- +title: Window.devicePixelRatio +slug: Web/API/Window/devicePixelRatio +translation_of: Web/API/Window/devicePixelRatio +--- +

{{APIRef}}

+ +

La propriété en lecture seule Window.devicePixelRatio retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips").

+ +

Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes).

+ +

Syntaxe

+ +
valeur = window.devicePixelRatio;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}{{Spec2("CSSOM View")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.devicePixelRatio")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/dialogarguments/index.html b/files/fr/web/api/window/dialogarguments/index.html deleted file mode 100644 index 1bd4d4ece5..0000000000 --- a/files/fr/web/api/window/dialogarguments/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Window.dialogArguments -slug: Web/API/Window/dialogArguments -tags: - - API - - Déprécié - - HTML DOM - - NeedsExample - - NeedsMarkupWork - - NeedsSpecTable - - Property - - Reference - - Window -translation_of: Web/API/Window/dialogArguments ---- -

{{ deprecated_header() }}{{APIRef}}

- -

La propriété dialogArguments renvoie les paramètres qui ont été transmis à la méthode {{domxref("window.showModalDialog()")}} method. Cela vous permet de déterminer quels paramètres ont été spécifiés lors de la boîte de dialogue modale.

- -

Syntaxe

- -
valeur = window.dialogArguments;
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.dialogArguments")}}

diff --git a/files/fr/web/api/window/dialogarguments/index.md b/files/fr/web/api/window/dialogarguments/index.md new file mode 100644 index 0000000000..1bd4d4ece5 --- /dev/null +++ b/files/fr/web/api/window/dialogarguments/index.md @@ -0,0 +1,26 @@ +--- +title: Window.dialogArguments +slug: Web/API/Window/dialogArguments +tags: + - API + - Déprécié + - HTML DOM + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Property + - Reference + - Window +translation_of: Web/API/Window/dialogArguments +--- +

{{ deprecated_header() }}{{APIRef}}

+ +

La propriété dialogArguments renvoie les paramètres qui ont été transmis à la méthode {{domxref("window.showModalDialog()")}} method. Cela vous permet de déterminer quels paramètres ont été spécifiés lors de la boîte de dialogue modale.

+ +

Syntaxe

+ +
valeur = window.dialogArguments;
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.dialogArguments")}}

diff --git a/files/fr/web/api/window/directories/index.html b/files/fr/web/api/window/directories/index.html deleted file mode 100644 index b0255c82be..0000000000 --- a/files/fr/web/api/window/directories/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Window.directories -slug: Web/API/Window/directories -tags: - - API - - HTML DOM - - NeedsCompatTable - - NeedsExample - - NeedsMarkupWork - - NeedsSpecTable - - Obsolete - - Propriété - - Reference - - Window -translation_of: Web/API/Window/directories ---- -

{{ obsolete_header("2.0") }}

- -

{{ APIRef() }}

- -

Retourne l'objet de la barre d'outils de la barre personnelle de la fenêtre. Utilisez plutôt {{ domxref("window.personalbar") }}.

- -

Syntaxe

- -
var dirBar = window.directories;
-
- -

Paramètres

- -

dirBar est un objet du type BarProp.

- -

Exemple

- -
<script>
- function dirs() {
-  alert(window.directories);
- }
-</script>
-
- -

Spécification

- -

Ne fait pas partie des spécifications.

diff --git a/files/fr/web/api/window/directories/index.md b/files/fr/web/api/window/directories/index.md new file mode 100644 index 0000000000..b0255c82be --- /dev/null +++ b/files/fr/web/api/window/directories/index.md @@ -0,0 +1,43 @@ +--- +title: Window.directories +slug: Web/API/Window/directories +tags: + - API + - HTML DOM + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Obsolete + - Propriété + - Reference + - Window +translation_of: Web/API/Window/directories +--- +

{{ obsolete_header("2.0") }}

+ +

{{ APIRef() }}

+ +

Retourne l'objet de la barre d'outils de la barre personnelle de la fenêtre. Utilisez plutôt {{ domxref("window.personalbar") }}.

+ +

Syntaxe

+ +
var dirBar = window.directories;
+
+ +

Paramètres

+ +

dirBar est un objet du type BarProp.

+ +

Exemple

+ +
<script>
+ function dirs() {
+  alert(window.directories);
+ }
+</script>
+
+ +

Spécification

+ +

Ne fait pas partie des spécifications.

diff --git a/files/fr/web/api/window/document/index.html b/files/fr/web/api/window/document/index.html deleted file mode 100644 index 70769ed0b9..0000000000 --- a/files/fr/web/api/window/document/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Window.document -slug: Web/API/Window/document -tags: - - API - - HTML DOM - - Propriété - - Reference - - Window -translation_of: Web/API/Window/document ---- -
{{APIRef}}
- -

window.document renvoie une référence au document contenu dans la fenêtre.

- -

Exemple

- -
console.log(window.document.title);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationsStatutCommentaires
{{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.document")}}

diff --git a/files/fr/web/api/window/document/index.md b/files/fr/web/api/window/document/index.md new file mode 100644 index 0000000000..70769ed0b9 --- /dev/null +++ b/files/fr/web/api/window/document/index.md @@ -0,0 +1,45 @@ +--- +title: Window.document +slug: Web/API/Window/document +tags: + - API + - HTML DOM + - Propriété + - Reference + - Window +translation_of: Web/API/Window/document +--- +
{{APIRef}}
+ +

window.document renvoie une référence au document contenu dans la fenêtre.

+ +

Exemple

+ +
console.log(window.document.title);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationsStatutCommentaires
{{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.document")}}

diff --git a/files/fr/web/api/window/domcontentloaded_event/index.html b/files/fr/web/api/window/domcontentloaded_event/index.html deleted file mode 100644 index a2e989049d..0000000000 --- a/files/fr/web/api/window/domcontentloaded_event/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/API/Window/DOMContentLoaded_event -translation_of: Web/API/Window/DOMContentLoaded_event -original_slug: Web/Events/DOMContentLoaded ---- -
{{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

- - diff --git a/files/fr/web/api/window/domcontentloaded_event/index.md b/files/fr/web/api/window/domcontentloaded_event/index.md new file mode 100644 index 0000000000..a2e989049d --- /dev/null +++ b/files/fr/web/api/window/domcontentloaded_event/index.md @@ -0,0 +1,81 @@ +--- +title: DOMContentLoaded +slug: Web/API/Window/DOMContentLoaded_event +translation_of: Web/API/Window/DOMContentLoaded_event +original_slug: Web/Events/DOMContentLoaded +--- +
{{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

+ + diff --git a/files/fr/web/api/window/dump/index.html b/files/fr/web/api/window/dump/index.html deleted file mode 100644 index 8a44c0818d..0000000000 --- a/files/fr/web/api/window/dump/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: window.dump -slug: Web/API/Window/dump -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/Window/dump ---- -

{{ ApiRef() }}

-

Résumé

-

Affiche des messages dans la console (native).

-

Syntaxe

-
dump(message);
-
- -

Notes

-

dump est habituellement utilisé pour débogage du JavaScript. Du code avec permissions peut également utiliser Components.utils.reportError et nsIConsoleService pour afficher des messages dans la console JavaScript.

-

Dans Gecko, dump est désactivé par défaut – il ne fait rien mais ne génère aucune erreur. Pour que dump écrive dans le flux standard de sortie, vous devez l'activer en mettant la préférence browser.dom.window.dump.enabled à true. Vous pouvez définir cette préférence dans about:config ou dans un fichier user.js.

-

Vous aurez besoin d'une console pour voir quelque chose. Si vous n'en avez pas déjà une, fermez et réouvrez le programme en ajoutant le paramètre -console à la ligne de commande.

-

dump est également disponible au composants XPCOM implémentés en JavaScript, même si window n'est pas l'objet global dans ce contexte.

-

Spécification

-

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/window/dump/index.md b/files/fr/web/api/window/dump/index.md new file mode 100644 index 0000000000..8a44c0818d --- /dev/null +++ b/files/fr/web/api/window/dump/index.md @@ -0,0 +1,25 @@ +--- +title: window.dump +slug: Web/API/Window/dump +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/Window/dump +--- +

{{ ApiRef() }}

+

Résumé

+

Affiche des messages dans la console (native).

+

Syntaxe

+
dump(message);
+
+ +

Notes

+

dump est habituellement utilisé pour débogage du JavaScript. Du code avec permissions peut également utiliser Components.utils.reportError et nsIConsoleService pour afficher des messages dans la console JavaScript.

+

Dans Gecko, dump est désactivé par défaut – il ne fait rien mais ne génère aucune erreur. Pour que dump écrive dans le flux standard de sortie, vous devez l'activer en mettant la préférence browser.dom.window.dump.enabled à true. Vous pouvez définir cette préférence dans about:config ou dans un fichier user.js.

+

Vous aurez besoin d'une console pour voir quelque chose. Si vous n'en avez pas déjà une, fermez et réouvrez le programme en ajoutant le paramètre -console à la ligne de commande.

+

dump est également disponible au composants XPCOM implémentés en JavaScript, même si window n'est pas l'objet global dans ce contexte.

+

Spécification

+

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/window/event/index.html b/files/fr/web/api/window/event/index.html deleted file mode 100644 index 9876f88745..0000000000 --- a/files/fr/web/api/window/event/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Window.event -slug: Web/API/Window/event -tags: - - API - - Evènement - - Gestionnaire d'évènements - - HTML DOM - - Lecture seulement - - Propriété - - Window -translation_of: Web/API/Window/event ---- -
{{APIRef("DOM")}}
- -

L'événement de propriété {{domxref("Window")}} en lecture seule renvoie le {{domxref("Event")}} qui est actuellement géré par le code du site. En dehors du contexte d'un gestionnaire d'événements, la valeur est toujours undefined.

- -

Vous devez éviter d'utiliser cette propriété dans un nouveau code et utiliser à la place le {{domxref ("Event")}} transmis à la fonction de gestionnaire d'événements. Cette propriété n'est pas prise en charge universellement et même lorsqu'elle est prise en charge, elle introduit une fragilité potentielle dans votre code.

- -
-

Note: Cette propriété peut être fragile, dans la mesure où il peut y avoir des situations dans lesquelles l'événement renvoyé n'est pas la valeur attendue. De plus, Window.event n'est pas précis pour les événements distribués dans {{Glossary("shadow tree", "shadow trees")}}.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', "#dom-window-event", "Window.event")}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/event/index.md b/files/fr/web/api/window/event/index.md new file mode 100644 index 0000000000..9876f88745 --- /dev/null +++ b/files/fr/web/api/window/event/index.md @@ -0,0 +1,49 @@ +--- +title: Window.event +slug: Web/API/Window/event +tags: + - API + - Evènement + - Gestionnaire d'évènements + - HTML DOM + - Lecture seulement + - Propriété + - Window +translation_of: Web/API/Window/event +--- +
{{APIRef("DOM")}}
+ +

L'événement de propriété {{domxref("Window")}} en lecture seule renvoie le {{domxref("Event")}} qui est actuellement géré par le code du site. En dehors du contexte d'un gestionnaire d'événements, la valeur est toujours undefined.

+ +

Vous devez éviter d'utiliser cette propriété dans un nouveau code et utiliser à la place le {{domxref ("Event")}} transmis à la fonction de gestionnaire d'événements. Cette propriété n'est pas prise en charge universellement et même lorsqu'elle est prise en charge, elle introduit une fragilité potentielle dans votre code.

+ +
+

Note: Cette propriété peut être fragile, dans la mesure où il peut y avoir des situations dans lesquelles l'événement renvoyé n'est pas la valeur attendue. De plus, Window.event n'est pas précis pour les événements distribués dans {{Glossary("shadow tree", "shadow trees")}}.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', "#dom-window-event", "Window.event")}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/find/index.html b/files/fr/web/api/window/find/index.html deleted file mode 100644 index b9743102e6..0000000000 --- a/files/fr/web/api/window/find/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Window.find() -slug: Web/API/Window/find -tags: - - API - - HTML DOM - - Méthode - - NeedsCompatTable - - NeedsContent - - Non-standard - - Reference - - Window - - find -translation_of: Web/API/Window/find ---- -
{{ApiRef}}{{Non-standard_Header}}
- -
-

Note: La prise en charge de Window.find() pourrait changer dans les futures versions de Gecko. Voir {{Bug("672395")}}.

-
- -

La méthode Window.find() trouve une chaîne dans une fenêtre.

- -

Syntaxe

- -
window.find(aString, aCaseSensitive, aBackwards, aWrapAround,
-            aWholeWord, aSearchInFrames, aShowDialog);
- -
-
aString
-
La chaîne de caractère à rechercher.
-
aCaseSensitive
-
{{jsxref("Boolean")}}. Si true, spécifie une recherche sensible à la casse.
-
aBackwards
-
{{jsxref("Boolean")}}. Si true, spécifie une recherche vers l'arrière.
-
aWrapAround
-
{{jsxref("Boolean")}}. Si true, spécifie une recherche enveloppante.
-
aWholeWord {{Unimplemented_Inline}}
-
{{jsxref("Boolean")}}. Si true, spécifie une recherche de mot entier. Ceci n'est pas implémenté; voir {{bug(481513)}}.
-
aSearchInFrames
-
{{jsxref("Boolean")}}. Si true, spécifie une recherche dans les cadres.
-
- -

Retourne

- -

true si la chaîne est trouvé; autrement, false.

- -

Exemple

- -

JavaScript

- -
findString = function findText(text) {
-  alert("String \x22" + text + "\x22 found? " + window.find(text));
-}
- -

HTML

- -
<p>Apples, Bananas, and Oranges.</p>
-<button type="button" onClick='findString("Apples")'>Search for Apples</button>
-<button type="button" onClick='findString("Banana")'>Search for Banana</button>
-<button type="button" onClick='findString("Orange")'>Search for Orange</button>
-
- -

Résultat

- -

{{EmbedLiveSample("Example")}}

- -

Notes

- -

Dans certains navigateurs, Window.find() sélectionne (met en évidence) le contenu trouvé sur le site.

- -

Spécification

- -

Cela ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

Cette méthode fonctionne dans de nombreux navigateurs modernes, notamment Firefox, Chrome, et Safari.

diff --git a/files/fr/web/api/window/find/index.md b/files/fr/web/api/window/find/index.md new file mode 100644 index 0000000000..b9743102e6 --- /dev/null +++ b/files/fr/web/api/window/find/index.md @@ -0,0 +1,78 @@ +--- +title: Window.find() +slug: Web/API/Window/find +tags: + - API + - HTML DOM + - Méthode + - NeedsCompatTable + - NeedsContent + - Non-standard + - Reference + - Window + - find +translation_of: Web/API/Window/find +--- +
{{ApiRef}}{{Non-standard_Header}}
+ +
+

Note: La prise en charge de Window.find() pourrait changer dans les futures versions de Gecko. Voir {{Bug("672395")}}.

+
+ +

La méthode Window.find() trouve une chaîne dans une fenêtre.

+ +

Syntaxe

+ +
window.find(aString, aCaseSensitive, aBackwards, aWrapAround,
+            aWholeWord, aSearchInFrames, aShowDialog);
+ +
+
aString
+
La chaîne de caractère à rechercher.
+
aCaseSensitive
+
{{jsxref("Boolean")}}. Si true, spécifie une recherche sensible à la casse.
+
aBackwards
+
{{jsxref("Boolean")}}. Si true, spécifie une recherche vers l'arrière.
+
aWrapAround
+
{{jsxref("Boolean")}}. Si true, spécifie une recherche enveloppante.
+
aWholeWord {{Unimplemented_Inline}}
+
{{jsxref("Boolean")}}. Si true, spécifie une recherche de mot entier. Ceci n'est pas implémenté; voir {{bug(481513)}}.
+
aSearchInFrames
+
{{jsxref("Boolean")}}. Si true, spécifie une recherche dans les cadres.
+
+ +

Retourne

+ +

true si la chaîne est trouvé; autrement, false.

+ +

Exemple

+ +

JavaScript

+ +
findString = function findText(text) {
+  alert("String \x22" + text + "\x22 found? " + window.find(text));
+}
+ +

HTML

+ +
<p>Apples, Bananas, and Oranges.</p>
+<button type="button" onClick='findString("Apples")'>Search for Apples</button>
+<button type="button" onClick='findString("Banana")'>Search for Banana</button>
+<button type="button" onClick='findString("Orange")'>Search for Orange</button>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Notes

+ +

Dans certains navigateurs, Window.find() sélectionne (met en évidence) le contenu trouvé sur le site.

+ +

Spécification

+ +

Cela ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

Cette méthode fonctionne dans de nombreux navigateurs modernes, notamment Firefox, Chrome, et Safari.

diff --git a/files/fr/web/api/window/focus/index.html b/files/fr/web/api/window/focus/index.html deleted file mode 100644 index 02c25eb163..0000000000 --- a/files/fr/web/api/window/focus/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Window.focus() -slug: Web/API/Window/focus -translation_of: Web/API/Window/focus ---- -

{{APIRef}}

- -

Résumé

- -

Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonction des réglages utilisateurs, et ne garantit pas que la fenêtre sera au-dessus des autres au retour de cette méthode.

- -

Syntaxe

- -
window.focus()
-
- -

Exemple

- -
if (clicked) { window.focus(); }
-
- -

Spécification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}}{{Spec2('HTML WHATWG')}} 
\ No newline at end of file diff --git a/files/fr/web/api/window/focus/index.md b/files/fr/web/api/window/focus/index.md new file mode 100644 index 0000000000..02c25eb163 --- /dev/null +++ b/files/fr/web/api/window/focus/index.md @@ -0,0 +1,37 @@ +--- +title: Window.focus() +slug: Web/API/Window/focus +translation_of: Web/API/Window/focus +--- +

{{APIRef}}

+ +

Résumé

+ +

Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonction des réglages utilisateurs, et ne garantit pas que la fenêtre sera au-dessus des autres au retour de cette méthode.

+ +

Syntaxe

+ +
window.focus()
+
+ +

Exemple

+ +
if (clicked) { window.focus(); }
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}}{{Spec2('HTML WHATWG')}} 
\ No newline at end of file diff --git a/files/fr/web/api/window/frameelement/index.html b/files/fr/web/api/window/frameelement/index.html deleted file mode 100644 index 4a36ff3fd6..0000000000 --- a/files/fr/web/api/window/frameelement/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Window.frameElement -slug: Web/API/Window/frameElement -tags: - - API - - DOM - - Propriété - - Reference - - Window -translation_of: Web/API/Window/frameElement ---- -
{{ApiRef}}
- -

La propriété Window.frameElement renvoie l'élément (tel que {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}) dans lequel la fenêtre est intégrée.

- -
-

Note: Malgré le nom de cette propriété, elle fonctionne pour les documents intégrés dans n'importe quel point d'incorporation, y compris {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, ou {{HTMLElement("embed")}}.

-
- -

Syntaxe

- -
const frameEl = window.frameElement
-
- -

Valeur

- -

L'élément dans lequel la fenêtre est intégrée. Si la fenêtre n'est pas intégrée dans un autre document, ou si le document dans lequel elle est intégrée a un {{glossary("origin")}}, la valeur est {{jsxref("null")}} à la place.

- -

Exemple

- -
const frameEl = window.frameElement;
-// Si nous sommes incorporés, modifiez l'URL de l'élément contenant en 'http://mozilla.org/'
-if (frameEl) {
-  frameEl.src = 'http://mozilla.org/';
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'browsers.html#dom-frameelement', 'Window.frameElement')}}{{ Spec2('WebRTC 1.0') }}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.frameElement")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/frameelement/index.md b/files/fr/web/api/window/frameelement/index.md new file mode 100644 index 0000000000..4a36ff3fd6 --- /dev/null +++ b/files/fr/web/api/window/frameelement/index.md @@ -0,0 +1,66 @@ +--- +title: Window.frameElement +slug: Web/API/Window/frameElement +tags: + - API + - DOM + - Propriété + - Reference + - Window +translation_of: Web/API/Window/frameElement +--- +
{{ApiRef}}
+ +

La propriété Window.frameElement renvoie l'élément (tel que {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}) dans lequel la fenêtre est intégrée.

+ +
+

Note: Malgré le nom de cette propriété, elle fonctionne pour les documents intégrés dans n'importe quel point d'incorporation, y compris {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, ou {{HTMLElement("embed")}}.

+
+ +

Syntaxe

+ +
const frameEl = window.frameElement
+
+ +

Valeur

+ +

L'élément dans lequel la fenêtre est intégrée. Si la fenêtre n'est pas intégrée dans un autre document, ou si le document dans lequel elle est intégrée a un {{glossary("origin")}}, la valeur est {{jsxref("null")}} à la place.

+ +

Exemple

+ +
const frameEl = window.frameElement;
+// Si nous sommes incorporés, modifiez l'URL de l'élément contenant en 'http://mozilla.org/'
+if (frameEl) {
+  frameEl.src = 'http://mozilla.org/';
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'browsers.html#dom-frameelement', 'Window.frameElement')}}{{ Spec2('WebRTC 1.0') }}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.frameElement")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/frames/index.html b/files/fr/web/api/window/frames/index.html deleted file mode 100644 index 9a1c20a92f..0000000000 --- a/files/fr/web/api/window/frames/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Window.frames -slug: Web/API/Window/frames -tags: - - API - - DOM - - DOM Reference - - DOM_0 - - Gecko - - NeedsContent - - NeedsUpdate - - Property - - Reference -translation_of: Web/API/Window/frames ---- -

{{ApiRef("Window")}}

- -

Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, listant les frames présentes dans la fenêtre courante.

- -

Syntaxe

- -
frameList = window.frames;
-
- - - -

Exemple

- -
var frames = window.frames; // ou // var frames = window.parent.frames;
-for (var i = 0; i < frames.length; i++) {
-  // faire quelque chose avec chaque subframe en tant que frames[i]
-  frames[i].document.body.style.background = "red";
-}
-
- -

Spécifications

- -

{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}

\ No newline at end of file diff --git a/files/fr/web/api/window/frames/index.md b/files/fr/web/api/window/frames/index.md new file mode 100644 index 0000000000..9a1c20a92f --- /dev/null +++ b/files/fr/web/api/window/frames/index.md @@ -0,0 +1,43 @@ +--- +title: Window.frames +slug: Web/API/Window/frames +tags: + - API + - DOM + - DOM Reference + - DOM_0 + - Gecko + - NeedsContent + - NeedsUpdate + - Property + - Reference +translation_of: Web/API/Window/frames +--- +

{{ApiRef("Window")}}

+ +

Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, listant les frames présentes dans la fenêtre courante.

+ +

Syntaxe

+ +
frameList = window.frames;
+
+ + + +

Exemple

+ +
var frames = window.frames; // ou // var frames = window.parent.frames;
+for (var i = 0; i < frames.length; i++) {
+  // faire quelque chose avec chaque subframe en tant que frames[i]
+  frames[i].document.body.style.background = "red";
+}
+
+ +

Spécifications

+ +

{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}

\ No newline at end of file diff --git a/files/fr/web/api/window/fullscreen/index.html b/files/fr/web/api/window/fullscreen/index.html deleted file mode 100644 index dbd330f4f5..0000000000 --- a/files/fr/web/api/window/fullscreen/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: window.fullScreen -slug: Web/API/Window/fullScreen -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/Window/fullScreen ---- -

{{ ApiRef() }}

-

Résumé

-

Cette propriété indique si la fenêtre est affichée en mode plein écran ou non. Elle n'est fiable qu'à partir de Gecko 1.9 (Firefox 3), voir les Notes plus bas.

-

Syntaxe

-
var isInFullScreen = windowRef.fullScreen;
-
-

Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner.

-

Valeur de retour

-
-
- isInFullScreen
-
- Une valeur booléenne. Signification des valeurs :
-
- -

Exemples

-

Spécification

-

{{ DOM0() }}

-

Notes

-

Cette propriété n'est fiable qu'à partir de Mozilla 1.9 (Firefox 3). Mozilla 1.8 et les versions antérieures disposent de cette propriété, mais elle renvoie toujours false, même quand la fenêtre est en mode plein écran ({{ Bug(127013) }}).

\ No newline at end of file diff --git a/files/fr/web/api/window/fullscreen/index.md b/files/fr/web/api/window/fullscreen/index.md new file mode 100644 index 0000000000..dbd330f4f5 --- /dev/null +++ b/files/fr/web/api/window/fullscreen/index.md @@ -0,0 +1,32 @@ +--- +title: window.fullScreen +slug: Web/API/Window/fullScreen +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/Window/fullScreen +--- +

{{ ApiRef() }}

+

Résumé

+

Cette propriété indique si la fenêtre est affichée en mode plein écran ou non. Elle n'est fiable qu'à partir de Gecko 1.9 (Firefox 3), voir les Notes plus bas.

+

Syntaxe

+
var isInFullScreen = windowRef.fullScreen;
+
+

Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner.

+

Valeur de retour

+
+
+ isInFullScreen
+
+ Une valeur booléenne. Signification des valeurs :
+
+ +

Exemples

+

Spécification

+

{{ DOM0() }}

+

Notes

+

Cette propriété n'est fiable qu'à partir de Mozilla 1.9 (Firefox 3). Mozilla 1.8 et les versions antérieures disposent de cette propriété, mais elle renvoie toujours false, même quand la fenêtre est en mode plein écran ({{ Bug(127013) }}).

\ No newline at end of file diff --git a/files/fr/web/api/window/gamepadconnected_event/index.html b/files/fr/web/api/window/gamepadconnected_event/index.html deleted file mode 100644 index 4452ac1892..0000000000 --- a/files/fr/web/api/window/gamepadconnected_event/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: gamepadconnected -slug: Web/API/Window/gamepadconnected_event -translation_of: Web/API/Window/gamepadconnected_event ---- -

L'événement gamepadconnected est déclenché lorsque le navigateur détecte quand une manette a été connecté ou qu'un button/axe de la manette a été utilisé pour la première fois.
-  

- -

Informations générales

- -
-
Spécification
-
Gamepad
-
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.
gamepad {{readonlyInline}}{{domxref("Gamepad")}}The single gamepad attribute provides access to the associated gamepad data for this event.
- -

Exemple

- -
// Noter que l'API a toujours des préfixes vendeur dans les navigateurs l'implémentant
-window.addEventListener("gamepadconnected", function( event ) {
-
-    // Toutes la valeurs d'axes et les buttons sont accessibles à travers:
-    event.gamepad;
-
-});
-
- -

Evénements liés

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/window/gamepadconnected_event/index.md b/files/fr/web/api/window/gamepadconnected_event/index.md new file mode 100644 index 0000000000..4452ac1892 --- /dev/null +++ b/files/fr/web/api/window/gamepadconnected_event/index.md @@ -0,0 +1,86 @@ +--- +title: gamepadconnected +slug: Web/API/Window/gamepadconnected_event +translation_of: Web/API/Window/gamepadconnected_event +--- +

L'événement gamepadconnected est déclenché lorsque le navigateur détecte quand une manette a été connecté ou qu'un button/axe de la manette a été utilisé pour la première fois.
+  

+ +

Informations générales

+ +
+
Spécification
+
Gamepad
+
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.
gamepad {{readonlyInline}}{{domxref("Gamepad")}}The single gamepad attribute provides access to the associated gamepad data for this event.
+ +

Exemple

+ +
// Noter que l'API a toujours des préfixes vendeur dans les navigateurs l'implémentant
+window.addEventListener("gamepadconnected", function( event ) {
+
+    // Toutes la valeurs d'axes et les buttons sont accessibles à travers:
+    event.gamepad;
+
+});
+
+ +

Evénements liés

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/window/gamepaddisconnected_event/index.html b/files/fr/web/api/window/gamepaddisconnected_event/index.html deleted file mode 100644 index e4c36c1ece..0000000000 --- a/files/fr/web/api/window/gamepaddisconnected_event/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: gamepaddisconnected -slug: Web/API/Window/gamepaddisconnected_event -translation_of: Web/API/Window/gamepaddisconnected_event ---- -

L'événement gamepaddisconnected est déclenché lorsque le navigateur détecte le fait qu'une manette ait été débranchée.

- -

Informations générales

- -
-
Spécification
-
Gamepad
-
Interface
-
{{domxref("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.
gamepad {{readonlyInline}}{{domxref("Gamepad")}}The single gamepad attribute provides access to the associated gamepad data for this event.
- -

Evénements liés

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/window/gamepaddisconnected_event/index.md b/files/fr/web/api/window/gamepaddisconnected_event/index.md new file mode 100644 index 0000000000..e4c36c1ece --- /dev/null +++ b/files/fr/web/api/window/gamepaddisconnected_event/index.md @@ -0,0 +1,74 @@ +--- +title: gamepaddisconnected +slug: Web/API/Window/gamepaddisconnected_event +translation_of: Web/API/Window/gamepaddisconnected_event +--- +

L'événement gamepaddisconnected est déclenché lorsque le navigateur détecte le fait qu'une manette ait été débranchée.

+ +

Informations générales

+ +
+
Spécification
+
Gamepad
+
Interface
+
{{domxref("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.
gamepad {{readonlyInline}}{{domxref("Gamepad")}}The single gamepad attribute provides access to the associated gamepad data for this event.
+ +

Evénements liés

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/window/getcomputedstyle/index.html b/files/fr/web/api/window/getcomputedstyle/index.html deleted file mode 100644 index 2c4294f100..0000000000 --- a/files/fr/web/api/window/getcomputedstyle/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: window.getComputedStyle -slug: Web/API/Window/getComputedStyle -translation_of: Web/API/Window/getComputedStyle ---- -

{{ ApiRef() }}

- -

Résumé

- -

La méthode window.getComputedStyle() donne la  valeur calculée finale de toutes les propriétés CSS sur un élément.

- -

Syntaxe

- -
var style = window.getComputedStyle(element[, pseudoElt]);
- -
-
element
-
L’{{ domxref("Element") }} pour lequel vous voulez obtenir une valeur calculée.
-
pseudoElt {{ optional_inline() }}
-
Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être null (ou non spécifiée) pour les éléments communs.
-
- -
-

Note : Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre pseudoElt était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.

-
- -

La valeur de retour style est un objet CSSStyleDeclaration.

- -

Exemple

- -
var elem1 = document.getElementById("elemId");
-var style = window.getComputedStyle(elem1, null);
-
-// Ce qui équivaut à :
-// var style = document.defaultView.getComputedStyle(elem1, null);
-
- -
<style>
- #elem-container{
-   position: absolute;
-   left:     100px;
-   top:      200px;
-   height:   100px;
- }
-</style>
-
-<div id="elem-container">dummy</div>
-<div id="output"></div>
-
-<script>
-  function getTheStyle(){
-    var elem = document.getElementById("elem-container");
-    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
-    document.getElementById("output").innerHTML = theCSSprop;
-   }
-  getTheStyle();
-</script>
-
- -
function dumpComputedStyles(elem,prop) {
-
-  var cs = window.getComputedStyle(elem,null);
-  if (prop) {
-    console.log(prop+" : "+cs.getPropertyValue(prop));
-    return;
-  }
-  var len = cs.length;
-  for (var i=0;i<len;i++) {
-
-    var style = cs[i];
-    console.log(style+" : "+cs.getPropertyValue(style));
-  }
-
-}
- -

Description

- -

L'objet retourné est du même type que celui de la propriété {{domxref("HTMLElement.style", "style")}} de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode getComputedStyle est en lecture seule et peut être utilisée pour inspecter le style de l'élément y compris ceux ajoutés via un élément <style> ou une feuille de style externe. L'objet elt.style doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné.

- -

Le premier argument doit être un Element, sinon, si par exemple un #text Node est utilisé, une exception sera lancée. Depuis la version 1.9.2 de Gecko {{geckoRelease("1.9.2")}}, les URLs renvoyées ont désormais des guillemets autour de celles-ci: url("http://foo.com/bar.jpg").

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}{{Spec2("CSSOM")}}
{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", - "getComputedStyle()")}}{{Spec2("DOM2 Style")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.getComputedStyle")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/getcomputedstyle/index.md b/files/fr/web/api/window/getcomputedstyle/index.md new file mode 100644 index 0000000000..2c4294f100 --- /dev/null +++ b/files/fr/web/api/window/getcomputedstyle/index.md @@ -0,0 +1,116 @@ +--- +title: window.getComputedStyle +slug: Web/API/Window/getComputedStyle +translation_of: Web/API/Window/getComputedStyle +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

La méthode window.getComputedStyle() donne la  valeur calculée finale de toutes les propriétés CSS sur un élément.

+ +

Syntaxe

+ +
var style = window.getComputedStyle(element[, pseudoElt]);
+ +
+
element
+
L’{{ domxref("Element") }} pour lequel vous voulez obtenir une valeur calculée.
+
pseudoElt {{ optional_inline() }}
+
Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être null (ou non spécifiée) pour les éléments communs.
+
+ +
+

Note : Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre pseudoElt était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.

+
+ +

La valeur de retour style est un objet CSSStyleDeclaration.

+ +

Exemple

+ +
var elem1 = document.getElementById("elemId");
+var style = window.getComputedStyle(elem1, null);
+
+// Ce qui équivaut à :
+// var style = document.defaultView.getComputedStyle(elem1, null);
+
+ +
<style>
+ #elem-container{
+   position: absolute;
+   left:     100px;
+   top:      200px;
+   height:   100px;
+ }
+</style>
+
+<div id="elem-container">dummy</div>
+<div id="output"></div>
+
+<script>
+  function getTheStyle(){
+    var elem = document.getElementById("elem-container");
+    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
+    document.getElementById("output").innerHTML = theCSSprop;
+   }
+  getTheStyle();
+</script>
+
+ +
function dumpComputedStyles(elem,prop) {
+
+  var cs = window.getComputedStyle(elem,null);
+  if (prop) {
+    console.log(prop+" : "+cs.getPropertyValue(prop));
+    return;
+  }
+  var len = cs.length;
+  for (var i=0;i<len;i++) {
+
+    var style = cs[i];
+    console.log(style+" : "+cs.getPropertyValue(style));
+  }
+
+}
+ +

Description

+ +

L'objet retourné est du même type que celui de la propriété {{domxref("HTMLElement.style", "style")}} de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode getComputedStyle est en lecture seule et peut être utilisée pour inspecter le style de l'élément y compris ceux ajoutés via un élément <style> ou une feuille de style externe. L'objet elt.style doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné.

+ +

Le premier argument doit être un Element, sinon, si par exemple un #text Node est utilisé, une exception sera lancée. Depuis la version 1.9.2 de Gecko {{geckoRelease("1.9.2")}}, les URLs renvoyées ont désormais des guillemets autour de celles-ci: url("http://foo.com/bar.jpg").

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}{{Spec2("CSSOM")}}
{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", + "getComputedStyle()")}}{{Spec2("DOM2 Style")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.getComputedStyle")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/getdefaultcomputedstyle/index.html b/files/fr/web/api/window/getdefaultcomputedstyle/index.html deleted file mode 100644 index 7c2363a4e4..0000000000 --- a/files/fr/web/api/window/getdefaultcomputedstyle/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Window.getDefaultComputedStyle() -slug: Web/API/Window/getDefaultComputedStyle -tags: - - API - - CSS - - Method - - Reference -translation_of: Web/API/window/getDefaultComputedStyle ---- -
{{APIRef("CSSOM")}}{{Non-standard_header}}
- -

getDefaultComputedStyle() fournit les valeurs calculées par défaut de toutes les propriétés CSS d'un élément, en ignorant la mise en forme de l'auteur. C'est-à-dire que seules les mises en forme de l'agent utilisateur et de l'utilisateur sont pris en compte.

- -

Syntaxe

- -
var miseEnForme = window.getDefaultComputedStyle(element[, pseudoElt]);
-
- -
-
element
-
L'{{domxref("Element")}} dont on veut obtenir la mise en forme calculée.
-
pseudoElt {{optional_inline}}
-
Une chaîne indiquant le pseudo-élément à rechercher. Doit être null (ou non indiqué) pour les éléments ordinaires.
-
- -

Le style retourné est un objet CSSStyleDeclaration.

- -

Exemples

- -
var elem1 = document.getElementById("IdElem");
-var miseEnForme = window.getDefaultComputedStyle(elem1);
-
- -
<style>
-#conteneur-elem {
-   position: absolute;
-   left:     100px;
-   top:      200px;
-   height:   100px;
- }
-</style>
-
-<div id="conteneur-elem">factice</div>
-<div id="sortie"></div>
-
-<script>
-    var elem = document.getElementById("conteneur-elem");
-    var laPropCSS = window.getDefaultComputedStyle(elem).position;
-    document.getElementById("sortie").innerHTML = laPropCSS; // affichera "static"
-</script>
- -

Description

- -

L'objet retourné est du même type que l'objet retourné par getComputedStyle, mais il ne prend en compte que les règles user-agent et user.

- -

Utilisation avec des pseudo-éléments

- -

getDefaultComputedStyle peut extraire des informations de mise en forme à partir de pseudo-éléments (par exemple, ::after, ::before).

- -
<style>
- h3:after {
-   content: ' déchire !';
- }
-</style>
-
-<h3>contenu généré</h3>
-
-<script>
-  var h3       = document.querySelector('h3'),
-      resultat = getDefaultComputedStyle(h3, ':after').content;
-
-  console.log('le contenu généré est : ', resultat); // retourne 'none'
-</script>
-
- -

Notes

- -

La valeur retournée est, dans certains cas connus, expressément incorrecte par intention délibérée. En particulier, pour éviter le problème de sécurité appelé CSS History Leak, les navigateurs peuvent "mentir" sur la valeur utilisée pour un lien et toujours retourner des valeurs comme si l'utilisateur n'avait jamais visité le site concerné, et/ou limiter les styles qui peuvent être appliqués via l'utilisation du pseudo-sélecteur :visited. Voir http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ et http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-visited/ pour le détail des exemples de la manière dont cela est implémenté.

- -

Spécifications

- -

Proposé au groupe de travail CSS.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.getDefaultComputedStyle")}}

diff --git a/files/fr/web/api/window/getdefaultcomputedstyle/index.md b/files/fr/web/api/window/getdefaultcomputedstyle/index.md new file mode 100644 index 0000000000..7c2363a4e4 --- /dev/null +++ b/files/fr/web/api/window/getdefaultcomputedstyle/index.md @@ -0,0 +1,87 @@ +--- +title: Window.getDefaultComputedStyle() +slug: Web/API/Window/getDefaultComputedStyle +tags: + - API + - CSS + - Method + - Reference +translation_of: Web/API/window/getDefaultComputedStyle +--- +
{{APIRef("CSSOM")}}{{Non-standard_header}}
+ +

getDefaultComputedStyle() fournit les valeurs calculées par défaut de toutes les propriétés CSS d'un élément, en ignorant la mise en forme de l'auteur. C'est-à-dire que seules les mises en forme de l'agent utilisateur et de l'utilisateur sont pris en compte.

+ +

Syntaxe

+ +
var miseEnForme = window.getDefaultComputedStyle(element[, pseudoElt]);
+
+ +
+
element
+
L'{{domxref("Element")}} dont on veut obtenir la mise en forme calculée.
+
pseudoElt {{optional_inline}}
+
Une chaîne indiquant le pseudo-élément à rechercher. Doit être null (ou non indiqué) pour les éléments ordinaires.
+
+ +

Le style retourné est un objet CSSStyleDeclaration.

+ +

Exemples

+ +
var elem1 = document.getElementById("IdElem");
+var miseEnForme = window.getDefaultComputedStyle(elem1);
+
+ +
<style>
+#conteneur-elem {
+   position: absolute;
+   left:     100px;
+   top:      200px;
+   height:   100px;
+ }
+</style>
+
+<div id="conteneur-elem">factice</div>
+<div id="sortie"></div>
+
+<script>
+    var elem = document.getElementById("conteneur-elem");
+    var laPropCSS = window.getDefaultComputedStyle(elem).position;
+    document.getElementById("sortie").innerHTML = laPropCSS; // affichera "static"
+</script>
+ +

Description

+ +

L'objet retourné est du même type que l'objet retourné par getComputedStyle, mais il ne prend en compte que les règles user-agent et user.

+ +

Utilisation avec des pseudo-éléments

+ +

getDefaultComputedStyle peut extraire des informations de mise en forme à partir de pseudo-éléments (par exemple, ::after, ::before).

+ +
<style>
+ h3:after {
+   content: ' déchire !';
+ }
+</style>
+
+<h3>contenu généré</h3>
+
+<script>
+  var h3       = document.querySelector('h3'),
+      resultat = getDefaultComputedStyle(h3, ':after').content;
+
+  console.log('le contenu généré est : ', resultat); // retourne 'none'
+</script>
+
+ +

Notes

+ +

La valeur retournée est, dans certains cas connus, expressément incorrecte par intention délibérée. En particulier, pour éviter le problème de sécurité appelé CSS History Leak, les navigateurs peuvent "mentir" sur la valeur utilisée pour un lien et toujours retourner des valeurs comme si l'utilisateur n'avait jamais visité le site concerné, et/ou limiter les styles qui peuvent être appliqués via l'utilisation du pseudo-sélecteur :visited. Voir http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ et http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-visited/ pour le détail des exemples de la manière dont cela est implémenté.

+ +

Spécifications

+ +

Proposé au groupe de travail CSS.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.getDefaultComputedStyle")}}

diff --git a/files/fr/web/api/window/getselection/index.html b/files/fr/web/api/window/getselection/index.html deleted file mode 100644 index 579af3f9a0..0000000000 --- a/files/fr/web/api/window/getselection/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: window.getSelection -slug: Web/API/Window/getSelection -translation_of: Web/API/Window/getSelection ---- -

{{ ApiRef() }}

- -

Renvoie un objet selection représentant le ou les objets sélectionnés.

- -

Syntaxe

- -
selection = window.getSelection()
-
- -

Paramètres

- - - -

Exemple

- -
function foo() {
-   var selObj = window.getSelection();
-   alert(selObj);
-   var selRange = selObj.getRangeAt(0);
-   // travailler avec la sélection
-}
-
- -

Notes

- -

En JavaScript, lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode toString de l'objet Selection qui est passée. Dans l'exemple ci-dessus, selObj est automatiquement « convertie » lorsqu'elle est passée à window.alert. Cependant, pour utiliser une propriété ou méthode JavaScript de String comme length ou substr, il est nécessaire d'appeler manuellement la méthode toString. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian

- -

Spécification

- -

DOM Level 0. Ne fait partie d'aucune spécification.

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/getselection/index.md b/files/fr/web/api/window/getselection/index.md new file mode 100644 index 0000000000..579af3f9a0 --- /dev/null +++ b/files/fr/web/api/window/getselection/index.md @@ -0,0 +1,47 @@ +--- +title: window.getSelection +slug: Web/API/Window/getSelection +translation_of: Web/API/Window/getSelection +--- +

{{ ApiRef() }}

+ +

Renvoie un objet selection représentant le ou les objets sélectionnés.

+ +

Syntaxe

+ +
selection = window.getSelection()
+
+ +

Paramètres

+ + + +

Exemple

+ +
function foo() {
+   var selObj = window.getSelection();
+   alert(selObj);
+   var selRange = selObj.getRangeAt(0);
+   // travailler avec la sélection
+}
+
+ +

Notes

+ +

En JavaScript, lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode toString de l'objet Selection qui est passée. Dans l'exemple ci-dessus, selObj est automatiquement « convertie » lorsqu'elle est passée à window.alert. Cependant, pour utiliser une propriété ou méthode JavaScript de String comme length ou substr, il est nécessaire d'appeler manuellement la méthode toString. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian

+ +

Spécification

+ +

DOM Level 0. Ne fait partie d'aucune spécification.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/hashchange_event/index.html b/files/fr/web/api/window/hashchange_event/index.html deleted file mode 100644 index 59f62fcdd1..0000000000 --- a/files/fr/web/api/window/hashchange_event/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: hashchange -slug: Web/API/Window/hashchange_event -tags: - - Reference - - Web -translation_of: Web/API/Window/hashchange_event ---- -

L'événement hashchange est déclenché lorsque l'identificateur de fragment de l'URL a changé (la partie de l'URL qui suit le symbole #, y compris le symbole # lui-même).

- - - - - - - - - - - - - - - - - - - - - - - - -
BullesOui
AnnulableNon
Objets cibles{{domxref("Window")}}
Interface{{domxref("HashChangeEvent")}}
Action par défautAucune
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The browsing context (window).
type {{readonlyInline}}{{domxref("DOMString")}}Type de l'évènement
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
oldURL {{readonlyInline}}{{jsxref("String")}}The previous URL from which the window was navigated.
newURL {{readonlyInline}}{{jsxref("String")}}
- -

Il existe plusieurs scripts de secours listés sur cette page. Fondamentalement, ces scripts vérifient le location.hash à intervalles réguliers. Voici une version qui n'autorise qu'un seul gestionnaire à être lié à la propriété window.onhashchange:

- -
;(function(window) {
-
-  // Sortir si le navigateur implémente cet événement
-  if ("onhashchange" in window) { return; }
-
-  var location = window.location,
-    oldURL = location.href,
-    oldHash = location.hash;
-
-  // Vérifie la hash de la barre d'adresse toutes les 100ms
-  setInterval(function() {
-    var newURL = location.href,
-      newHash = location.hash;
-
-    // Si le hash a été changé et qu'un gestionnaire a été lié...
-    if (newHash != oldHash && typeof window.onhashchange === "function") {
-      // exécute le gestionnaire
-      window.onhashchange({
-        type: "hashchange",
-        oldURL: oldURL,
-        newURL: newURL
-      });
-
-      oldURL = newURL;
-      oldHash = newHash;
-    }
-  }, 100);
-
-})(window);
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}{{Spec2('HTML WHATWG')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.hashchange_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/hashchange_event/index.md b/files/fr/web/api/window/hashchange_event/index.md new file mode 100644 index 0000000000..59f62fcdd1 --- /dev/null +++ b/files/fr/web/api/window/hashchange_event/index.md @@ -0,0 +1,139 @@ +--- +title: hashchange +slug: Web/API/Window/hashchange_event +tags: + - Reference + - Web +translation_of: Web/API/Window/hashchange_event +--- +

L'événement hashchange est déclenché lorsque l'identificateur de fragment de l'URL a changé (la partie de l'URL qui suit le symbole #, y compris le symbole # lui-même).

+ + + + + + + + + + + + + + + + + + + + + + + + +
BullesOui
AnnulableNon
Objets cibles{{domxref("Window")}}
Interface{{domxref("HashChangeEvent")}}
Action par défautAucune
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The browsing context (window).
type {{readonlyInline}}{{domxref("DOMString")}}Type de l'évènement
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
oldURL {{readonlyInline}}{{jsxref("String")}}The previous URL from which the window was navigated.
newURL {{readonlyInline}}{{jsxref("String")}}
+ +

Il existe plusieurs scripts de secours listés sur cette page. Fondamentalement, ces scripts vérifient le location.hash à intervalles réguliers. Voici une version qui n'autorise qu'un seul gestionnaire à être lié à la propriété window.onhashchange:

+ +
;(function(window) {
+
+  // Sortir si le navigateur implémente cet événement
+  if ("onhashchange" in window) { return; }
+
+  var location = window.location,
+    oldURL = location.href,
+    oldHash = location.hash;
+
+  // Vérifie la hash de la barre d'adresse toutes les 100ms
+  setInterval(function() {
+    var newURL = location.href,
+      newHash = location.hash;
+
+    // Si le hash a été changé et qu'un gestionnaire a été lié...
+    if (newHash != oldHash && typeof window.onhashchange === "function") {
+      // exécute le gestionnaire
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}{{Spec2('HTML WHATWG')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.hashchange_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/history/index.html b/files/fr/web/api/window/history/index.html deleted file mode 100644 index 80fc573e76..0000000000 --- a/files/fr/web/api/window/history/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Window.history -slug: Web/API/Window/history -translation_of: Web/API/Window/history ---- -
{{APIRef}}
- -

La propriété en lecture seule Window.history renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée).

- -

L'objet History obtenu a les méthodes suivantes : voir la manipulation de l'historique du navigateur pour avoir plus de détails ainsi que des exemples.
- En particulier, cet article explique les caractéristiques des méthodes pushState() et replaceState()qu'il est utile de connaître avant de les utiliser.

- -

Exemple

- -
history.back();     // similaire au bouton de retour
-history.go(-1);     // similaire à history.back();
-
- -

Notes

- -

Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet History, situé dans le menu déroulant près des boutons précédent et suivant.

- -

Pour des raisons de sécurité, l'objet History n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer.

- -

Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode location.replace(), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie.

- -

Spécification

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusCommentaire
{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Window.history")}}

diff --git a/files/fr/web/api/window/history/index.md b/files/fr/web/api/window/history/index.md new file mode 100644 index 0000000000..80fc573e76 --- /dev/null +++ b/files/fr/web/api/window/history/index.md @@ -0,0 +1,53 @@ +--- +title: Window.history +slug: Web/API/Window/history +translation_of: Web/API/Window/history +--- +
{{APIRef}}
+ +

La propriété en lecture seule Window.history renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée).

+ +

L'objet History obtenu a les méthodes suivantes : voir la manipulation de l'historique du navigateur pour avoir plus de détails ainsi que des exemples.
+ En particulier, cet article explique les caractéristiques des méthodes pushState() et replaceState()qu'il est utile de connaître avant de les utiliser.

+ +

Exemple

+ +
history.back();     // similaire au bouton de retour
+history.go(-1);     // similaire à history.back();
+
+ +

Notes

+ +

Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet History, situé dans le menu déroulant près des boutons précédent et suivant.

+ +

Pour des raisons de sécurité, l'objet History n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer.

+ +

Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode location.replace(), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie.

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusCommentaire
{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Window.history")}}

diff --git a/files/fr/web/api/window/home/index.html b/files/fr/web/api/window/home/index.html deleted file mode 100644 index 856f95067c..0000000000 --- a/files/fr/web/api/window/home/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Window.home() -slug: Web/API/Window/home -tags: - - API - - Gecko - - HTML DOM - - Méthode - - Obsolete - - Reference - - Window -translation_of: Web/API/Window/home ---- -
{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}
- -

La méthode Window.home() renvoie la fenêtre à la page d'accueil.

- -

Syntaxe

- -
window.home();
-
- -

Exemple

- -
function goHome() {
-  window.home();
-}
-
- -

Spécification

- -

DOM Niveau 0. Ne fait pas partie de la spécification.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.home")}}

diff --git a/files/fr/web/api/window/home/index.md b/files/fr/web/api/window/home/index.md new file mode 100644 index 0000000000..856f95067c --- /dev/null +++ b/files/fr/web/api/window/home/index.md @@ -0,0 +1,36 @@ +--- +title: Window.home() +slug: Web/API/Window/home +tags: + - API + - Gecko + - HTML DOM + - Méthode + - Obsolete + - Reference + - Window +translation_of: Web/API/Window/home +--- +
{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}
+ +

La méthode Window.home() renvoie la fenêtre à la page d'accueil.

+ +

Syntaxe

+ +
window.home();
+
+ +

Exemple

+ +
function goHome() {
+  window.home();
+}
+
+ +

Spécification

+ +

DOM Niveau 0. Ne fait pas partie de la spécification.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.home")}}

diff --git a/files/fr/web/api/window/index.html b/files/fr/web/api/window/index.html deleted file mode 100644 index d5c5e70052..0000000000 --- a/files/fr/web/api/window/index.html +++ /dev/null @@ -1,568 +0,0 @@ ---- -title: window -slug: Web/API/Window -tags: - - API - - DOM - - Interface - - JavaScript - - Reference - - Window -translation_of: Web/API/Window ---- -

{{APIRef}}

- -

L'objet window représente une fenêtre contenant un document DOM ; la propriété document pointe vers le document DOM chargé dans cette fenêtre. Une fenêtre pour un document donné peut être obtenue en utilisant la propriété {{Domxref("document.defaultView")}}.

- -

Cette section fournit une brève référence pour toutes les méthodes, propriétés et événements disponibles via l'objet DOM window. L'objet window implémente l'interface Window, qui à son tour hérite de l'interface AbstractView. Certaines fonctions globales supplémentaires, espaces de noms, objets, interfaces et constructeurs, non typiquement associés à la fenêtre, mais disponibles sur celle-ci, sont répertoriés dans la Référence JavaScript et la Référence DOM.

- -

Dans un navigateur utilisant des onglets, comme Firefox, chaque onglet contient son propre objet window (et si vous écrivez une extension, la fenêtre du navigateur elle-même est un objet window séparé — consultez Travailler avec des fenêtres dans du code chrome pour plus d'informations). C'est-à-dire que l'objet window n'est pas partagé entre les onglets dans la même fenêtre. Certaines méthodes, notamment {{ Domxref("window.resizeTo") }} et {{ Domxref("window.resizeBy") }}, s'appliquent à la fenêtre entière et non à l'onglet spécifique auquel l'objet window appartient. En général, ce qui ne peut raisonnablement pas concerner un onglet se rapporte à la fenêtre à la place.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -

Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés des mixins {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("WindowEventHandlers")}}.

- -

Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le prototype d'éléments intrinsèques) sont répertoriées dans une section distincte ci-dessous.

- -
-
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
-
Cette propriété indique si la fenêtre en cours est fermée ou non.
-
{{domxref("Window.console")}} {{ReadOnlyInline}}
-
Renvoie une référence à l'objet console qui fournit l'accès à la console de débogage du navigateur.
-
{{domxref("Window.content")}} et Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
-
Renvoie une référence à l'élément de contenu dans la fenêtre en cours. Depuis Firefox 57 (initialement Nightly uniquement), les deux versions sont uniquement disponibles à partir du code chrome (privilégié) et ne sont plus disponibles sur le Web.
-
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours.
-
{{domxref("Window.customElements")}}{{ReadOnlyInline}}
-
renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux éléments personnalisés et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés.
-
{{domxref("Window.crypto")}} {{readOnlyInline}}
-
Retourne l'objet crypto du navigateur.
-
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
-
Récupère / définit le texte de la barre d'état pour la fenêtre donnée.
-
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
-
Renvoie le rapport entre les pixels physiques et les pixels indépendants du périphérique dans l'affichage en cours.
-
{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}
-
Récupère les arguments passés à la fenêtre (si c'est une boîte de dialogue) au moment où {{domxref ("window.showModalDialog()")}} a été appelé. C'est un {{Interface("nsIArray")}}.
-
{{domxref("Window.directories")}} {{obsolete_inline}}
-
Synonyme de {{domxref("window.personalbar")}}
-
{{domxref("Window.document")}} {{ReadOnlyInline}}
-
Renvoie une référence au document que la fenêtre contient.
-
{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}
-
Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.
-
{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
-
Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.
-
{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}
-
Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées.
-
{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
-
Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées.
-
{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}
-
Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés.
-
{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}
-
Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.
-
{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
-
Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle.
-
{{domxref("Window.frameElement")}} {{readOnlyInline}}
-
Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée.
-
{{domxref("Window.frames")}} {{readOnlyInline}}
-
Renvoie un tableau des sous-cadres dans la fenêtre en cours.
-
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
-
Cette propriété indique si la fenêtre est affichée en plein écran ou non.
-
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
-
Non supporté depuis Gecko 13 (Firefox 13). Utilisez {{domxref("Window.localStorage")}} à la place.
- Était : divers objets de stockage utilisés pour stocker des données sur plusieurs pages.
-
{{domxref("Window.history")}} {{ReadOnlyInline}}
-
Retourne une référence à l'objet d'historique.
-
{{domxref("Window.innerHeight")}} {{readOnlyInline}}
-
Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale.
-
{{domxref("Window.innerWidth")}} {{readOnlyInline}}
-
Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale.
-
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
-
Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés.
-
{{domxref("Window.length")}} {{readOnlyInline}}
-
Renvoie le nombre de cadres dans la fenêtre. Voir également {{domxref("window.frames")}}.
-
{{domxref("Window.location")}}
-
Récupère/définit l'emplacement, ou l'URL en cours, de l'objet de fenêtre.
-
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
-
Renvoie l'objet de la barre d'adresse, dont la visibilité peut être inversée dans la fenêtre.
-
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
-
Renvoie une référence à l'objet de stockage local utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées.
-
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
-
Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre.
-
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
-
Renvoie l'objet gestionnaire de messages pour cette fenêtre.
-
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}
-
Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé.
-
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
-
Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir mozScreenPixelsPerCSSPixel dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.
-
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
-
Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir mozScreenPixelsPerCSSPixel pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.
-
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
-
Renvoie le nombre de fois où le document en cours a été réaffiché à l'écran dans cette fenêtre. Cela peut être utilisé pour calculer les performances d'affichage.
-
{{domxref("Window.name")}}
-
Récupère / définit le nom de la fenêtre.
-
{{domxref("Window.navigator")}} {{readOnlyInline}}
-
Renvoie une référence à l'objet navigateur.
-
{{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}
-
Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change. 
-
{{domxref("Window.opener")}}
-
Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours.
-
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
-
Renvoie l'orientation en degrés (par incréments de 90 degrés) du point de vue par rapport à l'orientation naturelle du périphérique.
-
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
-
Récupère la hauteur de l'extérieur de la fenêtre du navigateur.
-
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
-
Récupère la largeur de l'extérieur de la fenêtre du navigateur.
-
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
-
Un alias pour {{domxref("window.scrollX")}}.
-
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
-
Un alias pour {{domxref("window.scrollY")}}
-
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
-
Renvoie une référence à l'objet de stockage de session utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées..
-
{{domxref("Window.parent")}} {{readOnlyInline}}
-
Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours.
-
{{domxref("Window.performance")}} {{readOnlyInline}}
-
Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi Utilisation de Chronométrage de Navigation pour plus d'informations et d'exemples.
-
{{domxref("Window.personalbar")}} {{readOnlyInline}}
-
Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre.
-
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
-
Fournissait précédemment un accès pour installer et supprimer des modules PKCS11.
-
{{domxref("Window.returnValue")}}
-
La valeur de retour à renvoyer à la fonction qui a appelé {{domxref("window.showModalDialog()")}} pour afficher la fenêtre comme boîte de dialogue modale.
-
{{domxref("Window.screen")}} {{readOnlyInline}}
-
Renvoie une référence à l'objet écran associé à la fenêtre.
-
{{domxref("Window.screenX")}} {{readOnlyInline}}
-
Renvoie la distance horizontale de la bordure gauche du navigateur de l'utilisateur à partir du côté gauche de l'écran.
-
{{domxref("Window.screenY")}} {{readOnlyInline}}
-
Renvoie la distance verticale de la bordure supérieure du navigateur de l'utilisateur à partir du haut de l'écran.
-
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
-
Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre.
-
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue.
-
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
-
Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue).
-
{{domxref("Window.scrollX")}} {{readOnlyInline}}
-
Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement.
-
{{domxref("Window.scrollY")}} {{readOnlyInline}}
-
Renvoie le nombre de pixels dont le document a déjà été décalé verticalement.
-
{{domxref("Window.self")}} {{ReadOnlyInline}}
-
Renvoie une référence d'objet à l'objet fenêtre lui-même.
-
{{domxref("Window.sessionStorage")}}
-
Renvoie un objet de stockage pour stocker des données dans une session de page unique.
-
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
-
Renvoie une référence à l'objet fenêtre de la barre latérale.
-
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
-
Renvoie un objet {{domxref("SpeechSynthesis")}}, qui est le point d'entrée pour l'utilisation de la fonctionnalité de synthèse vocale de l'API Web Speech.
-
{{domxref("Window.status")}}
-
Récupère/définit le texte dans la barre d'état en bas du navigateur.
-
{{domxref("Window.statusbar")}} {{readOnlyInline}}
-
Renvoie l'objet barre d'état, dont la visibilité peut être inversée dans la fenêtre.
-
{{domxref("Window.toolbar")}} {{readOnlyInline}}
-
Renvoie l'objet barre d'outils, dont la visibilité peut être inversée dans la fenêtre.
-
{{domxref("Window.top")}} {{readOnlyInline}}
-
Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres. Cette propriété est en lecture seule.
-
{{domxref("Window.visualViewport")}} {{readOnlyInline}}
-
Renvoie un objet {{domxref("VisualViewport")}} représentant le point de vue visuel pour une fenêtre donnée.
-
{{domxref("Window.window")}} {{ReadOnlyInline}}
-
Renvoie une référence à la fenêtre en cours.
-
window[0], window[1], etc.
-
Renvoie une référence à l'objet window dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails.
-
- -

Propriétés implémentées depuis ailleurs

- -
-
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
-
Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes.
-
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
-
Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}.
-
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
-
Renvoie un booléen indiquant si le contexte actuel est sécurisé (true) ou non (false).
-
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
-
Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.)
-
- -

Méthodes

- -

Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} et implémente les méthodes de {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("EventTarget")}}.

- -
-
{{domxref("Window.alert()")}}
-
Affiche une boîte de message d'alerte.
-
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Recule d'une page dans l'historique de la fenêtre.
-
{{domxref("Window.blur()")}}
-
Déplace la focalisation hors de la fenêtre.
-
{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}
-
Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}.
-
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
-
Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}.
-
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
-
Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié.
-
{{domxref("Window.clearImmediate()")}}
-
Annule l'exécution répétée définie en utilisant setImmediate.
-
{{domxref("Window.close()")}}
-
Ferme la fenêtre en cours.
-
{{domxref("Window.confirm()")}}
-
Affiche une boîte de dialogue avec un message auquel l'utilisateur doit répondre.
-
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.dispatchEvent()")}}
-
Utilisé pour déclencher un évènement.
-
{{domxref("Window.dump()")}} {{Non-standard_inline}}
-
Écrit un message à la console.
-
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.find()")}}
-
Recherche la chaîne de caractères donnée dans une fenêtre.
-
{{domxref("Window.focus()")}}
-
Donne la focalisation à la fenêtre en cours.
-
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Avance la fenêtre d'un document dans l'historique.
-
{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Fait flasher l'icône de l'application.
-
{{domxref("Window.getAttentionWithCycleCount()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.getComputedStyle()")}}
-
Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément.
-
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
-
Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur.
-
{{domxref("Window.getSelection()")}}
-
Renvoie l'objet de sélection représentant les éléments sélectionnés.
-
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Renvoie le navigateur à la page d'accueil.
-
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
-
Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée.
-
{{domxref("Window.maximize()")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.minimize()")}} (top-level XUL windows only)
-
Minimize la fenêtre.
-
{{domxref("Window.moveBy()")}}
-
Déplace la fenêtre en cours de la quantité indiquée.
-
{{domxref("Window.moveTo()")}}
-
Déplace la fenêtre vers les coordonnées spécifiées.
-
{{domxref("Window.open()")}}
-
Ouvre une nouvelle fenêtre.
-
{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
Ouvre une nouvelle fenêtre de dialogue.
-
{{domxref("Window.postMessage()")}}
-
Fournit un moyen sécurisé pour une fenêtre d'envoyer une chaîne de données à une autre fenêtre, qui n'a pas besoin d'être dans le même domaine que la première.
-
{{domxref("Window.prompt()")}}
-
Ouvre la boîte de dialogue d'impression du document en cours.
-
{{domxref("Window.prompt()")}}
-
Renvoie le texte saisi par l'utilisateur dans une boîte de dialogue à invite.
-
{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}
-
Annule la capture des évènements d'un certain type par la fenêtre.
-
{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
-
Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante.
-
{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
-
Active la planification de tâches pendant les périodes d'inactivité du navigateur.
-
{{domxref("Window.resizeBy()")}}
-
Redimensionne la fenêtre en cours d'une certaine quantité.
-
{{domxref("Window.resizeTo()")}}
-
Redimensionne dynamiquement la fenêtre.
-
{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.scroll()")}}
-
Fait défiler la fenêtre à un endroit particulier dans le document.
-
{{domxref("Window.scrollBy()")}}
-
Fait défiler le document dans la fenêtre de la quantité indiquée.
-
{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}
-
Fait défiler le document du nombre de lignes indiqué.
-
{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}
-
Fait défiler le document en cours du nombre de pages indiqué.
-
{{domxref("Window.scrollTo()")}}
-
Fait défiler à un jeu de coordonnées particulier dans le document.
-
{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)
-
Change le curseur pour la fenêtre en cours.
-
{{domxref("Window.setImmediate()")}}
-
Exécute une fonction après que le navigateur a terminé d'autres tâches lourdes
-
{{domxref("Window.setResizable()")}} {{Non-standard_inline}}
-
Inverse la possibilité pour un utilisateur de redimensionner une fenêtre.
-
{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}
-
Dimensionne la fenêtre en fonction de son contenu.
-
{{domxref("Window.stop()")}}
-
Cette méthode arrête le chargement de la fenêtre.
-
{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}
-
Met à jour l'état des commandes de la fenêtre chrome en cours (IU).
-
- -

Méthodes implémentées depuis ailleurs

- -
-
{{domxref("EventTarget.addEventListener()")}}
-
Enregistre un gestionnaire d'événement pour un type d'événement spécifique dans la fenêtre.
-
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
-
Décode une chaîne de données qui a été codée en utilisant l'encodage en base 64.
-
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
-
Crée une chaîne ASCII codée en base 64 à partir d'une chaîne de données binaires.
-
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
-
Annule l'exécution répétée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setInterval ()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
-
Annule l'exécution différée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setTimeout ()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
-
Accepte une variété de sources d'images différentes, et renvoie un {{domxref("Promise")}} qui se résout en une {{domxref("ImageBitmap")}}. En option, la source est détourée avec le rectangle des pixels d'origine en (sx, sy) et de largeur sw, et de hauteur sh.
-
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
-
Démarre le processus de récupération d'une ressource à partir du réseau.
-
{{domxref("EventTarget.removeEventListener")}}
-
Supprime un gestionnaire d'événement de la fenêtre.
-
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
-
Planifie une fonction à exécuter à chaque fois qu'un nombre donné de millisecondes s'est écoulé.
-
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
-
Planifie une fonction à exécuter dans un laps de temps donné.
-
- -

Méthodes obsolètes

- -
-
{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}
-
Affiche un dialogue modal. Cette méthode a été complètement supprimée dans Chrome 43, et dans Firefox 55.
-
- -

Gestionnaires d'évènements

- -

Ce sont des propriétés de l'objet window qui peuvent être définies pour établir des gestionnaires d'événements pour les différentes choses qui peuvent se produire dans la fenêtre et qui pourraient être intéressantes.

- -

Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}.

- -
-

Note : à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe if ("onabort" in window) pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails.

-
- -
-
{{domxref("GlobalEventHandlers.onabort")}}
-
 
-
Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours.
-
- -
-
{{domxref("WindowEventHandlers.onafterprint")}}
-
Appelé lorsque la boîte de dialogue d'impression est fermée. Voir l'événement {{event ("afterprint")}}.
-
{{domxref("WindowEventHandlers.onbeforeprint")}}
-
Appelé lorsque la boîte de dialogue d'impression est ouverte. Voir l'événement {{event ("beforeprint")}}.
-
{{domxref("Window.onbeforeinstallprompt")}}
-
Propriété de gestionnaire d'événements qui est déclenchée avant qu'un utilisateur ne soit invité à enregistrer un site Web sur un écran d'accueil sur mobile.
-
{{domxref("WindowEventHandlers.onbeforeunload")}}
-
Propriété de gestionnaire d'événements pour les événements avant-déchargement dans la fenêtre.
-
- -
-
{{domxref("GlobalEventHandlers.onblur")}}
-
Appelé après que la fenêtre a perdu la focalisation, comme en raison d'une fenêtre contextuelle.
-
- -
-
{{domxref("GlobalEventHandlers.onchange")}}
-
Propriété de gestionnaire d'événements pour les événements de changement dans la fenêtre.
-
- -
-
{{domxref("GlobalEventHandlers.onclick")}}
-
Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché.
-
- -
-
{domxref("GlobalEventHandlers.ondblclick")}}
-
Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris.
-
{{domxref("GlobalEventHandlers.onclose")}}
-
Appelé après la fermeture de la fenêtre.
-
- -
-
{{domxref("GlobalEventHandlers.oncontextmenu")}}
-
Appelé lorsque le bouton DROIT de la souris est enfoncé.
-
- -
-
{{domxref("Window.ondevicelight")}}
-
Propriété de gestionnaire d'événements pour tous les changements de niveaux de luminosité ambiante.
-
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
-
Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles).
-
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
-
Appelé lorsque l'orientation est modifiée (pour les appareils mobiles).
-
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
-
Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil.
-
{{domxref("Window.ondeviceproximity")}}
-
Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil.
-
- -
-
{{domxref("GlobalEventHandlers.onerror")}}
-
Appelé lorsqu'une ressource ne se charge pas OU lorsqu'une erreur se produit lors de l'exécution. Voir l'événement {{event("error")}}.
-
- -
-
{{domxref("GlobalEventHandlers.onfocus")}}
-
Appelé après que la fenêtre a reçu ou récupéré la focalisation. Voir les événements {{event("focus")}}.
-
- -
-
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
-
Propriété de gestionnaire d'événements pour les événements {{event('hashchange')}} dans la fenêtre ; appelé lorsque la partie de l'URL après la marque hash ("#") change.
-
{{domxref("Window.onappinstalled")}}
-
Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}.
-
{{domxref("Window.ongamepadconnected")}}
-
Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche).
-
{{domxref("Window.ongamepaddisconnected")}}
-
Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche).
-
{{domxref("Window.oninput")}}
-
Appelée lorsque la valeur d'un élément <input> change.
-
{{domxref("GlobalEventHandlers.onkeydown")}}
-
Appelé lorsque vous commencez à presser une touche QUELCONQUE. Voir l'événement {{event("keydown")}}.
-
- -
-
{{domxref("GlobalEventHandlers.onkeypress")}}
-
Appelé lorsqu'une touche (à l'exception de Shift, Fn et CapsLock) est en position pressée. Voir l'événement {{event("keypress")}}.
-
- -
-
{{domxref("GlobalEventHandlers.onkeyup")}}
-
Appelé lorsque vous avez fini de relâcher une touche QUELCONQUE. Voir l'événement {{event("keyup")}}.
-
- -
-
{{domxref("WindowEventHandlers.onlanguagechange")}}
-
Propriété de gestionnaire d'événements pour les événements {{event("languagechange")}} dans la fenêtre.
-
{{domxref("GlobalEventHandlers.onload")}}
-
Appelé après que toutes les ressources et les DOM ont été entièrement chargés. NE SERA PAS appelé lorsque la page est chargée à partir du cache, comme avec le bouton arrière.
-
- -
-
{{domxref("GlobalEventHandlers.onmousedown")}}
-
Appelé quand un bouton QUELCONQUE de la souris est pressé.
-
- -
-
{{domxref("GlobalEventHandlers.onmousemove")}}
-
Appelé en continu quand la souris est déplacée dans la fenêtre.
-
- -
-
{{domxref("GlobalEventHandlers.onmouseout")}}
-
Appelé lorsque le pointeur quitte la fenêtre.
-
- -
-
{{domxref("GlobalEventHandlers.onmouseover")}}
-
Appelé lorsque le pointeur entre dans la fenêtre.
-
- -
-
{{domxref("GlobalEventHandlers.onmouseup")}}
-
Appelé quand un bouton QUELCONQUE de la souris est relâché.
-
- -
-
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
-
Propriété de gestionnaire d'événements pour l'événement MozBeforePaint, qui est déclenché avant de repeindre la fenêtre si l'événement a été demandé par un appel à la méthode {{domxref("Window.mozRequestAnimationFrame()")}}.
-
{{domxref("WindowEventHandlers.onoffline")}}
-
Appelé lorsque la connexion réseau est perdue. Voir l'événement {{event("offline")}}.
-
{{domxref("WindowEventHandlers.ononline")}}
-
Appelé lorsque la connexion réseau est établie. Voir l'événement {{event("online")}}.
-
{{domxref("WindowEventHandlers.onpagehide")}}
-
Appelé lorsque l'utilisateur quitte la page, avant l'événement onunload. Voir l'événement {{event("pagehide")}}.
-
{{domxref("WindowEventHandlers.onpageshow")}}
-
Appelé après toutes les ressources et les DOM ont été entièrement chargés. Voir l'événement {{event("pageshow")}}.
-
{{domxref("Window.onpaint")}}
-
Propriété de gestionnaire d'évènement pour les évènements de dessin de la fenêtre.
-
- -
-
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
-
Appelé quand le bouton arrière est pressé.
-
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
-
Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} gérés.
-
{{domxref("GlobalEventHandlers.onreset")}}
-
Appelé lorsqu'un formulaire est réinitialisé
-
- -
-
{{domxref("GlobalEventHandlers.onresize")}}
-
Appelé en continu lorsque vous redimensionnez la fenêtre.
-
- -
-
{{domxref("GlobalEventHandlers.onscroll")}}
-
Appelé lorsque la barre de défilement est déplacée par un moyen QUELCONQUE. Si la ressource correspond entièrement à la fenêtre, cet événement ne peut pas être invoqué.
-
- -
-
{{domxref("GlobalEventHandlers.onwheel")}}
-
Appelé lorsque la roue de la souris est tournée autour d'un axe quelconque.
-
{{domxref("GlobalEventHandlers.onselect")}}
-
Appelé après le texte dans un champ de saisie est sélectionné.
-
- -
-
{{domxref("GlobalEventHandlers.onselectionchange")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché.
-
{{domxref("WindowEventHandlers.onstorage")}}
-
Appelé en cas de changement dans le stockage de session ou le stockage local. Voir l'événement {{event("storage")}}.
-
{{domxref("GlobalEventHandlers.onsubmit")}}
-
Appelé lorsqu'un formulaire est soumis.
-
- -
-
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
-
Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} non gérés.
-
{{domxref("WindowEventHandlers.onunload")}}
-
Appelé lorsque l'utilisateur quitte la page.
-
- -
-
{{domxref("Window.onuserproximity")}}
-
Propriété de gestionnaire d'événements pour les événements de proximité d'utilisateur.
-
{{domxref("Window.onvrdisplayconnect")}}
-
Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été connecté à l'ordinateur (lorsque l'événement {{event("vrdisplayconnected")}} se déclenche).
-
{{domxref("Window.onvrdisplaydisconnect")}}
-
Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été déconnecté de l'ordinateur (lorsque l'événement {{event("vrdisplaydisconnected")}} se déclenche).
-
{{domxref("Window.onvrdisplayactivate")}}
-
Représente un gestionnaire d'événements qui s'exécutera lorsqu'un affichage peut être présenté (lorsque l'événement {{event("vrdisplayactivate")}} se déclenche), par exemple si un HMD a été déplacé pour sortir de veille, ou a été réveillé en le mettant sur soi.
-
{{domxref("Window.onvrdisplaydeactivate")}}
-
Représente un gestionnaire d'événements qui s'exécute lorsqu'un affichage ne peut plus être présenté (lorsque l'événement {{event ("vrdisplaydeactivate")}} se déclenche), par exemple si un HMD est passé en veille ou en hibernation en raison d'une période d'inactivité.
-
{{domxref("Window.onvrdisplayblur")}}
-
Représente un gestionnaire d'événements qui s'exécutera lorsque la présentation sur un affichage a été suspendue pour une raison quelconque par le navigateur, le SE ou le matériel de RV (lorsque l'événement {{event("vrdisplayblur")}} se déclenche - par exemple, lorsque l'utilisateur interagit avec un menu système ou un navigateur, pour empêcher le suivi ou la perte d'expérience.
-
{{domxref("Window.onvrdisplayfocus")}}
-
Représente un gestionnaire d'événements qui sera exécuté lorsque la présentation sur un afficheur a repris après avoir perdu la focalisation (lorsque l'événement {{event("vrdisplayfocus")}} se déclenche).
-
{{domxref("Window.onvrdisplaypresentchange")}}
-
Représente un gestionnaire d'événements qui s'exécute lorsque l'état de présentation d'un périphérique de RV change, c'est-à-dire qu'il passe de présentation à non présentation, ou vice versa (lorsque l'événement {{event("vrdisplaypresentchange")}} se déclenche).
-
- -

Constructeurs

- -

Voir aussi les Interfaces DOM.

- -
-
{{domxref("DOMParser")}}
-
DOMParser peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un Document DOM. DOMParser est spécifié dans DOM Parsing et Serialization.
-
{{domxref("Window.GeckoActiveXObject")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Image")}}
-
Used for creating an {{domxref("HTMLImageElement")}}.
-
{{domxref("Option")}}
-
Used for creating an {{domxref("HTMLOptionElement")}}
-
{{domxref("Window.QueryInterface")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.XMLSerializer")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Worker")}}
-
Used for creating a Web worker
-
{{domxref("Window.XPCNativeWrapper")}}
-
{{todo("NeedsContents")}}
-
{{domxref("Window.XPCSafeJSObjectWrapper")}}
-
{{todo("NeedsContents")}}
-
- -

Interfaces

- -

Voir Référence du DOM

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/index.md b/files/fr/web/api/window/index.md new file mode 100644 index 0000000000..d5c5e70052 --- /dev/null +++ b/files/fr/web/api/window/index.md @@ -0,0 +1,568 @@ +--- +title: window +slug: Web/API/Window +tags: + - API + - DOM + - Interface + - JavaScript + - Reference + - Window +translation_of: Web/API/Window +--- +

{{APIRef}}

+ +

L'objet window représente une fenêtre contenant un document DOM ; la propriété document pointe vers le document DOM chargé dans cette fenêtre. Une fenêtre pour un document donné peut être obtenue en utilisant la propriété {{Domxref("document.defaultView")}}.

+ +

Cette section fournit une brève référence pour toutes les méthodes, propriétés et événements disponibles via l'objet DOM window. L'objet window implémente l'interface Window, qui à son tour hérite de l'interface AbstractView. Certaines fonctions globales supplémentaires, espaces de noms, objets, interfaces et constructeurs, non typiquement associés à la fenêtre, mais disponibles sur celle-ci, sont répertoriés dans la Référence JavaScript et la Référence DOM.

+ +

Dans un navigateur utilisant des onglets, comme Firefox, chaque onglet contient son propre objet window (et si vous écrivez une extension, la fenêtre du navigateur elle-même est un objet window séparé — consultez Travailler avec des fenêtres dans du code chrome pour plus d'informations). C'est-à-dire que l'objet window n'est pas partagé entre les onglets dans la même fenêtre. Certaines méthodes, notamment {{ Domxref("window.resizeTo") }} et {{ Domxref("window.resizeBy") }}, s'appliquent à la fenêtre entière et non à l'onglet spécifique auquel l'objet window appartient. En général, ce qui ne peut raisonnablement pas concerner un onglet se rapporte à la fenêtre à la place.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +

Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés des mixins {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("WindowEventHandlers")}}.

+ +

Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le prototype d'éléments intrinsèques) sont répertoriées dans une section distincte ci-dessous.

+ +
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
Cette propriété indique si la fenêtre en cours est fermée ou non.
+
{{domxref("Window.console")}} {{ReadOnlyInline}}
+
Renvoie une référence à l'objet console qui fournit l'accès à la console de débogage du navigateur.
+
{{domxref("Window.content")}} et Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Renvoie une référence à l'élément de contenu dans la fenêtre en cours. Depuis Firefox 57 (initialement Nightly uniquement), les deux versions sont uniquement disponibles à partir du code chrome (privilégié) et ne sont plus disponibles sur le Web.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours.
+
{{domxref("Window.customElements")}}{{ReadOnlyInline}}
+
renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux éléments personnalisés et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Retourne l'objet crypto du navigateur.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Récupère / définit le texte de la barre d'état pour la fenêtre donnée.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Renvoie le rapport entre les pixels physiques et les pixels indépendants du périphérique dans l'affichage en cours.
+
{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}
+
Récupère les arguments passés à la fenêtre (si c'est une boîte de dialogue) au moment où {{domxref ("window.showModalDialog()")}} a été appelé. C'est un {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Synonyme de {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Renvoie une référence au document que la fenêtre contient.
+
{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}
+
Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.
+
{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.
+
{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}
+
Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées.
+
{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées.
+
{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}
+
Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés.
+
{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.
+
{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Renvoie un tableau des sous-cadres dans la fenêtre en cours.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
Cette propriété indique si la fenêtre est affichée en plein écran ou non.
+
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Non supporté depuis Gecko 13 (Firefox 13). Utilisez {{domxref("Window.localStorage")}} à la place.
+ Était : divers objets de stockage utilisés pour stocker des données sur plusieurs pages.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Retourne une référence à l'objet d'historique.
+
{{domxref("Window.innerHeight")}} {{readOnlyInline}}
+
Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale.
+
{{domxref("Window.innerWidth")}} {{readOnlyInline}}
+
Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale.
+
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
+
Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Renvoie le nombre de cadres dans la fenêtre. Voir également {{domxref("window.frames")}}.
+
{{domxref("Window.location")}}
+
Récupère/définit l'emplacement, ou l'URL en cours, de l'objet de fenêtre.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Renvoie l'objet de la barre d'adresse, dont la visibilité peut être inversée dans la fenêtre.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Renvoie une référence à l'objet de stockage local utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Renvoie l'objet gestionnaire de messages pour cette fenêtre.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}
+
Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir mozScreenPixelsPerCSSPixel dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir mozScreenPixelsPerCSSPixel pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Renvoie le nombre de fois où le document en cours a été réaffiché à l'écran dans cette fenêtre. Cela peut être utilisé pour calculer les performances d'affichage.
+
{{domxref("Window.name")}}
+
Récupère / définit le nom de la fenêtre.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Renvoie une référence à l'objet navigateur.
+
{{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}
+
Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change. 
+
{{domxref("Window.opener")}}
+
Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours.
+
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
+
Renvoie l'orientation en degrés (par incréments de 90 degrés) du point de vue par rapport à l'orientation naturelle du périphérique.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Récupère la hauteur de l'extérieur de la fenêtre du navigateur.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Récupère la largeur de l'extérieur de la fenêtre du navigateur.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
Un alias pour {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
Un alias pour {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Renvoie une référence à l'objet de stockage de session utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées..
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi Utilisation de Chronométrage de Navigation pour plus d'informations et d'exemples.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Fournissait précédemment un accès pour installer et supprimer des modules PKCS11.
+
{{domxref("Window.returnValue")}}
+
La valeur de retour à renvoyer à la fonction qui a appelé {{domxref("window.showModalDialog()")}} pour afficher la fenêtre comme boîte de dialogue modale.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Renvoie une référence à l'objet écran associé à la fenêtre.
+
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Renvoie la distance horizontale de la bordure gauche du navigateur de l'utilisateur à partir du côté gauche de l'écran.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Renvoie la distance verticale de la bordure supérieure du navigateur de l'utilisateur à partir du haut de l'écran.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Renvoie le nombre de pixels dont le document a déjà été décalé verticalement.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Renvoie une référence d'objet à l'objet fenêtre lui-même.
+
{{domxref("Window.sessionStorage")}}
+
Renvoie un objet de stockage pour stocker des données dans une session de page unique.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Renvoie une référence à l'objet fenêtre de la barre latérale.
+
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
+
Renvoie un objet {{domxref("SpeechSynthesis")}}, qui est le point d'entrée pour l'utilisation de la fonctionnalité de synthèse vocale de l'API Web Speech.
+
{{domxref("Window.status")}}
+
Récupère/définit le texte dans la barre d'état en bas du navigateur.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Renvoie l'objet barre d'état, dont la visibilité peut être inversée dans la fenêtre.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Renvoie l'objet barre d'outils, dont la visibilité peut être inversée dans la fenêtre.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres. Cette propriété est en lecture seule.
+
{{domxref("Window.visualViewport")}} {{readOnlyInline}}
+
Renvoie un objet {{domxref("VisualViewport")}} représentant le point de vue visuel pour une fenêtre donnée.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Renvoie une référence à la fenêtre en cours.
+
window[0], window[1], etc.
+
Renvoie une référence à l'objet window dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails.
+
+ +

Propriétés implémentées depuis ailleurs

+ +
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Renvoie un booléen indiquant si le contexte actuel est sécurisé (true) ou non (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.)
+
+ +

Méthodes

+ +

Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} et implémente les méthodes de {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("EventTarget")}}.

+ +
+
{{domxref("Window.alert()")}}
+
Affiche une boîte de message d'alerte.
+
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Recule d'une page dans l'historique de la fenêtre.
+
{{domxref("Window.blur()")}}
+
Déplace la focalisation hors de la fenêtre.
+
{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}
+
Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}.
+
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+
Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié.
+
{{domxref("Window.clearImmediate()")}}
+
Annule l'exécution répétée définie en utilisant setImmediate.
+
{{domxref("Window.close()")}}
+
Ferme la fenêtre en cours.
+
{{domxref("Window.confirm()")}}
+
Affiche une boîte de dialogue avec un message auquel l'utilisateur doit répondre.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Utilisé pour déclencher un évènement.
+
{{domxref("Window.dump()")}} {{Non-standard_inline}}
+
Écrit un message à la console.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.find()")}}
+
Recherche la chaîne de caractères donnée dans une fenêtre.
+
{{domxref("Window.focus()")}}
+
Donne la focalisation à la fenêtre en cours.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Avance la fenêtre d'un document dans l'historique.
+
{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Fait flasher l'icône de l'application.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément.
+
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
+
Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur.
+
{{domxref("Window.getSelection()")}}
+
Renvoie l'objet de sélection représentant les éléments sélectionnés.
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Renvoie le navigateur à la page d'accueil.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimize la fenêtre.
+
{{domxref("Window.moveBy()")}}
+
Déplace la fenêtre en cours de la quantité indiquée.
+
{{domxref("Window.moveTo()")}}
+
Déplace la fenêtre vers les coordonnées spécifiées.
+
{{domxref("Window.open()")}}
+
Ouvre une nouvelle fenêtre.
+
{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Ouvre une nouvelle fenêtre de dialogue.
+
{{domxref("Window.postMessage()")}}
+
Fournit un moyen sécurisé pour une fenêtre d'envoyer une chaîne de données à une autre fenêtre, qui n'a pas besoin d'être dans le même domaine que la première.
+
{{domxref("Window.prompt()")}}
+
Ouvre la boîte de dialogue d'impression du document en cours.
+
{{domxref("Window.prompt()")}}
+
Renvoie le texte saisi par l'utilisateur dans une boîte de dialogue à invite.
+
{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}
+
Annule la capture des évènements d'un certain type par la fenêtre.
+
{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante.
+
{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
+
Active la planification de tâches pendant les périodes d'inactivité du navigateur.
+
{{domxref("Window.resizeBy()")}}
+
Redimensionne la fenêtre en cours d'une certaine quantité.
+
{{domxref("Window.resizeTo()")}}
+
Redimensionne dynamiquement la fenêtre.
+
{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.scroll()")}}
+
Fait défiler la fenêtre à un endroit particulier dans le document.
+
{{domxref("Window.scrollBy()")}}
+
Fait défiler le document dans la fenêtre de la quantité indiquée.
+
{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}
+
Fait défiler le document du nombre de lignes indiqué.
+
{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}
+
Fait défiler le document en cours du nombre de pages indiqué.
+
{{domxref("Window.scrollTo()")}}
+
Fait défiler à un jeu de coordonnées particulier dans le document.
+
{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)
+
Change le curseur pour la fenêtre en cours.
+
{{domxref("Window.setImmediate()")}}
+
Exécute une fonction après que le navigateur a terminé d'autres tâches lourdes
+
{{domxref("Window.setResizable()")}} {{Non-standard_inline}}
+
Inverse la possibilité pour un utilisateur de redimensionner une fenêtre.
+
{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}
+
Dimensionne la fenêtre en fonction de son contenu.
+
{{domxref("Window.stop()")}}
+
Cette méthode arrête le chargement de la fenêtre.
+
{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}
+
Met à jour l'état des commandes de la fenêtre chrome en cours (IU).
+
+ +

Méthodes implémentées depuis ailleurs

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Enregistre un gestionnaire d'événement pour un type d'événement spécifique dans la fenêtre.
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Décode une chaîne de données qui a été codée en utilisant l'encodage en base 64.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Crée une chaîne ASCII codée en base 64 à partir d'une chaîne de données binaires.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Annule l'exécution répétée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setInterval ()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Annule l'exécution différée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setTimeout ()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Accepte une variété de sources d'images différentes, et renvoie un {{domxref("Promise")}} qui se résout en une {{domxref("ImageBitmap")}}. En option, la source est détourée avec le rectangle des pixels d'origine en (sx, sy) et de largeur sw, et de hauteur sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Démarre le processus de récupération d'une ressource à partir du réseau.
+
{{domxref("EventTarget.removeEventListener")}}
+
Supprime un gestionnaire d'événement de la fenêtre.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Planifie une fonction à exécuter à chaque fois qu'un nombre donné de millisecondes s'est écoulé.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Planifie une fonction à exécuter dans un laps de temps donné.
+
+ +

Méthodes obsolètes

+ +
+
{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}
+
Affiche un dialogue modal. Cette méthode a été complètement supprimée dans Chrome 43, et dans Firefox 55.
+
+ +

Gestionnaires d'évènements

+ +

Ce sont des propriétés de l'objet window qui peuvent être définies pour établir des gestionnaires d'événements pour les différentes choses qui peuvent se produire dans la fenêtre et qui pourraient être intéressantes.

+ +

Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}.

+ +
+

Note : à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe if ("onabort" in window) pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
 
+
Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours.
+
+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Appelé lorsque la boîte de dialogue d'impression est fermée. Voir l'événement {{event ("afterprint")}}.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Appelé lorsque la boîte de dialogue d'impression est ouverte. Voir l'événement {{event ("beforeprint")}}.
+
{{domxref("Window.onbeforeinstallprompt")}}
+
Propriété de gestionnaire d'événements qui est déclenchée avant qu'un utilisateur ne soit invité à enregistrer un site Web sur un écran d'accueil sur mobile.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Propriété de gestionnaire d'événements pour les événements avant-déchargement dans la fenêtre.
+
+ +
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Appelé après que la fenêtre a perdu la focalisation, comme en raison d'une fenêtre contextuelle.
+
+ +
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Propriété de gestionnaire d'événements pour les événements de changement dans la fenêtre.
+
+ +
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché.
+
+ +
+
{domxref("GlobalEventHandlers.ondblclick")}}
+
Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Appelé après la fermeture de la fenêtre.
+
+ +
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Appelé lorsque le bouton DROIT de la souris est enfoncé.
+
+ +
+
{{domxref("Window.ondevicelight")}}
+
Propriété de gestionnaire d'événements pour tous les changements de niveaux de luminosité ambiante.
+
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles).
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
Appelé lorsque l'orientation est modifiée (pour les appareils mobiles).
+
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
+
Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil.
+
{{domxref("Window.ondeviceproximity")}}
+
Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil.
+
+ +
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Appelé lorsqu'une ressource ne se charge pas OU lorsqu'une erreur se produit lors de l'exécution. Voir l'événement {{event("error")}}.
+
+ +
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Appelé après que la fenêtre a reçu ou récupéré la focalisation. Voir les événements {{event("focus")}}.
+
+ +
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
Propriété de gestionnaire d'événements pour les événements {{event('hashchange')}} dans la fenêtre ; appelé lorsque la partie de l'URL après la marque hash ("#") change.
+
{{domxref("Window.onappinstalled")}}
+
Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}.
+
{{domxref("Window.ongamepadconnected")}}
+
Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche).
+
{{domxref("Window.oninput")}}
+
Appelée lorsque la valeur d'un élément <input> change.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Appelé lorsque vous commencez à presser une touche QUELCONQUE. Voir l'événement {{event("keydown")}}.
+
+ +
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Appelé lorsqu'une touche (à l'exception de Shift, Fn et CapsLock) est en position pressée. Voir l'événement {{event("keypress")}}.
+
+ +
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Appelé lorsque vous avez fini de relâcher une touche QUELCONQUE. Voir l'événement {{event("keyup")}}.
+
+ +
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
Propriété de gestionnaire d'événements pour les événements {{event("languagechange")}} dans la fenêtre.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Appelé après que toutes les ressources et les DOM ont été entièrement chargés. NE SERA PAS appelé lorsque la page est chargée à partir du cache, comme avec le bouton arrière.
+
+ +
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Appelé quand un bouton QUELCONQUE de la souris est pressé.
+
+ +
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Appelé en continu quand la souris est déplacée dans la fenêtre.
+
+ +
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Appelé lorsque le pointeur quitte la fenêtre.
+
+ +
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Appelé lorsque le pointeur entre dans la fenêtre.
+
+ +
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Appelé quand un bouton QUELCONQUE de la souris est relâché.
+
+ +
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
Propriété de gestionnaire d'événements pour l'événement MozBeforePaint, qui est déclenché avant de repeindre la fenêtre si l'événement a été demandé par un appel à la méthode {{domxref("Window.mozRequestAnimationFrame()")}}.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Appelé lorsque la connexion réseau est perdue. Voir l'événement {{event("offline")}}.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Appelé lorsque la connexion réseau est établie. Voir l'événement {{event("online")}}.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Appelé lorsque l'utilisateur quitte la page, avant l'événement onunload. Voir l'événement {{event("pagehide")}}.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Appelé après toutes les ressources et les DOM ont été entièrement chargés. Voir l'événement {{event("pageshow")}}.
+
{{domxref("Window.onpaint")}}
+
Propriété de gestionnaire d'évènement pour les évènements de dessin de la fenêtre.
+
+ +
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
Appelé quand le bouton arrière est pressé.
+
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
+
Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} gérés.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Appelé lorsqu'un formulaire est réinitialisé
+
+ +
+
{{domxref("GlobalEventHandlers.onresize")}}
+
Appelé en continu lorsque vous redimensionnez la fenêtre.
+
+ +
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Appelé lorsque la barre de défilement est déplacée par un moyen QUELCONQUE. Si la ressource correspond entièrement à la fenêtre, cet événement ne peut pas être invoqué.
+
+ +
+
{{domxref("GlobalEventHandlers.onwheel")}}
+
Appelé lorsque la roue de la souris est tournée autour d'un axe quelconque.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Appelé après le texte dans un champ de saisie est sélectionné.
+
+ +
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Appelé en cas de changement dans le stockage de session ou le stockage local. Voir l'événement {{event("storage")}}.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Appelé lorsqu'un formulaire est soumis.
+
+ +
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} non gérés.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Appelé lorsque l'utilisateur quitte la page.
+
+ +
+
{{domxref("Window.onuserproximity")}}
+
Propriété de gestionnaire d'événements pour les événements de proximité d'utilisateur.
+
{{domxref("Window.onvrdisplayconnect")}}
+
Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été connecté à l'ordinateur (lorsque l'événement {{event("vrdisplayconnected")}} se déclenche).
+
{{domxref("Window.onvrdisplaydisconnect")}}
+
Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été déconnecté de l'ordinateur (lorsque l'événement {{event("vrdisplaydisconnected")}} se déclenche).
+
{{domxref("Window.onvrdisplayactivate")}}
+
Représente un gestionnaire d'événements qui s'exécutera lorsqu'un affichage peut être présenté (lorsque l'événement {{event("vrdisplayactivate")}} se déclenche), par exemple si un HMD a été déplacé pour sortir de veille, ou a été réveillé en le mettant sur soi.
+
{{domxref("Window.onvrdisplaydeactivate")}}
+
Représente un gestionnaire d'événements qui s'exécute lorsqu'un affichage ne peut plus être présenté (lorsque l'événement {{event ("vrdisplaydeactivate")}} se déclenche), par exemple si un HMD est passé en veille ou en hibernation en raison d'une période d'inactivité.
+
{{domxref("Window.onvrdisplayblur")}}
+
Représente un gestionnaire d'événements qui s'exécutera lorsque la présentation sur un affichage a été suspendue pour une raison quelconque par le navigateur, le SE ou le matériel de RV (lorsque l'événement {{event("vrdisplayblur")}} se déclenche - par exemple, lorsque l'utilisateur interagit avec un menu système ou un navigateur, pour empêcher le suivi ou la perte d'expérience.
+
{{domxref("Window.onvrdisplayfocus")}}
+
Représente un gestionnaire d'événements qui sera exécuté lorsque la présentation sur un afficheur a repris après avoir perdu la focalisation (lorsque l'événement {{event("vrdisplayfocus")}} se déclenche).
+
{{domxref("Window.onvrdisplaypresentchange")}}
+
Représente un gestionnaire d'événements qui s'exécute lorsque l'état de présentation d'un périphérique de RV change, c'est-à-dire qu'il passe de présentation à non présentation, ou vice versa (lorsque l'événement {{event("vrdisplaypresentchange")}} se déclenche).
+
+ +

Constructeurs

+ +

Voir aussi les Interfaces DOM.

+ +
+
{{domxref("DOMParser")}}
+
DOMParser peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un Document DOM. DOMParser est spécifié dans DOM Parsing et Serialization.
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Used for creating a Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Interfaces

+ +

Voir Référence du DOM

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/innerheight/index.html b/files/fr/web/api/window/innerheight/index.html deleted file mode 100644 index 19e63c1f54..0000000000 --- a/files/fr/web/api/window/innerheight/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: window.innerHeight -slug: Web/API/Window/innerHeight -tags: - - API - - CSSOM View - - Property - - Propriété - - Reference - - Window -translation_of: Web/API/Window/innerHeight ---- -

{{ ApiRef() }}

- -

Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigation en incluant, si elle est affichée, la barre de défilement horizontale.

- -
-

Note : La valeur retournée par cette propriété correspond le cas échéant à la hauteur de la fenêtre définie par {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}}, dans le cas où vous utilisez cette méthode pour définir les dimensions de la fenêtre virtuelle dans le but d'agencer la page.

-
- -

Syntaxe

- -
var hauteur = window.innerHeight;
-
- -

Valeur

- -

Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété window.innerHeight est accessible en lecture seulement ; elle n'a pas de valeur par défaut.

- -

Notes

- - - -

Exemples

- -

Sur un frameset

- -
var intFrameHeight = window.innerHeight; // ou
-
-var intFrameHeight = self.innerHeight;
-// retournera la hauteur de la partie visible du cadre dans frameset
-
-var intFramesetHeight = parent.innerHeight;
-// retournera la hauteur de la partie visible du frameset le plus proche
-
-var intOuterFramesetHeight = top.innerHeight;
-// retournera la hauteur de la partie visible du frameset le plus éloigné
-
- -

{{todo("ajouter ici un lien vers une démo interactive")}}

- - - -

Exemple graphique

- -

L'illustration suivante montre la différence entre outerHeight et innerHeight.

- -

Illustration de la différence entre innerHeight et outerHeight

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}{{Spec2('CSSOM View')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.innerHeight")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/innerheight/index.md b/files/fr/web/api/window/innerheight/index.md new file mode 100644 index 0000000000..19e63c1f54 --- /dev/null +++ b/files/fr/web/api/window/innerheight/index.md @@ -0,0 +1,95 @@ +--- +title: window.innerHeight +slug: Web/API/Window/innerHeight +tags: + - API + - CSSOM View + - Property + - Propriété + - Reference + - Window +translation_of: Web/API/Window/innerHeight +--- +

{{ ApiRef() }}

+ +

Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigation en incluant, si elle est affichée, la barre de défilement horizontale.

+ +
+

Note : La valeur retournée par cette propriété correspond le cas échéant à la hauteur de la fenêtre définie par {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}}, dans le cas où vous utilisez cette méthode pour définir les dimensions de la fenêtre virtuelle dans le but d'agencer la page.

+
+ +

Syntaxe

+ +
var hauteur = window.innerHeight;
+
+ +

Valeur

+ +

Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété window.innerHeight est accessible en lecture seulement ; elle n'a pas de valeur par défaut.

+ +

Notes

+ + + +

Exemples

+ +

Sur un frameset

+ +
var intFrameHeight = window.innerHeight; // ou
+
+var intFrameHeight = self.innerHeight;
+// retournera la hauteur de la partie visible du cadre dans frameset
+
+var intFramesetHeight = parent.innerHeight;
+// retournera la hauteur de la partie visible du frameset le plus proche
+
+var intOuterFramesetHeight = top.innerHeight;
+// retournera la hauteur de la partie visible du frameset le plus éloigné
+
+ +

{{todo("ajouter ici un lien vers une démo interactive")}}

+ + + +

Exemple graphique

+ +

L'illustration suivante montre la différence entre outerHeight et innerHeight.

+ +

Illustration de la différence entre innerHeight et outerHeight

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}{{Spec2('CSSOM View')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.innerHeight")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/innerwidth/index.html b/files/fr/web/api/window/innerwidth/index.html deleted file mode 100644 index a76af5343a..0000000000 --- a/files/fr/web/api/window/innerwidth/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: window.innerWidth -slug: Web/API/Window/innerWidth -translation_of: Web/API/Window/innerWidth ---- -

{{ ApiRef() }}

- -

Résumé

- -

Récupère la largeur du contenu visible de la fenêtre de navigation en incluant, s'il est visible, l'ascenseur vertical.
- Permet également de fixer une largeur pour le domaine d'affichage de la fenêtre.

- -

Syntaxe

- -
var largeur = window.innerWidth;
-
- -

Voir aussi : window.innerHeight, window.outerHeight and window.outerWidth.

- -

Valeur renvoyée

- -
-
innerWidth
-
un entier (nombre de pixels);
-
- -

Notes

- -

La propriété innerWidth est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire.

- -

Example

- -
// Retourne la largeur de la fenêtre
-var largeur = window.innerWidth;
-
-// Retourn la largeur de la fenêtre à l'intérieur d'une "frameset"
-var largeur = self.innerWidth;
-
-// Retourne la largeur de la fenêtre du "frameset" parent
-var largeurDeLaFrame = parent.innerWidth;
-
-// Retourne la largeur de la fenêtre du "frameset" principal
-var largeurDuFrameset = top.innerWidth;
- -

Pour changer la taille de la fenêtre, voir {{domxref("window.resizeBy")}} and {{domxref("window.resizeTo")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}}{{Spec2('CSSOM View')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.innerWidth")}}

diff --git a/files/fr/web/api/window/innerwidth/index.md b/files/fr/web/api/window/innerwidth/index.md new file mode 100644 index 0000000000..a76af5343a --- /dev/null +++ b/files/fr/web/api/window/innerwidth/index.md @@ -0,0 +1,68 @@ +--- +title: window.innerWidth +slug: Web/API/Window/innerWidth +translation_of: Web/API/Window/innerWidth +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

Récupère la largeur du contenu visible de la fenêtre de navigation en incluant, s'il est visible, l'ascenseur vertical.
+ Permet également de fixer une largeur pour le domaine d'affichage de la fenêtre.

+ +

Syntaxe

+ +
var largeur = window.innerWidth;
+
+ +

Voir aussi : window.innerHeight, window.outerHeight and window.outerWidth.

+ +

Valeur renvoyée

+ +
+
innerWidth
+
un entier (nombre de pixels);
+
+ +

Notes

+ +

La propriété innerWidth est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire.

+ +

Example

+ +
// Retourne la largeur de la fenêtre
+var largeur = window.innerWidth;
+
+// Retourn la largeur de la fenêtre à l'intérieur d'une "frameset"
+var largeur = self.innerWidth;
+
+// Retourne la largeur de la fenêtre du "frameset" parent
+var largeurDeLaFrame = parent.innerWidth;
+
+// Retourne la largeur de la fenêtre du "frameset" principal
+var largeurDuFrameset = top.innerWidth;
+ +

Pour changer la taille de la fenêtre, voir {{domxref("window.resizeBy")}} and {{domxref("window.resizeTo")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}}{{Spec2('CSSOM View')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.innerWidth")}}

diff --git a/files/fr/web/api/window/issecurecontext/index.html b/files/fr/web/api/window/issecurecontext/index.html deleted file mode 100644 index dd6a2dbbc3..0000000000 --- a/files/fr/web/api/window/issecurecontext/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Window.isSecureContext -slug: Web/API/Window/isSecureContext -tags: - - API - - Propriété - - Reference - - Sécurité - - Window -translation_of: Web/API/Window/isSecureContext ---- -

{{APIRef}}{{SeeCompatTable}}

- -

La propriété en lecteur seule window.isSecureContext indique si un contexte est capable d'utiliser des fonctionnalités qui nécessitent des contextes sécurisés.

- -

Syntaxe

- -
var isSecure = window.isSecureContext
- -

Exemples

- -

Détection des fonctionnalités

- -

Vous pouvez utiliser la détection des fonctionnalités pour vérifier si elles sont dans un contexte sécurisé ou non à l'aide du booléen isSecureContext qui est exposé sur la portée globale.

- -
if (window.isSecureContext) {
-  // La page est un contexte sécurisé afin que les techniciens de service soient désormais disponibles
-  navigator.serviceWorker.register("/offline-worker.js").then(function () {
-    ...
-  });
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Secure Contexts')}}{{Spec2('Secure Contexts','#monkey-patching-global-object','isSecureContext')}}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.isSecureContext")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/issecurecontext/index.md b/files/fr/web/api/window/issecurecontext/index.md new file mode 100644 index 0000000000..dd6a2dbbc3 --- /dev/null +++ b/files/fr/web/api/window/issecurecontext/index.md @@ -0,0 +1,58 @@ +--- +title: Window.isSecureContext +slug: Web/API/Window/isSecureContext +tags: + - API + - Propriété + - Reference + - Sécurité + - Window +translation_of: Web/API/Window/isSecureContext +--- +

{{APIRef}}{{SeeCompatTable}}

+ +

La propriété en lecteur seule window.isSecureContext indique si un contexte est capable d'utiliser des fonctionnalités qui nécessitent des contextes sécurisés.

+ +

Syntaxe

+ +
var isSecure = window.isSecureContext
+ +

Exemples

+ +

Détection des fonctionnalités

+ +

Vous pouvez utiliser la détection des fonctionnalités pour vérifier si elles sont dans un contexte sécurisé ou non à l'aide du booléen isSecureContext qui est exposé sur la portée globale.

+ +
if (window.isSecureContext) {
+  // La page est un contexte sécurisé afin que les techniciens de service soient désormais disponibles
+  navigator.serviceWorker.register("/offline-worker.js").then(function () {
+    ...
+  });
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Secure Contexts')}}{{Spec2('Secure Contexts','#monkey-patching-global-object','isSecureContext')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.isSecureContext")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/languagechange_event/index.html b/files/fr/web/api/window/languagechange_event/index.html deleted file mode 100644 index a55d83a36d..0000000000 --- a/files/fr/web/api/window/languagechange_event/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: 'Window: languagechange event' -slug: Web/API/Window/languagechange_event -tags: - - Evènement - - Expérimentale - - HTML DOM - - Reference - - Window -translation_of: Web/API/Window/languagechange_event ---- -
{{APIRef}}
- -

L'événement languagechange est déclenché sur l'objet d'étendue globale lorsque la langue préférée de l'utilisateur change.

- - - - - - - - - - - - - - - - - - - - -
BullesNon
AnnulableNon
Interface{{domxref("Event")}}
Propriété de gestionnaire d'événements{{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}}
- -

Exemples

- -

Vous pouvez utiliser l'événement languagechange dans une méthode {{domxref("EventTarget/addEventListener", "addEventListener")}} :

- -
window.addEventListener('languagechange', function() {
-  console.log('languagechange event detected!');
-});
- -

Ou utilisez la propriété du gestionnaire d'événements onlanguagechange :

- -
window.onlanguagechange = function(event) {
-  console.log('languagechange event detected!');
-};
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatut
{{ SpecName('HTML WHATWG', 'indices.html#event-languagechange', 'languagechange') }}{{ Spec2('HTML WHATWG') }}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.languagechange_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/languagechange_event/index.md b/files/fr/web/api/window/languagechange_event/index.md new file mode 100644 index 0000000000..a55d83a36d --- /dev/null +++ b/files/fr/web/api/window/languagechange_event/index.md @@ -0,0 +1,79 @@ +--- +title: 'Window: languagechange event' +slug: Web/API/Window/languagechange_event +tags: + - Evènement + - Expérimentale + - HTML DOM + - Reference + - Window +translation_of: Web/API/Window/languagechange_event +--- +
{{APIRef}}
+ +

L'événement languagechange est déclenché sur l'objet d'étendue globale lorsque la langue préférée de l'utilisateur change.

+ + + + + + + + + + + + + + + + + + + + +
BullesNon
AnnulableNon
Interface{{domxref("Event")}}
Propriété de gestionnaire d'événements{{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}}
+ +

Exemples

+ +

Vous pouvez utiliser l'événement languagechange dans une méthode {{domxref("EventTarget/addEventListener", "addEventListener")}} :

+ +
window.addEventListener('languagechange', function() {
+  console.log('languagechange event detected!');
+});
+ +

Ou utilisez la propriété du gestionnaire d'événements onlanguagechange :

+ +
window.onlanguagechange = function(event) {
+  console.log('languagechange event detected!');
+};
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatut
{{ SpecName('HTML WHATWG', 'indices.html#event-languagechange', 'languagechange') }}{{ Spec2('HTML WHATWG') }}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.languagechange_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/length/index.html b/files/fr/web/api/window/length/index.html deleted file mode 100644 index af1ee54111..0000000000 --- a/files/fr/web/api/window/length/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Window.length -slug: Web/API/Window/length -translation_of: Web/API/Window/length ---- -
{{ ApiRef() }}
- -

Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page.

- -

Syntaxe

- -
nombreDeFrames= window.length;
-
- - - -

Exemple

- -
if (window.length) {
-  // La page contient des frames
-}
- -

Specification

- -

{{DOM0}}

diff --git a/files/fr/web/api/window/length/index.md b/files/fr/web/api/window/length/index.md new file mode 100644 index 0000000000..af1ee54111 --- /dev/null +++ b/files/fr/web/api/window/length/index.md @@ -0,0 +1,27 @@ +--- +title: Window.length +slug: Web/API/Window/length +translation_of: Web/API/Window/length +--- +
{{ ApiRef() }}
+ +

Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page.

+ +

Syntaxe

+ +
nombreDeFrames= window.length;
+
+ + + +

Exemple

+ +
if (window.length) {
+  // La page contient des frames
+}
+ +

Specification

+ +

{{DOM0}}

diff --git a/files/fr/web/api/window/load_event/index.html b/files/fr/web/api/window/load_event/index.html deleted file mode 100644 index 9226d9630b..0000000000 --- a/files/fr/web/api/window/load_event/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: load -slug: Web/API/Window/load_event -tags: - - Event - - Window -translation_of: Web/API/Window/load_event -original_slug: Web/Events/load ---- -

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

- - diff --git a/files/fr/web/api/window/load_event/index.md b/files/fr/web/api/window/load_event/index.md new file mode 100644 index 0000000000..9226d9630b --- /dev/null +++ b/files/fr/web/api/window/load_event/index.md @@ -0,0 +1,91 @@ +--- +title: load +slug: Web/API/Window/load_event +tags: + - Event + - Window +translation_of: Web/API/Window/load_event +original_slug: Web/Events/load +--- +

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

+ + diff --git a/files/fr/web/api/window/localstorage/index.html b/files/fr/web/api/window/localstorage/index.html deleted file mode 100644 index 3385e051fb..0000000000 --- a/files/fr/web/api/window/localstorage/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Window.localStorage -slug: Web/API/Window/localStorage -tags: - - API - - Propriété - - Reference - - Stockage - - Stockage Web - - Window - - WindowLocalStorage - - lecture seule - - localStorage -translation_of: Web/API/Window/localStorage ---- -

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

- -

La propriété localStorage vous permet d'accéder à un objet local {{domxref("Storage")}}. Le localStorage est similaire au sessionStorage. La seule différence : les données stockées dans le localStorage n'ont pas de délai d'expiration, alors que les données stockées dans le sessionStorage sont nettoyées quand la session navigateur prend fin — donc quand on ferme le navigateur.

- -

Il convient de noter que les données stockées dans localStorage ou sessionStorage sont spécifiques au protocole de la page.

- -

Les clés et les valeurs sont toujours des chaînes de caractères (à noter que, comme pour les objets, les clés entières seront automatiquement converties en chaînes de caractères).

- -

Syntaxe

- -
monStockage = localStorage;
- -

Valeur

- -

Un objet {{DOMxRef("Storage")}} qui peut être utilisé pour accéder à l'espace de stockage local de l'origine actuelle.

- -

Exceptions

- -
-
SecurityError
-
La demande viole une décision politique, ou l'origine n'est pas un schéma/hôte/port valide (cela peut se produire si l'origine utilise le shéma file: ou data:, par exemple). Par exemple, l'utilisateur peut configurer son navigateur de manière à refuser la permission de conserver des données pour l'origine spécifiée.
-
- -

Exemple

- -

L'extrait de code suivant accède à l'objet local {{domxref("Storage")}} du domaine courant et lui ajoute une entrée en utilisant {{domxref("Storage.setItem()")}}.

- -
localStorage.setItem('monChat', 'Tom');
- -

La syntaxe pour la lecture de l'article localStorage est la suivante :

- -
var cat = localStorage.getItem('myCat');
- -

La syntaxe pour la suppression de l'élément localStorage est la suivante :

- -
localStorage.removeItem('myCat');
- -

La syntaxe pour supprimer tous les éléments de localStorage est la suivante :

- -
// Effacer tous les éléments
-localStorage.clear();
-
- -
-

Note : Se référer à l'article Using the Web Storage API pour voir un exemple complet.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}{{Spec2("HTML WHATWG")}}
- -

Compatibilité navigateurs

- -

{{Compat("api.Window.localStorage")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/localstorage/index.md b/files/fr/web/api/window/localstorage/index.md new file mode 100644 index 0000000000..3385e051fb --- /dev/null +++ b/files/fr/web/api/window/localstorage/index.md @@ -0,0 +1,91 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Propriété + - Reference + - Stockage + - Stockage Web + - Window + - WindowLocalStorage + - lecture seule + - localStorage +translation_of: Web/API/Window/localStorage +--- +

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

+ +

La propriété localStorage vous permet d'accéder à un objet local {{domxref("Storage")}}. Le localStorage est similaire au sessionStorage. La seule différence : les données stockées dans le localStorage n'ont pas de délai d'expiration, alors que les données stockées dans le sessionStorage sont nettoyées quand la session navigateur prend fin — donc quand on ferme le navigateur.

+ +

Il convient de noter que les données stockées dans localStorage ou sessionStorage sont spécifiques au protocole de la page.

+ +

Les clés et les valeurs sont toujours des chaînes de caractères (à noter que, comme pour les objets, les clés entières seront automatiquement converties en chaînes de caractères).

+ +

Syntaxe

+ +
monStockage = localStorage;
+ +

Valeur

+ +

Un objet {{DOMxRef("Storage")}} qui peut être utilisé pour accéder à l'espace de stockage local de l'origine actuelle.

+ +

Exceptions

+ +
+
SecurityError
+
La demande viole une décision politique, ou l'origine n'est pas un schéma/hôte/port valide (cela peut se produire si l'origine utilise le shéma file: ou data:, par exemple). Par exemple, l'utilisateur peut configurer son navigateur de manière à refuser la permission de conserver des données pour l'origine spécifiée.
+
+ +

Exemple

+ +

L'extrait de code suivant accède à l'objet local {{domxref("Storage")}} du domaine courant et lui ajoute une entrée en utilisant {{domxref("Storage.setItem()")}}.

+ +
localStorage.setItem('monChat', 'Tom');
+ +

La syntaxe pour la lecture de l'article localStorage est la suivante :

+ +
var cat = localStorage.getItem('myCat');
+ +

La syntaxe pour la suppression de l'élément localStorage est la suivante :

+ +
localStorage.removeItem('myCat');
+ +

La syntaxe pour supprimer tous les éléments de localStorage est la suivante :

+ +
// Effacer tous les éléments
+localStorage.clear();
+
+ +
+

Note : Se référer à l'article Using the Web Storage API pour voir un exemple complet.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}{{Spec2("HTML WHATWG")}}
+ +

Compatibilité navigateurs

+ +

{{Compat("api.Window.localStorage")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/location/index.html b/files/fr/web/api/window/location/index.html deleted file mode 100644 index f8074f97f9..0000000000 --- a/files/fr/web/api/window/location/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Window.location -slug: Web/API/Window/location -translation_of: Web/API/Window/location -browser-compat: api.Window.location ---- -

{{APIRef}}

- -

La propriété en lecture seule Window.location renvoie un objet Location qui contient des informations à propos de l'emplacement courant du document.

- -

Bien que Window.location soit un objet Location en lecture seule, on peut lui affecter une chaîne de caractères DOMString. Cela signifie qu'on peut, la plupart du temps, manipuler location comme une chaîne de caractères : location = 'http://www.example.com' est par exemple synonyme de location.href = 'http://www.example.com'.

- -

Voir la page de l'interface Location pour connaître l'ensemble des propriétés disponibles.

- -

Syntaxe

- -
-var oldLocation = location;
-location = newLocation;
-
- -

Exemples

- -

Exemple simple

- -
-console.log(location); // affiche "https://developer.mozilla.org/fr/docs/Web/API/Window/location" dans la console
-
- -

Premier exemple : naviguer sur une nouvelle page

- -

Lorsqu'une nouvelle valeur est affectée à l'objet location, un document sera chargé en utilisant l'URL comme si location.assign() avait été invoquée avec l'URL modifiée.

- -
-

Note : Les marqueurs de bac à sable relatifs à la navigation pourront lever une exception et empêcher la navigation.

-
- -
-location.assign("http://www.mozilla.org"); // ou
-location = "http://www.mozilla.org";
-
- -

Deuxième exemple : recharger la page courante

- -
location.reload();
- -

Troisième exemple

- -

Dans cet exemple, on recharge la page avec la méthode replace() afin d'insérer la valeur de location.pathname dans l'ancre :

- -
-function reloadPageWithHash() {
-  var initialPage = location.pathname;
-  location.replace('http://example.com/#' + initialPage);
-}
-
- -

Quatrième exemple : afficher les propriétés de l'URL courante

- -
-function showLoc() {
-  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
-  for (var sProp in oLocation){
-  aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " + (oLocation[sProp] || "n/a"));
-  }
-  console.log(aLog.join("\n"));
-}
-
- - - -
-function sendData (sData) {
-  location.search = sData;
-}
-
-// Dans le HTML: <button onclick="sendData('Des données');">Envoyer des données</button>
-
- -

On ajoutera "?Des%20données" à l'URL courante qui sera alors envoyée au serveur. Si aucune action n'est entreprise par le serveur, le document courant est rechargé avec la chaîne de recherche modifiée.

- -

Sixième exemple : utiliser les marques-pages sans changer la propriété hash

- -
-<!doctype html>
-  <html>
-  <head>
-    <meta charset="UTF-8"/>
-    <title>Exemple MDN</title>
-    <script>
-function showNode (oNode) {
-  document.documentElement.scrollTop = oNode.offsetTop;
-  document.documentElement.scrollLeft = oNode.offsetLeft;
-}
-
-function showBookmark (sBookmark, bUseHash) {
-  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
-  var oBookmark = document.querySelector(sBookmark);
-  if (oBookmark) { showNode(oBookmark); }
-}
-    </script>
-    <style>
-span.intLink {
-    cursor: pointer;
-    color: #0000ff;
-    text-decoration: underline;
-}
-    </style>
-  </head>
-
-<body>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
-  <p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p>
-  <p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Aller au marque-page n°2</span>&nbsp;]</p>
-  <p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p>
-  <p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
-  <p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-  <p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p>
-  <p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p>
-  <p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p>
-  <p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Aller au marque-page n°1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Aller au marque-page n°1 sans utiliser location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Aller au marque-page n°3</span>&nbsp;]</p>
-  <p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p>
-  <p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p>
-  <p id="myBookmark3"><em>Voici le marque-page n°3</em></p>
-  <p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p>
-  <p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p>
-  <p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p>
-  <p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p>
-  <p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p>
-  <p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p>
-  <p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p>
-  <p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p>
-  <p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p>
-  <p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p>
-</body>
-</html>
-
- -

La même chose mais avec un défilement animé :

- -
-var showBookmark = (function () {
-  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
-   /*
-   * nDuration: la durée, exprimée en millisecondes, pour chaque frame
-   * nFrames: le nombre de frames pour chaque défilement
-   */
-   nDuration = 200, nFrames = 10;
-
-  function _next () {
-  if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
-  _isBot = true;
-  document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
-  document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
-  if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
-  _itFrame++;
-  }
-
-  function _chkOwner () {
-  if (_isBot) { _isBot = false; return; }
-  if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
-  }
-
-  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
-  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
-
-  return function (sBookmark, bUseHash) {
-    var oNode = document.querySelector(sBookmark);
-  _scrollY = document.documentElement.scrollTop;
-  _scrollX = document.documentElement.scrollLeft;
-  _bookMark = sBookmark;
-  _useHash = bUseHash === true;
-  _nodeX = oNode.offsetLeft;
-    _nodeY = oNode.offsetTop;
-    _itFrame = 1;
-  if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
-  };
-})();
-
- -

Spécifications

- -

{{Specifications}}

- -

Compatibilité des navigateurs

- -

{{Compat}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/location/index.md b/files/fr/web/api/window/location/index.md new file mode 100644 index 0000000000..f8074f97f9 --- /dev/null +++ b/files/fr/web/api/window/location/index.md @@ -0,0 +1,197 @@ +--- +title: Window.location +slug: Web/API/Window/location +translation_of: Web/API/Window/location +browser-compat: api.Window.location +--- +

{{APIRef}}

+ +

La propriété en lecture seule Window.location renvoie un objet Location qui contient des informations à propos de l'emplacement courant du document.

+ +

Bien que Window.location soit un objet Location en lecture seule, on peut lui affecter une chaîne de caractères DOMString. Cela signifie qu'on peut, la plupart du temps, manipuler location comme une chaîne de caractères : location = 'http://www.example.com' est par exemple synonyme de location.href = 'http://www.example.com'.

+ +

Voir la page de l'interface Location pour connaître l'ensemble des propriétés disponibles.

+ +

Syntaxe

+ +
+var oldLocation = location;
+location = newLocation;
+
+ +

Exemples

+ +

Exemple simple

+ +
+console.log(location); // affiche "https://developer.mozilla.org/fr/docs/Web/API/Window/location" dans la console
+
+ +

Premier exemple : naviguer sur une nouvelle page

+ +

Lorsqu'une nouvelle valeur est affectée à l'objet location, un document sera chargé en utilisant l'URL comme si location.assign() avait été invoquée avec l'URL modifiée.

+ +
+

Note : Les marqueurs de bac à sable relatifs à la navigation pourront lever une exception et empêcher la navigation.

+
+ +
+location.assign("http://www.mozilla.org"); // ou
+location = "http://www.mozilla.org";
+
+ +

Deuxième exemple : recharger la page courante

+ +
location.reload();
+ +

Troisième exemple

+ +

Dans cet exemple, on recharge la page avec la méthode replace() afin d'insérer la valeur de location.pathname dans l'ancre :

+ +
+function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
+
+ +

Quatrième exemple : afficher les propriétés de l'URL courante

+ +
+function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+  aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " + (oLocation[sProp] || "n/a"));
+  }
+  console.log(aLog.join("\n"));
+}
+
+ + + +
+function sendData (sData) {
+  location.search = sData;
+}
+
+// Dans le HTML: <button onclick="sendData('Des données');">Envoyer des données</button>
+
+ +

On ajoutera "?Des%20données" à l'URL courante qui sera alors envoyée au serveur. Si aucune action n'est entreprise par le serveur, le document courant est rechargé avec la chaîne de recherche modifiée.

+ +

Sixième exemple : utiliser les marques-pages sans changer la propriété hash

+ +
+<!doctype html>
+  <html>
+  <head>
+    <meta charset="UTF-8"/>
+    <title>Exemple MDN</title>
+    <script>
+function showNode (oNode) {
+  document.documentElement.scrollTop = oNode.offsetTop;
+  document.documentElement.scrollLeft = oNode.offsetLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+    </script>
+    <style>
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+    </style>
+  </head>
+
+<body>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
+  <p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p>
+  <p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Aller au marque-page n°2</span>&nbsp;]</p>
+  <p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p>
+  <p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
+  <p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+  <p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p>
+  <p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p>
+  <p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p>
+  <p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Aller au marque-page n°1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Aller au marque-page n°1 sans utiliser location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Aller au marque-page n°3</span>&nbsp;]</p>
+  <p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p>
+  <p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p>
+  <p id="myBookmark3"><em>Voici le marque-page n°3</em></p>
+  <p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p>
+  <p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p>
+  <p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p>
+  <p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p>
+  <p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p>
+  <p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p>
+  <p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p>
+  <p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p>
+  <p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p>
+  <p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p>
+</body>
+</html>
+
+ +

La même chose mais avec un défilement animé :

+ +
+var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+   /*
+   * nDuration: la durée, exprimée en millisecondes, pour chaque frame
+   * nFrames: le nombre de frames pour chaque défilement
+   */
+   nDuration = 200, nFrames = 10;
+
+  function _next () {
+  if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+  _isBot = true;
+  document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+  document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+  if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
+  _itFrame++;
+  }
+
+  function _chkOwner () {
+  if (_isBot) { _isBot = false; return; }
+  if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    var oNode = document.querySelector(sBookmark);
+  _scrollY = document.documentElement.scrollTop;
+  _scrollX = document.documentElement.scrollLeft;
+  _bookMark = sBookmark;
+  _useHash = bUseHash === true;
+  _nodeX = oNode.offsetLeft;
+    _nodeY = oNode.offsetTop;
+    _itFrame = 1;
+  if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+
+ +

Spécifications

+ +

{{Specifications}}

+ +

Compatibilité des navigateurs

+ +

{{Compat}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/locationbar/index.html b/files/fr/web/api/window/locationbar/index.html deleted file mode 100644 index 294652fb88..0000000000 --- a/files/fr/web/api/window/locationbar/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Window.locationbar -slug: Web/API/Window/locationbar -tags: - - API - - HTML DOM - - Propriété - - Reference - - Window -translation_of: Web/API/Window/locationbar ---- -
{{APIRef}}
- -

Renvoie l'objet locationbar, dont la visibilité peut être vérifiée.

- -

Syntaxe

- -
objRef = window.locationbar
-
- -

Exemple

- -

L'exemple HTML complet suivant montre comment la propriété visible de l'objet locationbar est utilisée.

- -
<!DOCTYPE html>
-<html lang="fr">
-<head>
-<meta charset="UTF-8" />
-<title>Divers tests DOM</title>
-
-<script>
-var visible = window.locationbar.visible;
-</script>
-
-</head>
-<body>
-  <p>Divers tests DOM</p>
-</body>
-</html>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.locationbar")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/locationbar/index.md b/files/fr/web/api/window/locationbar/index.md new file mode 100644 index 0000000000..294652fb88 --- /dev/null +++ b/files/fr/web/api/window/locationbar/index.md @@ -0,0 +1,72 @@ +--- +title: Window.locationbar +slug: Web/API/Window/locationbar +tags: + - API + - HTML DOM + - Propriété + - Reference + - Window +translation_of: Web/API/Window/locationbar +--- +
{{APIRef}}
+ +

Renvoie l'objet locationbar, dont la visibilité peut être vérifiée.

+ +

Syntaxe

+ +
objRef = window.locationbar
+
+ +

Exemple

+ +

L'exemple HTML complet suivant montre comment la propriété visible de l'objet locationbar est utilisée.

+ +
<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8" />
+<title>Divers tests DOM</title>
+
+<script>
+var visible = window.locationbar.visible;
+</script>
+
+</head>
+<body>
+  <p>Divers tests DOM</p>
+</body>
+</html>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.locationbar")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/matchmedia/index.html b/files/fr/web/api/window/matchmedia/index.html deleted file mode 100644 index 77fea4b292..0000000000 --- a/files/fr/web/api/window/matchmedia/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: window.matchMedia -slug: Web/API/Window/matchMedia -translation_of: Web/API/Window/matchMedia ---- -
{{ApiRef}}
- -

Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères media query spécifiée.

-

Syntaxe

-
mql = window.matchMedia(mediaQueryString)
-

Ici, mediaQueryString est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}.

-

Exemple

-
if (window.matchMedia("(min-width: 400px)").matches) {
-  /* the view port is at least 400 pixels wide */
-} else {
-  /* the view port is less than 400 pixels wide */
-}
-

Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large.

-

Voir Utiliser les media queries avec du code pour plus d'exemples.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}{{Spec2("CSSOM View")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.matchMedia")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/matchmedia/index.md b/files/fr/web/api/window/matchmedia/index.md new file mode 100644 index 0000000000..77fea4b292 --- /dev/null +++ b/files/fr/web/api/window/matchmedia/index.md @@ -0,0 +1,51 @@ +--- +title: window.matchMedia +slug: Web/API/Window/matchMedia +translation_of: Web/API/Window/matchMedia +--- +
{{ApiRef}}
+ +

Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères media query spécifiée.

+

Syntaxe

+
mql = window.matchMedia(mediaQueryString)
+

Ici, mediaQueryString est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}.

+

Exemple

+
if (window.matchMedia("(min-width: 400px)").matches) {
+  /* the view port is at least 400 pixels wide */
+} else {
+  /* the view port is less than 400 pixels wide */
+}
+

Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large.

+

Voir Utiliser les media queries avec du code pour plus d'exemples.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}{{Spec2("CSSOM View")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.matchMedia")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/menubar/index.html b/files/fr/web/api/window/menubar/index.html deleted file mode 100644 index 6e5fc9371d..0000000000 --- a/files/fr/web/api/window/menubar/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Window.menubar -slug: Web/API/Window/menubar -tags: - - API - - HTML DOM - - Propriété - - Reference - - Window -translation_of: Web/API/Window/menubar ---- -
{{ APIRef() }}
- -

La propriété Window.menubar renvoie l'objet menubar, dont la visibilité peut être vérifiée.

- -

Syntaxe

- -
objRef = window.menubar
-
- -

Exemple

- -

L'exemple HTML complet suivant montre comment la propriété visible de l'objet menubar est utilisée.

- -
<html>
-<head>
-  <title>Divers Tests DOM</title>
-  <script>
-    var visible = window.menubar.visible;
-  </script>
-</head>
-<body>
-  <p>Divers Tests DOM</p>
-</body>
-</html>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'browsers.html#dom-window-menubar', 'Window.menubar')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-menubar', 'Window.menubar')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.menubar")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/menubar/index.md b/files/fr/web/api/window/menubar/index.md new file mode 100644 index 0000000000..6e5fc9371d --- /dev/null +++ b/files/fr/web/api/window/menubar/index.md @@ -0,0 +1,72 @@ +--- +title: Window.menubar +slug: Web/API/Window/menubar +tags: + - API + - HTML DOM + - Propriété + - Reference + - Window +translation_of: Web/API/Window/menubar +--- +
{{ APIRef() }}
+ +

La propriété Window.menubar renvoie l'objet menubar, dont la visibilité peut être vérifiée.

+ +

Syntaxe

+ +
objRef = window.menubar
+
+ +

Exemple

+ +

L'exemple HTML complet suivant montre comment la propriété visible de l'objet menubar est utilisée.

+ +
<html>
+<head>
+  <title>Divers Tests DOM</title>
+  <script>
+    var visible = window.menubar.visible;
+  </script>
+</head>
+<body>
+  <p>Divers Tests DOM</p>
+</body>
+</html>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'browsers.html#dom-window-menubar', 'Window.menubar')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-menubar', 'Window.menubar')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.menubar")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/message_event/index.html b/files/fr/web/api/window/message_event/index.html deleted file mode 100644 index 7122fbb2d9..0000000000 --- a/files/fr/web/api/window/message_event/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 'Window: message event' -slug: Web/API/Window/message_event -tags: - - Evènement - - Window -translation_of: Web/API/Window/message_event ---- -
{{APIRef}}
- -

L'événement message est déclenché sur un objet {{domxref('Window')}} lorsque la fenêtre reçoit un message, par exemple d'un appel a Window.postMessage() depuis un autre contexte de navigation.

- - - - - - - - - - - - - - - - - - - - -
BullesNon
AnnulableNon
Interface{{domxref("MessageEvent")}}
Propriété de gestionnaire d'événementsonmessage
- -

Exemples

- -

Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre <iframe>, en utilisant un code comme celui-ci:

- -
const targetFrame = window.top.frames[1];
-const targetOrigin = 'https://exemple.org';
-const windowMessageButton = document.querySelector('#window-message');
-
-windowMessageButton.addEventListener('click', () => {
-    targetFrame.postMessage('bonjour', targetOrigin);
-});
- -

Le récepteur peut écouter le message en utilisant addEventListener() avec un code comme celui-ci:

- -
window.addEventListener('message', (event) => {
-    console.log(`Message reçu: ${event.data}`);
-});
- -

Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements onmessage:

- -
window.onmessage = (event) => {
-    console.log(`Message reçu: ${event.data}`);
-};
- -

Spécifications

- - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'indices.html#event-message')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.message_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/message_event/index.md b/files/fr/web/api/window/message_event/index.md new file mode 100644 index 0000000000..7122fbb2d9 --- /dev/null +++ b/files/fr/web/api/window/message_event/index.md @@ -0,0 +1,82 @@ +--- +title: 'Window: message event' +slug: Web/API/Window/message_event +tags: + - Evènement + - Window +translation_of: Web/API/Window/message_event +--- +
{{APIRef}}
+ +

L'événement message est déclenché sur un objet {{domxref('Window')}} lorsque la fenêtre reçoit un message, par exemple d'un appel a Window.postMessage() depuis un autre contexte de navigation.

+ + + + + + + + + + + + + + + + + + + + +
BullesNon
AnnulableNon
Interface{{domxref("MessageEvent")}}
Propriété de gestionnaire d'événementsonmessage
+ +

Exemples

+ +

Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre <iframe>, en utilisant un code comme celui-ci:

+ +
const targetFrame = window.top.frames[1];
+const targetOrigin = 'https://exemple.org';
+const windowMessageButton = document.querySelector('#window-message');
+
+windowMessageButton.addEventListener('click', () => {
+    targetFrame.postMessage('bonjour', targetOrigin);
+});
+ +

Le récepteur peut écouter le message en utilisant addEventListener() avec un code comme celui-ci:

+ +
window.addEventListener('message', (event) => {
+    console.log(`Message reçu: ${event.data}`);
+});
+ +

Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements onmessage:

+ +
window.onmessage = (event) => {
+    console.log(`Message reçu: ${event.data}`);
+};
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'indices.html#event-message')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.message_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/messageerror_event/index.html b/files/fr/web/api/window/messageerror_event/index.html deleted file mode 100644 index 0f63b05e44..0000000000 --- a/files/fr/web/api/window/messageerror_event/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'Window: messageerror event' -slug: Web/API/Window/messageerror_event -tags: - - API - - Evènement - - Message d'événement - - Reference - - Window -translation_of: Web/API/Window/messageerror_event ---- -
{{APIRef}}
- -

L'événement messageerror est déclenché sur un objet {{domxref('Window')}} lorsqu'il reçoit un message qui ne peut pas être désérialisé.

- - - - - - - - - - - - - - - - - - - - -
BullesNon
AnnulableNon
Interface{{domxref("MessageEvent")}}
Propriété de gestionnaire d'événements{{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}}
- -

Exemples

- -

Écoutez messageerror en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} :

- -
window.addEventListener('messageerror', (event) => {
-    console.error(event);
-});
- -

Idem, mais en utilisant la propriété de gestionnaire d'événements {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} :

- -
window.onmessageerror = (event) => {
-    console.error(event);
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.messageerror_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/messageerror_event/index.md b/files/fr/web/api/window/messageerror_event/index.md new file mode 100644 index 0000000000..0f63b05e44 --- /dev/null +++ b/files/fr/web/api/window/messageerror_event/index.md @@ -0,0 +1,77 @@ +--- +title: 'Window: messageerror event' +slug: Web/API/Window/messageerror_event +tags: + - API + - Evènement + - Message d'événement + - Reference + - Window +translation_of: Web/API/Window/messageerror_event +--- +
{{APIRef}}
+ +

L'événement messageerror est déclenché sur un objet {{domxref('Window')}} lorsqu'il reçoit un message qui ne peut pas être désérialisé.

+ + + + + + + + + + + + + + + + + + + + +
BullesNon
AnnulableNon
Interface{{domxref("MessageEvent")}}
Propriété de gestionnaire d'événements{{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}}
+ +

Exemples

+ +

Écoutez messageerror en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} :

+ +
window.addEventListener('messageerror', (event) => {
+    console.error(event);
+});
+ +

Idem, mais en utilisant la propriété de gestionnaire d'événements {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} :

+ +
window.onmessageerror = (event) => {
+    console.error(event);
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.messageerror_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/mozinnerscreenx/index.html b/files/fr/web/api/window/mozinnerscreenx/index.html deleted file mode 100644 index 3cce6881b6..0000000000 --- a/files/fr/web/api/window/mozinnerscreenx/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Window.mozInnerScreenX -slug: Web/API/Window/mozInnerScreenX -tags: - - API - - HTML DOM - - NeedsSpecTable - - Propriété - - Reference - - Window -translation_of: Web/API/Window/mozInnerScreenX ---- -
{{APIRef}}{{gecko_minversion_header("1.9.2")}}
- -

Résumé

- -

Obtient la coordonnée X du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.

- -
-

Note : Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété nsIDOMWindowUtils.screenPixelsPerCSSPixel.

-
- -

Syntaxe

- -
screenX = window.mozInnerScreenX;
- -

Valeur

- - - -

Spécification

- -

Ne fait partie d'aucune spécification ou recommandation technique du W3C.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.mozInnerScreenX")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/mozinnerscreenx/index.md b/files/fr/web/api/window/mozinnerscreenx/index.md new file mode 100644 index 0000000000..3cce6881b6 --- /dev/null +++ b/files/fr/web/api/window/mozinnerscreenx/index.md @@ -0,0 +1,47 @@ +--- +title: Window.mozInnerScreenX +slug: Web/API/Window/mozInnerScreenX +tags: + - API + - HTML DOM + - NeedsSpecTable + - Propriété + - Reference + - Window +translation_of: Web/API/Window/mozInnerScreenX +--- +
{{APIRef}}{{gecko_minversion_header("1.9.2")}}
+ +

Résumé

+ +

Obtient la coordonnée X du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.

+ +
+

Note : Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété nsIDOMWindowUtils.screenPixelsPerCSSPixel.

+
+ +

Syntaxe

+ +
screenX = window.mozInnerScreenX;
+ +

Valeur

+ + + +

Spécification

+ +

Ne fait partie d'aucune spécification ou recommandation technique du W3C.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.mozInnerScreenX")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/mozinnerscreeny/index.html b/files/fr/web/api/window/mozinnerscreeny/index.html deleted file mode 100644 index 2b9ebd8564..0000000000 --- a/files/fr/web/api/window/mozinnerscreeny/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Window.mozInnerScreenY -slug: Web/API/Window/mozInnerScreenY -tags: - - API - - HTML DOM - - NeedsExample - - Propriété - - Reference - - Window -translation_of: Web/API/Window/mozInnerScreenY ---- -
{{APIRef}}{{gecko_minversion_header("1.9.2")}}
- -

Résumé

- -

Obtient la coordonnée Y du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.

- -
-

Note : Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété nsIDOMWindowUtils.screenPixelsPerCSSPixel.

-
- -

Syntaxe

- -
screenY = window.mozInnerScreenY;
- -

Valeur

- - - -

Spécification

- -

Ne fait partie d'aucune spécification ou recommandation technique du W3C.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.mozInnerScreenY")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/mozinnerscreeny/index.md b/files/fr/web/api/window/mozinnerscreeny/index.md new file mode 100644 index 0000000000..2b9ebd8564 --- /dev/null +++ b/files/fr/web/api/window/mozinnerscreeny/index.md @@ -0,0 +1,47 @@ +--- +title: Window.mozInnerScreenY +slug: Web/API/Window/mozInnerScreenY +tags: + - API + - HTML DOM + - NeedsExample + - Propriété + - Reference + - Window +translation_of: Web/API/Window/mozInnerScreenY +--- +
{{APIRef}}{{gecko_minversion_header("1.9.2")}}
+ +

Résumé

+ +

Obtient la coordonnée Y du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.

+ +
+

Note : Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété nsIDOMWindowUtils.screenPixelsPerCSSPixel.

+
+ +

Syntaxe

+ +
screenY = window.mozInnerScreenY;
+ +

Valeur

+ + + +

Spécification

+ +

Ne fait partie d'aucune spécification ou recommandation technique du W3C.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.mozInnerScreenY")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/mozpaintcount/index.html b/files/fr/web/api/window/mozpaintcount/index.html deleted file mode 100644 index a6f3d9eb7c..0000000000 --- a/files/fr/web/api/window/mozpaintcount/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Window.mozPaintCount -slug: Web/API/Window/mozPaintCount -tags: - - API - - 'API:Mozilla Extensions' - - Déprécié - - HTML DOM - - NeedsExample - - Non-standard - - Propriété - - Reference - - Window -translation_of: Web/API/Window/mozPaintCount ---- -

{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko72")}}{{Gecko_MinVersion_Header("2.0")}}

- -

Renvoie le nombre de fois où le document actuel a été peint à l'écran dans cette fenêtre.

- -

Syntaxe

- -
var paintCount = window.mozPaintCount;
- - - -

Spécification

- -

Ne fait partie d'aucune spécification ou recommandation du W3C.

- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.mozPaintCount")}}

diff --git a/files/fr/web/api/window/mozpaintcount/index.md b/files/fr/web/api/window/mozpaintcount/index.md new file mode 100644 index 0000000000..a6f3d9eb7c --- /dev/null +++ b/files/fr/web/api/window/mozpaintcount/index.md @@ -0,0 +1,35 @@ +--- +title: Window.mozPaintCount +slug: Web/API/Window/mozPaintCount +tags: + - API + - 'API:Mozilla Extensions' + - Déprécié + - HTML DOM + - NeedsExample + - Non-standard + - Propriété + - Reference + - Window +translation_of: Web/API/Window/mozPaintCount +--- +

{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko72")}}{{Gecko_MinVersion_Header("2.0")}}

+ +

Renvoie le nombre de fois où le document actuel a été peint à l'écran dans cette fenêtre.

+ +

Syntaxe

+ +
var paintCount = window.mozPaintCount;
+ + + +

Spécification

+ +

Ne fait partie d'aucune spécification ou recommandation du W3C.

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.mozPaintCount")}}

diff --git a/files/fr/web/api/window/name/index.html b/files/fr/web/api/window/name/index.html deleted file mode 100644 index ef7efa9448..0000000000 --- a/files/fr/web/api/window/name/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Window.name -slug: Web/API/Window/name -tags: - - API - - HTML DOM - - Propriété - - Reference -translation_of: Web/API/Window/name ---- -
{{APIRef}}
- -

En bref

- -

Récupère ou définit le nom de la fenêtre.

- -

Syntaxe

- -
string = window.name;
-window.name = string;
-
- -

Exemple

- -
window.name = "lab_view";
-
- -

Notes

- -

Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées.

- -

Les noms de fenêtres ont en outre été utilisés par quelques frameworks pour le support des échanges de messages inter-domaines (par exemple SessionVars et dojox.io.windowName de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'API postMessage pour les échanges de messages inter-domaines plutôt que s'appuyer sur window.name.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}{{Spec2('HTML5 W3C')}} 
diff --git a/files/fr/web/api/window/name/index.md b/files/fr/web/api/window/name/index.md new file mode 100644 index 0000000000..ef7efa9448 --- /dev/null +++ b/files/fr/web/api/window/name/index.md @@ -0,0 +1,54 @@ +--- +title: Window.name +slug: Web/API/Window/name +tags: + - API + - HTML DOM + - Propriété + - Reference +translation_of: Web/API/Window/name +--- +
{{APIRef}}
+ +

En bref

+ +

Récupère ou définit le nom de la fenêtre.

+ +

Syntaxe

+ +
string = window.name;
+window.name = string;
+
+ +

Exemple

+ +
window.name = "lab_view";
+
+ +

Notes

+ +

Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées.

+ +

Les noms de fenêtres ont en outre été utilisés par quelques frameworks pour le support des échanges de messages inter-domaines (par exemple SessionVars et dojox.io.windowName de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'API postMessage pour les échanges de messages inter-domaines plutôt que s'appuyer sur window.name.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}{{Spec2('HTML5 W3C')}} 
diff --git a/files/fr/web/api/window/navigator/index.html b/files/fr/web/api/window/navigator/index.html deleted file mode 100644 index 2f763caa88..0000000000 --- a/files/fr/web/api/window/navigator/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Window.navigator -slug: Web/API/Window/navigator -tags: - - API - - HTML DOM - - Property - - Read-only - - Reference - - Window -translation_of: Web/API/Window/navigator ---- -
{{APIRef}}
- -

La propriété en lecture-seule Window.navigator renvoie une référence à un objet qui est une instance de {{domxref("Navigator")}} et possède des méthodes et propriétés à propos de l'application qui exécute le script.

- -

Syntaxe

- -
navigatorObject = window.navigator
- -

Exemple

- -
var sUsrAg = navigator.userAgent;
-console.log("Voici l'agent utilisateur du navigateur courant", sUsrAg);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.navigator")}}

diff --git a/files/fr/web/api/window/navigator/index.md b/files/fr/web/api/window/navigator/index.md new file mode 100644 index 0000000000..2f763caa88 --- /dev/null +++ b/files/fr/web/api/window/navigator/index.md @@ -0,0 +1,48 @@ +--- +title: Window.navigator +slug: Web/API/Window/navigator +tags: + - API + - HTML DOM + - Property + - Read-only + - Reference + - Window +translation_of: Web/API/Window/navigator +--- +
{{APIRef}}
+ +

La propriété en lecture-seule Window.navigator renvoie une référence à un objet qui est une instance de {{domxref("Navigator")}} et possède des méthodes et propriétés à propos de l'application qui exécute le script.

+ +

Syntaxe

+ +
navigatorObject = window.navigator
+ +

Exemple

+ +
var sUsrAg = navigator.userAgent;
+console.log("Voici l'agent utilisateur du navigateur courant", sUsrAg);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.navigator")}}

diff --git a/files/fr/web/api/window/offline_event/index.html b/files/fr/web/api/window/offline_event/index.html deleted file mode 100644 index fa7752a90c..0000000000 --- a/files/fr/web/api/window/offline_event/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: 'Window: Evenement offline' -slug: Web/API/Window/offline_event -tags: - - API - - Event - - Offline - - Reference - - Window -translation_of: Web/API/Window/offline_event ---- -

{{APIRef}}

- -

L'événement offline de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de  {{domxref("Navigator.onLine")}} bascule à false.

- - - - - - - - - - - - - - - - - - - - -
BullesNon
AnnulableNon
Interface{{domxref("Event")}}
Propriété de gestionnaire d'événements{{domxref("GlobalEventHandlers.onoffline", "onoffline")}}
- -

Exemples

- -
//version addEventListener
-window.addEventListener('offline', (event) => {
-    console.log("La Connexion au réseau est perdu.");
-});
-
-// onoffline version
-window.onoffline = (event) => {
-  console.log("La Connexion au réseau a été perdue.");
-};
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', "indices.html#event-offline", "offline event")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des Navigateurs

- -

{{Compat("api.Window.offline_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/offline_event/index.md b/files/fr/web/api/window/offline_event/index.md new file mode 100644 index 0000000000..fa7752a90c --- /dev/null +++ b/files/fr/web/api/window/offline_event/index.md @@ -0,0 +1,73 @@ +--- +title: 'Window: Evenement offline' +slug: Web/API/Window/offline_event +tags: + - API + - Event + - Offline + - Reference + - Window +translation_of: Web/API/Window/offline_event +--- +

{{APIRef}}

+ +

L'événement offline de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de  {{domxref("Navigator.onLine")}} bascule à false.

+ + + + + + + + + + + + + + + + + + + + +
BullesNon
AnnulableNon
Interface{{domxref("Event")}}
Propriété de gestionnaire d'événements{{domxref("GlobalEventHandlers.onoffline", "onoffline")}}
+ +

Exemples

+ +
//version addEventListener
+window.addEventListener('offline', (event) => {
+    console.log("La Connexion au réseau est perdu.");
+});
+
+// onoffline version
+window.onoffline = (event) => {
+  console.log("La Connexion au réseau a été perdue.");
+};
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', "indices.html#event-offline", "offline event")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des Navigateurs

+ +

{{Compat("api.Window.offline_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/online_event/index.html b/files/fr/web/api/window/online_event/index.html deleted file mode 100644 index c2c93916c8..0000000000 --- a/files/fr/web/api/window/online_event/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'Window: online event' -slug: Web/API/Window/online_event -tags: - - API - - Evènement - - Online - - Reference - - Window -translation_of: Web/API/Window/online_event ---- -
{{APIRef}}
- -

L'événement online de l'interface {{domxref("Window")}} est déclenché lorsque le navigateur a obtenu l'accès au réseau et que la valeur de {{domxref("Navigator.onLine")}} passe à true.

- -
-

Note : Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web.

-
- - - - - - - - - - - - - - - - - - - - -
BullesNo
AnnulableNo
Interface{{domxref("Event")}}
Propriété de gestionnaire d'événements{{domxref("GlobalEventHandlers.ononline", "ononline")}}
- -

Exemples

- -
// addEventListener version
-window.addEventListener('online', (event) => {
-    console.log("Vous êtes maintenant connecté au réseau.");
-});
-
-// ononline version
-window.ononline = (event) => {
-  console.log("Vous êtes maintenant connecté au réseau.");
-};
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', "indices.html#event-online", "online event")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.online_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/online_event/index.md b/files/fr/web/api/window/online_event/index.md new file mode 100644 index 0000000000..c2c93916c8 --- /dev/null +++ b/files/fr/web/api/window/online_event/index.md @@ -0,0 +1,77 @@ +--- +title: 'Window: online event' +slug: Web/API/Window/online_event +tags: + - API + - Evènement + - Online + - Reference + - Window +translation_of: Web/API/Window/online_event +--- +
{{APIRef}}
+ +

L'événement online de l'interface {{domxref("Window")}} est déclenché lorsque le navigateur a obtenu l'accès au réseau et que la valeur de {{domxref("Navigator.onLine")}} passe à true.

+ +
+

Note : Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web.

+
+ + + + + + + + + + + + + + + + + + + + +
BullesNo
AnnulableNo
Interface{{domxref("Event")}}
Propriété de gestionnaire d'événements{{domxref("GlobalEventHandlers.ononline", "ononline")}}
+ +

Exemples

+ +
// addEventListener version
+window.addEventListener('online', (event) => {
+    console.log("Vous êtes maintenant connecté au réseau.");
+});
+
+// ononline version
+window.ononline = (event) => {
+  console.log("Vous êtes maintenant connecté au réseau.");
+};
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', "indices.html#event-online", "online event")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.online_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/onpaint/index.html b/files/fr/web/api/window/onpaint/index.html deleted file mode 100644 index d7ae9b979d..0000000000 --- a/files/fr/web/api/window/onpaint/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Window.onpaint -slug: Web/API/Window/onpaint -tags: - - API - - Event Handler - - HTML DOM - - Non-standard - - Propriété -translation_of: Web/API/Window/onpaint ---- -
{{ ApiRef() }} {{Non-standard_header}}
- -

Window.onpaint est un gestionnaire d'événements pour l'événement paint sur la fenêtre.

- -
-

Attention : Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!

-
- -

Syntaxe

- -
window.onpaint = funcRef;
-
- - - -

Notes

- -

onpaint ne fonctionne pas actuellement, et il est douteux que cet événement fonctionne du tout, voir {{ Bug(239074) }}.

- -

L'événement paint est déclenché lorsque la fenêtre est rendue. Cet événement se produit après l'événement {{Event ("load")}} pour une fenêtre, et se reproduit chaque fois que la fenêtre doit être restituée, par exemple lorsqu'une autre fenêtre l'obscurcit et est ensuite effacée.

- -

Spécification

- -

Cela ne fait partie d'aucune spécification.

diff --git a/files/fr/web/api/window/onpaint/index.md b/files/fr/web/api/window/onpaint/index.md new file mode 100644 index 0000000000..d7ae9b979d --- /dev/null +++ b/files/fr/web/api/window/onpaint/index.md @@ -0,0 +1,37 @@ +--- +title: Window.onpaint +slug: Web/API/Window/onpaint +tags: + - API + - Event Handler + - HTML DOM + - Non-standard + - Propriété +translation_of: Web/API/Window/onpaint +--- +
{{ ApiRef() }} {{Non-standard_header}}
+ +

Window.onpaint est un gestionnaire d'événements pour l'événement paint sur la fenêtre.

+ +
+

Attention : Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!

+
+ +

Syntaxe

+ +
window.onpaint = funcRef;
+
+ + + +

Notes

+ +

onpaint ne fonctionne pas actuellement, et il est douteux que cet événement fonctionne du tout, voir {{ Bug(239074) }}.

+ +

L'événement paint est déclenché lorsque la fenêtre est rendue. Cet événement se produit après l'événement {{Event ("load")}} pour une fenêtre, et se reproduit chaque fois que la fenêtre doit être restituée, par exemple lorsqu'une autre fenêtre l'obscurcit et est ensuite effacée.

+ +

Spécification

+ +

Cela ne fait partie d'aucune spécification.

diff --git a/files/fr/web/api/window/open/index.html b/files/fr/web/api/window/open/index.html deleted file mode 100644 index 6c44f9dd5c..0000000000 --- a/files/fr/web/api/window/open/index.html +++ /dev/null @@ -1,518 +0,0 @@ ---- -title: window.open -slug: Web/API/Window/open -tags: - - DOM - - DOM_0 -translation_of: Web/API/Window/open ---- -

{{ ApiRef() }}

- -

Définition

- -

Crée une nouvelle fenêtre de navigation secondaire et y charge la ressource référencée.

- -

Syntaxe

- -
var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);
- -

Valeur renvoyée et paramètres

- -
-
WindowObjectReference
-
Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode open() ; elle sera à null si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (Same origin policy security requirements ).
-
strUrl
-
Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. strUrl peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur.
-
strWindowName
-
Il s'agit de la chaîne d'identification de la nouvelle fenêtre. Celle-ci peut être utilisée pour être la cible de liens et de formulaires lorsque l'attribut target d'un élément <a> ou d'un élément <form> est spécifié. Cette chaîne ne peut contenir d'espaces. strWindowName ne spécifie pas le titre de la fenêtre, juste son nom interne.
-
strWindowFeatures
-
Paramètre optionnel. Il s'agit de la chaîne listant les fonctionnalités de la nouvelle fenêtre de navigation (et de ses barres d'outils). Cette chaîne ne peut contenir d'espaces. Chaque fonctionnalité doit être séparée par une virgule au sein de la chaîne de caractères.
-
- -

Description

- -

La méthode open() crée une nouvelle fenêtre secondaire de navigation, de façon similaire au choix de l'option Nouvelle fenêtre du menu Fichier. Le paramètre strUrl spécifie l'URL à récupérer et à charger dans la nouvelle fenêtre. Si strUrl est une chaîne vide, une nouvelle fenêtre vide de tout contenu (l'URL about:blank sera chargée) est créée avec les barres d'outils par défaut de la fenêtre principale.

- -

Notez que les URL distantes ne seront pas chargées instantanément. Lorsque l'appel à window.open() se termine et renvoie sa valeur, la fenêtre contient toujours about:blank. Le chargement proprement dit de l'URL est reporté et ne commence effectivement qu'après la fin de l'exécution du bloc de script courant. La création de la fenêtre d'une part et le chargement de la ressource référencée d'autre part sont faits de manière asynchrone.

- -

Exemples

- -
var windowObjectReference;
-var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
-
-function openRequestedPopup() {
-  windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures);
-}
- -
var windowObjectReference;
-
-function openRequestedPopup() {
-  windowObjectReference = window.open(
-    "http://www.domainname.ext/path/ImageFile.png",
-    "DescriptiveWindowName",
-    "resizable,scrollbars,status"
-  );
-}
- - - -

Si une fenêtre du nom strWindowName existe déjà, alors, au lieu d'ouvrir une nouvelle fenêtre, strUrl est chargée dans cette fenêtre existante. Dans ce cas, la valeur renvoyée par la méthode est la fenêtre existante, et strWindowFeatures est ignorée. Fournir une chaîne vide pour strUrl est une manière d'obtenir une référence à une fenêtre ouverte par son nom sans en changer l'adresse. Si vous désirez ouvrir une nouvelle fenêtre à chaque appel de window.open(), il faut utiliser la nom réservé _blank pour strWindowName.

- -
-

Note : À propos de l'utilisation de window.open pour ré-ouvrir ou donner le focus à une fenêtre existante portant un nom connu du domaine : Cette fonctionalité n'est pas valide pour tous les navigateurs et qui plus est avec des comportement variables. Firefox (50.0.1) fonctionne comme il est décrit ici : depuis le même domaine+port la ré-exécution de window.open avec le même nom va accéder à la fenêtre précédemment ouverte.  Google Chrome (55.0.2883.87 m ) pour sa part ne l'exécutera qu'à partir du même parent (nommé "opener", comme si les fenêtres étaient créées avec une dépendance et uniquement avec window.open). Il s'agit là d'une limitation considérable ce qui génère une incroyable complexité de développement parfois sans issue. Firefox récupère le handle vers toutes les fenêtres du domaine dont le nom est connu, ce qui permet d'accéder à leur données, mais il ne peut exécuter une commande HTMLElement.focus() vers l'une quelconque de ces fenêtres, ce qui interdit de réouvrir la fenêtre pourtant connue comme active. Pour sa part Chrome peut redonner le focus à une fenêtre (onglet) enfant mais l'opération est impossible entre frères et depuis l'enfant vers le parent. Quant aux autres fenêtres du même domaine (même famille ?) non ouvertes avec window.open elles sont inconnues et window.open('',<name>,'') ouvrira alors des doublons. La fonction hw=window.open('',strWindowName ,'') est pourtant la seule qui permette de récupérer un handle en connaissant un nom et théoriquement éviter la création de doublons, mais pour l'instant, 22/02/2017, les différences de comportement des navigateurs ne permettent de l'utiliser que de manière partielle dans des cas très restreints.

-
- -

strWindowFeatures est une chaîne optionnelle contenant une liste, séparée par des virgules, de fonctionnalités demandées pour la nouvelle fenêtre. Après qu'une fenêtre soit ouverte, vous ne pouvez pas utiliser JavaScript pour changer ses fonctionnalités et ses barres d'outils. Si strWindowName ne spécifie pas une fenêtre existante et si vous ne fournissez pas le paramètre strWindowFeatures (ou si celui-ci est une chaîne vide), la nouvelle fenêtre secondaire comportera les barres d'outils par défaut de la fenêtre principale.

- -

Si le paramètre strWindowFeatures est utilisé et si aucune information de taille n'est définie, les dimensions de la nouvelle fenêtre seront les mêmes que celles de la fenêtre ouverte la plus récemment.

- -

Si le paramètre strWindowFeatures est utilisé et qu'aucune information de position n'est définie, les coordonnées du coin en haut à gauche de la nouvelle fenêtre seront décalées de 22 pixels vers le bas et vers la droite par rapport à celles de la fenêtre ouverte le plus récemment. Un décalage est utilisé par tous les concepteurs de navigateurs (il est de 29 pixels dans Internet Explorer 6 SP2 avec le thème par défaut) et son but est d'aider l'utilisateur à remarquer l'ouverture d'une nouvelle fenêtre. Si la fenêtre ouverte le plus récemment était maximisée, il n'y aura pas de décalage et la nouvelle fenêtre secondaire sera maximisée également.

- -

Si le paramètre strWindowFeatures est défini, les fonctionnalités qui ne sont pas listées, explicitement demandées dans la chaîne, seront désactivées ou enlevées (à l'exception de titlebar et close qui sont par défaut à yes).

- -
-

Note : Si vous utilisez le paramètre strWindowFeatures, listez uniquement les fonctionnalités dont vous avez besoin, qui doivent être activées ou affichées. Les autres (à l'exception de titlebar et close) seront désactivées ou enlevées.

-
- -

Fonctionnalités de position et de taille

- -

Note sur les corrections d'erreurs de position et de dimension

- -

{{bug(176320) }}

- -

Note sur les priorités

- -
-
left
-
Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord gauche de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.
-
top
-
Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord supérieur de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.
-
height
-
Spécifie la hauteur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de hauteur comprend celle de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.
-
width
-
Spécifie la largeur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de largeur comprend celle de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.
-
screenX
-
Mozilla.
-
screenY
-
Mozilla.
-
outerHeight
-

Spécifie la hauteur de toute la fenêtre de navigation en pixels. Cette valeur outerHeight comprend toute barre d'outils présente, la barre de défilement horizontale de la fenêtre (si présente) et les bordures inférieures et supérieures. La valeur minimale requise est 100.

-

Note : étant donné que la barre de titre est toujours visible, demander une valeur outerHeight=100 rendra la valeur innerHeight de la fenêtre de navigation plus petite que les 100 pixels minimaux habituels.

-
outerWidth
-
Spécifie la largeur de toute la fenêtre de navigation en pixels. Cette valeur outerWidth comprend la barre de défilement verticale (si présente) et les bords gauche et droits de la fenêtre.
-
innerHeight
-
de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur innerHeight comprend la hauteur de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.
-
innerWidth
-
de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur innerWidth comprend la largeur de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.
-
- -

Fonctionnalités de barres d'outils et de chrome

- -
-
menubar
-

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire disposera d'une barre de menus. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de menus en positionnant dom.disable_window_open_feature.menubar à true dans about:config ou dans leur fichier user.js.

-
toolbar
-

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant dom.disable_window_open_feature.toolbar à true dans about:config ou dans leur fichier user.js.

-
location
-

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant dom.disable_window_open_feature.location à true dans about:config ou dans leur fichier user.js. Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs à voir dans les fenêtres pop-up. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont. » provenant de Better Website Identification. Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }}

-
directories
-

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnantdom.disable_window_open_feature.directories à true dans about:config ou dans leur fichier user.js.

-
personalbar
-
Similaire à directories, mais ne fonctionne que dans Netscape et les navigateurs basés sur Mozilla.
-
status
-
Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire disposera d'une barre d'état. Les utilisateurs peuvent forcer la présence de la barre d'état dans tous les navigateurs basés sur Mozilla, dans Internet Explorer 6 SP2 (Note sur la barre d'état avec XP SP2) et dans Opera 6+. Les réglages par défaut des navigateurs récents basés sur Mozilla et Firefox 1.0 forcent la présence de la barre d'état.
-
- -

Fonctionnalités relatives à la fenêtre

- -
-
resizable
-

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire sera redimensionnable À partir de la version 1.4, les navigateurs basés sur Mozilla ont une zone de redimensionnement à l'extrémité droite de la barre d'état. Cela permet de s'assurer que les utilisateurs peuvent toujours redimensionner la fenêtre même si l'auteur de la page Web a demandé que cette fenêtre secondaire ne soit pas redimensionnable. Dans ce cas, les icônes de maximisation/restauration dans la barre de titre de la fenêtre seront désactivées et les bordures de la fenêtre ne permettront pas de la redimensionner, mais celle-ci pourra toujours être redimensionnée via cette zone de la barre d'état. Il est probable qu'à partir de Firefox 3, toutes les fenêtres secondaires seront redimensionnables ({{ Bug(177838) }})

-
-

Note : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à yes.

-
-

Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à être facilement redimensionnables en positionnant dom.disable_window_open_feature.resizable à true dans about:config ou dans leur fichier user.js.

-
-
scrollbars
-

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire affichera des barres de défilement horizontales et/ou verticales si le document ne rentre pas dans la zone d'affichage de la fenêtre.

-
-

Note : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à yes.

-
-

Les utilisateurs de Mozilla et Firefox peuvent obliger cette option à être toujours activée en positionnant dom.disable_window_open_feature.scrollbars à true dans about:config ou dans leur fichier user.js.

-
dependent
-
Si définie à yes, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente. Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée. La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }}) Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode showModelessDialog().
-
modal
-

Note : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège UniversalBrowserWrite ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à dependent. Si définie à yes, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la fonction alert(). Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode showModalDialog().

-
dialog
-

La fonctionnalité dialog retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme desheets.

-
minimizable
-

Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite dialog=yes. Si minimizable est défini à yes, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée.

-
fullscreen
-

Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x. fullscreen ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec fullscreen est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur. fullscreen ne fonctionne plus vraiment dans Internet Explorer 6 SP2.

-
- -

Fonctionnalités nécessitant des privilèges

- -

Les fonctionnalités suivantes nécessitent le privilège UniversalBrowserWrite, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le PrivilegeManager.

- -
-
chrome
-

Note : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège UniversalBrowserWrite ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à yes, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon).

-
titlebar
-

Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à no, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnantdom.disable_window_open_feature.titlebar à true dans about:config ou dans leur fichier user.js.

-
alwaysRaised
-
Si défini à yes, la nouvelle fenêtre sera toujours affichée par dessus les autres fenêtres du navigateur, qu'elle soit active ou non.
-
alwaysLowered
-

Si défini à yes, la nouvelle fenêtre créé flottera par dessous sa propre fenêtre parente tant que celle-ci n'est pas réduite. Les fenêtres utilisant alwaysLowered sont souvent appelées pop-under. Celles-ci ne peuvent pas passer au dessus de leur fenêtre parente, mais celle-ci peut être réduite. Dans Netscape 6.x, les fenêtres alwaysLowered n'ont pas de commande système de réduction ni de commande système restaurer/agrandir.

-
z-lock
-
Identique à alwaysLowered.
-
close
-

Lorsque défini à no, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité dialog activée). close=no a précédence sur minimizable=yes.Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant dom.disable_window_open_feature.close à true dans about:config ou dans leur fichier user.js.

-
- -

Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de yes (oui) ou no (non) ; il est également possible d'utiliser 1 à la place de yes et 0 à la place de no. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne strWindowFeatures. Si vous fournissez le paramètre strWindowFeatures, les fonctionnalités titlebar et close sont toujours à yes par défaut, mais les autres fonctionnalités présentant un choix yes/no seront à no par défaut et seront donc désactivées.

- -

Exemple :

- -
<script type="text/javascript">
-var WindowObjectReference; // variable globale
-
-function openRequestedPopup() {
-  WindowObjectReference = window.open("http://www.nomdedomaine.ext/chemin/FichierImg.png",
-        "NomDeFenetreDescriptif",
-        "width=420,height=230,resizable,scrollbars=yes,status=1");
-}
-</script>
-
- -

Dans cet exemple, la fenêtre sera redimensionnable, elle affichera des barres de défilement si nécessaire (si le contenu dépasse les dimensions de fenêtre demandées) et affichera la barre d'état. Elle n'affichera pas la barre de menus ni la barre d'adresse. Comme l'auteur connaissait la taille de l'image (400 pixels de large et 200 pixels de haut), il a ajouté les marges appliquées à l'élément racine dans Internet Explorer 6, c'est-à-dire 15 pixels en haut, 15 pixels en bas, 10 pixels à gauche et 10 pixels à droite.

- -

Bonnes pratiques

- -
<script type="text/javascript">
-var WindowObjectReference = null; // variable globale
-
-function openFFPromotionPopup() {
-  if (WindowObjectReference == null || WindowObjectReference.closed) {
-    /* si le pointeur vers l'objet window n'existe pas, ou s'il existe
-       mais que la fenêtre a été fermée */
-    WindowObjectReference = window.open("http://www.spreadfirefox.com/",
-           "PromoteFirefoxWindowName", "resizable=yes,scrollbars=yes,status=yes");
-    /* alors, création du pointeur. La nouvelle fenêtre sera créée par dessus
-       toute autre fenêtre existante. */
-  }
-  else {
-    WindowObjectReference.focus();
-    /* sinon, la référence à la fenêtre existe et la fenêtre n'a pas été
-       fermée: la fenêtre est peut-être minimisée ou derrière la fenêtre
-       principale. Par conséquent, on peut l'amener par dessus les autres à
-       l'aide de la méthode focus(). Il n'est pas nécessaire de recréer la fenêtre
-       ou de recharger la ressource référencée. */
-  };
-}
-</script>
-
-(...)
-
-<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" onclick="openFFPromotionPopup(); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir
-l'adoption de Firefox</a></p>
-
- -

Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (usability ) relatif aux liens ouvrant des fenêtres secondaires. Le but du return false dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ».

- -

Plus d'informations sur l'utilisation de l'attribut target :

- -

HTML 4.01, section 16.3.2 La sémantique de cible

- -

Comment créer un lien qui ouvre une nouvelle fenêtre?

- -

Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web :

- -
<script type="text/javascript">
-var WindowObjectReference = null; // variable globale
-
-function openRequestedPopup(strUrl, strWindowName) {
-  if(WindowObjectReference == null || WindowObjectReference.closed) {
-    WindowObjectReference = window.open(strUrl, strWindowName,
-           "resizable=yes,scrollbars=yes,status=yes");
-  }
-  else {
-    WindowObjectReference.focus();
-  };
-}
-</script>
-(...)
-
-<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir l'adoption de Firefox</a></p>
-
- -

Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière :

- -
<script type="text/javascript">
-var WindowObjectReference = null; // variable globale
-var PreviousUrl; /* variable globale qui stockera l'URL actuellement
-                    chargée dans la fenêtre secondaire */
-
-function openRequestedSinglePopup(strUrl)
-{
-  if(WindowObjectReference == null || WindowObjectReference.closed)
-  {
-    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
-           "resizable=yes,scrollbars=yes,status=yes");
-  }
-  else if(previousUrl != strUrl)
-  {
-    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
-        "resizable=yes,scrollbars=yes,status=yes");
-    /* si la ressource à charger est différente, on la charge dans la fenêtre
-       secondaire déjà ouverte, et on ramène ensuite celle-ci par dessus
-       sa fenêtre parente. */
-    WindowObjectReference.focus();
-  }
-  else
-  {
-    WindowObjectReference.focus();
-  };
-  PreviousUrl = strUrl;
-  /* explication : on stocke l'URL courante afin de pouvoir la comparer
-     dans le cas d'un autre appel à cette fonction. */
-}
-</script>
-
-(...)
-
-<p><a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName"
-onclick="openRequestedSinglePopup(this.href); return false;"
-title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir
-l'adoption de Firefox</a></p>
-<p><a href="http://www.mozilla.org/support/firefox/faq"
-target="SingleSecondaryWindowName"
-onclick="openRequestedSinglePopup(this.href); return false;"
-title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">FAQ
-de Firefox</a></p>
-
- -

FAQ

- -
-
Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ?
-
Vous ne pouvez pas. La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript. La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : "Scripts may not close windows that were not opened by script." Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. Plus de détails sur la méthode window.close()
-
Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ?
-
Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode focus(). Il n'y a pas d'autre manière fiable. Un exemple montrant comment utiliser la méthode focus() est présenté ci-dessus.
-
Comment forcer une fenêtre à être agrandie/maximisée ?
-
Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter.
-
Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ?
-
Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans about:config. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à yes pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs.
-
Comment redimensionner une fenêtre en fonction de son contenu ?
-

Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case Édition/Préférences/Avancé/Scripts & plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes dans Mozilla ou Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes dans Firefox, ou en positionnant dom.disable_window_move_resize à true dans about:config ou encore en éditant leur fichier user.js. En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects.

La méthode sizeToContent() de l'objet window est également désactivée si l'utilisateur décoche la préférence Déplacer ou redimensionner des fenêtres existantes. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai.

-
Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ?
-
Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. K-meleon 1.1, un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées. Dans quelques années, la propriété target du module CSS3 hyperlien pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur.
-
Comment savoir si une fenêtre que j'ai ouverte l'est toujours ?
-
Vous pouvez tester l'existence de la référence à l'objet window, qui est la valeur renvoyée en cas de succès de l'appel à window.open(), et vérifier ensuite que la valeur renvoyée par WindowObjectReference.closed est bien false.
-
Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ?
-
Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par window.open() : elle sera null si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable.
-
Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ?
-
La valeur renvoyée par la méthode window.open() est la propriété opener. La variable WindowObjectReference lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé opener liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture).
-
Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property <property_name or method_name> ». Pourquoi cela ?
-

Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appeléeSame Origin Policy , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) ne peut pas obtenir ou modifier des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : http://www.mozilla.org/projects/secu...me-origin.html

-
- -

Problèmes d'utilisabilité

- -

Évitez de recourir à window.open()

- -

De manière générale, il est préférable d'éviter d'utiliser window.open() pour plusieurs raisons :

- - - -

Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations

- -

Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées :

- -
N'utilisez jamais ce format de code pour les liens :
- <a href="javascript:window.open(...)" ...>
- -

Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs.

- - - -

Plus d'informations à ce sujet :

- - - -
N'utilisez jamais <a href="#" onclick="window.open(...);">
- -

Un tel pseudo-lien met également en péril l'accessibilité des liens. Utilisez toujours une véritable URL pour la valeur de l'attribut href, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc.

- -
Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire
- -

Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut title du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris.

- -

Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable).

- -
-

« Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un boutonPrécédente grisé. »
- citation de The Top TenNew Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, mai 1999

-
- -

Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non).

- -

Références

- - - -
Utilisez toujours l'attribut target
- -

Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — sans l'imposer — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale.

- -
N'utilisez pas target="_blank"
- -

Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées.

- -

Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur).

- -

Glossaire

- -
-
Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre
-
Termes souvent utilisés pour décrire ou identifier la même fenêtre. Il s'agit de la fenêtre depuis laquelle une nouvelle fenêtre sera créée. C'est la fenêtre dans laquelle l'utilisateur clique sur un lien qui mène à la création d'une autre, nouvelle fenêtre.
-
Sous-fenêtre, fenêtre enfant, fenêtre secondaire, deuxième fenêtre
-
Termes souvent utilisés pour décrire ou identifier la même fenêtre. C'est la nouvelle fenêtre qui a été créée.
-
Fenêtres popup non sollicitées
-
Ouverture automatique de fenêtres initiée par un script sans le consentement de l'utilisateur.
-
- -

Spécification

- -

{{ DOM0() }} window.open() ne fait partie d'aucune spécification ou recommandation technique du W3C.

- -

Notes

- -

Note sur les priorités

- -

Dans les cas où left et screenX (et/ou top et screenY) ont des valeurs contradictoires, left et top ont priorité sur screenX et screenY respectivement. Si left et screenX (et/ou top et screenY) sont définies dans la liste strWindowFeatures, les valeurs left (et/ou top) seront reconnues et utilisées. Dans l'exemple suivant, la nouvelle fenêtre sera positionnée à 100 pixels du bord gauche de la zone de travail des applications du système d'exploitation de l'utilisateur, et non à 200 pixels.

- -
<script type="text/javascript">
-WindowObjectReference = window.open("http://www.lemonde.fr/",
-           "NomDeLaFenetreLeMonde",
-           "left=100,screenX=200,resizable,scrollbars,status");
-</script>
-
- -

Si left est défini, mais que top n'a aucune valeur mais que screenY en a une, left et screenY seront les coordonnées de positionnement de la fenêtre secondaire.

- -

outerWidth a priorité sur width, et width a priorité sur innerWidth. outerHeight a priorité sur height et height a priorité sur innerHeight. Dans l'exemple suivant, les navigateurs basés sur Mozilla créeront une nouvelle fenêtre avec une taille extérieure (outerWidth) de 600 pixels de large et ignoreront la requête d'une largeur (width) de 500 pixels ainsi que celle d'une taille intérieure (innerWidth) de 400 pixels.

- -
<script type="text/javascript">
-WindowObjectReference = window.open("http://www.wwf.org/",
-           "NomDeLaFenetreWWF",
-           "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status");
-</script>
-
- -

Note sur les corrections d'erreurs de position et de dimension

- -

Les positions et dimensions demandées dans la liste strWindowFeatures ne seront pas respectées et seront corrigées si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.

- -

Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire, mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs.

- -

Note sur les barres de défilement

- -

Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web :

- - - -

Note sur la barre d'état

- -

Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec SSL (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.

- -

Note sur les problèmes de sécurité liés à la présence de la barre d'état

- -

Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de window.open() :

- -
-

« Pour les fenêtres ouvertes à l'aide de window.open() :
- Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. La barre d'état sera activée par défaut et fait entre 20 et 25 pixels de haut. (...) »
- citation de Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2

-
- -
-

« (...) les fenêtres créées à l'aide de la méthode window.open() peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible.
- Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...)
- Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état. (...)
- Gestion de la barre d'état d'Internet Explorer par les scripts
- Description détaillée
- Internet Explorer a été modifié pour ne désactiver la barre d'état pour aucune fenêtre. La barre d'état est toujours visible pour toutes les fenêtres d'Internet Explorer. (...) Sans ce changement, les fenêtres créées à l'aide de la méthode window.open() peuvent être appelées par des scripts et imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations importantes pour l'utilisateur.
- La barre d'état est une fonction de sécurité des fenêtres d'Internet Explorer qui fournissent à l'utilisateur des informations sur les zones de sécurité. Cette zone ne peut pas être imitée (...)"
- citation de Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions

-
- -

Note sur le plein écran (fullscreen)

- -

Dans Internet Explorer 6 pour XP SP2 :

- - - -

Références :

- - - -

Note sur la différence entre outerHeight et height

- - -

Tutoriels

- -

en français :

- -

Créer des pop-up intelligentes par Fabrice Bonny, OpenWeb

- -

en anglais :

- -

JavaScript windows (tutorial) par Lasse Reichstein Nielsen

- -

The perfect pop-up (tutorial) par Ian Lloyd

- -

Popup windows and Firefox (interactive demos) par Gérard Talbot

- -

Références

- -

Links Want To Be Links by Jukka K. Korpela

- -

Links & JavaScript Living Together in Harmony by Jeff Howden

diff --git a/files/fr/web/api/window/open/index.md b/files/fr/web/api/window/open/index.md new file mode 100644 index 0000000000..6c44f9dd5c --- /dev/null +++ b/files/fr/web/api/window/open/index.md @@ -0,0 +1,518 @@ +--- +title: window.open +slug: Web/API/Window/open +tags: + - DOM + - DOM_0 +translation_of: Web/API/Window/open +--- +

{{ ApiRef() }}

+ +

Définition

+ +

Crée une nouvelle fenêtre de navigation secondaire et y charge la ressource référencée.

+ +

Syntaxe

+ +
var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);
+ +

Valeur renvoyée et paramètres

+ +
+
WindowObjectReference
+
Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode open() ; elle sera à null si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (Same origin policy security requirements ).
+
strUrl
+
Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. strUrl peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur.
+
strWindowName
+
Il s'agit de la chaîne d'identification de la nouvelle fenêtre. Celle-ci peut être utilisée pour être la cible de liens et de formulaires lorsque l'attribut target d'un élément <a> ou d'un élément <form> est spécifié. Cette chaîne ne peut contenir d'espaces. strWindowName ne spécifie pas le titre de la fenêtre, juste son nom interne.
+
strWindowFeatures
+
Paramètre optionnel. Il s'agit de la chaîne listant les fonctionnalités de la nouvelle fenêtre de navigation (et de ses barres d'outils). Cette chaîne ne peut contenir d'espaces. Chaque fonctionnalité doit être séparée par une virgule au sein de la chaîne de caractères.
+
+ +

Description

+ +

La méthode open() crée une nouvelle fenêtre secondaire de navigation, de façon similaire au choix de l'option Nouvelle fenêtre du menu Fichier. Le paramètre strUrl spécifie l'URL à récupérer et à charger dans la nouvelle fenêtre. Si strUrl est une chaîne vide, une nouvelle fenêtre vide de tout contenu (l'URL about:blank sera chargée) est créée avec les barres d'outils par défaut de la fenêtre principale.

+ +

Notez que les URL distantes ne seront pas chargées instantanément. Lorsque l'appel à window.open() se termine et renvoie sa valeur, la fenêtre contient toujours about:blank. Le chargement proprement dit de l'URL est reporté et ne commence effectivement qu'après la fin de l'exécution du bloc de script courant. La création de la fenêtre d'une part et le chargement de la ressource référencée d'autre part sont faits de manière asynchrone.

+ +

Exemples

+ +
var windowObjectReference;
+var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
+
+function openRequestedPopup() {
+  windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures);
+}
+ +
var windowObjectReference;
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImageFile.png",
+    "DescriptiveWindowName",
+    "resizable,scrollbars,status"
+  );
+}
+ + + +

Si une fenêtre du nom strWindowName existe déjà, alors, au lieu d'ouvrir une nouvelle fenêtre, strUrl est chargée dans cette fenêtre existante. Dans ce cas, la valeur renvoyée par la méthode est la fenêtre existante, et strWindowFeatures est ignorée. Fournir une chaîne vide pour strUrl est une manière d'obtenir une référence à une fenêtre ouverte par son nom sans en changer l'adresse. Si vous désirez ouvrir une nouvelle fenêtre à chaque appel de window.open(), il faut utiliser la nom réservé _blank pour strWindowName.

+ +
+

Note : À propos de l'utilisation de window.open pour ré-ouvrir ou donner le focus à une fenêtre existante portant un nom connu du domaine : Cette fonctionalité n'est pas valide pour tous les navigateurs et qui plus est avec des comportement variables. Firefox (50.0.1) fonctionne comme il est décrit ici : depuis le même domaine+port la ré-exécution de window.open avec le même nom va accéder à la fenêtre précédemment ouverte.  Google Chrome (55.0.2883.87 m ) pour sa part ne l'exécutera qu'à partir du même parent (nommé "opener", comme si les fenêtres étaient créées avec une dépendance et uniquement avec window.open). Il s'agit là d'une limitation considérable ce qui génère une incroyable complexité de développement parfois sans issue. Firefox récupère le handle vers toutes les fenêtres du domaine dont le nom est connu, ce qui permet d'accéder à leur données, mais il ne peut exécuter une commande HTMLElement.focus() vers l'une quelconque de ces fenêtres, ce qui interdit de réouvrir la fenêtre pourtant connue comme active. Pour sa part Chrome peut redonner le focus à une fenêtre (onglet) enfant mais l'opération est impossible entre frères et depuis l'enfant vers le parent. Quant aux autres fenêtres du même domaine (même famille ?) non ouvertes avec window.open elles sont inconnues et window.open('',<name>,'') ouvrira alors des doublons. La fonction hw=window.open('',strWindowName ,'') est pourtant la seule qui permette de récupérer un handle en connaissant un nom et théoriquement éviter la création de doublons, mais pour l'instant, 22/02/2017, les différences de comportement des navigateurs ne permettent de l'utiliser que de manière partielle dans des cas très restreints.

+
+ +

strWindowFeatures est une chaîne optionnelle contenant une liste, séparée par des virgules, de fonctionnalités demandées pour la nouvelle fenêtre. Après qu'une fenêtre soit ouverte, vous ne pouvez pas utiliser JavaScript pour changer ses fonctionnalités et ses barres d'outils. Si strWindowName ne spécifie pas une fenêtre existante et si vous ne fournissez pas le paramètre strWindowFeatures (ou si celui-ci est une chaîne vide), la nouvelle fenêtre secondaire comportera les barres d'outils par défaut de la fenêtre principale.

+ +

Si le paramètre strWindowFeatures est utilisé et si aucune information de taille n'est définie, les dimensions de la nouvelle fenêtre seront les mêmes que celles de la fenêtre ouverte la plus récemment.

+ +

Si le paramètre strWindowFeatures est utilisé et qu'aucune information de position n'est définie, les coordonnées du coin en haut à gauche de la nouvelle fenêtre seront décalées de 22 pixels vers le bas et vers la droite par rapport à celles de la fenêtre ouverte le plus récemment. Un décalage est utilisé par tous les concepteurs de navigateurs (il est de 29 pixels dans Internet Explorer 6 SP2 avec le thème par défaut) et son but est d'aider l'utilisateur à remarquer l'ouverture d'une nouvelle fenêtre. Si la fenêtre ouverte le plus récemment était maximisée, il n'y aura pas de décalage et la nouvelle fenêtre secondaire sera maximisée également.

+ +

Si le paramètre strWindowFeatures est défini, les fonctionnalités qui ne sont pas listées, explicitement demandées dans la chaîne, seront désactivées ou enlevées (à l'exception de titlebar et close qui sont par défaut à yes).

+ +
+

Note : Si vous utilisez le paramètre strWindowFeatures, listez uniquement les fonctionnalités dont vous avez besoin, qui doivent être activées ou affichées. Les autres (à l'exception de titlebar et close) seront désactivées ou enlevées.

+
+ +

Fonctionnalités de position et de taille

+ +

Note sur les corrections d'erreurs de position et de dimension

+ +

{{bug(176320) }}

+ +

Note sur les priorités

+ +
+
left
+
Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord gauche de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.
+
top
+
Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord supérieur de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.
+
height
+
Spécifie la hauteur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de hauteur comprend celle de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.
+
width
+
Spécifie la largeur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de largeur comprend celle de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.
+
screenX
+
Mozilla.
+
screenY
+
Mozilla.
+
outerHeight
+

Spécifie la hauteur de toute la fenêtre de navigation en pixels. Cette valeur outerHeight comprend toute barre d'outils présente, la barre de défilement horizontale de la fenêtre (si présente) et les bordures inférieures et supérieures. La valeur minimale requise est 100.

+

Note : étant donné que la barre de titre est toujours visible, demander une valeur outerHeight=100 rendra la valeur innerHeight de la fenêtre de navigation plus petite que les 100 pixels minimaux habituels.

+
outerWidth
+
Spécifie la largeur de toute la fenêtre de navigation en pixels. Cette valeur outerWidth comprend la barre de défilement verticale (si présente) et les bords gauche et droits de la fenêtre.
+
innerHeight
+
de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur innerHeight comprend la hauteur de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.
+
innerWidth
+
de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur innerWidth comprend la largeur de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.
+
+ +

Fonctionnalités de barres d'outils et de chrome

+ +
+
menubar
+

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire disposera d'une barre de menus. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de menus en positionnant dom.disable_window_open_feature.menubar à true dans about:config ou dans leur fichier user.js.

+
toolbar
+

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant dom.disable_window_open_feature.toolbar à true dans about:config ou dans leur fichier user.js.

+
location
+

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant dom.disable_window_open_feature.location à true dans about:config ou dans leur fichier user.js. Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs à voir dans les fenêtres pop-up. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont. » provenant de Better Website Identification. Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }}

+
directories
+

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnantdom.disable_window_open_feature.directories à true dans about:config ou dans leur fichier user.js.

+
personalbar
+
Similaire à directories, mais ne fonctionne que dans Netscape et les navigateurs basés sur Mozilla.
+
status
+
Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire disposera d'une barre d'état. Les utilisateurs peuvent forcer la présence de la barre d'état dans tous les navigateurs basés sur Mozilla, dans Internet Explorer 6 SP2 (Note sur la barre d'état avec XP SP2) et dans Opera 6+. Les réglages par défaut des navigateurs récents basés sur Mozilla et Firefox 1.0 forcent la présence de la barre d'état.
+
+ +

Fonctionnalités relatives à la fenêtre

+ +
+
resizable
+

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire sera redimensionnable À partir de la version 1.4, les navigateurs basés sur Mozilla ont une zone de redimensionnement à l'extrémité droite de la barre d'état. Cela permet de s'assurer que les utilisateurs peuvent toujours redimensionner la fenêtre même si l'auteur de la page Web a demandé que cette fenêtre secondaire ne soit pas redimensionnable. Dans ce cas, les icônes de maximisation/restauration dans la barre de titre de la fenêtre seront désactivées et les bordures de la fenêtre ne permettront pas de la redimensionner, mais celle-ci pourra toujours être redimensionnée via cette zone de la barre d'état. Il est probable qu'à partir de Firefox 3, toutes les fenêtres secondaires seront redimensionnables ({{ Bug(177838) }})

+
+

Note : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à yes.

+
+

Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à être facilement redimensionnables en positionnant dom.disable_window_open_feature.resizable à true dans about:config ou dans leur fichier user.js.

+
+
scrollbars
+

Si cette fonctionnalité est définie à yes, la nouvelle fenêtre secondaire affichera des barres de défilement horizontales et/ou verticales si le document ne rentre pas dans la zone d'affichage de la fenêtre.

+
+

Note : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à yes.

+
+

Les utilisateurs de Mozilla et Firefox peuvent obliger cette option à être toujours activée en positionnant dom.disable_window_open_feature.scrollbars à true dans about:config ou dans leur fichier user.js.

+
dependent
+
Si définie à yes, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente. Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée. La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }}) Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode showModelessDialog().
+
modal
+

Note : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège UniversalBrowserWrite ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à dependent. Si définie à yes, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la fonction alert(). Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode showModalDialog().

+
dialog
+

La fonctionnalité dialog retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme desheets.

+
minimizable
+

Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite dialog=yes. Si minimizable est défini à yes, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée.

+
fullscreen
+

Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x. fullscreen ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec fullscreen est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur. fullscreen ne fonctionne plus vraiment dans Internet Explorer 6 SP2.

+
+ +

Fonctionnalités nécessitant des privilèges

+ +

Les fonctionnalités suivantes nécessitent le privilège UniversalBrowserWrite, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le PrivilegeManager.

+ +
+
chrome
+

Note : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège UniversalBrowserWrite ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à yes, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon).

+
titlebar
+

Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à no, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnantdom.disable_window_open_feature.titlebar à true dans about:config ou dans leur fichier user.js.

+
alwaysRaised
+
Si défini à yes, la nouvelle fenêtre sera toujours affichée par dessus les autres fenêtres du navigateur, qu'elle soit active ou non.
+
alwaysLowered
+

Si défini à yes, la nouvelle fenêtre créé flottera par dessous sa propre fenêtre parente tant que celle-ci n'est pas réduite. Les fenêtres utilisant alwaysLowered sont souvent appelées pop-under. Celles-ci ne peuvent pas passer au dessus de leur fenêtre parente, mais celle-ci peut être réduite. Dans Netscape 6.x, les fenêtres alwaysLowered n'ont pas de commande système de réduction ni de commande système restaurer/agrandir.

+
z-lock
+
Identique à alwaysLowered.
+
close
+

Lorsque défini à no, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité dialog activée). close=no a précédence sur minimizable=yes.Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant dom.disable_window_open_feature.close à true dans about:config ou dans leur fichier user.js.

+
+ +

Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de yes (oui) ou no (non) ; il est également possible d'utiliser 1 à la place de yes et 0 à la place de no. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne strWindowFeatures. Si vous fournissez le paramètre strWindowFeatures, les fonctionnalités titlebar et close sont toujours à yes par défaut, mais les autres fonctionnalités présentant un choix yes/no seront à no par défaut et seront donc désactivées.

+ +

Exemple :

+ +
<script type="text/javascript">
+var WindowObjectReference; // variable globale
+
+function openRequestedPopup() {
+  WindowObjectReference = window.open("http://www.nomdedomaine.ext/chemin/FichierImg.png",
+        "NomDeFenetreDescriptif",
+        "width=420,height=230,resizable,scrollbars=yes,status=1");
+}
+</script>
+
+ +

Dans cet exemple, la fenêtre sera redimensionnable, elle affichera des barres de défilement si nécessaire (si le contenu dépasse les dimensions de fenêtre demandées) et affichera la barre d'état. Elle n'affichera pas la barre de menus ni la barre d'adresse. Comme l'auteur connaissait la taille de l'image (400 pixels de large et 200 pixels de haut), il a ajouté les marges appliquées à l'élément racine dans Internet Explorer 6, c'est-à-dire 15 pixels en haut, 15 pixels en bas, 10 pixels à gauche et 10 pixels à droite.

+ +

Bonnes pratiques

+ +
<script type="text/javascript">
+var WindowObjectReference = null; // variable globale
+
+function openFFPromotionPopup() {
+  if (WindowObjectReference == null || WindowObjectReference.closed) {
+    /* si le pointeur vers l'objet window n'existe pas, ou s'il existe
+       mais que la fenêtre a été fermée */
+    WindowObjectReference = window.open("http://www.spreadfirefox.com/",
+           "PromoteFirefoxWindowName", "resizable=yes,scrollbars=yes,status=yes");
+    /* alors, création du pointeur. La nouvelle fenêtre sera créée par dessus
+       toute autre fenêtre existante. */
+  }
+  else {
+    WindowObjectReference.focus();
+    /* sinon, la référence à la fenêtre existe et la fenêtre n'a pas été
+       fermée: la fenêtre est peut-être minimisée ou derrière la fenêtre
+       principale. Par conséquent, on peut l'amener par dessus les autres à
+       l'aide de la méthode focus(). Il n'est pas nécessaire de recréer la fenêtre
+       ou de recharger la ressource référencée. */
+  };
+}
+</script>
+
+(...)
+
+<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" onclick="openFFPromotionPopup(); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir
+l'adoption de Firefox</a></p>
+
+ +

Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (usability ) relatif aux liens ouvrant des fenêtres secondaires. Le but du return false dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ».

+ +

Plus d'informations sur l'utilisation de l'attribut target :

+ +

HTML 4.01, section 16.3.2 La sémantique de cible

+ +

Comment créer un lien qui ouvre une nouvelle fenêtre?

+ +

Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web :

+ +
<script type="text/javascript">
+var WindowObjectReference = null; // variable globale
+
+function openRequestedPopup(strUrl, strWindowName) {
+  if(WindowObjectReference == null || WindowObjectReference.closed) {
+    WindowObjectReference = window.open(strUrl, strWindowName,
+           "resizable=yes,scrollbars=yes,status=yes");
+  }
+  else {
+    WindowObjectReference.focus();
+  };
+}
+</script>
+(...)
+
+<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir l'adoption de Firefox</a></p>
+
+ +

Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière :

+ +
<script type="text/javascript">
+var WindowObjectReference = null; // variable globale
+var PreviousUrl; /* variable globale qui stockera l'URL actuellement
+                    chargée dans la fenêtre secondaire */
+
+function openRequestedSinglePopup(strUrl)
+{
+  if(WindowObjectReference == null || WindowObjectReference.closed)
+  {
+    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+           "resizable=yes,scrollbars=yes,status=yes");
+  }
+  else if(previousUrl != strUrl)
+  {
+    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+        "resizable=yes,scrollbars=yes,status=yes");
+    /* si la ressource à charger est différente, on la charge dans la fenêtre
+       secondaire déjà ouverte, et on ramène ensuite celle-ci par dessus
+       sa fenêtre parente. */
+    WindowObjectReference.focus();
+  }
+  else
+  {
+    WindowObjectReference.focus();
+  };
+  PreviousUrl = strUrl;
+  /* explication : on stocke l'URL courante afin de pouvoir la comparer
+     dans le cas d'un autre appel à cette fonction. */
+}
+</script>
+
+(...)
+
+<p><a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName"
+onclick="openRequestedSinglePopup(this.href); return false;"
+title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir
+l'adoption de Firefox</a></p>
+<p><a href="http://www.mozilla.org/support/firefox/faq"
+target="SingleSecondaryWindowName"
+onclick="openRequestedSinglePopup(this.href); return false;"
+title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">FAQ
+de Firefox</a></p>
+
+ +

FAQ

+ +
+
Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ?
+
Vous ne pouvez pas. La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript. La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : "Scripts may not close windows that were not opened by script." Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. Plus de détails sur la méthode window.close()
+
Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ?
+
Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode focus(). Il n'y a pas d'autre manière fiable. Un exemple montrant comment utiliser la méthode focus() est présenté ci-dessus.
+
Comment forcer une fenêtre à être agrandie/maximisée ?
+
Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter.
+
Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ?
+
Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans about:config. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à yes pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs.
+
Comment redimensionner une fenêtre en fonction de son contenu ?
+

Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case Édition/Préférences/Avancé/Scripts & plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes dans Mozilla ou Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes dans Firefox, ou en positionnant dom.disable_window_move_resize à true dans about:config ou encore en éditant leur fichier user.js. En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects.

La méthode sizeToContent() de l'objet window est également désactivée si l'utilisateur décoche la préférence Déplacer ou redimensionner des fenêtres existantes. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai.

+
Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ?
+
Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. K-meleon 1.1, un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées. Dans quelques années, la propriété target du module CSS3 hyperlien pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur.
+
Comment savoir si une fenêtre que j'ai ouverte l'est toujours ?
+
Vous pouvez tester l'existence de la référence à l'objet window, qui est la valeur renvoyée en cas de succès de l'appel à window.open(), et vérifier ensuite que la valeur renvoyée par WindowObjectReference.closed est bien false.
+
Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ?
+
Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par window.open() : elle sera null si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable.
+
Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ?
+
La valeur renvoyée par la méthode window.open() est la propriété opener. La variable WindowObjectReference lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé opener liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture).
+
Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property <property_name or method_name> ». Pourquoi cela ?
+

Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appeléeSame Origin Policy , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) ne peut pas obtenir ou modifier des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : http://www.mozilla.org/projects/secu...me-origin.html

+
+ +

Problèmes d'utilisabilité

+ +

Évitez de recourir à window.open()

+ +

De manière générale, il est préférable d'éviter d'utiliser window.open() pour plusieurs raisons :

+ + + +

Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations

+ +

Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées :

+ +
N'utilisez jamais ce format de code pour les liens :
+ <a href="javascript:window.open(...)" ...>
+ +

Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs.

+ + + +

Plus d'informations à ce sujet :

+ + + +
N'utilisez jamais <a href="#" onclick="window.open(...);">
+ +

Un tel pseudo-lien met également en péril l'accessibilité des liens. Utilisez toujours une véritable URL pour la valeur de l'attribut href, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc.

+ +
Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire
+ +

Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut title du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris.

+ +

Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable).

+ +
+

« Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un boutonPrécédente grisé. »
+ citation de The Top TenNew Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, mai 1999

+
+ +

Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non).

+ +

Références

+ + + +
Utilisez toujours l'attribut target
+ +

Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — sans l'imposer — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale.

+ +
N'utilisez pas target="_blank"
+ +

Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées.

+ +

Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur).

+ +

Glossaire

+ +
+
Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre
+
Termes souvent utilisés pour décrire ou identifier la même fenêtre. Il s'agit de la fenêtre depuis laquelle une nouvelle fenêtre sera créée. C'est la fenêtre dans laquelle l'utilisateur clique sur un lien qui mène à la création d'une autre, nouvelle fenêtre.
+
Sous-fenêtre, fenêtre enfant, fenêtre secondaire, deuxième fenêtre
+
Termes souvent utilisés pour décrire ou identifier la même fenêtre. C'est la nouvelle fenêtre qui a été créée.
+
Fenêtres popup non sollicitées
+
Ouverture automatique de fenêtres initiée par un script sans le consentement de l'utilisateur.
+
+ +

Spécification

+ +

{{ DOM0() }} window.open() ne fait partie d'aucune spécification ou recommandation technique du W3C.

+ +

Notes

+ +

Note sur les priorités

+ +

Dans les cas où left et screenX (et/ou top et screenY) ont des valeurs contradictoires, left et top ont priorité sur screenX et screenY respectivement. Si left et screenX (et/ou top et screenY) sont définies dans la liste strWindowFeatures, les valeurs left (et/ou top) seront reconnues et utilisées. Dans l'exemple suivant, la nouvelle fenêtre sera positionnée à 100 pixels du bord gauche de la zone de travail des applications du système d'exploitation de l'utilisateur, et non à 200 pixels.

+ +
<script type="text/javascript">
+WindowObjectReference = window.open("http://www.lemonde.fr/",
+           "NomDeLaFenetreLeMonde",
+           "left=100,screenX=200,resizable,scrollbars,status");
+</script>
+
+ +

Si left est défini, mais que top n'a aucune valeur mais que screenY en a une, left et screenY seront les coordonnées de positionnement de la fenêtre secondaire.

+ +

outerWidth a priorité sur width, et width a priorité sur innerWidth. outerHeight a priorité sur height et height a priorité sur innerHeight. Dans l'exemple suivant, les navigateurs basés sur Mozilla créeront une nouvelle fenêtre avec une taille extérieure (outerWidth) de 600 pixels de large et ignoreront la requête d'une largeur (width) de 500 pixels ainsi que celle d'une taille intérieure (innerWidth) de 400 pixels.

+ +
<script type="text/javascript">
+WindowObjectReference = window.open("http://www.wwf.org/",
+           "NomDeLaFenetreWWF",
+           "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status");
+</script>
+
+ +

Note sur les corrections d'erreurs de position et de dimension

+ +

Les positions et dimensions demandées dans la liste strWindowFeatures ne seront pas respectées et seront corrigées si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.

+ +

Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire, mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs.

+ +

Note sur les barres de défilement

+ +

Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web :

+ + + +

Note sur la barre d'état

+ +

Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec SSL (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.

+ +

Note sur les problèmes de sécurité liés à la présence de la barre d'état

+ +

Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de window.open() :

+ +
+

« Pour les fenêtres ouvertes à l'aide de window.open() :
+ Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. La barre d'état sera activée par défaut et fait entre 20 et 25 pixels de haut. (...) »
+ citation de Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2

+
+ +
+

« (...) les fenêtres créées à l'aide de la méthode window.open() peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible.
+ Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...)
+ Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état. (...)
+ Gestion de la barre d'état d'Internet Explorer par les scripts
+ Description détaillée
+ Internet Explorer a été modifié pour ne désactiver la barre d'état pour aucune fenêtre. La barre d'état est toujours visible pour toutes les fenêtres d'Internet Explorer. (...) Sans ce changement, les fenêtres créées à l'aide de la méthode window.open() peuvent être appelées par des scripts et imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations importantes pour l'utilisateur.
+ La barre d'état est une fonction de sécurité des fenêtres d'Internet Explorer qui fournissent à l'utilisateur des informations sur les zones de sécurité. Cette zone ne peut pas être imitée (...)"
+ citation de Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions

+
+ +

Note sur le plein écran (fullscreen)

+ +

Dans Internet Explorer 6 pour XP SP2 :

+ + + +

Références :

+ + + +

Note sur la différence entre outerHeight et height

+ + +

Tutoriels

+ +

en français :

+ +

Créer des pop-up intelligentes par Fabrice Bonny, OpenWeb

+ +

en anglais :

+ +

JavaScript windows (tutorial) par Lasse Reichstein Nielsen

+ +

The perfect pop-up (tutorial) par Ian Lloyd

+ +

Popup windows and Firefox (interactive demos) par Gérard Talbot

+ +

Références

+ +

Links Want To Be Links by Jukka K. Korpela

+ +

Links & JavaScript Living Together in Harmony by Jeff Howden

diff --git a/files/fr/web/api/window/opendialog/index.html b/files/fr/web/api/window/opendialog/index.html deleted file mode 100644 index 7449c15b30..0000000000 --- a/files/fr/web/api/window/opendialog/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: window.openDialog -slug: Web/API/Window/openDialog -tags: - - DOM - - Gecko - - Window - - boîte de dialogue -translation_of: Web/API/Window/openDialog ---- -

{{ ApiRef() }}

- -

window.openDialog est une extension à window.open(). Elle s'utilise de la même manière, excepté qu'elle peut prendre plusieurs paramètres optionnels aprèswindowFeatures, et quewindowFeatures est traîté différemment.

- -

Les paramètres optionnels, si présents, seront regroupés dans un objet JavaScript Array et seront accessibles depuis la nouvelle fenêtre par la propriété window.arguments. Ils sont accessibles depuis les scripts de la fenêtre à tout moment, notamment lors du traitement d'un évênementload . Ces paramètres peuvent donc être utilisés pour passer des arguments à une boîte de dialogue, et pour les récupérer ensuite.

- -

Notez que l'appel à la méthodeopenDialog() se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeurmodal pour le paramètre features. En conséquence, l'utilisateur ne pourra pas interagir avec la fenêtre parente jusqu'à ce qu'il ferme la boîte de dialogue modale.

- -

Syntaxe

- -
newWindow = openDialog(url, name, features, arg1, arg2, ...)
-
- -
-
newWindow
-
La nouvelle fenêtre ouverte.
-
url
-
L'URL du document à charger dans la nouvelle fenêtre.
-
name
-
Le nom de la fenêtre (optionnel). Voir la description dewindow.open() pour plus de détails.
-
features
-
Voir la description dewindow.open() pour la description.
-
arg1, arg2, ...
-
Les arguments à passer à la nouvelle fenêtre (optionnel).
-
- -

Exemple

- -
var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
- -

Notes

- -

Nouvelles fonctionnalités

- -
-
all
-
Active ou désactive ("all=no") toutes les fonctionnalités (excepté chrome, dialog etmodal). Peut être utilisé conjointement avec les autres drapeaux (par exemple, "menubar=no, all" active toutes les fonctionnalités excepté menubar). Ce drapeau est ignorée par la méthodewindow.open() mais pas par window.openDialog().
-
- -

Comportement

- -

La méthodewindow.openDialog() traite l'absence du paramètrefeatures de la même manière quewindow.open() (une chaîne vide désactive toutes les fonctionnalités) excepté pourchrome etdialog qui sont activés par défaut et peuvent être explicitement désactivées par "chrome=no".

- -

Passage de paramètres supplémentaires

- -

Pour passer des paramètres supplémentaires à la boîte de dialogue, vous pouvez simplement les ajouter après le paramètre features :

- -
openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
- -

Ces paramètres seront ensuite regroupés dans une propriété arguments de typeArray, et cette propriété sera ajoutée à la nouvelle boîte de dialogue.

- -

Pour accéder à ces paramètres depuis un script de la boîte de dialogue, utilisez le procédé suivant :

- -
var food = window.arguments[0];
-var price = window.arguments[1];
- -

Notez que vous pouvez accéder à cette propriété depuis n'importe où dans le script. (Autre exemple).

- -

Retourner des arguments depuis la boîte de dialogue

- -

Depuis quewindow.close() efface toutes les propriétés associées à la boîte de dialogue (c'est-à-dire les variables spécifiées depuis le code JavaScript chargé depuis la boîte de dialogue), il n'est pas possible de retourner des valeur après la fermeture de la boîte de dialogue en utilisant des variables globales (ou toute autre méthode).

- -

Pour pouvoir retourner des valeurs à la fenêtre parente, vous devez passer un objet via les paramètres supplémentaires. Vous pouvez ensuite accéder à cet objet depuis la boîte de dialogue et modifier ces propriétés, dont les données que vous souhaiter conserver après l'appel à la méthodewindow.close().

- -
var retVals = { address: null, delivery: null };
-openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);
- -

Si vous modifiez les propriétés de l'objetretVals depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableauretVals après l'appel à openDialog().

- -

Depuis la boîte de dialogue, vous pouvez modifier les propriétés comme suit :

- -
var retVals = window.arguments[2];
-retVals.address = enteredAddress;
-retVals.delivery = "immediate";
- -

Voir aussice message. (Autre exemple).
- Voir aussiwindow.importDialog().

- -

Spécification

- -

{{ DOM0() }}

- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.openDialog")}}

- -

Voir également

- - \ No newline at end of file diff --git a/files/fr/web/api/window/opendialog/index.md b/files/fr/web/api/window/opendialog/index.md new file mode 100644 index 0000000000..7449c15b30 --- /dev/null +++ b/files/fr/web/api/window/opendialog/index.md @@ -0,0 +1,102 @@ +--- +title: window.openDialog +slug: Web/API/Window/openDialog +tags: + - DOM + - Gecko + - Window + - boîte de dialogue +translation_of: Web/API/Window/openDialog +--- +

{{ ApiRef() }}

+ +

window.openDialog est une extension à window.open(). Elle s'utilise de la même manière, excepté qu'elle peut prendre plusieurs paramètres optionnels aprèswindowFeatures, et quewindowFeatures est traîté différemment.

+ +

Les paramètres optionnels, si présents, seront regroupés dans un objet JavaScript Array et seront accessibles depuis la nouvelle fenêtre par la propriété window.arguments. Ils sont accessibles depuis les scripts de la fenêtre à tout moment, notamment lors du traitement d'un évênementload . Ces paramètres peuvent donc être utilisés pour passer des arguments à une boîte de dialogue, et pour les récupérer ensuite.

+ +

Notez que l'appel à la méthodeopenDialog() se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeurmodal pour le paramètre features. En conséquence, l'utilisateur ne pourra pas interagir avec la fenêtre parente jusqu'à ce qu'il ferme la boîte de dialogue modale.

+ +

Syntaxe

+ +
newWindow = openDialog(url, name, features, arg1, arg2, ...)
+
+ +
+
newWindow
+
La nouvelle fenêtre ouverte.
+
url
+
L'URL du document à charger dans la nouvelle fenêtre.
+
name
+
Le nom de la fenêtre (optionnel). Voir la description dewindow.open() pour plus de détails.
+
features
+
Voir la description dewindow.open() pour la description.
+
arg1, arg2, ...
+
Les arguments à passer à la nouvelle fenêtre (optionnel).
+
+ +

Exemple

+ +
var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
+ +

Notes

+ +

Nouvelles fonctionnalités

+ +
+
all
+
Active ou désactive ("all=no") toutes les fonctionnalités (excepté chrome, dialog etmodal). Peut être utilisé conjointement avec les autres drapeaux (par exemple, "menubar=no, all" active toutes les fonctionnalités excepté menubar). Ce drapeau est ignorée par la méthodewindow.open() mais pas par window.openDialog().
+
+ +

Comportement

+ +

La méthodewindow.openDialog() traite l'absence du paramètrefeatures de la même manière quewindow.open() (une chaîne vide désactive toutes les fonctionnalités) excepté pourchrome etdialog qui sont activés par défaut et peuvent être explicitement désactivées par "chrome=no".

+ +

Passage de paramètres supplémentaires

+ +

Pour passer des paramètres supplémentaires à la boîte de dialogue, vous pouvez simplement les ajouter après le paramètre features :

+ +
openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
+ +

Ces paramètres seront ensuite regroupés dans une propriété arguments de typeArray, et cette propriété sera ajoutée à la nouvelle boîte de dialogue.

+ +

Pour accéder à ces paramètres depuis un script de la boîte de dialogue, utilisez le procédé suivant :

+ +
var food = window.arguments[0];
+var price = window.arguments[1];
+ +

Notez que vous pouvez accéder à cette propriété depuis n'importe où dans le script. (Autre exemple).

+ +

Retourner des arguments depuis la boîte de dialogue

+ +

Depuis quewindow.close() efface toutes les propriétés associées à la boîte de dialogue (c'est-à-dire les variables spécifiées depuis le code JavaScript chargé depuis la boîte de dialogue), il n'est pas possible de retourner des valeur après la fermeture de la boîte de dialogue en utilisant des variables globales (ou toute autre méthode).

+ +

Pour pouvoir retourner des valeurs à la fenêtre parente, vous devez passer un objet via les paramètres supplémentaires. Vous pouvez ensuite accéder à cet objet depuis la boîte de dialogue et modifier ces propriétés, dont les données que vous souhaiter conserver après l'appel à la méthodewindow.close().

+ +
var retVals = { address: null, delivery: null };
+openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);
+ +

Si vous modifiez les propriétés de l'objetretVals depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableauretVals après l'appel à openDialog().

+ +

Depuis la boîte de dialogue, vous pouvez modifier les propriétés comme suit :

+ +
var retVals = window.arguments[2];
+retVals.address = enteredAddress;
+retVals.delivery = "immediate";
+ +

Voir aussice message. (Autre exemple).
+ Voir aussiwindow.importDialog().

+ +

Spécification

+ +

{{ DOM0() }}

+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.openDialog")}}

+ +

Voir également

+ + \ No newline at end of file diff --git a/files/fr/web/api/window/opener/index.html b/files/fr/web/api/window/opener/index.html deleted file mode 100644 index d1dd3486ce..0000000000 --- a/files/fr/web/api/window/opener/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: window.opener -slug: Web/API/Window/opener -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/Window/opener ---- -

{{ ApiRef() }}

-

Résumé

-

Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante.

-

Syntaxe

-
refObj = window.opener
-
-

Exemple

-
 if window.opener != indexWin {
-     referToTop(window.opener);
- }
-
-

Notes

-

Lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre dans window.opener. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie null.

-

Spécification

-

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/window/opener/index.md b/files/fr/web/api/window/opener/index.md new file mode 100644 index 0000000000..d1dd3486ce --- /dev/null +++ b/files/fr/web/api/window/opener/index.md @@ -0,0 +1,24 @@ +--- +title: window.opener +slug: Web/API/Window/opener +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/Window/opener +--- +

{{ ApiRef() }}

+

Résumé

+

Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante.

+

Syntaxe

+
refObj = window.opener
+
+

Exemple

+
 if window.opener != indexWin {
+     referToTop(window.opener);
+ }
+
+

Notes

+

Lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre dans window.opener. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie null.

+

Spécification

+

{{ DOM0() }}

\ No newline at end of file diff --git a/files/fr/web/api/window/orientation/index.html b/files/fr/web/api/window/orientation/index.html deleted file mode 100644 index dfe5477598..0000000000 --- a/files/fr/web/api/window/orientation/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Window.orientation -slug: Web/API/Window/orientation -translation_of: Web/API/Window/orientation ---- -
{{APIRef}}{{deprecated_header}}
- -

Résumé

- -

Renvoie l'orientation en degrés (par incréments de 90 degrés) de la fenêtre par rapport à l'orientation naturelle de l'appareil.

- -

Les seules valeurs possibles sont -90, 0, 90, et 180. Les valeurs positives sont dans le sens des aiguilles d'une montre; les valeurs négatives sont dans le sens antihoraire.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Compat', '#dom-window-orientation', 'Window.orientation')}}{{Spec2('Compat')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.orientation")}}

diff --git a/files/fr/web/api/window/orientation/index.md b/files/fr/web/api/window/orientation/index.md new file mode 100644 index 0000000000..dfe5477598 --- /dev/null +++ b/files/fr/web/api/window/orientation/index.md @@ -0,0 +1,35 @@ +--- +title: Window.orientation +slug: Web/API/Window/orientation +translation_of: Web/API/Window/orientation +--- +
{{APIRef}}{{deprecated_header}}
+ +

Résumé

+ +

Renvoie l'orientation en degrés (par incréments de 90 degrés) de la fenêtre par rapport à l'orientation naturelle de l'appareil.

+ +

Les seules valeurs possibles sont -90, 0, 90, et 180. Les valeurs positives sont dans le sens des aiguilles d'une montre; les valeurs négatives sont dans le sens antihoraire.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Compat', '#dom-window-orientation', 'Window.orientation')}}{{Spec2('Compat')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.orientation")}}

diff --git a/files/fr/web/api/window/outerheight/index.html b/files/fr/web/api/window/outerheight/index.html deleted file mode 100644 index 53b6f0637a..0000000000 --- a/files/fr/web/api/window/outerheight/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Window.outerHeight -slug: Web/API/Window/outerHeight -translation_of: Web/API/Window/outerHeight ---- -
{{APIRef}}
- -

Window.outerHeight retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles.

- -

Cette propriété n'a pas de valeur par défaut.

- -

Syntaxe

- -
outWindowHeight = window.outerHeight;
-
- -

La valeur retournée correspond à la hauteur extérieure de la fenêtre.

- -

Notes

- -

Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.

- -

Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}.

- -

Exemple illustré

- -

La figure suivante montre la différence entre outerHeight et innerHeight.

- -

innerHeight vs outerHeight illustration

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }}{{ Spec2('CSSOM View') }}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.outerHeight")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/outerheight/index.md b/files/fr/web/api/window/outerheight/index.md new file mode 100644 index 0000000000..53b6f0637a --- /dev/null +++ b/files/fr/web/api/window/outerheight/index.md @@ -0,0 +1,62 @@ +--- +title: Window.outerHeight +slug: Web/API/Window/outerHeight +translation_of: Web/API/Window/outerHeight +--- +
{{APIRef}}
+ +

Window.outerHeight retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles.

+ +

Cette propriété n'a pas de valeur par défaut.

+ +

Syntaxe

+ +
outWindowHeight = window.outerHeight;
+
+ +

La valeur retournée correspond à la hauteur extérieure de la fenêtre.

+ +

Notes

+ +

Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.

+ +

Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}.

+ +

Exemple illustré

+ +

La figure suivante montre la différence entre outerHeight et innerHeight.

+ +

innerHeight vs outerHeight illustration

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }}{{ Spec2('CSSOM View') }}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.outerHeight")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/outerwidth/index.html b/files/fr/web/api/window/outerwidth/index.html deleted file mode 100644 index 863a26a3ab..0000000000 --- a/files/fr/web/api/window/outerwidth/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Window.outerWidth -slug: Web/API/Window/outerWidth -tags: - - API - - CSSOM View - - NeedsContent - - Property - - Reference -translation_of: Web/API/Window/outerWidth ---- -
{{APIRef}}
- -

Window.outerWidth récupère la largeur de l'extérieur de la fenêtre du navigateur. Elle représente la largeur de toute la fenêtre du navigateur, y compris la barre latérale (si elle est agrandie), la fenêtre chrome et le redimensionnement de la fenêtre.

- -

Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut.

- -

Syntaxe

- -
largeurExterieureFenetre = window.outerWidth;
-
- -

Lors du retour, largeurExterieureFenetre vaut la largeur de l'extérieur de la fenêtre.

- -

Notes

- -

Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}.

- -

Pour récupérer la largeur interne d'une fenêtre, c'est-à-dire la largeur de la page affichée, voir {{domxref ("window.innerWidth")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}{{ Spec2('CSSOM View') }}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.outerWidth")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/outerwidth/index.md b/files/fr/web/api/window/outerwidth/index.md new file mode 100644 index 0000000000..863a26a3ab --- /dev/null +++ b/files/fr/web/api/window/outerwidth/index.md @@ -0,0 +1,59 @@ +--- +title: Window.outerWidth +slug: Web/API/Window/outerWidth +tags: + - API + - CSSOM View + - NeedsContent + - Property + - Reference +translation_of: Web/API/Window/outerWidth +--- +
{{APIRef}}
+ +

Window.outerWidth récupère la largeur de l'extérieur de la fenêtre du navigateur. Elle représente la largeur de toute la fenêtre du navigateur, y compris la barre latérale (si elle est agrandie), la fenêtre chrome et le redimensionnement de la fenêtre.

+ +

Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut.

+ +

Syntaxe

+ +
largeurExterieureFenetre = window.outerWidth;
+
+ +

Lors du retour, largeurExterieureFenetre vaut la largeur de l'extérieur de la fenêtre.

+ +

Notes

+ +

Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}.

+ +

Pour récupérer la largeur interne d'une fenêtre, c'est-à-dire la largeur de la page affichée, voir {{domxref ("window.innerWidth")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}{{ Spec2('CSSOM View') }}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.outerWidth")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/pagehide_event/index.html b/files/fr/web/api/window/pagehide_event/index.html deleted file mode 100644 index 81e2c695f8..0000000000 --- a/files/fr/web/api/window/pagehide_event/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: pagehide -slug: Web/API/Window/pagehide_event -translation_of: Web/API/Window/pagehide_event -original_slug: Web/Events/pagehide ---- -

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/pagehide_event/index.md b/files/fr/web/api/window/pagehide_event/index.md new file mode 100644 index 0000000000..81e2c695f8 --- /dev/null +++ b/files/fr/web/api/window/pagehide_event/index.md @@ -0,0 +1,70 @@ +--- +title: pagehide +slug: Web/API/Window/pagehide_event +translation_of: Web/API/Window/pagehide_event +original_slug: Web/Events/pagehide +--- +

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 deleted file mode 100644 index 4687409333..0000000000 --- a/files/fr/web/api/window/pageshow_event/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: pageshow -slug: Web/API/Window/pageshow_event -translation_of: Web/API/Window/pageshow_event -original_slug: Web/Events/pageshow ---- -

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()">
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'browsing-the-web.html#event-pageshow', 'pageshow')}}{{Spec2('HTML WHATWG')}}Spécification initiale.
{{SpecName('HTML5 W3C', 'browsers.html#event-pageshow', 'pageshow')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.pageshow_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/pageshow_event/index.md b/files/fr/web/api/window/pageshow_event/index.md new file mode 100644 index 0000000000..4687409333 --- /dev/null +++ b/files/fr/web/api/window/pageshow_event/index.md @@ -0,0 +1,110 @@ +--- +title: pageshow +slug: Web/API/Window/pageshow_event +translation_of: Web/API/Window/pageshow_event +original_slug: Web/Events/pageshow +--- +

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

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'browsing-the-web.html#event-pageshow', 'pageshow')}}{{Spec2('HTML WHATWG')}}Spécification initiale.
{{SpecName('HTML5 W3C', 'browsers.html#event-pageshow', 'pageshow')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.pageshow_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/parent/index.html b/files/fr/web/api/window/parent/index.html deleted file mode 100644 index 01da0b6b14..0000000000 --- a/files/fr/web/api/window/parent/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: window.parent -slug: Web/API/Window/parent -tags: - - DOM - - DOM_0 - - Référence_du_DOM_Gecko -translation_of: Web/API/Window/parent ---- -

{{ ApiRef() }}

-

Résumé

-

Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre courante ou du cadre courant.

-

Syntaxe

-
refObj = window.parent
-
-

Exemple

-
if (window.parent != window.top) {
-     // on se trouve dans une imbrication de cadres
-}
-
-

Notes

-

Si une fenêtre n'a pas de parent, sa propriété parent est une référence vers elle-même.

-

Lorsqu'une fenêtre est chargée dans un ensemble de cadres (frameset), son parent est le cadre parent (c'est-à-dire le document dans lequel se trouve l'élément <frame> qui fait référence à la fenêtre).

-

Spécification

-

{{ DOM0() }}

diff --git a/files/fr/web/api/window/parent/index.md b/files/fr/web/api/window/parent/index.md new file mode 100644 index 0000000000..01da0b6b14 --- /dev/null +++ b/files/fr/web/api/window/parent/index.md @@ -0,0 +1,25 @@ +--- +title: window.parent +slug: Web/API/Window/parent +tags: + - DOM + - DOM_0 + - Référence_du_DOM_Gecko +translation_of: Web/API/Window/parent +--- +

{{ ApiRef() }}

+

Résumé

+

Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre courante ou du cadre courant.

+

Syntaxe

+
refObj = window.parent
+
+

Exemple

+
if (window.parent != window.top) {
+     // on se trouve dans une imbrication de cadres
+}
+
+

Notes

+

Si une fenêtre n'a pas de parent, sa propriété parent est une référence vers elle-même.

+

Lorsqu'une fenêtre est chargée dans un ensemble de cadres (frameset), son parent est le cadre parent (c'est-à-dire le document dans lequel se trouve l'élément <frame> qui fait référence à la fenêtre).

+

Spécification

+

{{ DOM0() }}

diff --git a/files/fr/web/api/window/paste_event/index.html b/files/fr/web/api/window/paste_event/index.html deleted file mode 100644 index 0f215c946e..0000000000 --- a/files/fr/web/api/window/paste_event/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: 'Window: paste event' -slug: Web/API/Window/paste_event -tags: - - Evènement - - Reference - - Window - - paste -translation_of: Web/API/Window/paste_event ---- -
{{APIRef}}
- -

L'événement paste est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur.

- - - - - - - - - - - - - - - - - - - - -
BullesYes
AnnulableYes
Interface{{domxref("ClipboardEvent")}}
Propriété du gestionnaire d'événements{{domxref("HTMLElement/onpaste", "onpaste")}}
- -

La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de collage. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le Element: paste event.

- -

Exemples

- -
window.addEventListener('paste', (event) => {
-    console.log('paste action initiated')
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatut
{{SpecName('Clipboard API', '#clipboard-event-paste')}}{{Spec2('Clipboard API')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.paste_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/paste_event/index.md b/files/fr/web/api/window/paste_event/index.md new file mode 100644 index 0000000000..0f215c946e --- /dev/null +++ b/files/fr/web/api/window/paste_event/index.md @@ -0,0 +1,71 @@ +--- +title: 'Window: paste event' +slug: Web/API/Window/paste_event +tags: + - Evènement + - Reference + - Window + - paste +translation_of: Web/API/Window/paste_event +--- +
{{APIRef}}
+ +

L'événement paste est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur.

+ + + + + + + + + + + + + + + + + + + + +
BullesYes
AnnulableYes
Interface{{domxref("ClipboardEvent")}}
Propriété du gestionnaire d'événements{{domxref("HTMLElement/onpaste", "onpaste")}}
+ +

La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de collage. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le Element: paste event.

+ +

Exemples

+ +
window.addEventListener('paste', (event) => {
+    console.log('paste action initiated')
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatut
{{SpecName('Clipboard API', '#clipboard-event-paste')}}{{Spec2('Clipboard API')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.paste_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/popstate_event/index.html b/files/fr/web/api/window/popstate_event/index.html deleted file mode 100644 index 9c821b6ea9..0000000000 --- a/files/fr/web/api/window/popstate_event/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: popstate -slug: Web/API/Window/popstate_event -translation_of: Web/API/Window/popstate_event ---- -

L'événement popstate est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à history.pushState() ou a été affectée par un appel à history.replaceState(), la propriété state de l'événement popstate contient une copie de l'objet state de l'entrée d'historique.

- -

Notez qu'un appel à history.pushState() ou history.replaceState() n'exécutera pas l'événement popstate. L'événement popstate est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler history.back() en JavaScript).

- -

Les navigateurs ont tendance à gérer l'événement popstate différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement popstate lors du chargement de la page, contrairement à Firefox.

- -

Informations générales

- -
-
Specification
-
HTML5
-
Interface
-
PopStateEvent
-
Bubbles
-
Yes
-
Cancelable
-
No
-
Target
-
defaultView
-
Action par défaut
-
None
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The browsing context (window).
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.
state {{readonlyInline}}anyThe current history entry's state object (if any).
- -

Exemple

- -

Une page http://example.com/example.html exécutant le code suivant génèrera un journal comme spécifié :

- -
window.onpopstate = function(event) {
-  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
-};
-history.pushState({page: 1}, "title 1", "?page=1");
-history.pushState({page: 2}, "title 2", "?page=2");
-history.replaceState({page: 3}, "title 3", "?page=3");
-history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
-history.back(); // Logs "location: http://example.com/example.html, state: null
-history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
-
- -

Notez que même si l'entrée d'historique originelle (pour http://example.com/example.html) n'a pas d'objet state associé, un événement popstate est tout de même exécuté lorsque nous activons cette entrée au second appel à history.back().

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'indices.html#event-popstate', 'popstate')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.popstate_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/popstate_event/index.md b/files/fr/web/api/window/popstate_event/index.md new file mode 100644 index 0000000000..9c821b6ea9 --- /dev/null +++ b/files/fr/web/api/window/popstate_event/index.md @@ -0,0 +1,111 @@ +--- +title: popstate +slug: Web/API/Window/popstate_event +translation_of: Web/API/Window/popstate_event +--- +

L'événement popstate est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à history.pushState() ou a été affectée par un appel à history.replaceState(), la propriété state de l'événement popstate contient une copie de l'objet state de l'entrée d'historique.

+ +

Notez qu'un appel à history.pushState() ou history.replaceState() n'exécutera pas l'événement popstate. L'événement popstate est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler history.back() en JavaScript).

+ +

Les navigateurs ont tendance à gérer l'événement popstate différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement popstate lors du chargement de la page, contrairement à Firefox.

+ +

Informations générales

+ +
+
Specification
+
HTML5
+
Interface
+
PopStateEvent
+
Bubbles
+
Yes
+
Cancelable
+
No
+
Target
+
defaultView
+
Action par défaut
+
None
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The browsing context (window).
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.
state {{readonlyInline}}anyThe current history entry's state object (if any).
+ +

Exemple

+ +

Une page http://example.com/example.html exécutant le code suivant génèrera un journal comme spécifié :

+ +
window.onpopstate = function(event) {
+  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // Logs "location: http://example.com/example.html, state: null
+history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
+
+ +

Notez que même si l'entrée d'historique originelle (pour http://example.com/example.html) n'a pas d'objet state associé, un événement popstate est tout de même exécuté lorsque nous activons cette entrée au second appel à history.back().

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'indices.html#event-popstate', 'popstate')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.popstate_event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/postmessage/index.html b/files/fr/web/api/window/postmessage/index.html deleted file mode 100644 index e7224757d7..0000000000 --- a/files/fr/web/api/window/postmessage/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Window.postMessage -slug: Web/API/Window/postMessage -tags: - - API - - DOM - - Méthode - - Reference - - postMessage -translation_of: Web/API/Window/postMessage ---- -
{{ ApiRef() }}
- -
- -

La méthode window.postMessage permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même origine, c'est-à-dire avec le même protocole (généralement http ou https), le même numéro de port (80 étant le port par défaut pour  http), et le même nom d'hôte (à condition que document.domain soit initialisé à la même valeur par les deux pages). window.postMessage fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée.

- -

La méthode window.postMessage, quand elle est appelée, provoque l'envoi d'un {{domxref("MessageEvent")}} à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si window.postMessage est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le {{domxref("MessageEvent")}} est de type message, a une propriété data qui est initialisée à la valeur du premier argument passé à window.postMessage, une propriété origin correspondant à l'origine du document principal de la fenêtre appelant window.postMessage au moment où window.postMessage a été appelée, et une propriété source qui est la fenêtre depuis laquelle window.postMessage est appelée. (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues).

- -

Syntaxe

- -
otherWindow.postMessage(message, targetOrigin, [transfer]);
- -
-
otherWindow
-
Une référence à une autre fenêtre ; une telle référence peut être obtenue, par exemple, via la propriété contentWindow d'un élément iframe, l'objet retourné par window.open, ou par index nommé ou numérique de window.frames.
-
message
-
La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant l'algorithme de clônage structuré. Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. [1]
-
targetOrigin
-
Indique quelle doit être l'origine de otherWindow pour l'évènement à envoyer, soit comme la chaîne littérale "*" (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de otherWindow ne correspond pas à ceux contenus dans targetOrigin,  l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si postMessage était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. Fournissez toujours une targetOrigin spécifique, jamais *, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.
-
transfer {{optional_Inline}}
-
Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur.
-
- -

L'évènement envoyé

- -

otherWindow peut surveiller les messages envoyés en exécutant le JavaScript suivant :

- -
window.addEventListener("message", receiveMessage, false);
-
-function receiveMessage(event)
-{
-  if (event.origin !== "http://example.org:8080")
-    return;
-
-  // ...
-}
-
- -

Les propriétés du message envoyé sont :

- -
-
data
-
L'objet passé depuis l'autre fenêtre.
-
origin
-
L'origine de la fenêtre qui a envoyé le message au moment où postMessage a été appelée. Des exemples typiques d'origines sont https://example.org (sous-entendu port 443), http://example.net (sous-entendu port 80), et http://example.com:8080. Notez qu'il n'est pas garanti que cette origine soit l'origine actuelle ou future de cette fenêtre, qui peut avoir été naviguée vers une adresse différente depuis l'appel à postMessage.
-
source
-
Une référence à l'objet window qui a envoyé le message ; vous pouvez utiliser ceci pour établir une communication dans les deux sens entre deux fenêtres ayant différentes origines.
-
- -
-
- -

Précautions de sécurité

- -

Si vous ne prévoyez pas de recevoir de messages depuis d'autres sites, n'ajoutez pas de gestionnaire d'évènement pour les évènements message. C'est un moyen sûr d'éviter les problèmes de sécurité.

- -

Si vous prévoyez de recevoir des messages depuis d'autres sites, vérifiez toujours l'identité de l'expéditeur à l'aide des propriétés origin et si possible source. Toute fenêtre (y compris, par exemple, http://evil.example.com) peut envoyer un message à toute autre fenêtre, et vous n'avez aucune garantie qu'un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l'identité, vous devriez toujours vérifier la syntaxe du message reçu. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.

- -

Spécifiez toujours explicitement une origine de destination, jamais *, quand vous utilisez postMessage pour envoyer des données à d'autres fenêtres. Un site malicieux peut changer l'adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l'aide de postMessage.

- -

Exemple

- -
/*
- * Dans les scripts de la fenêtre A, avec A sur <http://example.com:8080>:
- */
-
-var popup = window.open(...popup details...);
-
-// Quand la popup est chargée, si pas bloquée par un bloqueur de popups:
-
-// Ceci ne fait rien, en supposant que la fenêtre n'a pas changé d'adresse.
-popup.postMessage("The user is 'bob' and the password is 'secret'",
-                  "https://secure.example.net");
-
-// Ceci va planifier l'envoi d'un message à la popup, en supposant que
-// la fenêtre n'a pas changé d'adresse.
-popup.postMessage("hello there!", "http://example.org");
-
-function receiveMessage(event)
-{
-  // Faisons-nous confiance à l'expéditeur de ce message ?  (il pourrait être
-  // différent de la fenêtre que nous avons ouverte au départ, par exemple).
-  if (event.origin !== "http://example.org")
-    return;
-
-  // event.source est la popup
-  // event.data est "hi there yourself!  the secret response is: rheeeeet!"
-}
-window.addEventListener("message", receiveMessage, false);
-
- -
/*
- * Dans les scripts de la popup, sur <http://example.org>:
- */
-
-// Appelée quelques instants après que postMessage a été appelée
-function receiveMessage(event)
-{
-  // Faisons-nous confiance à l'expéditeur de ce message ?
-  if (event.origin !== "http://example.com:8080")
-    return;
-
-  // event.source est window.opener
-  // event.data est "hello there!"
-
-  // Supposant que vous avez vérifié l'origine du message reçu
-  // (ce que vous devriez faire en toutes circonstances),
-  // un moyen pratique de répondre à un message est d'appeler postMessage
-  // sur event.source et fournir event.origin comme targetOrigin.
-  event.source.postMessage("hi there yourself!  the secret response " +
-                           "is: rheeeeet!",
-                           event.origin);
-}
-
-window.addEventListener("message", receiveMessage, false);
-
- -

Notes

- -

Toute fenêtre peut accéder à cette méthode sur toute autre fenêtre, à tout moment, peu importe l'adresse du document dans la fenêtre, pour y envoyer un message. Par conséquent, tout gestionnaire d'évènement utilisé pour recevoir des messages doit d'abord vérifier l'identité de l'expéditeur du message, en utilisant les propriétés origin et si possible source. Cela ne peut pas être minimisé : ne pas vérifier les propriétés origin et si possible source permet des attaques inter-site.

- -

De même qu'avec les scripts exécutés de manière asynchrone (timeouts, evènements générés par l'utilisateur), il n'est pas possible pour l'appelant à postMessage de détecter quand un gestionnaire d'évènement écoutant des évènements envoyés par postMessage lance une exception.

- -

La valeur de la propriété origin de l'évènement envoyé n'est pas affectée par la valeur actuelle de document.domain dans la fenêtre appelante.

- -

Pour les noms d'hôte IDN uniquement, la valeur de la propriété origin n'est pas systématiquement Unicode ou punycode ; pour la plus grande compatibilité, testez à la fois les valeurs IDN et punycode quand vous utilisez cette propriété si vous attendez des messages de sites IDN. Cette valeur sera systématiquement IDN à l'avenir, mais pour l'instant vous devriez gérer à la fois les formes IDN et punycode.

- -

La valeur de la propriété origin quand la fenêtre expéditrice contient une URL javascript: ou data: est l'origin du script qui a chargé cette URL.

- -

Utiliser window.postMessage dans les extensions {{Non-standard_inline}}

- -

window.postMessage est disponible depuis le JavaScript exécuté en code chrome (par exemple dans les extensions et le code privilégié), mais la propriété source de l'évènement envoyé est toujours null par mesure de sécurité. (Les autres propriétés ont leurs valeurs usuelles.) L'argument targetOrigin pour un message envoyé à une fenêtre située à une URL chrome: est actuellement mal interprété, si bien que la seule valeur qui conduit à l'envoi d'un message est "*". Comme cette valeur n'est pas sûre quand la fenêtre ciblée peut être naviguée n'importe où par un site malicieux, il est recommandé de ne pas utiliser postMessage pour communiquer avec des pages chrome: pour l'instant ; utilisez une méthode différente (comme une query string quand la fenêtre est ouverte) pour communiquer avec des fenêtres chrome. Enfin, poster un message à une page à une URL file: requiert actuellement que l'argument targetOrigin soit "*". file:// ne peut pas être utilisé comme restriction de sécurité ; cette restriction pourrait être modifiée à l'avenir.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis {{SpecName('HTML5 Web Messaging')}}
{{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}}{{Spec2('HTML5 Web Messaging')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Window.postMessage")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/postmessage/index.md b/files/fr/web/api/window/postmessage/index.md new file mode 100644 index 0000000000..e7224757d7 --- /dev/null +++ b/files/fr/web/api/window/postmessage/index.md @@ -0,0 +1,179 @@ +--- +title: Window.postMessage +slug: Web/API/Window/postMessage +tags: + - API + - DOM + - Méthode + - Reference + - postMessage +translation_of: Web/API/Window/postMessage +--- +
{{ ApiRef() }}
+ +
+ +

La méthode window.postMessage permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même origine, c'est-à-dire avec le même protocole (généralement http ou https), le même numéro de port (80 étant le port par défaut pour  http), et le même nom d'hôte (à condition que document.domain soit initialisé à la même valeur par les deux pages). window.postMessage fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée.

+ +

La méthode window.postMessage, quand elle est appelée, provoque l'envoi d'un {{domxref("MessageEvent")}} à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si window.postMessage est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le {{domxref("MessageEvent")}} est de type message, a une propriété data qui est initialisée à la valeur du premier argument passé à window.postMessage, une propriété origin correspondant à l'origine du document principal de la fenêtre appelant window.postMessage au moment où window.postMessage a été appelée, et une propriété source qui est la fenêtre depuis laquelle window.postMessage est appelée. (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues).

+ +

Syntaxe

+ +
otherWindow.postMessage(message, targetOrigin, [transfer]);
+ +
+
otherWindow
+
Une référence à une autre fenêtre ; une telle référence peut être obtenue, par exemple, via la propriété contentWindow d'un élément iframe, l'objet retourné par window.open, ou par index nommé ou numérique de window.frames.
+
message
+
La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant l'algorithme de clônage structuré. Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. [1]
+
targetOrigin
+
Indique quelle doit être l'origine de otherWindow pour l'évènement à envoyer, soit comme la chaîne littérale "*" (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de otherWindow ne correspond pas à ceux contenus dans targetOrigin,  l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si postMessage était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. Fournissez toujours une targetOrigin spécifique, jamais *, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.
+
transfer {{optional_Inline}}
+
Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur.
+
+ +

L'évènement envoyé

+ +

otherWindow peut surveiller les messages envoyés en exécutant le JavaScript suivant :

+ +
window.addEventListener("message", receiveMessage, false);
+
+function receiveMessage(event)
+{
+  if (event.origin !== "http://example.org:8080")
+    return;
+
+  // ...
+}
+
+ +

Les propriétés du message envoyé sont :

+ +
+
data
+
L'objet passé depuis l'autre fenêtre.
+
origin
+
L'origine de la fenêtre qui a envoyé le message au moment où postMessage a été appelée. Des exemples typiques d'origines sont https://example.org (sous-entendu port 443), http://example.net (sous-entendu port 80), et http://example.com:8080. Notez qu'il n'est pas garanti que cette origine soit l'origine actuelle ou future de cette fenêtre, qui peut avoir été naviguée vers une adresse différente depuis l'appel à postMessage.
+
source
+
Une référence à l'objet window qui a envoyé le message ; vous pouvez utiliser ceci pour établir une communication dans les deux sens entre deux fenêtres ayant différentes origines.
+
+ +
+
+ +

Précautions de sécurité

+ +

Si vous ne prévoyez pas de recevoir de messages depuis d'autres sites, n'ajoutez pas de gestionnaire d'évènement pour les évènements message. C'est un moyen sûr d'éviter les problèmes de sécurité.

+ +

Si vous prévoyez de recevoir des messages depuis d'autres sites, vérifiez toujours l'identité de l'expéditeur à l'aide des propriétés origin et si possible source. Toute fenêtre (y compris, par exemple, http://evil.example.com) peut envoyer un message à toute autre fenêtre, et vous n'avez aucune garantie qu'un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l'identité, vous devriez toujours vérifier la syntaxe du message reçu. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.

+ +

Spécifiez toujours explicitement une origine de destination, jamais *, quand vous utilisez postMessage pour envoyer des données à d'autres fenêtres. Un site malicieux peut changer l'adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l'aide de postMessage.

+ +

Exemple

+ +
/*
+ * Dans les scripts de la fenêtre A, avec A sur <http://example.com:8080>:
+ */
+
+var popup = window.open(...popup details...);
+
+// Quand la popup est chargée, si pas bloquée par un bloqueur de popups:
+
+// Ceci ne fait rien, en supposant que la fenêtre n'a pas changé d'adresse.
+popup.postMessage("The user is 'bob' and the password is 'secret'",
+                  "https://secure.example.net");
+
+// Ceci va planifier l'envoi d'un message à la popup, en supposant que
+// la fenêtre n'a pas changé d'adresse.
+popup.postMessage("hello there!", "http://example.org");
+
+function receiveMessage(event)
+{
+  // Faisons-nous confiance à l'expéditeur de ce message ?  (il pourrait être
+  // différent de la fenêtre que nous avons ouverte au départ, par exemple).
+  if (event.origin !== "http://example.org")
+    return;
+
+  // event.source est la popup
+  // event.data est "hi there yourself!  the secret response is: rheeeeet!"
+}
+window.addEventListener("message", receiveMessage, false);
+
+ +
/*
+ * Dans les scripts de la popup, sur <http://example.org>:
+ */
+
+// Appelée quelques instants après que postMessage a été appelée
+function receiveMessage(event)
+{
+  // Faisons-nous confiance à l'expéditeur de ce message ?
+  if (event.origin !== "http://example.com:8080")
+    return;
+
+  // event.source est window.opener
+  // event.data est "hello there!"
+
+  // Supposant que vous avez vérifié l'origine du message reçu
+  // (ce que vous devriez faire en toutes circonstances),
+  // un moyen pratique de répondre à un message est d'appeler postMessage
+  // sur event.source et fournir event.origin comme targetOrigin.
+  event.source.postMessage("hi there yourself!  the secret response " +
+                           "is: rheeeeet!",
+                           event.origin);
+}
+
+window.addEventListener("message", receiveMessage, false);
+
+ +

Notes

+ +

Toute fenêtre peut accéder à cette méthode sur toute autre fenêtre, à tout moment, peu importe l'adresse du document dans la fenêtre, pour y envoyer un message. Par conséquent, tout gestionnaire d'évènement utilisé pour recevoir des messages doit d'abord vérifier l'identité de l'expéditeur du message, en utilisant les propriétés origin et si possible source. Cela ne peut pas être minimisé : ne pas vérifier les propriétés origin et si possible source permet des attaques inter-site.

+ +

De même qu'avec les scripts exécutés de manière asynchrone (timeouts, evènements générés par l'utilisateur), il n'est pas possible pour l'appelant à postMessage de détecter quand un gestionnaire d'évènement écoutant des évènements envoyés par postMessage lance une exception.

+ +

La valeur de la propriété origin de l'évènement envoyé n'est pas affectée par la valeur actuelle de document.domain dans la fenêtre appelante.

+ +

Pour les noms d'hôte IDN uniquement, la valeur de la propriété origin n'est pas systématiquement Unicode ou punycode ; pour la plus grande compatibilité, testez à la fois les valeurs IDN et punycode quand vous utilisez cette propriété si vous attendez des messages de sites IDN. Cette valeur sera systématiquement IDN à l'avenir, mais pour l'instant vous devriez gérer à la fois les formes IDN et punycode.

+ +

La valeur de la propriété origin quand la fenêtre expéditrice contient une URL javascript: ou data: est l'origin du script qui a chargé cette URL.

+ +

Utiliser window.postMessage dans les extensions {{Non-standard_inline}}

+ +

window.postMessage est disponible depuis le JavaScript exécuté en code chrome (par exemple dans les extensions et le code privilégié), mais la propriété source de l'évènement envoyé est toujours null par mesure de sécurité. (Les autres propriétés ont leurs valeurs usuelles.) L'argument targetOrigin pour un message envoyé à une fenêtre située à une URL chrome: est actuellement mal interprété, si bien que la seule valeur qui conduit à l'envoi d'un message est "*". Comme cette valeur n'est pas sûre quand la fenêtre ciblée peut être naviguée n'importe où par un site malicieux, il est recommandé de ne pas utiliser postMessage pour communiquer avec des pages chrome: pour l'instant ; utilisez une méthode différente (comme une query string quand la fenêtre est ouverte) pour communiquer avec des fenêtres chrome. Enfin, poster un message à une page à une URL file: requiert actuellement que l'argument targetOrigin soit "*". file:// ne peut pas être utilisé comme restriction de sécurité ; cette restriction pourrait être modifiée à l'avenir.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis {{SpecName('HTML5 Web Messaging')}}
{{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}}{{Spec2('HTML5 Web Messaging')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Window.postMessage")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/print/index.html b/files/fr/web/api/window/print/index.html deleted file mode 100644 index e07fb5d820..0000000000 --- a/files/fr/web/api/window/print/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Window.print() -slug: Web/API/Window/print -tags: - - API - - BesoinDeCompatibilitéAvecLeNavigateur - - BesoinDeCompatibilitéAvecLeNavigateurMobile - - DOM - - Méthode - - Reference - - Window -translation_of: Web/API/Window/print ---- -

{{ ApiRef() }}

- -

Ouvre la fenêtre de dialogue d'impression pour imprimer le document courant. 

- -

Syntaxe

- -
window.print()
-
- -

Notes

- -

Disponible à partir de Chrome {{CompatChrome(45.0)}}, cette méthode est bloquée à l'intérieur d'une balise {{htmlelement("iframe")}} sauf si son attribut sandbox a la valeur allow-modal.

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}{{Spec2('HTML5 Web application')}}Définition initiale.
- -

Voir également

- - \ No newline at end of file diff --git a/files/fr/web/api/window/print/index.md b/files/fr/web/api/window/print/index.md new file mode 100644 index 0000000000..e07fb5d820 --- /dev/null +++ b/files/fr/web/api/window/print/index.md @@ -0,0 +1,50 @@ +--- +title: Window.print() +slug: Web/API/Window/print +tags: + - API + - BesoinDeCompatibilitéAvecLeNavigateur + - BesoinDeCompatibilitéAvecLeNavigateurMobile + - DOM + - Méthode + - Reference + - Window +translation_of: Web/API/Window/print +--- +

{{ ApiRef() }}

+ +

Ouvre la fenêtre de dialogue d'impression pour imprimer le document courant. 

+ +

Syntaxe

+ +
window.print()
+
+ +

Notes

+ +

Disponible à partir de Chrome {{CompatChrome(45.0)}}, cette méthode est bloquée à l'intérieur d'une balise {{htmlelement("iframe")}} sauf si son attribut sandbox a la valeur allow-modal.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}{{Spec2('HTML5 Web application')}}Définition initiale.
+ +

Voir également

+ + \ No newline at end of file diff --git a/files/fr/web/api/window/prompt/index.html b/files/fr/web/api/window/prompt/index.html deleted file mode 100644 index a5d0f914f2..0000000000 --- a/files/fr/web/api/window/prompt/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: window.prompt -slug: Web/API/Window/prompt -tags: - - API - - DOM - - Méthode - - Reference - - Window -translation_of: Web/API/Window/prompt ---- -
{{ApiRef("Window")}}
- -

La méthode Window.prompt() affiche une boîte de dialogue, éventuellement avec un message, qui invite l'utilisateur à saisir un texte.

- -

Syntaxe

- -
résultat = window.prompt(message, défaut);
-
- -

Paramètres

- -
-
message {{optional_inline}}
-
Une chaîne de caractères qui sera affichée pour l'utilisateur. Cet argument peut ne pas être utilisé s'il n'y a rien à afficher dans la fenêtre.
-
default {{optional_inline}}
-
Une chaîne de caractères contenant la valeur par défaut affichée pour la saisie. Pour Internet Explorer 7 et 8, si cet argument n'est pas fourni, ce sera la chaîne de caractères "undefined" qui sera la valeur par défaut.
-
- -

Valeur de retour

- -

La chaîne de caractères qui a été saisie par l'utilisateur ou null.

- -

Exemples

- -
let signe = prompt("Quel est votre signe astrologique ?");
-
-if (signe.toLowerCase() == "verseau") {
-  console.log("Oh ? moi aussi je suis verseau :)");
-}
-
-// Différentes façons d'utiliser prompt
-signe = window.prompt(); // ouvre une fenêtre de saisie sans texte
-signe = prompt();       //  ouvre une fenêtre de saisie sans texte
-
- // ouvre une fenêtre avec le texte "Quelle est la réponse ?"
-signe = window.prompt('Quelle est la réponse ?');
-
-// ouvre une fenêtre avec le texte "Quelle est la réponse ?"
-// avec la valeur "42" comme réponse par défaut
-signe = window.prompt('Quelle est la réponse ?', '42');
- -

Lorsque l'utilisateur clique sur le bouton OK, le texte saisi dans le champ est renvoyé par la fonction. Si l'utilisateur clique sur OK sans avoir saisi de texte, c'est la chaîne vide qui est renvoyée. Si l'utilisateur clique sur le bouton "Annuler", la fonction renvoie null.

- -

Notes

- -

Une boîte de dialogue contient un texte sur une ligne, un bouton "Annuler" ainsi qu'un bouton "OK". Elle permet de renvoyer le texte (éventuellement vide) saisi par l'utilisateur dans le champ de saisie.

- -

The following text is shared between this article, DOM:window.confirm and DOM:window.alert. Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la fenêtre n'est pas fermée. Pour ces raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue et autres fenêtres modales.

- -

On notera que le résultat de la fonction est une chaîne de caractères. Cela signifie qu'il faut parfois convertir la valeur founie par l'utilisateur. Si, par exemple, on souhaite que la réponse soit un nombre, il faudra la convertir (avec le constructeur {{jsxref("Number")}} éventuellement).

- -
const aNumber = Number(window.prompt("Veuillez saisir un nombre.", ""));
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.prompt")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/prompt/index.md b/files/fr/web/api/window/prompt/index.md new file mode 100644 index 0000000000..a5d0f914f2 --- /dev/null +++ b/files/fr/web/api/window/prompt/index.md @@ -0,0 +1,91 @@ +--- +title: window.prompt +slug: Web/API/Window/prompt +tags: + - API + - DOM + - Méthode + - Reference + - Window +translation_of: Web/API/Window/prompt +--- +
{{ApiRef("Window")}}
+ +

La méthode Window.prompt() affiche une boîte de dialogue, éventuellement avec un message, qui invite l'utilisateur à saisir un texte.

+ +

Syntaxe

+ +
résultat = window.prompt(message, défaut);
+
+ +

Paramètres

+ +
+
message {{optional_inline}}
+
Une chaîne de caractères qui sera affichée pour l'utilisateur. Cet argument peut ne pas être utilisé s'il n'y a rien à afficher dans la fenêtre.
+
default {{optional_inline}}
+
Une chaîne de caractères contenant la valeur par défaut affichée pour la saisie. Pour Internet Explorer 7 et 8, si cet argument n'est pas fourni, ce sera la chaîne de caractères "undefined" qui sera la valeur par défaut.
+
+ +

Valeur de retour

+ +

La chaîne de caractères qui a été saisie par l'utilisateur ou null.

+ +

Exemples

+ +
let signe = prompt("Quel est votre signe astrologique ?");
+
+if (signe.toLowerCase() == "verseau") {
+  console.log("Oh ? moi aussi je suis verseau :)");
+}
+
+// Différentes façons d'utiliser prompt
+signe = window.prompt(); // ouvre une fenêtre de saisie sans texte
+signe = prompt();       //  ouvre une fenêtre de saisie sans texte
+
+ // ouvre une fenêtre avec le texte "Quelle est la réponse ?"
+signe = window.prompt('Quelle est la réponse ?');
+
+// ouvre une fenêtre avec le texte "Quelle est la réponse ?"
+// avec la valeur "42" comme réponse par défaut
+signe = window.prompt('Quelle est la réponse ?', '42');
+ +

Lorsque l'utilisateur clique sur le bouton OK, le texte saisi dans le champ est renvoyé par la fonction. Si l'utilisateur clique sur OK sans avoir saisi de texte, c'est la chaîne vide qui est renvoyée. Si l'utilisateur clique sur le bouton "Annuler", la fonction renvoie null.

+ +

Notes

+ +

Une boîte de dialogue contient un texte sur une ligne, un bouton "Annuler" ainsi qu'un bouton "OK". Elle permet de renvoyer le texte (éventuellement vide) saisi par l'utilisateur dans le champ de saisie.

+ +

The following text is shared between this article, DOM:window.confirm and DOM:window.alert. Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la fenêtre n'est pas fermée. Pour ces raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue et autres fenêtres modales.

+ +

On notera que le résultat de la fonction est une chaîne de caractères. Cela signifie qu'il faut parfois convertir la valeur founie par l'utilisateur. Si, par exemple, on souhaite que la réponse soit un nombre, il faudra la convertir (avec le constructeur {{jsxref("Number")}} éventuellement).

+ +
const aNumber = Number(window.prompt("Veuillez saisir un nombre.", ""));
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.prompt")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/rejectionhandled_event/index.html b/files/fr/web/api/window/rejectionhandled_event/index.html deleted file mode 100644 index ebe167e30f..0000000000 --- a/files/fr/web/api/window/rejectionhandled_event/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 'Window: rejectionhandled event' -slug: Web/API/Window/rejectionhandled_event -tags: - - API - - Evènement - - HTML DOM - - JavaScript - - Promesse - - Reference - - Window - - onrejectionhandled - - rejectionhandled -translation_of: Web/API/Window/rejectionhandled_event ---- -
{{APIRef("HTML DOM")}}
- -

L'événement rejectionhandled est envoyé à la portée globale du script (généralement {{domxref("window")}} mais aussi {{domxref("Worker")}}) chaque fois qu'un JavaScript {{jsxref("Promise")}} est rejeté mais après que le rejet de la promesse a été traité.

- -

Cela peut être utilisé dans le débogage et pour la résilience générale des applications, en tandem avec l'événement {{domxref ("Window.unhandledrejection_event", "unhandledrejection")}}, qui est envoyé lorsqu'une promesse est rejetée mais qu'il n'y a pas de responsable du rejet .

- - - - - - - - - - - - - - - - - - - - -
BullesNon
AnnulableNon
Interface{{domxref("PromiseRejectionEvent")}}
Propriété de gestionnaire d'événements{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}
- -

Exemple

- -

Vous pouvez utiliser l'événement rejectionhandled pour consigner les promesses rejetées sur la console, ainsi que les raisons pour lesquelles elles ont été rejetées :

- -
window.addEventListener("rejectionhandled", event => {
-  console.log("Promise rejected; reason: " + event.reason);
-}, false);
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}{{Spec2('HTML WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.rejectionhandled_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/rejectionhandled_event/index.md b/files/fr/web/api/window/rejectionhandled_event/index.md new file mode 100644 index 0000000000..ebe167e30f --- /dev/null +++ b/files/fr/web/api/window/rejectionhandled_event/index.md @@ -0,0 +1,82 @@ +--- +title: 'Window: rejectionhandled event' +slug: Web/API/Window/rejectionhandled_event +tags: + - API + - Evènement + - HTML DOM + - JavaScript + - Promesse + - Reference + - Window + - onrejectionhandled + - rejectionhandled +translation_of: Web/API/Window/rejectionhandled_event +--- +
{{APIRef("HTML DOM")}}
+ +

L'événement rejectionhandled est envoyé à la portée globale du script (généralement {{domxref("window")}} mais aussi {{domxref("Worker")}}) chaque fois qu'un JavaScript {{jsxref("Promise")}} est rejeté mais après que le rejet de la promesse a été traité.

+ +

Cela peut être utilisé dans le débogage et pour la résilience générale des applications, en tandem avec l'événement {{domxref ("Window.unhandledrejection_event", "unhandledrejection")}}, qui est envoyé lorsqu'une promesse est rejetée mais qu'il n'y a pas de responsable du rejet .

+ + + + + + + + + + + + + + + + + + + + +
BullesNon
AnnulableNon
Interface{{domxref("PromiseRejectionEvent")}}
Propriété de gestionnaire d'événements{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}
+ +

Exemple

+ +

Vous pouvez utiliser l'événement rejectionhandled pour consigner les promesses rejetées sur la console, ainsi que les raisons pour lesquelles elles ont été rejetées :

+ +
window.addEventListener("rejectionhandled", event => {
+  console.log("Promise rejected; reason: " + event.reason);
+}, false);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}{{Spec2('HTML WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.rejectionhandled_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/requestanimationframe/index.html b/files/fr/web/api/window/requestanimationframe/index.html deleted file mode 100644 index 210fa93d1a..0000000000 --- a/files/fr/web/api/window/requestanimationframe/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Window.requestAnimationFrame() -slug: Web/API/Window/requestAnimationFrame -tags: - - API - - DOM - - JavaScript -translation_of: Web/API/window/requestAnimationFrame ---- -

{{APIRef("Window")}}

- -

La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur.

- -
-

Note : Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode requestAnimationFrame().

-
- -

Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément.

- -

Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu.

- -

Syntaxe

- -
requestID = window.requestAnimationFrame(callback);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
-requestID = window.mozRequestAnimationFrame(callback);    // Firefox < 23
-requestID = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome
-
- -

Paramètres

- -
-
callback
-
Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks.
-
- -

Valeur retournée

- -

requestID est un entier long unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}},  vous annulez l'appel du callback.

- -

Exemple

- -
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-
-
-var start = null;
-
-var d = document.getElementById("SomeElementYouWantToAnimate");
-
-function step(timestamp) {
-  var progress;
-  if (start === null) start = timestamp;
-  progress = timestamp - start;
-  d.style.left = Math.min(progress/10, 200) + "px";
-  if (progress < 2000) {
-    requestAnimationFrame(step);
-  }
-}
-
-requestAnimationFrame(step);
-
- -

Compatibilités

- -
-

{{Compat("api.Window.requestAnimationFrame")}}

-
- -

Notes pour Gecko

- -

[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, mozRequestAnimationFrame() pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé.

- -

[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. DOMTimeStamp n'a qu'une précision de l'ordre de la milliseconde, mais DOMHightResTimeStamp a une précision minimale de l'ordre de 10 microsecondes.

- -

Notes pour Chrome

- -

La syntaxe correcte, dans Chrome, pour annuler l'exécution est window.cancelAnimationFrame(). Dans les anciennes versions, window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame() sont obsolètes mais sont toujours supportées pour le moment.

- -

Specification

- -

{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/requestanimationframe/index.md b/files/fr/web/api/window/requestanimationframe/index.md new file mode 100644 index 0000000000..210fa93d1a --- /dev/null +++ b/files/fr/web/api/window/requestanimationframe/index.md @@ -0,0 +1,93 @@ +--- +title: Window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - DOM + - JavaScript +translation_of: Web/API/window/requestAnimationFrame +--- +

{{APIRef("Window")}}

+ +

La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur.

+ +
+

Note : Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode requestAnimationFrame().

+
+ +

Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément.

+ +

Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu.

+ +

Syntaxe

+ +
requestID = window.requestAnimationFrame(callback);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
+requestID = window.mozRequestAnimationFrame(callback);    // Firefox < 23
+requestID = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome
+
+ +

Paramètres

+ +
+
callback
+
Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks.
+
+ +

Valeur retournée

+ +

requestID est un entier long unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}},  vous annulez l'appel du callback.

+ +

Exemple

+ +
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+
+var start = null;
+
+var d = document.getElementById("SomeElementYouWantToAnimate");
+
+function step(timestamp) {
+  var progress;
+  if (start === null) start = timestamp;
+  progress = timestamp - start;
+  d.style.left = Math.min(progress/10, 200) + "px";
+  if (progress < 2000) {
+    requestAnimationFrame(step);
+  }
+}
+
+requestAnimationFrame(step);
+
+ +

Compatibilités

+ +
+

{{Compat("api.Window.requestAnimationFrame")}}

+
+ +

Notes pour Gecko

+ +

[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, mozRequestAnimationFrame() pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé.

+ +

[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. DOMTimeStamp n'a qu'une précision de l'ordre de la milliseconde, mais DOMHightResTimeStamp a une précision minimale de l'ordre de 10 microsecondes.

+ +

Notes pour Chrome

+ +

La syntaxe correcte, dans Chrome, pour annuler l'exécution est window.cancelAnimationFrame(). Dans les anciennes versions, window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame() sont obsolètes mais sont toujours supportées pour le moment.

+ +

Specification

+ +

{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/requestidlecallback/index.html b/files/fr/web/api/window/requestidlecallback/index.html deleted file mode 100644 index ca33f7ac28..0000000000 --- a/files/fr/web/api/window/requestidlecallback/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: window.requestIdleCallback() -slug: Web/API/Window/requestIdleCallback -translation_of: Web/API/Window/requestIdleCallback ---- -
{{APIRef}}{{SeeCompatTable}}
- -

La méthode window.requestIdleCallback() mémorise une fonction qui sera appellée lorsque le navigateur n'aura plus aucune autre tâche en cours. Cela offre au développeur la possibilité de réaliser des tâches à basse priorité en arrière-plan sur le thread principal, sans impacter l'expérience utilisateur (ralentissement des animations, etc). L'ordre des appels aux fonctions est généralement premier entré, premier sorti, sauf si le timeout défini au moment de l'enregistrement est atteint avant que le navigateur n'ait eu le temps d'appeler la fonction en question.

- -

Syntaxe

- -
var idleCallbackId = window.requestIdleCallback(fonction[, options])
- -

Retour de l'appel

- -

Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}.

- -

Paramètres

- -
-
fonction
-
La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes : -
    -
  • timeRemaining : Fonction qui retourne un {{domxref("DOMHighResTimeStamp")}} repésentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. timeRemaining() retournera toujours zéro si didTimeout est positionné à true (i.e. la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue.
    • -
  • didTimeout : Un booléen positionné à true si la fonction est appelée car le timeout a été atteint, et false si elle a été appelée par le navigateur durant une période de repos.
    • -
-
-
options {{optional_inline}}
-
Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes : -
    -
  • timeout : Si timeout est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins timeout millisecondes si elle n'a pas été appelée par le navigateur au préalable.
    • -
-
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('Background Tasks')}}{{Spec2('Background Tasks')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.requestIdleCallback")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/requestidlecallback/index.md b/files/fr/web/api/window/requestidlecallback/index.md new file mode 100644 index 0000000000..ca33f7ac28 --- /dev/null +++ b/files/fr/web/api/window/requestidlecallback/index.md @@ -0,0 +1,65 @@ +--- +title: window.requestIdleCallback() +slug: Web/API/Window/requestIdleCallback +translation_of: Web/API/Window/requestIdleCallback +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

La méthode window.requestIdleCallback() mémorise une fonction qui sera appellée lorsque le navigateur n'aura plus aucune autre tâche en cours. Cela offre au développeur la possibilité de réaliser des tâches à basse priorité en arrière-plan sur le thread principal, sans impacter l'expérience utilisateur (ralentissement des animations, etc). L'ordre des appels aux fonctions est généralement premier entré, premier sorti, sauf si le timeout défini au moment de l'enregistrement est atteint avant que le navigateur n'ait eu le temps d'appeler la fonction en question.

+ +

Syntaxe

+ +
var idleCallbackId = window.requestIdleCallback(fonction[, options])
+ +

Retour de l'appel

+ +

Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}.

+ +

Paramètres

+ +
+
fonction
+
La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes : +
    +
  • timeRemaining : Fonction qui retourne un {{domxref("DOMHighResTimeStamp")}} repésentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. timeRemaining() retournera toujours zéro si didTimeout est positionné à true (i.e. la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue.
    • +
  • didTimeout : Un booléen positionné à true si la fonction est appelée car le timeout a été atteint, et false si elle a été appelée par le navigateur durant une période de repos.
    • +
+
+
options {{optional_inline}}
+
Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes : +
    +
  • timeout : Si timeout est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins timeout millisecondes si elle n'a pas été appelée par le navigateur au préalable.
    • +
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('Background Tasks')}}{{Spec2('Background Tasks')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.requestIdleCallback")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/resizeby/index.html b/files/fr/web/api/window/resizeby/index.html deleted file mode 100644 index 4d3a8873d6..0000000000 --- a/files/fr/web/api/window/resizeby/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Window.resizeBy() -slug: Web/API/Window/resizeBy -tags: - - API - - Window -translation_of: Web/API/Window/resizeBy ---- -
{{APIRef}}
- -

La méthode Window.resizeBy() redimensionne la fenêtre actuelle d'une taille spécifié.

- -

Syntaxe

- -
window.resizeBy(xDelta, yDelta)
-
- -

Paramètres

- - - -

Exemple

- -
// Réduit la fenêtre
-window.resizeBy(-200, -200);
-
- -

Notes

- -

Cette méthode redimensionne la fenêtre par rapport à sa taille actuelle. Pour redimensionner la fenêtre en termes absolus, utilisez {{domxref ("window.resizeTo ()")}}.

- -

Créer et redimensionner une fenêtre externe

- -

Pour des raisons de sécurité, il n'est plus possible dans Firefox pour un site Web de modifier la taille par défaut d'une fenêtre dans un navigateur si la fenêtre n'a pas été créée par window.open() ou contient plusieurs onglets. Consultez le tableau de compatibilité pour plus de détails sur le changement.

- -

Même si vous créez une fenêtre avec window.open() elle n'est pas redimensionnable par défaut. Pour rendre la fenêtre redimensionnable, vous devez l'ouvrir avec le paramètre "resizable" .

- -
// Créer une fenêtre redimensionnable
-myExternalWindow = window.open("http://myurl.domain", "myWindowName", "resizable");
-
-// Redimensionner la fenêtre à 500 x 500
-myExternalWindow.resizeTo(500, 500);
-
-// Rendre la fenêtre relativement plus petit à 400 x 400
-myExternalWindow.resizeBy(-100, -100);
- -

La fenêtre que vous créez doit respecter la politique de même origine. Si la fenêtre que vous ouvrez n'est pas dans la même origine que la fenêtre actuelle, vous ne pourrez pas redimensionner ni accéder aux informations sur cette fenêtre / cet onglet.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{ SpecName('CSSOM View', '#dom-window-resizeby', 'window.resizeBy()') }}{{ Spec2('CSSOM View') }}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.resizeBy")}}

diff --git a/files/fr/web/api/window/resizeby/index.md b/files/fr/web/api/window/resizeby/index.md new file mode 100644 index 0000000000..4d3a8873d6 --- /dev/null +++ b/files/fr/web/api/window/resizeby/index.md @@ -0,0 +1,73 @@ +--- +title: Window.resizeBy() +slug: Web/API/Window/resizeBy +tags: + - API + - Window +translation_of: Web/API/Window/resizeBy +--- +
{{APIRef}}
+ +

La méthode Window.resizeBy() redimensionne la fenêtre actuelle d'une taille spécifié.

+ +

Syntaxe

+ +
window.resizeBy(xDelta, yDelta)
+
+ +

Paramètres

+ + + +

Exemple

+ +
// Réduit la fenêtre
+window.resizeBy(-200, -200);
+
+ +

Notes

+ +

Cette méthode redimensionne la fenêtre par rapport à sa taille actuelle. Pour redimensionner la fenêtre en termes absolus, utilisez {{domxref ("window.resizeTo ()")}}.

+ +

Créer et redimensionner une fenêtre externe

+ +

Pour des raisons de sécurité, il n'est plus possible dans Firefox pour un site Web de modifier la taille par défaut d'une fenêtre dans un navigateur si la fenêtre n'a pas été créée par window.open() ou contient plusieurs onglets. Consultez le tableau de compatibilité pour plus de détails sur le changement.

+ +

Même si vous créez une fenêtre avec window.open() elle n'est pas redimensionnable par défaut. Pour rendre la fenêtre redimensionnable, vous devez l'ouvrir avec le paramètre "resizable" .

+ +
// Créer une fenêtre redimensionnable
+myExternalWindow = window.open("http://myurl.domain", "myWindowName", "resizable");
+
+// Redimensionner la fenêtre à 500 x 500
+myExternalWindow.resizeTo(500, 500);
+
+// Rendre la fenêtre relativement plus petit à 400 x 400
+myExternalWindow.resizeBy(-100, -100);
+ +

La fenêtre que vous créez doit respecter la politique de même origine. Si la fenêtre que vous ouvrez n'est pas dans la même origine que la fenêtre actuelle, vous ne pourrez pas redimensionner ni accéder aux informations sur cette fenêtre / cet onglet.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{ SpecName('CSSOM View', '#dom-window-resizeby', 'window.resizeBy()') }}{{ Spec2('CSSOM View') }}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.resizeBy")}}

diff --git a/files/fr/web/api/window/screen/index.html b/files/fr/web/api/window/screen/index.html deleted file mode 100644 index c86fcb6f61..0000000000 --- a/files/fr/web/api/window/screen/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Window.screen -slug: Web/API/Window/screen -tags: - - API - - CSSOM View - - DOM - - Fenêtre - - Propriété - - Vue CSSOM - - Écran -translation_of: Web/API/Window/screen ---- -
{{APIRef("CSSOM View")}}
- -
Retourne une référence à l'objet screen associé à la fenêtre. L'object screen, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante.
- -

Syntaxe

- -
objetEcran = window.screen;
-
- -

Examples

- -
if (screen.pixelDepth < 8) {
-  // utiliser la page en colorisation réduite
-} else {
-  // utiliser la page en coolorisation normale
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}}{{Spec2('CSSOM View')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Window.screen")}}

diff --git a/files/fr/web/api/window/screen/index.md b/files/fr/web/api/window/screen/index.md new file mode 100644 index 0000000000..c86fcb6f61 --- /dev/null +++ b/files/fr/web/api/window/screen/index.md @@ -0,0 +1,55 @@ +--- +title: Window.screen +slug: Web/API/Window/screen +tags: + - API + - CSSOM View + - DOM + - Fenêtre + - Propriété + - Vue CSSOM + - Écran +translation_of: Web/API/Window/screen +--- +
{{APIRef("CSSOM View")}}
+ +
Retourne une référence à l'objet screen associé à la fenêtre. L'object screen, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante.
+ +

Syntaxe

+ +
objetEcran = window.screen;
+
+ +

Examples

+ +
if (screen.pixelDepth < 8) {
+  // utiliser la page en colorisation réduite
+} else {
+  // utiliser la page en coolorisation normale
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}}{{Spec2('CSSOM View')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Window.screen")}}

diff --git a/files/fr/web/api/window/screenx/index.html b/files/fr/web/api/window/screenx/index.html deleted file mode 100644 index 2ff4f0dc7b..0000000000 --- a/files/fr/web/api/window/screenx/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Window.screenX -slug: Web/API/Window/screenX -tags: - - API - - Propriété - - Window - - lecture seule -translation_of: Web/API/Window/screenX ---- -
{{APIRef}}
- -

La propriété  Window.screenX retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen.

- -

Syntax

- -
lLoc = window.screenX
-
- - - -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusCommentaire
{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}{{ Spec2('CSSOM View') }}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.screenX")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/screenx/index.md b/files/fr/web/api/window/screenx/index.md new file mode 100644 index 0000000000..2ff4f0dc7b --- /dev/null +++ b/files/fr/web/api/window/screenx/index.md @@ -0,0 +1,52 @@ +--- +title: Window.screenX +slug: Web/API/Window/screenX +tags: + - API + - Propriété + - Window + - lecture seule +translation_of: Web/API/Window/screenX +--- +
{{APIRef}}
+ +

La propriété  Window.screenX retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen.

+ +

Syntax

+ +
lLoc = window.screenX
+
+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusCommentaire
{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}{{ Spec2('CSSOM View') }}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.screenX")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/scroll/index.html b/files/fr/web/api/window/scroll/index.html deleted file mode 100644 index 17ae626928..0000000000 --- a/files/fr/web/api/window/scroll/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: window.scroll -slug: Web/API/Window/scroll -translation_of: Web/API/Window/scroll ---- -

{{ ApiRef() }}

- -

Fait glisser la fenêtre vers une position particulière du document

-

Syntax

-
window.scroll(x-coord,y-coord)
-
-

Parameters

- -

Example

-
 // Déplace la fenêtre 100px plus bas
- <button onClick="scroll(0, 100);">click to scroll down 100 pixels</button>
-
-

Notes

-

window.scrollTo a un effet identique à cette méthode. Pour se déplacer par pas dans la page, utilisez window.scrollBy. Jetez aussi un œil à window.scrollByLines et window.scrollByPages.

-

Specification

-

DOM Level 0. Hors spécification.

\ No newline at end of file diff --git a/files/fr/web/api/window/scroll/index.md b/files/fr/web/api/window/scroll/index.md new file mode 100644 index 0000000000..17ae626928 --- /dev/null +++ b/files/fr/web/api/window/scroll/index.md @@ -0,0 +1,24 @@ +--- +title: window.scroll +slug: Web/API/Window/scroll +translation_of: Web/API/Window/scroll +--- +

{{ ApiRef() }}

+ +

Fait glisser la fenêtre vers une position particulière du document

+

Syntax

+
window.scroll(x-coord,y-coord)
+
+

Parameters

+ +

Example

+
 // Déplace la fenêtre 100px plus bas
+ <button onClick="scroll(0, 100);">click to scroll down 100 pixels</button>
+
+

Notes

+

window.scrollTo a un effet identique à cette méthode. Pour se déplacer par pas dans la page, utilisez window.scrollBy. Jetez aussi un œil à window.scrollByLines et window.scrollByPages.

+

Specification

+

DOM Level 0. Hors spécification.

\ No newline at end of file diff --git a/files/fr/web/api/window/scrollbars/index.html b/files/fr/web/api/window/scrollbars/index.html deleted file mode 100644 index 1a292aed78..0000000000 --- a/files/fr/web/api/window/scrollbars/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Window.scrollbars -slug: Web/API/Window/scrollbars -tags: - - API - - HTML DOM - - Propriété - - Reference - - Window -translation_of: Web/API/Window/scrollbars ---- -
{{APIRef()}}
- -

La propriété Window.scrollbars renvoie l'objet scrollbars, dont la visibilité peut être vérifié.

- -

Syntaxe

- -
objRef = window.scrollbars
-
- -

Exemple

- -

L'exemple HTML complet suivant montre comment la propriété visible de l'objet scrollbars est utilisée.

- -
<!doctype html>
-<html>
-<head>
-  <title>Divers Tests DOM</title>
-  <script>
-    let visibleScrollbars = window.scrollbars.visible;
-  </script>
-</head>
-<body>
-  <p>Divers Tests DOM</p>
-</body>
-</html>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.scrollbars")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/scrollbars/index.md b/files/fr/web/api/window/scrollbars/index.md new file mode 100644 index 0000000000..1a292aed78 --- /dev/null +++ b/files/fr/web/api/window/scrollbars/index.md @@ -0,0 +1,73 @@ +--- +title: Window.scrollbars +slug: Web/API/Window/scrollbars +tags: + - API + - HTML DOM + - Propriété + - Reference + - Window +translation_of: Web/API/Window/scrollbars +--- +
{{APIRef()}}
+ +

La propriété Window.scrollbars renvoie l'objet scrollbars, dont la visibilité peut être vérifié.

+ +

Syntaxe

+ +
objRef = window.scrollbars
+
+ +

Exemple

+ +

L'exemple HTML complet suivant montre comment la propriété visible de l'objet scrollbars est utilisée.

+ +
<!doctype html>
+<html>
+<head>
+  <title>Divers Tests DOM</title>
+  <script>
+    let visibleScrollbars = window.scrollbars.visible;
+  </script>
+</head>
+<body>
+  <p>Divers Tests DOM</p>
+</body>
+</html>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.scrollbars")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/scrollby/index.html b/files/fr/web/api/window/scrollby/index.html deleted file mode 100644 index 8713385ca8..0000000000 --- a/files/fr/web/api/window/scrollby/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Window.scrollBy() -slug: Web/API/Window/scrollBy -tags: - - API - - CSSOM View - - Méthode - - Référence(2) -translation_of: Web/API/Window/scrollBy ---- -

{{ APIRef() }}

- -

Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre.

- -

Syntaxe

- -
window.scrollBy(X, Y);
-
- -

Paramètres

- - - -

Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. 

- -

Exemples

- -
// fait défiler d'une page
-window.scrollBy(0, window.innerHeight);
-
- -

Notes

- -

window.scrollBy fait défiler en fonction d'un nombre précis, alors que window.scroll fait défiler vers une position absolue dans le document. Voir aussi window.scrollByLines, window.scrollByPages

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}{{ Spec2('CSSOM View') }}Définition initiale.
diff --git a/files/fr/web/api/window/scrollby/index.md b/files/fr/web/api/window/scrollby/index.md new file mode 100644 index 0000000000..8713385ca8 --- /dev/null +++ b/files/fr/web/api/window/scrollby/index.md @@ -0,0 +1,56 @@ +--- +title: Window.scrollBy() +slug: Web/API/Window/scrollBy +tags: + - API + - CSSOM View + - Méthode + - Référence(2) +translation_of: Web/API/Window/scrollBy +--- +

{{ APIRef() }}

+ +

Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre.

+ +

Syntaxe

+ +
window.scrollBy(X, Y);
+
+ +

Paramètres

+ + + +

Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. 

+ +

Exemples

+ +
// fait défiler d'une page
+window.scrollBy(0, window.innerHeight);
+
+ +

Notes

+ +

window.scrollBy fait défiler en fonction d'un nombre précis, alors que window.scroll fait défiler vers une position absolue dans le document. Voir aussi window.scrollByLines, window.scrollByPages

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}{{ Spec2('CSSOM View') }}Définition initiale.
diff --git a/files/fr/web/api/window/scrollbylines/index.html b/files/fr/web/api/window/scrollbylines/index.html deleted file mode 100644 index eac61c0802..0000000000 --- a/files/fr/web/api/window/scrollbylines/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Window.scrollByLines() -slug: Web/API/Window/scrollByLines -tags: - - API - - DOM - - DOM_0 - - Méthode - - Non-standard - - Window -translation_of: Web/API/Window/scrollByLines ---- -
{{ ApiRef() }}
- -

{{Non-standard_header}}

- -

Fait défiler le document du nombre de lignes spécifié.

- -

Syntaxe

- -
window.scrollByLines(lignes)
-
- -

Paramètres

- - - -

Exemples

- -
<!-- Faire défiler le document de 5 lignes vers le bas. -->
-<button onclick="scrollByLines(5);">5 lignes vers le bas</button>
-
- -
<!-- Faire défiler le document de 5 lignes vers le haut. -->
-<button onclick="scrollByLines(-5);">5 lignes vers le haut</button>
-
- -

Spécification

- -

Ne fait partie d'aucune spécification.

- -

See also

- - diff --git a/files/fr/web/api/window/scrollbylines/index.md b/files/fr/web/api/window/scrollbylines/index.md new file mode 100644 index 0000000000..eac61c0802 --- /dev/null +++ b/files/fr/web/api/window/scrollbylines/index.md @@ -0,0 +1,49 @@ +--- +title: Window.scrollByLines() +slug: Web/API/Window/scrollByLines +tags: + - API + - DOM + - DOM_0 + - Méthode + - Non-standard + - Window +translation_of: Web/API/Window/scrollByLines +--- +
{{ ApiRef() }}
+ +

{{Non-standard_header}}

+ +

Fait défiler le document du nombre de lignes spécifié.

+ +

Syntaxe

+ +
window.scrollByLines(lignes)
+
+ +

Paramètres

+ + + +

Exemples

+ +
<!-- Faire défiler le document de 5 lignes vers le bas. -->
+<button onclick="scrollByLines(5);">5 lignes vers le bas</button>
+
+ +
<!-- Faire défiler le document de 5 lignes vers le haut. -->
+<button onclick="scrollByLines(-5);">5 lignes vers le haut</button>
+
+ +

Spécification

+ +

Ne fait partie d'aucune spécification.

+ +

See also

+ + diff --git a/files/fr/web/api/window/scrollbypages/index.html b/files/fr/web/api/window/scrollbypages/index.html deleted file mode 100644 index 8419d43545..0000000000 --- a/files/fr/web/api/window/scrollbypages/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Window.scrollByPages() -slug: Web/API/Window/scrollByPages -tags: - - API - - DOM - - Gecko - - Méthode -translation_of: Web/API/Window/scrollByPages ---- -

{{ ApiRef() }}{{Non-standard_header}}

- -

Fait défiler le document du nombre de pages spécifié.

- -

Syntaxe

- -
window.scrollByPages(pages)
-
- -

Paramètres

- - - -

Exemples

- -
// fait défiler le document d'une page vers le bas
-window.scrollByPages(1);
-
-// fait défiler le document d'une page vers le haut
-window.scrollByPages(-1);
-
- -

Notes

- -

Voir aussi window.scrollBy, window.scrollByLines, window.scroll, window.scrollTo.

- -

Spécification

- -

DOM Niveau 0. Ne fait pas partie de la spécification.

\ No newline at end of file diff --git a/files/fr/web/api/window/scrollbypages/index.md b/files/fr/web/api/window/scrollbypages/index.md new file mode 100644 index 0000000000..8419d43545 --- /dev/null +++ b/files/fr/web/api/window/scrollbypages/index.md @@ -0,0 +1,42 @@ +--- +title: Window.scrollByPages() +slug: Web/API/Window/scrollByPages +tags: + - API + - DOM + - Gecko + - Méthode +translation_of: Web/API/Window/scrollByPages +--- +

{{ ApiRef() }}{{Non-standard_header}}

+ +

Fait défiler le document du nombre de pages spécifié.

+ +

Syntaxe

+ +
window.scrollByPages(pages)
+
+ +

Paramètres

+ + + +

Exemples

+ +
// fait défiler le document d'une page vers le bas
+window.scrollByPages(1);
+
+// fait défiler le document d'une page vers le haut
+window.scrollByPages(-1);
+
+ +

Notes

+ +

Voir aussi window.scrollBy, window.scrollByLines, window.scroll, window.scrollTo.

+ +

Spécification

+ +

DOM Niveau 0. Ne fait pas partie de la spécification.

\ No newline at end of file diff --git a/files/fr/web/api/window/scrollto/index.html b/files/fr/web/api/window/scrollto/index.html deleted file mode 100644 index 753059d1c9..0000000000 --- a/files/fr/web/api/window/scrollto/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: window.scrollTo -slug: Web/API/Window/scrollTo -tags: - - DOM - - DOM_0 -translation_of: Web/API/Window/scrollTo ---- -

{{ ApiRef() }}

- -

Résumé

- -

Fait défiler le document jusqu'à un jeu de coordonnées particulier.

- -

Syntaxe

- -
window.scrollTo(coord-x,coord-y);
-
- -

Paramètres

- - - -

Exemple

- -
window.scrollTo(0, 1000);
-
- -

Notes

- -

Cette fonction est fonctionnellement identique à window.scroll. Pour un défilement relatif, consultez window.scrollBy, window.scrollByLines et window.scrollByPages.

- -

Spécification

- -

{{ DOM0() }}

diff --git a/files/fr/web/api/window/scrollto/index.md b/files/fr/web/api/window/scrollto/index.md new file mode 100644 index 0000000000..753059d1c9 --- /dev/null +++ b/files/fr/web/api/window/scrollto/index.md @@ -0,0 +1,38 @@ +--- +title: window.scrollTo +slug: Web/API/Window/scrollTo +tags: + - DOM + - DOM_0 +translation_of: Web/API/Window/scrollTo +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

Fait défiler le document jusqu'à un jeu de coordonnées particulier.

+ +

Syntaxe

+ +
window.scrollTo(coord-x,coord-y);
+
+ +

Paramètres

+ + + +

Exemple

+ +
window.scrollTo(0, 1000);
+
+ +

Notes

+ +

Cette fonction est fonctionnellement identique à window.scroll. Pour un défilement relatif, consultez window.scrollBy, window.scrollByLines et window.scrollByPages.

+ +

Spécification

+ +

{{ DOM0() }}

diff --git a/files/fr/web/api/window/scrolly/index.html b/files/fr/web/api/window/scrolly/index.html deleted file mode 100644 index 6d556c1eae..0000000000 --- a/files/fr/web/api/window/scrolly/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Window.scrollY -slug: Web/API/Window/scrollY -translation_of: Web/API/Window/scrollY ---- -
{{APIRef}}
- -

La propriété scrollY de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier.

- -

Syntaxe

- -
var y = window.scrollY;
- - - -

Exemple

- -
// make sure and go down to the second page
-if (window.scrollY) {
-  window.scroll(0, 0);  // reset the scroll position to the top left of the document.
-}
-
-window.scrollByPages(1);
- -

Notes

- -

Utilisez cette propriété pour être sûre que le document n'as pas été défilé verticalement si vous utilisez les fonctions de défilement tels que {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}.

- -

La propriété pageYOffset est un alias de la propriété scrollY:

- -
window.pageYOffset == window.scrollY; // toujours vrai
- -

Pour une compatibilité multi-navigateur, utilisez window.pageYOffset à la place de window.scrollY. En outre, les anciennes versions d'Internet Explorer (< 9) ne supportent pas non plus la propriété et doit-être utilisé à l'aide d'autres propriétés qui ne sont pas standards. Un exemple entièrement compatible :

- -
var supportPageOffset = window.pageXOffset !== undefined;
-var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
-
-var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
-var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatusCommentaire(s)
{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}{{ Spec2('CSSOM View') }}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.scrollY")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/scrolly/index.md b/files/fr/web/api/window/scrolly/index.md new file mode 100644 index 0000000000..6d556c1eae --- /dev/null +++ b/files/fr/web/api/window/scrolly/index.md @@ -0,0 +1,71 @@ +--- +title: Window.scrollY +slug: Web/API/Window/scrollY +translation_of: Web/API/Window/scrollY +--- +
{{APIRef}}
+ +

La propriété scrollY de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier.

+ +

Syntaxe

+ +
var y = window.scrollY;
+ + + +

Exemple

+ +
// make sure and go down to the second page
+if (window.scrollY) {
+  window.scroll(0, 0);  // reset the scroll position to the top left of the document.
+}
+
+window.scrollByPages(1);
+ +

Notes

+ +

Utilisez cette propriété pour être sûre que le document n'as pas été défilé verticalement si vous utilisez les fonctions de défilement tels que {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}.

+ +

La propriété pageYOffset est un alias de la propriété scrollY:

+ +
window.pageYOffset == window.scrollY; // toujours vrai
+ +

Pour une compatibilité multi-navigateur, utilisez window.pageYOffset à la place de window.scrollY. En outre, les anciennes versions d'Internet Explorer (< 9) ne supportent pas non plus la propriété et doit-être utilisé à l'aide d'autres propriétés qui ne sont pas standards. Un exemple entièrement compatible :

+ +
var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire(s)
{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}{{ Spec2('CSSOM View') }}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.scrollY")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/sessionstorage/index.html b/files/fr/web/api/window/sessionstorage/index.html deleted file mode 100644 index 64a4e4cc27..0000000000 --- a/files/fr/web/api/window/sessionstorage/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Window.sessionStorage -slug: Web/API/Window/sessionStorage -tags: - - API -translation_of: Web/API/Window/sessionStorage ---- -

{{APIRef}}

- -

La propriété sessionStorage permet d'utiliser un objet {{domxref("Storage")}} valable pour la session de navigation en cours et pour les pages du même domaine que la page actuelle. L'objet global sessionStorage est similaire à {{domxref("Window.localStorage")}}, à la différence que les données enregistrées dans sessionStorage ont une durée vie limitée et expirent à la fin de la session de navigation actuelle. Une session de navigation dure aussi longtemps que le navigateur est ouvert et s'étend sur plusieurs chargements, rechargements et restaurations de pages. En revanche, une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation, ce qui diffère du comportement des sessions utilisant des cookies.

- -

Il est à noter que les données stockées dans sessionStorage ou localStorage sont spécifiques au protocole de la page.

- -

Syntaxe

- -
// Enregistrer des données dans sessionStorage
-sessionStorage.setItem('clé', 'valeur');
-
-// Récupérer des données depuis sessionStorage
-var data = sessionStorage.getItem('clé');
-
-// Supprimer des données de sessionStorage
-sessionStorage.removeItem('clé');
-
-// Supprimer toutes les données de sessionStorage
-sessionStorage.clear();
-
- -

Valeur

- -

Un objet {{domxref("Storage")}}.

- -

Exemple

- -

L'exemple de code suivant accède à l'objet de stockage de session associé au domaine actuel et y ajoute une donnée à l'aide de {{domxref("Storage.setItem()")}}.

- -
sessionStorage.setItem('myCat', 'Tom');
- -

L'exemple suivant sauvegarde automatiquement le contenu d'un champ textuel. Si la page est accidentellement rafraîchie, le contenu du champ est restauré de sorte qu'aucune saisie n'est perdue.

- -
// Récupération du champ à enregistrer
-var champ = document.getElementById("champ");
-
-// Vérification de l'existence d'une donnée enregistrée auparavant
-// (ce ne sera le cas que si la page a été rafraîchie)
-if (sessionStorage.getItem("autosave")) {
-  // Restauration du contenu du champ
-  champ.value = sessionStorage.getItem("autosave");
-}
-
-// Écoute des changements de valeur du champ
-champ.addEventListener("change", function() {
-  // Enregistrement de la saisie utilisateur dans le stockage de session
-  sessionStorage.setItem("autosave", champ.value);
-});
- -
-

Note : Veuillez vous référer à l'article Utilisation de l'API Web Storage pour des exemples plus complets.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "webstorage.html#dom-sessionstorage", "sessionStorage")}}{{Spec2("HTML WHATWG")}}
- -

Compatilibité des navigateurs

- -

{{Compat("api.Window.sessionStorage")}}

- -

Chaque navigateur attribue des capacités de stockage limitées pour localStorage et sessionStorage. Vous en trouverez certaines dans ce récapitulatif de tests des capacités de stockage attribuées en fonction du navigateur.

- -

Voir aussi

- - diff --git a/files/fr/web/api/window/sessionstorage/index.md b/files/fr/web/api/window/sessionstorage/index.md new file mode 100644 index 0000000000..64a4e4cc27 --- /dev/null +++ b/files/fr/web/api/window/sessionstorage/index.md @@ -0,0 +1,89 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - API +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef}}

+ +

La propriété sessionStorage permet d'utiliser un objet {{domxref("Storage")}} valable pour la session de navigation en cours et pour les pages du même domaine que la page actuelle. L'objet global sessionStorage est similaire à {{domxref("Window.localStorage")}}, à la différence que les données enregistrées dans sessionStorage ont une durée vie limitée et expirent à la fin de la session de navigation actuelle. Une session de navigation dure aussi longtemps que le navigateur est ouvert et s'étend sur plusieurs chargements, rechargements et restaurations de pages. En revanche, une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation, ce qui diffère du comportement des sessions utilisant des cookies.

+ +

Il est à noter que les données stockées dans sessionStorage ou localStorage sont spécifiques au protocole de la page.

+ +

Syntaxe

+ +
// Enregistrer des données dans sessionStorage
+sessionStorage.setItem('clé', 'valeur');
+
+// Récupérer des données depuis sessionStorage
+var data = sessionStorage.getItem('clé');
+
+// Supprimer des données de sessionStorage
+sessionStorage.removeItem('clé');
+
+// Supprimer toutes les données de sessionStorage
+sessionStorage.clear();
+
+ +

Valeur

+ +

Un objet {{domxref("Storage")}}.

+ +

Exemple

+ +

L'exemple de code suivant accède à l'objet de stockage de session associé au domaine actuel et y ajoute une donnée à l'aide de {{domxref("Storage.setItem()")}}.

+ +
sessionStorage.setItem('myCat', 'Tom');
+ +

L'exemple suivant sauvegarde automatiquement le contenu d'un champ textuel. Si la page est accidentellement rafraîchie, le contenu du champ est restauré de sorte qu'aucune saisie n'est perdue.

+ +
// Récupération du champ à enregistrer
+var champ = document.getElementById("champ");
+
+// Vérification de l'existence d'une donnée enregistrée auparavant
+// (ce ne sera le cas que si la page a été rafraîchie)
+if (sessionStorage.getItem("autosave")) {
+  // Restauration du contenu du champ
+  champ.value = sessionStorage.getItem("autosave");
+}
+
+// Écoute des changements de valeur du champ
+champ.addEventListener("change", function() {
+  // Enregistrement de la saisie utilisateur dans le stockage de session
+  sessionStorage.setItem("autosave", champ.value);
+});
+ +
+

Note : Veuillez vous référer à l'article Utilisation de l'API Web Storage pour des exemples plus complets.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "webstorage.html#dom-sessionstorage", "sessionStorage")}}{{Spec2("HTML WHATWG")}}
+ +

Compatilibité des navigateurs

+ +

{{Compat("api.Window.sessionStorage")}}

+ +

Chaque navigateur attribue des capacités de stockage limitées pour localStorage et sessionStorage. Vous en trouverez certaines dans ce récapitulatif de tests des capacités de stockage attribuées en fonction du navigateur.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/showmodaldialog/index.html b/files/fr/web/api/window/showmodaldialog/index.html deleted file mode 100644 index 3d86815e6a..0000000000 --- a/files/fr/web/api/window/showmodaldialog/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: window.showModalDialog -slug: Web/API/Window/showModalDialog -tags: - - Obsolete -translation_of: Web/API/Window/showModalDialog ---- -

{{ ApiRef() }}

- -

Résumé

- -

Crée et affiche un dialogue modal contenant un document HTML spécifié.

- -
-

Attention : Cette fonction est obsolète.

- -

Le support a été arrêté avec la sortie de Chrome 37. Il y possibilité de la laisser active juqu'en Mai 2015 en configurant les paramètres de politique d'entreprise, plus de détails : ici.

- -

Mozilla a annoncé que le support de cette méthode sera supprimé ({{bug(981796)}}). Ce changement ne sera pas effectif avant Firefox 39, planifié pour les alentours de mi-juin 2015. Pour les entreprises, il est possible d'utiliser le build ESR 38 qui supportera la méthode jusqu'en milieu d'année 2016.

-
- -

Syntaxe

- -
retour = window.showModalDialog(uri[,arguments][,options]);
-
- -

où

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SyntaxeDescription
center: {on | off | yes | no | 1 | 0 }Si cette valeur est on, yes ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est yes.
dialogheight:height Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.
dialogleft:left Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.
dialogwidth:width Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.
dialogtop:top Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.
resizable: {on | off | yes | no | 1 | 0 }Si cette valeur est on, yes ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est no.
scroll: {on | off | yes | no | 1 | 0 }Si cette valeur est on, yes ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est no.
- -

{{ Note("Firefox n\'implémente pas les paramètres dialogHide, edge, status ou unadorned.") }}

- -

Compatibilité

- -

Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Firefox 3.

- -

Exemples

- -

Essayer showModalDialog().

- -

Notes

- -

Spécification

- -

Microsoft MSDN : showModalDialog

diff --git a/files/fr/web/api/window/showmodaldialog/index.md b/files/fr/web/api/window/showmodaldialog/index.md new file mode 100644 index 0000000000..3d86815e6a --- /dev/null +++ b/files/fr/web/api/window/showmodaldialog/index.md @@ -0,0 +1,87 @@ +--- +title: window.showModalDialog +slug: Web/API/Window/showModalDialog +tags: + - Obsolete +translation_of: Web/API/Window/showModalDialog +--- +

{{ ApiRef() }}

+ +

Résumé

+ +

Crée et affiche un dialogue modal contenant un document HTML spécifié.

+ +
+

Attention : Cette fonction est obsolète.

+ +

Le support a été arrêté avec la sortie de Chrome 37. Il y possibilité de la laisser active juqu'en Mai 2015 en configurant les paramètres de politique d'entreprise, plus de détails : ici.

+ +

Mozilla a annoncé que le support de cette méthode sera supprimé ({{bug(981796)}}). Ce changement ne sera pas effectif avant Firefox 39, planifié pour les alentours de mi-juin 2015. Pour les entreprises, il est possible d'utiliser le build ESR 38 qui supportera la méthode jusqu'en milieu d'année 2016.

+
+ +

Syntaxe

+ +
retour = window.showModalDialog(uri[,arguments][,options]);
+
+ +

où

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SyntaxeDescription
center: {on | off | yes | no | 1 | 0 }Si cette valeur est on, yes ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est yes.
dialogheight:height Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.
dialogleft:left Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.
dialogwidth:width Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.
dialogtop:top Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.
resizable: {on | off | yes | no | 1 | 0 }Si cette valeur est on, yes ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est no.
scroll: {on | off | yes | no | 1 | 0 }Si cette valeur est on, yes ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est no.
+ +

{{ Note("Firefox n\'implémente pas les paramètres dialogHide, edge, status ou unadorned.") }}

+ +

Compatibilité

+ +

Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Firefox 3.

+ +

Exemples

+ +

Essayer showModalDialog().

+ +

Notes

+ +

Spécification

+ +

Microsoft MSDN : showModalDialog

diff --git a/files/fr/web/api/window/stop/index.html b/files/fr/web/api/window/stop/index.html deleted file mode 100644 index 491876c7b8..0000000000 --- a/files/fr/web/api/window/stop/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Window.stop() -slug: Web/API/Window/stop -tags: - - API - - DOM - - HTML DOM - - Méthode - - Reference - - Window - - stop -translation_of: Web/API/Window/stop ---- -
{{APIRef}}
- -

window.stop() arrête le chargment des ressources supplémentaires dans le contexte de navigation actuel, ce qui équivaut au bouton d'arrêt dans le navigateur.

- -

En raison de la manière dont les scripts sont exécutés, cette méthode ne peut pas interrompre le chargement de son document parent, mais elle arrêtera ses images, nouvelles fenêtres et autres objets en cours de chargement.

- -

Syntaxe

- -
window.stop()
-
- -

Exemple

- -
window.stop();
-
- -

Spécification

- - - - - - - - - - - - - - - - - - - -
SpécificationsStatutCommentaires
{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.stop")}}

diff --git a/files/fr/web/api/window/stop/index.md b/files/fr/web/api/window/stop/index.md new file mode 100644 index 0000000000..491876c7b8 --- /dev/null +++ b/files/fr/web/api/window/stop/index.md @@ -0,0 +1,54 @@ +--- +title: Window.stop() +slug: Web/API/Window/stop +tags: + - API + - DOM + - HTML DOM + - Méthode + - Reference + - Window + - stop +translation_of: Web/API/Window/stop +--- +
{{APIRef}}
+ +

window.stop() arrête le chargment des ressources supplémentaires dans le contexte de navigation actuel, ce qui équivaut au bouton d'arrêt dans le navigateur.

+ +

En raison de la manière dont les scripts sont exécutés, cette méthode ne peut pas interrompre le chargement de son document parent, mais elle arrêtera ses images, nouvelles fenêtres et autres objets en cours de chargement.

+ +

Syntaxe

+ +
window.stop()
+
+ +

Exemple

+ +
window.stop();
+
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + +
SpécificationsStatutCommentaires
{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.stop")}}

diff --git a/files/fr/web/api/window/storage_event/index.html b/files/fr/web/api/window/storage_event/index.html deleted file mode 100644 index 8bfbc393b3..0000000000 --- a/files/fr/web/api/window/storage_event/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'Window: storage event' -slug: Web/API/Window/storage_event -tags: - - API - - Evènement - - Reference - - Stockage - - Stockage Web - - Window -translation_of: Web/API/Window/storage_event ---- -
{{APIRef}}
- -

L'événement storage de l'interface {{domxref("Window")}} se déclenche lorsqu'une de stockage (localStorage) a été modifiée dans le contexte d'un autre document.

- - - - - - - - - - - - - - - - - - - - - - -
BullesNon
AnnulableNon
Interface{{domxref("StorageEvent")}}
Propriété de gestionnaire d'événements{{domxref("WindowEventHandlers.onstorage", "onstorage")}}
- -

Exemples

- -

Consignez l'élément sampleList sur la console lorsque l'événement storage se déclenche :

- -
window.addEventListener('storage', () => {
-  // Lorsque le stockage local change, vider la liste sur
-  // la console.
-  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
-});
- -

La même action peut être réalisée ) l'aide de la propriété du gestionnaire d'événements onstorage :

- -
window.onstorage = () => {
-  // Lorsque le stockage local change, vider la liste dans
-  // la console.
-  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
-};
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'indices.html#event-storage', 'storage')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.storage_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/storage_event/index.md b/files/fr/web/api/window/storage_event/index.md new file mode 100644 index 0000000000..8bfbc393b3 --- /dev/null +++ b/files/fr/web/api/window/storage_event/index.md @@ -0,0 +1,83 @@ +--- +title: 'Window: storage event' +slug: Web/API/Window/storage_event +tags: + - API + - Evènement + - Reference + - Stockage + - Stockage Web + - Window +translation_of: Web/API/Window/storage_event +--- +
{{APIRef}}
+ +

L'événement storage de l'interface {{domxref("Window")}} se déclenche lorsqu'une de stockage (localStorage) a été modifiée dans le contexte d'un autre document.

+ + + + + + + + + + + + + + + + + + + + + + +
BullesNon
AnnulableNon
Interface{{domxref("StorageEvent")}}
Propriété de gestionnaire d'événements{{domxref("WindowEventHandlers.onstorage", "onstorage")}}
+ +

Exemples

+ +

Consignez l'élément sampleList sur la console lorsque l'événement storage se déclenche :

+ +
window.addEventListener('storage', () => {
+  // Lorsque le stockage local change, vider la liste sur
+  // la console.
+  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
+});
+ +

La même action peut être réalisée ) l'aide de la propriété du gestionnaire d'événements onstorage :

+ +
window.onstorage = () => {
+  // Lorsque le stockage local change, vider la liste dans
+  // la console.
+  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
+};
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'indices.html#event-storage', 'storage')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.storage_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/top/index.html b/files/fr/web/api/window/top/index.html deleted file mode 100644 index 8fa533e6f9..0000000000 --- a/files/fr/web/api/window/top/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Window.top -slug: Web/API/Window/top -tags: - - API - - HTML DOM - - NeedsExample - - Propriété - - Reference - - Window -translation_of: Web/API/Window/top ---- -
{{APIRef}}
- -

Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres

- -

Syntaxe

- -
var topWindow = window.top;
-
- -

Notes

- -

Là où la propriété {{domxref("window.parent")}} renvoie le parent immédiat de la fenêtre courante, window.top renvoie la fenêtre la plus haute dans la hiérarchie des objets de fenêtre.

- -

Cette propriété est particulièrement utile lorsque vous avez affaire à une fenêtre qui se trouve dans une subframe d'un ou de plusieurs parents, et que vous souhaitez accéder au jeu de frameset de niveau supérieur.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}{{Spec2('HTML5 W3C')}}Spécification initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.top")}}

diff --git a/files/fr/web/api/window/top/index.md b/files/fr/web/api/window/top/index.md new file mode 100644 index 0000000000..8fa533e6f9 --- /dev/null +++ b/files/fr/web/api/window/top/index.md @@ -0,0 +1,54 @@ +--- +title: Window.top +slug: Web/API/Window/top +tags: + - API + - HTML DOM + - NeedsExample + - Propriété + - Reference + - Window +translation_of: Web/API/Window/top +--- +
{{APIRef}}
+ +

Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres

+ +

Syntaxe

+ +
var topWindow = window.top;
+
+ +

Notes

+ +

Là où la propriété {{domxref("window.parent")}} renvoie le parent immédiat de la fenêtre courante, window.top renvoie la fenêtre la plus haute dans la hiérarchie des objets de fenêtre.

+ +

Cette propriété est particulièrement utile lorsque vous avez affaire à une fenêtre qui se trouve dans une subframe d'un ou de plusieurs parents, et que vous souhaitez accéder au jeu de frameset de niveau supérieur.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}{{Spec2('HTML5 W3C')}}Spécification initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.top")}}

diff --git a/files/fr/web/api/window/unload_event/index.html b/files/fr/web/api/window/unload_event/index.html deleted file mode 100644 index aa14cc47c8..0000000000 --- a/files/fr/web/api/window/unload_event/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: unload -slug: Web/API/Window/unload_event -tags: - - JavaScript - - events -translation_of: Web/API/Window/unload_event -original_slug: Web/Events/unload ---- -

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 :

- - - -

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

- - - -

Spécifications

- - diff --git a/files/fr/web/api/window/unload_event/index.md b/files/fr/web/api/window/unload_event/index.md new file mode 100644 index 0000000000..aa14cc47c8 --- /dev/null +++ b/files/fr/web/api/window/unload_event/index.md @@ -0,0 +1,156 @@ +--- +title: unload +slug: Web/API/Window/unload_event +tags: + - JavaScript + - events +translation_of: Web/API/Window/unload_event +original_slug: Web/Events/unload +--- +

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 :

+ + + +

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

+ + + +

Spécifications

+ + diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.html b/files/fr/web/api/window/vrdisplayconnect_event/index.html deleted file mode 100644 index 888a500d2f..0000000000 --- a/files/fr/web/api/window/vrdisplayconnect_event/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: 'Window: vrdisplayconnect event' -slug: Web/API/Window/vrdisplayconnect_event -tags: - - Evènement - - Reference - - WebVR - - onvrdisplayconnect - - vrdisplayconnect -translation_of: Web/API/Window/vrdisplayconnect_event ---- -
{{APIRef("Window")}}
- -
-

L'événement vrdisplayconnect de l'API WebVR est déclenché lorsqu'un écran VR compatible est connecté à l'ordinateur.

-
- - - - - - - - - - - - - - - - - - - - -
BullesNon
AnnulableNon
Interface{{domxref("VRDisplayEvent")}}
Propriété de gestionnaire d'événementsonvrdisplayconnect
- -

Exemples

- -

Vous pouvez utiliser l'événement vrdisplayconnect dans une méthode addEventListener :

- -
window.addEventListener('vrdisplayconnect', function() {
-  info.textContent = 'Affichage connecté.';
-  reportDisplays();
-});
- -

Ou utilisez la propriété du gestionnaire d'événements onvrdisplayconnect :

- -
window.onvrdisplayconnect = function() {
-  info.textContent = 'Affichage connecté.';
-  reportDisplays();
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentair
{{SpecName('WebVR 1.1', '#dom-window-onvrdisplayconnect', 'vrdisplayconnect')}}{{Spec2('WebVR 1.1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.vrdisplayconnect_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.md b/files/fr/web/api/window/vrdisplayconnect_event/index.md new file mode 100644 index 0000000000..888a500d2f --- /dev/null +++ b/files/fr/web/api/window/vrdisplayconnect_event/index.md @@ -0,0 +1,81 @@ +--- +title: 'Window: vrdisplayconnect event' +slug: Web/API/Window/vrdisplayconnect_event +tags: + - Evènement + - Reference + - WebVR + - onvrdisplayconnect + - vrdisplayconnect +translation_of: Web/API/Window/vrdisplayconnect_event +--- +
{{APIRef("Window")}}
+ +
+

L'événement vrdisplayconnect de l'API WebVR est déclenché lorsqu'un écran VR compatible est connecté à l'ordinateur.

+
+ + + + + + + + + + + + + + + + + + + + +
BullesNon
AnnulableNon
Interface{{domxref("VRDisplayEvent")}}
Propriété de gestionnaire d'événementsonvrdisplayconnect
+ +

Exemples

+ +

Vous pouvez utiliser l'événement vrdisplayconnect dans une méthode addEventListener :

+ +
window.addEventListener('vrdisplayconnect', function() {
+  info.textContent = 'Affichage connecté.';
+  reportDisplays();
+});
+ +

Ou utilisez la propriété du gestionnaire d'événements onvrdisplayconnect :

+ +
window.onvrdisplayconnect = function() {
+  info.textContent = 'Affichage connecté.';
+  reportDisplays();
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentair
{{SpecName('WebVR 1.1', '#dom-window-onvrdisplayconnect', 'vrdisplayconnect')}}{{Spec2('WebVR 1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.vrdisplayconnect_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.html b/files/fr/web/api/window/vrdisplaydisconnect_event/index.html deleted file mode 100644 index 75a6c9924a..0000000000 --- a/files/fr/web/api/window/vrdisplaydisconnect_event/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: 'Window: vrdisplaydisconnect event' -slug: Web/API/Window/vrdisplaydisconnect_event -tags: - - Evènement - - Reference - - WebVR - - onvrdisplaydisconnect - - vrdisplaydisconnect -translation_of: Web/API/Window/vrdisplaydisconnect_event ---- -
{{APIRef("Window")}}
- -
-

L'événement vrdisplaydisconnect de l'API WebVR est déclenché lorsqu'un écran VR compatible est déconnecté de l'ordinateur.

-
- - - - - - - - - - - - - - - - - - - - -
BullesNon
AnnulableNon
Interface{{domxref("VRDisplayEvent")}}
Propriété de gestionnaire d'événementsonvrdisplaydisconnect
- -

Exemples

- -

Vous pouvez utiliser l'événement vrdisplaydisconnect dans une méthode addEventListener :

- -
window.addEventListener('vrdisplaydisconnect', function() {
-  info.textContent = 'Affichage déconnecté';
-  reportDisplays();
-});
- -

Ou utilisez la propriété du gestionnaire d'événements onvrdisplaydisconnect :

- -
window.onvrdisplaydisconnect = function() {
-  info.textContent = 'Affichage déconnecté';
-  reportDisplays();
-);
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentair
{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaydisconnect', 'vrdisplaydisconnect')}}{{Spec2('WebVR 1.1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.vrdisplaydisconnect_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md new file mode 100644 index 0000000000..75a6c9924a --- /dev/null +++ b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md @@ -0,0 +1,81 @@ +--- +title: 'Window: vrdisplaydisconnect event' +slug: Web/API/Window/vrdisplaydisconnect_event +tags: + - Evènement + - Reference + - WebVR + - onvrdisplaydisconnect + - vrdisplaydisconnect +translation_of: Web/API/Window/vrdisplaydisconnect_event +--- +
{{APIRef("Window")}}
+ +
+

L'événement vrdisplaydisconnect de l'API WebVR est déclenché lorsqu'un écran VR compatible est déconnecté de l'ordinateur.

+
+ + + + + + + + + + + + + + + + + + + + +
BullesNon
AnnulableNon
Interface{{domxref("VRDisplayEvent")}}
Propriété de gestionnaire d'événementsonvrdisplaydisconnect
+ +

Exemples

+ +

Vous pouvez utiliser l'événement vrdisplaydisconnect dans une méthode addEventListener :

+ +
window.addEventListener('vrdisplaydisconnect', function() {
+  info.textContent = 'Affichage déconnecté';
+  reportDisplays();
+});
+ +

Ou utilisez la propriété du gestionnaire d'événements onvrdisplaydisconnect :

+ +
window.onvrdisplaydisconnect = function() {
+  info.textContent = 'Affichage déconnecté';
+  reportDisplays();
+);
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentair
{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaydisconnect', 'vrdisplaydisconnect')}}{{Spec2('WebVR 1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.vrdisplaydisconnect_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/window/vrdisplaypresentchange_event/index.html b/files/fr/web/api/window/vrdisplaypresentchange_event/index.html deleted file mode 100644 index c2abcb5e12..0000000000 --- a/files/fr/web/api/window/vrdisplaypresentchange_event/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: 'Window: vrdisplaypresentchange event' -slug: Web/API/Window/vrdisplaypresentchange_event -tags: - - Evènement - - Reference - - WebVR - - onvrdisplaypresentchange - - vrdisplaypresentchange -translation_of: Web/API/Window/vrdisplaypresentchange_event ---- -
{{APIRef("Window")}}
- -
-

L'événement vrdisplaypresentchange de l'API WebVR est déclenché lorsque l'état de présentation d'un affichage VR change — c'est à dire passe de la présentation à la non présentation, ou vice versa.

-
- - - - - - - - - - - - - - - - - - - - -
BullesNon
AnnulableNon
Interface{{domxref("VRDisplayEvent")}}
Propriété de gestionnaire d'événementsonvrdisplaypresentchange
- -

Exemples

- -

Vous pouvez utiliser l'événement vrdisplaypresentchange dans une méthode addEventListener :

- -
window.addEventListener('vrdisplaypresentchange', function() {
-  if(vrDisplay.isPresenting) {
-    info.textContent = "L'affichage a commencé à présenter.";
-  } else {
-    info.textContent = "L'affichage a cessé de se présenter.";
-  }
-  reportDisplays();
-});
- -

Ou utilisez la propriété de gestionnaire d'événements onvrdisplaypresentchange :

- -
window.onvrdisplaypresentchange = function() {
-  if(vrDisplay.isPresenting) {
-    info.textContent = "L'affichage a commencé à présenter.";
-  } else {
-    info.textContent = "L'affichage a cessé de se présenter.";
-  }
-  reportDisplays();
-};
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaypresentchange', 'vrdisplaypresentchange')}}{{Spec2('WebVR 1.1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Window.vrdisplaypresentchange_event")}}

- -

Voir également

- - diff --git a/files/fr/web/api/window/vrdisplaypresentchange_event/index.md b/files/fr/web/api/window/vrdisplaypresentchange_event/index.md new file mode 100644 index 0000000000..c2abcb5e12 --- /dev/null +++ b/files/fr/web/api/window/vrdisplaypresentchange_event/index.md @@ -0,0 +1,89 @@ +--- +title: 'Window: vrdisplaypresentchange event' +slug: Web/API/Window/vrdisplaypresentchange_event +tags: + - Evènement + - Reference + - WebVR + - onvrdisplaypresentchange + - vrdisplaypresentchange +translation_of: Web/API/Window/vrdisplaypresentchange_event +--- +
{{APIRef("Window")}}
+ +
+

L'événement vrdisplaypresentchange de l'API WebVR est déclenché lorsque l'état de présentation d'un affichage VR change — c'est à dire passe de la présentation à la non présentation, ou vice versa.

+
+ + + + + + + + + + + + + + + + + + + + +
BullesNon
AnnulableNon
Interface{{domxref("VRDisplayEvent")}}
Propriété de gestionnaire d'événementsonvrdisplaypresentchange
+ +

Exemples

+ +

Vous pouvez utiliser l'événement vrdisplaypresentchange dans une méthode addEventListener :

+ +
window.addEventListener('vrdisplaypresentchange', function() {
+  if(vrDisplay.isPresenting) {
+    info.textContent = "L'affichage a commencé à présenter.";
+  } else {
+    info.textContent = "L'affichage a cessé de se présenter.";
+  }
+  reportDisplays();
+});
+ +

Ou utilisez la propriété de gestionnaire d'événements onvrdisplaypresentchange :

+ +
window.onvrdisplaypresentchange = function() {
+  if(vrDisplay.isPresenting) {
+    info.textContent = "L'affichage a commencé à présenter.";
+  } else {
+    info.textContent = "L'affichage a cessé de se présenter.";
+  }
+  reportDisplays();
+};
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaypresentchange', 'vrdisplaypresentchange')}}{{Spec2('WebVR 1.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Window.vrdisplaypresentchange_event")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/windowclient/focus/index.html b/files/fr/web/api/windowclient/focus/index.html deleted file mode 100644 index b78542bb67..0000000000 --- a/files/fr/web/api/windowclient/focus/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: WindowClient.focus() -slug: Web/API/WindowClient/focus -tags: - - API - - Client - - Experimental - - Focus - - Method - - Reference - - Service Workers - - WindowClient -translation_of: Web/API/WindowClient/focus ---- -

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

- -

La méthode focus() de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.

- -

Syntaxe

- -
Client.focus().then(function(WindowClient) {
-  // utilisez le WindowClient une fois qu'il est focus
-});
- -

Paramètres

- -

Nil.

- -

Valeur de retour

- -

Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.

- -

Exemple

- -
self.addEventListener('notificationclick', function(event) {
-  console.log('On notification click: ', event.notification.tag);
-  event.notification.close();
-
-  // Vérifie si le client en cours est ouvert et
-  // le focus le cas échéant
-  event.waitUntil(clients.matchAll({
-    type: "window"
-  }).then(function(clientList) {
-    for (var i = 0; i < clientList.length; i++) {
-      var client = clientList[i];
-      if (client.url == '/' && 'focus' in client)
-        return client.focus();
-    }
-    if (clients.openWindow)
-      return clients.openWindow('/');
-  }));
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Service Workers', '#client-focus-method', 'focus()')}}{{Spec2('Service Workers')}}Définition initiale..
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowClient.focus")}}

diff --git a/files/fr/web/api/windowclient/focus/index.md b/files/fr/web/api/windowclient/focus/index.md new file mode 100644 index 0000000000..b78542bb67 --- /dev/null +++ b/files/fr/web/api/windowclient/focus/index.md @@ -0,0 +1,73 @@ +--- +title: WindowClient.focus() +slug: Web/API/WindowClient/focus +tags: + - API + - Client + - Experimental + - Focus + - Method + - Reference + - Service Workers + - WindowClient +translation_of: Web/API/WindowClient/focus +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

La méthode focus() de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.

+ +

Syntaxe

+ +
Client.focus().then(function(WindowClient) {
+  // utilisez le WindowClient une fois qu'il est focus
+});
+ +

Paramètres

+ +

Nil.

+ +

Valeur de retour

+ +

Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.

+ +

Exemple

+ +
self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // Vérifie si le client en cours est ouvert et
+  // le focus le cas échéant
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i < clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' && 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Service Workers', '#client-focus-method', 'focus()')}}{{Spec2('Service Workers')}}Définition initiale..
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowClient.focus")}}

diff --git a/files/fr/web/api/windowclient/focused/index.html b/files/fr/web/api/windowclient/focused/index.html deleted file mode 100644 index 4d9c450178..0000000000 --- a/files/fr/web/api/windowclient/focused/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: WindowClient.focused -slug: Web/API/WindowClient/focused -translation_of: Web/API/WindowClient/focused ---- -
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
- -

La propriété focused , en lecture seule de l'interface  {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus .

- -

Syntax

- -
myFocused = WindowClient.focused;
- -

Value

- -

A {{domxref("Boolean")}}.

- -

Example

- -
self.addEventListener('notificationclick', function(event) {
-  console.log('On notification click: ', event.notification.tag);
-  event.notification.close();
-
-  // This looks to see if the current is already open and
-  // focuses if it is
-  event.waitUntil(clients.matchAll({
-    type: "window"
-  }).then(function(clientList) {
-    for (var i = 0; i < clientList.length; i++) {
-      var client = clientList[i];
-      if (client.url == '/' && 'focus' in client) {
-        if(!client.focused)
-          return client.focus();
-        }
-      }
-    }
-    if (clients.openWindow)
-      return clients.openWindow('/');
-  }));
-});
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}{{Spec2('Service Workers')}}Initial definition
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowClient.focused")}}

diff --git a/files/fr/web/api/windowclient/focused/index.md b/files/fr/web/api/windowclient/focused/index.md new file mode 100644 index 0000000000..4d9c450178 --- /dev/null +++ b/files/fr/web/api/windowclient/focused/index.md @@ -0,0 +1,61 @@ +--- +title: WindowClient.focused +slug: Web/API/WindowClient/focused +translation_of: Web/API/WindowClient/focused +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

La propriété focused , en lecture seule de l'interface  {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus .

+ +

Syntax

+ +
myFocused = WindowClient.focused;
+ +

Value

+ +

A {{domxref("Boolean")}}.

+ +

Example

+ +
self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // This looks to see if the current is already open and
+  // focuses if it is
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i < clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' && 'focus' in client) {
+        if(!client.focused)
+          return client.focus();
+        }
+      }
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}{{Spec2('Service Workers')}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowClient.focused")}}

diff --git a/files/fr/web/api/windowclient/index.html b/files/fr/web/api/windowclient/index.html deleted file mode 100644 index 1a7d646b7a..0000000000 --- a/files/fr/web/api/windowclient/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: WindowClient -slug: Web/API/WindowClient -tags: - - API - - Client - - Experimental - - Interface - - Reference - - Service Workers - - ServiceWorker - - WindowClient -translation_of: Web/API/WindowClient ---- -

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

- -

L'interface WindowClient de l'API ServiceWorker représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources.

- -

Méthodes

- -

WindowClient hérite certaines méthodes de son parent, {{domxref("Client")}}.

- -
-
{{domxref("WindowClient.focus()")}}
-
Assigne le focus au client en cours.
-
{{domxref("WindowClient.navigate()")}}
-
Charge l'url spécifiée dans la page en cours.
-
- -

Propriétés

- -

WindowClient hérite certaines propriétés de son parent, {{domxref("Client")}}.

- -
-
{{domxref("WindowClient.focused")}} {{readonlyInline}}
-
Un booléen qui indique si oui ou non le client en cours est focus.
-
{{domxref("WindowClient.visibilityState")}} {{readonlyInline}}
-
Indique la visibilité du client en cours. Peut prendre les valeures hidden, visible, prerender, ou unloaded.
-
- -

Exemple

- -
self.addEventListener('notificationclick', function(event) {
-  console.log('On notification click: ', event.notification.tag);
-  event.notification.close();
-
-  // Vérifie si le client en cours est ouvert et
-  // le focus le cas échéant
-  event.waitUntil(clients.matchAll({
-    type: "window"
-  }).then(function(clientList) {
-    for (var i = 0; i < clientList.length; i++) {
-      var client = clientList[i];
-      if (client.url == '/' && 'focus' in client)
-        return client.focus();
-    }
-    if (clients.openWindow)
-      return clients.openWindow('/');
-  }));
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowClient")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/windowclient/index.md b/files/fr/web/api/windowclient/index.md new file mode 100644 index 0000000000..1a7d646b7a --- /dev/null +++ b/files/fr/web/api/windowclient/index.md @@ -0,0 +1,92 @@ +--- +title: WindowClient +slug: Web/API/WindowClient +tags: + - API + - Client + - Experimental + - Interface + - Reference + - Service Workers + - ServiceWorker + - WindowClient +translation_of: Web/API/WindowClient +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

L'interface WindowClient de l'API ServiceWorker représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources.

+ +

Méthodes

+ +

WindowClient hérite certaines méthodes de son parent, {{domxref("Client")}}.

+ +
+
{{domxref("WindowClient.focus()")}}
+
Assigne le focus au client en cours.
+
{{domxref("WindowClient.navigate()")}}
+
Charge l'url spécifiée dans la page en cours.
+
+ +

Propriétés

+ +

WindowClient hérite certaines propriétés de son parent, {{domxref("Client")}}.

+ +
+
{{domxref("WindowClient.focused")}} {{readonlyInline}}
+
Un booléen qui indique si oui ou non le client en cours est focus.
+
{{domxref("WindowClient.visibilityState")}} {{readonlyInline}}
+
Indique la visibilité du client en cours. Peut prendre les valeures hidden, visible, prerender, ou unloaded.
+
+ +

Exemple

+ +
self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // Vérifie si le client en cours est ouvert et
+  // le focus le cas échéant
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i < clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' && 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}{{Spec2('Service Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowClient")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/windowclient/navigate/index.html b/files/fr/web/api/windowclient/navigate/index.html deleted file mode 100644 index 038f93f87c..0000000000 --- a/files/fr/web/api/windowclient/navigate/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: WindowClient.navigate() -slug: Web/API/WindowClient/navigate -tags: - - API - - Client - - Expérimentale - - Method - - Navigate - - Reference - - Service Workers - - WindowClient -translation_of: Web/API/WindowClient/navigate ---- -

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

- -

La méthode navigate() de l'interface  {{domxref("WindowClient")}} charge une URL spécifiée dans une page de client contrôlée, puis retourne une  {{jsxref("Promise")}}  qui devra être analysée par  {{domxref("WindowClient")}} (le demandeur).

- -

Syntaxe

- -
WindowClient.navigate(url).then(function(WindowClient) {
-  // do something with your WindowClient after navigation
-});
- -

Paramètres

- -
-
url
-
L'emplacement pour naviguer vers (url est une string) .
-
- -

Retour

- -

Une {{jsxref("Promise")}}  qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) .

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#client-navigate-method', 'navigate()')}}{{Spec2('Service Workers')}}définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowClient.navigate")}}

diff --git a/files/fr/web/api/windowclient/navigate/index.md b/files/fr/web/api/windowclient/navigate/index.md new file mode 100644 index 0000000000..038f93f87c --- /dev/null +++ b/files/fr/web/api/windowclient/navigate/index.md @@ -0,0 +1,55 @@ +--- +title: WindowClient.navigate() +slug: Web/API/WindowClient/navigate +tags: + - API + - Client + - Expérimentale + - Method + - Navigate + - Reference + - Service Workers + - WindowClient +translation_of: Web/API/WindowClient/navigate +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

La méthode navigate() de l'interface  {{domxref("WindowClient")}} charge une URL spécifiée dans une page de client contrôlée, puis retourne une  {{jsxref("Promise")}}  qui devra être analysée par  {{domxref("WindowClient")}} (le demandeur).

+ +

Syntaxe

+ +
WindowClient.navigate(url).then(function(WindowClient) {
+  // do something with your WindowClient after navigation
+});
+ +

Paramètres

+ +
+
url
+
L'emplacement pour naviguer vers (url est une string) .
+
+ +

Retour

+ +

Une {{jsxref("Promise")}}  qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) .

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#client-navigate-method', 'navigate()')}}{{Spec2('Service Workers')}}définition initiale
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowClient.navigate")}}

diff --git a/files/fr/web/api/windowclient/visibilitystate/index.html b/files/fr/web/api/windowclient/visibilitystate/index.html deleted file mode 100644 index 3f0d42838e..0000000000 --- a/files/fr/web/api/windowclient/visibilitystate/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: WindowClient.visibilityState -slug: Web/API/WindowClient/visibilityState -translation_of: Web/API/WindowClient/visibilityState ---- -

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

- -

La propriété visibilityState,  en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être :  hidden, visible, prerender, or unloaded.

- -

Syntaxe

- -
myVisState = WindowClient.visibilityState;
- -

Value

- -

une  {{domxref("DOMString")}}.

- -

Example

- -
  event.waitUntil(clients.matchAll({
-    type: "window"
-  }).then(function(clientList) {
-    for (var i = 0; i < clientList.length; i++) {
-      var client = clientList[i];
-      if (client.url == '/' && 'focus' in client) {
-        if(visibilityState === 'hidden')
-          return client.focus();
-        }
-      }
-    }
-    if (clients.openWindow)
-      return clients.openWindow('/');
-  }));
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}{{Spec2('Service Workers')}}Initial definition.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowClient.visibilityState")}}

diff --git a/files/fr/web/api/windowclient/visibilitystate/index.md b/files/fr/web/api/windowclient/visibilitystate/index.md new file mode 100644 index 0000000000..3f0d42838e --- /dev/null +++ b/files/fr/web/api/windowclient/visibilitystate/index.md @@ -0,0 +1,55 @@ +--- +title: WindowClient.visibilityState +slug: Web/API/WindowClient/visibilityState +translation_of: Web/API/WindowClient/visibilityState +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

La propriété visibilityState,  en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être :  hidden, visible, prerender, or unloaded.

+ +

Syntaxe

+ +
myVisState = WindowClient.visibilityState;
+ +

Value

+ +

une  {{domxref("DOMString")}}.

+ +

Example

+ +
  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i < clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' && 'focus' in client) {
+        if(visibilityState === 'hidden')
+          return client.focus();
+        }
+      }
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowClient.visibilityState")}}

diff --git a/files/fr/web/api/windoweventhandlers/index.html b/files/fr/web/api/windoweventhandlers/index.html deleted file mode 100644 index b74f03c601..0000000000 --- a/files/fr/web/api/windoweventhandlers/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: WindowEventHandlers -slug: Web/API/WindowEventHandlers -tags: - - API -translation_of: Web/API/WindowEventHandlers ---- -
{{APIRef("HTML DOM")}}
- -
La mixin WindowEventHandlers décrit les gestionnaires d'événements communs à plusieurs interfaces comme {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} et {{domxref("HTMLFrameSetElement")}}. Chacune de ces interfaces peut implémenter des gestionnaires d'événement supplémentaires.
- - -
-

Note : WindowEventHandlers est une mixin et non une interface; il n'est pas possible de créer un objet de type WindowEventHandlers.

-
- -

Propriétés

- -

Les propriétés d'événement, de la forme onXYZ, sont définis sur {{domxref("WindowEventHandlers")}} et implémentées par {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers.

- -
-
{{domxref("WindowEventHandlers.onafterprint")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.
-
{{domxref("WindowEventHandlers.onbeforeprint")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.
-
{{domxref("WindowEventHandlers.onbeforeunload")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.
-
{{domxref("WindowEventHandlers.onhashchange")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.
-
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.
-
{{domxref("WindowEventHandlers.onmessage")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.
-
{{domxref("WindowEventHandlers.onoffline")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.
-
{{domxref("WindowEventHandlers.ononline")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.
-
{{domxref("WindowEventHandlers.onpagehide")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.
-
{{domxref("WindowEventHandlers.onpageshow")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.
-
{{domxref("WindowEventHandlers.onpopstate")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.
-
{{domxref("WindowEventHandlers.onresize")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.
-
{{domxref("WindowEventHandlers.onstorage")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.
-
{{domxref("WindowEventHandlers.onunload")}}
-
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.
-
- -

Méthodes

- -

Cette interface ne définit aucune méthode.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName("HTML WHATWG")}}. Ajoute onlanguage.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName("HTML WHATWG")}}. Création de WindowEventHandlers (les propriétés étaient sur la cible avant).
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowEventHandlers")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/windoweventhandlers/index.md b/files/fr/web/api/windoweventhandlers/index.md new file mode 100644 index 0000000000..b74f03c601 --- /dev/null +++ b/files/fr/web/api/windoweventhandlers/index.md @@ -0,0 +1,93 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API +translation_of: Web/API/WindowEventHandlers +--- +
{{APIRef("HTML DOM")}}
+ +
La mixin WindowEventHandlers décrit les gestionnaires d'événements communs à plusieurs interfaces comme {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} et {{domxref("HTMLFrameSetElement")}}. Chacune de ces interfaces peut implémenter des gestionnaires d'événement supplémentaires.
+ + +
+

Note : WindowEventHandlers est une mixin et non une interface; il n'est pas possible de créer un objet de type WindowEventHandlers.

+
+ +

Propriétés

+ +

Les propriétés d'événement, de la forme onXYZ, sont définis sur {{domxref("WindowEventHandlers")}} et implémentées par {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.
+
{{domxref("WindowEventHandlers.onresize")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.
+
+ +

Méthodes

+ +

Cette interface ne définit aucune méthode.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName("HTML WHATWG")}}. Ajoute onlanguage.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName("HTML WHATWG")}}. Création de WindowEventHandlers (les propriétés étaient sur la cible avant).
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowEventHandlers")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/windoweventhandlers/onafterprint/index.html b/files/fr/web/api/windoweventhandlers/onafterprint/index.html deleted file mode 100644 index c51179479a..0000000000 --- a/files/fr/web/api/windoweventhandlers/onafterprint/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: WindowEventHandlers.onafterprint -slug: Web/API/WindowEventHandlers/onafterprint -tags: - - API - - DOM - - HTML-DOM - - Propriété - - Reference - - Window - - impression - - évènements -translation_of: Web/API/WindowEventHandlers/onafterprint ---- -
{{ApiRef}}
- -

La propriété WindowEventHandlers.onafterprint définit et renvoie {{event("afterprint")}} {{event("Event_handlers", "event handler")}} pourl a fenêtre actuelle.

- -

Syntaxe

- -
window.onafterprint = code de traitement de l'événement
-
- -

Notes

- -

Les événements beforeprint et afterprint permettent aux pages de modifier leur contenu avant le début de l'impression (pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS @media print, mais il peut être nécessaire d'utiliser ces événements dans certains cas.

- -

L'événement afterprint est appelé après l'impression par l'utilisateur, ou s'il interrompt la boîte de dialogue d'impression.

- -

 

- -

 

- -

Safari ne reconnaît pas ces événements.

- -

Spécification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WindowEventHandlers.onafterprint")}}

- -

Voir également

- - \ No newline at end of file diff --git a/files/fr/web/api/windoweventhandlers/onafterprint/index.md b/files/fr/web/api/windoweventhandlers/onafterprint/index.md new file mode 100644 index 0000000000..c51179479a --- /dev/null +++ b/files/fr/web/api/windoweventhandlers/onafterprint/index.md @@ -0,0 +1,65 @@ +--- +title: WindowEventHandlers.onafterprint +slug: Web/API/WindowEventHandlers/onafterprint +tags: + - API + - DOM + - HTML-DOM + - Propriété + - Reference + - Window + - impression + - évènements +translation_of: Web/API/WindowEventHandlers/onafterprint +--- +
{{ApiRef}}
+ +

La propriété WindowEventHandlers.onafterprint définit et renvoie {{event("afterprint")}} {{event("Event_handlers", "event handler")}} pourl a fenêtre actuelle.

+ +

Syntaxe

+ +
window.onafterprint = code de traitement de l'événement
+
+ +

Notes

+ +

Les événements beforeprint et afterprint permettent aux pages de modifier leur contenu avant le début de l'impression (pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS @media print, mais il peut être nécessaire d'utiliser ces événements dans certains cas.

+ +

L'événement afterprint est appelé après l'impression par l'utilisateur, ou s'il interrompt la boîte de dialogue d'impression.

+ +

 

+ +

 

+ +

Safari ne reconnaît pas ces événements.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WindowEventHandlers.onafterprint")}}

+ +

Voir également

+ + \ No newline at end of file diff --git a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html deleted file mode 100644 index 049c317a23..0000000000 --- a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: WindowEventHandlers.onbeforeprint -slug: Web/API/WindowEventHandlers/onbeforeprint -tags: - - API - - DOM - - Propriété - - impression -translation_of: Web/API/WindowEventHandlers/onbeforeprint ---- -
{{ApiRef}}
- -

La propriété onbeforeprint définit et retourne le code du gestionnaire d'événement onbeforeprint onbeforeprint pour la fenêtre actuelle.

- -

Syntaxe

- -
window.onbeforeprint = code de traitement de l'événement
-
- -

Notes

- -

Les événements beforeprint et afterprint permettent aux pages de modifier leur contenu avant le début de l'impression (peut-être pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS @media print, mais il peut être nécessaire d'utiliser ces événements dans certains cas.

- -

L'événement beforeprint est appelé avant l'ouverture de la fenêtre de dialogue d'impression.

- -

Safari ne reconnaît pas ces événements, mais un résultat équivalent à l'événement beforeprint peut être obtenu avec {{domxref("window.matchMedia")}}('print').

- -
var mediaQueryList = window.matchMedia('print');
-mediaQueryList.addListener(function(mql) {
-  if(mql.matches) {
-    console.log('équivalent webkit de onbeforeprint');
-  }
-});
- -

Spécification

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WindowEventHandlers.onbeforeprint")}}

- -

Voir également

- - diff --git a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md new file mode 100644 index 0000000000..049c317a23 --- /dev/null +++ b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md @@ -0,0 +1,66 @@ +--- +title: WindowEventHandlers.onbeforeprint +slug: Web/API/WindowEventHandlers/onbeforeprint +tags: + - API + - DOM + - Propriété + - impression +translation_of: Web/API/WindowEventHandlers/onbeforeprint +--- +
{{ApiRef}}
+ +

La propriété onbeforeprint définit et retourne le code du gestionnaire d'événement onbeforeprint onbeforeprint pour la fenêtre actuelle.

+ +

Syntaxe

+ +
window.onbeforeprint = code de traitement de l'événement
+
+ +

Notes

+ +

Les événements beforeprint et afterprint permettent aux pages de modifier leur contenu avant le début de l'impression (peut-être pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS @media print, mais il peut être nécessaire d'utiliser ces événements dans certains cas.

+ +

L'événement beforeprint est appelé avant l'ouverture de la fenêtre de dialogue d'impression.

+ +

Safari ne reconnaît pas ces événements, mais un résultat équivalent à l'événement beforeprint peut être obtenu avec {{domxref("window.matchMedia")}}('print').

+ +
var mediaQueryList = window.matchMedia('print');
+mediaQueryList.addListener(function(mql) {
+  if(mql.matches) {
+    console.log('équivalent webkit de onbeforeprint');
+  }
+});
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WindowEventHandlers.onbeforeprint")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html deleted file mode 100644 index 638f24c27b..0000000000 --- a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: window.onbeforeunload -slug: Web/API/WindowEventHandlers/onbeforeunload -translation_of: Web/API/WindowEventHandlers/onbeforeunload ---- -

Résumé

- -

Le gestionnaire d'événement WindowEventHandlers.onbeforeunload contient le code exécuté lorsque l'évènement {{event("beforeunload")}} est envoyé. Cet événement se déclenche lorsque la fenêtre est sur le point de recharger ses ressources.

- -

Syntaxe

- -
<element beforeunload="funcRef(event);" />
- -
<script type="text/javascript">
-	window.onbeforeunload = funcRef
-</script>
- - - -

Exemple

- -
window.onbeforeunload = function (e) {
-  var e = e || window.event;
-
-  // For IE and Firefox
-  if (e) {
-    e.returnValue = 'Any string';
-  }
-
-  // For Safari
-  return 'Any string';
-};
-
- -

Propriétés de l'objet event

- -
returnValue
- - - -

Spécification

- -

L'évènement 'onbeforeunload' a été introduit par Microsoft dans IE4 et s'est généralisé dans tous les navigateurs.

- -

MSDN—onbeforeunload Event

diff --git a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.md b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.md new file mode 100644 index 0000000000..638f24c27b --- /dev/null +++ b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.md @@ -0,0 +1,49 @@ +--- +title: window.onbeforeunload +slug: Web/API/WindowEventHandlers/onbeforeunload +translation_of: Web/API/WindowEventHandlers/onbeforeunload +--- +

Résumé

+ +

Le gestionnaire d'événement WindowEventHandlers.onbeforeunload contient le code exécuté lorsque l'évènement {{event("beforeunload")}} est envoyé. Cet événement se déclenche lorsque la fenêtre est sur le point de recharger ses ressources.

+ +

Syntaxe

+ +
<element beforeunload="funcRef(event);" />
+ +
<script type="text/javascript">
+	window.onbeforeunload = funcRef
+</script>
+ + + +

Exemple

+ +
window.onbeforeunload = function (e) {
+  var e = e || window.event;
+
+  // For IE and Firefox
+  if (e) {
+    e.returnValue = 'Any string';
+  }
+
+  // For Safari
+  return 'Any string';
+};
+
+ +

Propriétés de l'objet event

+ +
returnValue
+ + + +

Spécification

+ +

L'évènement 'onbeforeunload' a été introduit par Microsoft dans IE4 et s'est généralisé dans tous les navigateurs.

+ +

MSDN—onbeforeunload Event

diff --git a/files/fr/web/api/windoweventhandlers/onhashchange/index.html b/files/fr/web/api/windoweventhandlers/onhashchange/index.html deleted file mode 100644 index 1a495e5a37..0000000000 --- a/files/fr/web/api/windoweventhandlers/onhashchange/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: WindowEventHandlers.onhashchange -slug: Web/API/WindowEventHandlers/onhashchange -translation_of: Web/API/WindowEventHandlers/onhashchange ---- -
-
{{APIRef("HTML DOM")}}
- -
L'événement hashchange est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}).
- -
 
-
- -

Syntaxe

- -
window.onhashchange = funcRef;
-
- -

ou

- -
<body onhashchange="funcRef();">
-
- -

ou

- -
window.addEventListener("hashchange", funcRef, false);
-
- -

Paramètres

- -
-
funcRef
-
Une référence à une fonction.
-
- -

Exemples

- -
if ("onhashchange" in window) {
-    alert("Le navigateur prend en charge l'événement hashchange!");
-}
-
-function locationHashChanged() {
-    if (location.hash === "#somecoolfeature") {
-        somecoolfeature();
-    }
-}
-
-window.onhashchange = locationHashChanged;
-
- -

L'événement hashchange

- -

Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante:

- - - - - - - - - - - - - - - - - - - -
ParamêtreTypeDescription
newURL {{gecko_minversion_inline("6.0")}}DOMStringLe nouvel URL où le navigateur est.
oldURL {{gecko_minversion_inline("6.0")}}DOMStringL'ancien URL où le navigateur se trouvait.
- -

Une solution autour de event.newURL et event.oldURL

- -
//insérez ce bout de code au début de votre code pour observer les changements de hash dans l'URL
-if(!window.HashChangeEvent)(function(){
-	var lastURL=document.URL;
-	window.addEventListener("hashchange",function(event){
-		Object.defineProperty(event,"oldURL",{enumerable:true,configurable:true,value:lastURL});
-		Object.defineProperty(event,"newURL",{enumerable:true,configurable:true,value:document.URL});
-		lastURL=document.URL;
-	});
-}());
-
- -

 

- -

Spécifications 

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationsStatutCommentaires
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowEventHandlers.onhashchange")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/windoweventhandlers/onhashchange/index.md b/files/fr/web/api/windoweventhandlers/onhashchange/index.md new file mode 100644 index 0000000000..1a495e5a37 --- /dev/null +++ b/files/fr/web/api/windoweventhandlers/onhashchange/index.md @@ -0,0 +1,129 @@ +--- +title: WindowEventHandlers.onhashchange +slug: Web/API/WindowEventHandlers/onhashchange +translation_of: Web/API/WindowEventHandlers/onhashchange +--- +
+
{{APIRef("HTML DOM")}}
+ +
L'événement hashchange est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}).
+ +
 
+
+ +

Syntaxe

+ +
window.onhashchange = funcRef;
+
+ +

ou

+ +
<body onhashchange="funcRef();">
+
+ +

ou

+ +
window.addEventListener("hashchange", funcRef, false);
+
+ +

Paramètres

+ +
+
funcRef
+
Une référence à une fonction.
+
+ +

Exemples

+ +
if ("onhashchange" in window) {
+    alert("Le navigateur prend en charge l'événement hashchange!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#somecoolfeature") {
+        somecoolfeature();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+
+ +

L'événement hashchange

+ +

Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante:

+ + + + + + + + + + + + + + + + + + + +
ParamêtreTypeDescription
newURL {{gecko_minversion_inline("6.0")}}DOMStringLe nouvel URL où le navigateur est.
oldURL {{gecko_minversion_inline("6.0")}}DOMStringL'ancien URL où le navigateur se trouvait.
+ +

Une solution autour de event.newURL et event.oldURL

+ +
//insérez ce bout de code au début de votre code pour observer les changements de hash dans l'URL
+if(!window.HashChangeEvent)(function(){
+	var lastURL=document.URL;
+	window.addEventListener("hashchange",function(event){
+		Object.defineProperty(event,"oldURL",{enumerable:true,configurable:true,value:lastURL});
+		Object.defineProperty(event,"newURL",{enumerable:true,configurable:true,value:document.URL});
+		lastURL=document.URL;
+	});
+}());
+
+ +

 

+ +

Spécifications 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationsStatutCommentaires
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowEventHandlers.onhashchange")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html deleted file mode 100644 index 5fe039c2cb..0000000000 --- a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: WindowEventHandlers.onlanguagechange -slug: Web/API/WindowEventHandlers/onlanguagechange -tags: - - API - - Event Handler - - Experimental - - Propriété - - Reference - - Window -translation_of: Web/API/WindowEventHandlers/onlanguagechange ---- -
{{APIRef("HTML DOM")}} {{SeeCompatTable}}
- -

La propriété onlanguagechange du mixin {{domxref("WindowEventHandlers")}} est le {{event("Event_handlers", "event handler")}} pour le traitement des événements {{event("languagechange")}}.

- -

Ces événements sont reçus par l'objet implémentant cette interface, généralement un {{domxref ("Window")}}, un {{domxref ("HTMLBodyElement")}} ou un {{domxref ("HTMLIFrameElement")}}. Un tel événement est envoyé par le navigateur pour informer que la liste des langues préférées a été mise à jour. La liste est accessible via {{domxref("NavigatorLanguage.languages")}}.

- -

Syntaxe

- -
object.onlanguagechange = function;
-
- -

Valeur

- - - -

Exemple

- -
window.onlanguagechange = function(event) {
-  console.log('événement de changement de langue détecté!');
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('HTML WHATWG', '#handler-window-onlanguagechange', 'WindowEventHandler.onlanguagechange') }}{{ Spec2('HTML WHATWG') }}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowEventHandlers.onlanguagechange")}}

- -

Voir également

- - diff --git a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.md b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.md new file mode 100644 index 0000000000..5fe039c2cb --- /dev/null +++ b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.md @@ -0,0 +1,64 @@ +--- +title: WindowEventHandlers.onlanguagechange +slug: Web/API/WindowEventHandlers/onlanguagechange +tags: + - API + - Event Handler + - Experimental + - Propriété + - Reference + - Window +translation_of: Web/API/WindowEventHandlers/onlanguagechange +--- +
{{APIRef("HTML DOM")}} {{SeeCompatTable}}
+ +

La propriété onlanguagechange du mixin {{domxref("WindowEventHandlers")}} est le {{event("Event_handlers", "event handler")}} pour le traitement des événements {{event("languagechange")}}.

+ +

Ces événements sont reçus par l'objet implémentant cette interface, généralement un {{domxref ("Window")}}, un {{domxref ("HTMLBodyElement")}} ou un {{domxref ("HTMLIFrameElement")}}. Un tel événement est envoyé par le navigateur pour informer que la liste des langues préférées a été mise à jour. La liste est accessible via {{domxref("NavigatorLanguage.languages")}}.

+ +

Syntaxe

+ +
object.onlanguagechange = function;
+
+ +

Valeur

+ + + +

Exemple

+ +
window.onlanguagechange = function(event) {
+  console.log('événement de changement de langue détecté!');
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{ SpecName('HTML WHATWG', '#handler-window-onlanguagechange', 'WindowEventHandler.onlanguagechange') }}{{ Spec2('HTML WHATWG') }}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowEventHandlers.onlanguagechange")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/windoweventhandlers/onpopstate/index.html b/files/fr/web/api/windoweventhandlers/onpopstate/index.html deleted file mode 100644 index ff23d12a70..0000000000 --- a/files/fr/web/api/windoweventhandlers/onpopstate/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: window.onpopstate -slug: Web/API/WindowEventHandlers/onpopstate -translation_of: Web/API/WindowEventHandlers/onpopstate ---- -

{{ ApiRef() }}

- -

{{ gecko_minversion_header("2") }}

- -

Résumé

- -

Un gestionnaire d'évènement pour l'évènement popstate de la fenêtre.

- -

L'évènement popstate est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant history.pushState() ou a été modifiée en appelant history.replaceState(), la propriété state de l'évènement popstate contient une copie de l'objet d'entrée de l'historique.

- -

Sachez qu'appeler history.pushState() ou history.replaceState() ne déclenchera pas l'évènement popstate. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler history.back(), en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document.

- -

Syntaxe

- -
window.onpopstate = funcRef;
-
- - - -

L'évènement popstate

- -

Par exemple, une page à l'adresse http://example.com/example.html exécutant le code suivant générera les alertes suivantes:

- -
window.onpopstate = function(event) {
-  alert("adresse: " + document.location + ", état: " + JSON.stringify(event.state));
-};
-history.pushState({page: 1}, "titre 1", "?page=1");
-history.pushState({page: 2}, "titre 2", "?page=2");
-history.replaceState({page: 3}, "titre 3", "?page=3");
-history.back(); // affiche "adresse: http://example.com/example.html?page=1, état: {"page":1}"
-history.back(); // affiche "adresse: http://example.com/example.html, état: null
-history.go(2);  // affiche "adresse: http://example.com/example.html?page=3, état: {"page":3}
-
- -

Même si l'entrée originelle (de http://example.com/example.html) n'a aucun objet d'état associé, l'évènement popstate est toujours déclenché lorsque l'entrée est activée après un deuxième appel à history.back().

- -

Spécification

- - - -

Lire également

- - \ No newline at end of file diff --git a/files/fr/web/api/windoweventhandlers/onpopstate/index.md b/files/fr/web/api/windoweventhandlers/onpopstate/index.md new file mode 100644 index 0000000000..ff23d12a70 --- /dev/null +++ b/files/fr/web/api/windoweventhandlers/onpopstate/index.md @@ -0,0 +1,56 @@ +--- +title: window.onpopstate +slug: Web/API/WindowEventHandlers/onpopstate +translation_of: Web/API/WindowEventHandlers/onpopstate +--- +

{{ ApiRef() }}

+ +

{{ gecko_minversion_header("2") }}

+ +

Résumé

+ +

Un gestionnaire d'évènement pour l'évènement popstate de la fenêtre.

+ +

L'évènement popstate est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant history.pushState() ou a été modifiée en appelant history.replaceState(), la propriété state de l'évènement popstate contient une copie de l'objet d'entrée de l'historique.

+ +

Sachez qu'appeler history.pushState() ou history.replaceState() ne déclenchera pas l'évènement popstate. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler history.back(), en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document.

+ +

Syntaxe

+ +
window.onpopstate = funcRef;
+
+ + + +

L'évènement popstate

+ +

Par exemple, une page à l'adresse http://example.com/example.html exécutant le code suivant générera les alertes suivantes:

+ +
window.onpopstate = function(event) {
+  alert("adresse: " + document.location + ", état: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "titre 1", "?page=1");
+history.pushState({page: 2}, "titre 2", "?page=2");
+history.replaceState({page: 3}, "titre 3", "?page=3");
+history.back(); // affiche "adresse: http://example.com/example.html?page=1, état: {"page":1}"
+history.back(); // affiche "adresse: http://example.com/example.html, état: null
+history.go(2);  // affiche "adresse: http://example.com/example.html?page=3, état: {"page":3}
+
+ +

Même si l'entrée originelle (de http://example.com/example.html) n'a aucun objet d'état associé, l'évènement popstate est toujours déclenché lorsque l'entrée est activée après un deuxième appel à history.back().

+ +

Spécification

+ + + +

Lire également

+ + \ No newline at end of file diff --git a/files/fr/web/api/windoweventhandlers/onunload/index.html b/files/fr/web/api/windoweventhandlers/onunload/index.html deleted file mode 100644 index 613631c10d..0000000000 --- a/files/fr/web/api/windoweventhandlers/onunload/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: WindowEventHandlers.onunload -slug: Web/API/WindowEventHandlers/onunload -tags: - - API - - Propriétés - - Reference - - WindowEventHandlers -translation_of: Web/API/WindowEventHandlers/onunload ---- -
{{APIRef("HTML DOM")}}
- -

L'événement unload est déclenché lorsque le contenu et les ressources sont déchargés à la fermeture de la fenêtre. Le processus de suppression des ressources se fait après que l'événement unload a eu lieu.

- -

Les navigateurs équipés d'un bloqueur de pop-up vont ignorer tout appel de window.open() lancé depuis onunload.

- -

Syntaxe

- -
window.addEventListener("unload", function(event) { ... });
-window.onunload = function(event) { ... };
-
- -

Généralement, mieux vaut utiliser {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} et l'événement {{event("unload")}} plutôt que onunload.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#handler-window-onunload', 'onunload')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowEventHandlers.onunload")}}

diff --git a/files/fr/web/api/windoweventhandlers/onunload/index.md b/files/fr/web/api/windoweventhandlers/onunload/index.md new file mode 100644 index 0000000000..613631c10d --- /dev/null +++ b/files/fr/web/api/windoweventhandlers/onunload/index.md @@ -0,0 +1,56 @@ +--- +title: WindowEventHandlers.onunload +slug: Web/API/WindowEventHandlers/onunload +tags: + - API + - Propriétés + - Reference + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onunload +--- +
{{APIRef("HTML DOM")}}
+ +

L'événement unload est déclenché lorsque le contenu et les ressources sont déchargés à la fermeture de la fenêtre. Le processus de suppression des ressources se fait après que l'événement unload a eu lieu.

+ +

Les navigateurs équipés d'un bloqueur de pop-up vont ignorer tout appel de window.open() lancé depuis onunload.

+ +

Syntaxe

+ +
window.addEventListener("unload", function(event) { ... });
+window.onunload = function(event) { ... };
+
+ +

Généralement, mieux vaut utiliser {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} et l'événement {{event("unload")}} plutôt que onunload.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#handler-window-onunload', 'onunload')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowEventHandlers.onunload")}}

diff --git a/files/fr/web/api/windoworworkerglobalscope/index.html b/files/fr/web/api/windoworworkerglobalscope/index.html deleted file mode 100644 index 3e31d88c6c..0000000000 --- a/files/fr/web/api/windoworworkerglobalscope/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope -slug: Web/API/WindowOrWorkerGlobalScope -tags: - - API - - DOM - - DOM API - - Service Worker - - TopicStub - - Window - - WindowOrWorkerGlobalScope - - Worker - - WorkerGlobalScope -translation_of: Web/API/WindowOrWorkerGlobalScope ---- -
{{ApiRef()}}
- -

Le mixin WindowOrWorkerGlobalScope décrit plusieurs fonctionnalités communes aux interfaces {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Chacune de ces interfaces peut, bien entendu, ajouter d'autres fonctionnalités en plus de celles listées ci-dessous.

- -
-

Note : WindowOrWorkerGlobalScope est un mixin et non une interface; vous ne pouvez pas réellement créer un objet de type WindowOrWorkerGlobalScope.

-
- -

Propriétés

- -

Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.

- -
-
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
-
Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet active des fonctionnalités telles que le stockage des actifs pour une utilisation hors ligne et la génération de réponses personnalisées aux demandes.
-
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
-
Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone aux capacités des bases de données indexées; renvoie un objet {{domxref ("IDBFactory")}}.
-
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
-
Renvoie un booléen indiquant si le contexte actuel est sécurisé (true) ou non (false).
-
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
-
Renvoie l'origine de la portée globale, sérialisée sous forme de chaîne.
-
- -

Méthodes

- -

Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.

- -
-
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
-
Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.
-
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
-
Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.
-
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
-
Annule le jeu d'exécutions répétées ) l'aide de {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
-
Annule l'exécution différé définie à l'aide de {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
-
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
-
Accepte une variété de sources d'images différentes et renvoie un {{domxref ("Promise")}} qui se résout en {{domxref ("ImageBitmap")}}. Facultativement, la source est rognée sur le rectangle de pixels originaire de (sx, sy) avec une largeur sw et une hauteur sh.
-
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
-
Démarre le processus de récupération d'une ressource sur le réseau.
-
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
-
Planifie une fonction à exécuter chaque fois qu'un nombre donné de millisecondes s'écoule.
-
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
-
Planifie une fonction à exécuter dans un laps de temps donné.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', 'WindowOrWorkerGlobalScope mixin')}}{{Spec2('HTML WHATWG')}}C'est là que le mixin principal est défini.
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Définition de la méthode fetch().
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Définition de la propriété caches.
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Définition de la propriété indexedDB.
{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}{{Spec2('Secure Contexts')}}Définition de la propriété isSecureContext.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WindowOrWorkerGlobalScope")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/windoworworkerglobalscope/index.md b/files/fr/web/api/windoworworkerglobalscope/index.md new file mode 100644 index 0000000000..3e31d88c6c --- /dev/null +++ b/files/fr/web/api/windoworworkerglobalscope/index.md @@ -0,0 +1,110 @@ +--- +title: WindowOrWorkerGlobalScope +slug: Web/API/WindowOrWorkerGlobalScope +tags: + - API + - DOM + - DOM API + - Service Worker + - TopicStub + - Window + - WindowOrWorkerGlobalScope + - Worker + - WorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{ApiRef()}}
+ +

Le mixin WindowOrWorkerGlobalScope décrit plusieurs fonctionnalités communes aux interfaces {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Chacune de ces interfaces peut, bien entendu, ajouter d'autres fonctionnalités en plus de celles listées ci-dessous.

+ +
+

Note : WindowOrWorkerGlobalScope est un mixin et non une interface; vous ne pouvez pas réellement créer un objet de type WindowOrWorkerGlobalScope.

+
+ +

Propriétés

+ +

Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.

+ +
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet active des fonctionnalités telles que le stockage des actifs pour une utilisation hors ligne et la génération de réponses personnalisées aux demandes.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone aux capacités des bases de données indexées; renvoie un objet {{domxref ("IDBFactory")}}.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Renvoie un booléen indiquant si le contexte actuel est sécurisé (true) ou non (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Renvoie l'origine de la portée globale, sérialisée sous forme de chaîne.
+
+ +

Méthodes

+ +

Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.

+ +
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Annule le jeu d'exécutions répétées ) l'aide de {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Annule l'exécution différé définie à l'aide de {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Accepte une variété de sources d'images différentes et renvoie un {{domxref ("Promise")}} qui se résout en {{domxref ("ImageBitmap")}}. Facultativement, la source est rognée sur le rectangle de pixels originaire de (sx, sy) avec une largeur sw et une hauteur sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Démarre le processus de récupération d'une ressource sur le réseau.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Planifie une fonction à exécuter chaque fois qu'un nombre donné de millisecondes s'écoule.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Planifie une fonction à exécuter dans un laps de temps donné.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', 'WindowOrWorkerGlobalScope mixin')}}{{Spec2('HTML WHATWG')}}C'est là que le mixin principal est défini.
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Définition de la méthode fetch().
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Définition de la propriété caches.
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Définition de la propriété indexedDB.
{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}{{Spec2('Secure Contexts')}}Définition de la propriété isSecureContext.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WindowOrWorkerGlobalScope")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/worker/index.html b/files/fr/web/api/worker/index.html deleted file mode 100644 index a77f47cf51..0000000000 --- a/files/fr/web/api/worker/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Worker -slug: Web/API/Worker -tags: - - API - - DOM - - JavaScript - - Reference - - Web Workers - - Worker - - Workers -translation_of: Web/API/Worker ---- -

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

- -

L'interface Worker de l'API Web Workers représente une tâche de fond qui peut facilement être créée et peut envoyer des messages en retour à son créateur. Créer un Worker est aussi simple que d'appeler le constructeur Worker(), en spécifiant un script qui définira le comportement du thread du worker.

- -

Notez qu'un worker peut lui aussi lancer d'autre Worker tant que ces autres workers sont hébergés par une page qui a la même origine que la page parente. (Note: Les workers imbriqués ne sont pas encore implémentés dans WebKit).

- -

De plus les workers peuvent utiliser XMLHttpRequest pour les communiquer avec le réseau, à l'exception des attributs responseXML et channel qui vont toujours retourner null.

- -

Toutes les interfaces et toutes les fonctions ne seront pas disponibles pour le script associé au worker.

- -
-

Note : Dans Firefox, si vous souhaitez utiliser les workers dans une extension et que vous souhaitez avoir accès au js-ctypes, vous devez utiliser le {{ domxref("ChromeWorker") }} à la place.

-
- -

Constructeurs

- -
-
{{domxref("Worker.Worker", "Worker()")}}
-
Créer un web worker dédié qui execute le script qui est au bout de l'URL spécifié. Les workers peuvent aussi être créés en utilisant les Blobs.
-
- -

Propriétés

- -

Il hérite de propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.

- -

Gestionnaires d'événements

- -
-
{{domxref("AbstractWorker.onerror")}}
-
Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("ErrorEvent")}} de type error arrive dans le worker. Il est hérité de {{domxref("AbstractWorker")}}.
-
{{domxref("Worker.onmessage")}}
-
Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("MessageEvent")}} de type message arrive dans le worker — i.e. quand un message est envoyé au document parent depuis le worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Le message est stocké dans la propriété {{domxref("MessageEvent.data", "data")}} de l'événement.
-
{{domxref("Worker.onmessageerror")}}
-
Un {{event("Event_handlers", "event handler")}} qui indique le code à appeler quand un message {{event("messageerror")}} arrive.
-
- -
-
- -

Méthodes

- -

Il hérite de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.

- -
-
{{domxref("Worker.postMessage()")}}
-
Envoie un message, qui est n'importe quel objets JavaScript vers la clôture du worker.
-
{{domxref("Worker.terminate()")}}
-
Termine immédiatement le worker. Ceci n'offre aucune chance au worker de finir son opération en cours, il est simplement arrêté une fois pour toute. Les instances de ServiceWorker ne supportent pas cette méthode.
-
- -

Évènements

- -
-
message
-
Lorsque le worker parent reçoit un message venant du worker. On peut aussi y accéder via la propriété {{domxref("Worker.onmessage")}}.
-
messageerror
-
Lorsque le worker reçois un message qu'il ne peut désérialiser. Aussi disponible à travers la propriété {{domxref("Worker.onmessageerror")}}.
-
- -
-
rejectionhandled
-
Levé à chaque fois qu'une {{jsxref("Promise")}} est rejeté, avec ou sans gestionnaire pour intercepter l'exception. Aussi disponible à travers le gestionnaire onrejectionhandled.
-
unhandledrejection
-
Levé quand une {{jsxref("Promise")}} est rejetée sans gestionnaire pour récupérer l'exception. Aussi disponible à travers la propriété onunhandledrejection.
-
- -

Exemple

- -

L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}} et l'utilisation de l'objet:

- -
var monWorker = new Worker("worker.js");
-var premier = document.querySelector('#numero1');
-
-premier.onchange = function() {
-  monWorker.postMessage([premiere.valeur, deuxieme.valeur]);
-  console.log('Message envoyé au worker');
-}
- -

Pour un exemple complet, voir Exemple basique de worker dédié (exécuter le worker dédié).

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutsCommentaire
{{SpecName('HTML WHATWG', "#worker", "Worker")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité avec les navigateurs

- -
-

Voici le support des différents type de worker. Voir les pages de chaque worker pour avoir les particularités.

- - - -

{{Compat("api.Worker")}}

- -

Comportement des erreur Cross-origin sur les worker

- -

Dans les premières versions des spécifications, charger un scripte worker en cross-origin lève une exception SecurityError. Désormais, à la place un évènement {{event("error")}} lancé.

-
- -

Voir aussi

- - diff --git a/files/fr/web/api/worker/index.md b/files/fr/web/api/worker/index.md new file mode 100644 index 0000000000..a77f47cf51 --- /dev/null +++ b/files/fr/web/api/worker/index.md @@ -0,0 +1,132 @@ +--- +title: Worker +slug: Web/API/Worker +tags: + - API + - DOM + - JavaScript + - Reference + - Web Workers + - Worker + - Workers +translation_of: Web/API/Worker +--- +

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

+ +

L'interface Worker de l'API Web Workers représente une tâche de fond qui peut facilement être créée et peut envoyer des messages en retour à son créateur. Créer un Worker est aussi simple que d'appeler le constructeur Worker(), en spécifiant un script qui définira le comportement du thread du worker.

+ +

Notez qu'un worker peut lui aussi lancer d'autre Worker tant que ces autres workers sont hébergés par une page qui a la même origine que la page parente. (Note: Les workers imbriqués ne sont pas encore implémentés dans WebKit).

+ +

De plus les workers peuvent utiliser XMLHttpRequest pour les communiquer avec le réseau, à l'exception des attributs responseXML et channel qui vont toujours retourner null.

+ +

Toutes les interfaces et toutes les fonctions ne seront pas disponibles pour le script associé au worker.

+ +
+

Note : Dans Firefox, si vous souhaitez utiliser les workers dans une extension et que vous souhaitez avoir accès au js-ctypes, vous devez utiliser le {{ domxref("ChromeWorker") }} à la place.

+
+ +

Constructeurs

+ +
+
{{domxref("Worker.Worker", "Worker()")}}
+
Créer un web worker dédié qui execute le script qui est au bout de l'URL spécifié. Les workers peuvent aussi être créés en utilisant les Blobs.
+
+ +

Propriétés

+ +

Il hérite de propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.

+ +

Gestionnaires d'événements

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("ErrorEvent")}} de type error arrive dans le worker. Il est hérité de {{domxref("AbstractWorker")}}.
+
{{domxref("Worker.onmessage")}}
+
Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("MessageEvent")}} de type message arrive dans le worker — i.e. quand un message est envoyé au document parent depuis le worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Le message est stocké dans la propriété {{domxref("MessageEvent.data", "data")}} de l'événement.
+
{{domxref("Worker.onmessageerror")}}
+
Un {{event("Event_handlers", "event handler")}} qui indique le code à appeler quand un message {{event("messageerror")}} arrive.
+
+ +
+
+ +

Méthodes

+ +

Il hérite de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("Worker.postMessage()")}}
+
Envoie un message, qui est n'importe quel objets JavaScript vers la clôture du worker.
+
{{domxref("Worker.terminate()")}}
+
Termine immédiatement le worker. Ceci n'offre aucune chance au worker de finir son opération en cours, il est simplement arrêté une fois pour toute. Les instances de ServiceWorker ne supportent pas cette méthode.
+
+ +

Évènements

+ +
+
message
+
Lorsque le worker parent reçoit un message venant du worker. On peut aussi y accéder via la propriété {{domxref("Worker.onmessage")}}.
+
messageerror
+
Lorsque le worker reçois un message qu'il ne peut désérialiser. Aussi disponible à travers la propriété {{domxref("Worker.onmessageerror")}}.
+
+ +
+
rejectionhandled
+
Levé à chaque fois qu'une {{jsxref("Promise")}} est rejeté, avec ou sans gestionnaire pour intercepter l'exception. Aussi disponible à travers le gestionnaire onrejectionhandled.
+
unhandledrejection
+
Levé quand une {{jsxref("Promise")}} est rejetée sans gestionnaire pour récupérer l'exception. Aussi disponible à travers la propriété onunhandledrejection.
+
+ +

Exemple

+ +

L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}} et l'utilisation de l'objet:

+ +
var monWorker = new Worker("worker.js");
+var premier = document.querySelector('#numero1');
+
+premier.onchange = function() {
+  monWorker.postMessage([premiere.valeur, deuxieme.valeur]);
+  console.log('Message envoyé au worker');
+}
+ +

Pour un exemple complet, voir Exemple basique de worker dédié (exécuter le worker dédié).

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutsCommentaire
{{SpecName('HTML WHATWG', "#worker", "Worker")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité avec les navigateurs

+ +
+

Voici le support des différents type de worker. Voir les pages de chaque worker pour avoir les particularités.

+ + + +

{{Compat("api.Worker")}}

+ +

Comportement des erreur Cross-origin sur les worker

+ +

Dans les premières versions des spécifications, charger un scripte worker en cross-origin lève une exception SecurityError. Désormais, à la place un évènement {{event("error")}} lancé.

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/worker/onmessage/index.html b/files/fr/web/api/worker/onmessage/index.html deleted file mode 100644 index 802fc4771e..0000000000 --- a/files/fr/web/api/worker/onmessage/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Worker.onmessage -slug: Web/API/Worker/onmessage -tags: - - API - - Property - - Reference -translation_of: Web/API/Worker/onmessage ---- -

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

- -

La propriété onmessage de l'interface {{domxref("Worker")}} représente un {{event("Event_handlers", "event handler")}}, à savoir une fonction qui est appelée lorsque l'événement {{event("message")}} survient. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le parent du worker reçoit un message (c’est-à-dire à partir de la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}).

- -
-

Note : Le contenu du message est fourni par la propriété data de l'événement {{event("message")}}.

-
- -

Syntaxe

- -
myWorker.onmessage = function(e) { ... }
- -

Exemple

- -

L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Les messages sont passés au worker lorsque la valeur de l'élément de formulaire first change. Un gestionnaire onmessage est également présent pour s'occuper des messages retournés par le worker.

- -
var myWorker = new Worker("worker.js");
-
-first.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message envoyé au worker');
-}
-
-myWorker.onmessage = function(e) {
-  result.textContent = e.data;
-  console.log('Message reçu du worker');
-}
-
- -

Dans le script worker.js, un gestionnaire onmessage se charge des messages en provenance du script principal :

- -
onmessage = function(e) {
-  console.log('Message reçu du script principal');
-  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
-  console.log('Renvoi d\'un message au script principal');
-  postMessage(workerResult);
-}
- -

Remarquez comment dans le script principal, onmessage doit être appelée par myWorker, tandis que dans le script du worker vous avez juste besoin d'appeler onmessage parce que le worker est en réalité le contexte global ({{domxref("DedicatedWorkerGlobalScope")}}).

- -

Pour un exemple complet, consulter notre Exemple basique de worker dédié (lancez le worker dédié).

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#handler-worker-onmessage", "Worker.onmessage")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.Worker.onmessage")}}

-
- -

Voir aussi

- -

L'interface {{domxref("Worker")}} à laquelle elle appartient.

diff --git a/files/fr/web/api/worker/onmessage/index.md b/files/fr/web/api/worker/onmessage/index.md new file mode 100644 index 0000000000..802fc4771e --- /dev/null +++ b/files/fr/web/api/worker/onmessage/index.md @@ -0,0 +1,79 @@ +--- +title: Worker.onmessage +slug: Web/API/Worker/onmessage +tags: + - API + - Property + - Reference +translation_of: Web/API/Worker/onmessage +--- +

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

+ +

La propriété onmessage de l'interface {{domxref("Worker")}} représente un {{event("Event_handlers", "event handler")}}, à savoir une fonction qui est appelée lorsque l'événement {{event("message")}} survient. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le parent du worker reçoit un message (c’est-à-dire à partir de la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}).

+ +
+

Note : Le contenu du message est fourni par la propriété data de l'événement {{event("message")}}.

+
+ +

Syntaxe

+ +
myWorker.onmessage = function(e) { ... }
+ +

Exemple

+ +

L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Les messages sont passés au worker lorsque la valeur de l'élément de formulaire first change. Un gestionnaire onmessage est également présent pour s'occuper des messages retournés par le worker.

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message envoyé au worker');
+}
+
+myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Message reçu du worker');
+}
+
+ +

Dans le script worker.js, un gestionnaire onmessage se charge des messages en provenance du script principal :

+ +
onmessage = function(e) {
+  console.log('Message reçu du script principal');
+  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+  console.log('Renvoi d\'un message au script principal');
+  postMessage(workerResult);
+}
+ +

Remarquez comment dans le script principal, onmessage doit être appelée par myWorker, tandis que dans le script du worker vous avez juste besoin d'appeler onmessage parce que le worker est en réalité le contexte global ({{domxref("DedicatedWorkerGlobalScope")}}).

+ +

Pour un exemple complet, consulter notre Exemple basique de worker dédié (lancez le worker dédié).

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#handler-worker-onmessage", "Worker.onmessage")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Worker.onmessage")}}

+
+ +

Voir aussi

+ +

L'interface {{domxref("Worker")}} à laquelle elle appartient.

diff --git a/files/fr/web/api/worker/postmessage/index.html b/files/fr/web/api/worker/postmessage/index.html deleted file mode 100644 index 76ea9d7e7e..0000000000 --- a/files/fr/web/api/worker/postmessage/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Worker.postMessage() -slug: Web/API/Worker/postMessage -translation_of: Web/API/Worker/postMessage ---- -

{{ apiref("Worker") }}

- -

La méthode Worker.postMessage() envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques.

- -

Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.

- -

Syntaxe

- -
worker.postMessage(aMessage, [transferList]);
- -

Paramètres

- -
-
aMessage
-
L'objet à envoyer au worker; il va être dans le champ de donnée data dans l'évènement délivré au gestonnaire d'évènement {{domxref("Worker.onmessage")}}. Cette donnée peut être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques.
-
transferList {{optional_inline}}
-

Un tableau optionnel d'objets {{domxref("Transferable")}} desquels on doit transférer la propriété. Si la propriété d'un objet est transférée, il devient inutilisable (neutralisé) pour le contexte émétteur et devient disponible uniquement pour le worker auquel cela a été envoyé.

-

Seulement des objets de types {{domxref("MessagePort")}}, {{domxref("ArrayBuffer")}} ou {{domxref("ImageBitmap")}} peuvent être transférés. null n'est pas une valeur accéptée pour transfer.

-
- -

Retour

- -

Vide.

- -

Exemple

- -

L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Quand les deux champs de formulaire (fisrt et second) ont été changés, les évènements {{event("change")}} invoquent postMessage() pour envoyer la valeur des deux entrées au worker courant.

- -
var myWorker = new Worker('worker.js');
-
-first.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
-
-second.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
- -

Pour l'exemple en entier, voir Basic dedicated worder example (démonstration).

- -
-

Note : postMessage() peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.

-
- -

Exemple de transfert

- -

Cette exemple montre une extension pour Firefox qui transfert un ArrarBuffer depuis le thread principal vers le ChromeWorker, et le ChromeWorker répond au le thread principal.

- -

Main thread code:

- -
var myWorker = new ChromeWorker(self.path + 'myWorker.js');
-
-function handleMessageFromWorker(msg) {
-    console.log('incoming message from worker, msg:', msg);
-    switch (msg.data.aTopic) {
-        case 'do_sendMainArrBuff':
-            sendMainArrBuff(msg.data.aBuf)
-            break;
-        default:
-            throw 'no aTopic on incoming message to ChromeWorker';
-    }
-}
-
-myWorker.addEventListener('message', handleMessageFromWorker);
-
-// Ok lets create the buffer and send it
-var arrBuf = new ArrayBuffer(8);
-console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength);
-
-myWorker.postMessage(
-    {
-        aTopic: 'do_sendWorkerArrBuff',
-        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below
-    },
-    [
-        arrBuf // The array buffer we created 9 lines above
-    ]
-);
-
-console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
- -

Worker code

- -
self.onmessage = function (msg) {
-    switch (msg.data.aTopic) {
-        case 'do_sendWorkerArrBuff':
-                sendWorkerArrBuff(msg.data.aBuf)
-            break;
-        default:
-            throw 'no aTopic on incoming message to ChromeWorker';
-    }
-}
-
-function sendWorkerArrBuff(aBuf) {
-    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
-
-    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
-
-    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
-}
- -

Output logged

- -
arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
-arrBuf.byteLength post transfer: 0                             bootstrap.js:42
-
-from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
-
-incoming message from worker, msg: message { ... }             bootstrap.js:20
-got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
-
-from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2
- -

byteLength passe à 0 quand il est transferré. Pour voir l'exemple de cette extension de démonstration de Firefox, voir GitHub :: ChromeWorker - demo-transfer-arraybuffer

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.Worker.postMessage")}}

-[1] Internet Explorer ne supporte pas les objets {{domxref("Transferable")}}.
- -

Voir aussi

- - diff --git a/files/fr/web/api/worker/postmessage/index.md b/files/fr/web/api/worker/postmessage/index.md new file mode 100644 index 0000000000..76ea9d7e7e --- /dev/null +++ b/files/fr/web/api/worker/postmessage/index.md @@ -0,0 +1,152 @@ +--- +title: Worker.postMessage() +slug: Web/API/Worker/postMessage +translation_of: Web/API/Worker/postMessage +--- +

{{ apiref("Worker") }}

+ +

La méthode Worker.postMessage() envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques.

+ +

Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.

+ +

Syntaxe

+ +
worker.postMessage(aMessage, [transferList]);
+ +

Paramètres

+ +
+
aMessage
+
L'objet à envoyer au worker; il va être dans le champ de donnée data dans l'évènement délivré au gestonnaire d'évènement {{domxref("Worker.onmessage")}}. Cette donnée peut être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques.
+
transferList {{optional_inline}}
+

Un tableau optionnel d'objets {{domxref("Transferable")}} desquels on doit transférer la propriété. Si la propriété d'un objet est transférée, il devient inutilisable (neutralisé) pour le contexte émétteur et devient disponible uniquement pour le worker auquel cela a été envoyé.

+

Seulement des objets de types {{domxref("MessagePort")}}, {{domxref("ArrayBuffer")}} ou {{domxref("ImageBitmap")}} peuvent être transférés. null n'est pas une valeur accéptée pour transfer.

+
+ +

Retour

+ +

Vide.

+ +

Exemple

+ +

L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Quand les deux champs de formulaire (fisrt et second) ont été changés, les évènements {{event("change")}} invoquent postMessage() pour envoyer la valeur des deux entrées au worker courant.

+ +
var myWorker = new Worker('worker.js');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+ +

Pour l'exemple en entier, voir Basic dedicated worder example (démonstration).

+ +
+

Note : postMessage() peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.

+
+ +

Exemple de transfert

+ +

Cette exemple montre une extension pour Firefox qui transfert un ArrarBuffer depuis le thread principal vers le ChromeWorker, et le ChromeWorker répond au le thread principal.

+ +

Main thread code:

+ +
var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+
+function handleMessageFromWorker(msg) {
+    console.log('incoming message from worker, msg:', msg);
+    switch (msg.data.aTopic) {
+        case 'do_sendMainArrBuff':
+            sendMainArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+myWorker.addEventListener('message', handleMessageFromWorker);
+
+// Ok lets create the buffer and send it
+var arrBuf = new ArrayBuffer(8);
+console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength);
+
+myWorker.postMessage(
+    {
+        aTopic: 'do_sendWorkerArrBuff',
+        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below
+    },
+    [
+        arrBuf // The array buffer we created 9 lines above
+    ]
+);
+
+console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
+ +

Worker code

+ +
self.onmessage = function (msg) {
+    switch (msg.data.aTopic) {
+        case 'do_sendWorkerArrBuff':
+                sendWorkerArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+function sendWorkerArrBuff(aBuf) {
+    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
+
+    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+
+    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
+}
+ +

Output logged

+ +
arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
+arrBuf.byteLength post transfer: 0                             bootstrap.js:42
+
+from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
+
+incoming message from worker, msg: message { ... }             bootstrap.js:20
+got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
+
+from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2
+ +

byteLength passe à 0 quand il est transferré. Pour voir l'exemple de cette extension de démonstration de Firefox, voir GitHub :: ChromeWorker - demo-transfer-arraybuffer

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Worker.postMessage")}}

+[1] Internet Explorer ne supporte pas les objets {{domxref("Transferable")}}.
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/worker/terminate/index.html b/files/fr/web/api/worker/terminate/index.html deleted file mode 100644 index 6565192498..0000000000 --- a/files/fr/web/api/worker/terminate/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Worker.terminate() -slug: Web/API/Worker/terminate -translation_of: Web/API/Worker/terminate ---- -

{{ apiref("Worker") }}

- -

La méthode terminate() de l'interface {{domxref("Worker")}} termine immédiatement le {{domxref("Worker")}}. Cette interruption ne permet pas au worker de finaliser ses opérations, il est juste arrêté sur le champ.

- -

Syntaxe

- -
myWorker.terminate();
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Néant.

- -

Exemple

- -

L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}, qui est alors immédiatement interrompu.

- -
var myWorker = new Worker("worker.js");
-
-myWorker.terminate();
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.terminate()")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("api.Worker.terminate")}}

-
- -

Voir aussi

- -

L'interface {{domxref("Worker")}} à laquelle elle appartient.

diff --git a/files/fr/web/api/worker/terminate/index.md b/files/fr/web/api/worker/terminate/index.md new file mode 100644 index 0000000000..6565192498 --- /dev/null +++ b/files/fr/web/api/worker/terminate/index.md @@ -0,0 +1,58 @@ +--- +title: Worker.terminate() +slug: Web/API/Worker/terminate +translation_of: Web/API/Worker/terminate +--- +

{{ apiref("Worker") }}

+ +

La méthode terminate() de l'interface {{domxref("Worker")}} termine immédiatement le {{domxref("Worker")}}. Cette interruption ne permet pas au worker de finaliser ses opérations, il est juste arrêté sur le champ.

+ +

Syntaxe

+ +
myWorker.terminate();
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Néant.

+ +

Exemple

+ +

L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}, qui est alors immédiatement interrompu.

+ +
var myWorker = new Worker("worker.js");
+
+myWorker.terminate();
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.terminate()")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("api.Worker.terminate")}}

+
+ +

Voir aussi

+ +

L'interface {{domxref("Worker")}} à laquelle elle appartient.

diff --git a/files/fr/web/api/worker/worker/index.html b/files/fr/web/api/worker/worker/index.html deleted file mode 100644 index 1448f5eb35..0000000000 --- a/files/fr/web/api/worker/worker/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Worker() -slug: Web/API/Worker/Worker -tags: - - API - - Reference -translation_of: Web/API/Worker/Worker ---- -

{{APIRef("Worker")}}

- -

Le constructeur Worker() crée un objet {{domxref("Worker")}} qui exécute le script à l'URL spécifiée. Ce script doit obéir à la same-origin policy.

- -
-

Note : il y a un désaccord entre les éditeurs de navigateur sur la question de savoir si une donnée URI relève ou non de la même origine. Bien que Gecko 10.0 {{ geckoRelease("10.0") }} et suivant accepte les données URIs, ce n'est pas le cas dans tous les autres navigateurs.

-
- -

Syntaxe

- -
var myWorker = new Worker(aURL, options);
- -

Arguments

- -
-
aURL
-
Est un {{domxref("DOMString")}} représentant l'URL du script que le worker va exécuter. Il doit obéir à la same-origin policy.
-
options {{optional_inline}}
-
-

Un objet contenant des propriétés pour définir les options. Les propriétés suivantes sont valables:

- -
    -
  • type: Une {{domxref("DOMString")}} définissant le type de worker à créer. The valeur peuvent être classic ou module. Si cette prpriété n'est pas définie, la valeur sera classic.
    • -
  • credentials: Une {{domxref("DOMString")}} définissant le type de politique d'origine à utiliser pour le worker. Les valeurs peuvent être omit, same-origin ou include. Si cette propriété n'est pas définie, ou que type est défini à classic, la valeur sera classic.
    • -
  • name: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.
    • -
-
-
- -

Exceptions

- - - -

Exemple

- -

L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur Worker() et l'usage qui peut alors en être fait :

- -
var myWorker = new Worker("worker.js");
-
-first.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message envoyé au worker');
-}
- -

Pour un exemple complet, consultez notre Exemple basique d'un worker dédié (lancer le worker dédié).

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#dom-worker", "Worker()")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Worker.Worker")}}

- -
-

Note : Un navigateur peut indiquer avoir un support complet de Worker() même s'il ne supporte pas les fichiers worker écrit comme des modules. À partir du premier août 2019, aucun navigateur n'est connu pour avoir un support en production des fichiers worker écrit comme des modules. Sans ces suppports, les fichiers workers écrit sous forme de module et les modules utilisés dans les workers doivent être transpilés ou convertis en non-module pour être utilisables.

-
- -

Voir aussi

- -

L'interface {{domxref("Worker")}} auquel il appartient.

diff --git a/files/fr/web/api/worker/worker/index.md b/files/fr/web/api/worker/worker/index.md new file mode 100644 index 0000000000..1448f5eb35 --- /dev/null +++ b/files/fr/web/api/worker/worker/index.md @@ -0,0 +1,86 @@ +--- +title: Worker() +slug: Web/API/Worker/Worker +tags: + - API + - Reference +translation_of: Web/API/Worker/Worker +--- +

{{APIRef("Worker")}}

+ +

Le constructeur Worker() crée un objet {{domxref("Worker")}} qui exécute le script à l'URL spécifiée. Ce script doit obéir à la same-origin policy.

+ +
+

Note : il y a un désaccord entre les éditeurs de navigateur sur la question de savoir si une donnée URI relève ou non de la même origine. Bien que Gecko 10.0 {{ geckoRelease("10.0") }} et suivant accepte les données URIs, ce n'est pas le cas dans tous les autres navigateurs.

+
+ +

Syntaxe

+ +
var myWorker = new Worker(aURL, options);
+ +

Arguments

+ +
+
aURL
+
Est un {{domxref("DOMString")}} représentant l'URL du script que le worker va exécuter. Il doit obéir à la same-origin policy.
+
options {{optional_inline}}
+
+

Un objet contenant des propriétés pour définir les options. Les propriétés suivantes sont valables:

+ +
    +
  • type: Une {{domxref("DOMString")}} définissant le type de worker à créer. The valeur peuvent être classic ou module. Si cette prpriété n'est pas définie, la valeur sera classic.
    • +
  • credentials: Une {{domxref("DOMString")}} définissant le type de politique d'origine à utiliser pour le worker. Les valeurs peuvent être omit, same-origin ou include. Si cette propriété n'est pas définie, ou que type est défini à classic, la valeur sera classic.
    • +
  • name: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.
    • +
+
+
+ +

Exceptions

+ + + +

Exemple

+ +

L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur Worker() et l'usage qui peut alors en être fait :

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message envoyé au worker');
+}
+ +

Pour un exemple complet, consultez notre Exemple basique d'un worker dédié (lancer le worker dédié).

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#dom-worker", "Worker()")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Worker.Worker")}}

+ +
+

Note : Un navigateur peut indiquer avoir un support complet de Worker() même s'il ne supporte pas les fichiers worker écrit comme des modules. À partir du premier août 2019, aucun navigateur n'est connu pour avoir un support en production des fichiers worker écrit comme des modules. Sans ces suppports, les fichiers workers écrit sous forme de module et les modules utilisés dans les workers doivent être transpilés ou convertis en non-module pour être utilisables.

+
+ +

Voir aussi

+ +

L'interface {{domxref("Worker")}} auquel il appartient.

diff --git a/files/fr/web/api/workerglobalscope/console/index.html b/files/fr/web/api/workerglobalscope/console/index.html deleted file mode 100644 index e60d13bf38..0000000000 --- a/files/fr/web/api/workerglobalscope/console/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: WorkerGlobalScope.console -slug: Web/API/WorkerGlobalScope/console -tags: - - API - - Propriété - - Reference - - Web Workers - - WorkerGlobalScope - - lecture seule -translation_of: Web/API/WorkerGlobalScope/console ---- -

{{APIRef("Web Workers API")}}{{Non-standard_header}}

- -

La propriété en lecture seule console de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker.

- -

Syntaxe

- -
var consoleObj = self.console;
- -

Valeur

- -

Un objet {{domxref("Console")}}.

- -

Exemple

- -

Cette propriété vous permet d'avoir accès à la console du navigateur à des fins de débogage dans un worker. Par exemple, vous pouvez appeler

- -
console.log('test');
- -

dans un worker (qui est tout simplement l'équivalent de self.console.log('test');, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur.

- -

Si vous appelez console.log() depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez console.log() depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message.

- -

Spécifications

- -

Ne fait pas encore parti d'une spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WorkerGlobalScope.console")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/workerglobalscope/console/index.md b/files/fr/web/api/workerglobalscope/console/index.md new file mode 100644 index 0000000000..e60d13bf38 --- /dev/null +++ b/files/fr/web/api/workerglobalscope/console/index.md @@ -0,0 +1,50 @@ +--- +title: WorkerGlobalScope.console +slug: Web/API/WorkerGlobalScope/console +tags: + - API + - Propriété + - Reference + - Web Workers + - WorkerGlobalScope + - lecture seule +translation_of: Web/API/WorkerGlobalScope/console +--- +

{{APIRef("Web Workers API")}}{{Non-standard_header}}

+ +

La propriété en lecture seule console de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker.

+ +

Syntaxe

+ +
var consoleObj = self.console;
+ +

Valeur

+ +

Un objet {{domxref("Console")}}.

+ +

Exemple

+ +

Cette propriété vous permet d'avoir accès à la console du navigateur à des fins de débogage dans un worker. Par exemple, vous pouvez appeler

+ +
console.log('test');
+ +

dans un worker (qui est tout simplement l'équivalent de self.console.log('test');, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur.

+ +

Si vous appelez console.log() depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez console.log() depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message.

+ +

Spécifications

+ +

Ne fait pas encore parti d'une spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WorkerGlobalScope.console")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/workerglobalscope/dump/index.html b/files/fr/web/api/workerglobalscope/dump/index.html deleted file mode 100644 index 9d06cf02d9..0000000000 --- a/files/fr/web/api/workerglobalscope/dump/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: WorkerGlobalScope.dump() -slug: Web/API/WorkerGlobalScope/dump -translation_of: Web/API/WorkerGlobalScope/dump ---- -
{{APIRef("Web Workers API")}}
- -
-

Attention : Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

-
- -

La méthode dump() de l'interface {{domxref("WorkerGlobalScope")}} permet d'écrire des messages vers stdout — i.e. dans le terminal, seulement sur Firefox. C'est la même chose que {{domxref("window.dump")}} dans Firefox, mais pour les workers.

- -

Syntaxe

- -
dump('Mon message\n');
- -

Paramètre

- -

Une {{domxref("DOMString")}} contenant le message que vous voulez envoyer.

- -

Retour

- -

Rien.

- -

Exemple

- -

Pour écrire quelque chose depuis votre worker vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application):

- -
./Firefox.app/Contents/MacOS/firefox-bin -profile /tmp -no-remote
- -

Maintenant allez dans about:config et activez la préférence browser.dom.window.dump.enabled.

- -

Après, lancez un worker contenant la ligne suivante:

- -
dump('test\n');
- -

Vous devriez observer le message «test» apparaître dans le terminal.

- -

Spécifications

- -

Cette méthode n’apparaît dans aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WorkerGlobalScope.dump")}}

- -

Voir aussi

- -

{{domxref("WorkerGlobalScope")}}

diff --git a/files/fr/web/api/workerglobalscope/dump/index.md b/files/fr/web/api/workerglobalscope/dump/index.md new file mode 100644 index 0000000000..9d06cf02d9 --- /dev/null +++ b/files/fr/web/api/workerglobalscope/dump/index.md @@ -0,0 +1,52 @@ +--- +title: WorkerGlobalScope.dump() +slug: Web/API/WorkerGlobalScope/dump +translation_of: Web/API/WorkerGlobalScope/dump +--- +
{{APIRef("Web Workers API")}}
+ +
+

Attention : Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

+
+ +

La méthode dump() de l'interface {{domxref("WorkerGlobalScope")}} permet d'écrire des messages vers stdout — i.e. dans le terminal, seulement sur Firefox. C'est la même chose que {{domxref("window.dump")}} dans Firefox, mais pour les workers.

+ +

Syntaxe

+ +
dump('Mon message\n');
+ +

Paramètre

+ +

Une {{domxref("DOMString")}} contenant le message que vous voulez envoyer.

+ +

Retour

+ +

Rien.

+ +

Exemple

+ +

Pour écrire quelque chose depuis votre worker vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application):

+ +
./Firefox.app/Contents/MacOS/firefox-bin -profile /tmp -no-remote
+ +

Maintenant allez dans about:config et activez la préférence browser.dom.window.dump.enabled.

+ +

Après, lancez un worker contenant la ligne suivante:

+ +
dump('test\n');
+ +

Vous devriez observer le message «test» apparaître dans le terminal.

+ +

Spécifications

+ +

Cette méthode n’apparaît dans aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WorkerGlobalScope.dump")}}

+ +

Voir aussi

+ +

{{domxref("WorkerGlobalScope")}}

diff --git a/files/fr/web/api/workerglobalscope/importscripts/index.html b/files/fr/web/api/workerglobalscope/importscripts/index.html deleted file mode 100644 index eb47eac872..0000000000 --- a/files/fr/web/api/workerglobalscope/importscripts/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: WorkerGlobalScope.importScripts() -slug: Web/API/WorkerGlobalScope/importScripts -translation_of: Web/API/WorkerGlobalScope/importScripts ---- -

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

- -

La méthode importScripts() de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker.

- -

Syntaxe

- -
self.importScripts('foo.js');
-self.importScripts('foo.js', 'bar.js', ...);
- -

Paramètres

- -

Une liste d'objets {{domxref("DOMString")}} séparés par des virgules et représentant les scripts à importer.

- -

Valeur de retour

- -

Rien.

- -

Exceptions

- - - - - - - - - - - - - - -
ExceptionDescription
NetworkErrorImporter un script qui n'est pas servi avec un type MIME valide. (i.e. text/javascript).
- -

Exemple

- -

Si vous disposez d'un code présent dans un script indépendant appelé foo.js que vous souhaitez utiliser à l'intérieur de worker.js, vous pouvez l'importer de la façon suivante:

- -
importScripts('foo.js');
- -

importScripts() et self.importScripts() sont effectivement équivalentes — les deux expressions correspondent à la façon d'appeler importScripts() au sein du contexte local du worker.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-workerglobalscope-importscripts', 'importScripts()')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.WorkerGlobalScope.importScripts")}}

- -

Voir aussi

- -

{{domxref("WorkerGlobalScope")}}

diff --git a/files/fr/web/api/workerglobalscope/importscripts/index.md b/files/fr/web/api/workerglobalscope/importscripts/index.md new file mode 100644 index 0000000000..eb47eac872 --- /dev/null +++ b/files/fr/web/api/workerglobalscope/importscripts/index.md @@ -0,0 +1,71 @@ +--- +title: WorkerGlobalScope.importScripts() +slug: Web/API/WorkerGlobalScope/importScripts +translation_of: Web/API/WorkerGlobalScope/importScripts +--- +

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

+ +

La méthode importScripts() de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker.

+ +

Syntaxe

+ +
self.importScripts('foo.js');
+self.importScripts('foo.js', 'bar.js', ...);
+ +

Paramètres

+ +

Une liste d'objets {{domxref("DOMString")}} séparés par des virgules et représentant les scripts à importer.

+ +

Valeur de retour

+ +

Rien.

+ +

Exceptions

+ + + + + + + + + + + + + + +
ExceptionDescription
NetworkErrorImporter un script qui n'est pas servi avec un type MIME valide. (i.e. text/javascript).
+ +

Exemple

+ +

Si vous disposez d'un code présent dans un script indépendant appelé foo.js que vous souhaitez utiliser à l'intérieur de worker.js, vous pouvez l'importer de la façon suivante:

+ +
importScripts('foo.js');
+ +

importScripts() et self.importScripts() sont effectivement équivalentes — les deux expressions correspondent à la façon d'appeler importScripts() au sein du contexte local du worker.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-workerglobalscope-importscripts', 'importScripts()')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WorkerGlobalScope.importScripts")}}

+ +

Voir aussi

+ +

{{domxref("WorkerGlobalScope")}}

diff --git a/files/fr/web/api/workerglobalscope/index.html b/files/fr/web/api/workerglobalscope/index.html deleted file mode 100644 index 946df930aa..0000000000 --- a/files/fr/web/api/workerglobalscope/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: WorkerGlobalScope -slug: Web/API/WorkerGlobalScope -tags: - - API - - Interface - - Reference - - TopicStub - - WorkerGlobalScope - - Workers -translation_of: Web/API/WorkerGlobalScope ---- -

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

- -

L'interface WorkerGlobalScope de l'API Web Workers est une interface représentant la portée de tout worker. Les Workers n'ont pas de contexte de navigation; cette portée contient les informations généralement véhiculées par les objets {{domxref("Window")}} — dans ce cas les gestionnaires d'événements, la console ou l'objet {{domxref("WorkerNavigator")}} associé. Chaque WorkerGlobalScope a sa propre boucle d'événements.

- -

Cette interface est généralement spécialisée par chaque type de worker : {{domxref("DedicatedWorkerGlobalScope")}} pour les workers dédiés, {{domxref("SharedWorkerGlobalScope")}} pour les workers partagés, et {{domxref("ServiceWorkerGlobalScope")}} pour ServiceWorker. La propriété self renvoie la portée spécialisée pour chaque contexte.

- -

Propriétés

- -

Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.

- -

Propriétés standard

- -
-
{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
-
Renvoie le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, principalement un sous-ensemble de {{domxref("Navigator")}} pour la navigation dans les portées, mais adapté aux workers.
-
{{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}
-
Renvoie une référence au WorkerGlobalScope lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}.
-
{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
-
Renvoie le {{domxref("WorkerLocation")}} associé au worker. Il s'agit d'un objet de localisation spécifique, principalement un sous-ensemble de {{domxref ("Location")}} pour les portées de navigation, mais adapté aux workers.
-
- -

Propriétés non standard

- -
-
{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
-
Renvoie la {{domxref ("Performance")}} associée au worker. Il s'agit d'un objet de performance standard, sauf que seul un sous-ensemble de sa propriété et de ses méthodes est disponible pour les nœuds de calcul.
-
{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}}
-
Renvoie la {{domxref("Console")}} associée au worker.
-
- -

Gestionnaires d'événements

- -

Cette interface hérite des gestionnaires d'événements de l'interface {{domxref ("EventTarget")}} et implémente les gestionnaires d'événements de {{domxref ("WindowTimers")}} et {{domxref ("WindowBase64")}}.

- -
-
{{domxref("WorkerGlobalScope.onerror")}}
-
Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("error")}} est déclenché.
-
{{domxref("WorkerGlobalScope.onoffline")}}
-
Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("offline")}} est déclenché.
-
{{domxref("WorkerGlobalScope.ononline")}}
-
Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("online")}} est déclenché.
-
{{domxref("WorkerGlobalScope.onlanguagechange")}}
-
Un {{domxref ("EventHandler")}} déclenché sur l'objet de portée global / worker lorsque les langues préférées de l'utilisateur changent.
-
- -
-
{{domxref("WorkerGlobalScope.onclose")}} {{Non-standard_inline}}
-
Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("close")}} est déclenché.
-
- -

Méthodes

- -

Cette interface hérite des méthodes de l'interface {{domxref ("EventTarget")}} et implémente les méthodes de {{domxref ("WindowTimers")}}, {{domxref ("WindowBase64")}}, {{domxref ("WindowEventHandlers")}} et {{domxref ("GlobalFetch")}}.

- -

Méthodes standard

- -
-
{{domxref("WorkerGlobalScope.close()")}}
-
Ignore toutes les tâches mises en file d'attente dans la boucle d'événements de WorkerGlobalScope, fermant ainsi cette portée particulière.
-
{{domxref("WorkerGlobalScope.importScripts()")}}
-
Importe un ou plusieurs scripts dans la portée du worker. Vous pouvez en spécifier autant que vous le souhaitez, séparés par des virgules. Par exemple: importScripts('foo.js', 'bar.js');
-
- -

Méthodes non standard

- -
-
{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
-
Vous permet d'écrire un message stdout — c'est-à-dire dans votre terminal. C'est la même chose que {{domxref ("window.dump")}} de Firefox, mais pour les workers.
-
- -

Méthodes mises en œuvre d'ailleurs

- -
-
{{domxref("WindowBase64.atob()")}}
-
Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.
-
{{domxref("WindowBase64.btoa()")}}
-
Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.
-
{{domxref("WindowTimers.clearInterval()")}}
-
Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setInterval ()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setTimeout ()")}}.
-
{{domxref("GlobalFetch.fetch()")}}
-
Démarre le processus de récupération d'une ressource.
-
{{domxref("WindowTimers.setInterval()")}}
-
Planifie l'exécution d'une fonction toutes les X millisecondes.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Définit un délai pour l'exécution d'une fonction.
-
- -

Exemple

- -

Vous n'accéderez pas à WorkerGlobalScope directement dans votre code; cependant, ses propriétés et méthodes sont héritées par des portées globales plus spécifiques telles que {{domxref ("DedicatedWorkerGlobalScope")}} et {{domxref ("SharedWorkerGlobalScope")}}. Par exemple, vous pouvez importer un autre script dans le worker et imprimer le contenu de l'objet navigator de l'étendue du worker en utilisant les deux lignes suivantes:

- -
importScripts('foo.js');
-console.log(navigator);
- -
-

Note : Étant donné que la portée globale du script de worker est effectivement la portée globale du worker que vous exécutez ({{domxref ("DedicatedWorkerGlobalScope")}} ou autre) et que toutes les portées globales de worker héritent des méthodes, des propriétés, etc. À partir de WorkerGlobalScope, vous pouvez exécuter des lignes telles que celles ci-dessus sans spécifier d'objet parent.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#workerglobalscope', 'WorkerGlobalScope')}}{{Spec2('HTML WHATWG')}}Aucun changement par rapport à {{SpecName ("Web Workers")}}.
{{SpecName('Web Workers', '#workerglobalscope', 'WorkerGlobalScope')}}{{Spec2('Web Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.WorkerGlobalScope")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/workerglobalscope/index.md b/files/fr/web/api/workerglobalscope/index.md new file mode 100644 index 0000000000..946df930aa --- /dev/null +++ b/files/fr/web/api/workerglobalscope/index.md @@ -0,0 +1,145 @@ +--- +title: WorkerGlobalScope +slug: Web/API/WorkerGlobalScope +tags: + - API + - Interface + - Reference + - TopicStub + - WorkerGlobalScope + - Workers +translation_of: Web/API/WorkerGlobalScope +--- +

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

+ +

L'interface WorkerGlobalScope de l'API Web Workers est une interface représentant la portée de tout worker. Les Workers n'ont pas de contexte de navigation; cette portée contient les informations généralement véhiculées par les objets {{domxref("Window")}} — dans ce cas les gestionnaires d'événements, la console ou l'objet {{domxref("WorkerNavigator")}} associé. Chaque WorkerGlobalScope a sa propre boucle d'événements.

+ +

Cette interface est généralement spécialisée par chaque type de worker : {{domxref("DedicatedWorkerGlobalScope")}} pour les workers dédiés, {{domxref("SharedWorkerGlobalScope")}} pour les workers partagés, et {{domxref("ServiceWorkerGlobalScope")}} pour ServiceWorker. La propriété self renvoie la portée spécialisée pour chaque contexte.

+ +

Propriétés

+ +

Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.

+ +

Propriétés standard

+ +
+
{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
+
Renvoie le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, principalement un sous-ensemble de {{domxref("Navigator")}} pour la navigation dans les portées, mais adapté aux workers.
+
{{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}
+
Renvoie une référence au WorkerGlobalScope lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}.
+
{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
+
Renvoie le {{domxref("WorkerLocation")}} associé au worker. Il s'agit d'un objet de localisation spécifique, principalement un sous-ensemble de {{domxref ("Location")}} pour les portées de navigation, mais adapté aux workers.
+
+ +

Propriétés non standard

+ +
+
{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
+
Renvoie la {{domxref ("Performance")}} associée au worker. Il s'agit d'un objet de performance standard, sauf que seul un sous-ensemble de sa propriété et de ses méthodes est disponible pour les nœuds de calcul.
+
{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}}
+
Renvoie la {{domxref("Console")}} associée au worker.
+
+ +

Gestionnaires d'événements

+ +

Cette interface hérite des gestionnaires d'événements de l'interface {{domxref ("EventTarget")}} et implémente les gestionnaires d'événements de {{domxref ("WindowTimers")}} et {{domxref ("WindowBase64")}}.

+ +
+
{{domxref("WorkerGlobalScope.onerror")}}
+
Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("error")}} est déclenché.
+
{{domxref("WorkerGlobalScope.onoffline")}}
+
Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("offline")}} est déclenché.
+
{{domxref("WorkerGlobalScope.ononline")}}
+
Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("online")}} est déclenché.
+
{{domxref("WorkerGlobalScope.onlanguagechange")}}
+
Un {{domxref ("EventHandler")}} déclenché sur l'objet de portée global / worker lorsque les langues préférées de l'utilisateur changent.
+
+ +
+
{{domxref("WorkerGlobalScope.onclose")}} {{Non-standard_inline}}
+
Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("close")}} est déclenché.
+
+ +

Méthodes

+ +

Cette interface hérite des méthodes de l'interface {{domxref ("EventTarget")}} et implémente les méthodes de {{domxref ("WindowTimers")}}, {{domxref ("WindowBase64")}}, {{domxref ("WindowEventHandlers")}} et {{domxref ("GlobalFetch")}}.

+ +

Méthodes standard

+ +
+
{{domxref("WorkerGlobalScope.close()")}}
+
Ignore toutes les tâches mises en file d'attente dans la boucle d'événements de WorkerGlobalScope, fermant ainsi cette portée particulière.
+
{{domxref("WorkerGlobalScope.importScripts()")}}
+
Importe un ou plusieurs scripts dans la portée du worker. Vous pouvez en spécifier autant que vous le souhaitez, séparés par des virgules. Par exemple: importScripts('foo.js', 'bar.js');
+
+ +

Méthodes non standard

+ +
+
{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
+
Vous permet d'écrire un message stdout — c'est-à-dire dans votre terminal. C'est la même chose que {{domxref ("window.dump")}} de Firefox, mais pour les workers.
+
+ +

Méthodes mises en œuvre d'ailleurs

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.
+
{{domxref("WindowBase64.btoa()")}}
+
Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.
+
{{domxref("WindowTimers.clearInterval()")}}
+
Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setInterval ()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setTimeout ()")}}.
+
{{domxref("GlobalFetch.fetch()")}}
+
Démarre le processus de récupération d'une ressource.
+
{{domxref("WindowTimers.setInterval()")}}
+
Planifie l'exécution d'une fonction toutes les X millisecondes.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Définit un délai pour l'exécution d'une fonction.
+
+ +

Exemple

+ +

Vous n'accéderez pas à WorkerGlobalScope directement dans votre code; cependant, ses propriétés et méthodes sont héritées par des portées globales plus spécifiques telles que {{domxref ("DedicatedWorkerGlobalScope")}} et {{domxref ("SharedWorkerGlobalScope")}}. Par exemple, vous pouvez importer un autre script dans le worker et imprimer le contenu de l'objet navigator de l'étendue du worker en utilisant les deux lignes suivantes:

+ +
importScripts('foo.js');
+console.log(navigator);
+ +
+

Note : Étant donné que la portée globale du script de worker est effectivement la portée globale du worker que vous exécutez ({{domxref ("DedicatedWorkerGlobalScope")}} ou autre) et que toutes les portées globales de worker héritent des méthodes, des propriétés, etc. À partir de WorkerGlobalScope, vous pouvez exécuter des lignes telles que celles ci-dessus sans spécifier d'objet parent.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#workerglobalscope', 'WorkerGlobalScope')}}{{Spec2('HTML WHATWG')}}Aucun changement par rapport à {{SpecName ("Web Workers")}}.
{{SpecName('Web Workers', '#workerglobalscope', 'WorkerGlobalScope')}}{{Spec2('Web Workers')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WorkerGlobalScope")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/workerglobalscope/location/index.html b/files/fr/web/api/workerglobalscope/location/index.html deleted file mode 100644 index cdda4cbfc8..0000000000 --- a/files/fr/web/api/workerglobalscope/location/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: WorkerGlobalScope.location -slug: Web/API/WorkerGlobalScope/location -translation_of: Web/API/WorkerGlobalScope/location ---- -

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

- -

La propriété en lecture seule location de l'interface {{domxref("WorkerGlobalScope")}} retourne l'objet {{domxref("WorkerLocation")}} associé au worker. C'est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} pour les contextes de navigation, mais adapté aux workers.

- -

Syntaxe

- -
var locationObj = self.location;
- -

Valeur de retour

- -

Un objet {{domxref("WorkerLocation")}}.

- -

Exemple

- -

Si vous appelez l'instruction suivante dans un document délivré par localhost:8000

- -
console.log(location);
- -

à l'intérieur d'un worker (ce qui équivaut à self.console.log(self.location);, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}}  — comme ce qui suit :

- -
WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…}
-  hash: ""
-  host: "localhost:8000"
-  hostname: "localhost"
-  href: "http://localhost:8000/worker.js"
-  origin: "http://localhost:8000"
-  pathname: "/worker.js"
-  port: "8000"
-  protocol: "http:"
-  search: ""
-  __proto__: WorkerLocation
- -

Vous pouvez utiliser l'objet location pour récupérer des informations supplémentaires sur la localisation du document, comme vous pourriez le faire avec un objet {{domxref("Location")}} normal.

- -
-

Note : Firefox rencontre un bogue avec l'utilisation de console.log à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-workerglobalscope-location', 'location')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WorkerGlobalScope.location")}}

- -

Voir aussi

- -

{{domxref("WorkerGlobalScope")}}

diff --git a/files/fr/web/api/workerglobalscope/location/index.md b/files/fr/web/api/workerglobalscope/location/index.md new file mode 100644 index 0000000000..cdda4cbfc8 --- /dev/null +++ b/files/fr/web/api/workerglobalscope/location/index.md @@ -0,0 +1,69 @@ +--- +title: WorkerGlobalScope.location +slug: Web/API/WorkerGlobalScope/location +translation_of: Web/API/WorkerGlobalScope/location +--- +

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

+ +

La propriété en lecture seule location de l'interface {{domxref("WorkerGlobalScope")}} retourne l'objet {{domxref("WorkerLocation")}} associé au worker. C'est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} pour les contextes de navigation, mais adapté aux workers.

+ +

Syntaxe

+ +
var locationObj = self.location;
+ +

Valeur de retour

+ +

Un objet {{domxref("WorkerLocation")}}.

+ +

Exemple

+ +

Si vous appelez l'instruction suivante dans un document délivré par localhost:8000

+ +
console.log(location);
+ +

à l'intérieur d'un worker (ce qui équivaut à self.console.log(self.location);, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}}  — comme ce qui suit :

+ +
WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…}
+  hash: ""
+  host: "localhost:8000"
+  hostname: "localhost"
+  href: "http://localhost:8000/worker.js"
+  origin: "http://localhost:8000"
+  pathname: "/worker.js"
+  port: "8000"
+  protocol: "http:"
+  search: ""
+  __proto__: WorkerLocation
+ +

Vous pouvez utiliser l'objet location pour récupérer des informations supplémentaires sur la localisation du document, comme vous pourriez le faire avec un objet {{domxref("Location")}} normal.

+ +
+

Note : Firefox rencontre un bogue avec l'utilisation de console.log à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-workerglobalscope-location', 'location')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WorkerGlobalScope.location")}}

+ +

Voir aussi

+ +

{{domxref("WorkerGlobalScope")}}

diff --git a/files/fr/web/api/workerglobalscope/navigator/index.html b/files/fr/web/api/workerglobalscope/navigator/index.html deleted file mode 100644 index f73f000d03..0000000000 --- a/files/fr/web/api/workerglobalscope/navigator/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: WorkerGlobalScope.navigator -slug: Web/API/WorkerGlobalScope/navigator -translation_of: Web/API/WorkerGlobalScope/navigator ---- -

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

- -

La propriété en lecture seule navigator de l'interface {{domxref("WorkerGlobalScope")}} retourne le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} pour les contextes de navigation, mais adapté aux workers.

- -

Syntaxe

- -
var navigatorObj = self.navigator;
- -

Valeur de retour

- -

Un objet  {{domxref("WorkerNavigator")}}.

- -

Exemple

- -

Si vous appelez

- -
console.log(navigator);
- -

à l'intérieur d'un worker (ce qui équivaut à self.console.log(self.navigator);, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerNavigator")}} — comme ce qui suit :

- -
Object {onLine: true, userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) Ap…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36", product: "Gecko", platform: "MacIntel", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKi…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"…}
-    appCodeName: "Mozilla"
-    appName: "Netscape"
-    appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
-    hardwareConcurrency: 4
-    onLine: true
-    platform: "MacIntel"
-    product: "Gecko"
-    userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
-    __proto__: Object
- -

Vous pouvez utiliser l'objet navigator pour récupérer des informations supplémentaires sur l'environnement d'exécution, comme vous pourriez le faire avec un objet {{domxref("Navigator")}} normal.

- -
-

Note : Firefox rencontre un bogue avec l'utilisation de console.log à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-worker-navigator', 'navigator')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.WorkerGlobalScope.navigator")}}

- -

Voir aussi

- -

{{domxref("WorkerNavigator")}}

diff --git a/files/fr/web/api/workerglobalscope/navigator/index.md b/files/fr/web/api/workerglobalscope/navigator/index.md new file mode 100644 index 0000000000..f73f000d03 --- /dev/null +++ b/files/fr/web/api/workerglobalscope/navigator/index.md @@ -0,0 +1,66 @@ +--- +title: WorkerGlobalScope.navigator +slug: Web/API/WorkerGlobalScope/navigator +translation_of: Web/API/WorkerGlobalScope/navigator +--- +

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

+ +

La propriété en lecture seule navigator de l'interface {{domxref("WorkerGlobalScope")}} retourne le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} pour les contextes de navigation, mais adapté aux workers.

+ +

Syntaxe

+ +
var navigatorObj = self.navigator;
+ +

Valeur de retour

+ +

Un objet  {{domxref("WorkerNavigator")}}.

+ +

Exemple

+ +

Si vous appelez

+ +
console.log(navigator);
+ +

à l'intérieur d'un worker (ce qui équivaut à self.console.log(self.navigator);, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerNavigator")}} — comme ce qui suit :

+ +
Object {onLine: true, userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) Ap…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36", product: "Gecko", platform: "MacIntel", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKi…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"…}
+    appCodeName: "Mozilla"
+    appName: "Netscape"
+    appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
+    hardwareConcurrency: 4
+    onLine: true
+    platform: "MacIntel"
+    product: "Gecko"
+    userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
+    __proto__: Object
+ +

Vous pouvez utiliser l'objet navigator pour récupérer des informations supplémentaires sur l'environnement d'exécution, comme vous pourriez le faire avec un objet {{domxref("Navigator")}} normal.

+ +
+

Note : Firefox rencontre un bogue avec l'utilisation de console.log à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-worker-navigator', 'navigator')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WorkerGlobalScope.navigator")}}

+ +

Voir aussi

+ +

{{domxref("WorkerNavigator")}}

diff --git a/files/fr/web/api/workerglobalscope/onerror/index.html b/files/fr/web/api/workerglobalscope/onerror/index.html deleted file mode 100644 index 902c87d842..0000000000 --- a/files/fr/web/api/workerglobalscope/onerror/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: WorkerGlobalScope.onerror -slug: Web/API/WorkerGlobalScope/onerror -translation_of: Web/API/WorkerGlobalScope/onerror ---- -

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

- -

La propriété onerror de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("error")}} survient et se propage à travers le {{domxref("Worker")}}.

- -

Syntaxe

- -
self.onerror = function() { ... };
- -

Exemple

- -

L'extrait de code suivant montre un gestionnaire onerror placé au sein d'un worker :

- -
self.onerror = function() {
-  console.log('There is an error inside your worker!');
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onerror", "WorkerGlobalScope.onerror")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des naviguateurs

- - - -

{{Compat("api.WorkerGlobalScope.onerror")}}

- -

Voir aussi

- -

L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.

diff --git a/files/fr/web/api/workerglobalscope/onerror/index.md b/files/fr/web/api/workerglobalscope/onerror/index.md new file mode 100644 index 0000000000..902c87d842 --- /dev/null +++ b/files/fr/web/api/workerglobalscope/onerror/index.md @@ -0,0 +1,47 @@ +--- +title: WorkerGlobalScope.onerror +slug: Web/API/WorkerGlobalScope/onerror +translation_of: Web/API/WorkerGlobalScope/onerror +--- +

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

+ +

La propriété onerror de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("error")}} survient et se propage à travers le {{domxref("Worker")}}.

+ +

Syntaxe

+ +
self.onerror = function() { ... };
+ +

Exemple

+ +

L'extrait de code suivant montre un gestionnaire onerror placé au sein d'un worker :

+ +
self.onerror = function() {
+  console.log('There is an error inside your worker!');
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onerror", "WorkerGlobalScope.onerror")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des naviguateurs

+ + + +

{{Compat("api.WorkerGlobalScope.onerror")}}

+ +

Voir aussi

+ +

L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.

diff --git a/files/fr/web/api/workerglobalscope/onlanguagechange/index.html b/files/fr/web/api/workerglobalscope/onlanguagechange/index.html deleted file mode 100644 index 27ea56c768..0000000000 --- a/files/fr/web/api/workerglobalscope/onlanguagechange/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: WorkerGlobalScope.onlanguagechange -slug: Web/API/WorkerGlobalScope/onlanguagechange -translation_of: Web/API/WorkerGlobalScope/onlanguagechange ---- -

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

- -

La propriété onlanguagechange de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("languagechange")}} survient et se propage à travers le {{domxref("Worker")}}.

- -

Syntaxe

- -
self.onlanguagechange = function() { ... };
- -

Exemple

- -

L'extrait de code suivant montre un gestionnaire onlanguagechange placé au sein d'un worker :

- -
self.onlanguagechange = function() {
-  console.log('Your preferred language settings have been changed');
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onlanguagechange", "WorkerGlobalScope.onlanguagechange")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WorkerGlobalScope.onlanguagechange")}}

- -

Voir aussi

- -

L'interface {{domxref("WorkerGlobalScope")}} à laquelle elle appartient.

diff --git a/files/fr/web/api/workerglobalscope/onlanguagechange/index.md b/files/fr/web/api/workerglobalscope/onlanguagechange/index.md new file mode 100644 index 0000000000..27ea56c768 --- /dev/null +++ b/files/fr/web/api/workerglobalscope/onlanguagechange/index.md @@ -0,0 +1,47 @@ +--- +title: WorkerGlobalScope.onlanguagechange +slug: Web/API/WorkerGlobalScope/onlanguagechange +translation_of: Web/API/WorkerGlobalScope/onlanguagechange +--- +

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

+ +

La propriété onlanguagechange de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("languagechange")}} survient et se propage à travers le {{domxref("Worker")}}.

+ +

Syntaxe

+ +
self.onlanguagechange = function() { ... };
+ +

Exemple

+ +

L'extrait de code suivant montre un gestionnaire onlanguagechange placé au sein d'un worker :

+ +
self.onlanguagechange = function() {
+  console.log('Your preferred language settings have been changed');
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onlanguagechange", "WorkerGlobalScope.onlanguagechange")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WorkerGlobalScope.onlanguagechange")}}

+ +

Voir aussi

+ +

L'interface {{domxref("WorkerGlobalScope")}} à laquelle elle appartient.

diff --git a/files/fr/web/api/workerglobalscope/onoffline/index.html b/files/fr/web/api/workerglobalscope/onoffline/index.html deleted file mode 100644 index e9630579f9..0000000000 --- a/files/fr/web/api/workerglobalscope/onoffline/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: WorkerGlobalScope.onoffline -slug: Web/API/WorkerGlobalScope/onoffline -translation_of: Web/API/WorkerGlobalScope/onoffline ---- -

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

- -

La propriété onoffline de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("offline")}} survient et se propage à travers le {{domxref("Worker")}}.

- -

Syntaxe

- -
self.onoffline = function() { ... };
- -

Exemple

- -

L'extrait de code suivant montre un gestionnaire onoffline placé dans un worker :

- -
self.onoffline = function() {
-  console.log('Your worker is now offline');
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onoffline", "WorkerGlobalScope.onoffline")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WorkerGlobalScope.onoffline")}}

- -

Voir aussi

- -

L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.

diff --git a/files/fr/web/api/workerglobalscope/onoffline/index.md b/files/fr/web/api/workerglobalscope/onoffline/index.md new file mode 100644 index 0000000000..e9630579f9 --- /dev/null +++ b/files/fr/web/api/workerglobalscope/onoffline/index.md @@ -0,0 +1,47 @@ +--- +title: WorkerGlobalScope.onoffline +slug: Web/API/WorkerGlobalScope/onoffline +translation_of: Web/API/WorkerGlobalScope/onoffline +--- +

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

+ +

La propriété onoffline de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("offline")}} survient et se propage à travers le {{domxref("Worker")}}.

+ +

Syntaxe

+ +
self.onoffline = function() { ... };
+ +

Exemple

+ +

L'extrait de code suivant montre un gestionnaire onoffline placé dans un worker :

+ +
self.onoffline = function() {
+  console.log('Your worker is now offline');
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onoffline", "WorkerGlobalScope.onoffline")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WorkerGlobalScope.onoffline")}}

+ +

Voir aussi

+ +

L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.

diff --git a/files/fr/web/api/workerglobalscope/ononline/index.html b/files/fr/web/api/workerglobalscope/ononline/index.html deleted file mode 100644 index 69d45c24e4..0000000000 --- a/files/fr/web/api/workerglobalscope/ononline/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: WorkerGlobalScope.ononline -slug: Web/API/WorkerGlobalScope/ononline -translation_of: Web/API/WorkerGlobalScope/ononline ---- -

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

- -

La propriété ononline de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("online")}} survient et se propage à travers le {{domxref("Worker")}}.

- -

Syntaxe

- -
self.ononline = function() { ... };
- -

Exemple

- -

L'extrait de code suivant montre un gestionnaire ononline placé dans un worker :

- -
self.ononline = function() {
-  console.log('Your worker is now online');
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#handler-workerglobalscope-ononline", "WorkerGlobalScope.ononline")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.WorkerGlobalScope.ononline")}}

- -

Voir aussi

- -

L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.

diff --git a/files/fr/web/api/workerglobalscope/ononline/index.md b/files/fr/web/api/workerglobalscope/ononline/index.md new file mode 100644 index 0000000000..69d45c24e4 --- /dev/null +++ b/files/fr/web/api/workerglobalscope/ononline/index.md @@ -0,0 +1,45 @@ +--- +title: WorkerGlobalScope.ononline +slug: Web/API/WorkerGlobalScope/ononline +translation_of: Web/API/WorkerGlobalScope/ononline +--- +

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

+ +

La propriété ononline de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("online")}} survient et se propage à travers le {{domxref("Worker")}}.

+ +

Syntaxe

+ +
self.ononline = function() { ... };
+ +

Exemple

+ +

L'extrait de code suivant montre un gestionnaire ononline placé dans un worker :

+ +
self.ononline = function() {
+  console.log('Your worker is now online');
+}
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "#handler-workerglobalscope-ononline", "WorkerGlobalScope.ononline")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WorkerGlobalScope.ononline")}}

+ +

Voir aussi

+ +

L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.

diff --git a/files/fr/web/api/workerglobalscope/self/index.html b/files/fr/web/api/workerglobalscope/self/index.html deleted file mode 100644 index 8adef5a5f2..0000000000 --- a/files/fr/web/api/workerglobalscope/self/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: WorkerGlobalScope.self -slug: Web/API/WorkerGlobalScope/self -translation_of: Web/API/WorkerGlobalScope/self ---- -

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

- -

La propriété en lecture seule self de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au WorkerGlobalScope lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}.

- -

Syntaxe

- -
var selfRef = self;
- -

Valeur

- -

Un objet global scope (qui diffère selon le type du worker concerné, comme indiqué ci-dessus).

- -

Exemple

- -

Si vous appelez

- -
console.log(self);
- -

au sein d'un worker, vous obtiendrez un worker global scope du même type que l'objet worker écrit sur la console — quelque chose comme ce qui suit :

- -
DedicatedWorkerGlobalScope {
-undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…}
-    Infinity: Infinity
-    Array: function Array() { [native code] }
-      arguments: null
-      caller: null
-      isArray: function isArray() { [native code] }
-      length: 1
-      name: "Array"
-      observe: function observe() { [native code] }
-      prototype: Array[0]
-      unobserve: function unobserve() { [native code] }
-      __proto__: function Empty() {}
-      <function scope>
-    ArrayBuffer: function ArrayBuffer() { [native code] }
-    Blob: function Blob() { [native code] }
-    Boolean: function Boolean() { [native code] }
-    DataView: function DataView() { [native code] }
-    Date: function Date() { [native code] }
-    DedicatedWorkerGlobalScope: function DedicatedWorkerGlobalScope() { [native code] }
-    Error: function Error() { [native code] }
-// etc. etc.
-
- -

Cette trace fournit la liste complète des objets disponibles dans le contexte d'un worker, et constitue un test très utile lorsqu'il s'agit de savoir ce qui est disponible ou non au sein d'un worker. Nous maintenons aussi une liste des Fonctions et classes disponibles dans les Web Workers.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-workerglobalscope-self', 'self')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.WorkerGlobalScope.self")}}

- -

Voir aussi

- -

{{domxref("WorkerGlobalScope")}}

diff --git a/files/fr/web/api/workerglobalscope/self/index.md b/files/fr/web/api/workerglobalscope/self/index.md new file mode 100644 index 0000000000..8adef5a5f2 --- /dev/null +++ b/files/fr/web/api/workerglobalscope/self/index.md @@ -0,0 +1,75 @@ +--- +title: WorkerGlobalScope.self +slug: Web/API/WorkerGlobalScope/self +translation_of: Web/API/WorkerGlobalScope/self +--- +

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

+ +

La propriété en lecture seule self de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au WorkerGlobalScope lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}.

+ +

Syntaxe

+ +
var selfRef = self;
+ +

Valeur

+ +

Un objet global scope (qui diffère selon le type du worker concerné, comme indiqué ci-dessus).

+ +

Exemple

+ +

Si vous appelez

+ +
console.log(self);
+ +

au sein d'un worker, vous obtiendrez un worker global scope du même type que l'objet worker écrit sur la console — quelque chose comme ce qui suit :

+ +
DedicatedWorkerGlobalScope {
+undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…}
+    Infinity: Infinity
+    Array: function Array() { [native code] }
+      arguments: null
+      caller: null
+      isArray: function isArray() { [native code] }
+      length: 1
+      name: "Array"
+      observe: function observe() { [native code] }
+      prototype: Array[0]
+      unobserve: function unobserve() { [native code] }
+      __proto__: function Empty() {}
+      <function scope>
+    ArrayBuffer: function ArrayBuffer() { [native code] }
+    Blob: function Blob() { [native code] }
+    Boolean: function Boolean() { [native code] }
+    DataView: function DataView() { [native code] }
+    Date: function Date() { [native code] }
+    DedicatedWorkerGlobalScope: function DedicatedWorkerGlobalScope() { [native code] }
+    Error: function Error() { [native code] }
+// etc. etc.
+
+ +

Cette trace fournit la liste complète des objets disponibles dans le contexte d'un worker, et constitue un test très utile lorsqu'il s'agit de savoir ce qui est disponible ou non au sein d'un worker. Nous maintenons aussi une liste des Fonctions et classes disponibles dans les Web Workers.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', '#dom-workerglobalscope-self', 'self')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.WorkerGlobalScope.self")}}

+ +

Voir aussi

+ +

{{domxref("WorkerGlobalScope")}}

diff --git a/files/fr/web/api/workerlocation/index.html b/files/fr/web/api/workerlocation/index.html deleted file mode 100644 index ef84bcb1b7..0000000000 --- a/files/fr/web/api/workerlocation/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: WorkerLocation -slug: Web/API/WorkerLocation -tags: - - API - - Web Workers -translation_of: Web/API/WorkerLocation ---- -
{{APIRef("Web Workers API")}}
- -

L'interface WorkerLocation définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque worker et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à window.self.location.

- -

Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un web worker.

- -

Propriétés

- -

L'interface WorkerLocation n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}.

- -
-
{{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}}
-
{{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}.
-
{{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}}
-
{{domxref("DOMString")}} contenant le schéma du protocole de l'URL du script exécuté dans le {{domxref("Worker")}}, incluant les deux points de terminaison':'.
-
{{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}}
-
{{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte hostname, de deux points ':', et du numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}.
-
{{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}}
-
{{domxref("DOMString")}} contenant le nom de domaine du script exécuté dans le {{domxref("Worker")}}.
-
{{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}}
-
{{domxref("DOMString")}} contenant l'origine de l'URL sous sa forme canonique.
-
{{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}}
-
{{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}.
-
{{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}}
-
{{domxref("DOMString")}} contenant une barre oblique initiale '/' suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}.
-
{{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}}
-
{{domxref("DOMString")}} contenant un point d'interrogation intial '?' suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}.
-
{{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}}
-
{{domxref("DOMString")}} contenant un dièse initial '#' suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}.
-
- -

Méthodes

- -

L'interface WorkerLocation n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}.

- -
-
{{domxref("URLUtilsReadOnly.toString()")}}
-
Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('HTML WHATWG', '#workerlocation', 'WorkerLocation')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WorkerLocation")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/workerlocation/index.md b/files/fr/web/api/workerlocation/index.md new file mode 100644 index 0000000000..ef84bcb1b7 --- /dev/null +++ b/files/fr/web/api/workerlocation/index.md @@ -0,0 +1,79 @@ +--- +title: WorkerLocation +slug: Web/API/WorkerLocation +tags: + - API + - Web Workers +translation_of: Web/API/WorkerLocation +--- +
{{APIRef("Web Workers API")}}
+ +

L'interface WorkerLocation définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque worker et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à window.self.location.

+ +

Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un web worker.

+ +

Propriétés

+ +

L'interface WorkerLocation n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}.

+ +
+
{{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}.
+
{{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} contenant le schéma du protocole de l'URL du script exécuté dans le {{domxref("Worker")}}, incluant les deux points de terminaison':'.
+
{{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte hostname, de deux points ':', et du numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}.
+
{{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} contenant le nom de domaine du script exécuté dans le {{domxref("Worker")}}.
+
{{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} contenant l'origine de l'URL sous sa forme canonique.
+
{{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}.
+
{{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} contenant une barre oblique initiale '/' suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}.
+
{{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} contenant un point d'interrogation intial '?' suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}.
+
{{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} contenant un dièse initial '#' suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}.
+
+ +

Méthodes

+ +

L'interface WorkerLocation n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}.

+ +
+
{{domxref("URLUtilsReadOnly.toString()")}}
+
Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('HTML WHATWG', '#workerlocation', 'WorkerLocation')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WorkerLocation")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmldocument/async/index.html b/files/fr/web/api/xmldocument/async/index.html deleted file mode 100644 index d9f8142761..0000000000 --- a/files/fr/web/api/xmldocument/async/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Document.async -slug: Web/API/XMLDocument/async -tags: - - API - - Asynchrone - - DOM - - Document - - Propriété - - XML -translation_of: Web/API/XMLDocument/async ---- -

{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}

- -

document.async peut être défini pour indiquer si un appel {{domxref("document.load")}} doit être une requête asynchrone ou synchrone. true (vrai) est la valeur par défaut, indiquant que les documents doivent être chargés de façon asynchrone.

- -

(Il a été possible de charger des documents de manière synchrone depuis 1.4 alpha.)

- -

Exemple

- -
function loadXMLData(e) {
-  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu querydata.xml sous forme "string" (chaîne de caractère)
-}
-
-var xmlDoc = document.implementation.createDocument("", "test", null);
-
-xmlDoc.async = false;
-xmlDoc.onload = loadXMLData;
-xmlDoc.load('querydata.xml');
- -

Spécification

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/xmldocument/async/index.md b/files/fr/web/api/xmldocument/async/index.md new file mode 100644 index 0000000000..d9f8142761 --- /dev/null +++ b/files/fr/web/api/xmldocument/async/index.md @@ -0,0 +1,42 @@ +--- +title: Document.async +slug: Web/API/XMLDocument/async +tags: + - API + - Asynchrone + - DOM + - Document + - Propriété + - XML +translation_of: Web/API/XMLDocument/async +--- +

{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}

+ +

document.async peut être défini pour indiquer si un appel {{domxref("document.load")}} doit être une requête asynchrone ou synchrone. true (vrai) est la valeur par défaut, indiquant que les documents doivent être chargés de façon asynchrone.

+ +

(Il a été possible de charger des documents de manière synchrone depuis 1.4 alpha.)

+ +

Exemple

+ +
function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu querydata.xml sous forme "string" (chaîne de caractère)
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');
+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/xmldocument/index.html b/files/fr/web/api/xmldocument/index.html deleted file mode 100644 index 49d925793b..0000000000 --- a/files/fr/web/api/xmldocument/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: XMLDocument -slug: Web/API/XMLDocument -tags: - - API - - DOM - - Experimental -translation_of: Web/API/XMLDocument ---- -

{{ ApiRef("DOM") }} {{SeeCompatTable}}

- -

L'interface XMLDocument représente un document XML. Elle hérite du {{domxref("Document")}} générique et ne lui ajoute aucune méthode ou propriété spécifique : néanmoins, plusieurs algorithmes se comportent différemment avec les deux types de documents.

- -

Propriété

- -

Cette interface n'a pas de propriété spécifique et n'en hérite aucune.

- -

Méthodes

- -

Cette interface n'ajoute aucune nouvelle méthode.

- -
-
{{domxref("XMLDocument.load()")}}
-
Charge un document XML.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", 'dom.html#xmldocument', "Extension to XMLDocument")}}{{Spec2('HTML WHATWG')}}Pas de changement par rapport à {{SpecName("HTML5 W3C")}}
{{SpecName("HTML5 W3C", "dom.html#loading-xml-documents", "Extension to XMLDocument")}}{{Spec2('HTML5 W3C')}}Ajoute la méthode load().
{{SpecName('DOM WHATWG', '#xmldocument', 'XMLDocument')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.XMLDocument")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/xmldocument/index.md b/files/fr/web/api/xmldocument/index.md new file mode 100644 index 0000000000..49d925793b --- /dev/null +++ b/files/fr/web/api/xmldocument/index.md @@ -0,0 +1,62 @@ +--- +title: XMLDocument +slug: Web/API/XMLDocument +tags: + - API + - DOM + - Experimental +translation_of: Web/API/XMLDocument +--- +

{{ ApiRef("DOM") }} {{SeeCompatTable}}

+ +

L'interface XMLDocument représente un document XML. Elle hérite du {{domxref("Document")}} générique et ne lui ajoute aucune méthode ou propriété spécifique : néanmoins, plusieurs algorithmes se comportent différemment avec les deux types de documents.

+ +

Propriété

+ +

Cette interface n'a pas de propriété spécifique et n'en hérite aucune.

+ +

Méthodes

+ +

Cette interface n'ajoute aucune nouvelle méthode.

+ +
+
{{domxref("XMLDocument.load()")}}
+
Charge un document XML.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", 'dom.html#xmldocument', "Extension to XMLDocument")}}{{Spec2('HTML WHATWG')}}Pas de changement par rapport à {{SpecName("HTML5 W3C")}}
{{SpecName("HTML5 W3C", "dom.html#loading-xml-documents", "Extension to XMLDocument")}}{{Spec2('HTML5 W3C')}}Ajoute la méthode load().
{{SpecName('DOM WHATWG', '#xmldocument', 'XMLDocument')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.XMLDocument")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmldocument/load/index.html b/files/fr/web/api/xmldocument/load/index.html deleted file mode 100644 index 5bd175f927..0000000000 --- a/files/fr/web/api/xmldocument/load/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: XMLDocument.load() -slug: Web/API/XMLDocument/load -tags: - - API - - DOM - - Deprecated - - Experimental - - Expérimental(2) - - Method - - Reference - - Référence(2) -translation_of: Web/API/XMLDocument/load ---- -

{{APIRef("DOM")}}

- -

document.load() fait partie d'une ancienne version du module W3C DOM Level 3 Load & Save. Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez XMLHttpRequest à la place).

- -

Exemples

- -
var docXml = document.implementation.createDocument("", "test", null);
-
-function documentCharge (e) {
-  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu de querydata.xml comme une chaîne
-}
-
-xmlDoc.addEventListener("load", documentCharge, false);
-xmlDoc.load('querydata.xml');
- -

{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.)

- -

Spécification

- - - -

Compatibilité des navigateurs

- -

{{Compat("api.XMLDocument.load")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/xmldocument/load/index.md b/files/fr/web/api/xmldocument/load/index.md new file mode 100644 index 0000000000..5bd175f927 --- /dev/null +++ b/files/fr/web/api/xmldocument/load/index.md @@ -0,0 +1,47 @@ +--- +title: XMLDocument.load() +slug: Web/API/XMLDocument/load +tags: + - API + - DOM + - Deprecated + - Experimental + - Expérimental(2) + - Method + - Reference + - Référence(2) +translation_of: Web/API/XMLDocument/load +--- +

{{APIRef("DOM")}}

+ +

document.load() fait partie d'une ancienne version du module W3C DOM Level 3 Load & Save. Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez XMLHttpRequest à la place).

+ +

Exemples

+ +
var docXml = document.implementation.createDocument("", "test", null);
+
+function documentCharge (e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu de querydata.xml comme une chaîne
+}
+
+xmlDoc.addEventListener("load", documentCharge, false);
+xmlDoc.load('querydata.xml');
+ +

{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.)

+ +

Spécification

+ + + +

Compatibilité des navigateurs

+ +

{{Compat("api.XMLDocument.load")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequest/abort_event/index.html b/files/fr/web/api/xmlhttprequest/abort_event/index.html deleted file mode 100644 index 2c9738082e..0000000000 --- a/files/fr/web/api/xmlhttprequest/abort_event/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: abort -slug: Web/API/XMLHttpRequest/abort_event -translation_of: Web/API/XMLHttpRequest/abort_event -original_slug: Web/Events/abort_(ProgressEvent) ---- -

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

- - - -

Voir aussi

- - diff --git a/files/fr/web/api/xmlhttprequest/abort_event/index.md b/files/fr/web/api/xmlhttprequest/abort_event/index.md new file mode 100644 index 0000000000..2c9738082e --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/abort_event/index.md @@ -0,0 +1,90 @@ +--- +title: abort +slug: Web/API/XMLHttpRequest/abort_event +translation_of: Web/API/XMLHttpRequest/abort_event +original_slug: Web/Events/abort_(ProgressEvent) +--- +

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

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/index.html deleted file mode 100644 index 3fed67ac6e..0000000000 --- a/files/fr/web/api/xmlhttprequest/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: XMLHttpRequest -slug: Web/API/XMLHttpRequest -tags: - - AJAX - - API - - HTTP - - Interface - - Reference - - Web - - XMLHttpRequest -translation_of: Web/API/XMLHttpRequest ---- -
{{DefaultAPISidebar("XMLHttpRequest")}}
- -

Les objets XMLHttpRequest (XHR) permettent d'interagir avec des serveurs. On peut récupérer des données à partir d'une URL sans avoir à rafraîchir complètement la page. Cela permet à une page web d'être mise à jour sans perturber les actions de l'utilisateur.

- -

XMLHttpRequest est beaucoup utilisé par l'approche {{Glossary("AJAX")}}.

- -

{{InheritanceDiagram(650, 150)}}

- -

Malgré son nom, XMLHttpRequest peut être utilisé afin de récupérer tout type de données et pas uniquement du XML.

- -

Si vos opérations de communication nécessitent l'échange d'évènements ou de messages avec un serveur, pensez à utiliser les évènements serveur via l'interface {{domxref("EventSource")}}. Pour une communication bidirectionnelle complète, les WebSockets peuvent être une meilleure alternative.

- -

Constructeur

- -
-
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
-
Le constructeur initialise un objet XMLHttpRequest. Il doit être appelé avant toute autre méthode.
-
- -

Propriétés

- -

Cette interface hérite également des propriétés de {{domxref("XMLHttpRequestEventTarget")}} et de {{domxref("EventTarget")}}.

- -
-
{{domxref("XMLHttpRequest.onreadystatechange")}}
-
Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) invoqué à chaque fois que l'attribut readyState change.
-
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
-
L'état de la requête sous la forme d'un unsigned short.
-
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
-
Un objet {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, un objet JavaScript ou une chaîne de caractères ({{domxref("DOMString")}}) selon la valeur de {{domxref("XMLHttpRequest.responseType")}}. Cet objet contient le corps de la réponse.
-
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
-
Une chaîne de caractères {{domxref("DOMString")}} qui contient la réponse à la requête sous forme de texte ou la valeur null si la requête a échoué ou n'a pas encore été envoyée.
-
{{domxref("XMLHttpRequest.responseType")}}
-
Une valeur parmi une liste qui définit le type de réponse.
-
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
-
L'URL sérialisée de la réponse ou la chaîne vide si l'URL est nulle.
-
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
-
Un objet {{domxref("Document")}} qui contient la réponse de la requête ou null si la requête a échoué, qu'elle n'a pas encore été envoyée ou qu'elle ne peut pas être analysée comme XML ou HTML. Cette propriété n'est pas disponible dans les workers.
-
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
-
Une valeur numérique unsigned short qui décrit le statut de la réponse à la requête.
-
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
-
Une chaîne {{domxref("DOMString")}} qui contient la chaîne de caractères / réponse renvoyée par le serveur HTTP. À la différence de {{domxref("XMLHttpRequest.status")}}, tout le texte du statut est inclus ("200 OK" plutôt que "200" par exemple).
-
- -
-

Note : Selon la spécification HTTP/2 (voir 8.1.2.4 Response Pseudo-Header Fields), HTTP/2 ne définit pas de méthode pour porter la version ou la raison/phrase incluse dans la ligne de statut HTTP/1.1.

-
- -
-
{{domxref("XMLHttpRequest.timeout")}}
-
Un entier unsigned long qui représente le nombre de millisecondes qu'une requête peut prendre avant d'être terminée automatiquement.
-
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
-
Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) appelé lorsque la requête a expiré. {{gecko_minversion_inline("12.0")}}
-
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
-
Un objet {{domxref("XMLHttpRequestUpload")}} qui représente le processus d'upload.
-
{{domxref("XMLHttpRequest.withCredentials")}}
-
Un booléen ({{domxref("Boolean")}}) qui indique si des requêtes Access-Control d'origines différentes peuvent être effectuées avec des informations d'authentification telles que des cookies ou des en-têtes d'autorisation.
-
- -

Propriétés non-standard

- -
-
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
-
Un objet {{Interface("nsIChannel")}}. Le canal à utiliser par l'objet lorsqu'il effectue la requête.
-
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
-
Un booléen. S'il est vrai, la requête sera envoyée sans cookie ou en-tête d'autorisation.
-
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
-
Un booléen. S'il est vrai, la politique d'origine unique ne sera pas vérifiée pour la requête.
-
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
-
Un booléen qui indique si l'objet représente une requête de service en arrière-plan.
-
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
-
Un objet {{jsxref("ArrayBuffer")}} qui est la réponse à la requête sous la forme d'un tableau typé JavaScript.
-
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
-
Cette fonctionnalité spécifique à Gecko a été retirée avec Firefox/Gecko 22. Veuillez utiliser les évènements serveurs ou les web sockets ou encore la propriété responseText des évènements de progression.
-
- -

Gestionnaires d'évènement

- -

Le gestionnaire onreadystatechange, comme propriété des instances XMLHttpRequest, est pris en charge par l'ensemble des navigateurs.

- -

D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (onload, onerror, onprogress, etc.). Voir le guide Manipuler XMLHttpRequest.

- -

La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes  on*).

- -

Méthodes

- -
-
{{domxref("XMLHttpRequest.abort()")}}
-
Interrompt la requête si elle a déjà été envoyée.
-
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
-
Renvoie, via une chaîne de caractères, l'ensemble des en-têtes de la réponse, séparés par {{Glossary("CRLF")}} ou la valeur null si aucune réponse n'a été reçue.
-
{{domxref("XMLHttpRequest.getResponseHeader()")}}
-
Renvoie la chaîne de caractères contenant le texte de l'en-tête voulue ou null si aucune des réponse n'a été reçue ou si l'en-tête n'existe pas dans la réponse.
-
{{domxref("XMLHttpRequest.open()")}}
-
Initialise une requête. Cette méthode doit être utilisée par du code JavaScript.
-
{{domxref("XMLHttpRequest.overrideMimeType()")}}
-
Surcharge le type MIME renvoyé par le serveur.
-
{{domxref("XMLHttpRequest.send()")}}
-
Envoie la requête. Si la requête est asynchrone (le comportement par défaut), la méthode renvoie un résultat dès que la requête est envoyée.
-
{{domxref("XMLHttpRequest.setRequestHeader()")}}
-
Définit la valeur d'un en-tête de requête HTTP. Cette méthode doit être appelée après open() mais avantsend().
-
- -

Méthodes non-standard

- -
-
{{domxref("XMLHttpRequest.init()")}}
-
Initialise l'objet depuis pour une utilisation depuis du code C++.
-
- -
-

Attention : Cette méthode ne doit pas être appelée depuis du code JavaScript.

-
- -
-
{{domxref("XMLHttpRequest.openRequest()")}}
-
Initialise une requête depuis du code natif. Voir la méthode open() ci-avant pour initialiser une requête de façon standard en JavaSCript.
-
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
-
Une variante de send() afin d'envoyer des données binaires.
-
- -

Évènements

- -
-
{{domxref("XMLHttpRequest/abort_event", "abort")}}
-
Se déclenche lorsqu'une requête a été interrompue (par exemple via {{domxref("XMLHttpRequest.abort()")}}). Le gestionnaire
- {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} est également disponible.
-
{{domxref("XMLHttpRequest/error_event", "error")}}
-
Se déclenche lorsqu'une requête a rencontré une erreur.
- Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} est également disponible.
-
{{domxref("XMLHttpRequest/load_event", "load")}}
-
Se déclenche lorsqu'une transaction {{domxref("XMLHttpRequest")}} se termine correctement. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} est également disponible.
-
{{domxref("XMLHttpRequest/loadend_event", "loadend")}}
-
Se déclenche lorsqu'une requête est terminée (avec une erreur ou non). Quand elle a réussi, l'évènement a lieu après {{domxref("XMLHttpRequest/load_event", "load")}}). Quand elle a échoué, l'évènement survient après {{domxref("XMLHttpRequest/error_event", "error")}}).
- Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} est également disponible.
-
{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}
-
Se déclenche lorsqu'une requête commence à charger des données.
- Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} est également disponible.
-
{{domxref("XMLHttpRequest/progress_event", "progress")}}
-
Se déclenche périodiquement lorsqu'une requête reçoit des données supplémentaires. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} est également disponible.
-
{{domxref("XMLHttpRequest/timeout_event", "timeout")}}
-
Se déclenche lorsque la progression est terminée du fait de l'expiration de la durée limite. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} est également disponible.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Standard évolutif, version la plus récente.
- -

Compatibilité des navigateurs

- -
{{Compat("api.XMLHttpRequest")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/index.md new file mode 100644 index 0000000000..3fed67ac6e --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/index.md @@ -0,0 +1,194 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - API + - HTTP + - Interface + - Reference + - Web + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +
{{DefaultAPISidebar("XMLHttpRequest")}}
+ +

Les objets XMLHttpRequest (XHR) permettent d'interagir avec des serveurs. On peut récupérer des données à partir d'une URL sans avoir à rafraîchir complètement la page. Cela permet à une page web d'être mise à jour sans perturber les actions de l'utilisateur.

+ +

XMLHttpRequest est beaucoup utilisé par l'approche {{Glossary("AJAX")}}.

+ +

{{InheritanceDiagram(650, 150)}}

+ +

Malgré son nom, XMLHttpRequest peut être utilisé afin de récupérer tout type de données et pas uniquement du XML.

+ +

Si vos opérations de communication nécessitent l'échange d'évènements ou de messages avec un serveur, pensez à utiliser les évènements serveur via l'interface {{domxref("EventSource")}}. Pour une communication bidirectionnelle complète, les WebSockets peuvent être une meilleure alternative.

+ +

Constructeur

+ +
+
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+
Le constructeur initialise un objet XMLHttpRequest. Il doit être appelé avant toute autre méthode.
+
+ +

Propriétés

+ +

Cette interface hérite également des propriétés de {{domxref("XMLHttpRequestEventTarget")}} et de {{domxref("EventTarget")}}.

+ +
+
{{domxref("XMLHttpRequest.onreadystatechange")}}
+
Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) invoqué à chaque fois que l'attribut readyState change.
+
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+
L'état de la requête sous la forme d'un unsigned short.
+
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+
Un objet {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, un objet JavaScript ou une chaîne de caractères ({{domxref("DOMString")}}) selon la valeur de {{domxref("XMLHttpRequest.responseType")}}. Cet objet contient le corps de la réponse.
+
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+
Une chaîne de caractères {{domxref("DOMString")}} qui contient la réponse à la requête sous forme de texte ou la valeur null si la requête a échoué ou n'a pas encore été envoyée.
+
{{domxref("XMLHttpRequest.responseType")}}
+
Une valeur parmi une liste qui définit le type de réponse.
+
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+
L'URL sérialisée de la réponse ou la chaîne vide si l'URL est nulle.
+
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+
Un objet {{domxref("Document")}} qui contient la réponse de la requête ou null si la requête a échoué, qu'elle n'a pas encore été envoyée ou qu'elle ne peut pas être analysée comme XML ou HTML. Cette propriété n'est pas disponible dans les workers.
+
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+
Une valeur numérique unsigned short qui décrit le statut de la réponse à la requête.
+
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+
Une chaîne {{domxref("DOMString")}} qui contient la chaîne de caractères / réponse renvoyée par le serveur HTTP. À la différence de {{domxref("XMLHttpRequest.status")}}, tout le texte du statut est inclus ("200 OK" plutôt que "200" par exemple).
+
+ +
+

Note : Selon la spécification HTTP/2 (voir 8.1.2.4 Response Pseudo-Header Fields), HTTP/2 ne définit pas de méthode pour porter la version ou la raison/phrase incluse dans la ligne de statut HTTP/1.1.

+
+ +
+
{{domxref("XMLHttpRequest.timeout")}}
+
Un entier unsigned long qui représente le nombre de millisecondes qu'une requête peut prendre avant d'être terminée automatiquement.
+
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+
Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) appelé lorsque la requête a expiré. {{gecko_minversion_inline("12.0")}}
+
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+
Un objet {{domxref("XMLHttpRequestUpload")}} qui représente le processus d'upload.
+
{{domxref("XMLHttpRequest.withCredentials")}}
+
Un booléen ({{domxref("Boolean")}}) qui indique si des requêtes Access-Control d'origines différentes peuvent être effectuées avec des informations d'authentification telles que des cookies ou des en-têtes d'autorisation.
+
+ +

Propriétés non-standard

+ +
+
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+
Un objet {{Interface("nsIChannel")}}. Le canal à utiliser par l'objet lorsqu'il effectue la requête.
+
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+
Un booléen. S'il est vrai, la requête sera envoyée sans cookie ou en-tête d'autorisation.
+
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+
Un booléen. S'il est vrai, la politique d'origine unique ne sera pas vérifiée pour la requête.
+
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+
Un booléen qui indique si l'objet représente une requête de service en arrière-plan.
+
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+
Un objet {{jsxref("ArrayBuffer")}} qui est la réponse à la requête sous la forme d'un tableau typé JavaScript.
+
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+
Cette fonctionnalité spécifique à Gecko a été retirée avec Firefox/Gecko 22. Veuillez utiliser les évènements serveurs ou les web sockets ou encore la propriété responseText des évènements de progression.
+
+ +

Gestionnaires d'évènement

+ +

Le gestionnaire onreadystatechange, comme propriété des instances XMLHttpRequest, est pris en charge par l'ensemble des navigateurs.

+ +

D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (onload, onerror, onprogress, etc.). Voir le guide Manipuler XMLHttpRequest.

+ +

La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes  on*).

+ +

Méthodes

+ +
+
{{domxref("XMLHttpRequest.abort()")}}
+
Interrompt la requête si elle a déjà été envoyée.
+
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+
Renvoie, via une chaîne de caractères, l'ensemble des en-têtes de la réponse, séparés par {{Glossary("CRLF")}} ou la valeur null si aucune réponse n'a été reçue.
+
{{domxref("XMLHttpRequest.getResponseHeader()")}}
+
Renvoie la chaîne de caractères contenant le texte de l'en-tête voulue ou null si aucune des réponse n'a été reçue ou si l'en-tête n'existe pas dans la réponse.
+
{{domxref("XMLHttpRequest.open()")}}
+
Initialise une requête. Cette méthode doit être utilisée par du code JavaScript.
+
{{domxref("XMLHttpRequest.overrideMimeType()")}}
+
Surcharge le type MIME renvoyé par le serveur.
+
{{domxref("XMLHttpRequest.send()")}}
+
Envoie la requête. Si la requête est asynchrone (le comportement par défaut), la méthode renvoie un résultat dès que la requête est envoyée.
+
{{domxref("XMLHttpRequest.setRequestHeader()")}}
+
Définit la valeur d'un en-tête de requête HTTP. Cette méthode doit être appelée après open() mais avantsend().
+
+ +

Méthodes non-standard

+ +
+
{{domxref("XMLHttpRequest.init()")}}
+
Initialise l'objet depuis pour une utilisation depuis du code C++.
+
+ +
+

Attention : Cette méthode ne doit pas être appelée depuis du code JavaScript.

+
+ +
+
{{domxref("XMLHttpRequest.openRequest()")}}
+
Initialise une requête depuis du code natif. Voir la méthode open() ci-avant pour initialiser une requête de façon standard en JavaSCript.
+
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+
Une variante de send() afin d'envoyer des données binaires.
+
+ +

Évènements

+ +
+
{{domxref("XMLHttpRequest/abort_event", "abort")}}
+
Se déclenche lorsqu'une requête a été interrompue (par exemple via {{domxref("XMLHttpRequest.abort()")}}). Le gestionnaire
+ {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} est également disponible.
+
{{domxref("XMLHttpRequest/error_event", "error")}}
+
Se déclenche lorsqu'une requête a rencontré une erreur.
+ Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} est également disponible.
+
{{domxref("XMLHttpRequest/load_event", "load")}}
+
Se déclenche lorsqu'une transaction {{domxref("XMLHttpRequest")}} se termine correctement. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} est également disponible.
+
{{domxref("XMLHttpRequest/loadend_event", "loadend")}}
+
Se déclenche lorsqu'une requête est terminée (avec une erreur ou non). Quand elle a réussi, l'évènement a lieu après {{domxref("XMLHttpRequest/load_event", "load")}}). Quand elle a échoué, l'évènement survient après {{domxref("XMLHttpRequest/error_event", "error")}}).
+ Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} est également disponible.
+
{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}
+
Se déclenche lorsqu'une requête commence à charger des données.
+ Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} est également disponible.
+
{{domxref("XMLHttpRequest/progress_event", "progress")}}
+
Se déclenche périodiquement lorsqu'une requête reçoit des données supplémentaires. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} est également disponible.
+
{{domxref("XMLHttpRequest/timeout_event", "timeout")}}
+
Se déclenche lorsque la progression est terminée du fait de l'expiration de la durée limite. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} est également disponible.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Standard évolutif, version la plus récente.
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.XMLHttpRequest")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html deleted file mode 100644 index f1b8c7a69d..0000000000 --- a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: XMLHttpRequest.onreadystatechange -slug: Web/API/XMLHttpRequest/onreadystatechange -translation_of: Web/API/XMLHttpRequest/onreadystatechange ---- -
{{APIRef}}
- -

Un EventHandler qui réagit aux changements de readyState. Le callback est appelé dans le contexte du thread de rendu. La propriété XMLHttpRequest.onreadystatechange  contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée.

- -
-

Attention : Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif.

-
- -

Syntaxe

- -
XMLHttpRequest.onreadystatechange = callback;
- -

Valeurs

- - - -

Exemple

- -
var xhr = new XMLHttpRequest(),
-    method = "GET",
-    url = "https://developer.mozilla.org/";
-
-xhr.open(method, url, true);
-xhr.onreadystatechange = function () {
-  if(xhr.readyState === 4 && xhr.status === 200) {
-    console.log(xhr.responseText);
-  }
-};
-xhr.send();
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
- -

Compatibilité des fureteurs

- - - -

{{Compat("api.XMLHttpRequest.onreadystatechange")}}

diff --git a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md new file mode 100644 index 0000000000..f1b8c7a69d --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md @@ -0,0 +1,59 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +
{{APIRef}}
+ +

Un EventHandler qui réagit aux changements de readyState. Le callback est appelé dans le contexte du thread de rendu. La propriété XMLHttpRequest.onreadystatechange  contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée.

+ +
+

Attention : Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif.

+
+ +

Syntaxe

+ +
XMLHttpRequest.onreadystatechange = callback;
+ +

Valeurs

+ + + +

Exemple

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(method, url, true);
+xhr.onreadystatechange = function () {
+  if(xhr.readyState === 4 && xhr.status === 200) {
+    console.log(xhr.responseText);
+  }
+};
+xhr.send();
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilité des fureteurs

+ + + +

{{Compat("api.XMLHttpRequest.onreadystatechange")}}

diff --git a/files/fr/web/api/xmlhttprequest/open/index.html b/files/fr/web/api/xmlhttprequest/open/index.html deleted file mode 100644 index 567982586c..0000000000 --- a/files/fr/web/api/xmlhttprequest/open/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: XMLHttpRequest.open() -slug: Web/API/XMLHttpRequest/open -translation_of: Web/API/XMLHttpRequest/open ---- -
{{APIRef('XMLHttpRequest')}}
- -

La méthode open() de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante.

- -
-

Note : Appeler cette méthode pour une requête déjà active (pour laquelle une méthode open() a déjà été appelée) est équivalent à appeler  {{domxref("XMLHttpRequest.abort", "abort()")}}.

-
- -

Syntaxe

- -
XMLHttpRequest.open(method, url)
-XMLHttpRequest.open(method, url, async)
-XMLHttpRequest.open(method, url, async, user)
-XMLHttpRequest.open(method, url, async, user, password)
-
- -

Paramètres

- -
-
method
-
La méthode  HTTP request  à utiliser telles que : "GET", "POST", "PUT", "DELETE", etc. Ignorée pour les URL non-HTTP(S).
-
url
-
Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête.
-
async {{optional_inline}}
-
Un booléen optionnel par défaut à true, indiquant s'il faut, ou pas, traiter la requête en asynchrone.  Si la valeur est à false, la méthode send() ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à  true, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut multipart est sur "true" aussi ou une exception sera levée. -
-

Note : Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans  {{domxref("Worker")}}.

-
-
-
user {{optional_inline}}
-
Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est null.
-
password {{optional_inline}}
-
Le mot de passe, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est null.
-
- -

Spécificités

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.XMLHttpRequest.open")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/xmlhttprequest/open/index.md b/files/fr/web/api/xmlhttprequest/open/index.md new file mode 100644 index 0000000000..567982586c --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/open/index.md @@ -0,0 +1,69 @@ +--- +title: XMLHttpRequest.open() +slug: Web/API/XMLHttpRequest/open +translation_of: Web/API/XMLHttpRequest/open +--- +
{{APIRef('XMLHttpRequest')}}
+ +

La méthode open() de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante.

+ +
+

Note : Appeler cette méthode pour une requête déjà active (pour laquelle une méthode open() a déjà été appelée) est équivalent à appeler  {{domxref("XMLHttpRequest.abort", "abort()")}}.

+
+ +

Syntaxe

+ +
XMLHttpRequest.open(method, url)
+XMLHttpRequest.open(method, url, async)
+XMLHttpRequest.open(method, url, async, user)
+XMLHttpRequest.open(method, url, async, user, password)
+
+ +

Paramètres

+ +
+
method
+
La méthode  HTTP request  à utiliser telles que : "GET", "POST", "PUT", "DELETE", etc. Ignorée pour les URL non-HTTP(S).
+
url
+
Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête.
+
async {{optional_inline}}
+
Un booléen optionnel par défaut à true, indiquant s'il faut, ou pas, traiter la requête en asynchrone.  Si la valeur est à false, la méthode send() ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à  true, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut multipart est sur "true" aussi ou une exception sera levée. +
+

Note : Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans  {{domxref("Worker")}}.

+
+
+
user {{optional_inline}}
+
Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est null.
+
password {{optional_inline}}
+
Le mot de passe, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est null.
+
+ +

Spécificités

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.XMLHttpRequest.open")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.html b/files/fr/web/api/xmlhttprequest/readystate/index.html deleted file mode 100644 index c500f0ede1..0000000000 --- a/files/fr/web/api/xmlhttprequest/readystate/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: XMLHttpRequest.readyState -slug: Web/API/XMLHttpRequest/readyState -translation_of: Web/API/XMLHttpRequest/readyState ---- -

{{APIRef('XMLHttpRequest')}}

- -

La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve un client XMLHttpRequest.Un client XHR existe dans l'un des états suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValueStateDescription
0UNSENTLe client a été créé. open() n'a pas encore été appelé.
1OPENEDopen()a été appelé.
2HEADERS_RECEIVEDsend() a été appelé, et les en-têtes et le statut sont disponibles.
3LOADINGTéléchargement; responseText contient des données partielles.
4DONEL'opération est terminée.
- -
-
UNSENT
-
Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée.
-
OPENED
-
La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode setRequestHeader()  et la méthode send()  peut être appelée, ce qui lancera la récupération.
-
HEADERS_RECEIVED
-
send() a été appelé et les en-têtes de réponse ont été reçus
-
LOADING
-
Le corps de la réponse est en cours de réception. Si responseType is "text"  ou une chaîne vide, responseText aura la réponse textuelle partielle au fur et à mesure de son chargement.
-
DONE
-
L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué.
-
- -
-

Note : Les noms des états sont différents dans les versions d'Internet Explorer antérieures à 11. Au lieu de UNSENT, OPENED, HEADERS_RECEIVED, LOADING and DONE, the names READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) et READYSTATE_COMPLETE (4) sont utilisés.

-
- -

Exemple

- -
var xhr = new XMLHttpRequest();
-console.log('UNSENT', xhr.readyState); // readyState will be 0
-
-xhr.open('GET', '/api', true);
-console.log('OPENED', xhr.readyState); // readyState will be 1
-
-xhr.onprogress = function () {
-    console.log('LOADING', xhr.readyState); // readyState will be 3
-};
-
-xhr.onload = function () {
-    console.log('DONE', xhr.readyState); // readyState will be 4
-};
-
-xhr.send(null);
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatutComment
{{SpecName('XMLHttpRequest', '#states')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.XMLHttpRequest.readyState")}}

diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.md b/files/fr/web/api/xmlhttprequest/readystate/index.md new file mode 100644 index 0000000000..c500f0ede1 --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/readystate/index.md @@ -0,0 +1,100 @@ +--- +title: XMLHttpRequest.readyState +slug: Web/API/XMLHttpRequest/readyState +translation_of: Web/API/XMLHttpRequest/readyState +--- +

{{APIRef('XMLHttpRequest')}}

+ +

La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve un client XMLHttpRequest.Un client XHR existe dans l'un des états suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueStateDescription
0UNSENTLe client a été créé. open() n'a pas encore été appelé.
1OPENEDopen()a été appelé.
2HEADERS_RECEIVEDsend() a été appelé, et les en-têtes et le statut sont disponibles.
3LOADINGTéléchargement; responseText contient des données partielles.
4DONEL'opération est terminée.
+ +
+
UNSENT
+
Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée.
+
OPENED
+
La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode setRequestHeader()  et la méthode send()  peut être appelée, ce qui lancera la récupération.
+
HEADERS_RECEIVED
+
send() a été appelé et les en-têtes de réponse ont été reçus
+
LOADING
+
Le corps de la réponse est en cours de réception. Si responseType is "text"  ou une chaîne vide, responseText aura la réponse textuelle partielle au fur et à mesure de son chargement.
+
DONE
+
L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué.
+
+ +
+

Note : Les noms des états sont différents dans les versions d'Internet Explorer antérieures à 11. Au lieu de UNSENT, OPENED, HEADERS_RECEIVED, LOADING and DONE, the names READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) et READYSTATE_COMPLETE (4) sont utilisés.

+
+ +

Exemple

+ +
var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState will be 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState will be 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState will be 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState will be 4
+};
+
+xhr.send(null);
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatutComment
{{SpecName('XMLHttpRequest', '#states')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.XMLHttpRequest.readyState")}}

diff --git a/files/fr/web/api/xmlhttprequest/response/index.html b/files/fr/web/api/xmlhttprequest/response/index.html deleted file mode 100644 index afbad2c4f1..0000000000 --- a/files/fr/web/api/xmlhttprequest/response/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: XMLHttpRequest.response -slug: Web/API/XMLHttpRequest/response -tags: - - AJAX - - Reference - - XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/response ---- -
{{draft}}
- -
{{APIRef('XMLHttpRequest')}}
- -
La propriété XMLHttpRequest.response contient le corps de la réponse. Elle peut être de type ArrayBuffer, Blob, Document, un objet JavaScript ou une DOMString en fonction de la valeur de la propriété XMLHttpRequest.responseType. La réponse ( Value of response ) est nulle si la requête est incomplète ou n'as pas été effectué avec succès. Cependant, si responseType est "text" ou une chaine vide et tant que la requête est en cours ( dans l'état loading ), response peut contenir la réponse partielle.
- -
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Valeur de responseTypeType de donnée de la propriété response
""{{domxref("DOMString")}} (valeur par défaut)
"arraybuffer"{{domxref("ArrayBuffer")}}
"blob"{{domxref("Blob")}}
"document"{{domxref("Document")}}
"json" -

Objet JavaScript depuis une réponse JSON.

-
"text"{{domxref("DOMString")}}
"moz-blob" {{non-standard_inline}} -

Used by Firefox to allow retrieving partial {{domxref("Blob")}} data from progress events. This lets your progress event handler start processing data while it's still being received. {{gecko_minversion_inline("12.0")}}

-
"moz-chunked-text"{{non-standard_inline}} -

Similar to "text", but is streaming. This means that the value in response is only available during dispatch of the "progress" event and only contains the data received since the last "progress" event.

- -

When response is accessed during a "progress" event it contains a string with the data. Otherwise it returns null.

- -

This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}

-
"moz-chunked-arraybuffer"{{non-standard_inline}} -

Similar to "arraybuffer", but is streaming. This means that the value in response is only available during dispatch of the "progress" event and only contains the data received since the last "progress" event.

- -

When response is accessed during a "progress" event it contains a string with the data. Otherwise it returns null.

- -

This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}

-
"ms-stream"{{non-standard_inline}} -

Indique que la réponse est une partie d'un téléchargement d'un flux (?). Supporté uniquement pour les requêtes des téléchargements et disponible uniquement dans Internet Explorer.

-
- -
-

Note: À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut responseType lors des requêtes synchrones. Cela renvoi l'erreur NS_ERROR_DOM_INVALID_ACCESS_ERR. Ce changement a été proposé au W3C afin d'être standardisé. 

-
- -

Example

- -
var url = 'somePage.html'; // une page locale
-
-function load(url, callback) {
-  var xhr = new XMLHttpRequest();
-
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState === 4) {
-      console.log(xhr.response); // Par défault une DOMString
-    }
-  }
-
-  xhr.open('GET', url, true);
-  xhr.send('');
-}
-
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-response-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
- -

Compatibilité des navigateurs

- -
{{Compat("api.XMLHttpRequest")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/xmlhttprequest/response/index.md b/files/fr/web/api/xmlhttprequest/response/index.md new file mode 100644 index 0000000000..afbad2c4f1 --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/response/index.md @@ -0,0 +1,143 @@ +--- +title: XMLHttpRequest.response +slug: Web/API/XMLHttpRequest/response +tags: + - AJAX + - Reference + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/response +--- +
{{draft}}
+ +
{{APIRef('XMLHttpRequest')}}
+ +
La propriété XMLHttpRequest.response contient le corps de la réponse. Elle peut être de type ArrayBuffer, Blob, Document, un objet JavaScript ou une DOMString en fonction de la valeur de la propriété XMLHttpRequest.responseType. La réponse ( Value of response ) est nulle si la requête est incomplète ou n'as pas été effectué avec succès. Cependant, si responseType est "text" ou une chaine vide et tant que la requête est en cours ( dans l'état loading ), response peut contenir la réponse partielle.
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeur de responseTypeType de donnée de la propriété response
""{{domxref("DOMString")}} (valeur par défaut)
"arraybuffer"{{domxref("ArrayBuffer")}}
"blob"{{domxref("Blob")}}
"document"{{domxref("Document")}}
"json" +

Objet JavaScript depuis une réponse JSON.

+
"text"{{domxref("DOMString")}}
"moz-blob" {{non-standard_inline}} +

Used by Firefox to allow retrieving partial {{domxref("Blob")}} data from progress events. This lets your progress event handler start processing data while it's still being received. {{gecko_minversion_inline("12.0")}}

+
"moz-chunked-text"{{non-standard_inline}} +

Similar to "text", but is streaming. This means that the value in response is only available during dispatch of the "progress" event and only contains the data received since the last "progress" event.

+ +

When response is accessed during a "progress" event it contains a string with the data. Otherwise it returns null.

+ +

This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}

+
"moz-chunked-arraybuffer"{{non-standard_inline}} +

Similar to "arraybuffer", but is streaming. This means that the value in response is only available during dispatch of the "progress" event and only contains the data received since the last "progress" event.

+ +

When response is accessed during a "progress" event it contains a string with the data. Otherwise it returns null.

+ +

This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}

+
"ms-stream"{{non-standard_inline}} +

Indique que la réponse est une partie d'un téléchargement d'un flux (?). Supporté uniquement pour les requêtes des téléchargements et disponible uniquement dans Internet Explorer.

+
+ +
+

Note: À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut responseType lors des requêtes synchrones. Cela renvoi l'erreur NS_ERROR_DOM_INVALID_ACCESS_ERR. Ce changement a été proposé au W3C afin d'être standardisé. 

+
+ +

Example

+ +
var url = 'somePage.html'; // une page locale
+
+function load(url, callback) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      console.log(xhr.response); // Par défault une DOMString
+    }
+  }
+
+  xhr.open('GET', url, true);
+  xhr.send('');
+}
+
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-response-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.XMLHttpRequest")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.html b/files/fr/web/api/xmlhttprequest/responsetext/index.html deleted file mode 100644 index e9df4fd81a..0000000000 --- a/files/fr/web/api/xmlhttprequest/responsetext/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: XMLHttpRequest.responseText -slug: Web/API/XMLHttpRequest/responseText -translation_of: Web/API/XMLHttpRequest/responseText ---- -
{{draft}}
- -
{{APIRef('XMLHttpRequest')}}
- -

La lecture seule {{domxref("XMLHttpRequest")}} propriété responseText renvoie le texte reçu d'un serveur suite à l'envoi d'une requête.

- -

Syntax

- -
var resultText = XMLHttpRequest.responseText;
- -

Value

- -

A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide duXMLHttpRequest ou null si la demande a échoué ou "" si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}.

- -

Lors du traitement d'une requête asynchrone, la valeur de responseText reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues.

- -

Vous savez que tout le contenu a été reçu lorsque la valeur de {{domxref("XMLHttpRequest.readyState", "readyState")}} deviens {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (4), et {{domxref("XMLHttpRequest.status", "status")}} becomes 200 ("OK").

- -

Exceptions

- -
-
InvalidStateError
-
Le {{domxref("XMLHttpRequest.responseType")}} n'est défini ni sur la chaîne vide ni sur "texte". Étant donné que la propriété responseText n'est valide que pour le contenu texte, toute autre valeur est une condition d'erreur.
-
- -

Example

- -
var xhr = new XMLHttpRequest();
-xhr.open('GET', '/server', true);
-
-// If specified, responseType must be empty string or "text"
-xhr.responseType = 'text';
-
-xhr.onload = function () {
-    if (xhr.readyState === xhr.DONE) {
-        if (xhr.status === 200) {
-            console.log(xhr.response);
-            console.log(xhr.responseText);
-        }
-    }
-};
-
-xhr.send(null);
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
- -

Browser compatibility

- -

{{Compat("api.XMLHttpRequest.responseText")}}

diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.md b/files/fr/web/api/xmlhttprequest/responsetext/index.md new file mode 100644 index 0000000000..e9df4fd81a --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/responsetext/index.md @@ -0,0 +1,71 @@ +--- +title: XMLHttpRequest.responseText +slug: Web/API/XMLHttpRequest/responseText +translation_of: Web/API/XMLHttpRequest/responseText +--- +
{{draft}}
+ +
{{APIRef('XMLHttpRequest')}}
+ +

La lecture seule {{domxref("XMLHttpRequest")}} propriété responseText renvoie le texte reçu d'un serveur suite à l'envoi d'une requête.

+ +

Syntax

+ +
var resultText = XMLHttpRequest.responseText;
+ +

Value

+ +

A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide duXMLHttpRequest ou null si la demande a échoué ou "" si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}.

+ +

Lors du traitement d'une requête asynchrone, la valeur de responseText reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues.

+ +

Vous savez que tout le contenu a été reçu lorsque la valeur de {{domxref("XMLHttpRequest.readyState", "readyState")}} deviens {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (4), et {{domxref("XMLHttpRequest.status", "status")}} becomes 200 ("OK").

+ +

Exceptions

+ +
+
InvalidStateError
+
Le {{domxref("XMLHttpRequest.responseType")}} n'est défini ni sur la chaîne vide ni sur "texte". Étant donné que la propriété responseText n'est valide que pour le contenu texte, toute autre valeur est une condition d'erreur.
+
+ +

Example

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// If specified, responseType must be empty string or "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ +

{{Compat("api.XMLHttpRequest.responseText")}}

diff --git a/files/fr/web/api/xmlhttprequest/send/index.html b/files/fr/web/api/xmlhttprequest/send/index.html deleted file mode 100644 index 26f77bf14a..0000000000 --- a/files/fr/web/api/xmlhttprequest/send/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: XMLHttpRequest.send() -slug: Web/API/XMLHttpRequest/send -tags: - - AJAX - - API - - Besoin d'exemples - - Besoin de Contenu - - Method - - References - - Requête XMLHttp - - XHR - - requête HTTP - - requête XHR - - send -translation_of: Web/API/XMLHttpRequest/send ---- -
{{APIRef('XMLHttpRequest')}}
- -

La méthode  {{domxref("XMLHttpRequest")}} send() envoie la requête au serveur.  Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée.

- -

send() accepte un paramètre optionnel qui qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme  {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre body est ignoré et le corps de la requête est fixé à null.

- -

Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" Accept avec le type "*/*" (tous types) est envoyé.

- -

Syntaxe

- -
XMLHttpRequest.send(body)
-
- -

Paramètres

- -
-
body {{optional_inline}}
-
Le corps des données à envoyer dans la requête XHR. Cela peut être : -
    -
  • Un {{domxref("Document")}}, dans quel cas il est sérialisé avant d'être envoyé.
    • -
  • Un XMLHttpRequestBodyInit , dont le which standard Fetch peut être un  {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou un objet  {{domxref("USVString")}} .
    • -
  • null
    • -
- Si la valeur du corps n'est pas spécifiée, la valeur par défaut null est employée.
-
- -

La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou  {{domxref("Blob")}} en conjonction avec la méthode send().

- -

Valeur de retour

- -

undefined.

- -

Exceptions

- - - - - - - - - - - - - - - - - - -
ExceptionDescription
InvalidStateErrorsend() a déjà été invoquée pour la requête, et/ou celle-ci est incomplète.
NetworkErrorLe type de ressource à récupérer est un BLOB, (binary large object) , et la méthode n'est pas GET.
- -

Exemple: GET

- -
var xhr = new XMLHttpRequest();
-xhr.open('GET', '/server', true);
-
-xhr.onload = function () {
-  // Requête finie, traitement ici.
-};
-
-xhr.send(null);
-// xhr.send('string');
-// xhr.send(new Blob());
-// xhr.send(new Int8Array());
-// xhr.send(document);
-
- -

Example: POST

- -
var xhr = new XMLHttpRequest();
-xhr.open("POST", '/server', true);
-
-//Envoie les informations du header adaptées avec la requête
-xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-
-xhr.onreadystatechange = function() { //Appelle une fonction au changement d'état.
-    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
-// Requête finie, traitement ici.
-    }
-}
-xhr.send("foo=bar&lorem=ipsum");
-// xhr.send(new Int8Array());
-// xhr.send(document);
-
- -

Spécificités

- - - - - - - - - - - - - - - - -
SpecificitéStatutCommentaire
{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
- -

Compatibilité navigateur

- -
{{Compat("api.XMLHttpRequest.send")}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/xmlhttprequest/send/index.md b/files/fr/web/api/xmlhttprequest/send/index.md new file mode 100644 index 0000000000..26f77bf14a --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/send/index.md @@ -0,0 +1,133 @@ +--- +title: XMLHttpRequest.send() +slug: Web/API/XMLHttpRequest/send +tags: + - AJAX + - API + - Besoin d'exemples + - Besoin de Contenu + - Method + - References + - Requête XMLHttp + - XHR + - requête HTTP + - requête XHR + - send +translation_of: Web/API/XMLHttpRequest/send +--- +
{{APIRef('XMLHttpRequest')}}
+ +

La méthode  {{domxref("XMLHttpRequest")}} send() envoie la requête au serveur.  Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée.

+ +

send() accepte un paramètre optionnel qui qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme  {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre body est ignoré et le corps de la requête est fixé à null.

+ +

Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" Accept avec le type "*/*" (tous types) est envoyé.

+ +

Syntaxe

+ +
XMLHttpRequest.send(body)
+
+ +

Paramètres

+ +
+
body {{optional_inline}}
+
Le corps des données à envoyer dans la requête XHR. Cela peut être : +
    +
  • Un {{domxref("Document")}}, dans quel cas il est sérialisé avant d'être envoyé.
    • +
  • Un XMLHttpRequestBodyInit , dont le which standard Fetch peut être un  {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou un objet  {{domxref("USVString")}} .
    • +
  • null
    • +
+ Si la valeur du corps n'est pas spécifiée, la valeur par défaut null est employée.
+
+ +

La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou  {{domxref("Blob")}} en conjonction avec la méthode send().

+ +

Valeur de retour

+ +

undefined.

+ +

Exceptions

+ + + + + + + + + + + + + + + + + + +
ExceptionDescription
InvalidStateErrorsend() a déjà été invoquée pour la requête, et/ou celle-ci est incomplète.
NetworkErrorLe type de ressource à récupérer est un BLOB, (binary large object) , et la méthode n'est pas GET.
+ +

Exemple: GET

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.onload = function () {
+  // Requête finie, traitement ici.
+};
+
+xhr.send(null);
+// xhr.send('string');
+// xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send(document);
+
+ +

Example: POST

+ +
var xhr = new XMLHttpRequest();
+xhr.open("POST", '/server', true);
+
+//Envoie les informations du header adaptées avec la requête
+xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+xhr.onreadystatechange = function() { //Appelle une fonction au changement d'état.
+    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+// Requête finie, traitement ici.
+    }
+}
+xhr.send("foo=bar&lorem=ipsum");
+// xhr.send(new Int8Array());
+// xhr.send(document);
+
+ +

Spécificités

+ + + + + + + + + + + + + + + + +
SpecificitéStatutCommentaire
{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilité navigateur

+ +
{{Compat("api.XMLHttpRequest.send")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.html b/files/fr/web/api/xmlhttprequest/setrequestheader/index.html deleted file mode 100644 index ed3689fd8d..0000000000 --- a/files/fr/web/api/xmlhttprequest/setrequestheader/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: XMLHttpRequest.setRequestHeader() -slug: Web/API/XMLHttpRequest/setRequestHeader -translation_of: Web/API/XMLHttpRequest/setRequestHeader ---- -
{{APIRef('XMLHttpRequest')}}
- -

La méthode setRequestHeader() de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode setRequestHeader(), après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à setRequestHeader() dans une même requête, tout sera combiné au sein d'un même header.

- -

A chaque fois que vous appellez setRequestHeader(), son contenu est ajouté à la fin du header existant.

- -

Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un Accept header avec le type "*/*" sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée.

- -

Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

- -
-

Note: Dans certain cas, vous pourrez rencontrer l'erreur / exception "not allowed by Access-Control-Allow-Headers in preflight response" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur.

-
- -

Syntax

- -
XMLHttpRequest.setRequestHeader(header, value)
-
- -

Paramètre

- -
-
header
-
Le paramètre du header.
-
value
-
La valeur de ce paramètre.
-
- -

Valeurs de retour

- -

undefined.

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
- -

Compatibilitée avec les navigateurs

- -

{{Compat("api.XMLHttpRequest.setRequestHeader")}}

- -

A voir aussi

- - diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md new file mode 100644 index 0000000000..ed3689fd8d --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md @@ -0,0 +1,64 @@ +--- +title: XMLHttpRequest.setRequestHeader() +slug: Web/API/XMLHttpRequest/setRequestHeader +translation_of: Web/API/XMLHttpRequest/setRequestHeader +--- +
{{APIRef('XMLHttpRequest')}}
+ +

La méthode setRequestHeader() de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode setRequestHeader(), après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à setRequestHeader() dans une même requête, tout sera combiné au sein d'un même header.

+ +

A chaque fois que vous appellez setRequestHeader(), son contenu est ajouté à la fin du header existant.

+ +

Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un Accept header avec le type "*/*" sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée.

+ +

Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

+ +
+

Note: Dans certain cas, vous pourrez rencontrer l'erreur / exception "not allowed by Access-Control-Allow-Headers in preflight response" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur.

+
+ +

Syntax

+ +
XMLHttpRequest.setRequestHeader(header, value)
+
+ +

Paramètre

+ +
+
header
+
Le paramètre du header.
+
value
+
La valeur de ce paramètre.
+
+ +

Valeurs de retour

+ +

undefined.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilitée avec les navigateurs

+ +

{{Compat("api.XMLHttpRequest.setRequestHeader")}}

+ +

A voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequest/status/index.html b/files/fr/web/api/xmlhttprequest/status/index.html deleted file mode 100644 index a6fe81eda6..0000000000 --- a/files/fr/web/api/xmlhttprequest/status/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: XMLHttpRequest.status -slug: Web/API/XMLHttpRequest/status -translation_of: Web/API/XMLHttpRequest/status ---- -
{{APIRef('XMLHttpRequest')}}
- -

La propriété en lecture seule XMLHttpRequest.status renvoie le code d'état HTTP numérique de la réponse de XMLHttpRequest.

- -

Avant que la demande ne se termine, la valeur du statut est 0. Les navigateurs signalent également un statut de 0 en cas d'erreurs XMLHttpRequest.

- -

Exemple

- -
var xhr = new XMLHttpRequest();
-console.log('UNSENT: ', xhr.status);
-
-xhr.open('GET', '/server');
-console.log('OPENED: ', xhr.status);
-
-xhr.onprogress = function () {
-  console.log('LOADING: ', xhr.status);
-};
-
-xhr.onload = function () {
-  console.log('DONE: ', xhr.status);
-};
-
-xhr.send();
-
-/**
- * Outputs the following:
- *
- * UNSENT: 0
- * OPENED: 0
- * LOADING: 200
- * DONE: 200
- */
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatutComment
{{SpecName('XMLHttpRequest', '#the-status-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.XMLHttpRequest.status")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/xmlhttprequest/status/index.md b/files/fr/web/api/xmlhttprequest/status/index.md new file mode 100644 index 0000000000..a6fe81eda6 --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/status/index.md @@ -0,0 +1,68 @@ +--- +title: XMLHttpRequest.status +slug: Web/API/XMLHttpRequest/status +translation_of: Web/API/XMLHttpRequest/status +--- +
{{APIRef('XMLHttpRequest')}}
+ +

La propriété en lecture seule XMLHttpRequest.status renvoie le code d'état HTTP numérique de la réponse de XMLHttpRequest.

+ +

Avant que la demande ne se termine, la valeur du statut est 0. Les navigateurs signalent également un statut de 0 en cas d'erreurs XMLHttpRequest.

+ +

Exemple

+ +
var xhr = new XMLHttpRequest();
+console.log('UNSENT: ', xhr.status);
+
+xhr.open('GET', '/server');
+console.log('OPENED: ', xhr.status);
+
+xhr.onprogress = function () {
+  console.log('LOADING: ', xhr.status);
+};
+
+xhr.onload = function () {
+  console.log('DONE: ', xhr.status);
+};
+
+xhr.send();
+
+/**
+ * Outputs the following:
+ *
+ * UNSENT: 0
+ * OPENED: 0
+ * LOADING: 200
+ * DONE: 200
+ */
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatutComment
{{SpecName('XMLHttpRequest', '#the-status-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.XMLHttpRequest.status")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequest/timeout/index.html b/files/fr/web/api/xmlhttprequest/timeout/index.html deleted file mode 100644 index e3dc91ab6b..0000000000 --- a/files/fr/web/api/xmlhttprequest/timeout/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: XMLHttpRequest.timeout -slug: Web/API/XMLHttpRequest/timeout -tags: - - AJAX - - API - - Propriété - - Reference - - XHR - - XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/timeout ---- -
{{APIRef('XMLHttpRequest')}}
- -

La propriété XMLHttpRequest.timeout est un unsigned long (un entier long, non-signé) représentant la durée, en millisecondes, qu'une requête peut prendre avant d'être automatiquement terminée. Par défaut, la valeur est 0 et il n'y pas de timeout. Lorsqu'une requête expire, un évènement timeout est déclenché.

- -
-

Note : Pour un exemple, voir Utiliser la propriété timeout avec une requête asynchrone.

-
- -
-

Note : Ces délais d'expiration ne devraient pas être utilisés pour les requêtes XMLHttpRequest synchrones dans un environnement de document : ils déclencheront une exception InvalidAccessError. On ne peut donc pas utiliser de timeout pour les requêtes synchrones avec une fenêtre parente.

-
- -

Exemples

- -
var xhr = new XMLHttpRequest();
-xhr.open('GET', '/server', true);
-
-xhr.timeout = 2000; // durée en millisecondes
-
-xhr.onload = function () {
-  // Requête terminée. On traite le résultat ici.
-};
-
-xhr.ontimeout = function (e) {
-  // Requête qui a expiré. On traite ce cas.
-};
-
-xhr.send(null);
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}{{Spec2('XMLHttpRequest')}}Standard évolutif WHATWG
- -

Compatibilité des navigateurs

- -

{{Compat("api.XMLHttpRequest.timeout")}}

- -

Pour Internet Explorer, la propriété timeout ne peut être définie qu'après avoir appelé la méthode open() et avant d'appeler la méthode send().

diff --git a/files/fr/web/api/xmlhttprequest/timeout/index.md b/files/fr/web/api/xmlhttprequest/timeout/index.md new file mode 100644 index 0000000000..e3dc91ab6b --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/timeout/index.md @@ -0,0 +1,65 @@ +--- +title: XMLHttpRequest.timeout +slug: Web/API/XMLHttpRequest/timeout +tags: + - AJAX + - API + - Propriété + - Reference + - XHR + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/timeout +--- +
{{APIRef('XMLHttpRequest')}}
+ +

La propriété XMLHttpRequest.timeout est un unsigned long (un entier long, non-signé) représentant la durée, en millisecondes, qu'une requête peut prendre avant d'être automatiquement terminée. Par défaut, la valeur est 0 et il n'y pas de timeout. Lorsqu'une requête expire, un évènement timeout est déclenché.

+ +
+

Note : Pour un exemple, voir Utiliser la propriété timeout avec une requête asynchrone.

+
+ +
+

Note : Ces délais d'expiration ne devraient pas être utilisés pour les requêtes XMLHttpRequest synchrones dans un environnement de document : ils déclencheront une exception InvalidAccessError. On ne peut donc pas utiliser de timeout pour les requêtes synchrones avec une fenêtre parente.

+
+ +

Exemples

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // durée en millisecondes
+
+xhr.onload = function () {
+  // Requête terminée. On traite le résultat ici.
+};
+
+xhr.ontimeout = function (e) {
+  // Requête qui a expiré. On traite ce cas.
+};
+
+xhr.send(null);
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}{{Spec2('XMLHttpRequest')}}Standard évolutif WHATWG
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.XMLHttpRequest.timeout")}}

+ +

Pour Internet Explorer, la propriété timeout ne peut être définie qu'après avoir appelé la méthode open() et avant d'appeler la méthode send().

diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html deleted file mode 100644 index a2d850ed5d..0000000000 --- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html +++ /dev/null @@ -1,770 +0,0 @@ ---- -title: Utiliser XMLHttpRequest -slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest -tags: - - AJAX - - File API - - FormData - - JXON - - Progression - - Téléchargement - - XML - - XMLHttpRequest - - upload -translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest -original_slug: Web/API/XMLHttpRequest/Utiliser_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 :

- - - -

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 :

- - - -

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 :

- - - -

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/using_xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md new file mode 100644 index 0000000000..a2d850ed5d --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md @@ -0,0 +1,770 @@ +--- +title: Utiliser XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +tags: + - AJAX + - File API + - FormData + - JXON + - Progression + - Téléchargement + - XML + - XMLHttpRequest + - upload +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +original_slug: Web/API/XMLHttpRequest/Utiliser_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 :

+ + + +

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 :

+ + + +

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 :

+ + + +

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/withcredentials/index.html b/files/fr/web/api/xmlhttprequest/withcredentials/index.html deleted file mode 100644 index 62aa08feb7..0000000000 --- a/files/fr/web/api/xmlhttprequest/withcredentials/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: XMLHttpRequest.withCredentials -slug: Web/API/XMLHttpRequest/withCredentials -tags: - - API - - Propriété - - Reference - - XHR - - XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/withCredentials ---- -
{{APIRef('XMLHttpRequest')}}
- -

La propriété XMLHttpRequest.withCredentials est un booléen qui indique si une requête Access-Control entre plusieurs sites devrait être réalisée avec des informations d'authentification (credentials) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer withCredentials n'aura aucun impact sur les requêtes effectuées sur un même site.

- -

Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à false. Une requête XMLHttpRequest d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que withCredentials vaille true avant la requête.

- -

Les cookies tiers obtenus lorsque withCredentials vaut true continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via document.cookie ou depuis les en-têtes de la réponse.

- -
-

Note : Cette propriété n'a aucun impact pour les requêtes effectuées sur le même site.

-
- -
-

Note : Les réponses XMLHttpRequest provenant d'un domaine différent ne peuvent pas définir de cookies pour ce domaine à moins d'avoir withCredentials à true avant l'envoi de la requête (quelle que soit la valeur de l'en-tête Access-Control-).

-
- -

Exemples

- -
var xhr = new XMLHttpRequest();
-xhr.open('GET', 'http://example.com/', true);
-xhr.withCredentials = true;
-xhr.send(null);
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}}{{Spec2('XMLHttpRequest')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.XMLHttpRequest.withCredentials")}}

diff --git a/files/fr/web/api/xmlhttprequest/withcredentials/index.md b/files/fr/web/api/xmlhttprequest/withcredentials/index.md new file mode 100644 index 0000000000..62aa08feb7 --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/withcredentials/index.md @@ -0,0 +1,54 @@ +--- +title: XMLHttpRequest.withCredentials +slug: Web/API/XMLHttpRequest/withCredentials +tags: + - API + - Propriété + - Reference + - XHR + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/withCredentials +--- +
{{APIRef('XMLHttpRequest')}}
+ +

La propriété XMLHttpRequest.withCredentials est un booléen qui indique si une requête Access-Control entre plusieurs sites devrait être réalisée avec des informations d'authentification (credentials) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer withCredentials n'aura aucun impact sur les requêtes effectuées sur un même site.

+ +

Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à false. Une requête XMLHttpRequest d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que withCredentials vaille true avant la requête.

+ +

Les cookies tiers obtenus lorsque withCredentials vaut true continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via document.cookie ou depuis les en-têtes de la réponse.

+ +
+

Note : Cette propriété n'a aucun impact pour les requêtes effectuées sur le même site.

+
+ +
+

Note : Les réponses XMLHttpRequest provenant d'un domaine différent ne peuvent pas définir de cookies pour ce domaine à moins d'avoir withCredentials à true avant l'envoi de la requête (quelle que soit la valeur de l'en-tête Access-Control-).

+
+ +

Exemples

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/', true);
+xhr.withCredentials = true;
+xhr.send(null);
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}}{{Spec2('XMLHttpRequest')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.XMLHttpRequest.withCredentials")}}

diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html deleted file mode 100644 index 0e708d3463..0000000000 --- a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: XMLHttpRequest() -slug: Web/API/XMLHttpRequest/XMLHttpRequest -tags: - - API - - Accès serveur - - Besoin d'exemples - - Compatibilité des navigateurs - - Constructeur - - Créer un XMLHttpRequest - - Lire des données - - Reference - - Récupérer des données - - XHR - - XMLHttpRequest -translation_of: Web/API/XMLHttpRequest/XMLHttpRequest ---- -
{{draft}}{{APIRef('XMLHttpRequest')}}
- -

Le constructeur XMLHttpRequest() crée une nouvelle instance {{domxref("XMLHttpRequest")}}.

- -

Pour plus de détails sur l'utilisation de XMLHttpRequest, voir Using XMLHttpRequest.

- -

Syntax

- -
const request = new XMLHttpRequest();
-
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum initialisé par l'appel de {{domxref("XMLHttpRequest.open", "open()")}} avant d'appeler {{domxref("XMLHttpRequest.send", "send()")}} pour envoyer la requête au serveur.

- -

La syntaxe de Firefox non-standard

- -

Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau mozAnon à true revient à être identique au constructeur AnonXMLHttpRequest() décrit dans de vieilles versions des  specifications de XMLHttpRequest.

- -
const request = new XMLHttpRequest(paramsDictionary);
- -

Paramètres (non standard)

- -
-
objParameters {{gecko_minversion_inline("16.0")}}
-
Il y a deux drapeaux qui peuvent être activés -
-
mozAnon
-
Booléen: Mettre ce drapeau à true évitera au navigateur d'exposer le {{Glossary("origin")}} and credentials de l'utilisateur lors de la récupération des ressources. Plus important, cela signifie que les {{Glossary("Cookie", "cookies")}} ne seront pas envoyés, sauf si ils sont clairement ajoutés en utilisant setRequestHeader.
-
mozSystem
-
Booléen: Mettre ce drapeau à true autorise les connections cross-site sans requérir le serveur à utiliser {{Glossary("CORS")}}. Paramètre requis : mozAnon: true, i.e. cela ne peut pas être combiné avec l'envoi de cookies ou d'autres identifiants utilisateurs. Cela fonctionne seulement sur les applications autorisées ({{Bug("692677")}}); ne marche pas sur les pages chargées arbitraitement dans Firefox
-
-
-
- -

Voir aussi

- - diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md new file mode 100644 index 0000000000..0e708d3463 --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md @@ -0,0 +1,62 @@ +--- +title: XMLHttpRequest() +slug: Web/API/XMLHttpRequest/XMLHttpRequest +tags: + - API + - Accès serveur + - Besoin d'exemples + - Compatibilité des navigateurs + - Constructeur + - Créer un XMLHttpRequest + - Lire des données + - Reference + - Récupérer des données + - XHR + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/XMLHttpRequest +--- +
{{draft}}{{APIRef('XMLHttpRequest')}}
+ +

Le constructeur XMLHttpRequest() crée une nouvelle instance {{domxref("XMLHttpRequest")}}.

+ +

Pour plus de détails sur l'utilisation de XMLHttpRequest, voir Using XMLHttpRequest.

+ +

Syntax

+ +
const request = new XMLHttpRequest();
+
+ +

Paramètres

+ +

Aucun.

+ +

Valeur retournée

+ +

Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum initialisé par l'appel de {{domxref("XMLHttpRequest.open", "open()")}} avant d'appeler {{domxref("XMLHttpRequest.send", "send()")}} pour envoyer la requête au serveur.

+ +

La syntaxe de Firefox non-standard

+ +

Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau mozAnon à true revient à être identique au constructeur AnonXMLHttpRequest() décrit dans de vieilles versions des  specifications de XMLHttpRequest.

+ +
const request = new XMLHttpRequest(paramsDictionary);
+ +

Paramètres (non standard)

+ +
+
objParameters {{gecko_minversion_inline("16.0")}}
+
Il y a deux drapeaux qui peuvent être activés +
+
mozAnon
+
Booléen: Mettre ce drapeau à true évitera au navigateur d'exposer le {{Glossary("origin")}} and credentials de l'utilisateur lors de la récupération des ressources. Plus important, cela signifie que les {{Glossary("Cookie", "cookies")}} ne seront pas envoyés, sauf si ils sont clairement ajoutés en utilisant setRequestHeader.
+
mozSystem
+
Booléen: Mettre ce drapeau à true autorise les connections cross-site sans requérir le serveur à utiliser {{Glossary("CORS")}}. Paramètre requis : mozAnon: true, i.e. cela ne peut pas être combiné avec l'envoi de cookies ou d'autres identifiants utilisateurs. Cela fonctionne seulement sur les applications autorisées ({{Bug("692677")}}); ne marche pas sur les pages chargées arbitraitement dans Firefox
+
+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequesteventtarget/index.html b/files/fr/web/api/xmlhttprequesteventtarget/index.html deleted file mode 100644 index dc5b1c1185..0000000000 --- a/files/fr/web/api/xmlhttprequesteventtarget/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: XMLHttpRequestEventTarget -slug: Web/API/XMLHttpRequestEventTarget -tags: - - AJAX - - API - - NeedsBrowserCompatibility - - NeedsContent - - Reference - - TopicStub - - XMLHttpRequest -translation_of: Web/API/XMLHttpRequestEventTarget ---- -

{{APIRef("XMLHttpRequest")}}

- -

XMLHttpRequestEventTarget est l'interface qui décrit les gestionnaires d'événements que vous pouvez implémenter dans un objet qui gérera les événements pour un {{ domxref("XMLHttpRequest") }}.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -
-
{{ domxref("XMLHttpRequestEventTarget.onabort") }}
-
Contient la fonction à appeler lorsqu'une demande est abandonnée et que l'événement {{event('abort')}} est reçu par cet objet.
-
{{ domxref("XMLHttpRequestEventTarget.onerror") }}
-
Contient la fonction à appeler lorsqu'une demande rencontre une erreur et que l'événement {{event('error')}} est reçu par cet objet.
-
{{ domxref("XMLHttpRequestEventTarget.onload") }}
-
Contient la fonction à appeler lorsqu'une requête HTTP revient après avoir récupéré le contenu avec succès et que l'événement {{event('load')}} est reçu par cet objet.
-
{{ domxref("XMLHttpRequestEventTarget.onloadstart") }}
-
Contient la fonction qui est appelée lorsque la requête HTTP commence à charger des données et que l'événement {{event('loadstart')}} est reçu par cet objet.
-
{{ domxref("XMLHttpRequestEventTarget.onprogress") }}
-
Contient la fonction qui est appelée périodiquement avec des informations sur l'avancement de la demande et l'événement {{event('progress')}} est reçu par cet objet.
-
{{ domxref("XMLHttpRequestEventTarget.ontimeout") }}
-
Contient la fonction qui est appelée si l'événement expire et que l'événement {{event("timeout")}} est reçu par cet objet ; cela ne se produit que si un délai d'attente a été préalablement établi en définissant la valeur de l'attribut timeout de l'objet XMLHttpRequest.
-
{{ domxref("XMLHttpRequestEventTarget.onloadend") }}
-
Contient la fonction qui est appelée lorsque le chargement est terminé, même si la demande a échoué, et que l'événement {{event('loadend')}} est reçu par cet objet.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
- -

Compatibilité des navigateurs

- -

{{Compat("api.XMLHttpRequestEventTarget")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/xmlhttprequesteventtarget/index.md b/files/fr/web/api/xmlhttprequesteventtarget/index.md new file mode 100644 index 0000000000..dc5b1c1185 --- /dev/null +++ b/files/fr/web/api/xmlhttprequesteventtarget/index.md @@ -0,0 +1,65 @@ +--- +title: XMLHttpRequestEventTarget +slug: Web/API/XMLHttpRequestEventTarget +tags: + - AJAX + - API + - NeedsBrowserCompatibility + - NeedsContent + - Reference + - TopicStub + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequestEventTarget +--- +

{{APIRef("XMLHttpRequest")}}

+ +

XMLHttpRequestEventTarget est l'interface qui décrit les gestionnaires d'événements que vous pouvez implémenter dans un objet qui gérera les événements pour un {{ domxref("XMLHttpRequest") }}.

+ +

{{InheritanceDiagram}}

+ +

Propriétés

+ +
+
{{ domxref("XMLHttpRequestEventTarget.onabort") }}
+
Contient la fonction à appeler lorsqu'une demande est abandonnée et que l'événement {{event('abort')}} est reçu par cet objet.
+
{{ domxref("XMLHttpRequestEventTarget.onerror") }}
+
Contient la fonction à appeler lorsqu'une demande rencontre une erreur et que l'événement {{event('error')}} est reçu par cet objet.
+
{{ domxref("XMLHttpRequestEventTarget.onload") }}
+
Contient la fonction à appeler lorsqu'une requête HTTP revient après avoir récupéré le contenu avec succès et que l'événement {{event('load')}} est reçu par cet objet.
+
{{ domxref("XMLHttpRequestEventTarget.onloadstart") }}
+
Contient la fonction qui est appelée lorsque la requête HTTP commence à charger des données et que l'événement {{event('loadstart')}} est reçu par cet objet.
+
{{ domxref("XMLHttpRequestEventTarget.onprogress") }}
+
Contient la fonction qui est appelée périodiquement avec des informations sur l'avancement de la demande et l'événement {{event('progress')}} est reçu par cet objet.
+
{{ domxref("XMLHttpRequestEventTarget.ontimeout") }}
+
Contient la fonction qui est appelée si l'événement expire et que l'événement {{event("timeout")}} est reçu par cet objet ; cela ne se produit que si un délai d'attente a été préalablement établi en définissant la valeur de l'attribut timeout de l'objet XMLHttpRequest.
+
{{ domxref("XMLHttpRequestEventTarget.onloadend") }}
+
Contient la fonction qui est appelée lorsque le chargement est terminé, même si la demande a échoué, et que l'événement {{event('loadend')}} est reçu par cet objet.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.XMLHttpRequestEventTarget")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html deleted file mode 100644 index 8a6afa0393..0000000000 --- a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: XMLHttpRequestEventTarget.onload -slug: Web/API/XMLHttpRequestEventTarget/onload -translation_of: Web/API/XMLHttpRequestEventTarget/onload ---- -

 

- -
{{APIRef("XMLHttpRequest")}}
- -

The XMLHttpRequestEventTarget.onload is the function called when an {{domxref("XMLHttpRequest")}} transaction completes successfully.

- -

Syntax

- -
XMLHttpRequest.onload = callback;
- -

Values

- - - -

Example

- -
var xmlhttp = new XMLHttpRequest(),
-  method = 'GET',
-  url = 'https://developer.mozilla.org/';
-
-xmlhttp.open(method, url, true);
-xmlhttp.onload = function () {
-  // Do something with the retrieved data ( found in xmlhttp.response )
-};
-xmlhttp.send();
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onload')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
- -

Browser compatibility

- - - -

{{Compat("api.XMLHttpRequestEventTarget.onload")}}

diff --git a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.md b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.md new file mode 100644 index 0000000000..8a6afa0393 --- /dev/null +++ b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.md @@ -0,0 +1,56 @@ +--- +title: XMLHttpRequestEventTarget.onload +slug: Web/API/XMLHttpRequestEventTarget/onload +translation_of: Web/API/XMLHttpRequestEventTarget/onload +--- +

 

+ +
{{APIRef("XMLHttpRequest")}}
+ +

The XMLHttpRequestEventTarget.onload is the function called when an {{domxref("XMLHttpRequest")}} transaction completes successfully.

+ +

Syntax

+ +
XMLHttpRequest.onload = callback;
+ +

Values

+ + + +

Example

+ +
var xmlhttp = new XMLHttpRequest(),
+  method = 'GET',
+  url = 'https://developer.mozilla.org/';
+
+xmlhttp.open(method, url, true);
+xmlhttp.onload = function () {
+  // Do something with the retrieved data ( found in xmlhttp.response )
+};
+xmlhttp.send();
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onload')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ + + +

{{Compat("api.XMLHttpRequestEventTarget.onload")}}

diff --git a/files/fr/web/api/xmlserializer/index.html b/files/fr/web/api/xmlserializer/index.html deleted file mode 100644 index 00a7edf328..0000000000 --- a/files/fr/web/api/xmlserializer/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: XMLSerializer -slug: Web/API/XMLSerializer -tags: - - XML -translation_of: Web/API/XMLSerializer -original_slug: XMLSerializer ---- - -

XMLSerializer sert à convertir des sous-arborescence DOM ou des documents DOM en texte. XMLSerializer est accessible aux scripts sans privilèges.

- -
-

Note : 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/xmlserializer/index.md b/files/fr/web/api/xmlserializer/index.md new file mode 100644 index 0000000000..00a7edf328 --- /dev/null +++ b/files/fr/web/api/xmlserializer/index.md @@ -0,0 +1,57 @@ +--- +title: XMLSerializer +slug: Web/API/XMLSerializer +tags: + - XML +translation_of: Web/API/XMLSerializer +original_slug: XMLSerializer +--- + +

XMLSerializer sert à convertir des sous-arborescence DOM ou des documents DOM en texte. XMLSerializer est accessible aux scripts sans privilèges.

+ +
+

Note : 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/xpathexpression/index.html b/files/fr/web/api/xpathexpression/index.html deleted file mode 100644 index 7a6d6ce42d..0000000000 --- a/files/fr/web/api/xpathexpression/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: XPathExpression -slug: Web/API/XPathExpression -tags: - - API - - DOM - - Document - - XPath -translation_of: Web/API/XPathExpression ---- -

{{APIRef}}

- -

Une XPathExpression est une requête de XPath compilé renvoyée par {{domxref("document.createExpression()")}}. Elle a une méthode evaluate() qui peut être utilisée pour exécuter le XPath compilé.

- -

Méthodes

- - diff --git a/files/fr/web/api/xpathexpression/index.md b/files/fr/web/api/xpathexpression/index.md new file mode 100644 index 0000000000..7a6d6ce42d --- /dev/null +++ b/files/fr/web/api/xpathexpression/index.md @@ -0,0 +1,20 @@ +--- +title: XPathExpression +slug: Web/API/XPathExpression +tags: + - API + - DOM + - Document + - XPath +translation_of: Web/API/XPathExpression +--- +

{{APIRef}}

+ +

Une XPathExpression est une requête de XPath compilé renvoyée par {{domxref("document.createExpression()")}}. Elle a une méthode evaluate() qui peut être utilisée pour exécuter le XPath compilé.

+ +

Méthodes

+ + diff --git a/files/fr/web/api/xsltprocessor/basic_example/index.html b/files/fr/web/api/xsltprocessor/basic_example/index.html deleted file mode 100644 index fb6884c046..0000000000 --- a/files/fr/web/api/xsltprocessor/basic_example/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Exemple basique -slug: Web/API/XSLTProcessor/Basic_Example -translation_of: Web/API/XSLTProcessor/Basic_Example -original_slug: XSLT_dans_Gecko/Exemple_basique ---- -

    -
  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/basic_example/index.md b/files/fr/web/api/xsltprocessor/basic_example/index.md new file mode 100644 index 0000000000..fb6884c046 --- /dev/null +++ b/files/fr/web/api/xsltprocessor/basic_example/index.md @@ -0,0 +1,66 @@ +--- +title: Exemple basique +slug: Web/API/XSLTProcessor/Basic_Example +translation_of: Web/API/XSLTProcessor/Basic_Example +original_slug: XSLT_dans_Gecko/Exemple_basique +--- +

    +
  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 deleted file mode 100644 index 5ab86ed667..0000000000 --- a/files/fr/web/api/xsltprocessor/browser_differences/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Différences entre les navigateurs -slug: Web/API/XSLTProcessor/Browser_Differences -translation_of: Web/API/XSLTProcessor/Browser_Differences -original_slug: XSLT_dans_Gecko/Différences_entre_les_navigateurs ---- -

    -
  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

- - - -

{{PreviousNext("XSLT dans Gecko:Génération de HTML", "XSLT dans Gecko:Ressources")}}

diff --git a/files/fr/web/api/xsltprocessor/browser_differences/index.md b/files/fr/web/api/xsltprocessor/browser_differences/index.md new file mode 100644 index 0000000000..5ab86ed667 --- /dev/null +++ b/files/fr/web/api/xsltprocessor/browser_differences/index.md @@ -0,0 +1,23 @@ +--- +title: Différences entre les navigateurs +slug: Web/API/XSLTProcessor/Browser_Differences +translation_of: Web/API/XSLTProcessor/Browser_Differences +original_slug: XSLT_dans_Gecko/Différences_entre_les_navigateurs +--- +

    +
  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

+ + + +

{{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 deleted file mode 100644 index 59286d20d5..0000000000 --- a/files/fr/web/api/xsltprocessor/generating_html/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Génération de HTML -slug: Web/API/XSLTProcessor/Generating_HTML -translation_of: Web/API/XSLTProcessor/Generating_HTML -original_slug: XSLT_dans_Gecko/Génération_de_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/generating_html/index.md b/files/fr/web/api/xsltprocessor/generating_html/index.md new file mode 100644 index 0000000000..59286d20d5 --- /dev/null +++ b/files/fr/web/api/xsltprocessor/generating_html/index.md @@ -0,0 +1,191 @@ +--- +title: Génération de HTML +slug: Web/API/XSLTProcessor/Generating_HTML +translation_of: Web/API/XSLTProcessor/Generating_HTML +original_slug: XSLT_dans_Gecko/Génération_de_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/index.html b/files/fr/web/api/xsltprocessor/index.html deleted file mode 100644 index 68179a3bce..0000000000 --- a/files/fr/web/api/xsltprocessor/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: XSLTProcessor -slug: Web/API/XSLTProcessor -tags: - - API - - DOM - - DOM Reference - - Reference - - TopicStub - - XSLT -translation_of: Web/API/XSLTProcessor ---- -
{{APIRef("XSLT")}}
- -

Un XSLTProcessor applique une transformation de feuille de style XSLT à un document XML pour générer un nouveau document XML. Il fait appel à des méthodes pour charger la feuille de style XSLT, donner des valeurs aux paramètres <xsl:param> et pour appliquer les transformations au document.

- -

Syntaxe

- -

Le constructeur n'a pas de paramètre.

- -
new XSLTProcessor()
- -

Méthodes

- -
-
[Throws] void {{domxref("XSLTProcessor.importStylesheet")}}({{domxref("Node")}} styleSheet)
-
Importe une feuille de style XSLT. Si le nœud passé en argument est un nœud de document, vous pouvez passer une transformation XSL complète ou un transformation d'élèment résultant; sinon, il doit s'agir d'un élèment <xsl:stylesheet> ou <xsl:transform>.
-
[Throws] {{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}({{domxref("Node")}} source, {{domxref("Document")}} owner)
-
Transforme la source du nœud en applicant la fonction {{domxref("XSLTProcessor.importStylesheet()")}}. Le document propriétaire du fragment de document résultant est le nœud propriétaire.
-
[Throws] {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}({{domxref("Node")}} source)
-
-

Transforme la source du nœud en appliquant la feuille de style donnée lors de l'importation à l'aide de la fonction {{domxref ("XSLTProcessor.importStylesheet ()")}}.

- -

L'objet résultant dépend de la méthode de sortie de la feuille de style :

- - - - - - - - - - - - - - - - - - - - - - -
Méthode de sortieType de résultat
html{{domxref("HTMLDocument")}}
xml{{domxref("XMLDocument")}}
text{{domxref("XMLDocument")}} avec un seul élèment racine <transformiix:result> avec le texte comme enfant
-
-
[Throws] void {{domxref("XSLTProcessor.setParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName, any value)
-
Définit un paramètre dans la feuille de style XSLT qui a été importée. (Définit la valeur d'un <xsl:param>.) Une valeur nulle pour namespaceURI sera traitée comme une chaîne vide.
-
[Throws] any {{domxref("XSLTProcessor.getParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName)
-
Récupére un paramètre de la feuille de style XSLT. Une valeur nulle pour namespaceURI sera traitée comme une chaîne vide.
-
[Throws] void {{domxref("XSLTProcessor.removeParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName)
-
Supprime le paramètre s'il a déjà été défni. Le XSLTProcessor utilisera alors la valeur par défaut du paramètre. Si une valeur nulle est donnée pour namespaceURI, elle sera traitée comme une chaîne vide.
-
void {{domxref("XSLTProcessor.clearParameters()")}}
-
Supprime tous les paramètres définis dans le XSLTProcessor. Le XSLTProcessor utilisera alors les valeurs par défaut spécifiées dans la feuille de style XSLT.
-
void {{domxref("XSLTProcessor.reset()")}}
-
Supprime tous les paramétres et feuilles de style du XSLTProcessor.
-
- -

Propriétés

- -

Propriétés non-apparentes au Web

- -

Les propriétés suivantes sont [ChromeOnly] et ne sont pas apparentes au contenu Web :

- -
-
[ChromeOnly] attribute unsigned long {{domxref("XSLTProcessor.flags")}}
-
-

Drapeaux qui modifient le comportement du processeur. Pas de réinitialisation en appelant {{domxref("XSLTProcessor.reset()")}}. Valeur par défaut: 0

- -

Possible values are:

- - - - - - - - - - - - - - - - - - - - - -
NomValeurEffet
(None)0Aucun
DISABLE_ALL_LOADS1Désactiver le chargement de documents externes (par ex. <xsl:import> et document())
-
-
- -

Exemples

- -
    -
  1. Exemple simple
    2. -
  2. Exemple avancé
    3. -
  3. Exemple additionnel
    4. -
- -

Spécifications

- -

Ne fait partie d'aucune spécification. Il s'agit d'une interface propriétaire qui provient de Gecko.

- -

Gecko IDL

- - - -

Compatibilité des navigateurs

- -

{{Compat("api.XSLTProcessor")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/xsltprocessor/index.md b/files/fr/web/api/xsltprocessor/index.md new file mode 100644 index 0000000000..68179a3bce --- /dev/null +++ b/files/fr/web/api/xsltprocessor/index.md @@ -0,0 +1,135 @@ +--- +title: XSLTProcessor +slug: Web/API/XSLTProcessor +tags: + - API + - DOM + - DOM Reference + - Reference + - TopicStub + - XSLT +translation_of: Web/API/XSLTProcessor +--- +
{{APIRef("XSLT")}}
+ +

Un XSLTProcessor applique une transformation de feuille de style XSLT à un document XML pour générer un nouveau document XML. Il fait appel à des méthodes pour charger la feuille de style XSLT, donner des valeurs aux paramètres <xsl:param> et pour appliquer les transformations au document.

+ +

Syntaxe

+ +

Le constructeur n'a pas de paramètre.

+ +
new XSLTProcessor()
+ +

Méthodes

+ +
+
[Throws] void {{domxref("XSLTProcessor.importStylesheet")}}({{domxref("Node")}} styleSheet)
+
Importe une feuille de style XSLT. Si le nœud passé en argument est un nœud de document, vous pouvez passer une transformation XSL complète ou un transformation d'élèment résultant; sinon, il doit s'agir d'un élèment <xsl:stylesheet> ou <xsl:transform>.
+
[Throws] {{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}({{domxref("Node")}} source, {{domxref("Document")}} owner)
+
Transforme la source du nœud en applicant la fonction {{domxref("XSLTProcessor.importStylesheet()")}}. Le document propriétaire du fragment de document résultant est le nœud propriétaire.
+
[Throws] {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}({{domxref("Node")}} source)
+
+

Transforme la source du nœud en appliquant la feuille de style donnée lors de l'importation à l'aide de la fonction {{domxref ("XSLTProcessor.importStylesheet ()")}}.

+ +

L'objet résultant dépend de la méthode de sortie de la feuille de style :

+ + + + + + + + + + + + + + + + + + + + + + +
Méthode de sortieType de résultat
html{{domxref("HTMLDocument")}}
xml{{domxref("XMLDocument")}}
text{{domxref("XMLDocument")}} avec un seul élèment racine <transformiix:result> avec le texte comme enfant
+
+
[Throws] void {{domxref("XSLTProcessor.setParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName, any value)
+
Définit un paramètre dans la feuille de style XSLT qui a été importée. (Définit la valeur d'un <xsl:param>.) Une valeur nulle pour namespaceURI sera traitée comme une chaîne vide.
+
[Throws] any {{domxref("XSLTProcessor.getParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName)
+
Récupére un paramètre de la feuille de style XSLT. Une valeur nulle pour namespaceURI sera traitée comme une chaîne vide.
+
[Throws] void {{domxref("XSLTProcessor.removeParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName)
+
Supprime le paramètre s'il a déjà été défni. Le XSLTProcessor utilisera alors la valeur par défaut du paramètre. Si une valeur nulle est donnée pour namespaceURI, elle sera traitée comme une chaîne vide.
+
void {{domxref("XSLTProcessor.clearParameters()")}}
+
Supprime tous les paramètres définis dans le XSLTProcessor. Le XSLTProcessor utilisera alors les valeurs par défaut spécifiées dans la feuille de style XSLT.
+
void {{domxref("XSLTProcessor.reset()")}}
+
Supprime tous les paramétres et feuilles de style du XSLTProcessor.
+
+ +

Propriétés

+ +

Propriétés non-apparentes au Web

+ +

Les propriétés suivantes sont [ChromeOnly] et ne sont pas apparentes au contenu Web :

+ +
+
[ChromeOnly] attribute unsigned long {{domxref("XSLTProcessor.flags")}}
+
+

Drapeaux qui modifient le comportement du processeur. Pas de réinitialisation en appelant {{domxref("XSLTProcessor.reset()")}}. Valeur par défaut: 0

+ +

Possible values are:

+ + + + + + + + + + + + + + + + + + + + + +
NomValeurEffet
(None)0Aucun
DISABLE_ALL_LOADS1Désactiver le chargement de documents externes (par ex. <xsl:import> et document())
+
+
+ +

Exemples

+ +
    +
  1. Exemple simple
    2. +
  2. Exemple avancé
    3. +
  3. Exemple additionnel
    4. +
+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. Il s'agit d'une interface propriétaire qui provient de Gecko.

+ +

Gecko IDL

+ + + +

Compatibilité des navigateurs

+ +

{{Compat("api.XSLTProcessor")}}

+ +

Voir aussi

+ + 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 deleted file mode 100644 index e98799df65..0000000000 --- a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: FAQ sur les transformations XSL dans Mozilla -slug: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ -tags: - - XSLT -translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ -original_slug: FAQ_sur_les_transformations_XSL_dans_Mozilla ---- - -

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

\ No newline at end of file diff --git a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md new file mode 100644 index 0000000000..e98799df65 --- /dev/null +++ b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md @@ -0,0 +1,48 @@ +--- +title: FAQ sur les transformations XSL dans Mozilla +slug: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ +tags: + - XSLT +translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ +original_slug: FAQ_sur_les_transformations_XSL_dans_Mozilla +--- + +

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

\ No newline at end of file -- cgit v1.2.3-54-g00ecf